@5even7/dlc-ui 0.2.2 → 0.2.4

package/dist/vue3.cjs

@@ -418,9 +418,13 @@ function getPreset(kind, ref) {
   var list = kind === 'capsule' ? CAPSULE_PRESETS : kind === 'progress' ? PROGRESS_PRESETS : null;
   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;
 }
@@ -441,8 +445,8 @@ var DEFAULTS = {
     min: 0,
     max: 100,
     draggable: true,
-    keyboard: true,
     disabled: false,
+    readonly: false,
     valueSuffix: '%',
     edgeStyle: 'flow',
     quality: 'auto',
@@ -631,7 +635,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;
   };
@@ -639,9 +643,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));
 }
 
 /**
@@ -906,6 +912,7 @@ var FallbackRenderer = /*#__PURE__*/function () {
     this.preset = preset;
     this.context = canvas.getContext('2d');
     this.visible = true;
+    this.timePhase = 0;
   }
   return _createClass(FallbackRenderer, [{
     key: "resize",
@@ -926,7 +933,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]);
@@ -963,7 +970,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",
@@ -1209,6 +1219,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();
   };
@@ -1332,6 +1344,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) {
@@ -1350,8 +1364,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;
     },
@@ -1380,8 +1400,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
   };
 }
@@ -1677,8 +1701,12 @@ function drawCloud(context, x, y, radiusX, radiusY, color, alpha) {
   context.translate(x, y);
   context.scale(1, radiusY / radiusX);
   var gradient = context.createRadialGradient(0, 0, 0, 0, 0, radiusX);
-  gradient.addColorStop(0, "".concat(color).concat(Math.round(alpha * 255).toString(16).padStart(2, '0')));
-  gradient.addColorStop(0.46, "".concat(color).concat(Math.round(alpha * 0.42 * 255).toString(16).padStart(2, '0')));
+  var alphaHex = function alphaHex(value) {
+    var text = Math.round(value).toString(16);
+    return text.length === 1 ? "0".concat(text) : text;
+  };
+  gradient.addColorStop(0, "".concat(color).concat(alphaHex(alpha * 255)));
+  gradient.addColorStop(0.46, "".concat(color).concat(alphaHex(alpha * 0.42 * 255)));
   gradient.addColorStop(1, "".concat(color, "00"));
   context.fillStyle = gradient;
   context.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
@@ -2128,6 +2156,11 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
   }, {
     key: "setRange",
     value: function setRange(min, max) {
+      if (min > max) {
+        var swap = min;
+        min = max;
+        max = swap;
+      }
       this.min = min;
       this.max = max;
       var clamped = clamp(this.value, this.min, this.max);
@@ -2263,6 +2296,14 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
     value: function beginDrag(event) {
       if (event.button !== undefined && event.button !== 0) return;
       event.preventDefault();
+      // preventDefault 会吞掉点击聚焦，主动聚焦让键盘方向键立即可用。
+      try {
+        this.root.focus({
+          preventScroll: true
+        });
+      } catch (_unused) {
+        this.root.focus();
+      }
       this.dragging = true;
       this.pendingPointer = null;
       this._dragRaf = 0;
@@ -2270,7 +2311,7 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
       try {
         var _this$root$setPointer, _this$root;
         (_this$root$setPointer = (_this$root = this.root).setPointerCapture) === null || _this$root$setPointer === void 0 || _this$root$setPointer.call(_this$root, event.pointerId);
-      } catch (_unused) {}
+      } catch (_unused2) {}
       this.emitter.emit('dragstart', {
         value: this.value
       });
@@ -2310,7 +2351,7 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
         if ((event === null || event === void 0 ? void 0 : event.pointerId) !== undefined && (_this$root$hasPointer = (_this$root2 = this.root).hasPointerCapture) !== null && _this$root$hasPointer !== void 0 && _this$root$hasPointer.call(_this$root2, event.pointerId)) {
           this.root.releasePointerCapture(event.pointerId);
         }
-      } catch (_unused2) {}
+      } catch (_unused3) {}
       this.emitter.emit('dragend', {
         value: this.value
       });
@@ -2337,32 +2378,6 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
         this.root.addEventListener('pointerup', this.handlers.pointerup);
         this.root.addEventListener('pointercancel', this.handlers.pointercancel);
       }
-      if (this.options.keyboard !== false) {
-        this.handlers.keydown = function (event) {
-          var step = (_this3.max - _this3.min) * 0.02;
-          var actions = {
-            ArrowLeft: -step,
-            ArrowDown: -step,
-            ArrowRight: step,
-            ArrowUp: step,
-            PageDown: -step * 5,
-            PageUp: step * 5
-          };
-          if (event.key === 'Home') {
-            event.preventDefault();
-            _this3.setProgress(_this3.min, 'keyboard');
-          } else if (event.key === 'End') {
-            event.preventDefault();
-            _this3.setProgress(_this3.max, 'keyboard');
-          } else if (actions[event.key]) {
-            event.preventDefault();
-            _this3.setProgress(_this3.value + actions[event.key], 'keyboard');
-          } else {
-            return;
-          }
-        };
-        this.root.addEventListener('keydown', this.handlers.keydown);
-      }
     }
   }, {
     key: "update",
@@ -2409,7 +2424,7 @@ var ProgressCapsuleController = /*#__PURE__*/function () {
  * Mount a fluid progress capsule into `container`.
  *
  * Options: preset (id/code/name or object), width, height, value, min, max,
- * draggable, keyboard, colors, edgeStyle, textRatio (0-100, text region
+ * draggable, colors, edgeStyle, textRatio (0-100, text region
  * width in percent), text (HTML string or DOM nodes for the text slot),
  * colorContent (HTML string or DOM nodes for the color slot),
  * showValue (show/hide the right-side percentage), quality,
@@ -2423,6 +2438,11 @@ function createProgressCapsule(container) {
   }
   var preset = _objectSpread2({}, getPreset('progress', (_options$preset = options.preset) !== null && _options$preset !== void 0 ? _options$preset : '星火'));
   var merged = normalizeOptions(DEFAULTS.progress, preset, options);
+  if (merged.min > merged.max) {
+    var swap = merged.min;
+    merged.min = merged.max;
+    merged.max = swap;
+  }
   var normalizedColors = merged.colors.map(normalizeColor);
   if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
   preset.edgeStyle = merged.edgeStyle;
@@ -2431,8 +2451,9 @@ function createProgressCapsule(container) {
   // Vue 的裸布尔属性（<ProgressCapsule disabled />）会传成空字符串，
   // 这里统一按 true 处理。
   var disabled = merged.disabled === true || merged.disabled === '' || merged.disabled === 'true';
-  var effectiveDraggable = disabled ? false : merged.draggable !== false;
-  var effectiveKeyboard = disabled ? false : merged.keyboard !== false;
+  var readonly = merged.readonly === true || merged.readonly === '' || merged.readonly === 'true';
+  var locked = disabled || readonly;
+  var effectiveDraggable = locked ? false : merged.draggable !== false;
   var dirty = {
     preset: false,
     colors: false,
@@ -2444,12 +2465,16 @@ function createProgressCapsule(container) {
   var root = document.createElement('div');
   root.className = 'hj-capsule-root hj-progress-root';
   root.setAttribute('role', 'slider');
-  root.setAttribute('tabindex', '0');
   root.setAttribute('data-draggable', String(effectiveDraggable));
   if (disabled) {
     root.setAttribute('aria-disabled', 'true');
     root.classList.add('is-disabled');
   }
+  if (readonly) {
+    root.setAttribute('aria-readonly', 'true');
+    root.classList.add('is-readonly');
+  }
+  if (locked) root.setAttribute('tabindex', '-1');
   root.setAttribute('aria-valuemin', String((_merged$min = merged.min) !== null && _merged$min !== void 0 ? _merged$min : 0));
   root.setAttribute('aria-valuemax', String((_merged$max = merged.max) !== null && _merged$max !== void 0 ? _merged$max : 100));
   root.setAttribute('aria-valuenow', String(preset.initialProgress));
@@ -2461,7 +2486,6 @@ function createProgressCapsule(container) {
     }));
   };
   updateAria();
-  if (!effectiveKeyboard) root.setAttribute('tabindex', '-1');
   var canvas = document.createElement('canvas');
   canvas.className = 'hj-progress-canvas';
   canvas.setAttribute('aria-hidden', 'true');
@@ -2528,8 +2552,7 @@ function createProgressCapsule(container) {
     preset: preset,
     emitter: emitter,
     options: _objectSpread2(_objectSpread2({}, merged), {}, {
-      draggable: effectiveDraggable,
-      keyboard: effectiveKeyboard
+      draggable: effectiveDraggable
     }),
     copy: copy,
     dirty: dirty
@@ -2689,8 +2712,14 @@ function createProgressCapsule(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();
       controller.resizeCanvas();
       return this;
@@ -2721,8 +2750,12 @@ function createProgressCapsule(container) {
       controller.dispose();
       root.remove();
     },
-    textRatio: merged.textRatio,
-    cssVars: merged.cssVars,
+    get textRatio() {
+      return merged.textRatio;
+    },
+    get cssVars() {
+      return merged.cssVars;
+    },
     dirty: dirty
   };
 }
@@ -2927,9 +2960,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
   };
 }
@@ -2982,17 +3021,23 @@ function makeWrapper(_ref) {
       this.applyAttrs();
     },
     recreate: function recreate() {
+      var _this2 = this;
       var extraState = this.runtimeState();
       if (this.controller) this.controller.dispose();
       this.mountController(extraState);
+      // 结构属性连续变化时，插槽内容可能在重建后才被 Vue 写入容器，
+      // 补一次搬运确保不丢。
+      this.$nextTick(function () {
+        return _this2.moveSlots();
+      });
     },
     scheduleRecreate: function scheduleRecreate() {
-      var _this2 = this;
+      var _this3 = this;
       if (this._recreateQueued) return;
       this._recreateQueued = true;
       this.$nextTick(function () {
-        _this2._recreateQueued = false;
-        _this2.recreate();
+        _this3._recreateQueued = false;
+        _this3.recreate();
       });
     },
     moveSlots: function moveSlots() {
@@ -3000,22 +3045,21 @@ 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 || {};
-      move(refs.slotText, textLayer);
-      move(refs.slotColor, visualLayer);
+      // 把插槽容器整体搬进对应区域，而不是搬子节点：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);
+      }
     },
     applyAttrs: function applyAttrs() {
       if (!this.controller || !this.controller.element || !this.$attrs) return;
       var root = this.controller.element;
-      for (var _i2 = 0, _Object$keys = Object.keys(this.$attrs); _i2 < _Object$keys.length; _i2++) {
-        var key = _Object$keys[_i2];
+      for (var _i = 0, _Object$keys = Object.keys(this.$attrs); _i < _Object$keys.length; _i++) {
+        var key = _Object$keys[_i];
         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));
@@ -3163,7 +3207,7 @@ function makeCapsuleWrapper(createCapsule, render) {
 function makeProgressWrapper(createProgressCapsule, render) {
   return makeWrapper({
     name: 'ProgressCapsule',
-    props: ['preset', 'width', 'height', 'value', 'min', 'max', 'draggable', 'keyboard', 'disabled', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix', 'quality', 'renderer', 'respectReducedMotion', 'cssVars'],
+    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,
     render: render,
@@ -3198,10 +3242,10 @@ function makeProgressWrapper(createProgressCapsule, render) {
       disabled: function disabled() {
         this.scheduleRecreate();
       },
-      draggable: function draggable() {
+      readonly: function readonly() {
         this.scheduleRecreate();
       },
-      keyboard: function keyboard() {
+      draggable: function draggable() {
         this.scheduleRecreate();
       },
       renderer: function renderer() {