53 lines
No EOL
2 KiB
Vue
53 lines
No EOL
2 KiB
Vue
<template>
|
|
<svg xmlns="http://www.w3.org/2000/svg" :width="bubbleWidth" height="34" :x="center" y="450" >
|
|
<g id="Group_126" data-name="Group 126" transform="translate(0 0)">
|
|
<rect id="Rectangle_478" data-name="Rectangle 478" :width="bubbleWidth" height="34" rx="10" transform="translate(0 0)" fill="#b9b9b9"/>
|
|
<g id="Group_125" data-name="Group 125">
|
|
|
|
<path v-for="(path, index) in paths"
|
|
:key="index"
|
|
:id="path.id"
|
|
:data-name="path.name"
|
|
:d="path.d"
|
|
:transform="path.transform"
|
|
fill="none"
|
|
stroke="#000"
|
|
stroke-linecap="round"
|
|
stroke-width="1.5"
|
|
/>
|
|
|
|
<!-- <path id="Path_328" data-name="Path 328" d="M0,25v-10" transform="translate(10 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
|
|
<path id="Path_328" data-name="Path 328" d="M0,25v-15" transform="translate(15 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
|
|
<path id="Path_328" data-name="Path 328" d="M0,25v-20" transform="translate(20 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
|
|
|
|
<path id="Path_328" data-name="Path 328" d="M0,25v-15" transform="translate(25 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
|
|
<path id="Path_328" data-name="Path 328" d="M0,25v-10" transform="translate(30 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
|
|
|
|
<path id="Path_328" data-name="Path 328" d="M0,25v-5" transform="translate(120 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
|
|
--> </g>
|
|
</g>
|
|
</svg>
|
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed, ref } from 'vue'
|
|
export default defineComponent ({
|
|
name: 'AudioInput',
|
|
props: {
|
|
bubbleWidth: Number,
|
|
paths: Array
|
|
},
|
|
setup(props){
|
|
|
|
// need audioPath type/interface
|
|
|
|
const center = computed(() => {
|
|
if (props.bubbleWidth) {
|
|
return 175 - props.bubbleWidth / 2;
|
|
}
|
|
})
|
|
return { center }
|
|
}
|
|
})
|
|
</script> |