@pdfme/schemas 0.0.0

package/src/barcodes/uiRender.ts

@@ -0,0 +1,94 @@
+import type * as CSS from 'csstype';
+import { UIRenderProps } from '@pdfme/common';
+import type { BarcodeSchema } from './types.js';
+import { validateBarcodeInput, createBarCode } from './helper.js';
+import { addAlphaToHex, isEditable, createErrorElm } from '../utils.js';
+
+const fullSize = { width: '100%', height: '100%' };
+
+const blobToDataURL = (blob: Blob): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+
+const createBarcodeImage = async (schema: BarcodeSchema, value: string) => {
+  const imageBuf = await createBarCode({
+    ...schema,
+    input: value,
+  });
+  const barcodeData = new Blob([new Uint8Array(imageBuf)], { type: 'image/png' });
+  const barcodeDataURL = await blobToDataURL(barcodeData);
+  return barcodeDataURL;
+};
+
+const createBarcodeImageElm = async (schema: BarcodeSchema, value: string) => {
+  const barcodeDataURL = await createBarcodeImage(schema, value);
+  const img = document.createElement('img');
+  img.src = barcodeDataURL;
+  const imgStyle: CSS.Properties = { ...fullSize, borderRadius: 0 };
+  Object.assign(img.style, imgStyle);
+  return img;
+};
+
+export const uiRender = async (arg: UIRenderProps<BarcodeSchema>) => {
+  const { value, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, schema, theme } =
+    arg;
+
+  const container = document.createElement('div');
+  const containerStyle: CSS.Properties = {
+    ...fullSize,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontFamily: "'Open Sans', sans-serif",
+  };
+  Object.assign(container.style, containerStyle);
+  rootElement.appendChild(container);
+  const editable = isEditable(mode, schema);
+  if (editable) {
+    const input = document.createElement('input');
+    const inputStyle: CSS.Properties = {
+      width: '100%',
+      position: 'absolute',
+      textAlign: 'center',
+      fontSize: '12pt',
+      fontWeight: 'bold',
+      color: theme.colorWhite,
+      backgroundColor: editable || value ? addAlphaToHex('#000000', 80) : 'none',
+      border: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'auto',
+    };
+    Object.assign(input.style, inputStyle);
+    input.value = value;
+    input.placeholder = placeholder || '';
+    input.tabIndex = tabIndex || 0;
+    input.addEventListener('change', (e: Event) => {
+      if (onChange) onChange({ key: 'content', value: (e.target as HTMLInputElement).value });
+    });
+    input.addEventListener('blur', () => {
+      if (stopEditing) stopEditing();
+    });
+    container.appendChild(input);
+    input.setSelectionRange(value.length, value.length);
+    if (mode === 'designer') {
+      input.focus();
+    }
+  }
+
+  if (!value) return;
+  try {
+    if (!validateBarcodeInput(schema.type, value))
+      throw new Error('[@pdfme/schemas/barcodes] Invalid barcode input');
+    const imgElm = await createBarcodeImageElm(schema, value);
+    container.appendChild(imgElm);
+  } catch (err) {
+    console.error(`[@pdfme/ui] ${String(err)}`);
+    container.appendChild(createErrorElm());
+  }
+};

package/src/checkbox/index.ts

@@ -0,0 +1,70 @@
+import { Plugin, Schema } from '@pdfme/common';
+import svg from '../graphics/svg.js';
+import { isEditable } from '../utils.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+import { Square, SquareCheck } from 'lucide';
+import { createSvgStr } from '../utils.js';
+
+const defaultStroke = 'currentColor';
+
+const getCheckedIcon = (stroke = defaultStroke) => createSvgStr(SquareCheck, { stroke });
+const getUncheckedIcon = (stroke = defaultStroke) => createSvgStr(Square, { stroke });
+
+interface Checkbox extends Schema {
+  color: string;
+}
+
+const getIcon = ({ value, color }: { value: string; color: string }) =>
+  value === 'true' ? getCheckedIcon(color) : getUncheckedIcon(color);
+
+const schema: Plugin<Checkbox> = {
+  ui: (arg) => {
+    const { schema, value, onChange, rootElement, mode } = arg;
+    const container = document.createElement('div');
+    container.style.width = '100%';
+    container.style.height = '100%';
+
+    if (isEditable(mode, schema)) {
+      container.addEventListener('click', () => {
+        if (onChange) onChange({ key: 'content', value: value === 'true' ? 'false' : 'true' });
+      });
+    }
+
+    void svg.ui({
+      ...arg,
+      rootElement: container,
+      mode: 'viewer',
+      value: getIcon({ value, color: schema.color }),
+    });
+
+    rootElement.appendChild(container);
+  },
+  pdf: (arg) =>
+    svg.pdf(Object.assign(arg, { value: getIcon({ value: arg.value, color: arg.schema.color }) })),
+  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: 'checkbox',
+      content: 'false',
+      position: { x: 0, y: 0 },
+      width: 8,
+      height: 8,
+      color: '#000000',
+    },
+  },
+  icon: getCheckedIcon(),
+};
+
+export default schema;

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_OPACITY = 1;
+export const HEX_COLOR_PATTERN = '^#(?:[A-Fa-f0-9]{6})$';

package/src/date/date.ts

@@ -0,0 +1,9 @@
+import { getPlugin } from './helper.js';
+import { createSvgStr } from '../utils.js';
+import { Calendar } from 'lucide';
+
+const type = 'date';
+
+const icon = createSvgStr(Calendar);
+
+export default getPlugin({ type, icon });

package/src/date/dateTime.ts

@@ -0,0 +1,9 @@
+import { getPlugin } from './helper.js';
+import { createSvgStr } from '../utils.js';
+import { CalendarClock } from 'lucide';
+
+const type = 'dateTime';
+
+const icon = createSvgStr(CalendarClock);
+
+export default getPlugin({ type, icon });