- wip dashboard

resources/js/Share/Components/Input.vue

@@ -0,0 +1,47 @@
+<script setup>
+defineProps({
+    modelValue: String,
+    id: String,
+    type: {
+        type: String,
+        default: 'text',
+    },
+    label: String,
+    placeholder: String,
+    error: {
+        type: Object,
+        default: null,
+    },
+    textareaHeight: {
+        type: String,
+        default: null,
+    }
+});
+defineEmits(['update:modelValue']);
+</script>
+
+<template>
+    <div :class="['flex w-full', (type === 'checkbox' ? 'flex-row gap-2 items-center bg-gray-200 px-2 py-2 rounded-md' : 'flex-col gap-1')]">
+        <label :for="id"
+            class="text-gray-500">{{ label }}</label>
+        <textarea v-if="type === 'textarea'"
+            :id="id"
+            :class="['w-full min-w-full max-w-full h-[200px] min-h-[200px] px-2.5 py-2 border-b-2 rounded-md', error ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+            :placeholder="placeholder"></textarea>
+        <input v-else-if="type === 'checkbox'"
+            :id="id"
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+            type="checkbox" />
+        <input v-else
+            :id="id"
+            :class="['w-full px-2.5 py-2 border-b-2 rounded-md', error ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
+            :type="type"
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+            :placeholder="placeholder" />
+        <span class="text-red-400" v-if="error">{{ error }}</span>
+    </div>
+</template>