svgfusion-vue 1.0.0

package/README.md

@@ -0,0 +1,34 @@
+# SVGFusion Vue
+
+Vue 3 specific utilities and components for SVGFusion.
+
+## Installation
+
+```bash
+npm install svgfusion-vue
+```
+
+## Usage
+
+```typescript
+import { generateVueComponent, VueOptions } from 'svgfusion-vue';
+
+// Generate Vue 3 component from SVG
+const svgContent = '<svg>...</svg>';
+const vueComponent = generateVueComponent(svgContent, options);
+```
+
+## Features
+
+- Vue 3 component generation
+- TypeScript support
+- Composition API support
+- Vue-specific optimizations
+
+## Documentation
+
+Visit [svgfusion.netlify.app](https://svgfusion.netlify.app) for complete documentation.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,29 @@
+'use strict';var svgfusionCore=require('svgfusion-core');var v=Object.defineProperty;var b=(d,l,s)=>l in d?v(d,l,{enumerable:true,configurable:true,writable:true,value:s}):d[l]=s;var y=(d,l,s)=>b(d,l+"",s);var S=class extends svgfusionCore.ComponentGenerator{constructor(s={}){super(s);y(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,n){try{let{format:r}=await import('prettier');return await r(s,{parser:n,semi:!0,singleQuote:!0,trailingComma:"es5",tabWidth:2,printWidth:80,bracketSpacing:!0,arrowParens:"avoid",htmlWhitespaceSensitivity:"ignore",vueIndentScriptAndStyle:!0})}catch(r){return console.warn("Prettier formatting failed or not available, using unformatted code:",r),s}}async generate(s){let n=this.getComponentName(),r;this.vueOptions.sfc?r=this.generateSFC(s):r=this.generateJSComponent(s);let o=this.vueOptions.sfc?"vue":this.vueOptions.typescript?"ts":"js",e=this.generateFilename(n,o),t=this.vueOptions.sfc?"vue":this.vueOptions.typescript?"typescript":"babel";return {code:await this.formatCode(r,t),filename:e,componentName:n,dependencies:this.getDependencies()}}generateSFC(s){let n=this.generateTemplate(s),r=this.generateScript(s),o=this.generateStyle();return `<template>
+${n}
+</template>
+
+<script${this.vueOptions.scriptSetup?" setup":""}${this.vueOptions.typescript?' lang="ts"':""}>
+${this.vueOptions.scriptSetup&&this.vueOptions.useDefineOptions?`defineOptions({ inheritAttrs: false });
+
+`:""}${r}
+</script>
+
+${o?`<style scoped>
+${o}
+</style>`:""}`}generateJSComponent(s){return this.vueOptions.composition?this.generateCompositionAPI(s):this.generateOptionsAPI(s)}generateTemplate(s){let{ast:n}=s,r=this.generateSvgAttributes(n),o=n.root.children.map(e=>this.elementToVueTemplate(e,2)).join(`
+`);return `  <svg${r} v-bind="$attrs" :width="computedWidth" :height="computedHeight">
+    <title v-if="props.title" :id="props.titleId">{{ props.title }}</title>
+    <desc v-if="props.desc" :id="props.descId">{{ props.desc }}</desc>
+${o}
+  </svg>`}elementToVueTemplate(s,n=0){let r="  ".repeat(n),{tag:o,attributes:e,children:t,content:i}=s,p=[],a=[],h="class"in e;if(Object.entries(e).forEach(([u,c])=>{if(u==="vector-effect"&&c==="non-scaling-stroke")p.push(`:vector-effect="props.isFixedStrokeWidth ? 'non-scaling-stroke' : 'none'"`);else if(u==="style"){let g=this.parseStyleStringForVue(c);p.push(`:style="${g}"`);let m=this.extractClassVarsFromStyle(c);a.push(...m);}else if(c.startsWith("{")&&c.endsWith("}")){let g=c.slice(1,-1);if(p.push(`:${u}="props.${g}"`),u==="fill"||u==="stroke"||u==="stroke-width"){let m=`${g}Class`;a.push(`props.${m}`);}}else p.push(`${u}="${c}"`);}),a.length>0){let u=e.class;u?p.push(`:class="[${a.join(", ")}, '${u}']"`):p.push(`:class="[${a.join(", ")}]"`);}else if(h){let u=e.class;u&&p.push(`class="${u}"`);}let $=p.length>0?" "+p.join(" "):"";if(t.length===0&&!i)return `${r}<${o}${$} />`;let f=`${r}<${o}${$}>`;return i&&(f+=i),t.length>0&&(f+=`
+`,f+=t.map(u=>this.elementToVueTemplate(u,n+1)).join(`
+`),f+=`
+`+r),f+=`</${o}>`,f}generateScript(s){return this.vueOptions.scriptSetup?this.generateScriptSetup(s):this.vueOptions.composition?this.generateCompositionAPI(s):this.generateOptionsAPI(s)}generateScriptSetup(s){let{colorMappings:n,strokeWidthMappings:r,metadata:o}=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 t=this.generateColorPropsInterface(n);t&&e.push(t);let i=this.generateStrokeWidthPropsInterface(r);i&&e.push(i),o.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: "24" },');return this.vueOptions.typescript&&e.push('  size: "24",'),n.forEach(t=>{let i=t.variableName,p=t.originalColor,a=`${i}Class`;this.vueOptions.typescript?(e.push(`  ${i}: '${p}',`),e.push(`  ${a}: "",`)):(e.push(`  ${i}: { type: String, default: '${p}' },`),e.push(`  ${a}: { type: String, default: "" },`));}),r.forEach(t=>{let i=t.variableName,p=t.originalStrokeWidth,a=`${i}Class`;this.vueOptions.typescript?(e.push(`  ${i}: '${p}',`),e.push(`  ${a}: "",`)):(e.push(`  ${i}: { type: [String, Number], default: '${p}' },`),e.push(`  ${a}: { type: String, default: "" },`));}),o.features.includes("fixed-stroke-width")&&(this.vueOptions.typescript?e.push("  isFixedStrokeWidth: true,"):e.push("  isFixedStrokeWidth: { type: Boolean, default: true },")),e.push("});"),e.push(""),e.push("const computedWidth = computed(() => props.width || props.size);"),e.push("const computedHeight = computed(() => props.height || props.size);"),e.join(`
+`)}generateCompositionAPI(s){let{colorMappings:n,strokeWidthMappings:r,metadata:o}=s,e=this.getComponentName(),t=[];return 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: "24" },'),n.forEach(i=>{let p=i.variableName,a=i.originalColor,h=`${p}Class`;t.push(`    ${p}: { type: String, default: '${a}' },`),t.push(`    ${h}: { type: String, default: "" },`);}),r.forEach(i=>{let p=i.variableName,a=i.originalStrokeWidth,h=`${p}Class`;t.push(`    ${p}: { type: [String, Number], default: '${a}' },`),t.push(`    ${h}: { type: String, default: "" },`);}),o.features.includes("fixed-stroke-width")&&t.push("    isFixedStrokeWidth: { type: Boolean, default: true },"),t.push("  },"),t.push("  setup(props) {"),t.push("    const computedWidth = computed(() => props.width || props.size);"),t.push("    const computedHeight = computed(() => props.height || props.size);"),t.push("    return { computedWidth, computedHeight };"),t.push("  },"),t.push("});"),t.join(`
+`)}generateOptionsAPI(s){let{colorMappings:n,strokeWidthMappings:r,metadata:o}=s,e=this.getComponentName(),t=[];return 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: "24" },'),n.forEach(i=>{let p=i.variableName,a=i.originalColor,h=`${p}Class`;t.push(`    ${p}: { type: String, default: '${a}' },`),t.push(`    ${h}: { type: String, default: "" },`);}),r.forEach(i=>{let p=i.variableName,a=i.originalStrokeWidth,h=`${p}Class`;t.push(`    ${p}: { type: [String, Number], default: '${a}' },`),t.push(`    ${h}: { type: String, default: "" },`);}),o.features.includes("fixed-stroke-width")&&t.push("    isFixedStrokeWidth: { type: Boolean, default: true },"),t.push("  },"),t.push("  computed: {"),t.push("    computedWidth() {"),t.push("      return this.width || this.size;"),t.push("    },"),t.push("    computedHeight() {"),t.push("      return this.height || this.size;"),t.push("    },"),t.push("  },"),t.push("};"),t.join(`
+`)}generateStyle(){return ""}generateColorPropsInterface(s){return s.length===0?"":s.map(n=>{let r=n.variableName,o=`${r}Class`;return `  ${r}?: string;
+  ${o}?: string;`}).join(`
+`)}generateStrokeWidthPropsInterface(s){return s.length===0?"":s.map(n=>{let r=n.variableName,o=`${r}Class`;return `  ${r}?: string | number;
+  ${o}?: string;`}).join(`
+`)}parseStyleStringForVue(s){let n=[];return s.split(";").forEach(r=>{let o=r.indexOf(":");if(o>0){let e=r.slice(0,o).trim(),t=r.slice(o+1).trim();if(e&&t)if(t.startsWith("{")&&t.endsWith("}")){let i=t.slice(1,-1);n.push(`'${e}': props.${i}`);}else n.push(`'${e}': '${t}'`);}}),`{ ${n.join(", ")} }`}generateSvgAttributes(s){let n=[],o={...s.root.attributes||{},...s.viewBox&&{viewBox:s.viewBox},...s.namespace&&{xmlns:s.namespace},...s.width&&{width:s.width},...s.height&&{height:s.height}};o.xmlns||(o.xmlns="http://www.w3.org/2000/svg");let e=o.viewBox;return Object.entries(o).forEach(([t,i])=>{if(i!=null){if(e&&(t==="width"||t==="height"))return;if(t==="aria-labelledby"&&typeof i=="string"&&i.includes("{")){let p=i.replace(/\{(\w+)\}/g,"${props.$1}");n.push(` :aria-labelledby="\`${p}\`"`);}else n.push(` ${t}="${i}"`);}}),n.join("")}getDependencies(){return ["vue"]}extractClassVarsFromStyle(s){let n=[];return s.split(";").forEach(r=>{let o=r.indexOf(":");if(o>0){let e=r.slice(0,o).trim(),t=r.slice(o+1).trim();if(e&&t&&t.startsWith("{")&&t.endsWith("}")){let i=t.slice(1,-1);if(e==="fill"||e==="stroke"||e==="stroke-width"){let p=`props.${i}Class`;n.push(p);}}}}),n}};
+exports.VueGenerator=S;

package/dist/index.d.cts

@@ -0,0 +1,91 @@
+import { ComponentGenerator, GeneratorOptions, TransformationResult, ComponentResult } from 'svgfusion-core';
+
+/**
+ * Vue component generator
+ * Generates production-ready Vue 3 components with TypeScript support
+ */
+
+interface VueGeneratorOptions extends GeneratorOptions {
+    composition?: boolean;
+    scriptSetup?: boolean;
+    sfc?: boolean;
+    defineComponent?: boolean;
+    useDefineOptions?: boolean;
+}
+/**
+ * Vue component generator
+ */
+declare class VueGenerator extends ComponentGenerator {
+    private vueOptions;
+    constructor(options?: VueGeneratorOptions);
+    /**
+     * Dynamically load prettier for code formatting
+     */
+    private formatCode;
+    /**
+     * Generate Vue component from transformation result
+     */
+    generate(result: TransformationResult): Promise<ComponentResult>;
+    /**
+     * Generate Single File Component (.vue)
+     */
+    private generateSFC;
+    /**
+     * Generate separate JS/TS component file
+     */
+    private generateJSComponent;
+    /**
+     * Generate Vue template section
+     */
+    private generateTemplate;
+    /**
+     * Convert SVG element to Vue template syntax
+     */
+    private elementToVueTemplate;
+    /**
+     * Generate script section for SFC
+     */
+    private generateScript;
+    /**
+     * Generate <script setup> content
+     */
+    private generateScriptSetup;
+    /**
+     * Generate Composition API script
+     */
+    private generateCompositionAPI;
+    /**
+     * Generate Options API script
+     */
+    private generateOptionsAPI;
+    /**
+     * Generate style section
+     */
+    private generateStyle;
+    /**
+     * Generate TypeScript interface for color props
+     */
+    private generateColorPropsInterface;
+    /**
+     * Generate TypeScript interface for stroke width props
+     */
+    private generateStrokeWidthPropsInterface;
+    /**
+     * Parse style string for Vue template syntax
+     */
+    private parseStyleStringForVue;
+    /**
+     * Generate SVG root attributes for Vue template
+     */
+    private generateSvgAttributes;
+    /**
+     * Get list of dependencies
+     */
+    private getDependencies;
+    /**
+     * Extract class variables from style attribute value
+     */
+    private extractClassVarsFromStyle;
+}
+
+export { VueGenerator, type VueGeneratorOptions };

package/dist/index.d.ts

@@ -0,0 +1,91 @@
+import { ComponentGenerator, GeneratorOptions, TransformationResult, ComponentResult } from 'svgfusion-core';
+
+/**
+ * Vue component generator
+ * Generates production-ready Vue 3 components with TypeScript support
+ */
+
+interface VueGeneratorOptions extends GeneratorOptions {
+    composition?: boolean;
+    scriptSetup?: boolean;
+    sfc?: boolean;
+    defineComponent?: boolean;
+    useDefineOptions?: boolean;
+}
+/**
+ * Vue component generator
+ */
+declare class VueGenerator extends ComponentGenerator {
+    private vueOptions;
+    constructor(options?: VueGeneratorOptions);
+    /**
+     * Dynamically load prettier for code formatting
+     */
+    private formatCode;
+    /**
+     * Generate Vue component from transformation result
+     */
+    generate(result: TransformationResult): Promise<ComponentResult>;
+    /**
+     * Generate Single File Component (.vue)
+     */
+    private generateSFC;
+    /**
+     * Generate separate JS/TS component file
+     */
+    private generateJSComponent;
+    /**
+     * Generate Vue template section
+     */
+    private generateTemplate;
+    /**
+     * Convert SVG element to Vue template syntax
+     */
+    private elementToVueTemplate;
+    /**
+     * Generate script section for SFC
+     */
+    private generateScript;
+    /**
+     * Generate <script setup> content
+     */
+    private generateScriptSetup;
+    /**
+     * Generate Composition API script
+     */
+    private generateCompositionAPI;
+    /**
+     * Generate Options API script
+     */
+    private generateOptionsAPI;
+    /**
+     * Generate style section
+     */
+    private generateStyle;
+    /**
+     * Generate TypeScript interface for color props
+     */
+    private generateColorPropsInterface;
+    /**
+     * Generate TypeScript interface for stroke width props
+     */
+    private generateStrokeWidthPropsInterface;
+    /**
+     * Parse style string for Vue template syntax
+     */
+    private parseStyleStringForVue;
+    /**
+     * Generate SVG root attributes for Vue template
+     */
+    private generateSvgAttributes;
+    /**
+     * Get list of dependencies
+     */
+    private getDependencies;
+    /**
+     * Extract class variables from style attribute value
+     */
+    private extractClassVarsFromStyle;
+}
+
+export { VueGenerator, type VueGeneratorOptions };

package/dist/index.js

@@ -0,0 +1,29 @@
+import {ComponentGenerator}from'svgfusion-core';var v=Object.defineProperty;var b=(d,l,s)=>l in d?v(d,l,{enumerable:true,configurable:true,writable:true,value:s}):d[l]=s;var y=(d,l,s)=>b(d,l+"",s);var S=class extends ComponentGenerator{constructor(s={}){super(s);y(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,n){try{let{format:r}=await import('prettier');return await r(s,{parser:n,semi:!0,singleQuote:!0,trailingComma:"es5",tabWidth:2,printWidth:80,bracketSpacing:!0,arrowParens:"avoid",htmlWhitespaceSensitivity:"ignore",vueIndentScriptAndStyle:!0})}catch(r){return console.warn("Prettier formatting failed or not available, using unformatted code:",r),s}}async generate(s){let n=this.getComponentName(),r;this.vueOptions.sfc?r=this.generateSFC(s):r=this.generateJSComponent(s);let o=this.vueOptions.sfc?"vue":this.vueOptions.typescript?"ts":"js",e=this.generateFilename(n,o),t=this.vueOptions.sfc?"vue":this.vueOptions.typescript?"typescript":"babel";return {code:await this.formatCode(r,t),filename:e,componentName:n,dependencies:this.getDependencies()}}generateSFC(s){let n=this.generateTemplate(s),r=this.generateScript(s),o=this.generateStyle();return `<template>
+${n}
+</template>
+
+<script${this.vueOptions.scriptSetup?" setup":""}${this.vueOptions.typescript?' lang="ts"':""}>
+${this.vueOptions.scriptSetup&&this.vueOptions.useDefineOptions?`defineOptions({ inheritAttrs: false });
+
+`:""}${r}
+</script>
+
+${o?`<style scoped>
+${o}
+</style>`:""}`}generateJSComponent(s){return this.vueOptions.composition?this.generateCompositionAPI(s):this.generateOptionsAPI(s)}generateTemplate(s){let{ast:n}=s,r=this.generateSvgAttributes(n),o=n.root.children.map(e=>this.elementToVueTemplate(e,2)).join(`
+`);return `  <svg${r} v-bind="$attrs" :width="computedWidth" :height="computedHeight">
+    <title v-if="props.title" :id="props.titleId">{{ props.title }}</title>
+    <desc v-if="props.desc" :id="props.descId">{{ props.desc }}</desc>
+${o}
+  </svg>`}elementToVueTemplate(s,n=0){let r="  ".repeat(n),{tag:o,attributes:e,children:t,content:i}=s,p=[],a=[],h="class"in e;if(Object.entries(e).forEach(([u,c])=>{if(u==="vector-effect"&&c==="non-scaling-stroke")p.push(`:vector-effect="props.isFixedStrokeWidth ? 'non-scaling-stroke' : 'none'"`);else if(u==="style"){let g=this.parseStyleStringForVue(c);p.push(`:style="${g}"`);let m=this.extractClassVarsFromStyle(c);a.push(...m);}else if(c.startsWith("{")&&c.endsWith("}")){let g=c.slice(1,-1);if(p.push(`:${u}="props.${g}"`),u==="fill"||u==="stroke"||u==="stroke-width"){let m=`${g}Class`;a.push(`props.${m}`);}}else p.push(`${u}="${c}"`);}),a.length>0){let u=e.class;u?p.push(`:class="[${a.join(", ")}, '${u}']"`):p.push(`:class="[${a.join(", ")}]"`);}else if(h){let u=e.class;u&&p.push(`class="${u}"`);}let $=p.length>0?" "+p.join(" "):"";if(t.length===0&&!i)return `${r}<${o}${$} />`;let f=`${r}<${o}${$}>`;return i&&(f+=i),t.length>0&&(f+=`
+`,f+=t.map(u=>this.elementToVueTemplate(u,n+1)).join(`
+`),f+=`
+`+r),f+=`</${o}>`,f}generateScript(s){return this.vueOptions.scriptSetup?this.generateScriptSetup(s):this.vueOptions.composition?this.generateCompositionAPI(s):this.generateOptionsAPI(s)}generateScriptSetup(s){let{colorMappings:n,strokeWidthMappings:r,metadata:o}=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 t=this.generateColorPropsInterface(n);t&&e.push(t);let i=this.generateStrokeWidthPropsInterface(r);i&&e.push(i),o.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: "24" },');return this.vueOptions.typescript&&e.push('  size: "24",'),n.forEach(t=>{let i=t.variableName,p=t.originalColor,a=`${i}Class`;this.vueOptions.typescript?(e.push(`  ${i}: '${p}',`),e.push(`  ${a}: "",`)):(e.push(`  ${i}: { type: String, default: '${p}' },`),e.push(`  ${a}: { type: String, default: "" },`));}),r.forEach(t=>{let i=t.variableName,p=t.originalStrokeWidth,a=`${i}Class`;this.vueOptions.typescript?(e.push(`  ${i}: '${p}',`),e.push(`  ${a}: "",`)):(e.push(`  ${i}: { type: [String, Number], default: '${p}' },`),e.push(`  ${a}: { type: String, default: "" },`));}),o.features.includes("fixed-stroke-width")&&(this.vueOptions.typescript?e.push("  isFixedStrokeWidth: true,"):e.push("  isFixedStrokeWidth: { type: Boolean, default: true },")),e.push("});"),e.push(""),e.push("const computedWidth = computed(() => props.width || props.size);"),e.push("const computedHeight = computed(() => props.height || props.size);"),e.join(`
+`)}generateCompositionAPI(s){let{colorMappings:n,strokeWidthMappings:r,metadata:o}=s,e=this.getComponentName(),t=[];return 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: "24" },'),n.forEach(i=>{let p=i.variableName,a=i.originalColor,h=`${p}Class`;t.push(`    ${p}: { type: String, default: '${a}' },`),t.push(`    ${h}: { type: String, default: "" },`);}),r.forEach(i=>{let p=i.variableName,a=i.originalStrokeWidth,h=`${p}Class`;t.push(`    ${p}: { type: [String, Number], default: '${a}' },`),t.push(`    ${h}: { type: String, default: "" },`);}),o.features.includes("fixed-stroke-width")&&t.push("    isFixedStrokeWidth: { type: Boolean, default: true },"),t.push("  },"),t.push("  setup(props) {"),t.push("    const computedWidth = computed(() => props.width || props.size);"),t.push("    const computedHeight = computed(() => props.height || props.size);"),t.push("    return { computedWidth, computedHeight };"),t.push("  },"),t.push("});"),t.join(`
+`)}generateOptionsAPI(s){let{colorMappings:n,strokeWidthMappings:r,metadata:o}=s,e=this.getComponentName(),t=[];return 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: "24" },'),n.forEach(i=>{let p=i.variableName,a=i.originalColor,h=`${p}Class`;t.push(`    ${p}: { type: String, default: '${a}' },`),t.push(`    ${h}: { type: String, default: "" },`);}),r.forEach(i=>{let p=i.variableName,a=i.originalStrokeWidth,h=`${p}Class`;t.push(`    ${p}: { type: [String, Number], default: '${a}' },`),t.push(`    ${h}: { type: String, default: "" },`);}),o.features.includes("fixed-stroke-width")&&t.push("    isFixedStrokeWidth: { type: Boolean, default: true },"),t.push("  },"),t.push("  computed: {"),t.push("    computedWidth() {"),t.push("      return this.width || this.size;"),t.push("    },"),t.push("    computedHeight() {"),t.push("      return this.height || this.size;"),t.push("    },"),t.push("  },"),t.push("};"),t.join(`
+`)}generateStyle(){return ""}generateColorPropsInterface(s){return s.length===0?"":s.map(n=>{let r=n.variableName,o=`${r}Class`;return `  ${r}?: string;
+  ${o}?: string;`}).join(`
+`)}generateStrokeWidthPropsInterface(s){return s.length===0?"":s.map(n=>{let r=n.variableName,o=`${r}Class`;return `  ${r}?: string | number;
+  ${o}?: string;`}).join(`
+`)}parseStyleStringForVue(s){let n=[];return s.split(";").forEach(r=>{let o=r.indexOf(":");if(o>0){let e=r.slice(0,o).trim(),t=r.slice(o+1).trim();if(e&&t)if(t.startsWith("{")&&t.endsWith("}")){let i=t.slice(1,-1);n.push(`'${e}': props.${i}`);}else n.push(`'${e}': '${t}'`);}}),`{ ${n.join(", ")} }`}generateSvgAttributes(s){let n=[],o={...s.root.attributes||{},...s.viewBox&&{viewBox:s.viewBox},...s.namespace&&{xmlns:s.namespace},...s.width&&{width:s.width},...s.height&&{height:s.height}};o.xmlns||(o.xmlns="http://www.w3.org/2000/svg");let e=o.viewBox;return Object.entries(o).forEach(([t,i])=>{if(i!=null){if(e&&(t==="width"||t==="height"))return;if(t==="aria-labelledby"&&typeof i=="string"&&i.includes("{")){let p=i.replace(/\{(\w+)\}/g,"${props.$1}");n.push(` :aria-labelledby="\`${p}\`"`);}else n.push(` ${t}="${i}"`);}}),n.join("")}getDependencies(){return ["vue"]}extractClassVarsFromStyle(s){let n=[];return s.split(";").forEach(r=>{let o=r.indexOf(":");if(o>0){let e=r.slice(0,o).trim(),t=r.slice(o+1).trim();if(e&&t&&t.startsWith("{")&&t.endsWith("}")){let i=t.slice(1,-1);if(e==="fill"||e==="stroke"||e==="stroke-width"){let p=`props.${i}Class`;n.push(p);}}}}),n}};
+export{S as VueGenerator};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "svgfusion-vue",
+  "version": "1.0.0",
+  "description": "Vue component generator for SVGFusion",
+  "license": "MIT",
+  "author": "lolvoid",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch",
+    "lint": "eslint src/**/*.ts",
+    "lint:fix": "eslint src/**/*.ts --fix",
+    "format": "prettier --write src/**/*.ts",
+    "format:check": "prettier --check src/**/*.ts",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "release": "semantic-release"
+  },
+  "dependencies": {
+    "svgfusion-core": "workspace:^",
+    "svgfusion-utils": "workspace:^"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.31.0",
+    "@jest/globals": "^30.0.4",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^20.0.0",
+    "eslint": "^9.31.0",
+    "jest": "^30.0.4",
+    "semantic-release": "^24.2.5",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^11.0.3",
+    "@semantic-release/npm": "^12.0.2",
+    "semantic-release-monorepo": "^8.0.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "8.37.0"
+  },
+  "peerDependencies": {
+    "prettier": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "prettier": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}