@pdfme/ui 4.0.2 → 4.1.0-dev.3

package/dist/types/class.d.ts

@@ -77,7 +77,7 @@ export declare abstract class BaseUIClass {
             opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, import("zod").ZodTypeAny, "passthrough">>>, "many">;
-        basePdf: import("zod").ZodUnion<[import("zod").ZodString, import("zod").ZodType<ArrayBuffer, import("zod").ZodTypeDef, ArrayBuffer>, import("zod").ZodType<Uint8Array, import("zod").ZodTypeDef, Uint8Array>, import("zod").ZodObject<{
+        basePdf: import("zod").ZodUnion<[import("zod").ZodUnion<[import("zod").ZodString, import("zod").ZodType<ArrayBuffer, import("zod").ZodTypeDef, ArrayBuffer>, import("zod").ZodType<Uint8Array, import("zod").ZodTypeDef, Uint8Array>]>, import("zod").ZodObject<{
             width: import("zod").ZodNumber;
             height: import("zod").ZodNumber;
             padding: import("zod").ZodTuple<[import("zod").ZodNumber, import("zod").ZodNumber, import("zod").ZodNumber, import("zod").ZodNumber], null>;

package/dist/types/components/Designer/RightSidebar/DetailView/ButtonGroupWidget.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PropPanelWidgetProps } from '@pdfme/common';
+declare const ButtonGroupWidget: (props: PropPanelWidgetProps) => React.JSX.Element;
+export default ButtonGroupWidget;

package/dist/types/contexts.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Plugins, UIOptions } from '@pdfme/common';
-export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "hexColorPrompt" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "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" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle", dict?: {
+export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "hexColorPrompt" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "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.text.format" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle", dict?: {
     cancel: string;
     field: string;
     fieldName: string;
@@ -50,6 +50,7 @@ export declare const I18nContext: import("react").Context<(key: "type" | "width"
     'schemas.text.max': string;
     'schemas.text.fit': string;
     'schemas.text.dynamicFontSize': string;
+    'schemas.text.format': string;
     'schemas.barcodes.barColor': string;
     'schemas.barcodes.includetext': string;
     'schemas.table.alternateBackgroundColor': string;

package/package.json

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

package/src/components/Designer/RightSidebar/DetailView/ButtonGroupWidget.tsx

@@ -0,0 +1,70 @@
+import { Button, Form } from 'antd';
+import React from 'react';
+import type { PropPanelWidgetProps, SchemaForUI } from '@pdfme/common';
+
+interface ButtonConfig {
+  key: string;
+  icon: string;
+  type: 'boolean' | 'select';
+  value?: String;
+}
+
+const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
+  const { activeElements, changeSchemas, schemas, schema } = props;
+
+  const apply = (btn: ButtonConfig) => {
+    const key = btn.key;
+    const type = btn.type;
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id)) as SchemaForUI[];
+    changeSchemas(
+      ass.map((s: Record<string, any>) => {
+        const oldValue = s[key] ?? false;
+        const newValue = type === 'boolean' ? !oldValue : btn.value;
+        return { key, value: newValue, schemaId: s.id };
+      })
+    );
+  };
+
+  const isActive = (btn: ButtonConfig) => {
+    const key = btn.key;
+    const type = btn.type;
+    let active = false;
+    const ids = activeElements.map((ae) => ae.id);
+    const ass = schemas.filter((s) => ids.includes(s.id)) as SchemaForUI[];
+    ass.forEach((s: Record<string, any>) => {
+      active = type === 'boolean' ? s[key] ?? false : s[key] === btn.value;
+    });
+    return active;
+  };
+
+  const svgIcon = (svgString: string) => {
+    const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
+    return <img width={17} height={17} src={svgDataUrl} />;
+  };
+
+  return (
+    <Form.Item>
+      <Button.Group>
+        {schema.buttons.map((btn: ButtonConfig, index: number) => {
+          const active = isActive(btn);
+          return (
+            <Button
+              type={active ? 'primary' : undefined}
+              ghost={active}
+              onClick={() => apply(btn)}
+              style={{
+                padding: 7,
+                zIndex: active ? 2 : 0,
+              }}
+              key={index}
+              icon={svgIcon(btn.icon)}
+            />
+          );
+        })}
+      </Button.Group>
+    </Form.Item>
+  );
+};
+
+export default ButtonGroupWidget;

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

@@ -8,6 +8,7 @@ import { getSidebarContentHeight } from '../../../../helper';
 import { theme, Typography, Button, Divider } from 'antd';
 import AlignWidget from './AlignWidget';
 import WidgetRenderer from './WidgetRenderer';
+import ButtonGroupWidget from './ButtonGroupWidget';
 
 const { Text } = Typography;
 
@@ -38,6 +39,7 @@ const DetailView = (
       Divider: () => (
         <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
       ),
+      ButtonGroup: (p) => <ButtonGroupWidget {...p} {...props} options={options} />,
     };
     for (const plugin of Object.values(pluginsRegistry)) {
       const widgets = plugin?.propPanel.widgets || {};
@@ -206,7 +208,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         style={{
           height: getSidebarContentHeight(size.height),
           overflowY: 'auto',
-          overflowX: 'hidden'
+          overflowX: 'hidden',
         }}
       >
         <FormRender

package/src/i18n.ts

@@ -52,6 +52,7 @@ const dictEn: { [key in keyof Dict]: string } = {
   'schemas.text.max': 'Max',
   'schemas.text.fit': 'Fit',
   'schemas.text.dynamicFontSize': 'Dynamic Font Size',
+  'schemas.text.format': 'Format',
   'schemas.barcodes.barColor': 'Bar Color',
   'schemas.barcodes.includetext': 'Include Text',
   'schemas.table.alternateBackgroundColor': 'Alternate Background Color',
@@ -111,6 +112,7 @@ const dictZh: { [key in keyof Dict]: string } = {
   'schemas.text.max': '最大',
   'schemas.text.fit': '适应',
   'schemas.text.dynamicFontSize': '动态字体大小',
+  'schemas.text.format': '格式',
   'schemas.barcodes.barColor': '条码颜色',
   'schemas.barcodes.includetext': '包括文本',
   'schemas.table.alternateBackgroundColor': '交替背景颜色',
@@ -170,6 +172,7 @@ const dictJa: { [key in keyof Dict]: string } = {
   'schemas.text.max': '最大',
   'schemas.text.fit': 'フィット',
   'schemas.text.dynamicFontSize': '動的フォントサイズ',
+  'schemas.text.format': '書式',
   'schemas.barcodes.barColor': 'バーの色',
   'schemas.barcodes.includetext': 'テキストを含める',
   'schemas.table.alternateBackgroundColor': '交互の背景色',
@@ -229,6 +232,7 @@ const dictKo: { [key in keyof Dict]: string } = {
   'schemas.text.max': '최대',
   'schemas.text.fit': '맞춤',
   'schemas.text.dynamicFontSize': '동적 폰트 크기',
+  'schemas.text.format': '형식',
   'schemas.barcodes.barColor': '바코드 색상',
   'schemas.barcodes.includetext': '텍스트 포함',
   'schemas.table.alternateBackgroundColor': '대체 배경색',
@@ -288,6 +292,7 @@ const dictAr: { [key in keyof Dict]: string } = {
   'schemas.text.max': 'الحد الأقصى',
   'schemas.text.fit': 'ملاءمة',
   'schemas.text.dynamicFontSize': 'حجم الخط الديناميكي',
+  'schemas.text.format': 'تنسيق',
   'schemas.barcodes.barColor': 'لون الشريط',
   'schemas.barcodes.includetext': 'تضمين النص',
   'schemas.table.alternateBackgroundColor': 'لون الخلفية البديل',
@@ -347,6 +352,7 @@ const dictTh: { [key in keyof Dict]: string } = {
   'schemas.text.max': 'สูงสุด',
   'schemas.text.fit': 'พอดี',
   'schemas.text.dynamicFontSize': 'ขนาดตัวอักษรแบบไดนามิก',
+  'schemas.text.format': 'รูปแบบ',
   'schemas.barcodes.barColor': 'สีบาร์',
   'schemas.barcodes.includetext': 'รวมข้อความ',
   'schemas.table.alternateBackgroundColor': 'สีพื้นหลังสลับกัน',
@@ -408,6 +414,7 @@ const dictIt: { [key in keyof Dict]: string } = {
   'schemas.text.max': 'Massimo',
   'schemas.text.fit': 'Adatta',
   'schemas.text.dynamicFontSize': 'Dimensione font dinamica',
+  'schemas.text.format': 'Formato',
   'schemas.barcodes.barColor': 'Colore barra',
   'schemas.barcodes.includetext': 'Includi testo',
   'schemas.table.alternateBackgroundColor': 'Colore di Sfondo Alternato',
@@ -467,6 +474,7 @@ const dictPl: { [key in keyof Dict]: string } = {
   'schemas.text.max': 'Maksimum',
   'schemas.text.fit': 'Dopasowanie',
   'schemas.text.dynamicFontSize': 'Dynamiczny rozmiar czcionki',
+  'schemas.text.format': 'Format',
   'schemas.barcodes.barColor': 'Kolor paska',
   'schemas.barcodes.includetext': 'Dołącz tekst',
   'schemas.table.alternateBackgroundColor': 'Alternatywny kolor tła',
@@ -528,6 +536,7 @@ const dictDe: { [key in keyof Dict]: string } = {
   'schemas.text.max': 'Max',
   'schemas.text.fit': 'Anpassen',
   'schemas.text.dynamicFontSize': 'Dynamische Schriftgröße',
+  'schemas.text.format': 'Format',
   'schemas.barcodes.barColor': 'Strichcodefarbe',
   'schemas.barcodes.includetext': 'Text anzeigen',
   'schemas.table.alternateBackgroundColor': 'Wechselnde Hintergrundfarbe',
@@ -589,6 +598,7 @@ const dictEs: { [key in keyof Dict]: string } = {
   'schemas.text.max': 'Máx',
   'schemas.text.fit': 'Ajustar',
   'schemas.text.dynamicFontSize': 'Tamaño de fuente dinámico',
+  'schemas.text.format': 'Formato',
   'schemas.barcodes.barColor': 'Color de la barra',
   'schemas.barcodes.includetext': 'Incluir texto',
   'schemas.table.alternateBackgroundColor': 'Color de fondo alternativo',
@@ -615,7 +625,7 @@ const dictFr: { [key in keyof Dict]: string } = {
   fieldsList: 'Liste des champs',
   editField: 'Éditer le champ',
   type: 'Type',
-  errorOccurred:' Une erreur est survenue',
+  errorOccurred:'Une erreur est survenue',
   errorBulkUpdateFieldName: "Impossible de confirmer le changement car le nombre d'éléments a changé.",
   commitBulkUpdateFieldName: 'Confirmer les changements',
   bulkUpdateFieldName: 'Modifier les noms de champs en masse',
@@ -648,6 +658,7 @@ const dictFr: { [key in keyof Dict]: string } = {
   'schemas.text.max': 'Max',
   'schemas.text.fit': 'Ajustement',
   'schemas.text.dynamicFontSize': 'Taille de police dynamique',
+  'schemas.text.format': 'Format',
   'schemas.barcodes.barColor': 'Couleur de la barre',
   'schemas.barcodes.includetext': 'Inclure le texte',
   'schemas.table.alternateBackgroundColor': 'Couleur de fond alternative',