Merge pull request #398 from FightingDesign/vue3.3

chore: 更新 vue 3.3

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+- 修复 `f-option` 关闭报错问题
+- 修复 `f-time-pick` 关闭报错问题
+- 修复 `f-main` 组件名错误问题
+- 修复 `f-ripple` 组件名错误问题
+- 修复 `f-option` 点击报错问题
+
 ## 0.38.0 (2023-05-11)
 
 **修复**

docs/.vitepress/json/contributors.json

@@ -179,6 +179,10 @@
     {
       "avatar": "https://avatars.githubusercontent.com/u/76730587?v=4",
       "homePage": "https://github.com/JetTsang"
+    },
+    {
+      "avatar": "https://avatars.githubusercontent.com/u/20159933?v=4",
+      "homePage": "https://github.com/chunshand"
     }
   ]
 }

docs/vite.config.ts

@@ -1,13 +1,8 @@
 import { resolve } from 'path'
-import FightingSetupNamePlugin from '../packages/fighting-setup-name'
 import type { UserConfigExport } from 'vite'
 
 export default (): UserConfigExport => {
   return {
-    plugins: [
-      /** 设置组件名插件 */
-      FightingSetupNamePlugin()
-    ],
     optimizeDeps: {
       exclude: ['vitepress']
     },

package.json

@@ -35,15 +35,14 @@
     "format": "pnpm prettier && pnpm lint:fix"
   },
   "dependencies": {
-    "vue": "^3.2.47"
+    "vue": "^3.3.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@fighting-design/eslint-config": "workspace:*",
     "@fighting-design/fighting-icon": "workspace:*",
     "@fighting-design/fighting-theme": "workspace:*",
-    "@fighting-design/vite-plugin-vue-fighting-setup-name": "workspace:*",
     "@types/node": "^17.0.42",
     "@vitejs/plugin-vue": "^3.0.1",
     "@vue/test-utils": "^2.0.0-rc.18",
@@ -62,7 +61,7 @@
     "sass": "^1.55.0",
     "typescript": "^4.7.4",
     "vite": "^3.1.2",
-    "vite-plugin-dts": "2.0.0-beta.3",
+    "vite-plugin-dts": "^2.3.0",
     "vitest": "^0.24.3",
     "vue-tsc": "^1.0.11"
   },
@@ -77,4 +76,4 @@
       "eslint --fix"
     ]
   }
-}
+}

packages/fighting-add-component/template/component/src/__name__.vue

@@ -1,6 +1,8 @@
-<script lang="ts" setup name="F<%= displayName %>">
+<script lang="ts" setup>
   import { Props } from './props'
 
+  defineOptions({name: 'F<%= displayName %>'})
+
   const prop = defineProps(Props)
 </script>
 

packages/fighting-design/README.md

@@ -60,7 +60,7 @@ pnpm new <component-name>
 
 **script 规范**
 
-- `script` 上的 `name` 属性是组件的名字，使用的 [fighting-setup-name](https://github.com/FightingDesign/fighting-design/tree/master/packages/fighting-setup-name) 插件。组件名必须以 `F` 开头，后面跟组件名，组件名首字母大写，例如：`FButton`
+- 组件使用 defineOptions 宏设置 name，必须以 `F` 开头，后面跟组件名，组件名首字母大写，例如：`FButton`
 - 引入的类型，必须使用 `type` 标记，比如：`import type { xxx } from 'xxx'`
 - 在所有 `import` 之后要带有一个空行，之后是 `prop` 和 `emit`
 - `prop` 和 `emit` 之后，也要带一个空行，再继续编写其它代码

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

@@ -1,11 +1,13 @@
-<script lang="ts" setup name="FAlert">
+<script lang="ts" setup>
   import { Props } from './props'
   import { ref, onMounted } from 'vue'
   import { FCloseBtn } from '../../close-btn'
   import { FSvgIcon } from '../../svg-icon'
   import { isNumber } from '../../_utils'
   import { useList, useRun, useGlobal, useAlertList } from '../../_hooks'
 
+  defineOptions({name: 'FAlert'})
+
   const prop = defineProps(Props)
 
   const { getProp } = useGlobal(prop)

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

@@ -1,7 +1,9 @@
-<script lang="ts" setup name="FAside">
+<script lang="ts" setup>
   import { Props } from './props'
   import { useList } from '../../_hooks'
 
+  defineOptions({name: 'FAside'})
+
   const prop = defineProps(Props)
 
   const { styles } = useList(prop, 'aside')

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

@@ -1,11 +1,13 @@
-<script lang="ts" setup name="FAvatar">
+<script lang="ts" setup>
   import { Props } from './props'
   import { ref, useSlots } from 'vue'
   import { FSvgIcon } from '../../svg-icon'
   import { useLoadImg, useList } from '../../_hooks'
   import { isNumber, isString } from '../../_utils'
   import type { Slots } from 'vue'
 
+  defineOptions({name: 'FAvatar'})
+
   const prop = defineProps(Props)
   const slot: Slots = useSlots()
 

packages/fighting-design/back-top/src/back-top.vue

@@ -1,9 +1,11 @@
-<script lang="ts" setup name="FBackTop">
+<script lang="ts" setup>
   import { Props } from './props'
   import { onMounted, ref, toRefs, onUnmounted } from 'vue'
   import { debounce, isNumber, isString, error } from '../../_utils'
   import { useList } from '../../_hooks'
 
+  defineOptions({name: 'FBackTop'})
+
   const prop = defineProps(Props)
 
   const { styles, classes } = useList(prop, 'back-top')

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

@@ -1,9 +1,11 @@
-<script lang="ts" setup name="FBadge">
+<script lang="ts" setup>
   import { Props } from './props'
   import { computed } from 'vue'
   import { isNumber } from '../../_utils'
   import { useList } from '../../_hooks'
 
+  defineOptions({name: 'FBadge'})
+
   const prop = defineProps(Props)
 
   const { classes, styles } = useList(prop, 'badge')

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

@@ -1,7 +1,9 @@
-<script lang="ts" setup name="FBox">
+<script lang="ts" setup>
   import { Props } from './props'
   import { useList } from '../../_hooks'
 
+  defineOptions({name: 'FBox'})
+
   const prop = defineProps(Props)
 
   const { styles } = useList(prop, 'box')

packages/fighting-design/breadcrumb-item/src/breadcrumb-item.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="FBreadcrumbItem">
+<script lang="ts" setup>
   import { Props } from './props'
   import { inject, computed, getCurrentInstance, reactive } from 'vue'
   import { BREADCRUMB_PROPS_KEY } from '../../breadcrumb/src/props'
@@ -9,6 +9,8 @@
   import type { ComponentInternalInstance } from 'vue'
   import type { BreadcrumbProps } from '../../breadcrumb'
 
+  defineOptions({name: 'FBreadcrumbItem'})
+
   const prop = defineProps(Props)
 
   /** 获取注入依赖项 */

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

@@ -1,8 +1,10 @@
-<script lang="ts" setup name="FBreadcrumb">
+<script lang="ts" setup>
   import { Props, BREADCRUMB_PROPS_KEY } from './props'
   import { provide } from 'vue'
   import type { BreadcrumbProps } from './interface'
 
+  defineOptions({name: 'FBreadcrumb'})
+
   const prop = defineProps(Props)
 
   provide<BreadcrumbProps>(BREADCRUMB_PROPS_KEY, prop)

packages/fighting-design/button-group/src/button-group.vue

@@ -1,11 +1,13 @@
-<script lang="ts" setup name="FButtonGroup">
+<script lang="ts" setup>
   import { Props, BUTTON_GROUP_PROPS_KEY } from './props'
   import { FIGHTING_GLOBAL_PROPS_KEY } from '../../fighting-global/src/props'
   import { provide, computed, inject } from 'vue'
   import { useList } from '../../_hooks'
   import type { FightingSize } from '../../_interface'
   import type { FightingGlobalProps } from '../../fighting-global'
 
+  defineOptions({name: 'FButtonGroup'})
+
   const prop = defineProps(Props)
 
   const { classes } = useList(prop, 'button-group')

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

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="FButton">
+<script lang="ts" setup>
   import { Props } from './props'
   import { ref, toRefs, reactive, computed } from 'vue'
   import { FSvgIcon } from '../../svg-icon'
@@ -7,6 +7,8 @@
   import type { RipplesOptions } from '../../_hooks'
   import type { FightingIcon } from '../../_interface'
 
+  defineOptions({name: 'FButton'})
+
   const prop = defineProps(Props)
 
   const { getType } = useGlobal(prop)

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

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="FCalendar">
+<script lang="ts" setup>
   import { Props } from './props'
   import { computed, watch, reactive } from 'vue'
   import { FSvgIcon } from '../../svg-icon'
@@ -7,6 +7,8 @@
   import { useCalendar, useRun, useGlobal, useList } from '../../_hooks'
   import type { GetLunarDetailReturn } from '../../_hooks'
 
+  defineOptions({name: 'FCalendar'})
+
   const prop = defineProps(Props)
 
   /**

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

@@ -1,9 +1,11 @@
-<script lang="ts" setup name="FCard">
+<script lang="ts" setup>
   import { Props } from './props'
   import { ref } from 'vue'
   import { useList, useRun } from '../../_hooks'
   import { FCloseBtn } from '../../close-btn'
 
+  defineOptions({name: 'FCard'})
+
   const prop = defineProps(Props)
 
   /** 控制卡片的展示状态 */

packages/fighting-design/checkbox-group/src/checkbox-group.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="FCheckboxGroup">
+<script lang="ts" setup>
   import { Props, CHECKBOX_GROUP_PROPS_KEY } from './props'
   import { provide, reactive, toRefs } from 'vue'
   import { isArray } from '../../_utils'
@@ -7,6 +7,8 @@
   import type { CheckboxGroupProvide } from './interface'
   import type { CheckboxLabel } from '../../checkbox'
 
+  defineOptions({name: 'FCheckboxGroup'})
+
   const prop = defineProps(Props)
   const emit = defineEmits({
     [EMIT_UPDATE]: (val: string[] | CheckboxLabel): boolean => isArray(val)

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

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="FCheckbox">
+<script lang="ts" setup>
   import { Props } from './props'
   import { computed, inject, reactive } from 'vue'
   import { useRun, useList, useModel } from '../../_hooks'
@@ -8,6 +8,8 @@
   import type { CheckboxGroupProvide } from '../../checkbox-group'
   import type { CheckboxModelValue } from './interface'
 
+  defineOptions({name: 'FCheckbox'})
+
   const prop = defineProps(Props)
   const emit = defineEmits({
     [EMIT_UPDATE]: (val: CheckboxModelValue): CheckboxModelValue =>

packages/fighting-design/close-btn/src/close-btn.vue

@@ -1,9 +1,11 @@
-<script lang="ts" setup name="FCloseBtn">
+<script lang="ts" setup>
   import { Props } from './props'
   import { FSvgIcon } from '../../svg-icon'
   import { FIconCross } from '../../_svg'
   import { useRun, useList } from '../../_hooks'
 
+  defineOptions({name: 'FCloseBtn'})
+
   const prop = defineProps(Props)
 
   const { styles, classes } = useList(prop, 'close-btn')

packages/fighting-design/collapse-animation/src/collapse-animation.vue

@@ -1,7 +1,9 @@
-<script lang="ts" setup name="FCollapseAnimation">
+<script lang="ts" setup>
   import { Props } from './props'
   import { computed } from 'vue'
 
+  defineOptions({name: 'FCollapseAnimation'})
+
   const prop = defineProps(Props)
 
   /**
@@ -41,7 +43,7 @@
    * @param { Object } el 元素节点
    */
   const onBeforeEnter = (el: Element): void => {
-    ;(el as HTMLElement).style.transition = transitionStyle
+    (el as HTMLElement).style.transition = transitionStyle
     ;(el as HTMLElement).style.height = '0'
   }
 
@@ -54,11 +56,11 @@
    */
   const onEnter = (el: Element): void => {
     if ((el as HTMLElement).scrollHeight !== 0) {
-      ;(el as HTMLElement).style.height = `${(el as HTMLElement).scrollHeight}px`
+      (el as HTMLElement).style.height = `${(el as HTMLElement).scrollHeight}px`
     } else {
-      ;(el as HTMLElement).style.height = ''
+      (el as HTMLElement).style.height = ''
     }
-    ;(el as HTMLElement).style.overflow = 'hidden'
+    (el as HTMLElement).style.overflow = 'hidden'
   }
 
   /**
@@ -67,7 +69,7 @@
    * @param { Object } el 元素节点
    */
   const onAfterEnter = (el: Element): void => {
-    ;(el as HTMLElement).style.transition = ''
+    (el as HTMLElement).style.transition = ''
     ;(el as HTMLElement).style.height = ''
   }
 
@@ -79,7 +81,7 @@
    * @param { Object } el 元素节点
    */
   const onBeforeLeave = (el: Element): void => {
-    ;(el as HTMLElement).style.height = `${(el as HTMLElement).scrollHeight}px`
+    (el as HTMLElement).style.height = `${(el as HTMLElement).scrollHeight}px`
   }
 
   /**
@@ -91,7 +93,7 @@
    */
   const onLeave = (el: Element): void => {
     if ((el as HTMLElement).scrollHeight !== 0) {
-      ;(el as HTMLElement).style.transition = transitionStyle
+      (el as HTMLElement).style.transition = transitionStyle
       ;(el as HTMLElement).style.height = '0'
     }
   }
@@ -104,7 +106,7 @@
    * @param { Object } el 元素节点
    */
   const onAfterLeave = (el: Element): void => {
-    ;(el as HTMLElement).style.transition = ''
+    (el as HTMLElement).style.transition = ''
     ;(el as HTMLElement).style.height = ''
   }
 </script>

packages/fighting-design/count-down/src/count-down.vue

@@ -1,10 +1,12 @@
-<script lang="ts" setup name="FCountDown">
+<script lang="ts" setup>
   import { computed, watch } from 'vue'
   import { Props } from './props'
   import { useCountDown } from '../../_hooks'
   import { useRun } from '../../_hooks'
   import type { CurrentTime } from '../../_hooks'
 
+  defineOptions({name: 'FCountDown'})
+
   const prop = defineProps(Props)
 
   const { run } = useRun()

packages/fighting-design/date-picker/src/date-picker.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="FDatePicker">
+<script lang="ts" setup>
   import { Props } from './props'
   import { FInput } from '../../input'
   import { FTrigger } from '../../trigger'
@@ -9,6 +9,8 @@
   import { FIconCalendar } from '../../_svg'
   import type { CalendarChangeParams } from '../../calendar'
 
+  defineOptions({name: 'FDatePicker'})
+
   const prop = defineProps(Props)
   const emit = defineEmits({
     [EMIT_DATE]: (val: string): boolean => isString(val)