From 383260fb8ae00ce51f3fc3df60fcde555e4174b5 Mon Sep 17 00:00:00 2001
From: DanZalov <danzalov@gmail.com>
Date: Mon, 11 Mar 2024 14:05:51 +0400
Subject: [PATCH] add outside click handler and persistent store through vueuse

---
 package-lock.json           | 125 ++++++++++++++++++++++++++++++++++++
 package.json                |   2 +
 src/components/TaskForm.vue |   3 +-
 src/stores/tasks.ts         |  12 +---
 src/views/HomeView.vue      |   2 +-
 5 files changed, 133 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 222d8e8..0f64151 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "vue-project",
       "version": "0.0.0",
       "dependencies": {
+        "@vueuse/components": "^10.9.0",
+        "@vueuse/core": "^10.9.0",
         "pinia": "^2.1.7",
         "vue": "^3.4.15",
         "vue-router": "^4.2.5"
@@ -810,6 +812,11 @@
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -1211,6 +1218,124 @@
       "integrity": "sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==",
       "dev": true
     },
+    "node_modules/@vueuse/components": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.9.0.tgz",
+      "integrity": "sha512-BHQpA0yIi3y7zKa1gYD0FUzLLkcRTqVhP8smnvsCK6GFpd94Nziq1XVPD7YpFeho0k5BzbBiNZF7V/DpkJ967A==",
+      "dependencies": {
+        "@vueuse/core": "10.9.0",
+        "@vueuse/shared": "10.9.0",
+        "vue-demi": ">=0.14.7"
+      }
+    },
+    "node_modules/@vueuse/components/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
+      "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.9.0",
+        "@vueuse/shared": "10.9.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
+      "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
+      "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
+      "dependencies": {
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
diff --git a/package.json b/package.json
index ec5afcd..e43e2ea 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@vueuse/components": "^10.9.0",
+    "@vueuse/core": "^10.9.0",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5"
diff --git a/src/components/TaskForm.vue b/src/components/TaskForm.vue
index 016e932..75211fb 100644
--- a/src/components/TaskForm.vue
+++ b/src/components/TaskForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useTaskStore, type Task } from '@/stores/tasks'
 import { ref } from 'vue'
+import { vOnClickOutside } from '@vueuse/components'
 
 const emit = defineEmits(['close'])
 const props = defineProps<{ taskId: string }>()
@@ -33,7 +34,7 @@ function escHandler() {
 </script>
 
 <template>
-  <div class="task">
+  <div class="task" v-on-click-outside="escHandler">
     <input
       type="text"
       class="myinput"
diff --git a/src/stores/tasks.ts b/src/stores/tasks.ts
index 114e1ab..5a45140 100644
--- a/src/stores/tasks.ts
+++ b/src/stores/tasks.ts
@@ -1,3 +1,4 @@
+import { useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 
 export interface Task {
@@ -6,30 +7,23 @@ export interface Task {
 }
 
 export const useTaskStore = defineStore('task', {
-  state: (): { tasks: Task[] } => ({
-    tasks: JSON.parse(localStorage.getItem('tasks') || '[]') || []
+  state: () => ({
+    tasks: useLocalStorage('tasks', [] as Task[])
   }),
   actions: {
-    persistToLocalStorage() {
-      localStorage.setItem('tasks', JSON.stringify(this.tasks))
-    },
     addTask(task: Task) {
       this.tasks.push(task)
-      this.persistToLocalStorage()
     },
     removeTask(id: string) {
       this.tasks = this.tasks.filter((task) => task.id !== id)
-      this.persistToLocalStorage()
     },
     updateTask(updatedTask: Task) {
       const index = this.tasks.findIndex((task) => task.id === updatedTask.id)
       if (index !== -1) {
         this.tasks[index] = updatedTask
       }
-      this.persistToLocalStorage()
     },
     getTaskById(id: string) {
-      this.persistToLocalStorage()
       return this.tasks.find((task) => task.id === id)
     }
   }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 0b47ada..21b7d27 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -16,7 +16,7 @@ import PiniaPicture from '@/components/icons/PiniaPicture.vue'
       <span>с использованием Pinia</span>
       <PiniaPicture />
     </div>
-    <div class="last">"Таск-менеджер"</div>
+    <div class="last">Переходи на "Список Задач"</div>
   </h2>
 </template>