@pdfme/schemas 5.0.0 → 5.1.1-dev.1

package/src/date/helper.ts

@@ -0,0 +1,281 @@
+import type * as CSS from 'csstype';
+import AirDatepicker, { AirDatepickerLocale } from 'air-datepicker';
+import localeEn from 'air-datepicker/locale/en';
+import localeZh from 'air-datepicker/locale/zh';
+import localeJa from 'air-datepicker/locale/ja';
+import localeKo from 'air-datepicker/locale/ko';
+import localeAr from 'air-datepicker/locale/ar';
+import localeTh from 'air-datepicker/locale/th';
+import localePl from 'air-datepicker/locale/pl';
+import localeIt from 'air-datepicker/locale/it';
+import localeDe from 'air-datepicker/locale/de';
+import localeEs from 'air-datepicker/locale/es';
+import localeFr from 'air-datepicker/locale/fr';
+import 'air-datepicker/air-datepicker.css';
+import { format } from 'date-fns';
+import { enUS, zhCN, ja, ko, ar, th, pl, it, de, es, fr, Locale } from 'date-fns/locale';
+import {
+  Lang,
+  Plugin,
+  getDefaultFont,
+  getFallbackFontName,
+  DEFAULT_FONT_NAME,
+  PropPanelSchema,
+} from '@pdfme/common';
+import text from '../text';
+import { DEFAULT_OPACITY, HEX_COLOR_PATTERN } from '../constants.js';
+import { mapVerticalAlignToFlex, getBackgroundColor } from '../text/uiRender';
+import { getFontKitFont, getBrowserVerticalFontAdjustments } from '../text/helper.js';
+import {
+  DEFAULT_FONT_SIZE,
+  DEFAULT_ALIGNMENT,
+  VERTICAL_ALIGN_MIDDLE,
+  DEFAULT_LINE_HEIGHT,
+  DEFAULT_CHARACTER_SPACING,
+  DEFAULT_FONT_COLOR,
+} from '../text/constants.js';
+import { DateSchema } from './types';
+import { getExtraFormatterSchema, Formatter } from '../text/extraFormatter';
+import { isEditable } from '../utils';
+
+const getDateFnsLocale = (lang: Lang): Locale | undefined =>
+  ({ en: enUS, zh: zhCN, ja, ko, ar, th, pl, it, de, es, fr }[lang]);
+
+const getAirDatepickerLocale = (lang: Lang): AirDatepickerLocale | undefined =>
+  ({
+    en: localeEn,
+    zh: localeZh,
+    ja: localeJa,
+    ko: localeKo,
+    ar: localeAr,
+    th: localeTh,
+    pl: localePl,
+    it: localeIt,
+    de: localeDe,
+    es: localeEs,
+    fr: localeFr,
+  }[lang]);
+
+export const getPlugin = ({
+  type,
+  defaultFormat,
+  icon,
+  formatsByLang,
+}: {
+  type: 'date' | 'time' | 'dateTime';
+  defaultFormat: string;
+  icon: string;
+  formatsByLang: Record<Lang, string[]>;
+}) => {
+  const plugin: Plugin<DateSchema> = {
+    ui: async (arg) => {
+      const { schema, value, onChange, rootElement, mode, options, i18n, _cache } = arg;
+
+      const beforeRemoveEvent = new Event('beforeRemove');
+      rootElement.dispatchEvent(beforeRemoveEvent);
+
+      const font = options?.font || getDefaultFont();
+      const fontKitFont = await getFontKitFont(schema.fontName, font, _cache);
+
+      const { topAdj, bottomAdj } = getBrowserVerticalFontAdjustments(
+        fontKitFont,
+        schema.fontSize ?? DEFAULT_FONT_SIZE,
+        DEFAULT_LINE_HEIGHT,
+        VERTICAL_ALIGN_MIDDLE
+      );
+
+      const topAdjustment = topAdj.toString();
+      const bottomAdjustment = bottomAdj.toString();
+      const textStyle: CSS.Properties = {
+        fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
+        color: schema.fontColor ?? DEFAULT_FONT_COLOR,
+        fontSize: `${schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
+        letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
+        textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
+        backgroundColor: getBackgroundColor(value, schema),
+
+        margin: '0',
+        padding: '0',
+        border: 'none',
+        outline: 'none',
+        width: `${schema.width}mm`,
+        height: `${schema.height}mm`,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: mapVerticalAlignToFlex(VERTICAL_ALIGN_MIDDLE),
+        paddingTop: `${topAdjustment}px`,
+        marginBottom: `${bottomAdjustment}px`,
+        position: 'relative',
+      };
+
+      const input = document.createElement('input');
+
+      Object.assign(input.style, textStyle);
+
+      const commitChange = ({ datepicker }: { datepicker: AirDatepicker<HTMLInputElement> }) => {
+        if (onChange) {
+          const date = datepicker.selectedDates;
+          const fmt =
+            type === 'time' ? 'HH:mm' : type === 'date' ? 'yyyy/MM/dd' : 'yyyy/MM/dd HH:mm';
+          const d = Array.isArray(date) ? date[0] : date || '';
+          const value = d ? format(d, fmt) : '';
+          onChange({ key: 'content', value });
+        }
+      };
+
+      const airDatepicker = new AirDatepicker(input, {
+        locale: getAirDatepickerLocale(options.lang || 'en'),
+        selectedDates: [schema.type === 'time' ? new Date(`2021-01-01T${value}`) : new Date(value)],
+        dateFormat: (date) => (schema.format ? format(date, schema.format) : ''),
+        timepicker: type !== 'date',
+        onlyTimepicker: type === 'time',
+        buttons: [
+          'clear',
+          {
+            content: i18n('close'),
+            onClick: (datepicker) => {
+              datepicker.hide();
+              commitChange({ datepicker });
+            },
+          },
+        ],
+        onSelect: ({ datepicker }) => {
+          mode !== 'designer' && commitChange({ datepicker });
+        },
+        onShow: () => {
+          input.disabled = !isEditable(mode, schema);
+        },
+      });
+
+      rootElement.addEventListener('beforeRemove', () => {
+        if (mode === 'designer') {
+          airDatepicker.destroy();
+        }
+      });
+      input.addEventListener('click', () => {
+        if (mode === 'designer') {
+          airDatepicker.show();
+        }
+      });
+
+      rootElement.appendChild(input);
+    },
+    pdf: (arg) => {
+      const { schema, value, options } = arg;
+      if (!value) return void 0;
+      const lang = (options.lang || 'en') as Lang;
+      const locale = getDateFnsLocale(lang);
+      const date = schema.type === 'time' ? new Date(`2021-01-01T${value}`) : new Date(value);
+      const formattedValue = format(date, schema.format, { locale });
+      return text.pdf(
+        Object.assign(arg, {
+          value: formattedValue,
+          schema: {
+            ...schema,
+            verticalAlignment: VERTICAL_ALIGN_MIDDLE,
+            lineHeight: DEFAULT_LINE_HEIGHT,
+          },
+        })
+      );
+    },
+    propPanel: {
+      schema: ({ options, i18n }) => {
+        const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
+        const lang = options.lang || 'en';
+        const locale = getDateFnsLocale(lang);
+
+        const fontNames = Object.keys(font);
+        const fallbackFontName = getFallbackFontName(font);
+
+        const formatter = getExtraFormatterSchema(i18n);
+        formatter.buttons = formatter.buttons.filter(
+          (button) => button.key === Formatter.ALIGNMENT
+        );
+
+        const currentDate = new Date();
+
+        const dateSchema: Record<string, PropPanelSchema> = {
+          format: {
+            title: i18n('schemas.date.format'),
+            type: 'string',
+            widget: 'select',
+            props: {
+              options: formatsByLang[lang].map((formatString) => ({
+                label: `${formatString} (${format(currentDate, formatString, { locale })})`,
+                value: formatString,
+              })),
+            },
+            span: 24,
+          },
+          fontName: {
+            title: i18n('schemas.text.fontName'),
+            type: 'string',
+            widget: 'select',
+            default: fallbackFontName,
+            props: { options: fontNames.map((name) => ({ label: name, value: name })) },
+            span: 12,
+          },
+          fontSize: {
+            title: i18n('schemas.text.size'),
+            type: 'number',
+            widget: 'inputNumber',
+            span: 6,
+            props: { min: 0 },
+          },
+          characterSpacing: {
+            title: i18n('schemas.text.spacing'),
+            type: 'number',
+            widget: 'inputNumber',
+            span: 6,
+            props: { min: 0 },
+          },
+          formatter,
+          fontColor: {
+            title: i18n('schemas.textColor'),
+            type: 'string',
+            widget: 'color',
+            rules: [
+              {
+                pattern: HEX_COLOR_PATTERN,
+                message: i18n('validation.hexColor'),
+              },
+            ],
+          },
+          backgroundColor: {
+            title: i18n('schemas.bgColor'),
+            type: 'string',
+            widget: 'color',
+            rules: [
+              {
+                pattern: HEX_COLOR_PATTERN,
+                message: i18n('validation.hexColor'),
+              },
+            ],
+          },
+        };
+
+        return dateSchema;
+      },
+      defaultSchema: {
+        name: '',
+        format: defaultFormat,
+        type,
+        content: format(new Date(), defaultFormat),
+        position: { x: 0, y: 0 },
+        width: 70,
+        height: 10,
+        rotate: 0,
+        alignment: DEFAULT_ALIGNMENT,
+        fontSize: DEFAULT_FONT_SIZE,
+        characterSpacing: DEFAULT_CHARACTER_SPACING,
+        fontColor: DEFAULT_FONT_COLOR,
+        fontName: undefined,
+        backgroundColor: '',
+        opacity: DEFAULT_OPACITY,
+      },
+    },
+    icon,
+  };
+
+  return plugin;
+};

package/src/date/time.ts

@@ -0,0 +1,29 @@
+import { Lang } from '@pdfme/common';
+import { getPlugin } from './helper';
+
+const type = 'time';
+
+const defaultFormat = 'HH:mm';
+
+const formatsByLang: Record<Lang, string[]> = {
+  en: [defaultFormat, 'hh:mm a', 'HH:mm:ss', 'hh:mm:ss a'],
+  zh: [defaultFormat, 'HH时mm分', 'HH:mm:ss'],
+  ja: [defaultFormat, 'HH時mm分', 'HH:mm:ss'],
+  ko: [defaultFormat, 'a h시 mm분', 'HH:mm:ss'],
+  ar: [defaultFormat, 'hh:mm a', 'HH:mm:ss'],
+  th: [defaultFormat, 'HH.mm', 'HH:mm:ss'],
+  pl: [defaultFormat, 'HH:mm:ss'],
+  it: [defaultFormat, 'HH.mm', 'HH:mm:ss'],
+  de: [defaultFormat, 'HH.mm', 'HH:mm:ss'],
+  es: [defaultFormat, 'hh:mm a', 'HH:mm:ss'],
+  fr: [defaultFormat, 'HH:mm:ss'],
+};
+
+const 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-clock"><circle cx="12" cy="12" r="10"/>' +
+  '<polyline points="12 6 12 12 16 14"/></svg>';
+
+export default getPlugin({ type, defaultFormat, icon, formatsByLang });

package/src/date/types.ts

@@ -0,0 +1,12 @@
+import { Schema } from '@pdfme/common';
+import { ALIGNMENT } from '../text/types';
+
+export interface DateSchema extends Schema {
+  format: string;
+  fontName?: string;
+  alignment: ALIGNMENT;
+  fontSize: number;
+  characterSpacing: number;
+  fontColor: string;
+  backgroundColor: string;
+}

package/src/index.ts

@@ -6,6 +6,10 @@ import barcodes from './barcodes/index.js';
 import line from './shapes/line.js';
 import table from './tables/index.js';
 import { rectangle, ellipse } from './shapes/rectAndEllipse.js';
+import dateTime from './date/dateTime.js';
+import date from './date/date.js';
+import time from './date/time.js';
+import select from './select/index.js';
 
 const builtInPlugins = { Text: text };
 
@@ -21,4 +25,8 @@ export {
   line,
   rectangle,
   ellipse,
+  dateTime,
+  date,
+  time,
+  select,
 };

package/src/select/index.ts

@@ -0,0 +1,197 @@
+import type * as CSS from 'csstype';
+import { propPanel as parentPropPanel } from '../text/propPanel';
+import { Plugin, PropPanelWidgetProps, SchemaForUI } from '@pdfme/common';
+import text from '../text';
+import { TextSchema } from '../text/types';
+
+const selectIcon =
+  '<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-chevron-down"><path d="m6 9 6 6 6-6"/></svg>';
+
+interface Select extends TextSchema {
+  options: string[];
+}
+
+const addOptions = (props: PropPanelWidgetProps) => {
+  const { rootElement, changeSchemas, activeSchema, i18n } = props;
+
+  rootElement.style.width = '100%';
+
+  const selectSchema = activeSchema as SchemaForUI & Select;
+  const currentOptions = selectSchema.options ? [...selectSchema.options] : [];
+
+  const inputStyle = {
+    width: '100%',
+    padding: '6.25px 11px',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+  };
+
+  const buttonStyle = { border: 'none', borderRadius: '4px', cursor: 'pointer' };
+
+  const updateSchemas = () => {
+    changeSchemas([
+      { key: 'options', value: currentOptions, schemaId: activeSchema.id },
+      { key: 'content', value: currentOptions[0] || '', schemaId: activeSchema.id },
+    ]);
+  };
+
+  const formContainer = document.createElement('div');
+  Object.assign(formContainer.style, {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: '10px',
+  });
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.placeholder = i18n('schemas.select.optionPlaceholder');
+  Object.assign(input.style, inputStyle, { marginRight: '10px' });
+
+  const addButton = document.createElement('button');
+  addButton.textContent = '+';
+  Object.assign(addButton.style, buttonStyle, {
+    width: '25px',
+    height: '25px',
+    padding: '4px 8px',
+  });
+
+  addButton.addEventListener('click', () => {
+    const newValue = input.value.trim();
+    if (newValue) {
+      currentOptions.push(newValue);
+      updateSchemas();
+      renderOptions();
+      input.value = '';
+    }
+  });
+
+  formContainer.appendChild(input);
+  formContainer.appendChild(addButton);
+
+  const optionsList = document.createElement('ul');
+  Object.assign(optionsList.style, { listStyle: 'none', padding: '0' });
+
+  const renderOptions = () => {
+    optionsList.innerHTML = '';
+    currentOptions.forEach((option, index) => {
+      const li = document.createElement('li');
+      Object.assign(li.style, { display: 'flex', alignItems: 'center', marginBottom: '5px' });
+
+      const optionInput = document.createElement('input');
+      optionInput.type = 'text';
+      optionInput.value = option;
+      Object.assign(optionInput.style, inputStyle, { marginRight: '10px' });
+
+      optionInput.addEventListener('change', () => {
+        currentOptions[index] = optionInput.value;
+        updateSchemas();
+      });
+
+      const removeButton = document.createElement('button');
+      removeButton.textContent = 'x';
+      Object.assign(removeButton.style, buttonStyle, { padding: '4px 8px' });
+
+      removeButton.addEventListener('click', () => {
+        currentOptions.splice(index, 1);
+        updateSchemas();
+        renderOptions();
+      });
+
+      li.appendChild(optionInput);
+      li.appendChild(removeButton);
+      optionsList.appendChild(li);
+    });
+  };
+
+  rootElement.appendChild(formContainer);
+  rootElement.appendChild(optionsList);
+
+  renderOptions();
+};
+
+const schema: Plugin<Select> = {
+  ui: async (arg) => {
+    const { schema, value, onChange, rootElement, mode } = arg;
+    await text.ui(Object.assign(arg, { mode: 'viewer' }));
+
+    if (mode !== 'viewer' && !(mode === 'form' && schema.readOnly)) {
+      const buttonWidth = 30;
+      const selectButton = document.createElement('button');
+      selectButton.innerHTML = selectIcon;
+      const selectButtonStyle: CSS.Properties = {
+        position: 'absolute',
+        zIndex: -1,
+        right: `-${buttonWidth}px`,
+        top: '0',
+        padding: '0',
+        margin: '0',
+        cursor: 'pointer',
+        height: `${buttonWidth}px`,
+        width: `${buttonWidth}px`,
+      };
+      Object.assign(selectButton.style, selectButtonStyle);
+
+      rootElement.appendChild(selectButton);
+
+      const selectElement = document.createElement('select');
+      const selectElementStyle: CSS.Properties = {
+        opacity: '0',
+        position: 'absolute',
+        width: `calc(100% + ${buttonWidth}px)`,
+        height: '100%',
+        top: '0',
+        left: '0',
+        appearance: 'initial',
+      };
+      Object.assign(selectElement.style, selectElementStyle);
+      selectElement.value = value;
+
+      selectElement.addEventListener('change', (e) => {
+        if (onChange && e.target instanceof HTMLSelectElement) {
+          onChange && onChange({ key: 'content', value: e.target.value });
+        }
+      });
+
+      selectElement.innerHTML = schema.options
+        .map(
+          (option) =>
+            `<option value="${option}" ${option === value ? 'selected' : ''}>${option}</option>`
+        )
+        .join('');
+      rootElement.appendChild(selectElement);
+    }
+  },
+  pdf: text.pdf,
+  propPanel: {
+    ...text.propPanel,
+    widgets: { ...parentPropPanel.widgets, addOptions },
+    schema: (propPanelProps: Omit<PropPanelWidgetProps, 'rootElement'>) => {
+      if (typeof parentPropPanel.schema !== 'function') {
+        throw Error('Oops, is text schema no longer a function?');
+      }
+
+      return {
+        ...parentPropPanel.schema(propPanelProps),
+        '-------': { type: 'void', widget: 'Divider' },
+
+        optionsContainer: {
+          title: (propPanelProps as PropPanelWidgetProps).i18n('schemas.select.options'),
+          type: 'string',
+          widget: 'Card',
+          span: 24,
+          properties: { options: { widget: 'addOptions', span: 24 } },
+        },
+      };
+    },
+    defaultSchema: {
+      ...text.propPanel.defaultSchema,
+      type: 'select',
+      content: 'option1',
+      options: ['option1', 'option2'],
+    },
+  },
+  icon: selectIcon,
+};
+
+export default schema;

package/src/text/extraFormatter.ts

@@ -35,14 +35,17 @@ interface GroupButtonString {
   key: Formatter;
   icon: string;
   type: 'select';
-  value: String;
+  value: string;
 }
 
 export type GroupButton = GroupButtonBoolean | GroupButtonString;
 
-export function getExtraFormatterSchema(
-  i18n: (key: keyof Dict | string) => string
-): Record<string, any> {
+export function getExtraFormatterSchema(i18n: (key: keyof Dict | string) => string): {
+  title: string;
+  widget: string;
+  buttons: GroupButton[];
+  span: number;
+} {
   const buttons: GroupButton[] = [
     { key: Formatter.STRIKETHROUGH, icon: TextStrikethroughIcon, type: 'boolean' },
     { key: Formatter.UNDERLINE, icon: TextUnderlineIcon, type: 'boolean' },

package/src/text/uiRender.ts

@@ -228,7 +228,7 @@ export const buildStyledTextContainer = async (arg: UIRenderProps<TextSchema>, v
   };
 
   const textBlock = document.createElement('div');
-  textBlock.id = 'text-' + schema.id;
+  textBlock.id = 'text-' + String(schema.id);
   Object.assign(textBlock.style, textBlockStyle);
 
   container.appendChild(textBlock);
@@ -265,7 +265,7 @@ export const makeElementPlainTextContentEditable = (element: HTMLElement) => {
   });
 };
 
-const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
+export const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   switch (verticalAlignmentValue) {
     case VERTICAL_ALIGN_TOP:
       return 'flex-start';
@@ -277,7 +277,7 @@ const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   return 'flex-start';
 };
 
-const getBackgroundColor = (value: string, schema: TextSchema) => {
+export const getBackgroundColor = (value: string, schema: { backgroundColor?: string }) => {
   if (!value || !schema.backgroundColor) return 'transparent';
-  return schema.backgroundColor as string;
+  return schema.backgroundColor;
 };