@pdfme/ui 4.2.2 → 4.2.3-dev.3

package/README.md

@@ -1,6 +1,16 @@
 # PDFME
 
-<p>
+<p align="center">
+  <img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
+</p>
+
+<h4 align="center">
+  <a href="https://pdfme.com/">Website</a> |
+  <a href="https://app.pdfme.com/">pdfme Cloud</a> |
+  <a href="https://discord.gg/xWPTJbmgNV">Discord</a>
+</h4>
+
+<p align="center">
   <a href="https://github.com/pdfme/pdfme/blob/master/LICENSE.md">
     <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="pdfme is released under the MIT license." />
   </a>
@@ -13,20 +23,9 @@
   <a href="https://npmcharts.com/compare/@pdfme/ui?minimal=true">
     <img src="https://img.shields.io/npm/dm/@pdfme/ui.svg" alt="Downloads per month on npm." />
   </a>
-  <a href="https://pdfme.com/docs/development-guide#contribution">
-    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
-  </a>
-  <a href="https://twitter.com/intent/tweet?text=Awesome+pdf+library%21&url=https://pdfme.com">
-    <img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Tweet" />
-  </a>
 </p>
 
-TypeScript base PDF generator and React base UI.
-Open source, developed by the community, and completely free to use under the MIT license!
-
-<p align="center">
-  <img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
-</p>
+<p align="center">TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!</p>
 
 ## Features
 
@@ -302,3 +301,18 @@ const viewer = new Viewer({ domContainer, template, inputs });
 
 If you want to contribute to pdfme, please check the [Development Guide](https://pdfme.com/docs/development-guide) page.  
 We look forward to your contribution!
+
+## Cloud Service Option
+
+While pdfme is a powerful open-source library, we understand that some users might prefer a managed solution. For those looking for a ready-to-use, scalable PDF generation service without the need for setup and maintenance, we offer pdfme Cloud.
+
+**[Try pdfme Cloud - Hassle-free PDF Generation](https://app.pdfme.com/)**
+
+pdfme Cloud provides all the features of the open-source library, plus:
+
+- PDF generation at scale without infrastructure management
+- Hosted WYSIWYG template designer
+- Simple API integration
+- Automatic updates and maintenance
+
+\*pdfme is and will always remain open-source. The cloud service is an optional offering for those who prefer a managed solution.

package/dist/index.es.js

@@ -9307,7 +9307,6 @@ const ColorType = z.enum(["rgb", "cmyk"]).optional();
 z.object({ height: z.number(), width: z.number() });
 const Schema$1 = z.object({
   type: z.string(),
-  icon: z.string().optional(),
   content: z.string().optional(),
   position: z.object({ x: z.number(), y: z.number() }),
   width: z.number(),
@@ -9355,7 +9354,8 @@ CommonProps.extend({
 const UIOptions = CommonOptions.extend({
   lang: Lang.optional(),
   labels: z.record(z.string(), z.string()).optional(),
-  theme: z.record(z.string(), z.unknown()).optional()
+  theme: z.record(z.string(), z.unknown()).optional(),
+  icons: z.record(z.string(), z.string()).optional()
 }), HTMLElementSchema = z.any().refine((a) => a instanceof HTMLElement), UIProps = CommonProps.extend({
   domContainer: HTMLElementSchema,
   options: UIOptions.optional()
@@ -60275,7 +60275,9 @@ const uuid$6 = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (a)
   const tt = (nt = Object.values(_).find(
     (at) => (at == null ? void 0 : at.propPanel.defaultSchema.type) === $
   )) == null ? void 0 : nt.propPanel;
-  Object.assign(a, (tt == null ? void 0 : tt.defaultSchema) || {});
+  Object.keys((tt == null ? void 0 : tt.defaultSchema) || {}).forEach((at) => {
+    a.hasOwnProperty(at) || (a[at] = tt == null ? void 0 : tt.defaultSchema[at]);
+  });
 }, changeSchemas = (a) => {
   const { objs: s, schemas: $, basePdf: _, pluginsRegistry: _e, pageSize: tt, commitSchemas: nt } = a, at = s.reduce((ot, { key: rt, value: st, schemaId: lt }) => {
     const et = ot.find((it) => it.id === lt);
@@ -81843,7 +81845,6 @@ const UseDynamicFontSize = (a) => {
   widgets: { UseDynamicFontSize },
   defaultSchema: {
     type: "text",
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-cursor-input"><path d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1"/><path d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5"/><path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"/><path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"/><path d="M9 7v10"/></svg>',
     content: "Type Something...",
     position: { x: 0, y: 0 },
     width: 45,
@@ -81968,14 +81969,19 @@ const UseDynamicFontSize = (a) => {
       return "flex-end";
   }
   return "flex-start";
-}, getBackgroundColor = (a, s) => !a || !s.backgroundColor ? "transparent" : s.backgroundColor, textSchema = { pdf: pdfRender, ui: uiRender, propPanel }, text = textSchema;
+}, getBackgroundColor = (a, s) => !a || !s.backgroundColor ? "transparent" : s.backgroundColor, textSchema = {
+  pdf: pdfRender,
+  ui: uiRender,
+  propPanel,
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-cursor-input"><path d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1"/><path d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5"/><path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"/><path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"/><path d="M9 7v10"/></svg>'
+}, text = textSchema;
 textSchema.pdf, textSchema.ui, {
   ...textSchema.propPanel,
   defaultSchema: {
     ...textSchema.propPanel.defaultSchema
   }
 };
-const getBody$1 = (a) => JSON.parse(a || "[]"), getBodyWithRange = (a, s) => {
+const getBody$1 = (a) => typeof a == "string" ? JSON.parse(a || "[]") : a || [], getBodyWithRange = (a, s) => {
   const $ = getBody$1(a);
   return s ? $.slice(s.start, s.end) : $;
 };
@@ -82468,7 +82474,7 @@ const modifyTemplateForTable = async (a) => {
     for (const [rt, st] of Object.entries(at))
       if (st.type === "table") {
         st.__bodyRange = void 0;
-        const lt = JSON.parse(($ == null ? void 0 : $[rt]) || "[]"), et = await createMultiTables(lt, {
+        const lt = getBody$1($ == null ? void 0 : $[rt]), et = await createMultiTables(lt, {
           schema: st,
           basePdf: tt.basePdf,
           options: _,
@@ -82489,7 +82495,7 @@ const modifyTemplateForTable = async (a) => {
                   start: ut.slice(0, dt + 1).reduce((mt, ct) => mt + ct.length, 0),
                   end: ut.slice(0, dt + 2).reduce((mt, ct) => mt + ct.length, 0)
                 },
-                content: $[rt]
+                content: typeof $[rt] != "string" ? JSON.stringify($[rt] || "[]") : $[rt]
               }
             };
             ot[gt] = pt;
@@ -151858,55 +151864,33 @@ 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, activeElements: nt } = a, at = useForm(), ot = reactExports.useContext(I18nContext), rt = reactExports.useContext(PluginsRegistry), st = reactExports.useContext(OptionsContext), [lt, et] = reactExports.useState({});
-  reactExports.useEffect(() => {
-    const pt = {
-      AlignWidget: (mt) => /* @__PURE__ */ jsxRuntimeExports.jsx(AlignWidget$1, { ...mt, ...a, options: st }),
-      Divider: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, { style: { marginTop: s.marginXS, marginBottom: s.marginXS } }),
-      ButtonGroup: (mt) => /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonGroupWidget$1, { ...mt, ...a, options: st })
-    };
-    for (const mt of Object.values(rt)) {
-      const ct = (mt == null ? void 0 : mt.propPanel.widgets) || {};
-      Object.entries(ct).forEach(([vt, At]) => {
-        pt[vt] = (xt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          WidgetRenderer$1,
-          {
-            ...xt,
-            ...a,
-            options: st,
-            theme: s,
-            i18n: ot,
-            widget: At
-          }
-        );
-      });
+  const { token: s } = theme.useToken(), { size: $, changeSchemas: _, deselectSchema: _e, activeSchema: tt, activeElements: nt } = a, at = useForm(), ot = reactExports.useContext(I18nContext), rt = reactExports.useContext(PluginsRegistry), st = reactExports.useContext(OptionsContext);
+  reactExports.useState({});
+  const lt = { ...tt };
+  lt.x = lt.position.x, lt.y = lt.position.y, delete lt.position, at.setValues(lt);
+  const et = (pt) => {
+    const mt = (vt, At) => typeof vt == "object" ? JSON.stringify(vt) !== JSON.stringify(At) : vt !== At;
+    let ct = [];
+    for (let vt in pt) {
+      if (["id", "content"].includes(vt))
+        continue;
+      let At = pt[vt], xt = !1;
+      ["x", "y"].includes(vt) ? (xt = At !== tt.position[vt], vt = "position." + vt) : xt = mt(At, tt[vt]), xt && (At === null && ["rotate", "opacity"].includes(vt) && (At = void 0), ct.push({ key: vt, value: At, schemaId: tt.id }));
     }
-    et(pt);
-  }, [tt, nt, rt, JSON.stringify(st)]), reactExports.useEffect(() => {
-    const pt = { ...tt };
-    pt.x = pt.position.x, pt.y = pt.position.y, delete pt.position, pt.key !== (at.getValues() || {}).key && at.resetFields(), at.setValues(pt);
-  }, [at, tt]);
-  const it = (pt) => {
-    let mt = [];
-    for (let ct in pt)
-      if (!["id", "content"].includes(ct) && (ct === "x" && (ct = "position.x"), ct === "y" && (ct = "position.y"), pt[ct] !== tt[ct])) {
-        let vt = pt[ct];
-        vt === null && ["rotate", "opacity"].includes(ct) && (vt = void 0), mt.push({ key: ct, value: vt, schemaId: tt.id });
-      }
-    mt.length && at.validateFields().then(() => _(mt)).catch((ct) => {
-      ct.errorFields.length && (mt = mt.filter((vt) => !ct.errorFields.find(
-        (At) => At.name.includes(vt.key)
-      ))), mt.length && _(mt);
+    ct.length && at.validateFields().then(() => _(ct)).catch((vt) => {
+      vt.errorFields.length && (ct = ct.filter((At) => !vt.errorFields.find(
+        (xt) => xt.name.includes(At.key)
+      ))), ct.length && _(ct);
     });
-  }, ut = Object.values(rt).find(
+  }, it = Object.values(rt).find(
     (pt) => (pt == null ? void 0 : pt.propPanel.defaultSchema.type) === tt.type
-  ), ft = ut == null ? void 0 : ut.propPanel.schema;
-  ft || console.error(`[@pdfme/ui] No propPanel.schema for ${tt.type}.
+  ), ut = it == null ? void 0 : it.propPanel.schema;
+  ut || console.error(`[@pdfme/ui] No propPanel.schema for ${tt.type}.
 Check this document: https://pdfme.com/docs/custom-schemas`);
-  const ht = Object.entries(rt).map(([pt, mt]) => ({
+  const ft = Object.entries(rt).map(([pt, mt]) => ({
     label: pt,
     value: mt == null ? void 0 : mt.propPanel.defaultSchema.type
-  })), dt = ut.propPanel.defaultSchema, gt = {
+  })), ht = it.propPanel.defaultSchema, dt = {
     type: "object",
     column: 2,
     properties: {
@@ -151914,7 +151898,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         title: ot("type"),
         type: "string",
         widget: "select",
-        props: { options: ht },
+        props: { options: ft },
         required: !0,
         span: 12
       },
@@ -151927,7 +151911,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         title: ot("rotate"),
         type: "number",
         widget: "inputNumber",
-        disabled: (dt == null ? void 0 : dt.rotate) === void 0,
+        disabled: (ht == null ? void 0 : ht.rotate) === void 0,
         max: 360,
         props: { min: 0 },
         span: 8
@@ -151952,32 +151936,53 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         title: ot("opacity"),
         type: "number",
         widget: "inputNumber",
-        disabled: (dt == null ? void 0 : dt.opacity) === void 0,
+        disabled: (ht == null ? void 0 : ht.opacity) === void 0,
         props: { step: 0.1, min: 0, max: 1 },
         span: 8
       }
     }
   };
-  if (typeof ft == "function") {
-    const pt = ft({
+  if (typeof ut == "function") {
+    const pt = ut({
       ...a,
       options: st,
       theme: s,
       i18n: ot
     }) || {};
-    gt.properties = {
-      ...gt.properties,
+    dt.properties = {
+      ...dt.properties,
       ...Object.keys(pt).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
       ...pt
     };
   } else {
-    const pt = ft || {};
-    gt.properties = {
-      ...gt.properties,
+    const pt = ut || {};
+    dt.properties = {
+      ...dt.properties,
       ...Object.keys(pt).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
       ...pt
     };
   }
+  const gt = {
+    AlignWidget: (pt) => /* @__PURE__ */ jsxRuntimeExports.jsx(AlignWidget$1, { ...pt, ...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: st })
+  };
+  for (const pt of Object.values(rt)) {
+    const mt = (pt == null ? void 0 : pt.propPanel.widgets) || {};
+    Object.entries(mt).forEach(([ct, vt]) => {
+      gt[ct] = (At) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        WidgetRenderer$1,
+        {
+          ...At,
+          ...a,
+          options: st,
+          theme: s,
+          i18n: ot,
+          widget: vt
+        }
+      );
+    });
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { height: 40, display: "flex", alignItems: "center" }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -152009,16 +152014,16 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
           FormRender,
           {
             form: at,
-            schema: gt,
-            widgets: lt,
-            watch: { "#": it },
+            schema: dt,
+            widgets: gt,
+            watch: { "#": et },
             locale: "en-US"
           }
         )
       }
     )
   ] });
-}, DetailView$1 = DetailView, Sidebar = (a) => {
+}, propsAreUnchanged = (a, s) => JSON.stringify(a.activeSchema) == JSON.stringify(s.activeSchema), DetailView$1 = React$a.memo(DetailView, propsAreUnchanged), Sidebar = (a) => {
   const { sidebarOpen: s, setSidebarOpen: $, activeElements: _, schemas: _e } = a, { token: tt } = theme.useToken(), nt = () => _e.filter((ot) => _.map((rt) => rt.id).includes(ot.id)), at = () => {
     const ot = nt();
     return ot[ot.length - 1];
@@ -152152,15 +152157,15 @@ Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ js
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { visibility: lt ? "hidden" : "visible" }, children: a.children })
   ] });
 }, LeftSidebar = ({ height: a, scale: s, basePdf: $ }) => {
-  const { token: _ } = theme.useToken(), _e = reactExports.useContext(PluginsRegistry), [tt, nt] = reactExports.useState(!1);
+  const { token: _ } = theme.useToken(), _e = reactExports.useContext(PluginsRegistry), tt = reactExports.useContext(OptionsContext), [nt, at] = reactExports.useState(!1);
   return reactExports.useEffect(() => {
-    const at = () => {
-      tt && nt(!1);
+    const ot = () => {
+      nt && at(!1);
     };
-    return document.addEventListener("mouseup", at), () => {
-      document.removeEventListener("mouseup", at);
+    return document.addEventListener("mouseup", ot), () => {
+      document.removeEventListener("mouseup", ot);
     };
-  }, [tt]), /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, [nt]), /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       style: {
@@ -152172,28 +152177,34 @@ Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ js
         width: 45,
         background: _.colorBgLayout,
         textAlign: "center",
-        overflow: tt ? "visible" : "auto"
+        overflow: nt ? "visible" : "auto"
       },
-      children: Object.entries(_e).map(([at, ot]) => ot != null && ot.propPanel.defaultSchema ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Draggable$1,
-        {
-          scale: s,
-          basePdf: $,
-          plugin: ot,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button$2,
-            {
-              title: at,
-              onMouseDown: () => {
-                nt(!0);
-              },
-              style: { width: 35, height: 35, marginTop: "0.25rem", padding: "0.25rem" },
-              children: ot.propPanel.defaultSchema.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: ot.propPanel.defaultSchema.icon } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: at })
-            }
-          )
-        },
-        at
-      ) : null)
+      children: Object.entries(_e).map(([ot, rt]) => {
+        var lt;
+        if (!(rt != null && rt.propPanel.defaultSchema))
+          return null;
+        const st = ((lt = tt.icons) == null ? void 0 : lt[rt.propPanel.defaultSchema.type]) ?? rt.icon;
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Draggable$1,
+          {
+            scale: s,
+            basePdf: $,
+            plugin: rt,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button$2,
+              {
+                title: ot,
+                onMouseDown: () => {
+                  at(!0);
+                },
+                style: { width: 35, height: 35, marginTop: "0.25rem", padding: "0.25rem" },
+                children: st ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: st } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: ot })
+              }
+            )
+          },
+          ot
+        );
+      })
     }
   );
 }, LeftSidebar$1 = LeftSidebar, Paper = (a) => {