@proj-airi/ui 0.4.23

package/src/components/Form/Textarea/Basic.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const events = defineEmits<{
+  (event: 'submit', message: string): void
+}>()
+
+const input = defineModel<string>({
+  default: '',
+})
+
+const textareaRef = ref<HTMLTextAreaElement>()
+const textareaHeight = ref('auto')
+
+function onKeyDown(e: KeyboardEvent) {
+  if (e.code === 'Enter' && !e.shiftKey) { // just block Enter is enough, Shift+Enter by default generates a newline
+    e.preventDefault()
+    events('submit', input.value)
+  }
+}
+
+// javascript - Creating a textarea with auto-resize - Stack Overflow
+// https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
+watch(input, () => {
+  textareaHeight.value = 'auto'
+  requestAnimationFrame(() => {
+    if (!textareaRef.value)
+      return
+
+    textareaHeight.value = `${textareaRef.value.scrollHeight}px`
+  })
+}, { immediate: true })
+</script>
+
+<template>
+  <textarea
+    ref="textareaRef"
+    v-model="input"
+    :style="{ height: textareaHeight }"
+    @keydown="onKeyDown"
+  />
+</template>

package/src/components/Form/Textarea/Textarea.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import BasicTextarea from './Basic.vue'
+
+const modelValue = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <BasicTextarea
+    v-model="modelValue"
+    border="neutral-100 dark:neutral-800 solid 2 focus:neutral-200 dark:focus:neutral-700"
+    transition="all duration-250 ease-in-out"
+    bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
+    rounded-lg px-3 py-2 text-sm outline-none
+  />
+</template>

package/src/components/Form/Textarea/index.ts

@@ -0,0 +1,2 @@
+export { default as BasicTextarea } from './Basic.vue'
+export { default as Textarea } from './Textarea.vue'

package/src/components/Form/index.ts

@@ -0,0 +1,6 @@
+export * from './Checkbox'
+export * from './Field'
+export * from './Input'
+export * from './Radio'
+export * from './Range'
+export * from './Textarea'

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components/Animations'
+export * from './components/Form'

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "types": [
+      "vite/client"
+    ],
+    "allowJs": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/define-models",
+      "@vue-macros/volar/define-slots"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.mts",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}

package/uno.config.ts

@@ -0,0 +1,8 @@
+import { mergeConfigs } from 'unocss'
+
+import { histoireUnoConfig, sharedUnoConfig } from '../../uno.config'
+
+export default mergeConfigs([
+  sharedUnoConfig(),
+  histoireUnoConfig(),
+])