mirror
/
wg-easy
mirror of https://github.com/wg-easy/wg-easy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Feat: variants (#1885) 

add primary & secondary button & actionfield
pull/1886/head
Bernd Storath 2 months ago
committed by GitHub
parent
df57921b8e
commit
7e1aa5807d
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
29 changed files with 118 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/app/components/Admin/CidrDialog.vue
  2. 6
      src/app/components/Admin/RestartInterfaceDialog.vue
  3. 6
      src/app/components/Admin/SuggestDialog.vue
  4. 26
      src/app/components/Base/PrimaryButton.vue
  5. 4
      src/app/components/Base/SecondaryButton.vue
  6. 6
      src/app/components/Clients/CreateDialog.vue
  7. 8
      src/app/components/Clients/DeleteDialog.vue
  8. 4
      src/app/components/Clients/Empty.vue
  9. 4
      src/app/components/Clients/New.vue
  10. 2
      src/app/components/Clients/QRCodeDialog.vue
  11. 4
      src/app/components/Clients/Sort.vue
  12. 4
      src/app/components/Form/ArrayField.vue
  13. 6
      src/app/components/Form/HostField.vue
  14. 4
      src/app/components/Form/NullArrayField.vue
  15. 16
      src/app/components/Form/PrimaryActionField.vue
  16. 0
      src/app/components/Form/SecondaryActionField.vue
  17. 4
      src/app/pages/admin.vue
  18. 4
      src/app/pages/admin/config.vue
  19. 4
      src/app/pages/admin/general.vue
  20. 4
      src/app/pages/admin/hooks.vue
  21. 8
      src/app/pages/admin/interface.vue
  22. 9
      src/app/pages/clients/[id].vue
  23. 13
      src/app/pages/me.vue
  24. 4
      src/app/pages/setup/1.vue
  25. 4
      src/app/pages/setup/2.vue
  26. 8
      src/app/pages/setup/3.vue
  27. 4
      src/app/pages/setup/4.vue
  28. 4
      src/app/pages/setup/migrate.vue
  29. 2
      src/app/pages/setup/success.vue

6
src/app/components/Admin/CidrDialog.vue
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>

6
src/app/components/Admin/RestartInterfaceDialog.vue
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>

6
src/app/components/Admin/SuggestDialog.vue
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>

26
src/app/components/Base/PrimaryButton.vue
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>

4
src/app/components/Base/Button.vue → src/app/components/Base/SecondaryButton.vue
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>

6
src/app/components/Clients/CreateDialog.vue
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>

8
src/app/components/Clients/DeleteDialog.vue
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>

4
src/app/components/Clients/Empty.vue
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>

4
src/app/components/Clients/New.vue
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>

2
src/app/components/Clients/QRCodeDialog.vue
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>

4
src/app/components/Clients/Sort.vue
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">

4
src/app/components/Form/ArrayField.vue
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"

6
src/app/components/Form/HostField.vue
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>

4
src/app/components/Form/NullArrayField.vue
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"

16
src/app/components/Form/PrimaryActionField.vue
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>

0
src/app/components/Form/ActionField.vue → src/app/components/Form/SecondaryActionField.vue
View File

4
src/app/pages/admin.vue
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>

4
src/app/pages/admin/config.vue
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>

4
src/app/pages/admin/general.vue
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>

4
src/app/pages/admin/hooks.vue
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>

8
src/app/pages/admin/interface.vue
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"

9
src/app/pages/clients/[id].vue
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"

13
src/app/pages/me.vue
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"
/> />

4
src/app/pages/setup/1.vue
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>

4
src/app/pages/setup/2.vue
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>

8
src/app/pages/setup/3.vue
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>

4
src/app/pages/setup/4.vue
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>

4
src/app/pages/setup/migrate.vue
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>

2
src/app/pages/setup/success.vue
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>

Write Preview
Loading…
Cancel
Save