Open showonne opened 8 months ago
download the IcoonPark Vue3.x component found the component is use vue-class-component like follow:
vue-class-component
<template> <svg xmlns="http://www.w3.org/2000/svg" :width="_width" :height="_height" :spin="spin" :rtl="rtl" viewBox="0 0 48 48" preserveAspectRatio="xMidYMid meet" fill="none" role="presentation" ref="host" > <g><path d="M22 42a2 2 0 1 0 4 0V26h16a2 2 0 1 0 0-4H26V6a2 2 0 1 0-4 0v16H6a2 2 0 1 0 0 4h16v16Z" clip-rule="evenodd" fill-rule="evenodd" data-follow-fill="currentColor" :fill="_fill"/></g> </svg> </template> <script lang="ts"> import { Vue, prop } from 'vue-class-component'; class Props { width = prop<number | string>({ type: [Number, String], required: false }) height = prop<number | string>({ type: [Number, String], required: false }) stroke = prop<string>({ type: String, required: false }) fill = prop<string>({ type: String, required: false }) color = prop<string>({ type: String, required: false }) spin = prop<boolean>({ type: Boolean, required: false }) rtl = prop<boolean>({ type: Boolean, required: false }) // optional prop with default size = prop<number | string>({ default: '1em' }) } export default class HdIconAdd extends Vue.with(Props) { get _fill(): string | undefined { return this.fill || this.color } get _stroke(): string | undefined { return this.stroke || this.color } get _width(): string | number { return this.width || this.size } get _height(): string | number { return this.height || this.size } mounted():void { if (!this._fill) { (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => { item.setAttribute('fill', item.getAttribute('data-follow-fill') || '') }) } if (!this._stroke) { (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => { item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '') }) } } updated():void { if (!this._fill) { (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => { item.setAttribute('fill', item.getAttribute('data-follow-fill') || '') }) } if (!this._stroke) { (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => { item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '') }) } } } </script> <style scoped> svg[spin="true"] {animation: iconpark-spin 1s infinite linear;} svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;} svg[rtl="true"] { transform: scaleX(-1); } @keyframes iconpark-spin { 0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);} } @keyframes iconpark-spin-rtl { 0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);} } </style>
when I try migrate to Vue3 composition API component,the tools output:
{ message: 'Migrating directory: /path/to/icons, 0 Files needs migration', level: 'info' }
Seems only support use @Component decorator component: https://github.com/getyourguide/vue-class-migrator/blob/main/src/migrator/migrator.ts#L88
@Component
But the @Component decorator defines the component being class-style.
download the IcoonPark Vue3.x component found the component is use
vue-class-component
like follow:when I try migrate to Vue3 composition API component,the tools output:
Seems only support use
@Component
decorator component: https://github.com/getyourguide/vue-class-migrator/blob/main/src/migrator/migrator.ts#L88