refactor(架构调整): typescript vue setup等全局配置

packages/components/basic/audio/src/audio.vue

@@ -9,6 +9,10 @@
 
 <script lang="ts" setup>
 import { defineProps, ref, watchEffect } from 'vue'
+
+defineOptions({
+    name: 'UIAudio',
+})
 defineProps({
     src: String,
 })
@@ -50,7 +54,3 @@ defineExpose({
     },
 })
 </script>
-
-<!-- <script>
-  export default { name: 'UiAudio' };
-</script> -->

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

@@ -15,7 +15,7 @@
 import { defineComponent } from 'vue'
 import { isFunction, omit } from '@kankan/utils'
 export default defineComponent({
-    name: 'UiAlert',
+    name: 'UIAlert',
     props: {
         showCloseIcon: {
             type: Boolean,

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

@@ -21,7 +21,7 @@ import { defineComponent } from 'vue'
 import { isFunction, omit } from '@kankan/utils'
 
 export default defineComponent({
-    name: 'UiConfirm',
+    name: 'UIConfirm',
     props: {
         title: {
             type: String,

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

@@ -12,6 +12,8 @@
     </div>
 </template>
 
-<script lang="ts">
-export default { name: 'UiDialogContent' }
+<script lang="ts" setup>
+defineOptions({
+    name: 'UIDialogContent',
+})
 </script>

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

@@ -14,12 +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',
+    name: 'UIDialog',
     components: { DialogContent },
     setup: function () {
         const show = ref(true)

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

@@ -17,7 +17,7 @@ import { useZIndex } from '@kankan/hooks'
 const { currentZIndex } = useZIndex()
 
 export default defineComponent({
-    name: 'UiToast',
+    name: 'UIToast',
     props: {
         type: String,
         delay: Number,

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

@@ -19,7 +19,7 @@
 <script>
 import { defineComponent } from 'vue'
 export default defineComponent({
-    name: 'UiWindow',
+    name: 'UIWindow',
     props: {
         title: {
             type: String,

packages/components/basic/index.ts

@@ -2,3 +2,4 @@ export * from './audio'
 export * from './icon'
 export * from './button'
 export * from './input'
+export * from './menu-item'

packages/components/basic/menu-item/index.ts

@@ -0,0 +1,9 @@
+import { withInstall } from '@kankan/utils'
+
+import MenuItem from './src/menu-item.vue'
+
+export const UIMenuItem = withInstall(MenuItem)
+
+export default UIMenuItem
+
+export * from './src/menu-item'

packages/components/basic/menu-item/src/menu-item.ts

@@ -0,0 +1,22 @@
+import type { ExtractPropTypes } from 'vue'
+import { buildProps } from '@kankan/utils'
+import type MenuItem from './menu-item.vue'
+
+export const menuItemProps = buildProps({
+    icon: {
+        type: String,
+        require: true,
+    },
+    text: {
+        type: String,
+        require: true,
+    },
+    active: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+export type MenuItemProps = ExtractPropTypes<typeof menuItemProps>
+
+export type MenuItemInstance = InstanceType<typeof MenuItem>

packages/components/basic/menu-item/index.vue

@@ -6,30 +6,19 @@
     </div>
 </template>
 
-<script setup>
-import UIIcon from '../icon'
+<script lang="ts" setup>
+import UIIcon from '@kankan/components/basic/icon'
 import { defineProps, defineExpose, defineEmits, ref } from 'vue'
+import { menuItemProps } from './menu-item'
+
+defineOptions({
+    name: 'UIMenuItem',
+})
 
 const self = ref(null)
 // const props =
-defineProps({
-    icon: {
-        type: String,
-        require: true,
-    },
-    text: {
-        type: String,
-        require: true,
-    },
-    active: {
-        type: Boolean,
-    },
-})
+defineProps(menuItemProps)
 const emit = defineEmits(['leave', 'enter', 'click'])
 
 defineExpose({ dom: self })
 </script>
-
-<script>
-export default { name: 'UiMenuItem' }
-</script>

packages/components/package.json

@@ -32,12 +32,8 @@
         "tslib": "^2.4.0",
         "typescript": "~4.7.4"
     },
-    "typedoc": {
-        "entryPoint": "./src/index.ts",
-        "readmeFile": "./README.md",
-        "displayName": "@kankan/components"
-    },
+    "sideEffects": false,
     "dependencies": {
-        "vue-cropper": "^0.5.8"
+        "vue-cropper": "^1.0.5"
     }
 }

playground/vite.config.ts

@@ -1,7 +1,17 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import VueMacros from 'unplugin-vue-macros/vite'
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue()],
+    plugins: [
+        VueMacros({
+            setupComponent: false,
+            setupSFC: false,
+            plugins: {
+                vue: vue(),
+                vueJsx: vueJsx(),
+            },
+        }),
+    ],
 })

pnpm-lock.yaml

@@ -156,10 +156,10 @@ importers:
       tslib: ^2.4.0
       typescript: ~4.7.4
       vue: ^3.2.0
-      vue-cropper: ^0.5.8
+      vue-cropper: ^1.0.5
     dependencies:
       vue: 3.2.39
-      vue-cropper: 0.5.8
+      vue-cropper: 1.0.5
     devDependencies:
       '@kankan/utils': link:../utils
       '@rollup/plugin-typescript': 8.3.4_z6zeof5eklcd4ck5cj6ien7gzy
@@ -12772,8 +12772,8 @@ packages:
       - terser
     dev: true
 
-  /vue-cropper/0.5.8:
-    resolution: {integrity: sha512-Xgi/aLQCcNCiBTUdovy/i4LWx0G7fQnAENBpDWA3J4i87Zlk9DJRksXrClsQ6nnaFRfQVkMimij5GEvAMaXdYw==}
+  /vue-cropper/1.0.5:
+    resolution: {integrity: sha512-D4XXdqWmMWRLOIV9LIh7/mkH6OBOMQDFbRjwntkxmAtxOtwpC9U5ZZ6lSXw5F5cbd4g8znDjk6MuCwIL+fZSrA==}
     dev: false
 
   /vue-demi/0.13.11_vue@3.2.39:

pnpm-workspace.yaml

@@ -1,4 +1,4 @@
 packages:
-  - packages/*
+  - packages/**
   - docs
   - play

tsconfig.json

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

tsconfig.play.json

@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.web.json",
+    "compilerOptions": {
+        "allowJs": true,
+        "lib": ["ESNext", "DOM", "DOM.Iterable"]
+    },
+    "include": [
+        "packages",
+        "typings/components.d.ts",
+        "typings/env.d.ts",
+
+        // playground
+        "playground/main.ts",
+        "playground/env.d.ts",
+        "playground/src/**/*"
+    ]
+}