refactor(架构调整): 增加defineOptions global hook组件增加vue3 sfc 通用性defineOptions

package.json

@@ -34,12 +34,15 @@
     "devDependencies": {
         "@changesets/cli": "^2.24.4",
         "@commitlint/cli": "^17.1.2",
+        "@types/jsdom": "^16.2.14",
+        "@types/node": "*",
+        "@pnpm/find-workspace-packages": "^4.0.16",
+        "@pnpm/logger": "^4.0.0",
+        "@pnpm/types": "^8.4.0",
         "@typescript-eslint/eslint-plugin": "^5.38.1",
         "@vitejs/plugin-vue": "^3.1.0",
         "@vitejs/plugin-vue-jsx": "^2.0.1",
         "@vue/test-utils": "^2.0.2",
-        "@types/jsdom": "^16.2.14",
-        "@types/node": "*",
         "commitizen": "^4.2.5",
         "commitlint-config-cz": "^0.13.3",
         "cz-customizable": "^7.0.0",
@@ -57,6 +60,7 @@
         "resize-observer-polyfill": "^1.5.1",
         "typescript": "~4.7.4",
         "unplugin-vue-components": "^0.20.1",
+        "unplugin-vue-define-options": "^0.12.0",
         "unplugin-vue-macros": "^0.11.2",
         "vitest": "^0.23.4"
     },

packages/components/basic/bubble/src/bubble.vue

@@ -10,6 +10,9 @@
 </template>
 
 <script setup lang="ts">
+defineOptions({
+    name: 'UIBubble',
+})
 defineProps({
     type: {
         type: String,
@@ -25,7 +28,3 @@ defineProps({
     },
 })
 </script>
-
-<script lang="ts">
-export default { name: 'UiBubble' }
-</script>

packages/components/basic/button/src/button.vue

@@ -11,6 +11,9 @@ import { normalizeUnitToStyle } from '@kankan/utils'
 // import UIIcon from '../../icon/src/icon.vue'
 import UIIcon from '@kankan/components/basic/icon'
 
+defineOptions({
+    name: 'UIMessage',
+})
 const props = defineProps({
     type: {
         type: String,

packages/components/basic/cropper/cropper.vue

@@ -25,6 +25,11 @@ import 'vue-cropper/dist/index.css'
 // const { t } = useI18n({ useScope: 'global' })
 const sizeType = ref(1)
 const layerWidth = 500
+
+defineOptions({
+    name: 'UICropper',
+})
+
 const props = defineProps({
     fixedNumber: {
         type: Array,

packages/components/basic/dialog/src/dialog.vue

@@ -14,6 +14,9 @@ import { defineComponent, ref } from 'vue'
 import { useZIndex } from '@kankan/hooks'
 const { currentZIndex } = useZIndex()
 
+defineOptions({
+    name: 'UIDialog',
+})
 import DialogContent from './dialog-content.vue'
 export default defineComponent({
     name: 'UiDialog',

packages/components/basic/floating/src/floating.vue

@@ -12,6 +12,11 @@ import { defineProps, defineExpose, onUnmounted, reactive, watch, computed, onAc
 import { getPostionByTarget, getScrollParents } from '@kankan/utils'
 import { useZIndex } from '@kankan/hooks'
 const { currentZIndex } = useZIndex()
+
+defineOptions({
+    name: 'UIFloating',
+})
+
 const Horizontal = {
     center: 'center',
     right: 'right',
@@ -157,7 +162,3 @@ defineExpose({
     updateLocation,
 })
 </script>
-<!-- 
-<script>
-export default { name: 'UiFloating' }
-</script> -->

packages/components/basic/icon/src/icon.vue

@@ -10,6 +10,11 @@
 import { defineProps, computed, defineEmits } from 'vue'
 import { normalizeUnitToStyle, os } from '@kankan/utils'
 import { iconProps } from './icon'
+
+defineOptions({
+    name: 'UIIcon',
+})
+
 const props = defineProps(iconProps)
 
 const style = computed(() => ({
@@ -37,9 +42,6 @@ const className = computed(() => {
 })
 
 const emit = defineEmits(['click'])
-// defineOptions({
-//   name: 'UIIcon',
-// });
 </script>
 <style>
 /* @import url('./iconfont/iconfont.css'); */

packages/components/basic/message/message.vue

@@ -9,10 +9,12 @@
     </teleport>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import uiIcon from '../icon'
-import getZindex from '../../utils/zindex'
+// import getZindex from '../../utils/zindex'
 import { defineProps, onMounted, ref, nextTick } from 'vue'
+import { useZIndex } from '@kankan/hooks'
+const { currentZIndex } = useZIndex()
 
 const props = defineProps({
     msg: {
@@ -29,7 +31,7 @@ const props = defineProps({
     },
     index: {},
 })
-const zIndex = getZindex()
+const zIndex = currentZIndex
 const icons = {
     success: 'state_s',
     warning: 'state_e',
@@ -46,7 +48,3 @@ if (props.time) {
 
 onMounted(() => nextTick(() => (show.value = true)))
 </script>
-
-<script>
-export default { name: 'UiMessage' }
-</script>

packages/components/package.json

@@ -36,5 +36,8 @@
         "entryPoint": "./src/index.ts",
         "readmeFile": "./README.md",
         "displayName": "@kankan/components"
+    },
+    "dependencies": {
+        "vue-cropper": "^0.5.8"
     }
 }

tsconfig.json

@@ -1,10 +1,5 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.web.json" },
-    // { "path": "./tsconfig.play.json" },
-    // { "path": "./tsconfig.node.json" },
-    { "path": "./tsconfig.vite-config.json" },
-    { "path": "./tsconfig.vitest.json" }
-  ]
+    "files": [],
+    "references": [{ "path": "./tsconfig.web.json" }, { "path": "./tsconfig.node.json" }, { "path": "./tsconfig.vite-config.json" }, { "path": "./tsconfig.vitest.json" }]
 }
+// { "path": "./tsconfig.play.json" },

tsconfig.web.json

@@ -10,3 +10,4 @@
     "include": ["packages", "typings/components.d.ts", "typings/env.d.ts"],
     "exclude": ["node_modules", "**/dist", "**/__tests__/**/*", "**/gulpfile.ts", "**/test-helper", "packages/test-utils", "**/*.md"]
 }
+//