@pdfme/ui 4.2.5-dev.3 → 4.2.5-dev.5

package/dist/index.es.js

@@ -9250,6 +9250,7 @@ z.object({
   rotate: z.string(),
   edit: z.string(),
   required: z.string(),
+  editable: z.string(),
   plsInputName: z.string(),
   fieldMustUniq: z.string(),
   notUniq: z.string(),
@@ -135134,6 +135135,15 @@ var ExclamationCircleOutlined = function a(s, $) {
   }));
 };
 const ExclamationCircleOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(ExclamationCircleOutlined);
+var LockOutlined$2 = { icon: { tag: "svg", attrs: { viewBox: "64 64 896 896", focusable: "false" }, children: [{ tag: "path", attrs: { d: "M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z" } }] }, name: "lock", theme: "outlined" };
+const LockOutlinedSvg = LockOutlined$2;
+var LockOutlined = function a(s, $) {
+  return /* @__PURE__ */ reactExports.createElement(AntdIcon$1, _extends$2({}, s, {
+    ref: $,
+    icon: LockOutlinedSvg
+  }));
+};
+const LockOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(LockOutlined);
 var MenuOutlined$2 = { icon: { tag: "svg", attrs: { viewBox: "64 64 896 896", focusable: "false" }, children: [{ tag: "path", attrs: { d: "M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z" } }] }, name: "menu", theme: "outlined" };
 const MenuOutlinedSvg = MenuOutlined$2;
 var MenuOutlined = function a(s, $) {
@@ -135161,6 +135171,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   opacity: "Opacity",
   rotate: "Rotate",
   required: "Required",
+  editable: "Editable",
   edit: "Edit",
   plsInputName: "Please input name",
   fieldMustUniq: "Name of field is not unique",
@@ -135224,6 +135235,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   opacity: "透明度",
   rotate: "旋转",
   required: "必需的",
+  editable: "可编辑的",
   edit: "编辑",
   plsInputName: "请输入名称",
   fieldMustUniq: "字段名称必须唯一",
@@ -135287,6 +135299,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   opacity: "不透明度",
   rotate: "回転",
   required: "必須",
+  editable: "編集可能",
   edit: "編集する",
   plsInputName: "項目名を入力してください",
   fieldMustUniq: "他の入力項目名と被っています",
@@ -135350,6 +135363,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   opacity: "투명도",
   rotate: "회전",
   required: "필수의",
+  editable: "편집 가능한",
   edit: "편집",
   plsInputName: "이름을 입력하세요",
   fieldMustUniq: "필드 이름은 유일해야 합니다",
@@ -135413,6 +135427,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   opacity: "الشفافية",
   rotate: "تدوير",
   required: "مطلوب",
+  editable: "قابل للتحرير",
   edit: "تعديل",
   plsInputName: "الرجاء إدخال الاسم",
   fieldMustUniq: "يجب أن يكون الحقل فريداً",
@@ -135476,6 +135491,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   opacity: "ความทึบ",
   rotate: "หมุน",
   required: "ที่จำเป็น",
+  editable: "แก้ไขได้",
   edit: "แก้ไข",
   plsInputName: "กรุณาใส่ชื่อ",
   fieldMustUniq: "ชื่อฟิลด์ต้องไม่ซ้ำกัน",
@@ -135539,6 +135555,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   opacity: "Opacità",
   rotate: "Ruota",
   required: "Necessaria",
+  editable: "Modificabile",
   edit: "Modifica",
   plsInputName: "Inserisci il nome per favore",
   fieldMustUniq: "Il nome del campo non è univoco",
@@ -135602,6 +135619,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   opacity: "przezroczystość",
   rotate: "Obrót",
   required: "Wymagany",
+  editable: "Edytowalny",
   edit: "Edytuj",
   plsInputName: "Wymagane wprowadzenie klucza pola",
   fieldMustUniq: "Klucz pola nie jest unikalny",
@@ -135665,6 +135683,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   opacity: "Opazität",
   rotate: "Drehen",
   required: "Erforderlich",
+  editable: "Bearbeitbar",
   edit: "Bearbeiten",
   plsInputName: "Bitte geben Sie einen Namen ein",
   fieldMustUniq: "Feldname ist nicht eindeutig",
@@ -135728,6 +135747,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   opacity: "Opacidad",
   rotate: "Rotar",
   required: "Requerido",
+  editable: "Editable",
   edit: "Editar",
   plsInputName: "Introduce el nombre",
   fieldMustUniq: "El nombre del campo no es único",
@@ -135791,6 +135811,7 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   opacity: "Opacité",
   rotate: "Rotation",
   required: "Requis",
+  editable: "Modifiable",
   edit: "Éditer",
   plsInputName: "Veuillez saisir le nom",
   fieldMustUniq: "Le nom du champ n'est pas unique",
@@ -136292,38 +136313,39 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
       status: $,
       title: _,
       required: _e,
-      style: tt,
-      dragOverlay: nt,
-      onClick: at,
-      onMouseEnter: ot,
-      onMouseLeave: rt,
-      dragging: st,
-      fadeIn: lt,
-      listeners: et,
-      sorting: it,
-      transition: ut,
-      transform: ft,
-      ...ht
-    }, dt) => {
-      const gt = reactExports.useContext(I18nContext);
+      readOnly: tt,
+      style: nt,
+      dragOverlay: at,
+      onClick: ot,
+      onMouseEnter: rt,
+      onMouseLeave: st,
+      dragging: lt,
+      fadeIn: et,
+      listeners: it,
+      sorting: ut,
+      transition: ft,
+      transform: ht,
+      ...dt
+    }, gt) => {
+      const pt = reactExports.useContext(I18nContext);
       reactExports.useEffect(() => {
-        if (nt)
+        if (at)
           return document.body.style.cursor = "grabbing", () => {
             document.body.style.cursor = "";
           };
-      }, [nt]);
-      const { x: pt, y: mt, scaleX: ct, scaleY: vt } = ft || { x: 0, y: 0, scaleX: 1, scaleY: 1 };
+      }, [at]);
+      const { x: mt, y: ct, scaleX: vt, scaleY: At } = ht || { x: 0, y: 0, scaleX: 1, scaleY: 1 };
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "li",
         {
           style: {
             marginTop: 10,
-            transition: ut,
-            transform: `translate(${pt}px, ${mt}px) scale(${ct}, ${vt})`
+            transition: ft,
+            transform: `translate(${mt}px, ${ct}px) scale(${vt}, ${At})`
           },
-          onMouseEnter: ot,
-          onMouseLeave: rt,
-          ref: dt,
+          onMouseEnter: rt,
+          onMouseLeave: st,
+          ref: gt,
           children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
@@ -136331,15 +136353,15 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
                 display: "flex",
                 alignItems: "center",
                 cursor: "pointer",
-                ...tt
+                ...nt
               },
-              ...ht,
-              onClick: () => at && at(),
+              ...dt,
+              onClick: () => ot && ot(),
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button$2,
                   {
-                    ...et,
+                    ...it,
                     style: {
                       display: "flex",
                       alignItems: "center",
@@ -136365,9 +136387,10 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
                     children: [
                       $ === void 0 ? s : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsx(ExclamationCircleOutlined$1, { width: 15, style: { marginRight: "0.5rem" } }),
-                        $ === "is-warning" ? gt("noKeyName") : s,
-                        $ === "is-danger" ? gt("notUniq") : ""
+                        $ === "is-warning" ? pt("noKeyName") : s,
+                        $ === "is-danger" ? pt("notUniq") : ""
                       ] }),
+                      tt && /* @__PURE__ */ jsxRuntimeExports.jsx(LockOutlined$1, { style: { marginLeft: "0.5rem" } }),
                       _e && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "red", marginLeft: "0.5rem" }, children: "*" })
                     ]
                   }
@@ -136537,7 +136560,7 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
 }, PluginIcon = (a) => {
   var ot;
   const { plugin: s, label: $, size: _, styles: _e } = a, nt = ((ot = reactExports.useContext(OptionsContext).icons) == null ? void 0 : ot[s.propPanel.defaultSchema.type]) ?? s.icon, at = { ..._e, display: "flex", justifyContent: "center" };
-  return nt ? _ ? getWithModifiedSize(nt, $, _, at) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: at, title: $, dangerouslySetInnerHTML: { __html: nt } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ..._e, overflow: "hidden", fontSize: 10 }, children: $ });
+  return nt ? _ ? getWithModifiedSize(nt, $, _, at) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: at, title: $, dangerouslySetInnerHTML: { __html: nt } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ..._e, overflow: "hidden", fontSize: 10 }, title: $, children: $ });
 }, PluginIcon$1 = PluginIcon, SelectableSortableItem = ({
   isSelected: a,
   style: s,
@@ -136573,6 +136596,7 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
       status: At,
       title: xt,
       required: _e.required,
+      readOnly: _e.readOnly,
       style: { ...bt, ...s },
       dragging: it,
       sorting: ut,
@@ -136647,29 +136671,34 @@ const { Text: Text$4 } = Typography$1, Item = React$a.memo(
           gt.id
         )) }) }) }),
         reactDomExports.createPortal(
-          /* @__PURE__ */ jsxRuntimeExports.jsx(DragOverlay, { adjustScale: !0, children: lt ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Item$1,
-              {
-                icon: dt(lt),
-                value: $.find((gt) => gt.id === lt).key,
-                required: $.find((gt) => gt.id === lt).required,
-                style: { background: s.colorPrimary },
-                dragOverlay: !0
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: at.filter((gt) => gt.id !== lt).map((gt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Item$1,
-              {
-                icon: dt(gt),
-                value: gt.key,
-                required: gt.required,
-                style: { background: s.colorPrimary },
-                dragOverlay: !0
-              },
-              gt.id
-            )) })
-          ] }) : null }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(DragOverlay, { adjustScale: !0, children: lt ? (() => {
+            const gt = $.find((pt) => pt.id === lt);
+            return gt ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Item$1,
+                {
+                  icon: dt(lt),
+                  value: gt.key,
+                  required: gt.required,
+                  readOnly: gt.readOnly,
+                  style: { background: s.colorPrimary },
+                  dragOverlay: !0
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: at.filter((pt) => pt.id !== lt).map((pt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Item$1,
+                {
+                  icon: dt(pt),
+                  value: pt.key,
+                  required: pt.required,
+                  readOnly: pt.readOnly,
+                  style: { background: s.colorPrimary },
+                  dragOverlay: !0
+                },
+                pt.id
+              )) })
+            ] }) : null;
+          })() : null }),
           document.body
         )
       ] })
@@ -151934,7 +151963,7 @@ const FormRender = withProvider(FormCore, defaultWidgets), svgBaseProp = {
     );
   }) }) });
 }, ButtonGroupWidget$1 = ButtonGroupWidget, { Text: Text$2 } = Typography$1, DetailView = (a) => {
-  const { token: s } = theme.useToken(), { size: $, schemas: _, changeSchemas: _e, deselectSchema: tt, activeSchema: nt } = a, at = useForm(), ot = reactExports.useContext(I18nContext), rt = reactExports.useContext(PluginsRegistry), st = reactExports.useContext(OptionsContext), [lt, et] = reactExports.useState({});
+  const { token: s } = theme.useToken(), { size: $, schemasList: _, changeSchemas: _e, deselectSchema: tt, activeSchema: nt } = a, at = useForm(), ot = reactExports.useContext(I18nContext), rt = reactExports.useContext(PluginsRegistry), st = reactExports.useContext(OptionsContext), [lt, et] = reactExports.useState({});
   reactExports.useEffect(() => {
     const ct = {
       AlignWidget: (vt) => /* @__PURE__ */ jsxRuntimeExports.jsx(AlignWidget$1, { ...vt, ...a, options: st }),
@@ -151960,30 +151989,38 @@ const FormRender = withProvider(FormCore, defaultWidgets), svgBaseProp = {
     et(ct);
   }, [nt, rt, JSON.stringify(st)]), reactExports.useEffect(() => {
     const ct = { ...nt };
-    ct.x = ct.position.x, ct.y = ct.position.y, delete ct.position, at.setValues(ct);
+    ct.editable = !ct.readOnly, at.setValues(ct);
   }, [nt, at]), reactExports.useEffect(() => at.resetFields(), [nt.id]), reactExports.useEffect(() => {
     it.current = (ct) => {
-      for (const vt of Object.values(_))
-        if (vt.key === ct && vt.id !== nt.id)
-          return !1;
+      for (const vt of _)
+        for (const At of Object.values(vt))
+          if (At.key === ct && At.id !== nt.id)
+            return !1;
       return !0;
     };
   }, [_, nt]);
   const it = reactExports.useRef((ct) => !0), ut = (ct, vt) => it.current(vt), ft = debounce$1((ct) => {
     const vt = (xt, bt) => typeof xt == "object" ? JSON.stringify(xt) !== JSON.stringify(bt) : xt !== bt;
     let At = [];
-    for (let xt in ct) {
+    for (const xt in ct) {
       if (["id", "content"].includes(xt))
         continue;
-      let bt = ct[xt], Et = !1;
-      ["x", "y"].includes(xt) ? (Et = bt !== nt.position[xt], xt = "position." + xt) : Et = vt(bt, nt[xt]), Et && (bt === null && ["rotate", "opacity"].includes(xt) && (bt = void 0), At.push({ key: xt, value: bt, schemaId: nt.id }));
+      let bt = ct[xt];
+      if (vt(bt, nt[xt])) {
+        if (bt === null && ["rotate", "opacity"].includes(xt) && (bt = void 0), xt === "editable") {
+          const Et = !bt;
+          At.push({ key: "readOnly", value: Et, schemaId: nt.id }), Et && At.push({ key: "required", value: !1, schemaId: nt.id });
+          continue;
+        }
+        At.push({ key: xt, value: bt, schemaId: nt.id });
+      }
     }
     At.length && at.validateFields().then(() => _e(At)).catch((xt) => {
       xt.errorFields.length && (At = At.filter((bt) => !xt.errorFields.find(
         (Et) => Et.name.includes(bt.key)
       ))), At.length && _e(At);
     });
-  }, 500), ht = Object.values(rt).find(
+  }, 100), ht = Object.values(rt).find(
     (ct) => (ct == null ? void 0 : ct.propPanel.defaultSchema.type) === nt.type
   ), dt = ht == null ? void 0 : ht.propPanel.schema;
   dt || console.error(`[@pdfme/ui] No propPanel.schema for ${nt.type}.
@@ -152014,26 +152051,24 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         }],
         props: { autoComplete: "off" }
       },
-      required: { title: ot("required"), type: "boolean", span: 8, hidden: pt == null ? void 0 : pt.readOnly },
+      editable: { title: ot("editable"), type: "boolean", span: 8, hidden: (pt == null ? void 0 : pt.readOnly) !== void 0 },
+      required: { title: ot("required"), type: "boolean", span: 16, hidden: "{{!formData.editable}}" },
       "-": { type: "void", widget: "Divider" },
       align: { title: ot("align"), type: "void", widget: "AlignWidget" },
-      x: { title: "X", type: "number", widget: "inputNumber", required: !0, span: 8, min: 0 },
-      y: { title: "Y", type: "number", widget: "inputNumber", required: !0, span: 8, min: 0 },
-      rotate: {
-        title: ot("rotate"),
-        type: "number",
-        widget: "inputNumber",
-        disabled: (pt == null ? void 0 : pt.rotate) === void 0,
-        max: 360,
-        props: { min: 0 },
-        span: 8
+      position: {
+        type: "object",
+        widget: "card",
+        properties: {
+          x: { title: "X", type: "number", widget: "inputNumber", required: !0, span: 8, min: 0 },
+          y: { title: "Y", type: "number", widget: "inputNumber", required: !0, span: 8, min: 0 }
+        }
       },
       width: {
         title: ot("width"),
         type: "number",
         widget: "inputNumber",
         required: !0,
-        span: 8,
+        span: 6,
         props: { min: 0 }
       },
       height: {
@@ -152041,30 +152076,39 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         type: "number",
         widget: "inputNumber",
         required: !0,
-        span: 8,
+        span: 6,
         props: { min: 0 }
       },
+      rotate: {
+        title: ot("rotate"),
+        type: "number",
+        widget: "inputNumber",
+        disabled: (pt == null ? void 0 : pt.rotate) === void 0,
+        max: 360,
+        props: { min: 0 },
+        span: 6
+      },
       opacity: {
         title: ot("opacity"),
         type: "number",
         widget: "inputNumber",
         disabled: (pt == null ? void 0 : pt.opacity) === void 0,
         props: { step: 0.1, min: 0, max: 1 },
-        span: 8
+        span: 6
       }
     }
   };
   if (typeof dt == "function") {
-    const ct = dt({
-      ...a,
+    const { schemasList: ct, ...vt } = a, At = dt({
+      ...vt,
       options: st,
       theme: s,
       i18n: ot
     }) || {};
     mt.properties = {
       ...mt.properties,
-      ...Object.keys(ct).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
-      ...ct
+      ...Object.keys(At).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
+      ...At
     };
   } else {
     const ct = dt || {};
@@ -162423,8 +162467,8 @@ const Guides$2 = Guides$1, guideStyle = (a, s, $, _) => ({
     dt(Dt), Ct(), pt(0), (Ut = at.current) != null && Ut.scroll && at.current.scroll({ top: 0, behavior: "smooth" });
   }, []), jt = (Tt) => {
     const [Dt, Ut, Vt, Qt] = isBlankPdf(a.basePdf) ? a.basePdf.padding : [0, 0, 0, 0], qt = St[gt], Zt = (rr) => {
-      let Yt = ht[gt].length + 1, Kt = rr + Yt;
-      for (; ht[gt].find((nr) => nr.key === Kt); )
+      let Yt = ht.reduce((nr, tr) => nr + tr.length, 0), Kt = rr + Yt;
+      for (; ht.some((nr) => nr.find((tr) => tr.key === Kt)); )
         Yt++, Kt = rr + Yt;
       return Kt;
     }, ar = (rr, Yt, Kt) => Math.min(Math.max(rr, Yt), Kt), Jt = {
@@ -162512,6 +162556,7 @@ const Guides$2 = Guides$1, guideStyle = (a, s, $, _) => ({
             size: s,
             pageSize: St[gt] ?? [],
             activeElements: ut,
+            schemasList: ht,
             schemas: ht[gt] ?? [],
             changeSchemas: Rt,
             onSortEnd: Ht,