changes

app/components/datatable/ContextMenu.vue

@@ -192,7 +192,7 @@
       >
         <span class="icon">
           <Icon
-            name="material-symbols:add-2-rounded"
+            name="material-symbols:add-rounded"
             :size="22"
           />
         </span>
@@ -210,7 +210,7 @@
       >
         <span class="icon">
           <Icon
-            name="material-symbols:settings-outline-rounded"
+            name="material-symbols:table-edit-outline"
             :size="22"
           />
         </span>
@@ -240,8 +240,8 @@
       >
     </p>
   </div>
-  <div class="tabs is-toggle">
-    <ul class="is-flex-grow-0 mx-auto">
+  <div class="tabs is-toggle is-centered">
+    <ul>
       <li
         v-for="(v, i) in getMenu().filter((x) =>
           currentField.format === 'number'
@@ -254,32 +254,31 @@
         :class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
         @click="changeTab(v)"
       >
-        <a class="px-4 py-1.5">{{ v.name }}</a>
+        <a class="px-8 py-1.5 fs-14">{{ v.name }}</a>
       </li>
     </ul>
   </div>
   <div v-if="currentTab === 'detail'">
-    <p class="fs-14 mt-3">
-      <strong> Tên trường: </strong> {{ currentField.name }}
-      <a @click="copyContent(currentField.name)">
-        <span class="tooltip">
-          <SvgIcon
-            class="ml-1"
-            v-bind="{ name: 'copy.svg', type: 'primary', size: 16 }"
-          ></SvgIcon>
-          <span
-            class="tooltiptext"
-            style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
-            >Copy</span
-          >
+    <div class="fs-14 mt-3 is-flex is-gap-0.5 is-align-items-center">
+      <p class="font-semibold">Tên trường:</p>
+      <p>{{ currentField.name }}</p>
+      <button
+        class="button is-white is-small"
+        @click="copyContent(currentField.name)"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:content-copy-outline-rounded"
+            :size="16"
+          />
         </span>
-      </a>
-    </p>
+      </button>
+    </div>
     <label class="label fs-14 mt-3">Mô tả<span class="has-text-danger"> *</span></label>
     <div class="field has-addons">
       <div class="control is-expanded">
         <input
-          class="input fs-14"
+          class="input fs-14 h-full"
           type="text"
           @change="changeLabel($event.target.value)"
           v-model="label"
@@ -287,39 +286,48 @@
       </div>
       <div class="control">
         <button
-          class="button"
+          class="button h-full"
           @click="editLabel()"
         >
-          <SvgIcon v-bind="{ name: 'pen.svg', type: 'dark', size: 19 }"></SvgIcon>
+          <span class="icon">
+            <Icon
+              name="material-symbols:edit-outline-rounded"
+              :size="18"
+            />
+          </span>
         </button>
       </div>
     </div>
     <p
-      class="help is-danger"
       v-if="errors.find((v) => v.name === 'label')"
+      class="help is-danger"
     >
       {{ errors.find((v) => v.name === "label").msg }}
     </p>
     <div class="field mt-3">
       <label class="label fs-14">Kiểu dữ liệu<span class="has-text-danger"> * </span></label>
       <div class="control fs-14">
-        <span
-          class="mr-4"
-          v-for="(v, i) in datatype"
+        <button
+          v-for="v in datatype"
+          class="button is-white fs-14"
         >
-          <span
-            class="icon-text"
-            v-if="radioType === v"
-          >
-            <SvgIcon v-bind="{ name: 'radio-checked.svg', type: 'gray', size: 22 }"></SvgIcon>
+          <span class="icon">
+            <Icon
+              :name="
+                radioType === v
+                  ? 'material-symbols:radio-button-checked-outline'
+                  : 'material-symbols:radio-button-unchecked'
+              "
+              :size="22"
+            />
           </span>
-          {{ v.name }}
-        </span>
+          <span>{{ v.name }}</span>
+        </button>
       </div>
     </div>
     <div
-      class="field is-horizontal"
       v-if="currentField.format === 'number'"
+      class="field is-horizontal"
     >
       <div class="field-body">
         <div class="field">
@@ -334,7 +342,7 @@
                 position: 'is-top-left',
               }"
               @option="selected('_account', $event)"
-            ></SearchBox>
+            />
           </div>
           <p
             class="help has-text-danger"
@@ -361,27 +369,25 @@
       <div class="field-body">
         <div class="field">
           <label class="label fs-14">Định dạng nâng cao</label>
-          <p class="control fs-14">
-            <span
-              class="mr-4"
-              v-for="(v, i) in colorchoice.filter((v) => v.code !== 'condition')"
+          <div class="control">
+            <button
+              v-for="v in colorchoice.filter((v) => v.code !== 'condition')"
+              @click="changeTemplate(v)"
+              class="button is-white fs-14"
             >
-              <a
-                class="icon-text"
-                @click="changeTemplate(v)"
-              >
-                <SvgIcon
-                  v-bind="{
-                    name: `radio-${radioTemplate === v.code ? '' : 'un'}checked.svg`,
-                    type: 'gray',
-                    size: 22,
-                  }"
-                >
-                </SvgIcon>
-              </a>
-              {{ v.name }}
-            </span>
-          </p>
+              <span class="icon">
+                <Icon
+                  :name="
+                    radioTemplate === v.code
+                      ? 'material-symbols:radio-button-checked-outline'
+                      : 'material-symbols:radio-button-unchecked'
+                  "
+                  :size="22"
+                />
+              </span>
+              <span>{{ v.name }}</span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -390,10 +396,10 @@
       v-if="radioTemplate === 'option'"
     >
       <button
-        class="button is-primary is-small has-text-white"
+        class="button is-primary is-light fs-14"
         @click="showSidebar()"
       >
-        <span class="fs-14">{{ `${currentField.template ? "Sửa" : "Tạo"} định dạng` }}</span>
+        {{ `${currentField.template ? "Sửa" : "Tạo"} định dạng` }}
       </button>
     </p>
   </div>
@@ -414,7 +420,7 @@
     @label="changeLabel"
     @updatefields="updateFields"
     @close="close"
-  ></Modal>
+  />
 </template>
 <script setup>
 import { useStore } from "@/stores/index";
@@ -522,7 +528,6 @@ function doRemove() {
   copy.fields.splice(idx, 1);
   copy.update = { fields: copy.fields };
   store.commit(props.pagename, copy);
-  emit("close");
 }
 function fieldList() {
   showmodal.value = {
@@ -538,7 +543,7 @@ function tableOption() {
     component: "datatable/TableSetting",
     vbind: { pagename: props.pagename },
     title: "Tùy chọn bảng",
-    width: "40%",
+    width: "50%",
     height: "400px",
   };
 }
@@ -556,9 +561,10 @@ const changeLabel = function (text) {
 function editLabel() {
   showmodal.value = {
     component: "datatable/EditLabel",
+    title: "Điều chỉnh tiêu đề",
     width: "500px",
     height: "300px",
-    vbind: { label: label },
+    vbind: { label },
   };
 }
 const changeTemplate = function (v) {
@@ -598,7 +604,7 @@ const saveSetting = function () {
     vbind: { pagename: props.pagename, classify: 4 },
     title: "Lưu thiết lập",
     width: "500px",
-    height: "400px",
+    height: "auto",
   };
 };
 const showSidebar = function () {