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>
<template #actions> <template #actions>
<DialogClose as-child> <DialogClose as-child>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton> <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
</DialogClose> </DialogClose>
<DialogClose as-child> <DialogClose as-child>
<BaseButton @click="$emit('change', ipv4Cidr, ipv6Cidr)"> <BasePrimaryButton @click="$emit('change', ipv4Cidr, ipv6Cidr)">
{{ $t('dialog.change') }} {{ $t('dialog.change') }}
</BaseButton> </BasePrimaryButton>
</DialogClose> </DialogClose>
</template> </template>
</BaseDialog> </BaseDialog>
src/app/components/Admin/RestartInterfaceDialog.vue
+3 -3
View File
@@ -7,12 +7,12 @@
</template> </template>
<template #actions> <template #actions>
<DialogClose as-child> <DialogClose as-child>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton> <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
</DialogClose> </DialogClose>
<DialogClose as-child> <DialogClose as-child>
<BaseButton @click="$emit('restart')"> <BasePrimaryButton @click="$emit('restart')">
{{ $t('admin.interface.restart') }} {{ $t('admin.interface.restart') }}
</BaseButton> </BasePrimaryButton>
</DialogClose> </DialogClose>
</template> </template>
</BaseDialog> </BaseDialog>
src/app/components/Admin/SuggestDialog.vue
+3 -3
View File
@@ -13,12 +13,12 @@
</template> </template>
<template #actions> <template #actions>
<DialogClose as-child> <DialogClose as-child>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton> <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
</DialogClose> </DialogClose>
<DialogClose as-child> <DialogClose as-child>
<BaseButton @click="$emit('change', selected)"> <BasePrimaryButton @click="$emit('change', selected)">
{{ $t('dialog.change') }} {{ $t('dialog.change') }}
</BaseButton> </BasePrimaryButton>
</DialogClose> </DialogClose>
</template> </template>
</BaseDialog> </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 elementType = computed(() => props.as);
const attrs = computed(() => { const attrs = computed(() => {
const { as, ...attrs } = props; const { as, ...rest } = props;
return attrs; return rest;
}); });
</script> </script>
src/app/components/Clients/CreateDialog.vue
+4 -2
View File
@@ -18,10 +18,12 @@
</template> </template>
<template #actions> <template #actions>
<DialogClose as-child> <DialogClose as-child>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton> <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
</DialogClose> </DialogClose>
<DialogClose as-child> <DialogClose as-child>
<BaseButton @click="createClient">{{ $t('client.create') }}</BaseButton> <BasePrimaryButton @click="createClient">
{{ $t('client.create') }}
</BasePrimaryButton>
</DialogClose> </DialogClose>
</template> </template>
</BaseDialog> </BaseDialog>
src/app/components/Clients/DeleteDialog.vue
+4 -4
View File
@@ -9,12 +9,12 @@
</template> </template>
<template #actions> <template #actions>
<DialogClose as-child> <DialogClose as-child>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton> <BasePrimaryButton>{{ $t('dialog.cancel') }}</BasePrimaryButton>
</DialogClose> </DialogClose>
<DialogClose as-child> <DialogClose as-child>
<BaseButton @click="$emit('delete')">{{ <BaseSecondaryButton @click="$emit('delete')">
$t('client.deleteClient') {{ $t('client.deleteClient') }}
}}</BaseButton> </BaseSecondaryButton>
</DialogClose> </DialogClose>
</template> </template>
</BaseDialog> </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"> <p class="m-10 text-center text-sm text-gray-400 dark:text-neutral-400">
{{ $t('client.empty') }}<br /><br /> {{ $t('client.empty') }}<br /><br />
<ClientsCreateDialog> <ClientsCreateDialog>
<BaseButton as="span"> <BaseSecondaryButton as="span">
<IconsPlus class="w-4 md:mr-2" /> <IconsPlus class="w-4 md:mr-2" />
<span class="text-sm">{{ $t('client.new') }}</span> <span class="text-sm">{{ $t('client.new') }}</span>
</BaseButton> </BaseSecondaryButton>
</ClientsCreateDialog> </ClientsCreateDialog>
</p> </p>
</template> </template>
src/app/components/Clients/New.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<template> <template>
<ClientsCreateDialog> <ClientsCreateDialog>
<BaseButton as="span"> <BaseSecondaryButton as="span">
<IconsPlus class="w-4 md:mr-2" /> <IconsPlus class="w-4 md:mr-2" />
<span class="text-sm max-md:hidden">{{ $t('client.newShort') }}</span> <span class="text-sm max-md:hidden">{{ $t('client.newShort') }}</span>
</BaseButton> </BaseSecondaryButton>
</ClientsCreateDialog> </ClientsCreateDialog>
</template> </template>
src/app/components/Clients/QRCodeDialog.vue
+1 -1
View File
@@ -10,7 +10,7 @@
</template> </template>
<template #actions> <template #actions>
<DialogClose> <DialogClose>
<BaseButton>{{ $t('dialog.cancel') }}</BaseButton> <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
</DialogClose> </DialogClose>
</template> </template>
</BaseDialog> </BaseDialog>
src/app/components/Clients/Sort.vue
+2 -2
View File
@@ -1,12 +1,12 @@
<template> <template>
<BaseButton @click="toggleSort"> <BasePrimaryButton @click="toggleSort">
<IconsArrowDown <IconsArrowDown
v-if="globalStore.sortClient === true" v-if="globalStore.sortClient === true"
class="w-4 md:mr-2" class="w-4 md:mr-2"
/> />
<IconsArrowUp v-else 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> <span class="text-sm max-md:hidden"> {{ $t('client.sort') }}</span>
</BaseButton> </BasePrimaryButton>
</template> </template>
<script setup lang="ts"> <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" 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)" @input="update($event, i)"
/> />
<BaseButton <BaseSecondaryButton
as="input" as="input"
type="button" type="button"
class="rounded-lg" class="rounded-lg"
@@ -22,7 +22,7 @@
</div> </div>
</div> </div>
<div class="mt-2"> <div class="mt-2">
<BaseButton <BasePrimaryButton
as="input" as="input"
type="button" type="button"
class="rounded-lg" class="rounded-lg"
src/app/components/Form/HostField.vue
+3 -3
View File
@@ -7,7 +7,7 @@
<IconsInfo class="size-4" /> <IconsInfo class="size-4" />
</BaseTooltip> </BaseTooltip>
</div> </div>
<div class="flex"> <div class="flex gap-1">
<BaseInput <BaseInput
:id="id" :id="id"
v-model.trim="data" v-model.trim="data"
@@ -18,12 +18,12 @@
/> />
<ClientOnly> <ClientOnly>
<AdminSuggestDialog :url="url" @change="data = $event"> <AdminSuggestDialog :url="url" @change="data = $event">
<BaseButton as="span"> <BasePrimaryButton as="span">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<IconsSparkles class="w-4" /> <IconsSparkles class="w-4" />
<span>{{ $t('admin.config.suggest') }}</span> <span>{{ $t('admin.config.suggest') }}</span>
</div> </div>
</BaseButton> </BasePrimaryButton>
</AdminSuggestDialog> </AdminSuggestDialog>
</ClientOnly> </ClientOnly>
</div> </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" 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)" @input="update($event, i)"
/> />
<BaseButton <BaseSecondaryButton
as="input" as="input"
type="button" type="button"
class="rounded-lg" class="rounded-lg"
@@ -22,7 +22,7 @@
</div> </div>
</div> </div>
<div class="mt-2"> <div class="mt-2">
<BaseButton <BasePrimaryButton
as="input" as="input"
type="button" type="button"
class="rounded-lg" 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
src/app/pages/admin.vue
+2 -2
View File
@@ -15,12 +15,12 @@
:to="`/admin/${item.id}`" :to="`/admin/${item.id}`"
active-class="bg-red-800 rounded" active-class="bg-red-800 rounded"
> >
<BaseButton <BaseSecondaryButton
as="span" as="span"
class="w-full cursor-pointer rounded p-2 font-medium transition-colors duration-200 hover:bg-red-800 dark:text-neutral-200" class="w-full cursor-pointer rounded p-2 font-medium transition-colors duration-200 hover:bg-red-800 dark:text-neutral-200"
> >
{{ item.name }} {{ item.name }}
</BaseButton> </BaseSecondaryButton>
</NuxtLink> </NuxtLink>
</div> </div>
</div> </div>
src/app/pages/admin/config.vue
+2 -2
View File
@@ -49,8 +49,8 @@
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<FormHeading>{{ $t('form.actions') }}</FormHeading> <FormHeading>{{ $t('form.actions') }}</FormHeading>
<FormActionField type="submit" :label="$t('form.save')" /> <FormPrimaryActionField type="submit" :label="$t('form.save')" />
<FormActionField :label="$t('form.revert')" @click="revert" /> <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
</FormGroup> </FormGroup>
</FormElement> </FormElement>
</main> </main>
src/app/pages/admin/general.vue
+2 -2
View File
@@ -32,8 +32,8 @@
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<FormHeading>{{ $t('form.actions') }}</FormHeading> <FormHeading>{{ $t('form.actions') }}</FormHeading>
<FormActionField type="submit" :label="$t('form.save')" /> <FormPrimaryActionField type="submit" :label="$t('form.save')" />
<FormActionField :label="$t('form.revert')" @click="revert" /> <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
</FormGroup> </FormGroup>
</FormElement> </FormElement>
</main> </main>
src/app/pages/admin/hooks.vue
+2 -2
View File
@@ -25,8 +25,8 @@
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<FormHeading>{{ $t('form.actions') }}</FormHeading> <FormHeading>{{ $t('form.actions') }}</FormHeading>
<FormActionField type="submit" :label="$t('form.save')" /> <FormPrimaryActionField type="submit" :label="$t('form.save')" />
<FormActionField :label="$t('form.revert')" @click="revert" /> <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
</FormGroup> </FormGroup>
</FormElement> </FormElement>
</main> </main>
src/app/pages/admin/interface.vue
+4 -4
View File
@@ -23,15 +23,15 @@
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<FormHeading>{{ $t('form.actions') }}</FormHeading> <FormHeading>{{ $t('form.actions') }}</FormHeading>
<FormActionField type="submit" :label="$t('form.save')" /> <FormPrimaryActionField type="submit" :label="$t('form.save')" />
<FormActionField :label="$t('form.revert')" @click="revert" /> <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
<AdminCidrDialog <AdminCidrDialog
trigger-class="col-span-2" trigger-class="col-span-2"
:ipv4-cidr="data.ipv4Cidr" :ipv4-cidr="data.ipv4Cidr"
:ipv6-cidr="data.ipv6Cidr" :ipv6-cidr="data.ipv6Cidr"
@change="changeCidr" @change="changeCidr"
> >
<FormActionField <FormSecondaryActionField
:label="$t('admin.interface.changeCidr')" :label="$t('admin.interface.changeCidr')"
class="w-full" class="w-full"
tabindex="-1" tabindex="-1"
@@ -41,7 +41,7 @@
trigger-class="col-span-2" trigger-class="col-span-2"
@restart="restartInterface" @restart="restartInterface"
> >
<FormActionField <FormSecondaryActionField
:label="$t('admin.interface.restart')" :label="$t('admin.interface.restart')"
class="w-full" class="w-full"
tabindex="-1" tabindex="-1"
src/app/pages/clients/[id].vue
+6 -3
View File
@@ -107,14 +107,17 @@
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<FormHeading>{{ $t('form.actions') }}</FormHeading> <FormHeading>{{ $t('form.actions') }}</FormHeading>
<FormActionField type="submit" :label="$t('form.save')" /> <FormPrimaryActionField type="submit" :label="$t('form.save')" />
<FormActionField :label="$t('form.revert')" @click="revert" /> <FormSecondaryActionField
:label="$t('form.revert')"
@click="revert"
/>
<ClientsDeleteDialog <ClientsDeleteDialog
trigger-class="col-span-2" trigger-class="col-span-2"
:client-name="data.name" :client-name="data.name"
@delete="deleteClient" @delete="deleteClient"
> >
<FormActionField <FormSecondaryActionField
label="Delete" label="Delete"
class="w-full" class="w-full"
type="button" type="button"
src/app/pages/me.vue
+8 -5
View File
@@ -18,7 +18,7 @@
v-model="email" v-model="email"
:label="$t('user.email')" :label="$t('user.email')"
/> />
<FormActionField type="submit" :label="$t('form.save')" /> <FormSecondaryActionField type="submit" :label="$t('form.save')" />
</FormGroup> </FormGroup>
</FormElement> </FormElement>
<FormElement @submit.prevent="updatePassword"> <FormElement @submit.prevent="updatePassword">
@@ -42,7 +42,7 @@
autocomplete="new-password" autocomplete="new-password"
:label="$t('general.confirmPassword')" :label="$t('general.confirmPassword')"
/> />
<FormActionField <FormSecondaryActionField
type="submit" type="submit"
:label="$t('general.updatePassword')" :label="$t('general.updatePassword')"
/> />
@@ -55,7 +55,10 @@
v-if="!authStore.userData?.totpVerified && !twofa" v-if="!authStore.userData?.totpVerified && !twofa"
class="col-span-2 flex flex-col" class="col-span-2 flex flex-col"
> >
<FormActionField :label="$t('me.enable2fa')" @click="setup2fa" /> <FormSecondaryActionField
:label="$t('me.enable2fa')"
@click="setup2fa"
/>
</div> </div>
<div <div
v-if="!authStore.userData?.totpVerified && twofa" v-if="!authStore.userData?.totpVerified && twofa"
@@ -81,7 +84,7 @@
v-model="code" v-model="code"
:label="$t('general.2faCode')" :label="$t('general.2faCode')"
/> />
<FormActionField <FormSecondaryActionField
:label="$t('me.enable2fa')" :label="$t('me.enable2fa')"
@click="enable2fa" @click="enable2fa"
/> />
@@ -101,7 +104,7 @@
type="password" type="password"
autocomplete="current-password" autocomplete="current-password"
/> />
<FormActionField <FormSecondaryActionField
:label="$t('me.disable2fa')" :label="$t('me.disable2fa')"
@click="disable2fa" @click="disable2fa"
/> />
src/app/pages/setup/1.vue
+3 -1
View File
@@ -4,7 +4,9 @@
{{ $t('setup.welcomeDesc') }} {{ $t('setup.welcomeDesc') }}
</p> </p>
<NuxtLink to="/setup/2" class="mt-8"> <NuxtLink to="/setup/2" class="mt-8">
<BaseButton as="span">{{ $t('general.continue') }}</BaseButton> <BasePrimaryButton as="span">
{{ $t('general.continue') }}
</BasePrimaryButton>
</NuxtLink> </NuxtLink>
</div> </div>
</template> </template>
src/app/pages/setup/2.vue
+3 -1
View File
@@ -29,7 +29,9 @@
/> />
</div> </div>
<div class="mt-4 flex justify-center"> <div class="mt-4 flex justify-center">
<BaseButton @click="submit">{{ $t('setup.createAccount') }}</BaseButton> <BasePrimaryButton @click="submit">
{{ $t('setup.createAccount') }}
</BasePrimaryButton>
</div> </div>
</div> </div>
</div> </div>
src/app/pages/setup/3.vue
+4 -4
View File
@@ -5,14 +5,14 @@
</p> </p>
<div class="mt-4 flex justify-center gap-3"> <div class="mt-4 flex justify-center gap-3">
<NuxtLink to="/setup/4" class="w-20"> <NuxtLink to="/setup/4" class="w-20">
<BaseButton as="span" class="w-full justify-center"> <BasePrimaryButton as="span" class="w-full justify-center">
{{ $t('general.no') }} {{ $t('general.no') }}
</BaseButton> </BasePrimaryButton>
</NuxtLink> </NuxtLink>
<NuxtLink to="/setup/migrate" class="w-20"> <NuxtLink to="/setup/migrate" class="w-20">
<BaseButton as="span" class="w-full justify-center"> <BaseSecondaryButton as="span" class="w-full justify-center">
{{ $t('general.yes') }} {{ $t('general.yes') }}
</BaseButton> </BaseSecondaryButton>
</NuxtLink> </NuxtLink>
</div> </div>
</div> </div>
src/app/pages/setup/4.vue
+3 -1
View File
@@ -23,7 +23,9 @@
/> />
</div> </div>
<div class="mt-4 flex justify-center"> <div class="mt-4 flex justify-center">
<BaseButton @click="submit">{{ $t('general.continue') }}</BaseButton> <BasePrimaryButton @click="submit">
{{ $t('general.continue') }}
</BasePrimaryButton>
</div> </div>
</div> </div>
</div> </div>
src/app/pages/setup/migrate.vue
+3 -1
View File
@@ -8,7 +8,9 @@
<input id="migration" type="file" @change="onChangeFile" /> <input id="migration" type="file" @change="onChangeFile" />
</div> </div>
<div class="mt-4"> <div class="mt-4">
<BaseButton @click="submit">{{ $t('setup.upload') }}</BaseButton> <BasePrimaryButton @click="submit">
{{ $t('setup.upload') }}
</BasePrimaryButton>
</div> </div>
</div> </div>
</template> </template>
src/app/pages/setup/success.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<p>{{ $t('setup.successful') }}</p> <p>{{ $t('setup.successful') }}</p>
<NuxtLink to="/login" class="mt-4"> <NuxtLink to="/login" class="mt-4">
<BaseButton as="span">{{ $t('login.signIn') }}</BaseButton> <BasePrimaryButton as="span">{{ $t('login.signIn') }}</BasePrimaryButton>
</NuxtLink> </NuxtLink>
</div> </div>
</template> </template>