vue-amazing-ui 2.4.13 → 2.4.15

package/README.md

@@ -16,7 +16,7 @@
 
 ## Features
 
-- The component library is implemented with `Vue@3.5.16`+ `TypeScript@5.8.3` + `Vite@6.3.5` + `Less@4.3.0`.
+- The component library is implemented with `Vue@3.5.18`+ `TypeScript@5.9.2` + `Vite@6.3.5` + `Less@4.4.0`.
 - Currently, it includes `67` basic UI components and `18` 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.
@@ -40,7 +40,7 @@ bun add vue-amazing-ui
 
 **Global Registration All Components (Not Recommended)**
 
-*No tree-shaking. Bundle will have redundant codes.*
+_No tree-shaking. Bundle will have redundant codes._
 
 ```ts
 import { createApp } from 'vue'
@@ -55,7 +55,7 @@ app.mount('#app')
 
 **Global Partial Registration**
 
-*In this form, only the imported components will be bundled.*
+_In this form, only the imported components will be bundled._
 
 ```ts
 import { createApp } from 'vue'
@@ -71,7 +71,7 @@ app.mount('#app')
 
 **Local Registration**
 
-*In this form, only the imported components will be bundled as well.*
+_In this form, only the imported components will be bundled as well._
 
 ```vue
 <script setup lang="ts">
@@ -145,7 +145,7 @@ Then, you can directly use all components from `vue-amazing-ui` in your code.
 
 ## Use Types
 
-*All types can be directly imported and used from `vue-amazing-ui` without any additional installation.*
+_All types can be directly imported and used from `vue-amazing-ui` without any additional installation._
 
 ```vue
 <script setup lang="ts">
@@ -210,7 +210,7 @@ pnpm dev
 - Run docs
 
 ```sh
-docs:dev
+pnpm docs:dev
 ```
 
 ## Blogs
@@ -231,62 +231,62 @@ All sponsors will be listed here, thank you very much for your support and spons
 
 ## Components
 
-Name | Description | Name | Description
-:-- | :-- | :-- | :--
-Alert | 警告提示 | Avatar | 头像
-BackTop | 回到顶部 | Badge | 徽标
-Breadcrumb | 面包屑 | Button | 按钮
-Calendar | 日历 | 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 | 水印
+| Name            | Description | Name           | Description |
+| :-------------- | :---------- | :------------- | :---------- |
+| Alert           | 警告提示    | Avatar         | 头像        |
+| BackTop         | 回到顶部    | Badge          | 徽标        |
+| Breadcrumb      | 面包屑      | Button         | 按钮        |
+| Calendar        | 日历        | 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       | 水印        |
 
 ## Functions
 
-Name | Description | Type
-:-- | :-- | :--
-dateFormat | Format date-time string function | (value: number &#124; string &#124; Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss') => string
-formatNumber | Number formatting function | (value: number &#124; string, precision: number = 2, separator: string = ',', decimal: string = '.', prefix?: string, suffix?: string) => string
-rafTimeout | Function to implement `setTimeout` or `setInterval` using `requestAnimationFrame` | (fn: Function, delay: number = 0, interval: boolean = false) => \{ id: number }
-cancelRaf | Function to cancel the `rafTimeout` function | (raf: { id: number }) => void
-throttle | Throttle function | (fn: Function, delay: number = 300) => Function
-debounce | Debounce function | (fn: Function, delay: number = 300) => Function
-add | Addition function that eliminates precision issues in JavaScript arithmetic | (num1: number, num2: number) => number
-downloadFile | Function to download a file with a custom filename; if no filename is provided, it extracts the filename from the URL | (url: string, fileName?: string) => void
-toggleDark | Function to toggle dark mode | () => void
-useEventListener | Function to add and remove event listeners using Vue lifecycle hooks | (target: HTMLElement &#124; Window &#124; Document, event: string, callback: Function) => void
-useMutationObserver | Function to observe changes in DOM elements using `MutationObserver` | (target: Ref &#124; Ref[] &#124; HTMLElement &#124; HTMLElement[], callback: MutationCallback, options = {}) => { start: \() => void; stop: \() => void }
-useScroll | Function to monitor the scroll position and state of a target element in real time | (target: Ref &#124; HTMLElement &#124; Window &#124; Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => { x: Ref\<number>; xScrollMax: Ref\<number>; y: Ref\<number>; yScrollMax: Ref\<number>; isScrolling: Ref\<boolean>; left: Ref\<boolean>; right: Ref\<boolean>; top: Ref\<boolean>; bottom: Ref\<boolean> }
-useFps | Function to monitor the browser's refresh rate (FPS) in real time | () => { fps: Ref\<number> }
-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 = {}) => { 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 | (prop: 'capture' &#124; 'once' &#124; 'passive' &#124; 'signal') => { isSupported: Ref\<boolean> }
+| Name | Description | Type |
+| :-- | :-- | :-- |
+| dateFormat | Format date-time string function | (value: number &#124; string &#124; Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss') => string |
+| formatNumber | Number formatting function | (value: number &#124; string, precision: number = 2, separator: string = ',', decimal: string = '.', prefix?: string, suffix?: string) => string |
+| rafTimeout | Function to implement `setTimeout` or `setInterval` using `requestAnimationFrame` | (fn: Function, delay: number = 0, interval: boolean = false) => \{ id: number } |
+| cancelRaf | Function to cancel the `rafTimeout` function | (raf: { id: number }) => void |
+| throttle | Throttle function | (fn: Function, delay: number = 300) => Function |
+| debounce | Debounce function | (fn: Function, delay: number = 300) => Function |
+| add | Addition function that eliminates precision issues in JavaScript arithmetic | (num1: number, num2: number) => number |
+| downloadFile | Function to download a file with a custom filename; if no filename is provided, it extracts the filename from the URL | (url: string, fileName?: string) => void |
+| toggleDark | Function to toggle dark mode | () => void |
+| useEventListener | Function to add and remove event listeners using Vue lifecycle hooks | (target: HTMLElement &#124; Window &#124; Document, event: string, callback: Function) => void |
+| useMutationObserver | Function to observe changes in DOM elements using `MutationObserver` | (target: Ref &#124; Ref[] &#124; HTMLElement &#124; HTMLElement[], callback: MutationCallback, options: object = {}) => { start: \() => void, stop: \() => void } |
+| useScroll | Function to monitor the scroll position and state of a target element in real time | (target: Ref &#124; HTMLElement &#124; Window &#124; Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => { x: Ref\<number>, xScrollMax: Ref\<number>, y: Ref\<number>, yScrollMax: Ref\<number>, isScrolling: Ref\<boolean>, left: Ref\<boolean>, right: Ref\<boolean>, top: Ref\<boolean>, bottom: Ref\<boolean> } |
+| useFps | Function to monitor the browser's refresh rate (FPS) in real time | () => { fps: Ref\<number> } |
+| 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 | (prop: 'capture' &#124; 'once' &#124; 'passive' &#124; 'signal') => { isSupported: Ref\<boolean> } |

package/README.zh-CN.md

@@ -16,7 +16,7 @@
 
 ## 特性
 
-- 组件库采用 `Vue@3.5.16`+ `TypeScript@5.8.3` + `Vite@6.3.5` + `Less@4.3.0` 实现
+- 组件库采用 `Vue@3.5.18`+ `TypeScript@5.9.2` + `Vite@6.3.5` + `Less@4.4.0` 实现
 - 目前共包含 `67` 个基础 `UI` 组件以及 `18` 个工具函数，并且持续探索更新中...
 - 主题可调，你只需提供一个主题色，剩下的都交给我
 - 顺便一提，它们全都可以 `treeshaking`
@@ -40,7 +40,7 @@ bun add vue-amazing-ui
 
 **全局完整注册（不推荐）**
 
-*失去 `tree-shaking` 的能力，打包后有冗余代码*
+_失去 `tree-shaking` 的能力，打包后有冗余代码_
 
 ```ts
 import { createApp } from 'vue'
@@ -55,7 +55,7 @@ app.mount('#app')
 
 **全局部分注册**
 
-*这种情况下，只有导入的组件才会被打包*
+_这种情况下，只有导入的组件才会被打包_
 
 ```ts
 import { createApp } from 'vue'
@@ -71,7 +71,7 @@ app.mount('#app')
 
 **局部注册组件**
 
-*这种情况下，也只有导入的组件才会被打包*
+_这种情况下，也只有导入的组件才会被打包_
 
 ```vue
 <script setup lang="ts">
@@ -145,7 +145,7 @@ export default defineConfig({
 
 ## 使用类型
 
-*所有类型均可直接从 `vue-amazing-ui` 中引入使用，无需任何额外安装*
+_所有类型均可直接从 `vue-amazing-ui` 中引入使用，无需任何额外安装_
 
 ```vue
 <script setup lang="ts">
@@ -210,7 +210,7 @@ pnpm dev
 - 启动文档
 
 ```sh
-docs:dev
+pnpm docs:dev
 ```
 
 ## 博客
@@ -231,62 +231,62 @@ docs:dev
 
 ## 组件
 
-名称 | 说明 | 名称 | 说明
-:-- | :-- | :-- | :--
-Alert | 警告提示 | Avatar | 头像
-BackTop | 回到顶部 | Badge | 徽标
-Breadcrumb | 面包屑 | Button | 按钮
-Calendar | 日历 | 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 | 水印
+| 名称            | 说明       | 名称           | 说明       |
+| :-------------- | :--------- | :------------- | :--------- |
+| Alert           | 警告提示   | Avatar         | 头像       |
+| BackTop         | 回到顶部   | Badge          | 徽标       |
+| Breadcrumb      | 面包屑     | Button         | 按钮       |
+| Calendar        | 日历       | 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       | 水印       |
 
 ## 工具函数
 
-名称 | 说明 | 类型
-:-- | :-- | :--
-dateFormat | 格式化日期时间字符串函数 | (value: number &#124; string &#124; Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss') => string
-formatNumber | 数字格式化函数 | (value: number &#124; string, precision: number = 2, separator: string = ',', decimal: string = '.', prefix?: string, suffix?: string) => string
-rafTimeout | 使用 `requestAnimationFrame` 实现的延迟 `setTimeout` 或间隔 `setInterval` 调用函数 | (fn: Function, delay: number = 0, interval: boolean = false) => \{ id: number }
-cancelRaf | 用于取消 `rafTimeout` 函数 | (raf: { id: number }) => void
-throttle | 节流函数 | (fn: Function, delay: number = 300) => Function
-debounce | 防抖函数 | (fn: Function, delay: number = 300) => Function
-add | 消除 `js` 加减精度问题的加法函数 | (num1: number, num2: number) => number
-downloadFile | 下载文件并自定义文件名，未传 `fileName` 时，从文件地址中自动提取文件名称 | (url: string, fileName?: string) => void
-toggleDark | 一键切换暗黑模式函数 | () => void
-useEventListener | 使用 `Vue` 的生命周期钩子添加和移除事件监听器 | (target: HTMLElement &#124; Window &#124; Document, event: string, callback: Function) => void
-useMutationObserver | 使用 `MutationObserver` 观察 `DOM` 元素的变化 | (target: Ref &#124; Ref[] &#124; HTMLElement &#124; HTMLElement[], callback: MutationCallback, options = {}) => { start: \() => void; stop: \() => void }
-useScroll | 实时监测目标元素滚动位置及状态 | (target: Ref &#124; HTMLElement &#124; Window &#124; Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => { x: Ref\<number>; xScrollMax: Ref\<number>; y: Ref\<number>; yScrollMax: Ref\<number>; isScrolling: Ref\<boolean>; left: Ref\<boolean>; right: Ref\<boolean>; top: Ref\<boolean>; bottom: Ref\<boolean> }
-useFps | 实时监测浏览器刷新率FPS | () => { fps: Ref\<number> }
-useMediaQuery | 使用媒体查询来判断当前环境是否符合指定的媒体查询条件 | (mediaQuery: string) => { match: Ref\<boolean> }
-useResizeObserver | 使用 `ResizeObserver` 观察 `DOM` 元素尺寸变化 | (target: Ref &#124; Ref[] &#124; HTMLElement &#124; HTMLElement[], callback: ResizeObserverCallback, options = {}) => { 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 | 检查浏览器是否支持给定的事件监听器选项 | (prop: 'capture' &#124; 'once' &#124; 'passive' &#124; 'signal') => { isSupported: Ref\<boolean> }
+| 名称 | 说明 | 类型 |
+| :-- | :-- | :-- |
+| dateFormat | 格式化日期时间字符串函数 | (value: number &#124; string &#124; Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss') => string |
+| formatNumber | 数字格式化函数 | (value: number &#124; string, precision: number = 2, separator: string = ',', decimal: string = '.', prefix?: string, suffix?: string) => string |
+| rafTimeout | 使用 `requestAnimationFrame` 实现的延迟 `setTimeout` 或间隔 `setInterval` 调用函数 | (fn: Function, delay: number = 0, interval: boolean = false) => \{ id: number } |
+| cancelRaf | 用于取消 `rafTimeout` 函数 | (raf: { id: number }) => void |
+| throttle | 节流函数 | (fn: Function, delay: number = 300) => Function |
+| debounce | 防抖函数 | (fn: Function, delay: number = 300) => Function |
+| add | 消除 `js` 加减精度问题的加法函数 | (num1: number, num2: number) => number |
+| downloadFile | 下载文件并自定义文件名，未传 `fileName` 时，从文件地址中自动提取文件名称 | (url: string, fileName?: string) => void |
+| toggleDark | 一键切换暗黑模式函数 | () => void |
+| useEventListener | 使用 `Vue` 的生命周期钩子添加和移除事件监听器 | (target: HTMLElement &#124; Window &#124; Document, event: string, callback: Function) => void |
+| useMutationObserver | 使用 `MutationObserver` 观察 `DOM` 元素的变化 | (target: Ref &#124; Ref[] &#124; HTMLElement &#124; HTMLElement[], callback: MutationCallback, options: object = {}) => { start: \() => void, stop: \() => void } |
+| useScroll | 实时监测目标元素滚动位置及状态 | (target: Ref &#124; HTMLElement &#124; Window &#124; Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => { x: Ref\<number>, xScrollMax: Ref\<number>, y: Ref\<number>, yScrollMax: Ref\<number>, isScrolling: Ref\<boolean>, left: Ref\<boolean>, right: Ref\<boolean>, top: Ref\<boolean>, bottom: Ref\<boolean> } |
+| useFps | 实时监测浏览器刷新率FPS | () => { fps: Ref\<number> } |
+| 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 | 检查浏览器是否支持给定的事件监听器选项 | (prop: 'capture' &#124; 'once' &#124; 'passive' &#124; 'signal') => { isSupported: Ref\<boolean> } |