@webstudio-is/sdk-components-react-remix 0.82.0 → 0.84.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/LICENSE +661 -21
- package/lib/__generated__/form.props.js +30 -5
- package/lib/__generated__/link.props.js +32 -7
- package/lib/__generated__/rich-text-link.props.js +32 -7
- package/lib/cjs/__generated__/form.props.js +30 -5
- package/lib/cjs/__generated__/link.props.js +32 -7
- package/lib/cjs/__generated__/rich-text-link.props.js +32 -7
- package/lib/cjs/form.ws.js +30 -28
- package/lib/cjs/shared/remix-link.js +2 -1
- package/lib/form.ws.js +30 -28
- package/lib/shared/remix-link.js +2 -1
- package/lib/types/link.d.ts +1 -1
- package/lib/types/rich-text-link.d.ts +1 -1
- package/lib/types/shared/remix-link.d.ts +1 -1
- package/package.json +14 -14
- package/src/__generated__/form.props.ts +34 -5
- package/src/__generated__/link.props.ts +36 -7
- package/src/__generated__/rich-text-link.props.ts +36 -7
- package/src/form.ws.tsx +30 -28
- package/src/shared/remix-link.tsx +5 -2
package/lib/form.ws.js
CHANGED
|
@@ -26,15 +26,14 @@ const meta = {
|
|
|
26
26
|
{
|
|
27
27
|
type: "instance",
|
|
28
28
|
component: "Form",
|
|
29
|
+
dataSources: {
|
|
30
|
+
formState: { type: "variable", initialValue: "initial" }
|
|
31
|
+
},
|
|
29
32
|
props: [
|
|
30
33
|
{
|
|
34
|
+
type: "dataSource",
|
|
31
35
|
name: "state",
|
|
32
|
-
|
|
33
|
-
value: "initial",
|
|
34
|
-
dataSourceRef: {
|
|
35
|
-
type: "variable",
|
|
36
|
-
name: "formState"
|
|
37
|
-
}
|
|
36
|
+
dataSourceName: "formState"
|
|
38
37
|
}
|
|
39
38
|
],
|
|
40
39
|
children: [
|
|
@@ -42,16 +41,17 @@ const meta = {
|
|
|
42
41
|
type: "instance",
|
|
43
42
|
label: "Form Content",
|
|
44
43
|
component: "Box",
|
|
44
|
+
dataSources: {
|
|
45
|
+
formInitial: {
|
|
46
|
+
type: "expression",
|
|
47
|
+
code: `formState === 'initial' || formState === 'error'`
|
|
48
|
+
}
|
|
49
|
+
},
|
|
45
50
|
props: [
|
|
46
51
|
{
|
|
52
|
+
type: "dataSource",
|
|
47
53
|
name: showAttribute,
|
|
48
|
-
|
|
49
|
-
value: false,
|
|
50
|
-
dataSourceRef: {
|
|
51
|
-
type: "expression",
|
|
52
|
-
name: "formInitial",
|
|
53
|
-
code: `formState === 'initial' || formState === 'error'`
|
|
54
|
-
}
|
|
54
|
+
dataSourceName: "formInitial"
|
|
55
55
|
}
|
|
56
56
|
],
|
|
57
57
|
children: [
|
|
@@ -88,16 +88,17 @@ const meta = {
|
|
|
88
88
|
type: "instance",
|
|
89
89
|
label: "Success Message",
|
|
90
90
|
component: "Box",
|
|
91
|
+
dataSources: {
|
|
92
|
+
formSuccess: {
|
|
93
|
+
type: "expression",
|
|
94
|
+
code: `formState === 'success'`
|
|
95
|
+
}
|
|
96
|
+
},
|
|
91
97
|
props: [
|
|
92
98
|
{
|
|
99
|
+
type: "dataSource",
|
|
93
100
|
name: showAttribute,
|
|
94
|
-
|
|
95
|
-
value: false,
|
|
96
|
-
dataSourceRef: {
|
|
97
|
-
type: "expression",
|
|
98
|
-
name: "formSuccess",
|
|
99
|
-
code: `formState === 'success'`
|
|
100
|
-
}
|
|
101
|
+
dataSourceName: "formSuccess"
|
|
101
102
|
}
|
|
102
103
|
],
|
|
103
104
|
children: [
|
|
@@ -108,16 +109,17 @@ const meta = {
|
|
|
108
109
|
type: "instance",
|
|
109
110
|
label: "Error Message",
|
|
110
111
|
component: "Box",
|
|
112
|
+
dataSources: {
|
|
113
|
+
formError: {
|
|
114
|
+
type: "expression",
|
|
115
|
+
code: `formState === 'error'`
|
|
116
|
+
}
|
|
117
|
+
},
|
|
111
118
|
props: [
|
|
112
119
|
{
|
|
120
|
+
type: "dataSource",
|
|
113
121
|
name: showAttribute,
|
|
114
|
-
|
|
115
|
-
value: false,
|
|
116
|
-
dataSourceRef: {
|
|
117
|
-
type: "expression",
|
|
118
|
-
name: "formError",
|
|
119
|
-
code: `formState === 'error'`
|
|
120
|
-
}
|
|
122
|
+
dataSourceName: "formError"
|
|
121
123
|
}
|
|
122
124
|
],
|
|
123
125
|
children: [{ type: "text", value: "Sorry, something went wrong." }]
|
|
@@ -128,7 +130,7 @@ const meta = {
|
|
|
128
130
|
};
|
|
129
131
|
const propsMeta = {
|
|
130
132
|
props,
|
|
131
|
-
initialProps: ["id", "state"]
|
|
133
|
+
initialProps: ["id", "state", "action"]
|
|
132
134
|
};
|
|
133
135
|
export {
|
|
134
136
|
meta,
|
package/lib/shared/remix-link.js
CHANGED
|
@@ -18,7 +18,8 @@ const wrapLinkComponent = (BaseLink) => {
|
|
|
18
18
|
}
|
|
19
19
|
return /* @__PURE__ */ jsx(RemixLink, { ...props, to, ref });
|
|
20
20
|
}
|
|
21
|
-
|
|
21
|
+
const { prefetch, reloadDocument, replace, preventScrollReset, ...rest } = props;
|
|
22
|
+
return /* @__PURE__ */ jsx(BaseLink, { ...rest, ref });
|
|
22
23
|
});
|
|
23
24
|
Component.displayName = BaseLink.displayName;
|
|
24
25
|
return Component;
|
package/lib/types/link.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export declare const Link: import("react").ForwardRefExoticComponent<Omit<Omit<O
|
|
|
3
3
|
target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
|
|
4
4
|
}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>, "ref">, "target"> & {
|
|
5
5
|
target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
|
|
6
|
-
prefetch?: "none" | "intent" | "render" | undefined;
|
|
6
|
+
prefetch?: "none" | "viewport" | "intent" | "render" | undefined;
|
|
7
7
|
reloadDocument?: boolean | undefined;
|
|
8
8
|
replace?: boolean | undefined;
|
|
9
9
|
preventScrollReset?: boolean | undefined;
|
|
@@ -3,7 +3,7 @@ export declare const RichTextLink: import("react").ForwardRefExoticComponent<Omi
|
|
|
3
3
|
target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
|
|
4
4
|
}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>, "ref">, "target"> & {
|
|
5
5
|
target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
|
|
6
|
-
prefetch?: "none" | "intent" | "render" | undefined;
|
|
6
|
+
prefetch?: "none" | "viewport" | "intent" | "render" | undefined;
|
|
7
7
|
reloadDocument?: boolean | undefined;
|
|
8
8
|
replace?: boolean | undefined;
|
|
9
9
|
preventScrollReset?: boolean | undefined;
|
|
@@ -4,7 +4,7 @@ export declare const wrapLinkComponent: (BaseLink: typeof Link) => import("react
|
|
|
4
4
|
target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
|
|
5
5
|
}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>, "ref">, "target"> & {
|
|
6
6
|
target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
|
|
7
|
-
prefetch?: "none" | "intent" | "render" | undefined;
|
|
7
|
+
prefetch?: "none" | "viewport" | "intent" | "render" | undefined;
|
|
8
8
|
reloadDocument?: boolean | undefined;
|
|
9
9
|
replace?: boolean | undefined;
|
|
10
10
|
preventScrollReset?: boolean | undefined;
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/sdk-components-react-remix",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.84.0",
|
|
4
4
|
"description": "Webstudio components for Remix",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
7
|
-
"license": "
|
|
7
|
+
"license": "AGPL-3.0-or-later",
|
|
8
8
|
"private": false,
|
|
9
9
|
"type": "module",
|
|
10
10
|
"files": [
|
|
@@ -33,33 +33,33 @@
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"@remix-run/react": "^1.
|
|
36
|
+
"@remix-run/react": "^1.19.1",
|
|
37
37
|
"react": "^18.2.0",
|
|
38
38
|
"react-dom": "^18.2.0"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@webstudio-is/form-handlers": "^0.
|
|
42
|
-
"@webstudio-is/generate-arg-types": "^0.
|
|
43
|
-
"@webstudio-is/icons": "^0.
|
|
44
|
-
"@webstudio-is/react-sdk": "^0.
|
|
45
|
-
"@webstudio-is/sdk-components-react": "^0.
|
|
41
|
+
"@webstudio-is/form-handlers": "^0.84.0",
|
|
42
|
+
"@webstudio-is/generate-arg-types": "^0.84.0",
|
|
43
|
+
"@webstudio-is/icons": "^0.84.0",
|
|
44
|
+
"@webstudio-is/react-sdk": "^0.84.0",
|
|
45
|
+
"@webstudio-is/sdk-components-react": "^0.84.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@remix-run/react": "^1.
|
|
49
|
-
"@types/react": "^18.
|
|
50
|
-
"@types/react-dom": "^18.
|
|
48
|
+
"@remix-run/react": "^1.19.2",
|
|
49
|
+
"@types/react": "^18.2.16",
|
|
50
|
+
"@types/react-dom": "^18.2.7",
|
|
51
51
|
"react": "^18.2.0",
|
|
52
52
|
"react-dom": "^18.2.0",
|
|
53
|
-
"typescript": "5.1.
|
|
53
|
+
"typescript": "5.1.6",
|
|
54
54
|
"@webstudio-is/scripts": "^0.0.0",
|
|
55
|
-
"@webstudio-is/tsconfig": "^1.0.
|
|
55
|
+
"@webstudio-is/tsconfig": "^1.0.7"
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
58
|
"dev": "build-package --watch",
|
|
59
59
|
"build": "build-package",
|
|
60
60
|
"build:args": "generate-arg-types './src/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
|
|
61
61
|
"dts": "tsc --project tsconfig.dts.json",
|
|
62
|
-
"typecheck": "tsc
|
|
62
|
+
"typecheck": "tsc",
|
|
63
63
|
"checks": "pnpm typecheck"
|
|
64
64
|
}
|
|
65
65
|
}
|
|
@@ -27,13 +27,21 @@ export const props: Record<string, PropMeta> = {
|
|
|
27
27
|
type: "string",
|
|
28
28
|
options: ["list", "none", "inline", "both"],
|
|
29
29
|
},
|
|
30
|
-
"aria-
|
|
30
|
+
"aria-braillelabel": {
|
|
31
31
|
description:
|
|
32
|
-
"
|
|
32
|
+
"Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
|
|
33
33
|
required: false,
|
|
34
|
-
control: "
|
|
35
|
-
type: "
|
|
34
|
+
control: "text",
|
|
35
|
+
type: "string",
|
|
36
36
|
},
|
|
37
|
+
"aria-brailleroledescription": {
|
|
38
|
+
description:
|
|
39
|
+
"Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
|
|
40
|
+
required: false,
|
|
41
|
+
control: "text",
|
|
42
|
+
type: "string",
|
|
43
|
+
},
|
|
44
|
+
"aria-busy": { required: false, control: "boolean", type: "boolean" },
|
|
37
45
|
"aria-checked": {
|
|
38
46
|
description:
|
|
39
47
|
'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
|
|
@@ -55,6 +63,13 @@ export const props: Record<string, PropMeta> = {
|
|
|
55
63
|
control: "number",
|
|
56
64
|
type: "number",
|
|
57
65
|
},
|
|
66
|
+
"aria-colindextext": {
|
|
67
|
+
description:
|
|
68
|
+
"Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
|
|
69
|
+
required: false,
|
|
70
|
+
control: "text",
|
|
71
|
+
type: "string",
|
|
72
|
+
},
|
|
58
73
|
"aria-colspan": {
|
|
59
74
|
description:
|
|
60
75
|
"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
|
|
@@ -83,6 +98,13 @@ export const props: Record<string, PropMeta> = {
|
|
|
83
98
|
control: "text",
|
|
84
99
|
type: "string",
|
|
85
100
|
},
|
|
101
|
+
"aria-description": {
|
|
102
|
+
description:
|
|
103
|
+
"Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
|
|
104
|
+
required: false,
|
|
105
|
+
control: "text",
|
|
106
|
+
type: "string",
|
|
107
|
+
},
|
|
86
108
|
"aria-details": {
|
|
87
109
|
description:
|
|
88
110
|
"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
|
|
@@ -300,6 +322,13 @@ export const props: Record<string, PropMeta> = {
|
|
|
300
322
|
control: "number",
|
|
301
323
|
type: "number",
|
|
302
324
|
},
|
|
325
|
+
"aria-rowindextext": {
|
|
326
|
+
description:
|
|
327
|
+
"Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
|
|
328
|
+
required: false,
|
|
329
|
+
control: "text",
|
|
330
|
+
type: "string",
|
|
331
|
+
},
|
|
303
332
|
"aria-rowspan": {
|
|
304
333
|
description:
|
|
305
334
|
"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
|
|
@@ -387,9 +416,9 @@ export const props: Record<string, PropMeta> = {
|
|
|
387
416
|
control: "select",
|
|
388
417
|
type: "string",
|
|
389
418
|
options: [
|
|
419
|
+
"search",
|
|
390
420
|
"text",
|
|
391
421
|
"none",
|
|
392
|
-
"search",
|
|
393
422
|
"tel",
|
|
394
423
|
"url",
|
|
395
424
|
"email",
|
|
@@ -25,13 +25,21 @@ export const props: Record<string, PropMeta> = {
|
|
|
25
25
|
type: "string",
|
|
26
26
|
options: ["list", "none", "inline", "both"],
|
|
27
27
|
},
|
|
28
|
-
"aria-
|
|
28
|
+
"aria-braillelabel": {
|
|
29
29
|
description:
|
|
30
|
-
"
|
|
30
|
+
"Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
|
|
31
31
|
required: false,
|
|
32
|
-
control: "
|
|
33
|
-
type: "
|
|
32
|
+
control: "text",
|
|
33
|
+
type: "string",
|
|
34
|
+
},
|
|
35
|
+
"aria-brailleroledescription": {
|
|
36
|
+
description:
|
|
37
|
+
"Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
|
|
38
|
+
required: false,
|
|
39
|
+
control: "text",
|
|
40
|
+
type: "string",
|
|
34
41
|
},
|
|
42
|
+
"aria-busy": { required: false, control: "boolean", type: "boolean" },
|
|
35
43
|
"aria-checked": {
|
|
36
44
|
description:
|
|
37
45
|
'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
|
|
@@ -53,6 +61,13 @@ export const props: Record<string, PropMeta> = {
|
|
|
53
61
|
control: "number",
|
|
54
62
|
type: "number",
|
|
55
63
|
},
|
|
64
|
+
"aria-colindextext": {
|
|
65
|
+
description:
|
|
66
|
+
"Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
|
|
67
|
+
required: false,
|
|
68
|
+
control: "text",
|
|
69
|
+
type: "string",
|
|
70
|
+
},
|
|
56
71
|
"aria-colspan": {
|
|
57
72
|
description:
|
|
58
73
|
"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
|
|
@@ -81,6 +96,13 @@ export const props: Record<string, PropMeta> = {
|
|
|
81
96
|
control: "text",
|
|
82
97
|
type: "string",
|
|
83
98
|
},
|
|
99
|
+
"aria-description": {
|
|
100
|
+
description:
|
|
101
|
+
"Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
|
|
102
|
+
required: false,
|
|
103
|
+
control: "text",
|
|
104
|
+
type: "string",
|
|
105
|
+
},
|
|
84
106
|
"aria-details": {
|
|
85
107
|
description:
|
|
86
108
|
"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
|
|
@@ -298,6 +320,13 @@ export const props: Record<string, PropMeta> = {
|
|
|
298
320
|
control: "number",
|
|
299
321
|
type: "number",
|
|
300
322
|
},
|
|
323
|
+
"aria-rowindextext": {
|
|
324
|
+
description:
|
|
325
|
+
"Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
|
|
326
|
+
required: false,
|
|
327
|
+
control: "text",
|
|
328
|
+
type: "string",
|
|
329
|
+
},
|
|
301
330
|
"aria-rowspan": {
|
|
302
331
|
description:
|
|
303
332
|
"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
|
|
@@ -376,9 +405,9 @@ export const props: Record<string, PropMeta> = {
|
|
|
376
405
|
control: "select",
|
|
377
406
|
type: "string",
|
|
378
407
|
options: [
|
|
408
|
+
"search",
|
|
379
409
|
"text",
|
|
380
410
|
"none",
|
|
381
|
-
"search",
|
|
382
411
|
"tel",
|
|
383
412
|
"url",
|
|
384
413
|
"email",
|
|
@@ -405,9 +434,9 @@ export const props: Record<string, PropMeta> = {
|
|
|
405
434
|
placeholder: { required: false, control: "text", type: "string" },
|
|
406
435
|
prefetch: {
|
|
407
436
|
required: false,
|
|
408
|
-
control: "
|
|
437
|
+
control: "select",
|
|
409
438
|
type: "string",
|
|
410
|
-
options: ["none", "intent", "render"],
|
|
439
|
+
options: ["none", "intent", "render", "viewport"],
|
|
411
440
|
},
|
|
412
441
|
prefix: { required: false, control: "text", type: "string" },
|
|
413
442
|
preventScrollReset: { required: false, control: "boolean", type: "boolean" },
|
|
@@ -25,13 +25,21 @@ export const props: Record<string, PropMeta> = {
|
|
|
25
25
|
type: "string",
|
|
26
26
|
options: ["list", "none", "inline", "both"],
|
|
27
27
|
},
|
|
28
|
-
"aria-
|
|
28
|
+
"aria-braillelabel": {
|
|
29
29
|
description:
|
|
30
|
-
"
|
|
30
|
+
"Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
|
|
31
31
|
required: false,
|
|
32
|
-
control: "
|
|
33
|
-
type: "
|
|
32
|
+
control: "text",
|
|
33
|
+
type: "string",
|
|
34
|
+
},
|
|
35
|
+
"aria-brailleroledescription": {
|
|
36
|
+
description:
|
|
37
|
+
"Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
|
|
38
|
+
required: false,
|
|
39
|
+
control: "text",
|
|
40
|
+
type: "string",
|
|
34
41
|
},
|
|
42
|
+
"aria-busy": { required: false, control: "boolean", type: "boolean" },
|
|
35
43
|
"aria-checked": {
|
|
36
44
|
description:
|
|
37
45
|
'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
|
|
@@ -53,6 +61,13 @@ export const props: Record<string, PropMeta> = {
|
|
|
53
61
|
control: "number",
|
|
54
62
|
type: "number",
|
|
55
63
|
},
|
|
64
|
+
"aria-colindextext": {
|
|
65
|
+
description:
|
|
66
|
+
"Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
|
|
67
|
+
required: false,
|
|
68
|
+
control: "text",
|
|
69
|
+
type: "string",
|
|
70
|
+
},
|
|
56
71
|
"aria-colspan": {
|
|
57
72
|
description:
|
|
58
73
|
"Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
|
|
@@ -81,6 +96,13 @@ export const props: Record<string, PropMeta> = {
|
|
|
81
96
|
control: "text",
|
|
82
97
|
type: "string",
|
|
83
98
|
},
|
|
99
|
+
"aria-description": {
|
|
100
|
+
description:
|
|
101
|
+
"Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
|
|
102
|
+
required: false,
|
|
103
|
+
control: "text",
|
|
104
|
+
type: "string",
|
|
105
|
+
},
|
|
84
106
|
"aria-details": {
|
|
85
107
|
description:
|
|
86
108
|
"Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
|
|
@@ -298,6 +320,13 @@ export const props: Record<string, PropMeta> = {
|
|
|
298
320
|
control: "number",
|
|
299
321
|
type: "number",
|
|
300
322
|
},
|
|
323
|
+
"aria-rowindextext": {
|
|
324
|
+
description:
|
|
325
|
+
"Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
|
|
326
|
+
required: false,
|
|
327
|
+
control: "text",
|
|
328
|
+
type: "string",
|
|
329
|
+
},
|
|
301
330
|
"aria-rowspan": {
|
|
302
331
|
description:
|
|
303
332
|
"Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
|
|
@@ -376,9 +405,9 @@ export const props: Record<string, PropMeta> = {
|
|
|
376
405
|
control: "select",
|
|
377
406
|
type: "string",
|
|
378
407
|
options: [
|
|
408
|
+
"search",
|
|
379
409
|
"text",
|
|
380
410
|
"none",
|
|
381
|
-
"search",
|
|
382
411
|
"tel",
|
|
383
412
|
"url",
|
|
384
413
|
"email",
|
|
@@ -405,9 +434,9 @@ export const props: Record<string, PropMeta> = {
|
|
|
405
434
|
placeholder: { required: false, control: "text", type: "string" },
|
|
406
435
|
prefetch: {
|
|
407
436
|
required: false,
|
|
408
|
-
control: "
|
|
437
|
+
control: "select",
|
|
409
438
|
type: "string",
|
|
410
|
-
options: ["none", "intent", "render"],
|
|
439
|
+
options: ["none", "intent", "render", "viewport"],
|
|
411
440
|
},
|
|
412
441
|
prefix: { required: false, control: "text", type: "string" },
|
|
413
442
|
preventScrollReset: { required: false, control: "boolean", type: "boolean" },
|
package/src/form.ws.tsx
CHANGED
|
@@ -32,15 +32,14 @@ export const meta: WsComponentMeta = {
|
|
|
32
32
|
{
|
|
33
33
|
type: "instance",
|
|
34
34
|
component: "Form",
|
|
35
|
+
dataSources: {
|
|
36
|
+
formState: { type: "variable", initialValue: "initial" },
|
|
37
|
+
},
|
|
35
38
|
props: [
|
|
36
39
|
{
|
|
40
|
+
type: "dataSource",
|
|
37
41
|
name: "state",
|
|
38
|
-
|
|
39
|
-
value: "initial",
|
|
40
|
-
dataSourceRef: {
|
|
41
|
-
type: "variable",
|
|
42
|
-
name: "formState",
|
|
43
|
-
},
|
|
42
|
+
dataSourceName: "formState",
|
|
44
43
|
},
|
|
45
44
|
],
|
|
46
45
|
children: [
|
|
@@ -48,16 +47,17 @@ export const meta: WsComponentMeta = {
|
|
|
48
47
|
type: "instance",
|
|
49
48
|
label: "Form Content",
|
|
50
49
|
component: "Box",
|
|
50
|
+
dataSources: {
|
|
51
|
+
formInitial: {
|
|
52
|
+
type: "expression",
|
|
53
|
+
code: `formState === 'initial' || formState === 'error'`,
|
|
54
|
+
},
|
|
55
|
+
},
|
|
51
56
|
props: [
|
|
52
57
|
{
|
|
58
|
+
type: "dataSource",
|
|
53
59
|
name: showAttribute,
|
|
54
|
-
|
|
55
|
-
value: false,
|
|
56
|
-
dataSourceRef: {
|
|
57
|
-
type: "expression",
|
|
58
|
-
name: "formInitial",
|
|
59
|
-
code: `formState === 'initial' || formState === 'error'`,
|
|
60
|
-
},
|
|
60
|
+
dataSourceName: "formInitial",
|
|
61
61
|
},
|
|
62
62
|
],
|
|
63
63
|
children: [
|
|
@@ -95,16 +95,17 @@ export const meta: WsComponentMeta = {
|
|
|
95
95
|
type: "instance",
|
|
96
96
|
label: "Success Message",
|
|
97
97
|
component: "Box",
|
|
98
|
+
dataSources: {
|
|
99
|
+
formSuccess: {
|
|
100
|
+
type: "expression",
|
|
101
|
+
code: `formState === 'success'`,
|
|
102
|
+
},
|
|
103
|
+
},
|
|
98
104
|
props: [
|
|
99
105
|
{
|
|
106
|
+
type: "dataSource",
|
|
100
107
|
name: showAttribute,
|
|
101
|
-
|
|
102
|
-
value: false,
|
|
103
|
-
dataSourceRef: {
|
|
104
|
-
type: "expression",
|
|
105
|
-
name: "formSuccess",
|
|
106
|
-
code: `formState === 'success'`,
|
|
107
|
-
},
|
|
108
|
+
dataSourceName: "formSuccess",
|
|
108
109
|
},
|
|
109
110
|
],
|
|
110
111
|
children: [
|
|
@@ -116,16 +117,17 @@ export const meta: WsComponentMeta = {
|
|
|
116
117
|
type: "instance",
|
|
117
118
|
label: "Error Message",
|
|
118
119
|
component: "Box",
|
|
120
|
+
dataSources: {
|
|
121
|
+
formError: {
|
|
122
|
+
type: "expression",
|
|
123
|
+
code: `formState === 'error'`,
|
|
124
|
+
},
|
|
125
|
+
},
|
|
119
126
|
props: [
|
|
120
127
|
{
|
|
128
|
+
type: "dataSource",
|
|
121
129
|
name: showAttribute,
|
|
122
|
-
|
|
123
|
-
value: false,
|
|
124
|
-
dataSourceRef: {
|
|
125
|
-
type: "expression",
|
|
126
|
-
name: "formError",
|
|
127
|
-
code: `formState === 'error'`,
|
|
128
|
-
},
|
|
130
|
+
dataSourceName: "formError",
|
|
129
131
|
},
|
|
130
132
|
],
|
|
131
133
|
children: [{ type: "text", value: "Sorry, something went wrong." }],
|
|
@@ -137,5 +139,5 @@ export const meta: WsComponentMeta = {
|
|
|
137
139
|
|
|
138
140
|
export const propsMeta: WsComponentPropsMeta = {
|
|
139
141
|
props,
|
|
140
|
-
initialProps: ["id", "state"],
|
|
142
|
+
initialProps: ["id", "state", "action"],
|
|
141
143
|
};
|
|
@@ -11,7 +11,7 @@ type Props = Omit<ComponentPropsWithoutRef<typeof Link>, "target"> & {
|
|
|
11
11
|
target?: "_self" | "_blank" | "_parent" | "_top";
|
|
12
12
|
|
|
13
13
|
// useful remix props
|
|
14
|
-
prefetch?: "intent" | "render" | "
|
|
14
|
+
prefetch?: "none" | "intent" | "render" | "viewport";
|
|
15
15
|
reloadDocument?: boolean;
|
|
16
16
|
replace?: boolean;
|
|
17
17
|
preventScrollReset?: boolean;
|
|
@@ -34,7 +34,10 @@ export const wrapLinkComponent = (BaseLink: typeof Link) => {
|
|
|
34
34
|
return <RemixLink {...props} to={to} ref={ref} />;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
const { prefetch, reloadDocument, replace, preventScrollReset, ...rest } =
|
|
38
|
+
props;
|
|
39
|
+
|
|
40
|
+
return <BaseLink {...rest} ref={ref} />;
|
|
38
41
|
});
|
|
39
42
|
|
|
40
43
|
Component.displayName = BaseLink.displayName;
|