refactor(ui): replaced some n-input to c-input (#505)

2 files changed, 10 insertions, 7 deletions

diff --git a/src/ui/c-input-text/c-input-text.demo.vue b/src/ui/c-input-text/c-input-text.demo.vue
index b027787..0181e7c 100644
--- a/src/ui/c-input-text/c-input-text.demo.vue
+++ b/src/ui/c-input-text/c-input-text.demo.vue
@@ -66,11 +66,14 @@ const validation = useValidation({
     mb-2
   />
 
-  <c-input-text v-model:value="valueLong" multiline autosize mb-2 rows="5" />
-
   <c-input-text
     value="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, est modi iusto repellendus fuga accusantium atque at magnam aliquam eum explicabo vero quia, nobis quasi quis! Earum amet quam a?"
     multiline
     clearable
   />
+
+  <h2>Autosize</h2>
+
+  <c-input-text v-model:value="value" label="Autosize" rows="1" multiline autosize mb-2 />
+  <c-input-text v-model:value="valueLong" label="Autosize monospace" rows="1" multiline autosize monospace mb-2 />
 </template>
diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue
index 0f96b2a..b5f423d 100644
--- a/src/ui/c-input-text/c-input-text.vue
+++ b/src/ui/c-input-text/c-input-text.vue
@@ -82,12 +82,12 @@ const inputRef = ref<HTMLInputElement>();
 const inputWrapperRef = ref<HTMLElement>();
 
 watch(
-  value,
-  () => {
+  [value, autosize, multiline, inputWrapperRef, textareaRef],
+  () => nextTick(() => {
     if (props.multiline && autosize.value) {
       resizeTextarea();
     }
-  },
+  }),
   { immediate: true },
 );
 
@@ -96,9 +96,9 @@ function resizeTextarea() {
     return;
   }
 
-  const { scrollHeight } = textareaRef.value;
+  const scrollHeight = textareaRef.value.scrollHeight + 2;
 
-  inputWrapperRef.value.style.height = `${scrollHeight + 2}px`;
+  inputWrapperRef.value.style.height = `${scrollHeight}px`;
 }
 
 const htmlInputType = computed(() => {