@lattice-php/lattice 0.1.0 → 0.3.0

package/dist/form/components/fields/password-input.js

@@ -1,68 +1,68 @@
-import { getBooleanProp, getOptionalNumberProp, getStringProp } from "../../../core/props.js";
+import { testIdentity } from "../../../core/test-id.js";
 import { useFormContext } from "../context.js";
-import { useDependentField } from "../use-dependent-field.js";
+import { useFieldScope } from "../field-scope.js";
 import { FormFieldFrame } from "../base/field.js";
 import { useFieldCommit } from "../use-field-commit.js";
+import { useControlledField } from "../use-controlled-field.js";
 import PasswordInput from "../base/password-input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/password-input.tsx
-function getPasswordConfirmation(props) {
-	const value = props?.confirmation;
-	if (typeof value !== "object" || value === null) return;
-	const confirmation = value;
-	return {
-		label: typeof confirmation.label === "string" ? confirmation.label : void 0,
-		name: typeof confirmation.name === "string" ? confirmation.name : void 0,
-		placeholder: typeof confirmation.placeholder === "string" ? confirmation.placeholder : void 0
-	};
-}
 var PasswordInputComponent = ({ node }) => {
+	const props = node.props;
 	const { errors } = useFormContext();
-	const { hidden, required, readonly, disabled } = useDependentField(node);
+	const field = useControlledField(node);
 	const { commit } = useFieldCommit();
-	const name = getStringProp(node.props, "name");
-	const confirmation = getPasswordConfirmation(node.props);
-	const confirmationName = confirmation?.name ?? `${name}_confirmation`;
-	const passwordRules = getStringProp(node.props, "passwordRules") || void 0;
-	if (hidden) return null;
-	const onChange = (field) => (event) => {
-		commit(field, event.target.value);
-	};
+	const scope = useFieldScope();
+	const confirmation = props.confirmation;
+	const confirmationLocalName = confirmation?.name ?? `${field.localName}_confirmation`;
+	const confirmationName = scope ? scope.scopedName(confirmationLocalName) : confirmationLocalName;
+	const confirmationErrorKey = scope ? scope.errorKey(confirmationLocalName) : confirmationLocalName;
+	const passwordRules = (props.passwordRules ?? "") || void 0;
+	if (field.hidden) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "grid gap-6",
 		children: [/* @__PURE__ */ jsx(FormFieldFrame, {
-			error: errors[name],
-			label: getStringProp(node.props, "label"),
-			labelAction: node.props?.labelAction,
-			name,
-			required,
+			error: field.error,
+			helperText: props.helperText ?? void 0,
+			tooltip: props.tooltip ?? void 0,
+			label: props.label ?? "",
+			labelAction: props.labelAction ?? void 0,
+			name: field.name,
+			required: field.required,
 			children: /* @__PURE__ */ jsx(PasswordInput, {
-				autoComplete: getStringProp(node.props, "autoComplete"),
-				autoFocus: getBooleanProp(node.props, "autoFocus"),
-				disabled,
-				id: name,
-				name,
-				onChange: onChange(name),
-				placeholder: getStringProp(node.props, "placeholder"),
+				autoComplete: props.autoComplete ?? "",
+				autoFocus: props.autoFocus ?? false,
+				"data-test": field.testId,
+				disabled: field.disabled,
+				id: field.name,
+				name: field.name,
+				onChange: (event) => {
+					field.commit(event.target.value);
+				},
+				placeholder: props.placeholder ?? "",
 				passwordrules: passwordRules,
-				readOnly: readonly,
-				tabIndex: getOptionalNumberProp(node.props, "tabIndex")
+				readOnly: field.readOnly,
+				tabIndex: props.tabIndex ?? void 0,
+				value: field.value
 			})
 		}), confirmation && /* @__PURE__ */ jsx(FormFieldFrame, {
-			error: errors[confirmationName],
+			error: errors[confirmationErrorKey],
 			label: confirmation.label ?? "Confirm password",
 			name: confirmationName,
-			required,
+			required: field.required,
 			children: /* @__PURE__ */ jsx(PasswordInput, {
 				autoComplete: "new-password",
-				disabled,
+				"data-test": testIdentity(confirmationLocalName),
+				disabled: field.disabled,
 				id: confirmationName,
 				name: confirmationName,
-				onChange: onChange(confirmationName),
+				onChange: (event) => {
+					commit(confirmationLocalName, event.target.value);
+				},
 				placeholder: confirmation.placeholder ?? confirmation.label ?? "Confirm password",
 				passwordrules: passwordRules,
-				readOnly: readonly,
-				tabIndex: getOptionalNumberProp(node.props, "tabIndex")
+				readOnly: field.readOnly,
+				tabIndex: props.tabIndex ?? void 0
 			})
 		})]
 	});

package/dist/form/components/fields/password-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/password-input.tsx"],"sourcesContent":["import { getBooleanProp, getOptionalNumberProp, getStringProp } from \"@lattice/lattice/core/props\";\nimport type { NodeProps, RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport PasswordInput from \"../base/password-input\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormContext } from \"../context\";\nimport type { FormLabelAction } from \"../types\";\n\ntype PasswordConfirmation = {\n  label?: string;\n  name?: string;\n  placeholder?: string;\n};\n\nfunction getPasswordConfirmation(props: NodeProps | undefined): PasswordConfirmation | undefined {\n  const value = props?.confirmation;\n\n  if (typeof value !== \"object\" || value === null) {\n    return undefined;\n  }\n\n  const confirmation = value as Record<string, unknown>;\n\n  return {\n    label: typeof confirmation.label === \"string\" ? confirmation.label : undefined,\n    name: typeof confirmation.name === \"string\" ? confirmation.name : undefined,\n    placeholder:\n      typeof confirmation.placeholder === \"string\" ? confirmation.placeholder : undefined,\n  };\n}\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.password-input\": {\n      autoComplete?: string;\n      autoFocus?: boolean;\n      conditions?: unknown;\n      confirmation?: PasswordConfirmation;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      labelAction?: FormLabelAction;\n      name?: string;\n      passwordRules?: string;\n      placeholder?: string;\n      readonly?: boolean;\n      required?: boolean;\n      tabIndex?: number;\n    };\n  }\n}\n\nexport const PasswordInputComponent: RendererComponent<\"form.password-input\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readonly, disabled } = useDependentField(node);\n  const { commit } = useFieldCommit();\n  const name = getStringProp(node.props, \"name\");\n  const confirmation = getPasswordConfirmation(node.props);\n  const confirmationName = confirmation?.name ?? `${name}_confirmation`;\n  const passwordRules = getStringProp(node.props, \"passwordRules\") || undefined;\n\n  if (hidden) {\n    return null;\n  }\n\n  const onChange =\n    (field: string) =>\n    (event: React.ChangeEvent<HTMLInputElement>): void => {\n      commit(field, event.target.value);\n    };\n\n  return (\n    <div className=\"grid gap-6\">\n      <FormFieldFrame\n        error={errors[name]}\n        label={getStringProp(node.props, \"label\")}\n        labelAction={node.props?.labelAction}\n        name={name}\n        required={required}\n      >\n        <PasswordInput\n          autoComplete={getStringProp(node.props, \"autoComplete\")}\n          autoFocus={getBooleanProp(node.props, \"autoFocus\")}\n          disabled={disabled}\n          id={name}\n          name={name}\n          onChange={onChange(name)}\n          placeholder={getStringProp(node.props, \"placeholder\")}\n          passwordrules={passwordRules}\n          readOnly={readonly}\n          tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n        />\n      </FormFieldFrame>\n\n      {confirmation && (\n        <FormFieldFrame\n          error={errors[confirmationName]}\n          label={confirmation.label ?? \"Confirm password\"}\n          name={confirmationName}\n          required={required}\n        >\n          <PasswordInput\n            autoComplete=\"new-password\"\n            disabled={disabled}\n            id={confirmationName}\n            name={confirmationName}\n            onChange={onChange(confirmationName)}\n            placeholder={confirmation.placeholder ?? confirmation.label ?? \"Confirm password\"}\n            passwordrules={passwordRules}\n            readOnly={readonly}\n            tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n          />\n        </FormFieldFrame>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,SAAS,wBAAwB,OAAgE;CAC/F,MAAM,QAAQ,OAAO;CAErB,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC;CAGF,MAAM,eAAe;CAErB,OAAO;EACL,OAAO,OAAO,aAAa,UAAU,WAAW,aAAa,QAAQ,KAAA;EACrE,MAAM,OAAO,aAAa,SAAS,WAAW,aAAa,OAAO,KAAA;EAClE,aACE,OAAO,aAAa,gBAAgB,WAAW,aAAa,cAAc,KAAA;CAC9E;AACF;AAuBA,IAAa,0BAAoE,EAAE,WAAW;CAC5F,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,OAAO,cAAc,KAAK,OAAO,MAAM;CAC7C,MAAM,eAAe,wBAAwB,KAAK,KAAK;CACvD,MAAM,mBAAmB,cAAc,QAAQ,GAAG,KAAK;CACvD,MAAM,gBAAgB,cAAc,KAAK,OAAO,eAAe,KAAK,KAAA;CAEpE,IAAI,QACF,OAAO;CAGT,MAAM,YACH,WACA,UAAqD;EACpD,OAAO,OAAO,MAAM,OAAO,KAAK;CAClC;CAEF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,OAAO,cAAc,KAAK,OAAO,OAAO;GACxC,aAAa,KAAK,OAAO;GACnB;GACI;aAEV,oBAAC,eAAD;IACE,cAAc,cAAc,KAAK,OAAO,cAAc;IACtD,WAAW,eAAe,KAAK,OAAO,WAAW;IACvC;IACV,IAAI;IACE;IACN,UAAU,SAAS,IAAI;IACvB,aAAa,cAAc,KAAK,OAAO,aAAa;IACpD,eAAe;IACf,UAAU;IACV,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACvD,CAAA;EACa,CAAA,GAEf,gBACC,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,OAAO,aAAa,SAAS;GAC7B,MAAM;GACI;aAEV,oBAAC,eAAD;IACE,cAAa;IACH;IACV,IAAI;IACJ,MAAM;IACN,UAAU,SAAS,gBAAgB;IACnC,aAAa,aAAa,eAAe,aAAa,SAAS;IAC/D,eAAe;IACf,UAAU;IACV,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACvD,CAAA;EACa,CAAA,CAEf;;AAET"}
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/password-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { FormFieldFrame } from \"../base/field\";\nimport PasswordInput from \"../base/password-input\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useControlledField } from \"../use-controlled-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormContext } from \"../context\";\n\nexport const PasswordInputComponent: RendererComponent<\"field.password-input\"> = ({ node }) => {\n  const props = node.props;\n  const { errors } = useFormContext();\n  const field = useControlledField(node);\n  const { commit } = useFieldCommit();\n  const scope = useFieldScope();\n  const confirmation = props.confirmation;\n  const confirmationLocalName = confirmation?.name ?? `${field.localName}_confirmation`;\n  const confirmationName = scope ? scope.scopedName(confirmationLocalName) : confirmationLocalName;\n  const confirmationErrorKey = scope\n    ? scope.errorKey(confirmationLocalName)\n    : confirmationLocalName;\n  const passwordRules = (props.passwordRules ?? \"\") || undefined;\n\n  if (field.hidden) {\n    return null;\n  }\n\n  return (\n    <div className=\"grid gap-6\">\n      <FormFieldFrame\n        error={field.error}\n        helperText={props.helperText ?? undefined}\n        tooltip={props.tooltip ?? undefined}\n        label={props.label ?? \"\"}\n        labelAction={props.labelAction ?? undefined}\n        name={field.name}\n        required={field.required}\n      >\n        <PasswordInput\n          autoComplete={props.autoComplete ?? \"\"}\n          autoFocus={props.autoFocus ?? false}\n          data-test={field.testId}\n          disabled={field.disabled}\n          id={field.name}\n          name={field.name}\n          onChange={(event) => {\n            field.commit(event.target.value);\n          }}\n          placeholder={props.placeholder ?? \"\"}\n          passwordrules={passwordRules}\n          readOnly={field.readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          value={field.value}\n        />\n      </FormFieldFrame>\n\n      {confirmation && (\n        <FormFieldFrame\n          error={errors[confirmationErrorKey]}\n          label={confirmation.label ?? \"Confirm password\"}\n          name={confirmationName}\n          required={field.required}\n        >\n          <PasswordInput\n            autoComplete=\"new-password\"\n            data-test={testIdentity(confirmationLocalName)}\n            disabled={field.disabled}\n            id={confirmationName}\n            name={confirmationName}\n            onChange={(event) => {\n              commit(confirmationLocalName, event.target.value);\n            }}\n            placeholder={confirmation.placeholder ?? confirmation.label ?? \"Confirm password\"}\n            passwordrules={passwordRules}\n            readOnly={field.readOnly}\n            tabIndex={props.tabIndex ?? undefined}\n          />\n        </FormFieldFrame>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,0BAAqE,EAAE,WAAW;CAC7F,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,mBAAmB,IAAI;CACrC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,QAAQ,cAAc;CAC5B,MAAM,eAAe,MAAM;CAC3B,MAAM,wBAAwB,cAAc,QAAQ,GAAG,MAAM,UAAU;CACvE,MAAM,mBAAmB,QAAQ,MAAM,WAAW,qBAAqB,IAAI;CAC3E,MAAM,uBAAuB,QACzB,MAAM,SAAS,qBAAqB,IACpC;CACJ,MAAM,iBAAiB,MAAM,iBAAiB,OAAO,KAAA;CAErD,IAAI,MAAM,QACR,OAAO;CAGT,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,gBAAD;GACE,OAAO,MAAM;GACb,YAAY,MAAM,cAAc,KAAA;GAChC,SAAS,MAAM,WAAW,KAAA;GAC1B,OAAO,MAAM,SAAS;GACtB,aAAa,MAAM,eAAe,KAAA;GAClC,MAAM,MAAM;GACZ,UAAU,MAAM;aAEhB,oBAAC,eAAD;IACE,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IAC9B,aAAW,MAAM;IACjB,UAAU,MAAM;IAChB,IAAI,MAAM;IACV,MAAM,MAAM;IACZ,WAAW,UAAU;KACnB,MAAM,OAAO,MAAM,OAAO,KAAK;IACjC;IACA,aAAa,MAAM,eAAe;IAClC,eAAe;IACf,UAAU,MAAM;IAChB,UAAU,MAAM,YAAY,KAAA;IAC5B,OAAO,MAAM;GACd,CAAA;EACa,CAAA,GAEf,gBACC,oBAAC,gBAAD;GACE,OAAO,OAAO;GACd,OAAO,aAAa,SAAS;GAC7B,MAAM;GACN,UAAU,MAAM;aAEhB,oBAAC,eAAD;IACE,cAAa;IACb,aAAW,aAAa,qBAAqB;IAC7C,UAAU,MAAM;IAChB,IAAI;IACJ,MAAM;IACN,WAAW,UAAU;KACnB,OAAO,uBAAuB,MAAM,OAAO,KAAK;IAClD;IACA,aAAa,aAAa,eAAe,aAAa,SAAS;IAC/D,eAAe;IACf,UAAU,MAAM;IAChB,UAAU,MAAM,YAAY,KAAA;GAC7B,CAAA;EACa,CAAA,CAEf;;AAET"}

package/dist/form/components/fields/repeater-rows.d.ts

@@ -0,0 +1,12 @@
+export type RepeaterRow = Record<string, unknown>;
+export declare const ROW_ID_KEY = "__rowId";
+/** Stamp a stable client-only id on a row (no-op if it already has one). */
+export declare function withRowId(row: RepeaterRow): RepeaterRow;
+/** Ensure every row has a stable id; returns the SAME array reference if none were missing. */
+export declare function ensureRowIds(rows: RepeaterRow[]): RepeaterRow[];
+/** Seed the row list from a stored value, falling back to `defaultItems` blank rows. */
+export declare function seedRows(value: unknown, defaultItems: number): RepeaterRow[];
+export declare function addRow(rows: RepeaterRow[]): RepeaterRow[];
+export declare function removeRow(rows: RepeaterRow[], index: number): RepeaterRow[];
+export declare function duplicateRow(rows: RepeaterRow[], index: number): RepeaterRow[];
+export declare function moveRow(rows: RepeaterRow[], from: number, to: number): RepeaterRow[];

package/dist/form/components/fields/repeater-rows.js

@@ -0,0 +1,46 @@
+//#region resources/js/form/components/fields/repeater-rows.ts
+var ROW_ID_KEY = "__rowId";
+var rowIdCounter = 0;
+/** Stamp a stable client-only id on a row (no-op if it already has one). */
+function withRowId(row) {
+	return row["__rowId"] ? row : {
+		...row,
+		[ROW_ID_KEY]: `r${rowIdCounter++}`
+	};
+}
+/** Ensure every row has a stable id; returns the SAME array reference if none were missing. */
+function ensureRowIds(rows) {
+	if (rows.every((row) => Boolean(row["__rowId"]))) return rows;
+	return rows.map(withRowId);
+}
+/** Seed the row list from a stored value, falling back to `defaultItems` blank rows. */
+function seedRows(value, defaultItems) {
+	if (Array.isArray(value) && value.length > 0) return value.map((row) => row && typeof row === "object" ? { ...row } : {});
+	return Array.from({ length: Math.max(0, defaultItems) }, () => ({}));
+}
+function addRow(rows) {
+	return [...rows, {}];
+}
+function removeRow(rows, index) {
+	return rows.filter((_, i) => i !== index);
+}
+function duplicateRow(rows, index) {
+	const source = rows[index];
+	if (!source) return rows;
+	const { [ROW_ID_KEY]: _id, ...copy } = source;
+	return [
+		...rows.slice(0, index + 1),
+		withRowId(copy),
+		...rows.slice(index + 1)
+	];
+}
+function moveRow(rows, from, to) {
+	const next = [...rows];
+	const [moved] = next.splice(from, 1);
+	next.splice(to, 0, moved);
+	return next;
+}
+//#endregion
+export { ROW_ID_KEY, addRow, duplicateRow, ensureRowIds, moveRow, removeRow, seedRows, withRowId };
+
+//# sourceMappingURL=repeater-rows.js.map

package/dist/form/components/fields/repeater-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeater-rows.js","names":[],"sources":["../../../../resources/js/form/components/fields/repeater-rows.ts"],"sourcesContent":["export type RepeaterRow = Record<string, unknown>;\n\nexport const ROW_ID_KEY = \"__rowId\";\n\nlet rowIdCounter = 0;\n\n/** Stamp a stable client-only id on a row (no-op if it already has one). */\nexport function withRowId(row: RepeaterRow): RepeaterRow {\n  return row[ROW_ID_KEY] ? row : { ...row, [ROW_ID_KEY]: `r${rowIdCounter++}` };\n}\n\n/** Ensure every row has a stable id; returns the SAME array reference if none were missing. */\nexport function ensureRowIds(rows: RepeaterRow[]): RepeaterRow[] {\n  if (rows.every((row) => Boolean(row[ROW_ID_KEY]))) {\n    return rows;\n  }\n  return rows.map(withRowId);\n}\n\n/** Seed the row list from a stored value, falling back to `defaultItems` blank rows. */\nexport function seedRows(value: unknown, defaultItems: number): RepeaterRow[] {\n  if (Array.isArray(value) && value.length > 0) {\n    return value.map((row) => (row && typeof row === \"object\" ? { ...(row as RepeaterRow) } : {}));\n  }\n\n  return Array.from({ length: Math.max(0, defaultItems) }, () => ({}));\n}\n\nexport function addRow(rows: RepeaterRow[]): RepeaterRow[] {\n  return [...rows, {}];\n}\n\nexport function removeRow(rows: RepeaterRow[], index: number): RepeaterRow[] {\n  return rows.filter((_, i) => i !== index);\n}\n\nexport function duplicateRow(rows: RepeaterRow[], index: number): RepeaterRow[] {\n  const source = rows[index];\n  if (!source) {\n    return rows;\n  }\n\n  const { [ROW_ID_KEY]: _id, ...copy } = source;\n  return [...rows.slice(0, index + 1), withRowId(copy), ...rows.slice(index + 1)];\n}\n\nexport function moveRow(rows: RepeaterRow[], from: number, to: number): RepeaterRow[] {\n  const next = [...rows];\n  const [moved] = next.splice(from, 1);\n  next.splice(to, 0, moved);\n  return next;\n}\n"],"mappings":";AAEA,IAAa,aAAa;AAE1B,IAAI,eAAe;;AAGnB,SAAgB,UAAU,KAA+B;CACvD,OAAO,IAAA,aAAkB,MAAM;EAAE,GAAG;GAAM,aAAa,IAAI;CAAiB;AAC9E;;AAGA,SAAgB,aAAa,MAAoC;CAC/D,IAAI,KAAK,OAAO,QAAQ,QAAQ,IAAA,UAAe,CAAC,GAC9C,OAAO;CAET,OAAO,KAAK,IAAI,SAAS;AAC3B;;AAGA,SAAgB,SAAS,OAAgB,cAAqC;CAC5E,IAAI,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS,GACzC,OAAO,MAAM,KAAK,QAAS,OAAO,OAAO,QAAQ,WAAW,EAAE,GAAI,IAAoB,IAAI,CAAC,CAAE;CAG/F,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,YAAY,EAAE,UAAU,CAAC,EAAE;AACrE;AAEA,SAAgB,OAAO,MAAoC;CACzD,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC;AACrB;AAEA,SAAgB,UAAU,MAAqB,OAA8B;CAC3E,OAAO,KAAK,QAAQ,GAAG,MAAM,MAAM,KAAK;AAC1C;AAEA,SAAgB,aAAa,MAAqB,OAA8B;CAC9E,MAAM,SAAS,KAAK;CACpB,IAAI,CAAC,QACH,OAAO;CAGT,MAAM,GAAG,aAAa,KAAK,GAAG,SAAS;CACvC,OAAO;EAAC,GAAG,KAAK,MAAM,GAAG,QAAQ,CAAC;EAAG,UAAU,IAAI;EAAG,GAAG,KAAK,MAAM,QAAQ,CAAC;CAAC;AAChF;AAEA,SAAgB,QAAQ,MAAqB,MAAc,IAA2B;CACpF,MAAM,OAAO,CAAC,GAAG,IAAI;CACrB,MAAM,CAAC,SAAS,KAAK,OAAO,MAAM,CAAC;CACnC,KAAK,OAAO,IAAI,GAAG,KAAK;CACxB,OAAO;AACT"}

package/dist/form/components/fields/repeater.d.ts

@@ -0,0 +1,2 @@
+import { RendererComponent } from '../../../core/types';
+export declare const RepeaterComponent: RendererComponent<"field.repeater">;

package/dist/form/components/fields/repeater.js

@@ -0,0 +1,97 @@
+import { Icon } from "../../../icons/sprite.js";
+import { useFormContext } from "../context.js";
+import "./repeater-rows.js";
+import { FormFieldFrame } from "../base/field.js";
+import { useDependentField } from "../use-dependent-field.js";
+import { RowItem } from "./row-item.js";
+import { TableRows, columnsFromSchema } from "./table-rows.js";
+import { useFlipReorder } from "./use-flip-reorder.js";
+import { useRowCollection } from "./use-row-collection.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/repeater.tsx
+var EMPTY_TEMPLATE = [];
+var RepeaterComponent = ({ node }) => {
+	const props = node.props;
+	const name = props.name;
+	const { errors } = useFormContext();
+	const { hidden, required } = useDependentField(node);
+	const { path, rows, onField, onRemove, onMove, onDuplicate, append } = useRowCollection(name, props.defaultItems ?? 1);
+	const template = node.schema ?? EMPTY_TEMPLATE;
+	const registerRow = useFlipReorder(rows.map((r) => String(r["__rowId"] ?? "")).join(","));
+	const atMax = props.maxItems != null && rows.length >= props.maxItems;
+	const atMin = props.minItems != null && rows.length <= props.minItems;
+	const isTable = props.layout === "table";
+	const itemLabels = props.itemLabels;
+	const rowHeading = (index) => {
+		const label = itemLabels?.[index];
+		if (typeof label === "string" && label !== "") return label;
+		return props.itemLabel ? `${props.itemLabel} ${index + 1}` : `#${index + 1}`;
+	};
+	if (hidden) return null;
+	const tableRows = rows.map((row, index) => ({
+		key: String(row["__rowId"] ?? index),
+		index,
+		row,
+		template,
+		span: false,
+		heading: rowHeading(index)
+	}));
+	return /* @__PURE__ */ jsx(FormFieldFrame, {
+		error: errors[path],
+		helperText: props.helperText ?? void 0,
+		tooltip: props.tooltip ?? void 0,
+		label: props.label ?? "",
+		name: path,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [isTable ? /* @__PURE__ */ jsx(TableRows, {
+				base: path,
+				columns: columnsFromSchema(template),
+				rows: tableRows,
+				reorderable: props.reorderable ?? false,
+				removable: () => !atMin,
+				rowActions: props.rowActions,
+				onField,
+				onMove,
+				onRemove,
+				onDuplicate,
+				registerRow,
+				resizableColumns: props.resizableColumns === true,
+				resizeIndicator: props.resizeIndicator === true
+			}) : rows.map((row, index) => {
+				const key = String(row["__rowId"] ?? index);
+				return /* @__PURE__ */ jsx("div", {
+					ref: (el) => registerRow(key, el),
+					"data-flip-key": key,
+					children: /* @__PURE__ */ jsx(RowItem, {
+						base: path,
+						index,
+						row,
+						template,
+						heading: rowHeading(index),
+						reorderable: props.reorderable ?? false,
+						isFirst: index === 0,
+						isLast: index === rows.length - 1,
+						removable: !atMin,
+						rowActions: props.rowActions,
+						onField,
+						onRemove,
+						onMove,
+						onDuplicate
+					})
+				}, key);
+			}), !atMax && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-test": `repeater-${name}-add`,
+				className: "inline-flex items-center gap-1.5 self-start rounded-lt-sm border border-lt-border px-3 py-1.5 text-sm hover:bg-lt-accent [&_svg]:size-lt-icon-sm",
+				onClick: () => append({}),
+				children: [/* @__PURE__ */ jsx(Icon, { name: "plus" }), props.addLabel ?? "Add"]
+			})]
+		})
+	});
+};
+//#endregion
+export { RepeaterComponent };
+
+//# sourceMappingURL=repeater.js.map

package/dist/form/components/fields/repeater.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeater.js","names":[],"sources":["../../../../resources/js/form/components/fields/repeater.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { ROW_ID_KEY } from \"./repeater-rows\";\nimport { RowItem } from \"./row-item\";\nimport { columnsFromSchema, TableRows } from \"./table-rows\";\nimport { useFlipReorder } from \"./use-flip-reorder\";\nimport { useRowCollection } from \"./use-row-collection\";\n\nconst EMPTY_TEMPLATE: Node[] = [];\n\nexport const RepeaterComponent: RendererComponent<\"field.repeater\"> = ({ node }) => {\n  const props = node.props;\n  const name = props.name;\n  const { errors } = useFormContext();\n  const { hidden, required } = useDependentField(node);\n  const { path, rows, onField, onRemove, onMove, onDuplicate, append } = useRowCollection(\n    name,\n    props.defaultItems ?? 1,\n  );\n  const template = node.schema ?? EMPTY_TEMPLATE;\n  const orderSignature = rows.map((r) => String(r[ROW_ID_KEY] ?? \"\")).join(\",\");\n  const registerRow = useFlipReorder(orderSignature);\n  const atMax = props.maxItems != null && rows.length >= props.maxItems;\n  const atMin = props.minItems != null && rows.length <= props.minItems;\n  const isTable = props.layout === \"table\";\n  const itemLabels = (props as { itemLabels?: Array<string | null> | null }).itemLabels;\n  const rowHeading = (index: number) => {\n    const label = itemLabels?.[index];\n\n    if (typeof label === \"string\" && label !== \"\") {\n      return label;\n    }\n\n    return props.itemLabel ? `${props.itemLabel} ${index + 1}` : `#${index + 1}`;\n  };\n\n  if (hidden) {\n    return null;\n  }\n\n  const tableRows = rows.map((row, index) => ({\n    key: String(row[ROW_ID_KEY] ?? index),\n    index,\n    row,\n    template,\n    span: false,\n    heading: rowHeading(index),\n  }));\n\n  return (\n    <FormFieldFrame\n      error={errors[path]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={path}\n      required={required}\n    >\n      <div className=\"flex flex-col gap-3\">\n        {isTable ? (\n          <TableRows\n            base={path}\n            columns={columnsFromSchema(template)}\n            rows={tableRows}\n            reorderable={props.reorderable ?? false}\n            removable={() => !atMin}\n            rowActions={props.rowActions}\n            onField={onField}\n            onMove={onMove}\n            onRemove={onRemove}\n            onDuplicate={onDuplicate}\n            registerRow={registerRow}\n            resizableColumns={props.resizableColumns === true}\n            resizeIndicator={props.resizeIndicator === true}\n          />\n        ) : (\n          rows.map((row, index) => {\n            const key = String(row[ROW_ID_KEY] ?? index);\n            return (\n              <div key={key} ref={(el) => registerRow(key, el)} data-flip-key={key}>\n                <RowItem\n                  base={path}\n                  index={index}\n                  row={row}\n                  template={template}\n                  heading={rowHeading(index)}\n                  reorderable={props.reorderable ?? false}\n                  isFirst={index === 0}\n                  isLast={index === rows.length - 1}\n                  removable={!atMin}\n                  rowActions={props.rowActions}\n                  onField={onField}\n                  onRemove={onRemove}\n                  onMove={onMove}\n                  onDuplicate={onDuplicate}\n                />\n              </div>\n            );\n          })\n        )}\n\n        {!atMax && (\n          <button\n            type=\"button\"\n            data-test={`repeater-${name}-add`}\n            className=\"inline-flex items-center gap-1.5 self-start rounded-lt-sm border border-lt-border px-3 py-1.5 text-sm hover:bg-lt-accent [&_svg]:size-lt-icon-sm\"\n            onClick={() => append({})}\n          >\n            <Icon name=\"plus\" />\n            {props.addLabel ?? \"Add\"}\n          </button>\n        )}\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,iBAAyB,CAAC;AAEhC,IAAa,qBAA0D,EAAE,WAAW;CAClF,MAAM,QAAQ,KAAK;CACnB,MAAM,OAAO,MAAM;CACnB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,aAAa,kBAAkB,IAAI;CACnD,MAAM,EAAE,MAAM,MAAM,SAAS,UAAU,QAAQ,aAAa,WAAW,iBACrE,MACA,MAAM,gBAAgB,CACxB;CACA,MAAM,WAAW,KAAK,UAAU;CAEhC,MAAM,cAAc,eADG,KAAK,KAAK,MAAM,OAAO,EAAA,cAAiB,EAAE,CAAC,EAAE,KAAK,GACtC,CAAc;CACjD,MAAM,QAAQ,MAAM,YAAY,QAAQ,KAAK,UAAU,MAAM;CAC7D,MAAM,QAAQ,MAAM,YAAY,QAAQ,KAAK,UAAU,MAAM;CAC7D,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,aAAc,MAAuD;CAC3E,MAAM,cAAc,UAAkB;EACpC,MAAM,QAAQ,aAAa;EAE3B,IAAI,OAAO,UAAU,YAAY,UAAU,IACzC,OAAO;EAGT,OAAO,MAAM,YAAY,GAAG,MAAM,UAAU,GAAG,QAAQ,MAAM,IAAI,QAAQ;CAC3E;CAEA,IAAI,QACF,OAAO;CAGT,MAAM,YAAY,KAAK,KAAK,KAAK,WAAW;EAC1C,KAAK,OAAO,IAAA,cAAmB,KAAK;EACpC;EACA;EACA;EACA,MAAM;EACN,SAAS,WAAW,KAAK;CAC3B,EAAE;CAEF,OACE,oBAAC,gBAAD;EACE,OAAO,OAAO;EACd,YAAY,MAAM,cAAc,KAAA;EAChC,SAAS,MAAM,WAAW,KAAA;EAC1B,OAAO,MAAM,SAAS;EACtB,MAAM;EACI;YAEV,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,UACC,oBAAC,WAAD;IACE,MAAM;IACN,SAAS,kBAAkB,QAAQ;IACnC,MAAM;IACN,aAAa,MAAM,eAAe;IAClC,iBAAiB,CAAC;IAClB,YAAY,MAAM;IACT;IACD;IACE;IACG;IACA;IACb,kBAAkB,MAAM,qBAAqB;IAC7C,iBAAiB,MAAM,oBAAoB;GAC5C,CAAA,IAED,KAAK,KAAK,KAAK,UAAU;IACvB,MAAM,MAAM,OAAO,IAAA,cAAmB,KAAK;IAC3C,OACE,oBAAC,OAAD;KAAe,MAAM,OAAO,YAAY,KAAK,EAAE;KAAG,iBAAe;eAC/D,oBAAC,SAAD;MACE,MAAM;MACC;MACF;MACK;MACV,SAAS,WAAW,KAAK;MACzB,aAAa,MAAM,eAAe;MAClC,SAAS,UAAU;MACnB,QAAQ,UAAU,KAAK,SAAS;MAChC,WAAW,CAAC;MACZ,YAAY,MAAM;MACT;MACC;MACF;MACK;KACd,CAAA;IACE,GAjBK,GAiBL;GAET,CAAC,GAGF,CAAC,SACA,qBAAC,UAAD;IACE,MAAK;IACL,aAAW,YAAY,KAAK;IAC5B,WAAU;IACV,eAAe,OAAO,CAAC,CAAC;cAJ1B,CAME,oBAAC,MAAD,EAAM,MAAK,OAAQ,CAAA,GAClB,MAAM,YAAY,KACb;KAEP;;CACS,CAAA;AAEpB"}

package/dist/form/components/fields/rich-editor.d.ts

@@ -1,17 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.rich-editor": {
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            name?: string;
-            placeholder?: string;
-            readonly?: boolean;
-            required?: boolean;
-            value?: unknown;
-        };
-    }
-}
-export declare const RichEditorComponent: RendererComponent<"form.rich-editor">;
+import { RendererComponent } from '../../../core/types';
+export declare const RichEditorComponent: RendererComponent<"field.rich-editor">;