added delete item button

resources/js/components/SMAttachments.vue

@@ -41,6 +41,21 @@
                             </svg>
                         </a>
                     </td>
+                    <td v-if="props.showEditor" class="pr-2">
+                        <div
+                            class="cursor-pointer text-gray hover:text-red"
+                            @click.prevent="handleClickDelete(file.id)">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-7 pt-1"
+                                viewBox="0 0 24 24">
+                                <title>Delete</title>
+                                <path
+                                    d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"
+                                    fill="currentColor" />
+                            </svg>
+                        </div>
+                    </td>
                     <td
                         class="text-xs text-gray whitespace-nowrap pr-2 py-2 hidden sm:table-cell">
                         ({{ bytesReadable(file.size) }})
@@ -84,6 +99,7 @@ const props = defineProps({
  * Handle the user adding a new media item.
  */
 const handleClickAdd = async () => {
+    if (props.showEditor) {
         let result = await openDialog(SMDialogMedia, {
             mime: "",
             accepts: "",
@@ -105,6 +121,14 @@ const handleClickAdd = async () => {
 
             emits("update:modelValue", newValue);
         }
+    }
+};
+
+const handleClickDelete = (id: string) => {
+    if (props.showEditor == true) {
+        const newList = props.modelValue.filter((item) => item.id !== id);
+        emits("update:modelValue", newList);
+    }
 };
 </script>