add textAudioInput component

This commit is contained in:
Enrique Hernandez 2021-01-31 17:19:35 -06:00
commit 6d20af467e
8 changed files with 22 additions and 16 deletions

View file

@ -0,0 +1,43 @@
<template>
<foreignObject class="inputContainer" :x="textXoffset" y="450" width="55%" height="50%">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="inputBubble" contenteditable v-show="input.length > 0">
<p>{{ input }}</p>
</div>
</div>
</foreignObject>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "TextInput",
props: {
input: String,
textXoffset: String,
},
});
</script>
<style lang="scss" scoped>
div[contenteditable] {
width: auto;
max-width: 180px;
height: auto;
min-height: 36px;
display: table;
justify-items: center;
border: 0;
border-radius: 10px;
color: #000;
background-color: #b9b9b9;
font-size: 14;
text-align: left;
p {
max-width: 150px;
overflow-wrap: break-word;
padding: 7px 10px 5px 10px;
margin: 0;
}
}
</style>