@webamoki/web-svelte 0.5.14 → 0.5.16
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/index.d.ts +2 -1
- package/dist/components/form/index.js +2 -1
- package/dist/utils/types/arktype.d.ts +1 -0
- package/dist/utils/types/arktype.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 };
|
|
@@ -9,6 +9,7 @@ export declare const Time: import("arktype/internal/methods/object.ts").ObjectTy
|
|
|
9
9
|
export declare const CalendarDate: import("arktype/internal/methods/object.ts").ObjectType<calendarImport, {}>;
|
|
10
10
|
export declare const HexColor: import("arktype/internal/methods/string.ts").StringType<string, {}>;
|
|
11
11
|
export declare const Email: import("arktype/internal/methods/object.ts").ObjectType<(In: string) => import("arktype").Out<string>, {}>;
|
|
12
|
+
export declare const Name: import("arktype/internal/methods/object.ts").ObjectType<(In: string) => import("arktype").Out<string>, {}>;
|
|
12
13
|
export declare const FirstName: import("arktype/internal/methods/object.ts").ObjectType<(In: string) => import("arktype").Out<string>, {}>;
|
|
13
14
|
export declare const LastName: import("arktype/internal/methods/object.ts").ObjectType<(In: string) => import("arktype").Out<string>, {}>;
|
|
14
15
|
export declare const Id: import("arktype/internal/methods/number.ts").NumberType<number, {}>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Type, type } from 'arktype';
|
|
2
2
|
import { Days } from '../datetime/index.js';
|
|
3
3
|
import { Time as timeImport, CalendarDate as calendarImport } from '@internationalized/date';
|
|
4
|
-
import { EMAIL_MAX, FIRST_NAME_MAX, LAST_NAME_MAX } from './consts.js';
|
|
4
|
+
import { EMAIL_MAX, FIRST_NAME_MAX, LAST_NAME_MAX, NAME_MAX } from './consts.js';
|
|
5
5
|
import { toTitleCase } from '../string.js';
|
|
6
6
|
/** Type string which is trimmed before narrowing the type checking */
|
|
7
7
|
export function trimTo(typeTo) {
|
|
@@ -32,6 +32,7 @@ export const Email = trimTo(type('string.email')
|
|
|
32
32
|
problem: () => 'invalid email address'
|
|
33
33
|
})
|
|
34
34
|
.atMostLength(EMAIL_MAX)).pipe((email) => email.toLowerCase());
|
|
35
|
+
export const Name = trimTo(type.string.moreThanLength(0).atMostLength(NAME_MAX)).pipe(toTitleCase);
|
|
35
36
|
export const FirstName = trimTo(type.string.moreThanLength(0).atMostLength(FIRST_NAME_MAX)).pipe(toTitleCase);
|
|
36
37
|
export const LastName = trimTo(type.string.moreThanLength(0).atMostLength(LAST_NAME_MAX)).pipe(toTitleCase);
|
|
37
38
|
export const Id = type('number >= 0');
|