@5even7/dlc-ui 0.2.3 → 0.2.4

package/dist/progress.cjs

@@ -403,9 +403,13 @@ function getPreset(kind, ref) {
   var list = PROGRESS_PRESETS ;
   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;
 }
@@ -417,7 +421,6 @@ var DEFAULTS = {
     min: 0,
     max: 100,
     draggable: true,
-    keyboard: true,
     disabled: false,
     readonly: false,
     valueSuffix: '%',
@@ -608,7 +611,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;
   };
@@ -616,9 +619,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));
 }
 
 /**
@@ -1050,8 +1055,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);
@@ -1517,6 +1526,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);
@@ -1734,32 +1748,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",
@@ -1806,7 +1794,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,
@@ -1820,6 +1808,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;
@@ -1831,7 +1824,6 @@ function createProgressCapsule(container) {
   var readonly = merged.readonly === true || merged.readonly === '' || merged.readonly === 'true';
   var locked = disabled || readonly;
   var effectiveDraggable = locked ? false : merged.draggable !== false;
-  var effectiveKeyboard = locked ? false : merged.keyboard !== false;
   var dirty = {
     preset: false,
     colors: false,
@@ -1843,7 +1835,6 @@ 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');
@@ -1853,6 +1844,7 @@ function createProgressCapsule(container) {
     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));
@@ -1864,7 +1856,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');
@@ -1931,8 +1922,7 @@ function createProgressCapsule(container) {
     preset: preset,
     emitter: emitter,
     options: _objectSpread2(_objectSpread2({}, merged), {}, {
-      draggable: effectiveDraggable,
-      keyboard: effectiveKeyboard
+      draggable: effectiveDraggable
     }),
     copy: copy,
     dirty: dirty
@@ -2092,8 +2082,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;
@@ -2124,8 +2120,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
   };
 }

package/dist/progress.mjs

@@ -147,9 +147,13 @@ function getPreset(kind, ref) {
   const list = PROGRESS_PRESETS ;
   if (!list) throw new Error(`Unknown preset kind: ${kind} (use "capsule" or "progress")`);
   const key = String(ref).trim().toLowerCase();
-  const found = list.find(
-    (preset) => preset.name.toLowerCase() === key
-  );
+  let found = null;
+  for (let index = 0; index < list.length; index += 1) {
+    if (list[index].name.toLowerCase() === key) {
+      found = list[index];
+      break;
+    }
+  }
   if (!found) throw new Error(`Unknown ${kind} preset: ${ref}`);
   return found;
 }
@@ -159,9 +163,8 @@ const DEFAULTS = {
     width: 454,
     height: 104,
     min: 0,
-    max: 100,
+    max: 100,
     draggable: true,
-    keyboard: true,
     disabled: false,
     readonly: false,
     valueSuffix: '%',
@@ -354,7 +357,7 @@ function normalizeRgbArgs(args) {
   if (parts.length < 3) return null;
   const 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);
     const number = Number(value);
     return Number.isFinite(number) ? clampChannel(number) : null;
   };
@@ -362,7 +365,11 @@ function normalizeRgbArgs(args) {
   const green = to255(parts[1]);
   const blue = to255(parts[2]);
   if (red === null || green === null || blue === null) return null;
-  return `#${[red, green, blue].map((n) => n.toString(16).padStart(2, '0')).join('')}`;
+  const hex = (n) => {
+    const text = n.toString(16);
+    return text.length === 1 ? `0${text}` : text;
+  };
+  return `#${hex(red)}${hex(green)}${hex(blue)}`;
 }
 
 /**
@@ -974,13 +981,17 @@ const PALETTES = {
   'tide': ['#0a2239', '#2e9bff', '#7fe3ff', '#eaf9ff']
 };
 
-function drawCloud(context, x, y, radiusX, radiusY, color, alpha) {
-  context.save();
-  context.translate(x, y);
-  context.scale(1, radiusY / radiusX);
-  const gradient = context.createRadialGradient(0, 0, 0, 0, 0, radiusX);
-  gradient.addColorStop(0, `${color}${Math.round(alpha * 255).toString(16).padStart(2, '0')}`);
-  gradient.addColorStop(0.46, `${color}${Math.round(alpha * 0.42 * 255).toString(16).padStart(2, '0')}`);
+function drawCloud(context, x, y, radiusX, radiusY, color, alpha) {
+  context.save();
+  context.translate(x, y);
+  context.scale(1, radiusY / radiusX);
+  const gradient = context.createRadialGradient(0, 0, 0, 0, 0, radiusX);
+  const alphaHex = (value) => {
+    const text = Math.round(value).toString(16);
+    return text.length === 1 ? `0${text}` : text;
+  };
+  gradient.addColorStop(0, `${color}${alphaHex(alpha * 255)}`);
+  gradient.addColorStop(0.46, `${color}${alphaHex(alpha * 0.42 * 255)}`);
   gradient.addColorStop(1, `${color}00`);
   context.fillStyle = gradient;
   context.fillRect(-radiusX, -radiusX, radiusX * 2, radiusX * 2);
@@ -1426,9 +1437,14 @@ class ProgressCapsuleController {
     ctx.restore();
   }
 
-  setRange(min, max) {
-    this.min = min;
-    this.max = max;
+  setRange(min, max) {
+    if (min > max) {
+      const swap = min;
+      min = max;
+      max = swap;
+    }
+    this.min = min;
+    this.max = max;
     const clamped = clamp(this.value, this.min, this.max);
     if (clamped !== this.value) this.setProgress(clamped, 'prop');
   }
@@ -1623,33 +1639,7 @@ class ProgressCapsuleController {
       this.root.addEventListener('pointercancel', this.handlers.pointercancel);
     }
 
-    if (this.options.keyboard !== false) {
-      this.handlers.keydown = (event) => {
-        const step = (this.max - this.min) * 0.02;
-        const actions = {
-          ArrowLeft: -step,
-          ArrowDown: -step,
-          ArrowRight: step,
-          ArrowUp: step,
-          PageDown: -step * 5,
-          PageUp: step * 5
-        };
-        if (event.key === 'Home') {
-          event.preventDefault();
-          this.setProgress(this.min, 'keyboard');
-        } else if (event.key === 'End') {
-          event.preventDefault();
-          this.setProgress(this.max, 'keyboard');
-        } else if (actions[event.key]) {
-          event.preventDefault();
-          this.setProgress(this.value + actions[event.key], 'keyboard');
-        } else {
-          return;
-        }
-      };
-      this.root.addEventListener('keydown', this.handlers.keydown);
-    }
-  }
+  }
 
   update(delta, paused) {
     if (!paused) this.flowTime += delta;
@@ -1687,7 +1677,7 @@ class ProgressCapsuleController {
  * 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,
@@ -1700,6 +1690,11 @@ function createProgressCapsule(container, options = {}) {
 
   const preset = { ...getPreset('progress', options.preset ?? '星火') };
   const merged = normalizeOptions(DEFAULTS.progress, preset, options);
+  if (merged.min > merged.max) {
+    const swap = merged.min;
+    merged.min = merged.max;
+    merged.max = swap;
+  }
   const normalizedColors = merged.colors.map(normalizeColor);
   if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
   preset.edgeStyle = merged.edgeStyle;
@@ -1711,7 +1706,6 @@ function createProgressCapsule(container, options = {}) {
   const readonly = merged.readonly === true || merged.readonly === '' || merged.readonly === 'true';
   const locked = disabled || readonly;
   const effectiveDraggable = locked ? false : merged.draggable !== false;
-  const effectiveKeyboard = locked ? false : merged.keyboard !== false;
   const dirty = {
     preset: false,
     colors: false,
@@ -1724,7 +1718,6 @@ function createProgressCapsule(container, options = {}) {
   const 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');
@@ -1734,6 +1727,7 @@ function createProgressCapsule(container, options = {}) {
     root.setAttribute('aria-readonly', 'true');
     root.classList.add('is-readonly');
   }
+  if (locked) root.setAttribute('tabindex', '-1');
   root.setAttribute('aria-valuemin', String(merged.min ?? 0));
   root.setAttribute('aria-valuemax', String(merged.max ?? 100));
   root.setAttribute('aria-valuenow', String(preset.initialProgress));
@@ -1744,8 +1738,6 @@ function createProgressCapsule(container, options = {}) {
     );
   };
   updateAria();
-  if (!effectiveKeyboard) root.setAttribute('tabindex', '-1');
-
   const canvas = document.createElement('canvas');
   canvas.className = 'hj-progress-canvas';
   canvas.setAttribute('aria-hidden', 'true');
@@ -1807,7 +1799,7 @@ function createProgressCapsule(container, options = {}) {
     valueElement,
     preset,
     emitter,
-    options: { ...merged, draggable: effectiveDraggable, keyboard: effectiveKeyboard },
+    options: { ...merged, draggable: effectiveDraggable },
     copy,
     dirty
   });
@@ -1948,10 +1940,16 @@ function createProgressCapsule(container, options = {}) {
       controller.resizeCanvas();
       return this;
     },
-    setSize(width, height) {
-      if (width !== undefined) merged.width = width;
-      if (height !== undefined) merged.height = height;
-      applySize();
+    setSize(width, height) {
+      if (width !== undefined) {
+        parseSize(width);
+        merged.width = width;
+      }
+      if (height !== undefined) {
+        parseSize(height);
+        merged.height = height;
+      }
+      applySize();
       controller.resizeCanvas();
       return this;
     },
@@ -1981,8 +1979,8 @@ function createProgressCapsule(container, options = {}) {
       controller.dispose();
       root.remove();
     },
-    textRatio: merged.textRatio,
-    cssVars: merged.cssVars,
+    get textRatio() { return merged.textRatio; },
+    get cssVars() { return merged.cssVars; },
     dirty
   };
 }