@zywave/zui-slider 4.4.0-pre.4 → 4.4.0-pre.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +5 -40
- package/dist/zui-slider-css.js +1 -1
- package/dist/zui-slider-css.js.map +1 -1
- package/dist/zui-slider.js +28 -56
- package/dist/zui-slider.js.map +1 -1
- package/docs/demo.html +1 -1
- package/lab.html +5 -5
- package/package.json +2 -2
- package/src/zui-slider-css.js +1 -1
- package/src/zui-slider.scss +2 -0
- package/src/zui-slider.ts +22 -53
- package/test/zui-slider.test.ts +175 -237
|
@@ -94,36 +94,26 @@
|
|
|
94
94
|
"kind": "field",
|
|
95
95
|
"name": "#thumbInputState",
|
|
96
96
|
"privacy": "private",
|
|
97
|
-
"default": "new Map< ThumbFlag, { visible: boolean; focused: boolean; timer?: ReturnType<typeof setTimeout>;
|
|
97
|
+
"default": "new Map< ThumbFlag, { visible: boolean; focused: boolean; timer?: ReturnType<typeof setTimeout>; } >([ ['thumb', { visible: false, focused: false }], ['startThumb', { visible: false, focused: false }], ['endThumb', { visible: false, focused: false }], ])"
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
100
|
"kind": "field",
|
|
101
|
-
"name": "#
|
|
102
|
-
"privacy": "private"
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
"kind": "field",
|
|
106
|
-
"name": "#onStartThumbFloatingInput",
|
|
107
|
-
"privacy": "private"
|
|
108
|
-
},
|
|
109
|
-
{
|
|
110
|
-
"kind": "field",
|
|
111
|
-
"name": "#onEndThumbFloatingInput",
|
|
101
|
+
"name": "#onThumbFloatingChange",
|
|
112
102
|
"privacy": "private"
|
|
113
103
|
},
|
|
114
104
|
{
|
|
115
105
|
"kind": "field",
|
|
116
|
-
"name": "#
|
|
106
|
+
"name": "#onStartThumbFloatingChange",
|
|
117
107
|
"privacy": "private"
|
|
118
108
|
},
|
|
119
109
|
{
|
|
120
110
|
"kind": "field",
|
|
121
|
-
"name": "#
|
|
111
|
+
"name": "#onEndThumbFloatingChange",
|
|
122
112
|
"privacy": "private"
|
|
123
113
|
},
|
|
124
114
|
{
|
|
125
115
|
"kind": "field",
|
|
126
|
-
"name": "#
|
|
116
|
+
"name": "#onFloatingInputKeydown",
|
|
127
117
|
"privacy": "private"
|
|
128
118
|
},
|
|
129
119
|
{
|
|
@@ -593,12 +583,6 @@
|
|
|
593
583
|
"text": "string"
|
|
594
584
|
}
|
|
595
585
|
},
|
|
596
|
-
{
|
|
597
|
-
"name": "onInput",
|
|
598
|
-
"type": {
|
|
599
|
-
"text": "(e: Event) => void"
|
|
600
|
-
}
|
|
601
|
-
},
|
|
602
586
|
{
|
|
603
587
|
"name": "onFloatingChange",
|
|
604
588
|
"type": {
|
|
@@ -714,25 +698,6 @@
|
|
|
714
698
|
}
|
|
715
699
|
]
|
|
716
700
|
},
|
|
717
|
-
{
|
|
718
|
-
"kind": "method",
|
|
719
|
-
"name": "#onFloatingInput",
|
|
720
|
-
"privacy": "private",
|
|
721
|
-
"parameters": [
|
|
722
|
-
{
|
|
723
|
-
"name": "flag",
|
|
724
|
-
"type": {
|
|
725
|
-
"text": "ThumbFlag"
|
|
726
|
-
}
|
|
727
|
-
},
|
|
728
|
-
{
|
|
729
|
-
"name": "setter",
|
|
730
|
-
"type": {
|
|
731
|
-
"text": "(val: string) => void"
|
|
732
|
-
}
|
|
733
|
-
}
|
|
734
|
-
]
|
|
735
|
-
},
|
|
736
701
|
{
|
|
737
702
|
"kind": "method",
|
|
738
703
|
"name": "#onRangeInput",
|
package/dist/zui-slider-css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const style = css `:host .thumb-input input{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input:hover{border-color:var(--zui-gray-400)}:host .thumb-input input:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block}:host .single-wrapper,:host .range-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:var(--zui-slider-thumb-size);margin:0;background:rgba(0,0,0,0);outline:none;cursor:grab;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-moz-range-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-webkit-slider-thumb{transform:translateY(calc(-50% + 0.125rem));-webkit-appearance:none;appearance:none}:host input[type=range]::-moz-range-thumb{border:0}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:auto}:host .thumb-input input{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input::-webkit-inner-spin-button,:host .thumb-input input::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child,:host .step-dots .step-dot--last{width:.125rem;height:1rem;border-radius:.125rem}:host .step-dots .step-dot-label{position:absolute;top:.375rem;font-weight:600;white-space:nowrap;color:var(--zui-gray-600);transform:translateX(-50%);user-select:none}:host .step-dots .step-dot-label:nth-child(2){transform:none}:host .step-dots .step-dot-label:last-child{transform:translateX(-100%)}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}:host .range-wrapper input[type=range]{position:absolute;pointer-events:none}:host .range-wrapper input[type=range]::-webkit-slider-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .min-max-labels{display:flex;justify-content:space-between;user-select:none}:host .min-max-labels .min-max-label{font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) input[type=range]:disabled{cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host([disabled]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host([disabled]) .step-dot{background-color:var(--zui-gray)}:host([disabled]) .range-wrapper{cursor:not-allowed}`;
|
|
2
|
+
export const style = css `:host .thumb-input input{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input:hover{border-color:var(--zui-gray-400)}:host .thumb-input input:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block}:host .single-wrapper,:host .range-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:var(--zui-slider-thumb-size);margin:0;background:rgba(0,0,0,0);outline:none;cursor:grab;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-moz-range-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-webkit-slider-thumb{transform:translateY(calc(-50% + 0.125rem));-webkit-appearance:none;appearance:none}:host input[type=range]::-moz-range-thumb{border:0}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:auto}:host .thumb-input input{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input::-webkit-inner-spin-button,:host .thumb-input input::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child,:host .step-dots .step-dot--last{width:.125rem;height:1rem;border-radius:.125rem}:host .step-dots .step-dot-label{position:absolute;top:.375rem;font-size:.6875rem;font-weight:600;white-space:nowrap;color:var(--zui-gray-600);transform:translateX(-50%);user-select:none}:host .step-dots .step-dot-label:nth-child(2){transform:none}:host .step-dots .step-dot-label:last-child{transform:translateX(-100%)}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}:host .range-wrapper input[type=range]{position:absolute;pointer-events:none}:host .range-wrapper input[type=range]::-webkit-slider-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .min-max-labels{display:flex;justify-content:space-between;user-select:none}:host .min-max-labels .min-max-label{font-size:.6875rem;font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) input[type=range]:disabled{cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host([disabled]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host([disabled]) .step-dot{background-color:var(--zui-gray)}:host([disabled]) .range-wrapper{cursor:not-allowed}`;
|
|
3
3
|
//# sourceMappingURL=zui-slider-css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"zui-slider-css.js","sourceRoot":"","sources":["../src/zui-slider-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,01OAA01O,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .thumb-input input{display:inline-block;width:100%;min-height:2.625rem;vertical-align:middle;padding:0 .625rem;background-color:#fff;border:.0625rem solid var(--zui-gray-200);border-radius:.25rem;font:inherit;color:inherit;transition:border 100ms ease-in-out,box-shadow 100ms ease-in-out;box-sizing:border-box;appearance:textfield}:host .thumb-input input::-webkit-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input::-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-moz-placeholder{opacity:1;color:var(--zui-gray-200)}:host .thumb-input input:-ms-input-placeholder{color:var(--zui-gray-200)}:host .thumb-input input:not(output):-moz-ui-invalid{box-shadow:none}:host .thumb-input input:hover{border-color:var(--zui-gray-400)}:host .thumb-input input:focus{border-color:var(--zui-blue-400);box-shadow:0 0 0 .0625rem var(--zui-blue-400);outline:none}:host .thumb-input input[disabled]{background-color:var(--zui-gray-100);cursor:not-allowed;color:var(--zui-gray-300)}:host .thumb-input input[disabled]:hover{border:.0625rem solid var(--zui-gray-200)}:host .thumb-input input[readonly]{outline:none}:host{--zui-slider-thumb-size: 0.875rem;--zui-slider-input-width: 8ch;position:relative;display:block}:host .single-wrapper,:host .range-wrapper{position:relative;display:flex;height:var(--zui-slider-thumb-size);align-items:center;margin:0 calc(var(--zui-slider-thumb-size)*-1)}:host input[type=range]{width:100%;height:var(--zui-slider-thumb-size);margin:0;background:rgba(0,0,0,0);outline:none;cursor:grab;-webkit-appearance:none;appearance:none}:host input[type=range]::-webkit-slider-runnable-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-moz-range-track{height:.25rem;background:var(--zui-slider-track-bg)}:host input[type=range]::-webkit-slider-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-moz-range-thumb{width:calc(var(--zui-slider-thumb-size)*3);height:calc(var(--zui-slider-thumb-size)*3);background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));border-radius:50%;box-shadow:none;cursor:grab;transition:background 100ms ease-out,box-shadow 100ms ease-out}:host input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]::-webkit-slider-thumb{transform:translateY(calc(-50% + 0.125rem));-webkit-appearance:none;appearance:none}:host input[type=range]::-moz-range-thumb{border:0}:host input[type=range]:hover::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:hover::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-400) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2))}:host input[type=range]:focus::-webkit-slider-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:focus::-moz-range-thumb{box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16)}:host input[type=range]:active::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host input[type=range]:active::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue-600) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));box-shadow:inset 0 0 0 var(--zui-slider-thumb-size) rgba(120,120,140,.16);cursor:grabbing}:host .thumb-input{position:absolute;bottom:calc(var(--zui-slider-thumb-size)*2 + 0.25rem);opacity:0;z-index:10;transform:translateX(-50%);transition:opacity 100ms ease-out;pointer-events:none}:host .thumb-input--visible,:host .thumb-input:focus-within{opacity:1;pointer-events:auto}:host .thumb-input input{width:var(--zui-slider-input-width);text-align:center}:host .thumb-input input::-webkit-inner-spin-button,:host .thumb-input input::-webkit-outer-spin-button{appearance:none}:host .step-dots{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}:host .step-dots .step-dot{position:absolute;width:.375rem;height:.375rem;background-color:var(--zui-blue);border-radius:50%;transform:translate(-50%, -50%)}:host .step-dots .step-dot:first-child,:host .step-dots .step-dot:last-child,:host .step-dots .step-dot--last{width:.125rem;height:1rem;border-radius:.125rem}:host .step-dots .step-dot-label{position:absolute;top:.375rem;font-size:.6875rem;font-weight:600;white-space:nowrap;color:var(--zui-gray-600);transform:translateX(-50%);user-select:none}:host .step-dots .step-dot-label:nth-child(2){transform:none}:host .step-dots .step-dot-label:last-child{transform:translateX(-100%)}:host .range-wrapper{cursor:grab}:host .range-wrapper:active{cursor:grabbing}:host .range-wrapper input[type=range]{position:absolute;pointer-events:none}:host .range-wrapper input[type=range]::-webkit-slider-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-thumb{pointer-events:all}:host .range-wrapper input[type=range]::-moz-range-progress{background:rgba(0,0,0,0)}:host .min-max-labels{display:flex;justify-content:space-between;user-select:none}:host .min-max-labels .min-max-label{font-size:.6875rem;font-weight:600;color:var(--zui-gray-600)}:host([range]) .min-max-labels{margin-top:.3125rem}:host([readonly]) input[type=range]:disabled{cursor:default}:host([readonly]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([readonly]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-blue) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:default}:host([disabled]){cursor:not-allowed}:host([disabled]) input[type=range]:disabled{cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-webkit-slider-thumb:hover{box-shadow:none}:host([disabled]) input[type=range]:disabled::-moz-range-thumb{background:radial-gradient(circle, var(--zui-gray) calc(var(--zui-slider-thumb-size) / 2 - 0.0625rem), transparent calc(var(--zui-slider-thumb-size) / 2));cursor:not-allowed}:host([disabled]) input[type=range]:disabled::-moz-range-thumb:hover{box-shadow:none}:host([disabled]) .step-dot{background-color:var(--zui-gray)}:host([disabled]) .range-wrapper{cursor:not-allowed}`;\n"]}
|
package/dist/zui-slider.js
CHANGED
|
@@ -69,14 +69,19 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
69
69
|
['startThumb', { visible: false, focused: false }],
|
|
70
70
|
['endThumb', { visible: false, focused: false }],
|
|
71
71
|
]);
|
|
72
|
-
//
|
|
73
|
-
this.#onThumbFloatingInput = this.#onFloatingInput('thumb', (v) => (this.value = v));
|
|
74
|
-
this.#onStartThumbFloatingInput = this.#onFloatingInput('startThumb', (v) => (this.valueStart = v));
|
|
75
|
-
this.#onEndThumbFloatingInput = this.#onFloatingInput('endThumb', (v) => (this.valueEnd = v));
|
|
76
|
-
// Cached floating input change handlers; flush debounce and dispatch immediately on commit (Enter/blur)
|
|
72
|
+
// Cached floating input change handlers; commit value on Enter or blur
|
|
77
73
|
this.#onThumbFloatingChange = this.#makeFloatingChange('thumb', (v) => (this.value = v), () => this.#onChange());
|
|
78
74
|
this.#onStartThumbFloatingChange = this.#makeFloatingChange('startThumb', (v) => (this.valueStart = v), () => this.#onRangeChange());
|
|
79
75
|
this.#onEndThumbFloatingChange = this.#makeFloatingChange('endThumb', (v) => (this.valueEnd = v), () => this.#onRangeChange());
|
|
76
|
+
// Cached keydown handler: Enter commits the floating input value in both number and text modes.
|
|
77
|
+
this.#onFloatingInputKeydown = (e) => {
|
|
78
|
+
if (e.key === 'Enter') {
|
|
79
|
+
e.preventDefault();
|
|
80
|
+
const input = e.target;
|
|
81
|
+
input.dispatchEvent(new Event('change'));
|
|
82
|
+
input.blur();
|
|
83
|
+
}
|
|
84
|
+
};
|
|
80
85
|
// Cached range drag input handlers
|
|
81
86
|
this.#onRangeStartInput = this.#onRangeInput('start');
|
|
82
87
|
this.#onRangeEndInput = this.#onRangeInput('end');
|
|
@@ -119,14 +124,12 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
119
124
|
#cachedNormalizedSteps;
|
|
120
125
|
#cachedNumericValues;
|
|
121
126
|
#thumbInputState;
|
|
122
|
-
//
|
|
123
|
-
#onThumbFloatingInput;
|
|
124
|
-
#onStartThumbFloatingInput;
|
|
125
|
-
#onEndThumbFloatingInput;
|
|
126
|
-
// Cached floating input change handlers; flush debounce and dispatch immediately on commit (Enter/blur)
|
|
127
|
+
// Cached floating input change handlers; commit value on Enter or blur
|
|
127
128
|
#onThumbFloatingChange;
|
|
128
129
|
#onStartThumbFloatingChange;
|
|
129
130
|
#onEndThumbFloatingChange;
|
|
131
|
+
// Cached keydown handler: Enter commits the floating input value in both number and text modes.
|
|
132
|
+
#onFloatingInputKeydown;
|
|
130
133
|
// Cached range drag input handlers
|
|
131
134
|
#onRangeStartInput;
|
|
132
135
|
#onRangeEndInput;
|
|
@@ -233,9 +236,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
233
236
|
#clearAllThumbInputState() {
|
|
234
237
|
for (const entry of this.#thumbInputState.values()) {
|
|
235
238
|
clearTimeout(entry.timer);
|
|
236
|
-
clearTimeout(entry.debounceTimer);
|
|
237
239
|
entry.timer = undefined;
|
|
238
|
-
entry.debounceTimer = undefined;
|
|
239
240
|
entry.visible = false;
|
|
240
241
|
entry.focused = false;
|
|
241
242
|
}
|
|
@@ -471,6 +472,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
471
472
|
#renderSingle() {
|
|
472
473
|
const progress = this.progress;
|
|
473
474
|
const { nativeMin, nativeMax, nativeStep } = this.#nativeRangeAttrs;
|
|
475
|
+
// live() required: direct DOM writes during drag don't trigger a state change, so Lit won't re-sync without it.
|
|
474
476
|
const nativeValue = this.#stepsMode ? String(Math.max(0, this.#stepsIndexOf(this.#value))) : this.#value;
|
|
475
477
|
return html `
|
|
476
478
|
<div class="single-wrapper">
|
|
@@ -481,7 +483,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
481
483
|
.min="${nativeMin}"
|
|
482
484
|
.max="${nativeMax}"
|
|
483
485
|
.step="${nativeStep}"
|
|
484
|
-
.value="${nativeValue}"
|
|
486
|
+
.value="${live(nativeValue)}"
|
|
485
487
|
?disabled="${this.disabled || this.readOnly}"
|
|
486
488
|
@input="${this.#onInput}"
|
|
487
489
|
@change="${this.#onChange}"
|
|
@@ -490,7 +492,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
490
492
|
@focus="${this.#h.thumb.show}"
|
|
491
493
|
@blur="${this.#h.thumb.hide}"
|
|
492
494
|
/>
|
|
493
|
-
${this.#renderFloatingInput(this.#value, this.#
|
|
495
|
+
${this.#renderFloatingInput(this.#value, this.#onThumbFloatingChange, 'thumb', this.#isVisible('thumb'), progress)}
|
|
494
496
|
${this.#renderStepDots()}
|
|
495
497
|
</div>
|
|
496
498
|
`;
|
|
@@ -501,9 +503,9 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
501
503
|
return html `
|
|
502
504
|
<div class="range-wrapper" @click="${this.#onTrackClick}">
|
|
503
505
|
${this.#renderRangeInput('start', this.#rangeTrackBackground(progressStart, progressEnd))}
|
|
504
|
-
${this.#renderFloatingInput(this.#valueStart, this.#
|
|
506
|
+
${this.#renderFloatingInput(this.#valueStart, this.#onStartThumbFloatingChange, 'startThumb', this.#isVisible('startThumb'), progressStart)}
|
|
505
507
|
${this.#renderRangeInput('end')}
|
|
506
|
-
${this.#renderFloatingInput(this.#valueEnd, this.#
|
|
508
|
+
${this.#renderFloatingInput(this.#valueEnd, this.#onEndThumbFloatingChange, 'endThumb', this.#isVisible('endThumb'), progressEnd)}
|
|
507
509
|
${this.#renderStepDots()}
|
|
508
510
|
</div>
|
|
509
511
|
`;
|
|
@@ -536,10 +538,10 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
536
538
|
/>
|
|
537
539
|
`;
|
|
538
540
|
}
|
|
539
|
-
#renderFloatingInput(val,
|
|
541
|
+
#renderFloatingInput(val, onFloatingChange, flag, visible, progress) {
|
|
540
542
|
const h = this.#h[flag];
|
|
541
543
|
// type="text" in steps mode to allow label and stepParser input.
|
|
542
|
-
// live() required:
|
|
544
|
+
// live() required: commits that snap/clamp to the current value skip reactive updates, so Lit won't re-sync without it.
|
|
543
545
|
const ariaLabel = flag === 'startThumb' ? 'Range start value' : flag === 'endThumb' ? 'Range end value' : 'Slider value';
|
|
544
546
|
return html `
|
|
545
547
|
<div
|
|
@@ -557,7 +559,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
557
559
|
.step="${this.#stepsMode ? '' : this.step > 0 ? String(this.step) : '1'}"
|
|
558
560
|
?disabled="${this.disabled}"
|
|
559
561
|
?readonly="${this.readOnly}"
|
|
560
|
-
@
|
|
562
|
+
@keydown="${this.#onFloatingInputKeydown}"
|
|
561
563
|
@change="${onFloatingChange}"
|
|
562
564
|
@focus="${h.focus}"
|
|
563
565
|
@blur="${h.blur}"
|
|
@@ -665,19 +667,19 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
665
667
|
return;
|
|
666
668
|
}
|
|
667
669
|
const input = e.target;
|
|
668
|
-
const entry = this.#thumbInputState.get(flag);
|
|
669
|
-
clearTimeout(entry.debounceTimer);
|
|
670
|
-
entry.debounceTimer = undefined;
|
|
671
670
|
if (input.value === '') {
|
|
672
671
|
input.value = this.#currentValueForFlag(flag);
|
|
673
672
|
return;
|
|
674
673
|
}
|
|
674
|
+
const before = this.#currentValueForFlag(flag);
|
|
675
675
|
if (this.#stepsMode) {
|
|
676
676
|
const resolved = this.#resolveFloatingInput(input.value);
|
|
677
677
|
if (resolved !== null) {
|
|
678
678
|
setter(resolved);
|
|
679
679
|
this.requestUpdate();
|
|
680
|
-
|
|
680
|
+
if (this.#currentValueForFlag(flag) !== before) {
|
|
681
|
+
dispatch();
|
|
682
|
+
}
|
|
681
683
|
}
|
|
682
684
|
else {
|
|
683
685
|
input.value = this.#currentValueForFlag(flag);
|
|
@@ -686,39 +688,9 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
|
|
|
686
688
|
else {
|
|
687
689
|
setter(this.#processFloatingValue(parseFloat(input.value)));
|
|
688
690
|
this.requestUpdate();
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
}
|
|
693
|
-
#onFloatingInput(flag, setter) {
|
|
694
|
-
return (e) => {
|
|
695
|
-
if (this.readOnly) {
|
|
696
|
-
return;
|
|
697
|
-
}
|
|
698
|
-
const input = e.target;
|
|
699
|
-
const entry = this.#thumbInputState.get(flag);
|
|
700
|
-
clearTimeout(entry.debounceTimer);
|
|
701
|
-
entry.debounceTimer = undefined;
|
|
702
|
-
if (input.value === '') {
|
|
703
|
-
return;
|
|
704
|
-
}
|
|
705
|
-
if (this.#stepsMode) {
|
|
706
|
-
// Capture raw string at event time so the debounce closure reads the right value
|
|
707
|
-
const raw = input.value;
|
|
708
|
-
entry.debounceTimer = setTimeout(() => {
|
|
709
|
-
const resolved = this.#resolveFloatingInput(raw);
|
|
710
|
-
if (resolved !== null) {
|
|
711
|
-
setter(resolved);
|
|
712
|
-
this.requestUpdate();
|
|
713
|
-
}
|
|
714
|
-
}, 500);
|
|
715
|
-
}
|
|
716
|
-
else {
|
|
717
|
-
const raw = parseFloat(input.value);
|
|
718
|
-
entry.debounceTimer = setTimeout(() => {
|
|
719
|
-
setter(this.#processFloatingValue(raw));
|
|
720
|
-
this.requestUpdate();
|
|
721
|
-
}, 500);
|
|
691
|
+
if (this.#currentValueForFlag(flag) !== before) {
|
|
692
|
+
dispatch();
|
|
693
|
+
}
|
|
722
694
|
}
|
|
723
695
|
};
|
|
724
696
|
}
|