changes

app/components/datatable/ContextMenu.vue

@@ -131,7 +131,7 @@
     <p class="control">
       <button
         class="button is-light is-primary"
-        @click="currentField.mandatory ? false : doRemove()"
+        @click="!currentField.mandatory && doRemove()"
       >
         <span class="icon">
           <Icon
@@ -149,10 +149,8 @@
     <p class="control">
       <button
         class="button is-light is-primary"
-        :class="currentField.format === 'number' ? null : 'has-text-grey-light'"
-        @click="
-          currentField.format === 'number' ? $emit('modalevent', { name: 'copyfield', data: currentField }) : false
-        "
+        :class="currentField.format !== 'number' && 'has-text-grey-light'"
+        @click="currentField.format === 'number' && $emit('modalevent', { name: 'copyfield', data: currentField })"
       >
         <span class="icon">
           <Icon
@@ -310,10 +308,11 @@
     </div>
     <div class="field">
       <label class="label fs-14">Kiểu dữ liệu<span class="has-text-danger"> * </span></label>
-      <div class="control fs-14">
+      <div class="control is-flex is-gap-0.5">
         <button
-          v-for="v in datatype"
-          class="button is-white fs-14"
+          v-for="(v, i) in datatype"
+          :key="i"
+          :class="['button fs-14', radioType === v ? 'is-primary is-light' : 'is-white']"
         >
           <span class="icon">
             <Icon
@@ -372,11 +371,12 @@
     <div class="field">
       <div class="field">
         <label class="label fs-14">Định dạng nâng cao</label>
-        <div class="control">
+        <div class="control is-flex is-gap-0.5">
           <button
-            v-for="v in colorchoice.filter((v) => v.code !== 'condition')"
+            v-for="(v, i) in colorchoice.filter((v) => v.code !== 'condition')"
+            :key="i"
             @click="changeTemplate(v)"
-            class="button is-white fs-14"
+            :class="['button fs-14', radioTemplate === v.code ? 'is-primary is-light' : 'is-white']"
           >
             <span class="icon">
               <Icon
@@ -392,10 +392,16 @@
           </button>
           <button
             v-if="radioTemplate === 'option'"
-            class="button is-primary is-light fs-14 ml-2"
+            class="button is-primary is-outlined fs-14 ml-2"
             @click="showSidebar()"
           >
-            {{ currentField.template ? "Sửa" : "Tạo" }} định dạng
+            <span class="icon">
+              <Icon
+                :name="currentField.template ? 'material-symbols:edit-outline-rounded' : 'material-symbols:add-rounded'"
+                :size="17"
+              />
+            </span>
+            <span>{{ currentField.template ? "Sửa" : "Tạo" }} định dạng</span>
           </button>
         </div>
       </div>
@@ -408,6 +414,7 @@
         name: props.field.name,
         maxHeight: '380px',
         perpage: 20,
+        inContext: true,
       }"
       @selected="doSelect"
     />
@@ -422,7 +429,7 @@
 </template>
 <script setup>
 import { useStore } from "@/stores/index";
-import ScrollBox from "~/components/datatable/ScrollBox";
+import ScrollBox from "@/components/datatable/ScrollBox.vue";
 const store = useStore();
 const { $copy, $stripHtml, $clone, $arrayMove, $snackbar, $copyToClipboard } = useNuxtApp();
 var props = defineProps({
@@ -645,4 +652,15 @@ p.control {
     width: 100%;
   }
 }
+
+.tabs {
+  --bulma-tabs-toggle-link-active-background-color: var(--bulma-link-90);
+  --bulma-tabs-toggle-link-active-border-color: var(--bulma-link-90);
+  --bulma-tabs-toggle-link-active-color: var(--bulma-link-25);
+}
+
+.button.is-primary.is-outlined:hover {
+  --bulma-button-border-width: max(1px, 0.0625em); /* same as not-hovered */
+  background-color: var(--bulma-primary-95);
+}
 </style>