Add initial Code

resources/js/components/ui/growing-textarea/GrowingTextarea.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref, HTMLAttributes, emit, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  placeholder?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const textElement = ref<HTMLDivElement | null>(null)
+const placeholderVisible = ref(true)
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+
+function validate(event: Event) {
+  (event.target as HTMLInputElement).blur()
+
+  modelValue.value = textElement.value?.innerText.trim()
+}
+
+const updatePlaceholder = () => {
+  placeholderVisible.value = !textElement.value?.innerText.trim()
+}
+
+
+
+
+defineExpose({ titleElement: textElement })
+</script>
+
+<template>
+  <div class="relative">
+    <div ref="textElement" contenteditable spellcheck="false" @blur="validate" @update="updatePlaceholder"
+      @keydown="updatePlaceholder" :class="cn(
+        'whitespace-pre-line inline-block w-full',
+        'dark:bg-input/30 border-input w-full min-w-0 rounded-md border bg-input px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class,
+      )">
+      {{ modelValue }}
+    </div>
+    <span v-if="placeholderVisible" class="pointer-events-none absolute left-1 text-muted-foreground/30">
+      {{ placeholder }}
+    </span>
+  </div>
+</template>

resources/js/components/ui/growing-textarea/index.ts

@@ -0,0 +1 @@
+export { default as GrowingTextarea } from "./GrowingTextarea.vue"