react-id-card-generator 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/IDCardDesigner.js +3 -2
- package/dist/cjs/components/IDCardDesigner.js.map +1 -1
- package/dist/cjs/components/IDCardPreview.js +29 -2
- package/dist/cjs/components/IDCardPreview.js.map +1 -1
- package/dist/cjs/utils/styleUtils.js +2 -18
- package/dist/cjs/utils/styleUtils.js.map +1 -1
- package/dist/esm/components/IDCardDesigner.js +4 -3
- package/dist/esm/components/IDCardDesigner.js.map +1 -1
- package/dist/esm/components/IDCardPreview.js +29 -2
- package/dist/esm/components/IDCardPreview.js.map +1 -1
- package/dist/esm/utils/styleUtils.js +2 -18
- package/dist/esm/utils/styleUtils.js.map +1 -1
- package/dist/index.d.ts +6 -4
- package/dist/types/types/index.d.ts +6 -4
- package/package.json +1 -1
|
@@ -25,7 +25,7 @@ function toReactStyle(styleObj) {
|
|
|
25
25
|
function fieldStyleToCSS(style) {
|
|
26
26
|
if (!style)
|
|
27
27
|
return {};
|
|
28
|
-
|
|
28
|
+
return {
|
|
29
29
|
fontSize: style.fontSize,
|
|
30
30
|
fontWeight: style.fontWeight,
|
|
31
31
|
fontFamily: style.fontFamily,
|
|
@@ -38,24 +38,8 @@ function fieldStyleToCSS(style) {
|
|
|
38
38
|
border: style.border,
|
|
39
39
|
lineHeight: style.lineHeight,
|
|
40
40
|
letterSpacing: style.letterSpacing,
|
|
41
|
+
// verticalAlign is handled in the preview component for flex
|
|
41
42
|
};
|
|
42
|
-
// Add vertical alignment for text fields
|
|
43
|
-
if (style.verticalAlign) {
|
|
44
|
-
if (style.verticalAlign === 'top') {
|
|
45
|
-
css.display = 'flex';
|
|
46
|
-
css.alignItems = 'flex-start';
|
|
47
|
-
}
|
|
48
|
-
else if (style.verticalAlign === 'middle') {
|
|
49
|
-
css.display = 'flex';
|
|
50
|
-
css.alignItems = 'center';
|
|
51
|
-
}
|
|
52
|
-
else if (style.verticalAlign === 'bottom') {
|
|
53
|
-
css.display = 'flex';
|
|
54
|
-
css.alignItems = 'flex-end';
|
|
55
|
-
}
|
|
56
|
-
css.height = '100%';
|
|
57
|
-
}
|
|
58
|
-
return css;
|
|
59
43
|
}
|
|
60
44
|
/**
|
|
61
45
|
* Merge multiple style objects
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styleUtils.js","sources":["../../../src/utils/styleUtils.ts"],"sourcesContent":["import type React from 'react';\r\nimport type { FieldStyle } from '../types';\r\n\r\n/**\r\n * Convert a style object with kebab-case keys to React camelCase\r\n * Useful when importing styles from external sources\r\n */\r\nexport function toReactStyle(\r\n styleObj: Record<string, unknown> | undefined\r\n): React.CSSProperties {\r\n if (!styleObj) return {};\r\n\r\n const out: Record<string, unknown> = {};\r\n for (const key in styleObj) {\r\n // Skip non-style properties\r\n if (key === 'frontOrBack' || key === 'category' || key === 'element') {\r\n continue;\r\n }\r\n // Convert kebab-case to camelCase (e.g., 'font-size' -> 'fontSize')\r\n const reactKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());\r\n out[reactKey] = styleObj[key];\r\n }\r\n return out as React.CSSProperties;\r\n}\r\n\r\n/**\r\n * Convert FieldStyle to React CSS properties\r\n * @param style - The field style object\r\n * @returns React-compatible CSS properties object\r\n */\r\nexport function fieldStyleToCSS(style: FieldStyle | undefined): React.CSSProperties {\r\n if (!style) return {};\r\n
|
|
1
|
+
{"version":3,"file":"styleUtils.js","sources":["../../../src/utils/styleUtils.ts"],"sourcesContent":["import type React from 'react';\r\nimport type { FieldStyle } from '../types';\r\n\r\n/**\r\n * Convert a style object with kebab-case keys to React camelCase\r\n * Useful when importing styles from external sources\r\n */\r\nexport function toReactStyle(\r\n styleObj: Record<string, unknown> | undefined\r\n): React.CSSProperties {\r\n if (!styleObj) return {};\r\n\r\n const out: Record<string, unknown> = {};\r\n for (const key in styleObj) {\r\n // Skip non-style properties\r\n if (key === 'frontOrBack' || key === 'category' || key === 'element') {\r\n continue;\r\n }\r\n // Convert kebab-case to camelCase (e.g., 'font-size' -> 'fontSize')\r\n const reactKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());\r\n out[reactKey] = styleObj[key];\r\n }\r\n return out as React.CSSProperties;\r\n}\r\n\r\n/**\r\n * Convert FieldStyle to React CSS properties\r\n * @param style - The field style object\r\n * @returns React-compatible CSS properties object\r\n */\r\nexport function fieldStyleToCSS(style: FieldStyle | undefined): React.CSSProperties {\r\n if (!style) return {};\r\n return {\r\n fontSize: style.fontSize,\r\n fontWeight: style.fontWeight,\r\n fontFamily: style.fontFamily,\r\n color: style.color,\r\n textAlign: style.textAlign,\r\n textTransform: style.textTransform,\r\n backgroundColor: style.backgroundColor,\r\n borderRadius: style.borderRadius,\r\n padding: style.padding,\r\n border: style.border,\r\n lineHeight: style.lineHeight,\r\n letterSpacing: style.letterSpacing,\r\n // verticalAlign is handled in the preview component for flex\r\n };\r\n}\r\n\r\n/**\r\n * Merge multiple style objects\r\n */\r\nexport function mergeStyles(\r\n ...styles: (React.CSSProperties | undefined)[]\r\n): React.CSSProperties {\r\n return Object.assign({}, ...styles.filter(Boolean));\r\n}\r\n\r\n/**\r\n * Generate position styles from field position\r\n */\r\nexport function positionToStyle(position: {\r\n x: number;\r\n y: number;\r\n width: number;\r\n height: number;\r\n}): React.CSSProperties {\r\n return {\r\n position: 'absolute',\r\n left: `${position.x}px`,\r\n top: `${position.y}px`,\r\n width: `${position.width}px`,\r\n height: `${position.height}px`,\r\n };\r\n}\r\n\r\n/**\r\n * Default styles for different field types\r\n */\r\nexport const defaultFieldStyles: Record<string, FieldStyle> = {\r\n text: {\r\n fontSize: '12px',\r\n fontWeight: 'normal',\r\n color: '#000000',\r\n textAlign: 'left',\r\n },\r\n label: {\r\n fontSize: '10px',\r\n fontWeight: 'bold',\r\n color: '#333333',\r\n textAlign: 'left',\r\n textTransform: 'uppercase',\r\n },\r\n image: {},\r\n qrcode: {\r\n backgroundColor: '#ffffff',\r\n },\r\n};\r\n\r\n/**\r\n * CSS class name generator\r\n */\r\nexport function cn(...classes: (string | undefined | null | false)[]): string {\r\n return classes.filter(Boolean).join(' ');\r\n}\r\n"],"names":[],"mappings":"AAGA;;;AAGG;AACG,SAAU,YAAY,CAC1B,QAA6C,EAAA;AAE7C,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,EAAE;IAExB,MAAM,GAAG,GAA4B,EAAE;AACvC,IAAA,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE;;AAE1B,QAAA,IAAI,GAAG,KAAK,aAAa,IAAI,GAAG,KAAK,UAAU,IAAI,GAAG,KAAK,SAAS,EAAE;YACpE;QACF;;QAEA,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QACpE,GAAG,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC;IAC/B;AACA,IAAA,OAAO,GAA0B;AACnC;AAEA;;;;AAIG;AACG,SAAU,eAAe,CAAC,KAA6B,EAAA;AAC3D,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;IACrB,OAAO;QACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,eAAe,EAAE,KAAK,CAAC,eAAe;QACtC,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,aAAa,EAAE,KAAK,CAAC,aAAa;;KAEnC;AACH;AAEA;;AAEG;AACG,SAAU,WAAW,CACzB,GAAG,MAA2C,EAAA;AAE9C,IAAA,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AACrD;AAEA;;AAEG;AACG,SAAU,eAAe,CAAC,QAK/B,EAAA;IACC,OAAO;AACL,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,IAAI,EAAE,CAAA,EAAG,QAAQ,CAAC,CAAC,CAAA,EAAA,CAAI;AACvB,QAAA,GAAG,EAAE,CAAA,EAAG,QAAQ,CAAC,CAAC,CAAA,EAAA,CAAI;AACtB,QAAA,KAAK,EAAE,CAAA,EAAG,QAAQ,CAAC,KAAK,CAAA,EAAA,CAAI;AAC5B,QAAA,MAAM,EAAE,CAAA,EAAG,QAAQ,CAAC,MAAM,CAAA,EAAA,CAAI;KAC/B;AACH;AAEA;;AAEG;AACI,MAAM,kBAAkB,GAA+B;AAC5D,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,MAAM;AAClB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,aAAa,EAAE,WAAW;AAC3B,KAAA;AACD,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,MAAM,EAAE;AACN,QAAA,eAAe,EAAE,SAAS;AAC3B,KAAA;;AAGH;;AAEG;AACG,SAAU,EAAE,CAAC,GAAG,OAA8C,EAAA;IAClE,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAC1C;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -15,15 +15,17 @@ interface FieldPosition {
|
|
|
15
15
|
* Values should be valid CSS strings (e.g., '12px', '#000000', '50%')
|
|
16
16
|
*/
|
|
17
17
|
interface FieldStyle {
|
|
18
|
-
/**
|
|
19
|
-
* Vertical alignment for text fields (top, middle, bottom)
|
|
20
|
-
*/
|
|
21
|
-
verticalAlign?: 'top' | 'middle' | 'bottom';
|
|
22
18
|
fontSize?: string;
|
|
23
19
|
fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
|
|
24
20
|
fontFamily?: string;
|
|
25
21
|
color?: string;
|
|
26
22
|
textAlign?: 'left' | 'center' | 'right';
|
|
23
|
+
verticalAlign?: 'top' | 'middle' | 'bottom';
|
|
24
|
+
labelPosition?: 'top' | 'left';
|
|
25
|
+
labelVerticalAlign?: 'top' | 'middle' | 'bottom';
|
|
26
|
+
labelFontSize?: string;
|
|
27
|
+
labelFontWeight?: string;
|
|
28
|
+
labelColor?: string;
|
|
27
29
|
textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
|
|
28
30
|
backgroundColor?: string;
|
|
29
31
|
borderRadius?: string;
|
|
@@ -14,15 +14,17 @@ export interface FieldPosition {
|
|
|
14
14
|
* Values should be valid CSS strings (e.g., '12px', '#000000', '50%')
|
|
15
15
|
*/
|
|
16
16
|
export interface FieldStyle {
|
|
17
|
-
/**
|
|
18
|
-
* Vertical alignment for text fields (top, middle, bottom)
|
|
19
|
-
*/
|
|
20
|
-
verticalAlign?: 'top' | 'middle' | 'bottom';
|
|
21
17
|
fontSize?: string;
|
|
22
18
|
fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
|
|
23
19
|
fontFamily?: string;
|
|
24
20
|
color?: string;
|
|
25
21
|
textAlign?: 'left' | 'center' | 'right';
|
|
22
|
+
verticalAlign?: 'top' | 'middle' | 'bottom';
|
|
23
|
+
labelPosition?: 'top' | 'left';
|
|
24
|
+
labelVerticalAlign?: 'top' | 'middle' | 'bottom';
|
|
25
|
+
labelFontSize?: string;
|
|
26
|
+
labelFontWeight?: string;
|
|
27
|
+
labelColor?: string;
|
|
26
28
|
textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
|
|
27
29
|
backgroundColor?: string;
|
|
28
30
|
borderRadius?: string;
|
package/package.json
CHANGED