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

csb service props must be array

pull/1143/head
Tuğçe Küçükoğlu 2021-03-23 13:47:50 +03:00
parent a4f3c9a4a0
commit 98dbb467d7
58 changed files with 2169 additions and 1180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/AppDocumentation.vue
View File

@ -47,14 +47,21 @@ export default {
} }
if (this.service) { if (this.service) {
let serviceArr = [];
this.service.forEach(el => {
serviceArr.push(el.split(','))
})
/* eslint-disable */ /* eslint-disable */
tabs.push( serviceArr.forEach((el, i) => {
<TabPanel key="service" header={`${this.service}.js`}> tabs.push(
<pre v-code="script"><code> <TabPanel key="service" header={`${el}.js`}>
{services[this.service]} <pre v-code="script"><code>
</code></pre> {services[el]}
</TabPanel> </code></pre>
); </TabPanel>
);
})
} }
if (this.data) { if (this.data) {

14
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="AutoCompleteDemo" :sources="sources" service="CountryService" :data="['countries']"> <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import AutoComplete from 'primevue/autocomplete'; import AutoComplete from 'primevue/autocomplete';
@ -544,8 +544,6 @@ export default {
const filteredCountries = ref(); const filteredCountries = ref();
const selectedCountries = ref([]); const selectedCountries = ref([]);
const groupedCities = ref ([{ const groupedCities = ref ([{
label: 'Germany', code: 'DE',
label: 'Germany', code: 'DE',
label: 'Germany', code: 'DE', label: 'Germany', code: 'DE',
items: [ items: [
{label: 'Berlin', value: 'Berlin'}, {label: 'Berlin', value: 'Berlin'},
@ -555,8 +553,6 @@ export default {
] ]
}, },
{ {
label: 'USA', code: 'US',
label: 'USA', code: 'US',
label: 'USA', code: 'US', label: 'USA', code: 'US',
items: [ items: [
{label: 'Chicago', value: 'Chicago'}, {label: 'Chicago', value: 'Chicago'},
@ -566,8 +562,6 @@ export default {
] ]
}, },
{ {
label: 'Japan', code: 'JP',
label: 'Japan', code: 'JP',
label: 'Japan', code: 'JP', label: 'Japan', code: 'JP',
items: [ items: [
{label: 'Kyoto', value: 'Kyoto'}, {label: 'Kyoto', value: 'Kyoto'},
@ -590,16 +584,16 @@ export default {
}; };
const searchCity = (event) => { const searchCity = (event) => {
let query = event.query; let query = event.query;
let filteredCities = []; let newFilteredCities = [];
for (let country of groupedCities.value) { for (let country of groupedCities.value) {
let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS); let filteredItems = FilterService.filter(country.items, ['label'], query, FilterMatchMode.CONTAINS);
if (filteredItems && filteredItems.length) { if (filteredItems && filteredItems.length) {
filteredCities.push({...country, ...{items: filteredItems}}); newFilteredCities.push({...country, ...{items: filteredItems}});
} }
} }
filteredCities.value = filteredCities; filteredCities.value = newFilteredCities;
} }
return { countries, countryService, selectedCountry1, selectedCountry2, selectedCity, filteredCities, filteredCountries, selectedCountries, groupedCities, searchCountry, searchCity } return { countries, countryService, selectedCountry1, selectedCountry2, selectedCity, filteredCities, filteredCountries, selectedCountries, groupedCities, searchCountry, searchCity }
} }

2
src/views/carousel/CarouselDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="CarouselDemo" :sources="sources" service="ProductService" :data="['products-small']"> <AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Carousel from 'primevue/carousel'; import Carousel from 'primevue/carousel';

2
src/views/datatable/DataTableBasicDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="DataTableDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</template> </template>
<script> <script>

2
src/views/datatable/DataTableColResizeDemo.vue
View File

@ -30,7 +30,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableColResizeDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableColToggleDemo.vue
View File

@ -22,7 +22,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableColToggleDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

20
src/views/datatable/DataTableContextMenuDemo.vue
View File

@ -24,7 +24,7 @@
<ContextMenu :model="menuModel" ref="cm" /> <ContextMenu :model="menuModel" ref="cm" />
</div> </div>
<AppDoc name="DataTableContextMenuDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>
@ -46,7 +46,8 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu" responsiveLayout="scroll"> <Toast />
<DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @rowContextmenu="onRowContextMenu" responsiveLayout="scroll">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
@ -91,7 +92,7 @@ export default {
}, },
deleteProduct(product) { deleteProduct(product) {
this.products = this.products.filter((p) => p.id !== product.id); this.products = this.products.filter((p) => p.id !== product.id);
this.$toast.add({severity: 'info', summary: 'Product Deleted', detail: product.name}); this.$toast.add({severity: 'error', summary: 'Product Deleted', detail: product.name});
this.selectedProduct = null; this.selectedProduct = null;
}, },
formatCurrency(value) { formatCurrency(value) {
@ -107,7 +108,8 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @row-contextmenu="onRowContextMenu" responsiveLayout="scroll"> <Toast />
<DataTable :value="products" contextMenu v-model:contextMenuSelection="selectedProduct" @rowContextmenu="onRowContextMenu" responsiveLayout="scroll">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
@ -139,8 +141,8 @@ export default {
const productService = ref(new ProductService()); const productService = ref(new ProductService());
const selectedProduct = ref(); const selectedProduct = ref();
const menuModel = ref([ const menuModel = ref([
{label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)}, {label: 'View', icon: 'pi pi-fw pi-search', command: () => viewProduct(selectedProduct)},
{label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)} {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => deleteProduct(selectedProduct)}
]); ]);
const onRowContextMenu = (event) => { const onRowContextMenu = (event) => {
cm.value.show(event.originalEvent); cm.value.show(event.originalEvent);
@ -149,8 +151,8 @@ export default {
toast.add({severity: 'info', summary: 'Product Selected', detail: product.name}); toast.add({severity: 'info', summary: 'Product Selected', detail: product.name});
}; };
const deleteProduct = (product) => { const deleteProduct = (product) => {
products.value = products.value.filter((p) => p.id !== product.id); products.value = products.value.filter((p) => p.id !== product.value.id);
toast.add({severity: 'info', summary: 'Product Deleted', detail: product.name}); toast.add({severity: 'error', summary: 'Product Deleted', detail: product.name});
selectedProduct.value = null; selectedProduct.value = null;
}; };
const formatCurrency = (value) => { const formatCurrency = (value) => {
@ -182,7 +184,7 @@ export default {
}, },
deleteProduct(product) { deleteProduct(product) {
this.products = this.products.filter((p) => p.id !== product.id); this.products = this.products.filter((p) => p.id !== product.id);
this.$toast.add({severity: 'info', summary: 'Product Deleted', detail: product.name}); this.$toast.add({severity: 'error', summary: 'Product Deleted', detail: product.name});
this.selectedProduct = null; this.selectedProduct = null;
}, },
formatCurrency(value) { formatCurrency(value) {

2
src/views/datatable/DataTableCrudDemo.vue
View File

@ -158,7 +158,7 @@
</Dialog> </Dialog>
</div> </div>
<AppDoc name="DataTableCrudDemo" :sources="sources" service="ProductService" :data="['products']" /> <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="content-section documentation"> <div class="content-section documentation">
<AppDoc name="DataTableDemo" :sources="sources" service="CustomerService" :data="['customers-large']"> <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import DataTable from 'primevue/datatable'; import DataTable from 'primevue/datatable';

2
src/views/datatable/DataTableDynamicColumnsDemo.vue
View File

@ -15,7 +15,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableEditDemo.vue
View File

@ -92,7 +92,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableEditDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableExportDemo.vue
View File

@ -23,7 +23,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableExportDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableFilterDemo.vue
View File

@ -208,7 +208,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableFilterDemo" :sources="sources" service="CustomerService" :data="['customers-large']" /> <AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableFlexScrollDemo.vue
View File

@ -11,7 +11,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableFlexScrollDemo" :sources="sources" service="CustomerService" :data="['customers-large']" /> <AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableGridLinesDemo.vue
View File

@ -24,7 +24,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableGridLinesDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableLazyDemo.vue
View File

@ -39,7 +39,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableLazyDemo" :sources="sources" service="CustomerService" /> <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTablePaginatorDemo.vue
View File

@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTablePaginatorDemo" :sources="sources" service="CustomerService" :data="['customers-large']" /> <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableReorderDemo.vue
View File

@ -16,7 +16,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableReorderDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableResponsiveDemo.vue
View File

@ -54,7 +54,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableResponsiveDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableRowExpandDemo.vue
View File

@ -69,7 +69,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableRowExpandDemo" :sources="sources" service="ProductService" :data="['products-orders-small']" /> <AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableRowGroupDemo.vue
View File

@ -105,7 +105,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableRowGroupDemo" :sources="sources" service="CustomerService" :data="['customers-medium']" /> <AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableScrollDemo.vue
View File

@ -125,7 +125,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableScrollDemo" :sources="sources" service="CustomerService" :data="['customers-medium', 'customers-large']" /> <AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableSelectionDemo.vue
View File

@ -81,7 +81,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableSelectionDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableSizeDemo.vue
View File

@ -45,7 +45,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableSizeDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableSortDemo.vue
View File

@ -70,7 +70,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableSortDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableStateDemo.vue
View File

@ -127,7 +127,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableStateDemo" :sources="sources" service="CustomerService" :data="['customers-medium']" /> <AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableStripedDemo.vue
View File

@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableStripedDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableStyleDemo.vue
View File

@ -24,7 +24,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableStyleDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/datatable/DataTableTemplatingDemo.vue
View File

@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableTemplatingDemo" :sources="sources" service="ProductService" :data="['products-small']" /> <AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
</div> </div>
</template> </template>

2
src/views/dataview/DataViewDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="DataViewDemo" :sources="sources" service="ProductService" :data="['products']"> <AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>

2
src/views/deferredcontent/DeferredContentDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="DeferredContentDemo" :sources="sources" service="ProductService" :data="['products-small']"> <AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import DeferredContent from 'primevue/deferredcontent'; import DeferredContent from 'primevue/deferredcontent';

2
src/views/filterservice/FilterServiceDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="FilterServiceDemo" :sources="sources" service="CustomerService" :data="['customers-large']"> <AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import &#123;FilterService&#125; from 'primevue/api'; import &#123;FilterService&#125; from 'primevue/api';

2
src/views/floatlabel/FloatLabelDemo.vue
View File

@ -107,7 +107,7 @@
</div> </div>
</div> </div>
<AppDoc name="FloatLabelDemo" :sources="sources" service="CountryService" :data="['countries']" /> <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService']" :data="['countries']" />
</div> </div>
</template> </template>

772
src/views/formlayout/FormLayoutDoc.vue
View File

@ -1,9 +1,7 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="FormLayoutDemo" :sources="sources">
<TabView> <h5>Getting Started</h5>
<TabPanel header="Documentation"> <p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
<h5>Getting Started</h5>
<p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
&lt;label for="fieldId"&gt;Label&lt;/label&gt; &lt;label for="fieldId"&gt;Label&lt;/label&gt;
@ -12,8 +10,8 @@
</code></pre> </code></pre>
<h5>Vertical Layout</h5> <h5>Vertical Layout</h5>
<p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> that makes the components use all available width.</p> <p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> that makes the components use all available width.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-fluid"&gt; &lt;div class="p-fluid"&gt;
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
@ -28,9 +26,9 @@
</code></pre> </code></pre>
<h5>Vertical Layout with Grid</h5> <h5>Vertical Layout with Grid</h5>
<p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.p-formgrid</i> class to optimize the content for form design. Example <p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.p-formgrid</i> class to optimize the content for form design. Example
below arranges two fields to be displayed next two each other.</p> below arranges two fields to be displayed next two each other.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-fluid p-formgrid p-grid"&gt; &lt;div class="p-fluid p-formgrid p-grid"&gt;
&lt;div class="p-field p-col"&gt; &lt;div class="p-field p-col"&gt;
@ -45,10 +43,10 @@
</code></pre> </code></pre>
<h5>Horizontal and Fixed Width</h5> <h5>Horizontal and Fixed Width</h5>
<p>In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this <p>In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this
example, label has a fixed width where container of the inputs gets the remaining space. example, label has a fixed width where container of the inputs gets the remaining space.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-field p-grid"&gt; &lt;div class="p-field p-grid"&gt;
&lt;label for="firstname" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt; &lt;label for="firstname" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt;
@ -65,8 +63,8 @@
</code></pre> </code></pre>
<h5>Horizontal and Fluid</h5> <h5>Horizontal and Fluid</h5>
<p>Wrapping the form in the previous example with <i>.p-fluid</i> and removing the fixed width results in a fluid layout.</p> <p>Wrapping the form in the previous example with <i>.p-fluid</i> and removing the fixed width results in a fluid layout.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-fluid"&gt; &lt;div class="p-fluid"&gt;
&lt;div class="p-field p-grid"&gt; &lt;div class="p-field p-grid"&gt;
@ -85,9 +83,9 @@
</code></pre> </code></pre>
<h5>Inline</h5> <h5>Inline</h5>
<p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.p-formgroup-inline</i> to the form container. Note that per design requirements, if labels <p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.p-formgroup-inline</i> to the form container. Note that per design requirements, if labels
are not visually hidden, it is suggested to use <i>.p-sr-only</i> to still support screen readers.</p> are not visually hidden, it is suggested to use <i>.p-sr-only</i> to still support screen readers.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-formgroup-inline"&gt; &lt;div class="p-formgroup-inline"&gt;
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
@ -103,9 +101,9 @@
</code></pre> </code></pre>
<h5>Checkbox and RadioButton</h5> <h5>Checkbox and RadioButton</h5>
<p>Checkbox and RadioButton have exclusive layout support via <i>.p-field-checkbox</i> and <i>.p-field-radiobutton</i> classes respectively. <p>Checkbox and RadioButton have exclusive layout support via <i>.p-field-checkbox</i> and <i>.p-field-radiobutton</i> classes respectively.
Examples here demonstrates vertical and horizontal layout alternatives.</p> Examples here demonstrates vertical and horizontal layout alternatives.</p>
<pre v-code><code> <pre v-code><code>
&lt;h3&gt;Vertical Checkbox&lt;/h3&gt; &lt;h3&gt;Vertical Checkbox&lt;/h3&gt;
&lt;div class="p-field-checkbox"&gt; &lt;div class="p-field-checkbox"&gt;
@ -156,8 +154,8 @@
</code></pre> </code></pre>
<h5>Helper text</h5> <h5>Helper text</h5>
<p>Helper text is an optional element defined with the <i>small</i> tag to display additional information about the input field.</p> <p>Helper text is an optional element defined with the <i>small</i> tag to display additional information about the input field.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-field p-fluid"&gt; &lt;div class="p-field p-fluid"&gt;
&lt;label for="username"&gt;Username&lt;/label&gt; &lt;label for="username"&gt;Username&lt;/label&gt;
@ -167,8 +165,8 @@
</code></pre> </code></pre>
<h5>Advanced Forms</h5> <h5>Advanced Forms</h5>
<p>A responsive form with various input fields can easily be implemented using a combination of <i>.p-field</i>, <i>.p-formgrid</i> and <i>.p-fluid</i>.</p> <p>A responsive form with various input fields can easily be implemented using a combination of <i>.p-field</i>, <i>.p-formgrid</i> and <i>.p-fluid</i>.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-fluid p-formgrid p-grid"&gt; &lt;div class="p-fluid p-formgrid p-grid"&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt; &lt;div class="p-field p-col-12 p-md-6"&gt;
@ -199,385 +197,202 @@
</code></pre> </code></pre>
<h5>Customization</h5> <h5>Customization</h5>
<p>FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building <a href="https://github.com/primefaces/primeflex/blob/master/primeflex.scss">primeflex.scss</a> with your on variables.</p> <p>FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building <a href="https://github.com/primefaces/primeflex/blob/master/primeflex.scss">primeflex.scss</a> with your on variables.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Variable</th> <th>Variable</th>
<th>Default</th> <th>Default</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>$fieldMargin</td> <td>$fieldMargin</td>
<td>1em</td> <td>1em</td>
</tr> </tr>
<tr> <tr>
<td>$fieldLabelMargin</td> <td>$fieldLabelMargin</td>
<td>.5em</td> <td>.5em</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</AppDoc>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/formlayout" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="FormLayoutDemo" :sources="sources" :components="['InputText', 'Button', 'Checkbox', 'RadioButton', 'Textarea', 'Dropdown']" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Vertical&lt;/h3&gt;
&lt;div class="p-fluid"&gt;
&lt;div class="p-field"&gt;
&lt;label for="firstname1"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname1" type="text" /&gt;
&lt;/div&gt;
&lt;div class="p-field"&gt;
&lt;label for="lastname1"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname1" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Vertical and Grid&lt;/h3&gt;
&lt;div class="p-fluid p-formgrid p-grid"&gt;
&lt;div class="p-field p-col"&gt;
&lt;label for="firstname2"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname2" type="text" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col"&gt;
&lt;label for="lastname2"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname2" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal and Fixed Width&lt;/h3&gt;
&lt;div class="p-field p-grid"&gt;
&lt;label for="firstname3" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt;
&lt;div class="p-col"&gt;
&lt;InputText id="firstname3" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-field p-grid"&gt;
&lt;label for="lastname3" class="p-col-fixed" style="width:100px"&gt;Lastname&lt;/label&gt;
&lt;div class="p-col"&gt;
&lt;InputText id="lastname3" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal and Fluid&lt;/h3&gt;
&lt;div class="p-fluid"&gt;
&lt;div class="p-field p-grid"&gt;
&lt;label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Firstname&lt;/label&gt;
&lt;div class="p-col-12 p-md-10"&gt;
&lt;InputText id="firstname4" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-field p-grid"&gt;
&lt;label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Lastname&lt;/label&gt;
&lt;div class="p-col-12 p-md-10"&gt;
&lt;InputText id="lastname4" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Inline&lt;/h3&gt;
&lt;div class="p-formgroup-inline"&gt;
&lt;div class="p-field"&gt;
&lt;label for="firstname5" class="p-sr-only"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname5" type="text" placeholder="Firstname" /&gt;
&lt;/div&gt;
&lt;div class="p-field"&gt;
&lt;label for="lastname5" class="p-sr-only"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname5" type="text" placeholder="Lastname" /&gt;
&lt;/div&gt;
&lt;Button type="button" label="Submit" /&gt;
&lt;/div&gt;
&lt;h3&gt;Vertical Checkbox&lt;/h3&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /&gt;
&lt;label for="city1"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" /&gt;
&lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal Checkbox&lt;/h3&gt;
&lt;div class="p-formgroup-inline"&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" /&gt;
&lt;label for="city3"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-checkbox"&gt;
&lt;Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" /&gt;
&lt;label for="city4"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Vertical RadioButton&lt;/h3&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /&gt;
&lt;label for="city5"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" /&gt;
&lt;label for="city6"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal RadioButton&lt;/h3&gt;
&lt;div class="p-formgroup-inline"&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city7" name="city2" value="Chicago" v-model="city2" /&gt;
&lt;label for="city7"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-radiobutton"&gt;
&lt;RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" /&gt;
&lt;label for="city8"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Help Text&lt;/h3&gt;
&lt;div class="p-field p-fluid"&gt;
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;InputText id="username" type="username" aria-describedby="username-help" /&gt;
&lt;small id="username-help"&gt;Enter your username to reset your password.&lt;/small&gt;
&lt;/div&gt;
&lt;h3&gt;Advanced&lt;/h3&gt;
&lt;div class="p-fluid p-formgrid p-grid"&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;label for="firstname6"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname6" type="text" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;label for="lastname6"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname6" type="text" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12"&gt;
&lt;label for="address"&gt;Address&lt;/label&gt;
&lt;Textarea id="address" rows="4" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt;
&lt;label for="city"&gt;City&lt;/label&gt;
&lt;InputText id="city" type="text" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="state"&gt;State&lt;/label&gt;
&lt;Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt;
&lt;label for="zip"&gt;Zip&lt;/label&gt;
&lt;InputText id="zip" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</code></pre>
<pre v-code.script><code>
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
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
</template> </template>
<script> <script>
import LiveEditor from '../liveeditor/LiveEditor';
export default { export default {
data() { data() {
return { return {
sources: { sources: {
'template': { 'options-api': {
content: `<template> tabName: 'Source',
<div class="layout-content"> content: `
<div class="content-section implementation"> <template>
<div class="card"> <div>
<h5>Vertical</h5> <div class="card">
<div class="p-fluid"> <h5>Vertical</h5>
<div class="p-field"> <div class="p-fluid">
<label for="firstname1">Firstname</label> <div class="p-field">
<InputText id="firstname1" type="text" /> <label for="firstname1">Firstname</label>
</div> <InputText id="firstname1" type="text" />
<div class="p-field"> </div>
<label for="lastname1">Lastname</label> <div class="p-field">
<InputText id="lastname1" type="text" /> <label for="lastname1">Lastname</label>
</div> <InputText id="lastname1" type="text" />
</div> </div>
</div> </div>
</div>
<div class="card"> <div class="card">
<h5>Vertical and Grid</h5> <h5>Vertical and Grid</h5>
<div class="p-fluid p-formgrid p-grid"> <div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col"> <div class="p-field p-col">
<label for="firstname2">Firstname</label> <label for="firstname2">Firstname</label>
<InputText id="firstname2" type="text" /> <InputText id="firstname2" type="text" />
</div> </div>
<div class="p-field p-col"> <div class="p-field p-col">
<label for="lastname2">Lastname</label> <label for="lastname2">Lastname</label>
<InputText id="lastname2" type="text" /> <InputText id="lastname2" type="text" />
</div>
</div> </div>
</div> </div>
</div>
<div class="card"> <div class="card">
<h5>Horizontal and Fixed Width</h5> <h5>Horizontal and Fixed Width</h5>
<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>
</div>
<div class="card">
<h5>Horizontal and Fluid</h5>
<div class="p-fluid">
<div class="p-field p-grid"> <div class="p-field p-grid">
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label> <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
<div class="p-col"> <div class="p-col-12 p-md-10">
<InputText id="firstname3" type="text" /> <InputText id="firstname4" type="text" />
</div> </div>
</div> </div>
<div class="p-field p-grid"> <div class="p-field p-grid">
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label> <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
<div class="p-col"> <div class="p-col-12 p-md-10">
<InputText id="lastname3" type="text" /> <InputText id="lastname4" type="text" />
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="card"> <div class="card">
<h5>Horizontal and Fluid</h5> <h5>Inline</h5>
<div class="p-fluid"> <div class="p-formgroup-inline">
<div class="p-field p-grid"> <div class="p-field">
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label> <label for="firstname5" class="p-sr-only">Firstname</label>
<div class="p-col-12 p-md-10"> <InputText id="firstname5" type="text" placeholder="Firstname" />
<InputText id="firstname4" type="text" />
</div>
</div>
<div class="p-field p-grid">
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
<div class="p-col-12 p-md-10">
<InputText id="lastname4" type="text" />
</div>
</div>
</div> </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>
</div>
<div class="card">
<h5>Vertical Checkbox</h5>
<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> </div>
<div class="card"> <h5>Horizontal Checkbox</h5>
<h5>Inline</h5> <div class="p-formgroup-inline">
<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>
</div>
<div class="card">
<h5>Vertical Checkbox</h5>
<div class="p-field-checkbox"> <div class="p-field-checkbox">
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /> <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
<label for="city1">Chicago</label> <label for="city3">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="p-field-checkbox">
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" /> <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
<label for="city2">Los Angeles</label> <label for="city4">Los Angeles</label>
</div>
<h5>Horizontal Checkbox</h5>
<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> </div>
</div> </div>
</div>
<div class="card"> <div class="card">
<h5>Vertical RadioButton</h5> <h5>Vertical RadioButton</h5>
<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>
<h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline">
<div class="p-field-radiobutton"> <div class="p-field-radiobutton">
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /> <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city5">Chicago</label> <label for="city7">Chicago</label>
</div> </div>
<div class="p-field-radiobutton"> <div class="p-field-radiobutton">
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" /> <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city6">Los Angeles</label> <label for="city8">Los Angeles</label>
</div>
<h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline">
<div class="p-field-radiobutton">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label>
</div>
</div> </div>
</div> </div>
</div>
<div class="card"> <div class="card">
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="p-field p-fluid"> <div class="p-field p-fluid">
<label for="username">Username</label> <label for="username">Username</label>
<InputText id="username" type="username" aria-describedby="username-help" /> <InputText id="username" type="username" aria-describedby="username-help" />
<small id="username-help">Enter your username to reset your password.</small> <small id="username-help">Enter your username to reset your password.</small>
</div>
</div> </div>
</div>
<div class="card"> <div class="card">
<h5>Advanced</h5> <h5>Advanced</h5>
<div class="p-fluid p-formgrid p-grid"> <div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-6"> <div class="p-field p-col-12 p-md-6">
<label for="firstname6">Firstname</label> <label for="firstname6">Firstname</label>
<InputText id="firstname6" type="text" /> <InputText id="firstname6" type="text" />
</div> </div>
<div class="p-field p-col-12 p-md-6"> <div class="p-field p-col-12 p-md-6">
<label for="lastname6">Lastname</label> <label for="lastname6">Lastname</label>
<InputText id="lastname6" type="text" /> <InputText id="lastname6" type="text" />
</div> </div>
<div class="p-field p-col-12"> <div class="p-field p-col-12">
<label for="address">Address</label> <label for="address">Address</label>
<Textarea id="address" rows="4" /> <Textarea id="address" rows="4" />
</div> </div>
<div class="p-field p-col-12 p-md-6"> <div class="p-field p-col-12 p-md-6">
<label for="city">City</label> <label for="city">City</label>
<InputText id="city" type="text" /> <InputText id="city" type="text" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="p-field p-col-12 p-md-3">
<label for="state">State</label> <label for="state">State</label>
<Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" /> <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="p-field p-col-12 p-md-3">
<label for="zip">Zip</label> <label for="zip">Zip</label>
<InputText id="zip" type="text" /> <InputText id="zip" type="text" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -602,8 +417,10 @@ export default {
city2: null city2: null
} }
} }
}`, }
style: `<style lang="scss" scoped> <\\/script>
<style lang="scss" scoped>
@media screen and (max-width: 489px) { @media screen and (max-width: 489px) {
.p-formgroup-inline { .p-formgroup-inline {
.p-field { .p-field {
@ -619,13 +436,224 @@ export default {
textarea { textarea {
resize: none; resize: none;
} }
</style>` </style>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<div class="card">
<h5>Vertical</h5>
<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>
</div>
<div class="card">
<h5>Vertical and Grid</h5>
<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>
</div>
<div class="card">
<h5>Horizontal and Fixed Width</h5>
<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>
</div>
<div class="card">
<h5>Horizontal and Fluid</h5>
<div class="p-fluid">
<div class="p-field p-grid">
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">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-mb-2 p-md-2 p-mb-md-0">Lastname</label>
<div class="p-col-12 p-md-10">
<InputText id="lastname4" type="text" />
</div>
</div>
</div>
</div>
<div class="card">
<h5>Inline</h5>
<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>
</div>
<div class="card">
<h5>Vertical Checkbox</h5>
<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>
<h5>Horizontal Checkbox</h5>
<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>
</div>
<div class="card">
<h5>Vertical RadioButton</h5>
<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>
<h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline">
<div class="p-field-radiobutton">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label>
</div>
</div>
</div>
<div class="card">
<h5>Help Text</h5>
<div class="p-field p-fluid">
<label for="username">Username</label>
<InputText id="username" type="username" aria-describedby="username-help" />
<small id="username-help">Enter your username to reset your password.</small>
</div>
</div>
<div class="card">
<h5>Advanced</h5>
<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" 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>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const selectedState = ref(null);
const states = ref([
{name: 'Arizona', code: 'Arizona'},
{name: 'California', value: 'California'},
{name: 'Florida', code: 'Florida'},
{name: 'Ohio', code: 'Ohio'},
{name: 'Washington', code: 'Washington'}
]);
const cities1 = ref([]);
const cities2 = ref([]);
const city1 = ref(null);
const city2 = ref(null);
return { selectedState, states, cities1, cities2, city1, city2 }
}
}
<\\/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>
`
} }
} }
} }
},
components: {
LiveEditor
} }
} }
</script> </script>

2
src/views/fullcalendar/FullCalendarDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="FullCalendarDemo" :sources="sources" service="EventService" :data="['events']"> <AppDoc name="FullCalendarDemo" :sources="sources" :service="['EventService']" :data="['events']">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import FullCalendar from 'primevue/fullcalendar'; import FullCalendar from 'primevue/fullcalendar';

2
src/views/inplace/InplaceDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="InplaceDemo" :sources="sources" service="ProductService" :data="['products-small']" > <AppDoc name="InplaceDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" >
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Inplace from 'primevue/inplace'; import Inplace from 'primevue/inplace';

2
src/views/invalid/InvalidDemo.vue
View File

@ -49,7 +49,7 @@
</div> </div>
</div> </div>
<AppDoc name="InvalidDemo" :sources="sources" service="CountryService" :data="['countries']" /> <AppDoc name="InvalidDemo" :sources="sources" :service="['CountryService']" :data="['countries']" />
</div> </div>
</template> </template>

20
src/views/liveeditor/LiveEditor.vue
View File

@ -27,7 +27,7 @@ export default {
default: null default: null
}, },
service: { service: {
type: String, type: Array,
default: null default: null
}, },
data: { data: {
@ -142,7 +142,11 @@ export default {
} }
if (this.service) { if (this.service) {
let dataArr = []; let dataArr = [], serviceArr = [];
this.service.forEach(el => {
serviceArr.push(el.split(','))
})
this.data.forEach(el => { this.data.forEach(el => {
dataArr.push(el.split(',')) dataArr.push(el.split(','))
@ -153,18 +157,14 @@ export default {
_files[`public/data/${el}.json`] = { _files[`public/data/${el}.json`] = {
content: data[el] content: data[el]
}; };
_files[`src/service/${this.service}.js`] = {
content: `${services[this.service]}`
};
}); });
} }
else { serviceArr.forEach(serv => {
_files[`src/service/${this.service}.js`] = { _files[`src/service/${serv}.js`] = {
content: `${services[this.service]}` content: `${services[serv]}`
}; };
} })
} }
element += `import ${name} from "./${name}.vue"`; element += `import ${name} from "./${name}.vue"`;

2
src/views/orderlist/OrderListDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="OrderListDemo" :sources="sources" service="ProductService" :data="['products-small']"> <AppDoc name="OrderListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import OrderList from 'primevue/orderlist'; import OrderList from 'primevue/orderlist';

2
src/views/overlaypanel/OverlayPanelDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="OverlayPanelDemo" :sources="sources" service="ProductService" :data="['products-small']"> <AppDoc name="OverlayPanelDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import OverlayPanel from 'primevue/overlaypanel'; import OverlayPanel from 'primevue/overlaypanel';

2
src/views/picklist/PickListDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="PickListDemo" :sources="sources" service="ProductService" :data="['products-small']"> <AppDoc name="PickListDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import PickList from 'primevue/picklist'; import PickList from 'primevue/picklist';

2390
src/views/responsive/ResponsiveDemo.vue
View File

File diff suppressed because it is too large Load Diff

2
src/views/tree/TreeDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="TreeDemo" :sources="sources" service="NodeService" :data="['treenodes']"> <AppDoc name="TreeDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']">
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Tree from 'primevue/tree'; import Tree from 'primevue/tree';

2
src/views/tree/TreeFilterDemo.vue
View File

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeFilterDemo" :sources="sources" service="NodeService" :data="['treenodes']" /> <AppDoc name="TreeFilterDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
</div> </div>
</template> </template>

2
src/views/tree/TreeLazyDemo.vue
View File

@ -13,7 +13,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeLazyDemo" :sources="sources" service="NodeService" :data="['treenodes']" /> <AppDoc name="TreeLazyDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
</div> </div>
</template> </template>

2
src/views/tree/TreeSelectionDemo.vue
View File

@ -27,7 +27,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeSelectionDemo" :sources="sources" service="NodeService" :data="['treenodes']" /> <AppDoc name="TreeSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
</div> </div>
</template> </template>

2
src/views/tree/TreeTemplatingDemo.vue
View File

@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeTemplatingDemo" :sources="sources" service="NodeService" :data="['treenodes']" /> <AppDoc name="TreeTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treenodes']" />
</div> </div>
</template> </template>

2
src/views/treetable/TreeTableColResizeDemo.vue
View File

@ -28,7 +28,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeTableColResizeDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" /> <AppDoc name="TreeTableColResizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
</div> </div>
</template> </template>

2
src/views/treetable/TreeTableColToggleDemo.vue
View File

@ -21,7 +21,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreetableColToggleDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" /> <AppDoc name="TreetableColToggleDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
</div> </div>
</template> </template>

2
src/views/treetable/TreeTableDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="TreeTableDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" > <AppDoc name="TreeTableDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" >
<h5>Import</h5> <h5>Import</h5>
<pre v-code.script><code> <pre v-code.script><code>
import TreeTable from 'primevue/treetable'; import TreeTable from 'primevue/treetable';

2
src/views/treetable/TreeTableFilterDemo.vue
View File

@ -67,7 +67,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeTableFilterDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" /> <AppDoc name="TreeTableFilterDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
</div> </div>
</template> </template>

2
src/views/treetable/TreeTableLazyDemo.vue
View File

@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeTableLazyDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" /> <AppDoc name="TreeTableLazyDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
</div> </div>
</template> </template>

2
src/views/treetable/TreeTablePaginatorDemo.vue
View File

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeTablePaginatorDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" /> <AppDoc name="TreeTablePaginatorDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
</div> </div>
</template> </template>

2
src/views/treetable/TreeTableResponsiveDemo.vue
View File

@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeTableResponsiveDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" /> <AppDoc name="TreeTableResponsiveDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
</div> </div>
</template> </template>

2
src/views/treetable/TreeTableSelectionDemo.vue
View File

@ -55,7 +55,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeTableSelectionDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" /> <AppDoc name="TreeTableSelectionDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
</div> </div>
</template> </template>

2
src/views/treetable/TreeTableSizeDemo.vue
View File

@ -42,7 +42,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeTableSizeDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" /> <AppDoc name="TreeTableSizeDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
</div> </div>
</template> </template>

2
src/views/treetable/TreeTableSortDemo.vue
View File

@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeTableSortDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" /> <AppDoc name="TreeTableSortDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
</div> </div>
</template> </template>

2
src/views/treetable/TreeTableTemplatingDemo.vue
View File

@ -34,7 +34,7 @@
</div> </div>
</div> </div>
<AppDoc name="TreeTableTemplatingDemo" :sources="sources" service="NodeService" :data="['treetablenodes']" /> <AppDoc name="TreeTableTemplatingDemo" :sources="sources" :service="['NodeService']" :data="['treetablenodes']" />
</div> </div>
</template> </template>