svgfusion-vue 1.2.4 → 1.4.0
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/index.cjs +19 -19
- package/dist/index.d.cts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +19 -19
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
'use strict';var svgfusionCore=require('svgfusion-core');var
|
|
2
|
-
${
|
|
1
|
+
'use strict';var svgfusionCore=require('svgfusion-core');var y=Object.defineProperty;var b=(g,c,s)=>c in g?y(g,c,{enumerable:true,configurable:true,writable:true,value:s}):g[c]=s;var v=(g,c,s)=>b(g,c+"",s);var $=class extends svgfusionCore.ComponentGenerator{constructor(s={}){super(s);v(this,"vueOptions");this.vueOptions={...this.options,composition:s.composition??true,scriptSetup:s.scriptSetup??true,sfc:s.sfc??true,defineComponent:s.defineComponent??false,useDefineOptions:s.useDefineOptions??false};}async formatCode(s,r){try{let{format:i}=await import('prettier');return await i(s,{parser:r,semi:!0,singleQuote:!0,trailingComma:"es5",tabWidth:2,printWidth:80,bracketSpacing:!0,arrowParens:"avoid",htmlWhitespaceSensitivity:"ignore",vueIndentScriptAndStyle:!0})}catch(i){return console.warn("Prettier formatting failed or not available, using unformatted code:",i),s}}async generate(s){let r=this.getComponentName(),i;this.vueOptions.sfc?i=this.generateSFC(s):i=this.generateJSComponent(s);let n=this.vueOptions.sfc?"vue":this.vueOptions.typescript?"ts":"js",e=this.generateFilename(r,n),t=this.vueOptions.sfc?"vue":this.vueOptions.typescript?"typescript":"babel";return {code:await this.formatCode(i,t),filename:e,componentName:r,dependencies:this.getDependencies()}}generateSFC(s){let r=this.generateTemplate(s),i=this.generateScript(s),n=this.generateStyle();return `<template>
|
|
2
|
+
${r}
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script${this.vueOptions.scriptSetup?" setup":""}${this.vueOptions.typescript?' lang="ts"':""}>
|
|
6
6
|
${this.vueOptions.scriptSetup&&this.vueOptions.useDefineOptions?`defineOptions({ inheritAttrs: false });
|
|
7
7
|
|
|
8
|
-
`:""}${
|
|
8
|
+
`:""}${i}
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
|
-
${
|
|
12
|
-
${
|
|
13
|
-
</style>`:""}`}generateJSComponent(s){return this.vueOptions.composition?this.generateCompositionAPI(s):this.generateOptionsAPI(s)}generateTemplate(s){let{ast:
|
|
14
|
-
`);return ` <svg${
|
|
11
|
+
${n?`<style scoped>
|
|
12
|
+
${n}
|
|
13
|
+
</style>`:""}`}generateJSComponent(s){return this.vueOptions.composition?this.generateCompositionAPI(s):this.generateOptionsAPI(s)}generateTemplate(s){let{ast:r}=s,i=this.generateSvgAttributes(r),n=r.root.children.map(e=>this.elementToVueTemplate(e,2)).join(`
|
|
14
|
+
`);return ` <svg${i} v-bind="$attrs" :width="computedSize.width" :height="computedSize.height">
|
|
15
15
|
<title v-if="props.title" :id="props.titleId">{{ props.title }}</title>
|
|
16
16
|
<desc v-if="props.desc" :id="props.descId">{{ props.desc }}</desc>
|
|
17
|
-
${
|
|
18
|
-
</svg>`}elementToVueTemplate(s,
|
|
19
|
-
`,f+=t.map(
|
|
17
|
+
${n}
|
|
18
|
+
</svg>`}elementToVueTemplate(s,r=0){let i=" ".repeat(r),{tag:n,attributes:e,children:t,content:p}=s,o=[],a=[],u="class"in e;if(Object.entries(e).forEach(([h,d])=>{if(h==="vector-effect"&&d==="non-scaling-stroke")o.push(`:vector-effect="props.isFixedStrokeWidth ? 'non-scaling-stroke' : 'none'"`);else if(h==="style"){let m=this.parseStyleStringForVue(d);o.push(`:style="${m}"`);let S=this.extractClassVarsFromStyle(d);a.push(...S);}else if(d.startsWith("{")&&d.endsWith("}")){let m=d.slice(1,-1);if(o.push(`:${h}="props.${m}"`),h==="fill"||h==="stroke"||h==="stroke-width"){let S=`${m}Class`;a.push(`props.${S}`);}}else o.push(`${h}="${d}"`);}),a.length>0){let h=e.class;h?o.push(`:class="[${a.join(", ")}, '${h}']"`):o.push(`:class="[${a.join(", ")}]"`);}else if(u){let h=e.class;h&&o.push(`class="${h}"`);}let l=o.length>0?" "+o.join(" "):"";if(t.length===0&&!p)return `${i}<${n}${l} />`;let f=`${i}<${n}${l}>`;return p&&(f+=p),t.length>0&&(f+=`
|
|
19
|
+
`,f+=t.map(h=>this.elementToVueTemplate(h,r+1)).join(`
|
|
20
20
|
`),f+=`
|
|
21
|
-
`+
|
|
22
|
-
`)}generateCompositionAPI(s){let{colorMappings:
|
|
23
|
-
`)}generateOptionsAPI(s){let{colorMappings:
|
|
24
|
-
`)}generateStyle(){return ""}generateColorPropsInterface(s){return s.length===0?"":s.map(
|
|
25
|
-
${
|
|
26
|
-
`)}generateStrokeWidthPropsInterface(s){return s.length===0?"":s.map(
|
|
27
|
-
${
|
|
28
|
-
`)}parseStyleStringForVue(s){let
|
|
29
|
-
exports.VueGenerator
|
|
21
|
+
`+i),f+=`</${n}>`,f}generateScript(s){return this.vueOptions.scriptSetup?this.generateScriptSetup(s):this.vueOptions.composition?this.generateCompositionAPI(s):this.generateOptionsAPI(s)}generateScriptSetup(s){let{colorMappings:r,strokeWidthMappings:i,metadata:n}=s,e=[];if(this.vueOptions.typescript?(e.push('import type { SVGAttributes } from "vue";'),e.push('import { computed } from "vue";'),e.push("")):(e.push('import { computed } from "vue";'),e.push("")),this.vueOptions.typescript){e.push("interface Props extends /* @vue-ignore */ SVGAttributes {"),e.push(" title?: string;"),e.push(" titleId?: string;"),e.push(" desc?: string;"),e.push(" descId?: string;"),e.push(" width?: string | number;"),e.push(" height?: string | number;"),e.push(" size?: string | number;");let p=this.generateColorPropsInterface(r);p&&e.push(p);let o=this.generateStrokeWidthPropsInterface(i);o&&e.push(o),n.features.includes("fixed-stroke-width")&&e.push(" isFixedStrokeWidth?: boolean;"),e.push("}"),e.push(""),e.push("const props = withDefaults(defineProps<Props>(), {");}else e.push("const props = defineProps({"),e.push(" title: { type: String, default: '' },"),e.push(" titleId: { type: String, default: '' },"),e.push(" desc: { type: String, default: '' },"),e.push(" descId: { type: String, default: '' },"),e.push(" class: { type: String, default: '' },"),e.push(" style: { type: Object, default: '' },"),e.push(" width: { type: [String, Number], default: '' },"),e.push(" height: { type: [String, Number], default: '' },"),e.push(' size: { type: [String, Number], default: "" },');this.vueOptions.typescript&&e.push(' size: "",'),r.forEach(p=>{let o=p.variableName,a=p.originalColor,u=`${o}Class`;this.vueOptions.typescript?(e.push(` ${o}: '${a}',`),e.push(` ${u}: "",`)):(e.push(` ${o}: { type: String, default: '${a}' },`),e.push(` ${u}: { type: String, default: "" },`));}),i.forEach(p=>{let o=p.variableName,a=p.originalStrokeWidth,u=`${o}Class`;this.vueOptions.typescript?(e.push(` ${o}: '${a}',`),e.push(` ${u}: "",`)):(e.push(` ${o}: { type: [String, Number], default: '${a}' },`),e.push(` ${u}: { type: String, default: "" },`));}),n.features.includes("fixed-stroke-width")&&(this.vueOptions.typescript?e.push(" isFixedStrokeWidth: true,"):e.push(" isFixedStrokeWidth: { type: Boolean, default: true },")),e.push("});"),e.push("");let t=this.getViewBoxDimensions(s.ast);return e.push("const computedSize = computed(() => ({"),e.push(` width: props.width || props.size || '${t.width}',`),e.push(` height: props.height || props.size || '${t.height}'`),e.push("}));"),e.join(`
|
|
22
|
+
`)}generateCompositionAPI(s){let{colorMappings:r,strokeWidthMappings:i,metadata:n}=s,e=this.getComponentName(),t=[];t.push("import { defineComponent, computed } from 'vue';"),t.push(""),t.push("export default defineComponent({"),t.push(` name: '${e}',`),t.push(" props: {"),t.push(" title: { type: String, default: '' },"),t.push(" titleId: { type: String, default: '' },"),t.push(" desc: { type: String, default: '' },"),t.push(" descId: { type: String, default: '' },"),t.push(" class: { type: String, default: '' },"),t.push(" style: { type: Object, default: '' },"),t.push(" width: { type: [String, Number], default: '' },"),t.push(" height: { type: [String, Number], default: '' },"),t.push(' size: { type: [String, Number], default: "" },'),r.forEach(o=>{let a=o.variableName,u=o.originalColor,l=`${a}Class`;t.push(` ${a}: { type: String, default: '${u}' },`),t.push(` ${l}: { type: String, default: "" },`);}),i.forEach(o=>{let a=o.variableName,u=o.originalStrokeWidth,l=`${a}Class`;t.push(` ${a}: { type: [String, Number], default: '${u}' },`),t.push(` ${l}: { type: String, default: "" },`);}),n.features.includes("fixed-stroke-width")&&t.push(" isFixedStrokeWidth: { type: Boolean, default: true },"),t.push(" },"),t.push(" setup(props) {");let p=this.getViewBoxDimensions(s.ast);return t.push(" const computedSize = computed(() => ({"),t.push(` width: props.width || props.size || '${p.width}',`),t.push(` height: props.height || props.size || '${p.height}'`),t.push(" }));"),t.push(" return { computedSize };"),t.push(" },"),t.push("});"),t.join(`
|
|
23
|
+
`)}generateOptionsAPI(s){let{colorMappings:r,strokeWidthMappings:i,metadata:n}=s,e=this.getComponentName(),t=[];t.push("export default {"),t.push(` name: '${e}',`),t.push(" props: {"),t.push(" title: { type: String, default: '' },"),t.push(" titleId: { type: String, default: '' },"),t.push(" desc: { type: String, default: '' },"),t.push(" descId: { type: String, default: '' },"),t.push(" class: { type: String, default: '' },"),t.push(" style: { type: Object, default: '' },"),t.push(" width: { type: [String, Number], default: '' },"),t.push(" height: { type: [String, Number], default: '' },"),t.push(' size: { type: [String, Number], default: "" },'),r.forEach(o=>{let a=o.variableName,u=o.originalColor,l=`${a}Class`;t.push(` ${a}: { type: String, default: '${u}' },`),t.push(` ${l}: { type: String, default: "" },`);}),i.forEach(o=>{let a=o.variableName,u=o.originalStrokeWidth,l=`${a}Class`;t.push(` ${a}: { type: [String, Number], default: '${u}' },`),t.push(` ${l}: { type: String, default: "" },`);}),n.features.includes("fixed-stroke-width")&&t.push(" isFixedStrokeWidth: { type: Boolean, default: true },"),t.push(" },"),t.push(" computed: {");let p=this.getViewBoxDimensions(s.ast);return t.push(" computedSize() {"),t.push(" return {"),t.push(` width: this.width || this.size || '${p.width}',`),t.push(` height: this.height || this.size || '${p.height}'`),t.push(" };"),t.push(" },"),t.push(" },"),t.push("};"),t.join(`
|
|
24
|
+
`)}getViewBoxDimensions(s){let{width:r,height:i,viewBox:n}=s;if(r&&i)return {width:r,height:i};if(n){let e=n.split(" ");if(e.length===4)return {width:e[2],height:e[3]}}return {width:"24",height:"24"}}generateStyle(){return ""}generateColorPropsInterface(s){return s.length===0?"":s.map(r=>{let i=r.variableName,n=`${i}Class`;return ` ${i}?: string;
|
|
25
|
+
${n}?: string;`}).join(`
|
|
26
|
+
`)}generateStrokeWidthPropsInterface(s){return s.length===0?"":s.map(r=>{let i=r.variableName,n=`${i}Class`;return ` ${i}?: string | number;
|
|
27
|
+
${n}?: string;`}).join(`
|
|
28
|
+
`)}parseStyleStringForVue(s){let r=[];return s.split(";").forEach(i=>{let n=i.indexOf(":");if(n>0){let e=i.slice(0,n).trim(),t=i.slice(n+1).trim();if(e&&t)if(t.startsWith("{")&&t.endsWith("}")){let p=t.slice(1,-1);r.push(`'${e}': props.${p}`);}else r.push(`'${e}': '${t}'`);}}),`{ ${r.join(", ")} }`}generateSvgAttributes(s){let r=[],n={...s.root.attributes||{},...s.viewBox&&{viewBox:s.viewBox},...s.namespace&&{xmlns:s.namespace},...s.width&&{width:s.width},...s.height&&{height:s.height}};n.xmlns||(n.xmlns="http://www.w3.org/2000/svg");let e=n.viewBox;return Object.entries(n).forEach(([t,p])=>{if(p!=null){if(e&&(t==="width"||t==="height"))return;if(t==="aria-labelledby"&&typeof p=="string"&&p.includes("{")){let o=p.replace(/\{(\w+)\}/g,"${props.$1}");r.push(` :aria-labelledby="\`${o}\`"`);}else r.push(` ${t}="${p}"`);}}),r.join("")}getDependencies(){return ["vue"]}extractClassVarsFromStyle(s){let r=[];return s.split(";").forEach(i=>{let n=i.indexOf(":");if(n>0){let e=i.slice(0,n).trim(),t=i.slice(n+1).trim();if(e&&t&&t.startsWith("{")&&t.endsWith("}")){let p=t.slice(1,-1);if(e==="fill"||e==="stroke"||e==="stroke-width"){let o=`props.${p}Class`;r.push(o);}}}}),r}};
|
|
29
|
+
exports.VueGenerator=$;
|
package/dist/index.d.cts
CHANGED
|
@@ -58,6 +58,10 @@ declare class VueGenerator extends ComponentGenerator {
|
|
|
58
58
|
* Generate Options API script
|
|
59
59
|
*/
|
|
60
60
|
private generateOptionsAPI;
|
|
61
|
+
/**
|
|
62
|
+
* Get viewBox dimensions as fallback values
|
|
63
|
+
*/
|
|
64
|
+
private getViewBoxDimensions;
|
|
61
65
|
/**
|
|
62
66
|
* Generate style section
|
|
63
67
|
*/
|
package/dist/index.d.ts
CHANGED
|
@@ -58,6 +58,10 @@ declare class VueGenerator extends ComponentGenerator {
|
|
|
58
58
|
* Generate Options API script
|
|
59
59
|
*/
|
|
60
60
|
private generateOptionsAPI;
|
|
61
|
+
/**
|
|
62
|
+
* Get viewBox dimensions as fallback values
|
|
63
|
+
*/
|
|
64
|
+
private getViewBoxDimensions;
|
|
61
65
|
/**
|
|
62
66
|
* Generate style section
|
|
63
67
|
*/
|
package/dist/index.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import {ComponentGenerator}from'svgfusion-core';var
|
|
2
|
-
${
|
|
1
|
+
import {ComponentGenerator}from'svgfusion-core';var y=Object.defineProperty;var b=(g,c,s)=>c in g?y(g,c,{enumerable:true,configurable:true,writable:true,value:s}):g[c]=s;var v=(g,c,s)=>b(g,c+"",s);var $=class extends ComponentGenerator{constructor(s={}){super(s);v(this,"vueOptions");this.vueOptions={...this.options,composition:s.composition??true,scriptSetup:s.scriptSetup??true,sfc:s.sfc??true,defineComponent:s.defineComponent??false,useDefineOptions:s.useDefineOptions??false};}async formatCode(s,r){try{let{format:i}=await import('prettier');return await i(s,{parser:r,semi:!0,singleQuote:!0,trailingComma:"es5",tabWidth:2,printWidth:80,bracketSpacing:!0,arrowParens:"avoid",htmlWhitespaceSensitivity:"ignore",vueIndentScriptAndStyle:!0})}catch(i){return console.warn("Prettier formatting failed or not available, using unformatted code:",i),s}}async generate(s){let r=this.getComponentName(),i;this.vueOptions.sfc?i=this.generateSFC(s):i=this.generateJSComponent(s);let n=this.vueOptions.sfc?"vue":this.vueOptions.typescript?"ts":"js",e=this.generateFilename(r,n),t=this.vueOptions.sfc?"vue":this.vueOptions.typescript?"typescript":"babel";return {code:await this.formatCode(i,t),filename:e,componentName:r,dependencies:this.getDependencies()}}generateSFC(s){let r=this.generateTemplate(s),i=this.generateScript(s),n=this.generateStyle();return `<template>
|
|
2
|
+
${r}
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script${this.vueOptions.scriptSetup?" setup":""}${this.vueOptions.typescript?' lang="ts"':""}>
|
|
6
6
|
${this.vueOptions.scriptSetup&&this.vueOptions.useDefineOptions?`defineOptions({ inheritAttrs: false });
|
|
7
7
|
|
|
8
|
-
`:""}${
|
|
8
|
+
`:""}${i}
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
|
-
${
|
|
12
|
-
${
|
|
13
|
-
</style>`:""}`}generateJSComponent(s){return this.vueOptions.composition?this.generateCompositionAPI(s):this.generateOptionsAPI(s)}generateTemplate(s){let{ast:
|
|
14
|
-
`);return ` <svg${
|
|
11
|
+
${n?`<style scoped>
|
|
12
|
+
${n}
|
|
13
|
+
</style>`:""}`}generateJSComponent(s){return this.vueOptions.composition?this.generateCompositionAPI(s):this.generateOptionsAPI(s)}generateTemplate(s){let{ast:r}=s,i=this.generateSvgAttributes(r),n=r.root.children.map(e=>this.elementToVueTemplate(e,2)).join(`
|
|
14
|
+
`);return ` <svg${i} v-bind="$attrs" :width="computedSize.width" :height="computedSize.height">
|
|
15
15
|
<title v-if="props.title" :id="props.titleId">{{ props.title }}</title>
|
|
16
16
|
<desc v-if="props.desc" :id="props.descId">{{ props.desc }}</desc>
|
|
17
|
-
${
|
|
18
|
-
</svg>`}elementToVueTemplate(s,
|
|
19
|
-
`,f+=t.map(
|
|
17
|
+
${n}
|
|
18
|
+
</svg>`}elementToVueTemplate(s,r=0){let i=" ".repeat(r),{tag:n,attributes:e,children:t,content:p}=s,o=[],a=[],u="class"in e;if(Object.entries(e).forEach(([h,d])=>{if(h==="vector-effect"&&d==="non-scaling-stroke")o.push(`:vector-effect="props.isFixedStrokeWidth ? 'non-scaling-stroke' : 'none'"`);else if(h==="style"){let m=this.parseStyleStringForVue(d);o.push(`:style="${m}"`);let S=this.extractClassVarsFromStyle(d);a.push(...S);}else if(d.startsWith("{")&&d.endsWith("}")){let m=d.slice(1,-1);if(o.push(`:${h}="props.${m}"`),h==="fill"||h==="stroke"||h==="stroke-width"){let S=`${m}Class`;a.push(`props.${S}`);}}else o.push(`${h}="${d}"`);}),a.length>0){let h=e.class;h?o.push(`:class="[${a.join(", ")}, '${h}']"`):o.push(`:class="[${a.join(", ")}]"`);}else if(u){let h=e.class;h&&o.push(`class="${h}"`);}let l=o.length>0?" "+o.join(" "):"";if(t.length===0&&!p)return `${i}<${n}${l} />`;let f=`${i}<${n}${l}>`;return p&&(f+=p),t.length>0&&(f+=`
|
|
19
|
+
`,f+=t.map(h=>this.elementToVueTemplate(h,r+1)).join(`
|
|
20
20
|
`),f+=`
|
|
21
|
-
`+
|
|
22
|
-
`)}generateCompositionAPI(s){let{colorMappings:
|
|
23
|
-
`)}generateOptionsAPI(s){let{colorMappings:
|
|
24
|
-
`)}generateStyle(){return ""}generateColorPropsInterface(s){return s.length===0?"":s.map(
|
|
25
|
-
${
|
|
26
|
-
`)}generateStrokeWidthPropsInterface(s){return s.length===0?"":s.map(
|
|
27
|
-
${
|
|
28
|
-
`)}parseStyleStringForVue(s){let
|
|
29
|
-
export{
|
|
21
|
+
`+i),f+=`</${n}>`,f}generateScript(s){return this.vueOptions.scriptSetup?this.generateScriptSetup(s):this.vueOptions.composition?this.generateCompositionAPI(s):this.generateOptionsAPI(s)}generateScriptSetup(s){let{colorMappings:r,strokeWidthMappings:i,metadata:n}=s,e=[];if(this.vueOptions.typescript?(e.push('import type { SVGAttributes } from "vue";'),e.push('import { computed } from "vue";'),e.push("")):(e.push('import { computed } from "vue";'),e.push("")),this.vueOptions.typescript){e.push("interface Props extends /* @vue-ignore */ SVGAttributes {"),e.push(" title?: string;"),e.push(" titleId?: string;"),e.push(" desc?: string;"),e.push(" descId?: string;"),e.push(" width?: string | number;"),e.push(" height?: string | number;"),e.push(" size?: string | number;");let p=this.generateColorPropsInterface(r);p&&e.push(p);let o=this.generateStrokeWidthPropsInterface(i);o&&e.push(o),n.features.includes("fixed-stroke-width")&&e.push(" isFixedStrokeWidth?: boolean;"),e.push("}"),e.push(""),e.push("const props = withDefaults(defineProps<Props>(), {");}else e.push("const props = defineProps({"),e.push(" title: { type: String, default: '' },"),e.push(" titleId: { type: String, default: '' },"),e.push(" desc: { type: String, default: '' },"),e.push(" descId: { type: String, default: '' },"),e.push(" class: { type: String, default: '' },"),e.push(" style: { type: Object, default: '' },"),e.push(" width: { type: [String, Number], default: '' },"),e.push(" height: { type: [String, Number], default: '' },"),e.push(' size: { type: [String, Number], default: "" },');this.vueOptions.typescript&&e.push(' size: "",'),r.forEach(p=>{let o=p.variableName,a=p.originalColor,u=`${o}Class`;this.vueOptions.typescript?(e.push(` ${o}: '${a}',`),e.push(` ${u}: "",`)):(e.push(` ${o}: { type: String, default: '${a}' },`),e.push(` ${u}: { type: String, default: "" },`));}),i.forEach(p=>{let o=p.variableName,a=p.originalStrokeWidth,u=`${o}Class`;this.vueOptions.typescript?(e.push(` ${o}: '${a}',`),e.push(` ${u}: "",`)):(e.push(` ${o}: { type: [String, Number], default: '${a}' },`),e.push(` ${u}: { type: String, default: "" },`));}),n.features.includes("fixed-stroke-width")&&(this.vueOptions.typescript?e.push(" isFixedStrokeWidth: true,"):e.push(" isFixedStrokeWidth: { type: Boolean, default: true },")),e.push("});"),e.push("");let t=this.getViewBoxDimensions(s.ast);return e.push("const computedSize = computed(() => ({"),e.push(` width: props.width || props.size || '${t.width}',`),e.push(` height: props.height || props.size || '${t.height}'`),e.push("}));"),e.join(`
|
|
22
|
+
`)}generateCompositionAPI(s){let{colorMappings:r,strokeWidthMappings:i,metadata:n}=s,e=this.getComponentName(),t=[];t.push("import { defineComponent, computed } from 'vue';"),t.push(""),t.push("export default defineComponent({"),t.push(` name: '${e}',`),t.push(" props: {"),t.push(" title: { type: String, default: '' },"),t.push(" titleId: { type: String, default: '' },"),t.push(" desc: { type: String, default: '' },"),t.push(" descId: { type: String, default: '' },"),t.push(" class: { type: String, default: '' },"),t.push(" style: { type: Object, default: '' },"),t.push(" width: { type: [String, Number], default: '' },"),t.push(" height: { type: [String, Number], default: '' },"),t.push(' size: { type: [String, Number], default: "" },'),r.forEach(o=>{let a=o.variableName,u=o.originalColor,l=`${a}Class`;t.push(` ${a}: { type: String, default: '${u}' },`),t.push(` ${l}: { type: String, default: "" },`);}),i.forEach(o=>{let a=o.variableName,u=o.originalStrokeWidth,l=`${a}Class`;t.push(` ${a}: { type: [String, Number], default: '${u}' },`),t.push(` ${l}: { type: String, default: "" },`);}),n.features.includes("fixed-stroke-width")&&t.push(" isFixedStrokeWidth: { type: Boolean, default: true },"),t.push(" },"),t.push(" setup(props) {");let p=this.getViewBoxDimensions(s.ast);return t.push(" const computedSize = computed(() => ({"),t.push(` width: props.width || props.size || '${p.width}',`),t.push(` height: props.height || props.size || '${p.height}'`),t.push(" }));"),t.push(" return { computedSize };"),t.push(" },"),t.push("});"),t.join(`
|
|
23
|
+
`)}generateOptionsAPI(s){let{colorMappings:r,strokeWidthMappings:i,metadata:n}=s,e=this.getComponentName(),t=[];t.push("export default {"),t.push(` name: '${e}',`),t.push(" props: {"),t.push(" title: { type: String, default: '' },"),t.push(" titleId: { type: String, default: '' },"),t.push(" desc: { type: String, default: '' },"),t.push(" descId: { type: String, default: '' },"),t.push(" class: { type: String, default: '' },"),t.push(" style: { type: Object, default: '' },"),t.push(" width: { type: [String, Number], default: '' },"),t.push(" height: { type: [String, Number], default: '' },"),t.push(' size: { type: [String, Number], default: "" },'),r.forEach(o=>{let a=o.variableName,u=o.originalColor,l=`${a}Class`;t.push(` ${a}: { type: String, default: '${u}' },`),t.push(` ${l}: { type: String, default: "" },`);}),i.forEach(o=>{let a=o.variableName,u=o.originalStrokeWidth,l=`${a}Class`;t.push(` ${a}: { type: [String, Number], default: '${u}' },`),t.push(` ${l}: { type: String, default: "" },`);}),n.features.includes("fixed-stroke-width")&&t.push(" isFixedStrokeWidth: { type: Boolean, default: true },"),t.push(" },"),t.push(" computed: {");let p=this.getViewBoxDimensions(s.ast);return t.push(" computedSize() {"),t.push(" return {"),t.push(` width: this.width || this.size || '${p.width}',`),t.push(` height: this.height || this.size || '${p.height}'`),t.push(" };"),t.push(" },"),t.push(" },"),t.push("};"),t.join(`
|
|
24
|
+
`)}getViewBoxDimensions(s){let{width:r,height:i,viewBox:n}=s;if(r&&i)return {width:r,height:i};if(n){let e=n.split(" ");if(e.length===4)return {width:e[2],height:e[3]}}return {width:"24",height:"24"}}generateStyle(){return ""}generateColorPropsInterface(s){return s.length===0?"":s.map(r=>{let i=r.variableName,n=`${i}Class`;return ` ${i}?: string;
|
|
25
|
+
${n}?: string;`}).join(`
|
|
26
|
+
`)}generateStrokeWidthPropsInterface(s){return s.length===0?"":s.map(r=>{let i=r.variableName,n=`${i}Class`;return ` ${i}?: string | number;
|
|
27
|
+
${n}?: string;`}).join(`
|
|
28
|
+
`)}parseStyleStringForVue(s){let r=[];return s.split(";").forEach(i=>{let n=i.indexOf(":");if(n>0){let e=i.slice(0,n).trim(),t=i.slice(n+1).trim();if(e&&t)if(t.startsWith("{")&&t.endsWith("}")){let p=t.slice(1,-1);r.push(`'${e}': props.${p}`);}else r.push(`'${e}': '${t}'`);}}),`{ ${r.join(", ")} }`}generateSvgAttributes(s){let r=[],n={...s.root.attributes||{},...s.viewBox&&{viewBox:s.viewBox},...s.namespace&&{xmlns:s.namespace},...s.width&&{width:s.width},...s.height&&{height:s.height}};n.xmlns||(n.xmlns="http://www.w3.org/2000/svg");let e=n.viewBox;return Object.entries(n).forEach(([t,p])=>{if(p!=null){if(e&&(t==="width"||t==="height"))return;if(t==="aria-labelledby"&&typeof p=="string"&&p.includes("{")){let o=p.replace(/\{(\w+)\}/g,"${props.$1}");r.push(` :aria-labelledby="\`${o}\`"`);}else r.push(` ${t}="${p}"`);}}),r.join("")}getDependencies(){return ["vue"]}extractClassVarsFromStyle(s){let r=[];return s.split(";").forEach(i=>{let n=i.indexOf(":");if(n>0){let e=i.slice(0,n).trim(),t=i.slice(n+1).trim();if(e&&t&&t.startsWith("{")&&t.endsWith("}")){let p=t.slice(1,-1);if(e==="fill"||e==="stroke"||e==="stroke-width"){let o=`props.${p}Class`;r.push(o);}}}}),r}};
|
|
29
|
+
export{$ as VueGenerator};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svgfusion-vue",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "Vue component generator for SVGFusion",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "lolvoid",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
"release": "semantic-release"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"svgfusion-core": "1.
|
|
38
|
-
"svgfusion-utils": "1.
|
|
37
|
+
"svgfusion-core": "1.5.0",
|
|
38
|
+
"svgfusion-utils": "1.3.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@eslint/js": "9.31.0",
|