@5even7/dlc-ui 0.2.4 → 0.2.6

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 > **发版规则**：默认每次发布只递增补丁号（0.x.y → 0.x.(y+1)，即 +0.01）；除非手动明确指定新版本号，否则不升次版本。
 
+## 0.2.6 - 2026-08-09
+
+- 修复：Vue wrapper 重建组件时因“插槽容器搬移”导致组件树损坏（子组件丢失、mouseColor 开关无效）的问题；插槽改回搬子节点。
+- 胶囊 `mouseColor` 改为热切换（新增控制器 `setMouseColor()`，不再重建组件）；进度条 `showValue` 改为热切换（新增 `setShowValue()`，数字元素始终存在、按需隐藏）。
+
+## 0.2.5 - 2026-08-08
+
+- 修复：胶囊 `textRatio` 小于 164px（历史 `--hj-copy-min-width` 默认）时文字区不跟随缩小的 bug；现在 `textRatio` 是文字区宽度的唯一权威值，0~100 全范围生效。
+
 ## 0.2.4 - 2026-08-08
 
 - 移除 Progress `keyboard` 属性与键盘控制（拖动/受控 value 已覆盖主要场景）。

package/dist/capsule.cjs

@@ -1184,8 +1184,9 @@ 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');
+      // textRatio 是文字区宽度的唯一权威值：min-width 会阻止其缩小到
+      // 164px 以下（--hj-copy-min-width 的历史默认），这里强制归零。
+      root.style.setProperty('--hj-text-min-width', '0');
     }
     renderer.resize();
   };
@@ -1309,8 +1310,7 @@ 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');
+      root.style.setProperty('--hj-text-min-width', '0');
       return this;
     },
     setCssVars: function setCssVars(vars) {
@@ -1328,6 +1328,11 @@ function createCapsule(container) {
       updateAria();
       return this;
     },
+    setMouseColor: function setMouseColor(value) {
+      merged.mouseColor = value !== false;
+      if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
+      return this;
+    },
     setSize: function setSize(width, height) {
       if (width !== undefined) {
         parseSize(width); // 非法尺寸直接抛错前先校验，避免污染内部状态

package/dist/capsule.mjs

@@ -974,10 +974,9 @@ 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');
+      // textRatio 是文字区宽度的唯一权威值：min-width 会阻止其缩小到
+      // 164px 以下（--hj-copy-min-width 的历史默认），这里强制归零。
+      root.style.setProperty('--hj-text-min-width', '0');
     }
     renderer.resize();
   };
@@ -1076,10 +1075,7 @@ 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');
+      root.style.setProperty('--hj-text-min-width', '0');
       return this;
     },
     setCssVars(vars) {
@@ -1094,6 +1090,11 @@ function createCapsule(container, options = {}) {
       updateAria();
       return this;
     },
+    setMouseColor(value) {
+      merged.mouseColor = value !== false;
+      if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
+      return this;
+    },
     setSize(width, height) {
       if (width !== undefined) {
         parseSize(width); // 非法尺寸直接抛错前先校验，避免污染内部状态

package/dist/index.cjs

@@ -1230,8 +1230,9 @@ 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');
+      // textRatio 是文字区宽度的唯一权威值：min-width 会阻止其缩小到
+      // 164px 以下（--hj-copy-min-width 的历史默认），这里强制归零。
+      root.style.setProperty('--hj-text-min-width', '0');
     }
     renderer.resize();
   };
@@ -1355,8 +1356,7 @@ 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');
+      root.style.setProperty('--hj-text-min-width', '0');
       return this;
     },
     setCssVars: function setCssVars(vars) {
@@ -1374,6 +1374,11 @@ function createCapsule(container) {
       updateAria();
       return this;
     },
+    setMouseColor: function setMouseColor(value) {
+      merged.mouseColor = value !== false;
+      if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
+      return this;
+    },
     setSize: function setSize(width, height) {
       if (width !== undefined) {
         parseSize(width); // 非法尺寸直接抛错前先校验，避免污染内部状态
@@ -2006,6 +2011,12 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
       this.root.setAttribute('aria-valuetext', "".concat(rounded).concat(this.valueSuffix));
       return this;
     }
+  }, {
+    key: "setShowValue",
+    value: function setShowValue(show) {
+      if (this.valueElement) this.valueElement.hidden = show === false;
+      return this;
+    }
   }, {
     key: "resizeCanvas",
     value: function resizeCanvas() {
@@ -2530,15 +2541,14 @@ function createProgressCapsule(container) {
   visualLayer.className = 'hj-progress-visual';
   fillContent(textLayer, options.text);
   fillContent(visualLayer, options.colorContent);
-  var valueElement = merged.showValue === false ? null : document.createElement('div');
-  if (valueElement) {
-    valueElement.className = 'hj-progress-value';
-    valueElement.setAttribute('aria-hidden', 'true');
-  }
+  var valueElement = document.createElement('div');
+  valueElement.className = 'hj-progress-value';
+  valueElement.setAttribute('aria-hidden', 'true');
+  valueElement.hidden = merged.showValue === false;
   root.appendChild(canvas);
   root.appendChild(textLayer);
   root.appendChild(visualLayer);
-  if (valueElement) root.appendChild(valueElement);
+  root.appendChild(valueElement);
   container.appendChild(root);
   var emitter = createEmitter();
   var paused = merged.respectReducedMotion && prefersReducedMotion$1();
@@ -2711,6 +2721,10 @@ function createProgressCapsule(container) {
       controller.setValueSuffix(suffix);
       return this;
     },
+    setShowValue: function setShowValue(show) {
+      controller.setShowValue(show);
+      return this;
+    },
     setColors: function setColors(colors) {
       var next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
       if (next.length !== 4 || next.some(function (color) {

package/dist/index.mjs

@@ -1065,10 +1065,9 @@ 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');
+      // textRatio 是文字区宽度的唯一权威值：min-width 会阻止其缩小到
+      // 164px 以下（--hj-copy-min-width 的历史默认），这里强制归零。
+      root.style.setProperty('--hj-text-min-width', '0');
     }
     renderer.resize();
   };
@@ -1167,10 +1166,7 @@ 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');
+      root.style.setProperty('--hj-text-min-width', '0');
       return this;
     },
     setCssVars(vars) {
@@ -1185,6 +1181,11 @@ function createCapsule(container, options = {}) {
       updateAria();
       return this;
     },
+    setMouseColor(value) {
+      merged.mouseColor = value !== false;
+      if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
+      return this;
+    },
     setSize(width, height) {
       if (width !== undefined) {
         parseSize(width); // 非法尺寸直接抛错前先校验，避免污染内部状态
@@ -1984,6 +1985,11 @@ class ProgressCapsuleController {
     this.root.setAttribute('aria-valuetext', `${rounded}${this.valueSuffix}`);
     return this;
   }
+
+  setShowValue(show) {
+    if (this.valueElement) this.valueElement.hidden = show === false;
+    return this;
+  }
 
   resizeCanvas() {
     const bounds = this.root.getBoundingClientRect();
@@ -2478,16 +2484,15 @@ function createProgressCapsule(container, options = {}) {
   fillContent(textLayer, options.text);
   fillContent(visualLayer, options.colorContent);
 
-  const valueElement = merged.showValue === false ? null : document.createElement('div');
-  if (valueElement) {
-    valueElement.className = 'hj-progress-value';
-    valueElement.setAttribute('aria-hidden', 'true');
-  }
+  const valueElement = document.createElement('div');
+  valueElement.className = 'hj-progress-value';
+  valueElement.setAttribute('aria-hidden', 'true');
+  valueElement.hidden = merged.showValue === false;
 
   root.appendChild(canvas);
   root.appendChild(textLayer);
   root.appendChild(visualLayer);
-  if (valueElement) root.appendChild(valueElement);
+  root.appendChild(valueElement);
   container.appendChild(root);
 
   const emitter = createEmitter();
@@ -2643,6 +2648,10 @@ function createProgressCapsule(container, options = {}) {
       controller.setValueSuffix(suffix);
       return this;
     },
+    setShowValue(show) {
+      controller.setShowValue(show);
+      return this;
+    },
     setColors(colors) {
       const next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
       if (next.length !== 4 || next.some((color) => !color)) return this;

package/dist/index.umd.js

@@ -1234,8 +1234,9 @@
       }
       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');
+        // textRatio 是文字区宽度的唯一权威值：min-width 会阻止其缩小到
+        // 164px 以下（--hj-copy-min-width 的历史默认），这里强制归零。
+        root.style.setProperty('--hj-text-min-width', '0');
       }
       renderer.resize();
     };
@@ -1359,8 +1360,7 @@
         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');
+        root.style.setProperty('--hj-text-min-width', '0');
         return this;
       },
       setCssVars: function setCssVars(vars) {
@@ -1378,6 +1378,11 @@
         updateAria();
         return this;
       },
+      setMouseColor: function setMouseColor(value) {
+        merged.mouseColor = value !== false;
+        if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
+        return this;
+      },
       setSize: function setSize(width, height) {
         if (width !== undefined) {
           parseSize(width); // 非法尺寸直接抛错前先校验，避免污染内部状态
@@ -2010,6 +2015,12 @@
         this.root.setAttribute('aria-valuetext', "".concat(rounded).concat(this.valueSuffix));
         return this;
       }
+    }, {
+      key: "setShowValue",
+      value: function setShowValue(show) {
+        if (this.valueElement) this.valueElement.hidden = show === false;
+        return this;
+      }
     }, {
       key: "resizeCanvas",
       value: function resizeCanvas() {
@@ -2534,15 +2545,14 @@
     visualLayer.className = 'hj-progress-visual';
     fillContent(textLayer, options.text);
     fillContent(visualLayer, options.colorContent);
-    var valueElement = merged.showValue === false ? null : document.createElement('div');
-    if (valueElement) {
-      valueElement.className = 'hj-progress-value';
-      valueElement.setAttribute('aria-hidden', 'true');
-    }
+    var valueElement = document.createElement('div');
+    valueElement.className = 'hj-progress-value';
+    valueElement.setAttribute('aria-hidden', 'true');
+    valueElement.hidden = merged.showValue === false;
     root.appendChild(canvas);
     root.appendChild(textLayer);
     root.appendChild(visualLayer);
-    if (valueElement) root.appendChild(valueElement);
+    root.appendChild(valueElement);
     container.appendChild(root);
     var emitter = createEmitter();
     var paused = merged.respectReducedMotion && prefersReducedMotion$1();
@@ -2715,6 +2725,10 @@
         controller.setValueSuffix(suffix);
         return this;
       },
+      setShowValue: function setShowValue(show) {
+        controller.setShowValue(show);
+        return this;
+      },
       setColors: function setColors(colors) {
         var next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
         if (next.length !== 4 || next.some(function (color) {