@pdfme/schemas 5.2.1-dev.1 → 5.2.1-dev.2

package/dist/cjs/src/checkbox/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const svg_1 = __importDefault(require("../graphics/svg"));
+const utils_js_1 = require("../utils.js");
+const constants_js_1 = require("../constants.js");
+const defaultStroke = 'currentColor';
+const getCheckedIcon = (color = defaultStroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-check"><rect width="18" height="18" x="3" y="3" rx="0"/><path d="m9 12 2 2 4-4"/></svg>`;
+const getUncheckedIcon = (color = defaultStroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square"><rect width="18" height="18" x="3" y="3" rx="0"/></svg>`;
+const getIcon = ({ value, color }) => value === 'true' ? getCheckedIcon(color) : getUncheckedIcon(color);
+const schema = {
+    ui: (arg) => {
+        const { schema, value, onChange, rootElement, mode } = arg;
+        const container = document.createElement('div');
+        container.style.width = '100%';
+        container.style.height = '100%';
+        if ((0, utils_js_1.isEditable)(mode, schema)) {
+            container.addEventListener('click', () => {
+                onChange && onChange({ key: 'content', value: value === 'true' ? 'false' : 'true' });
+            });
+        }
+        void svg_1.default.ui({
+            ...arg,
+            rootElement: container,
+            mode: 'viewer',
+            value: getIcon({ value, color: schema.color }),
+        });
+        rootElement.appendChild(container);
+    },
+    pdf: (arg) => svg_1.default.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',
+                required: true,
+                rules: [{ pattern: constants_js_1.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(),
+};
+exports.default = schema;
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/checkbox/index.ts"],"names":[],"mappings":";;;;;AAEA,0DAAkC;AAClC,0CAAyC;AACzC,kDAAoD;AAEpD,MAAM,aAAa,GAAG,cAAc,CAAC;AAErC,MAAM,cAAc,GAAG,CAAC,KAAK,GAAG,aAAa,EAAE,EAAE,CAC/C,0GAA0G,KAAK,uLAAuL,CAAC;AACzS,MAAM,gBAAgB,GAAG,CAAC,KAAK,GAAG,aAAa,EAAE,EAAE,CACjD,0GAA0G,KAAK,wJAAwJ,CAAC;AAM1Q,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAoC,EAAE,EAAE,CACrE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAErE,MAAM,MAAM,GAAqB;IAC/B,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE;QACV,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC;QAC3D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC/B,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAEhC,IAAI,IAAA,qBAAU,EAAC,IAAI,EAAE,MAAM,CAAC,EAAE;YAC5B,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACvC,QAAQ,IAAI,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;YACvF,CAAC,CAAC,CAAC;SACJ;QAED,KAAK,aAAG,CAAC,EAAE,CAAC;YACV,GAAG,GAAG;YACN,WAAW,EAAE,SAAS;YACtB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;SAC/C,CAAC,CAAC;QAEH,WAAW,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,CAAC;IACD,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CACX,aAAG,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAChG,SAAS,EAAE;QACT,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACrB,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC;gBAC5B,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,OAAO;gBACf,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,gCAAiB,EAAE,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,EAAE,CAAC;aAC9E;SACF,CAAC;QACF,aAAa,EAAE;YACb,IAAI,EAAE,EAAE;YACR,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,OAAO;YAChB,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;YACxB,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,SAAS;SACjB;KACF;IACD,IAAI,EAAE,cAAc,EAAE;CACvB,CAAC;AAEF,kBAAe,MAAM,CAAC"}

package/dist/cjs/src/graphics/svg.js

@@ -75,7 +75,7 @@ const svgSchema = {
             content: defaultValue,
             position: { x: 0, y: 0 },
             width: 40,
-            height: 40,
+            height: 50,
         },
     },
     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-route"><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></svg>',

package/dist/cjs/src/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.select = exports.time = exports.date = exports.dateTime = exports.ellipse = exports.rectangle = exports.line = exports.barcodes = exports.table = exports.svg = exports.image = exports.multiVariableText = exports.text = exports.builtInPlugins = void 0;
+exports.checkbox = exports.radioGroup = exports.select = exports.time = exports.date = exports.dateTime = exports.ellipse = exports.rectangle = exports.line = exports.barcodes = exports.table = exports.svg = exports.image = exports.multiVariableText = exports.text = exports.builtInPlugins = void 0;
 const index_1 = __importDefault(require("./multiVariableText/index"));
 exports.multiVariableText = index_1.default;
 const index_2 = __importDefault(require("./text/index"));
@@ -29,6 +29,10 @@ const time_1 = __importDefault(require("./date/time"));
 exports.time = time_1.default;
 const index_5 = __importDefault(require("./select/index"));
 exports.select = index_5.default;
+const index_6 = __importDefault(require("./radioGroup/index"));
+exports.radioGroup = index_6.default;
+const index_7 = __importDefault(require("./checkbox/index"));
+exports.checkbox = index_7.default;
 const builtInPlugins = { Text: index_2.default };
 exports.builtInPlugins = builtInPlugins;
 //# sourceMappingURL=index.js.map

package/dist/cjs/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,sEAA0D;AAmBxD,4BAnBK,eAAiB,CAmBL;AAlBnB,yDAAgC;AAiB9B,eAjBK,eAAI,CAiBL;AAhBN,6DAAqC;AAkBnC,gBAlBK,eAAK,CAkBL;AAjBP,yDAAiC;AAkB/B,cAlBK,aAAG,CAkBL;AAjBL,6DAAwC;AAmBtC,mBAnBK,eAAQ,CAmBL;AAlBV,yDAAiC;AAmB/B,eAnBK,cAAI,CAmBL;AAlBN,2DAAmC;AAgBjC,gBAhBK,eAAK,CAgBL;AAfP,4DAA6D;AAkB3D,0FAlBO,0BAAS,OAkBP;AACT,wFAnBkB,wBAAO,OAmBlB;AAlBT,+DAAuC;AAmBrC,mBAnBK,kBAAQ,CAmBL;AAlBV,uDAA+B;AAmB7B,eAnBK,cAAI,CAmBL;AAlBN,uDAA+B;AAmB7B,eAnBK,cAAI,CAmBL;AAlBN,2DAAoC;AAmBlC,iBAnBK,eAAM,CAmBL;AAjBR,MAAM,cAAc,GAAG,EAAE,IAAI,EAAE,eAAI,EAAE,CAAC;AAGpC,wCAAc"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,sEAA0D;AAqBxD,4BArBK,eAAiB,CAqBL;AApBnB,yDAAgC;AAmB9B,eAnBK,eAAI,CAmBL;AAlBN,6DAAqC;AAoBnC,gBApBK,eAAK,CAoBL;AAnBP,yDAAiC;AAoB/B,cApBK,aAAG,CAoBL;AAnBL,6DAAwC;AAqBtC,mBArBK,eAAQ,CAqBL;AApBV,yDAAiC;AAqB/B,eArBK,cAAI,CAqBL;AApBN,2DAAmC;AAkBjC,gBAlBK,eAAK,CAkBL;AAjBP,4DAA6D;AAoB3D,0FApBO,0BAAS,OAoBP;AACT,wFArBkB,wBAAO,OAqBlB;AApBT,+DAAuC;AAqBrC,mBArBK,kBAAQ,CAqBL;AApBV,uDAA+B;AAqB7B,eArBK,cAAI,CAqBL;AApBN,uDAA+B;AAqB7B,eArBK,cAAI,CAqBL;AApBN,2DAAoC;AAqBlC,iBArBK,eAAM,CAqBL;AApBR,+DAA4C;AAqB1C,qBArBK,eAAU,CAqBL;AApBZ,6DAAwC;AAqBtC,mBArBK,eAAQ,CAqBL;AAnBV,MAAM,cAAc,GAAG,EAAE,IAAI,EAAE,eAAI,EAAE,CAAC;AAGpC,wCAAc"}

package/dist/cjs/src/radioGroup/index.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const svg_1 = __importDefault(require("../graphics/svg"));
+const utils_js_1 = require("../utils.js");
+const constants_js_1 = require("../constants.js");
+const defaultStroke = 'currentColor';
+const getCheckedIcon = (color = defaultStroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>`;
+const getUncheckedIcon = (color = defaultStroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle"><circle cx="12" cy="12" r="10"/></svg>`;
+const getIcon = ({ value, color }) => value === 'true' ? getCheckedIcon(color) : getUncheckedIcon(color);
+const eventEmitter = new EventTarget();
+const radioButtonStates = new Map();
+const eventListeners = new Map();
+const schema = {
+    ui: (arg) => {
+        const { schema, value, onChange, rootElement, mode } = arg;
+        const container = document.createElement('div');
+        if (onChange) {
+            radioButtonStates.set(schema.name, { value, onChange });
+        }
+        const oldListener = eventListeners.get(schema.name);
+        if (oldListener) {
+            eventEmitter.removeEventListener(`group-${schema.group}`, oldListener);
+        }
+        const handleGroupEvent = (event) => {
+            const customEvent = event;
+            const selectedSchemaName = customEvent.detail;
+            if (selectedSchemaName !== schema.name) {
+                const radioButtonState = radioButtonStates.get(schema.name);
+                if (!radioButtonState)
+                    return;
+                if (radioButtonState.value === 'true') {
+                    radioButtonState.onChange({ key: 'content', value: 'false' });
+                }
+            }
+        };
+        eventListeners.set(schema.name, handleGroupEvent);
+        eventEmitter.addEventListener(`group-${schema.group}`, handleGroupEvent);
+        if ((0, utils_js_1.isEditable)(mode, schema)) {
+            container.addEventListener('click', () => {
+                if (value !== 'true' && onChange) {
+                    onChange({ key: 'content', value: 'true' });
+                    radioButtonStates.set(schema.name, { value: 'true', onChange });
+                    eventEmitter.dispatchEvent(new CustomEvent(`group-${schema.group}`, { detail: schema.name }));
+                }
+            });
+        }
+        void svg_1.default.ui({
+            ...arg,
+            rootElement: container,
+            mode: 'viewer',
+            value: getIcon({ value, color: schema.color }),
+        });
+        rootElement.appendChild(container);
+    },
+    pdf: (arg) => svg_1.default.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',
+                required: true,
+                rules: [{ pattern: constants_js_1.HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+            },
+            group: {
+                title: i18n('schemas.radioGroup.groupName'),
+                type: 'string',
+            },
+        }),
+        defaultSchema: {
+            name: '',
+            type: 'radioGroup',
+            content: 'false',
+            position: { x: 0, y: 0 },
+            width: 8,
+            height: 8,
+            group: 'MyGroup',
+            color: '#000000',
+        },
+    },
+    icon: getCheckedIcon(),
+};
+exports.default = schema;
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/radioGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/radioGroup/index.ts"],"names":[],"mappings":"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"}

package/dist/cjs/src/shapes/line.js

@@ -43,7 +43,7 @@ const lineSchema = {
             type: 'line',
             position: { x: 0, y: 0 },
             width: 50,
-            height: 1,
+            height: 0.5,
             rotate: 0,
             opacity: 1,
             readOnly: true,

package/dist/cjs/src/shapes/line.js.map

@@ -1 +1 @@
-{"version":3,"file":"line.js","sourceRoot":"","sources":["../../../../src/shapes/line.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"line.js","sourceRoot":"","sources":["../../../../src/shapes/line.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/checkbox/index.js

@@ -0,0 +1,51 @@
+import svg from '../graphics/svg';
+import { isEditable } from '../utils.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+const defaultStroke = 'currentColor';
+const getCheckedIcon = (color = defaultStroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-check"><rect width="18" height="18" x="3" y="3" rx="0"/><path d="m9 12 2 2 4-4"/></svg>`;
+const getUncheckedIcon = (color = defaultStroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square"><rect width="18" height="18" x="3" y="3" rx="0"/></svg>`;
+const getIcon = ({ value, color }) => value === 'true' ? getCheckedIcon(color) : getUncheckedIcon(color);
+const schema = {
+    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', () => {
+                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',
+                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;
+//# sourceMappingURL=index.js.map

package/dist/esm/src/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/checkbox/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/graphics/svg.js

@@ -73,7 +73,7 @@ const svgSchema = {
             content: defaultValue,
             position: { x: 0, y: 0 },
             width: 40,
-            height: 40,
+            height: 50,
         },
     },
     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-route"><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></svg>',

package/dist/esm/src/index.js

@@ -10,8 +10,10 @@ import dateTime from './date/dateTime';
 import date from './date/date';
 import time from './date/time';
 import select from './select/index';
+import radioGroup from './radioGroup/index';
+import checkbox from './checkbox/index';
 const builtInPlugins = { Text: text };
 export { builtInPlugins, 
 // schemas
-text, multiVariableText, image, svg, table, barcodes, line, rectangle, ellipse, dateTime, date, time, select, };
+text, multiVariableText, image, svg, table, barcodes, line, rectangle, ellipse, dateTime, date, time, select, radioGroup, checkbox, };
 //# sourceMappingURL=index.js.map

package/dist/esm/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,2BAA2B,CAAC;AAC1D,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,KAAK,MAAM,kBAAkB,CAAC;AACrC,OAAO,GAAG,MAAM,gBAAgB,CAAC;AACjC,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,IAAI,MAAM,eAAe,CAAC;AACjC,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,MAAM,MAAM,gBAAgB,CAAC;AAEpC,MAAM,cAAc,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAEtC,OAAO,EACL,cAAc;AACd,UAAU;AACV,IAAI,EACJ,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,MAAM,GACP,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,2BAA2B,CAAC;AAC1D,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,KAAK,MAAM,kBAAkB,CAAC;AACrC,OAAO,GAAG,MAAM,gBAAgB,CAAC;AACjC,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,IAAI,MAAM,eAAe,CAAC;AACjC,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,MAAM,MAAM,gBAAgB,CAAC;AACpC,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AAExC,MAAM,cAAc,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAEtC,OAAO,EACL,cAAc;AACd,UAAU;AACV,IAAI,EACJ,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,UAAU,EACV,QAAQ,GACT,CAAC"}

package/dist/esm/src/radioGroup/index.js

@@ -0,0 +1,82 @@
+import svg from '../graphics/svg';
+import { isEditable } from '../utils.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+const defaultStroke = 'currentColor';
+const getCheckedIcon = (color = defaultStroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>`;
+const getUncheckedIcon = (color = defaultStroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle"><circle cx="12" cy="12" r="10"/></svg>`;
+const getIcon = ({ value, color }) => value === 'true' ? getCheckedIcon(color) : getUncheckedIcon(color);
+const eventEmitter = new EventTarget();
+const radioButtonStates = new Map();
+const eventListeners = new Map();
+const schema = {
+    ui: (arg) => {
+        const { schema, value, onChange, rootElement, mode } = arg;
+        const container = document.createElement('div');
+        if (onChange) {
+            radioButtonStates.set(schema.name, { value, onChange });
+        }
+        const oldListener = eventListeners.get(schema.name);
+        if (oldListener) {
+            eventEmitter.removeEventListener(`group-${schema.group}`, oldListener);
+        }
+        const handleGroupEvent = (event) => {
+            const customEvent = event;
+            const selectedSchemaName = customEvent.detail;
+            if (selectedSchemaName !== schema.name) {
+                const radioButtonState = radioButtonStates.get(schema.name);
+                if (!radioButtonState)
+                    return;
+                if (radioButtonState.value === 'true') {
+                    radioButtonState.onChange({ key: 'content', value: 'false' });
+                }
+            }
+        };
+        eventListeners.set(schema.name, handleGroupEvent);
+        eventEmitter.addEventListener(`group-${schema.group}`, handleGroupEvent);
+        if (isEditable(mode, schema)) {
+            container.addEventListener('click', () => {
+                if (value !== 'true' && onChange) {
+                    onChange({ key: 'content', value: 'true' });
+                    radioButtonStates.set(schema.name, { value: 'true', onChange });
+                    eventEmitter.dispatchEvent(new CustomEvent(`group-${schema.group}`, { detail: schema.name }));
+                }
+            });
+        }
+        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',
+                required: true,
+                rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+            },
+            group: {
+                title: i18n('schemas.radioGroup.groupName'),
+                type: 'string',
+            },
+        }),
+        defaultSchema: {
+            name: '',
+            type: 'radioGroup',
+            content: 'false',
+            position: { x: 0, y: 0 },
+            width: 8,
+            height: 8,
+            group: 'MyGroup',
+            color: '#000000',
+        },
+    },
+    icon: getCheckedIcon(),
+};
+export default schema;
+//# sourceMappingURL=index.js.map

package/dist/esm/src/radioGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/radioGroup/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/shapes/line.js

@@ -41,7 +41,7 @@ const lineSchema = {
             type: 'line',
             position: { x: 0, y: 0 },
             width: 50,
-            height: 1,
+            height: 0.5,
             rotate: 0,
             opacity: 1,
             readOnly: true,

package/dist/esm/src/shapes/line.js.map

@@ -1 +1 @@
-{"version":3,"file":"line.js","sourceRoot":"","sources":["../../../../src/shapes/line.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"line.js","sourceRoot":"","sources":["../../../../src/shapes/line.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,kBAAkB,GAAG,SAAS,CAAC;AAMrC,MAAM,UAAU,GAAuB;IACrC,GAAG,EAAE,CAAC,GAA+B,EAAE,EAAE;QACvC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC;QACtC,IAAI,MAAM,CAAC,KAAK,KAAK,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;YAAE,OAAO;QACvE,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;QAC9B,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QACpC,MAAM,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAClB,OAAO,GACR,GAAG,wBAAwB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,oBAAoB,EAAE,KAAK,EAAE,CAAC,CAAC;QAClF,MAAM,KAAK,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC;QACtD,IAAI,CAAC,QAAQ,CAAC;YACZ,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;YACjE,GAAG,EAAE,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;YAC1E,SAAS,EAAE,MAAM;YACjB,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,kBAAkB,EAAE,SAAS,CAAC;YACvE,OAAO,EAAE,OAAO;SACjB,CAAC,CAAC;IACL,CAAC;IACD,EAAE,EAAE,CAAC,GAA8B,EAAE,EAAE;QACrC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,GAAG,CAAC;QACpC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,MAAM,CAAC,KAAK,IAAI,aAAa,CAAC;QAC1D,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QACzB,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC1B,WAAW,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAC/B,CAAC;IACD,SAAS,EAAE;QACT,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACrB,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC;gBAC5B,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,OAAO;gBACf,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,EAAE,CAAC;aAC9E;SACF,CAAC;QACF,aAAa,EAAE;YACb,IAAI,EAAE,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;YACxB,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,CAAC;YACT,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,kBAAkB;SAC1B;KACF;IACD,IAAI,EAAC,6OAA6O;CACnP,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/types/src/checkbox/index.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from '@pdfme/common';
+import { Schema } from '@pdfme/common';
+interface Checkbox extends Schema {
+    color: string;
+}
+declare const schema: Plugin<Checkbox>;
+export default schema;

package/dist/types/src/index.d.ts

@@ -10,7 +10,9 @@ import dateTime from './date/dateTime';
 import date from './date/date';
 import time from './date/time';
 import select from './select/index';
+import radioGroup from './radioGroup/index';
+import checkbox from './checkbox/index';
 declare const builtInPlugins: {
     Text: import("@pdfme/common").Plugin<import("./text/types").TextSchema>;
 };
-export { builtInPlugins, text, multiVariableText, image, svg, table, barcodes, line, rectangle, ellipse, dateTime, date, time, select, };
+export { builtInPlugins, text, multiVariableText, image, svg, table, barcodes, line, rectangle, ellipse, dateTime, date, time, select, radioGroup, checkbox, };

package/dist/types/src/radioGroup/index.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from '@pdfme/common';
+import { Schema } from '@pdfme/common';
+interface RadioGroup extends Schema {
+    group: string;
+    color: string;
+}
+declare const schema: Plugin<RadioGroup>;
+export default schema;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/schemas",
-  "version": "5.2.1-dev.1",
+  "version": "5.2.1-dev.2",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/checkbox/index.ts

@@ -0,0 +1,68 @@
+import { Plugin } from '@pdfme/common';
+import { Schema } from '@pdfme/common';
+import svg from '../graphics/svg';
+import { isEditable } from '../utils.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+
+const defaultStroke = 'currentColor';
+
+const getCheckedIcon = (color = defaultStroke) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-check"><rect width="18" height="18" x="3" y="3" rx="0"/><path d="m9 12 2 2 4-4"/></svg>`;
+const getUncheckedIcon = (color = defaultStroke) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square"><rect width="18" height="18" x="3" y="3" rx="0"/></svg>`;
+
+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', () => {
+        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',
+        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/graphics/svg.ts

@@ -77,7 +77,7 @@ const svgSchema: Plugin<SVGSchema> = {
       content: defaultValue,
       position: { x: 0, y: 0 },
       width: 40,
-      height: 40,
+      height: 50,
     },
   },
   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-route"><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></svg>',

package/src/index.ts

@@ -10,6 +10,8 @@ import dateTime from './date/dateTime';
 import date from './date/date';
 import time from './date/time';
 import select from './select/index';
+import radioGroup from './radioGroup/index';
+import checkbox from './checkbox/index';
 
 const builtInPlugins = { Text: text };
 
@@ -29,4 +31,6 @@ export {
   date,
   time,
   select,
+  radioGroup,
+  checkbox,
 };

package/src/radioGroup/index.ts

@@ -0,0 +1,112 @@
+import { Plugin } from '@pdfme/common';
+import { Schema } from '@pdfme/common';
+import svg from '../graphics/svg';
+import { isEditable } from '../utils.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+
+const defaultStroke = 'currentColor';
+
+const getCheckedIcon = (color = defaultStroke) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>`;
+const getUncheckedIcon = (color = defaultStroke) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle"><circle cx="12" cy="12" r="10"/></svg>`;
+
+interface RadioGroup extends Schema {
+  group: string;
+  color: string;
+}
+
+const getIcon = ({ value, color }: { value: string; color: string }) =>
+  value === 'true' ? getCheckedIcon(color) : getUncheckedIcon(color);
+
+const eventEmitter = new EventTarget();
+
+interface RadioButtonState {
+  value: string;
+  onChange: (arg: { key: string; value: string }) => void;
+}
+
+const radioButtonStates = new Map<string, RadioButtonState>();
+const eventListeners = new Map<string, EventListener>();
+
+const schema: Plugin<RadioGroup> = {
+  ui: (arg) => {
+    const { schema, value, onChange, rootElement, mode } = arg;
+    const container = document.createElement('div');
+
+    if (onChange) {
+      radioButtonStates.set(schema.name, { value, onChange });
+    }
+
+    const oldListener = eventListeners.get(schema.name);
+    if (oldListener) {
+      eventEmitter.removeEventListener(`group-${schema.group}`, oldListener);
+    }
+
+    const handleGroupEvent = (event: Event) => {
+      const customEvent = event as CustomEvent<string>;
+      const selectedSchemaName = customEvent.detail;
+      if (selectedSchemaName !== schema.name) {
+        const radioButtonState = radioButtonStates.get(schema.name);
+        if (!radioButtonState) return;
+        if (radioButtonState.value === 'true') {
+          radioButtonState.onChange({ key: 'content', value: 'false' });
+        }
+      }
+    };
+
+    eventListeners.set(schema.name, handleGroupEvent);
+    eventEmitter.addEventListener(`group-${schema.group}`, handleGroupEvent);
+
+    if (isEditable(mode, schema)) {
+      container.addEventListener('click', () => {
+        if (value !== 'true' && onChange) {
+          onChange({ key: 'content', value: 'true' });
+          radioButtonStates.set(schema.name, { value: 'true', onChange });
+          eventEmitter.dispatchEvent(
+            new CustomEvent(`group-${schema.group}`, { detail: schema.name })
+          );
+        }
+      });
+    }
+
+    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',
+        required: true,
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+      },
+      group: {
+        title: i18n('schemas.radioGroup.groupName'),
+        type: 'string',
+      },
+    }),
+    defaultSchema: {
+      name: '',
+      type: 'radioGroup',
+      content: 'false',
+      position: { x: 0, y: 0 },
+      width: 8,
+      height: 8,
+      group: 'MyGroup',
+      color: '#000000',
+    },
+  },
+  icon: getCheckedIcon(),
+};
+
+export default schema;

package/src/shapes/line.ts

@@ -53,7 +53,7 @@ const lineSchema: Plugin<LineSchema> = {
       type: 'line',
       position: { x: 0, y: 0 },
       width: 50,
-      height: 1,
+      height: 0.5,
       rotate: 0,
       opacity: 1,
       readOnly: true,