arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Textarea): add resize-none class with autoresize prop

Browse Source
This commit is contained in:
Benjamin Canac
2025-04-01 12:44:50 +02:00
parent 06414d344b
commit ffafd81e1e
5 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/runtime/components/Textarea.vue
View File

@@ -92,6 +92,7 @@ const ui = computed(() => textarea({
size: size?.value,
loading: props.loading,
highlight: highlight.value,
autoresize: props.autoresize,
leading: isLeading.value || !!props.avatar || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing
}))

5
src/theme/textarea.ts
View File

@@ -9,6 +9,11 @@ export default (options: Required<ModuleOptions>) => {
trailing: 'absolute end-0 flex items-start'
},
variants: {
autoresize: {
true: {
base: 'resize-none'
}
},
size: {
xs: {
leading: 'ps-2 inset-y-1',

1
test/components/Textarea.spec.ts
View File

@@ -18,6 +18,7 @@ describe('Textarea', () => {
['with required', { props: { required: true } }],
['with disabled', { props: { disabled: true } }],
['with rows', { props: { rows: 5 } }],
['with autoresize', { props: { autoresize: true } }],
['with icon', { props: { icon: 'i-lucide-search' } }],
['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],

7
test/components/__snapshots__/Textarea-vue.spec.ts.snap
View File

@@ -14,6 +14,13 @@ exports[`Textarea > renders with as correctly 1`] = `
</section>"
`;
exports[`Textarea > renders with autoresize correctly 1`] = `
"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) resize-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"></textarea>
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Textarea > renders with avatar and leadingIcon correctly 1`] = `
"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
<!--v-if-->

7
test/components/__snapshots__/Textarea.spec.ts.snap
View File

@@ -14,6 +14,13 @@ exports[`Textarea > renders with as correctly 1`] = `
</section>"
`;
exports[`Textarea > renders with autoresize correctly 1`] = `
"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) resize-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"></textarea>
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Textarea > renders with avatar and leadingIcon correctly 1`] = `
"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-left shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span>
<!--v-if-->