@plitzi/sdk-elements 0.38.8 → 0.38.10
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 +157 -0
- package/dist/Component/ComponentHelper.mjs +22 -13
- package/dist/Element/hooks/useElementInternal.mjs +67 -59
- package/dist/elements/advanced/BlockHtml/index.mjs +3 -3
- package/dist/elements/advanced/BlockJsx/index.mjs +3 -3
- package/dist/elements/advanced/Custom/index.mjs +3 -3
- package/dist/elements/basic/Button/index.mjs +3 -3
- package/dist/elements/basic/Text/Settings.d.ts +2 -1
- package/dist/elements/basic/Text/Settings.mjs +16 -10
- package/dist/elements/basic/Text/Text.d.ts +3 -1
- package/dist/elements/basic/Text/Text.mjs +6 -5
- package/dist/elements/basic/Text/declaration.d.ts +1 -0
- package/dist/elements/basic/Text/index.d.ts +1 -0
- package/dist/elements/basic/ThemeToggle/ThemeToggle.mjs +13 -13
- package/dist/elements/declarations/index.d.ts +26 -17
- package/dist/elements/declarations/index.mjs +6 -6
- package/dist/elements/form/Form/Form.mjs +19 -19
- package/dist/elements/form/FormControl/FormControl.d.ts +1 -0
- package/dist/elements/form/FormControl/FormControl.mjs +10 -10
- package/dist/elements/form/FormControl/Settings.mjs +1 -1
- package/dist/elements/form/FormControl/declaration.d.ts +1 -1
- package/dist/elements/form/FormControl/declaration.mjs +3 -3
- package/dist/elements/form/FormControl/index.d.ts +1 -1
- package/dist/elements/internal/NotFound/index.mjs +3 -3
- package/dist/elements/internal/Page/Page.d.ts +5 -0
- package/dist/elements/internal/Page/Page.mjs +26 -25
- package/dist/elements/internal/Page/PageHead.d.ts +12 -0
- package/dist/elements/internal/Page/PageHead.mjs +29 -0
- package/dist/elements/internal/Page/declaration.d.ts +2 -0
- package/dist/elements/internal/Page/declaration.mjs +5 -0
- package/dist/elements/internal/Page/index.d.ts +2 -0
- package/dist/elements/provider/ApiContainer/ApiContainer.d.ts +7 -0
- package/dist/elements/provider/ApiContainer/ApiContainer.mjs +187 -187
- package/dist/elements/provider/ApiContainer/declaration.d.ts +11 -9
- package/dist/elements/provider/ApiContainer/declaration.mjs +2 -1
- package/dist/elements/provider/ApiContainer/index.d.ts +11 -9
- package/dist/elements/provider/Channel/Channel.mjs +15 -15
- package/dist/elements/provider/Channel/declaration.d.ts +1 -1
- package/dist/elements/provider/Channel/index.d.ts +1 -1
- package/dist/elements/structure/Carousel/Carousel.mjs +72 -72
- package/dist/elements/structure/Carousel/CarouselTrack/index.mjs +3 -3
- package/dist/elements/structure/Carousel/declaration.d.ts +1 -1
- package/dist/elements/structure/Carousel/index.d.ts +1 -1
- package/dist/elements/structure/Container/Container.mjs +8 -8
- package/dist/elements/structure/DialogContainer/DialogContainer.mjs +14 -14
- package/dist/elements/structure/DialogContainer/declaration.d.ts +1 -2
- package/dist/elements/structure/DialogContainer/declaration.mjs +1 -2
- package/dist/elements/structure/DialogContainer/index.d.ts +1 -2
- package/dist/elements/structure/List/List.d.ts +3 -1
- package/dist/elements/structure/List/List.mjs +3 -1
- package/dist/elements/structure/List/Settings.d.ts +2 -1
- package/dist/elements/structure/List/Settings.mjs +12 -5
- package/dist/elements/structure/List/declaration.d.ts +1 -0
- package/dist/elements/structure/List/index.d.ts +1 -0
- package/dist/elements/structure/List/modes/ListBasic.d.ts +3 -1
- package/dist/elements/structure/List/modes/ListBasic.mjs +2 -1
- package/dist/elements/structure/List/modes/ListControlled/ListControlled.d.ts +3 -1
- package/dist/elements/structure/List/modes/ListControlled/ListControlled.mjs +24 -23
- package/dist/elements/structure/ModalContainer/ModalContainer.mjs +16 -16
- package/dist/elements/structure/ModalContainer/declaration.d.ts +2 -3
- package/dist/elements/structure/ModalContainer/declaration.mjs +2 -3
- package/dist/elements/structure/ModalContainer/index.d.ts +2 -3
- package/dist/elements/structure/Pagination/Pagination.mjs +10 -10
- package/dist/index.d.ts +21 -17
- package/package.json +11 -7
|
@@ -48,6 +48,7 @@ export declare const elementDeclarations: {
|
|
|
48
48
|
readonly pagination: readonly string[];
|
|
49
49
|
};
|
|
50
50
|
readonly sourceType: "apiContainer";
|
|
51
|
+
readonly serverTemplates: readonly ["notFound"];
|
|
51
52
|
readonly triggers: {
|
|
52
53
|
readonly onApiError: {
|
|
53
54
|
readonly action: "onApiError";
|
|
@@ -209,26 +210,27 @@ export declare const elementDeclarations: {
|
|
|
209
210
|
method?: "get" | "post" | "put" | "delete" | "patch" | undefined;
|
|
210
211
|
resource?: string | undefined;
|
|
211
212
|
headers?: Record<string, string> | undefined;
|
|
213
|
+
notFound?: string | undefined;
|
|
212
214
|
subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "" | undefined;
|
|
215
|
+
credentials?: RequestCredentials | undefined;
|
|
216
|
+
staleTime?: number | string | undefined;
|
|
217
|
+
gcTime?: number | string | undefined;
|
|
218
|
+
pageParam?: string | undefined;
|
|
213
219
|
query?: string | undefined;
|
|
214
220
|
accessToken?: string | undefined;
|
|
215
221
|
mockData?: (Record<string, unknown> | string) | undefined;
|
|
216
|
-
|
|
222
|
+
singleRecord?: boolean | undefined;
|
|
223
|
+
pagination?: import('../provider/ApiContainer/hooks/useProviderPagination').ProviderPagination | undefined;
|
|
224
|
+
renderWhileLoading?: boolean | undefined;
|
|
225
|
+
loadingSlot?: string | undefined;
|
|
226
|
+
refreshSeconds?: number | string | undefined;
|
|
217
227
|
connector?: string | undefined;
|
|
218
228
|
limit?: string | undefined;
|
|
219
|
-
singleRecord?: boolean | undefined;
|
|
220
229
|
filters?: {
|
|
221
230
|
field: string;
|
|
222
231
|
operator: string;
|
|
223
232
|
value: string;
|
|
224
233
|
}[] | undefined;
|
|
225
|
-
pagination?: import('../provider/ApiContainer/hooks/useProviderPagination').ProviderPagination | undefined;
|
|
226
|
-
pageParam?: string | undefined;
|
|
227
|
-
renderWhileLoading?: boolean | undefined;
|
|
228
|
-
loadingSlot?: string | undefined;
|
|
229
|
-
staleTime?: number | string | undefined;
|
|
230
|
-
gcTime?: number | string | undefined;
|
|
231
|
-
refreshSeconds?: number | string | undefined;
|
|
232
234
|
}>>;
|
|
233
235
|
readonly BlockHtml: {
|
|
234
236
|
readonly type: "blockHtml";
|
|
@@ -601,8 +603,8 @@ export declare const elementDeclarations: {
|
|
|
601
603
|
items?: unknown[] | undefined;
|
|
602
604
|
speed?: number | undefined;
|
|
603
605
|
loop?: boolean | undefined;
|
|
604
|
-
autoplay?: number | undefined;
|
|
605
606
|
pauseOnHover?: boolean | undefined;
|
|
607
|
+
autoplay?: number | undefined;
|
|
606
608
|
transition?: import('../structure/Carousel/CarouselContext').CarouselTransition | undefined;
|
|
607
609
|
itemKey?: string | undefined;
|
|
608
610
|
}>>;
|
|
@@ -785,9 +787,9 @@ export declare const elementDeclarations: {
|
|
|
785
787
|
};
|
|
786
788
|
} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
|
|
787
789
|
subType?: "" | "div" | "section" | "aside" | "main" | undefined;
|
|
788
|
-
topic?: string | undefined;
|
|
789
790
|
grant?: string | undefined;
|
|
790
791
|
presence?: unknown;
|
|
792
|
+
topic?: string | undefined;
|
|
791
793
|
keep?: number | string | undefined;
|
|
792
794
|
}>>;
|
|
793
795
|
readonly Container: {
|
|
@@ -1060,8 +1062,7 @@ export declare const elementDeclarations: {
|
|
|
1060
1062
|
readonly top: "0";
|
|
1061
1063
|
readonly position: "absolute";
|
|
1062
1064
|
readonly 'z-index': "210";
|
|
1063
|
-
readonly 'background-color': "
|
|
1064
|
-
readonly opacity: "0.5";
|
|
1065
|
+
readonly 'background-color': "rgb(0 0 0 / 50%)";
|
|
1065
1066
|
};
|
|
1066
1067
|
};
|
|
1067
1068
|
readonly rootContainer: {
|
|
@@ -1620,7 +1621,7 @@ export declare const elementDeclarations: {
|
|
|
1620
1621
|
readonly autoFocus: false;
|
|
1621
1622
|
readonly disabled: false;
|
|
1622
1623
|
readonly options: readonly [];
|
|
1623
|
-
readonly required:
|
|
1624
|
+
readonly required: false;
|
|
1624
1625
|
readonly requiredMessage: "";
|
|
1625
1626
|
readonly minLength: 0;
|
|
1626
1627
|
readonly minLengthMessage: "";
|
|
@@ -2800,6 +2801,7 @@ export declare const elementDeclarations: {
|
|
|
2800
2801
|
readonly initialItems: readonly ["listItem", "listItem", "listItem"];
|
|
2801
2802
|
} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
|
|
2802
2803
|
source?: "none" | "controlled" | undefined;
|
|
2804
|
+
label?: string | undefined;
|
|
2803
2805
|
items?: unknown[] | undefined;
|
|
2804
2806
|
subType?: "ul" | "ol" | undefined;
|
|
2805
2807
|
itemKey?: string | undefined;
|
|
@@ -3034,7 +3036,7 @@ export declare const elementDeclarations: {
|
|
|
3034
3036
|
readonly definition: {
|
|
3035
3037
|
readonly label: "Modal Container";
|
|
3036
3038
|
readonly type: "modalContainer";
|
|
3037
|
-
readonly description:
|
|
3039
|
+
readonly description: string;
|
|
3038
3040
|
readonly items: readonly [];
|
|
3039
3041
|
readonly bindings: {};
|
|
3040
3042
|
readonly loadStrategy: "lazy";
|
|
@@ -3091,8 +3093,7 @@ export declare const elementDeclarations: {
|
|
|
3091
3093
|
readonly top: "0";
|
|
3092
3094
|
readonly position: "absolute";
|
|
3093
3095
|
readonly 'z-index': "210";
|
|
3094
|
-
readonly 'background-color': "
|
|
3095
|
-
readonly opacity: "0.5";
|
|
3096
|
+
readonly 'background-color': "rgb(0 0 0 / 50%)";
|
|
3096
3097
|
};
|
|
3097
3098
|
};
|
|
3098
3099
|
readonly rootContainer: {
|
|
@@ -3577,6 +3578,7 @@ export declare const elementDeclarations: {
|
|
|
3577
3578
|
} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
|
|
3578
3579
|
readonly Page: {
|
|
3579
3580
|
readonly type: "page";
|
|
3581
|
+
readonly serverTemplates: readonly ["seoPageTitle", "seoPageDescription", "notFound"];
|
|
3580
3582
|
readonly triggers: {
|
|
3581
3583
|
readonly onPageLoad: {
|
|
3582
3584
|
readonly action: "onPageLoad";
|
|
@@ -3657,6 +3659,7 @@ export declare const elementDeclarations: {
|
|
|
3657
3659
|
};
|
|
3658
3660
|
} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
|
|
3659
3661
|
layout?: string | undefined;
|
|
3662
|
+
notFound?: string | undefined;
|
|
3660
3663
|
layoutContainer?: string | undefined;
|
|
3661
3664
|
seoEnabled?: boolean | undefined;
|
|
3662
3665
|
seoPageTitle?: string | undefined;
|
|
@@ -4250,6 +4253,7 @@ export declare const elementDeclarations: {
|
|
|
4250
4253
|
} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
|
|
4251
4254
|
title?: string | undefined;
|
|
4252
4255
|
content?: string | number | undefined;
|
|
4256
|
+
decorative?: boolean | undefined;
|
|
4253
4257
|
}>>;
|
|
4254
4258
|
readonly ThemeToggle: {
|
|
4255
4259
|
readonly type: "themeToggle";
|
|
@@ -4440,3 +4444,8 @@ export declare const elementDeclarations: {
|
|
|
4440
4444
|
};
|
|
4441
4445
|
export type ElementDeclarationName = keyof typeof elementDeclarations;
|
|
4442
4446
|
export { ApiContainerDeclaration, BlockHtmlDeclaration, BlockJsxDeclaration, ButtonDeclaration, CarouselDeclaration, CarouselTrackDeclaration, ChannelDeclaration, ContainerDeclaration, CustomDeclaration, DialogContainerDeclaration, DropdownDeclaration, DropdownPopupDeclaration, EmbedDeclaration, FontAwesomeDeclaration, FormControlDeclaration, FormDeclaration, HeadingDeclaration, ImageDeclaration, LayoutContainerDeclaration, LinkDeclaration, ListDeclaration, ListItemDeclaration, LoadingDeclaration, MarkdownDeclaration, ModalContainerDeclaration, NodeHtmlDeclaration, NotFoundDeclaration, PageDeclaration, PaginationDeclaration, ParagraphDeclaration, ReferenceDeclaration, RichTextDeclaration, SvgDeclaration, TabContainerBodyDeclaration, TabContainerDeclaration, TabContainerHeaderDeclaration, TabContainerItemDeclaration, TextDeclaration, ThemeToggleDeclaration, VideoDeclaration };
|
|
4447
|
+
/**
|
|
4448
|
+
* Each type's `serverTemplates`, by the type a document names: the attributes the page server evaluates against a
|
|
4449
|
+
* context of its own, which the element runtime leaves as written and the authoring lint holds to that context.
|
|
4450
|
+
*/
|
|
4451
|
+
export declare const serverTemplatesByType: Readonly<Record<string, readonly string[]>>;
|
|
@@ -26,8 +26,8 @@ import w from "../media/Svg/declaration.mjs";
|
|
|
26
26
|
import T from "../media/Video/declaration.mjs";
|
|
27
27
|
import E from "../provider/ApiContainer/declaration.mjs";
|
|
28
28
|
import D from "../provider/Channel/declaration.mjs";
|
|
29
|
-
import O from "../structure/Carousel/declaration.mjs";
|
|
30
|
-
import k from "../structure/Carousel/
|
|
29
|
+
import O from "../structure/Carousel/CarouselTrack/declaration.mjs";
|
|
30
|
+
import k from "../structure/Carousel/declaration.mjs";
|
|
31
31
|
import A from "../structure/Container/declaration.mjs";
|
|
32
32
|
import j from "../structure/DialogContainer/declaration.mjs";
|
|
33
33
|
import M from "../structure/List/declaration.mjs";
|
|
@@ -44,8 +44,8 @@ var B = {
|
|
|
44
44
|
BlockHtml: e,
|
|
45
45
|
BlockJsx: t,
|
|
46
46
|
Button: a,
|
|
47
|
-
Carousel:
|
|
48
|
-
CarouselTrack:
|
|
47
|
+
Carousel: k,
|
|
48
|
+
CarouselTrack: O,
|
|
49
49
|
Channel: D,
|
|
50
50
|
Container: A,
|
|
51
51
|
Custom: n,
|
|
@@ -80,6 +80,6 @@ var B = {
|
|
|
80
80
|
Text: p,
|
|
81
81
|
ThemeToggle: m,
|
|
82
82
|
Video: T
|
|
83
|
-
};
|
|
83
|
+
}, V = Object.fromEntries(Object.values(B).flatMap((e) => "serverTemplates" in e ? [[e.type, e.serverTemplates]] : []));
|
|
84
84
|
//#endregion
|
|
85
|
-
export { E as ApiContainerDeclaration, e as BlockHtmlDeclaration, t as BlockJsxDeclaration, a as ButtonDeclaration,
|
|
85
|
+
export { E as ApiContainerDeclaration, e as BlockHtmlDeclaration, t as BlockJsxDeclaration, a as ButtonDeclaration, k as CarouselDeclaration, O as CarouselTrackDeclaration, D as ChannelDeclaration, A as ContainerDeclaration, n as CustomDeclaration, j as DialogContainerDeclaration, o as DropdownDeclaration, s as DropdownPopupDeclaration, x as EmbedDeclaration, S as FontAwesomeDeclaration, g as FormControlDeclaration, h as FormDeclaration, c as HeadingDeclaration, C as ImageDeclaration, _ as LayoutContainerDeclaration, l as LinkDeclaration, M as ListDeclaration, N as ListItemDeclaration, v as LoadingDeclaration, u as MarkdownDeclaration, P as ModalContainerDeclaration, r as NodeHtmlDeclaration, y as NotFoundDeclaration, b as PageDeclaration, F as PaginationDeclaration, d as ParagraphDeclaration, i as ReferenceDeclaration, f as RichTextDeclaration, w as SvgDeclaration, L as TabContainerBodyDeclaration, I as TabContainerDeclaration, R as TabContainerHeaderDeclaration, z as TabContainerItemDeclaration, p as TextDeclaration, m as ThemeToggleDeclaration, T as VideoDeclaration, B as elementDeclarations, V as serverTemplatesByType };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import e from "
|
|
2
|
-
import t from "../../../Element/
|
|
3
|
-
import
|
|
4
|
-
import r from "
|
|
1
|
+
import e from "./declaration.mjs";
|
|
2
|
+
import t from "../../../Element/hocs/withElement.mjs";
|
|
3
|
+
import n from "../../../Element/hooks/useElement.mjs";
|
|
4
|
+
import { RootElement as r } from "../../../Element/RootElement.mjs";
|
|
5
5
|
import { use as i, useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
|
|
6
6
|
import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
|
|
7
7
|
import { get as d, omit as f } from "@plitzi/plitzi-ui/helpers";
|
|
@@ -13,8 +13,8 @@ import { produce as _ } from "immer";
|
|
|
13
13
|
import v from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
|
|
14
14
|
import y from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
|
|
15
15
|
//#region src/elements/form/Form/Form.tsx
|
|
16
|
-
var b = ({ ref:
|
|
17
|
-
let [O, k] = l({}), A = c(/* @__PURE__ */ new Map()), j = c(!1), { id: M, definition: { label: N = "Form" }, setElementState: P } =
|
|
16
|
+
var b = ({ ref: t, className: b = "", children: x, method: S = "get", actionUrl: C = "", managedByInteractions: w = !1, noValidate: T = !1, errors: E = m, values: D = m }) => {
|
|
17
|
+
let [O, k] = l({}), A = c(/* @__PURE__ */ new Map()), j = c(!1), { id: M, definition: { label: N = "Form" }, setElementState: P } = n(), F = v(e.sourceType, M), { settings: { previewMode: I }, contexts: { InteractionsContext: L } } = u(), { interactionsManager: R } = i(L), z = a((e) => k((t) => ({
|
|
18
18
|
...t,
|
|
19
19
|
[e.name]: e
|
|
20
20
|
})), [k]);
|
|
@@ -106,9 +106,9 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
|
|
|
106
106
|
fields: G
|
|
107
107
|
});
|
|
108
108
|
let q = s(() => ({ onSubmit: {
|
|
109
|
-
...
|
|
109
|
+
...e.triggers.onSubmit,
|
|
110
110
|
preview: {
|
|
111
|
-
...
|
|
111
|
+
...e.triggers.onSubmit.preview,
|
|
112
112
|
values: Object.values(O).reduce((e, t) => ({
|
|
113
113
|
...e,
|
|
114
114
|
[t.name]: ""
|
|
@@ -162,36 +162,36 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
|
|
|
162
162
|
let { name: t, error: n } = e;
|
|
163
163
|
W(t, n);
|
|
164
164
|
}, [W]), Q = s(() => {
|
|
165
|
-
let { performReset:
|
|
165
|
+
let { performReset: t, setFieldValue: n, setFieldError: r } = e.callbacks, i = Object.values(O).map((e) => ({
|
|
166
166
|
value: e.name,
|
|
167
167
|
label: e.name
|
|
168
168
|
}));
|
|
169
169
|
return {
|
|
170
170
|
performReset: {
|
|
171
|
-
...
|
|
171
|
+
...t,
|
|
172
172
|
title: `Reset ${N}`,
|
|
173
173
|
callback: Y
|
|
174
174
|
},
|
|
175
175
|
setFieldValue: {
|
|
176
|
-
...
|
|
176
|
+
...n,
|
|
177
177
|
title: `Set Field Value ${N}`,
|
|
178
178
|
callback: X,
|
|
179
179
|
params: {
|
|
180
|
-
...
|
|
180
|
+
...n.params,
|
|
181
181
|
name: {
|
|
182
|
-
...
|
|
182
|
+
...n.params.name,
|
|
183
183
|
options: i
|
|
184
184
|
}
|
|
185
185
|
}
|
|
186
186
|
},
|
|
187
187
|
setFieldError: {
|
|
188
|
-
...
|
|
188
|
+
...r,
|
|
189
189
|
title: `Set Field Error ${N}`,
|
|
190
190
|
callback: Z,
|
|
191
191
|
params: {
|
|
192
|
-
...
|
|
192
|
+
...r.params,
|
|
193
193
|
name: {
|
|
194
|
-
...
|
|
194
|
+
...r.params.name,
|
|
195
195
|
options: i
|
|
196
196
|
}
|
|
197
197
|
}
|
|
@@ -204,9 +204,9 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
|
|
|
204
204
|
O,
|
|
205
205
|
Z
|
|
206
206
|
]);
|
|
207
|
-
return /* @__PURE__ */ h(
|
|
207
|
+
return /* @__PURE__ */ h(r, {
|
|
208
208
|
tag: "form",
|
|
209
|
-
ref:
|
|
209
|
+
ref: t,
|
|
210
210
|
noValidate: T,
|
|
211
211
|
method: S,
|
|
212
212
|
className: g("plitzi-component__form", b),
|
|
@@ -222,6 +222,6 @@ var b = ({ ref: e, className: b = "", children: x, method: S = "get", actionUrl:
|
|
|
222
222
|
children: x
|
|
223
223
|
})
|
|
224
224
|
});
|
|
225
|
-
}, x =
|
|
225
|
+
}, x = t(b);
|
|
226
226
|
//#endregion
|
|
227
227
|
export { b as Form, x as default };
|
|
@@ -29,6 +29,7 @@ export type FormControlProps = {
|
|
|
29
29
|
label: string;
|
|
30
30
|
value: string;
|
|
31
31
|
}[];
|
|
32
|
+
/** Optional unless it says so, as an HTML field is: a required field left empty stops the submit. */
|
|
32
33
|
required: boolean;
|
|
33
34
|
/**
|
|
34
35
|
* The rules a value has to meet before the form submits, checked by the form at submit time and by the control when
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import e from "
|
|
2
|
-
import t from "../../../Element/
|
|
3
|
-
import
|
|
4
|
-
import r from "
|
|
1
|
+
import e from "./declaration.mjs";
|
|
2
|
+
import t from "../../../Element/hocs/withElement.mjs";
|
|
3
|
+
import n from "../../../Element/hooks/useElement.mjs";
|
|
4
|
+
import { RootElement as r } from "../../../Element/RootElement.mjs";
|
|
5
5
|
import { VISUALLY_HIDDEN as i } from "./components/visuallyHidden.mjs";
|
|
6
6
|
import a from "./components/Label.mjs";
|
|
7
7
|
import { isChecked as o } from "./helpers/isChecked.mjs";
|
|
@@ -17,8 +17,8 @@ import { createStoreHook as ee } from "@plitzi/nexus/react";
|
|
|
17
17
|
import { jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
18
18
|
import y from "clsx";
|
|
19
19
|
//#region src/elements/form/FormControl/FormControl.tsx
|
|
20
|
-
var b = ({ ref:
|
|
21
|
-
let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } =
|
|
20
|
+
var b = ({ ref: t, className: s = "", subType: b = "text", name: x = "", label: S = "Label", hideLabel: C = !1, placeholder: w = "", autoComplete: T = !0, autoFocus: E = !1, disabled: D = !1, options: O = [], required: k = !1, maxLength: A = 0, readOnly: j = !1, value: M = "", error: N = "", handleChange: P, handleValidate: F }) => {
|
|
21
|
+
let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } = n(), { settings: { previewMode: B }, contexts: { InteractionsContext: V } } = g(), { interactionsManager: H } = p(V), { useStore: U } = ee(), [W] = U("runtime.sources.form"), G = m((e) => {
|
|
22
22
|
if (P?.(e), !B) return;
|
|
23
23
|
let { target: t } = e, n = t instanceof HTMLInputElement && t.type === "checkbox" ? t.checked : t.value;
|
|
24
24
|
H.interactionTrigger(I, "onChange", {
|
|
@@ -52,9 +52,9 @@ var b = ({ ref: e, className: s = "", subType: b = "text", name: x = "", label:
|
|
|
52
52
|
x,
|
|
53
53
|
K,
|
|
54
54
|
q
|
|
55
|
-
]), /* @__PURE__ */ v(
|
|
56
|
-
ref:
|
|
57
|
-
interactionTriggers:
|
|
55
|
+
]), /* @__PURE__ */ v(r, {
|
|
56
|
+
ref: t,
|
|
57
|
+
interactionTriggers: e.triggers,
|
|
58
58
|
className: y("plitzi-component__form-control", {
|
|
59
59
|
"form-control--invalid": N && B,
|
|
60
60
|
[`plitzi-component__form-control-${b}`]: b
|
|
@@ -161,6 +161,6 @@ var b = ({ ref: e, className: s = "", subType: b = "text", name: x = "", label:
|
|
|
161
161
|
})
|
|
162
162
|
]
|
|
163
163
|
});
|
|
164
|
-
}, x =
|
|
164
|
+
}, x = t(s(b));
|
|
165
165
|
//#endregion
|
|
166
166
|
export { b as FormControl, x as default };
|
|
@@ -9,7 +9,7 @@ import c from "@plitzi/plitzi-ui/Select";
|
|
|
9
9
|
var l = (e) => {
|
|
10
10
|
let t = parseInt(e, 10);
|
|
11
11
|
return Number.isNaN(t) || t < 0 ? 0 : t;
|
|
12
|
-
}, u = ({ subType: u = "text", name: d = "", label: f = "Label", hideLabel: p = !1, defaultValue: m = "", placeholder: h = "", autoComplete: g = !0, autoFocus: _ = !1, options: v, required: y = !
|
|
12
|
+
}, u = ({ subType: u = "text", name: d = "", label: f = "Label", hideLabel: p = !1, defaultValue: m = "", placeholder: h = "", autoComplete: g = !0, autoFocus: _ = !1, options: v, required: y = !1, requiredMessage: b = "", minLength: x = 0, minLengthMessage: S = "", maxLength: C = 0, maxLengthMessage: w = "", formatMessage: T = "", pattern: E = "", patternMessage: D = "", matches: O = "", matchesMessage: k = "", readOnly: A = !1, disabled: j = !1, previewError: M = !1, onUpdate: N }) => {
|
|
13
13
|
let P = [
|
|
14
14
|
"text",
|
|
15
15
|
"textarea",
|
|
@@ -35,7 +35,7 @@ declare const declaration: {
|
|
|
35
35
|
readonly autoFocus: false;
|
|
36
36
|
readonly disabled: false;
|
|
37
37
|
readonly options: readonly [];
|
|
38
|
-
readonly required:
|
|
38
|
+
readonly required: false;
|
|
39
39
|
readonly requiredMessage: "";
|
|
40
40
|
readonly minLength: 0;
|
|
41
41
|
readonly minLengthMessage: "";
|
|
@@ -63,7 +63,7 @@ var n = {
|
|
|
63
63
|
"padding-left": "0px",
|
|
64
64
|
display: "block",
|
|
65
65
|
...c,
|
|
66
|
-
"background-color": "
|
|
66
|
+
"background-color": "transparent",
|
|
67
67
|
color: "inherit",
|
|
68
68
|
"line-height": "inherit",
|
|
69
69
|
"font-family": "inherit",
|
|
@@ -186,7 +186,7 @@ var n = {
|
|
|
186
186
|
autoFocus: !1,
|
|
187
187
|
disabled: !1,
|
|
188
188
|
options: [],
|
|
189
|
-
required: !
|
|
189
|
+
required: !1,
|
|
190
190
|
requiredMessage: "",
|
|
191
191
|
minLength: 0,
|
|
192
192
|
minLengthMessage: "",
|
|
@@ -202,7 +202,7 @@ var n = {
|
|
|
202
202
|
definition: {
|
|
203
203
|
label: "Form Control",
|
|
204
204
|
type: "formControl",
|
|
205
|
-
description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes. A `switch` is a checkbox announced and drawn as an on/off switch (`role=\"switch\"`), for a setting that applies at once; both hold `true`/`false`, and a `defaultValue` of `\"true\"` starts them on. Its slots: `label`, `requiredMark` (the `*` that ends the label of a required field), `input` (the box a typed field or a select is drawn in — a textarea, checkbox or switch is its own box), `field` (the `<input>` or `<select>` inside that box), `icon` (the show/hide button of a password) and `error`. The thumb of a switch is no element a class reaches: the class on its `input` slot sets `--plitzi-switch-thumb` (off), `--plitzi-switch-thumb-checked` (on, white by default) and `--plitzi-switch-thumb-shadow`.",
|
|
205
|
+
description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. Optional unless `required: true`, as an HTML field is: a `requiredMessage` alone requires nothing. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes. A `switch` is a checkbox announced and drawn as an on/off switch (`role=\"switch\"`), for a setting that applies at once; both hold `true`/`false`, and a `defaultValue` of `\"true\"` starts them on. Its slots: `label`, `requiredMark` (the `*` that ends the label of a required field), `input` (the box a typed field or a select is drawn in — a textarea, checkbox or switch is its own box), `field` (the `<input>` or `<select>` inside that box), `icon` (the show/hide button of a password) and `error`. The box is ringed (`2px solid currentColor`) while the field inside has keyboard focus: restyle it with a `focus-within` state on the `input` slot — the box never takes `focus` itself. The thumb of a switch is no element a class reaches: the class on its `input` slot sets `--plitzi-switch-thumb` (off), `--plitzi-switch-thumb-checked` (on, white by default) and `--plitzi-switch-thumb-shadow`.",
|
|
206
206
|
bindings: {},
|
|
207
207
|
styleSelectors: {
|
|
208
208
|
base: "",
|
|
@@ -23,7 +23,7 @@ declare const FormControl: {
|
|
|
23
23
|
readonly autoFocus: false;
|
|
24
24
|
readonly disabled: false;
|
|
25
25
|
readonly options: readonly [];
|
|
26
|
-
readonly required:
|
|
26
|
+
readonly required: false;
|
|
27
27
|
readonly requiredMessage: "";
|
|
28
28
|
readonly minLength: 0;
|
|
29
29
|
readonly minLengthMessage: "";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import e from "./
|
|
2
|
-
import t from "./
|
|
1
|
+
import e from "./declaration.mjs";
|
|
2
|
+
import t from "./NotFound.mjs";
|
|
3
3
|
//#region src/elements/internal/NotFound/index.ts
|
|
4
|
-
var n = Object.assign(
|
|
4
|
+
var n = Object.assign(t, e);
|
|
5
5
|
//#endregion
|
|
6
6
|
export { n as NotFound, n as default };
|
|
@@ -4,6 +4,11 @@ export type PageProps = {
|
|
|
4
4
|
seoEnabled?: boolean;
|
|
5
5
|
seoPageTitle?: string;
|
|
6
6
|
seoPageDescription?: string;
|
|
7
|
+
/**
|
|
8
|
+
* A template over the page's server providers and `navigation` that says this address shows nothing — a record that
|
|
9
|
+
* is not there: the page server sends it with status 404, rendered as written. Read there only (`serverTemplates`).
|
|
10
|
+
*/
|
|
11
|
+
notFound?: string;
|
|
7
12
|
className?: string;
|
|
8
13
|
layout?: string;
|
|
9
14
|
layoutContainer?: string;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import e from "../../../Element/LayoutBody.mjs";
|
|
2
|
-
import t from "
|
|
3
|
-
import n from "../../../Element/
|
|
4
|
-
import
|
|
5
|
-
import i from "
|
|
6
|
-
import a from "
|
|
2
|
+
import t from "./declaration.mjs";
|
|
3
|
+
import n from "../../../Element/hocs/withElement.mjs";
|
|
4
|
+
import r from "../../../Element/hooks/useElement.mjs";
|
|
5
|
+
import { RootElement as i } from "../../../Element/RootElement.mjs";
|
|
6
|
+
import a from "../LayoutContainer/index.mjs";
|
|
7
7
|
import o from "../../../Element/hooks/useLayoutChain.mjs";
|
|
8
|
-
import
|
|
9
|
-
import u from "
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import h from "
|
|
13
|
-
import
|
|
8
|
+
import s from "./PageHead.mjs";
|
|
9
|
+
import { use as c, useEffect as l, useMemo as u } from "react";
|
|
10
|
+
import d from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
|
|
11
|
+
import { useRenderSettings as f, useSdkStore as p } from "@plitzi/sdk-shared/store";
|
|
12
|
+
import { jsx as m, jsxs as h } from "react/jsx-runtime";
|
|
13
|
+
import g from "clsx";
|
|
14
14
|
//#region src/elements/internal/Page/Page.tsx
|
|
15
15
|
var _ = (e) => e.map((e) => ({
|
|
16
16
|
...e,
|
|
@@ -19,20 +19,20 @@ var _ = (e) => e.map((e) => ({
|
|
|
19
19
|
rootId: e.slot,
|
|
20
20
|
type: "layout"
|
|
21
21
|
}
|
|
22
|
-
})), v = (t, n, r) => t.reduce((t, { layout: r, slot:
|
|
23
|
-
bodies: { [
|
|
24
|
-
children: /* @__PURE__ */
|
|
22
|
+
})), v = (t, n, r) => t.reduce((t, { layout: r, slot: i, plitziElementLayout: o }) => /* @__PURE__ */ m(e, {
|
|
23
|
+
bodies: { [i]: t },
|
|
24
|
+
children: /* @__PURE__ */ m(a, { internalProps: {
|
|
25
25
|
id: r,
|
|
26
26
|
rootId: n,
|
|
27
27
|
plitziElementLayout: o
|
|
28
28
|
} })
|
|
29
|
-
},
|
|
30
|
-
let { id: w } =
|
|
29
|
+
}, i), r), y = ({ ref: e, seoEnabled: n = !1, seoPageTitle: a = "Title", seoPageDescription: y = "Description", className: b = "", layout: x = "", layoutContainer: S = "", children: C }) => {
|
|
30
|
+
let { id: w } = r(), { settings: { previewMode: T }, contexts: { InteractionsContext: E } } = d(), { interactionsManager: D } = c(E), { ownsHead: O } = f(), [[k, A]] = p(["navigation.routeParams", "navigation.queryParams"]), j = o(x, S), M = u(() => _(j), [j]), N = u(() => v(M, w, C), [
|
|
31
31
|
M,
|
|
32
32
|
w,
|
|
33
33
|
C
|
|
34
34
|
]);
|
|
35
|
-
return
|
|
35
|
+
return l(() => {
|
|
36
36
|
let e = !1;
|
|
37
37
|
return queueMicrotask(() => {
|
|
38
38
|
e || D.interactionTrigger(w, "onPageLoad", {
|
|
@@ -48,15 +48,16 @@ var _ = (e) => e.map((e) => ({
|
|
|
48
48
|
D,
|
|
49
49
|
A,
|
|
50
50
|
k
|
|
51
|
-
]), /* @__PURE__ */
|
|
51
|
+
]), /* @__PURE__ */ h(i, {
|
|
52
52
|
ref: e,
|
|
53
|
-
className:
|
|
54
|
-
interactionTriggers:
|
|
55
|
-
children: [
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
53
|
+
className: g("plitzi-component__page", b),
|
|
54
|
+
interactionTriggers: t.triggers,
|
|
55
|
+
children: [n && T && O && /* @__PURE__ */ m(s, {
|
|
56
|
+
pageId: w,
|
|
57
|
+
title: a,
|
|
58
|
+
description: y
|
|
59
|
+
}), N]
|
|
59
60
|
});
|
|
60
|
-
}, b =
|
|
61
|
+
}, b = n(y);
|
|
61
62
|
//#endregion
|
|
62
63
|
export { y as Page, b as default };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export type PageHeadProps = {
|
|
2
|
+
pageId: string;
|
|
3
|
+
title?: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* The page's title and description in the head: its words, or its templates read against the answers of its server
|
|
8
|
+
* providers — `rsc.data`, what the server wrote the HTML's head from, and what a navigation fetches before it lands —
|
|
9
|
+
* so the tab says the record a detail page shows, on arrival and after every move.
|
|
10
|
+
*/
|
|
11
|
+
declare const PageHead: ({ pageId, title, description }: PageHeadProps) => import('react').JSX.Element;
|
|
12
|
+
export default PageHead;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { useMemo as e } from "react";
|
|
2
|
+
import { useCommonStore as t } from "@plitzi/sdk-shared/store";
|
|
3
|
+
import { isRecord as n } from "@plitzi/sdk-shared/helpers/isRecord";
|
|
4
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
5
|
+
import { Helmet as a } from "@dr.pogodin/react-helmet";
|
|
6
|
+
import { collectServerElements as o, pageSeoText as s, pageServerContext as c } from "@plitzi/sdk-shared/schema/serverElements";
|
|
7
|
+
//#region src/elements/internal/Page/PageHead.tsx
|
|
8
|
+
var l = ({ pageId: l, title: u, description: d }) => {
|
|
9
|
+
let [[f, p, m, h]] = t([
|
|
10
|
+
"schema.flat",
|
|
11
|
+
"rsc.data",
|
|
12
|
+
"navigation.routeParams",
|
|
13
|
+
"navigation.queryParams"
|
|
14
|
+
]), g = e(() => n(f) ? o({ flat: f }, l) : [], [f, l]), _ = e(() => c(g, p ?? {}, {
|
|
15
|
+
routeParams: m,
|
|
16
|
+
queryParams: h
|
|
17
|
+
}), [
|
|
18
|
+
g,
|
|
19
|
+
p,
|
|
20
|
+
m,
|
|
21
|
+
h
|
|
22
|
+
]), v = s(u, _), y = s(d, _);
|
|
23
|
+
return /* @__PURE__ */ i(a, { children: [!!v && /* @__PURE__ */ r("title", { children: v }), !!y && /* @__PURE__ */ r("meta", {
|
|
24
|
+
name: "description",
|
|
25
|
+
content: y
|
|
26
|
+
})] });
|
|
27
|
+
};
|
|
28
|
+
//#endregion
|
|
29
|
+
export { l as default };
|
|
@@ -4,6 +4,7 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
|
|
|
4
4
|
export type PageAttributes = AuthorableAttributes<PageProps>;
|
|
5
5
|
declare const declaration: {
|
|
6
6
|
readonly type: "page";
|
|
7
|
+
readonly serverTemplates: readonly ["seoPageTitle", "seoPageDescription", "notFound"];
|
|
7
8
|
readonly triggers: {
|
|
8
9
|
readonly onPageLoad: {
|
|
9
10
|
readonly action: "onPageLoad";
|
|
@@ -84,6 +85,7 @@ declare const declaration: {
|
|
|
84
85
|
};
|
|
85
86
|
} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
|
|
86
87
|
layout?: string | undefined;
|
|
88
|
+
notFound?: string | undefined;
|
|
87
89
|
layoutContainer?: string | undefined;
|
|
88
90
|
seoEnabled?: boolean | undefined;
|
|
89
91
|
seoPageTitle?: string | undefined;
|
|
@@ -2,6 +2,11 @@ import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
|
|
|
2
2
|
//#region src/elements/internal/Page/declaration.ts
|
|
3
3
|
var t = e()({
|
|
4
4
|
type: "page",
|
|
5
|
+
serverTemplates: [
|
|
6
|
+
"seoPageTitle",
|
|
7
|
+
"seoPageDescription",
|
|
8
|
+
"notFound"
|
|
9
|
+
],
|
|
5
10
|
triggers: { onPageLoad: {
|
|
6
11
|
action: "onPageLoad",
|
|
7
12
|
title: "On Page Load",
|
|
@@ -3,6 +3,7 @@ declare const Page: {
|
|
|
3
3
|
displayName: string;
|
|
4
4
|
} & {
|
|
5
5
|
readonly type: "page";
|
|
6
|
+
readonly serverTemplates: readonly ["seoPageTitle", "seoPageDescription", "notFound"];
|
|
6
7
|
readonly triggers: {
|
|
7
8
|
readonly onPageLoad: {
|
|
8
9
|
readonly action: "onPageLoad";
|
|
@@ -83,6 +84,7 @@ declare const Page: {
|
|
|
83
84
|
};
|
|
84
85
|
} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
|
|
85
86
|
layout?: string | undefined;
|
|
87
|
+
notFound?: string | undefined;
|
|
86
88
|
layoutContainer?: string | undefined;
|
|
87
89
|
seoEnabled?: boolean | undefined;
|
|
88
90
|
seoPageTitle?: string | undefined;
|
|
@@ -82,6 +82,13 @@ export type ApiContainerProps = {
|
|
|
82
82
|
* flight. A text field in the builder, hence the string.
|
|
83
83
|
*/
|
|
84
84
|
refreshSeconds?: number | string;
|
|
85
|
+
/**
|
|
86
|
+
* With `runtime: 'server'`: when this provider's answer means the address shows nothing — `{{ source.found == false
|
|
87
|
+
* }}` — a template against the answer, as `visible` is. The page server reads it once the answer is in and sends the
|
|
88
|
+
* page with status 404, rendered as it is written (its own "not found" part). Read by the server alone: a browser
|
|
89
|
+
* provider's answer arrives after the status was sent.
|
|
90
|
+
*/
|
|
91
|
+
notFound?: string;
|
|
85
92
|
};
|
|
86
93
|
declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials, singleRecord, pagination, pageParam, renderWhileLoading, loadingSlot, cache, staleTime, gcTime, refreshSeconds, connector, action, input }: ApiContainerProps) => import('react').JSX.Element;
|
|
87
94
|
declare const _default: {
|