chore: 更新新版本 vue 特性，更新打包配置项和依赖项

.vscode/settings.json

@@ -30,6 +30,7 @@
     "arro",
     "ashbin",
     "aspjiesuan",
+    "assetfilenames",
     "atou",
     "attachent",
     "avatarfit",
@@ -62,6 +63,7 @@
     "checkboxlabel",
     "checkboxmodelvalue",
     "checkstand",
+    "chunkfilenames",
     "clould",
     "Codecov",
     "commitlint",
@@ -116,6 +118,7 @@
     "iife",
     "imagefit",
     "infantmom",
+    "inlinedynamicimports",
     "inputchange",
     "inputenter",
     "inputevent",
@@ -137,6 +140,7 @@
     "linkstate",
     "linktarget",
     "listitem",
+    "manualchunks",
     "maxlength",
     "mdit",
     "menuitemclick",
@@ -148,6 +152,7 @@
     "Moneymanagement",
     "Mousewheel",
     "namecard",
+    "namespacetostringtag",
     "navs",
     "Neumorphism",
     "Newuserzone",

package.json

@@ -44,7 +44,7 @@
     "@fighting-design/fighting-icon": "workspace:*",
     "@fighting-design/fighting-theme": "workspace:*",
     "@types/node": "^17.0.42",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vue/test-utils": "^2.0.0-rc.18",
     "autoprefixer": "^10.4.13",
     "commitizen": "^4.2.4",
@@ -57,13 +57,13 @@
     "prettier": "^2.6.2",
     "pretty-quick": "^3.1.3",
     "rimraf": "^3.0.2",
-    "rollup-plugin-visualizer": "^5.8.0",
+    "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.55.0",
     "typescript": "^4.7.4",
-    "vite": "^3.1.2",
+    "vite": "^4.3.9",
     "vite-plugin-dts": "^2.3.0",
     "vitest": "^0.24.3",
-    "vue-tsc": "^1.0.11"
+    "vue-tsc": "^1.8.0"
   },
   "license": "MIT",
   "config": {

packages/fighting-design/_hooks/use-input/index.ts

@@ -1,7 +1,6 @@
 import { useRun } from '..'
-import { EMIT_UPDATE } from '../../_tokens'
 import type { InputType } from '../../input'
-import type { WritableComputedRef } from 'vue'
+import type { Ref } from 'vue'
 
 /**
  * 传入的 props 类型接口
@@ -31,14 +30,6 @@ export interface UseInputReturn {
   handleClear: () => void
 }
 
-/**
- * 回调函数类型
- *
- * @param { string } event 回调事件名
- * @param { boolean } val 回调参数
- */
-export type UseInputEmit = (event: 'update:modelValue', val: string | number) => void
-
 /**
  * 文本框输入的方法
  *
@@ -51,8 +42,7 @@ export type UseInputEmit = (event: 'update:modelValue', val: string | number) =>
  */
 export const useInput = (
   prop: Partial<UseInputProps>,
-  emit: UseInputEmit,
-  keyword: WritableComputedRef<string | number>
+  modelValue: Ref<string | number | undefined>
 ): UseInputReturn => {
   const { run } = useRun()
 
@@ -62,7 +52,7 @@ export const useInput = (
    * @param { Object } evt 事件对象
    */
   const handleInput = (evt: Event): void => {
-    run(prop.onInput, keyword.value, evt)
+    run(prop.onInput, modelValue.value, evt)
   }
 
   /**
@@ -71,13 +61,13 @@ export const useInput = (
    * @param { Object } evt 事件对象
    */
   const handleChange = (evt: Event): void => {
-    run(prop.onChange, keyword.value, evt)
+    run(prop.onChange, modelValue.value, evt)
   }
 
   /** 清空文本框 */
   const handleClear = (): void => {
     if (prop.disabled) return
-    emit(EMIT_UPDATE, '')
+    modelValue.value = ''
   }
 
   return {

packages/fighting-design/input/src/input.vue

@@ -5,26 +5,19 @@
   import { FSwap } from '../../swap'
   import { ref, toRefs, computed, watchEffect } from 'vue'
   import { FIconCross, FIconEyeOffOutline, FIconEyeOutline } from '../../_svg'
-  import { EMIT_UPDATE } from '../../_tokens'
-  import { useInput, useRun, useList, useGlobal, useModel } from '../../_hooks'
+  import { useInput, useRun, useList, useGlobal } from '../../_hooks'
   import type { InputType } from './interface'
   import type { UseGlobalProp } from '../../_hooks'
 
   defineOptions({ name: 'FInput' })
 
   const prop = defineProps(Props)
-  const emit = defineEmits([EMIT_UPDATE])
+  const modelValue = defineModel<string | number>()
 
   const { run } = useRun()
   const { getLang, getProp } = useGlobal(prop as unknown as UseGlobalProp)
   const { styles, classes } = useList(getProp(['size']), 'input')
-  const { keyword } = useModel<string | number>(
-    (): string | number => prop.modelValue,
-    (val: string | number): void => {
-      emit(EMIT_UPDATE, val)
-    }
-  )
-  const { handleInput, handleClear, handleChange } = useInput(prop, emit, keyword)
+  const { handleInput, handleClear, handleChange } = useInput(prop, modelValue)
 
   /** 是否展示密码 */
   const showPass = ref<boolean>(false)
@@ -46,7 +39,7 @@
    * @param { Object } evt 事件对象
    */
   const handleSearch = (evt: MouseEvent | KeyboardEvent): void => {
-    run(prop.onSearch, keyword.value, evt)
+    run(prop.onSearch, modelValue.value, evt)
   }
 
   /**
@@ -61,7 +54,7 @@
       handleSearch(evt)
     }
 
-    run(onEnter.value, keyword.value, evt)
+    run(onEnter.value, modelValue.value, evt)
   }
 
   /** 查看密码 */
@@ -103,7 +96,7 @@
 
       <!-- 输入框 -->
       <input
-        v-model="keyword"
+        v-model="modelValue"
         class="f-input__input"
         :type="inputType"
         :max="max"

packages/fighting-design/textarea/src/textarea.vue

@@ -1,24 +1,17 @@
 <script lang="ts" setup>
   import { Props } from './props'
   import { ref, watch, nextTick } from 'vue'
-  import { useInput, useList, useModel, useRun } from '../../_hooks'
+  import { useInput, useList, useRun } from '../../_hooks'
   import { FIconCross } from '../../_svg'
   import { FSvgIcon } from '../../svg-icon'
-  import { EMIT_UPDATE } from '../../_tokens'
   import type { WatchStopHandle } from 'vue'
 
   defineOptions({ name: 'FTextarea' })
 
   const prop = defineProps(Props)
-  const emit = defineEmits([EMIT_UPDATE])
+  const modelValue = defineModel<string | number>()
 
-  const { keyword } = useModel<string | number>(
-    (): string | number => prop.modelValue,
-    (val: string | number): void => {
-      emit(EMIT_UPDATE, val)
-    }
-  )
-  const { handleInput, handleClear, handleChange } = useInput(prop, emit, keyword)
+  const { handleInput, handleClear, handleChange } = useInput(prop, modelValue)
   const { classes, styles } = useList(prop, 'textarea')
   const { run } = useRun()
 
@@ -99,7 +92,7 @@
   const handleEnterKey = (evt: KeyboardEvent): void => {
     /** 如果按下 Enter 和 Ctrl 触发换行 */
     if (evt.key === 'Enter' && evt.ctrlKey) {
-      keyword.value += '\n'
+      modelValue.value += '\n'
 
       /** 如果是自适应高度，则重新设置高度 */
       if (prop.autoHeight) {
@@ -119,7 +112,7 @@
        */
       evt.preventDefault()
 
-      run(prop.onEnter, keyword.value, evt)
+      run(prop.onEnter, modelValue.value, evt)
     }
   }
 </script>
@@ -128,7 +121,7 @@
   <div :class="classList" :style="styleList">
     <textarea
       ref="textareaEl"
-      v-model="keyword"
+      v-model="modelValue"
       class="f-textarea__textarea"
       :rows="rows"
       :disabled="disabled"