@plitzi/sdk-elements 0.38.8 → 0.38.9
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 +69 -0
- package/dist/Component/ComponentHelper.mjs +22 -13
- 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/declarations/index.d.ts +4 -1
- package/dist/elements/form/FormControl/FormControl.d.ts +1 -0
- package/dist/elements/form/FormControl/FormControl.mjs +1 -1
- 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 +2 -2
- package/dist/elements/form/FormControl/index.d.ts +1 -1
- package/dist/elements/provider/ApiContainer/ApiContainer.d.ts +7 -0
- package/dist/elements/provider/ApiContainer/declaration.d.ts +1 -0
- package/dist/elements/provider/ApiContainer/declaration.mjs +1 -1
- package/dist/elements/provider/ApiContainer/index.d.ts +1 -0
- 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 +17 -16
- package/dist/index.d.ts +4 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,74 @@
|
|
|
1
1
|
# @plitzi/sdk-elements
|
|
2
2
|
|
|
3
|
+
## 0.38.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 64f4cd6: - **`unusedPort()`** (`@plitzi/sdk-server`): a port the system has just handed out, for a test to listen on. The
|
|
8
|
+
package's own tests and `@plitzi/sdk-mcp`'s listened on fixed ports in the ephemeral range (393xx), which any
|
|
9
|
+
outgoing connection of a test running beside them could take: CI failed with `EADDRINUSE` on runs with nothing
|
|
10
|
+
wrong. Every one now listens on a port the system gives it.
|
|
11
|
+
- **Brotli at quality 5** (`@plitzi/sdk-server`): `compression.brotliQuality`, for a page rendered for one request, is
|
|
12
|
+
5 (was 2). At 2 a 220 KB page came out larger than gzip — 36 KB against 31 — and at 5 it is 29 KB, for the CPU gzip
|
|
13
|
+
spends; on half a core ~0.1 ms a page.
|
|
14
|
+
- **`verify` checks the pages for signed-in visitors** (`@plitzi/cli`): a page that sends the browser to sign in is
|
|
15
|
+
checked again signed in as the account `.env` names — `PLITZI_CHECK_USER`, `PLITZI_CHECK_PASSWORD` (the environment
|
|
16
|
+
wins over `.env`). With none named, `verify` says how. `page check --as` reads the password from `.env` too, and
|
|
17
|
+
`page check` takes several pages, in one browser.
|
|
18
|
+
- **An address that shows nothing answers 404** (`@plitzi/sdk-shared`, `@plitzi/plitzi-sdk`, `@plitzi/sdk-server`):
|
|
19
|
+
one no page answers was sent to the home page with a 302 — every typo read as the home page. A page whose slug is
|
|
20
|
+
`'*'` is now the space's page for it, sent with status 404 (a folder may have its own; the deepest wins), and a page
|
|
21
|
+
gated off by a flag shows it too. Never kept in the page cache: an address asked for at random filled it. Only a slug
|
|
22
|
+
that IS `'*'`: a page answering a subtree by its own (`spaces/:spaceId/update/*`) stays a page like any other.
|
|
23
|
+
- **`authorSpace` gives a space with no `'*'` page a plain one** (`@plitzi/sdk-authoring`), in the home page's layout,
|
|
24
|
+
and says so: suggestion `not-found-page`. The project templates carry their own.
|
|
25
|
+
- **`notFound` on a server provider** (`@plitzi/sdk-elements`, `@plitzi/sdk-server`): an expression against its answer
|
|
26
|
+
(`{{ source.found == false }}`); when it is true the page is sent with status 404, rendered as written. Refused on a
|
|
27
|
+
browser provider (`not-found-in-browser`) and when it is not one expression (`not-found-not-a-template`).
|
|
28
|
+
- **`page check` and `verify` know a page sent with 404** (`@plitzi/cli`): it is said, not failed; the space's `'*'`
|
|
29
|
+
page is checked at an address no page has, and fails if it is not sent with 404.
|
|
30
|
+
- **A form field draws no background of its own** (`@plitzi/sdk-elements`): the `<input>` inside a form control's box
|
|
31
|
+
(`field`) took `background-color: inherit`, and painted a translucent box colour a second time — a darker box inside
|
|
32
|
+
the padding (Tremor's search). It is `transparent`: the box shows through it.
|
|
33
|
+
- **`space lint` offers `quiet` only where there is an element to put it on** (`@plitzi/cli`): a suggestion about what
|
|
34
|
+
the space lacks — `not-found-page` — is answered by writing it.
|
|
35
|
+
- **`feedback --previous`** (`@plitzi/cli`): the brief says what to do when an earlier report's link no longer opens —
|
|
36
|
+
say so, and ask the person for the highest id it had.
|
|
37
|
+
- **`start:prod` runs in production by itself** (`@plitzi/cli`): `NODE_ENV=production node …`. Without the variable a
|
|
38
|
+
deployed project was a development server — dev tools on, and every public action answering its `steps` and `trace`
|
|
39
|
+
(each step's result, what the `output` was meant to leave out). `doctor` says a `start:prod` that does not
|
|
40
|
+
(`start-prod-not-production`); `plitzi upgrade --write` rewrites the script.
|
|
41
|
+
- **A project's `ActionRefusal` reaches the flow** (`@plitzi/sdk-server`): a functions bundle carries its own copy of the
|
|
42
|
+
class, so `instanceof` never knew it and the run lost its reason (`{{ x.error }}` empty). Told apart by name now.
|
|
43
|
+
- **Plugins are not remounted after hydration** (`@plitzi/sdk-elements`): the registry wrapped each plugin again when
|
|
44
|
+
the host handed it over again, a new component type every time — the server's HTML thrown away, entrances replayed,
|
|
45
|
+
effects run twice. Each plugin component is wrapped once.
|
|
46
|
+
- **`start:dev` survives a space that does not author** (`@plitzi/sdk-server`): a restart while the space had an error
|
|
47
|
+
died, and fixing the space woke nothing. It comes up answering every page with what is wrong (503), and loads the
|
|
48
|
+
space the first time a save authors.
|
|
49
|
+
- **`page check` sees what is cut off at the screen's edge** (`@plitzi/sdk-authoring`, `@plitzi/cli`): a link or words an
|
|
50
|
+
ancestor hides past the viewport, which no sideways scroll shows (`cut-off`).
|
|
51
|
+
- **`page shot --click <element...> --sheet`** (`@plitzi/cli`): elements clicked in order — a name or a CSS selector,
|
|
52
|
+
inside a plugin too — pictured after each (`--frames`/`--every`), with how much changed, and every picture on one
|
|
53
|
+
contact sheet. The dev tools' badge is no longer in a picture: its shadow root is marked (`@plitzi/sdk-dev-tools`).
|
|
54
|
+
- **`formControl` is optional unless it says `required: true`** (`@plitzi/sdk-elements`), as an HTML field is. A field
|
|
55
|
+
left without `required` in an older space was required, and is not now.
|
|
56
|
+
- **`text({ decorative })`, `list({ label })`** (`@plitzi/sdk-elements`); **`writing-mode`, `text-orientation`** in the
|
|
57
|
+
CSS vocabulary (`@plitzi/sdk-shared`).
|
|
58
|
+
- **`unused-token` reads the plugins' stylesheets** (`@plitzi/sdk-authoring`): `authorSpace`'s `stylesheets`, which
|
|
59
|
+
`projectAuthoring` fills with every `.css` under `src/plugins/` — a token only a plugin used was said to be unused.
|
|
60
|
+
- **`id-taken` on a provider placed on two pages points at the layout they share** (`@plitzi/sdk-authoring`), not at
|
|
61
|
+
`scope()`, which renamed its source and every template reading it.
|
|
62
|
+
- **The welcome template's tokens keep their names** (`@plitzi/sdk-authoring`): `satisfies`, not an annotation, so
|
|
63
|
+
`tokens(variables).card` typechecks as the cheatsheet teaches.
|
|
64
|
+
- Updated dependencies [64f4cd6]
|
|
65
|
+
- @plitzi/sdk-shared@0.38.9
|
|
66
|
+
- @plitzi/sdk-navigation@0.38.9
|
|
67
|
+
- @plitzi/sdk-auth@0.38.9
|
|
68
|
+
- @plitzi/sdk-event-bridge@0.38.9
|
|
69
|
+
- @plitzi/sdk-interactions@0.38.9
|
|
70
|
+
- @plitzi/sdk-schema@0.38.9
|
|
71
|
+
|
|
3
72
|
## 0.38.8
|
|
4
73
|
|
|
5
74
|
### Patch Changes
|
|
@@ -3,8 +3,8 @@ import t from "../Element/hocs/withElement.mjs";
|
|
|
3
3
|
//#region src/Component/ComponentHelper.ts
|
|
4
4
|
var n = /* @__PURE__ */ e({
|
|
5
5
|
getPlugins: () => r,
|
|
6
|
-
nestedInject: () =>
|
|
7
|
-
processLocalCustomPlugins: () =>
|
|
6
|
+
nestedInject: () => s,
|
|
7
|
+
processLocalCustomPlugins: () => c,
|
|
8
8
|
processLocalPlugins: () => i
|
|
9
9
|
}), r = (e) => {
|
|
10
10
|
let t = {};
|
|
@@ -19,20 +19,29 @@ var n = /* @__PURE__ */ e({
|
|
|
19
19
|
return e && Object.values(e).forEach((e) => {
|
|
20
20
|
e.type && Object.assign(t, r(e));
|
|
21
21
|
}), t;
|
|
22
|
-
}, a =
|
|
22
|
+
}, a = {
|
|
23
|
+
local: /* @__PURE__ */ new WeakMap(),
|
|
24
|
+
"local-custom": /* @__PURE__ */ new WeakMap(),
|
|
25
|
+
remote: /* @__PURE__ */ new WeakMap()
|
|
26
|
+
}, o = (e, n) => {
|
|
27
|
+
let r = a[n].get(e);
|
|
28
|
+
if (r) return r;
|
|
29
|
+
let i = t(e);
|
|
30
|
+
return a[n].set(e, i), i;
|
|
31
|
+
}, s = (e, t) => {
|
|
23
32
|
if (!e) return {};
|
|
24
|
-
let r = {};
|
|
25
|
-
return Object.keys(e).forEach((i) => {
|
|
26
|
-
let o = e[i], { version: s, pluginSettings: c, initialItems: l, plugins: u, extraProps: d } = o;
|
|
27
|
-
r[i] = t(o), r[i].origin = n, r[i].version = s, r[i].type = i, r[i].initialItems = l, r[i].pluginSettings = c, r[i].extraProps = d, r[i].plugins = a(u, n);
|
|
28
|
-
}), r;
|
|
29
|
-
}, o = (e) => {
|
|
30
33
|
let n = {};
|
|
34
|
+
return Object.keys(e).forEach((r) => {
|
|
35
|
+
let i = e[r], { version: a, pluginSettings: c, initialItems: l, plugins: u, extraProps: d } = i;
|
|
36
|
+
n[r] = o(i, t), n[r].origin = t, n[r].version = a, n[r].type = r, n[r].initialItems = l, n[r].pluginSettings = c, n[r].extraProps = d, n[r].plugins = s(u, t);
|
|
37
|
+
}), n;
|
|
38
|
+
}, c = (e) => {
|
|
39
|
+
let t = {};
|
|
31
40
|
return e && Object.values(e).forEach((e) => {
|
|
32
41
|
if (!e.type) return;
|
|
33
|
-
let { type:
|
|
34
|
-
p.version =
|
|
35
|
-
}),
|
|
42
|
+
let { type: n, pluginSettings: i, version: a, initialItems: c, plugins: l, assets: u, content: d, extraProps: f } = e, p = o(e, "local-custom");
|
|
43
|
+
p.version = a, p.type = n, p.assets = u, p.initialItems = c, p.pluginSettings = i, p.origin = "local-custom", p.content = d, p.extraProps = f, p.plugins = s(l, "local-custom"), Object.assign(t, r(p));
|
|
44
|
+
}), t;
|
|
36
45
|
};
|
|
37
46
|
//#endregion
|
|
38
|
-
export { n as ComponentHelper_exports, r as getPlugins,
|
|
47
|
+
export { n as ComponentHelper_exports, r as getPlugins, s as nestedInject, c as processLocalCustomPlugins, i as processLocalPlugins };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
type SettingsProps = {
|
|
2
2
|
content?: string;
|
|
3
|
+
decorative?: boolean;
|
|
3
4
|
onUpdate?: (key: string, value: string | boolean | number) => void;
|
|
4
5
|
};
|
|
5
|
-
declare const Settings: ({ content, onUpdate }: SettingsProps) => import('react').JSX.Element;
|
|
6
|
+
declare const Settings: ({ content, decorative, onUpdate }: SettingsProps) => import('react').JSX.Element;
|
|
6
7
|
export default Settings;
|
|
@@ -1,19 +1,25 @@
|
|
|
1
1
|
import { useCallback as e } from "react";
|
|
2
|
-
import { jsx as t } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
2
|
+
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
3
|
+
import r from "@plitzi/plitzi-ui/Checkbox";
|
|
4
|
+
import i from "@plitzi/plitzi-ui/TextArea";
|
|
4
5
|
//#region src/elements/basic/Text/Settings.tsx
|
|
5
|
-
var
|
|
6
|
-
let
|
|
7
|
-
return /* @__PURE__ */
|
|
6
|
+
var a = ({ content: a = "Text", decorative: o = !1, onUpdate: s }) => {
|
|
7
|
+
let c = e((e) => s?.("content", e), [s]), l = e((e) => s?.("decorative", e.target.checked), [s]);
|
|
8
|
+
return /* @__PURE__ */ n("div", {
|
|
8
9
|
className: "flex h-full flex-col gap-4 py-2",
|
|
9
|
-
children: /* @__PURE__ */ t(
|
|
10
|
-
value:
|
|
10
|
+
children: [/* @__PURE__ */ t(i, {
|
|
11
|
+
value: a,
|
|
11
12
|
label: "Content",
|
|
12
13
|
className: "h-full",
|
|
13
14
|
size: "xs",
|
|
14
|
-
onChange:
|
|
15
|
-
})
|
|
15
|
+
onChange: c
|
|
16
|
+
}), /* @__PURE__ */ t(r, {
|
|
17
|
+
checked: o,
|
|
18
|
+
label: "Decorative (hidden from screen readers)",
|
|
19
|
+
onChange: l,
|
|
20
|
+
size: "xs"
|
|
21
|
+
})]
|
|
16
22
|
});
|
|
17
23
|
};
|
|
18
24
|
//#endregion
|
|
19
|
-
export {
|
|
25
|
+
export { a as default };
|
|
@@ -8,8 +8,10 @@ export type TextProps = {
|
|
|
8
8
|
* may not say it, so nothing only it says should matter.
|
|
9
9
|
*/
|
|
10
10
|
title?: string;
|
|
11
|
+
/** Words drawn for the look alone — a seal, a mark — that a screen reader skips, as a decorative container is. */
|
|
12
|
+
decorative?: boolean;
|
|
11
13
|
};
|
|
12
|
-
declare const Text: ({ ref, content, className, title }: TextProps) => import('react').JSX.Element;
|
|
14
|
+
declare const Text: ({ ref, content, className, title, decorative }: TextProps) => import('react').JSX.Element;
|
|
13
15
|
declare const _default: {
|
|
14
16
|
(props: import('../../../Element/hocs/withElement').WithElementProps<TextProps>): import('react').JSX.Element;
|
|
15
17
|
displayName: string;
|
|
@@ -7,16 +7,17 @@ import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
|
7
7
|
import l from "clsx";
|
|
8
8
|
import u from "@plitzi/plitzi-ui/ContentEditable";
|
|
9
9
|
//#region src/elements/basic/Text/Text.tsx
|
|
10
|
-
var d = ({ ref: e, content: d = "Text", className: f = "", title: p = "" }) => {
|
|
11
|
-
let { id:
|
|
10
|
+
var d = ({ ref: e, content: d = "Text", className: f = "", title: p = "", decorative: m = !1 }) => {
|
|
11
|
+
let { id: h } = t(), { settings: { previewMode: g }, contexts: { BuilderContext: _ } } = o(), v = _ ? r(_) : void 0, y = a(() => typeof d != "string" && typeof d != "number" ? JSON.stringify(d) : !d && d !== "" && !g ? "Text" : typeof d == "number" ? `${d}` : d, [d, g]), b = i((e) => v?.updateElement(h, "content", e), [v, h]);
|
|
12
12
|
return /* @__PURE__ */ c(n, {
|
|
13
13
|
ref: e,
|
|
14
14
|
className: l("plitzi-component__text", f),
|
|
15
15
|
title: p || void 0,
|
|
16
|
-
|
|
16
|
+
...m ? { "aria-hidden": !0 } : {},
|
|
17
|
+
children: [g && y, !g && /* @__PURE__ */ s(u, {
|
|
17
18
|
className: "focus-visible:outline-hidden",
|
|
18
|
-
value:
|
|
19
|
-
onChange:
|
|
19
|
+
value: y,
|
|
20
|
+
onChange: b,
|
|
20
21
|
openMode: "doubleClick"
|
|
21
22
|
})]
|
|
22
23
|
});
|
|
@@ -209,6 +209,7 @@ export declare const elementDeclarations: {
|
|
|
209
209
|
method?: "get" | "post" | "put" | "delete" | "patch" | undefined;
|
|
210
210
|
resource?: string | undefined;
|
|
211
211
|
headers?: Record<string, string> | undefined;
|
|
212
|
+
notFound?: string | undefined;
|
|
212
213
|
subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "" | undefined;
|
|
213
214
|
query?: string | undefined;
|
|
214
215
|
accessToken?: string | undefined;
|
|
@@ -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;
|
|
@@ -4250,6 +4252,7 @@ export declare const elementDeclarations: {
|
|
|
4250
4252
|
} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
|
|
4251
4253
|
title?: string | undefined;
|
|
4252
4254
|
content?: string | number | undefined;
|
|
4255
|
+
decorative?: boolean | undefined;
|
|
4253
4256
|
}>>;
|
|
4254
4257
|
readonly ThemeToggle: {
|
|
4255
4258
|
readonly type: "themeToggle";
|
|
@@ -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
|
|
@@ -17,7 +17,7 @@ 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: e, 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 = !
|
|
20
|
+
var b = ({ ref: e, 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
21
|
let { id: I, rootId: L, visible: R, definition: { styleSelectors: z } } = t(), { 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;
|
|
@@ -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: "",
|
|
@@ -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: "";
|
|
@@ -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: {
|
|
@@ -172,6 +172,7 @@ declare const declaration: {
|
|
|
172
172
|
method?: "get" | "post" | "put" | "delete" | "patch" | undefined;
|
|
173
173
|
resource?: string | undefined;
|
|
174
174
|
headers?: Record<string, string> | undefined;
|
|
175
|
+
notFound?: string | undefined;
|
|
175
176
|
subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "" | undefined;
|
|
176
177
|
query?: string | undefined;
|
|
177
178
|
accessToken?: string | undefined;
|
|
@@ -141,7 +141,7 @@ var n = e()({
|
|
|
141
141
|
definition: {
|
|
142
142
|
label: "Api Container",
|
|
143
143
|
type: "apiContainer",
|
|
144
|
-
description: "Fetches data from a backend HTTP API (its `query`/`method`/`credentials`) and exposes the response as a data source ITS DESCENDANTS bind to (source `apiContainer_<id>.data`; only elements inside it can consume it). This is how you get backend data into the frontend. Its `mockData` prop is builder-only sample data — the published runtime fetches the real `query`, so always set a real query for production. With `cache: true` a browser request is kept for `staleTime` seconds (default 30) and shared with every provider asking the same thing; it is off unless set. A flow refreshes it with `performQuery` or the global `invalidateQueries` step, and `refreshSeconds` makes it ask again on its own every N seconds (either runtime; paused while the tab is hidden) — the way to keep a queue, feed or status board current without a plugin. Its `subType` (container tag) is empty by default, and then it renders NO element of its own: its children lay out directly in its parent, and any class, variant or style binding on it applies to nothing. To style the provider itself give it a tag (`subType: \"div\"`, `section`, …); otherwise style its parent or a child.",
|
|
144
|
+
description: "Fetches data from a backend HTTP API (its `query`/`method`/`credentials`) and exposes the response as a data source ITS DESCENDANTS bind to (source `apiContainer_<id>.data`; only elements inside it can consume it). This is how you get backend data into the frontend. Its `mockData` prop is builder-only sample data — the published runtime fetches the real `query`, so always set a real query for production. With `cache: true` a browser request is kept for `staleTime` seconds (default 30) and shared with every provider asking the same thing; it is off unless set. A flow refreshes it with `performQuery` or the global `invalidateQueries` step, and `refreshSeconds` makes it ask again on its own every N seconds (either runtime; paused while the tab is hidden) — the way to keep a queue, feed or status board current without a plugin. A server provider (`runtime: \"server\"`) whose answer means the address shows nothing — a record not found — says so in `notFound`, a template against its answer (`{{ source.found == false }}`): the page is sent with status 404, rendered as written. Its `subType` (container tag) is empty by default, and then it renders NO element of its own: its children lay out directly in its parent, and any class, variant or style binding on it applies to nothing. To style the provider itself give it a tag (`subType: \"div\"`, `section`, …); otherwise style its parent or a child.",
|
|
145
145
|
items: [],
|
|
146
146
|
bindings: {},
|
|
147
147
|
styleSelectors: { base: "" },
|
|
@@ -171,6 +171,7 @@ declare const ApiContainer: {
|
|
|
171
171
|
method?: "get" | "post" | "put" | "delete" | "patch" | undefined;
|
|
172
172
|
resource?: string | undefined;
|
|
173
173
|
headers?: Record<string, string> | undefined;
|
|
174
|
+
notFound?: string | undefined;
|
|
174
175
|
subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "" | undefined;
|
|
175
176
|
query?: string | undefined;
|
|
176
177
|
accessToken?: string | undefined;
|
|
@@ -11,8 +11,10 @@ export type ListProps<T = unknown> = {
|
|
|
11
11
|
* filtered or reordered, and mounts again when its item changes. Left out: the item's `id`, else its position.
|
|
12
12
|
*/
|
|
13
13
|
itemKey?: string;
|
|
14
|
+
/** What a screen reader calls the list — a group of options, a set of results — said before its rows. */
|
|
15
|
+
label?: string;
|
|
14
16
|
};
|
|
15
|
-
declare const List: ({ ref, className, subType, children, items, source, itemKey }: ListProps) => import('react').JSX.Element;
|
|
17
|
+
declare const List: ({ ref, className, subType, children, items, source, itemKey, label }: ListProps) => import('react').JSX.Element;
|
|
16
18
|
declare const _default: {
|
|
17
19
|
(props: import('../../../Element/hocs/withElement').WithElementProps<ListProps<unknown>>): import('react').JSX.Element;
|
|
18
20
|
displayName: string;
|
|
@@ -3,7 +3,7 @@ import t from "./modes/ListBasic.mjs";
|
|
|
3
3
|
import n from "./modes/ListControlled/index.mjs";
|
|
4
4
|
import { jsx as r } from "react/jsx-runtime";
|
|
5
5
|
//#region src/elements/structure/List/List.tsx
|
|
6
|
-
var i = ({ ref: e, className: i = "", subType: a = "ul", children: o, items: s = [], source: c = "none", itemKey: l }) => {
|
|
6
|
+
var i = ({ ref: e, className: i = "", subType: a = "ul", children: o, items: s = [], source: c = "none", itemKey: l, label: u = "" }) => {
|
|
7
7
|
switch (c) {
|
|
8
8
|
case "controlled": return /* @__PURE__ */ r(n, {
|
|
9
9
|
ref: e,
|
|
@@ -11,12 +11,14 @@ var i = ({ ref: e, className: i = "", subType: a = "ul", children: o, items: s =
|
|
|
11
11
|
subType: a,
|
|
12
12
|
items: s,
|
|
13
13
|
itemKey: l,
|
|
14
|
+
label: u,
|
|
14
15
|
children: o
|
|
15
16
|
});
|
|
16
17
|
default: return /* @__PURE__ */ r(t, {
|
|
17
18
|
ref: e,
|
|
18
19
|
className: i,
|
|
19
20
|
subType: a,
|
|
21
|
+
label: u,
|
|
20
22
|
children: o
|
|
21
23
|
});
|
|
22
24
|
}
|
|
@@ -2,7 +2,8 @@ type SettingsProps = {
|
|
|
2
2
|
subType?: 'ul' | 'ol';
|
|
3
3
|
source?: 'none' | 'controlled';
|
|
4
4
|
itemKey?: string;
|
|
5
|
+
label?: string;
|
|
5
6
|
onUpdate?: (key: string, value: string | boolean | number) => void;
|
|
6
7
|
};
|
|
7
|
-
declare const Settings: ({ subType, source, itemKey, onUpdate }: SettingsProps) => import('react').JSX.Element;
|
|
8
|
+
declare const Settings: ({ subType, source, itemKey, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
|
|
8
9
|
export default Settings;
|
|
@@ -3,15 +3,15 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
|
3
3
|
import r from "@plitzi/plitzi-ui/Input";
|
|
4
4
|
import i from "@plitzi/plitzi-ui/Select";
|
|
5
5
|
//#region src/elements/structure/List/Settings.tsx
|
|
6
|
-
var a = ({ subType: a = "ul", source: o = "none", itemKey: s = "",
|
|
7
|
-
let
|
|
6
|
+
var a = ({ subType: a = "ul", source: o = "none", itemKey: s = "", label: c = "", onUpdate: l }) => {
|
|
7
|
+
let u = e((e) => (t) => l?.(e, t), [l]);
|
|
8
8
|
return /* @__PURE__ */ n("div", {
|
|
9
9
|
className: "flex flex-col gap-4 py-2",
|
|
10
10
|
children: [
|
|
11
11
|
/* @__PURE__ */ n(i, {
|
|
12
12
|
label: "Source",
|
|
13
13
|
value: o,
|
|
14
|
-
onChange:
|
|
14
|
+
onChange: u("source"),
|
|
15
15
|
size: "xs",
|
|
16
16
|
children: [/* @__PURE__ */ t("option", {
|
|
17
17
|
value: "none",
|
|
@@ -27,12 +27,12 @@ var a = ({ subType: a = "ul", source: o = "none", itemKey: s = "", onUpdate: c }
|
|
|
27
27
|
placeholder: "id",
|
|
28
28
|
value: s,
|
|
29
29
|
title: "The field of each item that names it, so a row stays with its item when the list is filtered.",
|
|
30
|
-
onChange:
|
|
30
|
+
onChange: u("itemKey")
|
|
31
31
|
}),
|
|
32
32
|
/* @__PURE__ */ n(i, {
|
|
33
33
|
label: "List Type",
|
|
34
34
|
value: a,
|
|
35
|
-
onChange:
|
|
35
|
+
onChange: u("subType"),
|
|
36
36
|
size: "xs",
|
|
37
37
|
children: [/* @__PURE__ */ t("option", {
|
|
38
38
|
value: "ul",
|
|
@@ -41,6 +41,13 @@ var a = ({ subType: a = "ul", source: o = "none", itemKey: s = "", onUpdate: c }
|
|
|
41
41
|
value: "ol",
|
|
42
42
|
children: "Ordered"
|
|
43
43
|
})]
|
|
44
|
+
}),
|
|
45
|
+
/* @__PURE__ */ t(r, {
|
|
46
|
+
value: c,
|
|
47
|
+
label: "List Name",
|
|
48
|
+
placeholder: "e.g. Kinds of capsule, Search results",
|
|
49
|
+
onChange: u("label"),
|
|
50
|
+
size: "xs"
|
|
44
51
|
})
|
|
45
52
|
]
|
|
46
53
|
});
|
|
@@ -92,6 +92,7 @@ declare const declaration: {
|
|
|
92
92
|
readonly initialItems: readonly ["listItem", "listItem", "listItem"];
|
|
93
93
|
} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
|
|
94
94
|
source?: "none" | "controlled" | undefined;
|
|
95
|
+
label?: string | undefined;
|
|
95
96
|
items?: unknown[] | undefined;
|
|
96
97
|
subType?: "ul" | "ol" | undefined;
|
|
97
98
|
itemKey?: string | undefined;
|
|
@@ -143,6 +143,7 @@ declare const List: {
|
|
|
143
143
|
initialItems: readonly ["listItem", "listItem", "listItem"];
|
|
144
144
|
__attributes: Partial<{
|
|
145
145
|
source?: "none" | "controlled" | undefined;
|
|
146
|
+
label?: string | undefined;
|
|
146
147
|
items?: unknown[] | undefined;
|
|
147
148
|
subType?: "ul" | "ol" | undefined;
|
|
148
149
|
itemKey?: string | undefined;
|
|
@@ -4,6 +4,8 @@ export type ListBasicProps = {
|
|
|
4
4
|
className?: string;
|
|
5
5
|
subType?: 'ul' | 'ol';
|
|
6
6
|
children?: ReactNode;
|
|
7
|
+
/** The list's accessible name. */
|
|
8
|
+
label?: string;
|
|
7
9
|
};
|
|
8
|
-
declare const ListBasic: ({ ref, className, subType, children }: ListBasicProps) => import('react').JSX.Element;
|
|
10
|
+
declare const ListBasic: ({ ref, className, subType, children, label }: ListBasicProps) => import('react').JSX.Element;
|
|
9
11
|
export default ListBasic;
|
|
@@ -2,10 +2,11 @@ import { RootElement as e } from "../../../../Element/RootElement.mjs";
|
|
|
2
2
|
import { jsx as t } from "react/jsx-runtime";
|
|
3
3
|
import n from "clsx";
|
|
4
4
|
//#region src/elements/structure/List/modes/ListBasic.tsx
|
|
5
|
-
var r = ({ ref: r, className: i = "", subType: a = "ul", children: o }) => /* @__PURE__ */ t(e, {
|
|
5
|
+
var r = ({ ref: r, className: i = "", subType: a = "ul", children: o, label: s = "" }) => /* @__PURE__ */ t(e, {
|
|
6
6
|
ref: r,
|
|
7
7
|
tag: a,
|
|
8
8
|
className: n("plitzi-component__list", i),
|
|
9
|
+
"aria-label": s || void 0,
|
|
9
10
|
children: o
|
|
10
11
|
});
|
|
11
12
|
//#endregion
|
|
@@ -7,6 +7,8 @@ export type ListControlledProps<T = unknown> = {
|
|
|
7
7
|
children: ReactNode;
|
|
8
8
|
items: T[];
|
|
9
9
|
itemKey?: string;
|
|
10
|
+
/** The list's accessible name. */
|
|
11
|
+
label?: string;
|
|
10
12
|
};
|
|
11
|
-
declare const ListControlled: ({ ref, className, subType, children, items, itemKey }: ListControlledProps) => import('react').JSX.Element;
|
|
13
|
+
declare const ListControlled: ({ ref, className, subType, children, items, itemKey, label }: ListControlledProps) => import('react').JSX.Element;
|
|
12
14
|
export default ListControlled;
|
|
@@ -13,28 +13,29 @@ import m from "clsx";
|
|
|
13
13
|
import h from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
|
|
14
14
|
import g from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
|
|
15
15
|
//#region src/elements/structure/List/modes/ListControlled/ListControlled.tsx
|
|
16
|
-
var _ = ({ ref: _, className: v = "", subType: y = "ul", children: b, items: x = [], itemKey: S }) => {
|
|
17
|
-
let { id:
|
|
18
|
-
item: c(
|
|
16
|
+
var _ = ({ ref: _, className: v = "", subType: y = "ul", children: b, items: x = [], itemKey: S, label: C = "" }) => {
|
|
17
|
+
let { id: w, definition: { label: T } } = e(), E = h(i.sourceType, w), { settings: { previewMode: D } } = s(), O = o(() => Array.isArray(x) ? x : [], [x]), k = o(() => n(O, S), [O, S]), A = a(() => d({
|
|
18
|
+
item: c(O, "0", {}),
|
|
19
19
|
index: 0
|
|
20
20
|
}).reduce((e, t) => [...e, {
|
|
21
21
|
path: t,
|
|
22
22
|
name: t
|
|
23
|
-
}], []), [
|
|
23
|
+
}], []), [O]), j = o(() => E ? { runtime: { sources: { [E]: { items: O } } } } : u, [E, O]);
|
|
24
24
|
return g({
|
|
25
|
-
id:
|
|
26
|
-
source:
|
|
27
|
-
name:
|
|
28
|
-
fields:
|
|
25
|
+
id: w,
|
|
26
|
+
source: E,
|
|
27
|
+
name: T || `List - ${w}`,
|
|
28
|
+
fields: A
|
|
29
29
|
}), /* @__PURE__ */ p(t, {
|
|
30
30
|
ref: _,
|
|
31
31
|
tag: y,
|
|
32
|
-
|
|
32
|
+
"aria-label": C || void 0,
|
|
33
|
+
className: m("plitzi-component__controlled-list", v, { "controlled-list--build-mode": !D }),
|
|
33
34
|
children: [/* @__PURE__ */ f(l, {
|
|
34
35
|
inherit: "live",
|
|
35
|
-
name: `List:${
|
|
36
|
-
value:
|
|
37
|
-
children:
|
|
36
|
+
name: `List:${w}`,
|
|
37
|
+
value: j,
|
|
38
|
+
children: O.map((e, t) => !b || Array.isArray(b) && b.length === 0 ? /* @__PURE__ */ f("div", {
|
|
38
39
|
className: "plitzi-component__controlled-list-item controlled-list--empty",
|
|
39
40
|
children: /* @__PURE__ */ f("div", {
|
|
40
41
|
className: "controlled-list-item__counter",
|
|
@@ -42,12 +43,12 @@ var _ = ({ ref: _, className: v = "", subType: y = "ul", children: b, items: x =
|
|
|
42
43
|
})
|
|
43
44
|
}, t) : /* @__PURE__ */ f(r, {
|
|
44
45
|
index: t,
|
|
45
|
-
isTemplate: t !== 0 && !
|
|
46
|
+
isTemplate: t !== 0 && !D,
|
|
46
47
|
record: e,
|
|
47
|
-
source:
|
|
48
|
+
source: E,
|
|
48
49
|
children: b
|
|
49
|
-
},
|
|
50
|
-
}), !
|
|
50
|
+
}, k[t]))
|
|
51
|
+
}), !D && O.length === 0 && /* @__PURE__ */ f("div", {
|
|
51
52
|
className: "controlled-list controlled-list--empty",
|
|
52
53
|
children: "This list does not contain any items"
|
|
53
54
|
})]
|
package/dist/index.d.ts
CHANGED
|
@@ -2690,6 +2690,7 @@ export declare const defaultElements: {
|
|
|
2690
2690
|
} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
|
|
2691
2691
|
title?: string | undefined;
|
|
2692
2692
|
content?: string | number | undefined;
|
|
2693
|
+
decorative?: boolean | undefined;
|
|
2693
2694
|
}>>;
|
|
2694
2695
|
themeToggle: {
|
|
2695
2696
|
(props: import('./Element/hocs/withElement').WithElementProps<import('./elements/basic/ThemeToggle/ThemeToggle').ThemeToggleProps>): import('react').JSX.Element;
|
|
@@ -2963,6 +2964,7 @@ export declare const defaultElements: {
|
|
|
2963
2964
|
initialItems: readonly ["listItem", "listItem", "listItem"];
|
|
2964
2965
|
__attributes: Partial<{
|
|
2965
2966
|
source?: "none" | "controlled" | undefined;
|
|
2967
|
+
label?: string | undefined;
|
|
2966
2968
|
items?: unknown[] | undefined;
|
|
2967
2969
|
subType?: "ul" | "ol" | undefined;
|
|
2968
2970
|
itemKey?: string | undefined;
|
|
@@ -3470,7 +3472,7 @@ export declare const defaultElements: {
|
|
|
3470
3472
|
readonly autoFocus: false;
|
|
3471
3473
|
readonly disabled: false;
|
|
3472
3474
|
readonly options: readonly [];
|
|
3473
|
-
readonly required:
|
|
3475
|
+
readonly required: false;
|
|
3474
3476
|
readonly requiredMessage: "";
|
|
3475
3477
|
readonly minLength: 0;
|
|
3476
3478
|
readonly minLengthMessage: "";
|
|
@@ -4380,6 +4382,7 @@ export declare const defaultElements: {
|
|
|
4380
4382
|
method?: "get" | "post" | "put" | "delete" | "patch" | undefined;
|
|
4381
4383
|
resource?: string | undefined;
|
|
4382
4384
|
headers?: Record<string, string> | undefined;
|
|
4385
|
+
notFound?: string | undefined;
|
|
4383
4386
|
subType?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure" | "" | undefined;
|
|
4384
4387
|
query?: string | undefined;
|
|
4385
4388
|
accessToken?: string | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plitzi/sdk-elements",
|
|
3
|
-
"version": "0.38.
|
|
3
|
+
"version": "0.38.9",
|
|
4
4
|
"license": "AGPL-3.0",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -1371,12 +1371,12 @@
|
|
|
1371
1371
|
"@dr.pogodin/react-helmet": "^3.3.2",
|
|
1372
1372
|
"@plitzi/nexus": "^1.4.0",
|
|
1373
1373
|
"@plitzi/plitzi-ui": "^1.6.32",
|
|
1374
|
-
"@plitzi/sdk-auth": "0.38.
|
|
1375
|
-
"@plitzi/sdk-event-bridge": "0.38.
|
|
1376
|
-
"@plitzi/sdk-interactions": "0.38.
|
|
1377
|
-
"@plitzi/sdk-navigation": "0.38.
|
|
1378
|
-
"@plitzi/sdk-schema": "0.38.
|
|
1379
|
-
"@plitzi/sdk-shared": "0.38.
|
|
1374
|
+
"@plitzi/sdk-auth": "0.38.9",
|
|
1375
|
+
"@plitzi/sdk-event-bridge": "0.38.9",
|
|
1376
|
+
"@plitzi/sdk-interactions": "0.38.9",
|
|
1377
|
+
"@plitzi/sdk-navigation": "0.38.9",
|
|
1378
|
+
"@plitzi/sdk-schema": "0.38.9",
|
|
1379
|
+
"@plitzi/sdk-shared": "0.38.9",
|
|
1380
1380
|
"clsx": "^2.1.1",
|
|
1381
1381
|
"immer": "^11.1.21",
|
|
1382
1382
|
"react-markdown": "^10.1.0",
|