aboutsummaryrefslogtreecommitdiff
path: root/src/ui/c-input-text
diff options
context:
space:
mode:
Diffstat (limited to 'src/ui/c-input-text')
-rw-r--r--src/ui/c-input-text/c-input-text.demo.vue7
-rw-r--r--src/ui/c-input-text/c-input-text.vue10
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(() => {