@5even7/dlc-ui 0.2.5 → 0.2.7

package/dist/vue2.mjs

@@ -1165,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); // 非法尺寸直接抛错前先校验，避免污染内部状态
@@ -1964,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();
@@ -2458,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();
@@ -2623,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;
@@ -2947,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;
@@ -3020,9 +3031,9 @@ function makeWrapper({ name, props, events, create, render, methods, watch }) {
   };
 }
 
-function makeCapsuleWrapper(createCapsule, render) {
-  return makeWrapper({
-    name: 'CosmicCapsule',
+function makeCapsuleWrapper(createCapsule, render) {
+  return makeWrapper({
+    name: 'dlc-capsule',
     props: [
       'preset', 'width', 'height', 'colors', 'seed', 'speed',
       'textRatio', 'label', 'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'cssVars'
@@ -3052,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();
@@ -3078,8 +3089,8 @@ function makeCapsuleWrapper(createCapsule, render) {
 }
 
 function makeProgressWrapper(createProgressCapsule, render) {
-  return makeWrapper({
-    name: 'ProgressCapsule',
+  return makeWrapper({
+    name: 'dlc-progress',
     props: [
       'preset', 'width', 'height', 'value', 'min', 'max',
       'draggable', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix',
@@ -3113,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();
@@ -3153,7 +3164,7 @@ function makeProgressWrapper(createProgressCapsule, render) {
 
 function makeColorWrapper(createColorBackground, render) {
   return makeWrapper({
-    name: 'ColorBackground',
+    name: 'dlc-color',
     props: [
       'preset', 'colors', 'seed', 'speed', 'quality', 'renderer',
       'mouseColor', 'respectReducedMotion', 'opacity', 'fallbackColor'
@@ -3218,14 +3229,22 @@ const renderColor = function renderColor(h) {
   return h('div', { class: 'hj-vue-host' }, this.$slots.default);
 };
 
-const CosmicCapsule = makeCapsuleWrapper(createCapsule, render);
-const ProgressCapsule = makeProgressWrapper(createProgressCapsule, render);
-const ColorBackground = makeColorWrapper(createColorBackground, renderColor);
+const DlcCapsule = makeCapsuleWrapper(createCapsule, render);
+const DlcProgress = makeProgressWrapper(createProgressCapsule, render);
+const DlcColor = makeColorWrapper(createColorBackground, renderColor);
+
+// 旧名兼容别名（deprecated）
+const CosmicCapsule = DlcCapsule;
+const ProgressCapsule = DlcProgress;
+const ColorBackground = DlcColor;
 
 var vue2 = {
+  'dlc-capsule': DlcCapsule,
+  'dlc-progress': DlcProgress,
+  'dlc-color': DlcColor,
   CosmicCapsule,
   ProgressCapsule,
   ColorBackground
 };
 
-export { ColorBackground, CosmicCapsule, ProgressCapsule, vue2 as default };
+export { ColorBackground, CosmicCapsule, DlcCapsule, DlcColor, DlcProgress, ProgressCapsule, vue2 as default, DlcCapsule as "dlc-capsule", DlcColor as "dlc-color", DlcProgress as "dlc-progress" };

package/dist/vue3.cjs

@@ -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));
@@ -3127,7 +3142,7 @@ function makeWrapper(_ref) {
 }
 function makeCapsuleWrapper(createCapsule, render) {
   return makeWrapper({
-    name: 'CosmicCapsule',
+    name: 'dlc-capsule',
     props: ['preset', 'width', 'height', 'colors', 'seed', 'speed', 'textRatio', 'label', 'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'cssVars'],
     events: CAPSULE_EVENTS,
     create: createCapsule,
@@ -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();
@@ -3206,7 +3221,7 @@ function makeCapsuleWrapper(createCapsule, render) {
 }
 function makeProgressWrapper(createProgressCapsule, render) {
   return makeWrapper({
-    name: 'ProgressCapsule',
+    name: 'dlc-progress',
     props: ['preset', 'width', 'height', 'value', 'min', 'max', 'draggable', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix', 'quality', 'renderer', 'respectReducedMotion', 'cssVars'],
     events: PROGRESS_EVENTS,
     create: createProgressCapsule,
@@ -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();
@@ -3309,7 +3324,7 @@ function makeProgressWrapper(createProgressCapsule, render) {
 }
 function makeColorWrapper(createColorBackground, render) {
   return makeWrapper({
-    name: 'ColorBackground',
+    name: 'dlc-color',
     props: ['preset', 'colors', 'seed', 'speed', 'quality', 'renderer', 'mouseColor', 'respectReducedMotion', 'opacity', 'fallbackColor'],
     events: COLOR_EVENTS,
     create: createColorBackground,
@@ -3401,10 +3416,21 @@ var renderColor = function renderColor() {
     class: 'hj-vue-host'
   }, this.$slots.default ? this.$slots.default() : []);
 };
-var CosmicCapsule = makeCapsuleWrapper(createCapsule, render);
-var ProgressCapsule = makeProgressWrapper(createProgressCapsule, render);
-var ColorBackground = makeColorWrapper(createColorBackground, renderColor);
+var DlcCapsule = makeCapsuleWrapper(createCapsule, render);
+var DlcProgress = makeProgressWrapper(createProgressCapsule, render);
+var DlcColor = makeColorWrapper(createColorBackground, renderColor);
+
+// 旧名兼容别名（deprecated）
+var CosmicCapsule = DlcCapsule;
+var ProgressCapsule = DlcProgress;
+var ColorBackground = DlcColor;
 
 exports.ColorBackground = ColorBackground;
 exports.CosmicCapsule = CosmicCapsule;
+exports.DlcCapsule = DlcCapsule;
+exports.DlcColor = DlcColor;
+exports.DlcProgress = DlcProgress;
 exports.ProgressCapsule = ProgressCapsule;
+exports["dlc-capsule"] = DlcCapsule;
+exports["dlc-color"] = DlcColor;
+exports["dlc-progress"] = DlcProgress;

package/dist/vue3.mjs

@@ -1167,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); // 非法尺寸直接抛错前先校验，避免污染内部状态
@@ -1966,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();
@@ -2460,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();
@@ -2625,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;
@@ -2949,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;
@@ -3022,9 +3033,9 @@ function makeWrapper({ name, props, events, create, render, methods, watch }) {
   };
 }
 
-function makeCapsuleWrapper(createCapsule, render) {
-  return makeWrapper({
-    name: 'CosmicCapsule',
+function makeCapsuleWrapper(createCapsule, render) {
+  return makeWrapper({
+    name: 'dlc-capsule',
     props: [
       'preset', 'width', 'height', 'colors', 'seed', 'speed',
       'textRatio', 'label', 'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'cssVars'
@@ -3054,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();
@@ -3080,8 +3091,8 @@ function makeCapsuleWrapper(createCapsule, render) {
 }
 
 function makeProgressWrapper(createProgressCapsule, render) {
-  return makeWrapper({
-    name: 'ProgressCapsule',
+  return makeWrapper({
+    name: 'dlc-progress',
     props: [
       'preset', 'width', 'height', 'value', 'min', 'max',
       'draggable', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix',
@@ -3115,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();
@@ -3155,7 +3166,7 @@ function makeProgressWrapper(createProgressCapsule, render) {
 
 function makeColorWrapper(createColorBackground, render) {
   return makeWrapper({
-    name: 'ColorBackground',
+    name: 'dlc-color',
     props: [
       'preset', 'colors', 'seed', 'speed', 'quality', 'renderer',
       'mouseColor', 'respectReducedMotion', 'opacity', 'fallbackColor'
@@ -3220,14 +3231,22 @@ const renderColor = function renderColor() {
   return h('div', { class: 'hj-vue-host' }, this.$slots.default ? this.$slots.default() : []);
 };
 
-const CosmicCapsule = makeCapsuleWrapper(createCapsule, render);
-const ProgressCapsule = makeProgressWrapper(createProgressCapsule, render);
-const ColorBackground = makeColorWrapper(createColorBackground, renderColor);
+const DlcCapsule = makeCapsuleWrapper(createCapsule, render);
+const DlcProgress = makeProgressWrapper(createProgressCapsule, render);
+const DlcColor = makeColorWrapper(createColorBackground, renderColor);
+
+// 旧名兼容别名（deprecated）
+const CosmicCapsule = DlcCapsule;
+const ProgressCapsule = DlcProgress;
+const ColorBackground = DlcColor;
 
 var vue3 = {
+  'dlc-capsule': DlcCapsule,
+  'dlc-progress': DlcProgress,
+  'dlc-color': DlcColor,
   CosmicCapsule,
   ProgressCapsule,
   ColorBackground
 };
 
-export { ColorBackground, CosmicCapsule, ProgressCapsule, vue3 as default };
+export { ColorBackground, CosmicCapsule, DlcCapsule, DlcColor, DlcProgress, ProgressCapsule, vue3 as default, DlcCapsule as "dlc-capsule", DlcColor as "dlc-color", DlcProgress as "dlc-progress" };

package/package.json

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

package/types/vue2.d.ts

@@ -1 +1,9 @@
-export { CosmicCapsule, ProgressCapsule, default } from './vue3.js';
+export {
+  DlcCapsule as 'dlc-capsule',
+  DlcProgress as 'dlc-progress',
+  DlcColor as 'dlc-color',
+  CosmicCapsule,
+  ProgressCapsule,
+  ColorBackground,
+  default
+} from './vue3.js';

package/types/vue3.d.ts

@@ -75,10 +75,19 @@ export interface ColorBackgroundComponent {
   };
 }
 
+export declare const DlcCapsule: CosmicCapsuleComponent;
+export declare const DlcProgress: ProgressCapsuleComponent;
+export declare const DlcColor: ColorBackgroundComponent;
+export { DlcCapsule as 'dlc-capsule', DlcProgress as 'dlc-progress', DlcColor as 'dlc-color' };
+
+// 旧名兼容别名（deprecated）
 export declare const CosmicCapsule: CosmicCapsuleComponent;
 export declare const ProgressCapsule: ProgressCapsuleComponent;
 export declare const ColorBackground: ColorBackgroundComponent;
 declare const _default: {
+  'dlc-capsule': CosmicCapsuleComponent;
+  'dlc-progress': ProgressCapsuleComponent;
+  'dlc-color': ColorBackgroundComponent;
   CosmicCapsule: CosmicCapsuleComponent;
   ProgressCapsule: ProgressCapsuleComponent;
   ColorBackground: ColorBackgroundComponent;