feat(components): add textarea input (#111)

Author: joshuagraber

src/components/FormV2/__snapshots__/formv2.spec.ts.snap

@@ -30,6 +30,11 @@ exports[`PdapFormV2 > calls submit event with form values on valid submission 1`
     <input checked id="ice-cream" name="ice-cream" type="checkbox" value="true">
     <label for="ice-cream">Ice Cream</label>
   </div>
+  <div class="pdap-input">
+    <label for="notes">Notes?</label>
+    <!--v-if-->
+    <textarea id="notes" name="notes" placeholder="Notes" type="text"></textarea>
+  </div>
 </form>
 `;
 
@@ -63,6 +68,11 @@ exports[`PdapFormV2 > renders default error message when form has errors 1`] = `
     <input id="ice-cream" name="ice-cream" type="checkbox" value="false">
     <label for="ice-cream">Ice Cream</label>
   </div>
+  <div class="pdap-input pdap-input-error">
+    <label for="notes">Notes?</label>
+    <div class="pdap-input-error-message">Notes are required</div>
+    <textarea id="notes" name="notes" placeholder="Notes" type="text"></textarea>
+  </div>
 </form>
 `;
 
@@ -102,6 +112,11 @@ exports[`PdapFormV2 > renders error message when errorMessage prop is provided 1
     <input id="ice-cream" name="ice-cream" type="checkbox" value="false">
     <label for="ice-cream">Ice Cream</label>
   </div>
+  <div class="pdap-input">
+    <label for="notes">Notes?</label>
+    <!--v-if-->
+    <textarea id="notes" name="notes" placeholder="Notes" type="text"></textarea>
+  </div>
 </form>
 `;
 
@@ -135,5 +150,10 @@ exports[`PdapFormV2 > renders the form element 1`] = `
     <input id="ice-cream" name="ice-cream" type="checkbox" value="false">
     <label for="ice-cream">Ice Cream</label>
   </div>
+  <div class="pdap-input">
+    <label for="notes">Notes?</label>
+    <!--v-if-->
+    <textarea id="notes" name="notes" placeholder="Notes" type="text"></textarea>
+  </div>
 </form>
 `;

src/components/FormV2/formv2.spec.ts

@@ -5,6 +5,7 @@ import PdapFormV2 from './PdapFormV2.vue';
 import InputCheckbox from '../InputCheckbox/PdapInputCheckbox.vue';
 import InputText from '../InputText/PdapInputText.vue';
 import InputPassword from '../InputPassword/PdapInputPassword.vue';
+import InputTextArea from '../InputTextArea/PdapInputTextArea.vue';
 
 vi.mock('vue-router');
 vi.mock('vue', async () => {
@@ -46,6 +47,7 @@ const BASE_CONFIG = {
 			email: '',
 			password: '',
 			'ice-cream': false,
+			notes: '',
 		},
 		schema: [
 			{
@@ -69,6 +71,12 @@ const BASE_CONFIG = {
 					password: { value: true, message: 'Password is too weak' },
 				},
 			},
+			{
+				name: 'notes',
+				validators: {
+					required: { value: true, message: 'Notes are required' },
+				},
+			},
 		],
 		id: 'test',
 		name: 'test',
@@ -101,6 +109,12 @@ const BASE_CONFIG = {
         name="ice-cream"
         label="Ice Cream"
         :defaultChecked="false"
+      />
+			<InputTextArea
+        id="notes"
+        name="notes"
+        label="Notes?"
+        placeholder="Notes"
       />
     `,
 	},
@@ -109,6 +123,7 @@ const BASE_CONFIG = {
 			InputCheckbox,
 			InputText,
 			InputPassword,
+			InputTextArea,
 		},
 	},
 };
@@ -164,6 +179,7 @@ describe('PdapFormV2', () => {
 		await form.find('input[name="email"]').setValue('john@example.com');
 		await form.find('input[name="password"]').setValue('Password123!');
 		await form.find('input[name="ice-cream"]').setChecked();
+		await form.find('textarea[name="notes"]').setValue('This is a note');
 
 		await form.trigger('submit');
 		await wrapper.vm.$forceUpdate();
@@ -175,6 +191,7 @@ describe('PdapFormV2', () => {
 				email: 'john@example.com',
 				password: 'Password123!',
 				'ice-cream': true,
+				notes: 'This is a note',
 			},
 			expect.any(Event)
 		);

src/components/InputTextArea/PdapInputTextArea.vue

@@ -0,0 +1,48 @@
+<template>
+	<div class="pdap-input" :class="{ ['pdap-input-error']: error }">
+		<label v-if="$slots.label" :for="id"><slot name="label" /></label>
+		<label v-else-if="label" :for="id">{{ label }}</label>
+		<div v-if="$slots.error && error" class="pdap-input-error-message">
+			<slot name="error" />
+		</div>
+		<div v-else-if="error" class="pdap-input-error-message">{{ error }}</div>
+
+		<textarea
+			:id="id"
+			:name="name"
+			:placeholder="placeholder"
+			:value="String(value)"
+			v-bind="$attrs"
+			type="text"
+			@input="onInput"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, useSlots } from 'vue';
+import { PdapInputTextAreaProps } from './types';
+import { PdapFormProvideV2 } from '../FormV2/types';
+import { provideKey } from '../FormV2/util';
+
+const { label, name } = withDefaults(defineProps<PdapInputTextAreaProps>(), {
+	placeholder: 'Enter text here',
+});
+const slots = useSlots();
+
+if (!slots.label && !label)
+	throw new Error(
+		'All form inputs must have a label, passed as a slot or a prop'
+	);
+
+const { values, setValues, v$ } = inject<PdapFormProvideV2>(provideKey)!;
+
+const error = computed(() => {
+	return v$.value[name]?.$error ? v$.value[name]?.$errors?.[0]?.$message : '';
+});
+const value = computed(() => values.value[name] ?? '');
+
+function onInput(e: Event) {
+	setValues({ [name]: (e.target as unknown as HTMLInputElement).value });
+}
+</script>

src/components/InputTextArea/index.ts

@@ -0,0 +1 @@
+export { default as InputTextArea } from './PdapInputTextArea.vue';

src/components/InputTextArea/types.ts

@@ -0,0 +1,6 @@
+export interface PdapInputTextAreaProps {
+	id: string;
+	label?: string;
+	name: string;
+	placeholder?: string;
+}

src/demo/pages/FormV2Demo.vue

@@ -52,6 +52,13 @@
 				</template>
 			</InputSelect>
 
+			<PdapInputTextArea
+				:id="INPUT_TEXT_AREA_NAME"
+				:name="INPUT_TEXT_AREA_NAME"
+				label="Any notes to share?"
+				:rows="5"
+			/>
+
 			<Button type="submit">Submit</Button>
 		</FormV2>
 	</main>
@@ -64,12 +71,14 @@ import { InputText } from '../../components/InputText';
 import { InputCheckbox } from '../../components/InputCheckbox';
 import { InputPassword } from '../../components/InputPassword';
 import { InputSelect } from '../../components/InputSelect';
+import PdapInputTextArea from '../../components/InputTextArea/PdapInputTextArea.vue';
 
 const INPUT_CHECKBOX_NAME = 'ice-cream';
 const INPUT_TEXT_PLACEHOLDER = 'Paul';
 const INPUT_TEXT_NAME = 'first-name';
 const INPUT_PASSWORD_NAME = 'password';
 const INPUT_SELECT_NAME = 'flavors';
+const INPUT_TEXT_AREA_NAME = 'notes';
 
 const ICE_CREAM_FLAVORS = [
 	{
@@ -128,6 +137,15 @@ const SCHEMA = [
 			},
 		},
 	},
+	// {
+	// 	name: INPUT_TEXT_AREA_NAME,
+	// 	validators: {
+	// 		required: {
+	// 			message: 'Please add some notes.',
+	// 			value: true,
+	// 		},
+	// 	},
+	// },
 ];
 </script>
 

src/styles/components.css

@@ -41,17 +41,22 @@
 		@apply h-[max-content] gap-1 leading-normal mb-3 w-full flex flex-col;
 	}
 
-	.pdap-input input {
+	.pdap-input input,
+	.pdap-input textarea {
 		@apply dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)];
 	}
 
-	.pdap-input input::placeholder {
+	.pdap-input input::placeholder,
+	.pdap-input textarea::placeholder{
 		@apply text-neutral-600 text-lg;
 	}
 
 	.pdap-input input:focus,
 	.pdap-input input:focus-within,
-	.pdap-input input:focus-visible {
+	.pdap-input input:focus-visible,
+	.pdap-input textarea:focus,
+	.pdap-input textarea:focus-within,
+	.pdap-input textarea:focus-visible {
 		@apply border-2 border-blue-light border-solid outline-none;
 	}
 
@@ -69,7 +74,8 @@
 	}
 
 	.pdap-input-error input,
-	.pdap-input-error div[role="combobox"] {
+	.pdap-input-error div[role="combobox"],
+	.pdap-input-error textarea {
 		@apply border-red-800 dark:border-red-300;
 	}
 
@@ -106,4 +112,8 @@
 		@apply cursor-pointer;
 	}
 
+	/* Text area */
+	.pdap-input textarea {
+	  @apply text-lg;
+	}
 }