fix: 修复ui包类型问题

Author: huangmingfu

TODO.md

@@ -1,3 +1,2 @@
-- [ ] 修复ui组件类型提示问题
 - [ ] 添加 utils 包测试用例（集成jest/vitest）
 - [ ] docs文档添加“更多-更新日志”,changeset管理

apps/docs/en/guide/index.md

@@ -37,15 +37,18 @@ bun add @mylib/ui @mylib/utils @mylib/hooks
 ### UI Components
 
 ```ts
+// Global import
 import { createApp } from 'vue';
 import UI from '@mylib/ui';
-import '@mylib/ui/dist/style.css';
+import '@mylib/ui/style.css';
 const app = createApp(App);
 app.use(UI);
+// You also need to add the following configuration in tsconfig.json to get type hints:
+// "types": ["@mylib/ui/global.d.ts"]
 
 // On-demand import
 import { Button } from '@mylib/ui';
-import '@mylib/ui/dist/style.css';
+import '@mylib/ui/style.css';
 const app = createApp(App);
 app.use(Button);
 ```

apps/docs/en/packages/ui/button.md

@@ -6,10 +6,9 @@ Basic button component.
 
 <demo vue="ui/button/basic.vue" />
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| type | Button type | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' | '' |
-| size | Button size | 'small' \| 'medium' \| 'large' | 'medium' |
-| disabled | Whether to disable the button | boolean | false |
-| plain | Whether to use plain style | boolean | false |
-| round | Whether to use rounded corners | boolean | false |
+| Property | Description                    | Type                                                      | Default  |
+| -------- | ------------------------------ | --------------------------------------------------------- | -------- |
+| type     | Button type                    | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' | ''       |
+| size     | Button size                    | 'small' \| 'medium' \| 'large'                            | 'medium' |
+| disabled | Whether to disable the button  | boolean                                                   | false    |
+| round    | Whether to use rounded corners | boolean                                                   | false    |

apps/docs/en/packages/ui/dialog.md

@@ -23,20 +23,3 @@ The dialog can be styled using the following class names:
 - `.v-dialog`: Main dialog container.
 - `.v-dialog__overlay`: Background overlay.
 - `.v-dialog__content`: Dialog content area.
-
-## Code Example
-
-```vue
-<template>
-  <VDialog v-model:open="open">
-    <div>Dialog content</div>
-  </VDialog>
-  <a-button @click="open = true">Open Dialog</a-button>
-</template>
-
-<script setup lang="ts">
-import { VDialog } from '@mylib/ui';
-import { ref } from 'vue';
-const open = ref(false);
-</script>
-```

apps/docs/zh/guide/index.md

@@ -37,11 +37,14 @@ bun add @mylib/ui @mylib/utils @mylib/hooks
 ### UI 组件
 
 ```ts
+// 全局引入
 import { createApp } from 'vue';
 import UI from '@mylib/ui';
 import '@mylib/ui/style.css';
 const app = createApp(App);
 app.use(UI);
+//  tsconfig.json还需要添加以下配置以获得类型提示：
+//  "types": ["@mylib/ui/global.d.ts"]
 
 // 按需引入
 import { Button } from '@mylib/ui';

apps/docs/zh/packages/ui/button.md

@@ -11,5 +11,4 @@
 | type     | 按钮类型 | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' | ''       |
 | size     | 按钮大小 | 'small' \| 'medium' \| 'large'                            | 'medium' |
 | disabled | 是否禁用 | boolean                                                   | false    |
-| plain    | 是否朴素 | boolean                                                   | false    |
 | round    | 是否圆角 | boolean                                                   | false    |

apps/docs/zh/packages/ui/dialog.md

@@ -23,20 +23,3 @@
 - `.v-dialog`: 主弹窗容器。
 - `.v-dialog__overlay`: 背景遮罩。
 - `.v-dialog__content`: 弹窗内容区域。
-
-## 代码示例
-
-```vue
-<template>
-  <VDialog v-model:open="open">
-    <div>弹窗内容</div>
-  </VDialog>
-  <a-button @click="open = true">打开弹窗</a-button>
-</template>
-
-<script setup lang="ts">
-import { VDialog } from '@mylib/ui';
-import { ref } from 'vue';
-const open = ref(false);
-</script>
-```

packages/ui/package.json

@@ -13,7 +13,8 @@
       "import": "./dist/es/index.mjs",
       "require": "./dist/lib/index.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./*": "./dist/*"
   },
   "files": [
     "dist"

packages/ui/src/types/components.d.ts

@@ -0,0 +1,17 @@
+// // For this project development
+// import '@vue/runtime-core';
+
+/**
+ * 给全局引入的UI组件类型提示：
+ * tsconfig.json需要添加以下配置：
+ * "types": ["vite/client", "@mylib/ui/global.d.ts"]
+ */
+declare module '@vue/runtime-core' {
+  // GlobalComponents for Volar
+  export interface GlobalComponents {
+    VButton: (typeof import('@mylib/ui'))['VButton'];
+    VDialog: (typeof import('@mylib/ui'))['VDialog'];
+  }
+}
+
+export {};