feat(note ui): delete all completed ToDo

src/components/DeleteAllItem/DeleteAllItem.vine.ts

@@ -0,0 +1,46 @@
+import { useI18n } from "vue-i18n"
+
+function DeleteAllItem() {
+  const { t } = useI18n()
+
+  const emit = vineEmits<{
+    delete: []
+  }>()
+
+  function deleteAllItem() {
+    emit('delete')
+  }
+
+  return vine`
+    <div v-close-popper flex="~ gap-5px wrap" p="x-6 y-2">
+      <div flex="~ col gap-2" items-center justify-center>
+        <span text-14px select-none>{{ t('delAllDo') }}</span>
+        <div flex>
+          <div
+            v-close-popper
+            bg="primary-d active:primary-a" flex-1
+            p="x-10px y-5px" text="!white 12px"
+            mr-5px flex cursor-pointer items-center justify-center rounded-5px border-none
+            shadow="sm black/20" c="#555"
+            @click="deleteAllItem"
+          >
+            <div i-mdi:check-bold mr-5px />
+            <span>{{ t('alertText.returnText') }}</span>
+          </div>
+          <div
+            v-close-popper
+            bg="black/20 active:black/40" flex-1
+            p="x-10px y-5px" text="!black !dark:white 12px"
+            mr-5px flex cursor-pointer items-center justify-center rounded-5px border-none
+            shadow="sm black/20" c="#555"
+          >
+            <div i-mdi:close-thick mr-5px />
+            <span>{{ t('alertText.cancelText') }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+}
+
+export default DeleteAllItem

src/components/NoteList/NoteBox/Delete/Delete.vine.ts

@@ -0,0 +1,26 @@
+import { Dropdown as VDropdown } from 'floating-vue'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import DeleteAllItem from '../../../DeleteAllItem/DeleteAllItem.vine'
+
+function Delete() {
+  const emit = vineEmits<{
+    delete: []
+  }>()
+
+  return vine`
+    <VDropdown
+      :distance="12"
+      placement="top"
+    >
+      <div>
+        <div i-ph:trash-bold block />
+      </div>
+      <template #popper>
+        <DeleteAllItem @delete="emit('delete')"/>
+      </template>
+    </VDropdown>
+  `
+}
+
+export default Delete

src/components/NoteList/NoteBox/NoteBox.vue

@@ -6,6 +6,7 @@ import emitter from '../../../util/bus'
 import type ITodoList from '../../../interface/ITodoListArray'
 import Item from './Item/Item.vue'
 import Edit from './Edit/Edit.vue'
+import Delete from './Delete/Delete.vine'
 
 interface Props {
   title: string
@@ -16,9 +17,10 @@ interface Props {
   showAddItem?: boolean
   showBtn?: boolean
   list: ITodoList[]
+  showDelete?: boolean
 }
 
-const { title = 'title', color = 'primary-d', showAddItem = true, showBtn = true, id, list } = defineProps<Props>()
+const { title = 'title', color = 'primary-d', showAddItem = true, showBtn = true, showDelete = false, id, list } = defineProps<Props>()
 
 const emits = defineEmits<{
   deleteCate: [id: number | string]
@@ -28,6 +30,7 @@ const emits = defineEmits<{
   edit: [id: number | string, name: string, icon: string, color: string | null]
   editItem: [id: number, title: string, cateId: number | string]
   setStar: [id: number, star: boolean]
+  delete: []
 }>()
 
 const { t } = useI18n()
@@ -133,6 +136,13 @@ function add() {
           </template>
         </VDropdown>
       </div>
+      <div 
+        v-else-if="showDelete"
+        flex="~ gap-5px" w="0 hover:14px" transition="all 300"
+        items-center overflow-hidden p="r-10px l-5px" op="0 hover:100"
+      >
+        <Delete @delete="emits('delete')"/>
+      </div>
       <div v-else w-13px />
     </div>
     <div p="10px t-20px">

src/components/NoteList/OtherNoteList.vue

@@ -8,7 +8,7 @@ import NoteBox from './NoteBox/NoteBox.vue'
 
 const { t } = useI18n()
 
-const list = ref(LocalStorage('get'))
+const list = ref(LocalStorage('get')!)
 
 function del(id: number) {
   for (let i = 0; i < list.value!.length; i++) {
@@ -57,7 +57,17 @@ function setStar(id: number, star: boolean) {
     }
   }
 
-  saveItemSet(list.value!)
+  saveItemSet(list.value)
+}
+
+function deleteAllItem() {
+  let toRemove = list.value.filter(item => item.ok);
+
+  for (let i = toRemove.length - 1; i >= 0; i--) {
+    list.value.splice(list.value.indexOf(toRemove[i]), 1);
+  }
+  
+  saveItemSet(list.value)
 }
 
 emitter.on('searchSetStar', (data) => {
@@ -102,6 +112,8 @@ onBeforeUnmount(() => {
       :title="t('listMenu.completed')"
       :show-add-item="false"
       :show-btn="false"
+      :show-delete="true"
+      @delete="deleteAllItem"
       @edit-item="editItem"
       @del-item="del"
       @set-ok="setOk"

src/components/TabBar/Delete/Delete.vine.ts

@@ -1,6 +1,7 @@
 import { Dropdown as VDropdown } from 'floating-vue'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import DeleteAllItem from '../../DeleteAllItem/DeleteAllItem.vine'
 
 function Delete() {
   const { t } = useI18n()
@@ -11,10 +12,6 @@ function Delete() {
 
   const showColor = ref(false)
 
-  function deleteAllItem() {
-    emit('delete')
-  }
-
   return vine`
     <VDropdown
       v-model:shown="showColor"
@@ -28,34 +25,7 @@ function Delete() {
         <div c="#555 dark:#bbb" i-ph:trash-bold block text-20px />
       </div>
       <template #popper>
-        <div v-close-popper flex="~ gap-5px wrap" p="x-6 y-2">
-          <div flex="~ col gap-2" items-center justify-center>
-            <span text-14px select-none>{{ t('delAllDo') }}</span>
-            <div flex>
-              <div
-                v-close-popper
-                bg="primary-d active:primary-a" flex-1
-                p="x-10px y-5px" text="!white 12px"
-                mr-5px flex cursor-pointer items-center justify-center rounded-5px border-none
-                shadow="sm black/20" c="#555"
-                @click="deleteAllItem"
-              >
-                <div i-mdi:check-bold mr-5px />
-                <span>{{ t('alertText.returnText') }}</span>
-              </div>
-              <div
-                v-close-popper
-                bg="black/20 active:black/40" flex-1
-                p="x-10px y-5px" text="!black !dark:white 12px"
-                mr-5px flex cursor-pointer items-center justify-center rounded-5px border-none
-                shadow="sm black/20" c="#555"
-              >
-                <div i-mdi:close-thick mr-5px />
-                <span>{{ t('alertText.cancelText') }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
+        <DeleteAllItem @delete="emit('delete')"/>
       </template>
     </VDropdown>
   `