@webamoki/web-svelte 0.5.20 → 0.5.21
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.
|
@@ -47,20 +47,30 @@
|
|
|
47
47
|
)}
|
|
48
48
|
>
|
|
49
49
|
{#each items as item (getKey(item))}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
50
|
+
{#if buttonContent}
|
|
51
|
+
<button
|
|
52
|
+
type="button"
|
|
53
|
+
onclick={() => {
|
|
54
|
+
if (disabled || readonly) return;
|
|
55
|
+
handleItemClick(item);
|
|
56
|
+
}}
|
|
57
|
+
data-state={isActive(item) ? 'active' : 'inactive'}
|
|
58
|
+
class="cursor-pointer rounded-lg bg-transparent text-muted-foreground hover:text-foreground hover:outline-2 focus-visible:outline-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
|
|
59
|
+
>
|
|
60
60
|
{@render buttonContent(getLabel(item))}
|
|
61
|
-
|
|
61
|
+
</button>
|
|
62
|
+
{:else}
|
|
63
|
+
<button
|
|
64
|
+
type="button"
|
|
65
|
+
onclick={() => {
|
|
66
|
+
if (disabled || readonly) return;
|
|
67
|
+
handleItemClick(item);
|
|
68
|
+
}}
|
|
69
|
+
data-state={isActive(item) ? 'active' : 'inactive'}
|
|
70
|
+
class="h-8 cursor-pointer rounded-lg bg-transparent p-2 text-muted-foreground hover:text-foreground hover:outline-2 focus-visible:outline-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
|
|
71
|
+
>
|
|
62
72
|
{getLabel(item)}
|
|
63
|
-
|
|
64
|
-
|
|
73
|
+
</button>
|
|
74
|
+
{/if}
|
|
65
75
|
{/each}
|
|
66
76
|
</div>
|
|
@@ -2,4 +2,5 @@ import Choice from './choice/Choice.svelte';
|
|
|
2
2
|
import ChoiceMulti from './choice/ChoiceMulti.svelte';
|
|
3
3
|
import WeekdayChoice from './choice/WeekdayChoice.svelte';
|
|
4
4
|
import WeekdayChoiceMulti from './choice/WeekdayChoiceMulti.svelte';
|
|
5
|
-
|
|
5
|
+
import SearchBar from './search/SearchBar.svelte';
|
|
6
|
+
export { Choice, ChoiceMulti, SearchBar, WeekdayChoice, WeekdayChoiceMulti };
|
|
@@ -2,4 +2,5 @@ import Choice from './choice/Choice.svelte';
|
|
|
2
2
|
import ChoiceMulti from './choice/ChoiceMulti.svelte';
|
|
3
3
|
import WeekdayChoice from './choice/WeekdayChoice.svelte';
|
|
4
4
|
import WeekdayChoiceMulti from './choice/WeekdayChoiceMulti.svelte';
|
|
5
|
-
|
|
5
|
+
import SearchBar from './search/SearchBar.svelte';
|
|
6
|
+
export { Choice, ChoiceMulti, SearchBar, WeekdayChoice, WeekdayChoiceMulti };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Input from '../../../shadcn/components/ui/input/input.svelte';
|
|
3
|
+
import { cn } from '../../../shadcn/utils.js';
|
|
4
|
+
import { Search } from '@lucide/svelte';
|
|
5
|
+
|
|
6
|
+
interface Props {
|
|
7
|
+
defaultValue?: string;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
onChange: (value: string) => void;
|
|
10
|
+
class?: string;
|
|
11
|
+
}
|
|
12
|
+
let { defaultValue, placeholder, onChange, class: className }: Props = $props();
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<div class="relative w-full max-w-sm">
|
|
16
|
+
<Search class="absolute top-2.5 left-2.5 h-4 w-4 text-muted-foreground" />
|
|
17
|
+
<Input
|
|
18
|
+
type="search"
|
|
19
|
+
{placeholder}
|
|
20
|
+
value={defaultValue}
|
|
21
|
+
oninput={(e: Event & { currentTarget: HTMLInputElement }) => onChange(e.currentTarget.value)}
|
|
22
|
+
class={cn('w-full pl-9', className)}
|
|
23
|
+
/>
|
|
24
|
+
</div>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
interface Props {
|
|
2
|
+
defaultValue?: string;
|
|
3
|
+
placeholder?: string;
|
|
4
|
+
onChange: (value: string) => void;
|
|
5
|
+
class?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const SearchBar: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type SearchBar = ReturnType<typeof SearchBar>;
|
|
9
|
+
export default SearchBar;
|