refactor: remove vue global helper functions, update deps

Author: hannoeru

.vscode/vue.code-snippets

@@ -1,15 +1,16 @@
 {
   "Vue setup ts": {
-    "prefix": "vue",
-    "body": [
-      "<script setup lang=\"ts\">",
-      "import { defineProps } from 'vue'\n",
-      "defineProps({$2})\n",
-      "</script>\n",
-      "<template>",
-      "\t$1",
-      "</template>\n"
-    ],
-    "description": "Vue SFC setup typescript Template"
-  }
+		"prefix": "vue",
+		"body": [
+			"<script setup lang=\"ts\">",
+			"import { ref } from 'vue'\n",
+			"defineProps<{$2}>()\n\n",
+      "const a = ref($3)\n",
+			"</script>\n",
+			"<template>",
+			"\t$1",
+			"</template>\n"
+		],
+		"description": "Vue SFC setup typescript Template"
+	}
 }

package.json

@@ -11,29 +11,29 @@
   "dependencies": {
     "@vee-validate/i18n": "^4.4.5",
     "@vee-validate/rules": "^4.4.5",
-    "@vueuse/core": "^5.0.3",
+    "@vueuse/core": "^5.1.0",
     "axios": "^0.21.1",
     "dayjs": "^1.10.5",
     "mitt": "^3.0.0",
     "vee-validate": "^4.4.5",
-    "vue": "^3.1.3",
+    "vue": "^3.1.4",
     "vue-router": "^4.0.10",
     "yup": "^0.32.9"
   },
   "devDependencies": {
-    "@hannoeru/eslint-config": "^0.1.5",
-    "@iconify/json": "^1.1.368",
+    "@hannoeru/eslint-config": "^0.2.0",
+    "@iconify/json": "^1.1.370",
     "@openapitools/openapi-generator-cli": "^2.3.5",
     "@vitejs/plugin-vue": "^1.2.4",
-    "@vue/compiler-sfc": "^3.1.3",
-    "eslint": "^7.29.0",
+    "@vue/compiler-sfc": "^3.1.4",
+    "eslint": "^7.30.0",
     "typescript": "^4.3.5",
-    "vite": "^2.3.8",
+    "vite": "^2.4.0",
     "vite-plugin-components": "^0.12.0",
-    "vite-plugin-icons": "^0.6.3",
+    "vite-plugin-icons": "^0.6.4",
     "vite-plugin-pages": "^0.14.8",
     "vite-plugin-windicss": "^1.2.0",
     "vue-tsc": "^0.2.0",
-    "windicss": "^3.1.3"
+    "windicss": "^3.1.4"
   }
 }

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, defineEmits, computed } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps<{
   inline?: boolean

src/components/atoms/AppButton.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 
 const props = defineProps({
   width: {

src/components/atoms/AppImage.vue

@@ -5,9 +5,6 @@ export default {
 </script>
 
 <script setup lang="ts">
-// eslint-disable-next-line import/first
-import { defineEmits, defineProps, withDefaults } from 'vue'
-
 interface Props {
   id?: string
   placeholder?: string

src/components/atoms/AppInput.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 
 defineProps({
   outline: {

src/components/atoms/AppLabel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineProps, withDefaults } from 'vue'
+import { computed } from 'vue'
 
 interface Props {
   to?: string | object

src/components/atoms/AppLink.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import { ErrorMessage } from 'vee-validate'
 
 defineProps({

src/components/atoms/FormErrorMessage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineProps } from 'vue'
+import { ref } from 'vue'
 
 const props = defineProps({
   type: {

src/components/molecules/AppAddMinusButton.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineEmits, defineProps, withDefaults } from 'vue'
 
 interface Props {
   value?: boolean

src/components/molecules/AppCheckbox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineProps, ref, defineEmits, withDefaults } from 'vue'
+import { computed, ref } from 'vue'
 import dayjs, { Dayjs } from 'dayjs'
 
 type TDay = {

src/components/molecules/AppDatepicker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, ref } from 'vue'
+import { ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
 
 const props = defineProps({

src/components/molecules/AppDrawer.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { defineProps, defineEmits } from 'vue'
-
 defineProps<{
   name: string
   open: boolean

src/components/molecules/AppModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineProps, withDefaults } from 'vue'
+import { ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
 
 // todo: 針對 inline-flex parent 優化

src/components/molecules/AppPopover.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, defineEmits, ref } from 'vue'
+import { ref } from 'vue'
 
 const props = defineProps<{
   id?: string

src/components/molecules/AppSelect.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 
 const props = defineProps({
   data: {

src/components/molecules/ProcessLine.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import dayjs from 'dayjs'
 
 import type { RequiredItem } from '@/api'

src/components/molecules/apply/ApplyItemInfo.vue

@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import { useApply } from '@/logics/apply'
 
 import type { RequiredItem } from '@/api'
 
 const { changeItem, isChecked } = useApply()
 
-interface Props {
-  item: RequiredItem
-}
-
-defineProps<Props>()
+defineProps<{ item: RequiredItem }>()
 
 </script>
 

src/components/molecules/apply/ApplyListItem.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps, withDefaults } from 'vue'
 
 import type { FormContext } from 'vee-validate'
 import type { UnRef, LinkProp } from '@/types'

src/components/molecules/form/FormActions.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import { Field } from 'vee-validate'
 
 defineProps({

src/components/molecules/form/FormCheckbox.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import { useField } from 'vee-validate'
 
 const props = defineProps({

src/components/molecules/form/FormInput.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import { Field } from 'vee-validate'
 import type { PropType } from 'vue'
 import type { InputChildren } from '@/types'

src/components/molecules/form/FormRadio.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import { useField } from 'vee-validate'
 import type { PropType } from 'vue'
 import type { InputChildren } from '@/types'

src/components/molecules/form/FormSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, defineEmits, ref } from 'vue'
+import { ref } from 'vue'
 
 defineProps<{
   open: boolean

src/components/organisms/ConfirmModel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineProps } from 'vue'
+import { ref } from 'vue'
 
 const props = defineProps({
   proccess: {

src/components/organisms/DonateSchedule.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 
 defineProps({
   name: String,

src/components/organisms/apply/ApplyHeader.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 import { orgTypeNames, cityNames } from '@/data'
 
 import type { OrganizationSummary } from '@/api'

src/components/organisms/apply/ApplyOrgInfoBar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
 
 import type { RequiredItem } from '@/api'
 

src/components/organisms/apply/ApplySupplyList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useApply } from '@/logics/apply'
 
 const props = defineProps({

src/components/organisms/apply/ApplyToolbar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, toRefs, computed } from 'vue'
+import { toRefs, computed } from 'vue'
 import { cityNames } from '@/data'
 
 import type { GroupedRequiredItems } from '@/api'