theis.gaedigk/wg-easy-ca-lose
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feat: variants (#1885)

Browse Source 
add primary & secondary button & actionfield
This commit is contained in:
Bernd Storath
2025-05-28 11:44:16 +02:00
committed by GitHub
parent df57921b8e
commit 7e1aa5807d
29 changed files with 118 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/Admin/CidrDialog.vue
+3 -3
View File
@@ -10,12 +10,12 @@
</template>
<template #actions>
<DialogClose as-child>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
<BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
</DialogClose>
<DialogClose as-child>
<BaseButton @click="$emit('change', ipv4Cidr, ipv6Cidr)">
<BasePrimaryButton @click="$emit('change', ipv4Cidr, ipv6Cidr)">
{{ $t('dialog.change') }}
</BaseButton>
</BasePrimaryButton>
</DialogClose>
</template>
</BaseDialog>
src/app/components/Admin/RestartInterfaceDialog.vue
+3 -3
View File
@@ -7,12 +7,12 @@
</template>
<template #actions>
<DialogClose as-child>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
<BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
</DialogClose>
<DialogClose as-child>
<BaseButton @click="$emit('restart')">
<BasePrimaryButton @click="$emit('restart')">
{{ $t('admin.interface.restart') }}
</BaseButton>
</BasePrimaryButton>
</DialogClose>
</template>
</BaseDialog>
src/app/components/Admin/SuggestDialog.vue
+3 -3
View File
@@ -13,12 +13,12 @@
</template>
<template #actions>
<DialogClose as-child>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
<BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
</DialogClose>
<DialogClose as-child>
<BaseButton @click="$emit('change', selected)">
<BasePrimaryButton @click="$emit('change', selected)">
{{ $t('dialog.change') }}
</BaseButton>
</BasePrimaryButton>
</DialogClose>
</template>
</BaseDialog>
src/app/components/Base/PrimaryButton.vue
+26
View File
@@ -0,0 +1,26 @@
<template>
<component
:is="elementType"
role="button"
class="inline-flex items-center rounded border-2 border-red-800 bg-red-800 px-4 py-2 text-white transition hover:border-red-600 hover:bg-red-600"
v-bind="attrs"
>
<slot />
</component>
</template>
<script setup lang="ts">
const props = defineProps({
as: {
type: String,
default: 'button',
},
});
const elementType = computed(() => props.as);
const attrs = computed(() => {
const { as, ...attrs } = props;
return attrs;
});
</script>
src/app/components/Base/Button.vue → src/app/components/Base/SecondaryButton.vue
+2 -2
View File
@@ -20,7 +20,7 @@ const props = defineProps({
const elementType = computed(() => props.as);
const attrs = computed(() => {
const { as, ...attrs } = props;
return attrs;
const { as, ...rest } = props;
return rest;
});
</script>
src/app/components/Clients/CreateDialog.vue
+4 -2
View File
@@ -18,10 +18,12 @@
</template>
<template #actions>
<DialogClose as-child>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
<BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
</DialogClose>
<DialogClose as-child>
<BaseButton @click="createClient">{{ $t('client.create') }}</BaseButton>
<BasePrimaryButton @click="createClient">
{{ $t('client.create') }}
</BasePrimaryButton>
</DialogClose>
</template>
</BaseDialog>
src/app/components/Clients/DeleteDialog.vue
+4 -4
View File
@@ -9,12 +9,12 @@
</template>
<template #actions>
<DialogClose as-child>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
<BasePrimaryButton>{{ $t('dialog.cancel') }}</BasePrimaryButton>
</DialogClose>
<DialogClose as-child>
<BaseButton @click="$emit('delete')">{{
$t('client.deleteClient')
}}</BaseButton>
<BaseSecondaryButton @click="$emit('delete')">
{{ $t('client.deleteClient') }}
</BaseSecondaryButton>
</DialogClose>
</template>
</BaseDialog>
src/app/components/Clients/Empty.vue
+2 -2
View File
@@ -2,10 +2,10 @@
<p class="m-10 text-center text-sm text-gray-400 dark:text-neutral-400">
{{ $t('client.empty') }}<br /><br />
<ClientsCreateDialog>
<BaseButton as="span">
<BaseSecondaryButton as="span">
<IconsPlus class="w-4 md:mr-2" />
<span class="text-sm">{{ $t('client.new') }}</span>
</BaseButton>
</BaseSecondaryButton>
</ClientsCreateDialog>
</p>
</template>
src/app/components/Clients/New.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<template>
<ClientsCreateDialog>
<BaseButton as="span">
<BaseSecondaryButton as="span">
<IconsPlus class="w-4 md:mr-2" />
<span class="text-sm max-md:hidden">{{ $t('client.newShort') }}</span>
</BaseButton>
</BaseSecondaryButton>
</ClientsCreateDialog>
</template>
src/app/components/Clients/QRCodeDialog.vue
+1 -1
View File
@@ -10,7 +10,7 @@
</template>
<template #actions>
<DialogClose>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
<BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
</DialogClose>
</template>
</BaseDialog>
src/app/components/Clients/Sort.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template>
<BaseButton @click="toggleSort">
<BasePrimaryButton @click="toggleSort">
<IconsArrowDown
v-if="globalStore.sortClient === true"
class="w-4 md:mr-2"
/>
<IconsArrowUp v-else class="w-4 md:mr-2" />
<span class="text-sm max-md:hidden"> {{ $t('client.sort') }}</span>
</BaseButton>
</BasePrimaryButton>
</template>
<script setup lang="ts">
src/app/components/Form/ArrayField.vue
+2 -2
View File
@@ -12,7 +12,7 @@
class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
@input="update($event, i)"
/>
<BaseButton
<BaseSecondaryButton
as="input"
type="button"
class="rounded-lg"
@@ -22,7 +22,7 @@
</div>
</div>
<div class="mt-2">
<BaseButton
<BasePrimaryButton
as="input"
type="button"
class="rounded-lg"
src/app/components/Form/HostField.vue
+3 -3
View File
@@ -7,7 +7,7 @@
<IconsInfo class="size-4" />
</BaseTooltip>
</div>
<div class="flex">
<div class="flex gap-1">
<BaseInput
:id="id"
v-model.trim="data"
@@ -18,12 +18,12 @@
/>
<ClientOnly>
<AdminSuggestDialog :url="url" @change="data = $event">
<BaseButton as="span">
<BasePrimaryButton as="span">
<div class="flex items-center gap-3">
<IconsSparkles class="w-4" />
<span>{{ $t('admin.config.suggest') }}</span>
</div>
</BaseButton>
</BasePrimaryButton>
</AdminSuggestDialog>
</ClientOnly>
</div>
src/app/components/Form/NullArrayField.vue
+2 -2
View File
@@ -12,7 +12,7 @@
class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
@input="update($event, i)"
/>
<BaseButton
<BaseSecondaryButton
as="input"
type="button"
class="rounded-lg"
@@ -22,7 +22,7 @@
</div>
</div>
<div class="mt-2">
<BaseButton
<BasePrimaryButton
as="input"
type="button"
class="rounded-lg"
src/app/components/Form/PrimaryActionField.vue
+16
View File
@@ -0,0 +1,16 @@
<template>
<input
:value="label"
:type="type ?? 'button'"
class="col-span-2 rounded-lg border-2 border-red-800 bg-red-800 py-2 text-white hover:border-red-600 hover:bg-red-600 focus:border-red-800 focus:outline-0 focus:ring-0"
/>
</template>
<script lang="ts" setup>
import type { InputTypeHTMLAttribute } from 'vue';
defineProps<{
label: string;
type?: InputTypeHTMLAttribute;
}>();
</script>
src/app/components/Form/ActionField.vue → src/app/components/Form/SecondaryActionField.vue
View File