@5even7/dlc-ui 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 > **发版规则**：默认每次发布只递增补丁号（0.x.y → 0.x.(y+1)，即 +0.01）；除非手动明确指定新版本号，否则不升次版本。
 
+## 0.2.4 - 2026-08-08
+
+- 移除 Progress `keyboard` 属性与键盘控制（拖动/受控 value 已覆盖主要场景）。
+- 兼容性修复：legacy/IE11 路径补齐 `Array.prototype.find`、`String.prototype.endsWith`、`String.prototype.padStart` 缺失导致的崩溃（源码层也改为 ES5 写法）。
+- 控制器暴露值改为实时 getter（`textRatio` / `cssVars` / `opacity` / `fallbackColor` / `mouseColor`），热更新后读取不再过期，Vue 重建时状态继承更准确。
+- `setSize` 先校验再赋值，非法尺寸不再污染内部状态或抛进 Vue 更新流程。
+- `setRange` 与创建时的 `min/max` 在 min>max 时自动交换。
+- 结构属性连续变化时，重建后补一次插槽搬运（B3）。
+- Canvas2D 降级的 `randomize()` 额外随机相位，变化更明显；README 注明降级路径 `mouseColor` 不生效。
+
+## 0.2.3 - 2026-08-08
+
+- 修复：Vue wrapper 重建组件（如 showValue 开关）后插槽内容丢失的问题（插槽容器改为整体搬入文字区/颜色区）。
+- 修复：进度条点击后无法直接使用键盘方向键的问题（拖动开始时自动聚焦）。
+- 修复：胶囊 `textRatio=0` 时文字区仍因最小宽度 164px 占位的问题，现 0 即完全隐藏。
+- 新增 Progress `readonly` 属性：与 disabled 行为一致但不置灰（`aria-readonly`）。
+
 ## 0.2.2 - 2026-08-08
 
 - 修复：Progress 的 `setLabel()` 对 const 变量重新赋值，导致打包产物被 esbuild 拒绝、文档站无法构建的问题；label 热更新恢复正常。

package/README.md

@@ -155,9 +155,9 @@ export default {
 
 两个组件共有：`preset`、`width`、`height`（数字=px，或 `px/%/vw/vh/vmin/vmax/em/rem` 字符串）、`colors`（4 个颜色，支持 `#rgb` / `#rrggbb` / CSS 命名色 / `rgb()` / `rgba()`，统一归一化为小写 6 位十六进制；`rgba()` 的 alpha 会被忽略，透明请用组件级 `opacity`）、`textRatio`（文字区宽度占比 0~100，默认胶囊 39 / 进度条 54）、`label`（覆盖默认 aria-label，胶囊另带 `role="img"`）、`quality`（`auto/low/medium/high`）、`renderer`（`auto/webgl2/canvas2d`）、`respectReducedMotion`、`cssVars`。
 
-胶囊专属：`seed`、`speed`、`mouseColor`（颜色随鼠标旋涡，默认 `true`，关闭不影响 click/悬浮/长按等事件）。
+胶囊专属：`seed`、`speed`、`mouseColor`（颜色随鼠标旋涡，默认 `true`，关闭不影响 click/悬浮/长按等事件；Canvas2D 降级路径下 `mouseColor` 不生效）。
 
-进度条专属：`value`、`min`、`max`（value 的合法区间，默认 0~100；**水线归一化到 [min, max]**，键盘 ±2% 与 PageUp/PageDown ±10% 都是“范围的百分比”，右侧数字仍显示原始 value）、`draggable`、`keyboard`、`disabled`（true 时同时禁用拖动/键盘、tabindex=-1、aria-disabled、视觉置灰）、`edgeStyle`（`flow/tide`）、`valueSuffix`（右侧数字后缀，默认 `%`）、`showValue`（是否显示右侧百分比数字，默认 `true`，`false` 只隐藏数字、不影响无障碍信息）。
+进度条专属：`value`、`min`、`max`（value 的合法区间，默认 0~100；**水线归一化到 [min, max]**，右侧数字仍显示原始 value）、`draggable`、`disabled`（禁用交互并置灰）、`readonly`（禁用交互但不置灰）、`edgeStyle`（`flow/tide`）、`valueSuffix`（右侧数字后缀，默认 `%`）、`showValue`（是否显示右侧百分比数字，默认 `true`，`false` 只隐藏数字、不影响无障碍信息）。
 
 插槽内容属性（H5/工厂）：`text`、`colorContent`，支持 HTML 字符串或 DOM 节点（数组）；Vue 组件请用默认插槽 / `#color` 插槽。**注意：字符串走 innerHTML，不要传入不可信/用户直接输入的内容（XSS 风险）。**
 
@@ -181,7 +181,7 @@ dlc-color 背景层（`createColorBackground(host, options)`）：`preset`、`co
 ## 属性 vs cssVars 边界
 
 - **内容（文字/图片/按钮）**：只归插槽管，组件不施加任何样式；
-- **文字区宽度**：只归 `textRatio` 属性管（唯一入口，写入 `--hj-text-width`）；
+- **文字区宽度**：只归 `textRatio` 属性管（唯一入口，写入 `--hj-text-width`；`0` 即隐藏文字区）；
 - **区域外观（背景/内边距/圆角/左侧距）**：只归 cssVars 管；
 - **星云颜料**：只归 `colors` 属性管（与 `#color` 插槽无关，前者改画布颜料，后者放你的覆盖内容）；
 - 旧的 `--hj-copy-*`、`--hj-progress-copy-*` 变量保留为**兼容别名**，只兜底不优先。
@@ -237,7 +237,7 @@ createProgressCapsule(el, {
 | capsule | `pointerenter` / `pointerleave` | `{ event, preset }` |
 | capsule | `error` | `{ message }`（WebGL2 不可用降级时触发） |
 | progress | `ready` / `presetchange` | `{ preset }` |
-| progress | `change` | `{ value, source }`，source ∈ `drag/keyboard/prop` |
+| progress | `change` | `{ value, source }`，source ∈ `drag/prop` |
 | progress | `dragstart` / `dragend` | `{ value }` |
 | progress | `error` | `{ message }` |
 

package/dist/capsule.cjs

@@ -413,9 +413,13 @@ function getPreset(kind, ref) {
   var list = CAPSULE_PRESETS ;
   if (!list) throw new Error("Unknown preset kind: ".concat(kind, " (use \"capsule\" or \"progress\")"));
   var key = String(ref).trim().toLowerCase();
-  var found = list.find(function (preset) {
-    return preset.name.toLowerCase() === key;
-  });
+  var found = null;
+  for (var index = 0; index < list.length; index += 1) {
+    if (list[index].name.toLowerCase() === key) {
+      found = list[index];
+      break;
+    }
+  }
   if (!found) throw new Error("Unknown ".concat(kind, " preset: ").concat(ref));
   return found;
 }
@@ -606,7 +610,7 @@ function normalizeRgbArgs(args) {
   if (parts.length < 3) return null;
   var to255 = function to255(value) {
     if (typeof value !== 'string' || !value) return null;
-    if (value.endsWith('%')) return clampChannel(parseFloat(value) / 100 * 255);
+    if (value.charAt(value.length - 1) === '%') return clampChannel(parseFloat(value) / 100 * 255);
     var number = Number(value);
     return Number.isFinite(number) ? clampChannel(number) : null;
   };
@@ -614,9 +618,11 @@ function normalizeRgbArgs(args) {
   var green = to255(parts[1]);
   var blue = to255(parts[2]);
   if (red === null || green === null || blue === null) return null;
-  return "#".concat([red, green, blue].map(function (n) {
-    return n.toString(16).padStart(2, '0');
-  }).join(''));
+  var hex = function hex(n) {
+    var text = n.toString(16);
+    return text.length === 1 ? "0".concat(text) : text;
+  };
+  return "#".concat(hex(red)).concat(hex(green)).concat(hex(blue));
 }
 
 /**
@@ -871,6 +877,7 @@ var FallbackRenderer = /*#__PURE__*/function () {
     this.preset = preset;
     this.context = canvas.getContext('2d');
     this.visible = true;
+    this.timePhase = 0;
   }
   return _createClass(FallbackRenderer, [{
     key: "resize",
@@ -891,7 +898,7 @@ var FallbackRenderer = /*#__PURE__*/function () {
       var _this$canvas = this.canvas,
         width = _this$canvas.width,
         height = _this$canvas.height;
-      var t = time * (this.preset.speed || 1);
+      var t = (time + this.timePhase) * (this.preset.speed || 1);
       var phase = (this.preset.seed || 0) * 0.7;
       var gradient = ctx.createLinearGradient(0, 0, width, height);
       gradient.addColorStop(0, this.preset.colors[0]);
@@ -928,7 +935,10 @@ var FallbackRenderer = /*#__PURE__*/function () {
   }, {
     key: "randomize",
     value: function randomize() {
-      if (this.preset) this.preset.seed = Math.random() * 100;
+      if (this.preset) {
+        this.preset.seed = Math.random() * 100;
+        this.timePhase = Math.random() * Math.PI * 2;
+      }
     }
   }, {
     key: "setMouseColor",
@@ -1174,6 +1184,8 @@ function createCapsule(container) {
     }
     if (merged.textRatio !== undefined) {
       root.style.setProperty('--hj-text-width', "".concat(merged.textRatio, "%"));
+      var userMinWidth = merged.cssVars && merged.cssVars['--hj-text-min-width'];
+      if (merged.textRatio === 0) root.style.setProperty('--hj-text-min-width', '0');else if (userMinWidth) root.style.setProperty('--hj-text-min-width', userMinWidth);else root.style.removeProperty('--hj-text-min-width');
     }
     renderer.resize();
   };
@@ -1297,6 +1309,8 @@ function createCapsule(container) {
       dirty.textRatio = true;
       merged.textRatio = value;
       root.style.setProperty('--hj-text-width', "".concat(value, "%"));
+      var userMinWidth = merged.cssVars && merged.cssVars['--hj-text-min-width'];
+      if (value === 0) root.style.setProperty('--hj-text-min-width', '0');else if (userMinWidth) root.style.setProperty('--hj-text-min-width', userMinWidth);else root.style.removeProperty('--hj-text-min-width');
       return this;
     },
     setCssVars: function setCssVars(vars) {
@@ -1315,8 +1329,14 @@ function createCapsule(container) {
       return this;
     },
     setSize: function setSize(width, height) {
-      if (width !== undefined) merged.width = width;
-      if (height !== undefined) merged.height = height;
+      if (width !== undefined) {
+        parseSize(width); // 非法尺寸直接抛错前先校验，避免污染内部状态
+        merged.width = width;
+      }
+      if (height !== undefined) {
+        parseSize(height);
+        merged.height = height;
+      }
       applySize();
       return this;
     },
@@ -1345,8 +1365,12 @@ function createCapsule(container) {
       renderer.dispose();
       root.remove();
     },
-    textRatio: merged.textRatio,
-    cssVars: merged.cssVars,
+    get textRatio() {
+      return merged.textRatio;
+    },
+    get cssVars() {
+      return merged.cssVars;
+    },
     dirty: dirty
   };
 }

package/dist/capsule.mjs

@@ -130,9 +130,13 @@ function getPreset(kind, ref) {
   const list = CAPSULE_PRESETS ;
   if (!list) throw new Error(`Unknown preset kind: ${kind} (use "capsule" or "progress")`);
   const key = String(ref).trim().toLowerCase();
-  const found = list.find(
-    (preset) => preset.name.toLowerCase() === key
-  );
+  let found = null;
+  for (let index = 0; index < list.length; index += 1) {
+    if (list[index].name.toLowerCase() === key) {
+      found = list[index];
+      break;
+    }
+  }
   if (!found) throw new Error(`Unknown ${kind} preset: ${ref}`);
   return found;
 }
@@ -325,7 +329,7 @@ function normalizeRgbArgs(args) {
   if (parts.length < 3) return null;
   const to255 = (value) => {
     if (typeof value !== 'string' || !value) return null;
-    if (value.endsWith('%')) return clampChannel((parseFloat(value) / 100) * 255);
+    if (value.charAt(value.length - 1) === '%') return clampChannel((parseFloat(value) / 100) * 255);
     const number = Number(value);
     return Number.isFinite(number) ? clampChannel(number) : null;
   };
@@ -333,7 +337,11 @@ function normalizeRgbArgs(args) {
   const green = to255(parts[1]);
   const blue = to255(parts[2]);
   if (red === null || green === null || blue === null) return null;
-  return `#${[red, green, blue].map((n) => n.toString(16).padStart(2, '0')).join('')}`;
+  const hex = (n) => {
+    const text = n.toString(16);
+    return text.length === 1 ? `0${text}` : text;
+  };
+  return `#${hex(red)}${hex(green)}${hex(blue)}`;
 }
 
 /**
@@ -680,12 +688,13 @@ function rgb(color, alpha = 1) {
 }
 
 class FallbackRenderer {
-  constructor(canvas, preset) {
-    this.canvas = canvas;
-    this.preset = preset;
-    this.context = canvas.getContext('2d');
-    this.visible = true;
-  }
+  constructor(canvas, preset) {
+    this.canvas = canvas;
+    this.preset = preset;
+    this.context = canvas.getContext('2d');
+    this.visible = true;
+    this.timePhase = 0;
+  }
 
   resize() {
     const rect = this.canvas.getBoundingClientRect();
@@ -701,7 +710,7 @@ class FallbackRenderer {
   drawNebula(time) {
     const ctx = this.context;
     const { width, height } = this.canvas;
-    const t = time * (this.preset.speed || 1);
+    const t = (time + this.timePhase) * (this.preset.speed || 1);
     const phase = (this.preset.seed || 0) * 0.7;
     const gradient = ctx.createLinearGradient(0, 0, width, height);
     gradient.addColorStop(0, this.preset.colors[0]);
@@ -736,7 +745,10 @@ class FallbackRenderer {
   }
 
   randomize() {
-    if (this.preset) this.preset.seed = Math.random() * 100;
+    if (this.preset) {
+      this.preset.seed = Math.random() * 100;
+      this.timePhase = Math.random() * Math.PI * 2;
+    }
   }
   setMouseColor() {}
   dispose() {}
@@ -962,6 +974,10 @@ function createCapsule(container, options = {}) {
     for (const name of Object.keys(vars)) root.style.setProperty(name, vars[name]);
     if (merged.textRatio !== undefined) {
       root.style.setProperty('--hj-text-width', `${merged.textRatio}%`);
+      const userMinWidth = merged.cssVars && merged.cssVars['--hj-text-min-width'];
+      if (merged.textRatio === 0) root.style.setProperty('--hj-text-min-width', '0');
+      else if (userMinWidth) root.style.setProperty('--hj-text-min-width', userMinWidth);
+      else root.style.removeProperty('--hj-text-min-width');
     }
     renderer.resize();
   };
@@ -1060,6 +1076,10 @@ function createCapsule(container, options = {}) {
       dirty.textRatio = true;
       merged.textRatio = value;
       root.style.setProperty('--hj-text-width', `${value}%`);
+      const userMinWidth = merged.cssVars && merged.cssVars['--hj-text-min-width'];
+      if (value === 0) root.style.setProperty('--hj-text-min-width', '0');
+      else if (userMinWidth) root.style.setProperty('--hj-text-min-width', userMinWidth);
+      else root.style.removeProperty('--hj-text-min-width');
       return this;
     },
     setCssVars(vars) {
@@ -1075,11 +1095,17 @@ function createCapsule(container, options = {}) {
       return this;
     },
     setSize(width, height) {
-      if (width !== undefined) merged.width = width;
-      if (height !== undefined) merged.height = height;
-      applySize();
-      return this;
-    },
+      if (width !== undefined) {
+        parseSize(width); // 非法尺寸直接抛错前先校验，避免污染内部状态
+        merged.width = width;
+      }
+      if (height !== undefined) {
+        parseSize(height);
+        merged.height = height;
+      }
+      applySize();
+      return this;
+    },
     randomize() {
       this.setSeed(Math.random() * 100);
       return this;
@@ -1106,8 +1132,8 @@ function createCapsule(container, options = {}) {
       renderer.dispose();
       root.remove();
     },
-    textRatio: merged.textRatio,
-    cssVars: merged.cssVars,
+    get textRatio() { return merged.textRatio; },
+    get cssVars() { return merged.cssVars; },
     dirty
   };
 }

package/dist/color.cjs

@@ -392,9 +392,13 @@ function getPreset(kind, ref) {
   var list = CAPSULE_PRESETS ;
   if (!list) throw new Error("Unknown preset kind: ".concat(kind, " (use \"capsule\" or \"progress\")"));
   var key = String(ref).trim().toLowerCase();
-  var found = list.find(function (preset) {
-    return preset.name.toLowerCase() === key;
-  });
+  var found = null;
+  for (var index = 0; index < list.length; index += 1) {
+    if (list[index].name.toLowerCase() === key) {
+      found = list[index];
+      break;
+    }
+  }
   if (!found) throw new Error("Unknown ".concat(kind, " preset: ").concat(ref));
   return found;
 }
@@ -571,7 +575,7 @@ function normalizeRgbArgs(args) {
   if (parts.length < 3) return null;
   var to255 = function to255(value) {
     if (typeof value !== 'string' || !value) return null;
-    if (value.endsWith('%')) return clampChannel(parseFloat(value) / 100 * 255);
+    if (value.charAt(value.length - 1) === '%') return clampChannel(parseFloat(value) / 100 * 255);
     var number = Number(value);
     return Number.isFinite(number) ? clampChannel(number) : null;
   };
@@ -579,9 +583,11 @@ function normalizeRgbArgs(args) {
   var green = to255(parts[1]);
   var blue = to255(parts[2]);
   if (red === null || green === null || blue === null) return null;
-  return "#".concat([red, green, blue].map(function (n) {
-    return n.toString(16).padStart(2, '0');
-  }).join(''));
+  var hex = function hex(n) {
+    var text = n.toString(16);
+    return text.length === 1 ? "0".concat(text) : text;
+  };
+  return "#".concat(hex(red)).concat(hex(green)).concat(hex(blue));
 }
 
 /**
@@ -836,6 +842,7 @@ var FallbackRenderer = /*#__PURE__*/function () {
     this.preset = preset;
     this.context = canvas.getContext('2d');
     this.visible = true;
+    this.timePhase = 0;
   }
   return _createClass(FallbackRenderer, [{
     key: "resize",
@@ -856,7 +863,7 @@ var FallbackRenderer = /*#__PURE__*/function () {
       var _this$canvas = this.canvas,
         width = _this$canvas.width,
         height = _this$canvas.height;
-      var t = time * (this.preset.speed || 1);
+      var t = (time + this.timePhase) * (this.preset.speed || 1);
       var phase = (this.preset.seed || 0) * 0.7;
       var gradient = ctx.createLinearGradient(0, 0, width, height);
       gradient.addColorStop(0, this.preset.colors[0]);
@@ -893,7 +900,10 @@ var FallbackRenderer = /*#__PURE__*/function () {
   }, {
     key: "randomize",
     value: function randomize() {
-      if (this.preset) this.preset.seed = Math.random() * 100;
+      if (this.preset) {
+        this.preset.seed = Math.random() * 100;
+        this.timePhase = Math.random() * Math.PI * 2;
+      }
     }
   }, {
     key: "setMouseColor",
@@ -1224,9 +1234,15 @@ function createColorBackground(host) {
       renderer.dispose();
       layer.remove();
     },
-    opacity: merged.opacity,
-    fallbackColor: merged.fallbackColor,
-    mouseColor: merged.mouseColor,
+    get opacity() {
+      return merged.opacity;
+    },
+    get fallbackColor() {
+      return merged.fallbackColor;
+    },
+    get mouseColor() {
+      return merged.mouseColor;
+    },
     dirty: dirty
   };
 }

package/dist/color.mjs

@@ -109,9 +109,13 @@ function getPreset(kind, ref) {
   const list = CAPSULE_PRESETS ;
   if (!list) throw new Error(`Unknown preset kind: ${kind} (use "capsule" or "progress")`);
   const key = String(ref).trim().toLowerCase();
-  const found = list.find(
-    (preset) => preset.name.toLowerCase() === key
-  );
+  let found = null;
+  for (let index = 0; index < list.length; index += 1) {
+    if (list[index].name.toLowerCase() === key) {
+      found = list[index];
+      break;
+    }
+  }
   if (!found) throw new Error(`Unknown ${kind} preset: ${ref}`);
   return found;
 }
@@ -290,7 +294,7 @@ function normalizeRgbArgs(args) {
   if (parts.length < 3) return null;
   const to255 = (value) => {
     if (typeof value !== 'string' || !value) return null;
-    if (value.endsWith('%')) return clampChannel((parseFloat(value) / 100) * 255);
+    if (value.charAt(value.length - 1) === '%') return clampChannel((parseFloat(value) / 100) * 255);
     const number = Number(value);
     return Number.isFinite(number) ? clampChannel(number) : null;
   };
@@ -298,7 +302,11 @@ function normalizeRgbArgs(args) {
   const green = to255(parts[1]);
   const blue = to255(parts[2]);
   if (red === null || green === null || blue === null) return null;
-  return `#${[red, green, blue].map((n) => n.toString(16).padStart(2, '0')).join('')}`;
+  const hex = (n) => {
+    const text = n.toString(16);
+    return text.length === 1 ? `0${text}` : text;
+  };
+  return `#${hex(red)}${hex(green)}${hex(blue)}`;
 }
 
 /**
@@ -645,12 +653,13 @@ function rgb(color, alpha = 1) {
 }
 
 class FallbackRenderer {
-  constructor(canvas, preset) {
-    this.canvas = canvas;
-    this.preset = preset;
-    this.context = canvas.getContext('2d');
-    this.visible = true;
-  }
+  constructor(canvas, preset) {
+    this.canvas = canvas;
+    this.preset = preset;
+    this.context = canvas.getContext('2d');
+    this.visible = true;
+    this.timePhase = 0;
+  }
 
   resize() {
     const rect = this.canvas.getBoundingClientRect();
@@ -666,7 +675,7 @@ class FallbackRenderer {
   drawNebula(time) {
     const ctx = this.context;
     const { width, height } = this.canvas;
-    const t = time * (this.preset.speed || 1);
+    const t = (time + this.timePhase) * (this.preset.speed || 1);
     const phase = (this.preset.seed || 0) * 0.7;
     const gradient = ctx.createLinearGradient(0, 0, width, height);
     gradient.addColorStop(0, this.preset.colors[0]);
@@ -701,7 +710,10 @@ class FallbackRenderer {
   }
 
   randomize() {
-    if (this.preset) this.preset.seed = Math.random() * 100;
+    if (this.preset) {
+      this.preset.seed = Math.random() * 100;
+      this.timePhase = Math.random() * Math.PI * 2;
+    }
   }
   setMouseColor() {}
   dispose() {}
@@ -1035,9 +1047,9 @@ function createColorBackground(host, options = {}) {
       renderer.dispose();
       layer.remove();
     },
-    opacity: merged.opacity,
-    fallbackColor: merged.fallbackColor,
-    mouseColor: merged.mouseColor,
+    get opacity() { return merged.opacity; },
+    get fallbackColor() { return merged.fallbackColor; },
+    get mouseColor() { return merged.mouseColor; },
     dirty
   };
 }