@pdfme/schemas 6.0.3 → 6.0.4-dev.1

package/src/select/index.ts

@@ -1,205 +0,0 @@
-import type * as CSS from 'csstype';
-import { propPanel as parentPropPanel } from '../text/propPanel.js';
-import { Plugin, PropPanelWidgetProps, SchemaForUI } from '@pdfme/common';
-import text from '../text/index.js';
-import { TextSchema } from '../text/types.js';
-import { ChevronDown } from 'lucide';
-import { createSvgStr } from '../utils.js';
-
-const selectIcon = createSvgStr(ChevronDown);
-
-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) {
-          if (onChange) onChange({ key: 'content', value: e.target.value });
-        }
-      });
-
-      // Ensure schema.options is an array before mapping
-      const options = Array.isArray(schema.options) ? schema.options : [];
-      options.forEach((option) => {
-        const optionElement = document.createElement('option');
-        optionElement.value = option;
-        optionElement.textContent = option;
-        if (option === value) optionElement.selected = true;
-        selectElement.appendChild(optionElement);
-      });
-      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?');
-      }
-
-      // Safely call the parent schema function with proper type checking
-      const parentSchema = parentPropPanel.schema(propPanelProps);
-
-      // Create a type-safe return object
-      return {
-        ...parentSchema,
-        '-------': { 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 as TextSchema),
-      type: 'select',
-      content: 'option1',
-      options: ['option1', 'option2'],
-    },
-  },
-  icon: selectIcon,
-};
-
-export default schema;

package/src/shapes/line.ts

@@ -1,94 +0,0 @@
-import type { Schema, Plugin } from '@pdfme/common';
-import {
-  rotatePoint,
-  convertForPdfLayoutProps,
-  hex2PrintingColor,
-  createSvgStr,
-} from '../utils.js';
-import { HEX_COLOR_PATTERN } from '../constants.js';
-import { Minus } from 'lucide';
-
-const DEFAULT_LINE_COLOR = '#000000';
-const HIT_POINT_HEIGHT = 16;
-
-interface LineSchema extends Schema {
-  color: string;
-}
-
-const lineSchema: Plugin<LineSchema> = {
-  pdf: (arg) => {
-    const { page, schema, options } = arg;
-    if (schema.width === 0 || schema.height === 0 || !schema.color) return;
-    const { colorType } = options;
-    const pageHeight = page.getHeight();
-    const {
-      width,
-      height,
-      rotate,
-      position: { x, y },
-      opacity,
-    } = convertForPdfLayoutProps({ schema, pageHeight, applyRotateTranslate: false });
-    const pivot = { x: x + width / 2, y: y + height / 2 };
-    page.drawLine({
-      start: rotatePoint({ x, y: y + height / 2 }, pivot, rotate.angle),
-      end: rotatePoint({ x: x + width, y: y + height / 2 }, pivot, rotate.angle),
-      thickness: height,
-      color: hex2PrintingColor(schema.color ?? DEFAULT_LINE_COLOR, colorType),
-      opacity: opacity,
-    });
-  },
-  ui: (arg) => {
-    const { schema, rootElement } = arg;
-    Object.assign(rootElement.style, { position: 'relative', overflow: 'visible' });
-
-    const baseStyles = {
-      position: 'absolute',
-      top: '50%',
-      left: '0',
-      transform: 'translateY(-50%)',
-      width: '100%',
-    } as const;
-
-    const hitArea = document.createElement('div');
-    Object.assign(hitArea.style, baseStyles, {
-      height: `${HIT_POINT_HEIGHT}px`,
-      backgroundColor: 'transparent',
-    });
-
-    const div = document.createElement('div');
-    Object.assign(div.style, baseStyles, {
-      height: '100%',
-      backgroundColor: schema.color ?? 'transparent',
-      pointerEvents: 'none',
-    });
-
-    rootElement.append(hitArea, div);
-  },
-  propPanel: {
-    schema: ({ i18n }) => ({
-      color: {
-        title: i18n('schemas.color'),
-        type: 'string',
-        widget: 'color',
-        props: {
-          disabledAlpha: true,
-        },
-        required: true,
-        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
-      },
-    }),
-    defaultSchema: {
-      name: '',
-      type: 'line',
-      position: { x: 0, y: 0 },
-      width: 50,
-      height: 0.5,
-      rotate: 0,
-      opacity: 1,
-      readOnly: true,
-      color: DEFAULT_LINE_COLOR,
-    },
-  },
-  icon: createSvgStr(Minus),
-};
-export default lineSchema;

package/src/shapes/rectAndEllipse.ts

@@ -1,152 +0,0 @@
-import { Plugin, Schema, mm2pt } from '@pdfme/common';
-import { HEX_COLOR_PATTERN } from '../constants.js';
-import { hex2PrintingColor, convertForPdfLayoutProps, createSvgStr } from '../utils.js';
-import { toRadians } from '@pdfme/pdf-lib';
-import { Circle, Square } from 'lucide';
-
-interface ShapeSchema extends Schema {
-  type: 'ellipse' | 'rectangle';
-  borderWidth: number;
-  borderColor: string;
-  color: string;
-  radius?: number;
-}
-
-const shape: Plugin<ShapeSchema> = {
-  ui: (arg) => {
-    const { schema, rootElement } = arg;
-    const div = document.createElement('div');
-    div.style.width = '100%';
-    div.style.height = '100%';
-    div.style.boxSizing = 'border-box';
-    if (schema.type === 'ellipse') {
-      div.style.borderRadius = '50%';
-    } else if (schema.radius && schema.radius > 0) {
-      div.style.borderRadius = `${schema.radius}mm`;
-    }
-    div.style.borderWidth = `${schema.borderWidth ?? 0}mm`;
-    div.style.borderStyle = schema.borderWidth && schema.borderColor ? 'solid' : 'none';
-    div.style.borderColor = schema.borderColor ?? 'transparent';
-    div.style.backgroundColor = schema.color ?? 'transparent';
-
-    rootElement.appendChild(div);
-  },
-  pdf: (arg) => {
-    const { schema, page, options } = arg;
-    if (!schema.color && !schema.borderColor) return;
-    const { colorType } = options;
-    const pageHeight = page.getHeight();
-    const cArg = { schema, pageHeight };
-    const { position, width, height, rotate, opacity } = convertForPdfLayoutProps(cArg);
-    const {
-      position: { x: x4Ellipse, y: y4Ellipse },
-    } = convertForPdfLayoutProps({ ...cArg, applyRotateTranslate: false });
-    const borderWidth = schema.borderWidth ? mm2pt(schema.borderWidth) : 0;
-
-    const drawOptions = {
-      rotate,
-      borderWidth,
-      borderColor: hex2PrintingColor(schema.borderColor, colorType),
-      color: hex2PrintingColor(schema.color, colorType),
-      opacity,
-      borderOpacity: opacity,
-    };
-    if (schema.type === 'ellipse') {
-      page.drawEllipse({
-        x: x4Ellipse + width / 2,
-        y: y4Ellipse + height / 2,
-        xScale: width / 2 - borderWidth / 2,
-        yScale: height / 2 - borderWidth / 2,
-        ...drawOptions,
-      });
-    } else if (schema.type === 'rectangle') {
-      const radius = schema.radius ?? 0;
-
-      page.drawRectangle({
-        x:
-          position.x +
-          borderWidth * ((1 - Math.sin(toRadians(rotate))) / 2) +
-          Math.tan(toRadians(rotate)) * Math.PI ** 2,
-        y:
-          position.y +
-          borderWidth * ((1 + Math.sin(toRadians(rotate))) / 2) +
-          Math.tan(toRadians(rotate)) * Math.PI ** 2,
-        width: width - borderWidth,
-        height: height - borderWidth,
-        ...(radius ? { radius: mm2pt(radius) } : {}),
-        ...drawOptions,
-      });
-    }
-  },
-  propPanel: {
-    schema: ({ i18n }) => ({
-      borderWidth: {
-        title: i18n('schemas.borderWidth'),
-        type: 'number',
-        widget: 'inputNumber',
-        props: { min: 0, step: 1 },
-        span: 12,
-      },
-      borderColor: {
-        title: i18n('schemas.borderColor'),
-        type: 'string',
-        widget: 'color',
-        props: {
-          disabledAlpha: true,
-        },
-        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
-        span: 12,
-      },
-      color: {
-        title: i18n('schemas.color'),
-        type: 'string',
-        widget: 'color',
-        props: {
-          disabledAlpha: true,
-        },
-        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
-      },
-      radius: {
-        title: i18n('schemas.radius'),
-        type: 'number',
-        widget: 'inputNumber',
-        props: { min: 0, step: 1 },
-        span: 12,
-      },
-    }),
-    defaultSchema: {
-      name: '',
-      type: 'rectangle',
-      position: { x: 0, y: 0 },
-      width: 62.5,
-      height: 37.5,
-      rotate: 0,
-      opacity: 1,
-      borderWidth: 1,
-      borderColor: '#000000',
-      color: '',
-      readOnly: true,
-      radius: 0,
-    },
-  },
-};
-
-const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
-  ...shape.propPanel,
-  defaultSchema: {
-    ...(shape.propPanel.defaultSchema as ShapeSchema),
-    type,
-  },
-});
-
-export const rectangle: Plugin<ShapeSchema> = {
-  ...shape,
-  propPanel: getPropPanelSchema('rectangle'),
-  icon: createSvgStr(Square),
-};
-
-export const ellipse: Plugin<ShapeSchema> = {
-  ...shape,
-  propPanel: getPropPanelSchema('ellipse'),
-  icon: createSvgStr(Circle),
-};

package/src/tables/cell.ts

@@ -1,152 +0,0 @@
-import { DEFAULT_FONT_NAME, Plugin, PDFRenderProps, getFallbackFontName } from '@pdfme/common';
-import { uiRender as textUiRender } from '../text/uiRender.js';
-import { pdfRender as textPdfRender } from '../text/pdfRender.js';
-import line from '../shapes/line.js';
-import { rectangle } from '../shapes/rectAndEllipse.js';
-import type { CellSchema } from './types.js';
-import { getCellPropPanelSchema, getDefaultCellStyles } from './helper.js';
-const linePdfRender = line.pdf;
-const rectanglePdfRender = rectangle.pdf;
-
-const renderLine = async (
-  arg: PDFRenderProps<CellSchema>,
-  schema: CellSchema,
-  position: { x: number; y: number },
-  width: number,
-  height: number,
-) =>
-  linePdfRender({
-    ...arg,
-    schema: { ...schema, type: 'line', position, width, height, color: schema.borderColor },
-  });
-
-const createTextDiv = (schema: CellSchema) => {
-  const { borderWidth: bw, width, height, padding: pd } = schema;
-  const textDiv = document.createElement('div');
-  textDiv.style.position = 'absolute';
-  textDiv.style.zIndex = '1';
-  textDiv.style.width = `${width - bw.left - bw.right - pd.left - pd.right}mm`;
-  textDiv.style.height = `${height - bw.top - bw.bottom - pd.top - pd.bottom}mm`;
-  textDiv.style.top = `${bw.top + pd.top}mm`;
-  textDiv.style.left = `${bw.left + pd.left}mm`;
-  return textDiv;
-};
-
-const createLineDiv = (
-  width: string,
-  height: string,
-  top: string | null,
-  right: string | null,
-  bottom: string | null,
-  left: string | null,
-  borderColor: string,
-) => {
-  const div = document.createElement('div');
-  div.style.width = width;
-  div.style.height = height;
-  div.style.position = 'absolute';
-  if (top !== null) div.style.top = top;
-  if (right !== null) div.style.right = right;
-  if (bottom !== null) div.style.bottom = bottom;
-  if (left !== null) div.style.left = left;
-  div.style.backgroundColor = borderColor;
-  return div;
-};
-
-const cellSchema: Plugin<CellSchema> = {
-  pdf: async (arg) => {
-    const { schema } = arg;
-    const { position, width, height, borderWidth, padding } = schema;
-
-    await Promise.all([
-      // BACKGROUND
-      rectanglePdfRender({
-        ...arg,
-        schema: {
-          ...schema,
-          type: 'rectangle',
-          width: schema.width,
-          height: schema.height,
-          borderWidth: 0,
-          borderColor: '',
-          color: schema.backgroundColor,
-        },
-      }),
-      // TOP
-      renderLine(arg, schema, { x: position.x, y: position.y }, width, borderWidth.top),
-      // RIGHT
-      renderLine(
-        arg,
-        schema,
-        { x: position.x + width - borderWidth.right, y: position.y },
-        borderWidth.right,
-        height,
-      ),
-      // BOTTOM
-      renderLine(
-        arg,
-        schema,
-        { x: position.x, y: position.y + height - borderWidth.bottom },
-        width,
-        borderWidth.bottom,
-      ),
-      // LEFT
-      renderLine(arg, schema, { x: position.x, y: position.y }, borderWidth.left, height),
-    ]);
-    // TEXT
-    await textPdfRender({
-      ...arg,
-      schema: {
-        ...schema,
-        type: 'text',
-        backgroundColor: '',
-        position: {
-          x: position.x + borderWidth.left + padding.left,
-          y: position.y + borderWidth.top + padding.top,
-        },
-        width: width - borderWidth.left - borderWidth.right - padding.left - padding.right,
-        height: height - borderWidth.top - borderWidth.bottom - padding.top - padding.bottom,
-      },
-    });
-  },
-  ui: async (arg) => {
-    const { schema, rootElement } = arg;
-    const { borderWidth, width, height, borderColor, backgroundColor } = schema;
-    rootElement.style.backgroundColor = backgroundColor;
-
-    const textDiv = createTextDiv(schema);
-    await textUiRender({
-      ...arg,
-      schema: { ...schema, backgroundColor: '' },
-      rootElement: textDiv,
-    });
-    rootElement.appendChild(textDiv);
-
-    const lines = [
-      createLineDiv(`${width}mm`, `${borderWidth.top}mm`, '0mm', null, null, '0mm', borderColor),
-      createLineDiv(`${width}mm`, `${borderWidth.bottom}mm`, null, null, '0mm', '0mm', borderColor),
-      createLineDiv(`${borderWidth.left}mm`, `${height}mm`, '0mm', null, null, '0mm', borderColor),
-      createLineDiv(`${borderWidth.right}mm`, `${height}mm`, '0mm', '0mm', null, null, borderColor),
-    ];
-
-    lines.forEach((line) => rootElement.appendChild(line));
-  },
-  propPanel: {
-    schema: ({ options, i18n }) => {
-      const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
-      const fontNames = Object.keys(font);
-      const fallbackFontName = getFallbackFontName(font);
-      return getCellPropPanelSchema({ i18n, fontNames, fallbackFontName });
-    },
-    defaultSchema: {
-      name: '',
-      type: 'cell',
-      content: 'Type Something...',
-      position: { x: 0, y: 0 },
-      width: 50,
-      height: 15,
-      ...getDefaultCellStyles(),
-    },
-  },
-};
-export default cellSchema;