Add InputVue component

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

1 files changed, 53 insertions, 0 deletions

diff --git a/src/components/InputVue.vue b/src/components/InputVue.vue
new file mode 100644
index 000000000..6cb09c63b
--- /dev/null
+++ b/src/components/InputVue.vue
@@ -0,0 +1,53 @@
+<!--
+   - @copyright Copyright (c) 2022, Marco Ambrosini <marcoambrosini@pm.me>
+   -
+   - @author Marco Ambrosini <marcoambrosini@pm.me>
+   -
+   - @license GNU AGPL version 3 or any later version
+   -
+   - This program is free software: you can redistribute it and/or modify
+   - it under the terms of the GNU Affero General Public License as
+   - published by the Free Software Foundation, either version 3 of the
+   - License, or (at your option) any later version.
+   -
+   - This program is distributed in the hope that it will be useful,
+   - but WITHOUT ANY WARRANTY; without even the implied warranty of
+   - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+   - GNU Affero General Public License for more details.
+   -
+   - You should have received a copy of the GNU Affero General Public License
+   - along with this program. If not, see <http://www.gnu.org/licenses/>.
+   -
+   -->
+
+<template>
+	<input class="input-vue"
+		type="text"
+		:value="value"
+		@input="handleInput">
+</template>
+
+<script>
+export default {
+	name: 'InputVue',
+	props: {
+		value: {
+			type: String,
+			required: true,
+		},
+	},
+	methods: {
+		handleInput(event) {
+			this.$emit('update:value', event.target.value)
+		},
+	},
+}
+</script>
+
+ <style lang="scss" scoped>
+.input-vue {
+	width: 100%;
+	border-radius: var(--border-radius-large);
+	padding-left: 16px;
+ }
+ </style>