@5even7/dlc-ui 0.2.4 → 0.2.6

package/dist/vue2.mjs

@@ -1049,10 +1049,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();
   };
@@ -1151,10 +1150,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) {
@@ -1169,6 +1165,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); // 非法尺寸直接抛错前先校验，避免污染内部状态
@@ -1968,6 +1969,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();
@@ -2462,16 +2468,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();
@@ -2627,6 +2632,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;
@@ -2951,15 +2960,13 @@ function makeWrapper({ name, props, events, create, render, methods, watch }) {
       const root = this.controller.element;
       const textLayer = root.querySelector('.hj-capsule-text, .hj-progress-text');
       const visualLayer = root.querySelector('.hj-capsule-visual, .hj-progress-visual');
+      const move = (wrapper, layer) => {
+        if (!wrapper || !layer) return;
+        for (const node of Array.from(wrapper.childNodes)) layer.appendChild(node);
+      };
       const refs = this.$refs || {};
-      // 把插槽容器整体搬进对应区域，而不是搬子节点：Vue 重渲染/重建组件时
-      // 内容始终留在区域内，不会丢（子节点搬运会在 recreate 时序下丢失）。
-      if (refs.slotText && textLayer && refs.slotText.parentElement !== textLayer) {
-        textLayer.appendChild(refs.slotText);
-      }
-      if (refs.slotColor && visualLayer && refs.slotColor.parentElement !== visualLayer) {
-        visualLayer.appendChild(refs.slotColor);
-      }
+      move(refs.slotText, textLayer);
+      move(refs.slotColor, visualLayer);
     },
     applyAttrs() {
       if (!this.controller || !this.controller.element || !this.$attrs) return;
@@ -3056,8 +3063,8 @@ function makeCapsuleWrapper(createCapsule, render) {
       label(value) {
         if (this.controller) this.controller.setLabel(value);
       },
-      mouseColor() {
-        this.scheduleRecreate();
+      mouseColor(value) {
+        if (this.controller) this.controller.setMouseColor(value);
       },
       renderer() {
         this.scheduleRecreate();
@@ -3117,8 +3124,8 @@ function makeProgressWrapper(createProgressCapsule, render) {
       valueSuffix(value) {
         if (value !== undefined && this.controller) this.controller.setValueSuffix(value);
       },
-      showValue() {
-        this.scheduleRecreate();
+      showValue(value) {
+        if (this.controller) this.controller.setShowValue(value);
       },
       disabled() {
         this.scheduleRecreate();

package/dist/vue3.cjs

@@ -1219,8 +1219,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();
   };
@@ -1344,8 +1345,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) {
@@ -1363,6 +1363,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); // 非法尺寸直接抛错前先校验，避免污染内部状态
@@ -1995,6 +2000,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() {
@@ -2519,15 +2530,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();
@@ -2700,6 +2710,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) {
@@ -3045,21 +3059,22 @@ function makeWrapper(_ref) {
       var root = this.controller.element;
       var textLayer = root.querySelector('.hj-capsule-text, .hj-progress-text');
       var visualLayer = root.querySelector('.hj-capsule-visual, .hj-progress-visual');
+      var move = function move(wrapper, layer) {
+        if (!wrapper || !layer) return;
+        for (var _i = 0, _Array$from = Array.from(wrapper.childNodes); _i < _Array$from.length; _i++) {
+          var node = _Array$from[_i];
+          layer.appendChild(node);
+        }
+      };
       var refs = this.$refs || {};
-      // 把插槽容器整体搬进对应区域，而不是搬子节点：Vue 重渲染/重建组件时
-      // 内容始终留在区域内，不会丢（子节点搬运会在 recreate 时序下丢失）。
-      if (refs.slotText && textLayer && refs.slotText.parentElement !== textLayer) {
-        textLayer.appendChild(refs.slotText);
-      }
-      if (refs.slotColor && visualLayer && refs.slotColor.parentElement !== visualLayer) {
-        visualLayer.appendChild(refs.slotColor);
-      }
+      move(refs.slotText, textLayer);
+      move(refs.slotColor, visualLayer);
     },
     applyAttrs: function applyAttrs() {
       if (!this.controller || !this.controller.element || !this.$attrs) return;
       var root = this.controller.element;
-      for (var _i = 0, _Object$keys = Object.keys(this.$attrs); _i < _Object$keys.length; _i++) {
-        var key = _Object$keys[_i];
+      for (var _i2 = 0, _Object$keys = Object.keys(this.$attrs); _i2 < _Object$keys.length; _i2++) {
+        var key = _Object$keys[_i2];
         if (key === 'class' || key === 'style') continue;
         var value = this.$attrs[key];
         if (value == null || value === false) root.removeAttribute(key);else root.setAttribute(key, String(value));
@@ -3154,8 +3169,8 @@ function makeCapsuleWrapper(createCapsule, render) {
       label: function label(value) {
         if (this.controller) this.controller.setLabel(value);
       },
-      mouseColor: function mouseColor() {
-        this.scheduleRecreate();
+      mouseColor: function mouseColor(value) {
+        if (this.controller) this.controller.setMouseColor(value);
       },
       renderer: function renderer() {
         this.scheduleRecreate();
@@ -3236,8 +3251,8 @@ function makeProgressWrapper(createProgressCapsule, render) {
       valueSuffix: function valueSuffix(value) {
         if (value !== undefined && this.controller) this.controller.setValueSuffix(value);
       },
-      showValue: function showValue() {
-        this.scheduleRecreate();
+      showValue: function showValue(value) {
+        if (this.controller) this.controller.setShowValue(value);
       },
       disabled: function disabled() {
         this.scheduleRecreate();

package/dist/vue3.mjs

@@ -1051,10 +1051,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();
   };
@@ -1153,10 +1152,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) {
@@ -1171,6 +1167,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); // 非法尺寸直接抛错前先校验，避免污染内部状态
@@ -1970,6 +1971,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();
@@ -2464,16 +2470,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();
@@ -2629,6 +2634,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;
@@ -2953,15 +2962,13 @@ function makeWrapper({ name, props, events, create, render, methods, watch }) {
       const root = this.controller.element;
       const textLayer = root.querySelector('.hj-capsule-text, .hj-progress-text');
       const visualLayer = root.querySelector('.hj-capsule-visual, .hj-progress-visual');
+      const move = (wrapper, layer) => {
+        if (!wrapper || !layer) return;
+        for (const node of Array.from(wrapper.childNodes)) layer.appendChild(node);
+      };
       const refs = this.$refs || {};
-      // 把插槽容器整体搬进对应区域，而不是搬子节点：Vue 重渲染/重建组件时
-      // 内容始终留在区域内，不会丢（子节点搬运会在 recreate 时序下丢失）。
-      if (refs.slotText && textLayer && refs.slotText.parentElement !== textLayer) {
-        textLayer.appendChild(refs.slotText);
-      }
-      if (refs.slotColor && visualLayer && refs.slotColor.parentElement !== visualLayer) {
-        visualLayer.appendChild(refs.slotColor);
-      }
+      move(refs.slotText, textLayer);
+      move(refs.slotColor, visualLayer);
     },
     applyAttrs() {
       if (!this.controller || !this.controller.element || !this.$attrs) return;
@@ -3058,8 +3065,8 @@ function makeCapsuleWrapper(createCapsule, render) {
       label(value) {
         if (this.controller) this.controller.setLabel(value);
       },
-      mouseColor() {
-        this.scheduleRecreate();
+      mouseColor(value) {
+        if (this.controller) this.controller.setMouseColor(value);
       },
       renderer() {
         this.scheduleRecreate();
@@ -3119,8 +3126,8 @@ function makeProgressWrapper(createProgressCapsule, render) {
       valueSuffix(value) {
         if (value !== undefined && this.controller) this.controller.setValueSuffix(value);
       },
-      showValue() {
-        this.scheduleRecreate();
+      showValue(value) {
+        if (this.controller) this.controller.setShowValue(value);
       },
       disabled() {
         this.scheduleRecreate();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@5even7/dlc-ui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "publishConfig": {
     "access": "public"
   },