feat: added delete list & list items

src/components/ListCard.vue

@@ -7,6 +7,7 @@ import { useListsStore } from '@/stores/lists'
 const props = defineProps<{ list: LocalList }>()
 const emit = defineEmits<{
   (e: 'share', list: LocalList): void
+  (e: 'delete', list: LocalList): void
 }>()
 
 const listsStore = useListsStore()
@@ -36,6 +37,13 @@ function handleShare(event: Event) {
   emit('share', props.list)
 }
 
+function handleDelete(event: Event) {
+  event.preventDefault()
+  event.stopPropagation()
+  isMenuOpen.value = false
+  emit('delete', props.list)
+}
+
 function handleClickOutside(event: MouseEvent) {
   if (menuContainerRef.value && !menuContainerRef.value.contains(event.target as Node)) {
     isMenuOpen.value = false
@@ -108,6 +116,28 @@ onUnmounted(() => {
           </svg>
           <span>Share list</span>
         </button>
+        <button
+          type="button"
+          class="submenu-item submenu-item-danger"
+          role="menuitem"
+          @click="handleDelete"
+        >
+          <svg
+            class="submenu-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            <line x1="10" y1="11" x2="10" y2="17" />
+            <line x1="14" y1="11" x2="14" y2="17" />
+          </svg>
+          <span>Delete list</span>
+        </button>
       </div>
     </div>
   </div>
@@ -250,6 +280,15 @@ onUnmounted(() => {
   color: var(--c-accent-strong);
 }
 
+.submenu-item-danger {
+  color: var(--c-danger);
+}
+
+.submenu-item-danger:hover {
+  background-color: var(--c-danger-bg);
+  color: var(--c-danger);
+}
+
 .submenu-icon {
   width: 15px;
   height: 15px;