changes

app/components/media/ChipImage.vue

@@ -12,7 +12,10 @@
         class="p-2 is-flex is-justify-content-center is-align-items-center"
         style="min-height: 120px"
       >
-        <SvgIcon v-bind="{ name: 'pdf.svg', type: 'primary', size: 32 }" />
+        <Icon
+          name="mdi:file-pdf-box"
+          :size="32"
+        />
       </div>
       <div
         v-else
@@ -45,7 +48,10 @@
           @click="this.$copyToClipboard(`${$getpath()}static/files/${file.file__file}`)"
         >
           <span class="icon">
-            <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 18 }" />
+            <Icon
+              name="material-symbols:content-copy-outline-rounded"
+              :size="18"
+            />
           </span>
         </button>
         <button
@@ -53,7 +59,10 @@
           @click="download()"
         >
           <span class="icon">
-            <SvgIcon v-bind="{ name: 'download.svg', type: 'primary', size: 18 }" />
+            <Icon
+              name="material-symbols:download-rounded"
+              :size="18"
+            />
           </span>
         </button>
         <button
@@ -62,7 +71,10 @@
           @click="askConfirm()"
         >
           <span class="icon">
-            <SvgIcon v-bind="{ name: 'bin1.svg', type: 'primary', size: 18 }" />
+            <Icon
+              name="material-symbols:delete-outline-rounded"
+              :size="18"
+            />
           </span>
         </button>
       </div>

app/components/media/FileActions.vue

@@ -1,5 +1,5 @@
 <script setup>
-const { $buildFileUrl, $copyToClipboard, $getEditRights } = useNuxtApp();
+const { $buildFileUrl, $copyToClipboard } = useNuxtApp();
 
 const props = defineProps({
   className: String,
@@ -12,24 +12,29 @@ const props = defineProps({
 const url = $buildFileUrl(props.image.file__file);
 </script>
 <template>
-  <div :class="['buttons is-gap-1', className]">
+  <div :class="['buttons has-addons', className]">
     <button
       class="button is-small is-white"
       @click="$copyToClipboard(url)"
       title="Sao chép link"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 18 }" />
+        <Icon
+          name="material-symbols:content-copy-outline-rounded"
+          :size="18"
+        />
       </span>
     </button>
     <button
-      v-if="$getEditRights()"
       class="button is-small is-white"
       @click="editImage(image)"
       title="Sửa"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'edit.svg', type: 'primary', size: 18 }" />
+        <Icon
+          name="material-symbols:edit-outline-rounded"
+          :size="18"
+        />
       </span>
     </button>
     <button
@@ -38,17 +43,23 @@ const url = $buildFileUrl(props.image.file__file);
       title="Tải xuống"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'download.svg', type: 'success', size: 18 }" />
+        <Icon
+          name="material-symbols:download-rounded"
+          :size="18"
+        />
       </span>
     </button>
     <button
-      v-if="$getEditRights()"
       class="button is-small is-white"
       @click="openDeleteImageConfirm(image)"
       title="Xóa"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'bin1.svg', type: 'primary', size: 18 }" />
+        <Icon
+          name="material-symbols:delete-outline-rounded"
+          :size="18"
+          class="has-text-danger"
+        />
       </span>
     </button>
   </div>

app/components/media/FileShow.vue

@@ -1,7 +1,7 @@
 <template>
   <p
-    class="py-1 border-bottom"
     v-for="(v, i) in vfiles"
+    class="py-1"
   >
     <a
       class="mr-4"
@@ -12,34 +12,44 @@
       class="mr-4"
       @click="download(v, i)"
     >
-      <SvgIcon v-bind="{ name: 'download1.svg', type: 'dark', size: 16 }"></SvgIcon>
+      <span class="icon">
+        <Icon
+          name="material-symbols:download-rounded"
+          :size="18"
+        />
+      </span>
     </a>
     <a
+      v-if="show?.delete"
       @click="remove(v, i)"
-      v-if="show ? show.delete : false"
     >
-      <SvgIcon v-bind="{ name: 'bin1.svg', type: 'dark', size: 16 }"></SvgIcon>
+      <span class="icon">
+        <Icon
+          name="material-symbols:delete-outline-rounded"
+          :size="18"
+        />
+      </span>
     </a>
   </p>
   <Modal
-    @close="showmodal = undefined"
-    v-bind="showmodal"
     v-if="showmodal"
-  ></Modal>
+    v-bind="showmodal"
+    @close="showmodal = undefined"
+  />
 </template>
 <script setup>
 const { $copy, $getpath, $download } = useNuxtApp();
 const emit = defineEmits(["remove", "close"]);
-var props = defineProps({
+const props = defineProps({
   files: Object,
   show: Object,
 });
-var showmodal = ref();
-var vfiles = ref($copy(props.files));
+const showmodal = ref();
+const vfiles = ref($copy(props.files));
 function remove(v, i) {
   vfiles.value.splice(i, 1);
-  emit("remove", { v: v, i: i });
-  emit("modalevent", { name: "removefile", data: { v: v, i: i } });
+  emit("remove", { v, i });
+  emit("modalevent", { name: "removefile", data: { v, i } });
   if (vfiles.value.length === 0) emit("close");
 }
 function open(v) {
@@ -62,7 +72,7 @@ function download(v) {
 }
 watch(
   () => props.files,
-  (newVal, oldVal) => {
+  () => {
     vfiles.value = props.files;
   },
 );