Textarea updates (#387)

* textarea updates with placeholder, font, and trim

* added wrapper div

* test fix

* font in css var

* Rename readonly to disabled, remove unused div

* Remove unused prop

* Fix code smell

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

src/interfaces/textarea/index.ts

@@ -7,12 +7,6 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'box',
 	component: InterfaceTextarea,
 	options: [
-		{
-			field: 'monospace',
-			name: 'Monospace',
-			width: 'half',
-			interface: 'switch',
-		},
 		{
 			field: 'placeholder',
 			name: 'Placeholder',
@@ -20,15 +14,23 @@ export default defineInterface(({ i18n }) => ({
 			interface: 'text-input',
 		},
 		{
-			field: 'rows',
-			name: 'Rows',
+			field: 'trim',
+			name: 'Trim',
 			width: 'half',
-			interface: 'numeric',
+			interface: 'switch',
+		},
+		{
+			field: 'font',
+			name: 'Font',
+			width: 'half',
+			interface: 'dropdown',
 			options: {
-				min: 5,
-				max: 100,
+				items: [
+					{ itemText: 'Sans', itemValue: 'sans-serif' },
+					{ itemText: 'Mono', itemValue: 'monospace' },
+					{ itemText: 'Serif', itemValue: 'serif' },
+				],
 			},
-			default: 8,
 		},
 	],
 }));

src/interfaces/textarea/readme.md

@@ -1 +1,10 @@
 # Textarea
+
+## Options
+
+| Option        | Description                                                         | Default      |
+| ------------- | ------------------------------------------------------------------- | ------------ |
+| `placeholder` | Text to show when no input is entered                               | `null`       |
+| `trim`        | Trim leading and trailing whitespace                                | `true`       |
+| `font`        | Font to render the value in (`sans-serif`, `serif`, or `monospace`) | `sans-serif` |
+| `readonly`    | Readonly                                                            | `false`      |

src/interfaces/textarea/textarea.story.ts

@@ -1,10 +1,11 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import { withKnobs, boolean, text, optionsKnob } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import Vue from 'vue';
 import InterfaceTextarea from './textarea.vue';
 import markdown from './readme.md';
 import withPadding from '../../../.storybook/decorators/with-padding';
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
+import RawValue from '../../../.storybook/raw-value.vue';
 
 Vue.component('interface-textarea', InterfaceTextarea);
 
@@ -18,22 +19,40 @@ export default {
 
 export const basic = () =>
 	defineComponent({
+		components: { RawValue },
 		props: {
-			monospace: {
-				default: boolean('Monospace', false, 'Options'),
+			disabled: {
+				default: boolean('Disabled', false, 'Options'),
 			},
 			placeholder: {
 				default: text('Placeholder', 'Enter a value...', 'Options'),
 			},
+			trim: {
+				default: boolean('Trim', false, 'Options'),
+			},
+			font: {
+				default: optionsKnob(
+					'Font',
+					{ Sans: 'sans-serif', Serif: 'serif', Mono: 'monospace' },
+					'sans',
+					{ display: 'select' },
+					'Options'
+				),
+			},
 		},
 		setup() {
+			const value = ref('');
 			const onInput = action('input');
-			return { onInput };
+			return { onInput, value };
 		},
 		template: `
+		<div>
 			<interface-textarea
-				v-bind="{ monospace, placeholder, rows }"
+				v-model="value"
+				v-bind="{ placeholder, trim, font, disabled }"
 				@input="onInput"
 			/>
+			<raw-value>{{ value }}</raw-value>
+		</div>
 		`,
 	});

src/interfaces/textarea/textarea.test.ts

@@ -13,10 +13,7 @@ describe('Interfaces / Text Input', () => {
 		const component = shallowMount(InterfaceTextarea, {
 			localVue,
 			propsData: {
-				options: {
-					monospace: false,
-					placeholder: 'Enter value...',
-				},
+				placeholder: 'Enter value...',
 			},
 			listeners: {
 				input: () => {},

src/interfaces/textarea/textarea.vue

@@ -1,15 +1,16 @@
 <template>
 	<v-textarea
-		v-model="value"
-		:placeholder="placeholder"
-		:monospace="monospace"
-		:rows="rows"
+		v-bind="{ placeholder, trim }"
+		:value="value"
+		:disabled="disabled"
+		:class="font"
+		@input="$listeners.input"
 		full-width
 	/>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, PropType } from '@vue/composition-api';
 
 export default defineComponent({
 	props: {
@@ -25,10 +26,30 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
-		monospace: {
+		trim: {
 			type: Boolean,
-			default: false,
+			default: true,
+		},
+		font: {
+			type: String as PropType<'sans-serif' | 'serif' | 'monospace'>,
+			default: 'sans-serif',
 		},
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-textarea {
+	&.monospace {
+		--v-input-font-family: var(--family-monospace);
+	}
+
+	&.serif {
+		--v-input-font-family: var(--family-serif);
+	}
+
+	&.sans-serif {
+		--v-input-font-family: var(--family-sans-serif);
+	}
+}
+</style>