hys-ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## 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

@@ -39,6 +39,20 @@ provideHysConfig({ theme, motion: 'subtle' })
 
 可以使用 `--hys-ui-primary`、`--hys-ui-surface`、`--hys-ui-text`、`--hys-ui-border`、`--hys-ui-font-family` 等公开变量覆盖组件外观。组件类名与变量采用独立前缀，没有 body/html 全局重置。
 
+
+浮层组件统一通过 `popupTransition` 设置展开与收起动效：`scale`（默认柔和缩放）、`fade`（淡入淡出）、`slide`（轻移）、`slide-fade`（轻移缩放）、`none`（关闭）。`popupTransitionDuration` 设置时长，默认 160ms，设为 0 立即切换。该配置适用于选择、日期、自动补全、提及、颜色、提示、菜单，以及表格、树形、头像组、日历事件和甘特图关系等浮层。Modal、Drawer 和 Toast 保留各自的动画配置。
+
+```vue
+<HysSelect
+  v-model="value"
+  :options="options"
+  popup-transition="slide-fade"
+  :popup-transition-duration="200"
+/>
+```
+
+系统减少动态效果和 `motion: 'off'` 优先于局部设置；内嵌日期面板不播放浮层动效。动画仅改变透明度和合成层变换，关闭时立即停止交互，退出完成后移除内容。
+
 ## 开发与文档
 
 ```bash
@@ -79,7 +93,7 @@ task.update({ type: 'success', message: '上传完成', duration: 2000 })
 
 ## 发布
 
-根工作区和文档应用为私有，npm 包名为 `hys-ui`，版本 `0.2.0`，MIT 公开发布。
+根工作区和文档应用为私有，npm 包名为 `hys-ui`，版本 `0.3.0`，MIT 公开发布。
 
 ```bash
 npm run pack:ui

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/HysAutocomplete/HysAutocomplete.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysAutocomplete2.vue.js";
 /* empty css                     */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d791cd3f"]]);
+const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-b0abe6f4"]]);
 export {
-  c as default
+  r as default
 };