@pdfme/ui 4.2.4-dev.1 → 4.2.4-dev.10

package/dist/types/class.d.ts

@@ -37,6 +37,7 @@ export declare abstract class BaseUIClass {
             rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
             opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            required: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{
             type: import("zod").ZodString;
             content: import("zod").ZodOptional<import("zod").ZodString>;
@@ -55,6 +56,7 @@ export declare abstract class BaseUIClass {
             rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
             opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            required: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{
             type: import("zod").ZodString;
             content: import("zod").ZodOptional<import("zod").ZodString>;
@@ -73,6 +75,7 @@ export declare abstract class BaseUIClass {
             rotate: import("zod").ZodOptional<import("zod").ZodNumber>;
             opacity: import("zod").ZodOptional<import("zod").ZodNumber>;
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
+            required: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, import("zod").ZodTypeAny, "passthrough">>>, "many">;
         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;

package/dist/types/components/Designer/PluginIcon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Plugin } from "@pdfme/common";
+interface PluginIconProps {
+    plugin: Plugin<any>;
+    label: string;
+    size?: number;
+    styles?: React.CSSProperties;
+}
+declare const PluginIcon: (props: PluginIconProps) => React.JSX.Element;
+export default PluginIcon;

package/dist/types/components/Designer/RightSidebar/ListView/Item.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
 interface Props {
     value: React.ReactNode;
+    icon?: React.ReactNode;
     style?: React.CSSProperties;
     status?: 'is-warning' | 'is-danger';
     title?: string;
+    required?: boolean;
     dragOverlay?: boolean;
     onClick?: () => void;
     onMouseEnter?: () => void;

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.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "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" | "required" | "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.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "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;
@@ -10,6 +10,7 @@ export declare const I18nContext: import("react").Context<(key: "type" | "width"
     height: string;
     rotate: string;
     edit: string;
+    required: string;
     plsInputName: string;
     fieldMustUniq: string;
     notUniq: string;

package/dist/types/helper.d.ts

@@ -36,6 +36,7 @@ export declare const template2SchemasList: (_template: Template) => Promise<{
     key: string;
     opacity?: number | undefined;
     rotate?: number | undefined;
+    required?: boolean | undefined;
     content?: string | undefined;
     readOnly?: boolean | undefined;
 }[][]>;

package/package.json

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

package/src/components/Designer/LeftSidebar.tsx

@@ -8,7 +8,8 @@ import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from "@dnd-kit/utilities";
 import Renderer from '../Renderer';
-import { PluginsRegistry, OptionsContext } from '../../contexts';
+import { PluginsRegistry } from '../../contexts';
+import PluginIcon from "./PluginIcon";
 
 const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
   const { scale, basePdf, plugin } = props;
@@ -44,8 +45,6 @@ const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf
 const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number, basePdf: BasePdf }) => {
   const { token } = theme.useToken();
   const pluginsRegistry = useContext(PluginsRegistry);
-  const options = useContext(OptionsContext);
-
   const [isDragging, setIsDragging] = useState(false);
 
   useEffect(() => {
@@ -77,7 +76,6 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
   >
     {Object.entries(pluginsRegistry).map(([label, plugin]) => {
       if (!plugin?.propPanel.defaultSchema) return null;
-      const icon = options.icons?.[plugin.propPanel.defaultSchema.type] ?? plugin.icon;
 
       return <Draggable
         key={label}
@@ -85,16 +83,10 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
         basePdf={basePdf}
         plugin={plugin}>
         <Button
-          title={label}
-          onMouseDown={() => {
-            setIsDragging(true);
-          }}
-          style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}>
-          {icon ?
-            <div dangerouslySetInnerHTML={{ __html: icon }} />
-            :
-            <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</div>
-          }
+          onMouseDown={() => setIsDragging(true)}
+          style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}
+        >
+          <PluginIcon plugin={plugin} label={label} />
         </Button>
       </Draggable>
     })}

package/src/components/Designer/PluginIcon.tsx

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import { Plugin } from "@pdfme/common";
+import { OptionsContext } from '../../contexts';
+
+interface PluginIconProps {
+  plugin: Plugin<any>;
+  label: string;
+  size?: number;
+  styles?: React.CSSProperties;
+}
+
+const getWithModifiedSize = (htmlString: string, label: string, size: number, styles?: React.CSSProperties) => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(htmlString, 'text/html');
+
+  const modifyNode = (node: HTMLElement) => {
+    if (node.tagName === 'SVG' || node.tagName === 'svg') {
+      node.setAttribute('width', size.toString());
+      node.setAttribute('height', size.toString());
+    }
+    Array.from(node.children).forEach(child => modifyNode(child as HTMLElement));
+  };
+
+  Array.from(doc.body.children).forEach(child => modifyNode(child as HTMLElement));
+
+  return (
+    <div style={styles} title={label} dangerouslySetInnerHTML={{ __html: doc.body.innerHTML }} />
+  );
+};
+
+const PluginIcon = (props: PluginIconProps) => {
+  const { plugin, label, size, styles } = props;
+  const options = useContext(OptionsContext);
+  const icon = options.icons?.[plugin.propPanel.defaultSchema.type] ?? plugin.icon;
+  const iconStyles = { ...styles, display: 'flex', justifyContent: 'center' };
+
+  if (icon) {
+    if (size) {
+      return getWithModifiedSize(icon, label, size, iconStyles);
+    }
+    return <div style={iconStyles} title={label}  dangerouslySetInnerHTML={{__html: icon}} />
+  }
+
+  return <div style={{...styles, overflow: 'hidden', fontSize: 10, }}>{label}</div>
+};
+
+export default PluginIcon;

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

@@ -6,7 +6,7 @@ interface ButtonConfig {
   key: string;
   icon: string;
   type: 'boolean' | 'select';
-  value?: String;
+  value?: string;
 }
 
 const ButtonGroupWidget = (props: PropPanelWidgetProps) => {

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

@@ -65,6 +65,11 @@ const DetailView = (props: DetailViewProps) => {
     values.x = values.position.x;
     values.y = values.position.y;
     delete values.position;
+
+    if (values.key !== (form.getValues() || {}).key) {
+      form.resetFields();
+    }
+
     form.setValues(values);
 
   }, [activeSchema, form]);
@@ -147,7 +152,8 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         required: true,
         span: 12,
       },
-      key: { title: i18n('fieldName'), type: 'string', required: true, span: 12 },
+      key: { title: i18n('fieldName'), type: 'string', required: true, span: 12, props: { autocomplete: "off"} },
+      required: { title: i18n('required'), type: 'boolean', span: 8, hidden: defaultSchema?.readOnly },
       '-': { type: 'void', widget: 'Divider' },
       align: { title: i18n('align'), type: 'void', widget: 'AlignWidget' },
       x: { title: 'X', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },

package/src/components/Designer/RightSidebar/ListView/Item.tsx

@@ -8,9 +8,11 @@ const { Text } = Typography;
 
 interface Props {
   value: React.ReactNode;
+  icon?: React.ReactNode;
   style?: React.CSSProperties;
   status?: 'is-warning' | 'is-danger';
   title?: string;
+  required?: boolean;
   dragOverlay?: boolean;
   onClick?: () => void;
   onMouseEnter?: () => void;
@@ -26,9 +28,11 @@ const Item = React.memo(
   React.forwardRef<HTMLLIElement, Props>(
     (
       {
+        icon,
         value,
         status,
         title,
+        required,
         style,
         dragOverlay,
         onClick,
@@ -93,6 +97,7 @@ const Item = React.memo(
               }}
               icon={<HolderOutlined style={{ cursor: 'grab' }} />}
             />
+            {icon}
             <Text
               style={{
                 overflow: 'hidden',
@@ -105,12 +110,13 @@ const Item = React.memo(
               {status === undefined ? (
                 value
               ) : (
-                <span style={{ display: 'flex', alignItems: 'center' }}>
+                <span>
                   <ExclamationCircleOutlined width={15} style={{ marginRight: '0.5rem' }} />
                   {status === 'is-warning' ? i18n('noKeyName') : value}
                   {status === 'is-danger' ? i18n('notUniq') : ''}
                 </span>
               )}
+              {required && <span style={{ color: 'red', marginLeft: '0.5rem' }}>*</span>}
             </Text>
           </div>
         </li>

package/src/components/Designer/RightSidebar/ListView/SelectableSortableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useContext, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import {
   closestCorners,
@@ -17,9 +17,11 @@ import {
 } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types';
+import { PluginsRegistry } from '../../../../contexts';
 import Item from './Item';
 import SelectableSortableItem from './SelectableSortableItem';
 import { theme } from 'antd';
+import PluginIcon from "../../PluginIcon";
 
 const SelectableSortableContainer = (
   props: Pick<
@@ -28,11 +30,11 @@ const SelectableSortableContainer = (
   >
 ) => {
   const { token } = theme.useToken();
-
   const { schemas, onEdit, onSortEnd, hoveringSchemaId, onChangeHoveringSchemaId } = props;
   const [selectedSchemas, setSelectedSchemas] = useState<SchemaForUI[]>([]);
-  const [dragOverlaydItems, setClonedItems] = useState<SchemaForUI[] | null>(null);
+  const [dragOverlaidItems, setClonedItems] = useState<SchemaForUI[] | null>(null);
   const [activeId, setActiveId] = useState<string | null>(null);
+  const pluginsRegistry = useContext(PluginsRegistry);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 15 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
@@ -56,6 +58,20 @@ const SelectableSortableContainer = (
     }
   };
 
+  const getPluginIcon = (inSchema: string|SchemaForUI): ReactNode => {
+    const thisSchema = (typeof inSchema === 'string') ? schemas.find((schema) => schema.id === inSchema) : inSchema;
+
+    const [pluginLabel, activePlugin] = Object.entries(pluginsRegistry).find(
+      ([label, plugin]) => plugin?.propPanel.defaultSchema.type === thisSchema?.type
+    )!;
+
+    if (!activePlugin) {
+      return <></>
+    }
+
+    return <PluginIcon plugin={activePlugin} label={pluginLabel} size={20} styles={{marginRight: '0.5rem'}}/>
+  };
+
   return (
     <DndContext
       sensors={sensors}
@@ -101,8 +117,8 @@ const SelectableSortableContainer = (
         setActiveId(null);
       }}
       onDragCancel={() => {
-        if (dragOverlaydItems) {
-          onSortEnd(dragOverlaydItems);
+        if (dragOverlaidItems) {
+          onSortEnd(dragOverlaidItems);
         }
 
         setActiveId(null);
@@ -139,7 +155,9 @@ const SelectableSortableContainer = (
               <>
                 <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
                   <Item
+                    icon={getPluginIcon(activeId)}
                     value={schemas.find((schema) => schema.id === activeId)!.key}
+                    required={schemas.find((schema) => schema.id === activeId)!.required}
                     style={{ background: token.colorPrimary }}
                     dragOverlay
                   />
@@ -149,8 +167,10 @@ const SelectableSortableContainer = (
                     .filter((item) => item.id !== activeId)
                     .map((item) => (
                       <Item
+                        icon={getPluginIcon(item)}
                         key={item.id}
                         value={item.key}
+                        required={item.required}
                         style={{ background: token.colorPrimary }}
                         dragOverlay
                       />

package/src/components/Designer/RightSidebar/ListView/SelectableSortableItem.tsx

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
-import { I18nContext } from '../../../../contexts';
+import { PluginsRegistry, I18nContext } from '../../../../contexts';
 import Item from './Item';
 import { useMountStatus } from '../../../../hooks';
 import { theme } from 'antd';
+import PluginIcon from "../../PluginIcon";
 
 interface Props {
   isSelected: boolean;
@@ -29,6 +30,7 @@ const SelectableSortableItem = ({
   const { token } = theme.useToken();
 
   const i18n = useContext(I18nContext);
+  const pluginsRegistry = useContext(PluginsRegistry);
   const { setNodeRef, listeners, isDragging, isSorting, transform, transition } = useSortable({
     id: schema.id,
   });
@@ -40,6 +42,12 @@ const SelectableSortableItem = ({
     onClick: (event: any) => onSelect(schema.id, event.shiftKey),
   };
 
+  const [pluginLabel, thisPlugin] = Object.entries(pluginsRegistry).find(
+    ([label, plugin]) => plugin?.propPanel.defaultSchema.type === schema.type
+  )!;
+
+  const iconStyles = { width: 20, marginRight: '0.5rem' };
+
   let status: undefined | 'is-warning' | 'is-danger';
   if (!schema.key) {
     status = 'is-warning';
@@ -64,9 +72,11 @@ const SelectableSortableItem = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       onClick={() => onEdit(schema.id)}
+      icon={thisPlugin && <PluginIcon plugin={thisPlugin} label={pluginLabel} size={20} styles={iconStyles}/>}
       value={schema.key}
       status={status}
       title={title}
+      required={schema.required}
       style={{ ...selectedStyle, ...style }}
       dragging={isDragging}
       sorting={isSorting}

package/src/components/Designer/index.tsx

@@ -15,7 +15,7 @@ import RightSidebar from './RightSidebar/index';
 import LeftSidebar from './LeftSidebar';
 import Canvas from './Canvas/index';
 import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../constants';
-import { I18nContext, PluginsRegistry } from '../../contexts';
+import { I18nContext, OptionsContext, PluginsRegistry } from '../../contexts';
 import {
   schemasList2template,
   uuid,
@@ -62,6 +62,7 @@ const TemplateEditor = ({
 
   const i18n = useContext(I18nContext);
   const pluginsRegistry = useContext(PluginsRegistry);
+  const options = useContext(OptionsContext);
 
   const [hoveringSchemaId, setHoveringSchemaId] = useState<string | null>(null);
   const [activeElements, setActiveElements] = useState<HTMLElement[]>([]);
@@ -171,6 +172,7 @@ const TemplateEditor = ({
         x: ensureMiddleValue(paddingLeft, defaultSchema.position.x, pageSize.width - paddingRight - defaultSchema.width),
         y: ensureMiddleValue(paddingTop, defaultSchema.position.y, pageSize.height - paddingBottom - defaultSchema.height),
       },
+      required: defaultSchema.readOnly ? false : options.requiredByDefault || defaultSchema.required || false,
     } as SchemaForUI;
 
     if (defaultSchema.position.y === 0) {

package/src/components/Renderer.tsx

@@ -62,6 +62,16 @@ const Wrapper = ({
       outline,
     }}
   >
+    {schema.required &&
+      <span style={{
+        color: 'red',
+        position: 'absolute',
+        top: -12,
+        left: -12,
+        fontSize: 18,
+        fontWeight: 700,
+      }}>*</span>
+    }
     {children}
   </div>
 );

package/src/helper.ts

@@ -448,7 +448,7 @@ const handleTypeChange = (
   pluginsRegistry: Plugins
 ) => {
   if (key !== 'type') return;
-  const keysToKeep = ['id', 'key', 'type', 'position'];
+  const keysToKeep = ['id', 'key', 'type', 'position', 'required'];
   Object.keys(schema).forEach((key) => {
     if (!keysToKeep.includes(key)) {
       delete schema[key as keyof typeof schema];
@@ -463,6 +463,9 @@ const handleTypeChange = (
       (schema as any)[key] = propPanel?.defaultSchema[key];
     }
   });
+  if (schema.readOnly) {
+    schema.required = false;
+  }
 };
 
 export const changeSchemas = (args: {

package/src/i18n.ts

@@ -10,6 +10,7 @@ const dictEn: { [key in keyof Dict]: string } = {
   height: 'Height',
   opacity: 'Opacity',
   rotate: 'Rotate',
+  required: 'Required',
   edit: 'Edit',
   plsInputName: 'Please input name',
   fieldMustUniq: 'Name of field is not unique',
@@ -74,6 +75,7 @@ const dictZh: { [key in keyof Dict]: string } = {
   height: '高度',
   opacity: '透明度',
   rotate: '旋转',
+  required: '必需的',
   edit: '编辑',
   plsInputName: '请输入名称',
   fieldMustUniq: '字段名称必须唯一',
@@ -137,6 +139,7 @@ const dictJa: { [key in keyof Dict]: string } = {
   height: '高さ',
   opacity: '不透明度',
   rotate: '回転',
+  required: '必須',
   edit: '編集する',
   plsInputName: '項目名を入力してください',
   fieldMustUniq: '他の入力項目名と被っています',
@@ -200,6 +203,7 @@ const dictKo: { [key in keyof Dict]: string } = {
   height: '높이',
   opacity: '투명도',
   rotate: '회전',
+  required: '필수의',
   edit: '편집',
   plsInputName: '이름을 입력하세요',
   fieldMustUniq: '필드 이름은 유일해야 합니다',
@@ -263,6 +267,7 @@ const dictAr: { [key in keyof Dict]: string } = {
   height: 'الارتفاع',
   opacity: 'الشفافية',
   rotate: 'تدوير',
+  required: 'مطلوب',
   edit: 'تعديل',
   plsInputName: 'الرجاء إدخال الاسم',
   fieldMustUniq: 'يجب أن يكون الحقل فريداً',
@@ -326,6 +331,7 @@ const dictTh: { [key in keyof Dict]: string } = {
   height: 'ความสูง',
   opacity: 'ความทึบ',
   rotate: 'หมุน',
+  required: 'ที่จำเป็น',
   edit: 'แก้ไข',
   plsInputName: 'กรุณาใส่ชื่อ',
   fieldMustUniq: 'ชื่อฟิลด์ต้องไม่ซ้ำกัน',
@@ -389,6 +395,7 @@ const dictIt: { [key in keyof Dict]: string } = {
   height: 'Altezza',
   opacity: 'Opacità',
   rotate: 'Ruota',
+  required: 'Necessaria',
   edit: 'Modifica',
   plsInputName: 'Inserisci il nome per favore',
   fieldMustUniq: 'Il nome del campo non è univoco',
@@ -454,6 +461,7 @@ const dictPl: { [key in keyof Dict]: string } = {
   height: 'Wysokość',
   opacity: 'przezroczystość',
   rotate: 'Obrót',
+  required: 'Wymagany',
   edit: 'Edytuj',
   plsInputName: 'Wymagane wprowadzenie klucza pola',
   fieldMustUniq: 'Klucz pola nie jest unikalny',
@@ -517,6 +525,7 @@ const dictDe: { [key in keyof Dict]: string } = {
   height: 'Höhe',
   opacity: 'Opazität',
   rotate: 'Drehen',
+  required: 'Erforderlich',
   edit: 'Bearbeiten',
   plsInputName: 'Bitte geben Sie einen Namen ein',
   fieldMustUniq: 'Feldname ist nicht eindeutig',
@@ -582,6 +591,7 @@ const dictEs: { [key in keyof Dict]: string } = {
   height: 'Altura',
   opacity: 'Opacidad',
   rotate: 'Rotar',
+  required: 'Requerido',
   edit: 'Editar',
   plsInputName: 'Introduce el nombre',
   fieldMustUniq: 'El nombre del campo no es único',
@@ -647,6 +657,7 @@ const dictFr: { [key in keyof Dict]: string } = {
   height: 'Hauteur',
   opacity: 'Opacité',
   rotate: 'Rotation',
+  required: 'Requis',
   edit: 'Éditer',
   plsInputName: 'Veuillez saisir le nom',
   fieldMustUniq:"Le nom du champ n'est pas unique",