poe-svelte-ui-lib 1.2.27 → 1.2.29
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/Slider/Slider.svelte +14 -8
- package/package.json +1 -1
|
@@ -87,6 +87,7 @@
|
|
|
87
87
|
>
|
|
88
88
|
{#if isRange}
|
|
89
89
|
{@const userAgent = navigator.userAgent}
|
|
90
|
+
|
|
90
91
|
<div class="flex w-full">
|
|
91
92
|
<input
|
|
92
93
|
type="range"
|
|
@@ -99,6 +100,7 @@
|
|
|
99
100
|
: (e) => {
|
|
100
101
|
const newValue = Math.min(Number((e.target as HTMLInputElement).value), upperValue)
|
|
101
102
|
lowerValue = roundToClean(newValue == upperValue ? upperValue - number.step : newValue)
|
|
103
|
+
onUpdate([lowerValue, upperValue])
|
|
102
104
|
}}
|
|
103
105
|
onmousedown={() => (activeRound = 'ceil')}
|
|
104
106
|
{disabled}
|
|
@@ -113,7 +115,7 @@
|
|
|
113
115
|
[&::-webkit-slider-thumb]:size-4
|
|
114
116
|
[&::-webkit-slider-thumb]:cursor-pointer
|
|
115
117
|
[&::-webkit-slider-thumb]:rounded-full
|
|
116
|
-
|
|
118
|
+
[&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
|
|
117
119
|
${
|
|
118
120
|
userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
|
|
119
121
|
? '[&::-webkit-slider-thumb]:ring-[6.5px]'
|
|
@@ -132,6 +134,7 @@
|
|
|
132
134
|
`[&::-moz-range-thumb]:shadow-[calc(100rem+0.5rem)_0_0_100rem]
|
|
133
135
|
[&::-webkit-slider-thumb]:shadow-[calc(100rem+0.5rem)_0_0_100rem]`,
|
|
134
136
|
)}
|
|
137
|
+
style="color: var(--bg-color); flex-basis: {`calc(${(centerNum / number.maxNum) * 100}% + 2rem + 5px)`};"
|
|
135
138
|
/>
|
|
136
139
|
<input
|
|
137
140
|
type="range"
|
|
@@ -144,11 +147,12 @@
|
|
|
144
147
|
: (e) => {
|
|
145
148
|
const newValue = Math.max(Number((e.target as HTMLInputElement).value), lowerValue)
|
|
146
149
|
upperValue = roundToClean(newValue == lowerValue ? newValue + number.step : upperValue)
|
|
150
|
+
onUpdate([lowerValue, upperValue])
|
|
147
151
|
}}
|
|
148
152
|
onmousedown={() => (activeRound = 'floor')}
|
|
149
153
|
{disabled}
|
|
150
154
|
class={twMerge(
|
|
151
|
-
`
|
|
155
|
+
`basis-[calc(${100 - (centerNum / number.maxNum) * 100}%+2rem+5px)] h-8 w-full appearance-none overflow-hidden
|
|
152
156
|
accent-(--back-color)
|
|
153
157
|
[&::-webkit-slider-runnable-track]:rounded-r-full
|
|
154
158
|
[&::-webkit-slider-runnable-track]:bg-(--gray-color)
|
|
@@ -158,7 +162,7 @@
|
|
|
158
162
|
[&::-webkit-slider-thumb]:size-4
|
|
159
163
|
[&::-webkit-slider-thumb]:cursor-pointer
|
|
160
164
|
[&::-webkit-slider-thumb]:rounded-full
|
|
161
|
-
|
|
165
|
+
[&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
|
|
162
166
|
${
|
|
163
167
|
userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
|
|
164
168
|
? '[&::-webkit-slider-thumb]:ring-[6.5px]'
|
|
@@ -177,6 +181,7 @@
|
|
|
177
181
|
`[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]
|
|
178
182
|
[&::-webkit-slider-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]`,
|
|
179
183
|
)}
|
|
184
|
+
style="color: var(--bg-color); flex-basis: {`calc(${(1 - centerNum / number.maxNum) * 100}% + 2rem + 5px)`};"
|
|
180
185
|
/>
|
|
181
186
|
</div>
|
|
182
187
|
{:else}
|
|
@@ -185,8 +190,13 @@
|
|
|
185
190
|
<div class="absolute h-full w-full">
|
|
186
191
|
<input
|
|
187
192
|
type="range"
|
|
193
|
+
min={number.minNum}
|
|
194
|
+
max={number.maxNum}
|
|
195
|
+
step={number.step}
|
|
196
|
+
bind:value={singleValue}
|
|
197
|
+
oninput={() => onUpdate(singleValue)}
|
|
188
198
|
class={twMerge(
|
|
189
|
-
`
|
|
199
|
+
` h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color)
|
|
190
200
|
[&::-webkit-slider-runnable-track]:rounded-full
|
|
191
201
|
[&::-webkit-slider-runnable-track]:bg-(--gray-color)
|
|
192
202
|
[&::-webkit-slider-thumb]:relative
|
|
@@ -215,10 +225,6 @@
|
|
|
215
225
|
`[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]
|
|
216
226
|
[&::-webkit-slider-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]`,
|
|
217
227
|
)}
|
|
218
|
-
min={number.minNum}
|
|
219
|
-
max={number.maxNum}
|
|
220
|
-
step={number.step}
|
|
221
|
-
bind:value={singleValue}
|
|
222
228
|
/>
|
|
223
229
|
</div>
|
|
224
230
|
{/if}
|