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

package/src/zui-slider.ts

@@ -69,15 +69,15 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     {
       visible: boolean;
       focused: boolean;
+      committed: boolean;
       timer?: 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 }],
   ]);
 
-  // Cached floating input change handlers; commit value on Enter or blur
   #onThumbFloatingChange = this.#makeFloatingChange(
     'thumb',
     (v) => (this.value = v),
@@ -100,34 +100,21 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
       e.preventDefault();
       const input = e.target as HTMLInputElement;
       input.dispatchEvent(new Event('change'));
-      input.blur();
     }
   };
 
-  // Cached range drag input handlers
   #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() {
@@ -250,6 +237,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
       entry.timer = undefined;
       entry.visible = false;
       entry.focused = false;
+      entry.committed = false;
     }
   }
 
@@ -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}"
@@ -629,6 +618,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
       <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,9 +632,10 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           ?disabled="${this.disabled}"
           ?readonly="${this.readOnly}"
           @keydown="${this.#onFloatingInputKeydown}"
+          @input="${h.input}"
           @change="${onFloatingChange}"
           @focus="${h.focus}"
-          @blur="${h.blur}"
+          @blur="${h.blurCommit}"
         />
       </div>
     `;
@@ -701,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"
@@ -749,6 +740,25 @@ 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) {
@@ -760,23 +770,53 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         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();
-          if (this.#currentValueForFlag(flag) !== before) {
-            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();
-        if (this.#currentValueForFlag(flag) !== before) {
-          dispatch();
+        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);
+            }
+          }
         }
+        commit(processed);
       }
     };
   }
@@ -835,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.
@@ -930,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) {