@pie-lib/config-ui 13.1.0-beta.8 → 14.0.0-next.35

package/dist/number-text-field.js

@@ -0,0 +1,122 @@
+import e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { jsx as r } from "react/jsx-runtime";
+import { isFinite as i } from "@pie-element/shared-lodash";
+import a from "debug";
+import o from "@mui/material/TextField";
+import s from "@mui/material/InputAdornment";
+//#region src/number-text-field.tsx
+var c = a("@pie-lib:config-ui:number-text-field"), l = n(o)(({ theme: e }) => ({
+	marginRight: e.spacing(1),
+	"& .MuiInputLabel-root": {
+		width: "auto",
+		minWidth: "max-content",
+		maxWidth: "none",
+		whiteSpace: "nowrap",
+		overflow: "visible",
+		transform: "translate(0, 8px) scale(0.75)",
+		transformOrigin: "top left",
+		position: "relative"
+	},
+	"& .MuiInputBase-root, & .MuiInput-root, & .MuiFilledInput-root, & .MuiOutlinedInput-root": {
+		height: "auto",
+		minHeight: "auto",
+		marginTop: 0
+	},
+	"& .MuiInputBase-input": {
+		height: "auto",
+		minHeight: "auto",
+		padding: "6px 0 7px"
+	}
+})), u = (e, t) => {
+	if (!i(e) && !i(t)) return 0;
+	if (!i(e) && i(t)) return t;
+	if (i(e)) return e;
+}, d = class extends e.Component {
+	static propTypes = {
+		disabled: t.bool,
+		className: t.string,
+		inputClassName: t.string,
+		onChange: t.func.isRequired,
+		value: t.number,
+		min: t.number,
+		max: t.number,
+		label: t.string,
+		suffix: t.string,
+		showErrorWhenOutsideRange: t.bool,
+		disableUnderline: t.bool,
+		variant: t.string
+	};
+	static defaultProps = { showErrorWhenOutsideRange: !1 };
+	constructor(e) {
+		super(e);
+		let t = this.clamp(e.value);
+		this.state = { value: t }, t !== e.value && this.props.onChange({}, t), this.onChange = this.onChange.bind(this);
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		let t = this.clamp(e.value, e.min, e.max);
+		this.setState({ value: t });
+	}
+	clamp(e, t = this.props.min, n = this.props.max) {
+		return i(e) ? (i(n) && (e = Math.min(e, n)), i(t) && (e = Math.max(e, t)), e) : u(t, n);
+	}
+	onBlur = (e) => {
+		let t = e.target.value, n = parseFloat(t);
+		c("rawNumber: ", n);
+		let r = this.clamp(n);
+		c("number: ", r), r !== this.state.value && (c("trigger update..."), this.setState({ value: r.toString() }, () => {
+			this.props.onChange(e, r);
+		}));
+	};
+	onChange(e) {
+		let t = e.target.value;
+		this.setState({ value: t });
+	}
+	errorMessage = () => {
+		let { min: e, max: t } = this.props;
+		if (e && t) return `The value must be between ${e} and ${t}`;
+		if (e) return `The value must be greater than ${e}`;
+		if (t) return `The value must be less than ${t}`;
+	};
+	getError = () => {
+		let { value: e } = this.state, t = parseFloat(e);
+		if (this.clamp(t) !== t) return this.errorMessage();
+	};
+	render() {
+		let { className: e, label: t, disabled: n, suffix: i, min: a, max: o, inputClassName: c, disableUnderline: u, showErrorWhenOutsideRange: d, variant: f } = this.props, p = d && this.getError();
+		return /* @__PURE__ */ r(l, {
+			variant: u ? "filled" : f || "standard",
+			inputRef: (e) => {
+				this.inputRef = e;
+			},
+			disabled: n,
+			label: t,
+			InputLabelProps: { shrink: !0 },
+			value: this.state.value,
+			error: !!p,
+			helperText: p,
+			onChange: this.onChange,
+			onBlur: this.onBlur,
+			onKeyDown: (e) => {
+				e.key === "Enter" && this.inputRef && this.inputRef.blur();
+			},
+			type: "number",
+			className: e,
+			slotProps: { input: {
+				endAdornment: i && /* @__PURE__ */ r(s, {
+					position: "end",
+					children: i
+				}),
+				className: c,
+				inputProps: {
+					min: a,
+					max: o
+				}
+			} },
+			margin: "normal"
+		});
+	}
+};
+//#endregion
+export { d as NumberTextField, d as default };

package/dist/radio-with-label.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-lib/packages/config-ui/src/radio-with-label.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const RadioWithLabel: {
+    ({ label, value, checked, onChange }: {
+        label: any;
+        value: any;
+        checked: any;
+        onChange: any;
+    }): React.JSX.Element;
+    propTypes: {
+        label: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        checked: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export default RadioWithLabel;

package/dist/radio-with-label.js

@@ -0,0 +1,27 @@
+import "react";
+import e from "prop-types";
+import { styled as t } from "@mui/material/styles";
+import { jsx as n } from "react/jsx-runtime";
+import { color as r } from "@pie-lib/render-ui";
+import i from "@mui/material/FormControlLabel";
+import a from "@mui/material/Radio";
+//#region src/radio-with-label.tsx
+var o = t(i)(() => ({ "& .MuiFormControlLabel-label": {
+	left: "-5px",
+	position: "relative"
+} })), s = t(a)(() => ({ color: `${r.tertiary()} !important` })), c = ({ label: e, value: t, checked: r, onChange: i }) => /* @__PURE__ */ n(o, {
+	value: t,
+	control: /* @__PURE__ */ n(s, {
+		checked: r,
+		onChange: i
+	}),
+	label: e
+});
+c.propTypes = {
+	label: e.string,
+	value: e.string,
+	checked: e.bool,
+	onChange: e.func
+};
+//#endregion
+export { c as default };

package/dist/settings/display-size.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @synced-from pie-lib/packages/config-ui/src/settings/display-size.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const DisplaySize: {
+    ({ size, label, onChange }: {
+        size: any;
+        label: any;
+        onChange: any;
+    }): React.JSX.Element;
+    propTypes: {
+        size: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            width: PropTypes.Validator<number>;
+            height: PropTypes.Validator<number>;
+        }>>>;
+        label: PropTypes.Validator<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export default DisplaySize;

package/dist/settings/display-size.js

@@ -0,0 +1,45 @@
+import { NumberTextField as e } from "../number-text-field.js";
+import "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "@mui/material/Typography";
+//#region src/settings/display-size.tsx
+var o = n("div")(({ theme: e }) => ({
+	display: "flex",
+	paddingTop: e.spacing(1)
+})), s = ({ size: t, label: n, onChange: s }) => {
+	let c = (e, n) => {
+		s({
+			...t,
+			[e]: n
+		});
+	};
+	return /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r(a, { children: n }), /* @__PURE__ */ i(o, { children: [/* @__PURE__ */ r(e, {
+		label: "Width",
+		type: "number",
+		variant: "outlined",
+		value: t.width,
+		min: 150,
+		max: 1e3,
+		onChange: (e, t) => c("width", t)
+	}), /* @__PURE__ */ r(e, {
+		label: "Height",
+		type: "number",
+		variant: "outlined",
+		min: 150,
+		max: 1e3,
+		value: t.height,
+		onChange: (e, t) => c("height", t)
+	})] })] });
+};
+s.propTypes = {
+	size: t.shape({
+		width: t.number.isRequired,
+		height: t.number.isRequired
+	}).isRequired,
+	label: t.string.isRequired,
+	onChange: t.func
+};
+//#endregion
+export { s as default };

package/dist/settings/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @synced-from pie-lib/packages/config-ui/src/settings/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import Panel from './panel.js';
+export { Panel };
+export declare const textField: (label: any, isConfigProperty?: boolean) => {
+    label: any;
+    type: string;
+    isConfigProperty: boolean;
+};
+export declare const toggle: (label: any, isConfigProperty?: boolean, disabled?: boolean) => {
+    type: string;
+    label: any;
+    isConfigProperty: boolean;
+    disabled: boolean;
+};
+export declare const radio: () => {
+    type: string;
+    label: any;
+    choices: any;
+    isConfigProperty: any;
+};
+export declare const dropdown: (label: any, choices: any, isConfigProperty?: boolean) => {
+    type: string;
+    label: any;
+    choices: any;
+    isConfigProperty: boolean;
+};
+export declare const numberField: (label: any, options: any, isConfigProperty?: boolean) => any;
+export declare const numberFields: (label: any, fields: any, isConfigProperty?: boolean) => {
+    type: string;
+    label: any;
+    fields: any;
+};
+export declare const checkbox: (label: any, settings: any, isConfigProperty?: boolean) => any;
+export declare const checkboxes: (label: any, choices: any, isConfigProperty?: boolean) => {
+    type: string;
+    label: any;
+    choices: any;
+};

package/dist/settings/index.js

@@ -0,0 +1,63 @@
+import { __exportAll as e } from "../_virtual/_rolldown/runtime.js";
+import { Panel as t } from "./panel.js";
+//#region src/settings/index.ts
+var n = /* @__PURE__ */ e({
+	Panel: () => t,
+	checkbox: () => u,
+	checkboxes: () => d,
+	dropdown: () => s,
+	numberField: () => c,
+	numberFields: () => l,
+	radio: () => o,
+	textField: () => r,
+	toggle: () => i
+}), r = (e, t = !0) => ({
+	label: e,
+	type: "textField",
+	isConfigProperty: t
+}), i = (e, t = !1, n = !1) => ({
+	type: "toggle",
+	label: e,
+	isConfigProperty: t,
+	disabled: n
+}), a = (e) => typeof e == "string" ? {
+	label: e,
+	value: e
+} : e, o = function() {
+	let [e, t, n = !1] = Array.prototype.slice.call(arguments);
+	return {
+		type: "radio",
+		label: e,
+		choices: t && t.map((e) => a(e)),
+		isConfigProperty: n
+	};
+}, s = (e, t, n = !1) => ({
+	type: "dropdown",
+	label: e,
+	choices: t,
+	isConfigProperty: n
+}), c = (e, t, n = !1) => ({
+	...t,
+	label: e,
+	type: "numberField",
+	isConfigProperty: n
+}), l = (e, t, n = !1) => (Object.keys(t).map((e) => {
+	t[e] = c(t[e].label, t[e], n);
+}), {
+	type: "numberFields",
+	label: e,
+	fields: t
+}), u = (e, t, n = !1) => ({
+	...t,
+	label: e,
+	type: "checkbox",
+	isConfigProperty: n
+}), d = (e, t, n = !1) => (Object.keys(t).map((e) => {
+	t[e] = u(t[e].label, t[e], n);
+}), {
+	type: "checkboxes",
+	label: e,
+	choices: t
+});
+//#endregion
+export { t as Panel, u as checkbox, d as checkboxes, s as dropdown, c as numberField, l as numberFields, o as radio, n as settings_exports, r as textField, i as toggle };

package/dist/settings/panel.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @synced-from pie-lib/packages/config-ui/src/settings/panel.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Panel extends React.Component {
+    static propTypes: {
+        model: PropTypes.Requireable<object>;
+        configuration: PropTypes.Requireable<object>;
+        groups: PropTypes.Requireable<object>;
+        onChangeModel: PropTypes.Requireable<(...args: any[]) => any>;
+        onChangeConfiguration: PropTypes.Requireable<(...args: any[]) => any>;
+        modal: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {
+        onChangeModel: () => void;
+        onChangeConfiguration: () => void;
+    };
+    change: any;
+    render(): React.JSX.Element;
+}
+export default Panel;

package/dist/settings/panel.js

@@ -0,0 +1,201 @@
+import e from "../checkbox.js";
+import { NumberTextField as t } from "../number-text-field.js";
+import { NChoice as n } from "../two-choice.js";
+import r from "./toggle.js";
+import i from "./settings-radio-label.js";
+import a from "react";
+import o from "prop-types";
+import { styled as s } from "@mui/material/styles";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { get as u, set as d } from "@pie-element/shared-lodash";
+import f from "@mui/material/Typography";
+import p from "@mui/material/Input";
+import m from "@mui/material/Select";
+import h from "@mui/material/MenuItem";
+import g from "debug";
+//#region src/settings/panel.tsx
+var _ = g("pie-lib:config-ui:settings:panel"), v = {
+	label: o.string,
+	value: o.string
+}, y = {
+	label: o.string,
+	value: o.string,
+	onChange: o.func
+}, b = ({ label: t, value: n, onChange: r }) => /* @__PURE__ */ c(e, {
+	checked: n,
+	label: t,
+	onChange: (e) => {
+		r(e.target.checked);
+	}
+});
+b.propTypes = {
+	label: o.string,
+	value: o.bool,
+	onChange: o.func
+};
+var x = s(n)(({ theme: e }) => ({
+	marginTop: e.spacing(.5),
+	paddingBottom: e.spacing(.5),
+	width: "100%",
+	"& > label": {
+		color: "rgba(0, 0, 0, 0.89)",
+		transform: "translate(0, 10px) scale(1)",
+		fontSize: "18px",
+		marginTop: e.spacing(2.5)
+	},
+	"& > div": { marginTop: e.spacing(2.5) }
+})), S = ({ label: e, value: t, onChange: n, choices: r }) => /* @__PURE__ */ c(x, {
+	direction: "horizontal",
+	customLabel: i,
+	value: t,
+	header: e,
+	opts: r,
+	onChange: n
+});
+S.propTypes = {
+	...y,
+	choices: o.arrayOf(o.shape(v))
+};
+var C = S, w = s("p")(({ theme: e }) => ({
+	margin: 0,
+	fontSize: e.typography.fontSize
+})), T = s(m)(({ theme: e }) => ({
+	marginTop: e.spacing(.5),
+	border: "2px solid lightgrey",
+	padding: `0 ${e.spacing(1)}`,
+	borderRadius: "4px"
+})), E = ({ label: e, value: t, onChange: n, choices: r = [] }) => {
+	let i = (e) => typeof e == "string" ? e : e.label, a = (e) => typeof e == "string" ? e : e.value;
+	return /* @__PURE__ */ l("div", { children: [e && /* @__PURE__ */ c(w, { children: e }), /* @__PURE__ */ c(T, {
+		value: t || r && r[0],
+		onChange: ({ target: e }) => n(e.value),
+		input: /* @__PURE__ */ c(p, { id: `dropdown-${e}` }),
+		disableUnderline: !0,
+		MenuProps: { transitionDuration: {
+			enter: 225,
+			exit: 195
+		} },
+		children: r.map((e, t) => /* @__PURE__ */ c(h, {
+			value: a(e),
+			children: i(e)
+		}, t))
+	})] });
+};
+E.propTypes = {
+	...y,
+	choices: o.arrayOf(o.string)
+};
+var D = s(f)(({ theme: e }) => ({
+	marginRight: e.spacing(3),
+	marginTop: e.spacing(1)
+})), O = ({ label: e }) => /* @__PURE__ */ c(D, { children: e }), k = s(t)(({ theme: e }) => ({
+	width: "35%",
+	marginRight: e.spacing(3),
+	marginTop: e.spacing(1),
+	"& .MuiInputBase-root": {
+		marginTop: e.spacing(.5),
+		border: "2px solid lightgrey",
+		borderRadius: "4px",
+		padding: `0 ${e.spacing(1)}`,
+		backgroundColor: "transparent"
+	}
+})), A = ({ label: e, value: t, onChange: n = () => {}, suffix: r, min: i, max: a }) => /* @__PURE__ */ c(k, {
+	variant: "standard",
+	label: e || "Label",
+	value: t,
+	max: a,
+	min: i,
+	onChange: (e, t) => n(t),
+	suffix: r,
+	showErrorWhenOutsideRange: !0,
+	disableUnderline: !0
+});
+A.propTypes = {
+	...y,
+	suffix: o.string,
+	min: o.number,
+	max: o.number,
+	value: o.number
+}, O.propTypes = { ...y };
+var j = ({ disabled: e, label: t, value: n, onChange: i }) => /* @__PURE__ */ c(r, {
+	label: t,
+	checked: !!n,
+	disabled: !!e,
+	toggle: i
+});
+j.propTypes = {
+	...y,
+	value: o.bool
+};
+var M = {
+	toggle: j,
+	radio: C,
+	dropdown: E,
+	numberField: A,
+	checkbox: b,
+	textField: O
+}, N = s("div")(({ theme: e }) => ({ margin: `0 0 ${e.spacing(2)} 0` })), P = s("div")(({ theme: e }) => ({
+	color: "#495B8F",
+	fontSize: e.typography.fontSize + 2,
+	fontWeight: 600,
+	marginBottom: e.spacing(1)
+})), F = s("p")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize,
+	marginBottom: 0
+})), I = (e) => {
+	let { model: t, label: n, group: r, configuration: i, onChange: a } = e, o = (e, n, r) => {
+		let { isConfigProperty: o, ...s } = u(e, r || n), l = u(o ? i : t, n), d = {
+			...s,
+			key: n,
+			value: l
+		}, f = M[d.type];
+		return /* @__PURE__ */ c(f, {
+			...d,
+			onChange: (e) => a(n, e, o)
+		}, n);
+	}, s = (e, t) => {
+		let n = e[t];
+		if (!n) return null;
+		let { type: r, label: i, fields: a, choices: s } = n;
+		return r === "numberFields" ? /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c(F, { children: i }), Object.keys(a).map((n) => o(e, `${t}.${n}`, `${t}.fields.${n}`))] }, `numberField-${i}`) : r === "checkboxes" ? /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", { children: i }), Object.keys(s).map((n) => o(e, `${t}.${n}`, `${t}.choices.${n}`))] }, `checkbox-${i}`) : o(e, t);
+	};
+	return /* @__PURE__ */ l(N, { children: [/* @__PURE__ */ c(P, { children: n }), Object.keys(r).map((e) => s(r, e))] });
+};
+I.propTypes = {
+	model: o.object,
+	label: o.string,
+	group: o.object,
+	configuration: o.object,
+	onChange: o.func
+};
+var L = class extends a.Component {
+	static propTypes = {
+		model: o.object,
+		configuration: o.object,
+		groups: o.object,
+		onChangeModel: o.func,
+		onChangeConfiguration: o.func,
+		modal: o.object
+	};
+	static defaultProps = {
+		onChangeModel: () => {},
+		onChangeConfiguration: () => {}
+	};
+	change = (e, t, n = !1) => {
+		_("[changeModel]", e, t);
+		let { onChangeModel: r, onChangeConfiguration: i } = this.props, a = { ...this.props.model }, o = { ...this.props.configuration };
+		n ? (d(o, e, t), i(o, e)) : (d(a, e, t), r(a, e));
+	};
+	render() {
+		let { groups: e, model: t, configuration: n, modal: r } = this.props;
+		return _("render:", t), /* @__PURE__ */ l("div", { children: [Object.keys(e || {}).map((r) => Object.entries(e[r]).some(([, e]) => !!e) ? /* @__PURE__ */ c(I, {
+			label: r,
+			model: t,
+			configuration: n,
+			group: e[r],
+			onChange: this.change
+		}, r) : null), r] });
+	}
+};
+//#endregion
+export { L as Panel, L as default };

package/dist/settings/settings-radio-label.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-lib/packages/config-ui/src/settings/settings-radio-label.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const SettingsRadioLabel: {
+    ({ label, value, checked, onChange }: {
+        label: any;
+        value: any;
+        checked: any;
+        onChange: any;
+    }): React.JSX.Element;
+    propTypes: {
+        label: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        checked: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export default SettingsRadioLabel;

package/dist/settings/settings-radio-label.js

@@ -0,0 +1,29 @@
+import "react";
+import e from "prop-types";
+import { styled as t } from "@mui/material/styles";
+import { jsx as n } from "react/jsx-runtime";
+import { color as r } from "@pie-lib/render-ui";
+import i from "@mui/material/FormControlLabel";
+import a from "@mui/material/Radio";
+//#region src/settings/settings-radio-label.tsx
+var o = t(i)(({ theme: e }) => ({ "& .MuiFormControlLabel-label": {
+	color: "rgba(0, 0, 0, 0.89)",
+	fontSize: e.typography.fontSize - 2,
+	left: "-5px",
+	position: "relative"
+} })), s = t(a)(() => ({ color: `${r.tertiary()} !important` })), c = ({ label: e, value: t, checked: r, onChange: i }) => /* @__PURE__ */ n(o, {
+	value: t,
+	control: /* @__PURE__ */ n(s, {
+		checked: r,
+		onChange: i
+	}),
+	label: e
+});
+c.propTypes = {
+	label: e.string,
+	value: e.string,
+	checked: e.bool,
+	onChange: e.func
+};
+//#endregion
+export { c as default };

package/dist/settings/toggle.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-lib/packages/config-ui/src/settings/toggle.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const Toggle: {
+    ({ checked, disabled, label, toggle }: {
+        checked: any;
+        disabled: any;
+        label: any;
+        toggle: any;
+    }): React.JSX.Element;
+    propTypes: {
+        checked: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        label: PropTypes.Validator<string>;
+        toggle: PropTypes.Validator<(...args: any[]) => any>;
+    };
+};
+export default Toggle;