@pdfme/ui 4.2.4-dev.11 → 4.2.4-dev.13

package/dist/index.es.js

@@ -9264,7 +9264,9 @@ z.object({
   addPageAfter: z.string(),
   removePage: z.string(),
   removePageConfirm: z.string(),
-  hexColorPrompt: z.string(),
+  // --------------------validation-------------------
+  "validation.uniqueName": z.string(),
+  "validation.hexColor": z.string(),
   // -----------------used in schemas-----------------
   "schemas.color": z.string(),
   "schemas.borderWidth": z.string(),
@@ -81828,7 +81830,7 @@ const UseDynamicFontSize = (a) => {
         rules: [
           {
             pattern: HEX_COLOR_PATTERN,
-            message: $("hexColorPrompt")
+            message: $("validation.hexColor")
           }
         ]
       },
@@ -81839,7 +81841,7 @@ const UseDynamicFontSize = (a) => {
         rules: [
           {
             pattern: HEX_COLOR_PATTERN,
-            message: $("hexColorPrompt")
+            message: $("validation.hexColor")
           }
         ]
       }
@@ -135174,7 +135176,8 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   addPageAfter: "Add Page After",
   removePage: "Remove Current Page",
   removePageConfirm: "Are you sure you want to delete this page? This action cannot be undone.",
-  hexColorPrompt: "Please enter a valid hex color code.",
+  "validation.hexColor": "Please enter a valid hex color code.",
+  "validation.uniqueName": "Please enter a unique name.",
   "schemas.color": "Color",
   "schemas.borderWidth": "Border Width",
   "schemas.borderColor": "Border Color",
@@ -135236,7 +135239,8 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   addPageAfter: "在之后添加页面",
   removePage: "删除当前页面",
   removePageConfirm: "您确定要删除此页面吗？此操作无法撤销。",
-  hexColorPrompt: "请输入有效的十六进制颜色代码。",
+  "validation.hexColor": "请输入有效的十六进制颜色代码。",
+  "validation.uniqueName": "请输入一个唯一的名称。",
   "schemas.color": "颜色",
   "schemas.borderWidth": "边框宽度",
   "schemas.borderColor": "边框颜色",
@@ -135298,7 +135302,8 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   addPageAfter: "次にページを追加",
   removePage: "現在のページを削除",
   removePageConfirm: "ページを削除してもよろしいですか？この操作は元に戻せません。",
-  hexColorPrompt: "有効な16進数のカラーコードを入力してください。",
+  "validation.hexColor": "有効な16進数のカラーコードを入力してください。",
+  "validation.uniqueName": "一意の名前を入力してください。",
   "schemas.color": "色",
   "schemas.borderWidth": "枠線の太さ",
   "schemas.borderColor": "枠線の色",
@@ -135360,7 +135365,8 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   addPageAfter: "다음에 페이지 추가",
   removePage: "현재 페이지 제거",
   removePageConfirm: "이 페이지를 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.",
-  hexColorPrompt: "유효한 16진수 색상 코드를 입력하세요.",
+  "validation.hexColor": "유효한 16진수 색상 코드를 입력하세요.",
+  "validation.uniqueName": "고유한 이름을 입력하세요.",
   "schemas.color": "색상",
   "schemas.borderWidth": "테두리 너비",
   "schemas.borderColor": "테두리 색상",
@@ -135422,7 +135428,8 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   addPageAfter: "إضافة صفحة بعد",
   removePage: "احذف الصفحة الحالية",
   removePageConfirm: "هل أنت متأكد من رغبتك في حذف هذه الصفحة؟ لا يمكن التراجع عن هذا الإجراء.",
-  hexColorPrompt: "الرجاء إدخال رمز لون سداسي عشري صالح.",
+  "validation.hexColor": "الرجاء إدخال رمز لون سداسي عشري صالح.",
+  "validation.uniqueName": "الرجاء إدخال اسم فريد.",
   "schemas.color": "اللون",
   "schemas.borderWidth": "عرض الحدود",
   "schemas.borderColor": "لون الحدود",
@@ -135484,7 +135491,8 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   addPageAfter: "เพิ่มหน้าถัดไป",
   removePage: "ลบหน้าปัจจุบัน",
   removePageConfirm: "คุณแน่ใจหรือไม่ว่าต้องการลบหน้านี้? การกระทำนี้ไม่สามารถย้อนกลับได้",
-  hexColorPrompt: "กรุณาใส่รหัสสีแบบฐานสิบหกที่ถูกต้อง",
+  "validation.hexColor": "กรุณาใส่รหัสสีแบบฐานสิบหกที่ถูกต้อง",
+  "validation.uniqueName": "กรุณาระบุชื่อที่ไม่ซ้ำ",
   "schemas.color": "สี",
   "schemas.borderWidth": "ความกว้างของเส้นขอบ",
   "schemas.borderColor": "สีขอบ",
@@ -135546,7 +135554,8 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   addPageAfter: "Aggiungi pagina dopo",
   removePage: "Rimuovi la Pagina Corrente",
   removePageConfirm: "Sei sicuro di voler eliminare questa pagina? Questa azione non può essere annullata.",
-  hexColorPrompt: "Inserisci un codice colore esadecimale valido.",
+  "validation.hexColor": "Inserisci un codice colore esadecimale valido.",
+  "validation.uniqueName": "Inserisci un nome univoco.",
   "schemas.color": "Colore",
   "schemas.borderWidth": "Spessore bordo",
   "schemas.borderColor": "Colore bordo",
@@ -135608,7 +135617,8 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   addPageAfter: "Dodaj stronę po",
   removePage: "Usuń Bieżącą Stronę",
   removePageConfirm: "Czy na pewno chcesz usunąć tę stronę? Tej operacji nie można cofnąć.",
-  hexColorPrompt: "Wprowadź poprawny kod koloru szesnastkowego.",
+  "validation.hexColor": "Wprowadź poprawny kod koloru szesnastkowego.",
+  "validation.uniqueName": "Proszę wpisać unikalną nazwę.",
   "schemas.color": "Kolor",
   "schemas.borderWidth": "Szerokość obramowania",
   "schemas.borderColor": "Kolor obramowania",
@@ -135670,7 +135680,8 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   addPageAfter: "Seite danach hinzufügen",
   removePage: "Aktuelle Seite entfernen",
   removePageConfirm: "Sind Sie sicher, dass Sie diese Seite löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
-  hexColorPrompt: "Bitte geben Sie einen gültigen Hex-Farbcode ein.",
+  "validation.hexColor": "Bitte geben Sie einen gültigen Hex-Farbcode ein.",
+  "validation.uniqueName": "Bitte geben Sie einen eindeutigen Namen ein.",
   "schemas.color": "Farbe",
   "schemas.borderWidth": "Rahmenbreite",
   "schemas.borderColor": "Rahmenfarbe",
@@ -135732,7 +135743,8 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   addPageAfter: "Insertar página",
   removePage: "Eliminar página actual",
   removePageConfirm: "¿Estás seguro de que quieres eliminar esta página? Esta acción no se puede deshacer.",
-  hexColorPrompt: "Introduce un código de color hexadecimal válido.",
+  "validation.hexColor": "Introduce un código de color hexadecimal válido.",
+  "validation.uniqueName": "Por favor, introduzca un nombre único.",
   "schemas.color": "Color",
   "schemas.borderWidth": "Ancho del borde",
   "schemas.borderColor": "Color del borde",
@@ -135794,7 +135806,8 @@ const MinusOutlined$1 = /* @__PURE__ */ reactExports.forwardRef(MinusOutlined),
   addPageAfter: "Ajouter une page après",
   removePage: "Supprimer la page actuelle",
   removePageConfirm: "Êtes-vous sûr de vouloir supprimer cette page ? Cette action est irréversible.",
-  hexColorPrompt: "Veuillez entrer un code couleur hexadécimal valide.",
+  "validation.hexColor": "Veuillez entrer un code couleur hexadécimal valide.",
+  "validation.uniqueName": "Veuillez saisir un nom unique.",
   "schemas.color": "Couleur",
   "schemas.borderWidth": "Largeur de la bordure",
   "schemas.borderColor": "Couleur de la bordure",
@@ -151921,85 +151934,102 @@ const FormRender = withProvider(FormCore, defaultWidgets), svgBaseProp = {
     );
   }) }) });
 }, ButtonGroupWidget$1 = ButtonGroupWidget, { Text: Text$2 } = Typography$1, DetailView = (a) => {
-  const { token: s } = theme.useToken(), { size: $, changeSchemas: _, deselectSchema: _e, activeSchema: tt } = a, nt = useForm(), at = reactExports.useContext(I18nContext), ot = reactExports.useContext(PluginsRegistry), rt = reactExports.useContext(OptionsContext), [st, lt] = reactExports.useState({});
+  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({});
   reactExports.useEffect(() => {
-    const gt = {
-      AlignWidget: (pt) => /* @__PURE__ */ jsxRuntimeExports.jsx(AlignWidget$1, { ...pt, ...a, options: rt }),
+    const ct = {
+      AlignWidget: (vt) => /* @__PURE__ */ jsxRuntimeExports.jsx(AlignWidget$1, { ...vt, ...a, options: st }),
       Divider: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, { style: { marginTop: s.marginXS, marginBottom: s.marginXS } }),
-      ButtonGroup: (pt) => /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonGroupWidget$1, { ...pt, ...a, options: rt })
+      ButtonGroup: (vt) => /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonGroupWidget$1, { ...vt, ...a, options: st })
     };
-    for (const pt of Object.values(ot)) {
-      const mt = (pt == null ? void 0 : pt.propPanel.widgets) || {};
-      Object.entries(mt).forEach(([ct, vt]) => {
-        gt[ct] = (At) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    for (const vt of Object.values(rt)) {
+      const At = (vt == null ? void 0 : vt.propPanel.widgets) || {};
+      Object.entries(At).forEach(([xt, bt]) => {
+        ct[xt] = (Et) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           WidgetRenderer$1,
           {
-            ...At,
+            ...Et,
             ...a,
-            options: rt,
+            options: st,
             theme: s,
-            i18n: at,
-            widget: vt
+            i18n: ot,
+            widget: bt
           }
         );
       });
     }
-    lt(gt);
-  }, [tt, ot, JSON.stringify(rt)]), reactExports.useEffect(() => {
-    const gt = { ...tt };
-    gt.x = gt.position.x, gt.y = gt.position.y, delete gt.position, gt.key !== (nt.getValues() || {}).key && nt.resetFields(), nt.setValues(gt);
-  }, [tt, nt]);
-  const et = (gt) => {
-    const pt = (ct, vt) => typeof ct == "object" ? JSON.stringify(ct) !== JSON.stringify(vt) : ct !== vt;
-    let mt = [];
-    for (let ct in gt) {
-      if (["id", "content"].includes(ct))
+    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);
+  }, [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;
+      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) {
+      if (["id", "content"].includes(xt))
         continue;
-      let vt = gt[ct], At = !1;
-      ["x", "y"].includes(ct) ? (At = vt !== tt.position[ct], ct = "position." + ct) : At = pt(vt, tt[ct]), At && (vt === null && ["rotate", "opacity"].includes(ct) && (vt = void 0), mt.push({ key: ct, value: vt, schemaId: tt.id }));
+      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 }));
     }
-    mt.length && nt.validateFields().then(() => _(mt)).catch((ct) => {
-      ct.errorFields.length && (mt = mt.filter((vt) => !ct.errorFields.find(
-        (At) => At.name.includes(vt.key)
-      ))), mt.length && _(mt);
+    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);
     });
-  }, it = Object.values(ot).find(
-    (gt) => (gt == null ? void 0 : gt.propPanel.defaultSchema.type) === tt.type
-  ), ut = it == null ? void 0 : it.propPanel.schema;
-  ut || console.error(`[@pdfme/ui] No propPanel.schema for ${tt.type}.
+  }, 500), 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}.
 Check this document: https://pdfme.com/docs/custom-schemas`);
-  const ft = Object.entries(ot).map(([gt, pt]) => ({
-    label: gt,
-    value: pt == null ? void 0 : pt.propPanel.defaultSchema.type
-  })), ht = it.propPanel.defaultSchema, dt = {
+  const gt = Object.entries(rt).map(([ct, vt]) => ({
+    label: ct,
+    value: vt == null ? void 0 : vt.propPanel.defaultSchema.type
+  })), pt = ht.propPanel.defaultSchema, mt = {
     type: "object",
     column: 2,
     properties: {
       type: {
-        title: at("type"),
+        title: ot("type"),
         type: "string",
         widget: "select",
-        props: { options: ft },
+        props: { options: gt },
         required: !0,
         span: 12
       },
-      key: { title: at("fieldName"), type: "string", required: !0, span: 12, props: { autocomplete: "off" } },
-      required: { title: at("required"), type: "boolean", span: 8, hidden: ht == null ? void 0 : ht.readOnly },
+      key: {
+        title: ot("fieldName"),
+        type: "string",
+        required: !0,
+        span: 12,
+        rules: [{
+          validator: ut,
+          message: ot("validation.uniqueName")
+        }],
+        props: { autocomplete: "off" }
+      },
+      required: { title: ot("required"), type: "boolean", span: 8, hidden: pt == null ? void 0 : pt.readOnly },
       "-": { type: "void", widget: "Divider" },
-      align: { title: at("align"), type: "void", widget: "AlignWidget" },
+      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: at("rotate"),
+        title: ot("rotate"),
         type: "number",
         widget: "inputNumber",
-        disabled: (ht == null ? void 0 : ht.rotate) === void 0,
+        disabled: (pt == null ? void 0 : pt.rotate) === void 0,
         max: 360,
         props: { min: 0 },
         span: 8
       },
       width: {
-        title: at("width"),
+        title: ot("width"),
         type: "number",
         widget: "inputNumber",
         required: !0,
@@ -152007,7 +152037,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         props: { min: 0 }
       },
       height: {
-        title: at("height"),
+        title: ot("height"),
         type: "number",
         widget: "inputNumber",
         required: !0,
@@ -152015,33 +152045,33 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         props: { min: 0 }
       },
       opacity: {
-        title: at("opacity"),
+        title: ot("opacity"),
         type: "number",
         widget: "inputNumber",
-        disabled: (ht == null ? void 0 : ht.opacity) === void 0,
+        disabled: (pt == null ? void 0 : pt.opacity) === void 0,
         props: { step: 0.1, min: 0, max: 1 },
         span: 8
       }
     }
   };
-  if (typeof ut == "function") {
-    const gt = ut({
+  if (typeof dt == "function") {
+    const ct = dt({
       ...a,
-      options: rt,
+      options: st,
       theme: s,
-      i18n: at
+      i18n: ot
     }) || {};
-    dt.properties = {
-      ...dt.properties,
-      ...Object.keys(gt).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
-      ...gt
+    mt.properties = {
+      ...mt.properties,
+      ...Object.keys(ct).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
+      ...ct
     };
   } else {
-    const gt = ut || {};
-    dt.properties = {
-      ...dt.properties,
-      ...Object.keys(gt).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
-      ...gt
+    const ct = dt || {};
+    mt.properties = {
+      ...mt.properties,
+      ...Object.keys(ct).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
+      ...ct
     };
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
@@ -152056,11 +152086,11 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
             alignItems: "center",
             justifyContent: "center"
           },
-          onClick: _e,
+          onClick: tt,
           icon: /* @__PURE__ */ jsxRuntimeExports.jsx(MenuOutlined$1, {})
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text$2, { strong: !0, style: { textAlign: "center", width: "100%" }, children: at("editField") })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text$2, { strong: !0, style: { textAlign: "center", width: "100%" }, children: ot("editField") })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, { style: { marginTop: s.marginXS, marginBottom: s.marginXS } }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -152074,10 +152104,10 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           FormRender,
           {
-            form: nt,
-            schema: dt,
-            widgets: st,
-            watch: { "#": et },
+            form: at,
+            schema: mt,
+            widgets: lt,
+            watch: { "#": ft },
             locale: "en-US"
           }
         )
@@ -162392,21 +162422,26 @@ const Guides$2 = Guides$1, guideStyle = (a, s, $, _) => ({
     const Dt = await template2SchemasList(Tt);
     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 = (Jt, rr, Yt) => Math.min(Math.max(Jt, rr), Yt), ar = {
+    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); )
+        Yt++, Kt = rr + Yt;
+      return Kt;
+    }, ar = (rr, Yt, Kt) => Math.min(Math.max(rr, Yt), Kt), Jt = {
       id: uuid$6(),
-      key: `${rt("field")}${ht[gt].length + 1}`,
+      key: Zt(rt("field")),
       ...Tt,
       position: {
-        x: Zt(Qt, Tt.position.x, qt.width - Ut - Tt.width),
-        y: Zt(Dt, Tt.position.y, qt.height - Vt - Tt.height)
+        x: ar(Qt, Tt.position.x, qt.width - Ut - Tt.width),
+        y: ar(Dt, Tt.position.y, qt.height - Vt - Tt.height)
       },
       required: Tt.readOnly ? !1 : lt.requiredByDefault || Tt.required || !1
     };
     if (Tt.position.y === 0) {
-      const Jt = ot.current[gt], rr = Jt ? Jt.getBoundingClientRect().top : 0;
-      ar.position.y = rr > 0 ? Dt : St[gt].height / 2;
+      const rr = ot.current[gt], Yt = rr ? rr.getBoundingClientRect().top : 0;
+      Jt.position.y = Yt > 0 ? Dt : St[gt].height / 2;
     }
-    It(ht[gt].concat(ar)), setTimeout(() => wt([document.getElementById(ar.id)]));
+    It(ht[gt].concat(Jt)), setTimeout(() => wt([document.getElementById(Jt.id)]));
   }, Ht = (Tt) => {
     It(Tt);
   }, Ft = (Tt) => {