@5even7/dlc-ui 0.2.2 → 0.2.4

package/dist/index.umd.js

@@ -421,9 +421,13 @@
     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;
   }
@@ -444,8 +448,8 @@
       min: 0,
       max: 100,
       draggable: true,
-      keyboard: true,
       disabled: false,
+      readonly: false,
       valueSuffix: '%',
       edgeStyle: 'flow',
       quality: 'auto',
@@ -634,7 +638,7 @@
     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;
     };
@@ -642,9 +646,11 @@
     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));
   }
 
   /**
@@ -914,6 +920,7 @@
       this.preset = preset;
       this.context = canvas.getContext('2d');
       this.visible = true;
+      this.timePhase = 0;
     }
     return _createClass(FallbackRenderer, [{
       key: "resize",
@@ -934,7 +941,7 @@
         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]);
@@ -971,7 +978,10 @@
     }, {
       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,6 +1234,8 @@
       }
       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();
     };
@@ -1347,6 +1359,8 @@
         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) {
@@ -1365,8 +1379,14 @@
         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;
       },
@@ -1395,8 +1415,12 @@
         renderer.dispose();
         root.remove();
       },
-      textRatio: merged.textRatio,
-      cssVars: merged.cssVars,
+      get textRatio() {
+        return merged.textRatio;
+      },
+      get cssVars() {
+        return merged.cssVars;
+      },
       dirty: dirty
     };
   }
@@ -1692,8 +1716,12 @@
     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);
@@ -2143,6 +2171,11 @@
     }, {
       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);
@@ -2278,6 +2311,14 @@
       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;
@@ -2285,7 +2326,7 @@
         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
         });
@@ -2325,7 +2366,7 @@
           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
         });
@@ -2352,32 +2393,6 @@
           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",
@@ -2424,7 +2439,7 @@
    * 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,
@@ -2438,6 +2453,11 @@
     }
     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;
@@ -2446,8 +2466,9 @@
     // 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,
@@ -2459,12 +2480,16 @@
     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));
@@ -2476,7 +2501,6 @@
       }));
     };
     updateAria();
-    if (!effectiveKeyboard) root.setAttribute('tabindex', '-1');
     var canvas = document.createElement('canvas');
     canvas.className = 'hj-progress-canvas';
     canvas.setAttribute('aria-hidden', 'true');
@@ -2543,8 +2567,7 @@
       preset: preset,
       emitter: emitter,
       options: _objectSpread2(_objectSpread2({}, merged), {}, {
-        draggable: effectiveDraggable,
-        keyboard: effectiveKeyboard
+        draggable: effectiveDraggable
       }),
       copy: copy,
       dirty: dirty
@@ -2704,8 +2727,14 @@
         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;
@@ -2736,8 +2765,12 @@
         controller.dispose();
         root.remove();
       },
-      textRatio: merged.textRatio,
-      cssVars: merged.cssVars,
+      get textRatio() {
+        return merged.textRatio;
+      },
+      get cssVars() {
+        return merged.cssVars;
+      },
       dirty: dirty
     };
   }
@@ -2942,9 +2975,15 @@
         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
     };
   }