@5even7/dlc-ui 0.2.1 → 0.2.3

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

@@ -148,9 +148,6 @@ function _objectSpread2(e) {
   }
   return e;
 }
-function _readOnlyError(r) {
-  throw new TypeError('"' + r + '" is read-only');
-}
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
@@ -445,6 +442,7 @@ var DEFAULTS = {
     draggable: true,
     keyboard: true,
     disabled: false,
+    readonly: false,
     valueSuffix: '%',
     edgeStyle: 'flow',
     quality: 'auto',
@@ -1223,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();
   };
@@ -1346,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) {
@@ -2277,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;
@@ -2284,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
       });
@@ -2324,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
       });
@@ -2445,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,
@@ -2464,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));
@@ -2683,7 +2699,7 @@ function createProgressCapsule(container) {
       return this;
     },
     setLabel: function setLabel(label) {
-      _readOnlyError("customLabel");
+      customLabel = typeof label === 'string' && label ? label : null;
       updateAria();
       return this;
     },

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;
@@ -2395,12 +2406,14 @@ function createProgressCapsule(container, options = {}) {
   if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
   preset.edgeStyle = merged.edgeStyle;
   const copy = COPY;
-  const customLabel = typeof options.label === 'string' && options.label ? options.label : null;
+  let customLabel = typeof options.label === 'string' && options.label ? options.label : null;
   // 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

@@ -152,9 +152,6 @@
     }
     return e;
   }
-  function _readOnlyError(r) {
-    throw new TypeError('"' + r + '" is read-only');
-  }
   function _slicedToArray(r, e) {
     return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
   }
@@ -449,6 +446,7 @@
       draggable: true,
       keyboard: true,
       disabled: false,
+      readonly: false,
       valueSuffix: '%',
       edgeStyle: 'flow',
       quality: 'auto',
@@ -1227,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();
     };
@@ -1350,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) {
@@ -2281,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;
@@ -2288,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
         });
@@ -2328,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
         });
@@ -2449,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,
@@ -2468,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));
@@ -2687,7 +2703,7 @@
         return this;
       },
       setLabel: function setLabel(label) {
-        _readOnlyError("customLabel");
+        customLabel = typeof label === 'string' && label ? label : null;
         updateAria();
         return this;
       },