@flightlesslabs/dodo-ui 0.12.1 → 0.13.0

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.
Files changed (3) hide show
  1. package/dist/stories/components/Form/RangeSlider/RangeSlider.svelte +32 -19
  2. package/package.json +28 -28
  3. package/src/lib/stories/components/Form/RangeSlider/RangeSlider.svelte +33 -22
package/dist/stories/components/Form/RangeSlider/RangeSlider.svelte CHANGED
@@ -24,22 +24,24 @@ const percentageValue = $derived(((value - min) / (max - min)) * 100);
24
24
  </span>
25
25
  {/if}
26
26
 
27
- <input
28
- type="range"
29
- class="NativeRangeSlider"
30
- {min}
31
- {max}
32
- {step}
33
- {oninput}
34
- {onchange}
35
- {onblur}
36
- {onfocus}
37
- {id}
38
- {name}
39
- {disabled}
40
- bind:this={ref}
41
- bind:value
42
- />
27
+ <div class="RangeSliderContainer">
28
+ <input
29
+ type="range"
30
+ class="NativeRangeSlider"
31
+ {min}
32
+ {max}
33
+ {step}
34
+ {oninput}
35
+ {onchange}
36
+ {onblur}
37
+ {onfocus}
38
+ {id}
39
+ {name}
40
+ {disabled}
41
+ bind:this={ref}
42
+ bind:value
43
+ />
44
+ </div>
43
45
 
44
46
  {#if after}
45
47
  <span class="content--after">
@@ -111,19 +113,21 @@ const percentageValue = $derived(((value - min) / (max - min)) * 100);
111
113
  .dodo-ui-RangeSlider {
112
114
  display: flex;
113
115
  }
116
+ .dodo-ui-RangeSlider .RangeSliderContainer {
117
+ flex: 1;
118
+ display: flex;
119
+ flex-direction: column;
120
+ }
114
121
  .dodo-ui-RangeSlider .NativeRangeSlider {
115
- height: 100%;
116
122
  -webkit-appearance: none;
117
123
  appearance: none;
118
124
  background: transparent;
119
125
  cursor: pointer;
120
- width: 100%;
121
126
  margin: 0;
122
127
  padding: 0;
123
128
  overflow: hidden;
124
129
  display: flex;
125
130
  align-items: center;
126
- flex: 1;
127
131
  }
128
132
  .dodo-ui-RangeSlider .NativeRangeSlider:focus {
129
133
  outline: none;
@@ -149,6 +153,9 @@ const percentageValue = $derived(((value - min) / (max - min)) * 100);
149
153
  justify-content: center;
150
154
  }
151
155
  .dodo-ui-RangeSlider.size--normal {
156
+ min-height: var(--dodo-ui-element-height-normal);
157
+ }
158
+ .dodo-ui-RangeSlider.size--normal .NativeRangeSlider {
152
159
  height: var(--dodo-ui-element-height-normal);
153
160
  }
154
161
  .dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-webkit-slider-runnable-track {
@@ -176,6 +183,9 @@ const percentageValue = $derived(((value - min) / (max - min)) * 100);
176
183
  margin-left: 12px;
177
184
  }
178
185
  .dodo-ui-RangeSlider.size--small {
186
+ min-height: var(--dodo-ui-element-height-small);
187
+ }
188
+ .dodo-ui-RangeSlider.size--small .NativeRangeSlider {
179
189
  height: var(--dodo-ui-element-height-small);
180
190
  }
181
191
  .dodo-ui-RangeSlider.size--small .NativeRangeSlider::-webkit-slider-runnable-track {
@@ -203,6 +213,9 @@ const percentageValue = $derived(((value - min) / (max - min)) * 100);
203
213
  margin-left: 8px;
204
214
  }
205
215
  .dodo-ui-RangeSlider.size--large {
216
+ min-height: var(--dodo-ui-element-height-large);
217
+ }
218
+ .dodo-ui-RangeSlider.size--large .NativeRangeSlider {
206
219
  height: var(--dodo-ui-element-height-large);
207
220
  }
208
221
  .dodo-ui-RangeSlider.size--large .NativeRangeSlider::-webkit-slider-runnable-track {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flightlesslabs/dodo-ui",
3
- "version": "0.12.1",
3
+ "version": "0.13.0",
4
4
  "homepage": "https://flightlesslabs.github.io/dodo-ui",
5
5
  "repository": {
6
6
  "type": "git",
@@ -36,38 +36,38 @@
36
36
  "svelte": "^5.0.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@chromatic-com/storybook": "4.0.0",
40
- "@eslint/compat": "^1.3.0",
41
- "@eslint/js": "^9.29.0",
42
- "@storybook/addon-svelte-csf": "5.0.3",
43
- "@storybook/svelte": "^9.0.10",
44
- "@storybook/sveltekit": "^9.0.10",
39
+ "@chromatic-com/storybook": "4.0.1",
40
+ "@eslint/compat": "^1.3.1",
41
+ "@eslint/js": "^9.32.0",
42
+ "@storybook/addon-docs": "^9.0.18",
43
+ "@storybook/addon-svelte-csf": "5.0.7",
44
+ "@storybook/addon-vitest": "^9.0.18",
45
+ "@storybook/sveltekit": "^9.0.18",
45
46
  "@sveltejs/adapter-static": "^3.0.8",
46
- "@sveltejs/kit": "^2.21.5",
47
- "@sveltejs/package": "^2.3.11",
48
- "@sveltejs/vite-plugin-svelte": "^5.1.0",
49
- "@vitest/browser": "^3.2.3",
50
- "@vitest/coverage-v8": "^3.2.3",
51
- "@vueless/storybook-dark-mode": "^9.0.5",
52
- "eslint": "^9.29.0",
53
- "eslint-config-prettier": "^10.1.5",
54
- "eslint-plugin-svelte": "^3.9.2",
55
- "globals": "^16.2.0",
56
- "playwright": "^1.53.0",
57
- "prettier": "^3.5.3",
47
+ "@sveltejs/kit": "^2.26.1",
48
+ "@sveltejs/package": "^2.4.0",
49
+ "@sveltejs/vite-plugin-svelte": "^6.1.0",
50
+ "@vitest/browser": "^3.2.4",
51
+ "@vitest/coverage-v8": "^3.2.4",
52
+ "@vueless/storybook-dark-mode": "^9.0.6",
53
+ "eslint": "^9.32.0",
54
+ "eslint-config-prettier": "^10.1.8",
55
+ "eslint-plugin-storybook": "9.0.18",
56
+ "eslint-plugin-svelte": "^3.11.0",
57
+ "globals": "^16.3.0",
58
+ "playwright": "^1.54.1",
59
+ "prettier": "^3.6.2",
58
60
  "prettier-plugin-svelte": "^3.4.0",
59
61
  "publint": "^0.3.12",
60
62
  "sass": "^1.89.2",
61
- "storybook": "^9.0.10",
62
- "svelte": "^5.34.3",
63
- "svelte-check": "^4.2.1",
63
+ "storybook": "^9.0.18",
64
+ "svelte": "^5.37.0",
65
+ "svelte-check": "^4.3.0",
64
66
  "svelte-preprocess": "^6.0.3",
65
67
  "typescript": "^5.8.3",
66
- "typescript-eslint": "^8.34.0",
67
- "vite": "^6.3.5",
68
- "vitest": "^3.2.3",
69
- "@storybook/addon-docs": "^9.0.10",
70
- "@storybook/addon-vitest": "^9.0.10"
68
+ "typescript-eslint": "^8.38.0",
69
+ "vite": "^7.0.6",
70
+ "vitest": "^3.2.4"
71
71
  },
72
72
  "keywords": [
73
73
  "svelte"
@@ -77,7 +77,7 @@
77
77
  "pnpm": "10.12.1"
78
78
  },
79
79
  "dependencies": {
80
- "@iconify/svelte": "^5.0.0",
80
+ "@iconify/svelte": "^5.0.1",
81
81
  "dayjs": "^1.11.13"
82
82
  },
83
83
  "scripts": {
package/src/lib/stories/components/Form/RangeSlider/RangeSlider.svelte CHANGED
@@ -91,22 +91,24 @@
91
91
  </span>
92
92
  {/if}
93
93
 
94
- <input
95
- type="range"
96
- class="NativeRangeSlider"
97
- {min}
98
- {max}
99
- {step}
100
- {oninput}
101
- {onchange}
102
- {onblur}
103
- {onfocus}
104
- {id}
105
- {name}
106
- {disabled}
107
- bind:this={ref}
108
- bind:value
109
- />
94
+ <div class="RangeSliderContainer">
95
+ <input
96
+ type="range"
97
+ class="NativeRangeSlider"
98
+ {min}
99
+ {max}
100
+ {step}
101
+ {oninput}
102
+ {onchange}
103
+ {onblur}
104
+ {onfocus}
105
+ {id}
106
+ {name}
107
+ {disabled}
108
+ bind:this={ref}
109
+ bind:value
110
+ />
111
+ </div>
110
112
 
111
113
  {#if after}
112
114
  <span class="content--after">
@@ -147,19 +149,22 @@
147
149
  .dodo-ui-RangeSlider {
148
150
  display: flex;
149
151
 
152
+ .RangeSliderContainer {
153
+ flex: 1;
154
+ display: flex;
155
+ flex-direction: column;
156
+ }
157
+
150
158
  .NativeRangeSlider {
151
- height: 100%;
152
159
  -webkit-appearance: none;
153
160
  appearance: none;
154
161
  background: transparent;
155
162
  cursor: pointer;
156
- width: 100%;
157
163
  margin: 0;
158
164
  padding: 0;
159
165
  overflow: hidden;
160
166
  display: flex;
161
167
  align-items: center;
162
- flex: 1;
163
168
 
164
169
  &:focus {
165
170
  outline: none;
@@ -194,8 +199,10 @@
194
199
 
195
200
  &.size {
196
201
  &--normal {
197
- height: var(--dodo-ui-element-height-normal);
202
+ min-height: var(--dodo-ui-element-height-normal);
198
203
  .NativeRangeSlider {
204
+ height: var(--dodo-ui-element-height-normal);
205
+
199
206
  &::-webkit-slider-runnable-track {
200
207
  height: var(--dodo-ui-track-element-height-normal);
201
208
  }
@@ -233,9 +240,11 @@
233
240
  }
234
241
 
235
242
  &--small {
236
- height: var(--dodo-ui-element-height-small);
243
+ min-height: var(--dodo-ui-element-height-small);
237
244
 
238
245
  .NativeRangeSlider {
246
+ height: var(--dodo-ui-element-height-small);
247
+
239
248
  &::-webkit-slider-runnable-track {
240
249
  height: var(--dodo-ui-track-element-height-small);
241
250
  }
@@ -273,9 +282,11 @@
273
282
  }
274
283
 
275
284
  &--large {
276
- height: var(--dodo-ui-element-height-large);
285
+ min-height: var(--dodo-ui-element-height-large);
277
286
 
278
287
  .NativeRangeSlider {
288
+ height: var(--dodo-ui-element-height-large);
289
+
279
290
  &::-webkit-slider-runnable-track {
280
291
  height: var(--dodo-ui-track-element-height-large);
281
292
  }