@5even7/dlc-ui 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 > **发版规则**：默认每次发布只递增补丁号（0.x.y → 0.x.(y+1)，即 +0.01）；除非手动明确指定新版本号，否则不升次版本。
 
+## 0.2.3 - 2026-08-08
+
+- 修复：Vue wrapper 重建组件（如 showValue 开关）后插槽内容丢失的问题（插槽容器改为整体搬入文字区/颜色区）。
+- 修复：进度条点击后无法直接使用键盘方向键的问题（拖动开始时自动聚焦）。
+- 修复：胶囊 `textRatio=0` 时文字区仍因最小宽度 164px 占位的问题，现 0 即完全隐藏。
+- 新增 Progress `readonly` 属性：与 disabled 行为一致但不置灰（`aria-readonly`）。
+
 ## 0.2.2 - 2026-08-08
 
 - 修复：Progress 的 `setLabel()` 对 const 变量重新赋值，导致打包产物被 esbuild 拒绝、文档站无法构建的问题；label 热更新恢复正常。

package/README.md

@@ -157,7 +157,7 @@ export default {
 
 胶囊专属：`seed`、`speed`、`mouseColor`（颜色随鼠标旋涡，默认 `true`，关闭不影响 click/悬浮/长按等事件）。
 
-进度条专属：`value`、`min`、`max`（value 的合法区间，默认 0~100；**水线归一化到 [min, max]**，键盘 ±2% 与 PageUp/PageDown ±10% 都是“范围的百分比”，右侧数字仍显示原始 value）、`draggable`、`keyboard`、`disabled`（true 时同时禁用拖动/键盘、tabindex=-1、aria-disabled、视觉置灰）、`edgeStyle`（`flow/tide`）、`valueSuffix`（右侧数字后缀，默认 `%`）、`showValue`（是否显示右侧百分比数字，默认 `true`，`false` 只隐藏数字、不影响无障碍信息）。
+进度条专属：`value`、`min`、`max`（value 的合法区间，默认 0~100；**水线归一化到 [min, max]**，键盘 ±2% 与 PageUp/PageDown ±10% 都是“范围的百分比”，右侧数字仍显示原始 value）、`draggable`、`keyboard`（点击组件会自动聚焦，之后即可用方向键/PageUp/PageDown/Home/End）、`disabled`（禁用交互并置灰）、`readonly`（禁用交互但不置灰）、`edgeStyle`（`flow/tide`）、`valueSuffix`（右侧数字后缀，默认 `%`）、`showValue`（是否显示右侧百分比数字，默认 `true`，`false` 只隐藏数字、不影响无障碍信息）。
 
 插槽内容属性（H5/工厂）：`text`、`colorContent`，支持 HTML 字符串或 DOM 节点（数组）；Vue 组件请用默认插槽 / `#color` 插槽。**注意：字符串走 innerHTML，不要传入不可信/用户直接输入的内容（XSS 风险）。**
 
@@ -181,7 +181,7 @@ dlc-color 背景层（`createColorBackground(host, options)`）：`preset`、`co
 ## 属性 vs cssVars 边界
 
 - **内容（文字/图片/按钮）**：只归插槽管，组件不施加任何样式；
-- **文字区宽度**：只归 `textRatio` 属性管（唯一入口，写入 `--hj-text-width`）；
+- **文字区宽度**：只归 `textRatio` 属性管（唯一入口，写入 `--hj-text-width`；`0` 即隐藏文字区）；
 - **区域外观（背景/内边距/圆角/左侧距）**：只归 cssVars 管；
 - **星云颜料**：只归 `colors` 属性管（与 `#color` 插槽无关，前者改画布颜料，后者放你的覆盖内容）；
 - 旧的 `--hj-copy-*`、`--hj-progress-copy-*` 变量保留为**兼容别名**，只兜底不优先。

package/dist/capsule.cjs

@@ -1174,6 +1174,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();
   };
@@ -1297,6 +1299,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) {

package/dist/capsule.mjs

@@ -962,6 +962,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();
   };
@@ -1060,6 +1064,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) {

package/dist/index.cjs

@@ -442,6 +442,7 @@ var DEFAULTS = {
     draggable: true,
     keyboard: true,
     disabled: false,
+    readonly: false,
     valueSuffix: '%',
     edgeStyle: 'flow',
     quality: 'auto',
@@ -1220,6 +1221,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();
   };
@@ -1343,6 +1346,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) {
@@ -2274,6 +2279,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;
@@ -2281,7 +2294,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
       });
@@ -2321,7 +2334,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
       });
@@ -2442,8 +2455,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,
@@ -2461,6 +2476,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));

package/dist/index.mjs

@@ -201,6 +201,7 @@ const DEFAULTS = {
     draggable: true,
     keyboard: true,
     disabled: false,
+    readonly: false,
     valueSuffix: '%',
     edgeStyle: 'flow',
     quality: 'auto',
@@ -1053,6 +1054,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();
   };
@@ -1151,6 +1156,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) {
@@ -2260,6 +2269,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;
@@ -2399,8 +2410,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,
@@ -2419,6 +2432,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));

package/dist/index.umd.js

@@ -446,6 +446,7 @@
       draggable: true,
       keyboard: true,
       disabled: false,
+      readonly: false,
       valueSuffix: '%',
       edgeStyle: 'flow',
       quality: 'auto',
@@ -1224,6 +1225,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 +1350,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) {
@@ -2278,6 +2283,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 +2298,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 +2338,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
         });
@@ -2446,8 +2459,10 @@
     // 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,
@@ -2465,6 +2480,10 @@
       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));