vue-amazing-ui 2.8.1 → 2.10.0

package/README.md

@@ -16,8 +16,8 @@
 
 ## Features
 
-- The component library is implemented with `Vue@3.5.29`+ `TypeScript@5.9.3` + `Vite@7.3.1` + `Less@4.5.1`.
-- Currently, it includes `68` basic UI components and `24` utility functions, with continuous exploration and updates ongoing...
+- The component library is implemented with `Vue@3.5.42`+ `TypeScript@5.9.3` + `Vite@7.3.1` + `Less@4.5.1`.
+- Currently, it includes `69` basic UI components and `22` utility functions, with continuous exploration and updates ongoing...
 - Theme Customizable, all you need is to provide a theme color, then all the stuffs will be done by me.
 - By the way, they are all treeshakable.
 - All the stuff in Vue Amazing UI is written in TypeScript. It can work with your typescript project seamlessly.
@@ -61,8 +61,9 @@ _In this form, only the imported components will be bundled._
 import { createApp } from 'vue'
 import App from './App.vue'
 import { Button, Tag } from 'vue-amazing-ui'
-import 'vue-amazing-ui/es/button/Button.css'
-import 'vue-amazing-ui/es/tag/Tag.css'
+// One style entry per component (recommended form): global default styles + the component's own styles + its dependency components' styles
+import 'vue-amazing-ui/es/button/style'
+import 'vue-amazing-ui/es/tag/style'
 
 const app = createApp(App)
 app.use(Button).use(Tag)
@@ -76,8 +77,9 @@ _In this form, only the imported components will be bundled as well._
 ```vue
 <script setup lang="ts">
 import { Button, Tag } from 'vue-amazing-ui'
-import 'vue-amazing-ui/es/button/Button.css'
-import 'vue-amazing-ui/es/tag/Tag.css'
+// One style entry per component (recommended form): global default styles + the component's own styles + its dependency components' styles
+import 'vue-amazing-ui/es/button/style'
+import 'vue-amazing-ui/es/tag/style'
 </script>
 <template>
   <Button>button</Button>
@@ -85,16 +87,7 @@ import 'vue-amazing-ui/es/tag/Tag.css'
 </template>
 ```
 
-**Both Global Partial Registration and Local Registration require manually importing the global default styles of the component library ([Automatic On-Demand Import](https://themusecatcher.github.io/vue-amazing-ui/guide/import-on-demand.html#%E8%87%AA%E5%8A%A8%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90) is recommended).**
-
-```ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import 'vue-amazing-ui/es/style/global.css' // 引入全局默认样式
-
-const app = createApp(App)
-app.mount('#app')
-```
+> The style entry also supports the more explicit file form `import 'vue-amazing-ui/es/button/style/index.js'`.
 
 **Automatic On-Demand Import (Strongly Recommended)**
 
@@ -179,14 +172,12 @@ import {
   useMediaQuery,
   useResizeObserver,
   useSlotsExist,
-  useInject,
   useOptionsSupported,
   getColorPalettes,
   getAlphaColor,
   getScrollParent,
   lockScroll,
-  useScrollParent,
-  useFloatingPosition
+  useScrollParent
 } from 'vue-amazing-ui'
 </script>
 ```
@@ -252,33 +243,34 @@ All sponsors will be listed here, thank you very much for your support and spons
 | Card            | 卡片        | Carousel       | 轮播图      |
 | Cascader        | 级联选择    | Checkbox       | 复选框      |
 | Collapse        | 折叠面板    | ColorPicker    | 颜色选择器  |
-| ConfigProvider  | 全局化配置  | Countdown      | 倒计时      |
-| DatePicker      | 日期选择器  | Descriptions   | 描述列表    |
-| Dialog          | 对话框      | Divider        | 分割线      |
-| Drawer          | 抽屉        | Ellipsis       | 文本省略    |
-| Empty           | 空状态      | Flex           | 弹性布局    |
-| FloatButton     | 浮动按钮    | GradientText   | 渐变文字    |
-| Grid            | 栅格        | Highlight      | 高亮文本    |
-| Image           | 图片        | Input          | 输入框      |
-| InputNumber     | 数字输入框  | InputSearch    | 搜索框      |
-| List            | 列表        | LoadingBar     | 加载条      |
-| Message         | 全局提示    | Modal          | 模态框      |
-| Notification    | 通知提醒    | NumberAnimation| 数值动画    |
-| Pagination      | 分页        | Popconfirm     | 弹出确认    |
-| Popover         | 气泡卡片    | Progress       | 进度条      |
-| QRCode          | 二维码      | Radio          | 单选框      |
-| Rate            | 评分        | Result         | 结果        |
-| Scrollbar       | 滚动条      | Segmented      | 分段控制器  |
-| Select          | 选择器      | Skeleton       | 骨架屏      |
-| Slider          | 滑动输入条  | Space          | 间距        |
-| Spin            | 加载中      | Statistic      | 统计数值    |
-| Steps           | 步骤条      | Swiper         | 触摸滑动    |
-| Switch          | 开关        | Table          | 表格        |
-| Tabs            | 标签页      | Tag            | 标签        |
-| Textarea        | 文本域      | TextScroll     | 文字滚动    |
-| Timeline        | 时间轴      | Tooltip        | 文字提示    |
-| Upload          | 上传        | Video          | 播放器      |
-| Waterfall       | 瀑布流      | Watermark      | 水印        |
+| Comment         | 评论        | ConfigProvider | 全局化配置  |
+| Countdown       | 倒计时      | DatePicker     | 日期选择器  |
+| Descriptions    | 描述列表    | Dialog         | 对话框      |
+| Divider         | 分割线      | Drawer         | 抽屉        |
+| Ellipsis        | 文本省略    | Empty          | 空状态      |
+| Flex            | 弹性布局    | FloatButton    | 浮动按钮    |
+| GradientText    | 渐变文字    | Grid           | 栅格        |
+| Highlight       | 高亮文本    | Image          | 图片        |
+| Input           | 输入框      | InputNumber    | 数字输入框  |
+| InputSearch     | 搜索框      | List           | 列表        |
+| LoadingBar      | 加载条      | Message        | 全局提示    |
+| Modal           | 模态框      | Notification   | 通知提醒    |
+| NumberAnimation | 数值动画    | Pagination     | 分页        |
+| Popconfirm      | 弹出确认    | Popover        | 气泡卡片    |
+| Progress        | 进度条      | QRCode         | 二维码      |
+| Radio           | 单选框      | Rate           | 评分        |
+| Result          | 结果        | Scrollbar      | 滚动条      |
+| Segmented       | 分段控制器  | Select         | 选择器      |
+| Skeleton        | 骨架屏      | Slider         | 滑动输入条  |
+| Space           | 间距        | Spin           | 加载中      |
+| Statistic       | 统计数值    | Steps          | 步骤条      |
+| Swiper          | 触摸滑动    | Switch         | 开关        |
+| Table           | 表格        | Tabs           | 标签页      |
+| Tag             | 标签        | Textarea       | 文本域      |
+| TextScroll      | 文字滚动    | Timeline       | 时间轴      |
+| Tooltip         | 文字提示    | Upload         | 上传        |
+| Video           | 播放器      | Waterfall      | 瀑布流      |
+| Watermark       | 水印        |                |             |
 
 ## Functions
 
@@ -300,11 +292,9 @@ All sponsors will be listed here, thank you very much for your support and spons
 | useMediaQuery | Function to determine if the current environment matches a specified media query condition | (mediaQuery: string) => { match: Ref\<boolean> } |
 | useResizeObserver | Function to observe changes in the dimensions of DOM elements using `ResizeObserver` | (target: Ref &#124; Ref[] &#124; HTMLElement &#124; HTMLElement[], callback: ResizeObserverCallback, options: object = {}) => { start: \() => void, stop: \() => void } |
 | useSlotsExist | Function to watch for the existence of slots with given names, supporting single slots or an array of slots | <T extends string &#124; string[] = 'default'>(slotsName: T) => T extends string ? ComputedRef\<boolean> : Reactive\<Record\<string, ComputedRef\<boolean>>> |
-| useInject | A function that uses injection to obtain color palettes and shadow color | (key: string) => { colorPalettes: Ref\<string[]>, shadowColor: Ref\<string> } |
 | useOptionsSupported | Checks if the browser supports the given event listener options | (option: 'capture' &#124; 'once' &#124; 'passive' &#124; 'signal') => { isSupported: Ref\<boolean> } |
 | getColorPalettes | Function to generate a color palette from a primary color | (primaryColor: string) => string[] |
 | getAlphaColor | Function to get an alpha color, generally used as a shadow color | (frontColor: string, backgroundColor: string = '#ffffff') => string |
 | getScrollParent | Function to find the nearest scrollable parent element upward | (el: HTMLElement &#124; null) => HTMLElement &#124; null |
 | lockScroll | Function to lock page scrolling and compensate the scrollbar width to prevent horizontal jitter | () => () => void |
 | useScrollParent | Composable to query and watch the nearest scrollable parent element and respond to viewport `resize` | (contentRef: Ref\<HTMLElement &#124; null>, onScroll: () => void, options: object = {}) => { scrollTarget: Ref\<HTMLElement &#124; null>, viewportWidth: Ref\<number>, viewportHeight: Ref\<number>, observeScroll: \() => void, cleanup: \() => void } |
-| useFloatingPosition | Composable that provides a unified measurement skeleton for floating components | (contentRef: Ref\<HTMLElement &#124; null>, panelRef: Ref\<HTMLElement &#124; null>) => { positionedContainerRect: Ref\<DOMRect &#124; undefined>, contentRect: Ref\<DOMRect &#124; undefined>, measure: \() => Promise\<void> } |

package/README.zh-CN.md

@@ -16,8 +16,8 @@
 
 ## 特性
 
-- 组件库采用 `Vue@3.5.29`+ `TypeScript@5.9.3` + `Vite@7.3.1` + `Less@4.5.1` 实现
-- 目前共包含 `68` 个基础 `UI` 组件以及 `24` 个工具函数，并且持续探索更新中...
+- 组件库采用 `Vue@3.5.42`+ `TypeScript@5.9.3` + `Vite@7.3.1` + `Less@4.5.1` 实现
+- 目前共包含 `69` 个基础 `UI` 组件以及 `22` 个工具函数，并且持续探索更新中...
 - 主题可调，你只需提供一个主题色，剩下的都交给我
 - 顺便一提，它们全都可以 `treeshaking`
 - `Vue Amazing UI` 全量使用 `TypeScript` 编写，和你的 `TypeScript` 项目无缝衔接
@@ -61,8 +61,9 @@ _这种情况下，只有导入的组件才会被打包_
 import { createApp } from 'vue'
 import App from './App.vue'
 import { Button, Tag } from 'vue-amazing-ui'
-import 'vue-amazing-ui/es/button/Button.css'
-import 'vue-amazing-ui/es/tag/Tag.css'
+// 每个组件一个样式入口（推荐写法）：内含全局默认样式 + 组件自身样式 + 其依赖组件样式
+import 'vue-amazing-ui/es/button/style'
+import 'vue-amazing-ui/es/tag/style'
 
 const app = createApp(App)
 app.use(Button).use(Tag)
@@ -76,8 +77,9 @@ _这种情况下，也只有导入的组件才会被打包_
 ```vue
 <script setup lang="ts">
 import { Button, Tag } from 'vue-amazing-ui'
-import 'vue-amazing-ui/es/button/Button.css'
-import 'vue-amazing-ui/es/tag/Tag.css'
+// 每个组件一个样式入口（推荐写法）：内含全局默认样式 + 组件自身样式 + 其依赖组件样式
+import 'vue-amazing-ui/es/button/style'
+import 'vue-amazing-ui/es/tag/style'
 </script>
 <template>
   <Button>button</Button>
@@ -85,16 +87,7 @@ import 'vue-amazing-ui/es/tag/Tag.css'
 </template>
 ```
 
-**全局部分注册和局部注册组件，都需手动引入组件库全局默认样式（推荐使用[自动按需引入](https://themusecatcher.github.io/vue-amazing-ui/guide/import-on-demand.html#%E8%87%AA%E5%8A%A8%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90)）**
-
-```ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import 'vue-amazing-ui/es/style/global.css' // 引入全局默认样式
-
-const app = createApp(App)
-app.mount('#app')
-```
+> 样式入口也支持（更显式的）文件写法 `import 'vue-amazing-ui/es/button/style/index.js'`。
 
 **自动按需引入（强烈推荐）**
 
@@ -179,14 +172,12 @@ import {
   useMediaQuery,
   useResizeObserver,
   useSlotsExist,
-  useInject,
   useOptionsSupported,
   getColorPalettes,
   getAlphaColor,
   getScrollParent,
   lockScroll,
-  useScrollParent,
-  useFloatingPosition
+  useScrollParent
 } from 'vue-amazing-ui'
 </script>
 ```
@@ -252,33 +243,34 @@ pnpm docs:dev
 | Card            | 卡片       | Carousel       | 轮播图     |
 | Cascader        | 级联选择   | Checkbox       | 复选框     |
 | Collapse        | 折叠面板   | ColorPicker    | 颜色选择器 |
-| ConfigProvider  | 全局化配置 | Countdown      | 倒计时     |
-| DatePicker      | 日期选择器 | Descriptions   | 描述列表   |
-| Dialog          | 对话框     | Divider        | 分割线     |
-| Drawer          | 抽屉       | Ellipsis       | 文本省略   |
-| Empty           | 空状态     | Flex           | 弹性布局   |
-| FloatButton     | 浮动按钮   | GradientText   | 渐变文字   |
-| Grid            | 栅格       | Highlight      | 高亮文本   |
-| Image           | 图片       | Input          | 输入框     |
-| InputNumber     | 数字输入框 | InputSearch    | 搜索框     |
-| List            | 列表       | LoadingBar     | 加载条     |
-| Message         | 全局提示   | Modal          | 模态框     |
-| Notification    | 通知提醒   | NumberAnimation| 数值动画   |
-| Pagination      | 分页       | Popconfirm     | 弹出确认   |
-| Popover         | 气泡卡片   | Progress       | 进度条     |
-| QRCode          | 二维码     | Radio          | 单选框     |
-| Rate            | 评分       | Result         | 结果       |
-| Scrollbar       | 滚动条     | Segmented      | 分段控制器 |
-| Select          | 选择器     | Skeleton       | 骨架屏     |
-| Slider          | 滑动输入条 | Space          | 间距       |
-| Spin            | 加载中     | Statistic      | 统计数值   |
-| Steps           | 步骤条     | Swiper         | 触摸滑动   |
-| Switch          | 开关       | Table          | 表格       |
-| Tabs            | 标签页     | Tag            | 标签       |
-| Textarea        | 文本域     | TextScroll     | 文字滚动   |
-| Timeline        | 时间轴     | Tooltip        | 文字提示   |
-| Upload          | 上传       | Video          | 播放器     |
-| Waterfall       | 瀑布流     | Watermark      | 水印       |
+| Comment         | 评论       | ConfigProvider | 全局化配置 |
+| Countdown       | 倒计时     | DatePicker     | 日期选择器 |
+| Descriptions    | 描述列表   | Dialog         | 对话框     |
+| Divider         | 分割线     | Drawer         | 抽屉       |
+| Ellipsis        | 文本省略   | Empty          | 空状态     |
+| Flex            | 弹性布局   | FloatButton    | 浮动按钮   |
+| GradientText    | 渐变文字   | Grid           | 栅格       |
+| Highlight       | 高亮文本   | Image          | 图片       |
+| Input           | 输入框     | InputNumber    | 数字输入框 |
+| InputSearch     | 搜索框     | List           | 列表       |
+| LoadingBar      | 加载条     | Message        | 全局提示   |
+| Modal           | 模态框     | Notification   | 通知提醒   |
+| NumberAnimation | 数值动画   | Pagination     | 分页       |
+| Popconfirm      | 弹出确认   | Popover        | 气泡卡片   |
+| Progress        | 进度条     | QRCode         | 二维码     |
+| Radio           | 单选框     | Rate           | 评分       |
+| Result          | 结果       | Scrollbar      | 滚动条     |
+| Segmented       | 分段控制器 | Select         | 选择器     |
+| Skeleton        | 骨架屏     | Slider         | 滑动输入条 |
+| Space           | 间距       | Spin           | 加载中     |
+| Statistic       | 统计数值   | Steps          | 步骤条     |
+| Swiper          | 触摸滑动   | Switch         | 开关       |
+| Table           | 表格       | Tabs           | 标签页     |
+| Tag             | 标签       | Textarea       | 文本域     |
+| TextScroll      | 文字滚动   | Timeline       | 时间轴     |
+| Tooltip         | 文字提示   | Upload         | 上传       |
+| Video           | 播放器     | Waterfall      | 瀑布流     |
+| Watermark       | 水印       |                |            |
 
 ## 工具函数
 
@@ -300,11 +292,9 @@ pnpm docs:dev
 | useMediaQuery | 使用媒体查询来判断当前环境是否符合指定的媒体查询条件 | (mediaQuery: string) => { match: Ref\<boolean> } |
 | useResizeObserver | 使用 `ResizeObserver` 观察 `DOM` 元素尺寸变化 | (target: Ref &#124; Ref[] &#124; HTMLElement &#124; HTMLElement[], callback: ResizeObserverCallback, options: object = {}) => { start: \() => void, stop: \() => void } |
 | useSlotsExist | 监听给定名称或名称数组的插槽是否存在，支持监听单个插槽或一组插槽的存在 | <T extends string &#124; string[] = 'default'>(slotsName: T) => T extends string ? ComputedRef\<boolean> : Reactive\<Record\<string, ComputedRef\<boolean>>> |
-| useInject | 使用依赖注入的函数，用于获取颜色调色板和阴影颜色 | (key: string) => { colorPalettes: Ref\<string[]>, shadowColor: Ref\<string> } |
 | useOptionsSupported | 检查浏览器是否支持给定的事件监听器选项 | (option: 'capture' &#124; 'once' &#124; 'passive' &#124; 'signal') => { isSupported: Ref\<boolean> } |
 | getColorPalettes | 根据主色生成颜色调色板函数 | (primaryColor: string) => string[] |
 | getAlphaColor | 获取透明度颜色函数，一般用作阴影色 | (frontColor: string, backgroundColor: string = '#ffffff') => string |
 | getScrollParent | 向上查找元素最近的可滚动父元素函数 | (el: HTMLElement &#124; null) => HTMLElement &#124; null |
 | lockScroll | 锁定页面滚动并补偿滚动条宽度，防止页面横向抖动函数 | () => () => void |
 | useScrollParent | 查询并监听最近可滚动父元素，响应视口 `resize` 的组合式函数 | (contentRef: Ref\<HTMLElement &#124; null>, onScroll: () => void, options: object = {}) => { scrollTarget: Ref\<HTMLElement &#124; null>, viewportWidth: Ref\<number>, viewportHeight: Ref\<number>, observeScroll: \() => void, cleanup: \() => void } |
-| useFloatingPosition | 为弹出类组件提供统一测量骨架的组合式函数 | (contentRef: Ref\<HTMLElement &#124; null>, panelRef: Ref\<HTMLElement &#124; null>) => { positionedContainerRect: Ref\<DOMRect &#124; undefined>, contentRect: Ref\<DOMRect &#124; undefined>, measure: \() => Promise\<void> } |