vue-amazing-ui 2.0.1 → 2.0.2

package/README.md

@@ -16,11 +16,11 @@
 
 ## Features
 
-- The component library is implemented with `Vue@3.5.13`+ `TypeScript@5.6.3` + `Vite@6.0.2` + `Less@4.2.1`.
+- The component library is implemented with `Vue@3.5.13`+ `TypeScript@5.7.2` + `Vite@6.0.5` + `Less@4.2.1`.
 - Currently, it includes `63` basic UI components and `16` utility functions, with continuous exploration and updates ongoing...
 - What's more, they are all treeshakable.
 - All the stuff in Vue Amazing UI is written in TypeScript. It can work with your typescript project seamlessly.
-- Each component is a Single-File Component (`SFC`), and they can be used independently without any issues.
+- All components are built in single file component `SFC` style and can be used independently.
 - Ready to use out of the box, no fuss.
 
 ## Installation
@@ -45,14 +45,14 @@ bun add vue-amazing-ui
 import { createApp } from 'vue'
 import App from './App.vue'
 import VueAmazingUI from 'vue-amazing-ui'
-import 'vue-amazing-ui/css' // 等价于 'vue-amazing-ui/dist/style.css'
+import 'vue-amazing-ui/css'
 
 const app = createApp(App)
 app.use(VueAmazingUI)
 app.mount('#app')
 ```
 
-**Global Registration Some Components**
+**Global Partial Registration**
 
 *In this form, only components imported will be bundled.*
 
@@ -68,20 +68,84 @@ app.use(Button).use(Tag)
 app.mount('#app')
 ```
 
-**Local Registration (Recommended)**
+**Local Registration**
 
 *In this form, only components imported will be bundled.*
 
 ```vue
 <script setup lang="ts">
-import { Button } from 'vue-amazing-ui'
+import { Button, Tag } from 'vue-amazing-ui'
 import 'vue-amazing-ui/es/button/Button.css'
+import 'vue-amazing-ui/es/tag/Tag.css'
 </script>
 <template>
   <Button>button</Button>
+  <Tag>tag</Tag>
 </template>
 ```
 
+**Auto Import Styles (Recommended)**
+
+Use the [`vite-plugin-style-import`](https://github.com/vbenjs/vite-plugin-style-import) plugin to automatically import component styles on demand. The plugin will automatically parse the used components in the template and import their styles.
+
+```sh
+pnpm add vite-plugin-style-import -D
+# or
+npm install vite-plugin-style-import -D
+# or
+yarn add vite-plugin-style-import -D
+# or
+bun add vite-plugin-style-import -D
+```
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { createStyleImportPlugin } from 'vite-plugin-style-import'
+// Automatically import component styles
+import { VueAmazingUIStyleResolve } from 'vue-amazing-ui'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    // imports component library styles on demand
+    createStyleImportPlugin({
+      resolves:[
+        VueAmazingUIStyleResolve()
+      ]
+    })
+  ]
+})
+```
+
+Then, you can use all components of `vue-amazing-ui` in your code without needing to manually import component styles, whether you are using global partial registration or local registration.
+
+- Global Partial Registration
+
+  ```ts
+  import { createApp } from 'vue'
+  import App from './App.vue'
+  import { Button, Tag } from 'vue-amazing-ui'
+
+  const app = createApp(App)
+  app.use(Button).use(Tag)
+  app.mount('#app')
+  ```
+
+- Local Registration
+
+  ```vue
+  <script setup lang="ts">
+  import { Button, Tag } from 'vue-amazing-ui'
+  </script>
+  <template>
+    <Button>button</Button>
+    <Tag>tag</Tag>
+  </template>
+  ```
+
 **Automatic On-Demand Import (Strongly Recommended)**
 
 Use the [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components) plugin to automatically import components on demand. The plugin will automatically parse the components used in the template and import the components and styles.

package/README.zh-CN.md

@@ -16,11 +16,11 @@
 
 ## 特性
 
-- 组件库采用 `Vue@3.5.13`+ `TypeScript@5.6.3` + `Vite@6.0.2` + `Less@4.2.1` 实现
+- 组件库采用 `Vue@3.5.13`+ `TypeScript@5.7.2` + `Vite@6.0.5` + `Less@4.2.1` 实现
 - 目前共包含 `63` 个基础 `UI` 组件以及 `16` 个工具函数，并且持续探索更新中...
 - 顺便一提，它们全都可以 `treeshaking`
 - `Vue Amazing UI` 全量使用 `TypeScript` 编写，和你的 `TypeScript` 项目无缝衔接
-- 每个组件都是单文件组件 `SFC`，独立使用，也没问题
+- 全部组件均采用单文件组件 `SFC` 风格，可独立使用
 - 开箱即用，不墨迹
 
 ## 安装
@@ -45,7 +45,7 @@ bun add vue-amazing-ui
 import { createApp } from 'vue'
 import App from './App.vue'
 import VueAmazingUI from 'vue-amazing-ui'
-import 'vue-amazing-ui/css' // 等价于 'vue-amazing-ui/dist/style.css'
+import 'vue-amazing-ui/css'
 
 const app = createApp(App)
 app.use(VueAmazingUI)
@@ -68,20 +68,84 @@ app.use(Button).use(Tag)
 app.mount('#app')
 ```
 
-**局部注册组件（推荐）**
+**局部注册组件**
 
 *这种情况下，也只有导入的组件才会被打包*
 
 ```vue
 <script setup lang="ts">
-import { Button } from 'vue-amazing-ui'
+import { Button, Tag } from 'vue-amazing-ui'
 import 'vue-amazing-ui/es/button/Button.css'
+import 'vue-amazing-ui/es/tag/Tag.css'
 </script>
 <template>
   <Button>button</Button>
+  <Tag>tag</Tag>
 </template>
 ```
 
+**自动引入样式（推荐）**
+
+使用 [`vite-plugin-style-import`](https://github.com/vbenjs/vite-plugin-style-import) 插件来按需自动引入组件样式，插件会自动解析模板中的使用到的组件，并导入其样式
+
+```sh
+pnpm add vite-plugin-style-import -D
+# or
+npm install vite-plugin-style-import -D
+# or
+yarn add vite-plugin-style-import -D
+# or
+bun add vite-plugin-style-import -D
+```
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { createStyleImportPlugin } from 'vite-plugin-style-import'
+// 自动引入组件样式
+import { VueAmazingUIStyleResolve } from 'vue-amazing-ui'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    // imports component library styles on demand
+    createStyleImportPlugin({
+      resolves:[
+        VueAmazingUIStyleResolve()
+      ]
+    })
+  ]
+})
+```
+
+然后，你可以在代码中引入使用 `vue-amazing-ui` 的所有组件，无论是全局部分注册的方式，还是局部注册的方式，都无需再额外引入组件样式
+
+- 全局部分注册
+
+  ```ts
+  import { createApp } from 'vue'
+  import App from './App.vue'
+  import { Button, Tag } from 'vue-amazing-ui'
+
+  const app = createApp(App)
+  app.use(Button).use(Tag)
+  app.mount('#app')
+  ```
+
+- 局部注册
+
+  ```vue
+  <script setup lang="ts">
+  import { Button, Tag } from 'vue-amazing-ui'
+  </script>
+  <template>
+    <Button>button</Button>
+    <Tag>tag</Tag>
+  </template>
+  ```
+
 **自动按需引入（强烈推荐）**
 
 使用 [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components) 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件和样式