refactor: improve setup and maintainability (#1067)

ui/src/components/input/DynamicInput.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import ShortCut from '@/components/ShortCut.vue'
+
+import { ref } from 'vue'
+
+// import { Textarea } from '@/components/ui/textarea'
+// import { Input } from '@/components/ui/input'
+
+const model = defineModel({
+  type: String
+})
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    required: false
+  },
+  type: {
+    type: String,
+    required: false,
+    default: 'input',
+    validator: (value: string) => ['input', 'textarea'].includes(value)
+  }
+})
+
+const active = ref(false)
+const text = ref(model.value)
+const input = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)
+
+const activate = () => {
+  active.value = true
+  text.value = model.value
+  setTimeout(() => {
+    if (input.value) {
+      input.value.focus()
+    }
+    resize()
+  }, 0)
+}
+
+const save = () => {
+  model.value = text.value
+  active.value = false
+}
+
+const resize = () => {
+  if (input.value && props.type === 'textarea') {
+    input.value.style.height = input.value.scrollHeight + 'px'
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full items-center">
+    <div
+      v-if="!active"
+      @click="activate"
+      class="flex w-full cursor-pointer bg-transparent p-1 focus-visible:outline-none"
+    >
+      {{ model || placeholder }}
+    </div>
+    <div
+      v-else
+      class="flex w-full flex-row items-center border bg-transparent focus-visible:outline-none"
+    >
+      <div v-if="type === 'input'" class="flex w-full items-center">
+        <input
+          ref="input"
+          autofocus
+          v-model="text"
+          :placeholder="placeholder"
+          @keydown.enter="save"
+          @blur="save"
+          class="w-full border-none bg-transparent p-1 focus-visible:outline-none"
+        />
+      </div>
+      <div v-else-if="type === 'textarea'" class="w-full">
+        <textarea
+          ref="input"
+          v-model="text"
+          :placeholder="placeholder"
+          @keydown.enter="save"
+          @blur="save"
+          class="w-full border-none bg-transparent p-1 focus-visible:outline-none"
+        />
+      </div>
+      <ShortCut class="mr-2 text-nowrap" keys="Press ↵ to save" />
+    </div>
+  </div>
+</template>