@5even7/dlc-ui 0.2.2 → 0.2.4

package/dist/vue3.mjs

@@ -177,9 +177,13 @@ function getPreset(kind, ref) {
   const list = kind === 'capsule' ? CAPSULE_PRESETS : kind === 'progress' ? PROGRESS_PRESETS : null;
   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;
 }
@@ -198,10 +202,10 @@ const DEFAULTS = {
     width: 454,
     height: 104,
     min: 0,
-    max: 100,
+    max: 100,
     draggable: true,
-    keyboard: true,
     disabled: false,
+    readonly: false,
     valueSuffix: '%',
     edgeStyle: 'flow',
     quality: 'auto',
@@ -392,7 +396,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;
   };
@@ -400,7 +404,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)}`;
 }
 
 /**
@@ -757,12 +765,13 @@ function rgb(color, alpha = 1) {
 }
 
 class FallbackRenderer {
-  constructor(canvas, preset) {
-    this.canvas = canvas;
-    this.preset = preset;
-    this.context = canvas.getContext('2d');
-    this.visible = true;
-  }
+  constructor(canvas, preset) {
+    this.canvas = canvas;
+    this.preset = preset;
+    this.context = canvas.getContext('2d');
+    this.visible = true;
+    this.timePhase = 0;
+  }
 
   resize() {
     const rect = this.canvas.getBoundingClientRect();
@@ -778,7 +787,7 @@ class FallbackRenderer {
   drawNebula(time) {
     const ctx = this.context;
     const { width, height } = this.canvas;
-    const t = time * (this.preset.speed || 1);
+    const t = (time + this.timePhase) * (this.preset.speed || 1);
     const phase = (this.preset.seed || 0) * 0.7;
     const gradient = ctx.createLinearGradient(0, 0, width, height);
     gradient.addColorStop(0, this.preset.colors[0]);
@@ -813,7 +822,10 @@ class FallbackRenderer {
   }
 
   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;
+    }
   }
   setMouseColor() {}
   dispose() {}
@@ -1039,6 +1051,10 @@ 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');
     }
     renderer.resize();
   };
@@ -1137,6 +1153,10 @@ 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');
       return this;
     },
     setCssVars(vars) {
@@ -1152,11 +1172,17 @@ function createCapsule(container, options = {}) {
       return this;
     },
     setSize(width, height) {
-      if (width !== undefined) merged.width = width;
-      if (height !== undefined) merged.height = height;
-      applySize();
-      return this;
-    },
+      if (width !== undefined) {
+        parseSize(width); // 非法尺寸直接抛错前先校验，避免污染内部状态
+        merged.width = width;
+      }
+      if (height !== undefined) {
+        parseSize(height);
+        merged.height = height;
+      }
+      applySize();
+      return this;
+    },
     randomize() {
       this.setSeed(Math.random() * 100);
       return this;
@@ -1183,8 +1209,8 @@ function createCapsule(container, options = {}) {
       renderer.dispose();
       root.remove();
     },
-    textRatio: merged.textRatio,
-    cssVars: merged.cssVars,
+    get textRatio() { return merged.textRatio; },
+    get cssVars() { return merged.cssVars; },
     dirty
   };
 }
@@ -1669,13 +1695,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);
@@ -2105,9 +2135,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');
   }
@@ -2246,6 +2281,8 @@ class ProgressCapsuleController {
   beginDrag(event) {
     if (event.button !== undefined && event.button !== 0) return;
     event.preventDefault();
+    // preventDefault 会吞掉点击聚焦，主动聚焦让键盘方向键立即可用。
+    try { this.root.focus({ preventScroll: true }); } catch { this.root.focus(); }
     this.dragging = true;
     this.pendingPointer = null;
     this._dragRaf = 0;
@@ -2300,33 +2337,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;
@@ -2364,7 +2375,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,
@@ -2377,6 +2388,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;
@@ -2385,8 +2401,9 @@ function createProgressCapsule(container, options = {}) {
   // Vue 的裸布尔属性（<ProgressCapsule disabled />）会传成空字符串，
   // 这里统一按 true 处理。
   const disabled = merged.disabled === true || merged.disabled === '' || merged.disabled === 'true';
-  const effectiveDraggable = disabled ? false : merged.draggable !== false;
-  const effectiveKeyboard = disabled ? false : merged.keyboard !== false;
+  const readonly = merged.readonly === true || merged.readonly === '' || merged.readonly === 'true';
+  const locked = disabled || readonly;
+  const effectiveDraggable = locked ? false : merged.draggable !== false;
   const dirty = {
     preset: false,
     colors: false,
@@ -2399,12 +2416,16 @@ 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');
     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 ?? 0));
   root.setAttribute('aria-valuemax', String(merged.max ?? 100));
   root.setAttribute('aria-valuenow', String(preset.initialProgress));
@@ -2415,8 +2436,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');
@@ -2478,7 +2497,7 @@ function createProgressCapsule(container, options = {}) {
     valueElement,
     preset,
     emitter,
-    options: { ...merged, draggable: effectiveDraggable, keyboard: effectiveKeyboard },
+    options: { ...merged, draggable: effectiveDraggable },
     copy,
     dirty
   });
@@ -2619,10 +2638,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;
     },
@@ -2652,8 +2677,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
   };
 }
@@ -2873,9 +2898,9 @@ function createColorBackground(host, options = {}) {
       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
   };
 }
@@ -2911,6 +2936,9 @@ function makeWrapper({ name, props, events, create, render, methods, watch }) {
       const extraState = this.runtimeState();
       if (this.controller) this.controller.dispose();
       this.mountController(extraState);
+      // 结构属性连续变化时，插槽内容可能在重建后才被 Vue 写入容器，
+      // 补一次搬运确保不丢。
+      this.$nextTick(() => this.moveSlots());
     },
     scheduleRecreate() {
       if (this._recreateQueued) return;
@@ -2925,13 +2953,15 @@ 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 || {};
-      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() {
       if (!this.controller || !this.controller.element || !this.$attrs) return;
@@ -3058,7 +3088,7 @@ function makeProgressWrapper(createProgressCapsule, render) {
     name: 'ProgressCapsule',
     props: [
       'preset', 'width', 'height', 'value', 'min', 'max',
-      'draggable', 'keyboard', 'disabled', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix',
+      'draggable', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix',
       'quality', 'renderer', 'respectReducedMotion', 'cssVars'
     ],
     events: PROGRESS_EVENTS,
@@ -3095,12 +3125,12 @@ function makeProgressWrapper(createProgressCapsule, render) {
       disabled() {
         this.scheduleRecreate();
       },
+      readonly() {
+        this.scheduleRecreate();
+      },
       draggable() {
         this.scheduleRecreate();
       },
-      keyboard() {
-        this.scheduleRecreate();
-      },
       renderer() {
         this.scheduleRecreate();
       }

package/package.json

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

package/styles/base.css

@@ -35,8 +35,8 @@
   box-sizing: border-box;
 }
 
-.hj-capsule-canvas,
-.hj-progress-canvas {
+.hj-capsule-canvas,
+.hj-progress-canvas {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -44,5 +44,13 @@
   width: 100%;
   height: 100%;
   border-radius: inherit;
-  pointer-events: none;
-}
+  pointer-events: none;
+}
+
+/* Vue wrapper 的插槽容器会被搬到文字区/颜色区里，撑满区域以便内容正常布局。 */
+.hj-vue-slot-text,
+.hj-vue-slot-color {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/styles/progress.css

@@ -23,6 +23,10 @@
   outline: none;
 }
 
+.hj-progress-root.is-readonly {
+  cursor: default;
+}
+
 .hj-progress-root:focus-visible {
   outline: 2px solid rgba(255, 255, 255, 0.8);
   outline-offset: 4px;

package/types/index.d.ts

@@ -59,8 +59,8 @@ export interface ProgressOptions {
   min?: number;
   max?: number;
   draggable?: boolean;
-  keyboard?: boolean;
   disabled?: boolean;
+  readonly?: boolean;
   valueSuffix?: string;
   edgeStyle?: 'flow' | 'tide';
   colors?: string[];
@@ -180,7 +180,7 @@ export declare function getPreset(kind: 'capsule' | 'progress', ref: string): Ca
 
 export declare const DEFAULTS: {
   capsule: Required<Pick<CapsuleOptions, 'width' | 'height' | 'quality' | 'respectReducedMotion' | 'mouseColor' | 'renderer' | 'textRatio'>>;
-  progress: Required<Pick<ProgressOptions, 'width' | 'height' | 'min' | 'max' | 'draggable' | 'keyboard' | 'disabled' | 'valueSuffix' | 'edgeStyle' | 'quality' | 'respectReducedMotion' | 'renderer' | 'textRatio' | 'showValue'>>;
+  progress: Required<Pick<ProgressOptions, 'width' | 'height' | 'min' | 'max' | 'draggable' | 'disabled' | 'readonly' | 'valueSuffix' | 'edgeStyle' | 'quality' | 'respectReducedMotion' | 'renderer' | 'textRatio' | 'showValue'>>;
 };
 
 export declare const COPY: Copy;