lutra 0.0.20 → 0.1.0
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/README.md +4 -24
- package/dist/components/AspectRatio.svelte +26 -0
- package/dist/components/AspectRatio.svelte.d.ts +8 -0
- package/dist/components/Dialog.svelte +78 -0
- package/dist/components/Dialog.svelte.d.ts +14 -0
- package/dist/components/Layout.svelte +32 -0
- package/dist/components/Layout.svelte.d.ts +11 -0
- package/dist/components/PageContent.svelte +108 -0
- package/dist/components/PageContent.svelte.d.ts +38 -0
- package/dist/components/Theme.svelte +87 -0
- package/dist/components/Theme.svelte.d.ts +17 -0
- package/dist/{display → components}/Tooltip.svelte +37 -11
- package/dist/components/Tooltip.svelte.d.ts +12 -0
- package/dist/config.d.ts +30 -0
- package/dist/config.js +18 -0
- package/dist/css/0-layers.css +1 -0
- package/dist/css/1-props.css +775 -0
- package/dist/css/2-base.css +209 -0
- package/dist/css/3-typo.css +65 -0
- package/dist/css/4-layout.css +5 -0
- package/dist/css/5-media.css +21 -0
- package/dist/css/lutra.css +6 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.js +5 -2
- package/dist/types.d.ts +39 -0
- package/dist/types.js +25 -0
- package/package.json +29 -75
- package/dist/data/Stat.svelte +0 -89
- package/dist/data/Stat.svelte.d.ts +0 -39
- package/dist/data/index.d.ts +0 -1
- package/dist/data/index.js +0 -1
- package/dist/display/Avatar.svelte +0 -61
- package/dist/display/Avatar.svelte.d.ts +0 -23
- package/dist/display/Badge.svelte +0 -93
- package/dist/display/Badge.svelte.d.ts +0 -34
- package/dist/display/Callout.svelte +0 -109
- package/dist/display/Callout.svelte.d.ts +0 -36
- package/dist/display/Close.svelte +0 -58
- package/dist/display/Close.svelte.d.ts +0 -21
- package/dist/display/Code.svelte +0 -195
- package/dist/display/Code.svelte.d.ts +0 -31
- package/dist/display/ContextTip.svelte +0 -26
- package/dist/display/ContextTip.svelte.d.ts +0 -22
- package/dist/display/Details.svelte +0 -49
- package/dist/display/Details.svelte.d.ts +0 -32
- package/dist/display/Hero.svelte +0 -50
- package/dist/display/Hero.svelte.d.ts +0 -30
- package/dist/display/Icon.svelte +0 -40
- package/dist/display/Icon.svelte.d.ts +0 -24
- package/dist/display/IconButton.svelte +0 -84
- package/dist/display/IconButton.svelte.d.ts +0 -30
- package/dist/display/Image.svelte +0 -91
- package/dist/display/Image.svelte.d.ts +0 -37
- package/dist/display/Indicator.svelte +0 -352
- package/dist/display/Indicator.svelte.d.ts +0 -24
- package/dist/display/Inset.svelte +0 -18
- package/dist/display/Inset.svelte.d.ts +0 -22
- package/dist/display/Notification.svelte +0 -104
- package/dist/display/Notification.svelte.d.ts +0 -42
- package/dist/display/Popup.svelte +0 -111
- package/dist/display/Popup.svelte.d.ts +0 -30
- package/dist/display/Table.svelte +0 -24
- package/dist/display/Table.svelte.d.ts +0 -34
- package/dist/display/Tag.svelte +0 -90
- package/dist/display/Tag.svelte.d.ts +0 -35
- package/dist/display/Tooltip.svelte.d.ts +0 -28
- package/dist/display/index.d.ts +0 -14
- package/dist/display/index.js +0 -14
- package/dist/display/notifications.svelte.d.ts +0 -21
- package/dist/display/notifications.svelte.js +0 -31
- package/dist/form/Button.svelte +0 -34
- package/dist/form/Button.svelte.d.ts +0 -36
- package/dist/form/FieldActions.svelte +0 -46
- package/dist/form/FieldActions.svelte.d.ts +0 -24
- package/dist/form/FieldContainer.svelte +0 -37
- package/dist/form/FieldContainer.svelte.d.ts +0 -24
- package/dist/form/FieldContent.svelte +0 -134
- package/dist/form/FieldContent.svelte.d.ts +0 -59
- package/dist/form/FieldError.svelte +0 -14
- package/dist/form/FieldError.svelte.d.ts +0 -21
- package/dist/form/FieldSection.svelte +0 -86
- package/dist/form/FieldSection.svelte.d.ts +0 -34
- package/dist/form/Fieldset.svelte +0 -68
- package/dist/form/Fieldset.svelte.d.ts +0 -42
- package/dist/form/Form.svelte +0 -98
- package/dist/form/Form.svelte.d.ts +0 -33
- package/dist/form/Input.svelte +0 -287
- package/dist/form/Input.svelte.d.ts +0 -142
- package/dist/form/InputLength.svelte +0 -32
- package/dist/form/InputLength.svelte.d.ts +0 -21
- package/dist/form/Label.svelte +0 -27
- package/dist/form/Label.svelte.d.ts +0 -31
- package/dist/form/Select.svelte +0 -88
- package/dist/form/Select.svelte.d.ts +0 -97
- package/dist/form/client.svelte.d.ts +0 -45
- package/dist/form/client.svelte.js +0 -90
- package/dist/form/form.d.ts +0 -52
- package/dist/form/form.js +0 -326
- package/dist/form/index.d.ts +0 -15
- package/dist/form/index.js +0 -15
- package/dist/form/types.d.ts +0 -52
- package/dist/form/types.js +0 -1
- package/dist/grid/Column.svelte +0 -11
- package/dist/grid/Column.svelte.d.ts +0 -22
- package/dist/grid/Grid.svelte +0 -19
- package/dist/grid/Grid.svelte.d.ts +0 -24
- package/dist/grid/Row.svelte +0 -44
- package/dist/grid/Row.svelte.d.ts +0 -24
- package/dist/icons/Alert.svelte +0 -3
- package/dist/icons/Alert.svelte.d.ts +0 -23
- package/dist/icons/Copy.svelte +0 -3
- package/dist/icons/Copy.svelte.d.ts +0 -23
- package/dist/icons/Done.svelte +0 -3
- package/dist/icons/Done.svelte.d.ts +0 -23
- package/dist/icons/Error.svelte +0 -3
- package/dist/icons/Error.svelte.d.ts +0 -23
- package/dist/icons/Help.svelte +0 -3
- package/dist/icons/Help.svelte.d.ts +0 -23
- package/dist/icons/Hide.svelte +0 -3
- package/dist/icons/Hide.svelte.d.ts +0 -23
- package/dist/icons/Info.svelte +0 -3
- package/dist/icons/Info.svelte.d.ts +0 -23
- package/dist/icons/Link.svelte +0 -3
- package/dist/icons/Link.svelte.d.ts +0 -23
- package/dist/icons/MenuBurger.svelte +0 -3
- package/dist/icons/MenuBurger.svelte.d.ts +0 -23
- package/dist/icons/MenuDots.svelte +0 -3
- package/dist/icons/MenuDots.svelte.d.ts +0 -23
- package/dist/icons/Show.svelte +0 -3
- package/dist/icons/Show.svelte.d.ts +0 -23
- package/dist/icons/Success.svelte +0 -3
- package/dist/icons/Success.svelte.d.ts +0 -23
- package/dist/icons/Warning.svelte +0 -3
- package/dist/icons/Warning.svelte.d.ts +0 -23
- package/dist/icons/index.d.ts +0 -11
- package/dist/icons/index.js +0 -11
- package/dist/layout/Layout.svelte +0 -45
- package/dist/layout/Layout.svelte.d.ts +0 -25
- package/dist/layout/LayoutFooter.svelte +0 -21
- package/dist/layout/LayoutFooter.svelte.d.ts +0 -19
- package/dist/layout/LayoutGrid.svelte +0 -51
- package/dist/layout/LayoutGrid.svelte.d.ts +0 -38
- package/dist/layout/LayoutHeader.svelte +0 -94
- package/dist/layout/LayoutHeader.svelte.d.ts +0 -39
- package/dist/layout/LayoutSideMenu.svelte +0 -54
- package/dist/layout/LayoutSideMenu.svelte.d.ts +0 -25
- package/dist/layout/LayoutTypes.d.ts +0 -15
- package/dist/layout/LayoutTypes.js +0 -9
- package/dist/layout/Overlay.svelte +0 -20
- package/dist/layout/Overlay.svelte.d.ts +0 -35
- package/dist/layout/OverlayContainer.svelte +0 -28
- package/dist/layout/OverlayContainer.svelte.d.ts +0 -16
- package/dist/layout/OverlayLayer.svelte +0 -145
- package/dist/layout/OverlayLayer.svelte.d.ts +0 -22
- package/dist/layout/PageContent.svelte +0 -97
- package/dist/layout/PageContent.svelte.d.ts +0 -28
- package/dist/layout/Theme.svelte +0 -228
- package/dist/layout/Theme.svelte.d.ts +0 -24
- package/dist/layout/UIContent.svelte +0 -15
- package/dist/layout/UIContent.svelte.d.ts +0 -22
- package/dist/layout/index.d.ts +0 -7
- package/dist/layout/index.js +0 -7
- package/dist/layout/overlays.svelte.d.ts +0 -34
- package/dist/layout/overlays.svelte.js +0 -44
- package/dist/nav/Breadcrumb.svelte +0 -82
- package/dist/nav/Breadcrumb.svelte.d.ts +0 -33
- package/dist/nav/Menu.svelte +0 -177
- package/dist/nav/Menu.svelte.d.ts +0 -33
- package/dist/nav/MenuItem.svelte +0 -140
- package/dist/nav/MenuItem.svelte.d.ts +0 -26
- package/dist/nav/MenuTypes.d.ts +0 -58
- package/dist/nav/MenuTypes.js +0 -1
- package/dist/nav/NavMenu.svelte +0 -183
- package/dist/nav/NavMenu.svelte.d.ts +0 -20
- package/dist/nav/TabbedContent.svelte +0 -43
- package/dist/nav/TabbedContent.svelte.d.ts +0 -24
- package/dist/nav/Tabs.svelte +0 -118
- package/dist/nav/Tabs.svelte.d.ts +0 -26
- package/dist/nav/index.d.ts +0 -6
- package/dist/nav/index.js +0 -5
- package/dist/style.css +0 -853
- package/dist/typo/Clamp.svelte +0 -25
- package/dist/typo/Clamp.svelte.d.ts +0 -28
- package/dist/typo/H.svelte +0 -52
- package/dist/typo/H.svelte.d.ts +0 -32
- package/dist/typo/H1.svelte +0 -14
- package/dist/typo/H1.svelte.d.ts +0 -30
- package/dist/typo/H2.svelte +0 -14
- package/dist/typo/H2.svelte.d.ts +0 -30
- package/dist/typo/H3.svelte +0 -14
- package/dist/typo/H3.svelte.d.ts +0 -30
- package/dist/typo/H4.svelte +0 -14
- package/dist/typo/H4.svelte.d.ts +0 -30
- package/dist/typo/H5.svelte +0 -14
- package/dist/typo/H5.svelte.d.ts +0 -30
- package/dist/typo/H6.svelte +0 -14
- package/dist/typo/H6.svelte.d.ts +0 -30
- package/dist/typo/P.svelte +0 -34
- package/dist/typo/P.svelte.d.ts +0 -30
- package/dist/typo/index.d.ts +0 -9
- package/dist/typo/index.js +0 -9
- package/dist/utils/StringOrComponentOrSnippet.svelte +0 -14
- package/dist/utils/StringOrComponentOrSnippet.svelte.d.ts +0 -24
- package/dist/utils/attr.d.ts +0 -5
- package/dist/utils/attr.js +0 -21
- package/dist/utils/color.d.ts +0 -51
- package/dist/utils/color.js +0 -97
- package/dist/utils/defaults.d.ts +0 -4
- package/dist/utils/defaults.js +0 -1
- package/dist/utils/dom.d.ts +0 -15
- package/dist/utils/dom.js +0 -74
- package/dist/utils/hooks.server.d.ts +0 -2
- package/dist/utils/hooks.server.js +0 -16
- package/dist/utils/id.d.ts +0 -1
- package/dist/utils/id.js +0 -3
- package/dist/utils/index.d.ts +0 -8
- package/dist/utils/index.js +0 -5
- package/dist/utils/isSnippet.d.ts +0 -5
- package/dist/utils/isSnippet.js +0 -6
- package/dist/utils/keyboard.svelte.d.ts +0 -22
- package/dist/utils/keyboard.svelte.js +0 -161
- /package/dist/{utils → util}/transitions.d.ts +0 -0
- /package/dist/{utils → util}/transitions.js +0 -0
@@ -1,97 +0,0 @@
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
2
|
-
declare const __propDef: {
|
3
|
-
props: {
|
4
|
-
attrs?: Record<string, string> | undefined;
|
5
|
-
children?: ((this: void) => typeof import("svelte").SnippetReturn & {
|
6
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
7
|
-
}) | undefined;
|
8
|
-
disabled?: boolean | undefined;
|
9
|
-
help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
|
10
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
11
|
-
}) | undefined;
|
12
|
-
id?: import("svelte").Bindable<string | undefined>;
|
13
|
-
label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
|
14
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
15
|
-
}) | undefined;
|
16
|
-
labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
|
17
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
18
|
-
}) | undefined;
|
19
|
-
name: string;
|
20
|
-
onblur?: ((e: FocusEvent) => void) | undefined;
|
21
|
-
onchange?: ((e: Event) => void) | undefined;
|
22
|
-
onclick?: ((e: MouseEvent) => void) | undefined;
|
23
|
-
onfocus?: ((e: FocusEvent) => void) | undefined;
|
24
|
-
onkeyup?: ((e: KeyboardEvent) => void) | undefined;
|
25
|
-
onkeydown?: ((e: KeyboardEvent) => void) | undefined;
|
26
|
-
onkeypress?: ((e: KeyboardEvent) => void) | undefined;
|
27
|
-
options?: string[] | {
|
28
|
-
value: string;
|
29
|
-
label: string;
|
30
|
-
}[] | undefined;
|
31
|
-
placeholder?: string | undefined;
|
32
|
-
suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
|
33
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
34
|
-
}) | undefined;
|
35
|
-
prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
|
36
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
37
|
-
}) | undefined;
|
38
|
-
required?: boolean | undefined;
|
39
|
-
results?: number | undefined;
|
40
|
-
shape?: "default" | "circle" | "rounded" | "pill" | undefined;
|
41
|
-
src?: string | undefined;
|
42
|
-
tabindex?: number | undefined;
|
43
|
-
value?: import("svelte").Bindable<string | undefined>;
|
44
|
-
};
|
45
|
-
events: {
|
46
|
-
[evt: string]: CustomEvent<any>;
|
47
|
-
};
|
48
|
-
slots: {};
|
49
|
-
};
|
50
|
-
export type SelectProps = typeof __propDef.props;
|
51
|
-
export type SelectEvents = typeof __propDef.events;
|
52
|
-
export type SelectSlots = typeof __propDef.slots;
|
53
|
-
export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
|
54
|
-
constructor(options?: import("svelte").ComponentConstructorOptions<{
|
55
|
-
attrs?: Record<string, string> | undefined;
|
56
|
-
children?: ((this: void) => typeof import("svelte").SnippetReturn & {
|
57
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
58
|
-
}) | undefined;
|
59
|
-
disabled?: boolean | undefined;
|
60
|
-
help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
|
61
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
62
|
-
}) | undefined;
|
63
|
-
id?: import("svelte").Bindable<string | undefined>;
|
64
|
-
label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
|
65
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
66
|
-
}) | undefined;
|
67
|
-
labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
|
68
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
69
|
-
}) | undefined;
|
70
|
-
name: string;
|
71
|
-
onblur?: ((e: FocusEvent) => void) | undefined;
|
72
|
-
onchange?: ((e: Event) => void) | undefined;
|
73
|
-
onclick?: ((e: MouseEvent) => void) | undefined;
|
74
|
-
onfocus?: ((e: FocusEvent) => void) | undefined;
|
75
|
-
onkeyup?: ((e: KeyboardEvent) => void) | undefined;
|
76
|
-
onkeydown?: ((e: KeyboardEvent) => void) | undefined;
|
77
|
-
onkeypress?: ((e: KeyboardEvent) => void) | undefined;
|
78
|
-
options?: string[] | {
|
79
|
-
value: string;
|
80
|
-
label: string;
|
81
|
-
}[] | undefined;
|
82
|
-
placeholder?: string | undefined;
|
83
|
-
suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
|
84
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
85
|
-
}) | undefined;
|
86
|
-
prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
|
87
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
88
|
-
}) | undefined;
|
89
|
-
required?: boolean | undefined;
|
90
|
-
results?: number | undefined;
|
91
|
-
shape?: "default" | "circle" | "rounded" | "pill" | undefined;
|
92
|
-
src?: string | undefined;
|
93
|
-
tabindex?: number | undefined;
|
94
|
-
value?: import("svelte").Bindable<string | undefined>;
|
95
|
-
}>);
|
96
|
-
}
|
97
|
-
export {};
|
@@ -1,45 +0,0 @@
|
|
1
|
-
import type { ZodType } from "zod";
|
2
|
-
import type { Form } from "./types.js";
|
3
|
-
/**
|
4
|
-
* Use a form in a Svelte component.
|
5
|
-
* @param {Form} form - The form to use.
|
6
|
-
* @returns
|
7
|
-
*/
|
8
|
-
export declare function useForm(form: Form<any>): {
|
9
|
-
form: {
|
10
|
-
originalData: any;
|
11
|
-
data: any;
|
12
|
-
} & Form<any>;
|
13
|
-
};
|
14
|
-
/**
|
15
|
-
* Validate a single field.
|
16
|
-
* @param {Form} form - The form to validate.
|
17
|
-
* @param {string} name - The name of the field to validate.
|
18
|
-
* @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
|
19
|
-
* @param {ZodType} validator - The validator to use.
|
20
|
-
*/
|
21
|
-
export declare function fieldValidate(form: Form<any>, name: string, el?: HTMLInputElement | HTMLSelectElement, validator?: ZodType<any, any>): void;
|
22
|
-
/**
|
23
|
-
* Keydown event handler for a field.
|
24
|
-
* @param {KeyboardEvent} e - The event.
|
25
|
-
* @param {Form} form - The form to use.
|
26
|
-
* @param {string} name - The name of the field.
|
27
|
-
* @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
|
28
|
-
* @param {ZodType} validator - The validator to use.
|
29
|
-
* @param {(e: KeyboardEvent) => void} onkeydown - The onkeydown event handler.
|
30
|
-
*/
|
31
|
-
export declare function fieldKeydown(form: Form<any>, name: string, el: () => HTMLInputElement | HTMLSelectElement | undefined, validator?: ZodType<any, any>, onkeydown?: (e: KeyboardEvent) => void): (e: KeyboardEvent) => Promise<void>;
|
32
|
-
/**
|
33
|
-
* Change event handler for a field.
|
34
|
-
* @param {Event} e - The event.
|
35
|
-
* @param {Form} form - The form to use.
|
36
|
-
* @param {string} name - The name of the field.
|
37
|
-
* @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
|
38
|
-
* @param {ZodType} validator - The validator to use.
|
39
|
-
* @param {(e: Event) => void} onchange - The onchange event handler.
|
40
|
-
*/
|
41
|
-
export declare function fieldChange(form: Form<any>, name: string, el: () => HTMLInputElement | HTMLSelectElement | undefined, validator?: ZodType<any, any>, onchange?: (e: Event) => void): (e: Event) => Promise<void>;
|
42
|
-
/**
|
43
|
-
* Keys that should be ignored when marking a field as tainted.
|
44
|
-
*/
|
45
|
-
export declare const ignoreKeys: string[];
|
@@ -1,90 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Use a form in a Svelte component.
|
3
|
-
* @param {Form} form - The form to use.
|
4
|
-
* @returns
|
5
|
-
*/
|
6
|
-
export function useForm(form) {
|
7
|
-
let _form = Object.assign({
|
8
|
-
originalData: JSON.parse(JSON.stringify(form.data ?? {})),
|
9
|
-
data: form.data ?? {},
|
10
|
-
}, form);
|
11
|
-
// Have to declare a variable separately to use in the return object
|
12
|
-
// as the compiler is looking for a declaration.
|
13
|
-
let __form = $state(_form);
|
14
|
-
return {
|
15
|
-
form: __form,
|
16
|
-
};
|
17
|
-
}
|
18
|
-
/**
|
19
|
-
* Validate a single field.
|
20
|
-
* @param {Form} form - The form to validate.
|
21
|
-
* @param {string} name - The name of the field to validate.
|
22
|
-
* @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
|
23
|
-
* @param {ZodType} validator - The validator to use.
|
24
|
-
*/
|
25
|
-
export function fieldValidate(form, name, el, validator) {
|
26
|
-
if (!validator)
|
27
|
-
return;
|
28
|
-
const result = validator.safeParse(el?.value);
|
29
|
-
if (result.success) {
|
30
|
-
form.issues = (form.issues || []).filter((issue) => issue.name !== name);
|
31
|
-
form.valid = form.issues.length === 0;
|
32
|
-
}
|
33
|
-
else {
|
34
|
-
form.valid = false;
|
35
|
-
form.issues = (form.issues || []).filter((issue) => issue.name !== name);
|
36
|
-
form.issues?.push({
|
37
|
-
name, // Include the path of the field.
|
38
|
-
...((result.error?.issues?.length ? result.error.issues : [])?.[0]), // Include the first issue as we only care about one at a time.
|
39
|
-
});
|
40
|
-
}
|
41
|
-
}
|
42
|
-
/**
|
43
|
-
* Keydown event handler for a field.
|
44
|
-
* @param {KeyboardEvent} e - The event.
|
45
|
-
* @param {Form} form - The form to use.
|
46
|
-
* @param {string} name - The name of the field.
|
47
|
-
* @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
|
48
|
-
* @param {ZodType} validator - The validator to use.
|
49
|
-
* @param {(e: KeyboardEvent) => void} onkeydown - The onkeydown event handler.
|
50
|
-
*/
|
51
|
-
export function fieldKeydown(form, name, el, validator, onkeydown) {
|
52
|
-
return async function (e) {
|
53
|
-
setTimeout(() => {
|
54
|
-
if (form) {
|
55
|
-
const possibleKey = e?.key;
|
56
|
-
if (ignoreKeys.includes(possibleKey))
|
57
|
-
return;
|
58
|
-
form.data[name] = el()?.value || '';
|
59
|
-
fieldValidate(form, name, el(), validator);
|
60
|
-
}
|
61
|
-
}, 0); // Wait for the key to be updated in the input.
|
62
|
-
if (onkeydown)
|
63
|
-
return onkeydown(e);
|
64
|
-
};
|
65
|
-
}
|
66
|
-
/**
|
67
|
-
* Change event handler for a field.
|
68
|
-
* @param {Event} e - The event.
|
69
|
-
* @param {Form} form - The form to use.
|
70
|
-
* @param {string} name - The name of the field.
|
71
|
-
* @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
|
72
|
-
* @param {ZodType} validator - The validator to use.
|
73
|
-
* @param {(e: Event) => void} onchange - The onchange event handler.
|
74
|
-
*/
|
75
|
-
export function fieldChange(form, name, el, validator, onchange) {
|
76
|
-
return async function (e) {
|
77
|
-
if (form) {
|
78
|
-
console.log('fieldChange', name, el()?.value, validator);
|
79
|
-
form.data[name] = el()?.value || '';
|
80
|
-
form.fields[name].tainted = true;
|
81
|
-
fieldValidate(form, name, el(), validator);
|
82
|
-
}
|
83
|
-
if (onchange)
|
84
|
-
return onchange(e);
|
85
|
-
};
|
86
|
-
}
|
87
|
-
/**
|
88
|
-
* Keys that should be ignored when marking a field as tainted.
|
89
|
-
*/
|
90
|
-
export const ignoreKeys = ['Tab', 'Shift', 'Control', 'Alt', 'Meta', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', 'Escape', 'CapsLock', 'NumLock', 'ScrollLock', 'Pause', 'ContextMenu', 'PrintScreen', 'Help', 'Clear', 'OS', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F12'];
|
package/dist/form/form.d.ts
DELETED
@@ -1,52 +0,0 @@
|
|
1
|
-
import { Bodyguard, type BodyguardFormConfig, type BodyguardResult, type GenericIssue, type JSONLike } from "@auth70/bodyguard";
|
2
|
-
import type { RequestEvent } from "@sveltejs/kit";
|
3
|
-
import type { ZodType, infer as Infer } from "zod";
|
4
|
-
import type { Form, FormField, FormIssue, ZodTypes } from "./types.js";
|
5
|
-
export declare const bodyguard: Bodyguard;
|
6
|
-
/**
|
7
|
-
* Get fields from a Zod schema.
|
8
|
-
* @param {ZodObject<any>} schema - The schema to get fields from.
|
9
|
-
* @returns {Record<string, any>} - The fields from the schema.
|
10
|
-
*/
|
11
|
-
export declare function getFieldsFromSchema(schema: ZodType, data?: BodyguardResult<any>, parents?: string[]): Record<string, FormField>;
|
12
|
-
/**
|
13
|
-
* Server page load call. Optionally with a default object to populate the form with from locals.
|
14
|
-
* @param {ZodType} schema - The schema to parse the form with.
|
15
|
-
* @param {RequestEvent} event - The event to load the (possible) form from.
|
16
|
-
* @param {JSONLike} obj - The default object to populate the form with.
|
17
|
-
* @returns {Promise<Form<Z>>} - The form to use.
|
18
|
-
*/
|
19
|
-
export declare function loadForm<Z extends ZodTypes>(schema: Z, event: RequestEvent, obj?: JSONLike): Promise<Form<Z>>;
|
20
|
-
/**
|
21
|
-
* Parse zod issues into form issues (with a path string).
|
22
|
-
* @param {ZodIssue[]} issues - The issues to parse.
|
23
|
-
* @returns {FormIssue[]} - The parsed issues.
|
24
|
-
*/
|
25
|
-
export declare function parseFormIssues(issues: GenericIssue[]): FormIssue[];
|
26
|
-
/**
|
27
|
-
* Parse a form using a schema.
|
28
|
-
* @param {ZodType} schema - The schema to parse the form with.
|
29
|
-
* @param {Request} request - The request to parse.
|
30
|
-
* @param {BodyguardFormConfig} opts - The options for the form validation.
|
31
|
-
* @returns {Promise<{ valid: false } | { valid: true, data: Infer<Z> }>} - The result of the form validation.
|
32
|
-
*/
|
33
|
-
export declare function parseForm<Z extends ZodType>(schema: Z, event: RequestEvent, opts?: BodyguardFormConfig): Promise<Form<Z>>;
|
34
|
-
/**
|
35
|
-
* Convert an array path from a Zod issue to a string path for a form field.
|
36
|
-
* @param {(string | number)[]} path - The path to convert.
|
37
|
-
* @returns {string} - The string path.
|
38
|
-
*/
|
39
|
-
export declare function arrayPathToStringPath(path: (string | number)[]): string;
|
40
|
-
/**
|
41
|
-
* Get a value from an object using a string path.
|
42
|
-
* @param {any} obj - The object to get the value from.
|
43
|
-
* @param {string} path - The path to get the value from.
|
44
|
-
* @returns {string | number | Date | boolean | object | undefined} - The value from the object.
|
45
|
-
*/
|
46
|
-
export declare function getFromObjWithStringPath(obj: any, path: string): string | number | Date | boolean | object | undefined;
|
47
|
-
/**
|
48
|
-
* Get individual validators for each field in a form.
|
49
|
-
* @param {Form} form - The form to get the validators from.
|
50
|
-
* @returns {Record<keyof Infer<T>, (value: any) => boolean>} - The validators for each field.
|
51
|
-
*/
|
52
|
-
export declare function getIndividualValidators<T extends ZodTypes>(form?: Form<T>): Record<keyof Infer<T>, (value: any) => boolean>;
|
package/dist/form/form.js
DELETED
@@ -1,326 +0,0 @@
|
|
1
|
-
import { Bodyguard } from "@auth70/bodyguard";
|
2
|
-
import { ZodArray, ZodNullable, ZodOptional, ZodEffects, ZodObject, ZodDefault, ZodString, ZodNumber, ZodBoolean, ZodDate, array } from "zod";
|
3
|
-
import { zerialize, dezerialize } from "@auth70/zodex-esm";
|
4
|
-
export const bodyguard = new Bodyguard();
|
5
|
-
/**
|
6
|
-
* Map a Zod type to a field type as a string.
|
7
|
-
* @param {Zod.ZodType} schema - The Zod schema to map to a field type.
|
8
|
-
* @returns {string} - The field type as a string.
|
9
|
-
*/
|
10
|
-
function mapZodTypeToFieldType(schema) {
|
11
|
-
if (schema instanceof ZodNullable) {
|
12
|
-
return mapZodTypeToFieldType(schema.unwrap());
|
13
|
-
}
|
14
|
-
if (schema instanceof ZodOptional) {
|
15
|
-
return mapZodTypeToFieldType(schema.unwrap());
|
16
|
-
}
|
17
|
-
if (schema instanceof ZodEffects) {
|
18
|
-
return mapZodTypeToFieldType(schema._def?.schema ?? schema);
|
19
|
-
}
|
20
|
-
if (schema instanceof ZodArray) {
|
21
|
-
return `Array<${mapZodTypeToFieldType(schema.element)}>`;
|
22
|
-
}
|
23
|
-
if (schema instanceof ZodObject) {
|
24
|
-
return 'object';
|
25
|
-
}
|
26
|
-
if (schema instanceof ZodDefault) {
|
27
|
-
return mapZodTypeToFieldType(schema._def.innerType);
|
28
|
-
}
|
29
|
-
if (schema instanceof ZodDate) {
|
30
|
-
return 'date';
|
31
|
-
}
|
32
|
-
if (schema instanceof ZodString) {
|
33
|
-
return 'string';
|
34
|
-
}
|
35
|
-
if (schema instanceof ZodNumber) {
|
36
|
-
return 'number';
|
37
|
-
}
|
38
|
-
if (schema instanceof ZodBoolean) {
|
39
|
-
return 'boolean';
|
40
|
-
}
|
41
|
-
return schema.constructor.name;
|
42
|
-
}
|
43
|
-
/**
|
44
|
-
* Get fields from a Zod schema.
|
45
|
-
* @param {ZodObject<any>} schema - The schema to get fields from.
|
46
|
-
* @returns {Record<string, any>} - The fields from the schema.
|
47
|
-
*/
|
48
|
-
export function getFieldsFromSchema(schema, data, parents) {
|
49
|
-
if (!parents)
|
50
|
-
parents = [];
|
51
|
-
else
|
52
|
-
parents = [...parents];
|
53
|
-
const fields = {};
|
54
|
-
if (schema instanceof ZodEffects) {
|
55
|
-
return getFieldsFromSchema(schema._def.schema, data);
|
56
|
-
}
|
57
|
-
if (!(schema instanceof ZodObject)) {
|
58
|
-
console.error('[lutra] getFieldsFromSchema: Schema is not an object:', schema.constructor.name);
|
59
|
-
return fields;
|
60
|
-
}
|
61
|
-
for (const key in schema.shape) {
|
62
|
-
const field = schema.shape[key];
|
63
|
-
// Fields can be wrapped like ZodDefault._def.innerType._def.InnerType, etc. We want the last inner type's definition.
|
64
|
-
// On the way, let's check if any of the _def include a defaultValue.
|
65
|
-
let required = true;
|
66
|
-
let defaultValue = undefined;
|
67
|
-
let min = undefined;
|
68
|
-
let max = undefined;
|
69
|
-
let pattern = undefined;
|
70
|
-
let minlength = undefined;
|
71
|
-
let maxlength = undefined;
|
72
|
-
let type = field;
|
73
|
-
while (type instanceof ZodEffects || type instanceof ZodOptional || type instanceof ZodDefault || type instanceof ZodNullable) {
|
74
|
-
if (type instanceof ZodOptional || type instanceof ZodNullable) {
|
75
|
-
required = false;
|
76
|
-
type = type._def.innerType;
|
77
|
-
}
|
78
|
-
if (type instanceof ZodDefault) {
|
79
|
-
defaultValue = type._def.defaultValue();
|
80
|
-
type = type._def.innerType;
|
81
|
-
}
|
82
|
-
else {
|
83
|
-
type = type._def.innerType ? type._def.innerType : type;
|
84
|
-
}
|
85
|
-
}
|
86
|
-
// Check for min/max/regex checks
|
87
|
-
if (type._def.checks) {
|
88
|
-
for (const check of type._def.checks) {
|
89
|
-
if (check.kind === 'min') {
|
90
|
-
if (field instanceof ZodString || field._def?.innerType instanceof ZodString) {
|
91
|
-
minlength = check.value;
|
92
|
-
}
|
93
|
-
else {
|
94
|
-
min = check.value;
|
95
|
-
}
|
96
|
-
}
|
97
|
-
if (check.kind === 'max') {
|
98
|
-
if (field instanceof ZodString || field._def?.innerType instanceof ZodString) {
|
99
|
-
maxlength = check.value;
|
100
|
-
}
|
101
|
-
else {
|
102
|
-
max = check.value;
|
103
|
-
}
|
104
|
-
}
|
105
|
-
if (check.kind === 'regex') {
|
106
|
-
pattern = check.regex.source;
|
107
|
-
}
|
108
|
-
if (check.kind === 'email') {
|
109
|
-
// ...
|
110
|
-
}
|
111
|
-
}
|
112
|
-
}
|
113
|
-
if (type instanceof ZodObject) {
|
114
|
-
const children = getFieldsFromSchema(type, data, [...parents, key]);
|
115
|
-
Object.entries(children).forEach(([childKey, childField]) => {
|
116
|
-
const name = [...parents, key, childKey].join('.');
|
117
|
-
fields[name] = {
|
118
|
-
name,
|
119
|
-
tainted: childField.tainted,
|
120
|
-
coerce: childField.coerce,
|
121
|
-
min: childField.min,
|
122
|
-
max: childField.max,
|
123
|
-
minlength: childField.minlength,
|
124
|
-
maxlength: childField.maxlength,
|
125
|
-
pattern: childField.pattern,
|
126
|
-
required: childField.required,
|
127
|
-
defaultValue: childField.defaultValue,
|
128
|
-
isArray: childField.isArray,
|
129
|
-
type: childField.type,
|
130
|
-
};
|
131
|
-
});
|
132
|
-
}
|
133
|
-
else {
|
134
|
-
fields[key] = {
|
135
|
-
name: [...parents, key].join('.'),
|
136
|
-
tainted: false,
|
137
|
-
min,
|
138
|
-
max,
|
139
|
-
minlength,
|
140
|
-
maxlength,
|
141
|
-
pattern,
|
142
|
-
required,
|
143
|
-
defaultValue,
|
144
|
-
isArray: field instanceof ZodArray,
|
145
|
-
type: mapZodTypeToFieldType(field instanceof ZodArray ? field.element : field),
|
146
|
-
};
|
147
|
-
}
|
148
|
-
}
|
149
|
-
return fields;
|
150
|
-
}
|
151
|
-
/**
|
152
|
-
* Server page load call. Optionally with a default object to populate the form with from locals.
|
153
|
-
* @param {ZodType} schema - The schema to parse the form with.
|
154
|
-
* @param {RequestEvent} event - The event to load the (possible) form from.
|
155
|
-
* @param {JSONLike} obj - The default object to populate the form with.
|
156
|
-
* @returns {Promise<Form<Z>>} - The form to use.
|
157
|
-
*/
|
158
|
-
export async function loadForm(schema, event, obj) {
|
159
|
-
// If there is a form in locals, it's been passed in from parseForm. Return it.
|
160
|
-
if (event.locals.form) {
|
161
|
-
return event.locals.form;
|
162
|
-
}
|
163
|
-
// Serialize the schema to send over the wire.
|
164
|
-
const serializedSchema = zerialize(schema);
|
165
|
-
// Get the fields from the schema.
|
166
|
-
const fields = getFieldsFromSchema(schema);
|
167
|
-
// Create the form object.
|
168
|
-
const form = event.locals.form;
|
169
|
-
return {
|
170
|
-
valid: form ? form.valid : (obj ? true : false),
|
171
|
-
tainted: form ? form.tainted : false,
|
172
|
-
schema: serializedSchema,
|
173
|
-
posted: form ? form.posted : false,
|
174
|
-
fields,
|
175
|
-
data: Object.assign(Object.fromEntries(Object.entries(fields).map(([key, value]) => {
|
176
|
-
// If the key is in the passed object, use that value. Otherwise, try to use the default value.
|
177
|
-
return [key, value.defaultValue];
|
178
|
-
})), obj ? obj : {}),
|
179
|
-
};
|
180
|
-
}
|
181
|
-
/**
|
182
|
-
* Parse zod issues into form issues (with a path string).
|
183
|
-
* @param {ZodIssue[]} issues - The issues to parse.
|
184
|
-
* @returns {FormIssue[]} - The parsed issues.
|
185
|
-
*/
|
186
|
-
export function parseFormIssues(issues) {
|
187
|
-
return JSON.parse(JSON.stringify((issues || []).map((issue) => {
|
188
|
-
return {
|
189
|
-
...issue,
|
190
|
-
name: arrayPathToStringPath(issue.path),
|
191
|
-
};
|
192
|
-
})));
|
193
|
-
}
|
194
|
-
/**
|
195
|
-
* Parse a form using a schema.
|
196
|
-
* @param {ZodType} schema - The schema to parse the form with.
|
197
|
-
* @param {Request} request - The request to parse.
|
198
|
-
* @param {BodyguardFormConfig} opts - The options for the form validation.
|
199
|
-
* @returns {Promise<{ valid: false } | { valid: true, data: Infer<Z> }>} - The result of the form validation.
|
200
|
-
*/
|
201
|
-
export async function parseForm(schema, event, opts) {
|
202
|
-
// Use bodyguard to parse the form.
|
203
|
-
const data = await bodyguard.softForm(event.request, schema.parse, opts);
|
204
|
-
// Get the fields from the schema.
|
205
|
-
const fields = getFieldsFromSchema(schema, data);
|
206
|
-
// Serialize the schema to send over the wire.
|
207
|
-
const serializedSchema = zerialize(schema);
|
208
|
-
// Create the form object.
|
209
|
-
const form = {
|
210
|
-
valid: data.success,
|
211
|
-
tainted: !data.success,
|
212
|
-
schema: serializedSchema,
|
213
|
-
posted: true,
|
214
|
-
fields: Object.fromEntries(Object.entries(fields).map(([key, field]) => {
|
215
|
-
// Mark fields as tainted if they were in the request.
|
216
|
-
return [key, {
|
217
|
-
...field,
|
218
|
-
tainted: data.success ? false : data.value.hasOwnProperty(key),
|
219
|
-
}];
|
220
|
-
})),
|
221
|
-
data: data.value ? data.value : {},
|
222
|
-
issues: data.success ? undefined : parseFormIssues(data.error.issues),
|
223
|
-
};
|
224
|
-
// Attach the form to the locals to pass it to the client via loadForm.
|
225
|
-
event.locals.form = form;
|
226
|
-
return form;
|
227
|
-
}
|
228
|
-
/**
|
229
|
-
* Convert an array path from a Zod issue to a string path for a form field.
|
230
|
-
* @param {(string | number)[]} path - The path to convert.
|
231
|
-
* @returns {string} - The string path.
|
232
|
-
*/
|
233
|
-
export function arrayPathToStringPath(path) {
|
234
|
-
// Joins the path with dots. For arrays, it adds brackets.
|
235
|
-
return path.map((p) => {
|
236
|
-
if (p.toString().match(/^\d+$/)) {
|
237
|
-
return `${p}[]`;
|
238
|
-
}
|
239
|
-
return p;
|
240
|
-
}).join('.');
|
241
|
-
}
|
242
|
-
/**
|
243
|
-
* Get a value from an object using a string path.
|
244
|
-
* @param {any} obj - The object to get the value from.
|
245
|
-
* @param {string} path - The path to get the value from.
|
246
|
-
* @returns {string | number | Date | boolean | object | undefined} - The value from the object.
|
247
|
-
*/
|
248
|
-
export function getFromObjWithStringPath(obj, path) {
|
249
|
-
if (!obj)
|
250
|
-
return undefined;
|
251
|
-
const parts = path.split('.');
|
252
|
-
let current = obj;
|
253
|
-
for (let i = 0; i < parts.length; i++) {
|
254
|
-
const part = parts[i];
|
255
|
-
// Support for array access patterns: foo[] or foo[0]
|
256
|
-
const arrayMatch = part.match(/^(.+?)(\[\d*\])?$/);
|
257
|
-
if (arrayMatch) {
|
258
|
-
const [, key, indexPart] = arrayMatch;
|
259
|
-
// Navigate into 'properties' if it exists
|
260
|
-
if (current.properties && current.properties[key]) {
|
261
|
-
current = current.properties[key];
|
262
|
-
}
|
263
|
-
else if (current[key]) {
|
264
|
-
current = current[key];
|
265
|
-
}
|
266
|
-
else {
|
267
|
-
// The path is invalid for the given structure or the index is not a number
|
268
|
-
return undefined;
|
269
|
-
}
|
270
|
-
// If indexPart is defined, it means we're dealing with an array index
|
271
|
-
if (indexPart) {
|
272
|
-
// Dealing with an array index, e.g., [0]
|
273
|
-
const index = parseInt(indexPart.slice(1, -1), 10);
|
274
|
-
if (!Array.isArray(current) || isNaN(index)) {
|
275
|
-
return undefined;
|
276
|
-
}
|
277
|
-
current = current[index];
|
278
|
-
}
|
279
|
-
}
|
280
|
-
else {
|
281
|
-
// Direct property access
|
282
|
-
if (current.properties && current.properties[part]) {
|
283
|
-
current = current.properties[part];
|
284
|
-
}
|
285
|
-
else if (current[part]) {
|
286
|
-
current = current[part];
|
287
|
-
}
|
288
|
-
else {
|
289
|
-
return undefined;
|
290
|
-
}
|
291
|
-
}
|
292
|
-
if (current === undefined) {
|
293
|
-
return undefined;
|
294
|
-
}
|
295
|
-
}
|
296
|
-
// The value must be directly returnable without checking type,
|
297
|
-
// as we might be looking for an object structure.
|
298
|
-
return current;
|
299
|
-
}
|
300
|
-
/**
|
301
|
-
* Get individual validators for each field in a form.
|
302
|
-
* @param {Form} form - The form to get the validators from.
|
303
|
-
* @returns {Record<keyof Infer<T>, (value: any) => boolean>} - The validators for each field.
|
304
|
-
*/
|
305
|
-
export function getIndividualValidators(form) {
|
306
|
-
if (!form)
|
307
|
-
return {};
|
308
|
-
const schema = form.schema;
|
309
|
-
const fields = form.fields;
|
310
|
-
if (!schema || !fields) {
|
311
|
-
console.error('[lutra] getIndividualValidators: Schema or fields not found:', schema, fields);
|
312
|
-
return {};
|
313
|
-
}
|
314
|
-
// Match the dot-notation form fields with the object schema fields.
|
315
|
-
// For each field, create a validator function by dezerilizing the schema for that field from the schema.
|
316
|
-
// Return the validators, not the parsed data.
|
317
|
-
const validators = Object.fromEntries(Object.entries(fields).map(([key, field]) => {
|
318
|
-
const schemaField = getFromObjWithStringPath(schema, key);
|
319
|
-
if (!schemaField) {
|
320
|
-
console.error('[lutra] getIndividualValidators: Schema field not found:', key);
|
321
|
-
return [key, (value) => true];
|
322
|
-
}
|
323
|
-
return [key, dezerialize(schemaField)];
|
324
|
-
}));
|
325
|
-
return validators;
|
326
|
-
}
|
package/dist/form/index.d.ts
DELETED
@@ -1,15 +0,0 @@
|
|
1
|
-
export { default as Button } from './Button.svelte';
|
2
|
-
export { default as FieldContainer } from './FieldContainer.svelte';
|
3
|
-
export { default as FieldSection } from './FieldSection.svelte';
|
4
|
-
export { default as FieldActions } from './FieldActions.svelte';
|
5
|
-
export { default as FieldError } from './FieldError.svelte';
|
6
|
-
export { default as FieldContent } from './FieldContent.svelte';
|
7
|
-
export { default as Fieldset } from './Fieldset.svelte';
|
8
|
-
export { default as Form } from './Form.svelte';
|
9
|
-
export { default as Input } from './Input.svelte';
|
10
|
-
export { default as InputLength } from './InputLength.svelte';
|
11
|
-
export { default as Label } from './Label.svelte';
|
12
|
-
export { default as Select } from './Select.svelte';
|
13
|
-
export * from './types.js';
|
14
|
-
export * from './form.js';
|
15
|
-
export * from './client.svelte.js';
|
package/dist/form/index.js
DELETED
@@ -1,15 +0,0 @@
|
|
1
|
-
export { default as Button } from './Button.svelte';
|
2
|
-
export { default as FieldContainer } from './FieldContainer.svelte';
|
3
|
-
export { default as FieldSection } from './FieldSection.svelte';
|
4
|
-
export { default as FieldActions } from './FieldActions.svelte';
|
5
|
-
export { default as FieldError } from './FieldError.svelte';
|
6
|
-
export { default as FieldContent } from './FieldContent.svelte';
|
7
|
-
export { default as Fieldset } from './Fieldset.svelte';
|
8
|
-
export { default as Form } from './Form.svelte';
|
9
|
-
export { default as Input } from './Input.svelte';
|
10
|
-
export { default as InputLength } from './InputLength.svelte';
|
11
|
-
export { default as Label } from './Label.svelte';
|
12
|
-
export { default as Select } from './Select.svelte';
|
13
|
-
export * from './types.js';
|
14
|
-
export * from './form.js';
|
15
|
-
export * from './client.svelte.js';
|