changes

app/components/datatable/ContextMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="field has-addons is-justify-content-center">
+  <div class="toolbar field has-addons is-justify-content-center">
     <!-- <div class="control">
       <button
         class="button is-light is-primary"
@@ -431,6 +431,7 @@
 <script setup>
 import { useStore } from "~/stores/index";
 import ScrollBox from "~/components/datatable/ScrollBox.vue";
+import { cloneDeep, isEqual } from "es-toolkit";
 
 const props = defineProps({
   pagename: String,
@@ -439,7 +440,7 @@ const props = defineProps({
   filterData: Object,
   width: String,
 });
-const { $copy, $stripHtml, $clone, $arrayMove, $snackbar, $copyToClipboard } = useNuxtApp();
+const { $copy, $stripHtml, $arrayMove, $snackbar, $copyToClipboard } = useNuxtApp();
 const emit = defineEmits(["modalevent", "changepos", "close"]);
 const store = useStore();
 const { colorchoice } = store;
@@ -504,7 +505,7 @@ var search = undefined;
 // }
 //==============================================================
 function moveLeft() {
-  let copy = $clone(pagedata);
+  const copy = cloneDeep(pagedata);
   let i = copy.fields.findIndex((v) => v.name === props.field.name);
   let idx = i - 1 >= 0 ? i - 1 : copy.fields.length - 1;
   $arrayMove(copy.fields, i, idx);
@@ -513,7 +514,7 @@ function moveLeft() {
   emit("changepos");
 }
 function moveRight() {
-  let copy = $clone(pagedata);
+  const copy = cloneDeep(pagedata);
   let i = copy.fields.findIndex((v) => v.name === props.field.name);
   let idx = copy.fields.length - 1 > i ? i + 1 : 0;
   $arrayMove(copy.fields, i, idx);
@@ -522,7 +523,7 @@ function moveRight() {
   emit("changepos");
 }
 function hideField() {
-  let copy = $clone(store[props.pagename]);
+  const copy = cloneDeep(store[props.pagename]);
   let found = copy.fields.find((v) => v.name === props.field.name);
   found.show = false;
   copy.update = { fields: copy.fields };
@@ -530,7 +531,7 @@ function hideField() {
   emit("close");
 }
 function doRemove() {
-  let copy = $clone(store[props.pagename]);
+  const copy = cloneDeep(store[props.pagename]);
   let idx = copy.fields.findIndex((v) => v.name === props.field.name);
   copy.fields.splice(idx, 1);
   copy.update = { fields: copy.fields };
@@ -593,7 +594,7 @@ function close() {
   showmodal.value = undefined;
 }
 const updateFields = function (field, type) {
-  let copy = $clone(store[props.pagename]);
+  let copy = cloneDeep(store[props.pagename]);
   let idx = copy.fields.findIndex((v) => v.name === field.name);
   copy.fields[idx] = field;
   store.commit(props.pagename, copy);
@@ -619,14 +620,14 @@ const showSidebar = function () {
   else if (event.name === "template") title = `Định dạng nâng cao: ${$stripHtml(event.field.label, 30)}`;
   showmodal.value = {
     component: "datatable/FormatOption",
+    width: "850px",
+    height: "500px",
+    title,
     vbind: {
-      event: event,
-      currentField: currentField,
+      event,
+      currentField,
       pagename: props.pagename,
     },
-    width: "850px",
-    height: "600px",
-    title: title,
   };
 };
 function resizeWidth(minus) {
@@ -644,7 +645,7 @@ function resizeWidth(minus) {
 }
 </script>
 <style lang="css" scoped>
-.control {
+.toolbar .control {
   flex-grow: 1;
 
   > button {