aboutsummaryrefslogtreecommitdiff
path: root/src/ui/c-input-text
diff options
context:
space:
mode:
authorGravatar Corentin THOMASSET <corentin.thomasset74@gmail.com> 2023-06-25 15:00:50 +0200
committerGravatar GitHub <noreply@github.com> 2023-06-25 13:00:50 +0000
commit05ea54547515f7fb1eed5f31ccbde10e36041fb1 (patch)
tree535e78ce534818e9a66ff3a2335499a53db1fe4c /src/ui/c-input-text
parent5c3bebfe62ab2942f6378356fbb6be40e389c70e (diff)
downloadit-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.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(() => {