changes

app/components/datatable/FieldAttribute.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :id="id">
     <template v-if="keys.length > 0">
       <div
         class="field is-horizontal"
@@ -35,7 +35,7 @@
               >
                 <span class="icon">
                   <Icon
-                    name="material-symbols:app-registration-rounded"
+                    name="material-symbols:data-object-rounded"
                     :size="20"
                   />
                 </span>
@@ -58,37 +58,46 @@
         </div>
       </div>
     </template>
-    <button
-      class="button is-success is-light"
-      @click="addAttr()"
+    <Teleport
+      defer
+      :to="`.modal-card:has(#${id}) .modal-card-foot`"
     >
-      <span class="icon">
-        <Icon
-          name="material-symbols:add-rounded"
-          :size="20"
-        />
-      </span>
-      <span>Thêm thuộc tính</span>
-    </button>
-    <div class="mt-2">
-      <button
-        class="button is-primary"
-        @click="update()"
-      >
-        Cập nhật
-      </button>
-    </div>
+      <div class="buttons is-justify-content-space-between w-full">
+        <button
+          class="button is-success is-light"
+          @click="addAttr()"
+        >
+          <span class="icon">
+            <Icon
+              name="material-symbols:add-rounded"
+              :size="20"
+            />
+          </span>
+          <span>Thêm thuộc tính</span>
+        </button>
+        <button
+          class="button is-primary"
+          @click="update()"
+        >
+          Cập nhật
+        </button>
+      </div>
+    </Teleport>
     <Modal
+      v-if="comp"
+      v-bind="{ component: comp, width: '40%', height: '400px', vbind }"
       @close="comp = undefined"
       @update="doUpdate"
-      v-bind="{ component: comp, width: '40%', height: '300px', vbind: vbind }"
-      v-if="comp"
-    ></Modal>
+    />
   </div>
 </template>
 <script>
 export default {
   props: ["field", "close"],
+  setup() {
+    const id = useId();
+    return { id };
+  },
   data() {
     return {
       keys: [],