Feat: variants (#1885)

add primary & secondary button & actionfield

src/app/components/Admin/CidrDialog.vue

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/pages/admin.vue

@@ -15,12 +15,12 @@
               :to="`/admin/${item.id}`"
               active-class="bg-red-800 rounded"
             >
-              <BaseButton
+              <BaseSecondaryButton
                 as="span"
                 class="w-full cursor-pointer rounded p-2 font-medium transition-colors duration-200 hover:bg-red-800 dark:text-neutral-200"
               >
                 {{ item.name }}
-              </BaseButton>
+              </BaseSecondaryButton>
             </NuxtLink>
           </div>
         </div>

src/app/pages/admin/config.vue

@@ -49,8 +49,8 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>

src/app/pages/admin/general.vue

@@ -32,8 +32,8 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>

src/app/pages/admin/hooks.vue

@@ -25,8 +25,8 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>

src/app/pages/admin/interface.vue

@@ -23,15 +23,15 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
         <AdminCidrDialog
           trigger-class="col-span-2"
           :ipv4-cidr="data.ipv4Cidr"
           :ipv6-cidr="data.ipv6Cidr"
           @change="changeCidr"
         >
-          <FormActionField
+          <FormSecondaryActionField
             :label="$t('admin.interface.changeCidr')"
             class="w-full"
             tabindex="-1"
@@ -41,7 +41,7 @@
           trigger-class="col-span-2"
           @restart="restartInterface"
         >
-          <FormActionField
+          <FormSecondaryActionField
             :label="$t('admin.interface.restart')"
             class="w-full"
             tabindex="-1"

src/app/pages/clients/[id].vue

@@ -107,14 +107,17 @@
           </FormGroup>
           <FormGroup>
             <FormHeading>{{ $t('form.actions') }}</FormHeading>
-            <FormActionField type="submit" :label="$t('form.save')" />
-            <FormActionField :label="$t('form.revert')" @click="revert" />
+            <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+            <FormSecondaryActionField
+              :label="$t('form.revert')"
+              @click="revert"
+            />
             <ClientsDeleteDialog
               trigger-class="col-span-2"
               :client-name="data.name"
               @delete="deleteClient"
             >
-              <FormActionField
+              <FormSecondaryActionField
                 label="Delete"
                 class="w-full"
                 type="button"

src/app/pages/me.vue

@@ -18,7 +18,7 @@
               v-model="email"
               :label="$t('user.email')"
             />
-            <FormActionField type="submit" :label="$t('form.save')" />
+            <FormSecondaryActionField type="submit" :label="$t('form.save')" />
           </FormGroup>
         </FormElement>
         <FormElement @submit.prevent="updatePassword">
@@ -42,7 +42,7 @@
               autocomplete="new-password"
               :label="$t('general.confirmPassword')"
             />
-            <FormActionField
+            <FormSecondaryActionField
               type="submit"
               :label="$t('general.updatePassword')"
             />
@@ -55,7 +55,10 @@
               v-if="!authStore.userData?.totpVerified && !twofa"
               class="col-span-2 flex flex-col"
             >
-              <FormActionField :label="$t('me.enable2fa')" @click="setup2fa" />
+              <FormSecondaryActionField
+                :label="$t('me.enable2fa')"
+                @click="setup2fa"
+              />
             </div>
             <div
               v-if="!authStore.userData?.totpVerified && twofa"
@@ -81,7 +84,7 @@
                   v-model="code"
                   :label="$t('general.2faCode')"
                 />
-                <FormActionField
+                <FormSecondaryActionField
                   :label="$t('me.enable2fa')"
                   @click="enable2fa"
                 />
@@ -101,7 +104,7 @@
                 type="password"
                 autocomplete="current-password"
               />
-              <FormActionField
+              <FormSecondaryActionField
                 :label="$t('me.disable2fa')"
                 @click="disable2fa"
               />

src/app/pages/setup/1.vue

@@ -4,7 +4,9 @@
       {{ $t('setup.welcomeDesc') }}
     </p>
     <NuxtLink to="/setup/2" class="mt-8">
-      <BaseButton as="span">{{ $t('general.continue') }}</BaseButton>
+      <BasePrimaryButton as="span">
+        {{ $t('general.continue') }}
+      </BasePrimaryButton>
     </NuxtLink>
   </div>
 </template>

src/app/pages/setup/2.vue

@@ -29,7 +29,9 @@
         />
       </div>
       <div class="mt-4 flex justify-center">
-        <BaseButton @click="submit">{{ $t('setup.createAccount') }}</BaseButton>
+        <BasePrimaryButton @click="submit">
+          {{ $t('setup.createAccount') }}
+        </BasePrimaryButton>
       </div>
     </div>
   </div>

src/app/pages/setup/3.vue

@@ -5,14 +5,14 @@
     </p>
     <div class="mt-4 flex justify-center gap-3">
       <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') }}
-        </BaseButton>
+        </BasePrimaryButton>
       </NuxtLink>
       <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') }}
-        </BaseButton>
+        </BaseSecondaryButton>
       </NuxtLink>
     </div>
   </div>

src/app/pages/setup/4.vue

@@ -23,7 +23,9 @@
         />
       </div>
       <div class="mt-4 flex justify-center">
-        <BaseButton @click="submit">{{ $t('general.continue') }}</BaseButton>
+        <BasePrimaryButton @click="submit">
+          {{ $t('general.continue') }}
+        </BasePrimaryButton>
       </div>
     </div>
   </div>

src/app/pages/setup/migrate.vue

@@ -8,7 +8,9 @@
       <input id="migration" type="file" @change="onChangeFile" />
     </div>
     <div class="mt-4">
-      <BaseButton @click="submit">{{ $t('setup.upload') }}</BaseButton>
+      <BasePrimaryButton @click="submit">
+        {{ $t('setup.upload') }}
+      </BasePrimaryButton>
     </div>
   </div>
 </template>

src/app/pages/setup/success.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col items-center">
     <p>{{ $t('setup.successful') }}</p>
     <NuxtLink to="/login" class="mt-4">
-      <BaseButton as="span">{{ $t('login.signIn') }}</BaseButton>
+      <BasePrimaryButton as="span">{{ $t('login.signIn') }}</BasePrimaryButton>
     </NuxtLink>
   </div>
 </template>