vue-amazing-ui 2.2.15 → 2.3.1

package/README.md

@@ -6,7 +6,7 @@
 
 <h1 align="center">Vue Amazing UI</h1>
 <p align="center">A Vue 3 Component Library</p>
-<p align="center">Uses TypeScript, All components are single-file components (SFC), Supports tree shaking.</p>
+<p align="center">Theme Customizable, Fully using TypeScript and SFC, Supports tree shaking.</p>
 <p align="center">Kinda Interesting</p>
 <p align="center">English | <a href="README.zh-CN.md">中文</a></p>
 
@@ -16,11 +16,12 @@
 
 ## Features
 
-- The component library is implemented with `Vue@3.5.13`+ `TypeScript@5.8.2` + `Vite@6.2.0` + `Less@4.2.2`.
-- Currently, it includes `65` basic UI components and `16` utility functions, with continuous exploration and updates ongoing...
+- The component library is implemented with `Vue@3.5.13`+ `TypeScript@5.8.2` + `Vite@6.2.1` + `Less@4.2.2`.
+- Currently, it includes `66` basic UI components and `17` utility functions, with continuous exploration and updates ongoing...
 - What's more, they are all treeshakable.
+- Theme Customizable, all you need is to provide a theme color, then all the stuffs will be done by me.
 - All the stuff in Vue Amazing UI is written in TypeScript. It can work with your typescript project seamlessly.
-- All components are built in single file component `SFC` style and can be used independently.
+- All components are built in single file component `SFC` and can be used independently.
 - Ready to use out of the box, no fuss.
 
 ## Installation
@@ -84,7 +85,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 is recommended).**
+**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/ondemand.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'
@@ -177,7 +178,8 @@ import {
   useFps,
   useMediaQuery,
   useResizeObserver,
-  useSlotsExist
+  useSlotsExist,
+  useInject
 } from 'vue-amazing-ui'
 </script>
 ```
@@ -222,9 +224,9 @@ docs:dev
 
 ## Sponsors 🫡
 
-All sponsors will be listed here, thank you very much for your support and sponsorship ❤️❤️
+All sponsors will be listed here, thank you very much for your support and sponsorship ❤️
 
-<a href="https://github.com/themusecatcher" target="_blank"><img width="64" height="64" src="./docs/public/avatar.png" alt="GitHub@themusecatcher"></a> <img width="64" height="64" src="./docs/public/avatar_1.jpeg" alt="WeChat@Ant" /> <a href="https://github.com/nizhensh-i" target="_blank"><img width="64" height="64" src="./docs/public/avatar_2.jpg" alt="GitHub@nizhensh-i"></a>
+<a href="https://github.com/themusecatcher" target="_blank"><img width="64" height="64" src="./docs/public/avatar.png" alt="GitHub@themusecatcher" title="GitHub@themusecatcher"></a> <img width="64" height="64" src="./docs/public/avatar_1.jpeg" alt="WeChat@Ant" title="WeChat@Ant" /> <a href="https://github.com/nizhensh-i" target="_blank"><img width="64" height="64" src="./docs/public/avatar_2.jpg" alt="GitHub@nizhensh-i" title="GitHub@nizhensh-i"></a> <a href="https://github.com/beijin1949" target="_blank"><img width="64" height="64" src="./docs/public/avatar_3.png" alt="GitHub@beijin1949" title="GitHub@beijin1949"></a>
 
 ## Components
 
@@ -236,33 +238,33 @@ Breadcrumb | 面包屑 | Button | 按钮
 Calendar | 日历 | Card | 卡片
 Carousel | 轮播图 | Cascader | 级联选择
 Checkbox | 复选框 | Collapse | 折叠面板
-ColorPicker | 颜色选择器 | Countdown | 倒计时
-DatePicker | 日期选择器 | Descriptions | 描述列表
-Dialog | 对话框 | Divider | 分割线
-Drawer | 抽屉 | Ellipsis | 文本省略
-Empty | 空状态 | Flex | 弹性布局
-FloatButton | 浮动按钮 | GradientText | 渐变文字
-Grid | 栅格 | 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 | 水印
+ColorPicker | 颜色选择器 | ConfigProvider | 全局化配置
+Countdown | 倒计时 | DatePicker | 日期选择器
+Descriptions | 描述列表 | Dialog | 对话框
+Divider | 分割线 | Drawer | 抽屉
+Ellipsis | 文本省略 | Empty | 空状态
+Flex | 弹性布局 | FloatButton | 浮动按钮
+GradientText | 渐变文字 | Grid | 栅格
+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
 
@@ -284,3 +286,4 @@ useFps | Function to monitor the browser's refresh rate (FPS) in real time | ()
 useMediaQuery | Function to determine if the current environment matches a specified media query condition | (mediaQuery: string) => object
 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
 useSlotsExist | Function to watch for the existence of slots with given names, supporting single slots or an array of slots | (slotsName: string &#124; string[] = 'default') => Reactive &#124; Ref\<boolean>
+useInject | A function that uses injection to obtain color palettes and shadow color | (key: string) => { colorPalettes: Ref<string[]>; shadowColor: Ref<string> }

package/README.zh-CN.md

@@ -6,7 +6,7 @@
 
 <h1 align="center">Vue Amazing UI</h1>
 <p align="center">一个 Vue 3 组件库</p>
-<p align="center">使用 TypeScript，都是单文件组件 (SFC)，支持 tree shaking</p>
+<p align="center">主题可调，全量使用 TypeScript 和 SFC，支持 tree shaking</p>
 <p align="center">有点意思</p>
 <p align="center"><a href="README.md">English</a> | 中文</p>
 
@@ -16,11 +16,12 @@
 
 ## 特性
 
-- 组件库采用 `Vue@3.5.13`+ `TypeScript@5.8.2` + `Vite@6.2.0` + `Less@4.2.2` 实现
-- 目前共包含 `65` 个基础 `UI` 组件以及 `16` 个工具函数，并且持续探索更新中...
+- 组件库采用 `Vue@3.5.13`+ `TypeScript@5.8.2` + `Vite@6.2.1` + `Less@4.2.2` 实现
+- 目前共包含 `66` 个基础 `UI` 组件以及 `17` 个工具函数，并且持续探索更新中...
 - 顺便一提，它们全都可以 `treeshaking`
+- 主题可调，你只需提供一个主题色，剩下的都交给我
 - `Vue Amazing UI` 全量使用 `TypeScript` 编写，和你的 `TypeScript` 项目无缝衔接
-- 全部组件均采用单文件组件 `SFC` 风格，可独立使用
+- 全部组件均采用单文件组件 `SFC`，可独立使用
 - 开箱即用，不墨迹
 
 ## 安装
@@ -84,7 +85,7 @@ import 'vue-amazing-ui/es/tag/Tag.css'
 </template>
 ```
 
-**全局部分注册和局部注册组件，都需手动引入组件库全局默认样式（推荐使用自动按需引入）**
+**全局部分注册和局部注册组件，都需手动引入组件库全局默认样式（推荐使用[自动按需引入](https://themusecatcher.github.io/vue-amazing-ui/guide/ondemand.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'
@@ -177,7 +178,8 @@ import {
   useFps,
   useMediaQuery,
   useResizeObserver,
-  useSlotsExist
+  useSlotsExist,
+  useInject
 } from 'vue-amazing-ui'
 </script>
 ```
@@ -222,9 +224,9 @@ docs:dev
 
 ## 赞助者 🫡
 
-所有的赞助者都将出现在此处，非常感谢你们的支持与赞助 ❤️❤️
+所有的赞助者都将出现在此处，非常感谢你们的支持与赞助 ❤️
 
-<a href="https://github.com/themusecatcher" target="_blank"><img width="64" height="64" src="./docs/public/avatar.png" alt="GitHub@themusecatcher"></a><img width="64" height="64" src="./docs/public/avatar_1.jpeg" alt="WeChat@Ant"><a href="https://github.com/nizhensh-i" target="_blank"><img width="64" height="64" src="./docs/public/avatar_2.jpg" alt="GitHub@nizhensh-i"></a>
+<a href="https://github.com/themusecatcher" target="_blank"><img width="64" height="64" src="./docs/public/avatar.png" alt="GitHub@themusecatcher" title="GitHub@themusecatcher"></a> <img width="64" height="64" src="./docs/public/avatar_1.jpeg" alt="WeChat@Ant" title="WeChat@Ant" /> <a href="https://github.com/nizhensh-i" target="_blank"><img width="64" height="64" src="./docs/public/avatar_2.jpg" alt="GitHub@nizhensh-i" title="GitHub@nizhensh-i"></a> <a href="https://github.com/beijin1949" target="_blank"><img width="64" height="64" src="./docs/public/avatar_3.png" alt="GitHub@beijin1949" title="GitHub@beijin1949"></a>
 
 ## 组件
 
@@ -236,33 +238,33 @@ Breadcrumb | 面包屑 | Button | 按钮
 Calendar | 日历 | Card | 卡片
 Carousel | 轮播图 | Cascader | 级联选择
 Checkbox | 复选框 | Collapse | 折叠面板
-ColorPicker | 颜色选择器 | Countdown | 倒计时
-DatePicker | 日期选择器 | Descriptions | 描述列表
-Dialog | 对话框 | Divider | 分割线
-Drawer | 抽屉 | Ellipsis | 文本省略
-Empty | 空状态 | Flex | 弹性布局
-FloatButton | 浮动按钮 | GradientText | 渐变文字
-Grid | 栅格 | 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 | 水印
+ColorPicker | 颜色选择器 | ConfigProvider | 全局化配置
+Countdown | 倒计时 | DatePicker | 日期选择器
+Descriptions | 描述列表 | Dialog | 对话框
+Divider | 分割线 | Drawer | 抽屉
+Ellipsis | 文本省略 | Empty | 空状态
+Flex | 弹性布局 | FloatButton | 浮动按钮
+GradientText | 渐变文字 | Grid | 栅格
+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 | 水印
 
 ## 工具函数
 
@@ -284,3 +286,4 @@ useFps | 实时监测浏览器刷新率FPS | () => object
 useMediaQuery | 使用媒体查询来判断当前环境是否符合指定的媒体查询条件 | (mediaQuery: string) => object
 useResizeObserver | 使用 `ResizeObserver` 观察 `DOM` 元素尺寸变化 | (target: Ref &#124; Ref[] &#124; HTMLElement &#124; HTMLElement[], callback: ResizeObserverCallback, options = {}) => object
 useSlotsExist | 监听给定名称或名称数组的插槽是否存在，支持监听单个插槽或一组插槽的存在 | (slotsName: string &#124; string[] = 'default') => Reactive &#124; Ref\<boolean>
+useInject | 使用依赖注入的函数，用于获取颜色调色板和阴影颜色 | (key: string) => { colorPalettes: Ref<string[]>; shadowColor: Ref<string> }