@tsed/react-formio 3.0.0-alpha.10 → 3.0.0-alpha.11

package/dist/molecules/tabs/hooks/tabControl.js

@@ -0,0 +1,34 @@
+import { useContext as e, useEffect as u } from "react";
+import { TabControlContext as r } from "../context/TabControl.js";
+const b = () => {
+  const { value: t } = e(r);
+  return t;
+}, T = () => {
+  const { dispatch: t } = e(r);
+  return t;
+}, f = () => {
+  const { uid: t } = e(r);
+  return t;
+};
+function p({ value: t, ref: s }) {
+  const { dispatch: c, register: n, unregister: o } = e(r);
+  return u(() => (n(t, s), () => {
+    o(t);
+  }), [t, s, n, o]), c;
+}
+const C = () => {
+  const { refs: t } = e(r);
+  return t;
+}, d = () => {
+  const { value: t, refs: s } = e(r);
+  return [t, s.get(t)];
+};
+export {
+  b as useActiveTab,
+  d as useActiveTabControl,
+  p as useRegisterTabControl,
+  C as useTabControls,
+  T as useTabDispatch,
+  f as useTabsUid
+};
+//# sourceMappingURL=tabControl.js.map

package/dist/molecules/tabs/hooks/tabControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabControl.js","sources":["../../../../src/molecules/tabs/hooks/tabControl.ts"],"sourcesContent":["import { type RefObject, useContext, useEffect } from \"react\";\n\nimport { TabControlContext } from \"../context/TabControl\";\n\nexport const useActiveTab = () => {\n  const { value } = useContext(TabControlContext);\n\n  return value;\n};\n\nexport const useTabDispatch = () => {\n  const { dispatch } = useContext(TabControlContext);\n\n  return dispatch;\n};\n\nexport const useTabsUid = () => {\n  const { uid } = useContext(TabControlContext);\n\n  return uid;\n};\n\ninterface Props<T extends HTMLElement> {\n  value: number;\n  ref: RefObject<T>;\n}\n\nexport function useRegisterTabControl<T extends HTMLElement>({ value, ref }: Props<T>) {\n  const { dispatch, register, unregister } = useContext(TabControlContext);\n\n  useEffect(() => {\n    register(value, ref);\n\n    return () => {\n      unregister(value);\n    };\n  }, [value, ref, register, unregister]);\n\n  return dispatch;\n}\n\nexport const useTabControls = () => {\n  const { refs } = useContext(TabControlContext);\n\n  return refs;\n};\n\nexport const useActiveTabControl = () => {\n  const { value, refs } = useContext(TabControlContext);\n\n  return [value, refs.get(value)] as const;\n};\n"],"names":["useActiveTab","value","useContext","TabControlContext","useTabDispatch","dispatch","useTabsUid","uid","useRegisterTabControl","ref","register","unregister","useEffect","useTabControls","refs","useActiveTabControl"],"mappings":";;AAIO,MAAMA,IAAe,MAAM;AAChC,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAWC,CAAiB;AAEvC,SAAAF;AACT,GAEaG,IAAiB,MAAM;AAClC,QAAM,EAAE,UAAAC,EAAA,IAAaH,EAAWC,CAAiB;AAE1C,SAAAE;AACT,GAEaC,IAAa,MAAM;AAC9B,QAAM,EAAE,KAAAC,EAAA,IAAQL,EAAWC,CAAiB;AAErC,SAAAI;AACT;AAOO,SAASC,EAA6C,EAAE,OAAAP,GAAO,KAAAQ,KAAiB;AACrF,QAAM,EAAE,UAAAJ,GAAU,UAAAK,GAAU,YAAAC,EAAW,IAAIT,EAAWC,CAAiB;AAEvE,SAAAS,EAAU,OACRF,EAAST,GAAOQ,CAAG,GAEZ,MAAM;AACX,IAAAE,EAAWV,CAAK;AAAA,EAClB,IACC,CAACA,GAAOQ,GAAKC,GAAUC,CAAU,CAAC,GAE9BN;AACT;AAEO,MAAMQ,IAAiB,MAAM;AAClC,QAAM,EAAE,MAAAC,EAAA,IAASZ,EAAWC,CAAiB;AAEtC,SAAAW;AACT,GAEaC,IAAsB,MAAM;AACvC,QAAM,EAAE,OAAAd,GAAO,MAAAa,MAASZ,EAAWC,CAAiB;AAEpD,SAAO,CAACF,GAAOa,EAAK,IAAIb,CAAK,CAAC;AAChC;"}

package/dist/organisms/form/actions/FormAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormAction.js","sources":["../../../../src/organisms/form/actions/FormAction.tsx"],"sourcesContent":["import FormioUtils from \"formiojs/utils\";\nimport { PropsWithChildren, ReactElement } from \"react\";\n\nimport { ActionDefaultsType, ActionType, FormOptions, SubmissionType } from \"../../../interfaces\";\nimport { Form } from \"../../form/Form\";\n\nfunction mapData(options: any, defaults: ActionDefaultsType): any {\n  return {\n    ...defaults,\n    ...options\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction mapSettingsForm({ action, ...settingsForm }: any): any {\n  FormioUtils.eachComponent(settingsForm.components, (component: any) => {\n    const resourceExclude = \"\";\n\n    if (component.type === \"resourcefields\") {\n      component.type = \"select\";\n      component.label = component.title;\n      component.dataSrc = \"url\";\n      component.data = {\n        url: `${component.basePath}?type=resource${resourceExclude}`\n      };\n      component.valueProperty = \"_id\";\n      component.template = \"<span>{{ item.title }}</span>\";\n      component.persistent = true;\n    }\n  });\n\n  return settingsForm;\n}\n\nexport interface FormActionProps {\n  actionInfo: Partial<ActionType>;\n  submission?: Partial<SubmissionType>;\n  onSubmit?: (submission: SubmissionType<ActionType>) => void;\n  options: FormOptions;\n}\n\nexport function FormAction({ actionInfo, children, onSubmit, options, ...props }: PropsWithChildren<FormActionProps>): ReactElement {\n  const { form, submission } = (() => {\n    const submission = mapData(props.submission || {}, actionInfo.defaults!);\n    const form = mapSettingsForm(actionInfo.settingsForm);\n\n    return { form, submission: { data: submission } };\n  })();\n\n  return (\n    <div>\n      {children}\n\n      <Form<ActionType> form={form} submission={submission} onSubmit={onSubmit} options={options} />\n\n      {children}\n    </div>\n  );\n}\n"],"names":["mapData","options","defaults","mapSettingsForm","action","settingsForm","FormioUtils","component","resourceExclude","FormAction","actionInfo","children","onSubmit","props","form","submission","jsx","Form"],"mappings":";;;AAMA,SAASA,EAAQC,GAAcC,GAAmC;AACzD,SAAA;AAAA,IACL,GAAGA;AAAA,IACH,GAAGD;AAAA,EACL;AACF;AAGA,SAASE,EAAgB,EAAE,QAAAC,GAAQ,GAAGC,KAA0B;AAC9D,SAAAC,EAAY,cAAcD,EAAa,YAAY,CAACE,MAAmB;AACrE,UAAMC,IAAkB;AAEpB,IAAAD,EAAU,SAAS,qBACrBA,EAAU,OAAO,UACjBA,EAAU,QAAQA,EAAU,OAC5BA,EAAU,UAAU,OACpBA,EAAU,OAAO;AAAA,MACf,KAAK,GAAGA,EAAU,QAAQ,iBAAiBC,CAAe;AAAA,IAC5D,GACAD,EAAU,gBAAgB,OAC1BA,EAAU,WAAW,iCACrBA,EAAU,aAAa;AAAA,EACzB,CACD,GAEMF;AACT;AASgB,SAAAI,EAAW,EAAE,YAAAC,GAAY,UAAAC,GAAU,UAAAC,GAAU,SAAAX,GAAS,GAAGY,KAA2D;AAClI,QAAM,EAAE,MAAAC,GAAM,YAAAC,EAAW,KAAK,MAAM;AAClC,UAAMA,IAAaf,EAAQa,EAAM,cAAc,CAAC,GAAGH,EAAW,QAAS;AAGvE,WAAO,EAAE,MAFIP,EAAgBO,EAAW,YAAY,GAErC,YAAY,EAAE,MAAMK,IAAa;AAAA,EAAA,GAC/C;AAEH,2BACG,OACE,EAAA,UAAA;AAAA,IAAAJ;AAAA,IAEA,gBAAAK,EAAAC,GAAA,EAAiB,MAAAH,GAAY,YAAAC,GAAwB,UAAAH,GAAoB,SAAAX,GAAkB;AAAA,IAE3FU;AAAA,EAAA,GACH;AAEJ;"}

package/dist/organisms/form/builder/FormEdit.d.ts

@@ -4,5 +4,7 @@ import { UseFormEditHookProps } from './useFormEdit';
 export interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {
     options?: FormOptions;
     layout?: "html5" | "choicesjs" | "react";
+    className?: string;
+    style?: React.CSSProperties;
 }
-export declare function FormEdit({ form: initialForm, typeChoices, displayChoices, enableTags, onSubmit: initialOnSubmit, onCopy: initialOnCopy, ...props }: FormEditProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormEdit({ form: initialForm, typeChoices, displayChoices, enableTags, onSubmit: initialOnSubmit, onCopy: initialOnCopy, className, style, ...props }: FormEditProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/form/builder/FormEdit.js

@@ -1,70 +1,73 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { createElement as $ } from "react";
-import { getComponent as t } from "../../../registries/components.js";
-import { useFormEdit as j } from "./useFormEdit.js";
-function P({
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { createElement as v } from "react";
+import { c as A } from "../../../chunks/index.js";
+import { getComponent as n } from "../../../registries/components.js";
+import { useFormEdit as B } from "./useFormEdit.js";
+function V({
   form: c,
   typeChoices: r,
-  displayChoices: e,
-  enableTags: m,
+  displayChoices: m,
+  enableTags: e,
   onSubmit: f,
   onCopy: l,
-  ...n
+  className: u,
+  style: p,
+  ...t
 }) {
-  const { form: o, isValid: u, setChange: i, hasRedo: p, hasChanged: C, hasUndo: F, redo: h, undo: y, reset: g, onSubmit: E, onCopy: b } = j({
+  const { form: o, isValid: C, setChange: i, hasRedo: F, hasChanged: h, hasUndo: y, redo: g, undo: E, reset: b, onSubmit: x, onCopy: R } = B({
     form: c,
     typeChoices: r,
-    displayChoices: e,
-    enableTags: m,
+    displayChoices: m,
+    enableTags: e,
     onSubmit: f,
     onCopy: l
-  }), { options: d = {} } = n, x = t("FormParameters"), R = t("FormBuilder"), S = t("FormEditCTAs");
-  return /* @__PURE__ */ s("div", { className: "form-edit-container", children: [
-    /* @__PURE__ */ s("div", { className: "form-edit", children: [
+  }), { options: s = {} } = t, S = n("FormParameters"), _ = n("FormBuilder"), $ = n("FormEditCTAs");
+  return /* @__PURE__ */ d("div", { className: A("form-edit-container", u), style: p, children: [
+    /* @__PURE__ */ d("div", { className: "form-edit", children: [
       /* @__PURE__ */ a(
-        x,
+        S,
         {
-          enableTags: m,
+          enableTags: e,
           typeChoices: r,
-          displayChoices: e,
+          displayChoices: m,
           form: o,
           onChange: i,
-          layout: n.layout
+          layout: t.layout
         },
         `form-settings-${o._id}`
       ),
       /* @__PURE__ */ a(
-        S,
+        $,
         {
-          options: d,
-          hasRedo: p,
-          hasUndo: F,
-          disabled: !(u && C),
-          onRedo: h,
-          onUndo: y,
-          onReset: g,
-          onCopy: b,
-          onSubmit: E
+          options: s,
+          hasRedo: F,
+          hasUndo: y,
+          disabled: !(C && h),
+          onRedo: g,
+          onUndo: E,
+          onReset: b,
+          onCopy: R,
+          onSubmit: x
         },
         `form-edit-ctas-${o._id}`
       )
     ] }),
-    /* @__PURE__ */ $(
-      R,
+    /* @__PURE__ */ v(
+      _,
       {
-        ...n,
+        ...t,
         key: `form-builder-${o._id}`,
         components: o.components,
         display: o.display,
-        options: d,
-        onChange: (_) => {
-          i("components", _);
+        options: s,
+        onChange: (j) => {
+          i("components", j);
         }
       }
     )
   ] });
 }
 export {
-  P as FormEdit
+  V as FormEdit
 };
 //# sourceMappingURL=FormEdit.js.map

package/dist/organisms/form/builder/FormEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormEdit.js","sources":["../../../../src/organisms/form/builder/FormEdit.tsx"],"sourcesContent":["import type { FormOptions } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport { FormBuilder as DefaultFormBuilder } from \"./FormBuilder\";\nimport { FormEditCTAs as DefaultFormEditCTAs } from \"./FormEditCtas\";\nimport { FormParameters as DefaultFormParameters } from \"./FormParameters\";\nimport { FormBuilderEvents } from \"./useFormBuilder\";\nimport { useFormEdit, UseFormEditHookProps } from \"./useFormEdit\";\n\nexport interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {\n  options?: FormOptions;\n  layout?: \"html5\" | \"choicesjs\" | \"react\";\n}\n\nexport function FormEdit({\n  form: initialForm,\n  typeChoices,\n  displayChoices,\n  enableTags,\n  onSubmit: initialOnSubmit,\n  onCopy: initialOnCopy,\n  ...props\n}: FormEditProps) {\n  const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit({\n    form: initialForm,\n    typeChoices,\n    displayChoices,\n    enableTags,\n    onSubmit: initialOnSubmit,\n    onCopy: initialOnCopy\n  });\n\n  const { options = {} } = props;\n  const FormParameters = getComponent<typeof DefaultFormParameters>(\"FormParameters\");\n  const FormBuilder = getComponent<typeof DefaultFormBuilder>(\"FormBuilder\");\n  const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>(\"FormEditCTAs\");\n\n  return (\n    <div className='form-edit-container'>\n      <div className='form-edit'>\n        <FormParameters\n          enableTags={enableTags}\n          typeChoices={typeChoices}\n          displayChoices={displayChoices}\n          key={`form-settings-${form._id}`}\n          form={form}\n          onChange={setChange}\n          layout={props.layout}\n        />\n        <FormEditCTAs\n          key={`form-edit-ctas-${form._id}`}\n          options={options}\n          hasRedo={hasRedo}\n          hasUndo={hasUndo}\n          disabled={!(isValid && hasChanged)}\n          onRedo={redo}\n          onUndo={undo}\n          onReset={reset}\n          onCopy={onCopy}\n          onSubmit={onSubmit}\n        />\n      </div>\n\n      <FormBuilder\n        {...props}\n        key={`form-builder-${form._id}`}\n        components={form.components!}\n        display={form.display}\n        options={options}\n        onChange={(components) => {\n          setChange(\"components\", components);\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["FormEdit","initialForm","typeChoices","displayChoices","enableTags","initialOnSubmit","initialOnCopy","props","form","isValid","setChange","hasRedo","hasChanged","hasUndo","redo","undo","reset","onSubmit","onCopy","useFormEdit","options","FormParameters","getComponent","FormBuilder","FormEditCTAs","jsxs","jsx","createElement","components"],"mappings":";;;;AAaO,SAASA,EAAS;AAAA,EACvB,MAAMC;AAAA,EACN,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,QAAQC;AAAA,EACR,GAAGC;AACL,GAAkB;AAChB,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,SAAAC,GAAS,YAAAC,GAAY,SAAAC,GAAS,MAAAC,GAAM,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,QAAAC,EAAA,IAAWC,EAAY;AAAA,IAClH,MAAMlB;AAAA,IACN,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAUC;AAAA,IACV,QAAQC;AAAA,EAAA,CACT,GAEK,EAAE,SAAAc,IAAU,CAAC,EAAA,IAAMb,GACnBc,IAAiBC,EAA2C,gBAAgB,GAC5EC,IAAcD,EAAwC,aAAa,GACnEE,IAAeF,EAAyC,cAAc;AAG1E,SAAA,gBAAAG,EAAC,OAAI,EAAA,WAAU,uBACb,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACL;AAAA,QAAA;AAAA,UACC,YAAAjB;AAAA,UACA,aAAAF;AAAA,UACA,gBAAAC;AAAA,UAEA,MAAAK;AAAA,UACA,UAAUE;AAAA,UACV,QAAQH,EAAM;AAAA,QAAA;AAAA,QAHT,iBAAiBC,EAAK,GAAG;AAAA,MAIhC;AAAA,MACA,gBAAAkB;AAAA,QAACF;AAAA,QAAA;AAAA,UAEC,SAAAJ;AAAA,UACA,SAAAT;AAAA,UACA,SAAAE;AAAA,UACA,UAAU,EAAEJ,KAAWG;AAAA,UACvB,QAAQE;AAAA,UACR,QAAQC;AAAA,UACR,SAASC;AAAA,UACT,QAAAE;AAAA,UACA,UAAAD;AAAA,QAAA;AAAA,QATK,kBAAkBT,EAAK,GAAG;AAAA,MAAA;AAAA,IAUjC,GACF;AAAA,IAEA,gBAAAmB;AAAA,MAACJ;AAAA,MAAA;AAAA,QACE,GAAGhB;AAAA,QACJ,KAAK,gBAAgBC,EAAK,GAAG;AAAA,QAC7B,YAAYA,EAAK;AAAA,QACjB,SAASA,EAAK;AAAA,QACd,SAAAY;AAAA,QACA,UAAU,CAACQ,MAAe;AACxB,UAAAlB,EAAU,cAAckB,CAAU;AAAA,QAAA;AAAA,MACpC;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"FormEdit.js","sources":["../../../../src/organisms/form/builder/FormEdit.tsx"],"sourcesContent":["import classnames from \"classnames\";\n\nimport type { FormOptions } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport { FormBuilder as DefaultFormBuilder } from \"./FormBuilder\";\nimport { FormEditCTAs as DefaultFormEditCTAs } from \"./FormEditCtas\";\nimport { FormParameters as DefaultFormParameters } from \"./FormParameters\";\nimport { FormBuilderEvents } from \"./useFormBuilder\";\nimport { useFormEdit, UseFormEditHookProps } from \"./useFormEdit\";\n\nexport interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {\n  options?: FormOptions;\n  layout?: \"html5\" | \"choicesjs\" | \"react\";\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function FormEdit({\n  form: initialForm,\n  typeChoices,\n  displayChoices,\n  enableTags,\n  onSubmit: initialOnSubmit,\n  onCopy: initialOnCopy,\n  className,\n  style,\n  ...props\n}: FormEditProps) {\n  const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit({\n    form: initialForm,\n    typeChoices,\n    displayChoices,\n    enableTags,\n    onSubmit: initialOnSubmit,\n    onCopy: initialOnCopy\n  });\n\n  const { options = {} } = props;\n  const FormParameters = getComponent<typeof DefaultFormParameters>(\"FormParameters\");\n  const FormBuilder = getComponent<typeof DefaultFormBuilder>(\"FormBuilder\");\n  const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>(\"FormEditCTAs\");\n\n  return (\n    <div className={classnames(\"form-edit-container\", className)} style={style}>\n      <div className='form-edit'>\n        <FormParameters\n          enableTags={enableTags}\n          typeChoices={typeChoices}\n          displayChoices={displayChoices}\n          key={`form-settings-${form._id}`}\n          form={form}\n          onChange={setChange}\n          layout={props.layout}\n        />\n        <FormEditCTAs\n          key={`form-edit-ctas-${form._id}`}\n          options={options}\n          hasRedo={hasRedo}\n          hasUndo={hasUndo}\n          disabled={!(isValid && hasChanged)}\n          onRedo={redo}\n          onUndo={undo}\n          onReset={reset}\n          onCopy={onCopy}\n          onSubmit={onSubmit}\n        />\n      </div>\n\n      <FormBuilder\n        {...props}\n        key={`form-builder-${form._id}`}\n        components={form.components!}\n        display={form.display}\n        options={options}\n        onChange={(components) => {\n          setChange(\"components\", components);\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["FormEdit","initialForm","typeChoices","displayChoices","enableTags","initialOnSubmit","initialOnCopy","className","style","props","form","isValid","setChange","hasRedo","hasChanged","hasUndo","redo","undo","reset","onSubmit","onCopy","useFormEdit","options","FormParameters","getComponent","FormBuilder","FormEditCTAs","classnames","jsxs","jsx","createElement","components"],"mappings":";;;;;AAiBO,SAASA,EAAS;AAAA,EACvB,MAAMC;AAAA,EACN,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,QAAQC;AAAA,EACR,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,SAAAC,GAAS,YAAAC,GAAY,SAAAC,GAAS,MAAAC,GAAM,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,QAAAC,EAAA,IAAWC,EAAY;AAAA,IAClH,MAAMpB;AAAA,IACN,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAUC;AAAA,IACV,QAAQC;AAAA,EAAA,CACT,GAEK,EAAE,SAAAgB,IAAU,CAAC,EAAA,IAAMb,GACnBc,IAAiBC,EAA2C,gBAAgB,GAC5EC,IAAcD,EAAwC,aAAa,GACnEE,IAAeF,EAAyC,cAAc;AAE5E,2BACG,OAAI,EAAA,WAAWG,EAAW,uBAAuBpB,CAAS,GAAG,OAAAC,GAC5D,UAAA;AAAA,IAAC,gBAAAoB,EAAA,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACN;AAAA,QAAA;AAAA,UACC,YAAAnB;AAAA,UACA,aAAAF;AAAA,UACA,gBAAAC;AAAA,UAEA,MAAAO;AAAA,UACA,UAAUE;AAAA,UACV,QAAQH,EAAM;AAAA,QAAA;AAAA,QAHT,iBAAiBC,EAAK,GAAG;AAAA,MAIhC;AAAA,MACA,gBAAAmB;AAAA,QAACH;AAAA,QAAA;AAAA,UAEC,SAAAJ;AAAA,UACA,SAAAT;AAAA,UACA,SAAAE;AAAA,UACA,UAAU,EAAEJ,KAAWG;AAAA,UACvB,QAAQE;AAAA,UACR,QAAQC;AAAA,UACR,SAASC;AAAA,UACT,QAAAE;AAAA,UACA,UAAAD;AAAA,QAAA;AAAA,QATK,kBAAkBT,EAAK,GAAG;AAAA,MAAA;AAAA,IAUjC,GACF;AAAA,IAEA,gBAAAoB;AAAA,MAACL;AAAA,MAAA;AAAA,QACE,GAAGhB;AAAA,QACJ,KAAK,gBAAgBC,EAAK,GAAG;AAAA,QAC7B,YAAYA,EAAK;AAAA,QACjB,SAASA,EAAK;AAAA,QACd,SAAAY;AAAA,QACA,UAAU,CAACS,MAAe;AACxB,UAAAnB,EAAU,cAAcmB,CAAU;AAAA,QAAA;AAAA,MACpC;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/organisms/form/builder/useFormEdit.js

@@ -1,31 +1,31 @@
 import s from "lodash/cloneDeep";
 import { useReducer as y, useEffect as g } from "react";
 import { reducer as C, createInitialState as S, hasChanged as b } from "./FormEdit.reducer.js";
-function R(e) {
-  const [{ current: t, future: m, past: i }, o] = y(C, S(e)), u = () => {
-    e.onSubmit && typeof e.onSubmit == "function" && e.onSubmit(t);
-  }, a = () => {
-    e.onSubmit && typeof e.onCopy == "function" && e.onCopy(t);
+function R(t) {
+  const [{ current: e, future: m, past: i }, o] = y(C, S(t)), a = () => {
+    t.onSubmit && typeof t.onSubmit == "function" && t.onSubmit(e);
+  }, d = () => {
+    t.onSubmit && typeof t.onCopy == "function" && t.onCopy(e);
   };
   g(() => {
-    e.form && (t._id !== e.form._id || t.modified !== e.form.modified) && o({ type: "replaceForm", value: e.form });
-  }, [e.form]);
+    t.form && ((e == null ? void 0 : e._id) !== t.form._id || e.modified !== t.form.modified) && o({ type: "replaceForm", value: t.form });
+  }, [t.form]);
   const f = (n) => {
-    b(t, { ...t, ...n }) && o({ type: "formChange", value: n });
-  }, c = () => o({ type: "redo" }), r = () => o({ type: "undo" }), d = () => o({ type: "reset" }), h = (n, l) => {
-    f({ ...t, [n]: l });
+    b(e, { ...e, ...n }) && o({ type: "formChange", value: n });
+  }, u = () => o({ type: "redo" }), c = () => o({ type: "undo" }), r = () => o({ type: "reset" }), h = (n, l) => {
+    f({ ...e, [n]: l });
   };
   return {
-    form: s(t),
-    redo: c,
-    undo: r,
-    reset: d,
+    form: s(e),
+    redo: u,
+    undo: c,
+    reset: r,
     hasChanged: !!i.length,
-    isValid: t.title && t.name && t.path,
+    isValid: e.title && e.name && e.path,
     hasUndo: !!i.length,
     hasRedo: !!m.length,
-    onSubmit: u,
-    onCopy: a,
+    onSubmit: a,
+    onCopy: d,
     formChange: f,
     setChange: h
   };

package/dist/organisms/form/builder/useFormEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormEdit.js","sources":["../../../../src/organisms/form/builder/useFormEdit.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport { useEffect, useReducer } from \"react\";\n\nimport type { FormType } from \"../../../interfaces\";\nimport { createInitialState, hasChanged, reducer } from \"./FormEdit.reducer\";\n\nexport interface UseFormEditHookProps extends Record<string, unknown> {\n  form?: Partial<FormType>;\n  typeChoices?: { label: string; value: any }[];\n  displayChoices?: { label: string; value: any }[];\n  enableTags?: boolean;\n  onSubmit?: (form: Partial<FormType>) => void;\n  onCopy?: (form: Partial<FormType>) => void;\n}\n\nexport function useFormEdit(props: UseFormEditHookProps) {\n  const [{ current, future, past }, dispatchFormAction] = useReducer(reducer, createInitialState(props));\n\n  const onSubmit = () => {\n    if (props.onSubmit && typeof props.onSubmit === \"function\") {\n      props.onSubmit(current);\n    }\n  };\n  const onCopy = () => {\n    if (props.onSubmit && typeof props.onCopy === \"function\") {\n      props.onCopy(current);\n    }\n  };\n\n  useEffect(() => {\n    if (props.form && (current._id !== props.form._id || current.modified !== props.form.modified)) {\n      dispatchFormAction({ type: \"replaceForm\", value: props.form });\n    }\n  }, [props.form]);\n\n  const formChange = (newForm: Partial<FormType>) => {\n    if (hasChanged(current, { ...current, ...newForm })) {\n      dispatchFormAction({ type: \"formChange\", value: newForm });\n    }\n  };\n\n  const redo = () => dispatchFormAction({ type: \"redo\" });\n  const undo = () => dispatchFormAction({ type: \"undo\" });\n  const reset = () => dispatchFormAction({ type: \"reset\" });\n\n  const setChange = (path: string | undefined, value: any) => {\n    formChange({ ...current, [path!]: value });\n  };\n\n  return {\n    form: cloneDeep(current),\n    redo,\n    undo,\n    reset,\n    hasChanged: !!past.length,\n    isValid: current.title && current.name && current.path,\n    hasUndo: !!past.length,\n    hasRedo: !!future.length,\n    onSubmit,\n    onCopy,\n    formChange,\n    setChange\n  };\n}\n"],"names":["useFormEdit","props","current","future","past","dispatchFormAction","useReducer","reducer","createInitialState","onSubmit","onCopy","useEffect","formChange","newForm","hasChanged","redo","undo","reset","setChange","path","value","cloneDeep"],"mappings":";;;AAeO,SAASA,EAAYC,GAA6B;AACvD,QAAM,CAAC,EAAE,SAAAC,GAAS,QAAAC,GAAQ,MAAAC,EAAK,GAAGC,CAAkB,IAAIC,EAAWC,GAASC,EAAmBP,CAAK,CAAC,GAE/FQ,IAAW,MAAM;AACrB,IAAIR,EAAM,YAAY,OAAOA,EAAM,YAAa,cAC9CA,EAAM,SAASC,CAAO;AAAA,EAE1B,GACMQ,IAAS,MAAM;AACnB,IAAIT,EAAM,YAAY,OAAOA,EAAM,UAAW,cAC5CA,EAAM,OAAOC,CAAO;AAAA,EAExB;AAEA,EAAAS,EAAU,MAAM;AACV,IAAAV,EAAM,SAASC,EAAQ,QAAQD,EAAM,KAAK,OAAOC,EAAQ,aAAaD,EAAM,KAAK,aACnFI,EAAmB,EAAE,MAAM,eAAe,OAAOJ,EAAM,MAAM;AAAA,EAC/D,GACC,CAACA,EAAM,IAAI,CAAC;AAET,QAAAW,IAAa,CAACC,MAA+B;AAC7C,IAAAC,EAAWZ,GAAS,EAAE,GAAGA,GAAS,GAAGW,EAAA,CAAS,KAChDR,EAAmB,EAAE,MAAM,cAAc,OAAOQ,GAAS;AAAA,EAE7D,GAEME,IAAO,MAAMV,EAAmB,EAAE,MAAM,QAAQ,GAChDW,IAAO,MAAMX,EAAmB,EAAE,MAAM,QAAQ,GAChDY,IAAQ,MAAMZ,EAAmB,EAAE,MAAM,SAAS,GAElDa,IAAY,CAACC,GAA0BC,MAAe;AAC1D,IAAAR,EAAW,EAAE,GAAGV,GAAS,CAACiB,CAAK,GAAGC,GAAO;AAAA,EAC3C;AAEO,SAAA;AAAA,IACL,MAAMC,EAAUnB,CAAO;AAAA,IACvB,MAAAa;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAY,CAAC,CAACb,EAAK;AAAA,IACnB,SAASF,EAAQ,SAASA,EAAQ,QAAQA,EAAQ;AAAA,IAClD,SAAS,CAAC,CAACE,EAAK;AAAA,IAChB,SAAS,CAAC,CAACD,EAAO;AAAA,IAClB,UAAAM;AAAA,IACA,QAAAC;AAAA,IACA,YAAAE;AAAA,IACA,WAAAM;AAAA,EACF;AACF;"}
+{"version":3,"file":"useFormEdit.js","sources":["../../../../src/organisms/form/builder/useFormEdit.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport { useEffect, useReducer } from \"react\";\n\nimport type { FormType } from \"../../../interfaces\";\nimport { createInitialState, hasChanged, reducer } from \"./FormEdit.reducer\";\n\nexport interface UseFormEditHookProps extends Record<string, unknown> {\n  form?: Partial<FormType>;\n  typeChoices?: { label: string; value: any }[];\n  displayChoices?: { label: string; value: any }[];\n  enableTags?: boolean;\n  onSubmit?: (form: Partial<FormType>) => void;\n  onCopy?: (form: Partial<FormType>) => void;\n}\n\nexport function useFormEdit(props: UseFormEditHookProps) {\n  const [{ current, future, past }, dispatchFormAction] = useReducer(reducer, createInitialState(props));\n\n  const onSubmit = () => {\n    if (props.onSubmit && typeof props.onSubmit === \"function\") {\n      props.onSubmit(current);\n    }\n  };\n  const onCopy = () => {\n    if (props.onSubmit && typeof props.onCopy === \"function\") {\n      props.onCopy(current);\n    }\n  };\n\n  useEffect(() => {\n    if (props.form && (current?._id !== props.form._id || current.modified !== props.form.modified)) {\n      dispatchFormAction({ type: \"replaceForm\", value: props.form });\n    }\n  }, [props.form]);\n\n  const formChange = (newForm: Partial<FormType>) => {\n    if (hasChanged(current, { ...current, ...newForm })) {\n      dispatchFormAction({ type: \"formChange\", value: newForm });\n    }\n  };\n\n  const redo = () => dispatchFormAction({ type: \"redo\" });\n  const undo = () => dispatchFormAction({ type: \"undo\" });\n  const reset = () => dispatchFormAction({ type: \"reset\" });\n\n  const setChange = (path: string | undefined, value: any) => {\n    formChange({ ...current, [path!]: value });\n  };\n\n  return {\n    form: cloneDeep(current),\n    redo,\n    undo,\n    reset,\n    hasChanged: !!past.length,\n    isValid: current.title && current.name && current.path,\n    hasUndo: !!past.length,\n    hasRedo: !!future.length,\n    onSubmit,\n    onCopy,\n    formChange,\n    setChange\n  };\n}\n"],"names":["useFormEdit","props","current","future","past","dispatchFormAction","useReducer","reducer","createInitialState","onSubmit","onCopy","useEffect","formChange","newForm","hasChanged","redo","undo","reset","setChange","path","value","cloneDeep"],"mappings":";;;AAeO,SAASA,EAAYC,GAA6B;AACvD,QAAM,CAAC,EAAE,SAAAC,GAAS,QAAAC,GAAQ,MAAAC,EAAK,GAAGC,CAAkB,IAAIC,EAAWC,GAASC,EAAmBP,CAAK,CAAC,GAE/FQ,IAAW,MAAM;AACrB,IAAIR,EAAM,YAAY,OAAOA,EAAM,YAAa,cAC9CA,EAAM,SAASC,CAAO;AAAA,EAE1B,GACMQ,IAAS,MAAM;AACnB,IAAIT,EAAM,YAAY,OAAOA,EAAM,UAAW,cAC5CA,EAAM,OAAOC,CAAO;AAAA,EAExB;AAEA,EAAAS,EAAU,MAAM;AACV,IAAAV,EAAM,UAASC,KAAA,gBAAAA,EAAS,SAAQD,EAAM,KAAK,OAAOC,EAAQ,aAAaD,EAAM,KAAK,aACpFI,EAAmB,EAAE,MAAM,eAAe,OAAOJ,EAAM,MAAM;AAAA,EAC/D,GACC,CAACA,EAAM,IAAI,CAAC;AAET,QAAAW,IAAa,CAACC,MAA+B;AAC7C,IAAAC,EAAWZ,GAAS,EAAE,GAAGA,GAAS,GAAGW,EAAA,CAAS,KAChDR,EAAmB,EAAE,MAAM,cAAc,OAAOQ,GAAS;AAAA,EAE7D,GAEME,IAAO,MAAMV,EAAmB,EAAE,MAAM,QAAQ,GAChDW,IAAO,MAAMX,EAAmB,EAAE,MAAM,QAAQ,GAChDY,IAAQ,MAAMZ,EAAmB,EAAE,MAAM,SAAS,GAElDa,IAAY,CAACC,GAA0BC,MAAe;AAC1D,IAAAR,EAAW,EAAE,GAAGV,GAAS,CAACiB,CAAK,GAAGC,GAAO;AAAA,EAC3C;AAEO,SAAA;AAAA,IACL,MAAMC,EAAUnB,CAAO;AAAA,IACvB,MAAAa;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAY,CAAC,CAACb,EAAK;AAAA,IACnB,SAASF,EAAQ,SAASA,EAAQ,QAAQA,EAAQ;AAAA,IAClD,SAAS,CAAC,CAACE,EAAK;AAAA,IAChB,SAAS,CAAC,CAACD,EAAO;AAAA,IAClB,UAAAM;AAAA,IACA,QAAAC;AAAA,IACA,YAAAE;AAAA,IACA,WAAAM;AAAA,EACF;AACF;"}

package/dist/organisms/form/exports/FormExport.d.ts

@@ -0,0 +1,5 @@
+export interface FormExportProps {
+    i18n?: (key: string) => string;
+    onClick?: (action: "export:form" | "export:submissions", format: "json" | "csv") => void;
+}
+export declare function FormExport({ i18n, onClick }: FormExportProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/form/exports/FormExport.js

@@ -0,0 +1,55 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { Icon as m } from "../../../atoms/icon/Icon.js";
+import { getComponent as c } from "../../../registries/components.js";
+function o({ i18n: r = (t) => t, onClick: s }) {
+  const t = c("Card");
+  return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
+    /* @__PURE__ */ e("div", { className: "sm:w-1/2", children: /* @__PURE__ */ a(
+      t,
+      {
+        label: /* @__PURE__ */ a("span", { className: "flex items-center", children: [
+          /* @__PURE__ */ e(m, { name: "detail", className: "mr-1 text-secondary" }),
+          " ",
+          r("Export schema")
+        ] }),
+        children: [
+          /* @__PURE__ */ e("p", { className: "mb-5", children: r("Export the formIO schema:") }),
+          /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ a("button", { className: "btn btn-primary", onClick: () => s == null ? void 0 : s("export:form", "json"), children: [
+            /* @__PURE__ */ e(m, { name: "code", className: "mr-1" }),
+            " ",
+            r("Json")
+          ] }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "sm:w-1/2", children: /* @__PURE__ */ a(
+      t,
+      {
+        label: /* @__PURE__ */ a("span", { className: "flex items-center", children: [
+          /* @__PURE__ */ e(m, { name: "data", className: "mr-1 text-secondary" }),
+          " ",
+          r("Export submissions")
+        ] }),
+        children: [
+          /* @__PURE__ */ e("p", { className: "mb-5", children: r("Export all submission as JSON or CSV:") }),
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-center", children: [
+            /* @__PURE__ */ a("button", { className: "btn btn-primary mr-4", onClick: () => s == null ? void 0 : s("export:submissions", "json"), children: [
+              /* @__PURE__ */ e(m, { name: "code", className: "mr-1" }),
+              " ",
+              r("Json")
+            ] }),
+            /* @__PURE__ */ a("button", { className: "btn btn-primary", onClick: () => s == null ? void 0 : s("export:submissions", "csv"), children: [
+              /* @__PURE__ */ e(m, { name: "spreadsheet", className: "mr-1" }),
+              " ",
+              r("Csv")
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}
+export {
+  o as FormExport
+};
+//# sourceMappingURL=FormExport.js.map

package/dist/organisms/form/exports/FormExport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormExport.js","sources":["../../../../src/organisms/form/exports/FormExport.tsx"],"sourcesContent":["import { Icon } from \"../../../atoms/icon/Icon.js\";\nimport type { Card } from \"../../../molecules/card/Card.js\";\nimport { getComponent } from \"../../../registries/components.js\";\n\nexport interface FormExportProps {\n  i18n?: (key: string) => string;\n  onClick?: (action: \"export:form\" | \"export:submissions\", format: \"json\" | \"csv\") => void;\n}\n\nexport function FormExport({ i18n = (f: string) => f, onClick }: FormExportProps) {\n  const FCard = getComponent<typeof Card>(\"Card\");\n\n  return (\n    <div>\n      <div className={\"flex gap-3\"}>\n        <div className={\"sm:w-1/2\"}>\n          <FCard\n            label={\n              (\n                <span className={\"flex items-center\"}>\n                  <Icon name={\"detail\"} className={\"mr-1 text-secondary\"} /> {i18n(`Export schema`)}\n                </span>\n              ) as any\n            }\n          >\n            <p className={\"mb-5\"}>{i18n(\"Export the formIO schema:\")}</p>\n            <div className={\"flex items-center justify-center\"}>\n              <button className={\"btn btn-primary\"} onClick={() => onClick?.(\"export:form\", \"json\")}>\n                <Icon name={\"code\"} className={\"mr-1\"} /> {i18n(`Json`)}\n              </button>\n            </div>\n          </FCard>\n        </div>\n        <div className={\"sm:w-1/2\"}>\n          <FCard\n            label={\n              (\n                <span className={\"flex items-center\"}>\n                  <Icon name={\"data\"} className={\"mr-1 text-secondary\"} /> {i18n(`Export submissions`)}\n                </span>\n              ) as any\n            }\n          >\n            <p className={\"mb-5\"}>{i18n(\"Export all submission as JSON or CSV:\")}</p>\n            <div className={\"flex items-center justify-center\"}>\n              <button className={\"btn btn-primary mr-4\"} onClick={() => onClick?.(\"export:submissions\", \"json\")}>\n                <Icon name={\"code\"} className={\"mr-1\"} /> {i18n(`Json`)}\n              </button>\n              <button className={\"btn btn-primary\"} onClick={() => onClick?.(\"export:submissions\", \"csv\")}>\n                <Icon name={\"spreadsheet\"} className={\"mr-1\"} /> {i18n(`Csv`)}\n              </button>\n            </div>\n          </FCard>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["FormExport","i18n","f","onClick","FCard","getComponent","jsx","jsxs","Icon"],"mappings":";;;AASO,SAASA,EAAW,EAAE,MAAAC,IAAO,CAACC,MAAcA,GAAG,SAAAC,KAA4B;AAC1E,QAAAC,IAAQC,EAA0B,MAAM;AAE9C,SACG,gBAAAC,EAAA,OAAA,EACC,UAAC,gBAAAC,EAAA,OAAA,EAAI,WAAW,cACd,UAAA;AAAA,IAAC,gBAAAD,EAAA,OAAA,EAAI,WAAW,YACd,UAAA,gBAAAC;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,OAEI,gBAAAG,EAAC,QAAK,EAAA,WAAW,qBACf,UAAA;AAAA,UAAA,gBAAAD,EAACE,GAAK,EAAA,MAAM,UAAU,WAAW,uBAAuB;AAAA,UAAE;AAAA,UAAEP,EAAK,eAAe;AAAA,QAAA,GAClF;AAAA,QAIJ,UAAA;AAAA,UAAA,gBAAAK,EAAC,KAAE,EAAA,WAAW,QAAS,UAAAL,EAAK,2BAA2B,GAAE;AAAA,UACxD,gBAAAK,EAAA,OAAA,EAAI,WAAW,oCACd,UAAC,gBAAAC,EAAA,UAAA,EAAO,WAAW,mBAAmB,SAAS,MAAMJ,KAAA,gBAAAA,EAAU,eAAe,SAC5E,UAAA;AAAA,YAAA,gBAAAG,EAACE,GAAK,EAAA,MAAM,QAAQ,WAAW,QAAQ;AAAA,YAAE;AAAA,YAAEP,EAAK,MAAM;AAAA,UAAA,EAAA,CACxD,EACF,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAK,EAAC,OAAI,EAAA,WAAW,YACd,UAAA,gBAAAC;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,OAEI,gBAAAG,EAAC,QAAK,EAAA,WAAW,qBACf,UAAA;AAAA,UAAA,gBAAAD,EAACE,GAAK,EAAA,MAAM,QAAQ,WAAW,uBAAuB;AAAA,UAAE;AAAA,UAAEP,EAAK,oBAAoB;AAAA,QAAA,GACrF;AAAA,QAIJ,UAAA;AAAA,UAAA,gBAAAK,EAAC,KAAE,EAAA,WAAW,QAAS,UAAAL,EAAK,uCAAuC,GAAE;AAAA,UACrE,gBAAAM,EAAC,OAAI,EAAA,WAAW,oCACd,UAAA;AAAA,YAAC,gBAAAA,EAAA,UAAA,EAAO,WAAW,wBAAwB,SAAS,MAAMJ,KAAA,gBAAAA,EAAU,sBAAsB,SACxF,UAAA;AAAA,cAAA,gBAAAG,EAACE,GAAK,EAAA,MAAM,QAAQ,WAAW,QAAQ;AAAA,cAAE;AAAA,cAAEP,EAAK,MAAM;AAAA,YAAA,GACxD;AAAA,YACA,gBAAAM,EAAC,YAAO,WAAW,mBAAmB,SAAS,MAAMJ,KAAA,gBAAAA,EAAU,sBAAsB,QACnF,UAAA;AAAA,cAAA,gBAAAG,EAACE,GAAK,EAAA,MAAM,eAAe,WAAW,QAAQ;AAAA,cAAE;AAAA,cAAEP,EAAK,KAAK;AAAA,YAAA,EAC9D,CAAA;AAAA,UAAA,EACF,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EAEJ,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;"}

package/dist/organisms/form/preview/FormPreview.d.ts

@@ -0,0 +1,6 @@
+import { FormType } from '../../../interfaces/index.js';
+export interface FormPreviewProps {
+    form: FormType;
+    i18n?: (key: string) => string;
+}
+export declare function FormPreview({ form, i18n }: FormPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/form/preview/FormPreview.js

@@ -0,0 +1,11 @@
+import { jsx as o } from "react/jsx-runtime";
+import { getComponent as m } from "../../../registries/components.js";
+import { Form as a } from "../Form.js";
+function l({ form: e, i18n: t = (r) => r }) {
+  const r = m("Card");
+  return /* @__PURE__ */ o("div", { className: "p-10 bg-gray-500", children: /* @__PURE__ */ o(r, { label: t(e.title || ""), className: "shadow", children: /* @__PURE__ */ o(a, { form: e, options: { i18n: t } }) }) });
+}
+export {
+  l as FormPreview
+};
+//# sourceMappingURL=FormPreview.js.map

package/dist/organisms/form/preview/FormPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormPreview.js","sources":["../../../../src/organisms/form/preview/FormPreview.tsx"],"sourcesContent":["import type { FormType } from \"../../../interfaces/index.js\";\nimport type { Card } from \"../../../molecules/card/Card.js\";\nimport { getComponent } from \"../../../registries/components.js\";\nimport { Form } from \"../Form.js\";\n\nexport interface FormPreviewProps {\n  form: FormType;\n  i18n?: (key: string) => string;\n}\n\nexport function FormPreview({ form, i18n = (f) => f }: FormPreviewProps) {\n  const FCard = getComponent<typeof Card>(\"Card\");\n\n  return (\n    <div className='p-10 bg-gray-500'>\n      <FCard label={i18n(form.title || \"\")} className={\"shadow\"}>\n        <Form form={form} options={{ i18n }} />\n      </FCard>\n    </div>\n  );\n}\n"],"names":["FormPreview","form","i18n","f","FCard","getComponent","jsx","Form"],"mappings":";;;AAUO,SAASA,EAAY,EAAE,MAAAC,GAAM,MAAAC,IAAO,CAACC,MAAMA,KAAuB;AACjE,QAAAC,IAAQC,EAA0B,MAAM;AAG5C,SAAA,gBAAAC,EAAC,SAAI,WAAU,oBACb,4BAACF,GAAM,EAAA,OAAOF,EAAKD,EAAK,SAAS,EAAE,GAAG,WAAW,UAC/C,4BAACM,GAAK,EAAA,MAAAN,GAAY,SAAS,EAAE,MAAAC,EAAA,GAAQ,EAAA,CACvC,EACF,CAAA;AAEJ;"}

package/dist/organisms/table/submissions/SubmissionsTable.d.ts

@@ -1,6 +1,14 @@
-import { FormType, SubmissionType } from '../../../interfaces';
+import { FormType, JSON, SubmissionType } from '../../../interfaces';
 import { TableProps } from '../../../molecules/table/Table';
-export type SubmissionsTableProps = Omit<TableProps<SubmissionType>, "columns"> & {
+export type SubmissionsTableProps<Data extends {
+    [key: string]: JSON;
+} = {
+    [key: string]: JSON;
+}> = Omit<TableProps<SubmissionType<Data>>, "columns"> & {
     form?: FormType;
 };
-export declare function SubmissionsTable({ form, ...props }: SubmissionsTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubmissionsTable<Data extends {
+    [key: string]: JSON;
+} = {
+    [key: string]: JSON;
+}>({ form, ...props }: SubmissionsTableProps<Data>): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/table/submissions/SubmissionsTable.js

@@ -1,7 +1,10 @@
 import { jsx as n } from "react/jsx-runtime";
 import { Table as s } from "../../../molecules/table/Table.js";
 import { mapFormToColumns as t } from "../../../molecules/table/utils/mapFormToColumns.js";
-function e({ form: o, ...m }) {
+function e({
+  form: o,
+  ...m
+}) {
   const r = o && t(o);
   return /* @__PURE__ */ n(s, { ...m, columns: r });
 }

package/dist/organisms/table/submissions/SubmissionsTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmissionsTable.js","sources":["../../../../src/organisms/table/submissions/SubmissionsTable.tsx"],"sourcesContent":["import type { FormType, SubmissionType } from \"../../../interfaces\";\nimport { Table, type TableProps } from \"../../../molecules/table/Table\";\nimport { mapFormToColumns } from \"../../../molecules/table/utils/mapFormToColumns.js\";\n\nexport type SubmissionsTableProps = Omit<TableProps<SubmissionType>, \"columns\"> & {\n  form?: FormType;\n};\n\nexport function SubmissionsTable({ form, ...props }: SubmissionsTableProps) {\n  const columns: any[] | undefined = form && mapFormToColumns(form);\n\n  return <Table {...props} columns={columns!} />;\n}\n"],"names":["SubmissionsTable","form","props","columns","mapFormToColumns","jsx","Table"],"mappings":";;;AAQO,SAASA,EAAiB,EAAE,MAAAC,GAAM,GAAGC,KAAgC;AACpE,QAAAC,IAA6BF,KAAQG,EAAiBH,CAAI;AAEhE,SAAQ,gBAAAI,EAAAC,GAAA,EAAO,GAAGJ,GAAO,SAAAC,EAAmB,CAAA;AAC9C;"}
+{"version":3,"file":"SubmissionsTable.js","sources":["../../../../src/organisms/table/submissions/SubmissionsTable.tsx"],"sourcesContent":["import type { FormType, JSON, SubmissionType } from \"../../../interfaces\";\nimport { Table, type TableProps } from \"../../../molecules/table/Table\";\nimport { mapFormToColumns } from \"../../../molecules/table/utils/mapFormToColumns.js\";\n\nexport type SubmissionsTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = Omit<\n  TableProps<SubmissionType<Data>>,\n  \"columns\"\n> & {\n  form?: FormType;\n};\n\nexport function SubmissionsTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({\n  form,\n  ...props\n}: SubmissionsTableProps<Data>) {\n  const columns: any[] | undefined = form && mapFormToColumns(form);\n\n  return <Table {...(props as any)} columns={columns!} />;\n}\n"],"names":["SubmissionsTable","form","props","columns","mapFormToColumns","jsx","Table"],"mappings":";;;AAWO,SAASA,EAAiF;AAAA,EAC/F,MAAAC;AAAA,EACA,GAAGC;AACL,GAAgC;AACxB,QAAAC,IAA6BF,KAAQG,EAAiBH,CAAI;AAEhE,SAAQ,gBAAAI,EAAAC,GAAA,EAAO,GAAIJ,GAAe,SAAAC,EAAmB,CAAA;AACvD;"}

package/dist/organisms/views/FormViews.d.ts

@@ -0,0 +1,24 @@
+import { JSON, PermissionsResolver } from '../../interfaces/index.js';
+import { FormAccessProps } from '../form/access/FormAccess.js';
+import { FormEditProps } from '../form/builder/FormEdit.js';
+import { ActionsTableProps } from '../table/actions/ActionsTable.js';
+import { SubmissionsTableProps } from '../table/submissions/SubmissionsTable.js';
+export type FormViewsProps<Data extends {
+    [key: string]: JSON;
+} = {
+    [key: string]: JSON;
+}> = {
+    form: FormEditProps["form"];
+    submissions: SubmissionsTableProps<Data>["data"];
+    availableActions: ActionsTableProps["availableActions"];
+    actions: ActionsTableProps["data"];
+    roles?: FormAccessProps["roles"];
+    i18n?: (key: string) => string;
+    onAction: () => void;
+    permissionsResolver?: PermissionsResolver<Data>;
+};
+export declare function FormViews<Data extends {
+    [key: string]: JSON;
+} = {
+    [key: string]: JSON;
+}>({ form, roles, availableActions, actions, permissionsResolver, submissions, i18n }: FormViewsProps<Data>): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/views/FormViews.js

@@ -0,0 +1,96 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { getComponent as i } from "../../registries/components.js";
+import { FormAccess as v } from "../form/access/FormAccess.js";
+import { FormEdit as f } from "../form/builder/FormEdit.js";
+import { FormExport as g } from "../form/exports/FormExport.js";
+import { FormPreview as w } from "../form/preview/FormPreview.js";
+import { FormSettings as y } from "../form/settings/FormSettings.js";
+import { ActionsTable as E } from "../table/actions/ActionsTable.js";
+import { SubmissionsTable as F } from "../table/submissions/SubmissionsTable.js";
+function N(t) {
+  return [
+    {
+      title: "Edit",
+      action: "submission:edit",
+      alias: "row",
+      icon: "edit",
+      permissionsResolver: t
+    },
+    {
+      action: "submission:delete",
+      icon: "trash",
+      buttonType: "danger",
+      permissionsResolver: t
+    }
+  ];
+}
+function x(t) {
+  return [
+    {
+      title: "Edit",
+      action: "action:edit",
+      alias: "row",
+      icon: "edit",
+      permissionsResolver: t
+    },
+    {
+      action: "action:delete",
+      icon: "trash",
+      buttonType: "danger",
+      permissionsResolver: t
+    }
+  ];
+}
+function D({
+  form: t,
+  roles: l,
+  availableActions: d,
+  actions: b,
+  permissionsResolver: s,
+  submissions: p,
+  i18n: e = (n) => n
+}) {
+  const n = i("Tabs"), u = i("TabList"), r = i("Tab"), m = i("TabsBody"), a = i("TabPanel"), h = N(s), T = x(s);
+  return /* @__PURE__ */ c(n, { children: [
+    /* @__PURE__ */ c(u, { children: [
+      /* @__PURE__ */ o(r, { value: 0, icon: "edit", children: e("Edit") }),
+      /* @__PURE__ */ o(r, { value: 1, icon: "data", children: e("Data") }),
+      /* @__PURE__ */ o(r, { value: 2, icon: "test-tube", children: e("Preview") }),
+      /* @__PURE__ */ o(r, { value: 3, icon: "paper-plane", children: e("Actions") }),
+      /* @__PURE__ */ o(r, { value: 4, icon: "lock", children: e("Access") }),
+      /* @__PURE__ */ o(r, { value: 5, icon: "download", children: e("Export") }),
+      /* @__PURE__ */ o(r, { value: 6, icon: "cog", children: e("Settings") })
+    ] }),
+    /* @__PURE__ */ c(m, { children: [
+      /* @__PURE__ */ o(a, { value: 0, className: "p-3 border-l-1 border-b-1 border-r-1 border-gray-300", children: /* @__PURE__ */ o(f, { form: t, options: { i18n: e } }) }),
+      /* @__PURE__ */ o(a, { value: 1, children: /* @__PURE__ */ o(
+        F,
+        {
+          className: "border-top-0",
+          form: t,
+          data: p,
+          i18n: e,
+          operations: h
+        }
+      ) }),
+      /* @__PURE__ */ o(a, { value: 2, children: /* @__PURE__ */ o(w, { form: t, i18n: e }) }),
+      /* @__PURE__ */ o(a, { value: 3, children: /* @__PURE__ */ o(
+        E,
+        {
+          className: "border-top-0",
+          availableActions: d,
+          data: b,
+          operations: T,
+          i18n: e
+        }
+      ) }),
+      /* @__PURE__ */ o(a, { value: 4, className: "pt-3", children: /* @__PURE__ */ o(v, { form: t, roles: l, options: { i18n: e } }) }),
+      /* @__PURE__ */ o(a, { value: 5, className: "pt-3", children: /* @__PURE__ */ o(g, { i18n: e }) }),
+      /* @__PURE__ */ o(a, { value: 6, className: "p-3 border-l-1 border-b-1 border-r-1 border-gray-300", children: /* @__PURE__ */ o(y, { form: t, options: {} }) })
+    ] })
+  ] });
+}
+export {
+  D as FormViews
+};
+//# sourceMappingURL=FormViews.js.map

package/dist/organisms/views/FormViews.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormViews.js","sources":["../../../src/organisms/views/FormViews.tsx"],"sourcesContent":["import type { FormType, JSON, PermissionsResolver } from \"../../interfaces/index.js\";\nimport type { Tab as DefaultTab } from \"../../molecules/tabs/Tab.js\";\nimport type { TabList as DefaultTabList } from \"../../molecules/tabs/TabList.js\";\nimport type { TabPanel as DefaultTabPanel } from \"../../molecules/tabs/TabPanel.js\";\nimport type { Tabs as DefaultTabs } from \"../../molecules/tabs/Tabs.js\";\nimport type { TabsBody as DefaultTabsBody } from \"../../molecules/tabs/TabsBody.js\";\nimport { getComponent } from \"../../registries/components.js\";\nimport { FormAccess, type FormAccessProps } from \"../form/access/FormAccess.js\";\nimport { FormEdit, type FormEditProps } from \"../form/builder/FormEdit.js\";\nimport { FormExport } from \"../form/exports/FormExport.js\";\nimport { FormPreview } from \"../form/preview/FormPreview.js\";\nimport { FormSettings } from \"../form/settings/FormSettings.js\";\nimport { ActionsTable, type ActionsTableProps } from \"../table/actions/ActionsTable.js\";\nimport { SubmissionsTable, type SubmissionsTableProps } from \"../table/submissions/SubmissionsTable.js\";\n\nexport type FormViewsProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = {\n  form: FormEditProps[\"form\"];\n  submissions: SubmissionsTableProps<Data>[\"data\"];\n  availableActions: ActionsTableProps[\"availableActions\"];\n  actions: ActionsTableProps[\"data\"];\n  roles?: FormAccessProps[\"roles\"];\n  i18n?: (key: string) => string;\n  onAction: () => void;\n  permissionsResolver?: PermissionsResolver<Data>;\n};\n\nfunction useSubmissionsOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(\n  permissionsResolver?: PermissionsResolver<Data>\n) {\n  return [\n    {\n      title: \"Edit\",\n      action: \"submission:edit\",\n      alias: \"row\",\n      icon: \"edit\",\n      permissionsResolver\n    },\n    {\n      action: \"submission:delete\",\n      icon: \"trash\",\n      buttonType: \"danger\",\n      permissionsResolver\n    }\n  ] as SubmissionsTableProps<Data>[\"operations\"];\n}\n\nfunction useActionsOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(\n  permissionsResolver?: PermissionsResolver<Data>\n) {\n  return [\n    {\n      title: \"Edit\",\n      action: \"action:edit\",\n      alias: \"row\",\n      icon: \"edit\",\n      permissionsResolver\n    },\n    {\n      action: \"action:delete\",\n      icon: \"trash\",\n      buttonType: \"danger\",\n      permissionsResolver\n    }\n  ] as SubmissionsTableProps<Data>[\"operations\"];\n}\n\nexport function FormViews<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({\n  form,\n  roles,\n  availableActions,\n  actions,\n  permissionsResolver,\n  submissions,\n  i18n = (f) => f\n}: FormViewsProps<Data>) {\n  const Tabs = getComponent<typeof DefaultTabs>(\"Tabs\");\n  const TabList = getComponent<typeof DefaultTabList>(\"TabList\");\n  const Tab = getComponent<typeof DefaultTab>(\"Tab\");\n  const TabsBody = getComponent<typeof DefaultTabsBody>(\"TabsBody\");\n  const TabPanel = getComponent<typeof DefaultTabPanel>(\"TabPanel\");\n  const submissionsOperations = useSubmissionsOperations<Data>(permissionsResolver);\n  const actionsOperations = useActionsOperations<any>(permissionsResolver);\n\n  return (\n    <Tabs>\n      <TabList>\n        <Tab value={0} icon='edit'>\n          {i18n(\"Edit\")}\n        </Tab>\n        <Tab value={1} icon='data'>\n          {i18n(\"Data\")}\n        </Tab>\n        <Tab value={2} icon='test-tube'>\n          {i18n(\"Preview\")}\n        </Tab>\n        <Tab value={3} icon='paper-plane'>\n          {i18n(\"Actions\")}\n        </Tab>\n        <Tab value={4} icon='lock'>\n          {i18n(\"Access\")}\n        </Tab>\n        <Tab value={5} icon='download'>\n          {i18n(\"Export\")}\n        </Tab>\n        <Tab value={6} icon='cog'>\n          {i18n(\"Settings\")}\n        </Tab>\n      </TabList>\n      <TabsBody>\n        <TabPanel value={0} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>\n          <FormEdit form={form} options={{ i18n }} />\n        </TabPanel>\n        <TabPanel value={1}>\n          <SubmissionsTable<Data>\n            className={\"border-top-0\"}\n            form={form as FormType}\n            data={submissions}\n            i18n={i18n}\n            operations={submissionsOperations}\n          />\n        </TabPanel>\n        <TabPanel value={2}>\n          <FormPreview form={form as FormType} i18n={i18n} />\n        </TabPanel>\n        <TabPanel value={3}>\n          <ActionsTable\n            className={\"border-top-0\"}\n            availableActions={availableActions}\n            data={actions}\n            operations={actionsOperations as any}\n            i18n={i18n}\n          />\n        </TabPanel>\n        <TabPanel value={4} className='pt-3'>\n          <FormAccess form={form as FormType} roles={roles} options={{ i18n }} />\n        </TabPanel>\n        <TabPanel value={5} className='pt-3'>\n          <FormExport i18n={i18n} />\n        </TabPanel>\n        <TabPanel value={6} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>\n          <FormSettings form={form as FormType} options={{}} />\n        </TabPanel>\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"names":["useSubmissionsOperations","permissionsResolver","useActionsOperations","FormViews","form","roles","availableActions","actions","submissions","i18n","f","Tabs","getComponent","TabList","Tab","TabsBody","TabPanel","submissionsOperations","actionsOperations","jsxs","jsx","FormEdit","SubmissionsTable","FormPreview","ActionsTable","FormAccess","FormExport","FormSettings"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.11",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",
@@ -44,8 +44,8 @@
   },
   "devDependencies": {
     "@tanstack/react-table": ">=8.20.6",
-    "@tsed/tailwind-formio": "3.0.0-alpha.10",
-    "@tsed/typescript": "3.0.0-alpha.10",
+    "@tsed/tailwind-formio": "3.0.0-alpha.11",
+    "@tsed/typescript": "3.0.0-alpha.11",
     "microbundle": "0.13.0",
     "vite": "5.4.11",
     "vitest": "2.1.8"

package/src/hooks/keyboard.constants.ts

@@ -0,0 +1,40 @@
+export const enum CODE {
+  ENTER = "Enter",
+  ESCAPE = "Escape",
+  ARROW_LEFT = "ArrowLeft",
+  ARROW_UP = "ArrowUp",
+  ARROW_RIGHT = "ArrowRight",
+  ARROW_DOWN = "ArrowDown",
+  SPACE = "Space",
+  END = "End",
+  HOME = "Home"
+}
+
+export const enum KEY {
+  ENTER = "Enter",
+  ESCAPE = "Escape",
+  ARROW_LEFT = "ArrowLeft",
+  ARROW_UP = "ArrowUp",
+  ARROW_RIGHT = "ArrowRight",
+  ARROW_DOWN = "ArrowDown",
+  END = "End",
+  HOME = "Home",
+  SPACE = " ",
+  /**
+   * @deprecated
+   * Used by old browers, see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#whitespace_keys
+   */
+  SPACEBAR = "Spacebar"
+}
+
+export const enum KEY_CODE {
+  ENTER = 13,
+  ESCAPE = 27,
+  ARROW_LEFT = 37,
+  ARROW_UP = 38,
+  ARROW_RIGHT = 39,
+  ARROW_DOWN = 40,
+  SPACE = 32,
+  END = 35,
+  HOME = 36
+}