@pdfme/ui 3.1.2 → 3.1.3-dev.1

package/dist/types/class.d.ts

@@ -34,6 +34,7 @@ export declare abstract class BaseUIClass {
             width: import("zod").ZodNumber;
             height: import("zod").ZodNumber;
             rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
+            opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
         }, import("zod").ZodTypeAny, "passthrough">>[];
         basePdf: (string | Uint8Array | ArrayBuffer) & (string | Uint8Array | ArrayBuffer | undefined);
         sampledata?: Record<string, string>[] | undefined;

package/dist/types/components/Renderer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UIRenderProps, SchemaForUI, Schema } from '@pdfme/common';
-type RendererProps = Omit<UIRenderProps<Schema>, 'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n'> & {
+type RendererProps = Omit<UIRenderProps<Schema>, 'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n' | '_cache'> & {
     schema: SchemaForUI;
     onChange: (value: string) => void;
     outline: string;

package/dist/types/contexts.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { Plugins, UIOptions } from '@pdfme/common';
-export declare const I18nContext: import("react").Context<(key: "height" | "width" | "type" | "rotate" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.barcodes.barColor", dict?: {
+export declare const I18nContext: import("react").Context<(key: "height" | "width" | "type" | "rotate" | "opacity" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.barcodes.barColor", dict?: {
     cancel: string;
     field: string;
     fieldName: string;
     align: string;
     width: string;
+    opacity: string;
     height: string;
     rotate: string;
     edit: string;

package/dist/types/helper.d.ts

@@ -35,6 +35,7 @@ export declare const templateSchemas2SchemasList: (_template: Template) => Promi
     data: string;
     id: string;
     key: string;
+    opacity?: number | undefined;
     rotate?: number | undefined;
 }[][]>;
 export declare const fmtTemplate: (template: Template, schemasList: SchemaForUI[][]) => Template;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "3.1.2",
+  "version": "3.1.3-dev.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/Designer/Sidebar/DetailView/index.tsx

@@ -58,15 +58,31 @@ const DetailView = (
   }, [activeSchema, activeElements, pluginsRegistry, JSON.stringify(options)]);
 
   useEffect(() => {
-    form.setValues({ ...activeSchema });
-  }, [activeSchema]);
+    const values: any = { ...activeSchema };
+
+    // [position] Change the nested position object into a flat, as a three-column layout is difficult to implement
+    values.x = values.position.x;
+    values.y = values.position.y;
+    delete values.position;
+
+    if (values.key !== (form.getValues() || {}).key) {
+      form.resetFields();
+    }
+
+    form.setValues(values);
+  }, [form, activeSchema]);
 
   const handleWatch = (newSchema: any) => {
     const changes = [];
-    for (const key in newSchema) {
+    for (let key in newSchema) {
       if (['id', 'data'].includes(key)) continue;
       if (newSchema[key] !== (activeSchema as any)[key]) {
-        changes.push({ key, value: newSchema[key], schemaId: activeSchema.id });
+        const value = newSchema[key] || undefined;
+
+        // [position] Return the flattened position to its original form.
+        if (key === 'x') key = 'position.x';
+        if (key === 'y') key = 'position.y';
+        changes.push({ key, value, schemaId: activeSchema.id });
       }
     }
     if (changes.length) {
@@ -84,6 +100,12 @@ const DetailView = (
 Check this document: https://pdfme.com/docs/custom-schemas`);
   }
 
+  const typeOptions = Object.entries(pluginsRegistry).map(([label, value]) => ({
+    label,
+    value: value?.propPanel.defaultSchema.type,
+  }));
+  const defaultSchema = activePlugin.propPanel.defaultSchema;
+
   const propPanelSchema: PropPanelSchema = {
     type: 'object',
     column: 2,
@@ -92,34 +114,49 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         title: i18n('type'),
         type: 'string',
         widget: 'select',
-        props: {
-          options: Object.entries(pluginsRegistry).map(([label, value]) => ({
-            label,
-            value: value?.propPanel.defaultSchema.type,
-          })),
-        },
-      },
-      key: { title: i18n('fieldName'), type: 'string', widget: 'input' },
-      '-': { type: 'void', widget: 'Divider', cellSpan: 2 },
-      align: { title: i18n('align'), type: 'void', widget: 'AlignWidget', cellSpan: 2 },
-      position: {
-        type: 'object',
-        widget: 'card',
-        properties: {
-          x: { title: 'X', type: 'number', widget: 'inputNumber' },
-          y: { title: 'Y', type: 'number', widget: 'inputNumber' },
-        },
+        props: { options: typeOptions },
+        required: true,
+        span: 10,
       },
-      width: { title: i18n('width'), type: 'number', widget: 'inputNumber', span: 8 },
-      height: { title: i18n('height'), type: 'number', widget: 'inputNumber', span: 8 },
+      key: { title: i18n('fieldName'), type: 'string', required: true, span: 14 },
+      '-': { type: 'void', widget: 'Divider' },
+      align: { title: i18n('align'), type: 'void', widget: 'AlignWidget' },
+      x: { title: 'X', type: 'number', widget: 'inputNumber', required: true, span: 8 },
+      y: { title: 'Y', type: 'number', widget: 'inputNumber', required: true, span: 8 },
       rotate: {
         title: i18n('rotate'),
         type: 'number',
         widget: 'inputNumber',
-        span: 8,
-        disabled: activePlugin.propPanel.defaultSchema?.rotate === undefined,
+        disabled: defaultSchema?.rotate === undefined,
         max: 360,
         min: 0,
+        span: 8,
+      },
+      width: {
+        title: i18n('width'),
+        type: 'number',
+        widget: 'inputNumber',
+        required: true,
+        span: 8,
+      },
+      height: {
+        title: i18n('height'),
+        type: 'number',
+        widget: 'inputNumber',
+        required: true,
+        span: 8,
+      },
+      opacity: {
+        title: i18n('opacity'),
+        type: 'number',
+        widget: 'inputNumber',
+        disabled: defaultSchema?.opacity === undefined,
+        props: {
+          step: 0.1,
+        },
+        max: 1,
+        min: 0,
+        span: 8,
       },
     },
   };
@@ -134,18 +171,14 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       }) || {};
     propPanelSchema.properties = {
       ...propPanelSchema.properties,
-      ...(Object.keys(apps).length === 0
-        ? {}
-        : { '--': { type: 'void', widget: 'Divider', cellSpan: 2 } }),
+      ...(Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } }),
       ...apps,
     };
   } else {
     const apps = activePropPanelSchema || {};
     propPanelSchema.properties = {
       ...propPanelSchema.properties,
-      ...(Object.keys(apps).length === 0
-        ? {}
-        : { '--': { type: 'void', widget: 'Divider', cellSpan: 2 } }),
+      ...(Object.keys(apps).length === 0 ? {} : { '--': { type: 'void', widget: 'Divider' } }),
       ...apps,
     };
   }

package/src/components/Renderer.tsx

@@ -6,7 +6,7 @@ import { PluginsRegistry, OptionsContext, I18nContext } from '../contexts';
 
 type RendererProps = Omit<
   UIRenderProps<Schema>,
-  'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n'
+  'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n' | '_cache'
 > & {
   schema: SchemaForUI;
   onChange: (value: string) => void;
@@ -51,6 +51,7 @@ const Renderer = (props: RendererProps) => {
   const { schema, mode, onChange, stopEditing, tabIndex, placeholder, scale } = props;
 
   const ref = useRef<HTMLDivElement>(null);
+  const _cache = useRef<Map<any, any>>(new Map());
 
   useEffect(() => {
     if (ref.current && schema.type) {
@@ -69,6 +70,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       const editable = mode === 'form' || mode === 'designer';
 
       render({
+        key: schema.key,
         value: schema.data,
         schema,
         rootElement: ref.current,
@@ -80,6 +82,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         options,
         theme,
         i18n,
+        _cache: _cache.current,
       });
     }
     return () => {

package/src/i18n.ts

@@ -8,6 +8,7 @@ const dictEn: { [key in keyof Dict]: string } = {
   align: 'Align',
   width: 'Width',
   height: 'Height',
+  opacity: 'Opacity',
   rotate: 'Rotate',
   edit: 'Edit',
   plsInputName: 'Please input name',
@@ -53,6 +54,7 @@ const dictJa: { [key in keyof Dict]: string } = {
   align: '整列',
   width: '幅',
   height: '高さ',
+  opacity: '不透明度',
   rotate: '回転',
   edit: '編集する',
   plsInputName: '項目名を入力してください',
@@ -97,6 +99,7 @@ const dictAr: { [key in keyof Dict]: string } = {
   align: 'محاذاة',
   width: 'العرض',
   height: 'الارتفاع',
+  opacity: 'الشفافية',
   rotate: 'تدوير',
   edit: 'تعديل',
   plsInputName: 'الرجاء إدخال الاسم',
@@ -141,6 +144,7 @@ const dictTh: { [key in keyof Dict]: string } = {
   align: 'จัดเรียง',
   width: 'ความกว้าง',
   height: 'ความสูง',
+  opacity: 'ความทึบ',
   rotate: 'หมุน',
   edit: 'แก้ไข',
   plsInputName: 'กรุณาใส่ชื่อ',
@@ -185,6 +189,7 @@ const dictIt: { [key in keyof Dict]: string } = {
   align: 'Allinea',
   width: 'Larghezza',
   height: 'Altezza',
+  opacity: 'Opacità',
   rotate: 'Ruota',
   edit: 'Modifica',
   plsInputName: 'Inserisci il nome per favore',
@@ -230,6 +235,7 @@ const dictPl: { [key in keyof Dict]: string } = {
   align: 'Wyrównanie',
   width: 'Szerokość',
   height: 'Wysokość',
+  opacity: 'przezroczystość',
   rotate: 'Obrót',
   edit: 'Edytuj',
   plsInputName: 'Wymagane wprowadzenie klucza pola',

package/vite.config.ts

@@ -6,7 +6,7 @@ import topLevelAwait from 'vite-plugin-top-level-await';
 export default defineConfig({
   plugins: [
     react(),
-    tsconfigPaths(),
+    tsconfigPaths({root: '.'}),
     topLevelAwait({
       promiseExportName: '__tla',
       promiseImportName: (i) => `__tla_${i}`,