Feat: variants (#1885)

add primary & secondary button & actionfield

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>