@5even7/dlc-ui 0.2.2 → 0.2.3

package/dist/vue2.mjs

@@ -200,6 +200,7 @@ const DEFAULTS = {
     draggable: true,
     keyboard: true,
     disabled: false,
+    readonly: false,
     valueSuffix: '%',
     edgeStyle: 'flow',
     quality: 'auto',
@@ -1037,6 +1038,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();
   };
@@ -1135,6 +1140,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) {
@@ -2244,6 +2253,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;
@@ -2383,8 +2394,10 @@ 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 effectiveKeyboard = locked ? false : merged.keyboard !== false;
   const dirty = {
     preset: false,
     colors: false,
@@ -2403,6 +2416,10 @@ function createProgressCapsule(container, options = {}) {
     root.setAttribute('aria-disabled', 'true');
     root.classList.add('is-disabled');
   }
+  if (readonly) {
+    root.setAttribute('aria-readonly', 'true');
+    root.classList.add('is-readonly');
+  }
   root.setAttribute('aria-valuemin', String(merged.min ?? 0));
   root.setAttribute('aria-valuemax', String(merged.max ?? 100));
   root.setAttribute('aria-valuenow', String(preset.initialProgress));
@@ -2923,13 +2940,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;
@@ -3056,7 +3075,7 @@ function makeProgressWrapper(createProgressCapsule, render) {
     name: 'ProgressCapsule',
     props: [
       'preset', 'width', 'height', 'value', 'min', 'max',
-      'draggable', 'keyboard', 'disabled', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix',
+      'draggable', 'keyboard', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix',
       'quality', 'renderer', 'respectReducedMotion', 'cssVars'
     ],
     events: PROGRESS_EVENTS,
@@ -3093,6 +3112,9 @@ function makeProgressWrapper(createProgressCapsule, render) {
       disabled() {
         this.scheduleRecreate();
       },
+      readonly() {
+        this.scheduleRecreate();
+      },
       draggable() {
         this.scheduleRecreate();
       },

package/dist/vue3.cjs

@@ -443,6 +443,7 @@ var DEFAULTS = {
     draggable: true,
     keyboard: true,
     disabled: false,
+    readonly: false,
     valueSuffix: '%',
     edgeStyle: 'flow',
     quality: 'auto',
@@ -1209,6 +1210,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 +1335,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) {
@@ -2263,6 +2268,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 +2283,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 +2323,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
       });
@@ -2431,8 +2444,10 @@ 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 effectiveKeyboard = locked ? false : merged.keyboard !== false;
   var dirty = {
     preset: false,
     colors: false,
@@ -2450,6 +2465,10 @@ function createProgressCapsule(container) {
     root.setAttribute('aria-disabled', 'true');
     root.classList.add('is-disabled');
   }
+  if (readonly) {
+    root.setAttribute('aria-readonly', 'true');
+    root.classList.add('is-readonly');
+  }
   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));
@@ -3000,22 +3019,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 +3181,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', 'keyboard', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix', 'quality', 'renderer', 'respectReducedMotion', 'cssVars'],
     events: PROGRESS_EVENTS,
     create: createProgressCapsule,
     render: render,
@@ -3198,6 +3216,9 @@ function makeProgressWrapper(createProgressCapsule, render) {
       disabled: function disabled() {
         this.scheduleRecreate();
       },
+      readonly: function readonly() {
+        this.scheduleRecreate();
+      },
       draggable: function draggable() {
         this.scheduleRecreate();
       },

package/dist/vue3.mjs

@@ -202,6 +202,7 @@ const DEFAULTS = {
     draggable: true,
     keyboard: true,
     disabled: false,
+    readonly: false,
     valueSuffix: '%',
     edgeStyle: 'flow',
     quality: 'auto',
@@ -1039,6 +1040,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 +1142,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) {
@@ -2246,6 +2255,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;
@@ -2385,8 +2396,10 @@ 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 effectiveKeyboard = locked ? false : merged.keyboard !== false;
   const dirty = {
     preset: false,
     colors: false,
@@ -2405,6 +2418,10 @@ function createProgressCapsule(container, options = {}) {
     root.setAttribute('aria-disabled', 'true');
     root.classList.add('is-disabled');
   }
+  if (readonly) {
+    root.setAttribute('aria-readonly', 'true');
+    root.classList.add('is-readonly');
+  }
   root.setAttribute('aria-valuemin', String(merged.min ?? 0));
   root.setAttribute('aria-valuemax', String(merged.max ?? 100));
   root.setAttribute('aria-valuenow', String(preset.initialProgress));
@@ -2925,13 +2942,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 +3077,7 @@ function makeProgressWrapper(createProgressCapsule, render) {
     name: 'ProgressCapsule',
     props: [
       'preset', 'width', 'height', 'value', 'min', 'max',
-      'draggable', 'keyboard', 'disabled', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix',
+      'draggable', 'keyboard', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix',
       'quality', 'renderer', 'respectReducedMotion', 'cssVars'
     ],
     events: PROGRESS_EVENTS,
@@ -3095,6 +3114,9 @@ function makeProgressWrapper(createProgressCapsule, render) {
       disabled() {
         this.scheduleRecreate();
       },
+      readonly() {
+        this.scheduleRecreate();
+      },
       draggable() {
         this.scheduleRecreate();
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@5even7/dlc-ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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

@@ -61,6 +61,7 @@ export interface ProgressOptions {
   draggable?: boolean;
   keyboard?: boolean;
   disabled?: boolean;
+  readonly?: boolean;
   valueSuffix?: string;
   edgeStyle?: 'flow' | 'tide';
   colors?: string[];
@@ -180,7 +181,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' | 'keyboard' | 'disabled' | 'readonly' | 'valueSuffix' | 'edgeStyle' | 'quality' | 'respectReducedMotion' | 'renderer' | 'textRatio' | 'showValue'>>;
 };
 
 export declare const COPY: Copy;