hys-ui 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # Changelog
 
+## 0.4.0
+
+- 示例站点为新增能力补充交互示例，API 参考补全参数、事件、插槽和实例方法的具体说明。
+
+- Button 增加石板灰、钴蓝、靛蓝、紫罗兰、湖青、青绿、翡翠绿、青柠、琥珀、柑橘、朱红、玫红十二种内置配色，支持深浅色和原有文字、链接及朴素样式。悬停只变更视觉样式，按钮位置保持稳定。
+
+- Button 支持可取消的异步操作、延迟加载、按下状态、自定义根标签与键盘激活、两字中文间距、危险色与透明描边组合及文字底色。新增 ButtonGroup 统一按钮的方向、尺寸和状态。
+- Search 增加独立搜索按钮、确认提交模式、非受控初值、清空策略及原生输入属性。
+- Select 支持值与标签模型、远程标签回显、首选高亮值和动态清空值。多选批量事件使用同一模型格式。
+
+- Tour 支持定位到元素、选择器和目标函数，增加跟随滚动的高亮遮罩、目标点击策略、非模态引导、逐步外观、自定义内容与导航、挂载与层级配置。
+- SplitPane 增加两侧独立的像素或百分比约束、折叠和恢复、延迟拖动提交、拖动预览事件及非受控比例。
+- SplitPane 支持按标识管理任意数量的面板、按分隔条调整相邻尺寸、受控尺寸集合和面板插槽。未设置尺寸的面板自动分配可用空间。
+- SplitPane 更新细线、抓手和方向箭头，增加可配置分隔条尺寸、键盘折叠、双击操作、非受控布局记忆和按标识调整面板尺寸。
+
+- Mention 支持独立触发规则、模糊和拼音搜索、多源分页与缓存、推荐和最近记录、分组虚拟候选、富文本实体、程序化编辑、序列化、撤销重做、权限校验、表单及浮层定制。
+- AnimatedNumber 支持精确十进制字符串、统计标题与前后缀、自定义数值格式和截止时间倒计时。
+- Table 增加外部容器粘性表头和同步滚动条、列级受控排序和筛选、自定义表格结构与表头合并。支持下一次排序提示、自定义批量选择和统一单元格文本转换。
+- Table 支持分页布局、默认分页值、自定义分页器与服务端总页数，以及固定汇总、当前页汇总和自定义汇总行。新增横向最小宽度、列标题渲染和溢出提示样式配置。
+- Pagination 支持非受控初始值、总页数、单页隐藏、控件布局和尺寸，以及总数、按钮内容和跳转插槽。受控模式按已生效的页大小调整页码。
+
+## 0.3.0
+
+- DataGrid 支持受控查询、远程加载取消与重试、单选和多选、选择保留、自定义列字段与汇总，以及按行键滚动定位。树形行事件返回原始记录，列宽拖动按帧预览并在释放时保存，支持键盘调整和取消。TypeScript 模板引用可使用 `HysDataGridInstance`。
+
+- VirtualTable 增加双向虚拟化、左右固定列与顶部固定行、容器测量、稳定排序、受控选择、键盘与实例定位、滚动追加、缓存恢复及自定义加载状态。滚动按帧合并，追加保留当前位置；保留原有表体高度和插槽约定。
+
+- TagInput 补充非受控初值、分隔符与批量粘贴、可取消异步检查、受控拒绝处理、清空、标签外观与折叠虚拟列表、拖拽/键盘排序、表单与实例方法；ColorPicker 补充透明度、颜色格式与预设、预览确认、内嵌与受控浮层、自定义内容及表单集成，连续拖动缓存几何并按帧更新，释放时集中校验。保留原有默认行为并增加独立示例。
+
+- Alert 补充外观、横幅、操作区、受控关闭、异步检查与退出完成事件；Empty 补充内置图形、图片回退及独立内容区；Timeline 补充双侧和交替布局、标签、节点、加载、字段映射与稳定排序。保留原有接口，完善缓存、动效及辅助技术处理，新增独立场景。
+- Transfer 双击移动时阻止第二次按下产生文字选区，保留复选框、交互内容与快捷多选。
+
+- Progress 增加仪表盘与缺口配置、函数/阈值/渐变颜色、已确认进度叠加、分段与精确部分段、尺寸和端点、文字与状态图标、条纹/进行中/不定进度、动效与辅助技术配置；保留原有 value 和默认显示，完善边界及缓存处理并新增独立示例。
+
+- Upload 补充受控/初始文件列表、真实 multipart 与自定义请求、自动/手动提交、并发队列、按帧进度、取消和重试、异步验证及内容转换、移除检查、文本/图片/卡片列表、预览/下载、目录与粘贴、插槽和表单集成；保留原有本地选择模式与事件，完善缓存任务和本地 URL 清理，新增独立场景。
+
+- Tooltip 与 Popover 补充受控/非受控显示、多种及组合触发、延迟与自动关闭、可移入内容、十二种定位、箭头与外观、独立参考元素、自定义挂载、内容保留及生命周期、键盘导航和实例操作；统一浮层清理并补充独立场景。
+- 修复 Drawer 关闭拦截函数的运行时属性识别，保留回调类型兼容性。
+
+- Drawer 补充受控及非受控显示、异步操作与关闭拦截、生命周期和内容挂载策略、独立滚动与分区布局、容器内展示、嵌套推移、全屏及透明度配置、方向动效、焦点管理与实例方法；新增按帧合并的四向边缘缩放、键盘调整、受控尺寸与取消回退，保留旧 close 事件用法。
+
+- ContextMenu 补充多种触发方式、多级子菜单、分组与分隔线、复选/单选与普通项选中、受控状态、业务字段映射、模板、滚动边界和键盘/实例操作；Breadcrumb 增加图标、同级菜单、深层折叠、尺寸与文字截断及宿主路由适配，保留既有事件和默认行为。
+
+- Transfer 支持 Ctrl/Cmd 逐项切换、Shift 鼠标/键盘范围选择，并补充默认关闭的 moveOnDoubleClick 双击移动参数与独立示例。
+
+- Transfer 新增从源列表飞入目标列表的移动动效、落地高亮与效果/时长配置；覆盖按钮、拖拽和实例方法，限制可见代表项目数量，并清理连续移动、滚动和页面离开时的动画。
+
+- Select 多选新增紧凑的全选/全不选工具栏、批量范围与文字配置、实例操作和批量事件；保留禁用值，遵守选择上限，支持筛选、远程结果、虚拟列表及键盘操作；多选默认折叠超过 3 个的标签，可显式设置 maxTagCount。
+
+- 穿梭框拖拽目标去掉叠加的内阴影描边，保留单层高亮边框与背景反馈，避免滚动区域出现双重边线。
+
+- 为选择、日期、补全、提及、颜色、提示、菜单及数据组件内的浮层统一增加可配置展开/收起动效与时长；补充交互示例，处理退出禁用、快速重开、减少动态效果、边缘定位和页面缓存清理。
+
+- 修复 Chrome 中鼠标位于自适应高度表格时，纵向滚轮无法传给 Modal 等外层滚动容器的问题；保留表格横向滚动约束。
+
+- Modal 拖拽采用按帧更新合成层位置，缓存手势边界并在结束后同步状态；默认柔和缩放，支持全屏/还原过渡及弹窗背景、遮罩的独立透明度，增加宽度预设与标题/底部分区尺寸，并优化缩放手柄及轻量拖动反馈。
+
+- Modal 补充内置操作区、异步确认与取消、关闭拦截、失败重试、调用式服务、拖拽与尺寸调整、全屏切换、长内容滚动、快捷确认、挂载策略与焦点配置；统一嵌套层级、滚动锁定及子浮层清理，保留原有插槽和显示接口。
+
 ## 0.2.0
 
 - Table 补充布局与表头行样式、多字段排序、选择单元格定制、筛选浮层控制与连续应用、展开图标及操作列配置、手动更新子行和独立视口行定位；保留现有参数、事件与默认行为。

package/README.md

@@ -1,96 +1,105 @@
 # HYS UI
 
-面向 Vue 3.5+ 的组件库，提供 TypeScript 类型、主题配置和独立的中文交互文档。
+HYS UI 是面向管理后台和业务应用的 Vue 3 组件库。用它搭建筛选表单、数据列表和项目排期界面。组件支持按需导入、TypeScript 类型提示和主题定制。
 
-[在线文档与交互示例](https://lampo1024.github.io/hys-ui/)
+[在线文档与交互示例](https://lampo1024.github.io/hys-ui/) · [npm](https://www.npmjs.com/package/hys-ui) · [更新记录](https://github.com/lampo1024/hys-ui/blob/main/packages/ui/CHANGELOG.md)
 
-## 安装
+## 按场景找组件
+
+每个组件的文档都可以直接试用。展开示例即可复制 Vue 源码，属性、事件和插槽见该页的 API 参考。
+
+| 场景 | 可以做什么 | 在线示例 |
+| --- | --- | --- |
+| 表单与输入 | 配置字段联动、异步校验、远程搜索和多选。 | [表单](https://lampo1024.github.io/hys-ui/components/hys-form/) · [下拉选择](https://lampo1024.github.io/hys-ui/components/hys-select/) · [自动补全](https://lampo1024.github.io/hys-ui/components/hys-autocomplete/) |
+| 层级与批量选择 | 按层级挑选分类，在两侧列表之间批量移动成员。 | [树形选择](https://lampo1024.github.io/hys-ui/components/hys-tree-select/) · [穿梭框](https://lampo1024.github.io/hys-ui/components/hys-transfer/) |
+| 日期与排期 | 按日期或周筛选，拖动甘特任务、连接前置依赖、查看排期冲突。 | [日期选择](https://lampo1024.github.io/hys-ui/components/hys-date-picker/) · [日期范围](https://lampo1024.github.io/hys-ui/components/hys-date-range-picker/) · [甘特图](https://lampo1024.github.io/hys-ui/components/hys-gantt/) |
+| 弹层与反馈 | 在对话框中编辑长表单，用抽屉查看详情，用轻提示反馈操作结果。 | [对话框](https://lampo1024.github.io/hys-ui/components/hys-modal/) · [抽屉](https://lampo1024.github.io/hys-ui/components/hys-drawer/) · [轻提示](https://lampo1024.github.io/hys-ui/components/hys-toast/) |
+| 文件与进度 | 选择文件、控制上传队列，显示进度、失败和重试状态。 | [文件上传](https://lampo1024.github.io/hys-ui/components/hys-upload/) · [进度条](https://lampo1024.github.io/hys-ui/components/hys-progress/) |
+
+### 三种表格怎么选
+
+- **`HysTable`** 适合常规列表和树形数据。支持固定列、展开行、合并单元格、表尾汇总和分页。[表格示例](https://lampo1024.github.io/hys-ui/components/hys-table/)
+- **`HysDataGrid`** 适合让用户自行筛选和整理数据。支持按列搜索、拖拽调整列顺序、列显隐、分组、CSV 导出和服务端查询。[高级表格示例](https://lampo1024.github.io/hys-ui/components/hys-data-grid/)
+- **`HysVirtualTable`** 适合需要连续滚动的大数据列表。按视口渲染行，也可开启列虚拟化。支持固定行列和滚动加载。[虚拟表格示例](https://lampo1024.github.io/hys-ui/components/hys-virtual-table/)
+
+例如，任务管理页可以用日期范围和多选下拉框筛选任务，用高级表格展示结果，用对话框编辑记录。需要调整计划时，可以在甘特图里拖动任务、查看前置依赖和撤销排期修改。
+
+## 快速开始
+
+适用于 Vue 3.5+ 浏览器应用。通过 ESM 命名导入使用组件，无需全局注册或安装 Vue Router。
 
 ```bash
 npm install hys-ui
 ```
 
+把下面的任务状态选择示例放到任意 Vue 页面即可运行。项目中可以把 `hys-ui/style.css` 移到应用入口统一导入。
+
 ```vue
 <script setup lang="ts">
-import { HysButton } from 'hys-ui'
+import { ref } from 'vue'
+import { HysSelect } from 'hys-ui'
 import 'hys-ui/style.css'
+
+const status = ref('all')
+const options = [
+  { label: '全部状态', value: 'all' },
+  { label: '待办', value: 'todo' },
+  { label: '进行中', value: 'in-progress' },
+  { label: '已完成', value: 'done' },
+]
 </script>
 
 <template>
-  <HysButton round @click="console.log('confirmed')">确认</HysButton>
+  <HysSelect v-model="status" :options="options" aria-label="任务状态" />
+  <p>当前状态值：{{ status }}</p>
 </template>
 ```
 
-通过命名导入按需使用组件。组件源码、文件名、导出名统一采用 `HysXxxxx`。ESM 包的 Vue peer dependency 为 `>=3.5.0 <4`，无需 Vue Router。图标使用 Lucide outline，宿主项目可以传入自有图标。
+## 用轻提示反馈操作结果
 
-## 主题和动效
+在组件的 `<script setup>` 里调用 `useHysToast()`，即可在保存、上传等操作后显示提示。下面用定时器模拟上传，完成后更新同一条消息。
 
-在根组件 setup 中调用，参数可以是响应式 ref 或 getter。配置会传递给子组件与 Teleport 浮层。
-
-```ts
+```vue
+<script setup lang="ts">
 import { ref } from 'vue'
-import { provideHysConfig, type HysTheme } from 'hys-ui'
-
-const theme = ref<HysTheme>('blue')
-provideHysConfig({ theme, motion: 'subtle' })
-```
-
-主题支持 `blue / dark / green / purple / orange / forest`，动效支持 `full / subtle / off`，系统减少动态效果设置优先。组件库不会写入浏览器存储或修改全局页面主题。
-
-可以使用 `--hys-ui-primary`、`--hys-ui-surface`、`--hys-ui-text`、`--hys-ui-border`、`--hys-ui-font-family` 等公开变量覆盖组件外观。组件类名与变量采用独立前缀，没有 body/html 全局重置。
+import { HysButton, useHysToast } from 'hys-ui'
+import 'hys-ui/style.css'
 
-## 开发与文档
+const toast = useHysToast()
+const uploading = ref(false)
 
-```bash
-npm install
-npm run dev:docs
-```
+async function simulateUpload() {
+  uploading.value = true
+  const message = toast.loading('正在上传…')
 
-访问 http://127.0.0.1:5174。每个组件有独立路由、运行场景、源码、API 与说明，页面状态通过 KeepAlive 保留。API 从源码生成。
+  await new Promise(resolve => setTimeout(resolve, 700))
 
-- `packages/ui`：唯一的组件源码及 npm 包。
-- `apps/docs`：独立组件文档与交互示例。
-- `tests`：核心行为回归。
-- `scripts`：元信息提取、完整性检查、打包与发布验证。
+  message.update({ type: 'success', message: '上传完成', duration: 2000 })
+  uploading.value = false
+}
+</script>
 
-```bash
-npm run build:ui
-npm run build:docs
-npm test
-npm run check:contracts
-npm run check:release
+<template>
+  <HysButton :loading="uploading" @click="simulateUpload">模拟上传</HysButton>
+</template>
 ```
 
-`build:docs` 输出到 `apps/docs/dist`，部署服务需要将未知路径回退到 `index.html`。
+轻提示默认在顶部居中。可设置显示位置、停留时长和队列上限，也可以合并重复消息。[轻提示 API 与示例](https://lampo1024.github.io/hys-ui/components/hys-toast/)
 
-## 轻提示
+## 主题与动效
 
-轻提示默认显示在顶部中间，支持七种位置、五种状态和自定义内容。
+在根组件的 `<script setup>` 中调用 `provideHysConfig`，下级组件及其浮层会继承配置。主题支持响应式切换。
 
 ```ts
-import { useHysToast } from 'hys-ui'
-
-// 在组件 setup 中使用
-const toast = useHysToast({ maxCount: 5 })
-toast.success('保存成功')
-const task = toast.loading('正在上传…')
-task.update({ type: 'success', message: '上传完成', duration: 2000 })
-```
-
-## 发布
-
-根工作区和文档应用为私有，npm 包名为 `hys-ui`，版本 `0.2.0`，MIT 公开发布。
+import { ref } from 'vue'
+import { provideHysConfig, type HysTheme } from 'hys-ui'
 
-```bash
-npm run pack:ui
-npm login --registry=https://registry.npmjs.org/
-npm run release:ui
+const theme = ref<HysTheme>('blue')
+provideHysConfig({ theme, motion: 'subtle' })
 ```
 
-发布流程先执行全部检查、打包和仓库外安装验证，再检查登录账号、包名/版本及压缩包 SHA256，发布同一个已验证压缩包到 `latest`。凭证通过 npm 本地交互管理，不写入仓库。
-
-后续版本按语义化版本发布，并更新 CHANGELOG。暂不承诺 SSR/Nuxt 支持。
+内置主题有 `blue`、`dark`、`green`、`purple`、`orange` 和 `forest`。可用 `--hys-ui-primary`、`--hys-ui-surface` 等 CSS 变量调整外观。动效可设为 `full`、`subtle` 或 `off`，并遵循系统的减少动态效果设置。支持浮层动效的组件还可以单独设置 `popup-transition` 和 `popup-transition-duration`。
 
-## 许可证
+## 源码与问题反馈
 
-[MIT](LICENSE)
+[GitHub 仓库](https://github.com/lampo1024/hys-ui) · [提交问题](https://github.com/lampo1024/hys-ui/issues) · [MIT 许可证](https://github.com/lampo1024/hys-ui/blob/main/LICENSE)

package/dist/components/HysAlert/HysAlert.vue.js

@@ -1,56 +1,7 @@
-import { defineComponent as b, ref as k, computed as C, watch as g, openBlock as o, createElementBlock as s, mergeProps as B, unref as t, createBlock as w, resolveDynamicComponent as A, createCommentVNode as l, createElementVNode as c, renderSlot as u, createTextVNode as d, toDisplayString as m, createVNode as N } from "vue";
-import { useHysRootAttrs as V } from "../../config.js";
-import { CircleCheck as I, TriangleAlert as $, CircleAlert as p, Info as x, X as z } from "lucide-vue-next";
-const D = ["role"], E = { key: 0 }, j = /* @__PURE__ */ b({
-  __name: "HysAlert",
-  props: {
-    tone: { default: "info" },
-    title: {},
-    description: {},
-    closable: { type: Boolean },
-    showIcon: { type: Boolean },
-    center: { type: Boolean },
-    visible: { type: Boolean, default: void 0 }
-  },
-  emits: ["close", "update:visible"],
-  setup(e, { emit: y }) {
-    const f = V(), r = e, a = y, n = k(!0), v = C(() => r.visible ?? n.value);
-    g(() => r.title, () => n.value = !0);
-    function h() {
-      n.value = !1, a("update:visible", !1), a("close");
-    }
-    return (i, H) => v.value ? (o(), s("div", B({ key: 0 }, t(f), {
-      class: ["hys-ui-ex-alert", "hys-ui-ex-" + e.tone],
-      role: e.tone === "danger" ? "alert" : "status",
-      style: { justifyContent: e.center ? "center" : void 0 }
-    }), [
-      e.showIcon ? (o(), w(A(e.tone === "success" ? t(I) : e.tone === "warning" ? t($) : e.tone === "danger" ? t(p) : t(x)), {
-        key: 0,
-        size: 18
-      })) : l("", !0),
-      c("div", null, [
-        e.title || i.$slots.title ? (o(), s("strong", E, [
-          u(i.$slots, "title", {}, () => [
-            d(m(e.title), 1)
-          ])
-        ])) : l("", !0),
-        c("div", null, [
-          u(i.$slots, "default", {}, () => [
-            d(m(e.description), 1)
-          ])
-        ])
-      ]),
-      e.closable ? (o(), s("button", {
-        key: 1,
-        type: "button",
-        "aria-label": "关闭提示",
-        onClick: h
-      }, [
-        N(t(z), { size: 14 })
-      ])) : l("", !0)
-    ], 16, D)) : l("", !0);
-  }
-});
+import o from "./HysAlert2.vue.js";
+/* empty css              */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-aa88a78b"]]);
 export {
-  j as default
+  p as default
 };

package/dist/components/HysAlert/HysAlert2.vue.js

@@ -1,4 +1,161 @@
-import f from "./HysAlert.vue.js";
+import { defineComponent as z, useSlots as T, useAttrs as V, computed as h, openBlock as l, createBlock as v, Transition as $, unref as a, withCtx as E, createElementBlock as o, mergeProps as x, renderSlot as s, normalizeProps as r, guardReactiveProps as n, resolveDynamicComponent as D, createCommentVNode as u, createElementVNode as I, createTextVNode as g, toDisplayString as m } from "vue";
+import { Info as B, CircleAlert as N, TriangleAlert as P, CircleCheck as S, LoaderCircle as R, X as q } from "lucide-vue-next";
+import { useAlert as H } from "../../composables/useAlert.js";
+const X = ["data-effect", "role", "aria-label", "aria-live", "aria-atomic", "aria-busy"], j = {
+  key: 0,
+  class: "hys-ui-alert-icon",
+  "aria-hidden": "true"
+}, F = { class: "hys-ui-alert-content" }, G = {
+  key: 0,
+  class: "hys-ui-alert-title"
+}, J = {
+  key: 1,
+  class: "hys-ui-alert-description"
+}, K = {
+  key: 1,
+  class: "hys-ui-alert-action"
+}, M = ["aria-label", "disabled"], O = { key: 0 }, Y = /* @__PURE__ */ z({
+  inheritAttrs: !1,
+  __name: "HysAlert",
+  props: {
+    tone: {},
+    title: {},
+    description: {},
+    closable: { type: Boolean },
+    showIcon: { type: Boolean, default: void 0 },
+    center: { type: Boolean },
+    visible: { type: Boolean, default: void 0 },
+    modelValue: { type: Boolean, default: void 0 },
+    defaultVisible: { type: Boolean, default: !0 },
+    effect: { default: "light" },
+    banner: { type: Boolean },
+    bordered: { type: Boolean, default: !0 },
+    size: { default: "md" },
+    closeText: {},
+    closeLabel: { default: "关闭提示" },
+    disabled: { type: Boolean },
+    beforeClose: {},
+    transition: { default: "fade" },
+    transitionDuration: { default: 180 },
+    appear: { type: Boolean },
+    ariaLabel: {},
+    ariaLive: {},
+    ariaAtomic: { type: Boolean, default: !0 }
+  },
+  emits: ["close", "update:visible", "update:modelValue", "visibleChange", "closeRequest", "closeError", "afterClose"],
+  setup(t, { expose: k, emit: L }) {
+    const b = t, C = L, c = T(), p = V(), e = H(b, (i, ...d) => C(i, ...d)), A = h(
+      () => ({
+        success: S,
+        warning: P,
+        danger: N,
+        info: B,
+        primary: B
+      })[e.tone.value]
+    ), y = h(
+      () => !!(b.description || c.default || c.description)
+    ), w = h(
+      () => ({
+        info: "var(--hys-ui-info,#3867f5)",
+        primary: "var(--hys-ui-primary,var(--hys-ui-theme-primary))",
+        success: "var(--hys-ui-success,#16a46e)",
+        warning: "var(--hys-ui-warning,#d9860c)",
+        danger: "var(--hys-ui-red,var(--hys-ui-theme-red,#ed4556))"
+      })[e.tone.value]
+    );
+    return k({
+      element: e.element,
+      visible: e.visible,
+      closing: e.closing,
+      close: () => e.close(),
+      show: e.show
+    }), (i, d) => (l(), v($, {
+      name: "hys-ui-alert-" + t.transition,
+      css: a(e).duration.value > 0,
+      duration: a(e).duration.value,
+      appear: t.appear,
+      onBeforeLeave: a(e).beforeLeave,
+      onAfterLeave: a(e).afterLeave,
+      onBeforeEnter: a(e).restore,
+      onLeaveCancelled: a(e).restore
+    }, {
+      default: E(() => [
+        a(e).visible.value ? (l(), o("div", x({
+          key: 0,
+          ref: (f) => a(e).element.value = f
+        }, { ...a(e).skin.value, ...a(p) }, {
+          class: ["hys-ui-ex-alert hys-ui-alert-panel", [
+            "hys-ui-ex-" + a(e).tone.value,
+            "hys-ui-alert-" + t.size,
+            {
+              "hys-ui-alert-banner": t.banner,
+              "hys-ui-alert-center": t.center,
+              "hys-ui-alert-bordered": t.bordered,
+              "hys-ui-alert-description": y.value
+            }
+          ]],
+          "data-effect": t.effect,
+          style: {
+            "--hys-ui-alert-color": w.value,
+            "--hys-ui-alert-duration": a(e).duration.value + "ms"
+          },
+          role: a(p).role || (a(e).tone.value === "danger" ? "alert" : "status"),
+          "aria-label": t.ariaLabel,
+          "aria-live": t.ariaLive,
+          "aria-atomic": t.ariaAtomic,
+          "aria-busy": a(e).closing.value || void 0
+        }), [
+          t.showIcon ?? t.banner ? (l(), o("span", j, [
+            s(i.$slots, "icon", r(n(a(e).scope.value)), () => [
+              (l(), v(D(A.value), {
+                size: y.value ? 22 : 18
+              }, null, 8, ["size"]))
+            ], !0)
+          ])) : u("", !0),
+          I("div", F, [
+            t.title || c.title ? (l(), o("strong", G, [
+              s(i.$slots, "title", r(n(a(e).scope.value)), () => [
+                g(m(t.title), 1)
+              ], !0)
+            ])) : u("", !0),
+            y.value ? (l(), o("div", J, [
+              s(i.$slots, "default", r(n(a(e).scope.value)), () => [
+                s(i.$slots, "description", r(n(a(e).scope.value)), () => [
+                  g(m(t.description), 1)
+                ], !0)
+              ], !0)
+            ])) : u("", !0)
+          ]),
+          c.action ? (l(), o("div", K, [
+            s(i.$slots, "action", r(n(a(e).scope.value)), void 0, !0)
+          ])) : u("", !0),
+          t.closable ? (l(), o("button", {
+            key: 2,
+            type: "button",
+            class: "hys-ui-alert-close",
+            "aria-label": t.closeLabel,
+            disabled: t.disabled || a(e).closing.value,
+            onClick: d[0] || (d[0] = (f) => a(e).close("button", f))
+          }, [
+            a(e).closing.value ? (l(), v(a(R), {
+              key: 0,
+              class: "hys-ui-alert-spinner",
+              size: 16,
+              "aria-hidden": "true"
+            })) : s(i.$slots, "close-icon", r(n(a(e).scope.value)), () => [
+              t.closeText ? (l(), o("span", O, m(t.closeText), 1)) : (l(), v(a(q), {
+                key: 1,
+                size: 16,
+                "aria-hidden": "true"
+              }))
+            ], !0, 1)
+          ], 8, M)) : u("", !0)
+        ], 16, X)) : u("", !0)
+      ]),
+      _: 3
+    }, 8, ["name", "css", "duration", "appear", "onBeforeLeave", "onAfterLeave", "onBeforeEnter", "onLeaveCancelled"]));
+  }
+});
 export {
-  f as default
+  Y as default
 };

package/dist/components/HysAnimatedNumber/HysAnimatedNumber.vue.js

@@ -1,43 +1,7 @@
-import { defineComponent as A, ref as b, watch as M, onDeactivated as x, onActivated as y, onBeforeUnmount as N, openBlock as w, createElementBlock as B, mergeProps as k, unref as q, toDisplayString as D } from "vue";
-import { useHysRootAttrs as H } from "../../config.js";
-import { useMotion as R } from "../../motion/useMotion.js";
-const S = ["aria-label"], P = /* @__PURE__ */ A({
-  __name: "HysAnimatedNumber",
-  props: {
-    value: {},
-    duration: { default: 650 },
-    decimals: { default: 0 }
-  },
-  setup(o) {
-    const l = H(), { effectiveMotion: u } = R(), t = o, n = b(Number.isFinite(t.value) ? t.value : 0);
-    let a = 0, r = !0;
-    function i(e) {
-      return Number.isFinite(e) ? e : 0;
-    }
-    function f(e) {
-      if (e = i(e), cancelAnimationFrame(a), u.value === "off" || !Number.isFinite(t.duration) || t.duration <= 0) {
-        n.value = e;
-        return;
-      }
-      const s = n.value, v = performance.now(), h = Math.max(1, t.duration);
-      function m(p) {
-        const c = Math.min(1, (p - v) / h), F = 1 - Math.pow(1 - c, 3);
-        n.value = s + (e - s) * F, c < 1 && (a = requestAnimationFrame(m));
-      }
-      a = requestAnimationFrame(m);
-    }
-    return M(() => [t.value, t.duration, u.value], ([e]) => {
-      r ? f(e) : n.value = i(e);
-    }), x(() => {
-      r = !1, cancelAnimationFrame(a);
-    }), y(() => {
-      r = !0, n.value = i(t.value);
-    }), N(() => cancelAnimationFrame(a)), (e, d) => (w(), B("span", k(q(l), {
-      class: "hys-ui-motion-number",
-      "aria-label": String(i(o.value))
-    }), D(n.value.toFixed(Number.isFinite(o.decimals) ? Math.max(0, Math.min(5, Math.floor(o.decimals))) : 0)), 17, S));
-  }
-});
+import o from "./HysAnimatedNumber2.vue.js";
+/* empty css                       */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-11d35ec9"]]);
 export {
-  P as default
+  a as default
 };

package/dist/components/HysAnimatedNumber/HysAnimatedNumber2.vue.js

@@ -1,4 +1,148 @@
-import f from "./HysAnimatedNumber.vue.js";
+import { defineComponent as Z, useSlots as _, ref as G, watch as E, computed as c, onMounted as ee, onActivated as te, onDeactivated as ne, onBeforeUnmount as ae, openBlock as m, createElementBlock as v, mergeProps as ie, unref as b, renderSlot as x, createTextVNode as M, toDisplayString as N, createCommentVNode as V, createElementVNode as oe, normalizeStyle as re, normalizeProps as $, guardReactiveProps as C, createBlock as se, Fragment as ue } from "vue";
+import { useHysRootAttrs as le } from "../../config.js";
+import { useMotion as ce } from "../../motion/useMotion.js";
+import { decimal as me, decimalText as I, decimalRound as de } from "../../composables/numberInput.js";
+const fe = {
+  key: 0,
+  class: "hys-ui-motion-number-title"
+}, ve = ["role"], pe = {
+  key: 0,
+  class: "hys-ui-motion-number-affix"
+}, he = {
+  key: 1,
+  class: "hys-ui-motion-number-affix"
+}, xe = /* @__PURE__ */ Z({
+  __name: "HysAnimatedNumber",
+  props: {
+    value: { default: 0 },
+    duration: { default: 650 },
+    decimals: {},
+    precision: {},
+    groupSeparator: {},
+    decimalSeparator: { default: "." },
+    title: {},
+    prefix: {},
+    suffix: {},
+    valueStyle: { type: [Boolean, null, String, Object, Array] },
+    formatter: {},
+    deadline: {},
+    format: { default: "HH:mm:ss" }
+  },
+  emits: ["change", "finish"],
+  setup(r, { expose: L, emit: U }) {
+    const t = r, j = U, A = _(), X = le(), { effectiveMotion: P } = ce(), F = (e) => typeof e == "number" && !Number.isFinite(e) ? 0 : e, s = G(F(t.value));
+    let p = 0, d = !1;
+    function q() {
+      if (cancelAnimationFrame(p), !d) return;
+      const e = F(t.value), n = s.value, u = t.duration;
+      if (typeof e != "number" || typeof n != "number" || n === e || t.deadline !== void 0 || P.value === "off" || !Number.isFinite(u) || u <= 0) {
+        s.value = e;
+        return;
+      }
+      const a = performance.now(), o = (l) => {
+        const R = Math.max(0, Math.min(1, (l - a) / u)), W = 1 - (1 - R) ** 3;
+        s.value = R === 1 ? e : n * (1 - W) + e * W, R < 1 && (p = requestAnimationFrame(o));
+      };
+      p = requestAnimationFrame(o);
+    }
+    E([() => t.value, () => t.duration, P], q);
+    const f = c(() => {
+      const e = t.deadline instanceof Date ? t.deadline.getTime() : t.deadline;
+      return e !== void 0 && Number.isFinite(e) ? e : void 0;
+    }), w = () => f.value === void 0 ? 0 : Math.max(
+      0,
+      Math.min(Number.MAX_SAFE_INTEGER, f.value - Date.now())
+    ), i = G(w()), D = c(
+      () => t.format.match(/\[[^\]]*\]|SSS|DD?|HH?|mm?|ss?|[\s\S]/g) ?? []
+    ), h = c(() => D.value.includes("SSS"));
+    let H, T, k;
+    function y() {
+      if (clearTimeout(H), !d || f.value === void 0) return;
+      const e = f.value;
+      if (i.value = w(), i.value !== k && (k = i.value, j("change", i.value)), i.value === 0) {
+        T !== e && (T = e, j("finish"));
+        return;
+      }
+      const n = h.value ? 16 : 1e3;
+      H = setTimeout(
+        y,
+        h.value ? n : i.value % n || n
+      );
+    }
+    E(f, () => {
+      T = void 0, k = void 0, i.value = w(), q(), y();
+    }), E(h, y);
+    function z() {
+      d || (d = !0, s.value = F(t.value), y());
+    }
+    function O() {
+      d = !1, clearTimeout(H), cancelAnimationFrame(p);
+    }
+    ee(z), te(z), ne(O), ae(O);
+    const J = c(() => {
+      const e = t.precision ?? t.decimals;
+      return e === void 0 && typeof s.value == "string" ? void 0 : e !== void 0 && Number.isFinite(e) ? Math.max(0, Math.min(20, Math.floor(e))) : 0;
+    });
+    function K() {
+      const e = me(s.value);
+      if (!e) return String(s.value);
+      const n = J.value, u = n === void 0 ? I(e) : I(de(e, n), n), [a, o] = u.split("."), l = t.groupSeparator ? a.replace(/\B(?=(\d{3})+(?!\d))/g, () => t.groupSeparator) : a;
+      return o === void 0 ? l : l + t.decimalSeparator + o;
+    }
+    function Q() {
+      let e = h.value ? Math.floor(i.value) : Math.ceil(i.value / 1e3) * 1e3;
+      const n = { D: 864e5, H: 36e5, m: 6e4, s: 1e3, S: 1 }, u = /* @__PURE__ */ new Map();
+      for (const [a, o] of Object.entries(n))
+        D.value.some(
+          (l) => l[0] === a && /^(D{1,2}|H{1,2}|m{1,2}|s{1,2}|SSS)$/.test(l)
+        ) && (u.set(a, Math.floor(e / o)), e %= o);
+      return D.value.map((a) => {
+        if (a.startsWith("[") && a.endsWith("]"))
+          return a.slice(1, -1);
+        const o = u.get(a[0]);
+        return o === void 0 ? a : String(o).padStart(a.length, "0");
+      }).join("");
+    }
+    const S = c(() => t.deadline !== void 0), B = c(
+      () => S.value ? Q() : K()
+    ), g = c(() => ({
+      value: S.value ? i.value : s.value,
+      displayValue: B.value,
+      remaining: S.value ? i.value : void 0
+    })), Y = ({ value: e }) => e;
+    return L({ displayValue: B, remaining: i }), (e, n) => (m(), v("span", ie(b(X), { class: "hys-ui-motion-number" }), [
+      r.title || b(A).title ? (m(), v("span", fe, [
+        x(e.$slots, "title", {}, () => [
+          M(N(r.title), 1)
+        ], !0)
+      ])) : V("", !0),
+      oe("span", {
+        class: "hys-ui-motion-number-value",
+        style: re(r.valueStyle),
+        role: S.value ? "timer" : void 0
+      }, [
+        r.prefix || b(A).prefix ? (m(), v("span", pe, [
+          x(e.$slots, "prefix", $(C(g.value)), () => [
+            M(N(r.prefix), 1)
+          ], !0)
+        ])) : V("", !0),
+        x(e.$slots, "formatter", $(C(g.value)), () => [
+          r.formatter ? (m(), se(Y, {
+            key: 0,
+            value: r.formatter(g.value)
+          }, null, 8, ["value"])) : (m(), v(ue, { key: 1 }, [
+            M(N(B.value), 1)
+          ], 64))
+        ], !0),
+        r.suffix || b(A).suffix ? (m(), v("span", he, [
+          x(e.$slots, "suffix", $(C(g.value)), () => [
+            M(N(r.suffix), 1)
+          ], !0)
+        ])) : V("", !0)
+      ], 12, ve)
+    ], 16));
+  }
+});
 export {
-  f as default
+  xe as default
 };