@pie-element/match 12.1.1 → 12.1.2-next.1

package/dist/author/row.js

@@ -0,0 +1,204 @@
+import e from "react";
+import t from "prop-types";
+import { color as n } from "@pie-lib/render-ui";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "@mui/material/Radio";
+import { styled as o } from "@mui/material/styles";
+import s from "debug";
+import { AlertDialog as c, Checkbox as l } from "@pie-lib/config-ui";
+import u, { DEFAULT_PLUGINS as d } from "@pie-lib/editable-html-tip-tap";
+import f from "@mui/icons-material/DragHandle";
+import p from "@mui/material/IconButton";
+import m from "@mui/icons-material/Delete";
+import { useDraggable as h, useDroppable as g } from "@dnd-kit/core";
+//#region src/author/row.tsx
+s("@pie-element:categorize:configure:choice");
+var _ = o("span")({ cursor: "move" }), v = o("div")(({ theme: e }) => ({
+	marginTop: e.spacing(2),
+	display: "flex",
+	alignItems: "center",
+	flex: 1
+})), y = o("div")(({ theme: e }) => ({
+	flex: 1,
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	minWidth: "120px",
+	padding: `0 ${e.spacing(1)}`
+})), b = o(a)(({ theme: e, error: t }) => ({
+	"& input": { width: "100% !important" },
+	"&.MuiRadio-root": { color: `${t ? e.palette.error.main : n.tertiary()} !important` }
+})), x = o("div")(({ theme: e }) => ({
+	flex: .5,
+	display: "flex",
+	justifyContent: "center",
+	minWidth: "45px",
+	padding: `0 ${e.spacing(1)}`
+})), S = o(y)(({ theme: e }) => ({
+	flex: 2,
+	display: "flex",
+	justifyContent: "flex-start",
+	padding: 0,
+	maxWidth: "unset",
+	textAlign: "left",
+	minWidth: "200px",
+	marginRight: e.spacing(1),
+	"&> div": { width: "100%" }
+})), C = o("hr")(({ theme: e }) => ({
+	marginTop: e.spacing(2),
+	border: 0,
+	borderTop: `2px solid ${e.palette.grey.A100}`,
+	width: "100%"
+})), w = o("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), T = class extends e.Component {
+	static propTypes = {
+		model: t.object.isRequired,
+		row: t.object.isRequired,
+		idx: t.number.isRequired,
+		maxImageWidth: t.object,
+		maxImageHeight: t.object,
+		onDeleteRow: t.func.isRequired,
+		onChange: t.func.isRequired,
+		imageSupport: t.shape({
+			add: t.func.isRequired,
+			delete: t.func.isRequired
+		}),
+		uploadSoundSupport: t.shape({
+			add: t.func.isRequired,
+			delete: t.func.isRequired
+		}),
+		inputConfiguration: t.object,
+		toolbarOpts: t.object,
+		error: t.string,
+		spellCheck: t.bool,
+		minQuestions: t.number
+	};
+	static defaultProps = {};
+	state = { dialog: {
+		open: !1,
+		text: ""
+	} };
+	componentDidMount() {
+		document.addEventListener("mouseup", this.onMouseUpOnHandle);
+	}
+	onRowTitleChange = (e) => (t) => {
+		let { model: n, onChange: r } = this.props, i = { ...n };
+		i.rows[e].title = t, r(i);
+	};
+	onRowValueChange = (e, t) => (n) => {
+		let { model: r, onChange: i } = this.props, a = { ...r };
+		if (r.choiceMode === "radio") for (let t = 0; t < a.rows[e].values.length; t++) a.rows[e].values[t] = !1;
+		a.rows[e].values[t] = n.target.checked, i(a);
+	};
+	onDeleteRow = (e) => () => {
+		let { model: t, onDeleteRow: n, minQuestions: r } = this.props;
+		t.rows && t.rows.length === r ? this.setState({ dialog: {
+			open: !0,
+			text: `There should be at least ${r} question row` + (r > 1 ? "s" : "") + "."
+		} }) : n(e);
+	};
+	onMouseDownOnHandle = () => {};
+	onMouseUpOnHandle = () => {};
+	render() {
+		let { imageSupport: e, model: t, row: n, idx: a, inputConfiguration: o = {}, toolbarOpts: s, spellCheck: h, error: g, maxImageWidth: T, maxImageHeight: E, uploadSoundSupport: D, mathMlOptions: O = {} } = this.props, { dialog: k } = this.state, A = (d || []).filter((e) => e !== "bulleted-list" && e !== "numbered-list");
+		return /* @__PURE__ */ i("div", {
+			style: { width: "100%" },
+			children: [
+				/* @__PURE__ */ r(_, {
+					itemID: "handle",
+					onMouseDown: this.onMouseDownOnHandle,
+					children: /* @__PURE__ */ r(f, { color: "primary" })
+				}),
+				/* @__PURE__ */ i(v, { children: [
+					/* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(u, {
+						imageSupport: e,
+						autoWidthToolbar: !0,
+						disableUnderline: !0,
+						label: "label",
+						markup: n.title,
+						onChange: this.onRowTitleChange(a),
+						pluginProps: o,
+						toolbarOpts: s,
+						activePlugins: A,
+						spellCheck: h,
+						maxImageWidth: T,
+						maxImageHeight: E,
+						uploadSoundSupport: D,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						error: g && g !== "No correct response defined.",
+						mathMlOptions: O
+					}) }),
+					n.values.map((e, n) => /* @__PURE__ */ r(y, { children: t.choiceMode === "radio" ? /* @__PURE__ */ r(b, {
+						error: g?.includes("No correct response defined."),
+						onChange: this.onRowValueChange(a, n),
+						checked: e === !0
+					}) : /* @__PURE__ */ r(l, {
+						onChange: this.onRowValueChange(a, n),
+						checked: e === !0,
+						label: "",
+						error: g?.includes("No correct response defined.")
+					}) }, n)),
+					/* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(p, {
+						onClick: this.onDeleteRow(a),
+						"aria-label": "Delete",
+						size: "large",
+						children: /* @__PURE__ */ r(m, {})
+					}) })
+				] }),
+				g && /* @__PURE__ */ r(w, { children: g }),
+				/* @__PURE__ */ r(C, {}),
+				/* @__PURE__ */ r(c, {
+					open: k.open,
+					title: "Warning",
+					text: k.text,
+					onConfirm: () => this.setState({ dialog: { open: !1 } })
+				})
+			]
+		});
+	}
+};
+function E(e) {
+	let { attributes: t, listeners: n, setNodeRef: i, transform: a, transition: o, isDragging: s } = h({
+		id: `row-${e.row.id}`,
+		data: {
+			type: "row",
+			index: e.idx,
+			id: e.row.id
+		}
+	}), { setNodeRef: c, isOver: l } = g({
+		id: `row-drop-${e.row.id}`,
+		data: {
+			type: "row",
+			index: e.idx,
+			id: e.row.id
+		}
+	});
+	return /* @__PURE__ */ r("div", {
+		ref: c,
+		style: {
+			transform: a ? `translate3d(${a.x}px, ${a.y}px, 0)` : void 0,
+			transition: o,
+			opacity: s ? .5 : 1,
+			backgroundColor: l ? "rgba(0, 0, 0, 0.1)" : "transparent"
+		},
+		children: /* @__PURE__ */ r("div", {
+			ref: i,
+			...n,
+			onKeyDown: (e) => {
+				let t = e.target;
+				t.closest("[contenteditable]") || t.closest("input") || t.closest("textarea") || t.isContentEditable || n?.onKeyDown?.(e);
+			},
+			onPointerDown: (e) => {
+				let t = e.target;
+				t.closest("[contenteditable]") || t.closest("input") || t.closest("textarea") || t.isContentEditable || n?.onPointerDown?.(e);
+			},
+			...t,
+			children: /* @__PURE__ */ r(T, { ...e })
+		})
+	});
+}
+//#endregion
+export { E as default };

package/dist/author/utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-elements/packages/match/configure/src/utils.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.
+ */
+export declare const getPluginProps: (props?: {}, baseInputConfiguration?: {}) => {};
+export declare const generateValidationMessage: (model: any, configuration: any) => string;

package/dist/author/utils.js

@@ -0,0 +1,10 @@
+//#region src/author/utils.ts
+var e = (e = {}, t = {}) => ({
+	...t,
+	...e
+}), t = (e, t) => {
+	let { choiceMode: n } = e, { minQuestions: r, maxQuestions: i, maxAnswers: a } = t, o = `\nThere should be at least ${r}` + (i ? ` and at most ${i}` : "") + " question row" + (r > 1 || i ? "s." : ".") + "\nRow and column headings should be non-blank and unique. \nFirst column heading is excluded from validation." + (a ? `\nThere should be at most ${a} answer choices.` : ""), s = n === "radio" ? "\nThere should be a correct response defined for every row." : "\nThere should be at least one correct response defined for every row.";
+	return "Validation requirements:" + o + s;
+};
+//#endregion
+export { t as generateValidationMessage, e as getPluginProps };