@webamoki/web-svelte 0.5.15 → 0.5.17
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/form/fields/SelectMultiField.svelte +86 -0
- package/dist/components/form/fields/SelectMultiField.svelte.d.ts +35 -0
- package/dist/components/form/fields/TextFieldNullable.svelte +4 -1
- package/dist/components/form/index.d.ts +2 -1
- package/dist/components/form/index.js +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<script
|
|
2
|
+
lang="ts"
|
|
3
|
+
generics="I,V, K extends string | number,T extends Record<string, unknown>, U extends FormPath<T>, M"
|
|
4
|
+
>
|
|
5
|
+
import type { FormPath } from 'sveltekit-superforms';
|
|
6
|
+
import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
|
|
7
|
+
import {
|
|
8
|
+
Select,
|
|
9
|
+
SelectContent,
|
|
10
|
+
SelectGroup,
|
|
11
|
+
SelectItem,
|
|
12
|
+
SelectLabel,
|
|
13
|
+
SelectTrigger
|
|
14
|
+
} from '../../../shadcn/components/ui/select/index.js';
|
|
15
|
+
import { cn } from '../../../shadcn/utils.js';
|
|
16
|
+
|
|
17
|
+
interface Props extends FieldWrapperProps<T, U, M> {
|
|
18
|
+
values?: V[];
|
|
19
|
+
items: readonly I[];
|
|
20
|
+
getKey: (item: I) => K;
|
|
21
|
+
getLabel: (item: I) => string;
|
|
22
|
+
getValue: (item: I) => V;
|
|
23
|
+
onchange?: (value: V[]) => void;
|
|
24
|
+
class?: string;
|
|
25
|
+
placeholder: string;
|
|
26
|
+
}
|
|
27
|
+
let {
|
|
28
|
+
values = $bindable([]),
|
|
29
|
+
class: className,
|
|
30
|
+
getKey: _getKey,
|
|
31
|
+
getLabel,
|
|
32
|
+
getValue,
|
|
33
|
+
onchange,
|
|
34
|
+
placeholder,
|
|
35
|
+
items,
|
|
36
|
+
...fieldProps
|
|
37
|
+
}: Props = $props();
|
|
38
|
+
let valueToItem: Map<V, I> = new Map(items.map((item) => [getValue(item), item] as const));
|
|
39
|
+
let keyToItem: Map<string, I> = new Map(items.map((item) => [getKey(item), item] as const));
|
|
40
|
+
|
|
41
|
+
// Enforce string key functino
|
|
42
|
+
function getKey(item: I) {
|
|
43
|
+
const key = _getKey(item);
|
|
44
|
+
return key.toString();
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
function getKeyFromValue(): string[] {
|
|
48
|
+
return values.map((value) => {
|
|
49
|
+
const item = valueToItem.get(value)!;
|
|
50
|
+
return getKey(item)!;
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function setValueFromKey(keys: string[]) {
|
|
55
|
+
const newValues: V[] = keys
|
|
56
|
+
.map((key) => keyToItem.get(key))
|
|
57
|
+
.filter((item): item is I => item !== undefined) // filter out missing keys
|
|
58
|
+
.map((item) => getValue(item));
|
|
59
|
+
values = newValues;
|
|
60
|
+
onchange?.(newValues);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function getPreview() {
|
|
64
|
+
return values.length
|
|
65
|
+
? values.map((value) => getLabel(valueToItem.get(value)!)).join(', ')
|
|
66
|
+
: placeholder;
|
|
67
|
+
}
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
<FieldWrapper {...fieldProps}>
|
|
71
|
+
{#snippet formElem(props)}
|
|
72
|
+
<Select type="multiple" {...props} bind:value={getKeyFromValue, setValueFromKey}>
|
|
73
|
+
<SelectTrigger class={cn('w-[180px] cursor-pointer', className)}>
|
|
74
|
+
{getPreview()}
|
|
75
|
+
</SelectTrigger>
|
|
76
|
+
<SelectContent>
|
|
77
|
+
<SelectGroup>
|
|
78
|
+
<SelectLabel>{fieldProps.label}</SelectLabel>
|
|
79
|
+
{#each items as item (getKey(item))}
|
|
80
|
+
<SelectItem class="cursor-pointer" value={getKey(item)} label={getLabel(item)} />
|
|
81
|
+
{/each}
|
|
82
|
+
</SelectGroup>
|
|
83
|
+
</SelectContent>
|
|
84
|
+
</Select>
|
|
85
|
+
{/snippet}
|
|
86
|
+
</FieldWrapper>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { FormPath } from 'sveltekit-superforms';
|
|
2
|
+
import { type FieldWrapperProps } from '../FieldWrapper.svelte';
|
|
3
|
+
declare function $$render<I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
|
|
4
|
+
props: FieldWrapperProps<T, U, M> & {
|
|
5
|
+
values?: V[];
|
|
6
|
+
items: readonly I[];
|
|
7
|
+
getKey: (item: I) => K;
|
|
8
|
+
getLabel: (item: I) => string;
|
|
9
|
+
getValue: (item: I) => V;
|
|
10
|
+
onchange?: (value: V[]) => void;
|
|
11
|
+
class?: string;
|
|
12
|
+
placeholder: string;
|
|
13
|
+
};
|
|
14
|
+
exports: {};
|
|
15
|
+
bindings: "values";
|
|
16
|
+
slots: {};
|
|
17
|
+
events: {};
|
|
18
|
+
};
|
|
19
|
+
declare class __sveltets_Render<I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M> {
|
|
20
|
+
props(): ReturnType<typeof $$render<I, V, K, T, U, M>>['props'];
|
|
21
|
+
events(): ReturnType<typeof $$render<I, V, K, T, U, M>>['events'];
|
|
22
|
+
slots(): ReturnType<typeof $$render<I, V, K, T, U, M>>['slots'];
|
|
23
|
+
bindings(): "values";
|
|
24
|
+
exports(): {};
|
|
25
|
+
}
|
|
26
|
+
interface $$IsomorphicComponent {
|
|
27
|
+
new <I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<I, V, K, T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<I, V, K, T, U, M>['props']>, ReturnType<__sveltets_Render<I, V, K, T, U, M>['events']>, ReturnType<__sveltets_Render<I, V, K, T, U, M>['slots']>> & {
|
|
28
|
+
$$bindings?: ReturnType<__sveltets_Render<I, V, K, T, U, M>['bindings']>;
|
|
29
|
+
} & ReturnType<__sveltets_Render<I, V, K, T, U, M>['exports']>;
|
|
30
|
+
<I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<I, V, K, T, U, M>['props']> & {}): ReturnType<__sveltets_Render<I, V, K, T, U, M>['exports']>;
|
|
31
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any, any, any>['bindings']>;
|
|
32
|
+
}
|
|
33
|
+
declare const SelectMultiField: $$IsomorphicComponent;
|
|
34
|
+
type SelectMultiField<I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof SelectMultiField<I, V, K, T, U, M>>;
|
|
35
|
+
export default SelectMultiField;
|
|
@@ -6,10 +6,11 @@ import TimeField from './fields/TimeField.svelte';
|
|
|
6
6
|
import DateField from './fields/DateField.svelte';
|
|
7
7
|
import NumberField from './fields/NumberField.svelte';
|
|
8
8
|
import SelectField from './fields/SelectField.svelte';
|
|
9
|
+
import SelectMultiField from './fields/SelectMultiField.svelte';
|
|
9
10
|
import PasswordField from './fields/PasswordField.svelte';
|
|
10
11
|
import HexColorField from './fields/HexColorField.svelte';
|
|
11
12
|
import ChoiceField from './fields/ChoiceField.svelte';
|
|
12
13
|
import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
|
|
13
14
|
import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
|
|
14
15
|
import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
|
|
15
|
-
export { Form, Button, TextField, TextFieldNullable, TimeField, DateField, NumberField, SelectField, PasswordField, HexColorField, ChoiceField, ChoiceMultiField, WeekdayChoiceField, WeekdayChoiceMultiField };
|
|
16
|
+
export { Form, Button, TextField, TextFieldNullable, TimeField, DateField, NumberField, SelectField, SelectMultiField, PasswordField, HexColorField, ChoiceField, ChoiceMultiField, WeekdayChoiceField, WeekdayChoiceMultiField };
|
|
@@ -6,10 +6,11 @@ import TimeField from './fields/TimeField.svelte';
|
|
|
6
6
|
import DateField from './fields/DateField.svelte';
|
|
7
7
|
import NumberField from './fields/NumberField.svelte';
|
|
8
8
|
import SelectField from './fields/SelectField.svelte';
|
|
9
|
+
import SelectMultiField from './fields/SelectMultiField.svelte';
|
|
9
10
|
import PasswordField from './fields/PasswordField.svelte';
|
|
10
11
|
import HexColorField from './fields/HexColorField.svelte';
|
|
11
12
|
import ChoiceField from './fields/ChoiceField.svelte';
|
|
12
13
|
import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
|
|
13
14
|
import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
|
|
14
15
|
import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
|
|
15
|
-
export { Form, Button, TextField, TextFieldNullable, TimeField, DateField, NumberField, SelectField, PasswordField, HexColorField, ChoiceField, ChoiceMultiField, WeekdayChoiceField, WeekdayChoiceMultiField };
|
|
16
|
+
export { Form, Button, TextField, TextFieldNullable, TimeField, DateField, NumberField, SelectField, SelectMultiField, PasswordField, HexColorField, ChoiceField, ChoiceMultiField, WeekdayChoiceField, WeekdayChoiceMultiField };
|