Add FormLayout demos

src/AppMenu.vue

@@ -3,7 +3,7 @@
         <div class="layout-menu">
             <span>
                 <img alt="input" class="layout-menu-icon-inactive" src="./assets/images/menu/input.svg" />
-                <span>Input</span>
+                <span>Form</span>
             </span>
             <div>
                 <router-link to="/autocomplete">AutoComplete</router-link>
@@ -18,6 +18,7 @@
                 <router-link to="/inputnumber">InputNumber</router-link>
                 <router-link to="/inputswitch">InputSwitch</router-link>
                 <router-link to="/inputtext">InputText</router-link>
+                <router-link to="/formlayout">FormLayout</router-link>
                 <router-link to="/listbox">Listbox</router-link>
                 <router-link to="/multiselect">MultiSelect</router-link>
                 <router-link to="/password">Password</router-link>

src/assets/styles/primevue.css

@@ -2,6 +2,7 @@
 @import '../../components/button/Button.css';
 @import '../../components/checkbox/Checkbox.css';
 @import '../../components/colorpicker/ColorPicker.css';
+@import '../../components/formlayout/FormLayout.css';
 @import '../../components/inputtext/InputText.css';
 @import '../../components/password/Password.css';
 @import '../../components/radiobutton/RadioButton.css';

src/components/common/Common.css

@@ -143,3 +143,16 @@ button {
     overflow: hidden;
     transition: max-height 1s ease-in-out;
 }
+
+.p-sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal !important;
+  }

src/components/dropdown/Dropdown.d.ts

@@ -16,6 +16,7 @@ export declare class Dropdown extends Vue {
     dataKey?: string;
     showClear?: boolean;
     tabindex?: string;
+    inputId?: string;
     ariaLabelledBy?: string;
     appendTo?: string;
     $emit(eventName: 'input', value: string): this;

src/components/dropdown/Dropdown.vue

@@ -1,16 +1,16 @@
 <template>
     <div ref="container" :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="focusInput" type="text" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
+            <input ref="focusInput" type="text" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
                 aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
         </div>
         <input v-if="editable" type="text" class="p-dropdown-label p-inputtext" :disabled="disabled" @focus="onFocus" @blur="onBlur" :placeholder="placeholder" :value="editableInputValue" @input="onEditableInput"
             aria-haspopup="listbox" :aria-expanded="overlayVisible">
-        <label v-if="!editable" :class="labelClass">
+        <span v-if="!editable" :class="labelClass">
             <slot name="value" :value="value" :placeholder="placeholder">
                 {{label}}
             </slot>
-        </label>
+        </span>
         <i v-if="showClear && value != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick($event)"></i>
         <div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
             <span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
@@ -61,6 +61,7 @@ export default {
 		disabled: Boolean,
         dataKey: null,
         showClear: Boolean,
+        inputId: String,
         tabindex: String,
         ariaLabelledBy: null,
         appendTo: {

src/components/formlayout/FormLayout.css

@@ -0,0 +1,83 @@
+.p-field {
+    margin-bottom: 1em;
+}
+
+.p-field label {
+    display: inline-block;
+    margin-bottom: .5em;
+}
+
+.p-field.p-grid label {
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+}
+
+.p-field.p-grid,
+.p-formgrid.p-grid {
+    margin-top: 0;
+}
+
+.p-field.p-grid .p-col-fixed,
+.p-formgrid.p-grid .p-col-fixed,
+.p-field.p-grid .p-col,
+.p-formgrid.p-grid .p-col,
+.p-formgroup .p-grid .p-col-1, 
+.p-formgrid.p-grid .p-col-1, 
+.p-field.p-grid .p-col-2,
+.p-formgrid.p-grid .p-col-2, 
+.p-field.p-grid .p-col-3, 
+.p-formgrid.p-grid .p-col-3, 
+.p-field.p-grid .p-col-4, 
+.p-formgroup.p-grid .p-col-4, 
+.p-field.p-grid .p-col-5, 
+.p-formgrid.p-grid .p-col-5, 
+.p-field.p-grid .p-col-6, 
+.p-formgrid.p-grid .p-col-6,
+.p-formgroup .p-grid .p-col-7, 
+.p-formgrid.p-grid .p-col-7, 
+.p-field.p-grid .p-col-8, 
+.p-formgrid.p-grid .p-col-8, 
+.p-formgroup .p-grid .p-col-9, 
+.p-formgrid.p-grid .p-col-9, 
+.p-field.p-grid .p-col-10, 
+.p-formgrid.p-grid .p-col-10, 
+.p-field.p-grid .p-col-11, 
+.p-formgroup.p-grid .p-col-11, 
+.p-field.p-grid .p-col-12,
+.p-formgrid.p-grid .p-col-12 {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.p-formgroup-inline {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.p-formgroup-inline .p-field,
+.p-formgroup-inline .p-field-checkbox,
+.p-formgroup-inline .p-field-radiobutton {
+    margin-right: 1em;
+    margin-bottom: 0;
+}
+
+.p-formgroup-inline .p-field label,
+.p-formgroup-inline .p-field-checkbox label,
+.p-formgroup-inline .p-field-radiobutton label {
+    margin-right: .5em;
+    margin-bottom: 0;
+}
+
+.p-field-checkbox,
+.p-field-radiobutton {
+    margin-bottom: 1em;
+    display: flex;
+    align-items: center;
+}
+
+.p-field-checkbox label,
+.p-field-radiobutton label {
+    margin-left: .5em;
+    line-height: 1;
+}

src/components/multiselect/MultiSelect.d.ts

@@ -11,6 +11,7 @@ export declare class MultiSelect extends Vue {
     disabled?: boolean;
     filter?: boolean;
     tabindex?: string;
+    inputId?: string;
     dataKey?: string;
     filterPlaceholder?: string;
     filterLocale?: string;

src/components/multiselect/MultiSelect.vue

@@ -1,7 +1,7 @@
 <template>
     <div ref="container" :class="containerClass" @click="onClick">
         <div class="p-hidden-accessible">
-            <input ref="focusInput" type="text" role="listbox" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
+            <input ref="focusInput" type="text" role="listbox" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
                 aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
         </div>
         <div class="p-multiselect-label-container">
@@ -72,6 +72,7 @@ export default {
 		disabled: Boolean,
 		filter: Boolean,
         tabindex: String,
+        inputId: String,
         dataKey: null,
         filterPlaceholder: String,
         filterLocale: String,

src/router.js

@@ -286,6 +286,11 @@ export default new Router({
 			name: 'flexgrid',
 			component: () => import('./views/flexgrid/FlexGridDemo.vue')
         },
+        {
+			path: '/formlayout',
+			name: 'formlayout',
+			component: () => import('./views/formlayout/FormLayoutDemo.vue')
+		},
 		{
 			path: '/fullcalendar',
 			name: 'fullcalendar',

src/views/dropdown/DropdownDoc.vue

@@ -166,6 +166,12 @@ data() {
                                 <td>null</td>
                                 <td>Index of the element in tabbing order.</td>
                             </tr>
+                            <tr>
+                                <td>inputId</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Identifier of the underlying input element.</td>
+                            </tr>
                             <tr>
                                 <td>ariaLabelledBy</td>
                                 <td>string</td>

src/views/formlayout/FormLayoutDemo.vue

@@ -0,0 +1,204 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Form Layout</h1>
+                <p>Form layout is a CSS utility optimized for creating forms.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">            
+            <h3>Vertical</h3>
+            <div class="p-fluid">
+                <div class="p-field">
+                    <label for="firstname1">Firstname</label> 
+                    <InputText id="firstname1" type="text" />
+                </div>
+                <div class="p-field">
+                    <label for="lastname1">Lastname</label> 
+                    <InputText id="lastname1" type="text" />
+                </div>
+            </div>
+
+            <h3>Vertical and Grid</h3>
+            <div class="p-fluid p-formgrid p-grid">
+                 <div class="p-field p-col">
+                    <label for="firstname2">Firstname</label> 
+                    <InputText id="firstname2" type="text" />
+                </div>
+                <div class="p-field p-col">
+                    <label for="lastname2">Lastname</label> 
+                    <InputText id="lastname2" type="text" />
+                </div>
+            </div>
+
+            <h3>Horizontal and Fixed Width</h3>
+             <div class="p-field p-grid">
+                <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label> 
+                <div class="p-col">
+                    <InputText id="firstname3" type="text" />
+                </div>
+            </div>
+            <div class="p-field p-grid">
+                <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label> 
+                <div class="p-col">
+                    <InputText id="lastname3" type="text" />
+                </div>
+            </div>
+            
+            <h3>Horizontal and Fluid</h3>
+            <div class="p-fluid">
+                 <div class="p-field p-grid">
+                    <label for="firstname4" class="p-col-12 p-md-2">Firstname</label> 
+                    <div class="p-col-12 p-md-10">
+                        <InputText id="firstname4" type="text" />
+                    </div>
+                </div>
+                <div class="p-field p-grid">
+                    <label for="lastname4" class="p-col-12 p-md-2">Lastname</label> 
+                    <div class="p-col-12 p-md-10">
+                        <InputText id="lastname4" type="text" />
+                    </div>
+                </div>
+            </div>
+
+            <h3>Inline</h3>
+            <div class="p-formgroup-inline">
+                 <div class="p-field">
+                    <label for="firstname5" class="p-sr-only">Firstname</label> 
+                    <InputText id="firstname5" type="text" placeholder="Firstname" />
+                </div>
+                <div class="p-field">
+                    <label for="lastname5" class="p-sr-only">Lastname</label> 
+                    <InputText id="lastname5" type="text" placeholder="Lastname" />
+                </div>
+                <Button type="button" label="Submit" />
+            </div>
+
+            <h3>Vertical Checkbox</h3>
+            <div class="p-field-checkbox">
+                <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
+                <label for="city1">Chicago</label>
+            </div>
+            <div class="p-field-checkbox">
+                <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
+                <label for="city2">Los Angeles</label>
+            </div>
+
+            <h3>Horizontal Checkbox</h3>
+            <div class="p-formgroup-inline">
+                <div class="p-field-checkbox">
+                    <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
+                    <label for="city3">Chicago</label>
+                </div>
+                <div class="p-field-checkbox">
+                    <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
+                    <label for="city4">Los Angeles</label>
+                </div>
+            </div>
+
+            <h3>Vertical RadioButton</h3>
+            <div class="p-field-radiobutton">
+                <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
+                <label for="city5">Chicago</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
+                <label for="city6">Los Angeles</label>
+            </div>
+
+            <h3>Horizontal RadioButton</h3>
+            <div class="p-formgroup-inline">
+                <div class="p-field-checkbox">
+                    <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
+                    <label for="city7">Chicago</label>
+                </div>
+                <div class="p-field-checkbox">
+                    <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
+                    <label for="city8">Los Angeles</label>
+                </div>
+            </div>
+
+            <h3>Help Text</h3>
+            <div class="p-field p-fluid">
+                <label for="username">Username</label> 
+                <InputText id="username" type="username" />
+                <small>Enter your username to reset your password.</small>
+            </div>
+
+            <h3>Advanced</h3>
+            <div class="p-fluid p-formgrid p-grid">
+                <div class="p-field p-col-12 p-md-6">
+                    <label for="firstname6">Firstname</label> 
+                    <InputText id="firstname6" type="text" />
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <label for="lastname6">Lastname</label> 
+                    <InputText id="lastname6" type="text" />
+                </div>
+                <div class="p-field p-col-12">
+                    <label for="address">Address</label> 
+                    <Textarea id="address" type="text" rows="4" />
+                </div>
+                <div class="p-field p-col-12 p-md-6">
+                    <label for="city">City</label> 
+                    <InputText id="city" type="text" />
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="state">State</label> 
+                    <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
+                </div>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="zip">Zip</label> 
+                    <InputText id="zip" type="text" />
+                </div>
+            </div>
+        </div>
+
+        <FormLayoutDoc />
+    </div>
+</template>
+
+<script>
+import FormLayoutDoc from './FormLayoutDoc';
+
+export default {
+    data() {
+        return {
+            selectedState: null,
+            states: [
+                {name: 'Arizona', code: 'Arizona'},
+                {name: 'California', value: 'California'},
+                {name: 'Florida', code: 'Florida'},
+                {name: 'Ohio', code: 'Ohio'},
+                {name: 'Washington', code: 'Washington'}
+            ],
+            cities1: [],
+            cities2: [],
+            city1: null,
+            city2: null
+        }
+    },
+	components: {
+		'FormLayoutDoc': FormLayoutDoc
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (max-width: 489px) {
+    .p-formgroup-inline {
+        .p-field {
+            margin-bottom: 1em !important;
+        }
+    }
+}
+
+.layout-content .content-section.implementation > h3 {
+    font-weight: 600;
+}
+
+textarea {
+    resize: none;
+}
+</style>

src/views/formlayout/FormLayoutDoc.vue

@@ -0,0 +1,99 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import InputText from 'primevue/inputtext';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>A model can be bound using the standard v-model directive.</p>
+<CodeHighlight>
+&lt;InputText type="text" v-model="value" /&gt;
+</CodeHighlight>
+
+				<h3>Float Label</h3>
+				<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
+<CodeHighlight>
+&lt;span class="p-float-label"&gt;
+	&lt;InputText id="username" type="text" v-model="value" /&gt;
+	&lt;label for="username"&gt;Username&lt;/label&gt;
+&lt;/span&gt;
+</CodeHighlight>
+
+				<h3>Properties</h3>
+				<p>InputText passes any valid attribute to the underlying input element.</p>
+
+                <h3>Events</h3>
+                <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Element</th>
+						</tr>
+						</thead>
+						<tbody>
+						<tr>
+							<td>p-inputtext</td>
+							<td>Input element</td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Basic&lt;/h3&gt;
+&lt;InputText type="text" v-model="value1" /&gt;
+&lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
+
+&lt;h3&gt;Floating Label&lt;/h3&gt;
+&lt;span class="p-float-label"&gt;
+    &lt;InputText id="username" type="text" v-model="value2" /&gt;
+    &lt;label for="username"&gt;Username&lt;/label&gt;
+&lt;/span&gt;
+
+&lt;h3&gt;Disabled&lt;/h3&gt;
+&lt;InputText type="text" v-model="value3" disabled /&gt;
+
+&lt;h3&gt;Invalid&lt;/h3&gt;
+&lt;InputText type="text" class="p-error" /&gt;
+
+&lt;h3&gt;Sizes&lt;/h3&gt;
+&lt;div class="component-sizes"&gt;
+    &lt;InputText type="text" class="p-component-sm" placeholder="Small" /&gt;
+    &lt;InputText type="text" placeholder="Normal" /&gt;
+    &lt;InputText type="text" class="p-component-lg" placeholder="Large" /&gt;
+&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+	data() {
+		return {
+			value1: '',
+			value2: '',
+			value3: 'PrimeVue'
+		}
+	}
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>

src/views/multiselect/MultiSelectDoc.vue

@@ -136,6 +136,12 @@ data() {
                                 <td>null</td>
                                 <td>Index of the element in tabbing order.</td>
                             </tr>
+                            <tr>
+                                <td>inputId</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Identifier of the underlying input element.</td>
+                            </tr>
                             <tr>
                                 <td>dataKey</td>
                                 <td>string</td>