Login test

components/FloatInputTextField.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const id = useId();
+const props = defineProps({
+  value: {
+    type: String,
+    default: undefined,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  }
+});
+
+// use `toRef` to create reactive references to `name` prop which is passed to `useField`
+// this is important because vee-validte needs to know if the field name changes
+// https://vee-validate.logaretm.com/v4/guide/composition-api/caveats
+const name = toRef(props, 'name');
+
+// we don't provide any rules here because we are using form-level validation
+// https://vee-validate.logaretm.com/v4/guide/validation#form-level-validation
+const {
+  value: inputValue,
+  errorMessage,
+  handleBlur,
+  handleChange,
+} = useField(name, undefined, {
+  initialValue: props.value,
+});
+
+const invalid = computed(() => errorMessage.value ? true : undefined);
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-2">
+    <FloatLabel variant="on">
+      <InputText
+        :id="id" v-model="inputValue" class="w-full" :invalid="invalid" @blur="handleBlur" @input="handleChange"
+      />
+      <label :for="id">
+        {{ label }}
+      </label>
+    </FloatLabel>
+    <Message v-if="errorMessage" class="text-wrap">{{ errorMessage }}</Message>
+  </div>
+</template>
+
+<style scoped>
+
+</style>