summaryrefslogtreecommitdiff
path: root/pse-dashboard/src/components/FloatingLabelInput.vue
diff options
context:
space:
mode:
authorOrangerot <purple@orangerot.dev>2024-06-19 00:14:49 +0200
committerOrangerot <purple@orangerot.dev>2024-06-27 12:11:14 +0200
commit5b8851b6c268d0e93c158908fbfae9f8473db5ff (patch)
tree7010eb85d86fa2da06ea4ffbcdb01a685d502ae8 /pse-dashboard/src/components/FloatingLabelInput.vue
Initial commitHEADmain
Diffstat (limited to 'pse-dashboard/src/components/FloatingLabelInput.vue')
-rw-r--r--pse-dashboard/src/components/FloatingLabelInput.vue35
1 files changed, 35 insertions, 0 deletions
diff --git a/pse-dashboard/src/components/FloatingLabelInput.vue b/pse-dashboard/src/components/FloatingLabelInput.vue
new file mode 100644
index 0000000..6f718fd
--- /dev/null
+++ b/pse-dashboard/src/components/FloatingLabelInput.vue
@@ -0,0 +1,35 @@
+<script setup>
+defineProps({
+ type: {
+ type: String,
+ default: "text"
+ },
+ label: {
+ type: String,
+ default: "Text"
+ },
+ modelValue: {
+ type: String,
+ default: ""
+ }
+});
+defineEmits(['update:modelValue']);
+
+</script>
+<template>
+ <div class="form-floating form-input">
+ <input
+ :id="$.uid"
+ :type="type"
+ class="form-control"
+ :value="modelValue"
+ :placeholder="label"
+ required
+ @input="$emit('update:modelValue', $event.target.value)"
+ >
+ <label :for="$.uid">{{ label }}</label>
+ </div>
+</template>
+<style scoped>
+</style>
+