@texaryn/svelte 0.0.0-stage → 0.3.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/CHANGELOG.md +34 -0
- package/LICENSE +190 -0
- package/README.md +128 -2
- package/dist/components/ArrayControl.svelte +210 -0
- package/dist/components/ArrayControl.svelte.d.ts +8 -0
- package/dist/components/ArrayControl.svelte.d.ts.map +1 -0
- package/dist/components/DocumentList.svelte +22 -0
- package/dist/components/DocumentList.svelte.d.ts +9 -0
- package/dist/components/DocumentList.svelte.d.ts.map +1 -0
- package/dist/components/DocumentNode.svelte +68 -0
- package/dist/components/DocumentNode.svelte.d.ts +14 -0
- package/dist/components/DocumentNode.svelte.d.ts.map +1 -0
- package/dist/components/DocumentRoot.svelte +33 -0
- package/dist/components/DocumentRoot.svelte.d.ts +13 -0
- package/dist/components/DocumentRoot.svelte.d.ts.map +1 -0
- package/dist/components/DocumentTable.svelte +35 -0
- package/dist/components/DocumentTable.svelte.d.ts +9 -0
- package/dist/components/DocumentTable.svelte.d.ts.map +1 -0
- package/dist/components/ErrorSummary.svelte +41 -0
- package/dist/components/ErrorSummary.svelte.d.ts +21 -0
- package/dist/components/ErrorSummary.svelte.d.ts.map +1 -0
- package/dist/components/FieldErrors.svelte +14 -0
- package/dist/components/FieldErrors.svelte.d.ts +23 -0
- package/dist/components/FieldErrors.svelte.d.ts.map +1 -0
- package/dist/components/FieldWidget.svelte +109 -0
- package/dist/components/FieldWidget.svelte.d.ts +22 -0
- package/dist/components/FieldWidget.svelte.d.ts.map +1 -0
- package/dist/components/FormRoot.svelte +96 -0
- package/dist/components/FormRoot.svelte.d.ts +17 -0
- package/dist/components/FormRoot.svelte.d.ts.map +1 -0
- package/dist/components/NodeRenderer.svelte +19 -0
- package/dist/components/NodeRenderer.svelte.d.ts +8 -0
- package/dist/components/NodeRenderer.svelte.d.ts.map +1 -0
- package/dist/components/ObjectLayout.svelte +72 -0
- package/dist/components/ObjectLayout.svelte.d.ts +8 -0
- package/dist/components/ObjectLayout.svelte.d.ts.map +1 -0
- package/dist/context.d.ts +13 -0
- package/dist/context.d.ts.map +1 -0
- package/dist/context.js +12 -0
- package/dist/field-props.d.ts +20 -0
- package/dist/field-props.d.ts.map +1 -0
- package/dist/field-props.js +31 -0
- package/dist/field.d.ts +34 -0
- package/dist/field.d.ts.map +1 -0
- package/dist/field.js +116 -0
- package/dist/form.d.ts +17 -0
- package/dist/form.d.ts.map +1 -0
- package/dist/form.js +20 -0
- package/dist/index.d.ts +21 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +14 -0
- package/dist/registry.d.ts +4 -0
- package/dist/registry.d.ts.map +1 -0
- package/dist/registry.js +24 -0
- package/dist/store.d.ts +4 -0
- package/dist/store.d.ts.map +1 -0
- package/dist/store.js +7 -0
- package/dist/svelte.d.ts +5 -0
- package/dist/widget.d.ts +10 -0
- package/dist/widget.d.ts.map +1 -0
- package/dist/widget.js +1 -0
- package/package.json +68 -3
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { UINode } from '@texaryn/core';
|
|
2
|
+
interface Props {
|
|
3
|
+
node: UINode;
|
|
4
|
+
}
|
|
5
|
+
declare const ObjectLayout: import("svelte").Component<Props, {}, "">;
|
|
6
|
+
type ObjectLayout = ReturnType<typeof ObjectLayout>;
|
|
7
|
+
export default ObjectLayout;
|
|
8
|
+
//# sourceMappingURL=ObjectLayout.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ObjectLayout.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ObjectLayout.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,MAAM,EAAE,MAAM,eAAe,CAAA;AAMxD,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAyEH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { FormMessages, RendererRegistry } from '@texaryn/core';
|
|
2
|
+
import type { Readable } from 'svelte/store';
|
|
3
|
+
import type { SvelteFormBinding } from './form.js';
|
|
4
|
+
import type { WidgetComponent } from './widget.js';
|
|
5
|
+
export interface SvelteFormContext {
|
|
6
|
+
form: SvelteFormBinding;
|
|
7
|
+
registry: Readable<RendererRegistry<WidgetComponent>>;
|
|
8
|
+
messages: Readable<FormMessages>;
|
|
9
|
+
idPrefix: string;
|
|
10
|
+
}
|
|
11
|
+
export declare function provideFormContext(context: SvelteFormContext): void;
|
|
12
|
+
export declare function useFormContext(): SvelteFormContext;
|
|
13
|
+
//# sourceMappingURL=context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/lib/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAIlD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,iBAAiB,CAAA;IACvB,QAAQ,EAAE,QAAQ,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAA;IACrD,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAA;IAChC,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAEnE;AAED,wBAAgB,cAAc,IAAI,iBAAiB,CAMlD"}
|
package/dist/context.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { getContext, setContext } from 'svelte';
|
|
2
|
+
const FORM_CONTEXT = Symbol('texaryn.svelte.form');
|
|
3
|
+
export function provideFormContext(context) {
|
|
4
|
+
setContext(FORM_CONTEXT, context);
|
|
5
|
+
}
|
|
6
|
+
export function useFormContext() {
|
|
7
|
+
const context = getContext(FORM_CONTEXT);
|
|
8
|
+
if (!context) {
|
|
9
|
+
throw new Error('Svelte form widgets must be rendered below FormRoot');
|
|
10
|
+
}
|
|
11
|
+
return context;
|
|
12
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { FieldNode, FormMessages, ValidationError } from '@texaryn/core';
|
|
2
|
+
export interface FieldAria {
|
|
3
|
+
id: string;
|
|
4
|
+
name: string;
|
|
5
|
+
disabled: boolean;
|
|
6
|
+
readonly?: boolean;
|
|
7
|
+
'aria-readonly'?: true;
|
|
8
|
+
'aria-required': boolean;
|
|
9
|
+
'aria-invalid'?: boolean;
|
|
10
|
+
'aria-describedby'?: string;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare function makeId(idPrefix: string, nodeId: string, suffix: string): string;
|
|
14
|
+
export declare function fieldAria(node: FieldNode, state: {
|
|
15
|
+
disabled: boolean;
|
|
16
|
+
showErrors: boolean;
|
|
17
|
+
errors: readonly ValidationError[];
|
|
18
|
+
}, idPrefix: string, nativeReadOnly?: boolean): FieldAria;
|
|
19
|
+
export declare function fieldLabel(node: FieldNode, messages?: FormMessages): string;
|
|
20
|
+
//# sourceMappingURL=field-props.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field-props.d.ts","sourceRoot":"","sources":["../src/lib/field-props.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE7E,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,IAAI,CAAA;IACtB,eAAe,EAAE,OAAO,CAAA;IACxB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAE/E;AAED,wBAAgB,SAAS,CACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,EACrF,QAAQ,EAAE,MAAM,EAChB,cAAc,UAAO,GACpB,SAAS,CAyBX;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,GAAE,YAA8B,GAAG,MAAM,CAE5F"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { englishMessages, visibleFieldLabel } from '@texaryn/core';
|
|
2
|
+
export function makeId(idPrefix, nodeId, suffix) {
|
|
3
|
+
return `${idPrefix}-${nodeId}-${suffix}`;
|
|
4
|
+
}
|
|
5
|
+
export function fieldAria(node, state, idPrefix, nativeReadOnly = true) {
|
|
6
|
+
const describedBy = [];
|
|
7
|
+
if (node.helpText ?? node.annotations?.description) {
|
|
8
|
+
describedBy.push(makeId(idPrefix, node.id, 'description'));
|
|
9
|
+
}
|
|
10
|
+
const invalid = state.showErrors && state.errors.length > 0;
|
|
11
|
+
if (invalid)
|
|
12
|
+
describedBy.push(makeId(idPrefix, node.id, 'error'));
|
|
13
|
+
const readOnly = node.readOnly
|
|
14
|
+
? nativeReadOnly
|
|
15
|
+
? { readonly: true }
|
|
16
|
+
: { 'aria-readonly': true }
|
|
17
|
+
: {};
|
|
18
|
+
return {
|
|
19
|
+
id: makeId(idPrefix, node.id, 'input'),
|
|
20
|
+
name: node.dataPointer || node.id,
|
|
21
|
+
disabled: state.disabled,
|
|
22
|
+
...readOnly,
|
|
23
|
+
'aria-required': Boolean(node.constraints?.required),
|
|
24
|
+
'aria-invalid': invalid ? true : undefined,
|
|
25
|
+
'aria-describedby': describedBy.length > 0 ? describedBy.join(' ') : undefined,
|
|
26
|
+
placeholder: node.placeholder ?? undefined,
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
export function fieldLabel(node, messages = englishMessages) {
|
|
30
|
+
return visibleFieldLabel(node.annotations.title, node.dataPointer, messages);
|
|
31
|
+
}
|
package/dist/field.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { Readable } from 'svelte/store';
|
|
2
|
+
import type { FieldNode, NodeId, ValidationError } from '@texaryn/core';
|
|
3
|
+
import type { FormMessages } from '@texaryn/core';
|
|
4
|
+
import type { SvelteFormBinding } from './form.js';
|
|
5
|
+
import type { FieldAria } from './field-props.js';
|
|
6
|
+
export type FieldKind = 'enum' | 'boolean' | 'number' | 'string';
|
|
7
|
+
export interface SvelteFieldBinding {
|
|
8
|
+
node: Readable<FieldNode | undefined>;
|
|
9
|
+
value: Readable<unknown>;
|
|
10
|
+
errors: Readable<ValidationError[]>;
|
|
11
|
+
visibleErrors: Readable<readonly ValidationError[]>;
|
|
12
|
+
dirty: Readable<boolean>;
|
|
13
|
+
touched: Readable<boolean>;
|
|
14
|
+
visible: Readable<boolean>;
|
|
15
|
+
disabled: Readable<boolean>;
|
|
16
|
+
showErrors: Readable<boolean>;
|
|
17
|
+
kind: Readable<FieldKind>;
|
|
18
|
+
display: Readable<string | number>;
|
|
19
|
+
label: Readable<string>;
|
|
20
|
+
description: Readable<string | undefined>;
|
|
21
|
+
labelFor: Readable<string>;
|
|
22
|
+
descriptionId: Readable<string>;
|
|
23
|
+
errorId: Readable<string>;
|
|
24
|
+
aria: Readable<FieldAria | undefined>;
|
|
25
|
+
messages: Readable<FormMessages>;
|
|
26
|
+
setRaw(raw: string, enumToken?: string): void;
|
|
27
|
+
setValue(value: unknown): void;
|
|
28
|
+
onBlur(): void;
|
|
29
|
+
}
|
|
30
|
+
export declare function createFieldBinding(form: SvelteFormBinding, nodeId: Readable<NodeId>, idPrefix: string, messages: Readable<FormMessages>): SvelteFieldBinding;
|
|
31
|
+
export declare function fieldKind(node: FieldNode | undefined): FieldKind;
|
|
32
|
+
export declare function displayValue(kind: FieldKind, value: unknown): string | number;
|
|
33
|
+
export declare function sameEnumValue(left: unknown, right: unknown): boolean;
|
|
34
|
+
//# sourceMappingURL=field.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/lib/field.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAS,eAAe,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAGjD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAEhE,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,QAAQ,CAAC,SAAS,GAAG,SAAS,CAAC,CAAA;IACrC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IACxB,MAAM,EAAE,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAA;IACnC,aAAa,EAAE,QAAQ,CAAC,SAAS,eAAe,EAAE,CAAC,CAAA;IACnD,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IACxB,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC1B,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC1B,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC3B,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC7B,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IACzB,OAAO,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IAClC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACvB,WAAW,EAAE,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACzC,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IAC1B,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACzB,IAAI,EAAE,QAAQ,CAAC,SAAS,GAAG,SAAS,CAAC,CAAA;IACrC,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAA;IAChC,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7C,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;IAC9B,MAAM,IAAI,IAAI,CAAA;CACf;AAID,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,iBAAiB,EACvB,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,EACxB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,GAC/B,kBAAkB,CA6FpB;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAMhE;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAI7E;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,CAcpE"}
|
package/dist/field.js
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { derived, get } from 'svelte/store';
|
|
2
|
+
import { fieldAria, fieldLabel, makeId } from './field-props.js';
|
|
3
|
+
const NO_ERRORS = [];
|
|
4
|
+
export function createFieldBinding(form, nodeId, idPrefix, messages) {
|
|
5
|
+
const node = derived([form.document, nodeId], ([$document, id]) => {
|
|
6
|
+
const current = $document.nodes[id];
|
|
7
|
+
return current?.type === 'field' ? current : undefined;
|
|
8
|
+
});
|
|
9
|
+
const fromNodeState = (select, fallback) => derived([form.document, nodeId], ([_document, id], set) => {
|
|
10
|
+
const store = select(id);
|
|
11
|
+
if (!store) {
|
|
12
|
+
set(fallback);
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
set(store.getSnapshot());
|
|
16
|
+
return store.subscribe(() => set(store.getSnapshot()));
|
|
17
|
+
}, fallback);
|
|
18
|
+
const value = fromNodeState((id) => form.getNodeState(id)?.value, undefined);
|
|
19
|
+
const errors = fromNodeState((id) => form.getNodeState(id)?.errors, NO_ERRORS);
|
|
20
|
+
const dirty = fromNodeState((id) => form.getNodeState(id)?.dirty, false);
|
|
21
|
+
const touched = fromNodeState((id) => form.getNodeState(id)?.touched, false);
|
|
22
|
+
const visible = fromNodeState((id) => form.getNodeState(id)?.visible, true);
|
|
23
|
+
const disabled = fromNodeState((id) => form.getNodeState(id)?.disabled, false);
|
|
24
|
+
const showErrors = fromNodeState((id) => form.getNodeState(id)?.showErrors, false);
|
|
25
|
+
const kind = derived(node, ($node) => fieldKind($node));
|
|
26
|
+
const visibleErrors = derived([showErrors, errors], ([$showErrors, $errors]) => $showErrors ? $errors : NO_ERRORS);
|
|
27
|
+
const display = derived([kind, value], ([$kind, $value]) => displayValue($kind, $value));
|
|
28
|
+
const label = derived([node, messages], ([$node, $messages]) => $node ? fieldLabel($node, $messages) : '');
|
|
29
|
+
const description = derived(node, ($node) => $node?.helpText ?? $node?.annotations.description);
|
|
30
|
+
const labelFor = derived(node, ($node) => makeId(idPrefix, $node?.id ?? get(nodeId), 'input'));
|
|
31
|
+
const descriptionId = derived(node, ($node) => makeId(idPrefix, $node?.id ?? get(nodeId), 'description'));
|
|
32
|
+
const errorId = derived(node, ($node) => makeId(idPrefix, $node?.id ?? get(nodeId), 'error'));
|
|
33
|
+
const aria = derived([node, disabled, showErrors, errors], ([$node, $disabled, $showErrors, $errors]) => $node ? fieldAria($node, { disabled: $disabled, showErrors: $showErrors, errors: $errors }, idPrefix, $node.enumValues == null && $node.fieldType !== 'boolean') : undefined);
|
|
34
|
+
function setRaw(raw, enumToken) {
|
|
35
|
+
const current = get(node);
|
|
36
|
+
if (!current || current.readOnly)
|
|
37
|
+
return;
|
|
38
|
+
const fieldKindValue = fieldKind(current);
|
|
39
|
+
if (fieldKindValue === 'enum') {
|
|
40
|
+
const index = Number(enumToken);
|
|
41
|
+
if (!Number.isInteger(index) || index < 0)
|
|
42
|
+
return;
|
|
43
|
+
const option = current.enumValues?.[index];
|
|
44
|
+
if (option)
|
|
45
|
+
setValue(option.value);
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
if (fieldKindValue === 'number') {
|
|
49
|
+
setValue(raw === '' ? undefined : Number(raw));
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
setValue(raw);
|
|
53
|
+
}
|
|
54
|
+
function setValue(next) {
|
|
55
|
+
const current = get(node);
|
|
56
|
+
if (!current || current.readOnly)
|
|
57
|
+
return;
|
|
58
|
+
form.dispatch({ type: 'SetValue', nodeId: get(nodeId), value: next });
|
|
59
|
+
}
|
|
60
|
+
function onBlur() {
|
|
61
|
+
form.dispatch({ type: 'SetTouched', nodeId: get(nodeId) });
|
|
62
|
+
}
|
|
63
|
+
return {
|
|
64
|
+
node,
|
|
65
|
+
value,
|
|
66
|
+
errors,
|
|
67
|
+
visibleErrors,
|
|
68
|
+
dirty,
|
|
69
|
+
touched,
|
|
70
|
+
visible,
|
|
71
|
+
disabled,
|
|
72
|
+
showErrors,
|
|
73
|
+
kind,
|
|
74
|
+
display,
|
|
75
|
+
label,
|
|
76
|
+
description,
|
|
77
|
+
labelFor,
|
|
78
|
+
descriptionId,
|
|
79
|
+
errorId,
|
|
80
|
+
aria,
|
|
81
|
+
messages,
|
|
82
|
+
setRaw,
|
|
83
|
+
setValue,
|
|
84
|
+
onBlur,
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
export function fieldKind(node) {
|
|
88
|
+
if (!node)
|
|
89
|
+
return 'string';
|
|
90
|
+
if (node.enumValues != null && node.enumValues.length > 0)
|
|
91
|
+
return 'enum';
|
|
92
|
+
if (node.fieldType === 'boolean')
|
|
93
|
+
return 'boolean';
|
|
94
|
+
if (node.fieldType === 'number' || node.fieldType === 'integer')
|
|
95
|
+
return 'number';
|
|
96
|
+
return 'string';
|
|
97
|
+
}
|
|
98
|
+
export function displayValue(kind, value) {
|
|
99
|
+
if (kind === 'number' && typeof value === 'number')
|
|
100
|
+
return value;
|
|
101
|
+
if (kind === 'string' && typeof value === 'string')
|
|
102
|
+
return value;
|
|
103
|
+
return value == null ? '' : String(value);
|
|
104
|
+
}
|
|
105
|
+
export function sameEnumValue(left, right) {
|
|
106
|
+
if (left === right)
|
|
107
|
+
return true;
|
|
108
|
+
if (Array.isArray(left) && Array.isArray(right)) {
|
|
109
|
+
return left.length === right.length && left.every((entry, index) => sameEnumValue(entry, right[index]));
|
|
110
|
+
}
|
|
111
|
+
if (left === null || right === null || typeof left !== 'object' || typeof right !== 'object')
|
|
112
|
+
return false;
|
|
113
|
+
const leftKeys = Object.keys(left).sort();
|
|
114
|
+
const rightKeys = Object.keys(right).sort();
|
|
115
|
+
return leftKeys.length === rightKeys.length && leftKeys.every((key, index) => key === rightKeys[index] && sameEnumValue(left[key], right[key]));
|
|
116
|
+
}
|
package/dist/form.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { Command, FormRuntime, FormRuntimeOptions, NodeId, NodeState, SchemaEvaluationPort, SubmissionState, UIDocument, VisibleError } from '@texaryn/core';
|
|
2
|
+
import type { Readable } from 'svelte/store';
|
|
3
|
+
export interface SvelteFormBinding {
|
|
4
|
+
runtime: FormRuntime;
|
|
5
|
+
document: Readable<UIDocument>;
|
|
6
|
+
data: Readable<unknown>;
|
|
7
|
+
submission: Readable<SubmissionState>;
|
|
8
|
+
visibleErrors: Readable<VisibleError[]>;
|
|
9
|
+
dispatch(command: Command): void;
|
|
10
|
+
getNodeState(nodeId: NodeId): NodeState | undefined;
|
|
11
|
+
}
|
|
12
|
+
export interface SvelteForm extends SvelteFormBinding {
|
|
13
|
+
destroy(): void;
|
|
14
|
+
}
|
|
15
|
+
export declare function bindFormRuntime(runtime: FormRuntime): SvelteFormBinding;
|
|
16
|
+
export declare function createForm(port: SchemaEvaluationPort, options?: FormRuntimeOptions): SvelteForm;
|
|
17
|
+
//# sourceMappingURL=form.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/lib/form.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,YAAY,EACb,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAG5C,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,WAAW,CAAA;IACpB,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAA;IAC9B,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IACvB,UAAU,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAA;IACrC,aAAa,EAAE,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAA;IACvC,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;IAChC,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;CACpD;AAED,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACnD,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,iBAAiB,CAUvE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,oBAAoB,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAAG,UAAU,CAM/F"}
|
package/dist/form.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { createFormRuntime } from '@texaryn/core';
|
|
2
|
+
import { fromStore } from './store.js';
|
|
3
|
+
export function bindFormRuntime(runtime) {
|
|
4
|
+
return {
|
|
5
|
+
runtime,
|
|
6
|
+
document: fromStore(runtime.document),
|
|
7
|
+
data: fromStore(runtime.data),
|
|
8
|
+
submission: fromStore(runtime.submission),
|
|
9
|
+
visibleErrors: fromStore(runtime.visibleErrors),
|
|
10
|
+
dispatch: (command) => runtime.dispatch(command),
|
|
11
|
+
getNodeState: (nodeId) => runtime.getNodeState(nodeId),
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
export function createForm(port, options) {
|
|
15
|
+
const runtime = createFormRuntime(port, options);
|
|
16
|
+
return {
|
|
17
|
+
...bindFormRuntime(runtime),
|
|
18
|
+
destroy: () => runtime.destroy(),
|
|
19
|
+
};
|
|
20
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export { bindFormRuntime, createForm } from './form.js';
|
|
2
|
+
export type { SvelteForm, SvelteFormBinding } from './form.js';
|
|
3
|
+
export { createDefaultRegistry } from './registry.js';
|
|
4
|
+
export type { WidgetComponent } from './widget.js';
|
|
5
|
+
export type { DocumentWidgetComponent } from './widget.js';
|
|
6
|
+
export { useFormContext } from './context.js';
|
|
7
|
+
export type { SvelteFormContext } from './context.js';
|
|
8
|
+
export { createFieldBinding, displayValue, fieldKind, sameEnumValue } from './field.js';
|
|
9
|
+
export type { FieldKind, SvelteFieldBinding } from './field.js';
|
|
10
|
+
export { fieldAria, fieldLabel, makeId } from './field-props.js';
|
|
11
|
+
export type { FieldAria } from './field-props.js';
|
|
12
|
+
export { default as FormRoot } from './components/FormRoot.svelte';
|
|
13
|
+
export { default as DocumentRoot } from './components/DocumentRoot.svelte';
|
|
14
|
+
export { default as DocumentNodeView } from './components/DocumentNode.svelte';
|
|
15
|
+
export { default as NodeRenderer } from './components/NodeRenderer.svelte';
|
|
16
|
+
export { default as FieldWidget } from './components/FieldWidget.svelte';
|
|
17
|
+
export { default as FieldErrors } from './components/FieldErrors.svelte';
|
|
18
|
+
export { default as ErrorSummary } from './components/ErrorSummary.svelte';
|
|
19
|
+
export { default as ObjectLayout } from './components/ObjectLayout.svelte';
|
|
20
|
+
export { default as ArrayControl } from './components/ArrayControl.svelte';
|
|
21
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACvD,YAAY,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAClD,YAAY,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7C,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AACvF,YAAY,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAC/D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAChE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAC9E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kCAAkC,CAAA"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export { bindFormRuntime, createForm } from './form.js';
|
|
2
|
+
export { createDefaultRegistry } from './registry.js';
|
|
3
|
+
export { useFormContext } from './context.js';
|
|
4
|
+
export { createFieldBinding, displayValue, fieldKind, sameEnumValue } from './field.js';
|
|
5
|
+
export { fieldAria, fieldLabel, makeId } from './field-props.js';
|
|
6
|
+
export { default as FormRoot } from './components/FormRoot.svelte';
|
|
7
|
+
export { default as DocumentRoot } from './components/DocumentRoot.svelte';
|
|
8
|
+
export { default as DocumentNodeView } from './components/DocumentNode.svelte';
|
|
9
|
+
export { default as NodeRenderer } from './components/NodeRenderer.svelte';
|
|
10
|
+
export { default as FieldWidget } from './components/FieldWidget.svelte';
|
|
11
|
+
export { default as FieldErrors } from './components/FieldErrors.svelte';
|
|
12
|
+
export { default as ErrorSummary } from './components/ErrorSummary.svelte';
|
|
13
|
+
export { default as ObjectLayout } from './components/ObjectLayout.svelte';
|
|
14
|
+
export { default as ArrayControl } from './components/ArrayControl.svelte';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/lib/registry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAKlD,wBAAgB,qBAAqB,IAAI,gBAAgB,CAAC,eAAe,CAAC,CAiCzE"}
|
package/dist/registry.js
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { createRendererRegistry } from '@texaryn/core';
|
|
2
|
+
import ArrayControl from './components/ArrayControl.svelte';
|
|
3
|
+
import FieldWidget from './components/FieldWidget.svelte';
|
|
4
|
+
import ObjectLayout from './components/ObjectLayout.svelte';
|
|
5
|
+
export function createDefaultRegistry() {
|
|
6
|
+
const registry = createRendererRegistry();
|
|
7
|
+
registry.register({
|
|
8
|
+
test: (node) => node.type === 'field' && node.enumValues != null && node.enumValues.length > 0,
|
|
9
|
+
rank: 2,
|
|
10
|
+
}, FieldWidget);
|
|
11
|
+
registry.register({
|
|
12
|
+
test: (node) => node.type === 'field',
|
|
13
|
+
rank: 1,
|
|
14
|
+
}, FieldWidget);
|
|
15
|
+
registry.register({
|
|
16
|
+
test: (node) => node.type === 'container' && node.containerType === 'object',
|
|
17
|
+
rank: 1,
|
|
18
|
+
}, ObjectLayout);
|
|
19
|
+
registry.register({
|
|
20
|
+
test: (node) => node.type === 'container' && node.containerType === 'array',
|
|
21
|
+
rank: 1,
|
|
22
|
+
}, ArrayControl);
|
|
23
|
+
return registry;
|
|
24
|
+
}
|
package/dist/store.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../src/lib/store.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAE1C,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAKzD"}
|
package/dist/store.js
ADDED
package/dist/svelte.d.ts
ADDED
package/dist/widget.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Component } from 'svelte';
|
|
2
|
+
import type { DocumentNode, DocumentRuntime, UINode } from '@texaryn/core';
|
|
3
|
+
export type WidgetComponent = Component<{
|
|
4
|
+
node: UINode;
|
|
5
|
+
}>;
|
|
6
|
+
export type DocumentWidgetComponent = Component<{
|
|
7
|
+
node: DocumentNode;
|
|
8
|
+
runtime: DocumentRuntime;
|
|
9
|
+
}>;
|
|
10
|
+
//# sourceMappingURL=widget.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../src/lib/widget.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE1E,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AACzD,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,eAAe,CAAA;CAAE,CAAC,CAAA"}
|
package/dist/widget.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,71 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@texaryn/svelte",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.3.0",
|
|
4
|
+
"description": "Svelte 5 bindings, renderer, and default widgets for Texaryn",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"svelte",
|
|
7
|
+
"json-schema",
|
|
8
|
+
"forms",
|
|
9
|
+
"form-builder",
|
|
10
|
+
"schema-driven",
|
|
11
|
+
"svelte-forms",
|
|
12
|
+
"dynamic-forms",
|
|
13
|
+
"typescript"
|
|
14
|
+
],
|
|
15
|
+
"type": "module",
|
|
16
|
+
"license": "Apache-2.0",
|
|
17
|
+
"funding": {
|
|
18
|
+
"type": "github",
|
|
19
|
+
"url": "https://github.com/sponsors/hamzahamidi"
|
|
20
|
+
},
|
|
21
|
+
"repository": {
|
|
22
|
+
"type": "git",
|
|
23
|
+
"url": "git+https://github.com/texaryn/texaryn.git",
|
|
24
|
+
"directory": "packages/svelte"
|
|
25
|
+
},
|
|
26
|
+
"homepage": "https://texaryn.github.io/texaryn/",
|
|
27
|
+
"bugs": {
|
|
28
|
+
"url": "https://github.com/texaryn/texaryn/issues"
|
|
29
|
+
},
|
|
30
|
+
"svelte": "./dist/index.js",
|
|
31
|
+
"types": "./dist/index.d.ts",
|
|
32
|
+
"exports": {
|
|
33
|
+
".": {
|
|
34
|
+
"types": "./dist/index.d.ts",
|
|
35
|
+
"svelte": "./dist/index.js"
|
|
36
|
+
},
|
|
37
|
+
"./components/*.svelte": {
|
|
38
|
+
"types": "./dist/components/*.svelte.d.ts",
|
|
39
|
+
"svelte": "./dist/components/*.svelte"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
"files": [
|
|
43
|
+
"dist",
|
|
44
|
+
"README.md",
|
|
45
|
+
"CHANGELOG.md",
|
|
46
|
+
"LICENSE"
|
|
47
|
+
],
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"@texaryn/core": "^0.16.0"
|
|
50
|
+
},
|
|
51
|
+
"peerDependencies": {
|
|
52
|
+
"svelte": ">=5.20.0"
|
|
53
|
+
},
|
|
54
|
+
"publishConfig": {
|
|
55
|
+
"access": "public"
|
|
56
|
+
},
|
|
57
|
+
"devDependencies": {
|
|
58
|
+
"@sveltejs/package": "^2.5.4",
|
|
59
|
+
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
|
60
|
+
"@testing-library/svelte": "^5.4.2",
|
|
61
|
+
"jsdom": "^25.0.0",
|
|
62
|
+
"svelte": "^5.57.2",
|
|
63
|
+
"svelte-check": "^4.7.6",
|
|
64
|
+
"typescript": "~5.8.0",
|
|
65
|
+
"vite": "^7.3.6"
|
|
66
|
+
},
|
|
67
|
+
"scripts": {
|
|
68
|
+
"build": "pnpm --filter @texaryn/core build && svelte-package --input src/lib --output dist",
|
|
69
|
+
"typecheck": "pnpm --filter @texaryn/core build && svelte-check --tsconfig ./tsconfig.svelte-check.json"
|
|
70
|
+
}
|
|
6
71
|
}
|