@zywave/zui-slider 4.4.0-pre.4 → 4.4.0-pre.6

package/src/zui-slider.ts

@@ -69,21 +69,15 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     {
       visible: boolean;
       focused: boolean;
+      committed: boolean;
       timer?: ReturnType<typeof setTimeout>;
-      debounceTimer?: ReturnType<typeof setTimeout>;
     }
   >([
-    ['thumb', { visible: false, focused: false }],
-    ['startThumb', { visible: false, focused: false }],
-    ['endThumb', { visible: false, focused: false }],
+    ['thumb', { visible: false, focused: false, committed: false }],
+    ['startThumb', { visible: false, focused: false, committed: false }],
+    ['endThumb', { visible: false, focused: false, committed: false }],
   ]);
 
-  // Pre-bound floating input handlers cached to avoid new function references on every render
-  #onThumbFloatingInput = this.#onFloatingInput('thumb', (v) => (this.value = v));
-  #onStartThumbFloatingInput = this.#onFloatingInput('startThumb', (v) => (this.valueStart = v));
-  #onEndThumbFloatingInput = this.#onFloatingInput('endThumb', (v) => (this.valueEnd = v));
-
-  // Cached floating input change handlers; flush debounce and dispatch immediately on commit (Enter/blur)
   #onThumbFloatingChange = this.#makeFloatingChange(
     'thumb',
     (v) => (this.value = v),
@@ -100,30 +94,27 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     () => this.#onRangeChange()
   );
 
-  // Cached range drag input handlers
+  // Cached keydown handler: Enter commits the floating input value in both number and text modes.
+  #onFloatingInputKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const input = e.target as HTMLInputElement;
+      input.dispatchEvent(new Event('change'));
+    }
+  };
+
   #onRangeStartInput = this.#onRangeInput('start');
   #onRangeEndInput = this.#onRangeInput('end');
+  #stopClickPropagation = (e: Event) => e.stopPropagation();
 
   // Cached pointer/focus handlers per thumb; prevents new closures on every render
-  #h: Record<ThumbFlag, { show: () => void; hide: () => void; focus: () => void; blur: () => void }> = {
-    thumb: {
-      show: () => this.#showThumbInput('thumb'),
-      hide: () => this.#scheduleHideThumbInput('thumb'),
-      focus: () => this.#focusFloatingInput('thumb'),
-      blur: () => this.#blurFloatingInput('thumb'),
-    },
-    startThumb: {
-      show: () => this.#showThumbInput('startThumb'),
-      hide: () => this.#scheduleHideThumbInput('startThumb'),
-      focus: () => this.#focusFloatingInput('startThumb'),
-      blur: () => this.#blurFloatingInput('startThumb'),
-    },
-    endThumb: {
-      show: () => this.#showThumbInput('endThumb'),
-      hide: () => this.#scheduleHideThumbInput('endThumb'),
-      focus: () => this.#focusFloatingInput('endThumb'),
-      blur: () => this.#blurFloatingInput('endThumb'),
-    },
+  #h: Record<
+    ThumbFlag,
+    { show: () => void; hide: () => void; focus: () => void; input: () => void; blurCommit: (e: FocusEvent) => void }
+  > = {
+    thumb: this.#makeThumbHandlers('thumb'),
+    startThumb: this.#makeThumbHandlers('startThumb'),
+    endThumb: this.#makeThumbHandlers('endThumb'),
   };
 
   static get styles() {
@@ -243,11 +234,10 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
   #clearAllThumbInputState() {
     for (const entry of this.#thumbInputState.values()) {
       clearTimeout(entry.timer);
-      clearTimeout(entry.debounceTimer);
       entry.timer = undefined;
-      entry.debounceTimer = undefined;
       entry.visible = false;
       entry.focused = false;
+      entry.committed = false;
     }
   }
 
@@ -524,6 +514,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
   #renderSingle() {
     const progress = this.progress;
     const { nativeMin, nativeMax, nativeStep } = this.#nativeRangeAttrs;
+    // live() required: direct DOM writes during drag don't trigger a state change, so Lit won't re-sync without it.
     const nativeValue = this.#stepsMode ? String(Math.max(0, this.#stepsIndexOf(this.#value))) : this.#value;
     return html`
       <div class="single-wrapper">
@@ -534,7 +525,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           .min="${nativeMin}"
           .max="${nativeMax}"
           .step="${nativeStep}"
-          .value="${nativeValue}"
+          .value="${live(nativeValue)}"
           ?disabled="${this.disabled || this.readOnly}"
           @input="${this.#onInput}"
           @change="${this.#onChange}"
@@ -545,7 +536,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         />
         ${this.#renderFloatingInput(
           this.#value,
-          this.#onThumbFloatingInput,
           this.#onThumbFloatingChange,
           'thumb',
           this.#isVisible('thumb'),
@@ -564,7 +554,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         ${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}
         ${this.#renderFloatingInput(
           this.#valueStart,
-          this.#onStartThumbFloatingInput,
           this.#onStartThumbFloatingChange,
           'startThumb',
           this.#isVisible('startThumb'),
@@ -573,7 +562,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         ${this.#renderRangeInput('end')}
         ${this.#renderFloatingInput(
           this.#valueEnd,
-          this.#onEndThumbFloatingInput,
           this.#onEndThumbFloatingChange,
           'endThumb',
           this.#isVisible('endThumb'),
@@ -603,6 +591,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         .step="${nativeStep}"
         .value="${live(nativeValue)}"
         ?disabled="${this.disabled || this.readOnly}"
+        @click="${this.#stopClickPropagation}"
         @input="${onInput}"
         @change="${this.#onRangeChange}"
         @pointerenter="${h.show}"
@@ -615,7 +604,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
 
   #renderFloatingInput(
     val: string,
-    onInput: (e: Event) => void,
     onFloatingChange: (e: Event) => void,
     flag: ThumbFlag,
     visible: boolean,
@@ -623,13 +611,14 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
   ) {
     const h = this.#h[flag];
     // type="text" in steps mode to allow label and stepParser input.
-    // live() required: same-value debounce resolutions skip reactive updates, so Lit won't re-sync without it.
+    // live() required: commits that snap/clamp to the current value skip reactive updates, so Lit won't re-sync without it.
     const ariaLabel =
       flag === 'startThumb' ? 'Range start value' : flag === 'endThumb' ? 'Range end value' : 'Slider value';
     return html`
       <div
         class=${classMap({ 'thumb-input': true, 'thumb-input--visible': visible })}
         style=${styleMap({ left: ZuiSlider.#thumbPositionCSS(progress) })}
+        @click="${this.#stopClickPropagation}"
         @pointerenter="${h.show}"
         @pointerleave="${h.hide}"
       >
@@ -642,10 +631,11 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           .step="${this.#stepsMode ? '' : this.step > 0 ? String(this.step) : '1'}"
           ?disabled="${this.disabled}"
           ?readonly="${this.readOnly}"
-          @input="${onInput}"
+          @keydown="${this.#onFloatingInputKeydown}"
+          @input="${h.input}"
           @change="${onFloatingChange}"
           @focus="${h.focus}"
-          @blur="${h.blur}"
+          @blur="${h.blurCommit}"
         />
       </div>
     `;
@@ -702,7 +692,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     const normalized = this.#normalizedSteps;
     const minLabel = this.#stepsMode ? normalized[0]?.label ?? '' : String(this.min);
     const maxLabel = this.#stepsMode ? normalized[normalized.length - 1]?.label ?? '' : String(this.max);
-    const hidden = this.showStepLabels && this.#stepsMode;
+    const hidden = this.showStepLabels;
     return html`
       <div
         class="min-max-labels"
@@ -750,64 +740,83 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     return this.#value;
   }
 
+  #makeThumbHandlers(flag: ThumbFlag) {
+    return {
+      show: () => this.#showThumbInput(flag),
+      hide: () => this.#scheduleHideThumbInput(flag),
+      focus: () => this.#focusFloatingInput(flag),
+      input: () => {
+        this.#thumbInputState.get(flag)!.committed = false;
+      },
+      blurCommit: (e: FocusEvent) => {
+        const entry = this.#thumbInputState.get(flag)!;
+        if (!entry.committed) {
+          (e.target as HTMLInputElement).dispatchEvent(new Event('change'));
+        }
+        entry.committed = false;
+        this.#blurFloatingInput(flag);
+      },
+    };
+  }
+
   #makeFloatingChange(flag: ThumbFlag, setter: (val: string) => void, dispatch: () => void) {
     return (e: Event) => {
       if (this.readOnly) {
         return;
       }
       const input = e.target as HTMLInputElement;
-      const entry = this.#thumbInputState.get(flag)!;
-      clearTimeout(entry.debounceTimer);
-      entry.debounceTimer = undefined;
       if (input.value === '') {
         input.value = this.#currentValueForFlag(flag);
         return;
       }
+      const before = this.#currentValueForFlag(flag);
+      const commit = (value: string) => {
+        setter(value);
+        this.#thumbInputState.get(flag)!.committed = true;
+        if (this.#currentValueForFlag(flag) !== before) {
+          dispatch();
+        }
+      };
       if (this.#stepsMode) {
         const resolved = this.#resolveFloatingInput(input.value);
         if (resolved !== null) {
-          setter(resolved);
-          this.requestUpdate();
-          dispatch();
+          let finalResolved = resolved;
+          if (flag !== 'thumb') {
+            const resolvedIdx = this.#stepsIndexOf(resolved);
+            const endIdx = Math.max(0, this.#stepsIndexOf(this.#valueEnd));
+            const startIdx = Math.max(0, this.#stepsIndexOf(this.#valueStart));
+            if (flag === 'startThumb' && resolvedIdx >= endIdx) {
+              const nudgedIdx = endIdx - 1;
+              finalResolved = nudgedIdx >= 0 ? this.#stepAt(nudgedIdx) : this.#currentValueForFlag(flag);
+            } else if (flag === 'endThumb' && resolvedIdx <= startIdx) {
+              const nudgedIdx = startIdx + 1;
+              finalResolved =
+                nudgedIdx < this.#normalizedSteps.length ? this.#stepAt(nudgedIdx) : this.#currentValueForFlag(flag);
+            }
+          }
+          commit(finalResolved);
         } else {
           input.value = this.#currentValueForFlag(flag);
         }
       } else {
-        setter(this.#processFloatingValue(parseFloat(input.value)));
-        this.requestUpdate();
-        dispatch();
-      }
-    };
-  }
-
-  #onFloatingInput(flag: ThumbFlag, setter: (val: string) => void) {
-    return (e: Event) => {
-      if (this.readOnly) {
-        return;
-      }
-      const input = e.target as HTMLInputElement;
-      const entry = this.#thumbInputState.get(flag)!;
-      clearTimeout(entry.debounceTimer);
-      entry.debounceTimer = undefined;
-      if (input.value === '') {
-        return;
-      }
-      if (this.#stepsMode) {
-        // Capture raw string at event time so the debounce closure reads the right value
-        const raw = input.value;
-        entry.debounceTimer = setTimeout(() => {
-          const resolved = this.#resolveFloatingInput(raw);
-          if (resolved !== null) {
-            setter(resolved);
-            this.requestUpdate();
+        let processed = this.#processFloatingValue(parseFloat(input.value));
+        if (flag !== 'thumb') {
+          const effectiveStep = this.step > 0 ? this.step : 1;
+          if (flag === 'startThumb') {
+            const endNum = parseFloat(this.#valueEnd);
+            if (parseFloat(processed) >= endNum) {
+              const nudged = this.#processFloatingValue(endNum - effectiveStep);
+              processed = parseFloat(nudged) < endNum ? nudged : this.#currentValueForFlag(flag);
+            }
+          } else {
+            const startNum = parseFloat(this.#valueStart);
+            if (parseFloat(processed) <= startNum) {
+              const nudged = this.#processFloatingValue(startNum + effectiveStep);
+              processed = parseFloat(nudged) > startNum ? nudged : this.#currentValueForFlag(flag);
+            }
           }
-        }, 500);
-      } else {
-        const raw = parseFloat(input.value);
-        entry.debounceTimer = setTimeout(() => {
-          setter(this.#processFloatingValue(raw));
-          this.requestUpdate();
-        }, 500);
+        }
+        commit(processed);
       }
     };
   }
@@ -866,7 +875,6 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     if (this.disabled || this.readOnly) {
       return;
     }
-
     const wrapper = e.currentTarget as HTMLElement;
     const rect = wrapper.getBoundingClientRect();
     // Thumb diameter is 3× the custom property; radius is 1.5×. Track is inset by one radius each side.
@@ -961,7 +969,9 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
       return;
     }
     this.#showThumbInput(flag);
-    this.#thumbInputState.get(flag)!.focused = true;
+    const entry = this.#thumbInputState.get(flag)!;
+    entry.focused = true;
+    entry.committed = false;
   }
 
   #blurFloatingInput(flag: ThumbFlag) {