changes

app/components/menu/MenuFile.vue

@@ -1,71 +1,84 @@
 <template>
   <div>
-    <b-tooltip
-      label="Mở file"
-      position="is-left"
-      type="is-link"
+    <button
+      @click="openFile(row)"
+      class="button is-small is-ghost"
     >
-      <a
-        class="mr-3"
-        @click="openFile(row)"
-      >
-        <SvgIcon v-bind="{ name: 'open.svg', type: 'dark', size: 16 }"></SvgIcon>
-      </a>
-    </b-tooltip>
-    <!-- <b-tooltip label="Tải xuống" position="is-left" type="is-link">
-      <a class="mr-3" @click="download(row)">
-        <SvgIcon v-bind="{name: 'download1.svg', type: 'dark', size: 16}"></SvgIcon>
-      </a>
-    </b-tooltip> -->
-    <b-tooltip
-      label="Xóa"
-      position="is-left"
-      type="is-danger"
-      v-if="disable ? !disable.delete : true"
+      <span class="icon">
+        <Icon
+          name="material-symbols:open-in-new-rounded"
+          :size="18"
+        />
+      </span>
+    </button>
+    <button
+      @click="download(row)"
+      class="button is-small is-ghost"
     >
-      <a @click="remove()">
-        <SvgIcon v-bind="{ name: 'bin1.svg', type: 'dark', size: 16 }"></SvgIcon>
-      </a>
-    </b-tooltip>
+      <span class="icon">
+        <Icon
+          name="material-symbols:download-rounded"
+          :size="18"
+        />
+      </span>
+    </button>
+    <button
+      @click="remove"
+      class="button is-small is-ghost"
+    >
+      <span class="icon">
+        <Icon
+          name="material-symbols:delete-outline-rounded"
+          :size="18"
+          class="has-text-danger"
+        />
+      </span>
+    </button>
+    <Modal
+      v-if="showModal"
+      v-bind="showModal"
+      @close="showModal = undefined"
+    />
   </div>
 </template>
-<script>
-export default {
-  props: ["api", "pagename", "row", "disable"],
-  methods: {
-    async openFile(row) {
-      const url = `${this.$getpath()}static/files/${row.file__file || row.file}`;
-      window.open(url, "_blank");
+<script setup>
+import Modal from "~/components/Modal.vue";
+
+const { $getpath } = useNuxtApp();
+
+const showModal = ref();
+const props = defineProps(["api", "pagename", "row", "disable"]);
+const emit = defineEmits(["open"]);
+
+async function openFile(row) {
+  const url = `${$getpath()}static/files/${row.file__file || row.file}`;
+  window.open(url, "_blank");
+}
+
+async function download(row) {
+  const url = `${$getpath()}static/files/${row.file__file || row.file}`;
+  const link = document.createElement("a");
+  link.href = url;
+  link.target = "_blank";
+  link.setAttribute("download", row.file);
+  link.click();
+}
+
+function remove() {
+  showModal.value = {
+    component: "dialog/Delete",
+    title: "Xóa file",
+    width: "500px",
+    height: "auto",
+    vbind: {
+      content: `Bạn có muốn xóa file <b>${props.row.name}</b> không?`,
+      duration: 10,
+      vbind: {
+        row: props.row,
+        api: props.api,
+        pagename: props.pagename,
+      },
     },
-    async downloadFile(url, fileName) {
-      // const response = await fetch(url, { method: "GET" });
-      // const blob = await response.blob();
-      const urlDownload = url; //window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = urlDownload;
-      link.setAttribute("download", fileName);
-      link.click();
-    },
-    async download(row) {
-      let url = `${this.$getpath()}static/files/${row.file__file || row.file}`;
-      await this.downloadFile(url, row.file__file || row.file);
-    },
-    remove() {
-      let text = "Bạn có muốn xóa file <b>#file</b> không?";
-      text = text.replace("#file", this.row.file__name);
-      let obj = {
-        component: "dialog/Delete",
-        title: this.$store.lang === "en" ? "Delete file" : "Xóa file",
-        width: "500px",
-        height: "100px",
-        vbind: {
-          content: text,
-          duration: 10,
-          vbind: { row: this.row, api: this.api, pagename: this.pagename },
-        },
-      };
-      this.$emit("open", { name: "dataevent", data: { modal: obj } });
-    },
-  },
-};
+  };
+}
 </script>