vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add FormLayout demos

pull/310/head
cagataycivici 2020-05-07 00:16:05 +03:00
parent 9889bf2f6f
commit 75411ef6e2
14 changed files with 431 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/AppMenu.vue
View File

@ -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>

1
src/assets/styles/primevue.css
View File

@ -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';

15
src/components/common/Common.css
View File

@ -142,4 +142,17 @@ button {
.p-toggleable-content-enter-active {
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;
}

1
src/components/dropdown/Dropdown.d.ts vendored
View File

@ -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;

9
src/components/dropdown/Dropdown.vue
View File

@ -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>
@ -60,7 +60,8 @@ export default {
placeholder: String,
disabled: Boolean,
dataKey: null,
showClear: Boolean,
showClear: Boolean,
inputId: String,
tabindex: String,
ariaLabelledBy: null,
appendTo: {

83
src/components/formlayout/FormLayout.css Normal file
View File

@ -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;
}

1
src/components/multiselect/MultiSelect.d.ts vendored
View File

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

5
src/components/multiselect/MultiSelect.vue
View File

@ -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">
@ -71,7 +71,8 @@ export default {
placeholder: String,
disabled: Boolean,
filter: Boolean,
tabindex: String,
tabindex: String,
inputId: String,
dataKey: null,
filterPlaceholder: String,
filterLocale: String,

5
src/router.js
View File

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

2
src/views/checkbox/CheckboxDemo.vue
View File

@ -11,7 +11,7 @@
<h3 class="first">Basic</h3>
<div class="p-grid">
<div class="p-col-12">
<Checkbox id="binary" v-model="checked" :binary="true" />
<Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary" style="font-weight: bold">{{checked}}</label>
</div>
</div>

6
src/views/dropdown/DropdownDoc.vue
View File

@ -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>

204
src/views/formlayout/FormLayoutDemo.vue Normal file
View File

@ -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>

99
src/views/formlayout/FormLayoutDoc.vue Normal file
View File

@ -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>

6
src/views/multiselect/MultiSelectDoc.vue
View File

@ -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>