fix: improve buttons (#2666)

improve buttons

Co-authored-by: anhhna <[email protected]>

src/app/components/Form/PrimaryActionField.vue

@@ -2,7 +2,7 @@
   <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"
+    class="col-span-2 rounded-lg border-2 border-red-800 bg-red-800 px-4 py-2 text-white hover:border-red-600 hover:bg-red-600 focus:border-red-800 focus:outline-0 focus:ring-0"
   />
 </template>
 

src/app/components/Form/SecondaryActionField.vue

@@ -1,17 +1,32 @@
 <template>
   <BaseFormSecondaryButton
-    as="input"
+    :as="as"
-    :value="label"
+    :value="isInput ? label : undefined"
-    :type="type ?? 'button'"
+    :type="isInput ? type : undefined"
-    class="col-span-2 py-2"
+    class="col-span-2 px-4 py-2"
-  />
+  >
+    <template v-if="!isInput">
+      {{ label }}
+    </template>
+  </BaseFormSecondaryButton>
 </template>
 
 <script lang="ts" setup>
 import type { InputTypeHTMLAttribute } from 'vue';
 
-defineProps<{
+const props = withDefaults(
-  label: string;
+  defineProps<{
-  type?: InputTypeHTMLAttribute;
+    label: string;
-}>();
+    type?: InputTypeHTMLAttribute;
+    as?: string;
+  }>(),
+  {
+    type: 'button',
+    as: 'input',
+  }
+);
+
+const isInput = computed(() => {
+  return props.as === 'input';
+});
 </script>

src/app/pages/admin/interface.vue

@@ -145,8 +145,8 @@
         >
           <FormSecondaryActionField
             :label="$t('admin.interface.changeCidr')"
-            class="w-full"
+            class="inline-block w-full"
-            tabindex="-1"
+            as="span"
           />
         </AdminCidrDialog>
         <AdminRestartInterfaceDialog
@@ -155,8 +155,8 @@
         >
           <FormSecondaryActionField
             :label="$t('admin.interface.restart')"
-            class="w-full"
+            class="inline-block w-full"
-            tabindex="-1"
+            as="span"
           />
         </AdminRestartInterfaceDialog>
       </FormGroup>

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

@@ -188,9 +188,7 @@
             >
               <FormSecondaryActionField
                 :label="$t('client.delete')"
-                class="w-full"
+                class="inline-block w-full"
-                type="button"
-                tabindex="-1"
                 as="span"
               />
             </ClientsDeleteDialog>
@@ -200,9 +198,7 @@
             >
               <FormSecondaryActionField
                 :label="$t('client.viewConfig')"
-                class="w-full"
+                class="inline-block w-full"
-                type="button"
-                tabindex="-1"
                 as="span"
               />
             </ClientsConfigDialog>