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

Add cards

pull/345/head
cagataycivici 2020-06-18 11:58:07 +03:00
parent 53c78c054b
commit 91014b11e5
129 changed files with 2992 additions and 2653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/AppMenu.vue
View File

@ -14,6 +14,7 @@
<div class="menu-items">
<router-link to="/icons">Icons</router-link>
<router-link to="/flexgrid">Grid System</router-link>
<router-link to="/formlayout">FormLayout</router-link>
<router-link to="/elevation">Elevation</router-link>
<router-link to="/spacing">Spacing</router-link>
</div>
@ -32,7 +33,6 @@
<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>

8
src/views/accordion/AccordionDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Default</h5>
<Accordion>
<AccordionTab header="Godfather I">
@ -26,7 +27,9 @@
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
</Accordion>
</div>
<div class="card">
<h5>Multiple</h5>
<Accordion :multiple="true">
<AccordionTab header="Godfather I">
@ -47,7 +50,9 @@
<AccordionTab header="Godfather IV" :disabled="true">
</AccordionTab>
</Accordion>
</div>
<div class="card">
<h5>Programmatic</h5>
<div style="padding: .5em 0 1em 0">
<Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
@ -72,7 +77,9 @@
A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
</AccordionTab>
</Accordion>
</div>
<div class="card">
<h5>Custom Headers</h5>
<Accordion class="accordion-custom">
<AccordionTab>
@ -105,6 +112,7 @@
</AccordionTab>
</Accordion>
</div>
</div>
<AccordionDoc/>
</div>

2
src/views/autocomplete/AutoCompleteDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
<span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
@ -31,6 +32,7 @@
<li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
</ul>
</div>
</div>
<AutoCompleteDoc />
</div>

2
src/views/badge/BadgeDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Numbers</h5>
<div class="badges">
<span class="p-badge">2</span>
@ -57,6 +58,7 @@
<span class="p-badge p-badge-xl p-badge-warning">6</span>
</div>
</div>
</div>
<BadgeDoc />
</div>

2
src/views/blockui/BlockUIDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Document</h5>
<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
@ -26,6 +27,7 @@
</Panel>
</BlockUI>
</div>
</div>
<BlockUIDoc />
</div>

2
src/views/breadcrumb/BreadcrumbDemo.vue
View File

@ -8,8 +8,10 @@
</div>
<div class="content-section implementation">
<div class="card">
<Breadcrumb :home="home" :model="items" />
</div>
</div>
<BreadcrumbDoc />
</div>

2
src/views/button/ButtonDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Submit" disabled="disabled" />
@ -72,6 +73,7 @@
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
</div>
</div>
</div>
<ButtonDoc/>
</div>

2
src/views/calendar/CalendarDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Popup</h5>
<div class=" p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
@ -80,6 +81,7 @@
<h5>Inline</h5>
<Calendar v-model="date14" :inline="true" :showWeek="true" />
</div>
</div>
<CalendarDoc />
</div>

8
src/views/carousel/CarouselDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #header>
<h5>Basic</h5>
@ -32,7 +33,9 @@
</div>
</template>
</Carousel>
</div>
<div class="card">
<Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
<template #header>
<h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
@ -57,7 +60,9 @@
</div>
</template>
</Carousel>
</div>
<div class="card">
<Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="325px"
style="max-width: 400px; margin-top: 2em">
<template #header>
@ -83,6 +88,7 @@
</div>
</template>
</Carousel>
</div>
</div>
<CarouselDoc/>
@ -140,7 +146,7 @@ export default {
.car-item {
.car-content {
border: 1px solid var(--layer-2);
border: 1px solid var(--surface-d);
border-radius: 3px;
margin: .3rem;
text-align: center;

8
src/views/chart/BarChartDemo.vue
View File

@ -8,18 +8,26 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Vertical</h5>
<Chart type="bar" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Horizontal</h5>
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Multi Axis</h5>
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
</div>
<div class="card">
<h5>Stacked</h5>
<Chart type="bar" :data="stackedData" :options="stackedOptions" />
</div>
</div>
<BarChartDoc/>
</div>

7
src/views/chart/ChartDemo.vue
View File

@ -1,12 +1,5 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ChartModel</h1>
<p>Chart components are based on <a href="https://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
</div>
</div>
<ChartDoc/>
</div>
</template>

3
src/views/chart/ChartDoc.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="content-section documentation">
<h1>ChartModel</h1>
<p>Chart components are based on <a href="https://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
<h5>Getting Started</h5>
<p>To begin with, charts.js package needs to be installed in your project.</p>
<CodeHighlight lang="javascript">

2
src/views/chart/ComboChartDemo.vue
View File

@ -8,8 +8,10 @@
</div>
<div class="content-section implementation">
<div class="card">
<Chart type="bar" :data="chartData" :options="chartOptions"/>
</div>
</div>
<ComboChartDoc/>
</div>

2
src/views/chart/DoughnutChartDemo.vue
View File

@ -8,8 +8,10 @@
</div>
<div class="content-section implementation">
<div class="card">
<Chart type="doughnut" :data="chartData" :options="chartOptions" />
</div>
</div>
<DoughnutChartDoc/>
</div>

6
src/views/chart/LineChartDemo.vue
View File

@ -8,15 +8,21 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<Chart type="line" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Multi Axis</h5>
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
</div>
<div class="card">
<h5>Line Styles</h5>
<Chart type="line" :data="lineStylesData" :options="basicOptions" />
</div>
</div>
<LineChartDoc/>
</div>

2
src/views/chart/PieChartDemo.vue
View File

@ -8,8 +8,10 @@
</div>
<div class="content-section implementation">
<div class="card">
<Chart type="pie" :data="chartData" :options="chartOptions" />
</div>
</div>
<PieChartDoc/>
</div>

2
src/views/chart/PolarAreaChartDemo.vue
View File

@ -8,8 +8,10 @@
</div>
<div class="content-section implementation">
<div class="card">
<Chart type="polarArea" :data="chartData" :options="chartOptions" />
</div>
</div>
<PolarAreaChartDoc/>
</div>

2
src/views/chart/RadarChartDemo.vue
View File

@ -8,8 +8,10 @@
</div>
<div class="content-section implementation">
<div class="card">
<Chart type="radar" :data="chartData" :options="chartOptions" />
</div>
</div>
<RadarChartDoc/>
</div>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<div class="p-field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" />
@ -40,6 +41,7 @@
</div>
<p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
</div>
</div>
<CheckboxDoc/>
</div>

2
src/views/chips/ChipsDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation p-fluid">
<div class="card">
<h5>Basic</h5>
<Chips v-model="value1" />
@ -24,6 +25,7 @@
</template>
</Chips>
</div>
</div>
<ChipsDoc />
</div>

2
src/views/colorpicker/ColorPickerDemo.vue
View File

@ -8,12 +8,14 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Inline</h5>
<ColorPicker v-model="color1" :inline="true" />
<h5>Overlay</h5>
<ColorPicker v-model="color2" />
</div>
</div>
<ColorPickerDoc />
</div>

2
src/views/contextmenu/ContextMenuDemo.vue
View File

@ -8,9 +8,11 @@
</div>
<div class="content-section implementation">
<div class="card">
<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :model="items" />
</div>
</div>
<ContextMenuDoc />
</div>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@ -15,6 +16,7 @@
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="sales">
<ColumnGroup type="header">
<Row>
@ -55,6 +56,7 @@
</ColumnGroup>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -9,6 +9,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Fit Mode</h5>
<DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit">
<Column field="vin" header="Vin"></Column>
@ -16,6 +17,7 @@
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
<h5>Expand Mode</h5>
<DataTable :value="cars" :resizableColumns="true" columnResizeMode="expand">

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars">
<template #header>
<div style="text-align:left">
@ -19,6 +20,7 @@
<Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,12 +8,14 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
<ContextMenu :model="menuModel" ref="cm" />
</div>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" selectionMode="single" :selection.sync="selectedCar" @row-select="onRowSelect" dataKey="vin"
:paginator="true" :rows="15">
<template #header>
@ -23,6 +24,7 @@
</div>
</template>
</DataTable>
</div>
<Dialog :visible.sync="dialogVisible" :style="{width: '400px'}" header="Car Details" :modal="true">
<div class="p-cardialog-content">

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

@ -2426,9 +2426,7 @@ export default {
<CodeHighlight>
<template v-pre>
&lt;div class="p-card"&gt;
&lt;div class="p-card-body" style="padding:0"&gt;
&lt;DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10"
&lt;DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10"
dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"&gt;
@ -2516,9 +2514,7 @@ export default {
&lt;Button type="button" icon="pi pi-cog" class="p-button-secondary"&gt;&lt;/Button&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/DataTable&gt;
</template>
</CodeHighlight>

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

@ -8,10 +8,12 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -10,6 +10,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic Cell Editing</h5>
<p>Simple editors with v-model.</p>
<DataTable :value="cars1" editMode="cell">
@ -41,7 +42,9 @@
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Advanced Cell Editing</h5>
<p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
<DataTable :value="cars2" editMode="cell" @cell-edit-complete="onCellEditComplete">
@ -51,7 +54,9 @@
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Row Editing</h5>
<DataTable :value="cars3" editMode="row" dataKey="vin" :editingRows.sync="editingRows"
@row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
@ -74,6 +79,7 @@
<Column :rowEditor="true" headerStyle="width:6em" bodyStyle="text-align:center"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" ref="dt">
<template #header>
<div style="text-align: left">
@ -20,6 +21,7 @@
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" :filters="filters" :paginator="true" :rows="10">
<template #header>
<div style="text-align: right">
@ -47,6 +48,7 @@
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -1,5 +1,6 @@
<template>
<div class="content-section implementation" style="height: calc(100vh - 143px)">
<div class="content-section implementation">
<div class="card" style="height: calc(100vh - 143px)">
<DataTable :value="cars" :scrollable="true" scrollHeight="flex">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@ -7,6 +8,7 @@
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
</template>
<script>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" class="p-datatable-gridlines">
<template #header>
Header
@ -21,6 +22,7 @@
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -11,6 +11,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
<Column field="vin" header="Vin"></Column>
@ -19,6 +20,7 @@
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" :paginator="true" :rows="10">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
@ -21,6 +22,7 @@
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,11 +8,13 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder">
<Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" />
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" class="p-datatable-responsive-demo" :paginator="true" :rows="10" paginatorPosition="both">
<template #header>
Responsive
@ -38,6 +39,7 @@
</Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
@row-expand="onRowExpand" @row-collapse="onRowCollapse">
<template #header>
@ -37,6 +38,7 @@
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Subheader Grouping</h5>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1">
@ -24,7 +25,9 @@
<td>{{calculateGroupTotal(slotProps.data.brand)}}</td>
</template>
</DataTable>
</div>
<div class="card">
<h5>Expandable Row Groups</h5>
<DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1"
@ -43,7 +46,9 @@
<td>{{calculateGroupTotal(slotProps.data.brand)}}</td>
</template>
</DataTable>
</div>
<div class="card">
<h5>RowSpan Grouping</h5>
<DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
sortMode="single" sortField="brand" :sortOrder="1">
@ -59,6 +64,7 @@
<Column field="price" header="Price"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column>
@ -15,12 +16,16 @@
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
<div class="card">
<h5>Flexible Scroll</h5>
<p>Flex scroll feature makes the scrollable viewport section dynamic so that it can grow or shrink relative to the parent size of the table.
Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.</p>
<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
</div>
<Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
<DataTable :value="cars" :scrollable="true" scrollHeight="flex">
<Column field="vin" header="Vin"></Column>
@ -34,6 +39,7 @@
</template>
</Dialog>
<div class="card">
<h5>Virtual Scroll</h5>
<DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
:virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
@ -58,7 +64,9 @@
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Horizontal and Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"></Column>
@ -70,7 +78,9 @@
<Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_2"></Column>
<Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"></Column>
</DataTable>
</div>
<div class="card">
<h5>Frozen Rows</h5>
<DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column>
@ -78,7 +88,9 @@
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
<div class="card">
<h5>Frozen Columns</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true">
@ -97,6 +109,7 @@
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_3"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" class="p-datatable-sm" style="margin-bottom: 2rem">
<template #header>
Small Table
@ -17,7 +18,9 @@
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
<div class="card">
<DataTable :value="cars" style="margin-bottom: 2rem">
<template #header>
Normal Table
@ -27,7 +30,9 @@
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
<div class="card">
<DataTable :value="cars" class="p-datatable-lg">
<template #header>
Large Table
@ -38,6 +43,7 @@
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Single Column</h5>
<DataTable :value="cars">
<Column field="vin" header="Vin" :sortable="true"></Column>
@ -15,7 +16,9 @@
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
</div>
<div class="card">
<h5>Multiple Columns</h5>
<DataTable :value="cars" sortMode="multiple">
<Column field="vin" header="Vin" :sortable="true"></Column>
@ -23,7 +26,9 @@
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
</div>
<div class="card">
<h5>Presort</h5>
<DataTable :value="cars" sortField="year" :sortOrder="-1">
<Column field="vin" header="Vin" :sortable="true"></Column>
@ -31,7 +36,9 @@
<Column field="brand" header="Brand" :sortable="true"></Column>
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
</div>
<div class="card">
<h5>Removable Sort</h5>
<DataTable :value="cars" removableSort>
<Column field="vin" header="Vin" :sortable="true"></Column>
@ -40,6 +47,7 @@
<Column field="color" header="Color" :sortable="true"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Session Storage</h5>
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
:selection.sync="selectedCar1" selectionMode="single" dataKey="vin"
@ -49,7 +50,9 @@
No records found.
</template>
</DataTable>
</div>
<div class="card">
<h5>Local Storage</h5>
<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
:selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
@ -92,6 +95,7 @@
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" class="p-datatable-striped">
<template #header>
Header
@ -21,6 +22,7 @@
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars" :rowClass="rowClass">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year" bodyStyle="padding: 0">
@ -21,6 +22,7 @@
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<DataTable :value="cars">
<template #header>
<div class="table-header">
@ -37,6 +38,7 @@
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">
<TabView>

5
src/views/dataview/DataViewDemo.vue
View File

@ -8,7 +8,9 @@
</div>
<div class="content-section implementation">
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
<div class="card">
<DataView :value="cars" :layout="layout" paginatorPosition="bottom" :paginator="true" :rows="20"
:sortOrder="sortOrder" :sortField="sortField">
<template #header>
<div class="p-grid p-nogutter">
<div class="p-col-6" style="text-align: left">
@ -45,6 +47,7 @@
</div>
</template>
</DataView>
</div>
</div>
<DataViewDoc />

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

@ -411,7 +411,7 @@ export default {
</a>
<CodeHighlight>
<template v-pre>
&lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;DataView :value="cars" :layout="layout" paginatorPosition="bottom" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt;
&lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-6" style="text-align: left"&gt;

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<div style="height: 800px">
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
</div>
@ -28,6 +29,7 @@
</DataTable>
</DeferredContent>
</div>
</div>
<DeferredContentDoc />
</div>

2
src/views/dialog/DialogDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<Button label="Show" icon="pi pi-external-link" @click="openBasic" />
<Dialog header="Godfather I" :visible.sync="displayBasic" :style="{width: '50vw'}">
@ -96,6 +97,7 @@
</template>
</Dialog>
</div>
</div>
<DialogDoc/>
</div>

2
src/views/dropdown/DropdownDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
@ -33,6 +34,7 @@
</template>
</Dropdown>
</div>
</div>
<DropdownDoc/>
</div>

2
src/views/editor/EditorDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Default</h5>
<Editor v-model="value1" editorStyle="height: 320px"/>
@ -22,6 +23,7 @@
</template>
</Editor>
</div>
</div>
<EditorDoc />
</div>

2
src/views/fieldset/FieldsetDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Regular</h5>
<Fieldset legend="Godfather I">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
@ -24,6 +25,7 @@
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
</Fieldset>
</div>
</div>
<FieldsetDoc/>
</div>

2
src/views/fileupload/FileUploadDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Advanced</h5>
<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
<template #empty>
@ -21,6 +22,7 @@
<h5>Basic with Auto</h5>
<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
</div>
</div>
<FileUploadDoc/>
</div>

18
src/views/formlayout/FormLayoutDemo.vue
View File

@ -9,6 +9,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Vertical</h5>
<div class="p-fluid">
<div class="p-field">
@ -20,7 +21,9 @@
<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">
@ -32,7 +35,9 @@
<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>
@ -46,7 +51,9 @@
<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">
@ -62,7 +69,9 @@
</div>
</div>
</div>
</div>
<div class="card">
<h5>Inline</h5>
<div class="p-formgroup-inline">
<div class="p-field">
@ -75,7 +84,9 @@
</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" />
@ -97,7 +108,9 @@
<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" />
@ -119,14 +132,18 @@
<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">
@ -155,6 +172,7 @@
</div>
</div>
</div>
</div>
<FormLayoutDoc />
</div>

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

@ -8,8 +8,10 @@
</div>
<div class="content-section implementation">
<div class="card">
<FullCalendar :events="events" :options="options" />
</div>
</div>
<FullCalendarDoc/>
</div>

2
src/views/galleria/GalleriaAdvancedDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000">
@ -32,6 +33,7 @@
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">
<TabView>

2
src/views/galleria/GalleriaAutoPlayDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:circular="true" :autoPlay="true" :transitionInterval="2000">
<template #item="slotProps">
@ -18,6 +19,7 @@
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">
<TabView>

2
src/views/galleria/GalleriaCaptionDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="{item}">
<img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
@ -23,6 +24,7 @@
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">
<TabView>

2
src/views/galleria/GalleriaDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
@ -17,6 +18,7 @@
</template>
</Galleria>
</div>
</div>
<GalleriaDoc />
</div>

6
src/views/galleria/GalleriaFullScreenDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>With Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic">
@ -20,7 +21,9 @@
</Galleria>
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
</div>
<div class="card">
<h5>Without Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2">
@ -33,7 +36,9 @@
</Galleria>
<Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
</div>
<div class="card">
<h5>Custom Content</h5>
<Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
@ -51,6 +56,7 @@
</div>
</div>
</div>
</div>
<div class="content-section documentation">
<TabView>

14
src/views/galleria/GalleriaIndicatorDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Indicators with Click Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true">
@ -15,7 +16,9 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<div class="card">
<h5>Indicators with Hover Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
@ -23,7 +26,9 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<div class="card">
<h5>Inside Content</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
@ -31,7 +36,9 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<div class="card">
<h5>Positioned at Top</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top">
@ -39,7 +46,9 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<div class="card">
<h5>Positioned at Left</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
@ -47,7 +56,9 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<div class="card">
<h5>Positioned at Right</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right">
@ -55,7 +66,9 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<div class="card">
<h5>Indicator Template</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
@ -69,6 +82,7 @@
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">
<TabView>

8
src/views/galleria/GalleriaNavigatorDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Item Navigators and Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true">
@ -18,7 +19,9 @@
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
</div>
<div class="card">
<h5>Item Navigators without Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
:showItemNavigators="true" :showThumbnails="false">
@ -29,7 +32,9 @@
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
</div>
<div class="card">
<h5>Item Navigators on Hover</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showItemNavigatorsOnHover="true">
@ -40,7 +45,9 @@
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
</div>
<div class="card">
<h5>Item Navigators and Indicators</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
@ -52,6 +59,7 @@
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">
<TabView>

2
src/views/galleria/GalleriaProgrammaticDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<div style="padding: .5rem 0">
<Button icon="pi pi-minus" @click="prev" class="p-button-secondary" />
<Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" />
@ -22,6 +23,7 @@
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">
<TabView>

2
src/views/galleria/GalleriaResponsiveDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@ -17,6 +18,7 @@
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">
<TabView>

8
src/views/galleria/GalleriaThumbnailDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Positioned at Bottom</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
<template #item="slotProps">
@ -17,7 +18,9 @@
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</template>
</Galleria>
</div>
<div class="card">
<h5>Positioned at Left</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px">
<template #item="slotProps">
@ -29,7 +32,9 @@
</div>
</template>
</Galleria>
</div>
<div class="card">
<h5>Positioned at Right</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px">
<template #item="slotProps">
@ -41,7 +46,9 @@
</div>
</template>
</Galleria>
</div>
<div class="card">
<h5>Positioned at Top</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 640px">
<template #item="slotProps">
@ -52,6 +59,7 @@
</template>
</Galleria>
</div>
</div>
<div class="content-section documentation">
<TabView>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Input</h5>
<Inplace :closable="true">
<template #display>
@ -44,6 +45,7 @@
</template>
</Inplace>
</div>
</div>
<InplaceDoc />
</div>

3
src/views/inputgroup/InputGroupDemo.vue
View File

@ -8,6 +8,8 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Addons</h5>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
@ -110,6 +112,7 @@
</div>
</div>
</div>
</div>
<InputGroupDoc/>
</div>

2
src/views/inputmask/InputMaskDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<div class="p-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
@ -40,6 +41,7 @@
</div>
</div>
</div>
</div>
<InputMaskDoc />
</div>

3
src/views/inputnumber/InputNumberDemo.vue
View File

@ -8,6 +8,8 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Numerals</h5>
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-3">
@ -107,6 +109,7 @@
</div>
</div>
</div>
</div>
<InputNumberDoc />
</div>

2
src/views/inputtext/InputTextDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<InputText type="text" v-model="value1" />
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
@ -43,6 +44,7 @@
<InputText type="text" class="p-inputtext-lg" placeholder="Large" />
</div>
</div>
</div>
<InputTextDoc />
</div>

2
src/views/listbox/ListboxDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Single</h5>
<Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" />
@ -21,6 +22,7 @@
</template>
</Listbox>
</div>
</div>
<ListboxDoc/>
</div>

2
src/views/megamenu/MegaMenuDemo.vue
View File

@ -8,12 +8,14 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Horizontal</h5>
<MegaMenu :model="items" />
<h5>Vertical</h5>
<MegaMenu :model="items" orientation="vertical"/>
</div>
</div>
<MegaMenuDoc />
</div>

2
src/views/menu/MenuDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Inline</h5>
<Menu :model="items" />
@ -15,6 +16,7 @@
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"/>
<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
</div>
</div>
<MenuDoc />
</div>

2
src/views/menubar/MenubarDemo.vue
View File

@ -8,12 +8,14 @@
</div>
<div class="content-section implementation">
<div class="card">
<Menubar :model="items">
<template #end>
<InputText placeholder="Search" type="text" />
</template>
</Menubar>
</div>
</div>
<MenubarDoc />
</div>

8
src/views/menumodel/MenuModel.vue
View File

@ -1,14 +1,10 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<div class="content-section documentation">
<h1>MenuModel</h1>
<p>PrimeVue menu components share a common api to specify the menuitems and submenus.</p>
</div>
</div>
<div class="content-section documentation">
<h5">MenuItem</h5>
<h5>MenuItem</h5>
<p>Core of the API is the MenuItem class that defines various options such as the label, icon and children of an item in a menu.</p>
<CodeHighlight lang="js">
const items: [

2
src/views/message/MessageDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Severities</h5>
<Message severity="success">Order Submitted</Message>
<Message severity="info">PrimeVue Rocks</Message>
@ -36,6 +37,7 @@
<InlineMessage />
</div>
</div>
</div>
<MessageDoc/>
</div>

2
src/views/multiselect/MultiSelectDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
@ -30,6 +31,7 @@
</template>
</MultiSelect>
</div>
</div>
<MultiSelectDoc/>
</div>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
<template #header>
List of Cars
@ -23,6 +24,7 @@
</template>
</OrderList>
</div>
</div>
<OrderListDoc />
</div>

4
src/views/organizationchart/OrganizationChartDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Advanced</h5>
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
@ -22,7 +23,9 @@
<span>{{slotProps.node.data.label}}</span>
</template>
</OrganizationChart>
</div>
<div class="card">
<h5>Basic</h5>
<OrganizationChart :value="data2">
<template #default="slotProps">
@ -30,6 +33,7 @@
</template>
</OrganizationChart>
</div>
</div>
<OrganizationChartDoc />
</div>

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

@ -8,12 +8,14 @@
</div>
<div class="content-section implementation">
<div class="card">
<Button type="button" label="Toggle" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel">
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
</OverlayPanel>
</div>
</div>
<OverlayPanelDoc/>
</div>

2
src/views/paginator/PaginatorDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
@ -26,6 +27,7 @@
<img :src="'demo/images/nature/' + image + '.jpg'" />
</div>
</div>
</div>
<PaginatorDoc />
</div>

2
src/views/panelmenu/PanelMenuDemo.vue
View File

@ -8,8 +8,10 @@
</div>
<div class="content-section implementation">
<div class="card">
<PanelMenu :model="items" />
</div>
</div>
<PanelMenuDoc />
</div>

2
src/views/password/PasswordDemo.vue
View File

@ -8,8 +8,10 @@
</div>
<div class="content-section implementation">
<div class="card">
<Password v-model="value" />
</div>
</div>
<PasswordDoc/>
</div>

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

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<PickList v-model="cars" listStyle="height:342px" dataKey="vin">
<template #sourceHeader>
Available
@ -26,6 +27,7 @@
</template>
</PickList>
</div>
</div>
<PickListDoc />
</div>

2
src/views/progressbar/ProgressBarDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Dynamic</h5>
<ProgressBar :value="value1" />
@ -17,6 +18,7 @@
<h5>Indeterminate</h5>
<ProgressBar mode="indeterminate" style="height: .5em" />
</div>
</div>
<ProgressBarDoc/>
</div>

2
src/views/progressspinner/ProgressSpinnerDemo.vue
View File

@ -8,12 +8,14 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<ProgressSpinner />
<h5>Custom</h5>
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
</div>
</div>
<ProgressSpinnerDoc />
</div>

2
src/views/radiobutton/RadioButtonDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<div class="p-field-radiobutton">
<RadioButton id="city1" name="city" value="Chicago" v-model="city" />
@ -34,6 +35,7 @@
</div>
<p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
</div>
</div>
<RadioButtonDoc/>
</div>

2
src/views/rating/RatingDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic {{val1}}</h5>
<Rating v-model="val1" />
@ -20,6 +21,7 @@
<h5>Disabled</h5>
<Rating :value="8" :disabled="true" :stars="10" />
</div>
</div>
<RatingDoc/>
</div>

2
src/views/scrollpanel/ScrollPanelDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<div class="p-grid">
<div class="p-col-12 p-md-4">
<ScrollPanel style="width: 100%; height: 200px">
@ -62,6 +63,7 @@
</div>
</div>
</div>
</div>
<ScrollPanelDoc />
</div>

2
src/views/selectbutton/SelectButtonDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Single</h5>
<SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
<p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
@ -27,6 +28,7 @@
</SelectButton>
<p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
</div>
</div>
<SelectButtonDoc/>
</div>

14
src/views/sidebar/SidebarDemo.vue
View File

@ -8,6 +8,14 @@
</div>
<div class="content-section implementation">
<div class="card">
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
<Button icon="pi pi-th-large" @click="visibleFull = true" />
</div>
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
<h1 style="fontWeight:normal">Left Sidebar</h1>
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
@ -37,12 +45,6 @@
<Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
</Sidebar>
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
<Button icon="pi pi-th-large" @click="visibleFull = true" />
</div>
<SidebarDoc/>

2
src/views/slider/SliderDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic: {{value1}}</h5>
<Slider v-model="value1" />
@ -24,6 +25,7 @@
<h5>Vertical: {{value5}}</h5>
<Slider v-model="value5" orientation="vertical" />
</div>
</div>
<SliderDoc/>
</div>

2
src/views/splitbutton/SplitButtonDemo.vue
View File

@ -8,6 +8,7 @@
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
@ -19,6 +20,7 @@
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
<SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
</div>
</div>
<SplitButtonDoc/>
</div>

4
src/views/steps/StepsDemo.vue
View File

@ -68,4 +68,8 @@ export default {
/deep/ b {
display: block
}
/deep/ .p-card-body {
padding: 2rem;
}
</style>

2
src/views/support/Support.vue
View File

@ -8,7 +8,7 @@
</div>
<div class="content-section documentation">
<h5">Community Support</h5>
<h5>Community Support</h5>
<p><a href="https://forum.primefaces.org/viewforum.php?f=110">Forum</a> is where the community users gather to seek support, post topics and discuss the technology. PrimeTek does not
guarantee response at forum although it is monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PrimeVue PRO support.</p>

3
src/views/tabmenu/CalendarDemo.vue
View File

@ -1,7 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-calendar" />
<h1>Calendar Component Content</h1>
<h5>Calendar Component Content</h5>
</div>
</template>

3
src/views/tabmenu/DocumentationDemo.vue
View File

@ -1,7 +1,6 @@
<template>
<div class="tabmenudemo-content">
<i class="pi pi-fw pi-file" />
<h1>Documentation Component Content</h1>
<h5>Documentation Component Content</h5>
</div>
</template>

Some files were not shown because too many files have changed in this diff Show More