@nice2dev/ui-graphics 1.2.1 → 1.2.2

package/dist/esm/vector/NiceSvgToCode.js

@@ -437,14 +437,14 @@ const NiceSvgToCode = ({ initialSvg = '', onConvert, className = '', }) => {
             navigator.clipboard.writeText(result.code);
         }
     };
-    return (jsxs("div", { className: `nice-svg-to-code ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "refresh", size: 14 }), " SVG \u2192 Code"] }), jsx("textarea", { value: svgInput, onChange: (e) => setSvgInput(e.target.value), placeholder: t('svgToCode.pasteSvgMarkupHere', 'Paste SVG markup here…'), rows: 6, style: {
+    return (jsxs("div", { className: `nice-svg-to-code ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "refresh", size: 14 }), " ", t('svgToCode.svgCode', 'SVG → Code')] }), jsx("textarea", { value: svgInput, onChange: (e) => setSvgInput(e.target.value), placeholder: t('svgToCode.pasteSvgMarkupHere', 'Paste SVG markup here…'), rows: 6, style: {
                     width: '100%',
                     fontFamily: 'monospace',
                     fontSize: 11,
                     padding: 6,
                     borderRadius: 4,
                     border: '1px solid var(--nice-border, #e2e8f0)',
-                } }), jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: ["Framework:", jsxs("select", { value: config.framework, onChange: (e) => updateConfig({ framework: e.target.value }), style: { width: '100%' }, children: [jsx("option", { value: "react", children: "React (JSX/TSX)" }), jsx("option", { value: "vue", children: "Vue (SFC)" }), jsx("option", { value: "web-component", children: t('svgToCode.webComponent', 'Web Component') }), jsx("option", { value: "typescript", children: "TypeScript (utility)" })] })] }), jsxs("label", { children: ["Component name:", jsx("input", { type: "text", value: config.componentName, onChange: (e) => updateConfig({ componentName: e.target.value.replace(/[^a-zA-Z0-9]/g, '') }), style: { width: '100%', padding: '3px 6px' } })] }), jsxs("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap', fontSize: 11 }, children: [jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.typescript, onChange: (e) => updateConfig({ typescript: e.target.checked }) }), ' ', t('svgToCode.typescript', 'TypeScript')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.optimize, onChange: (e) => updateConfig({ optimize: e.target.checked }) }), ' ', t('svgToCode.optimize', 'Optimize')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.sizeProps, onChange: (e) => updateConfig({ sizeProps: e.target.checked }) }), ' ', t('svgToCode.sizeProps', 'Size props')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.useCurrentColor, onChange: (e) => updateConfig({ useCurrentColor: e.target.checked }) }), ' ', "currentColor"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.memo, onChange: (e) => updateConfig({ memo: e.target.checked }) }), ' ', "memo"] })] })] }), jsxs("button", { type: "button", onClick: handleConvert, disabled: !svgInput.trim(), style: {
+                } }), jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: [t('svgToCode.framework', 'Framework:'), jsxs("select", { value: config.framework, onChange: (e) => updateConfig({ framework: e.target.value }), style: { width: '100%' }, children: [jsx("option", { value: "react", children: "React (JSX/TSX)" }), jsx("option", { value: "vue", children: "Vue (SFC)" }), jsx("option", { value: "web-component", children: t('svgToCode.webComponent', 'Web Component') }), jsx("option", { value: "typescript", children: t('svgToCode.typescriptUtility', 'TypeScript (utility)') })] })] }), jsxs("label", { children: [t('svgToCode.componentName', 'Component name:'), jsx("input", { type: "text", value: config.componentName, onChange: (e) => updateConfig({ componentName: e.target.value.replace(/[^a-zA-Z0-9]/g, '') }), style: { width: '100%', padding: '3px 6px' } })] }), jsxs("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap', fontSize: 11 }, children: [jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.typescript, onChange: (e) => updateConfig({ typescript: e.target.checked }) }), ' ', t('svgToCode.typescript', 'TypeScript')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.optimize, onChange: (e) => updateConfig({ optimize: e.target.checked }) }), ' ', t('svgToCode.optimize', 'Optimize')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.sizeProps, onChange: (e) => updateConfig({ sizeProps: e.target.checked }) }), ' ', t('svgToCode.sizeProps', 'Size props')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.useCurrentColor, onChange: (e) => updateConfig({ useCurrentColor: e.target.checked }) }), ' ', "currentColor"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.memo, onChange: (e) => updateConfig({ memo: e.target.checked }) }), ' ', "memo"] })] })] }), jsxs("button", { type: "button", onClick: handleConvert, disabled: !svgInput.trim(), style: {
                     background: 'var(--nice-color-accent, #6366f1)',
                     color: 'var(--nice-text-on-primary, #fff)',
                     border: 'none',
@@ -472,7 +472,7 @@ const NiceSvgToCode = ({ initialSvg = '', onConvert, className = '', }) => {
                             overflow: 'auto',
                             maxHeight: 300,
                             whiteSpace: 'pre-wrap',
-                        }, children: result.code }), result.extractedColors.length > 0 && (jsxs("div", { style: { fontSize: 11, marginTop: 4 }, children: ["Kolory:", ' ', result.extractedColors.map((c) => (jsx("span", { style: {
+                        }, children: result.code }), result.extractedColors.length > 0 && (jsxs("div", { style: { fontSize: 11, marginTop: 4 }, children: [t('svgToCode.colors', 'Colors:'), ' ', result.extractedColors.map((c) => (jsx("span", { style: {
                                     display: 'inline-block',
                                     width: 12,
                                     height: 12,

package/dist/esm/vector/VectorEditor.js

@@ -110,7 +110,7 @@ const NiceVectorEditor = ({ width: artW = 512, height: artH = 512, className, on
                                 }
                                 const node = (jsx(ShapeRenderer, { shape: s, selected: s.id === selId, zoom: zoom }, s.id));
                                 return previewTr ? (jsx("g", { transform: previewTr, children: node }, s.id)) : (node);
-                            })] }) }) }), jsxs(NiceModal, { open: dlgSvg, onClose: () => setDlgSvg(false), title: t('vectorEditor.pasteSvg', 'Paste SVG'), children: [jsx("label", { children: "Paste SVG source code below:" }), jsx(NiceTextArea, { value: svgText, onChange: (val) => setSvgText(val), placeholder: t('vectorEditor.svgXmlnsHttpWwwW3', '<svg xmlns="http://www.w3.org/2000/svg" ...>') }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "ghost", onClick: () => setDlgSvg(false), children: t('vectorEditor.cancel', 'Cancel') }), jsx(NiceButton, { variant: "primary", onClick: () => importSVGString(svgText), children: t('vectorEditor.import', 'Import') })] })] }), jsxs(NiceModal, { open: snippetOpen, onClose: () => setSnippetOpen(false), title: t('vectorEditor.snippet.title', 'Icon snippet copied to clipboard'), children: [jsxs("p", { style: { marginTop: 0 }, children: [t('vectorEditor.snippet.pasteHint', 'Paste into'), ' ', jsxs("code", { children: ["packages/icons/src/icons/", iconCategory ? `${iconCategory.toLowerCase()}` : '<category>', ".tsx"] }), ":"] }), jsx(NiceTextArea, { value: snippetText, onChange: (val) => setSnippetText(val), rows: 16 }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "primary", onClick: () => {
+                            })] }) }) }), jsxs(NiceModal, { open: dlgSvg, onClose: () => setDlgSvg(false), title: t('vectorEditor.pasteSvg', 'Paste SVG'), children: [jsx("label", { children: t('vectorEditor.pasteSvgSourceCodeBelow', 'Paste SVG source code below:') }), jsx(NiceTextArea, { value: svgText, onChange: (val) => setSvgText(val), placeholder: t('vectorEditor.svgXmlnsHttpWwwW3', '<svg xmlns="http://www.w3.org/2000/svg" ...>') }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "ghost", onClick: () => setDlgSvg(false), children: t('vectorEditor.cancel', 'Cancel') }), jsx(NiceButton, { variant: "primary", onClick: () => importSVGString(svgText), children: t('vectorEditor.import', 'Import') })] })] }), jsxs(NiceModal, { open: snippetOpen, onClose: () => setSnippetOpen(false), title: t('vectorEditor.snippet.title', 'Icon snippet copied to clipboard'), children: [jsxs("p", { style: { marginTop: 0 }, children: [t('vectorEditor.snippet.pasteHint', 'Paste into'), ' ', jsxs("code", { children: ["packages/icons/src/icons/", iconCategory ? `${iconCategory.toLowerCase()}` : '<category>', ".tsx"] }), ":"] }), jsx(NiceTextArea, { value: snippetText, onChange: (val) => setSnippetText(val), rows: 16 }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "primary", onClick: () => {
                                     if (typeof navigator !== 'undefined' && navigator.clipboard) {
                                         navigator.clipboard.writeText(snippetText).catch(() => { });
                                     }

package/dist/esm/vector/VectorEditorMenuBar.js

@@ -262,7 +262,13 @@ const VectorEditorMenuBar$1 = ({ api, hasOnSaveToLibrary, onExportIconSnippet })
                     { value: '', label: t('vectorEditor.menu.secondShape', '2nd Shape') },
                     ...shapes
                         .filter((s) => s.id !== selId)
-                        .map((s, i) => { var _a; return ({ value: s.id, label: (_a = s.name) !== null && _a !== void 0 ? _a : `Shape ${i + 1}` }); }),
+                        .map((s, i) => {
+                        var _a;
+                        return ({
+                            value: s.id,
+                            label: (_a = s.name) !== null && _a !== void 0 ? _a : t('vectorEditor.shape', 'Shape {i}').replace('{i}', String(i + 1)),
+                        });
+                    }),
                 ], style: { minWidth: 100 } })), jsxs("label", { className: styles.menuLabel, children: [jsx(NiceCheckbox, { checked: snapGrid, onChange: () => setSnapGrid((v) => !v) }), t('vectorEditor.menu.snap', 'Snap')] }), onExportIconSnippet && (jsxs(Fragment, { children: [jsx("div", { className: styles.menuSep }), jsxs(NiceButton, { className: styles.menuBtn, variant: "primary", size: "sm", onClick: onExportIconSnippet, children: [jsx(NiceIcon, { name: "clipboard", size: 14 }), ' ', t('vectorEditor.menu.exportIcon', 'Export Icon')] })] }))] }));
 };
 var VectorEditorMenuBar = React.memo(VectorEditorMenuBar$1);

package/dist/esm/vector/VectorEditorRightPanel.js

@@ -44,7 +44,7 @@ const VectorEditorRightPanel$1 = ({ api, library, artW = 512, artH = 512 }) => {
                                         border: (selectedGradient === null || selectedGradient === void 0 ? void 0 : selectedGradient.id) === grad.id
                                             ? '2px solid var(--nice-bg, #FFF)'
                                             : '1px solid var(--nice-border-color, #444)',
-                                    }, onClick: () => applyGradient(grad), title: `${grad.type} gradient` }, i))) }), jsx("div", { className: styles.propRow, children: jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { width: '100%', fontSize: 10 }, onClick: () => setShowGradientEditor(!showGradientEditor), children: [jsx(NiceIcon, { name: showGradientEditor ? 'chevron-down' : 'chevron-right', size: 14 }), ' ', showGradientEditor
+                                    }, onClick: () => applyGradient(grad), title: t('vectorEditor.gradient', '{type} gradient').replace('{type}', String(grad.type)) }, i))) }), jsx("div", { className: styles.propRow, children: jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { width: '100%', fontSize: 10 }, onClick: () => setShowGradientEditor(!showGradientEditor), children: [jsx(NiceIcon, { name: showGradientEditor ? 'chevron-down' : 'chevron-right', size: 14 }), ' ', showGradientEditor
                                             ? t('vectorEditor.properties.hideEditor', 'Hide Editor')
                                             : t('vectorEditor.properties.editGradient', 'Edit Gradient')] }) }), showGradientEditor && selectedGradient && (jsxs("div", { style: {
                                     padding: 4,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-graphics",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Nice2Dev Graphics Editors — Pixel, Vector, Photo and Animation editors for React",
   "author": "NiceToDev <contact@nicetodev.com>",
   "license": "SEE LICENSE IN LICENSE",
@@ -71,8 +71,8 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@nice2dev/ui": "^1.2.1",
-    "@nice2dev/ui-core": "^1.2.1",
+    "@nice2dev/ui": "^1.2.2",
+    "@nice2dev/ui-core": "^1.2.2",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",