@webamoki/web-svelte 0.5.3 → 0.5.5
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/Form.svelte +27 -8
- package/dist/components/form/Form.svelte.d.ts +16 -27
- package/dist/components/form/fields/HexColorField.svelte +3 -2
- package/dist/components/form/fields/NumberField.svelte +18 -0
- package/dist/components/form/fields/NumberField.svelte.d.ts +30 -0
- package/dist/components/form/fields/SelectField.svelte +79 -0
- package/dist/components/form/fields/SelectField.svelte.d.ts +35 -0
- package/dist/components/form/fields/TextFieldNullable.svelte +34 -0
- package/dist/components/form/fields/TextFieldNullable.svelte.d.ts +31 -0
- package/dist/components/form/fields/TimeField.svelte +18 -0
- package/dist/components/form/fields/TimeField.svelte.d.ts +30 -0
- package/dist/components/form/index.d.ts +14 -0
- package/dist/components/form/index.js +14 -0
- package/dist/components/ui/index.d.ts +5 -0
- package/dist/components/ui/index.js +5 -0
- package/dist/shadcn/components/ui/input/input.svelte.d.ts +1 -1
- package/dist/shadcn/components/ui/select/index.d.ts +11 -0
- package/dist/shadcn/components/ui/select/index.js +14 -0
- package/dist/shadcn/components/ui/select/select-content.svelte +40 -0
- package/dist/shadcn/components/ui/select/select-content.svelte.d.ts +8 -0
- package/dist/shadcn/components/ui/select/select-group-heading.svelte +21 -0
- package/dist/shadcn/components/ui/select/select-group-heading.svelte.d.ts +10 -0
- package/dist/shadcn/components/ui/select/select-group.svelte +7 -0
- package/dist/shadcn/components/ui/select/select-group.svelte.d.ts +4 -0
- package/dist/shadcn/components/ui/select/select-item.svelte +38 -0
- package/dist/shadcn/components/ui/select/select-item.svelte.d.ts +4 -0
- package/dist/shadcn/components/ui/select/select-label.svelte +20 -0
- package/dist/shadcn/components/ui/select/select-label.svelte.d.ts +6 -0
- package/dist/shadcn/components/ui/select/select-scroll-down-button.svelte +20 -0
- package/dist/shadcn/components/ui/select/select-scroll-down-button.svelte.d.ts +4 -0
- package/dist/shadcn/components/ui/select/select-scroll-up-button.svelte +20 -0
- package/dist/shadcn/components/ui/select/select-scroll-up-button.svelte.d.ts +4 -0
- package/dist/shadcn/components/ui/select/select-separator.svelte +18 -0
- package/dist/shadcn/components/ui/select/select-separator.svelte.d.ts +4 -0
- package/dist/shadcn/components/ui/select/select-trigger.svelte +29 -0
- package/dist/shadcn/components/ui/select/select-trigger.svelte.d.ts +8 -0
- package/dist/shadcn/components/ui/separator/index.d.ts +2 -0
- package/dist/shadcn/components/ui/separator/index.js +4 -0
- package/dist/shadcn/components/ui/separator/separator.svelte +20 -0
- package/dist/shadcn/components/ui/separator/separator.svelte.d.ts +4 -0
- package/dist/utils/form.d.ts +21 -0
- package/dist/utils/form.js +64 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.js +1 -0
- package/dist/utils/types/arktype.d.ts +1 -1
- package/dist/utils/types/arktype.js +1 -1
- package/package.json +30 -9
- package/dist/components/index.d.ts +0 -14
- package/dist/components/index.js +0 -14
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
<script lang="ts" generics="S extends type.Any<Record<string, unknown>>">
|
|
1
|
+
<!-- <script lang="ts" generics="S extends type.Any<Record<string, unknown>>">
|
|
2
2
|
import { toast } from 'svelte-sonner';
|
|
3
3
|
import { dateTransport } from '../../utils/index.js';
|
|
4
4
|
import { type } from 'arktype';
|
|
5
5
|
import type { Snippet } from 'svelte';
|
|
6
|
-
import { superForm, type SuperForm, type SuperValidated } from 'sveltekit-superforms';
|
|
7
|
-
import { arktypeClient } from 'sveltekit-superforms/adapters';
|
|
8
|
-
import type { SuperFormData, SuperFormErrors } from 'sveltekit-superforms/client';
|
|
9
6
|
import type { Readable } from 'svelte/store';
|
|
7
|
+
import { defaults, superForm, type SuperForm, type SuperValidated } from 'sveltekit-superforms';
|
|
8
|
+
import { arktype, arktypeClient } from 'sveltekit-superforms/adapters';
|
|
9
|
+
import type { SuperFormData, SuperFormErrors } from 'sveltekit-superforms/client';
|
|
10
10
|
|
|
11
11
|
interface Props {
|
|
12
|
-
validated
|
|
12
|
+
validated?: SuperValidated<S['infer']> | S['infer'];
|
|
13
13
|
schema: S;
|
|
14
14
|
onSuccess?: (
|
|
15
15
|
form: Readonly<SuperValidated<S['infer'], App.Superforms.Message, S['infer']>>
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
>;
|
|
28
28
|
// TODO: Enforce use of resolve
|
|
29
29
|
action: string;
|
|
30
|
-
actionName
|
|
31
|
-
class
|
|
30
|
+
actionName?: string;
|
|
31
|
+
class?: string;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
let {
|
|
35
|
-
validated,
|
|
35
|
+
validated: _validated,
|
|
36
36
|
schema,
|
|
37
37
|
onSuccess,
|
|
38
38
|
invalidateAll = false,
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
class: className
|
|
43
43
|
}: Props = $props();
|
|
44
44
|
|
|
45
|
+
let validated = _validated ?? defaults(arktype(schema));
|
|
45
46
|
const form = superForm(validated, {
|
|
46
47
|
validators: arktypeClient(schema),
|
|
47
48
|
dataType: 'json',
|
|
@@ -67,4 +68,22 @@
|
|
|
67
68
|
|
|
68
69
|
<form class={className} action="{_action}?/{actionName}" method="POST" use:form.enhance>
|
|
69
70
|
{@render children({ form, data, delayed, errors })}
|
|
71
|
+
</form> -->
|
|
72
|
+
<script lang="ts" generics="T extends Record<string, unknown>, M">
|
|
73
|
+
import type { FsSuperForm } from 'formsnap';
|
|
74
|
+
import type { Snippet } from 'svelte';
|
|
75
|
+
|
|
76
|
+
interface Props {
|
|
77
|
+
form: FsSuperForm<T, M>;
|
|
78
|
+
action: string;
|
|
79
|
+
actionName?: string;
|
|
80
|
+
class?: string;
|
|
81
|
+
children?: Snippet;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
let { form, action: _action, actionName, class: className, children }: Props = $props();
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<form class={className} action="{_action}?/{actionName}" method="POST" use:form.enhance>
|
|
88
|
+
{@render children?.()}
|
|
70
89
|
</form>
|
|
@@ -1,43 +1,32 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { FsSuperForm } from 'formsnap';
|
|
2
2
|
import type { Snippet } from 'svelte';
|
|
3
|
-
|
|
4
|
-
import type { SuperFormData, SuperFormErrors } from 'sveltekit-superforms/client';
|
|
5
|
-
import type { Readable } from 'svelte/store';
|
|
6
|
-
declare function $$render<S extends type.Any<Record<string, unknown>>>(): {
|
|
3
|
+
declare function $$render<T extends Record<string, unknown>, M>(): {
|
|
7
4
|
props: {
|
|
8
|
-
|
|
9
|
-
schema: S;
|
|
10
|
-
onSuccess?: (form: Readonly<SuperValidated<S["infer"], App.Superforms.Message, S["infer"]>>) => void;
|
|
11
|
-
invalidateAll?: boolean;
|
|
12
|
-
children: Snippet<[{
|
|
13
|
-
form: SuperForm<S["infer"], App.Superforms.Message>;
|
|
14
|
-
data: SuperFormData<S["infer"]>;
|
|
15
|
-
delayed: Readable<boolean>;
|
|
16
|
-
errors: SuperFormErrors<S["infer"]>;
|
|
17
|
-
}]>;
|
|
5
|
+
form: FsSuperForm<T, M>;
|
|
18
6
|
action: string;
|
|
19
|
-
actionName
|
|
20
|
-
class
|
|
7
|
+
actionName?: string;
|
|
8
|
+
class?: string;
|
|
9
|
+
children?: Snippet;
|
|
21
10
|
};
|
|
22
11
|
exports: {};
|
|
23
12
|
bindings: "";
|
|
24
13
|
slots: {};
|
|
25
14
|
events: {};
|
|
26
15
|
};
|
|
27
|
-
declare class __sveltets_Render<
|
|
28
|
-
props(): ReturnType<typeof $$render<
|
|
29
|
-
events(): ReturnType<typeof $$render<
|
|
30
|
-
slots(): ReturnType<typeof $$render<
|
|
16
|
+
declare class __sveltets_Render<T extends Record<string, unknown>, M> {
|
|
17
|
+
props(): ReturnType<typeof $$render<T, M>>['props'];
|
|
18
|
+
events(): ReturnType<typeof $$render<T, M>>['events'];
|
|
19
|
+
slots(): ReturnType<typeof $$render<T, M>>['slots'];
|
|
31
20
|
bindings(): "";
|
|
32
21
|
exports(): {};
|
|
33
22
|
}
|
|
34
23
|
interface $$IsomorphicComponent {
|
|
35
|
-
new <
|
|
36
|
-
$$bindings?: ReturnType<__sveltets_Render<
|
|
37
|
-
} & ReturnType<__sveltets_Render<
|
|
38
|
-
<
|
|
39
|
-
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
24
|
+
new <T extends Record<string, unknown>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, M>['props']>, ReturnType<__sveltets_Render<T, M>['events']>, ReturnType<__sveltets_Render<T, M>['slots']>> & {
|
|
25
|
+
$$bindings?: ReturnType<__sveltets_Render<T, M>['bindings']>;
|
|
26
|
+
} & ReturnType<__sveltets_Render<T, M>['exports']>;
|
|
27
|
+
<T extends Record<string, unknown>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, M>['props']> & {}): ReturnType<__sveltets_Render<T, M>['exports']>;
|
|
28
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
|
|
40
29
|
}
|
|
41
30
|
declare const Form: $$IsomorphicComponent;
|
|
42
|
-
type Form<
|
|
31
|
+
type Form<T extends Record<string, unknown>, M> = InstanceType<typeof Form<T, M>>;
|
|
43
32
|
export default Form;
|
|
@@ -8,11 +8,12 @@
|
|
|
8
8
|
let { value = $bindable(), ...fieldProps }: Props = $props();
|
|
9
9
|
|
|
10
10
|
function get() {
|
|
11
|
-
return `#${value}`;
|
|
11
|
+
if (value) return `#${value}`;
|
|
12
|
+
return '';
|
|
12
13
|
}
|
|
13
14
|
function set(raw: string | undefined) {
|
|
14
15
|
if (raw === undefined) return undefined;
|
|
15
|
-
|
|
16
|
+
value = raw.slice(1); // remove #
|
|
16
17
|
}
|
|
17
18
|
</script>
|
|
18
19
|
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script lang="ts" generics="V,T extends Record<string, unknown>, U extends FormPath<T>, M">
|
|
2
|
+
import type { FormPath } from 'sveltekit-superforms';
|
|
3
|
+
import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
|
|
4
|
+
import { Input } from '../../../shadcn/components/ui/input/index.js';
|
|
5
|
+
|
|
6
|
+
interface Props extends FieldWrapperProps<T, U, M> {
|
|
7
|
+
value?: V;
|
|
8
|
+
class?: string;
|
|
9
|
+
step?: HTMLInputElement['step'];
|
|
10
|
+
}
|
|
11
|
+
let { value = $bindable(), class: className, step, ...fieldProps }: Props = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<FieldWrapper {...fieldProps}>
|
|
15
|
+
{#snippet formElem(props)}
|
|
16
|
+
<Input type="number" bind:value class={className} {step} {...props} />
|
|
17
|
+
{/snippet}
|
|
18
|
+
</FieldWrapper>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { FormPath } from 'sveltekit-superforms';
|
|
2
|
+
import { type FieldWrapperProps } from '../FieldWrapper.svelte';
|
|
3
|
+
declare function $$render<V, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
|
|
4
|
+
props: FieldWrapperProps<T, U, M> & {
|
|
5
|
+
value?: V;
|
|
6
|
+
class?: string;
|
|
7
|
+
step?: HTMLInputElement["step"];
|
|
8
|
+
};
|
|
9
|
+
exports: {};
|
|
10
|
+
bindings: "value";
|
|
11
|
+
slots: {};
|
|
12
|
+
events: {};
|
|
13
|
+
};
|
|
14
|
+
declare class __sveltets_Render<V, T extends Record<string, unknown>, U extends FormPath<T>, M> {
|
|
15
|
+
props(): ReturnType<typeof $$render<V, T, U, M>>['props'];
|
|
16
|
+
events(): ReturnType<typeof $$render<V, T, U, M>>['events'];
|
|
17
|
+
slots(): ReturnType<typeof $$render<V, T, U, M>>['slots'];
|
|
18
|
+
bindings(): "value";
|
|
19
|
+
exports(): {};
|
|
20
|
+
}
|
|
21
|
+
interface $$IsomorphicComponent {
|
|
22
|
+
new <V, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, T, U, M>['props']>, ReturnType<__sveltets_Render<V, T, U, M>['events']>, ReturnType<__sveltets_Render<V, T, U, M>['slots']>> & {
|
|
23
|
+
$$bindings?: ReturnType<__sveltets_Render<V, T, U, M>['bindings']>;
|
|
24
|
+
} & ReturnType<__sveltets_Render<V, T, U, M>['exports']>;
|
|
25
|
+
<V, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<V, T, U, M>['props']> & {}): ReturnType<__sveltets_Render<V, T, U, M>['exports']>;
|
|
26
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any>['bindings']>;
|
|
27
|
+
}
|
|
28
|
+
declare const NumberField: $$IsomorphicComponent;
|
|
29
|
+
type NumberField<V, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof NumberField<V, T, U, M>>;
|
|
30
|
+
export default NumberField;
|
|
@@ -0,0 +1,79 @@
|
|
|
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
|
+
value?: V;
|
|
19
|
+
items: readonly I[];
|
|
20
|
+
getKey: (item: I) => K;
|
|
21
|
+
getLabel: (item: I) => string;
|
|
22
|
+
getValue: (item: I) => V;
|
|
23
|
+
onchange?: (value: V | undefined) => void;
|
|
24
|
+
class?: string;
|
|
25
|
+
placeholder: string;
|
|
26
|
+
}
|
|
27
|
+
let {
|
|
28
|
+
value = $bindable(undefined),
|
|
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
|
+
if (value === undefined) return '';
|
|
49
|
+
const item = valueToItem.get(value);
|
|
50
|
+
if (item === undefined) return '';
|
|
51
|
+
return getKey(item);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function setValueFromKey(key: string) {
|
|
55
|
+
const item = keyToItem.get(key);
|
|
56
|
+
if (item === undefined) return;
|
|
57
|
+
const newValue = getValue(item);
|
|
58
|
+
value = newValue;
|
|
59
|
+
onchange?.(newValue);
|
|
60
|
+
}
|
|
61
|
+
</script>
|
|
62
|
+
|
|
63
|
+
<FieldWrapper {...fieldProps}>
|
|
64
|
+
{#snippet formElem(props)}
|
|
65
|
+
<Select type="single" {...props} bind:value={getKeyFromValue, setValueFromKey}>
|
|
66
|
+
<SelectTrigger class={cn('w-[180px] cursor-pointer', className)}>
|
|
67
|
+
{value ? value : placeholder}
|
|
68
|
+
</SelectTrigger>
|
|
69
|
+
<SelectContent>
|
|
70
|
+
<SelectGroup>
|
|
71
|
+
<SelectLabel>{fieldProps.label}</SelectLabel>
|
|
72
|
+
{#each items as item (getKey(item))}
|
|
73
|
+
<SelectItem class="cursor-pointer" value={getKey(item)} label={getLabel(item)} />
|
|
74
|
+
{/each}
|
|
75
|
+
</SelectGroup>
|
|
76
|
+
</SelectContent>
|
|
77
|
+
</Select>
|
|
78
|
+
{/snippet}
|
|
79
|
+
</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
|
+
value?: V;
|
|
6
|
+
items: readonly I[];
|
|
7
|
+
getKey: (item: I) => K;
|
|
8
|
+
getLabel: (item: I) => string;
|
|
9
|
+
getValue: (item: I) => V;
|
|
10
|
+
onchange?: (value: V | undefined) => void;
|
|
11
|
+
class?: string;
|
|
12
|
+
placeholder: string;
|
|
13
|
+
};
|
|
14
|
+
exports: {};
|
|
15
|
+
bindings: "value";
|
|
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(): "value";
|
|
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 SelectField: $$IsomorphicComponent;
|
|
34
|
+
type SelectField<I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof SelectField<I, V, K, T, U, M>>;
|
|
35
|
+
export default SelectField;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
|
|
2
|
+
import type { FormPath } from 'sveltekit-superforms';
|
|
3
|
+
import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
|
|
4
|
+
import { Input } from '../../../shadcn/components/ui/input/index.js';
|
|
5
|
+
|
|
6
|
+
interface Props extends FieldWrapperProps<T, U, M> {
|
|
7
|
+
value?: string | null;
|
|
8
|
+
type?: HTMLInputElement['type'];
|
|
9
|
+
class?: string;
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
}
|
|
12
|
+
let {
|
|
13
|
+
value = $bindable(),
|
|
14
|
+
type = 'text',
|
|
15
|
+
class: className,
|
|
16
|
+
placeholder,
|
|
17
|
+
...fieldProps
|
|
18
|
+
}: Props = $props();
|
|
19
|
+
|
|
20
|
+
function get() {
|
|
21
|
+
if (!value) return;
|
|
22
|
+
return value;
|
|
23
|
+
}
|
|
24
|
+
function set(raw: string | undefined) {
|
|
25
|
+
if (!raw) value = null;
|
|
26
|
+
value = raw;
|
|
27
|
+
}
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<FieldWrapper {...fieldProps}>
|
|
31
|
+
{#snippet formElem(props)}
|
|
32
|
+
<Input {type} bind:value={get, set} class={className} {placeholder} {...props} />
|
|
33
|
+
{/snippet}
|
|
34
|
+
</FieldWrapper>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { FormPath } from 'sveltekit-superforms';
|
|
2
|
+
import { type FieldWrapperProps } from '../FieldWrapper.svelte';
|
|
3
|
+
declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
|
|
4
|
+
props: FieldWrapperProps<T, U, M> & {
|
|
5
|
+
value?: string | null;
|
|
6
|
+
type?: HTMLInputElement["type"];
|
|
7
|
+
class?: string;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
};
|
|
10
|
+
exports: {};
|
|
11
|
+
bindings: "value";
|
|
12
|
+
slots: {};
|
|
13
|
+
events: {};
|
|
14
|
+
};
|
|
15
|
+
declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
|
|
16
|
+
props(): ReturnType<typeof $$render<T, U, M>>['props'];
|
|
17
|
+
events(): ReturnType<typeof $$render<T, U, M>>['events'];
|
|
18
|
+
slots(): ReturnType<typeof $$render<T, U, M>>['slots'];
|
|
19
|
+
bindings(): "value";
|
|
20
|
+
exports(): {};
|
|
21
|
+
}
|
|
22
|
+
interface $$IsomorphicComponent {
|
|
23
|
+
new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U, M>['props']>, ReturnType<__sveltets_Render<T, U, M>['events']>, ReturnType<__sveltets_Render<T, U, M>['slots']>> & {
|
|
24
|
+
$$bindings?: ReturnType<__sveltets_Render<T, U, M>['bindings']>;
|
|
25
|
+
} & ReturnType<__sveltets_Render<T, U, M>['exports']>;
|
|
26
|
+
<T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>['props']> & {}): ReturnType<__sveltets_Render<T, U, M>['exports']>;
|
|
27
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
|
|
28
|
+
}
|
|
29
|
+
declare const TextFieldNullable: $$IsomorphicComponent;
|
|
30
|
+
type TextFieldNullable<T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof TextFieldNullable<T, U, M>>;
|
|
31
|
+
export default TextFieldNullable;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script lang="ts" generics="V,T extends Record<string, unknown>, U extends FormPath<T>, M">
|
|
2
|
+
import type { FormPath } from 'sveltekit-superforms';
|
|
3
|
+
import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
|
|
4
|
+
import { Input } from '../../../shadcn/components/ui/input/index.js';
|
|
5
|
+
|
|
6
|
+
interface Props extends FieldWrapperProps<T, U, M> {
|
|
7
|
+
value?: V;
|
|
8
|
+
class?: string;
|
|
9
|
+
step?: HTMLInputElement['step'];
|
|
10
|
+
}
|
|
11
|
+
let { value = $bindable(), class: className, step, ...fieldProps }: Props = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<FieldWrapper {...fieldProps}>
|
|
15
|
+
{#snippet formElem(props)}
|
|
16
|
+
<Input type="time" bind:value class={className} {step} {...props} />
|
|
17
|
+
{/snippet}
|
|
18
|
+
</FieldWrapper>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { FormPath } from 'sveltekit-superforms';
|
|
2
|
+
import { type FieldWrapperProps } from '../FieldWrapper.svelte';
|
|
3
|
+
declare function $$render<V, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
|
|
4
|
+
props: FieldWrapperProps<T, U, M> & {
|
|
5
|
+
value?: V;
|
|
6
|
+
class?: string;
|
|
7
|
+
step?: HTMLInputElement["step"];
|
|
8
|
+
};
|
|
9
|
+
exports: {};
|
|
10
|
+
bindings: "value";
|
|
11
|
+
slots: {};
|
|
12
|
+
events: {};
|
|
13
|
+
};
|
|
14
|
+
declare class __sveltets_Render<V, T extends Record<string, unknown>, U extends FormPath<T>, M> {
|
|
15
|
+
props(): ReturnType<typeof $$render<V, T, U, M>>['props'];
|
|
16
|
+
events(): ReturnType<typeof $$render<V, T, U, M>>['events'];
|
|
17
|
+
slots(): ReturnType<typeof $$render<V, T, U, M>>['slots'];
|
|
18
|
+
bindings(): "value";
|
|
19
|
+
exports(): {};
|
|
20
|
+
}
|
|
21
|
+
interface $$IsomorphicComponent {
|
|
22
|
+
new <V, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, T, U, M>['props']>, ReturnType<__sveltets_Render<V, T, U, M>['events']>, ReturnType<__sveltets_Render<V, T, U, M>['slots']>> & {
|
|
23
|
+
$$bindings?: ReturnType<__sveltets_Render<V, T, U, M>['bindings']>;
|
|
24
|
+
} & ReturnType<__sveltets_Render<V, T, U, M>['exports']>;
|
|
25
|
+
<V, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<V, T, U, M>['props']> & {}): ReturnType<__sveltets_Render<V, T, U, M>['exports']>;
|
|
26
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any>['bindings']>;
|
|
27
|
+
}
|
|
28
|
+
declare const TimeField: $$IsomorphicComponent;
|
|
29
|
+
type TimeField<V, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof TimeField<V, T, U, M>>;
|
|
30
|
+
export default TimeField;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import Form from './Form.svelte';
|
|
2
|
+
import Button from './Button.svelte';
|
|
3
|
+
import TextField from './fields/TextField.svelte';
|
|
4
|
+
import TextFieldNullable from './fields/TextFieldNullable.svelte';
|
|
5
|
+
import TimeField from './fields/TimeField.svelte';
|
|
6
|
+
import NumberField from './fields/NumberField.svelte';
|
|
7
|
+
import SelectField from './fields/SelectField.svelte';
|
|
8
|
+
import PasswordField from './fields/PasswordField.svelte';
|
|
9
|
+
import HexColorField from './fields/HexColorField.svelte';
|
|
10
|
+
import ChoiceField from './fields/ChoiceField.svelte';
|
|
11
|
+
import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
|
|
12
|
+
import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
|
|
13
|
+
import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
|
|
14
|
+
export { Form, Button, TextField, TextFieldNullable, TimeField, NumberField, SelectField, PasswordField, HexColorField, ChoiceField, ChoiceMultiField, WeekdayChoiceField, WeekdayChoiceMultiField };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import Form from './Form.svelte';
|
|
2
|
+
import Button from './Button.svelte';
|
|
3
|
+
import TextField from './fields/TextField.svelte';
|
|
4
|
+
import TextFieldNullable from './fields/TextFieldNullable.svelte';
|
|
5
|
+
import TimeField from './fields/TimeField.svelte';
|
|
6
|
+
import NumberField from './fields/NumberField.svelte';
|
|
7
|
+
import SelectField from './fields/SelectField.svelte';
|
|
8
|
+
import PasswordField from './fields/PasswordField.svelte';
|
|
9
|
+
import HexColorField from './fields/HexColorField.svelte';
|
|
10
|
+
import ChoiceField from './fields/ChoiceField.svelte';
|
|
11
|
+
import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
|
|
12
|
+
import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
|
|
13
|
+
import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
|
|
14
|
+
export { Form, Button, TextField, TextFieldNullable, TimeField, NumberField, SelectField, PasswordField, HexColorField, ChoiceField, ChoiceMultiField, WeekdayChoiceField, WeekdayChoiceMultiField };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import Choice from './choice/Choice.svelte';
|
|
2
|
+
import ChoiceMulti from './choice/ChoiceMulti.svelte';
|
|
3
|
+
import WeekdayChoice from './choice/WeekdayChoice.svelte';
|
|
4
|
+
import WeekdayChoiceMulti from './choice/WeekdayChoiceMulti.svelte';
|
|
5
|
+
export { Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import Choice from './choice/Choice.svelte';
|
|
2
|
+
import ChoiceMulti from './choice/ChoiceMulti.svelte';
|
|
3
|
+
import WeekdayChoice from './choice/WeekdayChoice.svelte';
|
|
4
|
+
import WeekdayChoiceMulti from './choice/WeekdayChoiceMulti.svelte';
|
|
5
|
+
export { Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti };
|
|
@@ -8,6 +8,6 @@ type Props = WithElementRef<Omit<HTMLInputAttributes, 'type'> & ({
|
|
|
8
8
|
type?: InputType;
|
|
9
9
|
files?: undefined;
|
|
10
10
|
})>;
|
|
11
|
-
declare const Input: import("svelte").Component<Props, {}, "ref" | "
|
|
11
|
+
declare const Input: import("svelte").Component<Props, {}, "ref" | "value" | "files">;
|
|
12
12
|
type Input = ReturnType<typeof Input>;
|
|
13
13
|
export default Input;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import Group from './select-group.svelte';
|
|
2
|
+
import Label from './select-label.svelte';
|
|
3
|
+
import Item from './select-item.svelte';
|
|
4
|
+
import Content from './select-content.svelte';
|
|
5
|
+
import Trigger from './select-trigger.svelte';
|
|
6
|
+
import Separator from './select-separator.svelte';
|
|
7
|
+
import ScrollDownButton from './select-scroll-down-button.svelte';
|
|
8
|
+
import ScrollUpButton from './select-scroll-up-button.svelte';
|
|
9
|
+
import GroupHeading from './select-group-heading.svelte';
|
|
10
|
+
declare const Root: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
|
|
11
|
+
export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, GroupHeading as SelectGroupHeading };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
2
|
+
import Group from './select-group.svelte';
|
|
3
|
+
import Label from './select-label.svelte';
|
|
4
|
+
import Item from './select-item.svelte';
|
|
5
|
+
import Content from './select-content.svelte';
|
|
6
|
+
import Trigger from './select-trigger.svelte';
|
|
7
|
+
import Separator from './select-separator.svelte';
|
|
8
|
+
import ScrollDownButton from './select-scroll-down-button.svelte';
|
|
9
|
+
import ScrollUpButton from './select-scroll-up-button.svelte';
|
|
10
|
+
import GroupHeading from './select-group-heading.svelte';
|
|
11
|
+
const Root = SelectPrimitive.Root;
|
|
12
|
+
export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading,
|
|
13
|
+
//
|
|
14
|
+
Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, GroupHeading as SelectGroupHeading };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
3
|
+
import SelectScrollUpButton from './select-scroll-up-button.svelte';
|
|
4
|
+
import SelectScrollDownButton from './select-scroll-down-button.svelte';
|
|
5
|
+
import { cn, type WithoutChild } from '../../../utils.js';
|
|
6
|
+
|
|
7
|
+
let {
|
|
8
|
+
ref = $bindable(null),
|
|
9
|
+
class: className,
|
|
10
|
+
sideOffset = 4,
|
|
11
|
+
portalProps,
|
|
12
|
+
children,
|
|
13
|
+
...restProps
|
|
14
|
+
}: WithoutChild<SelectPrimitive.ContentProps> & {
|
|
15
|
+
portalProps?: SelectPrimitive.PortalProps;
|
|
16
|
+
} = $props();
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<SelectPrimitive.Portal {...portalProps}>
|
|
20
|
+
<SelectPrimitive.Content
|
|
21
|
+
bind:ref
|
|
22
|
+
{sideOffset}
|
|
23
|
+
data-slot="select-content"
|
|
24
|
+
class={cn(
|
|
25
|
+
'relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
|
|
26
|
+
className
|
|
27
|
+
)}
|
|
28
|
+
{...restProps}
|
|
29
|
+
>
|
|
30
|
+
<SelectScrollUpButton />
|
|
31
|
+
<SelectPrimitive.Viewport
|
|
32
|
+
class={cn(
|
|
33
|
+
'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1'
|
|
34
|
+
)}
|
|
35
|
+
>
|
|
36
|
+
{@render children?.()}
|
|
37
|
+
</SelectPrimitive.Viewport>
|
|
38
|
+
<SelectScrollDownButton />
|
|
39
|
+
</SelectPrimitive.Content>
|
|
40
|
+
</SelectPrimitive.Portal>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
2
|
+
import { type WithoutChild } from '../../../utils.js';
|
|
3
|
+
type $$ComponentProps = WithoutChild<SelectPrimitive.ContentProps> & {
|
|
4
|
+
portalProps?: SelectPrimitive.PortalProps;
|
|
5
|
+
};
|
|
6
|
+
declare const SelectContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
7
|
+
type SelectContent = ReturnType<typeof SelectContent>;
|
|
8
|
+
export default SelectContent;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
import type { ComponentProps } from 'svelte';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
children,
|
|
10
|
+
...restProps
|
|
11
|
+
}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<SelectPrimitive.GroupHeading
|
|
15
|
+
bind:ref
|
|
16
|
+
data-slot="select-group-heading"
|
|
17
|
+
class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
|
|
18
|
+
{...restProps}
|
|
19
|
+
>
|
|
20
|
+
{@render children?.()}
|
|
21
|
+
</SelectPrimitive.GroupHeading>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
declare const SelectGroupHeading: import("svelte").Component<Omit<{}, "child" | "children"> & {
|
|
2
|
+
child?: import("svelte").Snippet<[{
|
|
3
|
+
props: Record<string, unknown>;
|
|
4
|
+
}]> | undefined;
|
|
5
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
6
|
+
style?: import("bits-ui").StyleProperties | string | null | undefined;
|
|
7
|
+
ref?: HTMLElement | null | undefined;
|
|
8
|
+
} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").ComboboxGroupHeadingPropsWithoutHTML>, {}, "ref">;
|
|
9
|
+
type SelectGroupHeading = ReturnType<typeof SelectGroupHeading>;
|
|
10
|
+
export default SelectGroupHeading;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import CheckIcon from '@lucide/svelte/icons/check';
|
|
3
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
4
|
+
import { cn, type WithoutChild } from '../../../utils.js';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
value,
|
|
10
|
+
label,
|
|
11
|
+
children: childrenProp,
|
|
12
|
+
...restProps
|
|
13
|
+
}: WithoutChild<SelectPrimitive.ItemProps> = $props();
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<SelectPrimitive.Item
|
|
17
|
+
bind:ref
|
|
18
|
+
{value}
|
|
19
|
+
data-slot="select-item"
|
|
20
|
+
class={cn(
|
|
21
|
+
"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
|
22
|
+
className
|
|
23
|
+
)}
|
|
24
|
+
{...restProps}
|
|
25
|
+
>
|
|
26
|
+
{#snippet children({ selected, highlighted })}
|
|
27
|
+
<span class="absolute right-2 flex size-3.5 items-center justify-center">
|
|
28
|
+
{#if selected}
|
|
29
|
+
<CheckIcon class="size-4" />
|
|
30
|
+
{/if}
|
|
31
|
+
</span>
|
|
32
|
+
{#if childrenProp}
|
|
33
|
+
{@render childrenProp({ selected, highlighted })}
|
|
34
|
+
{:else}
|
|
35
|
+
{label || value}
|
|
36
|
+
{/if}
|
|
37
|
+
{/snippet}
|
|
38
|
+
</SelectPrimitive.Item>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from '../../../utils.js';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<div
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="select-label"
|
|
16
|
+
class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</div>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { type WithElementRef } from '../../../utils.js';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {};
|
|
4
|
+
declare const SelectLabel: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
5
|
+
type SelectLabel = ReturnType<typeof SelectLabel>;
|
|
6
|
+
export default SelectLabel;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
|
|
3
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
4
|
+
import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<SelectPrimitive.ScrollDownButton
|
|
14
|
+
bind:ref
|
|
15
|
+
data-slot="select-scroll-down-button"
|
|
16
|
+
class={cn('flex cursor-default items-center justify-center py-1', className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
<ChevronDownIcon class="size-4" />
|
|
20
|
+
</SelectPrimitive.ScrollDownButton>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
2
|
+
declare const SelectScrollDownButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollDownButtonProps, "child">, "children">, {}, "ref">;
|
|
3
|
+
type SelectScrollDownButton = ReturnType<typeof SelectScrollDownButton>;
|
|
4
|
+
export default SelectScrollDownButton;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
|
|
3
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
4
|
+
import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<SelectPrimitive.ScrollUpButton
|
|
14
|
+
bind:ref
|
|
15
|
+
data-slot="select-scroll-up-button"
|
|
16
|
+
class={cn('flex cursor-default items-center justify-center py-1', className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
<ChevronUpIcon class="size-4" />
|
|
20
|
+
</SelectPrimitive.ScrollUpButton>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
2
|
+
declare const SelectScrollUpButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollUpButtonProps, "child">, "children">, {}, "ref">;
|
|
3
|
+
type SelectScrollUpButton = ReturnType<typeof SelectScrollUpButton>;
|
|
4
|
+
export default SelectScrollUpButton;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Separator as SeparatorPrimitive } from 'bits-ui';
|
|
3
|
+
import { Separator } from '../separator/index.js';
|
|
4
|
+
import { cn } from '../../../utils.js';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
...restProps
|
|
10
|
+
}: SeparatorPrimitive.RootProps = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<Separator
|
|
14
|
+
bind:ref
|
|
15
|
+
data-slot="select-separator"
|
|
16
|
+
class={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
/>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
3
|
+
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
|
|
4
|
+
import { cn, type WithoutChild } from '../../../utils.js';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
children,
|
|
10
|
+
size = 'default',
|
|
11
|
+
...restProps
|
|
12
|
+
}: WithoutChild<SelectPrimitive.TriggerProps> & {
|
|
13
|
+
size?: 'sm' | 'default';
|
|
14
|
+
} = $props();
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<SelectPrimitive.Trigger
|
|
18
|
+
bind:ref
|
|
19
|
+
data-slot="select-trigger"
|
|
20
|
+
data-size={size}
|
|
21
|
+
class={cn(
|
|
22
|
+
"flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
23
|
+
className
|
|
24
|
+
)}
|
|
25
|
+
{...restProps}
|
|
26
|
+
>
|
|
27
|
+
{@render children?.()}
|
|
28
|
+
<ChevronDownIcon class="size-4 opacity-50" />
|
|
29
|
+
</SelectPrimitive.Trigger>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
2
|
+
import { type WithoutChild } from '../../../utils.js';
|
|
3
|
+
type $$ComponentProps = WithoutChild<SelectPrimitive.TriggerProps> & {
|
|
4
|
+
size?: 'sm' | 'default';
|
|
5
|
+
};
|
|
6
|
+
declare const SelectTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
7
|
+
type SelectTrigger = ReturnType<typeof SelectTrigger>;
|
|
8
|
+
export default SelectTrigger;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Separator as SeparatorPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: SeparatorPrimitive.RootProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<SeparatorPrimitive.Root
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="separator"
|
|
15
|
+
class={cn(
|
|
16
|
+
'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
|
|
17
|
+
className
|
|
18
|
+
)}
|
|
19
|
+
{...restProps}
|
|
20
|
+
/>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type } from 'arktype';
|
|
2
|
+
import { type SuperValidated } from 'sveltekit-superforms';
|
|
3
|
+
export declare function prepareForm<S extends type.Any<Record<string, unknown>>>(validated: SuperValidated<S['infer']> | S['infer'], schema: S, options?: Partial<{
|
|
4
|
+
invalidateAll: boolean;
|
|
5
|
+
onSuccess: (form: Readonly<SuperValidated<S['infer'], App.Superforms.Message, S['infer']>>) => void;
|
|
6
|
+
}>): {
|
|
7
|
+
form: import("sveltekit-superforms").SuperForm<S["infer"], any>;
|
|
8
|
+
data: import("sveltekit-superforms/client").SuperFormData<S["infer"]>;
|
|
9
|
+
delayed: import("svelte/store").Readable<boolean>;
|
|
10
|
+
errors: import("sveltekit-superforms/client").SuperFormErrors<S["infer"]>;
|
|
11
|
+
};
|
|
12
|
+
export declare function prepareEmptyForm<S extends type.Any<Record<string, unknown>>>(schema: S, options?: Partial<{
|
|
13
|
+
invalidateAll: boolean;
|
|
14
|
+
onSuccess: (form: Readonly<SuperValidated<S['infer'], App.Superforms.Message, S['infer']>>) => void;
|
|
15
|
+
}>): {
|
|
16
|
+
form: import("sveltekit-superforms").SuperForm<S["infer"], any>;
|
|
17
|
+
data: import("sveltekit-superforms/client").SuperFormData<S["infer"]>;
|
|
18
|
+
delayed: import("svelte/store").Readable<boolean>;
|
|
19
|
+
errors: import("sveltekit-superforms/client").SuperFormErrors<S["infer"]>;
|
|
20
|
+
};
|
|
21
|
+
export declare function serverValidateForm<S extends type.Any<Record<string, unknown>>>(request: Request, schema: S): Promise<SuperValidated<S["infer"], any, S["inferIn"]>>;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { toast } from 'svelte-sonner';
|
|
2
|
+
import { dateTransport } from './index.js';
|
|
3
|
+
import { type } from 'arktype';
|
|
4
|
+
import { defaults, fail, superForm, superValidate } from 'sveltekit-superforms';
|
|
5
|
+
import { arktype, arktypeClient } from 'sveltekit-superforms/adapters';
|
|
6
|
+
export function prepareForm(validated, schema, options) {
|
|
7
|
+
const _invalidateAll = options?.invalidateAll === undefined ? false : true;
|
|
8
|
+
const form = superForm(validated, {
|
|
9
|
+
validators: arktypeClient(schema),
|
|
10
|
+
dataType: 'json',
|
|
11
|
+
invalidateAll: _invalidateAll,
|
|
12
|
+
transport: dateTransport,
|
|
13
|
+
onUpdated({ form }) {
|
|
14
|
+
if (form.valid) {
|
|
15
|
+
options?.onSuccess?.(form);
|
|
16
|
+
}
|
|
17
|
+
const text = form.message?.text;
|
|
18
|
+
if (text === undefined)
|
|
19
|
+
return;
|
|
20
|
+
if (form.message?.success) {
|
|
21
|
+
toast.success(text);
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
toast.error(text);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
const delayed = form.delayed;
|
|
29
|
+
const errors = form.errors;
|
|
30
|
+
return { form, data: form.form, delayed, errors };
|
|
31
|
+
}
|
|
32
|
+
export function prepareEmptyForm(schema, options) {
|
|
33
|
+
const _invalidateAll = options?.invalidateAll === undefined ? false : true;
|
|
34
|
+
const form = superForm(defaults(arktype(schema)), {
|
|
35
|
+
validators: arktypeClient(schema),
|
|
36
|
+
dataType: 'json',
|
|
37
|
+
invalidateAll: _invalidateAll,
|
|
38
|
+
transport: dateTransport,
|
|
39
|
+
onUpdated({ form }) {
|
|
40
|
+
if (form.valid) {
|
|
41
|
+
options?.onSuccess?.(form);
|
|
42
|
+
}
|
|
43
|
+
const text = form.message?.text;
|
|
44
|
+
if (text === undefined)
|
|
45
|
+
return;
|
|
46
|
+
if (form.message?.success) {
|
|
47
|
+
toast.success(text);
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
toast.error(text);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
const delayed = form.delayed;
|
|
55
|
+
const errors = form.errors;
|
|
56
|
+
return { form, data: form.form, delayed, errors };
|
|
57
|
+
}
|
|
58
|
+
export async function serverValidateForm(request, schema) {
|
|
59
|
+
const form = await superValidate(request, arktype(schema), { transport: dateTransport });
|
|
60
|
+
if (!form.valid) {
|
|
61
|
+
throw fail(400, { form });
|
|
62
|
+
}
|
|
63
|
+
return form;
|
|
64
|
+
}
|
package/dist/utils/index.d.ts
CHANGED
package/dist/utils/index.js
CHANGED
|
@@ -12,5 +12,5 @@ export declare const Email: import("arktype/internal/methods/object.ts").ObjectT
|
|
|
12
12
|
export declare const FirstName: import("arktype/internal/methods/object.ts").ObjectType<(In: string) => import("arktype").Out<string>, {}>;
|
|
13
13
|
export declare const LastName: import("arktype/internal/methods/object.ts").ObjectType<(In: string) => import("arktype").Out<string>, {}>;
|
|
14
14
|
export declare const Id: import("arktype/internal/methods/number.ts").NumberType<number, {}>;
|
|
15
|
-
export declare const
|
|
15
|
+
export declare const Password: import("arktype/internal/methods/string.ts").StringType<string, {}>;
|
|
16
16
|
export declare const Duration: import("arktype/internal/methods/number.ts").NumberType<number, {}>;
|
|
@@ -38,7 +38,7 @@ export const Id = type('number >= 0');
|
|
|
38
38
|
const passwordMaxLength = 20;
|
|
39
39
|
const passwordMinLength = 8;
|
|
40
40
|
const allowedChars = /^[A-Za-z0-9!@$#()]+$/;
|
|
41
|
-
export const
|
|
41
|
+
export const Password = type('string')
|
|
42
42
|
.atLeastLength(passwordMinLength)
|
|
43
43
|
.atMostLength(passwordMaxLength)
|
|
44
44
|
.configure({
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.5.
|
|
6
|
+
"version": "0.5.5",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"files": [
|
|
9
9
|
"dist",
|
|
@@ -15,13 +15,33 @@
|
|
|
15
15
|
],
|
|
16
16
|
"type": "module",
|
|
17
17
|
"exports": {
|
|
18
|
-
"./components": {
|
|
19
|
-
"types": "./dist/components/index.d.ts",
|
|
20
|
-
"svelte": "./dist/components/index.js"
|
|
18
|
+
"./components/form": {
|
|
19
|
+
"types": "./dist/components/form/index.d.ts",
|
|
20
|
+
"svelte": "./dist/components/form/index.js"
|
|
21
21
|
},
|
|
22
|
-
"./
|
|
23
|
-
"types": "./dist/
|
|
24
|
-
"
|
|
22
|
+
"./components/ui": {
|
|
23
|
+
"types": "./dist/components/ui/index.d.ts",
|
|
24
|
+
"svelte": "./dist/components/ui/index.js"
|
|
25
|
+
},
|
|
26
|
+
"./utils/datetime": {
|
|
27
|
+
"types": "./dist/utils/datetime/index.d.ts",
|
|
28
|
+
"import": "./dist/utils/datetime/index.js"
|
|
29
|
+
},
|
|
30
|
+
"./utils/types/arktype": {
|
|
31
|
+
"types": "./dist/utils/types/arktype.d.ts",
|
|
32
|
+
"import": "./dist/utils/types/arktype.js"
|
|
33
|
+
},
|
|
34
|
+
"./utils/types/consts": {
|
|
35
|
+
"types": "./dist/utils/types/consts.d.ts",
|
|
36
|
+
"import": "./dist/utils/types/consts.js"
|
|
37
|
+
},
|
|
38
|
+
"./utils/types/db": {
|
|
39
|
+
"types": "./dist/utils/types/db.d.ts",
|
|
40
|
+
"import": "./dist/utils/types/db.js"
|
|
41
|
+
},
|
|
42
|
+
"./utils/form": {
|
|
43
|
+
"types": "./dist/utils/form.d.ts",
|
|
44
|
+
"import": "./dist/utils/form.js"
|
|
25
45
|
}
|
|
26
46
|
},
|
|
27
47
|
"peerDependencies": {
|
|
@@ -39,7 +59,6 @@
|
|
|
39
59
|
"@changesets/cli": "^2.29.7",
|
|
40
60
|
"@eslint/compat": "^1.2.5",
|
|
41
61
|
"@eslint/js": "^9.22.0",
|
|
42
|
-
"@internationalized/date": "^3.9.0",
|
|
43
62
|
"@lucide/svelte": "^0.544.0",
|
|
44
63
|
"@sveltejs/adapter-static": "^3.0.8",
|
|
45
64
|
"@sveltejs/kit": "^2.22.0",
|
|
@@ -52,6 +71,7 @@
|
|
|
52
71
|
"@types/ramda": "^0.31.1",
|
|
53
72
|
"@types/sorted-array-functions": "^1.3.3",
|
|
54
73
|
"arktype": "^2.1.22",
|
|
74
|
+
"bits-ui": "^2.11.4",
|
|
55
75
|
"clsx": "^2.1.1",
|
|
56
76
|
"eslint": "^9.22.0",
|
|
57
77
|
"eslint-config-prettier": "^10.0.1",
|
|
@@ -97,6 +117,7 @@
|
|
|
97
117
|
"lint:es": "eslint --cache --cache-location .cache/.eslintcache --cache-strategy metadata .",
|
|
98
118
|
"lint:svelte": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
99
119
|
"test:unit": "vitest run",
|
|
100
|
-
"test": "pnpm test:unit"
|
|
120
|
+
"test": "pnpm test:unit",
|
|
121
|
+
"watch": "svelte-package --watch"
|
|
101
122
|
}
|
|
102
123
|
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import TextField from './form/fields/TextField.svelte';
|
|
2
|
-
import PasswordField from './form/fields/PasswordField.svelte';
|
|
3
|
-
import HexColorField from './form/fields/HexColorField.svelte';
|
|
4
|
-
import ChoiceField from './form/fields/ChoiceField.svelte';
|
|
5
|
-
import ChoiceMultiField from './form/fields/ChoiceMultiField.svelte';
|
|
6
|
-
import Choice from './ui/choice/Choice.svelte';
|
|
7
|
-
import ChoiceMulti from './ui/choice/ChoiceMulti.svelte';
|
|
8
|
-
import WeekdayChoice from './ui/choice/WeekdayChoice.svelte';
|
|
9
|
-
import WeekdayChoiceMulti from './ui/choice/WeekdayChoiceMulti.svelte';
|
|
10
|
-
import WeekdayChoiceField from './form/fields/WeekdayChoiceField.svelte';
|
|
11
|
-
import WeekdayChoiceMultiField from './form/fields/WeekdayChoiceMultiField.svelte';
|
|
12
|
-
import Button from './form/Button.svelte';
|
|
13
|
-
import Form from './form/Form.svelte';
|
|
14
|
-
export { Form, TextField, PasswordField, HexColorField, ChoiceMultiField, ChoiceField, WeekdayChoiceField, WeekdayChoiceMultiField, Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti, Button };
|
package/dist/components/index.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import TextField from './form/fields/TextField.svelte';
|
|
2
|
-
import PasswordField from './form/fields/PasswordField.svelte';
|
|
3
|
-
import HexColorField from './form/fields/HexColorField.svelte';
|
|
4
|
-
import ChoiceField from './form/fields/ChoiceField.svelte';
|
|
5
|
-
import ChoiceMultiField from './form/fields/ChoiceMultiField.svelte';
|
|
6
|
-
import Choice from './ui/choice/Choice.svelte';
|
|
7
|
-
import ChoiceMulti from './ui/choice/ChoiceMulti.svelte';
|
|
8
|
-
import WeekdayChoice from './ui/choice/WeekdayChoice.svelte';
|
|
9
|
-
import WeekdayChoiceMulti from './ui/choice/WeekdayChoiceMulti.svelte';
|
|
10
|
-
import WeekdayChoiceField from './form/fields/WeekdayChoiceField.svelte';
|
|
11
|
-
import WeekdayChoiceMultiField from './form/fields/WeekdayChoiceMultiField.svelte';
|
|
12
|
-
import Button from './form/Button.svelte';
|
|
13
|
-
import Form from './form/Form.svelte';
|
|
14
|
-
export { Form, TextField, PasswordField, HexColorField, ChoiceMultiField, ChoiceField, WeekdayChoiceField, WeekdayChoiceMultiField, Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti, Button };
|