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

Initiated docs

pull/12/head
cagataycivici 2019-03-20 10:57:32 +03:00
parent 8eab7184d1
commit bb1d3e1dba
10 changed files with 15054 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14778
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -34,5 +34,9 @@
"quill": "1.3.3",
"fullcalendar": "4.0.0-alpha.2",
"chart.js": "2.7.3"
},
"dependencies": {
"prism-es6": "^1.1.2",
"prismjs": "^1.15.0"
}
}

9
src/components/paginator/PageLinks.vue
View File

@ -14,13 +14,16 @@
}
},
render() {
return (<span class="p-paginator-pages">
{this.value.map((pageLink, i) => {
return (
<span class="p-paginator-pages">
{
this.value.map((pageLink, i) => {
return <button key={pageLink} class={['p-paginator-page p-paginator-element p-link', {
'p-highlight': ((pageLink - 1) === this.page)}]} on-click={e => this.onPageLinkClick(e, pageLink)}>{pageLink}</button>
})
}
</span>)
</span>
);
}
}
</script>

14
src/components/paginator/Paginator.vue
View File

@ -2,12 +2,12 @@
<div class="p-paginator p-component p-unselectable-text">
<template v-for="(item,i) of templateItems">
<FirstPageLink v-if="item === 'FirstPageLink'" :key="i" @click="changePageToFirst($event)" :disabled="isFirstPage" />
<PrevPageLink v-if="item === 'PrevPageLink'" :key="i" @click="changePageToPrev($event)" :disabled="isFirstPage"/>
<NextPageLink v-if="item === 'NextPageLink'" :key="i" @click="changePageToNext($event)" :disabled="isLastPage"/>
<LastPageLink v-if="item === 'LastPageLink'" :key="i" @click="changePageToLast($event)" :disabled="isLastPage"/>
<PageLinks v-if="item === 'PageLinks'" :key="i" :value="updatePageLinks" :page="page" @click="pageLinkClick($event)"/>
<CurrentPageReport v-if="item === 'CurrentPageReport'" :key="i" :template="currentPageReportTemplate" :page="page" :pageCount="pageCount"/>
<RowsPerPageDropdown v-if="item === 'RowsPerPageDropdown'" :key="i" :value="rows" :options="rowsPerPageOptions" @rowsChange="rowsChange($event)"/>
<PrevPageLink v-else-if="item === 'PrevPageLink'" :key="i" @click="changePageToPrev($event)" :disabled="isFirstPage" />
<NextPageLink v-else-if="item === 'NextPageLink'" :key="i" @click="changePageToNext($event)" :disabled="isLastPage" />
<LastPageLink v-else-if="item === 'LastPageLink'" :key="i" @click="changePageToLast($event)" :disabled="isLastPage" />
<PageLinks v-else-if="item === 'PageLinks'" :key="i" :value="updatePageLinks" :page="page" @click="pageLinkClick($event)" />
<CurrentPageReport v-else-if="item === 'CurrentPageReport'" :key="i" :template="currentPageReportTemplate" :page="page" :pageCount="pageCount" />
<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown'" :key="i" :value="rows" :options="rowsPerPageOptions" @rowsChange="rowsChange($event)" />
</template>
</div>
</template>
@ -20,8 +20,8 @@
import PageLinks from './PageLinks';
import PrevPageLink from './PrevPageLink';
import RowsPerPageDropdown from './RowsPerPageDropdown';
export default {
inheritAttrs: false,
props: {
totalRecords: {
type: Number,

5
src/main.js
View File

@ -42,9 +42,12 @@ import ToggleButton from './components/togglebutton/ToggleButton';
import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
import ValidationMessage from './components/validationmessage/ValidationMessage';
import CodeHighlight from './views/codehighlight/CodeHighlight';
import './assets/styles/primevue.css';
import 'primeflex/primeflex.css';
import 'primeicons/primeicons.css';
import 'prismjs/themes/prism-coy.css';
Vue.use(ToastService);
@ -90,6 +93,8 @@ Vue.component('ToggleButton', ToggleButton);
Vue.component('TriStateCheckbox', TriStateCheckbox);
Vue.component('ValidationMessage', ValidationMessage);
Vue.component('CodeHighlight', CodeHighlight);
new Vue({
router,
render: h => h(App)

28
src/views/codehighlight/CodeHighlight.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<pre :class="languageClass" ref="code">
<code>
<slot></slot>
</code>
</pre>
</template>
<script>
import Prism from 'prism-es6';
export default {
props: {
lang: {
type: String,
default: 'markup'
}
},
computed: {
languageClass() {
return 'language-' + this.lang;
}
},
mounted() {
Prism.highlightElement(this.$el.children[0]);
}
};
</script>

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

@ -14,7 +14,7 @@
<h3>Advanced with Templating, Filtering and Multiple Selection</h3>
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
<template slot-scope="{option}">
<div className="p-clearfix">
<div class="p-clearfix">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
<span style="float:right;margin:1.25em .5em 0 0">{{option.brand}}</span>
</div>

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

@ -9,22 +9,28 @@
<div class="content-section implementation">
<h3 class="first">Default</h3>
<Paginator :first="first" :rows="rows" :totalRecords="120" @change="onPageChange($event)" :rowsPerPageOptions="[10,20,30]"></Paginator>
<Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @change="onPageChange($event)" :rowsPerPageOptions="[10,20,30]"></Paginator>
<h3 class="first">Custom Template</h3>
<Paginator :first="first2" :rows="rows2" :totalRecords="120" @change="onPageChange2($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator>
<h3>Custom Template</h3>
<Paginator :first="first2" :rows="rows2" :totalRecords="totalRecords2" @change="onPageChangeCustom($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator>
</div>
<PaginatorDoc />
</div>
</template>
<script>
import PaginatorDoc from './PaginatorDoc';
export default {
data() {
return {
first: 0,
rows: 10,
totalRecords: 50,
first2: 0,
rows2:10
rows2: 1,
totalRecords2: 12
}
},
methods: {
@ -32,10 +38,13 @@
this.first = event.first;
this.rows = event.rows;
},
onPageChange2(event){
onPageChangeCustom(event) {
this.first2 = event.first;
this.rows2 = event.rows;
}
},
components: {
'PaginatorDoc': PaginatorDoc
}
}
</script>

202
src/views/paginator/PaginatorDoc.vue Normal file
View File

@ -0,0 +1,202 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<CodeHighlight lang="javascript">
import {Paginator} from 'primereact/paginator';
</CodeHighlight>
<h3>Getting Started</h3>
<p>Rows and TotalRecords define how many pages the paginator should display. Paginator below will have 10 pages.</p>
<CodeHighlight>
&lt;Paginator :rows="10" :totalRecords="120" &gt;&lt;/Paginator&gt;
</CodeHighlight>
<h3>Rows Per Page</h3>
<p>Number of items per page can be changed by the user using a dropdown if you define rowsPerPageOptions as an array of possible values. In this case,
rows property should also be updated
</p>
<h3>Template</h3>
<p>Paginator elements can be customized using the template property using the predefined keys, default value is
"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
can be placed inside a paginator.</p>
<ul>
<li>FirstPageLink</li>
<li>PrevPageLink</li>
<li>PageLinks</li>
<li>NextPageLink</li>
<li>LastPageLink</li>
<li>RowsPerPageDropdown</li>
<li>CurrentPageReport</li>
</ul>
<h3>Properties</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>totalRecords</td>
<td>number</td>
<td>0</td>
<td>Number of total records.</td>
</tr>
<tr>
<td>rows</td>
<td>number</td>
<td>0</td>
<td>Data count to display per page.</td>
</tr>
<tr>
<td>first</td>
<td>number</td>
<td>0</td>
<td>Zero-relative number of the first row to be displayed.</td>
</tr>
<tr>
<td>pageLinkSize</td>
<td>number</td>
<td>5</td>
<td>Number of page links to display.</td>
</tr>
<tr>
<td>rowsPerPageOptions</td>
<td>array</td>
<td>null</td>
<td>Array of integer values to display inside rows per page dropdown.</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>null</td>
<td>Inline style of the element.</td>
</tr>
<tr>
<td>class</td>
<td>string</td>
<td>null</td>
<td>Style class of the element.</td>
</tr>
<tr>
<td>template</td>
<td>string</td>
<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
<td>Template of the paginator.</td>
</tr>
<tr>
<td>leftContent</td>
<td>any</td>
<td>null</td>
<td>Content to inject into the left side of the paginator.</td>
</tr>
<tr>
<td>rightContent</td>
<td>any</td>
<td>null</td>
<td>Content to inject into the right side of the paginator.</td>
</tr>
<tr>
<td>currentPageReportTemplate</td>
<td>string</td>
<td>({currentPage} of {totalPages})</td>
<td>Template of the current page report element.</td>
</tr>
</tbody>
</table>
</div>
<h3>Events</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onPageChange</td>
<td>event.page: New page number <br/>
event.first: Index of first record <br/>
event.rows: Number of rows to display in new page <br/>
event.page: Index of the new page <br/>
event.pageCount: Total number of pages
</td>
<td>Callback to invoke when page changes, the event object contains information about the new state.</td>
</tr>
</tbody>
</table>
</div>
<h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">&#9679; theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-paginator</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-paginator-first</td>
<td>First page element.</td>
</tr>
<tr>
<td>p-paginator-prev</td>
<td>Previous page element.</td>
</tr>
<tr>
<td>p-paginator-pages</td>
<td>Container of page links.</td>
</tr>
<tr>
<td>p-paginator-page</td>
<td>A page link.</td>
</tr>
<tr>
<td>p-paginator-next</td>
<td>Next pge element.</td>
</tr>
<tr>
<td>p-paginator-last</td>
<td>Last page element.</td>
</tr>
<tr>
<td>p-paginator-rpp-options</td>
<td>Rows per page dropdown.</td>
</tr>
</tbody>
</table>
<h3>Dependencies</h3>
<p>None.</p>
</div>
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primereact/tree/master/src/showcase/paginator" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
</TabPanel>
</TabView>
</div>
</template>

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

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<h3 className="first">Basic</h3>
<h3 class="first">Basic</h3>
<SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
</div>
</div>