diff options
author | 2023-06-25 15:00:50 +0200 | |
---|---|---|
committer | 2023-06-25 13:00:50 +0000 | |
commit | 05ea54547515f7fb1eed5f31ccbde10e36041fb1 (patch) | |
tree | 535e78ce534818e9a66ff3a2335499a53db1fe4c /src/ui/c-input-text | |
parent | 5c3bebfe62ab2942f6378356fbb6be40e389c70e (diff) | |
download | it-tools-05ea54547515f7fb1eed5f31ccbde10e36041fb1.tar.gz it-tools-05ea54547515f7fb1eed5f31ccbde10e36041fb1.tar.zst it-tools-05ea54547515f7fb1eed5f31ccbde10e36041fb1.zip |
refactor(ui): replaced some n-input to c-input (#505)
Diffstat (limited to 'src/ui/c-input-text')
-rw-r--r-- | src/ui/c-input-text/c-input-text.demo.vue | 7 | ||||
-rw-r--r-- | src/ui/c-input-text/c-input-text.vue | 10 |
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(() => { |