flowbite-svelte 1.17.2 → 1.17.3
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.
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<script lang="ts" generics="T">
|
|
2
2
|
import clsx from "clsx";
|
|
3
|
-
import type { MultiSelectProps, SelectOptionType } from "../..";
|
|
3
|
+
import type { MultiSelectProps, SelectOptionType, SizeType } from "../..";
|
|
4
4
|
import Badge from "../../badge/Badge.svelte";
|
|
5
5
|
import CloseButton from "../../utils/CloseButton.svelte";
|
|
6
6
|
import { multiSelect } from "./theme";
|
|
7
7
|
import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
|
|
8
|
-
import { onMount } from "svelte";
|
|
8
|
+
import { getContext, onMount } from "svelte";
|
|
9
9
|
import { createDismissableContext } from "../../utils/dismissable";
|
|
10
10
|
|
|
11
11
|
// Consider reusing that component - https://svelecte.vercel.app/
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
let selectItems = $derived(items.filter((x) => value.includes(x.value)));
|
|
39
39
|
let show: boolean = $state(false);
|
|
40
|
+
let group: { size: SizeType } = getContext("group");
|
|
40
41
|
|
|
41
42
|
// Active item
|
|
42
43
|
let activeIndex: number | null = $state(null);
|
|
@@ -193,7 +194,7 @@
|
|
|
193
194
|
};
|
|
194
195
|
});
|
|
195
196
|
|
|
196
|
-
const { base, dropdown, item: dropdownItem, close, select, placeholder: placeholderSpan, svg } = multiSelect({ disabled });
|
|
197
|
+
const { base, dropdown, item: dropdownItem, close, select, placeholder: placeholderSpan, svg } = multiSelect({ disabled, grouped: !!group });
|
|
197
198
|
</script>
|
|
198
199
|
|
|
199
200
|
<select {name} {form} {required} {autocomplete} {value} hidden multiple {onchange}>
|
|
@@ -212,7 +213,7 @@
|
|
|
212
213
|
{#if children}
|
|
213
214
|
{@render children({ item, clear: () => clearThisOption(item) })}
|
|
214
215
|
{:else}
|
|
215
|
-
<Badge color="gray" large={size === "lg"} dismissable params={{ duration: 100 }} onclose={() => clearThisOption(item)} class={[disabled && "pointer-events-none"]}>
|
|
216
|
+
<Badge color="gray" large={size === "lg"} dismissable params={{ duration: 100 }} onclose={() => clearThisOption(item)} class={["mx-0.5 px-2 py-0", disabled && "pointer-events-none"]}>
|
|
216
217
|
{item.name}
|
|
217
218
|
</Badge>
|
|
218
219
|
{/if}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
<script lang="ts" generics="T">
|
|
2
2
|
import { select as selectCls } from "./theme";
|
|
3
3
|
import clsx from "clsx";
|
|
4
|
-
import type { SelectProps } from "../..";
|
|
4
|
+
import type { SelectProps, SizeType } from "../..";
|
|
5
5
|
import CloseButton from "../../utils/CloseButton.svelte";
|
|
6
6
|
import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
|
|
7
7
|
import { createDismissableContext } from "../../utils/dismissable";
|
|
8
|
+
import { getContext } from "svelte";
|
|
8
9
|
|
|
9
10
|
let { children, items, value = $bindable(), elementRef = $bindable(), underline, size = "md", disabled, placeholder = "Choose option ...", clearable, clearableColor = "none", clearableOnClick, onClear, clearableSvgClass, clearableClass, selectClass, class: className, classes, ...restProps }: SelectProps<T> = $props();
|
|
10
11
|
|
|
@@ -14,7 +15,8 @@
|
|
|
14
15
|
|
|
15
16
|
const theme = getTheme("select");
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
let group: { size: SizeType } = getContext("group");
|
|
19
|
+
const { base, select, close } = $derived(selectCls({ underline, size, disabled, grouped: !!group }));
|
|
18
20
|
|
|
19
21
|
const clearAll = () => {
|
|
20
22
|
if (elementRef) {
|
|
@@ -28,6 +28,16 @@ export declare const select: import("tailwind-variants").TVReturnType<{
|
|
|
28
28
|
};
|
|
29
29
|
false: {};
|
|
30
30
|
};
|
|
31
|
+
grouped: {
|
|
32
|
+
false: {
|
|
33
|
+
base: string;
|
|
34
|
+
select: string;
|
|
35
|
+
};
|
|
36
|
+
true: {
|
|
37
|
+
base: string;
|
|
38
|
+
select: string;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
31
41
|
}, {
|
|
32
42
|
base: string;
|
|
33
43
|
select: string;
|
|
@@ -59,6 +69,16 @@ export declare const select: import("tailwind-variants").TVReturnType<{
|
|
|
59
69
|
};
|
|
60
70
|
false: {};
|
|
61
71
|
};
|
|
72
|
+
grouped: {
|
|
73
|
+
false: {
|
|
74
|
+
base: string;
|
|
75
|
+
select: string;
|
|
76
|
+
};
|
|
77
|
+
true: {
|
|
78
|
+
base: string;
|
|
79
|
+
select: string;
|
|
80
|
+
};
|
|
81
|
+
};
|
|
62
82
|
}, {
|
|
63
83
|
base: string;
|
|
64
84
|
select: string;
|
|
@@ -90,6 +110,16 @@ export declare const select: import("tailwind-variants").TVReturnType<{
|
|
|
90
110
|
};
|
|
91
111
|
false: {};
|
|
92
112
|
};
|
|
113
|
+
grouped: {
|
|
114
|
+
false: {
|
|
115
|
+
base: string;
|
|
116
|
+
select: string;
|
|
117
|
+
};
|
|
118
|
+
true: {
|
|
119
|
+
base: string;
|
|
120
|
+
select: string;
|
|
121
|
+
};
|
|
122
|
+
};
|
|
93
123
|
}, {
|
|
94
124
|
base: string;
|
|
95
125
|
select: string;
|
|
@@ -122,6 +152,16 @@ export declare const multiSelect: import("tailwind-variants").TVReturnType<{
|
|
|
122
152
|
item: string;
|
|
123
153
|
};
|
|
124
154
|
};
|
|
155
|
+
grouped: {
|
|
156
|
+
false: {
|
|
157
|
+
base: string;
|
|
158
|
+
select: string;
|
|
159
|
+
};
|
|
160
|
+
true: {
|
|
161
|
+
base: string;
|
|
162
|
+
select: string;
|
|
163
|
+
};
|
|
164
|
+
};
|
|
125
165
|
}, {
|
|
126
166
|
base: string;
|
|
127
167
|
select: string;
|
|
@@ -157,6 +197,16 @@ export declare const multiSelect: import("tailwind-variants").TVReturnType<{
|
|
|
157
197
|
item: string;
|
|
158
198
|
};
|
|
159
199
|
};
|
|
200
|
+
grouped: {
|
|
201
|
+
false: {
|
|
202
|
+
base: string;
|
|
203
|
+
select: string;
|
|
204
|
+
};
|
|
205
|
+
true: {
|
|
206
|
+
base: string;
|
|
207
|
+
select: string;
|
|
208
|
+
};
|
|
209
|
+
};
|
|
160
210
|
}, {
|
|
161
211
|
base: string;
|
|
162
212
|
select: string;
|
|
@@ -192,6 +242,16 @@ export declare const multiSelect: import("tailwind-variants").TVReturnType<{
|
|
|
192
242
|
item: string;
|
|
193
243
|
};
|
|
194
244
|
};
|
|
245
|
+
grouped: {
|
|
246
|
+
false: {
|
|
247
|
+
base: string;
|
|
248
|
+
select: string;
|
|
249
|
+
};
|
|
250
|
+
true: {
|
|
251
|
+
base: string;
|
|
252
|
+
select: string;
|
|
253
|
+
};
|
|
254
|
+
};
|
|
195
255
|
}, {
|
|
196
256
|
base: string;
|
|
197
257
|
select: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { tv } from "tailwind-variants";
|
|
2
2
|
export const select = tv({
|
|
3
3
|
slots: {
|
|
4
|
-
base: "relative",
|
|
4
|
+
base: "relative w-full",
|
|
5
5
|
select: "block w-full rtl:text-right",
|
|
6
6
|
close: "absolute right-8 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black",
|
|
7
7
|
svg: ""
|
|
@@ -9,10 +9,10 @@ export const select = tv({
|
|
|
9
9
|
variants: {
|
|
10
10
|
underline: {
|
|
11
11
|
true: {
|
|
12
|
-
select: "text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-hidden focus:ring-0 focus:border-gray-200 peer px-0!"
|
|
12
|
+
select: "text-gray-500 bg-transparent rounded-none! border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-hidden focus:ring-0 focus:border-gray-200 peer px-0!"
|
|
13
13
|
},
|
|
14
14
|
false: {
|
|
15
|
-
select: "text-gray-900 bg-gray-50 border border-gray-300
|
|
15
|
+
select: "text-gray-900 bg-gray-50 border border-gray-300 focus:outline-hidden focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
16
16
|
}
|
|
17
17
|
},
|
|
18
18
|
size: {
|
|
@@ -25,6 +25,13 @@ export const select = tv({
|
|
|
25
25
|
select: "cursor-not-allowed opacity-50"
|
|
26
26
|
},
|
|
27
27
|
false: {}
|
|
28
|
+
},
|
|
29
|
+
grouped: {
|
|
30
|
+
false: { base: "rounded-lg", select: "rounded-lg" },
|
|
31
|
+
true: {
|
|
32
|
+
base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px group",
|
|
33
|
+
select: "group-first:rounded-s-lg group-last:rounded-e-lg group-not-first:-ms-px h-full"
|
|
34
|
+
}
|
|
28
35
|
}
|
|
29
36
|
},
|
|
30
37
|
defaultVariants: {
|
|
@@ -34,8 +41,8 @@ export const select = tv({
|
|
|
34
41
|
});
|
|
35
42
|
export const multiSelect = tv({
|
|
36
43
|
slots: {
|
|
37
|
-
base: "relative border border-gray-300 flex items-center
|
|
38
|
-
select: "
|
|
44
|
+
base: "relative border border-gray-300 w-full flex items-center gap-2 dark:border-gray-600 ring-primary-500 dark:ring-primary-500 focus-visible:outline-hidden",
|
|
45
|
+
select: "",
|
|
39
46
|
dropdown: "absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 start-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full",
|
|
40
47
|
item: "py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600",
|
|
41
48
|
close: "p-0 focus:ring-gray-400 dark:text-white",
|
|
@@ -66,6 +73,13 @@ export const multiSelect = tv({
|
|
|
66
73
|
true: {
|
|
67
74
|
item: "bg-gray-100 text-black font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white"
|
|
68
75
|
}
|
|
76
|
+
},
|
|
77
|
+
grouped: {
|
|
78
|
+
false: { base: "rounded-lg", select: "rounded-lg" },
|
|
79
|
+
true: {
|
|
80
|
+
base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px group",
|
|
81
|
+
select: "group-first:rounded-s-lg group-last:rounded-e-lg group-not-first:-ms-px h-full"
|
|
82
|
+
}
|
|
69
83
|
}
|
|
70
84
|
},
|
|
71
85
|
// Add compoundVariants here
|