Skip to content

Commit 6a878e8

Browse files
shinokadashinokada
committed
feat: add variants to range
1 parent ccbd652 commit 6a878e8

File tree

18 files changed

+199
-82
lines changed

18 files changed

+199
-82
lines changed

‎src/lib/forms/range/Range.svelte‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,23 @@
11
<script lang="ts">
2-
import type { HTMLInputAttributes } from 'svelte/elements';
3-
4-
interface Props extends HTMLInputAttributes {
5-
value?: any;
6-
rangeSize?: 'sm' | 'md' | 'lg';
7-
inputClass?: string | undefined | null;
8-
}
9-
import { twMerge } from 'tailwind-merge';
10-
// import '$lib/style.css';
2+
import { range, type RangeProps as Props } from './';
113
124
let {
135
value = $bindable(),
6+
appearance = 'none',
7+
color = 'primary',
148
rangeSize = 'md',
159
inputClass,
1610
...attributes
1711
}: Props = $props();
18-
19-
const sizes = {
20-
sm: 'h-1 range-sm',
21-
md: 'h-2',
22-
lg: 'h-3 range-lg'
23-
};
24-
let inputCls: string = twMerge(
25-
'w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700',
26-
// range accent-red-500
27-
sizes[rangeSize] ?? sizes.md,
28-
inputClass
29-
);
12+
13+
const inputCls = $derived(range({ class: inputClass, appearance, color, size: rangeSize }))
14+
// let inputCls: string = twMerge(
15+
// 'w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700',
16+
// // range accent-red-500
17+
// appearance === 'appearance-none' ? '' : 'range accent-red-500',
18+
// sizes[rangeSize] ?? sizes.md,
19+
// inputClass
20+
// );
3021
</script>
3122

3223
<input type="range" bind:value {...attributes} class={inputCls} />

‎src/lib/forms/range/index.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,17 @@
11
import Range from './Range.svelte';
2-
export { Range };
2+
import { range } from './theme'
3+
import type { HTMLInputAttributes } from 'svelte/elements';
4+
import type { VariantProps } from 'tailwind-variants';
5+
6+
type ColorType = VariantProps<typeof range>['color'];
7+
type AppearanceType = VariantProps<typeof range>['appearance'];
8+
type RangeType = VariantProps<typeof range>['size'];
9+
10+
interface RangeProps extends HTMLInputAttributes {
11+
value?: any;
12+
appearance?: AppearanceType;
13+
color?: ColorType;
14+
rangeSize?: RangeType;
15+
inputClass?: string | undefined | null;
16+
}
17+
export { Range, range, type RangeProps };

‎src/lib/forms/range/theme.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { tv } from 'tailwind-variants';
2+
3+
export const range = tv({
4+
base: 'w-full bg-gray-200 rounded-lg cursor-pointer dark:bg-gray-700',
5+
variants: {
6+
size: {
7+
sm: 'h-1 range-sm',
8+
md: 'h-2',
9+
lg: 'h-3 range-lg'
10+
},
11+
color: {
12+
// other colors do not work
13+
gray: '',
14+
red: '',
15+
blue: '',
16+
indigo: '',
17+
violet: '',
18+
purple: '',
19+
fuchsia: '',
20+
pink: '',
21+
rose: '',
22+
},
23+
appearance: {
24+
auto: 'range accent-red-500',
25+
none: 'appearance-none'
26+
}
27+
},
28+
compoundVariants: [
29+
{
30+
appearance: 'auto',
31+
color: 'gray',
32+
class: 'accent-gray-500'
33+
},
34+
{
35+
appearance: 'auto',
36+
color: 'red',
37+
class: 'accent-red-500'
38+
},
39+
{
40+
appearance: 'auto',
41+
color: 'blue',
42+
class: 'accent-blue-500'
43+
},
44+
{
45+
appearance: 'auto',
46+
color: 'indigo',
47+
class: 'accent-indigo-500'
48+
},
49+
{
50+
appearance: 'auto',
51+
color: 'violet',
52+
class: 'accent-violet-500'
53+
},
54+
{
55+
appearance: 'auto',
56+
color: 'purple',
57+
class: 'accent-purple-500'
58+
},
59+
{
60+
appearance: 'auto',
61+
color: 'fuchsia',
62+
class: 'accent-fuchsia-500'
63+
},
64+
{
65+
appearance: 'auto',
66+
color: 'pink',
67+
class: 'accent-pink-500'
68+
},
69+
{
70+
appearance: 'auto',
71+
color: 'rose',
72+
class: 'accent-rose-500'
73+
}
74+
]
75+
})

‎src/routes/components/alert/+page.svelte‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
</div>
6565

6666
<div class="flex flex-wrap space-x-4">
67-
<Label class="mb-4 w-full font-bold">Change color</Label>
67+
<Label class="mb-4 w-full font-bold">Color</Label>
6868
{#each colors as colorOption}
6969
<Radio
7070
labelClass="w-24 my-1"
@@ -97,7 +97,7 @@
9797
</div>
9898

9999
<div class="flex flex-wrap space-x-4">
100-
<Label class="mb-4 w-full font-bold">Change color</Label>
100+
<Label class="mb-4 w-full font-bold">Color</Label>
101101
{#each colors as colorOption}
102102
<Radio
103103
labelClass="w-24 my-1"
@@ -126,7 +126,7 @@
126126
</div>
127127

128128
<div class="flex flex-wrap space-x-4">
129-
<Label class="mb-4 w-full font-bold">Change color</Label>
129+
<Label class="mb-4 w-full font-bold">Color</Label>
130130
{#each colors as colorOption}
131131
<Radio
132132
labelClass="w-24 my-1"
@@ -159,7 +159,7 @@
159159
</div>
160160

161161
<div class="flex flex-wrap space-x-4">
162-
<Label class="mb-4 w-full font-bold">Change color</Label>
162+
<Label class="mb-4 w-full font-bold">Color</Label>
163163
{#each colors as colorOption}
164164
<Radio
165165
labelClass="w-24 my-1"
@@ -195,7 +195,7 @@
195195
</div>
196196

197197
<div class="flex flex-wrap space-x-4">
198-
<Label class="mb-4 w-full font-bold">Change color</Label>
198+
<Label class="mb-4 w-full font-bold">Color</Label>
199199
{#each colors as colorOption}
200200
<Radio
201201
labelClass="w-24 my-1"
@@ -227,7 +227,7 @@
227227
</div>
228228

229229
<div class="flex flex-wrap space-x-4">
230-
<Label class="mb-4 w-full font-bold">Change color</Label>
230+
<Label class="mb-4 w-full font-bold">Color</Label>
231231
{#each colors as colorOption}
232232
<Radio
233233
labelClass="w-24 my-1"
@@ -274,7 +274,7 @@
274274
</div>
275275

276276
<div class="flex flex-wrap space-x-4">
277-
<Label class="mb-4 w-full font-bold">Change color</Label>
277+
<Label class="mb-4 w-full font-bold">Color</Label>
278278
{#each colors as colorOption}
279279
<Radio
280280
labelClass="w-24 my-1"
@@ -299,7 +299,7 @@
299299
</div>
300300

301301
<div class="flex flex-wrap space-x-4">
302-
<Label class="mb-4 w-full font-bold">Change color</Label>
302+
<Label class="mb-4 w-full font-bold">Color</Label>
303303
{#each colors as colorOption}
304304
<Radio
305305
labelClass="w-24 my-1"
@@ -352,7 +352,7 @@
352352
</div>
353353

354354
<div class="flex flex-wrap space-x-4">
355-
<Label class="mb-4 w-full font-bold">Change color</Label>
355+
<Label class="mb-4 w-full font-bold">Color</Label>
356356
{#each colors as colorOption}
357357
<Radio
358358
labelClass="w-24 my-1"

‎src/routes/components/badge/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
</div>
108108

109109
<div class="flex flex-wrap space-x-4">
110-
<Label class="mb-4 w-full font-bold">Change color</Label>
110+
<Label class="mb-4 w-full font-bold">Color</Label>
111111
{#each colors as colorOption}
112112
<Radio
113113
labelClass="w-24 my-1"

‎src/routes/components/indicators/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
</div>
7272
<div class="mt-8 space-y-4">
7373
<div class="flex flex-wrap space-x-2">
74-
<Label class="mb-4 w-full font-bold">Change color</Label>
74+
<Label class="mb-4 w-full font-bold">Color</Label>
7575
{#each colors as colorOption}
7676
<Radio
7777
labelClass="w-24 my-1"

‎src/routes/components/spinner/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
<CodeWrapper>
4545
<Spinner color={spinnerColor} />
4646
<div class="mt-8 flex flex-wrap space-x-4">
47-
<Label class="mb-4 w-full font-bold">Change color</Label>
47+
<Label class="mb-4 w-full font-bold">Color</Label>
4848
{#each colors as color}
4949
<Radio
5050
labelClass="w-24 my-1"

‎src/routes/forms/checkbox/+page.svelte‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,12 @@
4242
<H2>Colors</H2>
4343
<CodeWrapper class="space-y-4">
4444
<Checkbox color={checkboxColor} checked>Default checkbox</Checkbox>
45+
<Label class="flex items-center">
46+
<Checkbox checked class="text-sky-400 focus:ring-pink-500" />
47+
Your custom color
48+
</Label>
4549
<div class="flex flex-wrap space-x-4">
46-
<Label class="mb-4 w-full font-bold">Change color</Label>
50+
<Label class="mb-4 w-full font-bold">Color</Label>
4751
{#each colors as colorOption}
4852
<Radio
4953
labelClass="w-24 my-1"
@@ -54,6 +58,7 @@
5458
{/each}
5559
</div>
5660
</CodeWrapper>
61+
<HighlightCompo code={modules['./md/colors.md'] as string} />
5762

5863
<H2>Disabled state</H2>
5964
<CodeWrapper class="space-y-4">

‎src/routes/forms/checkbox/md/bordered.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="rounded border border-gray-200 dark:border-gray-700">
2-
<Checkbox labelclass="w-full p-4">Default radio</Checkbox>
2+
<Checkbox groupLabelClass="w-full p-4">Default radio</Checkbox>
33
</div>
44
<div class="rounded border border-gray-200 dark:border-gray-700">
5-
<Checkbox checked labelclass="w-full p-4">Checked state</Checkbox>
5+
<Checkbox checked groupLabelClass="w-full p-4">Checked state</Checkbox>
66
</div>

‎src/routes/forms/checkbox/md/checkbox-list-group.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
<p class="mb-4 font-semibold text-gray-900 dark:text-white">Technology</p>
2-
<ul class="w-48 bg-white rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-600 divide-y divide-gray-200 dark:divide-gray-600">
3-
<li><Checkbox checked labelclass="p-3">svelte</Checkbox></li>
4-
<li><Checkbox labelclass="p-3">Vue JS</Checkbox></li>
5-
<li><Checkbox labelclass="p-3">React</Checkbox></li>
6-
<li><Checkbox labelclass="p-3">Angular</Checkbox></li>
1+
<ul
2+
class="w-48 divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-800"
3+
>
4+
<li><Checkbox checked groupLabelClass="p-3">svelte</Checkbox></li>
5+
<li><Checkbox groupLabelClass="p-3">Vue JS</Checkbox></li>
6+
<li><Checkbox groupLabelClass="p-3">React</Checkbox></li>
7+
<li><Checkbox groupLabelClass="p-3">Angular</Checkbox></li>
78
</ul>

0 commit comments

Comments
 (0)