MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 14:23:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

sidebar virtual dom and textfield row sizing

Browse Source
This commit is contained in:
pa
2026-01-19 14:02:48 +09:00
committed by Natsumi
parent 1e25255ac5
commit 2d3cd9a3b3
5 changed files with 529 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ui/input-group/InputGroupTextareaField.vue
View File

@@ -81,6 +81,7 @@
delete rest.onChange;
return {
...rest,
...(autosizeConfig.value ? { 'data-autosize': 'true' } : {}),
maxlength: maxLength.value
};
});

11
src/components/ui/textarea/Textarea.vue
View File

@@ -1,4 +1,5 @@
<script setup>
import { computed, useAttrs } from 'vue';
import { cn } from '@/lib/utils';
import { useVModel } from '@vueuse/core';
@@ -9,11 +10,18 @@
});
const emits = defineEmits(['update:modelValue']);
const attrs = useAttrs();
const modelValue = useVModel(props, 'modelValue', emits, {
passive: true,
defaultValue: props.defaultValue
});
const autosizeClass = computed(() => {
const raw = attrs['data-autosize'];
const isAutosize = raw === '' || raw === true || raw === 'true';
return isAutosize ? 'field-sizing-content' : '[field-sizing:fixed]';
});
</script>
<template>
@@ -22,7 +30,8 @@
data-slot="textarea"
:class="
cn(
'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
autosizeClass,
props.class
)
" />