diff --git a/packages/library/src/components/index.ts b/packages/library/src/components/index.ts
index 772dd91..c449625 100644
--- a/packages/library/src/components/index.ts
+++ b/packages/library/src/components/index.ts
@@ -3,3 +3,4 @@ export { default as NychLoadingIcon } from './NychLoadingIcon.vue'
export { Button, buttonVariants } from './ui/button'
export type { ButtonVariants } from './ui/button'
export { Input } from './ui/input'
+export { Textarea } from './ui/textarea'
diff --git a/packages/library/src/components/ui/textarea/Textarea.vue b/packages/library/src/components/ui/textarea/Textarea.vue
new file mode 100644
index 0000000..5fb85b8
--- /dev/null
+++ b/packages/library/src/components/ui/textarea/Textarea.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
diff --git a/packages/library/src/components/ui/textarea/index.ts b/packages/library/src/components/ui/textarea/index.ts
new file mode 100644
index 0000000..8ce91e9
--- /dev/null
+++ b/packages/library/src/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue"
diff --git a/packages/library/src/lib/index.ts b/packages/library/src/lib/index.ts
index bc2f952..f533da4 100644
--- a/packages/library/src/lib/index.ts
+++ b/packages/library/src/lib/index.ts
@@ -1,6 +1,5 @@
import type { App } from 'vue'
import {
- Textarea as PrimeTextarea,
Checkbox as PrimeCheckbox,
CheckboxGroup as PrimeCheckboxGroup,
RadioButton as PrimeRadioButton,
@@ -13,9 +12,9 @@ import {
Tag as PrimeTag,
} from 'primevue'
import { ThemeLibrary, type Themeable, ThemeEngine, type LibComponent, type Key } from '../engine'
-import { NychLoadingIcon, Button, buttonVariants, Input } from '../components'
+import { NychLoadingIcon, Button, buttonVariants, Input, Textarea } from '../components'
-export { Button, buttonVariants, Input }
+export { Button, buttonVariants, Input, Textarea }
/**
* Build a Themeable that themes a PrimeVue component through its passthrough (`pt`) API.
@@ -59,7 +58,6 @@ const loadingIconThemeable: Themeable = {
const nychthemeron: ThemeLibrary = {
components: {
LoadingIcon: loadingIconThemeable,
- Textarea: ptThemeable(PrimeTextarea, 'textarea'),
Checkbox: ptThemeable(PrimeCheckbox, 'checkbox', ['box', 'input', 'icon']),
CheckboxGroup: ptThemeable(PrimeCheckboxGroup, 'checkbox-group'),
RadioButton: ptThemeable(PrimeRadioButton, 'radio', ['box', 'input', 'icon']),
@@ -109,7 +107,6 @@ const nychthemeron: ThemeLibrary = {
const _engine = new ThemeEngine(nychthemeron)
export const LoadingIcon = _engine.getComponent('LoadingIcon')
-export const Textarea: typeof PrimeTextarea = _engine.getComponent('Textarea')
export const Checkbox: typeof PrimeCheckbox = _engine.getComponent('Checkbox')
export const CheckboxGroup: typeof PrimeCheckboxGroup =
_engine.getComponent('CheckboxGroup')
@@ -129,7 +126,7 @@ export const createNychthemeron = (): {
Button: typeof Button
LoadingIcon: typeof NychLoadingIcon
Input: typeof Input
- Textarea: typeof PrimeTextarea
+ Textarea: typeof Textarea
Checkbox: typeof PrimeCheckbox
CheckboxGroup: typeof PrimeCheckboxGroup
RadioButton: typeof PrimeRadioButton
diff --git a/packages/library/tests/Textarea.spec.ts b/packages/library/tests/Textarea.spec.ts
new file mode 100644
index 0000000..ae98130
--- /dev/null
+++ b/packages/library/tests/Textarea.spec.ts
@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { Textarea } from '../src/lib'
+
+describe('Textarea', () => {
+ it('renders a native textarea element', () => {
+ const wrapper = mount(Textarea)
+ expect(wrapper.element.tagName).toBe('TEXTAREA')
+ })
+
+ it('supports v-model', async () => {
+ const wrapper = mount(Textarea, { props: { modelValue: 'An omen' } })
+ expect((wrapper.element as HTMLTextAreaElement).value).toBe('An omen')
+
+ await wrapper.setValue('A crow')
+ expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['A crow'])
+ })
+})
diff --git a/packages/library/tests/lib.spec.ts b/packages/library/tests/lib.spec.ts
index b361777..5e600e2 100644
--- a/packages/library/tests/lib.spec.ts
+++ b/packages/library/tests/lib.spec.ts
@@ -3,7 +3,6 @@ import type { App } from 'vue'
import {
createNychthemeron,
LoadingIcon,
- Textarea,
Checkbox,
RadioButton,
CheckboxGroup,
@@ -70,7 +69,6 @@ describe('LoadingIcon', () => {
describe('themed pt components', () => {
const cases = [
- { name: 'Textarea', component: Textarea, base: 'nych-textarea' },
{ name: 'Checkbox', component: Checkbox, base: 'nych-checkbox' },
{ name: 'CheckboxGroup', component: CheckboxGroup, base: 'nych-checkbox-group' },
{ name: 'RadioButton', component: RadioButton, base: 'nych-radio' },
diff --git a/packages/playground/stories/Textarea.stories.ts b/packages/playground/stories/Textarea.stories.ts
index ac6b27a..cca130e 100644
--- a/packages/playground/stories/Textarea.stories.ts
+++ b/packages/playground/stories/Textarea.stories.ts
@@ -10,24 +10,6 @@ const meta = {
layout: 'centered',
},
tags: ['autodocs'],
- argTypes: {
- placeholder: {
- control: { type: 'text' },
- description: 'Placeholder text',
- },
- rows: {
- control: { type: 'number' },
- description: 'Visible rows',
- },
- disabled: {
- control: { type: 'boolean' },
- description: 'Disable the textarea',
- },
- invalid: {
- control: { type: 'boolean' },
- description: 'Mark the textarea as invalid',
- },
- },
} satisfies Meta
export default meta
@@ -57,17 +39,6 @@ export const Filled: Story = {
}),
}
-export const Invalid: Story = {
- render: () => ({
- components: { NychTextarea },
- setup() {
- const value = ref('')
- return { value }
- },
- template: ``,
- }),
-}
-
export const Disabled: Story = {
render: () => ({
components: { NychTextarea },