@kayord/ui 0.13.13 → 0.13.15
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/components/custom/combobox/Combobox.svelte +99 -0
- package/dist/components/custom/combobox/Combobox.svelte.d.ts +16 -0
- package/dist/components/custom/combobox/index.d.ts +1 -0
- package/dist/components/custom/combobox/index.js +1 -0
- package/dist/components/custom/index.d.ts +1 -0
- package/dist/components/custom/index.js +1 -0
- package/package.json +11 -11
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { buttonVariants, Command, Popover } from "../../..";
|
|
3
|
+
import { cn } from "../../../utils";
|
|
4
|
+
import { CheckIcon, ChevronsUpDown } from "lucide-svelte";
|
|
5
|
+
import { tick } from "svelte";
|
|
6
|
+
import Loader from "../loader/Loader.svelte";
|
|
7
|
+
|
|
8
|
+
interface Props {
|
|
9
|
+
value?: string;
|
|
10
|
+
name: string;
|
|
11
|
+
items: Array<{
|
|
12
|
+
value: string;
|
|
13
|
+
label: string;
|
|
14
|
+
}>;
|
|
15
|
+
open?: boolean;
|
|
16
|
+
class?: string;
|
|
17
|
+
isLoading?: boolean;
|
|
18
|
+
shouldFilter?: boolean;
|
|
19
|
+
search?: string;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
let {
|
|
23
|
+
value = $bindable(),
|
|
24
|
+
name,
|
|
25
|
+
open = $bindable(false),
|
|
26
|
+
class: className,
|
|
27
|
+
items,
|
|
28
|
+
isLoading = false,
|
|
29
|
+
shouldFilter = true,
|
|
30
|
+
search = $bindable(""),
|
|
31
|
+
...props
|
|
32
|
+
}: Props = $props();
|
|
33
|
+
|
|
34
|
+
const itemSelect = $derived.by(() => {
|
|
35
|
+
const selectItem = items.find((f) => f.value === value);
|
|
36
|
+
if (selectItem == null) return `Select ${name}...`;
|
|
37
|
+
return selectItem.label;
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
let triggerRef = $state<HTMLButtonElement>(null!);
|
|
41
|
+
|
|
42
|
+
function closeAndFocusTrigger() {
|
|
43
|
+
open = false;
|
|
44
|
+
tick().then(() => {
|
|
45
|
+
triggerRef.focus();
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<Popover.Root
|
|
51
|
+
bind:open
|
|
52
|
+
onOpenChange={() => {
|
|
53
|
+
if (shouldFilter) search = "";
|
|
54
|
+
}}
|
|
55
|
+
>
|
|
56
|
+
<Popover.Trigger
|
|
57
|
+
bind:ref={triggerRef}
|
|
58
|
+
class={cn(
|
|
59
|
+
buttonVariants({ variant: "outline" }),
|
|
60
|
+
"w-full justify-between",
|
|
61
|
+
!value && "text-muted-foreground",
|
|
62
|
+
className
|
|
63
|
+
)}
|
|
64
|
+
role="combobox"
|
|
65
|
+
{...props}
|
|
66
|
+
>
|
|
67
|
+
{#if isLoading}
|
|
68
|
+
<Loader />
|
|
69
|
+
{:else}
|
|
70
|
+
{itemSelect}
|
|
71
|
+
{/if}
|
|
72
|
+
<ChevronsUpDown class="opacity-50" />
|
|
73
|
+
</Popover.Trigger>
|
|
74
|
+
|
|
75
|
+
<input hidden {value} {name} />
|
|
76
|
+
|
|
77
|
+
<Popover.Content class="w-[--bits-floating-anchor-width] p-0" align="start">
|
|
78
|
+
<Command.Root {shouldFilter}>
|
|
79
|
+
<Command.Input autofocus placeholder={`Search ${name}...`} class="h-9" bind:value={search} />
|
|
80
|
+
<Command.List>
|
|
81
|
+
<Command.Empty>No Results.</Command.Empty>
|
|
82
|
+
<Command.Group>
|
|
83
|
+
{#each items as item (item.value)}
|
|
84
|
+
<Command.Item
|
|
85
|
+
value={item.label}
|
|
86
|
+
onSelect={() => {
|
|
87
|
+
value = item.value;
|
|
88
|
+
closeAndFocusTrigger();
|
|
89
|
+
}}
|
|
90
|
+
>
|
|
91
|
+
{item.label}
|
|
92
|
+
<CheckIcon class={cn("ml-auto", item.value !== value && "text-transparent")} />
|
|
93
|
+
</Command.Item>
|
|
94
|
+
{/each}
|
|
95
|
+
</Command.Group>
|
|
96
|
+
</Command.List>
|
|
97
|
+
</Command.Root>
|
|
98
|
+
</Popover.Content>
|
|
99
|
+
</Popover.Root>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
interface Props {
|
|
2
|
+
value?: string;
|
|
3
|
+
name: string;
|
|
4
|
+
items: Array<{
|
|
5
|
+
value: string;
|
|
6
|
+
label: string;
|
|
7
|
+
}>;
|
|
8
|
+
open?: boolean;
|
|
9
|
+
class?: string;
|
|
10
|
+
isLoading?: boolean;
|
|
11
|
+
shouldFilter?: boolean;
|
|
12
|
+
search?: string;
|
|
13
|
+
}
|
|
14
|
+
declare const Combobox: import("svelte").Component<Props, {}, "search" | "value" | "open">;
|
|
15
|
+
type Combobox = ReturnType<typeof Combobox>;
|
|
16
|
+
export default Combobox;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Combobox } from "./Combobox.svelte";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Combobox } from "./Combobox.svelte";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.13.
|
|
4
|
+
"version": "0.13.15",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@internationalized/date": "^3.7.0",
|
|
37
|
-
"bits-ui": "1.0.0-next.
|
|
37
|
+
"bits-ui": "1.0.0-next.87",
|
|
38
38
|
"clsx": "^2.1.1",
|
|
39
39
|
"embla-carousel-svelte": "8.5.2",
|
|
40
40
|
"formsnap": "2.0.0",
|
|
@@ -48,32 +48,32 @@
|
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@kayord/tw-plugin": "^1.0.3",
|
|
50
50
|
"@sveltejs/adapter-auto": "^4.0.0",
|
|
51
|
-
"@sveltejs/kit": "^2.
|
|
52
|
-
"@sveltejs/package": "^2.3.
|
|
51
|
+
"@sveltejs/kit": "^2.17.1",
|
|
52
|
+
"@sveltejs/package": "^2.3.10",
|
|
53
53
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
54
54
|
"@testing-library/jest-dom": "^6.6.3",
|
|
55
55
|
"@testing-library/svelte": "^5.2.6",
|
|
56
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
57
|
-
"@typescript-eslint/parser": "^8.
|
|
56
|
+
"@typescript-eslint/eslint-plugin": "^8.23.0",
|
|
57
|
+
"@typescript-eslint/parser": "^8.23.0",
|
|
58
58
|
"autoprefixer": "^10.4.20",
|
|
59
59
|
"eslint": "^9.19.0",
|
|
60
60
|
"eslint-config-prettier": "^10.0.1",
|
|
61
61
|
"eslint-plugin-svelte": "^2.46.1",
|
|
62
|
-
"happy-dom": "^
|
|
62
|
+
"happy-dom": "^17.0.0",
|
|
63
63
|
"lucide-svelte": "^0.474.0",
|
|
64
64
|
"postcss": "^8.5.1",
|
|
65
65
|
"prettier": "^3.4.2",
|
|
66
66
|
"prettier-plugin-svelte": "^3.3.3",
|
|
67
67
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
68
|
-
"publint": "^0.3.
|
|
69
|
-
"svelte": "^5.19.
|
|
68
|
+
"publint": "^0.3.4",
|
|
69
|
+
"svelte": "^5.19.9",
|
|
70
70
|
"svelte-check": "^4.1.4",
|
|
71
71
|
"tailwindcss": "^3.4.17",
|
|
72
72
|
"tailwindcss-animate": "^1.0.7",
|
|
73
73
|
"tslib": "^2.8.1",
|
|
74
74
|
"typescript": "^5.7.3",
|
|
75
|
-
"vite": "^6.0
|
|
76
|
-
"vitest": "^3.0.
|
|
75
|
+
"vite": "^6.1.0",
|
|
76
|
+
"vitest": "^3.0.5",
|
|
77
77
|
"zod": "^3.24.1"
|
|
78
78
|
},
|
|
79
79
|
"svelte": "./dist/index.js",
|