feat: add form generator

docs/ElCodeInput/doc.md → docs/ElInputCode/doc.md

@@ -1,4 +1,4 @@
-# ElCodeInput
+# ElInputCode
 Use this component wherever we have a large programmatic text field. It provides some standard formatting and allows us to use the tab character in our inputs.
 
 This component is powered by vue-codemirror.
@@ -13,11 +13,11 @@ This component is powered by vue-codemirror.
 ## Events
 | **name** | **paylod** | **description**           |
 |----------|------------|---------------------------|
-| `input`  | `value`   | when the value is updated |
+| `input`  | `value`    | when the value is updated |
 
 ## Example
 ```html
-<el-code-input
+<el-input-code
 	v-model="value"
 	@input="onInput"/>
 ```

docs/ElCodeInput/index.stories.js → docs/ElInputCode/index.stories.js

@@ -2,35 +2,35 @@ import { action } from '@storybook/addon-actions';
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 import { withNotes } from '@storybook/addon-notes';
 import ElLayout from '../../src/components/ElLayout.vue';
-import ElCodeInput from '../../src/components/ElCodeInput.vue';
+import ElInputCode from '../../src/components/ElInputCode.vue';
 import Doc from './doc.md';
 import jsonString from './jsonString';
 
 export default {
-	title: 'ElCodeInput',
-	component: ElCodeInput,
+	title: 'ElInputCode',
+	component: ElInputCode,
 	decorators: [withNotes, withKnobs],
 	parameters: { notes: { markdown: Doc } }
 };
 
 // Keep standard story in sync with example in the readme!
 export const Standard = () => ({
-	components: { ElCodeInput, ElLayout },
+	components: { ElInputCode, ElLayout },
 	data() {
-		return { value: 'Check out this ElCodeInput component!' };
+		return { value: 'Check out this ElInputCode component!' };
 	},
 	methods: { onInput: action('input') },
 	template: `
-		<el-layout title="ElCodeInput" subtitle="Standard">
-			<el-code-input
+		<el-layout title="ElInputCode" subtitle="Standard">
+			<el-input-code
 				v-model="value"
 				@input="onInput"/>
 		</el-layout>
 	`
 });
 
 export const JSON = () => ({
-	components: { ElCodeInput, ElLayout },
+	components: { ElInputCode, ElLayout },
 	props: {
 		lineNumbers: { default: boolean('options.lineNumbers', true) },
 		mode: { default: text('options.mode', 'JSON') }
@@ -46,8 +46,8 @@ export const JSON = () => ({
 	},
 	methods: { onInput: action('input') },
 	template: `
-		<el-layout title="ElCodeInput" subtitle="JSON">
-			<el-code-input
+		<el-layout title="ElInputCode" subtitle="JSON">
+			<el-input-code
 				v-model="value"
 				:options="options"
 				@input="onInput"/>
@@ -56,17 +56,17 @@ export const JSON = () => ({
 });
 
 export const AutoSize = () => ({
-	components: { ElCodeInput, ElLayout },
+	components: { ElInputCode, ElLayout },
 	props: {
 		autoSize: { default: boolean('autoSize', true) }
 	},
 	data() {
-		return { value: 'Check out this ElCodeInput component!' };
+		return { value: 'Check out this ElInputCode component!' };
 	},
 	methods: { onInput: action('input') },
 	template: `
-		<el-layout title="ElCodeInput" subtitle="Auto Size">
-			<el-code-input
+		<el-layout title="ElInputCode" subtitle="Auto Size">
+			<el-input-code
 				v-model="value"
 				:autoSize="autoSize"
 				@input="onInput"/>

docs/ElInputSelect/doc.md

@@ -0,0 +1,14 @@
+# ElInputSelect
+A typical select element, a wrapper for bootstrap vue's select component.
+
+## Props
+| **name** | **type** | **default**         | **description**    |
+|----------|----------|---------------------|--------------------|
+| `options`| `Array`  | **required**        | options to display |
+
+## Example
+```html
+<el-input-select
+	v-model="selected"
+	:options="options" />
+```

docs/ElInputSelect/index.stories.js

@@ -0,0 +1,36 @@
+import { withKnobs } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import ElLayout from '../../src/components/ElLayout.vue';
+import ElInputSelect from '../../src/components/ElInputSelect.vue';
+import Doc from './doc.md';
+
+export default {
+	title: 'ElInputSelect',
+	component: ElInputSelect,
+	decorators: [withNotes, withKnobs],
+	parameters: { notes: { markdown: Doc } }
+};
+
+export const Standard = () => ({
+	components: { ElInputSelect, ElLayout },
+	data() {
+		return { selected: '' };
+	},
+	props: {
+		options: {
+			default: [
+				{ value: '', text: 'Check out this ElInputSelect component!' },
+				{ value: '1', text: 'Option 1' },
+				{ value: '2', text: 'Option 2' },
+				{ value: '3', text: 'Option 3' }
+			]
+		}
+	},
+	template: `
+		<el-layout title="ElInputSelect" subtitle="Standard">
+			<el-input-select
+				v-model="selected"
+				:options="options"/>
+		</el-layout>
+	`
+});