adding components

2026-06-01 17:09:26 -06:00
parent 79a8720fb0
commit 0b1ab9261e
12 changed files with 681 additions and 0 deletions
@@ -0,0 +1,49 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  id:          { type: String, default: 'message' },
+  rows:        { type: Number, default: 4 },
+  modelValue:  { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  labelClass:  { type: String, default: '' },
+  error:       { type: Boolean, default: false },
+  success:     { type: Boolean, default: false },
+  isDisabled:  { type: Boolean, default: false },
+})
+
+defineEmits(['update:modelValue'])
+
+const borderClass = computed(() => {
+  if (props.error)   return 'border-danger focus:border-danger focus:ring-1 focus:ring-danger'
+  if (props.success) return 'border-success focus:border-success focus:ring-1 focus:ring-success'
+  return 'border-gray-200 focus:border-primary focus:ring-1 focus:ring-primary'
+})
+</script>
+
+<template>
+  <div>
+    <label
+      v-if="$slots.default"
+      :for="id"
+      :class="['mb-1 block text-xs font-medium text-secondary', labelClass]"
+    >
+      <slot />
+    </label>
+
+    <textarea
+      :id="id"
+      :rows="rows"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="isDisabled"
+      :class="[
+        'w-full resize-none rounded-lg border bg-white px-3 py-2 text-sm text-dark outline-none transition-colors placeholder:text-gray-400',
+        borderClass,
+        isDisabled && 'cursor-not-allowed opacity-60 bg-gray-50',
+      ]"
+      v-bind="$attrs"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </div>
+</template>