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

Fixed #1977

pull/1979/head
Tuğçe Küçükoğlu 2022-01-13 14:03:59 +03:00 committed by Tuğçe Küçükoğlu
parent f6fbaeb6f3
commit 8b872e37c2
166 changed files with 5201 additions and 5245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -55,7 +55,7 @@
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"gulp-uglifycss": "^1.0.6", "gulp-uglifycss": "^1.0.6",
"sass": "^1.45.0", "sass": "^1.45.0",
"primeflex": "2.0.0", "primeflex": "3.1.2",
"primeicons": "5.0.0", "primeicons": "5.0.0",
"prismjs": "^1.15.0", "prismjs": "^1.15.0",
"quill": "^1.3.7", "quill": "^1.3.7",

2
src/App.vue
View File

@ -2,7 +2,7 @@
<div class="layout-wrapper" :class="containerClass"> <div class="layout-wrapper" :class="containerClass">
<div class="layout-news" v-if="newsActive"> <div class="layout-news" v-if="newsActive">
<div class="layout-news-container" @click="redirect"> <div class="layout-news-container" @click="redirect">
<img class="layout-news-logo p-ml-2" src="./assets/images/topbar-primeblocks-device.png"> <img class="layout-news-logo ml-2" src="./assets/images/topbar-primeblocks-device.png">
<a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" class="layout-news-button"> <a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" class="layout-news-button">
Read More Read More
</a> </a>

124
src/AppConfigurator.vue
View File

@ -26,26 +26,26 @@
<p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p> <p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
<h5>Bootstrap</h5> <h5>Bootstrap</h5>
<div class="p-grid free-themes"> <div class="grid free-themes">
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-blue')"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-blue')">
<img src="demo/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" /> <img src="demo/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" />
</button> </button>
<span>Blue</span> <span>Blue</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-purple')"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-purple')">
<img src="demo/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" /> <img src="demo/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" />
</button> </button>
<span>Purple</span> <span>Purple</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-blue', true)">
<img src="demo/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" /> <img src="demo/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" />
</button> </button>
<span>Blue</span> <span>Blue</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-purple', true)">
<img src="demo/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" /> <img src="demo/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" />
</button> </button>
@ -54,26 +54,26 @@
</div> </div>
<h5>Material Design</h5> <h5>Material Design</h5>
<div class="p-grid free-themes"> <div class="grid free-themes">
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-light-indigo')"> <button class="p-link" type="button" @click="changeTheme($event, 'md-light-indigo')">
<img src="demo/images/themes/md-light-indigo.svg" alt="Material Light Indigo" /> <img src="demo/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-light-deeppurple')"> <button class="p-link" type="button" @click="changeTheme($event, 'md-light-deeppurple')">
<img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" /> <img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" />
</button> </button>
<span>Deep Purple</span> <span>Deep Purple</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-dark-indigo', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-indigo', true)">
<img src="demo/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" /> <img src="demo/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-dark-deeppurple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-deeppurple', true)">
<img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" /> <img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" />
</button> </button>
@ -82,26 +82,26 @@
</div> </div>
<h5>Material Design Compact</h5> <h5>Material Design Compact</h5>
<div class="p-grid free-themes"> <div class="grid free-themes">
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-indigo')"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-indigo')">
<img src="demo/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo"/> <img src="demo/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo"/>
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-deeppurple')"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-deeppurple')">
<img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" /> <img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" />
</button> </button>
<span>Deep Purple</span> <span>Deep Purple</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-indigo', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-indigo', true)">
<img src="demo/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" /> <img src="demo/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" />
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-deeppurple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-deeppurple', true)">
<img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" /> <img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" />
</button> </button>
@ -110,8 +110,8 @@
</div> </div>
<h5>Tailwind</h5> <h5>Tailwind</h5>
<div class="p-grid free-themes"> <div class="grid free-themes">
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'tailwind-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'tailwind-light')">
<img src="demo/images/themes/tailwind-light.png" alt="Tailwind Light"/> <img src="demo/images/themes/tailwind-light.png" alt="Tailwind Light"/>
</button> </button>
@ -120,8 +120,8 @@
</div> </div>
<h5>Fluent UI</h5> <h5>Fluent UI</h5>
<div class="p-grid free-themes"> <div class="grid free-themes">
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'fluent-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'fluent-light')">
<img src="demo/images/themes/fluent-light.png" alt="Fluent Light"/> <img src="demo/images/themes/fluent-light.png" alt="Fluent Light"/>
</button> </button>
@ -129,51 +129,51 @@
</div> </div>
</div> </div>
<h5 class="p-d-flex p-ai-center">PrimeOne Design - 2022 <Tag class="p-ml-3" value="NEW" rounded severity="success"></Tag></h5> <h5 class="flex align-items-center">PrimeOne Design - 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></h5>
<div class="p-grid free-themes"> <div class="grid free-themes">
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')">
<img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /> <img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
</button> </button>
<span>Lara Light Indigo</span> <span>Lara Light Indigo</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue')">
<img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /> <img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" />
</button> </button>
<span>Lara Light Blue</span> <span>Lara Light Blue</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple')">
<img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /> <img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" />
</button> </button>
<span>Lara Light Purple</span> <span>Lara Light Purple</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal')">
<img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" /> <img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" />
</button> </button>
<span>Lara Light Teal</span> <span>Lara Light Teal</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)">
<img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" /> <img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
</button> </button>
<span>Lara Dark Indigo</span> <span>Lara Dark Indigo</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)">
<img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" /> <img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
</button> </button>
<span>Lara Dark Blue</span> <span>Lara Dark Blue</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)">
<img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" /> <img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
</button> </button>
<span>Lara Dark Purple</span> <span>Lara Dark Purple</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)">
<img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" /> <img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
</button> </button>
@ -182,74 +182,74 @@
</div> </div>
<h5>PrimeOne Design - 2021</h5> <h5>PrimeOne Design - 2021</h5>
<div class="p-grid free-themes"> <div class="grid free-themes">
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-blue')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-blue')">
<img src="demo/images/themes/saga-blue.png" alt="Saga Blue" /> <img src="demo/images/themes/saga-blue.png" alt="Saga Blue" />
</button> </button>
<span>Saga Blue</span> <span>Saga Blue</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-green')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-green')">
<img src="demo/images/themes/saga-green.png" alt="Saga Green" /> <img src="demo/images/themes/saga-green.png" alt="Saga Green" />
</button> </button>
<span>Saga Green</span> <span>Saga Green</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-orange')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-orange')">
<img src="demo/images/themes/saga-orange.png" alt="Saga Orange" /> <img src="demo/images/themes/saga-orange.png" alt="Saga Orange" />
</button> </button>
<span>Saga Orange</span> <span>Saga Orange</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-purple')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-purple')">
<img src="demo/images/themes/saga-purple.png" alt="Saga Purple" /> <img src="demo/images/themes/saga-purple.png" alt="Saga Purple" />
</button> </button>
<span>Saga Purple</span> <span>Saga Purple</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-blue', true)">
<img src="demo/images/themes/vela-blue.png" alt="Vela Blue" /> <img src="demo/images/themes/vela-blue.png" alt="Vela Blue" />
</button> </button>
<span>Vela Blue</span> <span>Vela Blue</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-green', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-green', true)">
<img src="demo/images/themes/vela-green.png" alt="Vela Green" /> <img src="demo/images/themes/vela-green.png" alt="Vela Green" />
</button> </button>
<span>Vela Green</span> <span>Vela Green</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-orange', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-orange', true)">
<img src="demo/images/themes/vela-orange.png" alt="Vela Orange" /> <img src="demo/images/themes/vela-orange.png" alt="Vela Orange" />
</button> </button>
<span>Vela Orange</span> <span>Vela Orange</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-purple', true)">
<img src="demo/images/themes/vela-purple.png" alt="Vela Purple" /> <img src="demo/images/themes/vela-purple.png" alt="Vela Purple" />
</button> </button>
<span>Vela Purple</span> <span>Vela Purple</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-blue', true)">
<img src="demo/images/themes/arya-blue.png" alt="Arya Blue" /> <img src="demo/images/themes/arya-blue.png" alt="Arya Blue" />
</button> </button>
<span>Arya Blue</span> <span>Arya Blue</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-green', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-green', true)">
<img src="demo/images/themes/arya-green.png" alt="Arya Green" /> <img src="demo/images/themes/arya-green.png" alt="Arya Green" />
</button> </button>
<span>Arya Green</span> <span>Arya Green</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-orange', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-orange', true)">
<img src="demo/images/themes/arya-orange.png" alt="Arya Orange" /> <img src="demo/images/themes/arya-orange.png" alt="Arya Orange" />
</button> </button>
<span>Arya Orange</span> <span>Arya Orange</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-purple', true)">
<img src="demo/images/themes/arya-purple.png" alt="Arya Purple" /> <img src="demo/images/themes/arya-purple.png" alt="Arya Purple" />
</button> </button>
@ -259,38 +259,38 @@
<h4>Premium Themes</h4> <h4>Premium Themes</h4>
<p>Premium themes are only available exclusively for <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a> subscribers and therefore not included in PrimeVue core.</p> <p>Premium themes are only available exclusively for <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a> subscribers and therefore not included in PrimeVue core.</p>
<div class="p-grid free-themes"> <div class="grid free-themes">
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'soho-light')">
<img src="demo/images/themes/soho-light.png" alt="Soho Light" /> <img src="demo/images/themes/soho-light.png" alt="Soho Light" />
</button> </button>
<span>Soho Light</span> <span>Soho Light</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)">
<img src="demo/images/themes/soho-dark.png" alt="Soho Dark" /> <img src="demo/images/themes/soho-dark.png" alt="Soho Dark" />
</button> </button>
<span>Soho Dark</span> <span>Soho Dark</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'viva-light')">
<img src="demo/images/themes/viva-light.svg" alt="Viva Light" /> <img src="demo/images/themes/viva-light.svg" alt="Viva Light" />
</button> </button>
<span>Viva Light</span> <span>Viva Light</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)">
<img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" /> <img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" />
</button> </button>
<span>Viva Dark</span> <span>Viva Dark</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mira')"> <button class="p-link" type="button" @click="changeTheme($event, 'mira')">
<img src="demo/images/themes/mira.jpg" alt="Mira" /> <img src="demo/images/themes/mira.jpg" alt="Mira" />
</button> </button>
<span>Mira</span> <span>Mira</span>
</div> </div>
<div class="p-col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'nano')"> <button class="p-link" type="button" @click="changeTheme($event, 'nano')">
<img src="demo/images/themes/nano.jpg" alt="Mira" /> <img src="demo/images/themes/nano.jpg" alt="Mira" />
</button> </button>
@ -300,63 +300,63 @@
<h4>Admin Templates</h4> <h4>Admin Templates</h4>
<p>Beautifully crafted <a href="https://cli.vuejs.org">Vue CLI</a> application templates by the PrimeTek design team.</p> <p>Beautifully crafted <a href="https://cli.vuejs.org">Vue CLI</a> application templates by the PrimeTek design team.</p>
<div class="p-grid premium-themes"> <div class="grid premium-themes">
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/sakai-vue"> <a href="https://www.primefaces.org/sakai-vue">
<img alt="Ultima" src="./assets/images/layouts/sakai-vue.jpg"> <img alt="Ultima" src="./assets/images/layouts/sakai-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/atlantis-vue"> <a href="https://www.primefaces.org/layouts/atlantis-vue">
<img alt="Atlantis" src="./assets/images/layouts/atlantis-vue.jpg"> <img alt="Atlantis" src="./assets/images/layouts/atlantis-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/freya-vue"> <a href="https://www.primefaces.org/layouts/freya-vue">
<img alt="Freya" src="./assets/images/layouts/freya-vue.png"> <img alt="Freya" src="./assets/images/layouts/freya-vue.png">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/ultima-vue"> <a href="https://www.primefaces.org/layouts/ultima-vue">
<img alt="Ultima" src="./assets/images/layouts/ultima-vue.jpg"> <img alt="Ultima" src="./assets/images/layouts/ultima-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/diamond-vue"> <a href="https://www.primefaces.org/layouts/diamond-vue">
<img alt="Diamond" src="./assets/images/layouts/diamond-vue.jpg"> <img alt="Diamond" src="./assets/images/layouts/diamond-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/sapphire-vue"> <a href="https://www.primefaces.org/layouts/sapphire-vue">
<img alt="Sapphire" src="./assets/images/layouts/sapphire-vue.jpg"> <img alt="Sapphire" src="./assets/images/layouts/sapphire-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/serenity-vue"> <a href="https://www.primefaces.org/layouts/serenity-vue">
<img alt="Serenity" src="./assets/images/layouts/serenity-vue.jpg"> <img alt="Serenity" src="./assets/images/layouts/serenity-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/babylon-vue"> <a href="https://www.primefaces.org/layouts/babylon-vue">
<img alt="Babylon" src="./assets/images/layouts/babylon-vue.jpg"> <img alt="Babylon" src="./assets/images/layouts/babylon-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/avalon-vue"> <a href="https://www.primefaces.org/layouts/avalon-vue">
<img alt="Avalon" src="./assets/images/layouts/avalon-vue.jpg"> <img alt="Avalon" src="./assets/images/layouts/avalon-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/apollo-vue"> <a href="https://www.primefaces.org/layouts/apollo-vue">
<img alt="Apollo" src="./assets/images/layouts/apollo-vue.jpg"> <img alt="Apollo" src="./assets/images/layouts/apollo-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/roma-vue"> <a href="https://www.primefaces.org/layouts/roma-vue">
<img alt="Roma" src="./assets/images/layouts/roma-vue.jpg"> <img alt="Roma" src="./assets/images/layouts/roma-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/prestige-vue"> <a href="https://www.primefaces.org/layouts/prestige-vue">
<img alt="Prestige" src="./assets/images/layouts/prestige-vue.jpg"> <img alt="Prestige" src="./assets/images/layouts/prestige-vue.jpg">
</a> </a>

6
src/AppDemoActions.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="app-demoactions p-d-flex p-ai-end p-jc-end p-mt-3"> <div class="app-demoactions flex align-items-end justify-content-end mt-3">
<Button class="p-button-text p-button-rounded p-button-plain p-button-lg p-button-icon-only" @click="toggleMenu"> <Button class="p-button-text p-button-rounded p-button-plain p-button-lg p-button-icon-only" @click="toggleMenu">
<svg role="img" viewBox="0 0 24 24" width="17" height="17" fill="var(--text-color-secondary)" style="display:block"> <svg role="img" viewBox="0 0 24 24" width="17" height="17" fill="var(--text-color-secondary)" style="display:block">
<path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"/> <path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"/>
</svg> </svg>
</Button> </Button>
<Button icon="pi pi-github" class="p-button-text p-button-rounded p-button-plain p-button-lg p-ml-2" @click="viewOnGitHub"></Button> <Button icon="pi pi-github" class="p-button-text p-button-rounded p-button-plain p-button-lg ml-2" @click="viewOnGitHub"></Button>
<Button icon="pi pi-info-circle" class="p-button-text p-button-rounded p-button-plain p-button-lg p-ml-2" @click="scrollToDocs"></Button> <Button icon="pi pi-info-circle" class="p-button-text p-button-rounded p-button-plain p-button-lg ml-2" @click="scrollToDocs"></Button>
<Menu ref="menu" :model="items" :popup="true" style="width:14rem"/> <Menu ref="menu" :model="items" :popup="true" style="width:14rem"/>
</div> </div>
</template> </template>

2
src/AppDocumentation.vue
View File

@ -90,7 +90,7 @@ export default {
<!-- PrimeVue --> <!-- PrimeVue -->
<link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" /> <link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
<link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" /> <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" /> <link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" /> <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
<!-- Dependencies --> <!-- Dependencies -->

4
src/AppFooter.vue
View File

@ -6,10 +6,10 @@
</div> </div>
<div class="layout-footer-right"> <div class="layout-footer-right">
<a href="https://github.com/primefaces/primevue" class="p-mr-3"> <a href="https://github.com/primefaces/primevue" class="mr-3">
<i class="pi pi-github"></i> <i class="pi pi-github"></i>
</a> </a>
<a href="https://twitter.com/primevue" class="p-mr-3"> <a href="https://twitter.com/primevue" class="mr-3">
<i class="pi pi-twitter"></i> <i class="pi pi-twitter"></i>
</a> </a>
<a href="https://discord.com/invite/gzKFYnpmCY"> <a href="https://discord.com/invite/gzKFYnpmCY">

6
src/AppInputStyleSwitch.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="app-inputstyleswitch"> <div class="app-inputstyleswitch">
<h4>Input Style</h4> <h4>Input Style</h4>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="input_outlined" name="inputstyle" value="outlined" :modelValue="value" @update:modelValue="onChange" /> <RadioButton id="input_outlined" name="inputstyle" value="outlined" :modelValue="value" @update:modelValue="onChange" />
<label for="input_outlined">Outlined</label> <label for="input_outlined">Outlined</label>
</div> </div>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="input_filled" name="inputstyle" value="filled" :modelValue="value" @update:modelValue="onChange" /> <RadioButton id="input_filled" name="inputstyle" value="filled" :modelValue="value" @update:modelValue="onChange" />
<label for="input_filled">Filled</label> <label for="input_filled">Filled</label>
</div> </div>

2
src/AppTopBar.vue
View File

@ -48,7 +48,7 @@
<li class="topbar-submenu-header">FLUENT UI</li> <li class="topbar-submenu-header">FLUENT UI</li>
<li><a @click="changeTheme($event, 'fluent-light')"><img src="demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a></li> <li><a @click="changeTheme($event, 'fluent-light')"><img src="demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a></li>
<li class="topbar-submenu-header p-d-flex p-ai-center">PRIMEONE 2022 <Tag class="p-ml-3" value="NEW" rounded severity="success"></Tag></li> <li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li>
<li><a @click="changeTheme($event, 'lara-light-indigo')"><img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a></li> <li><a @click="changeTheme($event, 'lara-light-indigo')"><img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a></li>
<li><a @click="changeTheme($event, 'lara-light-blue')"><img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a></li> <li><a @click="changeTheme($event, 'lara-light-blue')"><img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a></li>
<li><a @click="changeTheme($event, 'lara-light-purple')"><img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a></li> <li><a @click="changeTheme($event, 'lara-light-purple')"><img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a></li>

2
src/assets/styles/app/_config.scss
View File

@ -129,7 +129,7 @@
} }
} }
.p-grid > div { .grid > div {
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;

1
src/assets/styles/app/_core.scss
View File

@ -95,7 +95,6 @@ pre[class*="language-"] {
border-left: 10px solid var(--surface-d) !important; border-left: 10px solid var(--surface-d) !important;
box-shadow: none !important; box-shadow: none !important;
background: var(--surface-e) !important; background: var(--surface-e) !important;
margin: 1em 0;
color: var(--text-color); color: var(--text-color);
font-size: 14px; font-size: 14px;

6
src/assets/styles/app/_home.scss
View File

@ -71,7 +71,7 @@
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
.p-col-12 { .col-12 {
padding: 1rem; padding: 1rem;
} }
@ -118,7 +118,7 @@
width: 100%; width: 100%;
} }
.p-grid > div { .grid > div {
padding: 2rem .5rem; padding: 2rem .5rem;
} }
} }
@ -171,7 +171,7 @@
margin-top: 10px; margin-top: 10px;
} }
.p-md-6:last-child { .md:col-6:last-child {
text-align: center; text-align: center;
} }

2
src/components/treetable/TreeTable.vue
View File

@ -8,7 +8,7 @@
<div class="p-treetable-header" v-if="$slots.header"> <div class="p-treetable-header" v-if="$slots.header">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
<TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions" <TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator"> :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
<template #start v-if="$slots.paginatorstart"> <template #start v-if="$slots.paginatorstart">
<slot name="paginatorstart"></slot> <slot name="paginatorstart"></slot>

98
src/views/Home.vue
View File

@ -11,10 +11,10 @@
<div class="features"> <div class="features">
<h4>Features</h4> <h4>Features</h4>
<p>Congratulations! <span role="img" aria-label="celebrate" class="p-mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p> <p>Congratulations! <span role="img" aria-label="celebrate" class="mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="feature-card"> <div class="feature-card">
<img alt="components" src="../assets/images/home/vue-components.png" /> <img alt="components" src="../assets/images/home/vue-components.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
@ -23,7 +23,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="feature-card"> <div class="feature-card">
<img alt="opensource" src="../assets/images/home/vue-opensource.png" /> <img alt="opensource" src="../assets/images/home/vue-opensource.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
@ -32,7 +32,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="feature-card"> <div class="feature-card">
<img alt="themes" src="../assets/images/home/vue-themes.png" /> <img alt="themes" src="../assets/images/home/vue-themes.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
@ -41,7 +41,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="feature-card"> <div class="feature-card">
<img alt="templates" src="../assets/images/home/vue-templates.png" /> <img alt="templates" src="../assets/images/home/vue-templates.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
@ -50,7 +50,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="feature-card"> <div class="feature-card">
<img alt="accesibility" src="../assets/images/home/vue-accesibility.png" /> <img alt="accesibility" src="../assets/images/home/vue-accesibility.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
@ -59,7 +59,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="feature-card"> <div class="feature-card">
<img alt="pro" src="../assets/images/home/vue-pro.png" /> <img alt="pro" src="../assets/images/home/vue-pro.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
@ -68,7 +68,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="feature-card"> <div class="feature-card">
<img alt="productivity" src="../assets/images/home/vue-productivity.png" /> <img alt="productivity" src="../assets/images/home/vue-productivity.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
@ -77,7 +77,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="feature-card"> <div class="feature-card">
<img alt="community" src="../assets/images/home/vue-community.png" /> <img alt="community" src="../assets/images/home/vue-community.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
@ -86,7 +86,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="feature-card"> <div class="feature-card">
<img alt="mobile" src="../assets/images/home/vue-mobile.png" /> <img alt="mobile" src="../assets/images/home/vue-mobile.png" />
<div class="feature-card-detail"> <div class="feature-card-detail">
@ -109,19 +109,19 @@
<div class="whouses"> <div class="whouses">
<h4>Key Users</h4> <h4>Key Users</h4>
<p>The creator of PrimeVue is PrimeTek Informatics, the distinguished component library vendor who built popular open source projects such as PrimeFaces, PrimeNG and PrimeReact over the past years.</p> <p>The creator of PrimeVue is PrimeTek Informatics, the distinguished component library vendor who built popular open source projects such as PrimeFaces, PrimeNG and PrimeReact over the past years.</p>
<div class="p-grid"> <div class="grid">
<div class="p-col-6 p-md-2"><img alt="airbus" src="../assets/images/home/airbus.svg"/></div> <div class="col-6 md:col-2"><img alt="airbus" src="../assets/images/home/airbus.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="amex" src="../assets/images/home/amex.svg"/></div> <div class="col-6 md:col-2"><img alt="amex" src="../assets/images/home/amex.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="bmw" src="../assets/images/home/nvidia.svg"/></div> <div class="col-6 md:col-2"><img alt="bmw" src="../assets/images/home/nvidia.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="ebay" src="../assets/images/home/ebay.svg"/></div> <div class="col-6 md:col-2"><img alt="ebay" src="../assets/images/home/ebay.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="ford" src="../assets/images/home/ford.svg"/></div> <div class="col-6 md:col-2"><img alt="ford" src="../assets/images/home/ford.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="fox" src="../assets/images/home/fox.svg"/></div> <div class="col-6 md:col-2"><img alt="fox" src="../assets/images/home/fox.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="lufthansa" src="../assets/images/home/lufthansa.svg"/></div> <div class="col-6 md:col-2"><img alt="lufthansa" src="../assets/images/home/lufthansa.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="mercedes" src="../assets/images/home/mercedes.svg"/></div> <div class="col-6 md:col-2"><img alt="mercedes" src="../assets/images/home/mercedes.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="sap" src="../assets/images/home/sap.svg"/></div> <div class="col-6 md:col-2"><img alt="sap" src="../assets/images/home/sap.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="unicredit" src="../assets/images/home/unicredit.svg"/></div> <div class="col-6 md:col-2"><img alt="unicredit" src="../assets/images/home/unicredit.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="verizon" src="../assets/images/home/verizon.svg"/></div> <div class="col-6 md:col-2"><img alt="verizon" src="../assets/images/home/verizon.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="viacom" src="../assets/images/home/viacom.svg"/></div> <div class="col-6 md:col-2"><img alt="viacom" src="../assets/images/home/viacom.svg"/></div>
</div> </div>
</div> </div>
@ -129,68 +129,68 @@
<h4>Premium Application Templates</h4> <h4>Premium Application Templates</h4>
<p>Gorgeous Vue-CLI application templates designed by professional designers and implemented by Vue Experts to help you reach your goals in no time.</p> <p>Gorgeous Vue-CLI application templates designed by professional designers and implemented by Vue Experts to help you reach your goals in no time.</p>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/sakai-vue"> <a href="https://www.primefaces.org/sakai-vue">
<img alt="Sakai" src="../assets/images/layouts/sakai-vue.jpg"> <img alt="Sakai" src="../assets/images/layouts/sakai-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/layouts/atlantis-vue"> <a href="https://www.primefaces.org/layouts/atlantis-vue">
<img alt="Atlantis" src="../assets/images/layouts/atlantis-vue.jpg"> <img alt="Atlantis" src="../assets/images/layouts/atlantis-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/layouts/freya-vue"> <a href="https://www.primefaces.org/layouts/freya-vue">
<img alt="Freya" src="../assets/images/layouts/freya-vue.png"> <img alt="Freya" src="../assets/images/layouts/freya-vue.png">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/layouts/ultima-vue"> <a href="https://www.primefaces.org/layouts/ultima-vue">
<img alt="Ultima" src="../assets/images/layouts/ultima-vue.jpg"> <img alt="Ultima" src="../assets/images/layouts/ultima-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/layouts/diamond-vue"> <a href="https://www.primefaces.org/layouts/diamond-vue">
<img alt="Diamond" src="../assets/images/layouts/diamond-vue.jpg"> <img alt="Diamond" src="../assets/images/layouts/diamond-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/layouts/sapphire-vue"> <a href="https://www.primefaces.org/layouts/sapphire-vue">
<img alt="Sapphire" src="../assets/images/layouts/sapphire-vue.jpg"> <img alt="Sapphire" src="../assets/images/layouts/sapphire-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/layouts/serenity-vue"> <a href="https://www.primefaces.org/layouts/serenity-vue">
<img alt="Serenity" src="../assets/images/layouts/serenity-vue.jpg"> <img alt="Serenity" src="../assets/images/layouts/serenity-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/layouts/avalon-vue"> <a href="https://www.primefaces.org/layouts/avalon-vue">
<img alt="Avalon" src="../assets/images/layouts/avalon-vue.jpg"> <img alt="Avalon" src="../assets/images/layouts/avalon-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/layouts/babylon-vue"> <a href="https://www.primefaces.org/layouts/babylon-vue">
<img alt="Babylon" src="../assets/images/layouts/babylon-vue.jpg"> <img alt="Babylon" src="../assets/images/layouts/babylon-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/layouts/apollo-vue"> <a href="https://www.primefaces.org/layouts/apollo-vue">
<img alt="Apollo" src="../assets/images/layouts/apollo-vue.jpg"> <img alt="Apollo" src="../assets/images/layouts/apollo-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/layouts/roma-vue"> <a href="https://www.primefaces.org/layouts/roma-vue">
<img alt="Roma" src="../assets/images/layouts/roma-vue.jpg"> <img alt="Roma" src="../assets/images/layouts/roma-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<a href="https://www.primefaces.org/layouts/prestige-vue"> <a href="https://www.primefaces.org/layouts/prestige-vue">
<img alt="Prestige" src="../assets/images/layouts/prestige-vue.jpg"> <img alt="Prestige" src="../assets/images/layouts/prestige-vue.jpg">
</a> </a>
</div> </div>
<div class="p-col-12 p-md-3"></div> <div class="col-12 md:col-3"></div>
</div> </div>
</div> </div>
<div class="primevue-designer"> <div class="primevue-designer">
@ -199,8 +199,8 @@
and a Vue-CLI application to test your themes with ease along with built-in theme samples that are embedded in PrimeVue Core.</p> and a Vue-CLI application to test your themes with ease along with built-in theme samples that are embedded in PrimeVue Core.</p>
<p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> to learn more about the features and interact with the <a href="https://www.primefaces.org/designer-vue">live editor</a>.</p> <p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> to learn more about the features and interact with the <a href="https://www.primefaces.org/designer-vue">live editor</a>.</p>
<div class="p-grid"> <div class="grid">
<div class="p-col-12"> <div class="col-12">
<img alt="PrimeVue Designer" src="../assets/images/primevue-designer.jpg" /> <img alt="PrimeVue Designer" src="../assets/images/primevue-designer.jpg" />
</div> </div>
@ -208,40 +208,40 @@
</div> </div>
<div class="primeblocks"> <div class="primeblocks">
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<h4 class="pro-title">Vue UI Blocks Powered by PrimeVue</h4> <h4 class="pro-title">Vue UI Blocks Powered by PrimeVue</h4>
<p>150+ ready to use UI blocks to build spectacular applications in no time.</p> <p>150+ ready to use UI blocks to build spectacular applications in no time.</p>
<a class="action-button" href="https://www.primefaces.org/primeblocks-vue">LEARN MORE</a> <a class="action-button" href="https://www.primefaces.org/primeblocks-vue">LEARN MORE</a>
</div> </div>
<div class="p-col-12 p-md-6 p-text-center"> <div class="col-12 md:col-6 text-center">
<img alt="primeblocks-vue" src="../assets/images/primeblocks.png" class="section-image"> <img alt="primeblocks-vue" src="../assets/images/primeblocks.png" class="section-image">
</div> </div>
</div> </div>
</div> </div>
<div class="primeflex"> <div class="primeflex">
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<h3 class="pro-title">PrimeFlex: Perfect CSS Utility Companion</h3> <h3 class="pro-title">PrimeFlex: Perfect CSS Utility Companion</h3>
<p>PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.</p> <p>PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.</p>
<a class="action-button" href="https://www.primefaces.org/primeflex">LEARN MORE</a> <a class="action-button" href="https://www.primefaces.org/primeflex">LEARN MORE</a>
</div> </div>
<div class="p-col-12 p-md-6 p-text-center"> <div class="col-12 md:col-6 text-center">
<img alt="primeflex" src="../assets/images/primeflex.png" class="section-image"> <img alt="primeflex" src="../assets/images/primeflex.png" class="section-image">
</div> </div>
</div> </div>
</div> </div>
<div class="prosupport"> <div class="prosupport">
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<h4>PrimeVue PRO Support</h4> <h4>PrimeVue PRO Support</h4>
<p>No time to wait for a response at forum or issue tracker? Then PrimeVue PRO Support is definitely for you.</p> <p>No time to wait for a response at forum or issue tracker? Then PrimeVue PRO Support is definitely for you.</p>
<p>PrimeVUE PRO is an exceptional support service where you'll contact the PrimeTek via a private channel and receive assistance just in a couple of hours. Optionally PrimeVue PRO offers the ability to request changes and new features for the component library.</p> <p>PrimeVUE PRO is an exceptional support service where you'll contact the PrimeTek via a private channel and receive assistance just in a couple of hours. Optionally PrimeVue PRO offers the ability to request changes and new features for the component library.</p>
<router-link to="/support" class="action-button">LEARN MORE</router-link> <router-link to="/support" class="action-button">LEARN MORE</router-link>
</div> </div>
<div class="p-col-12 p-md-6"> <div class="col-12 md:col-6">
<img alt="PRO" src="../assets/images/home/asset-pro.png" /> <img alt="PRO" src="../assets/images/home/asset-pro.png" />
</div> </div>
</div> </div>

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

@ -51,10 +51,10 @@
</Accordion> </Accordion>
<h5>Programmatic</h5> <h5>Programmatic</h5>
<div class="p-pb-3"> <div class="pb-3">
<Button @click="active = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
<Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" /> <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
<Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" /> <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
</div> </div>
<Accordion v-model:activeIndex="active"> <Accordion v-model:activeIndex="active">

18
src/views/accordion/AccordionDoc.vue
View File

@ -370,10 +370,10 @@ export default {
</Accordion> </Accordion>
<h5>Programmatic</h5> <h5>Programmatic</h5>
<div class="p-pb-3"> <div class="pb-3">
<Button @click="active = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
<Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" /> <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
<Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" /> <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
</div> </div>
<Accordion v-model:activeIndex="active"> <Accordion v-model:activeIndex="active">
@ -499,10 +499,10 @@ export default {
</Accordion> </Accordion>
<h5>Programmatic</h5> <h5>Programmatic</h5>
<div class="p-pb-3"> <div class="pb-3">
<Button @click="active = 0" class="p-button-text" label="Activate 1st" /> <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
<Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" /> <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
<Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" /> <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
</div> </div>
<Accordion v-model:activeIndex="active"> <Accordion v-model:activeIndex="active">
@ -630,10 +630,10 @@ export default {
</p-accordion> </p-accordion>
<h5>Programmatic</h5> <h5>Programmatic</h5>
<div class="p-pb-3"> <div class="pb-3">
<p-button @click="active = 0" class="p-button-text" label="Activate 1st"></p-button> <p-button @click="active = 0" class="p-button-text" label="Activate 1st"></p-button>
<p-button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd"></p-button> <p-button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd"></p-button>
<p-button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd"></p-button> <p-button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd"></p-button>
</div> </div>
<p-accordion v-model:active-index="active"> <p-accordion v-model:active-index="active">

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

@ -16,7 +16,7 @@
<h5>Grouped</h5> <h5>Grouped</h5>
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items"> <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
<div>{{slotProps.item.label}}</div> <div>{{slotProps.item.label}}</div>
</div> </div>

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

@ -441,9 +441,9 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items"> <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div class="p-ml-2">{{slotProps.item.label}}</div> <div class="ml-2">{{slotProps.item.label}}</div>
</div> </div>
</template> </template>
</AutoComplete> </AutoComplete>
@ -453,7 +453,7 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div class="p-ml-2">{{slotProps.item.name}}</div> <div class="ml-2">{{slotProps.item.name}}</div>
</div> </div>
</template> </template>
</AutoComplete> </AutoComplete>
@ -578,9 +578,9 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items"> <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div class="p-ml-2">{{slotProps.item.label}}</div> <div class="ml-2">{{slotProps.item.label}}</div>
</div> </div>
</template> </template>
</AutoComplete> </AutoComplete>
@ -590,7 +590,7 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div class="p-ml-2">{{slotProps.item.name}}</div> <div class="ml-2">{{slotProps.item.name}}</div>
</div> </div>
</template> </template>
</AutoComplete> </AutoComplete>
@ -712,9 +712,9 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<p-autocomplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" option-group-label="label" option-group-children="items"> <p-autocomplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" option-group-label="label" option-group-children="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div class="p-ml-2">{{slotProps.item.label}}</div> <div class="ml-2">{{slotProps.item.label}}</div>
</div> </div>
</template> </template>
</p-autocomplete> </p-autocomplete>
@ -724,7 +724,7 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div class="p-ml-2">{{slotProps.item.name}}</div> <div class="ml-2">{{slotProps.item.name}}</div>
</div> </div>
</template> </template>
</p-autocomplete> </p-autocomplete>

58
src/views/avatar/AvatarDemo.vue
View File

@ -9,53 +9,53 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label</h5> <h5>Label</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" /> <Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/> <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /> <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label - Circle</h5> <h5>Label - Circle</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /> <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /> <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label - Badge</h5> <h5>Label - Badge</h5>
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" /> <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
</div> </div>
</div> </div>
</div> </div>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon</h5> <h5>Icon</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /> <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon - Circle</h5> <h5>Icon - Circle</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon - Badge</h5> <h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/> <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
@ -63,20 +63,20 @@
</div> </div>
</div> </div>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Image</h5> <h5>Image</h5>
<Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar image="demo/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" size="large" shape="circle" /> <Avatar image="demo/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="demo/images/avatar/onyamalimba.png" class="p-mr-2" shape="circle" /> <Avatar image="demo/images/avatar/onyamalimba.png" class="mr-2" shape="circle" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Avatar Group</h5> <h5>Avatar Group</h5>
<AvatarGroup class="p-mb-3"> <AvatarGroup class="mb-3">
<Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/> <Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/>
<Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/> <Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/>
<Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/> <Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/>
@ -87,7 +87,7 @@
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Image - Badge</h5> <h5>Image - Badge</h5>
<Avatar image="demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" /> <Avatar image="demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" />

168
src/views/avatar/AvatarDoc.vue
View File

@ -190,26 +190,26 @@ export default {
tabName: 'Options API Source', tabName: 'Options API Source',
content: ` content: `
<template> <template>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label</h5> <h5>Label</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" /> <Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/> <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /> <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label - Circle</h5> <h5>Label - Circle</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /> <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /> <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label - Badge</h5> <h5>Label - Badge</h5>
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" /> <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
@ -217,26 +217,26 @@ export default {
</div> </div>
</div> </div>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon</h5> <h5>Icon</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /> <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon - Circle</h5> <h5>Icon - Circle</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon - Badge</h5> <h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/> <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
@ -244,20 +244,20 @@ export default {
</div> </div>
</div> </div>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Image</h5> <h5>Image</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" /> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="large" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" /> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" shape="circle" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Avatar Group</h5> <h5>Avatar Group</h5>
<AvatarGroup class="p-mb-3"> <AvatarGroup class="mb-3">
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
@ -268,7 +268,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Image - Badge</h5> <h5>Image - Badge</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" /> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
@ -287,26 +287,26 @@ export default {
tabName: 'Composition API Source', tabName: 'Composition API Source',
content: ` content: `
<template> <template>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label</h5> <h5>Label</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" /> <Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/> <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /> <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label - Circle</h5> <h5>Label - Circle</h5>
<Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /> <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /> <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label - Badge</h5> <h5>Label - Badge</h5>
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" /> <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
@ -314,26 +314,26 @@ export default {
</div> </div>
</div> </div>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon</h5> <h5>Icon</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /> <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon - Circle</h5> <h5>Icon - Circle</h5>
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /> <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon - Badge</h5> <h5>Icon - Badge</h5>
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/> <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
@ -341,20 +341,20 @@ export default {
</div> </div>
</div> </div>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Image</h5> <h5>Image</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle" /> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" /> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="large" shape="circle" />
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" /> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" shape="circle" />
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Avatar Group</h5> <h5>Avatar Group</h5>
<AvatarGroup class="p-mb-3"> <AvatarGroup class="mb-3">
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
@ -365,7 +365,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Image - Badge</h5> <h5>Image - Badge</h5>
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" /> <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
@ -385,26 +385,26 @@ export default {
<script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"><\\/script> <script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`, <script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
content: `<div id="app"> content: `<div id="app">
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label</h5> <h5>Label</h5>
<p-avatar label="P" class="p-mr-2" size="xlarge"></p-avatar> <p-avatar label="P" class="mr-2" size="xlarge"></p-avatar>
<p-avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar> <p-avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
<p-avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar> <p-avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label - Circle</h5> <h5>Label - Circle</h5>
<p-avatar label="P" class="p-mr-2" size="xlarge" shape="circle"></p-avatar> <p-avatar label="P" class="mr-2" size="xlarge" shape="circle"></p-avatar>
<p-avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar> <p-avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
<p-avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar> <p-avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Label - Badge</h5> <h5>Label - Badge</h5>
<p-avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4"></p-avatar> <p-avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4"></p-avatar>
@ -412,26 +412,26 @@ export default {
</div> </div>
</div> </div>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon</h5> <h5>Icon</h5>
<p-avatar icon="pi pi-user" class="p-mr-2" size="xlarge"></p-avatar> <p-avatar icon="pi pi-user" class="mr-2" size="xlarge"></p-avatar>
<p-avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar> <p-avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
<p-avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar> <p-avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon - Circle</h5> <h5>Icon - Circle</h5>
<p-avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle"></p-avatar> <p-avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle"></p-avatar>
<p-avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar> <p-avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
<p-avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar> <p-avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Icon - Badge</h5> <h5>Icon - Badge</h5>
<p-avatar icon="pi pi-user" size="xlarge" v-badge="4"></p-avatar> <p-avatar icon="pi pi-user" size="xlarge" v-badge="4"></p-avatar>
@ -439,20 +439,20 @@ export default {
</div> </div>
</div> </div>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Image</h5> <h5>Image</h5>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle"></p-avatar> <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="xlarge" shape="circle"></p-avatar>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle"></p-avatar> <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="large" shape="circle"></p-avatar>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle"></p-avatar> <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" shape="circle"></p-avatar>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>p-avatar Group</h5> <h5>p-avatar Group</h5>
<p-avatargroup class="p-mb-3"> <p-avatargroup class="mb-3">
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar> <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
@ -463,7 +463,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Image - Badge</h5> <h5>Image - Badge</h5>
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4"></p-avatar> <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4"></p-avatar>

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

@ -11,24 +11,24 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Numbers</h5> <h5>Numbers</h5>
<Badge value="2" class="p-mr-2"></Badge> <Badge value="2" class="mr-2"></Badge>
<Badge value="8" severity="success" class="p-mr-2"></Badge> <Badge value="8" severity="success" class="mr-2"></Badge>
<Badge value="4" severity="info" class="p-mr-2"></Badge> <Badge value="4" severity="info" class="mr-2"></Badge>
<Badge value="12" severity="warning" class="p-mr-2"></Badge> <Badge value="12" severity="warning" class="mr-2"></Badge>
<Badge value="3" severity="danger"></Badge> <Badge value="3" severity="danger"></Badge>
<h5 class="p-mb-4">Positioned Badge</h5> <h5 class="mb-4">Positioned Badge</h5>
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i> <i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i> <i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i> <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Button Badge</h5> <h5>Button Badge</h5>
<Button type="button" label="Emails" badge="8" class="p-mr-2" /> <Button type="button" label="Emails" badge="8" class="mr-2" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /> <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Sizes</h5> <h5>Sizes</h5>
<Badge value="2" class="p-mr-2"></Badge> <Badge value="2" class="mr-2"></Badge>
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge> <Badge value="4" class="mr-2" size="large" severity="warning"></Badge>
<Badge value="6" size="xlarge" severity="success"></Badge> <Badge value="6" size="xlarge" severity="success"></Badge>
</div> </div>
</div> </div>

60
src/views/badge/BadgeDoc.vue
View File

@ -206,24 +206,24 @@ export default {
<template> <template>
<div> <div>
<h5>Numbers</h5> <h5>Numbers</h5>
<Badge value="2" class="p-mr-2"></Badge> <Badge value="2" class="mr-2"></Badge>
<Badge value="8" severity="success" class="p-mr-2"></Badge> <Badge value="8" severity="success" class="mr-2"></Badge>
<Badge value="4" severity="info" class="p-mr-2"></Badge> <Badge value="4" severity="info" class="mr-2"></Badge>
<Badge value="12" severity="warning" class="p-mr-2"></Badge> <Badge value="12" severity="warning" class="mr-2"></Badge>
<Badge value="3" severity="danger"></Badge> <Badge value="3" severity="danger"></Badge>
<h5 class="p-mb-4">Positioned Badge</h5> <h5 class="mb-4">Positioned Badge</h5>
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i> <i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i> <i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i> <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Button Badge</h5> <h5>Button Badge</h5>
<Button type="button" label="Emails" badge="8" class="p-mr-2" /> <Button type="button" label="Emails" badge="8" class="mr-2" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /> <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Sizes</h5> <h5>Sizes</h5>
<Badge value="2" class="p-mr-2"></Badge> <Badge value="2" class="mr-2"></Badge>
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge> <Badge value="4" class="mr-2" size="large" severity="warning"></Badge>
<Badge value="6" size="xlarge" severity="success"></Badge> <Badge value="6" size="xlarge" severity="success"></Badge>
</div> </div>
</template> </template>
@ -240,24 +240,24 @@ export default {
<template> <template>
<div> <div>
<h5>Numbers</h5> <h5>Numbers</h5>
<Badge value="2" class="p-mr-2"></Badge> <Badge value="2" class="mr-2"></Badge>
<Badge value="8" severity="success" class="p-mr-2"></Badge> <Badge value="8" severity="success" class="mr-2"></Badge>
<Badge value="4" severity="info" class="p-mr-2"></Badge> <Badge value="4" severity="info" class="mr-2"></Badge>
<Badge value="12" severity="warning" class="p-mr-2"></Badge> <Badge value="12" severity="warning" class="mr-2"></Badge>
<Badge value="3" severity="danger"></Badge> <Badge value="3" severity="danger"></Badge>
<h5 class="p-mb-4">Positioned Badge</h5> <h5 class="mb-4">Positioned Badge</h5>
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i> <i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i> <i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i> <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Button Badge</h5> <h5>Button Badge</h5>
<Button type="button" label="Emails" badge="8" class="p-mr-2" /> <Button type="button" label="Emails" badge="8" class="mr-2" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /> <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Sizes</h5> <h5>Sizes</h5>
<Badge value="2" class="p-mr-2"></Badge> <Badge value="2" class="mr-2"></Badge>
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge> <Badge value="4" class="mr-2" size="large" severity="warning"></Badge>
<Badge value="6" size="xlarge" severity="success"></Badge> <Badge value="6" size="xlarge" severity="success"></Badge>
</div> </div>
</template> </template>
@ -273,24 +273,24 @@ export default {
<script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`, <script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
content: `<div id="app"> content: `<div id="app">
<h5>Numbers</h5> <h5>Numbers</h5>
<p-badge value="2" class="p-mr-2"></p-badge> <p-badge value="2" class="mr-2"></p-badge>
<p-badge value="8" severity="success" class="p-mr-2"></p-badge> <p-badge value="8" severity="success" class="mr-2"></p-badge>
<p-badge value="4" severity="info" class="p-mr-2"></p-badge> <p-badge value="4" severity="info" class="mr-2"></p-badge>
<p-badge value="12" severity="warning" class="p-mr-2"></p-badge> <p-badge value="12" severity="warning" class="mr-2"></p-badge>
<p-badge value="3" severity="danger"></p-badge> <p-badge value="3" severity="danger"></p-badge>
<h5 class="p-mb-4">Positioned Badge</h5> <h5 class="mb-4">Positioned Badge</h5>
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i> <i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i> <i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i> <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
<h5>Button Badge</h5> <h5>Button Badge</h5>
<p-button type="button" label="Emails" badge="8" class="p-mr-2"></p-button> <p-button type="button" label="Emails" badge="8" class="mr-2"></p-button>
<p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button> <p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
<h5>Sizes</h5> <h5>Sizes</h5>
<p-badge value="2" class="p-mr-2"></p-badge> <p-badge value="2" class="mr-2"></p-badge>
<p-badge value="4" class="p-mr-2" size="large" severity="warning"></p-badge> <p-badge value="4" class="mr-2" size="large" severity="warning"></p-badge>
<p-badge value="6" size="xlarge" severity="success"></p-badge> <p-badge value="6" size="xlarge" severity="success"></p-badge>
</div> </div>

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

@ -115,12 +115,12 @@
<Button type="button" label="Search" :loading="loading[3]" @click="load(3)" /> <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
<h5>Templating</h5> <h5>Templating</h5>
<Button type="button" class="p-px-3"> <Button type="button" class="px-3">
<img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/> <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
</Button> </Button>
<Button type="button" class="p-button-outlined p-button-success"> <Button type="button" class="p-button-outlined p-button-success">
<img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" /> <img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" />
<span class="p-ml-2 p-text-bold">PrimeVue</span> <span class="ml-2 font-bold">PrimeVue</span>
</Button> </Button>
<h5>Button Set</h5> <h5>Button Set</h5>

16
src/views/button/ButtonDoc.vue
View File

@ -135,13 +135,13 @@ import Button from 'primevue/button';
<h5>Templating</h5> <h5>Templating</h5>
<p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p> <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button type="button" class="p-px-3"&gt; &lt;Button type="button" class="px-3"&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/&gt; &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/&gt;
&lt;/Button&gt; &lt;/Button&gt;
&lt;Button type="button" class="p-button-outlined p-button-success"&gt; &lt;Button type="button" class="p-button-outlined p-button-success"&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" /&gt; &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" /&gt;
&lt;span class="p-ml-2 p-text-bold"&gt;PrimeVue&lt;/span&gt; &lt;span class="ml-2 font-bold"&gt;PrimeVue&lt;/span&gt;
&lt;/Button&gt; &lt;/Button&gt;
</code></pre> </code></pre>
@ -360,12 +360,12 @@ export default {
<Button type="button" label="Search" :loading="loading[3]" @click="load(3)" /> <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
<h5>Templating</h5> <h5>Templating</h5>
<Button type="button" class="p-px-3"> <Button type="button" class="px-3">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/> <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/>
</Button> </Button>
<Button type="button" class="p-button-outlined p-button-success"> <Button type="button" class="p-button-outlined p-button-success">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" /> <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
<span class="p-ml-2 p-text-bold">PrimeVue</span> <span class="ml-2 font-bold">PrimeVue</span>
</Button> </Button>
<h5>Button Set</h5> <h5>Button Set</h5>
@ -550,12 +550,12 @@ export default {
<Button type="button" label="Search" :loading="loading[3]" @click="load(3)" /> <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
<h5>Templating</h5> <h5>Templating</h5>
<Button type="button" class="p-px-3"> <Button type="button" class="px-3">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/> <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/>
</Button> </Button>
<Button type="button" class="p-button-outlined p-button-success"> <Button type="button" class="p-button-outlined p-button-success">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" /> <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
<span class="p-ml-2 p-text-bold">PrimeVue</span> <span class="ml-2 font-bold">PrimeVue</span>
</Button> </Button>
<h5>Button Set</h5> <h5>Button Set</h5>
@ -739,12 +739,12 @@ export default({
<p-button type="button" label="Search" :loading="loading[3]" @click="load(3)"></p-button> <p-button type="button" label="Search" :loading="loading[3]" @click="load(3)"></p-button>
<h5>Templating</h5> <h5>Templating</h5>
<p-button type="button" class="p-px-3"> <p-button type="button" class="px-3">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" /> <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
</p-button> </p-button>
<p-button type="button" class="p-button-outlined p-button-success"> <p-button type="button" class="p-button-outlined p-button-success">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" /> <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
<span class="p-ml-2 p-text-bold">PrimeVue</span> <span class="ml-2 font-bold">PrimeVue</span>
</p-button> </p-button>
<h5>Button Set</h5> <h5>Button Set</h5>

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

@ -11,60 +11,60 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Popup</h5> <h5>Popup</h5>
<div class="p-fluid p-grid p-formgrid"> <div class="p-fluid grid formgrid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="basic">Basic</label> <label for="basic">Basic</label>
<Calendar id="basic" v-model="date1" autocomplete="off" /> <Calendar id="basic" v-model="date1" autocomplete="off" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="dateformat">DateFormat</label> <label for="dateformat">DateFormat</label>
<Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" /> <Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="icon">Icon</label> <label for="icon">Icon</label>
<Calendar id="icon" v-model="date3" :showIcon="true" /> <Calendar id="icon" v-model="date3" :showIcon="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="minmax">MinMax</label> <label for="minmax">MinMax</label>
<Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /> <Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="disableddays">Disabled Days</label> <label for="disableddays">Disabled Days</label>
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" /> <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="multiple">Multiple</label> <label for="multiple">Multiple</label>
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" /> <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="range">Range</label> <label for="range">Range</label>
<Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" /> <Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="buttonbar">Button Bar</label> <label for="buttonbar">Button Bar</label>
<Calendar id="buttonbar" v-model="date6" :showButtonBar="true" /> <Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="time24">Time / 24h</label> <label for="time24">Time / 24h</label>
<Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" /> <Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="time12">Time / 12h</label> <label for="time12">Time / 12h</label>
<Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" /> <Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="monthpicker">Month Picker</label> <label for="monthpicker">Month Picker</label>
<Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" /> <Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="yearpicker">Year Picker</label> <label for="yearpicker">Year Picker</label>
<Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/> <Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="multiplemonths">Multiple Months</label> <label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" /> <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="datetemplate">Date Template</label> <label for="datetemplate">Date Template</label>
<Calendar id="datetemplate" v-model="date12"> <Calendar id="datetemplate" v-model="date12">
<template #date="slotProps"> <template #date="slotProps">
@ -73,7 +73,7 @@
</template> </template>
</Calendar> </Calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="touchUI">TouchUI</label> <label for="touchUI">TouchUI</label>
<Calendar id="touchUI" v-model="date13" :touchUI="true" /> <Calendar id="touchUI" v-model="date13" :touchUI="true" />
</div> </div>

96
src/views/calendar/CalendarDoc.vue
View File

@ -616,60 +616,60 @@ export default {
<template> <template>
<div> <div>
<h5>Popup</h5> <h5>Popup</h5>
<div class="p-fluid p-grid p-formgrid"> <div class="p-fluid grid formgrid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="basic">Basic</label> <label for="basic">Basic</label>
<Calendar id="basic" v-model="date1" autocomplete="off" /> <Calendar id="basic" v-model="date1" autocomplete="off" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="dateformat">DateFormat</label> <label for="dateformat">DateFormat</label>
<Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" /> <Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="icon">Icon</label> <label for="icon">Icon</label>
<Calendar id="icon" v-model="date3" :showIcon="true" /> <Calendar id="icon" v-model="date3" :showIcon="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="minmax">MinMax</label> <label for="minmax">MinMax</label>
<Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /> <Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="disableddays">Disabled Days</label> <label for="disableddays">Disabled Days</label>
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" /> <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="multiple">Multiple</label> <label for="multiple">Multiple</label>
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" /> <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="range">Range</label> <label for="range">Range</label>
<Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" /> <Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="buttonbar">Button Bar</label> <label for="buttonbar">Button Bar</label>
<Calendar id="buttonbar" v-model="date6" :showButtonBar="true" /> <Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="time24">Time / 24h</label> <label for="time24">Time / 24h</label>
<Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" /> <Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="time12">Time / 12h</label> <label for="time12">Time / 12h</label>
<Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" /> <Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="monthpicker">Month Picker</label> <label for="monthpicker">Month Picker</label>
<Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" /> <Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="yearpicker">Year Picker</label> <label for="yearpicker">Year Picker</label>
<Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/> <Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="multiplemonths">Multiple Months</label> <label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" /> <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="datetemplate">Date Template</label> <label for="datetemplate">Date Template</label>
<Calendar id="datetemplate" v-model="date12"> <Calendar id="datetemplate" v-model="date12">
<template #date="slotProps"> <template #date="slotProps">
@ -678,7 +678,7 @@ export default {
</template> </template>
</Calendar> </Calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="touchUI">TouchUI</label> <label for="touchUI">TouchUI</label>
<Calendar id="touchUI" v-model="date13" :touchUI="true" /> <Calendar id="touchUI" v-model="date13" :touchUI="true" />
</div> </div>
@ -759,60 +759,60 @@ export default {
<template> <template>
<div> <div>
<h5>Popup</h5> <h5>Popup</h5>
<div class="p-fluid p-grid p-formgrid"> <div class="p-fluid grid formgrid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="basic">Basic</label> <label for="basic">Basic</label>
<Calendar id="basic" v-model="date1" autocomplete="off" /> <Calendar id="basic" v-model="date1" autocomplete="off" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="dateformat">DateFormat</label> <label for="dateformat">DateFormat</label>
<Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" /> <Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="icon">Icon</label> <label for="icon">Icon</label>
<Calendar id="icon" v-model="date3" :showIcon="true" /> <Calendar id="icon" v-model="date3" :showIcon="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="minmax">MinMax</label> <label for="minmax">MinMax</label>
<Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /> <Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="disableddays">Disabled Days</label> <label for="disableddays">Disabled Days</label>
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" /> <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="multiple">Multiple</label> <label for="multiple">Multiple</label>
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" /> <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="range">Range</label> <label for="range">Range</label>
<Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" /> <Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="buttonbar">Button Bar</label> <label for="buttonbar">Button Bar</label>
<Calendar id="buttonbar" v-model="date6" :showButtonBar="true" /> <Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="time24">Time / 24h</label> <label for="time24">Time / 24h</label>
<Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" /> <Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="time12">Time / 12h</label> <label for="time12">Time / 12h</label>
<Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" /> <Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="monthpicker">Month Picker</label> <label for="monthpicker">Month Picker</label>
<Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" /> <Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="yearpicker">Year Picker</label> <label for="yearpicker">Year Picker</label>
<Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/> <Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="multiplemonths">Multiple Months</label> <label for="multiplemonths">Multiple Months</label>
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" /> <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="datetemplate">Date Template</label> <label for="datetemplate">Date Template</label>
<Calendar id="datetemplate" v-model="date12"> <Calendar id="datetemplate" v-model="date12">
<template #date="slotProps"> <template #date="slotProps">
@ -821,7 +821,7 @@ export default {
</template> </template>
</Calendar> </Calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="touchUI">TouchUI</label> <label for="touchUI">TouchUI</label>
<Calendar id="touchUI" v-model="date13" :touchUI="true" /> <Calendar id="touchUI" v-model="date13" :touchUI="true" />
</div> </div>
@ -902,60 +902,60 @@ export default {
imports: `<script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"><\\/script>`, imports: `<script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"><\\/script>`,
content: `<div id="app"> content: `<div id="app">
<h5>Popup</h5> <h5>Popup</h5>
<div class="p-fluid p-grid p-formgrid"> <div class="p-fluid grid formgrid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="basic">Basic</label> <label for="basic">Basic</label>
<p-calendar id="basic" v-model="date1" autocomplete="off"></p-calendar> <p-calendar id="basic" v-model="date1" autocomplete="off"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="dateformat">DateFormat</label> <label for="dateformat">DateFormat</label>
<p-calendar id="dateformat" v-model="date2" date-format="mm-dd-yy"></p-calendar> <p-calendar id="dateformat" v-model="date2" date-format="mm-dd-yy"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="icon">Icon</label> <label for="icon">Icon</label>
<p-calendar id="icon" v-model="date3" :show-icon="true"></p-calendar> <p-calendar id="icon" v-model="date3" :show-icon="true"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="minmax">MinMax</label> <label for="minmax">MinMax</label>
<p-calendar id="minmax" v-model="date4" :min-date="minDate" :max-date="maxDate" :manual-input="false"></p-calendar> <p-calendar id="minmax" v-model="date4" :min-date="minDate" :max-date="maxDate" :manual-input="false"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="disableddays">Disabled Days</label> <label for="disableddays">Disabled Days</label>
<p-calendar id="disableddays" v-model="date5" :disabled-dates="invalidDates" :disabled-days="[0,6]" :manual-input="false"></p-calendar> <p-calendar id="disableddays" v-model="date5" :disabled-dates="invalidDates" :disabled-days="[0,6]" :manual-input="false"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="multiple">Multiple</label> <label for="multiple">Multiple</label>
<p-calendar id="multiple" v-model="dates1" selection-mode="multiple" :manual-input="false"></p-calendar> <p-calendar id="multiple" v-model="dates1" selection-mode="multiple" :manual-input="false"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="range">Range</label> <label for="range">Range</label>
<p-calendar id="range" v-model="dates2" selection-mode="range" :manual-input="false"></p-calendar> <p-calendar id="range" v-model="dates2" selection-mode="range" :manual-input="false"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="buttonbar">Button Bar</label> <label for="buttonbar">Button Bar</label>
<p-calendar id="buttonbar" v-model="date6" :show-button-bar="true"></p-calendar> <p-calendar id="buttonbar" v-model="date6" :show-button-bar="true"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="time24">Time / 24h</label> <label for="time24">Time / 24h</label>
<p-calendar id="time24" v-model="date7" :show-time="true" :show-seconds="true"></p-calendar> <p-calendar id="time24" v-model="date7" :show-time="true" :show-seconds="true"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="time12">Time / 12h</label> <label for="time12">Time / 12h</label>
<p-calendar id="time12" v-model="date8" :time-only="true" hour-format="12"></p-calendar> <p-calendar id="time12" v-model="date8" :time-only="true" hour-format="12"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="monthpicker">Month Picker</label> <label for="monthpicker">Month Picker</label>
<p-calendar id="monthpicker" v-model="date9" view="month" date-format="mm/yy"></p-calendar> <p-calendar id="monthpicker" v-model="date9" view="month" date-format="mm/yy"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="yearpicker">Year Picker</label> <label for="yearpicker">Year Picker</label>
<p-calendar id="yearpicker" v-model="date10" view="year" date-format="yy"></p-calendar> <p-calendar id="yearpicker" v-model="date10" view="year" date-format="yy"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="multiplemonths">Multiple Months</label> <label for="multiplemonths">Multiple Months</label>
<p-calendar id="multiplemonths" v-model="date11" :number-of-months="3" :responsive-options="responsiveOptions"></p-calendar> <p-calendar id="multiplemonths" v-model="date11" :number-of-months="3" :responsive-options="responsiveOptions"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="datetemplate">Date Template</label> <label for="datetemplate">Date Template</label>
<p-calendar id="datetemplate" v-model="date12"> <p-calendar id="datetemplate" v-model="date12">
<template #date="slotProps"> <template #date="slotProps">
@ -964,7 +964,7 @@ export default {
</template> </template>
</p-calendar> </p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="touchUI">TouchUI</label> <label for="touchUI">TouchUI</label>
<p-calendar id="touchUI" v-model="date13" :touch-u-i="true"></p-calendar> <p-calendar id="touchUI" v-model="date13" :touch-u-i="true"></p-calendar>
</div> </div>

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

@ -17,16 +17,16 @@
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /> <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" /> <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
@ -44,16 +44,16 @@
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /> <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" /> <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
@ -72,16 +72,16 @@
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /> <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" /> <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>

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

@ -316,16 +316,16 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /> <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" /> <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
@ -343,16 +343,16 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /> <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" /> <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
@ -371,16 +371,16 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /> <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" /> <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
@ -458,16 +458,16 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /> <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" /> <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
@ -485,16 +485,16 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /> <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" /> <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
@ -513,16 +513,16 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /> <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" /> <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" /> <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
</div> </div>
</div> </div>
@ -598,16 +598,16 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<p-button icon="pi pi-search" class="p-button p-button-rounded p-mr-2"></p-button> <p-button icon="pi pi-search" class="p-button p-button-rounded mr-2"></p-button>
<p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2"></p-button> <p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2"></p-button>
<p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button> <p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button>
</div> </div>
</div> </div>
@ -625,16 +625,16 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<p-button icon="pi pi-search" class="p-button p-button-rounded p-mr-2"></p-button> <p-button icon="pi pi-search" class="p-button p-button-rounded mr-2"></p-button>
<p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2"></p-button> <p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2"></p-button>
<p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button> <p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button>
</div> </div>
</div> </div>
@ -653,16 +653,16 @@ export default {
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="p-mb-3"> <div class="mb-3">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="p-mb-1">{{slotProps.data.name}}</h4> <h4 class="mb-1">{{slotProps.data.name}}</h4>
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6> <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
<div class="car-buttons p-mt-5"> <div class="car-buttons mt-5">
<p-button icon="pi pi-search" class="p-button p-button-rounded p-mr-2"></p-button> <p-button icon="pi pi-search" class="p-button p-button-rounded mr-2"></p-button>
<p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2"></p-button> <p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2"></p-button>
<p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button> <p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button>
</div> </div>
</div> </div>

4
src/views/cascadeselect/CascadeSelectDemo.vue
View File

@ -20,8 +20,8 @@
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i> <i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i> <i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span> <span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div> </div>
</template> </template>

16
src/views/cascadeselect/CascadeSelectDoc.vue
View File

@ -120,8 +120,8 @@ data() {
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="country-item"&gt; &lt;div class="country-item"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt; &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
&lt;i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt; &lt;i class="pi pi-compass mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
&lt;i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt; &lt;i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
&lt;span&gt;{{slotProps.option.cname || slotProps.option.name}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.cname || slotProps.option.name}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
@ -385,8 +385,8 @@ export default {
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i> <i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i> <i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span> <span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div> </div>
</template> </template>
@ -507,8 +507,8 @@ img {
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i> <i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i> <i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span> <span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div> </div>
</template> </template>
@ -631,8 +631,8 @@ img {
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i> <i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i> <i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span> <span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div> </div>
</template> </template>

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

@ -9,7 +9,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card p-d-flex p-jc-center"> <div class="card flex justify-content-center">
<Chart type="doughnut" :data="chartData" :options="chartOptions" style="width: 40%" /> <Chart type="doughnut" :data="chartData" :options="chartOptions" style="width: 40%" />
</div> </div>
</div> </div>

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

@ -9,7 +9,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card p-d-flex p-jc-center"> <div class="card flex justify-content-center">
<Chart type="pie" :data="chartData" :options="chartOptions" style="width: 40%" /> <Chart type="pie" :data="chartData" :options="chartOptions" style="width: 40%" />
</div> </div>
</div> </div>

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

@ -9,7 +9,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card p-d-flex p-jc-center"> <div class="card flex justify-content-center">
<Chart type="polarArea" :data="chartData" :options="chartOptions" style="width: 40%" /> <Chart type="polarArea" :data="chartData" :options="chartOptions" style="width: 40%" />
</div> </div>
</div> </div>

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

@ -9,7 +9,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card p-d-flex p-jc-center"> <div class="card flex justify-content-center">
<Chart type="radar" :data="chartData" :options="chartOptions" style="width: 40%" /> <Chart type="radar" :data="chartData" :options="chartOptions" style="width: 40%" />
</div> </div>
</div> </div>

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

@ -11,31 +11,31 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" /> <Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label> <label for="binary">{{checked}}</label>
</div> </div>
<h5>Multiple</h5> <h5>Multiple</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" /> <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label> <label for="city1">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" /> <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label> <label for="city2">Los Angeles</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" /> <Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label> <label for="city3">New York</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" /> <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label> <label for="city4">San Francisco</label>
</div> </div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5> <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox"> <div v-for="category of categories" :key="category.key" class="field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/> <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label> <label :for="category.key">{{category.name}}</label>
</div> </div>

36
src/views/checkbox/CheckboxDoc.vue
View File

@ -177,31 +177,31 @@ export default {
<template> <template>
<div> <div>
<h5>Basic</h5> <h5>Basic</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" /> <Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label> <label for="binary">{{checked}}</label>
</div> </div>
<h5>Multiple</h5> <h5>Multiple</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" /> <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label> <label for="city1">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" /> <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label> <label for="city2">Los Angeles</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" /> <Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label> <label for="city3">New York</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" /> <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label> <label for="city4">San Francisco</label>
</div> </div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5> <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox"> <div v-for="category of categories" :key="category.key" class="field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/> <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label> <label :for="category.key">{{category.name}}</label>
</div> </div>
@ -230,31 +230,31 @@ export default {
<template> <template>
<div> <div>
<h5>Basic</h5> <h5>Basic</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="binary" v-model="checked" :binary="true" /> <Checkbox id="binary" v-model="checked" :binary="true" />
<label for="binary">{{checked}}</label> <label for="binary">{{checked}}</label>
</div> </div>
<h5>Multiple</h5> <h5>Multiple</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" /> <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1">Chicago</label> <label for="city1">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" /> <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2">Los Angeles</label> <label for="city2">Los Angeles</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city3" name="city" value="New York" v-model="cities" /> <Checkbox id="city3" name="city" value="New York" v-model="cities" />
<label for="city3">New York</label> <label for="city3">New York</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" /> <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4">San Francisco</label> <label for="city4">San Francisco</label>
</div> </div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5> <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox"> <div v-for="category of categories" :key="category.key" class="field-checkbox">
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/> <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
<label :for="category.key">{{category.name}}</label> <label :for="category.key">{{category.name}}</label>
</div> </div>
@ -285,31 +285,31 @@ export default {
imports: `<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>`, imports: `<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>`,
content: `<div id="app"> content: `<div id="app">
<h5>Basic</h5> <h5>Basic</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<p-checkbox id="binary" v-model="checked" :binary="true"></p-checkbox> <p-checkbox id="binary" v-model="checked" :binary="true"></p-checkbox>
<label for="binary">{{checked}}</label> <label for="binary">{{checked}}</label>
</div> </div>
<h5>Multiple</h5> <h5>Multiple</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<p-checkbox id="city1" name="city" value="Chicago" v-model="cities"></p-checkbox> <p-checkbox id="city1" name="city" value="Chicago" v-model="cities"></p-checkbox>
<label for="city1">Chicago</label> <label for="city1">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<p-checkbox id="city2" name="city" value="Los Angeles" v-model="cities"></p-checkbox> <p-checkbox id="city2" name="city" value="Los Angeles" v-model="cities"></p-checkbox>
<label for="city2">Los Angeles</label> <label for="city2">Los Angeles</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<p-checkbox id="city3" name="city" value="New York" v-model="cities"></p-checkbox> <p-checkbox id="city3" name="city" value="New York" v-model="cities"></p-checkbox>
<label for="city3">New York</label> <label for="city3">New York</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<p-checkbox id="city4" name="city" value="San Francisco" v-model="cities"></p-checkbox> <p-checkbox id="city4" name="city" value="San Francisco" v-model="cities"></p-checkbox>
<label for="city4">San Francisco</label> <label for="city4">San Francisco</label>
</div> </div>
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5> <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
<div v-for="category of categories" :key="category.key" class="p-field-checkbox"> <div v-for="category of categories" :key="category.key" class="field-checkbox">
<p-checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox> <p-checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox>
<label :for="category.key">{{category.name}}</label> <label :for="category.key">{{category.name}}</label>
</div> </div>

32
src/views/chip/ChipDemo.vue
View File

@ -11,34 +11,34 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<div class="p-d-flex p-ai-center"> <div class="flex align-items-center">
<Chip label="Action" class="p-mr-2" /> <Chip label="Action" class="mr-2" />
<Chip label="Comedy" class="p-mr-2" /> <Chip label="Comedy" class="mr-2" />
<Chip label="Mystery" class="p-mr-2" /> <Chip label="Mystery" class="mr-2" />
<Chip label="Thriller" removable /> <Chip label="Thriller" removable />
</div> </div>
<h5>Icon</h5> <h5>Icon</h5>
<div class="p-d-flex p-ai-center"> <div class="flex align-items-center">
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2" /> <Chip label="Apple" icon="pi pi-apple" class="mr-2" />
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" /> <Chip label="Facebook" icon="pi pi-facebook" class="mr-2" />
<Chip label="Google" icon="pi pi-google" class="p-mr-2" /> <Chip label="Google" icon="pi pi-google" class="mr-2" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable /> <Chip label="Microsoft" icon="pi pi-microsoft" removable />
</div> </div>
<h5>Image</h5> <h5>Image</h5>
<div class="p-d-flex p-ai-center"> <div class="flex align-items-center">
<Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="p-mr-2" /> <Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="mr-2" />
<Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" /> <Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="mr-2" />
<Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2" /> <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2" />
<Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable /> <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable />
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<div class="p-d-flex p-ai-center"> <div class="flex align-items-center">
<Chip label="Action" class="p-mr-2 custom-chip" /> <Chip label="Action" class="mr-2 custom-chip" />
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" /> <Chip label="Apple" icon="pi pi-apple" class="mr-2 custom-chip" />
<Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2 custom-chip" /> <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2 custom-chip" />
<Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable /> <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
</div> </div>
</div> </div>

120
src/views/chip/ChipDoc.vue
View File

@ -153,35 +153,35 @@ export default {
<template> <template>
<div> <div>
<h5>Basic</h5> <h5>Basic</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Action" class="p-mr-2 p-mb-2" /> <Chip label="Action" class="mr-2 mb-2" />
<Chip label="Comedy" class="p-mr-2 p-mb-2" /> <Chip label="Comedy" class="mr-2 mb-2" />
<Chip label="Mystery" class="p-mr-2 p-mb-2" /> <Chip label="Mystery" class="mr-2 mb-2" />
<Chip label="Thriller" class="p-mb-2" removable /> <Chip label="Thriller" class="mb-2" removable />
</div> </div>
<h5>Icon</h5> <h5>Icon</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" /> <Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2" />
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" /> <Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2" />
<Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" /> <Chip label="Google" icon="pi pi-google" class="mr-2 mb-2" />
<Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable /> <Chip label="Microsoft" icon="pi pi-microsoft" class="mb-2" removable />
</div> </div>
<h5>Image</h5> <h5>Image</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" /> <Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" /> <Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" /> <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable /> <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mb-2" removable />
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" /> <Chip label="Action" class="mr-2 mb-2 custom-chip" />
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" /> <Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2 custom-chip" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" /> <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2 custom-chip" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable /> <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip mb-2" removable />
</div> </div>
</div> </div>
</template> </template>
@ -204,35 +204,35 @@ export default {
<template> <template>
<div> <div>
<h5>Basic</h5> <h5>Basic</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Action" class="p-mr-2 p-mb-2" /> <Chip label="Action" class="mr-2 mb-2" />
<Chip label="Comedy" class="p-mr-2 p-mb-2" /> <Chip label="Comedy" class="mr-2 mb-2" />
<Chip label="Mystery" class="p-mr-2 p-mb-2" /> <Chip label="Mystery" class="mr-2 mb-2" />
<Chip label="Thriller" class="p-mb-2" removable /> <Chip label="Thriller" class="mb-2" removable />
</div> </div>
<h5>Icon</h5> <h5>Icon</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" /> <Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2" />
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" /> <Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2" />
<Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" /> <Chip label="Google" icon="pi pi-google" class="mr-2 mb-2" />
<Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable /> <Chip label="Microsoft" icon="pi pi-microsoft" class="mb-2" removable />
</div> </div>
<h5>Image</h5> <h5>Image</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" /> <Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" /> <Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" /> <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable /> <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mb-2" removable />
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" /> <Chip label="Action" class="mr-2 mb-2 custom-chip" />
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" /> <Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2 custom-chip" />
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" /> <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2 custom-chip" />
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable /> <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip mb-2" removable />
</div> </div>
</div> </div>
</template> </template>
@ -254,35 +254,35 @@ export default {
imports: `<script src="https://unpkg.com/primevue@^3/chip/chip.min.js"><\\/script>`, imports: `<script src="https://unpkg.com/primevue@^3/chip/chip.min.js"><\\/script>`,
content: `<div id="app"> content: `<div id="app">
<h5>Basic</h5> <h5>Basic</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<p-chip label="Action" class="p-mr-2 p-mb-2"></p-chip> <p-chip label="Action" class="mr-2 mb-2"></p-chip>
<p-chip label="Comedy" class="p-mr-2 p-mb-2"></p-chip> <p-chip label="Comedy" class="mr-2 mb-2"></p-chip>
<p-chip label="Mystery" class="p-mr-2 p-mb-2"></p-chip> <p-chip label="Mystery" class="mr-2 mb-2"></p-chip>
<p-chip label="Thriller" class="p-mb-2" removable></p-chip> <p-chip label="Thriller" class="mb-2" removable></p-chip>
</div> </div>
<h5>Icon</h5> <h5>Icon</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<p-chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2"></p-chip> <p-chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2"></p-chip>
<p-chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2"></p-chip> <p-chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></p-chip>
<p-chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2"></p-chip> <p-chip label="Google" icon="pi pi-google" class="mr-2 mb-2"></p-chip>
<p-chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable></p-chip> <p-chip label="Microsoft" icon="pi pi-microsoft" class="mb-2" removable></p-chip>
</div> </div>
<h5>Image</h5> <h5>Image</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<p-chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip> <p-chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2"></p-chip>
<p-chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip> <p-chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2"></p-chip>
<p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip> <p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2"></p-chip>
<p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable></p-chip> <p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mb-2" removable></p-chip>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row"> <div class="flex align-items-center flex-column sm:flex-row">
<p-chip label="Action" class="p-mr-2 p-mb-2 custom-chip"></p-chip> <p-chip label="Action" class="mr-2 mb-2 custom-chip"></p-chip>
<p-chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip"></p-chip> <p-chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2 custom-chip"></p-chip>
<p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip"></p-chip> <p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2 custom-chip"></p-chip>
<p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable></p-chip> <p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip mb-2" removable></p-chip>
</div> </div>
</div> </div>

6
src/views/colors/ColorsDemo.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div>
<div class="content-section documentation"> <div class="content-section documentation">
<h1>Colors</h1> <h1>Colors</h1>
<p>Each PrimeVue theme exports its own color palette.</p> <p>Each PrimeVue theme exports its own color palette.</p>
@ -57,8 +57,8 @@
</code></pre> </code></pre>
<div class="card"> <div class="card">
<div class="p-d-flex p-flex-wrap"> <div class="flex flex-wrap">
<div v-for="color of colors" :key="color" class="color-stack p-mr-6 p-mb-6"> <div v-for="color of colors" :key="color" class="color-stack mr-6 mb-6">
<template v-for="shade of shades" :key="shade"> <template v-for="shade of shades" :key="shade">
<div v-if="shade !== 0" class="color-box" <div v-if="shade !== 0" class="color-box"
:style="{backgroundColor:`var(--${color}-${shade})`, color: (shade > 500 ? '#fff': '#000')}"> :style="{backgroundColor:`var(--${color}-${shade})`, color: (shade > 500 ? '#fff': '#000')}">

20
src/views/confirmdialog/ConfirmDialogDemo.vue
View File

@ -14,23 +14,23 @@
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button> <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button> <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
<h5>Position</h5> <h5>Position</h5>
<div class="p-grid p-dir-col"> <div class="grid flex-column">
<div class="p-col"> <div class="col">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button> <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div> </div>
<div class="p-col"> <div class="col">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button> <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button> <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
</div> </div>
<div class="p-col"> <div class="col">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button> <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button> <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
</div> </div>
</div> </div>

42
src/views/confirmdialog/ConfirmDialogDoc.vue
View File

@ -271,23 +271,23 @@ export default {
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button> <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button> <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
<h5>Position</h5> <h5>Position</h5>
<div class="p-grid p-dir-col"> <div class="grid flex-column">
<div class="p-col"> <div class="p-col">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button> <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div> </div>
<div class="p-col"> <div class="p-col">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button> <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button> <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
</div> </div>
<div class="p-col"> <div class="p-col">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button> <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button> <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
</div> </div>
</div> </div>
@ -356,23 +356,23 @@ export default {
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button> <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button> <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
<h5>Position</h5> <h5>Position</h5>
<div class="p-grid p-dir-col"> <div class="grid flex-column">
<div class="p-col"> <div class="p-col">
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button> <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button> <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
</div> </div>
<div class="p-col"> <div class="p-col">
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button> <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button> <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button> <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
</div> </div>
<div class="p-col"> <div class="p-col">
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button> <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button> <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button> <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
</div> </div>
</div> </div>
@ -454,23 +454,23 @@ export default defineComponent({
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<p-button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></p-button> <p-button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></p-button>
<p-button @click="confirm2()" icon="pi pi-times" label="Delete"></p-button> <p-button @click="confirm2()" icon="pi pi-times" label="Delete"></p-button>
<h5>Position</h5> <h5>Position</h5>
<div class="p-grid p-dir-col"> <div class="grid flex-column">
<div class="p-col"> <div class="p-col">
<p-button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></p-button> <p-button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></p-button>
<p-button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></p-button> <p-button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></p-button>
</div> </div>
<div class="p-col"> <div class="p-col">
<p-button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></p-button> <p-button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></p-button>
<p-button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></p-button> <p-button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></p-button>
<p-button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></p-button> <p-button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></p-button>
</div> </div>
<div class="p-col"> <div class="p-col">
<p-button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></p-button> <p-button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></p-button>
<p-button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></p-button> <p-button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></p-button>
<p-button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></p-button> <p-button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></p-button>
</div> </div>
</div> </div>

8
src/views/confirmpopup/ConfirmPopupDemo.vue
View File

@ -12,20 +12,20 @@
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<ConfirmPopup group="demo"> <ConfirmPopup group="demo">
<template #message="slotProps"> <template #message="slotProps">
<div class="p-d-flex p-p-4"> <div class="flex p-4">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
<p class="p-pl-2">{{slotProps.message.message}}</p> <p class="pl-2">{{slotProps.message.message}}</p>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
<div class="card"> <div class="card">
<h5>Overlay</h5> <h5>Overlay</h5>
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button> <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
<h5>Templating</h5> <h5>Templating</h5>
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></Button> <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
</div> </div>
</div> </div>

28
src/views/confirmpopup/ConfirmPopupDoc.vue
View File

@ -102,9 +102,9 @@ export default {
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;ConfirmPopup group="demo"> &lt;ConfirmPopup group="demo">
&lt;template #message="slotProps"&gt; &lt;template #message="slotProps"&gt;
&lt;div class="p-d-flex p-p-4"&gt; &lt;div class="flex p-4"&gt;
&lt;i :class="slotProps.message.icon" style="font-size: 1.5rem"&gt;&lt;/i&gt; &lt;i :class="slotProps.message.icon" style="font-size: 1.5rem"&gt;&lt;/i&gt;
&lt;p class="p-pl-2"&gt;{{slotProps.message.message}}&lt;/p&gt; &lt;p class="pl-2"&gt;{{slotProps.message.message}}&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/ConfirmPopup&gt; &lt;/ConfirmPopup&gt;
@ -295,9 +295,9 @@ export default {
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<ConfirmPopup group="demo"> <ConfirmPopup group="demo">
<template #message="slotProps"> <template #message="slotProps">
<div class="p-d-flex p-p-4"> <div class="flex p-4">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
<p class="p-pl-2">{{slotProps.message.message}}</p> <p class="pl-2">{{slotProps.message.message}}</p>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
@ -305,11 +305,11 @@ export default {
<div class="card"> <div class="card">
<h5>Overlay</h5> <h5>Overlay</h5>
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button> <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
<h5>Templating</h5> <h5>Templating</h5>
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></Button> <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -372,9 +372,9 @@ export default {
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<ConfirmPopup group="demo"> <ConfirmPopup group="demo">
<template #message="slotProps"> <template #message="slotProps">
<div class="p-d-flex p-p-4"> <div class="flex p-4">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
<p class="p-pl-2">{{slotProps.message.message}}</p> <p class="pl-2">{{slotProps.message.message}}</p>
</div> </div>
</template> </template>
</ConfirmPopup> </ConfirmPopup>
@ -382,11 +382,11 @@ export default {
<div class="card"> <div class="card">
<h5>Overlay</h5> <h5>Overlay</h5>
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button> <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button> <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
<h5>Templating</h5> <h5>Templating</h5>
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></Button> <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
</div> </div>
</div> </div>
</template> </template>
@ -463,9 +463,9 @@ export default defineComponent({
<p-confirmpopup></p-confirmpopup> <p-confirmpopup></p-confirmpopup>
<p-confirmpopup group="demo"> <p-confirmpopup group="demo">
<template #message="slotProps"> <template #message="slotProps">
<div class="p-d-flex p-p-4"> <div class="flex p-4">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i> <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
<p class="p-pl-2">{{slotProps.message.message}}</p> <p class="pl-2">{{slotProps.message.message}}</p>
</div> </div>
</template> </template>
</p-confirmpopup> </p-confirmpopup>
@ -473,11 +473,11 @@ export default defineComponent({
<div class="card"> <div class="card">
<h5>Overlay</h5> <h5>Overlay</h5>
<p-button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></p-button> <p-button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></p-button>
<p-button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></p-button> <p-button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></p-button>
<h5>Templating</h5> <h5>Templating</h5>
<p-button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></p-button> <p-button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></p-button>
</div> </div>
</div> </div>

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

@ -27,135 +27,133 @@ export default {
return { return {
items: [ items: [
{ {
label:'File', label:'File',
icon:'pi pi-fw pi-file', icon:'pi pi-fw pi-file',
items:[ items:[
{ {
label:'New', label:'New',
icon:'pi pi-fw pi-plus', icon:'pi pi-fw pi-plus',
items:[ items:[
{ {
label:'Bookmark', label:'Bookmark',
icon:'pi pi-fw pi-bookmark' icon:'pi pi-fw pi-bookmark'
}, },
{ {
label:'Video', label:'Video',
icon:'pi pi-fw pi-video' icon:'pi pi-fw pi-video'
}, },
]
] },
}, {
{ label:'Delete',
label:'Delete', icon:'pi pi-fw pi-trash'
icon:'pi pi-fw pi-trash' },
}, {
{ separator:true
separator:true },
}, {
{ label:'Export',
label:'Export', icon:'pi pi-fw pi-external-link'
icon:'pi pi-fw pi-external-link' }
} ]
]
}, },
{ {
label:'Edit', label:'Edit',
icon:'pi pi-fw pi-pencil', icon:'pi pi-fw pi-pencil',
items:[ items:[
{ {
label:'Left', label:'Left',
icon:'pi pi-fw pi-align-left' icon:'pi pi-fw pi-align-left'
}, },
{ {
label:'Right', label:'Right',
icon:'pi pi-fw pi-align-right' icon:'pi pi-fw pi-align-right'
}, },
{ {
label:'Center', label:'Center',
icon:'pi pi-fw pi-align-center' icon:'pi pi-fw pi-align-center'
}, },
{ {
label:'Justify', label:'Justify',
icon:'pi pi-fw pi-align-justify' icon:'pi pi-fw pi-align-justify'
}, },
] ]
}, },
{ {
label:'Users', label:'Users',
icon:'pi pi-fw pi-user', icon:'pi pi-fw pi-user',
items:[ items:[
{ {
label:'New', label:'New',
icon:'pi pi-fw pi-user-plus', icon:'pi pi-fw pi-user-plus',
}, },
{ {
label:'Delete', label:'Delete',
icon:'pi pi-fw pi-user-minus', icon:'pi pi-fw pi-user-minus',
}, },
{ {
label:'Search', label:'Search',
icon:'pi pi-fw pi-users', icon:'pi pi-fw pi-users',
items:[ items:[
{ {
label:'Filter', label:'Filter',
icon:'pi pi-fw pi-filter', icon:'pi pi-fw pi-filter',
items:[ items:[
{ {
label:'Print', label:'Print',
icon:'pi pi-fw pi-print' icon:'pi pi-fw pi-print'
} }
] ]
}, },
{ {
icon:'pi pi-fw pi-bars', icon:'pi pi-fw pi-bars',
label:'List' label:'List'
} }
] ]
} }
] ]
}, },
{ {
label:'Events', label:'Events',
icon:'pi pi-fw pi-calendar', icon:'pi pi-fw pi-calendar',
items:[ items:[
{ {
label:'Edit', label:'Edit',
icon:'pi pi-fw pi-pencil', icon:'pi pi-fw pi-pencil',
items:[ items:[
{ {
label:'Save', label:'Save',
icon:'pi pi-fw pi-calendar-plus' icon:'pi pi-fw pi-calendar-plus'
}, },
{ {
label:'Delete', label:'Delete',
icon:'pi pi-fw pi-calendar-minus' icon:'pi pi-fw pi-calendar-minus'
}, },
]
] },
}, {
{ label:'Archieve',
label:'Archieve', icon:'pi pi-fw pi-calendar-times',
icon:'pi pi-fw pi-calendar-times', items:[
items:[ {
{ label:'Remove',
label:'Remove', icon:'pi pi-fw pi-calendar-minus'
icon:'pi pi-fw pi-calendar-minus' }
} ]
] }
} ]
]
}, },
{ {
separator:true separator:true
}, },
{ {
label:'Quit', label:'Quit',
icon:'pi pi-fw pi-power-off' icon:'pi pi-fw pi-power-off'
} }
] ]
} }
}, },
methods: { methods: {

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

@ -10,14 +10,14 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<Toolbar class="p-mb-4"> <Toolbar class="mb-4">
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" /> <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /> <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template> </template>
<template #end> <template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" /> <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
<Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" /> <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" />
</template> </template>
</Toolbar> </Toolbar>
@ -27,8 +27,8 @@
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]" paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll"> currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll">
<template #header> <template #header>
<div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between"> <div class="table-header flex flex-column md:flex-row md:justiify-content-between">
<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5> <h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Search..." /> <InputText v-model="filters['global'].value" placeholder="Search..." />
@ -40,7 +40,7 @@
<Column field="code" header="Code" :sortable="true" style="min-width:12rem"></Column> <Column field="code" header="Code" :sortable="true" style="min-width:12rem"></Column>
<Column field="name" header="Name" :sortable="true" style="min-width:16rem"></Column> <Column field="name" header="Name" :sortable="true" style="min-width:16rem"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
@ -52,7 +52,7 @@
<Column field="category" header="Category" :sortable="true" style="min-width:10rem"></Column> <Column field="category" header="Category" :sortable="true" style="min-width:10rem"></Column>
<Column field="rating" header="Reviews" :sortable="true" style="min-width:12rem"> <Column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">
<template #body="slotProps"> <template #body="slotProps">
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" /> <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
</template> </template>
</Column> </Column>
<Column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem"> <Column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">
@ -62,7 +62,7 @@
</Column> </Column>
<Column :exportable="false" style="min-width:8rem"> <Column :exportable="false" style="min-width:8rem">
<template #body="slotProps"> <template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" /> <Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" /> <Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
</template> </template>
</Column> </Column>
@ -71,18 +71,18 @@
<Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid"> <Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
<img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" /> <img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
<div class="p-field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" /> <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
<small class="p-error" v-if="submitted && !product.name">Name is required.</small> <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
</div> </div>
<div class="p-field"> <div class="field">
<label for="description">Description</label> <label for="description">Description</label>
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" /> <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="inventoryStatus" class="p-mb-3">Inventory Status</label> <label for="inventoryStatus" class="mb-3">Inventory Status</label>
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"> <Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value && slotProps.value.value"> <div v-if="slotProps.value && slotProps.value.value">
@ -98,34 +98,34 @@
</Dropdown> </Dropdown>
</div> </div>
<div class="p-field"> <div class="field">
<label class="p-mb-3">Category</label> <label class="mb-3">Category</label>
<div class="p-formgrid p-grid"> <div class="formgrid grid">
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category1" name="category" value="Accessories" v-model="product.category" /> <RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
<label for="category1">Accessories</label> <label for="category1">Accessories</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category2" name="category" value="Clothing" v-model="product.category" /> <RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
<label for="category2">Clothing</label> <label for="category2">Clothing</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category3" name="category" value="Electronics" v-model="product.category" /> <RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
<label for="category3">Electronics</label> <label for="category3">Electronics</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category4" name="category" value="Fitness" v-model="product.category" /> <RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
<label for="category4">Fitness</label> <label for="category4">Fitness</label>
</div> </div>
</div> </div>
</div> </div>
<div class="p-formgrid p-grid"> <div class="formgrid grid">
<div class="p-field p-col"> <div class="field col">
<label for="price">Price</label> <label for="price">Price</label>
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" /> <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
</div> </div>
<div class="p-field p-col"> <div class="field col">
<label for="quantity">Quantity</label> <label for="quantity">Quantity</label>
<InputNumber id="quantity" v-model="product.quantity" integeronly /> <InputNumber id="quantity" v-model="product.quantity" integeronly />
</div> </div>
@ -138,7 +138,7 @@
<Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span> <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
</div> </div>
<template #footer> <template #footer>
@ -149,7 +149,7 @@
<Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete the selected products?</span> <span v-if="product">Are you sure you want to delete the selected products?</span>
</div> </div>
<template #footer> <template #footer>
@ -159,7 +159,7 @@
</Dialog> </Dialog>
</div> </div>
<AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" /> <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
</div> </div>
</template> </template>
@ -190,14 +190,14 @@ export default {
<template> <template>
<div> <div>
<div class="card"> <div class="card">
<Toolbar class="p-mb-4"> <Toolbar class="mb-4">
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" /> <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /> <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template> </template>
<template #end> <template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" /> <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
<Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" /> <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" />
</template> </template>
</Toolbar> </Toolbar>
@ -207,8 +207,8 @@ export default {
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]" paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll"> currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll">
<template #header> <template #header>
<div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between"> <div class="table-header flex flex-column md:flex-row md:justiify-content-between">
<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5> <h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Search..." /> <InputText v-model="filters['global'].value" placeholder="Search..." />
@ -242,7 +242,7 @@ export default {
</Column> </Column>
<Column :exportable="false" style="min-width:8rem"> <Column :exportable="false" style="min-width:8rem">
<template #body="slotProps"> <template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" /> <Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" /> <Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
</template> </template>
</Column> </Column>
@ -251,18 +251,18 @@ export default {
<Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid"> <Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="product.image" class="product-image" v-if="product.image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="product.image" class="product-image" v-if="product.image" />
<div class="p-field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" /> <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
<small class="p-error" v-if="submitted && !product.name">Name is required.</small> <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
</div> </div>
<div class="p-field"> <div class="field">
<label for="description">Description</label> <label for="description">Description</label>
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" /> <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="inventoryStatus" class="p-mb-3">Inventory Status</label> <label for="inventoryStatus" class="mb-3">Inventory Status</label>
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"> <Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value && slotProps.value.value"> <div v-if="slotProps.value && slotProps.value.value">
@ -278,34 +278,34 @@ export default {
</Dropdown> </Dropdown>
</div> </div>
<div class="p-field"> <div class="field">
<label class="p-mb-3">Category</label> <label class="mb-3">Category</label>
<div class="p-formgrid p-grid"> <div class="formgrid grid">
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category1" name="category" value="Accessories" v-model="product.category" /> <RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
<label for="category1">Accessories</label> <label for="category1">Accessories</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category2" name="category" value="Clothing" v-model="product.category" /> <RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
<label for="category2">Clothing</label> <label for="category2">Clothing</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category3" name="category" value="Electronics" v-model="product.category" /> <RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
<label for="category3">Electronics</label> <label for="category3">Electronics</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category4" name="category" value="Fitness" v-model="product.category" /> <RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
<label for="category4">Fitness</label> <label for="category4">Fitness</label>
</div> </div>
</div> </div>
</div> </div>
<div class="p-formgrid p-grid"> <div class="formgrid grid">
<div class="p-field p-col"> <div class="field col">
<label for="price">Price</label> <label for="price">Price</label>
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" /> <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
</div> </div>
<div class="p-field p-col"> <div class="field col">
<label for="quantity">Quantity</label> <label for="quantity">Quantity</label>
<InputNumber id="quantity" v-model="product.quantity" integeronly /> <InputNumber id="quantity" v-model="product.quantity" integeronly />
</div> </div>
@ -318,7 +318,7 @@ export default {
<Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span> <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
</div> </div>
<template #footer> <template #footer>
@ -329,7 +329,7 @@ export default {
<Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete the selected products?</span> <span v-if="product">Are you sure you want to delete the selected products?</span>
</div> </div>
<template #footer> <template #footer>
@ -506,14 +506,14 @@ export default {
<template> <template>
<div> <div>
<div class="card"> <div class="card">
<Toolbar class="p-mb-4"> <Toolbar class="mb-4">
<template #start> <template #start>
<Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" /> <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /> <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template> </template>
<template #end> <template #end>
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" /> <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
<Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" /> <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" />
</template> </template>
</Toolbar> </Toolbar>
@ -523,8 +523,8 @@ export default {
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]" paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll"> currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll">
<template #header> <template #header>
<div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between"> <div class="table-header flex flex-column md:flex-row md:justiify-content-between">
<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5> <h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Search..." /> <InputText v-model="filters['global'].value" placeholder="Search..." />
@ -558,7 +558,7 @@ export default {
</Column> </Column>
<Column :exportable="false" style="min-width:8rem"> <Column :exportable="false" style="min-width:8rem">
<template #body="slotProps"> <template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" /> <Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" /> <Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
</template> </template>
</Column> </Column>
@ -567,18 +567,18 @@ export default {
<Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid"> <Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="product.image" class="product-image" v-if="product.image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="product.image" class="product-image" v-if="product.image" />
<div class="p-field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" /> <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
<small class="p-error" v-if="submitted && !product.name">Name is required.</small> <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
</div> </div>
<div class="p-field"> <div class="field">
<label for="description">Description</label> <label for="description">Description</label>
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" /> <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="inventoryStatus" class="p-mb-3">Inventory Status</label> <label for="inventoryStatus" class="mb-3">Inventory Status</label>
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status"> <Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value && slotProps.value.value"> <div v-if="slotProps.value && slotProps.value.value">
@ -594,34 +594,34 @@ export default {
</Dropdown> </Dropdown>
</div> </div>
<div class="p-field"> <div class="field">
<label class="p-mb-3">Category</label> <label class="mb-3">Category</label>
<div class="p-formgrid p-grid"> <div class="formgrid grid">
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category1" name="category" value="Accessories" v-model="product.category" /> <RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
<label for="category1">Accessories</label> <label for="category1">Accessories</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category2" name="category" value="Clothing" v-model="product.category" /> <RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
<label for="category2">Clothing</label> <label for="category2">Clothing</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category3" name="category" value="Electronics" v-model="product.category" /> <RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
<label for="category3">Electronics</label> <label for="category3">Electronics</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<RadioButton id="category4" name="category" value="Fitness" v-model="product.category" /> <RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
<label for="category4">Fitness</label> <label for="category4">Fitness</label>
</div> </div>
</div> </div>
</div> </div>
<div class="p-formgrid p-grid"> <div class="formgrid grid">
<div class="p-field p-col"> <div class="field col">
<label for="price">Price</label> <label for="price">Price</label>
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" /> <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
</div> </div>
<div class="p-field p-col"> <div class="field col">
<label for="quantity">Quantity</label> <label for="quantity">Quantity</label>
<InputNumber id="quantity" v-model="product.quantity" integeronly /> <InputNumber id="quantity" v-model="product.quantity" integeronly />
</div> </div>
@ -634,7 +634,7 @@ export default {
<Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span> <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
</div> </div>
<template #footer> <template #footer>
@ -645,7 +645,7 @@ export default {
<Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete the selected products?</span> <span v-if="product">Are you sure you want to delete the selected products?</span>
</div> </div>
<template #footer> <template #footer>
@ -831,14 +831,14 @@ export default {
<div class="card"> <div class="card">
<p-toast></p-toast> <p-toast></p-toast>
<p-toolbar class="p-mb-4"> <p-toolbar class="mb-4">
<template #start> <template #start>
<p-button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew"></p-button> <p-button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew"></p-button>
<p-button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length"></p-button> <p-button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length"></p-button>
</template> </template>
<template #end> <template #end>
<p-fileupload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block"></p-fileupload> <p-fileupload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileupload>
<p-button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"></p-button> <p-button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"></p-button>
</template> </template>
</p-toolbar> </p-toolbar>
@ -848,8 +848,8 @@ export default {
paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rows-per-page-options="[5,10,25]" paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rows-per-page-options="[5,10,25]"
current-page-report-template="Showing {first} to {last} of {totalRecords} products" responsive-layout="scroll"> current-page-report-template="Showing {first} to {last} of {totalRecords} products" responsive-layout="scroll">
<template #header> <template #header>
<div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between"> <div class="table-header flex flex-column md:flex-row md:justiify-content-between">
<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5> <h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<p-inputtext v-model="filters['global'].value" placeholder="Search..."></p-inputtext> <p-inputtext v-model="filters['global'].value" placeholder="Search..."></p-inputtext>
@ -857,53 +857,53 @@ export default {
</div> </div>
</template> </template>
<p-column selectionMode="multiple" style="width: 3rem" :exportable="false"></p-column> <column selectionMode="multiple" style="width: 3rem" :exportable="false"></column>
<p-column field="code" header="Code" :sortable="true" style="min-width:12rem"></p-column> <column field="code" header="Code" :sortable="true" style="min-width:12rem"></column>
<p-column field="name" header="Name" :sortable="true" style="min-width:16rem"></p-column> <column field="name" header="Name" :sortable="true" style="min-width:16rem"></column>
<p-column header="Image"> <column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="product-image" />
</template> </template>
</p-column> </column>
<p-column field="price" header="Price" :sortable="true" style="min-width:8rem"> <column field="price" header="Price" :sortable="true" style="min-width:8rem">
<template #body="slotProps"> <template #body="slotProps">
{{formatCurrency(slotProps.data.price)}} {{formatCurrency(slotProps.data.price)}}
</template> </template>
</p-column> </column>
<p-column field="category" header="Category" :sortable="true" style="min-width:10rem"></p-column> <column field="category" header="Category" :sortable="true" style="min-width:10rem"></column>
<p-column field="rating" header="Reviews" :sortable="true" style="min-width:12rem"> <column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">
<template #body="slotProps"> <template #body="slotProps">
<p-rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></p-rating> <p-rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></p-rating>
</template> </template>
</p-column> </column>
<p-column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem"> <column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">
<template #body="slotProps"> <template #body="slotProps">
<span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')">{{slotProps.data.inventoryStatus}}</span>
</template> </template>
</p-column> </column>
<p-column :exportable="false" style="min-width:8rem"> <column :exportable="false" style="min-width:8rem">
<template #body="slotProps"> <template #body="slotProps">
<p-button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)"></p-button> <p-button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)"></p-button>
<p-button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)"></p-button> <p-button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)"></p-button>
</template> </template>
</p-column> </column>
</p-datatable> </p-datatable>
</div> </div>
<p-dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid"> <p-dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="product-image" v-if="product.image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="product-image" v-if="product.image" />
<div class="p-field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<p-inputtext id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}"></p-inputtext> <p-inputtext id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}"></p-inputtext>
<small class="p-error" v-if="submitted && !product.name">Name is required.</small> <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
</div> </div>
<div class="p-field"> <div class="field">
<label for="description">Description</label> <label for="description">Description</label>
<p-textarea id="description" v-model="product.description" required="true" rows="3" cols="20"></p-textarea> <p-textarea id="description" v-model="product.description" required="true" rows="3" cols="20"></p-textarea>
</div> </div>
<div class="p-field"> <div class="field">
<label for="inventoryStatus" class="p-mb-3">Inventory Status</label> <label for="inventoryStatus" class="mb-3">Inventory Status</label>
<p-dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" option-label="label" placeholder="Select a Status"> <p-dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" option-label="label" placeholder="Select a Status">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value && slotProps.value.value"> <div v-if="slotProps.value && slotProps.value.value">
@ -919,34 +919,34 @@ export default {
</p-dropdown> </p-dropdown>
</div> </div>
<div class="p-field"> <div class="field">
<label class="p-mb-3">Category</label> <label class="mb-3">Category</label>
<div class="p-formgrid p-grid"> <div class="formgrid grid">
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<p-radiobutton id="category1" name="category" value="Accessories" v-model="product.category"></p-radiobutton> <p-radiobutton id="category1" name="category" value="Accessories" v-model="product.category"></p-radiobutton>
<label for="category1">Accessories</label> <label for="category1">Accessories</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<p-radiobutton id="category2" name="category" value="Clothing" v-model="product.category"></p-radiobutton> <p-radiobutton id="category2" name="category" value="Clothing" v-model="product.category"></p-radiobutton>
<label for="category2">Clothing</label> <label for="category2">Clothing</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<p-radiobutton id="category3" name="category" value="Electronics" v-model="product.category"></p-radiobutton> <p-radiobutton id="category3" name="category" value="Electronics" v-model="product.category"></p-radiobutton>
<label for="category3">Electronics</label> <label for="category3">Electronics</label>
</div> </div>
<div class="p-field-radiobutton p-col-6"> <div class="field-radiobutton col-6">
<p-radiobutton id="category4" name="category" value="Fitness" v-model="product.category"></p-radiobutton> <p-radiobutton id="category4" name="category" value="Fitness" v-model="product.category"></p-radiobutton>
<label for="category4">Fitness</label> <label for="category4">Fitness</label>
</div> </div>
</div> </div>
</div> </div>
<div class="p-formgrid p-grid"> <div class="formgrid grid">
<div class="p-field p-col"> <div class="field col">
<label for="price">Price</label> <label for="price">Price</label>
<p-inputnumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US"></p-inputnumber></p-inputnumber> <p-inputnumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US"></p-inputnumber></p-inputnumber>
</div> </div>
<div class="p-field p-col"> <div class="field col">
<label for="quantity">Quantity</label> <label for="quantity">Quantity</label>
<p-inputnumber id="quantity" v-model="product.quantity" integeronly></p-inputnumber> <p-inputnumber id="quantity" v-model="product.quantity" integeronly></p-inputnumber>
</div> </div>
@ -959,7 +959,7 @@ export default {
<p-dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <p-dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"></i> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span> <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
</div> </div>
<template #footer> <template #footer>
@ -970,7 +970,7 @@ export default {
<p-dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <p-dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"></i> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
<span v-if="product">Are you sure you want to delete the selected products?</span> <span v-if="product">Are you sure you want to delete the selected products?</span>
</div> </div>
<template #footer> <template #footer>
@ -1098,7 +1098,7 @@ export default {
}, },
components: { components: {
"p-datatable": primevue.datatable, "p-datatable": primevue.datatable,
"p-column": primevue.column, "column": primevue.column,
"p-toolbar": primevue.toolbar, "p-toolbar": primevue.toolbar,
"p-fileupload": primevue.fileupload, "p-fileupload": primevue.fileupload,
"p-rating": primevue.rating, "p-rating": primevue.rating,

14
src/views/datatable/DataTableDemo.vue
View File

@ -16,13 +16,13 @@
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
:globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll"> :globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
<template #header> <template #header>
<div class="p-d-flex p-jc-between p-ai-center"> <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
<h5 class="p-m-0">Customers</h5> <h5 class="m-0">Customers</h5>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span> </span>
</div> </div>
</template> </template>
<template #empty> <template #empty>
No customers found. No customers found.
@ -49,12 +49,12 @@
</template> </template>
</Column> </Column>
<Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem"> <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem">
<template #body="{data}"> <template #body="{data}">
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{data.representative.name}}</span> <span class="image-text">{{data.representative.name}}</span>
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<div class="p-mb-3 p-text-bold">Agent Picker</div> <div class="mb-3 font-bold">Agent Picker</div>
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter"> <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
@ -101,8 +101,8 @@
<ProgressBar :value="data.activity" :showValue="false" /> <ProgressBar :value="data.activity" :showValue="false" />
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<Slider v-model="filterModel.value" range class="p-m-3"></Slider> <Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="p-d-flex p-ai-center p-jc-between p-px-2"> <div class="flex align-items-center justify-content-center px-2">
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span> <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span> <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div> </div>

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

@ -731,7 +731,6 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</code></pre> </code></pre>
@ -747,7 +746,6 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</code></pre> </code></pre>
@ -826,7 +824,6 @@ app.use(PrimeVue, {
&lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`"/&gt; &lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
</template> </template>
</code></pre> </code></pre>
@ -868,10 +865,9 @@ matchModes: [
&lt;Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"&gt;&lt;/Button&gt; &lt;Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"&gt;&lt;/Button&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #filterfooter&gt; &lt;template #filterfooter&gt;
&lt;div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold"&gt;Customized Buttons&lt;/div&gt; &lt;div class="px-3 pt-0 pb-3 text-center font-bold"&gt;Customized Buttons&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
</template> </template>
</code></pre> </code></pre>
@ -879,7 +875,7 @@ matchModes: [
<h5>Selection</h5> <h5>Selection</h5>
<p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive. <p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive.
Alternatively column based selection can be done using radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect Alternatively column based selection can be done using radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect
events are provided as optional callbacks.</p> events are provided as optional callbacks.</p>
<p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory however being able to define it increases the performance of the table signifantly.</p> <p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory however being able to define it increases the performance of the table signifantly.</p>
@ -1078,11 +1074,11 @@ matchModes: [
&lt;div class="car-details"&gt; &lt;div class="car-details"&gt;
&lt;div&gt; &lt;div&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="p-grid"&gt; &lt;div class="grid"&gt;
&lt;div class="p-col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt; &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
@ -2630,8 +2626,8 @@ export default {
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
:globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll"> :globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
<template #header> <template #header>
<div class="p-d-flex p-jc-between p-ai-center"> <div class="flex justify-content-center align-items-center">
<h5 class="p-m-0">Customers</h5> <h5 class="m-0">Customers</h5>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -2668,7 +2664,7 @@ export default {
<span class="image-text">{{data.representative.name}}</span> <span class="image-text">{{data.representative.name}}</span>
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<div class="p-mb-3 p-text-bold">Agent Picker</div> <div class="mb-3 font-bold">Agent Picker</div>
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter"> <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
@ -2715,8 +2711,8 @@ export default {
<ProgressBar :value="data.activity" :showValue="false" /> <ProgressBar :value="data.activity" :showValue="false" />
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<Slider v-model="filterModel.value" range class="p-m-3"></Slider> <Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="p-d-flex p-ai-center p-jc-between p-px-2"> <div class="flex align-items-center justify-content-center px-2">
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span> <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span> <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div> </div>
@ -2854,8 +2850,8 @@ export default {
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
:globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll"> :globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
<template #header> <template #header>
<div class="p-d-flex p-jc-between p-ai-center"> <div class="flex justify-content-center align-items-center">
<h5 class="p-m-0">Customers</h5> <h5 class="m-0">Customers</h5>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@ -2892,7 +2888,7 @@ export default {
<span class="image-text">{{data.representative.name}}</span> <span class="image-text">{{data.representative.name}}</span>
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<div class="p-mb-3 p-text-bold">Agent Picker</div> <div class="mb-3 font-bold">Agent Picker</div>
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter"> <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
@ -2939,8 +2935,8 @@ export default {
<ProgressBar :value="data.activity" :showValue="false" /> <ProgressBar :value="data.activity" :showValue="false" />
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<Slider v-model="filterModel.value" range class="p-m-3"></Slider> <Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="p-d-flex p-ai-center p-jc-between p-px-2"> <div class="flex align-items-center justify-content-center px-2">
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span> <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span> <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div> </div>
@ -3117,8 +3113,8 @@ img {
current-page-report-template="Showing {first} to {last} of {totalRecords} entries" current-page-report-template="Showing {first} to {last} of {totalRecords} entries"
:global-filter-fields="['name','country.name','representative.name','status']" responsive-layout="scroll"> :global-filter-fields="['name','country.name','representative.name','status']" responsive-layout="scroll">
<template #header> <template #header>
<div class="p-d-flex p-jc-between p-ai-center"> <div class="flex justify-content-center align-items-center">
<h5 class="p-m-0">Customers</h5> <h5 class="m-0">Customers</h5>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<p-inputtext v-model="filters['global'].value" placeholder="Keyword Search"></p-inputtext> <p-inputtext v-model="filters['global'].value" placeholder="Keyword Search"></p-inputtext>
@ -3155,7 +3151,7 @@ img {
<span class="image-text">{{data.representative.name}}</span> <span class="image-text">{{data.representative.name}}</span>
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<div class="p-mb-3 p-text-bold">Agent Picker</div> <div class="mb-3 font-bold">Agent Picker</div>
<p-multiselect v-model="filterModel.value" :options="representatives" option-label="name" placeholder="Any" class="p-column-filter"> <p-multiselect v-model="filterModel.value" :options="representatives" option-label="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
@ -3202,8 +3198,8 @@ img {
<p-progressbar :value="data.activity" :show-value="false"></p-progressbar> <p-progressbar :value="data.activity" :show-value="false"></p-progressbar>
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<p-slider v-model="filterModel.value" range class="p-m-3"></p-slider> <p-slider v-model="filterModel.value" range class="m-3"></p-slider>
<div class="p-d-flex p-ai-center p-jc-between p-px-2"> <div class="flex align-items-center justify-content-center px-2">
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span> <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span> <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div> </div>

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

@ -16,7 +16,7 @@
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll" dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','balance','status']"> :globalFilterFields="['name','country.name','representative.name','balance','status']">
<template #header> <template #header>
<div class="p-d-flex p-jc-between"> <div class="flex justify-content-center">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/> <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
@ -53,7 +53,7 @@
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button> <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
</template> </template>
<template #filterfooter> <template #filterfooter>
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div> <div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
</template> </template>
</Column> </Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem"> <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem">
@ -62,7 +62,7 @@
<span class="image-text">{{data.representative.name}}</span> <span class="image-text">{{data.representative.name}}</span>
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<div class="p-mb-3 p-text-bold">Agent Picker</div> <div class="mb-3 font-bold">Agent Picker</div>
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter"> <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
@ -110,14 +110,14 @@
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar> <ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
</template> </template>
<template #filter={filterModel}> <template #filter={filterModel}>
<Slider v-model="filterModel.value" range class="p-m-3"></Slider> <Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="p-d-flex p-ai-center p-jc-between p-px-2"> <div class="flex align-items-center justify-content-center px-2">
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span> <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span> <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div> </div>
</template> </template>
</Column> </Column>
<Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem"> <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width:8rem">
<template #body="{data}"> <template #body="{data}">
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i> <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
</template> </template>
@ -135,7 +135,7 @@
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll" dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','status']"> :globalFilterFields="['name','country.name','representative.name','status']">
<template #header> <template #header>
<div class="p-d-flex p-jc-end"> <div class="flex justify-content-end">
<span class="p-input-icon-left "> <span class="p-input-icon-left ">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters2['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
@ -261,7 +261,7 @@ export default {
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll" dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','balance','status']"> :globalFilterFields="['name','country.name','representative.name','balance','status']">
<template #header> <template #header>
<div class="p-d-flex p-jc-between"> <div class="flex justify-content-center">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/> <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
@ -298,7 +298,7 @@ export default {
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button> <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
</template> </template>
<template #filterfooter> <template #filterfooter>
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div> <div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
</template> </template>
</Column> </Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem"> <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem">
@ -307,7 +307,7 @@ export default {
<span class="image-text">{{data.representative.name}}</span> <span class="image-text">{{data.representative.name}}</span>
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<div class="p-mb-3 p-text-bold">Agent Picker</div> <div class="mb-3 font-bold">Agent Picker</div>
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter"> <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
@ -355,14 +355,14 @@ export default {
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar> <ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
</template> </template>
<template #filter={filterModel}> <template #filter={filterModel}>
<Slider v-model="filterModel.value" range class="p-m-3"></Slider> <Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="p-d-flex p-ai-center p-jc-between p-px-2"> <div class="flex align-items-center justify-content-center px-2">
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span> <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span> <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div> </div>
</template> </template>
</Column> </Column>
<Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem"> <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width:8rem">
<template #body="{data}"> <template #body="{data}">
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i> <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
</template> </template>
@ -380,7 +380,7 @@ export default {
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll" dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','status']"> :globalFilterFields="['name','country.name','representative.name','status']">
<template #header> <template #header>
<div class="p-d-flex p-jc-end"> <div class="flex justify-content-end">
<span class="p-input-icon-left "> <span class="p-input-icon-left ">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters2['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
@ -602,7 +602,7 @@ export default {
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll" dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','balance','status']"> :globalFilterFields="['name','country.name','representative.name','balance','status']">
<template #header> <template #header>
<div class="p-d-flex p-jc-between"> <div class="flex justify-content-center">
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/> <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
@ -639,7 +639,7 @@ export default {
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button> <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
</template> </template>
<template #filterfooter> <template #filterfooter>
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div> <div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
</template> </template>
</Column> </Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem"> <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem">
@ -648,7 +648,7 @@ export default {
<span class="image-text">{{data.representative.name}}</span> <span class="image-text">{{data.representative.name}}</span>
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<div class="p-mb-3 p-text-bold">Agent Picker</div> <div class="mb-3 font-bold">Agent Picker</div>
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter"> <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
@ -696,14 +696,14 @@ export default {
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar> <ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
</template> </template>
<template #filter={filterModel}> <template #filter={filterModel}>
<Slider v-model="filterModel.value" range class="p-m-3"></Slider> <Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="p-d-flex p-ai-center p-jc-between p-px-2"> <div class="flex align-items-center justify-content-center px-2">
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span> <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span> <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div> </div>
</template> </template>
</Column> </Column>
<Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem"> <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width:8rem">
<template #body="{data}"> <template #body="{data}">
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i> <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
</template> </template>
@ -721,7 +721,7 @@ export default {
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll" dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','status']"> :globalFilterFields="['name','country.name','representative.name','status']">
<template #header> <template #header>
<div class="p-d-flex p-jc-end"> <div class="flex justify-content-end">
<span class="p-input-icon-left "> <span class="p-input-icon-left ">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters2['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
@ -958,7 +958,7 @@ export default {
data-key="id" v-model:filters="filters1" filter-display="menu" :loading="loading1" responsive-layout="scroll" data-key="id" v-model:filters="filters1" filter-display="menu" :loading="loading1" responsive-layout="scroll"
:global-filter-fields="['name','country.name','representative.name','balance','status']"> :global-filter-fields="['name','country.name','representative.name','balance','status']">
<template #header> <template #header>
<div class="p-d-flex p-jc-between"> <div class="flex justify-content-center">
<p-button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"></p-button> <p-button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"></p-button>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
@ -995,7 +995,7 @@ export default {
<p-button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></p-button> <p-button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></p-button>
</template> </template>
<template #filterfooter> <template #filterfooter>
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div> <div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
</template> </template>
</p-column> </p-column>
<p-column header="Agent" filter-field="representative" :show-filter-match-modes="false" :filter-menu-style="{'width':'14rem'}" style="min-width:14rem"> <p-column header="Agent" filter-field="representative" :show-filter-match-modes="false" :filter-menu-style="{'width':'14rem'}" style="min-width:14rem">
@ -1004,7 +1004,7 @@ export default {
<span class="image-text">{{data.representative.name}}</span> <span class="image-text">{{data.representative.name}}</span>
</template> </template>
<template #filter="{filterModel}"> <template #filter="{filterModel}">
<div class="p-mb-3 p-text-bold">Agent Picker</div> <div class="mb-3 font-bold">Agent Picker</div>
<p-multiselect v-model="filterModel.value" :options="representatives" option-label="name" placeholder="Any" class="p-column-filter"> <p-multiselect v-model="filterModel.value" :options="representatives" option-label="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
@ -1052,14 +1052,14 @@ export default {
<p-progressbar :value="data.activity" :show-value="false"></p-progressbar> <p-progressbar :value="data.activity" :show-value="false"></p-progressbar>
</template> </template>
<template #filter={filterModel}> <template #filter={filterModel}>
<p-slider v-model="filterModel.value" range class="p-m-3"></p-slider> <p-slider v-model="filterModel.value" range class="m-3"></p-slider>
<div class="p-d-flex p-ai-center p-jc-between p-px-2"> <div class="flex align-items-center justify-content-center px-2">
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span> <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span> <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
</div> </div>
</template> </template>
</p-column> </p-column>
<p-column field="verified" header="Verified" data-type="boolean" body-class="p-text-center" style="min-width:8rem"> <p-column field="verified" header="Verified" data-type="boolean" body-class="text-center" style="min-width:8rem">
<template #body="{data}"> <template #body="{data}">
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i> <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
</template> </template>
@ -1077,7 +1077,7 @@ export default {
data-key="id" v-model:filters="filters2" filter-display="row" :loading="loading2" responsive-layout="scroll" data-key="id" v-model:filters="filters2" filter-display="row" :loading="loading2" responsive-layout="scroll"
:global-filter-fields="['name','country.name','representative.name','status']"> :global-filter-fields="['name','country.name','representative.name','status']">
<template #header> <template #header>
<div class="p-d-flex p-jc-end"> <div class="flex justify-content-end">
<span class="p-input-icon-left "> <span class="p-input-icon-left ">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<p-inputtext v-model="filters2['global'].value" placeholder="Keyword Search"></p-inputtext> <p-inputtext v-model="filters2['global'].value" placeholder="Keyword Search"></p-inputtext>

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

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

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

@ -14,7 +14,7 @@
@row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll"> @row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll">
<template #header> <template #header>
<div class="table-header-container"> <div class="table-header-container">
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" /> <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" /> <Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div> </div>
</template> </template>
@ -95,7 +95,7 @@ export default {
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" responsiveLayout="scroll"> @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" responsiveLayout="scroll">
<template #header> <template #header>
<div class="table-header-container"> <div class="table-header-container">
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" /> <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" /> <Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div> </div>
</template> </template>
@ -213,7 +213,7 @@ export default {
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" responsiveLayout="scroll"> @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" responsiveLayout="scroll">
<template #header> <template #header>
<div class="table-header-container"> <div class="table-header-container">
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" /> <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" /> <Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div> </div>
</template> </template>
@ -335,7 +335,7 @@ export default {
@row-expand="onRowExpand" @row-collapse="onRowCollapse" responsive-layout="scroll"> @row-expand="onRowExpand" @row-collapse="onRowCollapse" responsive-layout="scroll">
<template #header> <template #header>
<div class="table-header-container"> <div class="table-header-container">
<p-button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2"></p-button> <p-button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2"></p-button>
<p-button icon="pi pi-minus" label="Collapse All" @click="collapseAll"></p-button> <p-button icon="pi pi-minus" label="Collapse All" @click="collapseAll"></p-button>
</div> </div>
</template> </template>

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

@ -78,7 +78,7 @@
<h5>Frozen Columns</h5> <h5>Frozen Columns</h5>
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" /> <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" />
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3"> <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="mt-3">
<Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column> <Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column>
<Column field="id" header="Id" style="flex-grow:1;flex-basis:100px"></Column> <Column field="id" header="Id" style="flex-grow:1;flex-basis:100px"></Column>
<Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column> <Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column>
@ -90,7 +90,7 @@
<Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column> <Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column>
<Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen"> <Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
<template #body="{data}"> <template #body="{data}">
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span> <span class="font-bold">{{formatCurrency(data.balance)}}</span>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -120,7 +120,7 @@
<span class="image-text">{{slotProps.data.representative.name}}</span> <span class="image-text">{{slotProps.data.representative.name}}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
<td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td> <td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
</template> </template>
</DataTable> </DataTable>
</div> </div>
@ -216,7 +216,7 @@ export default {
<h5>Frozen Columns</h5> <h5>Frozen Columns</h5>
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" /> <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" />
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3"> <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="mt-3">
<Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column> <Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column>
<Column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></Column> <Column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></Column>
<Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column> <Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column>
@ -228,7 +228,7 @@ export default {
<Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column> <Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column>
<Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen"> <Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
<template #body="{data}"> <template #body="{data}">
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span> <span class="font-bold">{{formatCurrency(data.balance)}}</span>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -258,7 +258,7 @@ export default {
<span class="image-text">{{slotProps.data.representative.name}}</span> <span class="image-text">{{slotProps.data.representative.name}}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
<td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td> <td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
</template> </template>
</DataTable> </DataTable>
</div> </div>
@ -438,7 +438,7 @@ export default {
<h5>Frozen Columns</h5> <h5>Frozen Columns</h5>
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" /> <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" />
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3"> <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="mt-3">
<Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column> <Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column>
<Column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></Column> <Column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></Column>
<Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column> <Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column>
@ -450,7 +450,7 @@ export default {
<Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column> <Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column>
<Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen"> <Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
<template #body="{data}"> <template #body="{data}">
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span> <span class="font-bold">{{formatCurrency(data.balance)}}</span>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -480,7 +480,7 @@ export default {
<span class="image-text">{{slotProps.data.representative.name}}</span> <span class="image-text">{{slotProps.data.representative.name}}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
<td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td> <td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
</template> </template>
</DataTable> </DataTable>
</div> </div>
@ -664,7 +664,7 @@ export default {
<h5>Frozen Columns</h5> <h5>Frozen Columns</h5>
<p-togglebutton v-model="balanceFrozen" on-icon="pi pi-lock" off-icon="pi pi-lock-open" on-label="Unfreeze Balance" off-label="Freeze Balance" style="flex-grow:1; flex-basis: 12rem"></p-togglebutton> <p-togglebutton v-model="balanceFrozen" on-icon="pi pi-lock" off-icon="pi pi-lock-open" on-label="Unfreeze Balance" off-label="Freeze Balance" style="flex-grow:1; flex-basis: 12rem"></p-togglebutton>
<p-datatable :value="customers2" :scrollable="true" scroll-height="400px" :loading="loading" scroll-direction="both" class="p-mt-3"> <p-datatable :value="customers2" :scrollable="true" scroll-height="400px" :loading="loading" scroll-direction="both" class="mt-3">
<p-column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></p-column> <p-column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></p-column>
<p-column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></p-column> <p-column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></p-column>
<p-column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></p-column> <p-column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></p-column>
@ -676,7 +676,7 @@ export default {
<p-column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></p-column> <p-column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></p-column>
<p-column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen"> <p-column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
<template #body="{data}"> <template #body="{data}">
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span> <span class="font-bold">{{formatCurrency(data.balance)}}</span>
</template> </template>
</p-column> </p-column>
</p-datatable> </p-datatable>
@ -706,7 +706,7 @@ export default {
<span class="image-text">{{slotProps.data.representative.name}}</span> <span class="image-text">{{slotProps.data.representative.name}}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
<td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td> <td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
</template> </template>
</p-datatable> </p-datatable>
</div> </div>

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

@ -15,7 +15,7 @@
v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id" v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll"> stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll">
<template #header> <template #header>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters1['global'].value" placeholder="Global Search" /> <InputText v-model="filters1['global'].value" placeholder="Global Search" />
</span> </span>
@ -74,7 +74,7 @@
v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id" v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll"> stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll">
<template #header> <template #header>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters2['global'].value" placeholder="Global Search" /> <InputText v-model="filters2['global'].value" placeholder="Global Search" />
</span> </span>
@ -173,7 +173,7 @@ export default {
v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id" v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll"> stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll">
<template #header> <template #header>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters1['global'].value" placeholder="Global Search" /> <InputText v-model="filters1['global'].value" placeholder="Global Search" />
</span> </span>
@ -232,7 +232,7 @@ export default {
v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id" v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll"> stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll">
<template #header> <template #header>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters2['global'].value" placeholder="Global Search" /> <InputText v-model="filters2['global'].value" placeholder="Global Search" />
</span> </span>
@ -353,7 +353,7 @@ export default {
v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id" v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll"> stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll">
<template #header> <template #header>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters1['global'].value" placeholder="Global Search" /> <InputText v-model="filters1['global'].value" placeholder="Global Search" />
</span> </span>
@ -412,7 +412,7 @@ export default {
v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id" v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll"> stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll">
<template #header> <template #header>
<span class="p-input-icon-left"> <span class="p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText v-model="filters2['global'].value" placeholder="Global Search" /> <InputText v-model="filters2['global'].value" placeholder="Global Search" />
</span> </span>

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

@ -19,7 +19,7 @@
</template> </template>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
@ -30,7 +30,7 @@
</Column> </Column>
<Column field="rating" header="Reviews"> <Column field="rating" header="Reviews">
<template #body="slotProps"> <template #body="slotProps">
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" /> <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
</template> </template>
</Column> </Column>
<Column header="Status"> <Column header="Status">
@ -72,7 +72,7 @@ export default {
</template> </template>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
@ -83,7 +83,7 @@ export default {
</Column> </Column>
<Column field="rating" header="Reviews"> <Column field="rating" header="Reviews">
<template #body="slotProps"> <template #body="slotProps">
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" /> <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
</template> </template>
</Column> </Column>
<Column header="Status"> <Column header="Status">
@ -150,7 +150,7 @@ export default {
</template> </template>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
@ -161,7 +161,7 @@ export default {
</Column> </Column>
<Column field="rating" header="Reviews"> <Column field="rating" header="Reviews">
<template #body="slotProps"> <template #body="slotProps">
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" /> <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
</template> </template>
</Column> </Column>
<Column header="Status"> <Column header="Status">

40
src/views/datatable/DataTableVirtualScrollDemo.vue
View File

@ -24,35 +24,35 @@
<DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }"> <DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
<Column field="id" header="Id" style="min-width: '200px'"> <Column field="id" header="Id" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="60%" height="1rem" /> <Skeleton width="60%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="vin" header="Vin" style="min-width: '200px'"> <Column field="vin" header="Vin" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="40%" height="1rem" /> <Skeleton width="40%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="year" header="Year" style="min-width: '200px'"> <Column field="year" header="Year" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="30%" height="1rem" /> <Skeleton width="30%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="brand" header="Brand" style="min-width: '200px'"> <Column field="brand" header="Brand" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="40%" height="1rem" /> <Skeleton width="40%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="color" header="Color" style="min-width: '200px'"> <Column field="color" header="Color" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="60%" height="1rem" /> <Skeleton width="60%" height="1rem" />
</div> </div>
</template> </template>
@ -95,35 +95,35 @@ export default {
<DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }"> <DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
<Column field="id" header="Id" style="min-width: '200px'"> <Column field="id" header="Id" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="60%" height="1rem" /> <Skeleton width="60%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="vin" header="Vin" style="min-width: '200px'"> <Column field="vin" header="Vin" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="40%" height="1rem" /> <Skeleton width="40%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="year" header="Year" style="min-width: '200px'"> <Column field="year" header="Year" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="30%" height="1rem" /> <Skeleton width="30%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="brand" header="Brand" style="min-width: '200px'"> <Column field="brand" header="Brand" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="40%" height="1rem" /> <Skeleton width="40%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="color" header="Color" style="min-width: '200px'"> <Column field="color" header="Color" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="60%" height="1rem" /> <Skeleton width="60%" height="1rem" />
</div> </div>
</template> </template>
@ -200,35 +200,35 @@ export default {
<DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }"> <DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
<Column field="id" header="Id" style="min-width: '200px'"> <Column field="id" header="Id" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="60%" height="1rem" /> <Skeleton width="60%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="vin" header="Vin" style="min-width: '200px'"> <Column field="vin" header="Vin" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="40%" height="1rem" /> <Skeleton width="40%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="year" header="Year" style="min-width: '200px'"> <Column field="year" header="Year" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="30%" height="1rem" /> <Skeleton width="30%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="brand" header="Brand" style="min-width: '200px'"> <Column field="brand" header="Brand" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="40%" height="1rem" /> <Skeleton width="40%" height="1rem" />
</div> </div>
</template> </template>
</Column> </Column>
<Column field="color" header="Color" style="min-width: '200px'"> <Column field="color" header="Color" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<Skeleton width="60%" height="1rem" /> <Skeleton width="60%" height="1rem" />
</div> </div>
</template> </template>
@ -306,35 +306,35 @@ export default {
<p-datatable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }"> <p-datatable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
<p-column field="id" header="Id" style="min-width: '200px'"> <p-column field="id" header="Id" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<p-skeleton width="60%" height="1rem" /> <p-skeleton width="60%" height="1rem" />
</div> </div>
</template> </template>
</p-column> </p-column>
<p-column field="vin" header="Vin" style="min-width: '200px'"> <p-column field="vin" header="Vin" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<p-skeleton width="40%" height="1rem" /> <p-skeleton width="40%" height="1rem" />
</div> </div>
</template> </template>
</p-column> </p-column>
<p-column field="year" header="Year" style="min-width: '200px'"> <p-column field="year" header="Year" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<p-skeleton width="30%" height="1rem" /> <p-skeleton width="30%" height="1rem" />
</div> </div>
</template> </template>
</p-column> </p-column>
<p-column field="brand" header="Brand" style="min-width: '200px'"> <p-column field="brand" header="Brand" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<p-skeleton width="40%" height="1rem" /> <p-skeleton width="40%" height="1rem" />
</div> </div>
</template> </template>
</p-column> </p-column>
<p-column field="color" header="Color" style="min-width: '200px'"> <p-column field="color" header="Color" style="min-width: '200px'">
<template #loading> <template #loading>
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}"> <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
<p-skeleton width="60%" height="1rem" /> <p-skeleton width="60%" height="1rem" />
</div> </div>
</template> </template>

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

@ -12,18 +12,18 @@
<div class="card"> <div class="card">
<DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField"> <DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
<template #header> <template #header>
<div class="p-grid p-nogutter"> <div class="grid grid-nogutter">
<div class="p-col-6" style="text-align: left"> <div class="col-6" style="text-align: left">
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/> <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
</div> </div>
<div class="p-col-6" style="text-align: right"> <div class="col-6" style="text-align: right">
<DataViewLayoutOptions v-model="layout" /> <DataViewLayoutOptions v-model="layout" />
</div> </div>
</div> </div>
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="p-col-12"> <div class="col-12">
<div class="product-list-item"> <div class="product-list-item">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name"/> <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name"/>
<div class="product-list-detail"> <div class="product-list-detail">
@ -42,7 +42,7 @@
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="product-grid-item card"> <div class="product-grid-item card">
<div class="product-grid-item-top"> <div class="product-grid-item-top">
<div> <div>

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

@ -43,15 +43,15 @@ export default {
<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p> <p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;template #list="slotProps"&gt; &lt;template #list="slotProps"&gt;
&lt;div class="p-col-12"&gt; &lt;div class="col-12"&gt;
&lt;div class="car-details"&gt; &lt;div class="car-details"&gt;
&lt;div&gt; &lt;div&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="p-grid"&gt; &lt;div class="grid"&gt;
&lt;div class="p-col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt; &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
@ -59,7 +59,7 @@ export default {
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #grid="slotProps"&gt; &lt;template #grid="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt; &lt;div style="padding: .5em" class="col-12 md:col-3"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt; &lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt; &lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
@ -133,11 +133,11 @@ export default {
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt; &lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div class="p-grid p-nogutter"&gt; &lt;div class="grid grid-nogutter"&gt;
&lt;div class="p-col-6" style="text-align: left"&gt; &lt;div class="col-6" style="text-align: left"&gt;
&lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt; &lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-6" style="text-align: right"&gt; &lt;div class="col-6" style="text-align: right"&gt;
&lt;DataViewLayoutOptions v-model="layout" /&gt; &lt;DataViewLayoutOptions v-model="layout" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -451,7 +451,7 @@ export default {
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>PrimeFlex 2.0.0.</p> <p>PrimeFlex</p>
</AppDoc> </AppDoc>
</template> </template>
@ -467,18 +467,18 @@ export default {
<div class="card"> <div class="card">
<DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField"> <DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
<template #header> <template #header>
<div class="p-grid p-nogutter"> <div class="grid grid-nogutter">
<div class="p-col-6" style="text-align: left"> <div class="col-6" style="text-align: left">
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/> <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
</div> </div>
<div class="p-col-6" style="text-align: right"> <div class="col-6" style="text-align: right">
<DataViewLayoutOptions v-model="layout" /> <DataViewLayoutOptions v-model="layout" />
</div> </div>
</div> </div>
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="p-col-12"> <div class="col-12">
<div class="product-list-item"> <div class="product-list-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
<div class="product-list-detail"> <div class="product-list-detail">
@ -497,7 +497,7 @@ export default {
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="product-grid-item card"> <div class="product-grid-item card">
<div class="product-grid-item-top"> <div class="product-grid-item-top">
<div> <div>
@ -702,18 +702,18 @@ export default {
<div class="card"> <div class="card">
<DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField"> <DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
<template #header> <template #header>
<div class="p-grid p-nogutter"> <div class="grid grid-nogutter">
<div class="p-col-6" style="text-align: left"> <div class="col-6" style="text-align: left">
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/> <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
</div> </div>
<div class="p-col-6" style="text-align: right"> <div class="col-6" style="text-align: right">
<DataViewLayoutOptions v-model="layout" /> <DataViewLayoutOptions v-model="layout" />
</div> </div>
</div> </div>
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="p-col-12"> <div class="col-12">
<div class="product-list-item"> <div class="product-list-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
<div class="product-list-detail"> <div class="product-list-detail">
@ -732,7 +732,7 @@ export default {
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="product-grid-item card"> <div class="product-grid-item card">
<div class="product-grid-item-top"> <div class="product-grid-item-top">
<div> <div>
@ -939,18 +939,18 @@ export default {
<div class="card"> <div class="card">
<p-dataview :value="products" :layout="layout" :paginator="true" :rows="9" :sort-order="sortOrder" :sort-field="sortField"> <p-dataview :value="products" :layout="layout" :paginator="true" :rows="9" :sort-order="sortOrder" :sort-field="sortField">
<template #header> <template #header>
<div class="p-grid p-nogutter"> <div class="grid grid-nogutter">
<div class="p-col-6" style="text-align: left"> <div class="col-6" style="text-align: left">
<p-dropdown v-model="sortKey" :options="sortOptions" option-label="label" placeholder="Sort By Price" @change="onSortChange($event)"></p-dropdown> <p-dropdown v-model="sortKey" :options="sortOptions" option-label="label" placeholder="Sort By Price" @change="onSortChange($event)"></p-dropdown>
</div> </div>
<div class="p-col-6" style="text-align: right"> <div class="col-6" style="text-align: right">
<p-dataviewlayoutoptions v-model="layout"></p-dataviewlayoutoptions> <p-dataviewlayoutoptions v-model="layout"></p-dataviewlayoutoptions>
</div> </div>
</div> </div>
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="p-col-12"> <div class="col-12">
<div class="product-list-item"> <div class="product-list-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
<div class="product-list-detail"> <div class="product-list-detail">
@ -969,7 +969,7 @@ export default {
</template> </template>
<template #grid="slotProps"> <template #grid="slotProps">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="product-grid-item card"> <div class="product-grid-item card">
<div class="product-grid-item-top"> <div class="product-grid-item-top">
<div> <div>

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

@ -48,7 +48,7 @@
<h5>Modal</h5> <h5>Modal</h5>
<Button label="Show" icon="pi pi-external-link" @click="openModal" /> <Button label="Show" icon="pi pi-external-link" @click="openModal" />
<Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true"> <Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>
@ -74,7 +74,7 @@
<Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" /> <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true"> <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span>Are you sure you want to proceed?</span> <span>Are you sure you want to proceed?</span>
</div> </div>
<template #footer> <template #footer>
@ -86,7 +86,7 @@
<h5>Maximizable</h5> <h5>Maximizable</h5>
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" /> <Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
<Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"> <Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>
@ -96,17 +96,17 @@
</Dialog> </Dialog>
<h5>Position</h5> <h5>Position</h5>
<div class="p-grid p-dir-col"> <div class="grid flex-column">
<div class="p-col"> <div class="col">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" /> <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
</div> </div>
<div class="p-col"> <div class="col">
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" /> <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" /> <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" /> <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
</div> </div>
<div class="p-col"> <div class="col">
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" /> <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" /> <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" /> <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
@ -114,7 +114,7 @@
</div> </div>
<Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true"> <Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>

48
src/views/dialog/DialogDoc.vue
View File

@ -392,7 +392,7 @@ export default {
<h5>Modal</h5> <h5>Modal</h5>
<Button label="Show" icon="pi pi-external-link" @click="openModal" /> <Button label="Show" icon="pi pi-external-link" @click="openModal" />
<Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true"> <Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>
@ -418,7 +418,7 @@ export default {
<Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" /> <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true"> <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span>Are you sure you want to proceed?</span> <span>Are you sure you want to proceed?</span>
</div> </div>
<template #footer> <template #footer>
@ -430,7 +430,7 @@ export default {
<h5>Maximizable</h5> <h5>Maximizable</h5>
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" /> <Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
<Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"> <Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>
@ -440,17 +440,17 @@ export default {
</Dialog> </Dialog>
<h5>Position</h5> <h5>Position</h5>
<div class="p-grid p-dir-col"> <div class="grid flex-column">
<div class="p-col"> <div class="col">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" /> <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
</div> </div>
<div class="p-col"> <div class="col">
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" /> <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" /> <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" /> <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
</div> </div>
<div class="p-col"> <div class="col">
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" /> <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" /> <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" /> <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
@ -458,7 +458,7 @@ export default {
</div> </div>
<Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true"> <Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>
@ -595,7 +595,7 @@ p {
<h5>Modal</h5> <h5>Modal</h5>
<Button label="Show" icon="pi pi-external-link" @click="openModal" /> <Button label="Show" icon="pi pi-external-link" @click="openModal" />
<Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true"> <Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>
@ -621,7 +621,7 @@ p {
<Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" /> <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true"> <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span>Are you sure you want to proceed?</span> <span>Are you sure you want to proceed?</span>
</div> </div>
<template #footer> <template #footer>
@ -633,7 +633,7 @@ p {
<h5>Maximizable</h5> <h5>Maximizable</h5>
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" /> <Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
<Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"> <Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>
@ -643,17 +643,17 @@ p {
</Dialog> </Dialog>
<h5>Position</h5> <h5>Position</h5>
<div class="p-grid p-dir-col"> <div class="grid p-dir-col">
<div class="p-col"> <div class="col">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" /> <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" /> <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
</div> </div>
<div class="p-col"> <div class="col">
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" /> <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" /> <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" /> <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
</div> </div>
<div class="p-col"> <div class="col">
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" /> <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" /> <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" /> <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
@ -661,7 +661,7 @@ p {
</div> </div>
<Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true"> <Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>
@ -799,7 +799,7 @@ p {
<h5>Modal</h5> <h5>Modal</h5>
<p-button label="Show" icon="pi pi-external-link" @click="openModal"></p-button> <p-button label="Show" icon="pi pi-external-link" @click="openModal"></p-button>
<p-dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true"> <p-dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>
@ -825,7 +825,7 @@ p {
<p-button label="Confirm" icon="pi pi-external-link" @click="openConfirmation"></p-button> <p-button label="Confirm" icon="pi pi-external-link" @click="openConfirmation"></p-button>
<p-dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true"> <p-dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
<div class="confirmation-content"> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"></i> <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
<span>Are you sure you want to proceed?</span> <span>Are you sure you want to proceed?</span>
</div> </div>
<template #footer> <template #footer>
@ -837,7 +837,7 @@ p {
<h5>Maximizable</h5> <h5>Maximizable</h5>
<p-button label="Show" icon="pi pi-external-link" @click="openMaximizable"></p-button> <p-button label="Show" icon="pi pi-external-link" @click="openMaximizable"></p-button>
<p-dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"> <p-dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>
@ -847,17 +847,17 @@ p {
</p-dialog> </p-dialog>
<h5>Position</h5> <h5>Position</h5>
<div class="p-grid p-dir-col"> <div class="grid p-dir-col">
<div class="p-col"> <div class="col">
<p-button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning"></p-button> <p-button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning"></p-button>
<p-button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning"></p-button> <p-button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning"></p-button>
</div> </div>
<div class="p-col"> <div class="col">
<p-button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning"></p-button> <p-button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning"></p-button>
<p-button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning"></p-button> <p-button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning"></p-button>
<p-button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning"></p-button> <p-button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning"></p-button>
</div> </div>
<div class="p-col"> <div class="col">
<p-button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning"></p-button> <p-button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning"></p-button>
<p-button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning"></p-button> <p-button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning"></p-button>
<p-button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning"></p-button> <p-button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning"></p-button>
@ -865,7 +865,7 @@ p {
</div> </div>
<p-dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true"> <p-dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<template #footer> <template #footer>

18
src/views/display/DisplayDemo.vue
View File

@ -11,26 +11,20 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Inline</h5> <h5>Inline</h5>
<InputText class="p-mr-2 p-d-inline" /> <InputText class="mr-2 inline" />
<InputText class="p-d-inline" /> <InputText class="inline" />
<h5>Block</h5> <h5>Block</h5>
<InputText class="p-mb-2 p-d-block" /> <InputText class="mb-2 block" />
<InputText class="p-d-block" /> <InputText class="block" />
<h5>Visible on a Small Screen</h5> <h5>Visible on a Small Screen</h5>
<p>Resize to view.</p> <p>Resize to view.</p>
<Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" /> <Button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden" />
<h5>Hidden on a Small Screen</h5> <h5>Hidden on a Small Screen</h5>
<p>Resize to hide.</p> <p>Resize to hide.</p>
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" /> <Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex" />
<h5>Visible to Print, Invisible for Screen</h5>
<p class="p-d-none p-d-print-block">Only visible when printed.</p>
<h5>Visible to Screen, Invisible for Print</h5>
<p class="p-d-block p-d-print-none">Not available for printing.</p>
</div> </div>
</div> </div>

76
src/views/display/DisplayDoc.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<AppDoc name="DisplayDemo" :sources="sources" github="display/DisplayDemo.vue"> <AppDoc name="DisplayDemo" :sources="sources" github="display/DisplayDemo.vue">
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>The display classes use the <i>p-d-{value}</i> format and <i>p-d-{breakpoint}-{value}</i> format for responsive design.</p> <p>The display classes use the <i>{value}</i> format and <i>{breakpoint}:{value}</i> format for responsive design.</p>
<h5>Values</h5> <h5>Values</h5>
<p>Value field can be one of the following options.</p> <p>Value field can be one of the following options.</p>
<ul> <ul>
<li>none</li> <li>hidden</li>
<li>inline</li> <li>inline</li>
<li>inline-block</li> <li>inline-block</li>
<li>block</li> <li>block</li>
@ -26,13 +26,11 @@
<h5>Examples</h5> <h5>Examples</h5>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-inline"&gt;Displayed as inline.&lt;/div&gt; &lt;div class="inline"&gt;Displayed as inline.&lt;/div&gt;
&lt;div class="p-d-flex"&gt;Displayed as a flexbox container.&lt;/div&gt; &lt;div class="flex"&gt;Displayed as a flexbox container.&lt;/div&gt;
&lt;div class="p-d-block p-d-lg-inline"&gt;Inline for larger screens and block for others.&lt;/div&gt; &lt;div class="block lg:inline"&gt;Inline for larger screens and block for others.&lt;/div&gt;
&lt;div class="p-d-md-none"&gt;Visible on a Small Screen&lt;/div&gt; &lt;div class="md:hidden"&gt;Visible on a Small Screen&lt;/div&gt;
&lt;div class="p-d-none p-d-md-inline-flex"&gt;Hidden on a Small Screen&lt;/div&gt; &lt;div class="hidden md:inline-flex"&gt;Hidden on a Small Screen&lt;/div&gt;
&lt;div class="p-d-none p-d-print-block"&gt;Only visible when printed.&lt;/div&gt;
&lt;div class="p-d-block p-d-print-none"&gt;Not available for printing.&lt;/div&gt;
</code></pre> </code></pre>
@ -40,7 +38,7 @@
<p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p> <p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>PrimeFlex 2.0.0.</p> <p>PrimeFlex 3.1.2.</p>
</AppDoc> </AppDoc>
</template> </template>
@ -53,28 +51,22 @@ export default {
tabName: 'Options API Source', tabName: 'Options API Source',
content: ` content: `
<template> <template>
<div> <div>
<h5>Inline</h5> <h5>Inline</h5>
<InputText class="p-mr-2 p-d-inline" /> <InputText class="mr-2 inline" />
<InputText class="p-d-inline" /> <InputText class="inline" />
<h5>Block</h5> <h5>Block</h5>
<InputText class="p-mb-2 p-d-block" /> <InputText class="mb-2 block" />
<InputText class="p-d-block" /> <InputText class="block" />
<h5>Visible on a Small Screen</h5> <h5>Visible on a Small Screen</h5>
<p>Resize to view.</p> <p>Resize to view.</p>
<Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" /> <Button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden" />
<h5>Hidden on a Small Screen</h5> <h5>Hidden on a Small Screen</h5>
<p>Resize to hide.</p> <p>Resize to hide.</p>
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" /> <Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex" />
<h5>Visible to Print, Invisible for Screen</h5>
<p class="p-d-none p-d-print-block">Only visible when printed.</p>
<h5>Visible to Screen, Invisible for Print</h5>
<p class="p-d-block p-d-print-none">Not available for printing.</p>
</div> </div>
</template> </template>
@ -89,28 +81,22 @@ export default {
tabName: 'Composition API Source', tabName: 'Composition API Source',
content: ` content: `
<template> <template>
<div> <div>
<h5>Inline</h5> <h5>Inline</h5>
<InputText class="p-mr-2 p-d-inline" /> <InputText class="mr-2 inline" />
<InputText class="p-d-inline" /> <InputText class="inline" />
<h5>Block</h5> <h5>Block</h5>
<InputText class="p-mb-2 p-d-block" /> <InputText class="mb-2 block" />
<InputText class="p-d-block" /> <InputText class="block" />
<h5>Visible on a Small Screen</h5> <h5>Visible on a Small Screen</h5>
<p>Resize to view.</p> <p>Resize to view.</p>
<Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" /> <Button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden" />
<h5>Hidden on a Small Screen</h5> <h5>Hidden on a Small Screen</h5>
<p>Resize to hide.</p> <p>Resize to hide.</p>
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" /> <Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex" />
<h5>Visible to Print, Invisible for Screen</h5>
<p class="p-d-none p-d-print-block">Only visible when printed.</p>
<h5>Visible to Screen, Invisible for Print</h5>
<p class="p-d-block p-d-print-none">Not available for printing.</p>
</div> </div>
</template> </template>
@ -125,26 +111,20 @@ export default {
tabName: 'Browser Source', tabName: 'Browser Source',
content: `<div id="app"> content: `<div id="app">
<h5>Inline</h5> <h5>Inline</h5>
<p-inputtext class="p-mr-2 p-d-inline"></p-inputtext> <p-inputtext class="mr-2 inline"></p-inputtext>
<p-inputtext class="p-d-inline"></p-inputtext> <p-inputtext class="inline"></p-inputtext>
<h5>Block</h5> <h5>Block</h5>
<p-inputtext class="p-mb-2 p-d-block"></p-inputtext> <p-inputtext class="mb-2 block"></p-inputtext>
<p-inputtext class="p-d-block"></p-inputtext> <p-inputtext class="block"></p-inputtext>
<h5>Visible on a Small Screen</h5> <h5>Visible on a Small Screen</h5>
<p>Resize to view.</p> <p>Resize to view.</p>
<p-button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none"></p-button> <p-button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden"></p-button>
<h5>Hidden on a Small Screen</h5> <h5>Hidden on a Small Screen</h5>
<p>Resize to hide.</p> <p>Resize to hide.</p>
<p-button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex"></p-button> <p-button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex"></p-button>
<h5>Visible to Print, Invisible for Screen</h5>
<p class="p-d-none p-d-print-block">Only visible when printed.</p>
<h5>Visible to Screen, Invisible for Print</h5>
<p class="p-d-block p-d-print-none">Not available for printing.</p>
</div> </div>
<script type="module"> <script type="module">

20
src/views/divider/DividerDemo.vue
View File

@ -72,8 +72,8 @@
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<Divider align="left"> <Divider align="left">
<div class="p-d-inline-flex p-ai-center"> <div class="inline-flex align-items-center">
<i class="pi pi-user p-mr-2"></i> <i class="pi pi-user mr-2"></i>
<b>Icon</b> <b>Icon</b>
</div> </div>
</Divider> </Divider>
@ -101,7 +101,7 @@
<div class="card"> <div class="card">
<h5>Vertical</h5> <h5>Vertical</h5>
<div class="p-d-flex"> <div class="flex">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@ -122,26 +122,26 @@
<div class="card"> <div class="card">
<h5>Vertical with Content</h5> <h5>Vertical with Content</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-5 p-d-flex p-ai-center p-jc-center"> <div class="col-5 flex align-items-center justify-content-center">
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field"> <div class="field">
<label for="username">Username</label> <label for="username">Username</label>
<InputText id="username" type="text" /> <InputText id="username" type="text" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="password">Password</label> <label for="password">Password</label>
<InputText id="password" type="password" /> <InputText id="password" type="password" />
</div> </div>
<Button label="Login"></Button> <Button label="Login"></Button>
</div> </div>
</div> </div>
<div class="p-col-2"> <div class="col-2">
<Divider layout="vertical"> <Divider layout="vertical">
<b>OR</b> <b>OR</b>
</Divider> </Divider>
</div> </div>
<div class="p-col-5 p-d-flex p-ai-center p-jc-center"> <div class="col-5 flex align-items-center justify-content-center">
<Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button> <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
</div> </div>
</div> </div>

60
src/views/divider/DividerDoc.vue
View File

@ -34,7 +34,7 @@ import Divider from 'primevue/divider';
<h5>Vertical Divider</h5> <h5>Vertical Divider</h5>
<p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p> <p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex"&gt; &lt;div class="flex"&gt;
&lt;div&gt;Content 1&lt;/div&gt; &lt;div&gt;Content 1&lt;/div&gt;
&lt;Divider layout="vertical" /&gt; &lt;Divider layout="vertical" /&gt;
&lt;div&gt;Content 2&lt;/div&gt; &lt;div&gt;Content 2&lt;/div&gt;
@ -53,8 +53,8 @@ import Divider from 'primevue/divider';
&lt;div&gt;Content 1&lt;/div&gt; &lt;div&gt;Content 1&lt;/div&gt;
&lt;Divider align="left"&gt; &lt;Divider align="left"&gt;
&lt;div class="p-d-inline-flex p-ai-center"&gt; &lt;div class="inline-flex align-items-center"&gt;
&lt;i class="pi pi-user p-mr-2"&gt;&lt;/i&gt; &lt;i class="pi pi-user mr-2"&gt;&lt;/i&gt;
&lt;b&gt;Icon&lt;/b&gt; &lt;b&gt;Icon&lt;/b&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/Divider&gt; &lt;/Divider&gt;
@ -248,8 +248,8 @@ export default {
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<Divider align="left"> <Divider align="left">
<div class="p-d-inline-flex p-ai-center"> <div class="inline-flex align-items-center">
<i class="pi pi-user p-mr-2"></i> <i class="pi pi-user mr-2"></i>
<b>Icon</b> <b>Icon</b>
</div> </div>
</Divider> </Divider>
@ -277,7 +277,7 @@ export default {
<div class="card"> <div class="card">
<h5>Vertical</h5> <h5>Vertical</h5>
<div class="p-d-flex"> <div class="flex">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@ -298,26 +298,26 @@ export default {
<div class="card"> <div class="card">
<h5>Vertical with Content</h5> <h5>Vertical with Content</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-5 p-d-flex p-ai-center p-jc-center"> <div class="col-5 flex align-items-center justify-content-center">
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field"> <div class="field">
<label for="username">Username</label> <label for="username">Username</label>
<InputText id="username" type="text" /> <InputText id="username" type="text" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="password">Password</label> <label for="password">Password</label>
<InputText id="password" type="password" /> <InputText id="password" type="password" />
</div> </div>
<Button label="Login"></Button> <Button label="Login"></Button>
</div> </div>
</div> </div>
<div class="p-col-2"> <div class="col-2">
<Divider layout="vertical"> <Divider layout="vertical">
<b>OR</b> <b>OR</b>
</Divider> </Divider>
</div> </div>
<div class="p-col-5 p-d-flex p-ai-center p-jc-center"> <div class="col-5 flex align-items-center justify-content-center">
<Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button> <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
</div> </div>
</div> </div>
@ -399,8 +399,8 @@ export default {
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<Divider align="left"> <Divider align="left">
<div class="p-d-inline-flex p-ai-center"> <div class="inline-flex align-items-center">
<i class="pi pi-user p-mr-2"></i> <i class="pi pi-user mr-2"></i>
<b>Icon</b> <b>Icon</b>
</div> </div>
</Divider> </Divider>
@ -428,7 +428,7 @@ export default {
<div class="card"> <div class="card">
<h5>Vertical</h5> <h5>Vertical</h5>
<div class="p-d-flex"> <div class="flex">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@ -449,26 +449,26 @@ export default {
<div class="card"> <div class="card">
<h5>Vertical with Content</h5> <h5>Vertical with Content</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-5 p-d-flex p-ai-center p-jc-center"> <div class="col-5 flex align-items-center justify-content-center">
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field"> <div class="field">
<label for="username">Username</label> <label for="username">Username</label>
<InputText id="username" type="text" /> <InputText id="username" type="text" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="password">Password</label> <label for="password">Password</label>
<InputText id="password" type="password" /> <InputText id="password" type="password" />
</div> </div>
<Button label="Login"></Button> <Button label="Login"></Button>
</div> </div>
</div> </div>
<div class="p-col-2"> <div class="col-2">
<Divider layout="vertical"> <Divider layout="vertical">
<b>OR</b> <b>OR</b>
</Divider> </Divider>
</div> </div>
<div class="p-col-5 p-d-flex p-ai-center p-jc-center"> <div class="col-5 flex align-items-center justify-content-center">
<Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button> <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
</div> </div>
</div> </div>
@ -549,8 +549,8 @@ export default {
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p-divider align="left"> <p-divider align="left">
<div class="p-d-inline-flex p-ai-center"> <div class="inline-flex align-items-center">
<i class="pi pi-user p-mr-2"></i> <i class="pi pi-user mr-2"></i>
<b>Icon</b> <b>Icon</b>
</div> </div>
</p-divider> </p-divider>
@ -578,7 +578,7 @@ export default {
<div class="card"> <div class="card">
<h5>Vertical</h5> <h5>Vertical</h5>
<div class="p-d-flex"> <div class="flex">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@ -599,26 +599,26 @@ export default {
<div class="card"> <div class="card">
<h5>Vertical with Content</h5> <h5>Vertical with Content</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-5 p-d-flex p-ai-center p-jc-center"> <div class="col-5 flex align-items-center justify-content-center">
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field"> <div class="field">
<label for="username">Username</label> <label for="username">Username</label>
<p-inputtext id="username" type="text"></p-inputtext> <p-inputtext id="username" type="text"></p-inputtext>
</div> </div>
<div class="p-field"> <div class="field">
<label for="password">Password</label> <label for="password">Password</label>
<p-inputtext id="password" type="password"></p-inputtext> <p-inputtext id="password" type="password"></p-inputtext>
</div> </div>
<p-button label="Login"></p-button> <p-button label="Login"></p-button>
</div> </div>
</div> </div>
<div class="p-col-2"> <div class="col-2">
<p-divider layout="vertical"> <p-divider layout="vertical">
<b>OR</b> <b>OR</b>
</p-divider> </p-divider>
</div> </div>
<div class="p-col-5 p-d-flex p-ai-center p-jc-center"> <div class="col-5 flex align-items-center justify-content-center">
<p-button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></p-button> <p-button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></p-button>
</div> </div>
</div> </div>

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

@ -19,7 +19,7 @@
<h5>Grouped</h5> <h5>Grouped</h5>
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"> <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
@ -54,7 +54,7 @@
<h5>Virtual Scroll (1000 Items) and Lazy</h5> <h5>Virtual Scroll (1000 Items) and Lazy</h5>
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item"> <Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }"> <template v-slot:loader="{ options }">
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" > <div class="flex align-items-center p-2" style="height: 31px" >
<Skeleton :width="options.even ? '60%' : '50%'" height="1rem" /> <Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
</div> </div>
</template> </template>

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

@ -532,7 +532,7 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"> <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
@ -567,7 +567,7 @@ export default {
<h5>Virtual Scroll (1000 Items) and Lazy</h5> <h5>Virtual Scroll (1000 Items) and Lazy</h5>
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item"> <Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }"> <template v-slot:loader="{ options }">
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" > <div class="flex align-items-center p-2" style="height: 31px" >
<Skeleton :width="options.even ? '60%' : '50%'" height="1rem" /> <Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
</div> </div>
</template> </template>
@ -689,7 +689,7 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"> <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
@ -724,7 +724,7 @@ export default {
<h5>Virtual Scroll (1000 Items) and Lazy</h5> <h5>Virtual Scroll (1000 Items) and Lazy</h5>
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item"> <Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }"> <template v-slot:loader="{ options }">
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" > <div class="flex align-items-center p-2" style="height: 31px" >
<Skeleton :width="options.even ? '60%' : '50%'" height="1rem" /> <Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
</div> </div>
</template> </template>
@ -850,7 +850,7 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<p-dropdown v-model="selectedGroupedCity" :options="groupedCities" option-label="label" option-group-label="label" option-group-children="items"> <p-dropdown v-model="selectedGroupedCity" :options="groupedCities" option-label="label" option-group-label="label" option-group-children="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
@ -885,7 +885,7 @@ export default {
<h5>Virtual Scroll (1000 Items) and Lazy</h5> <h5>Virtual Scroll (1000 Items) and Lazy</h5>
<p-dropdown v-model="selectedItem2" :options="lazyItems" option-label="label" option-value="value" :virtual-scroller-options="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item"> <p-dropdown v-model="selectedItem2" :options="lazyItems" option-label="label" option-value="value" :virtual-scroller-options="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }"> <template v-slot:loader="{ options }">
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" > <div class="flex align-items-center p-2" style="height: 31px" >
<p-skeleton :width="options.even ? '60%' : '50%'" height="1rem"></p-skeleton> <p-skeleton :width="options.even ? '60%' : '50%'" height="1rem"></p-skeleton>
</div> </div>
</template> </template>

6
src/views/elevation/ElevationDemo.vue
View File

@ -9,9 +9,9 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="p-grid"> <div class="grid">
<div class="p-col" v-for="index in 24" :key="index"> <div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'p-shadow-' + index]"> <div :class="['shadow-box', 'shadow-' + index]">
p-shadow-{{index}} p-shadow-{{index}}
</div> </div>
</div> </div>

36
src/views/elevation/ElevationDoc.vue
View File

@ -1,22 +1,22 @@
<template> <template>
<AppDoc name="ElevationDemo" :sources="sources" github="elevation/ElevationDemo.vue"> <AppDoc name="ElevationDemo" :sources="sources" github="elevation/ElevationDemo.vue">
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p> <p>Elevation is added to an element using the <i>.shadow-{level}</i> class.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-shadow-1" /&gt; &lt;div class="shadow-1" /&gt;
</code></pre> </code></pre>
<h5>Levels</h5> <h5>Levels</h5>
<p>There are 24 depths available varying from 1 to 24.</p> <p>There are 8 depths available varying from 1 to 8.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-shadow-1" /&gt; &lt;div class="shadow-1" /&gt;
&lt;div class="p-shadow-24" /&gt; &lt;div class="shadow-8" /&gt;
</code></pre> </code></pre>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>PrimeFlex 2.0.0.</p> <p>PrimeFlex 3.1.2.</p>
</AppDoc> </AppDoc>
</template> </template>
@ -30,10 +30,10 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<div class="p-grid"> <div class="grid">
<div class="p-col" v-for="index in 24" :key="index"> <div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'p-shadow-' + index]"> <div :class="['shadow-box', 'shadow-' + index]">
p-shadow-{{index}} shadow-{{index}}
</div> </div>
</div> </div>
</div> </div>
@ -65,10 +65,10 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<div class="p-grid"> <div class="grid">
<div class="p-col" v-for="index in 24" :key="index"> <div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'p-shadow-' + index]"> <div :class="['shadow-box', 'shadow-' + index]">
p-shadow-{{index}} shadow-{{index}}
</div> </div>
</div> </div>
</div> </div>
@ -98,10 +98,10 @@ export default {
'browser-source': { 'browser-source': {
tabName: 'Browser Source', tabName: 'Browser Source',
content: `<div id="app"> content: `<div id="app">
<div class="p-grid"> <div class="grid">
<div class="p-col" v-for="index in 24" :key="index"> <div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'p-shadow-' + index]"> <div :class="['shadow-box', 'shadow-' + index]">
p-shadow-{{index}} shadow-{{index}}
</div> </div>
</div> </div>
</div> </div>

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

@ -43,7 +43,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.p-fieldset p { .fieldset p {
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
} }

24
src/views/fieldset/FieldsetDoc.vue
View File

@ -154,19 +154,19 @@ import Fieldset from 'primevue/fieldset';
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-fieldset</td> <td>fieldset</td>
<td>Fieldset element.</td> <td>Fieldset element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fieldset-toggleable</td> <td>fieldset-toggleable</td>
<td>Toggleable fieldset element.</td> <td>Toggleable fieldset element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fieldset-legend</td> <td>fieldset-legend</td>
<td>Legend element.</td> <td>Legend element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fieldset-content</td> <td>fieldset-content</td>
<td>Content element.</td> <td>Content element.</td>
</tr> </tr>
</tbody> </tbody>
@ -212,7 +212,7 @@ export default {
<\\/script> <\\/script>
<style lang="scss" scoped> <style lang="scss" scoped>
.p-fieldset p { .fieldset p {
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
} }
@ -247,7 +247,7 @@ export default {
<\\/script> <\\/script>
<style lang="scss" scoped> <style lang="scss" scoped>
.p-fieldset p { .fieldset p {
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
} }
@ -258,20 +258,20 @@ export default {
imports: `<script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"><\\/script>`, imports: `<script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"><\\/script>`,
content: `<div id="app"> content: `<div id="app">
<h5>Regular</h5> <h5>Regular</h5>
<p-fieldset legend="Header"> <fieldset legend="Header">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</p-fieldset> </fieldset>
<h5>Toggleable</h5> <h5>Toggleable</h5>
<p-fieldset legend="Header" :toggleable="true"> <fieldset legend="Header" :toggleable="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</p-fieldset> </fieldset>
</div> </div>
<script type="module"> <script type="module">
@ -279,7 +279,7 @@ export default {
const App = { const App = {
components: { components: {
"p-fieldset": primevue.fieldset "fieldset": primevue.fieldset
} }
}; };
@ -289,7 +289,7 @@ export default {
<\\/script> <\\/script>
<style> <style>
.p-fieldset p { .fieldset p {
line-height: 1.5; line-height: 1.5;
margin: 0; margin: 0;
} }

614
src/views/flexbox/FlexBoxDemo.vue
View File

@ -6,19 +6,19 @@
</p> </p>
<h5>Flex Container</h5> <h5>Flex Container</h5>
<p>An element can configured as a flexbox container using the <i>p-d-flex</i> or <i>p-d-inline-flex</i> classes.</p> <p>An element can configured as a flexbox container using the <i>flex</i> or <i>inline-flex</i> classes.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex"&gt;Flex Container&lt;/div&gt; &lt;div class="flex"&gt;Flex Container&lt;/div&gt;
&lt;div class="p-d-inline-flex"&gt;Inline Flex Container&lt;/div&gt; &lt;div class="inline-flex"&gt;Inline Flex Container&lt;/div&gt;
</code></pre> </code></pre>
<div class="box p-d-flex p-mb-3">Flex Container</div> <div class="box flex mb-3">Flex Container</div>
<div class="box p-d-inline-flex">Inline Flex Container</div> <div class="box inline-flex">Inline Flex Container</div>
<h5>Direction</h5> <h5>Direction</h5>
<p>Default is applied using the <i>p-flex-{direction}</i> class where direction can be either of the following.</p> <p>Default is applied using the <i>flex-{direction}</i> class where direction can be either of the following.</p>
<ul> <ul>
<li>row (default)</li> <li>row (default)</li>
<li>row-reverse</li> <li>row-reverse</li>
@ -28,31 +28,31 @@
<h6>Row</h6> <h6>Row</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex"&gt; &lt;div class="flex"&gt;
&lt;div class="p-mr-2"&gt;Item 1&lt;/div&gt; &lt;div class="mr-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2"&gt;Item 2&lt;/div&gt; &lt;div class="mr-2"&gt;Item 2&lt;/div&gt;
&lt;div&gt;Item 3&lt;/div&gt; &lt;div&gt;Item 3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex"> <div class="flex">
<div class="p-mr-2">Item 1</div> <div class="mr-2">Item 1</div>
<div class="p-mr-2">Item 2</div> <div class="mr-2">Item 2</div>
<div>Item 3</div> <div>Item 3</div>
</div> </div>
<h6>Column</h6> <h6>Column</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex p-flex-column"&gt; &lt;div class="flex flex-column"&gt;
&lt;div class="p-mb-2"&gt;Item 1&lt;/div&gt; &lt;div class="mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mb-2"&gt;Item 2&lt;/div&gt; &lt;div class="mb-2"&gt;Item 2&lt;/div&gt;
&lt;div&gt;Item 3&lt;/div&gt; &lt;div&gt;Item 3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex p-flex-column"> <div class="flex flex-column">
<div class="p-mb-2">Item 1</div> <div class="mb-2">Item 1</div>
<div class="p-mb-2">Item 2</div> <div class="mb-2">Item 2</div>
<div>Item 3</div> <div>Item 3</div>
</div> </div>
@ -60,120 +60,120 @@
<p>Row direction for larger screens and column for smaller.</p> <p>Row direction for larger screens and column for smaller.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex p-flex-column p-flex-md-row"&gt; &lt;div class="flex flex-column md:flex-row"&gt;
&lt;div class="p-mb-2 p-mr-2"&gt;Item 1&lt;/div&gt; &lt;div class="mb-2 mr-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mb-2 p-mr-2"&gt;Item 2&lt;/div&gt; &lt;div class="mb-2 mr-2"&gt;Item 2&lt;/div&gt;
&lt;div class="p-mb-2 p-mr-2"&gt;Item 3&lt;/div&gt; &lt;div class="mb-2 mr-2"&gt;Item 3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex p-flex-column p-flex-md-row"> <div class="flex flex-column md:flex-row">
<div class="p-mb-2 p-mr-2">Item 1</div> <div class="mb-2 mr-2">Item 1</div>
<div class="p-mb-2 p-mr-2">Item 2</div> <div class="mb-2 mr-2">Item 2</div>
<div class="p-mb-2 p-mr-2">Item 3</div> <div class="mb-2 mr-2">Item 3</div>
</div> </div>
<h6>Direction Classes</h6> <h6>Direction Classes</h6>
<ul> <ul>
<li>p-flex-row</li> <li>flex-row</li>
<li>p-flex-row-reverse</li> <li>flex-row-reverse</li>
<li>p-flex-column</li> <li>flex-column</li>
<li>p-flex-column-reverse</li> <li>flex-column-reverse</li>
<li>p-flex-sm-row</li> <li>sm:flex-row</li>
<li>p-flex-sm-row-reverse</li> <li>sm:flex-row-reverse</li>
<li>p-flex-sm-column</li> <li>sm:flex-column</li>
<li>p-flex-sm-column-reverse</li> <li>sm:flex-column-reverse</li>
<li>p-flex-md-row</li> <li>md:flex-row</li>
<li>p-flex-md-row-reverse</li> <li>md:flex-row-reverse</li>
<li>p-flex-md-column</li> <li>md:flex-column</li>
<li>p-flex-md-column-reverse</li> <li>md:flex-column-reverse</li>
<li>p-flex-lg-row</li> <li>lg:flex-row</li>
<li>p-flex-lg-row-reverse</li> <li>lg:flex-row-reverse</li>
<li>p-flex-lg-column</li> <li>lg:flex-column</li>
<li>p-flex-lg-column-reverse</li> <li>lg:flex-column-reverse</li>
<li>p-flex-xl-row</li> <li>xl:flex-row</li>
<li>p-flex-xl-row-reverse</li> <li>xl:flex-row-reverse</li>
<li>p-flex-xl-column</li> <li>xl:flex-column</li>
<li>p-flex-xl-column-reverse</li> <li>xl:flex-column-reverse</li>
</ul> </ul>
<h5>Order</h5> <h5>Order</h5>
<p>Order configures the way in which they appear in the flex container. <i>p-order-{value}</i> format is used where value can be a number from 0 to 6.</p> <p>Order configures the way in which they appear in the flex container. <i>order-{value}</i> format is used where value can be a number from 0 to 6.</p>
<h6>Customized</h6> <h6>Customized</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex"&gt; &lt;div class="flex"&gt;
&lt;div class="p-mr-2 p-order-3"&gt;Item 1&lt;/div&gt; &lt;div class="mr-2 order-3"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2 p-order-1"&gt;Item 2&lt;/div&gt; &lt;div class="mr-2 order-1"&gt;Item 2&lt;/div&gt;
&lt;div class="p-mr-2 p-order-2"&gt;Item 3&lt;/div&gt; &lt;div class="mr-2 order-2"&gt;Item 3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex"> <div class="flex">
<div class="p-mr-2 p-order-3">Item 1</div> <div class="mr-2 order-3">Item 1</div>
<div class="p-mr-2 p-order-1">Item 2</div> <div class="mr-2 order-1">Item 2</div>
<div class="p-mr-2 p-order-2">Item 3</div> <div class="mr-2 order-2">Item 3</div>
</div> </div>
<h6>Responsive</h6> <h6>Responsive</h6>
<p>Orders change depending on the screen size.</p> <p>Orders change depending on the screen size.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex"&gt; &lt;div class="flex"&gt;
&lt;div class="p-mr-2 p-order-3 p-order-md-2"&gt;Item 1&lt;/div&gt; &lt;div class="mr-2 order-3 md:order-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2 p-order-1 p-order-md-3"&gt;Item 2&lt;/div&gt; &lt;div class="mr-2 order-1 md:order-3"&gt;Item 2&lt;/div&gt;
&lt;div class="p-mr-2 p-order-2 p-order-md-1"&gt;Item 3&lt;/div&gt; &lt;div class="mr-2 order-2 md:order-1"&gt;Item 3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex"> <div class="flex">
<div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div> <div class="mr-2 order-3 md:order-2">Item 1</div>
<div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div> <div class="mr-2 order-1 md:order-3">Item 2</div>
<div class="p-mr-2 p-order-2 p-order-md-1">Item 3</div> <div class="mr-2 order-2 md:order-1">Item 3</div>
</div> </div>
<h6>Order Classes</h6> <h6>Order Classes</h6>
<ul> <ul>
<li>p-order-0</li> <li>order-0</li>
<li>p-order-1</li> <li>order-1</li>
<li>p-order-2</li> <li>order-2</li>
<li>p-order-3</li> <li>order-3</li>
<li>p-order-4</li> <li>order-4</li>
<li>p-order-5</li> <li>order-5</li>
<li>p-order-6</li> <li>order-6</li>
<li>p-order-sm-0</li> <li>sm:order-0</li>
<li>p-order-sm-1</li> <li>sm:order-1</li>
<li>p-order-sm-2</li> <li>sm:order-2</li>
<li>p-order-sm-3</li> <li>sm:order-3</li>
<li>p-order-sm-4</li> <li>sm:order-4</li>
<li>p-order-sm-5</li> <li>sm:order-5</li>
<li>p-order-sm-6</li> <li>sm:order-6</li>
<li>p-order-md-0</li> <li>md:order-0</li>
<li>p-order-md-1</li> <li>md:order-1</li>
<li>p-order-md-2</li> <li>md:order-2</li>
<li>p-order-md-3</li> <li>md:order-3</li>
<li>p-order-md-4</li> <li>md:order-4</li>
<li>p-order-md-5</li> <li>md:order-5</li>
<li>p-order-md-6</li> <li>md:order-6</li>
<li>p-order-lg-0</li> <li>lg:order-0</li>
<li>p-order-lg-1</li> <li>lg:order-1</li>
<li>p-order-lg-2</li> <li>lg:order-2</li>
<li>p-order-lg-3</li> <li>lg:order-3</li>
<li>p-order-lg-4</li> <li>lg:order-4</li>
<li>p-order-lg-5</li> <li>lg:order-5</li>
<li>p-order-lg-6</li> <li>lg:order-6</li>
<li>p-order-xl-0</li> <li>xl:order-0</li>
<li>p-order-xl-1</li> <li>xl:order-1</li>
<li>p-order-xl-2</li> <li>xl:order-2</li>
<li>p-order-xl-3</li> <li>xl:order-3</li>
<li>p-order-xl-4</li> <li>xl:order-4</li>
<li>p-order-xl-5</li> <li>xl:order-5</li>
<li>p-order-xl-6</li> <li>xl:order-6</li>
</ul> </ul>
<h5>Wrap</h5> <h5>Wrap</h5>
<p>Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is <i>p-flex-{value}</i> and the value field can be either of the <p>Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is <i>flex-{value}</i> and the value field can be either of the
listed alternatives.</p> listed alternatives.</p>
<ul> <ul>
@ -184,88 +184,88 @@
<h6>No Wrap</h6> <h6>No Wrap</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex"&gt; &lt;div class="flex"&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 2&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 3&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 3&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 4&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 4&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 5&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 6&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex"> <div class="flex">
<div class="p-mr-2 p-mb-2">Item 1</div> <div class="mr-2 mb-2">Item 1</div>
<div class="p-mr-2 p-mb-2">Item 2</div> <div class="mr-2 mb-2">Item 2</div>
<div class="p-mr-2 p-mb-2">Item 3</div> <div class="mr-2 mb-2">Item 3</div>
<div class="p-mr-2 p-mb-2">Item 4</div> <div class="mr-2 mb-2">Item 4</div>
<div class="p-mr-2 p-mb-2">Item 5</div> <div class="mr-2 mb-2">Item 5</div>
<div class="p-mr-2 p-mb-2">Item 6</div> <div class="mr-2 mb-2">Item 6</div>
</div> </div>
<h6>Wrap</h6> <h6>Wrap</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex p-flex-wrap"&gt; &lt;div class="flex flex-wrap"&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 2&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 3&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 3&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 4&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 4&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 5&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 6&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex p-flex-wrap"> <div class="flex flex-wrap">
<div class="p-mr-2 p-mb-2">Item 1</div> <div class="mr-2 mb-2">Item 1</div>
<div class="p-mr-2 p-mb-2">Item 2</div> <div class="mr-2 mb-2">Item 2</div>
<div class="p-mr-2 p-mb-2">Item 3</div> <div class="mr-2 mb-2">Item 3</div>
<div class="p-mr-2 p-mb-2">Item 4</div> <div class="mr-2 mb-2">Item 4</div>
<div class="p-mr-2 p-mb-2">Item 5</div> <div class="mr-2 mb-2">Item 5</div>
<div class="p-mr-2 p-mb-2">Item 6</div> <div class="mr-2 mb-2">Item 6</div>
</div> </div>
<h6>Wrap Reverse</h6> <h6>Wrap Reverse</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex p-flex-wrap-reverse"&gt; &lt;div class="flex flex-wrap-reverse"&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 2&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 3&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 3&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 4&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 4&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 5&lt;/div&gt;
&lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt; &lt;div class="mr-2 mb-2"&gt;Item 6&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex p-flex-wrap-reverse"> <div class="flex flex-wrap-reverse">
<div class="p-mr-2 p-mb-2">Item 1</div> <div class="mr-2 mb-2">Item 1</div>
<div class="p-mr-2 p-mb-2">Item 2</div> <div class="mr-2 mb-2">Item 2</div>
<div class="p-mr-2 p-mb-2">Item 3</div> <div class="mr-2 mb-2">Item 3</div>
<div class="p-mr-2 p-mb-2">Item 4</div> <div class="mr-2 mb-2">Item 4</div>
<div class="p-mr-2 p-mb-2">Item 5</div> <div class="mr-2 mb-2">Item 5</div>
<div class="p-mr-2 p-mb-2">Item 6</div> <div class="mr-2 mb-2">Item 6</div>
</div> </div>
<h6>Wrap Classes</h6> <h6>Wrap Classes</h6>
<ul> <ul>
<li>p-flex-nowrap</li> <li>flex-nowrap</li>
<li>p-flex-wrap</li> <li>flex-wrap</li>
<li>p-flex-wrap-reverse</li> <li>flex-wrap-reverse</li>
<li>p-flex-sm-nowrap</li> <li>sm:flex-nowrap</li>
<li>p-flex-sm-wrap</li> <li>sm:flex-wrap</li>
<li>p-flex-sm-wrap-reverse</li> <li>sm:flex-wrap-reverse</li>
<li>p-flex-md-nowrap</li> <li>md:flex-nowrap</li>
<li>p-flex-md-wrap</li> <li>md:flex-wrap</li>
<li>p-flex-md-wrap-reverse</li> <li>md:flex-wrap-reverse</li>
<li>p-flex-lg-nowrap</li> <li>lg:flex-nowrap</li>
<li>p-flex-lg-wrap</li> <li>lg:flex-wrap</li>
<li>p-flex-lg-wrap-reverse</li> <li>lg:flex-wrap-reverse</li>
<li>p-flex-xl-nowrap</li> <li>xl:flex-nowrap</li>
<li>p-flex-xl-wrap</li> <li>xl:flex-wrap</li>
<li>p-flex-xl-wrap-reverse</li> <li>xl:flex-wrap-reverse</li>
</ul> </ul>
<h5>Justify Content</h5> <h5>Justify Content</h5>
<p>Justify content is the alignment along the main axis and defined using the <i>p-jc-{value}</i> format with responsive alternatives. Value field accepts <p>Justify content is the alignment along the main axis and defined using the <i>justify-content-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p> the options below.</p>
<ul> <ul>
<li>start</li> <li>start</li>
@ -278,66 +278,66 @@
<h6>Between</h6> <h6>Between</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex p-jc-between"&gt; &lt;div class="flex justify-content-center"&gt;
&lt;div&gt;Item 1&lt;/div&gt; &lt;div&gt;Item 1&lt;/div&gt;
&lt;div&gt;Item 2&lt;/div&gt; &lt;div&gt;Item 2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex p-jc-between"> <div class="flex justify-content-center">
<div>Item 1</div> <div>Item 1</div>
<div>Item 2</div> <div>Item 2</div>
</div> </div>
<h6>Center</h6> <h6>Center</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex p-jc-center"&gt; &lt;div class="flex justify-content-center"&gt;
&lt;div class="p-mr-2"&gt;Item 1&lt;/div&gt; &lt;div class="mr-2"&gt;Item 1&lt;/div&gt;
&lt;div&gt;Item 2&lt;/div&gt; &lt;div&gt;Item 2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex p-jc-center"> <div class="flex justify-content-center">
<div class="p-mr-2">Item 1</div> <div class="mr-2">Item 1</div>
<div>Item 2</div> <div>Item 2</div>
</div> </div>
<h6>Justify Content Classes</h6> <h6>Justify Content Classes</h6>
<ul> <ul>
<li>p-jc-start</li> <li>justify-content-start</li>
<li>p-jc-end</li> <li>justify-content-end</li>
<li>p-jc-center</li> <li>justify-content-center</li>
<li>p-jc-between</li> <li>justify-content-center</li>
<li>p-jc-around</li> <li>justify-content-around</li>
<li>p-jc-evenly</li> <li>justify-content-evenly</li>
<li>p-jc-sm-start</li> <li>sm:justify-content-start</li>
<li>p-jc-sm-end</li> <li>sm:justify-content-end</li>
<li>p-jc-sm-center</li> <li>sm:justify-content-center</li>
<li>p-jc-sm-between</li> <li>sm:justify-content-between</li>
<li>p-jc-sm-around</li> <li>sm:justify-content-around</li>
<li>p-jc-sm-evenly</li> <li>sm:justify-content-evenly</li>
<li>p-jc-md-start</li> <li>md:justify-content-start</li>
<li>p-jc-md-end</li> <li>md:justify-content-end</li>
<li>p-jc-md-center</li> <li>md:justify-content-center</li>
<li>p-jc-md-between</li> <li>md:justiify-content-between</li>
<li>p-jc-md-around</li> <li>md:justify-content-around</li>
<li>p-jc-md-evenly</li> <li>md:justify-content-evenly</li>
<li>p-jc-lg-start</li> <li>lg:justify-content-start</li>
<li>p-jc-lg-end</li> <li>lg:justify-content-end</li>
<li>p-jc-lg-center</li> <li>lg:justify-content-center</li>
<li>p-jc-lg-between</li> <li>lg:justify-content-between</li>
<li>p-jc-lg-around</li> <li>lg:justify-content-around</li>
<li>p-jc-lg-evenly</li> <li>lg:justify-content-evenly</li>
<li>p-jc-xl-start</li> <li>xl:justify-content-start</li>
<li>p-jc-xl-end</li> <li>xl:justify-content-end</li>
<li>p-jc-xl-center</li> <li>xl:justify-content-center</li>
<li>p-jc-xl-between</li> <li>xl:justify-content-between</li>
<li>p-jc-xl-around</li> <li>xl:justify-content-around</li>
<li>p-jc-xl-evenly</li> <li>xl:justify-content-evenly</li>
</ul> </ul>
<h5>Align Items</h5> <h5>Align Items</h5>
<p>Align Items configuration is the alignment along the cross axis and defined using the <i>p-ai-{value}</i> format with responsive alternatives. Value field accepts <p>Align Items configuration is the alignment along the cross axis and defined using the <i>align-items-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p> the options below.</p>
<ul> <ul>
<li>start</li> <li>start</li>
@ -349,61 +349,61 @@
<h6>Start</h6> <h6>Start</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex p-ai-start"&gt; &lt;div class="flex align-items-start"&gt;
&lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt; &lt;div class="mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
&lt;div style="height:50px"&gt;Item 2&lt;/div&gt; &lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex p-ai-start"> <div class="flex align-items-start">
<div class="p-mr-2" style="height:100px">Item 1</div> <div class="mr-2" style="height:100px">Item 1</div>
<div style="height:50px">Item 2</div> <div style="height:50px">Item 2</div>
</div> </div>
<h6>Center</h6> <h6>Center</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex p-ai-center"&gt; &lt;div class="flex align-items-center"&gt;
&lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt; &lt;div class="mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
&lt;div style="height:50px"&gt;Item 2&lt;/div&gt; &lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex p-ai-center"> <div class="flex align-items-center">
<div class="p-mr-2" style="height:100px">Item 1</div> <div class="mr-2" style="height:100px">Item 1</div>
<div style="height:50px">Item 2</div> <div style="height:50px">Item 2</div>
</div> </div>
<h6>Align Items Classes</h6> <h6>Align Items Classes</h6>
<ul> <ul>
<li>p-ai-start</li> <li>align-items-start</li>
<li>p-ai-end</li> <li>align-items-end</li>
<li>p-ai-center</li> <li>align-items-center</li>
<li>p-ai-baseline</li> <li>align-items-baseline</li>
<li>p-ai-strech</li> <li>align-items-stretch</li>
<li>p-ai-sm-start</li> <li>sm:align-items-start</li>
<li>p-ai-sm-end</li> <li>sm:align-items-end</li>
<li>p-ai-sm-center</li> <li>sm:align-items-center</li>
<li>p-ai-sm-baseline</li> <li>sm:align-items-baseline</li>
<li>p-ai-sm-strech</li> <li>sm:align-items-stretch</li>
<li>p-ai-md-start</li> <li>md:align-items-start</li>
<li>p-ai-md-end</li> <li>md:align-items-end</li>
<li>p-ai-md-center</li> <li>md:align-items-center</li>
<li>p-ai-md-baseline</li> <li>md:align-items-baseline</li>
<li>p-ai-md-strech</li> <li>md:align-items-stretch</li>
<li>p-ai-lg-start</li> <li>lg:align-items-start</li>
<li>p-ai-lg-end</li> <li>lg:align-items-end</li>
<li>p-ai-lg-center</li> <li>lg:align-items-center</li>
<li>p-ai-lg-baseline</li> <li>lg:align-items-baseline</li>
<li>p-ai-lg-strech</li> <li>lg:align-items-stretch</li>
<li>p-ai-xl-start</li> <li>xl:align-items-start</li>
<li>p-ai-xl-end</li> <li>xl:align-items-end</li>
<li>p-ai-xl-center</li> <li>xl:align-items-center</li>
<li>p-ai-xl-baseline</li> <li>xl:align-items-baseline</li>
<li>p-ai-xl-strech</li> <li>xl:align-items-stretch</li>
</ul> </ul>
<h5>Align Self</h5> <h5>Align Self</h5>
<p>Align self configuration is the alignment along the cross axis for a particular element and defined using the <i>p-as-{value}</i> format with responsive alternatives. Value field accepts <p>Align self configuration is the alignment along the cross axis for a particular element and defined using the <i>align-self-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p> the options below.</p>
<ul> <ul>
<li>start</li> <li>start</li>
@ -414,52 +414,52 @@
</ul> </ul>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex" style="height: 150px;"&gt; &lt;div class="flex" style="height: 150px;"&gt;
&lt;div class="p-mr-2 p-as-start"&gt;Start&lt;/div&gt; &lt;div class="mr-2 align-self-start"&gt;Start&lt;/div&gt;
&lt;div class="p-mr-2 p-as-center"&gt;Center&lt;/div&gt; &lt;div class="mr-2 align-self-center"&gt;Center&lt;/div&gt;
&lt;div class="p-mr-2 p-as-end"&gt;End&lt;/div&gt; &lt;div class="mr-2 align-self-end"&gt;End&lt;/div&gt;
&lt;div class="p-mr-2 p-as-stretch"&gt;Stretch&lt;/div&gt; &lt;div class="mr-2 align-self-stretch"&gt;Stretch&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex" style="height: 150px;"> <div class="flex" style="height: 150px;">
<div class="p-mr-2 p-as-start">Start</div> <div class="mr-2 align-self-start">Start</div>
<div class="p-mr-2 p-as-center">Center</div> <div class="mr-2 align-self-center">Center</div>
<div class="p-mr-2 p-as-end">End</div> <div class="mr-2 align-self-end">End</div>
<div class="p-mr-2 p-as-stretch">Stretch</div> <div class="mr-2 align-self-stretch">Stretch</div>
</div> </div>
<h6>Align Items Classes</h6> <h6>Align Items Classes</h6>
<ul> <ul>
<li>p-as-start</li> <li>align-self-start</li>
<li>p-as-end</li> <li>align-self-end</li>
<li>p-as-center</li> <li>align-self-center</li>
<li>p-as-baseline</li> <li>align-self-baseline</li>
<li>p-as-strech</li> <li>align-self-stretch</li>
<li>p-as-sm-start</li> <li>sm:align-self-start</li>
<li>p-as-sm-end</li> <li>sm:align-self-end</li>
<li>p-as-sm-center</li> <li>sm:align-self-center</li>
<li>p-as-sm-baseline</li> <li>sm:align-self-baseline</li>
<li>p-as-sm-strech</li> <li>sm:align-self-stretch</li>
<li>p-as-md-start</li> <li>md:align-self-start</li>
<li>p-as-md-end</li> <li>md:align-self-end</li>
<li>p-as-md-center</li> <li>md:align-self-center</li>
<li>p-as-md-baseline</li> <li>md:align-self-baseline</li>
<li>p-as-md-strech</li> <li>md:align-self-stretch</li>
<li>p-as-lg-start</li> <li>lg:align-self-start</li>
<li>p-as-lg-end</li> <li>lg:align-self-end</li>
<li>p-as-lg-center</li> <li>lg:align-self-center</li>
<li>p-as-lg-baseline</li> <li>lg:align-self-baseline</li>
<li>p-as-lg-strech</li> <li>lg:align-self-stretch</li>
<li>p-as-xl-start</li> <li>xl:align-self-start</li>
<li>p-as-xl-end</li> <li>xl:align-self-end</li>
<li>p-as-xl-center</li> <li>xl:align-self-center</li>
<li>p-as-xl-baseline</li> <li>xl:align-self-baseline</li>
<li>p-as-xl-strech</li> <li>xl:align-self-stretch</li>
</ul> </ul>
<h5>Align Content</h5> <h5>Align Content</h5>
<p>Align content is the alignment along the cross axis and defined using the <i>p-ac-{value}</i> format with responsive alternatives. Value field accepts <p>Align content is the alignment along the cross axis and defined using the <i>align-content-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p> the options below.</p>
<ul> <ul>
<li>start</li> <li>start</li>
@ -472,36 +472,36 @@
<h6>Align Content Classes</h6> <h6>Align Content Classes</h6>
<ul> <ul>
<li>p-ac-start</li> <li>align-content-start</li>
<li>p-ac-end</li> <li>align-content-end</li>
<li>p-ac-center</li> <li>align-content-center</li>
<li>p-ac-around</li> <li>align-content-around</li>
<li>p-ac-stretch</li> <li>align-content-stretch</li>
<li>p-ac-between</li> <li>align-content-between</li>
<li>p-ac-sm-start</li> <li>sm:align-content-start</li>
<li>p-ac-sm-end</li> <li>sm:align-content-end</li>
<li>p-ac-sm-center</li> <li>sm:align-content-center</li>
<li>p-ac-sm-around</li> <li>sm:align-content-around</li>
<li>p-ac-sm-stretch</li> <li>sm:align-content-stretch</li>
<li>p-ac-sm-between</li> <li>sm:align-content-between</li>
<li>p-ac-md-start</li> <li>md:align-content-start</li>
<li>p-ac-md-end</li> <li>md:align-content-end</li>
<li>p-ac-md-center</li> <li>md:align-content-center</li>
<li>p-ac-md-around</li> <li>md:align-content-around</li>
<li>p-ac-md-stretch</li> <li>md:align-content-stretch</li>
<li>p-ac-md-between</li> <li>md:align-content-between</li>
<li>p-ac-lg-start</li> <li>lg:align-content-start</li>
<li>p-ac-lg-end</li> <li>lg:align-content-end</li>
<li>p-ac-lg-center</li> <li>lg:align-content-center</li>
<li>p-ac-lg-around</li> <li>lg:align-content-around</li>
<li>p-ac-lg-stretch</li> <li>lg:align-content-stretch</li>
<li>p-ac-lg-between</li> <li>lg:align-content-between</li>
<li>p-ac-xl-start</li> <li>xl:align-content-start</li>
<li>p-ac-xl-end</li> <li>xl:align-content-end</li>
<li>p-ac-xl-center</li> <li>xl:align-content-center</li>
<li>p-ac-xl-around</li> <li>xl:align-content-around</li>
<li>p-ac-xl-stretch</li> <li>xl:align-content-stretch</li>
<li>p-ac-xl-between</li> <li>xl:align-content-between</li>
</ul> </ul>
<h5>Margin with FlexBox</h5> <h5>Margin with FlexBox</h5>
@ -509,34 +509,34 @@
<h6>Horizontal Spacing</h6> <h6>Horizontal Spacing</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex p-p-3 card"&gt; &lt;div class="flex p-3 card"&gt;
&lt;Button type="Button" icon="pi pi-check" class="p-mr-2" /&gt; &lt;Button type="Button" icon="pi pi-check" class="mr-2" /&gt;
&lt;Button type="Button" icon="pi pi-trash" class="p-button-danger"/&gt; &lt;Button type="Button" icon="pi pi-trash" class="p-button-danger"/&gt;
&lt;Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/&gt; &lt;Button type="Button" icon="pi pi-search" class="ml-auto p-button-help"/&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex p-p-3 card"> <div class="flex p-3 card">
<Button type="Button" icon="pi pi-check" class="p-mr-2" /> <Button type="Button" icon="pi pi-check" class="mr-2" />
<Button type="Button" icon="pi pi-trash" class="p-button-danger"/> <Button type="Button" icon="pi pi-trash" class="p-button-danger"/>
<Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/> <Button type="Button" icon="pi pi-search" class="ml-auto p-button-help"/>
</div> </div>
<h6>Vertical Spacing</h6> <h6>Vertical Spacing</h6>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-d-flex p-flex-column" style="height:150px"&gt; &lt;div class="flex flex-column" style="height:150px"&gt;
&lt;div&gt;Item 1&lt;/div&gt; &lt;div&gt;Item 1&lt;/div&gt;
&lt;div class="p-mt-auto"&gt;Item 2&lt;/div&gt; &lt;div class="mt-auto"&gt;Item 2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</code></pre> </code></pre>
<div class="p-d-flex p-flex-column" style="height:150px"> <div class="flex flex-column" style="height:150px">
<div>Item 1</div> <div>Item 1</div>
<div class="p-mt-auto">Item 2</div> <div class="mt-auto">Item 2</div>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>PrimeFlex 2.0.0.</p> <p>PrimeFlex 3.1.2.</p>
</div> </div>
</div> </div>
</template> </template>
@ -547,7 +547,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.p-d-flex > div, .flex > div,
.box { .box {
background-color: var(--surface-e); background-color: var(--surface-e);
text-align: center; text-align: center;
@ -556,7 +556,7 @@ export default {
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12); box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
} }
.p-d-flex > div { .flex > div {
width: 8rem; width: 8rem;
} }
</style> </style>

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

@ -10,58 +10,58 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<div class="p-fluid p-grid"> <div class="p-fluid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<InputText id="inputtext" type="text" v-model="value1" /> <InputText id="inputtext" type="text" v-model="value1" />
<label for="inputtext">InputText</label> <label for="inputtext">InputText</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-left"> <span class="p-float-label p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" /> <InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
<label for="inputtext-left">Left Icon</label> <label for="inputtext-left">Left Icon</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-right"> <span class="p-float-label p-input-icon-right">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText id="inputtext-right" type="text" v-model="valueIconRight" /> <InputText id="inputtext-right" type="text" v-model="valueIconRight" />
<label for="inputtext-right">Right Icon</label> <label for="inputtext-right">Right Icon</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /> <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<label for="autocomplete">AutoComplete</label> <label for="autocomplete">AutoComplete</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Calendar id="calendar" v-model="value3" /> <Calendar id="calendar" v-model="value3" />
<label for="calendar">Calendar</label> <label for="calendar">Calendar</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Chips id="chips" v-model="value4" /> <Chips id="chips" v-model="value4" />
<label for="chips">Chips</label> <label for="chips">Chips</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" /> <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
<label for="inputmask">InputMask</label> <label for="inputmask">InputMask</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<InputNumber id="inputnumber" v-model="value6" /> <InputNumber id="inputnumber" v-model="value6" />
<label for="inputnumber">InputNumber</label> <label for="inputnumber">InputNumber</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@ -72,38 +72,38 @@
</span> </span>
</div> </div>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" /> :optionGroupChildren="['states', 'cities']" />
<label for="multiselect">CascadeSelect</label> <label for="multiselect">CascadeSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" /> <Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
<label for="dropdown">Dropdown</label> <label for="dropdown">Dropdown</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" /> <MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
<label for="multiselect">MultiSelect</label> <label for="multiselect">MultiSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect> <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
<label for="treeselect">TreeSelect</label> <label for="treeselect">TreeSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Password id="password" v-model="value11" /> <Password id="password" v-model="value11" />
<label for="password">Password</label> <label for="password">Password</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" /> <Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label> <label for="textarea">Textarea</label>
@ -232,58 +232,58 @@ export default {
<template> <template>
<div> <div>
<div class="card"> <div class="card">
<div class="p-fluid p-grid"> <div class="p-fluid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<InputText id="inputtext" type="text" v-model="value1" /> <InputText id="inputtext" type="text" v-model="value1" />
<label for="inputtext">InputText</label> <label for="inputtext">InputText</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-left"> <span class="p-float-label p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" /> <InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
<label for="inputtext-left">Left Icon</label> <label for="inputtext-left">Left Icon</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-right"> <span class="p-float-label p-input-icon-right">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText id="inputtext-right" type="text" v-model="valueIconRight" /> <InputText id="inputtext-right" type="text" v-model="valueIconRight" />
<label for="inputtext-right">Right Icon</label> <label for="inputtext-right">Right Icon</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /> <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<label for="autocomplete">AutoComplete</label> <label for="autocomplete">AutoComplete</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Calendar id="calendar" v-model="value3" /> <Calendar id="calendar" v-model="value3" />
<label for="calendar">Calendar</label> <label for="calendar">Calendar</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Chips id="chips" v-model="value4" /> <Chips id="chips" v-model="value4" />
<label for="chips">Chips</label> <label for="chips">Chips</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" /> <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
<label for="inputmask">InputMask</label> <label for="inputmask">InputMask</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<InputNumber id="inputnumber" v-model="value6" /> <InputNumber id="inputnumber" v-model="value6" />
<label for="inputnumber">InputNumber</label> <label for="inputnumber">InputNumber</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@ -294,38 +294,38 @@ export default {
</span> </span>
</div> </div>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" /> :optionGroupChildren="['states', 'cities']" />
<label for="multiselect">CascadeSelect</label> <label for="multiselect">CascadeSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" /> <Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
<label for="dropdown">Dropdown</label> <label for="dropdown">Dropdown</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" /> <MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
<label for="multiselect">MultiSelect</label> <label for="multiselect">MultiSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect> <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
<label for="treeselect">TreeSelect</label> <label for="treeselect">TreeSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Password id="password" v-model="value11" /> <Password id="password" v-model="value11" />
<label for="password">Password</label> <label for="password">Password</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" /> <Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label> <label for="textarea">Textarea</label>
@ -480,58 +480,58 @@ export default {
<template> <template>
<div> <div>
<div class="card"> <div class="card">
<div class="p-fluid p-grid"> <div class="p-fluid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<InputText id="inputtext" type="text" v-model="value1" /> <InputText id="inputtext" type="text" v-model="value1" />
<label for="inputtext">InputText</label> <label for="inputtext">InputText</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-left"> <span class="p-float-label p-input-icon-left">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" /> <InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
<label for="inputtext-left">Left Icon</label> <label for="inputtext-left">Left Icon</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-right"> <span class="p-float-label p-input-icon-right">
<i class="pi pi-search" /> <i class="pi pi-search" />
<InputText id="inputtext-right" type="text" v-model="valueIconRight" /> <InputText id="inputtext-right" type="text" v-model="valueIconRight" />
<label for="inputtext-right">Right Icon</label> <label for="inputtext-right">Right Icon</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" /> <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
<label for="autocomplete">AutoComplete</label> <label for="autocomplete">AutoComplete</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Calendar id="calendar" v-model="value3" /> <Calendar id="calendar" v-model="value3" />
<label for="calendar">Calendar</label> <label for="calendar">Calendar</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Chips id="chips" v-model="value4" /> <Chips id="chips" v-model="value4" />
<label for="chips">Chips</label> <label for="chips">Chips</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" /> <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
<label for="inputmask">InputMask</label> <label for="inputmask">InputMask</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<InputNumber id="inputnumber" v-model="value6" /> <InputNumber id="inputnumber" v-model="value6" />
<label for="inputnumber">InputNumber</label> <label for="inputnumber">InputNumber</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@ -542,38 +542,38 @@ export default {
</span> </span>
</div> </div>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" /> :optionGroupChildren="['states', 'cities']" />
<label for="multiselect">CascadeSelect</label> <label for="multiselect">CascadeSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" /> <Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
<label for="dropdown">Dropdown</label> <label for="dropdown">Dropdown</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" /> <MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
<label for="multiselect">MultiSelect</label> <label for="multiselect">MultiSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect> <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
<label for="treeselect">TreeSelect</label> <label for="treeselect">TreeSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Password id="password" v-model="value11" /> <Password id="password" v-model="value11" />
<label for="password">Password</label> <label for="password">Password</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" /> <Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label> <label for="textarea">Textarea</label>
@ -735,58 +735,58 @@ export default {
<script src="./NodeService.js"><\\/script>`, <script src="./NodeService.js"><\\/script>`,
content: `<div id="app"> content: `<div id="app">
<div class="card"> <div class="card">
<div class="p-fluid p-grid"> <div class="p-fluid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-inputtext id="inputtext" type="text" v-model="value1"></p-inputtext> <p-inputtext id="inputtext" type="text" v-model="value1"></p-inputtext>
<label for="inputtext">InputText</label> <label for="inputtext">InputText</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-left"> <span class="p-float-label p-input-icon-left">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<p-inputtext id="inputtext-left" type="text" v-model="valueIconLeft"></p-inputtext> <p-inputtext id="inputtext-left" type="text" v-model="valueIconLeft"></p-inputtext>
<label for="inputtext-left">Left Icon</label> <label for="inputtext-left">Left Icon</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label p-input-icon-right"> <span class="p-float-label p-input-icon-right">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<p-inputtext id="inputtext-right" type="text" v-model="valueIconRight"></p-inputtext> <p-inputtext id="inputtext-right" type="text" v-model="valueIconRight"></p-inputtext>
<label for="inputtext-right">Right Icon</label> <label for="inputtext-right">Right Icon</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></p-autocomplete> <p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></p-autocomplete>
<label for="autocomplete">AutoComplete</label> <label for="autocomplete">AutoComplete</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-calendar id="calendar" v-model="value3"></p-calendar> <p-calendar id="calendar" v-model="value3"></p-calendar>
<label for="calendar">Calendar</label> <label for="calendar">Calendar</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-chips id="chips" v-model="value4"></p-chips> <p-chips id="chips" v-model="value4"></p-chips>
<label for="chips">Chips</label> <label for="chips">Chips</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask> <p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask>
<label for="inputmask">InputMask</label> <label for="inputmask">InputMask</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-inputnumber id="inputnumber" v-model="value6"></p-inputnumber> <p-inputnumber id="inputnumber" v-model="value6"></p-inputnumber>
<label for="inputnumber">InputNumber</label> <label for="inputnumber">InputNumber</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@ -797,38 +797,38 @@ export default {
</span> </span>
</div> </div>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-cascadeselect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name" <p-cascadeselect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name"
:option-group-children="['states', 'cities']"></p-cascadeselect> :option-group-children="['states', 'cities']"></p-cascadeselect>
<label for="multiselect">CascadeSelect</label> <label for="multiselect">CascadeSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-dropdown id="dropdown" v-model="value8" :options="cities" option-label="name"></p-dropdown> <p-dropdown id="dropdown" v-model="value8" :options="cities" option-label="name"></p-dropdown>
<label for="dropdown">Dropdown</label> <label for="dropdown">Dropdown</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-multiselect id="multiselect" v-model="value9" :options="cities" option-label="name"> <p-multiselect id="multiselect" v-model="value9" :options="cities" option-label="name">
<label for="multiselect">MultiSelect</label> <label for="multiselect">MultiSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-treeselect v-model="selectedNode" :options="nodes"></p-treeselect> <p-treeselect v-model="selectedNode" :options="nodes"></p-treeselect>
<label for="treeselect">TreeSelect</label> <label for="treeselect">TreeSelect</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-password id="password" v-model="value11"></p-password> <p-password id="password" v-model="value11"></p-password>
<label for="password">Password</label> <label for="password">Password</label>
</span> </span>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<span class="p-float-label"> <span class="p-float-label">
<p-textarea id="textarea" v-model="value10" rows="3"></p-textarea> <p-textarea id="textarea" v-model="value10" rows="3"></p-textarea>
<label for="textarea">Textarea</label> <label for="textarea">Textarea</label>

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

@ -13,11 +13,11 @@
<div class="card"> <div class="card">
<h5>Vertical</h5> <h5>Vertical</h5>
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field"> <div class="field">
<label for="firstname1">Firstname</label> <label for="firstname1">Firstname</label>
<InputText id="firstname1" type="text" /> <InputText id="firstname1" type="text" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="lastname1">Lastname</label> <label for="lastname1">Lastname</label>
<InputText id="lastname1" type="text" /> <InputText id="lastname1" type="text" />
</div> </div>
@ -26,12 +26,12 @@
<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 formgrid grid">
<div class="p-field p-col"> <div class="field 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="field col">
<label for="lastname2">Lastname</label> <label for="lastname2">Lastname</label>
<InputText id="lastname2" type="text" /> <InputText id="lastname2" type="text" />
</div> </div>
@ -40,15 +40,15 @@
<div class="card"> <div class="card">
<h5>Horizontal and Fixed Width</h5> <h5>Horizontal and Fixed Width</h5>
<div class="p-field p-grid"> <div class="field grid">
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label> <label for="firstname3" class="col-fixed" style="width:100px">Firstname</label>
<div class="p-col"> <div class="col">
<InputText id="firstname3" type="text" /> <InputText id="firstname3" type="text" />
</div> </div>
</div> </div>
<div class="p-field p-grid"> <div class="field grid">
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label> <label for="lastname3" class="col-fixed" style="width:100px">Lastname</label>
<div class="p-col"> <div class="col">
<InputText id="lastname3" type="text" /> <InputText id="lastname3" type="text" />
</div> </div>
</div> </div>
@ -57,15 +57,15 @@
<div class="card"> <div class="card">
<h5>Horizontal and Fluid</h5> <h5>Horizontal and Fluid</h5>
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field p-grid"> <div class="field grid">
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label> <label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
<div class="p-col-12 p-md-10"> <div class="col-12 md:col-10">
<InputText id="firstname4" type="text" /> <InputText id="firstname4" type="text" />
</div> </div>
</div> </div>
<div class="p-field p-grid"> <div class="field grid">
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label> <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
<div class="p-col-12 p-md-10"> <div class="col-12 md:col-10">
<InputText id="lastname4" type="text" /> <InputText id="lastname4" type="text" />
</div> </div>
</div> </div>
@ -74,12 +74,12 @@
<div class="card"> <div class="card">
<h5>Inline</h5> <h5>Inline</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field"> <div class="field">
<label for="firstname5" class="p-sr-only">Firstname</label> <label for="firstname5" class="p-sr-only">Firstname</label>
<InputText id="firstname5" type="text" placeholder="Firstname" /> <InputText id="firstname5" type="text" placeholder="Firstname" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="lastname5" class="p-sr-only">Lastname</label> <label for="lastname5" class="p-sr-only">Lastname</label>
<InputText id="lastname5" type="text" placeholder="Lastname" /> <InputText id="lastname5" type="text" placeholder="Lastname" />
</div> </div>
@ -89,22 +89,22 @@
<div class="card"> <div class="card">
<h5>Vertical Checkbox</h5> <h5>Vertical Checkbox</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /> <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
<label for="city1">Chicago</label> <label for="city1">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" /> <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
<label for="city2">Los Angeles</label> <label for="city2">Los Angeles</label>
</div> </div>
<h5>Horizontal Checkbox</h5> <h5>Horizontal Checkbox</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" /> <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
<label for="city3">Chicago</label> <label for="city3">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" /> <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
<label for="city4">Los Angeles</label> <label for="city4">Los Angeles</label>
</div> </div>
@ -113,22 +113,22 @@
<div class="card"> <div class="card">
<h5>Vertical RadioButton</h5> <h5>Vertical RadioButton</h5>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /> <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
<label for="city5">Chicago</label> <label for="city5">Chicago</label>
</div> </div>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" /> <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
<label for="city6">Los Angeles</label> <label for="city6">Los Angeles</label>
</div> </div>
<h5>Horizontal RadioButton</h5> <h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" /> <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label> <label for="city7">Chicago</label>
</div> </div>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" /> <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label> <label for="city8">Los Angeles</label>
</div> </div>
@ -137,7 +137,7 @@
<div class="card"> <div class="card">
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="p-field p-fluid"> <div class="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>
@ -146,28 +146,28 @@
<div class="card"> <div class="card">
<h5>Advanced</h5> <h5>Advanced</h5>
<div class="p-fluid p-formgrid p-grid"> <div class="p-fluid formgrid grid">
<div class="p-field p-col-12 p-md-6"> <div class="field col-12 md:col-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="field col-12 md:col-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="field 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="field col-12 md:col-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="field col-12 md:col-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="field col-12 md:col-3">
<label for="zip">Zip</label> <label for="zip">Zip</label>
<InputText id="zip" type="text" /> <InputText id="zip" type="text" />
</div> </div>
@ -207,8 +207,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@media screen and (max-width: 489px) { @media screen and (max-width: 489px) {
.p-formgroup-inline { .formgroup-inline {
.p-field { .field {
margin-bottom: 1em !important; margin-bottom: 1em !important;
} }
} }

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

@ -1,9 +1,9 @@
<template> <template>
<AppDoc name="FormLayoutDemo" :sources="sources" github="formlayout/FormLayoutDemo.vue"> <AppDoc name="FormLayoutDemo" :sources="sources" github="formlayout/FormLayoutDemo.vue">
<h5>Getting Started</h5> <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> <p>Core member of the FormLayout is the <i>.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="field"&gt;
&lt;label for="fieldId"&gt;Label&lt;/label&gt; &lt;label for="fieldId"&gt;Label&lt;/label&gt;
&lt;InputText id="fieldId" type="text" /&gt; &lt;InputText id="fieldId" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -14,11 +14,11 @@
<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="field"&gt;
&lt;label for="firstname"&gt;Firstname&lt;/label&gt; &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname" type="text" /&gt; &lt;InputText id="firstname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field"&gt; &lt;div class="field"&gt;
&lt;label for="lastname"&gt;Lastname&lt;/label&gt; &lt;label for="lastname"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname" type="text" /&gt; &lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -27,15 +27,15 @@
</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>.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 formgrid grid"&gt;
&lt;div class="p-field p-col"&gt; &lt;div class="field p-col"&gt;
&lt;label for="firstname"&gt;Firstname&lt;/label&gt; &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname" type="text" /&gt; &lt;InputText id="firstname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field p-col"&gt; &lt;div class="field p-col"&gt;
&lt;label for="lastname"&gt;Lastname&lt;/label&gt; &lt;label for="lastname"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname" type="text" /&gt; &lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -48,13 +48,13 @@
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="field 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;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;InputText id="firstname" type="text" /&gt; &lt;InputText id="firstname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field p-grid"&gt; &lt;div class="field grid"&gt;
&lt;label for="lastname" class="p-col-fixed" style="width:100px"&gt;Lastname&lt;/label&gt; &lt;label for="lastname" class="p-col-fixed" style="width:100px"&gt;Lastname&lt;/label&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;InputText id="lastname" type="text" /&gt; &lt;InputText id="lastname" type="text" /&gt;
@ -67,15 +67,15 @@
<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="field grid"&gt;
&lt;label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Firstname&lt;/label&gt; &lt;label for="firstname" class="col-12 mb-2 md:col-2 md:mb-0"&gt;Firstname&lt;/label&gt;
&lt;div class="p-col-12 p-md-10"&gt; &lt;div class="col-12 md:col-10"&gt;
&lt;InputText id="firstname" type="text" /&gt; &lt;InputText id="firstname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field p-grid"&gt; &lt;div class="field grid"&gt;
&lt;label for="lastname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Lastname&lt;/label&gt; &lt;label for="lastname" class="col-12 mb-2 md:col-2 md:mb-0"&gt;Lastname&lt;/label&gt;
&lt;div class="p-col-12 p-md-10"&gt; &lt;div class="col-12 md:col-10"&gt;
&lt;InputText id="lastname" type="text" /&gt; &lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -84,15 +84,15 @@
</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>.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="formgroup-inline"&gt;
&lt;div class="p-field"&gt; &lt;div class="field"&gt;
&lt;label for="firstname" class="p-sr-only"&gt;Firstname&lt;/label&gt; &lt;label for="firstname" class="p-sr-only"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname" type="text" placeholder="Firstname" /&gt; &lt;InputText id="firstname" type="text" placeholder="Firstname" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field"&gt; &lt;div class="field"&gt;
&lt;label for="lastname" class="p-sr-only"&gt;Lastname&lt;/label&gt; &lt;label for="lastname" class="p-sr-only"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname" type="text" placeholder="Lastname" /&gt; &lt;InputText id="lastname" type="text" placeholder="Lastname" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -102,26 +102,26 @@
</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>.field-checkbox</i> and <i>.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="field-checkbox"&gt;
&lt;Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /&gt; &lt;Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /&gt;
&lt;label for="city1"&gt;Chicago&lt;/label&gt; &lt;label for="city1"&gt;Chicago&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field-checkbox"&gt; &lt;div class="field-checkbox"&gt;
&lt;Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" /&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;label for="city2"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Checkbox&lt;/h3&gt; &lt;h3&gt;Horizontal Checkbox&lt;/h3&gt;
&lt;div class="p-formgroup-inline"&gt; &lt;div class="formgroup-inline"&gt;
&lt;div class="p-field-checkbox"&gt; &lt;div class="field-checkbox"&gt;
&lt;Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" /&gt; &lt;Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" /&gt;
&lt;label for="city3"&gt;Chicago&lt;/label&gt; &lt;label for="city3"&gt;Chicago&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field-checkbox"&gt; &lt;div class="field-checkbox"&gt;
&lt;Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" /&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;label for="city4"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
@ -131,22 +131,22 @@
<pre v-code><code> <pre v-code><code>
&lt;h3&gt;Vertical RadioButton&lt;/h3&gt; &lt;h3&gt;Vertical RadioButton&lt;/h3&gt;
&lt;div class="p-field-radiobutton"&gt; &lt;div class="field-radiobutton"&gt;
&lt;RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /&gt; &lt;RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /&gt;
&lt;label for="city5"&gt;Chicago&lt;/label&gt; &lt;label for="city5"&gt;Chicago&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field-radiobutton"&gt; &lt;div class="field-radiobutton"&gt;
&lt;RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" /&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;label for="city6"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal RadioButton&lt;/h3&gt; &lt;h3&gt;Horizontal RadioButton&lt;/h3&gt;
&lt;div class="p-formgroup-inline"&gt; &lt;div class="formgroup-inline"&gt;
&lt;div class="p-field-checkbox"&gt; &lt;div class="field-checkbox"&gt;
&lt;RadioButton id="city7" name="city2" value="Chicago" v-model="city2" /&gt; &lt;RadioButton id="city7" name="city2" value="Chicago" v-model="city2" /&gt;
&lt;label for="city7"&gt;Chicago&lt;/label&gt; &lt;label for="city7"&gt;Chicago&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field-checkbox"&gt; &lt;div class="field-checkbox"&gt;
&lt;RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" /&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;label for="city8"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
@ -157,7 +157,7 @@
<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="field p-fluid"&gt;
&lt;label for="username"&gt;Username&lt;/label&gt; &lt;label for="username"&gt;Username&lt;/label&gt;
&lt;InputText id="username" type="username" aria-describedby="username-help" /&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;small id="username-help"&gt;Enter your username to reset your password.&lt;/small&gt;
@ -166,30 +166,30 @@
</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>.field</i>, <i>.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 formgrid grid"&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt; &lt;div class="field col-12 md:col-6"&gt;
&lt;label for="firstname"&gt;Firstname&lt;/label&gt; &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname" type="text" /&gt; &lt;InputText id="firstname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt; &lt;div class="field col-12 md:col-6"&gt;
&lt;label for="lastname"&gt;Lastname&lt;/label&gt; &lt;label for="lastname"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname" type="text" /&gt; &lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field p-col-12"&gt; &lt;div class="field col-12"&gt;
&lt;label for="address"&gt;Address&lt;/label&gt; &lt;label for="address"&gt;Address&lt;/label&gt;
&lt;Textarea id="address" rows="4" /&gt; &lt;Textarea id="address" rows="4" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-6"&gt; &lt;div class="field col-12 md:col-6"&gt;
&lt;label for="city"&gt;City&lt;/label&gt; &lt;label for="city"&gt;City&lt;/label&gt;
&lt;InputText id="city" type="text" /&gt; &lt;InputText id="city" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt; &lt;div class="field col-12 md:col-3"&gt;
&lt;label for="state"&gt;State&lt;/label&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;Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field p-col-12 p-md-3"&gt; &lt;div class="field col-12 md:col-3"&gt;
&lt;label for="zip"&gt;Zip&lt;/label&gt; &lt;label for="zip"&gt;Zip&lt;/label&gt;
&lt;InputText id="zip" type="text" /&gt; &lt;InputText id="zip" type="text" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -236,11 +236,11 @@ export default {
<div class="card"> <div class="card">
<h5>Vertical</h5> <h5>Vertical</h5>
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field"> <div class="field">
<label for="firstname1">Firstname</label> <label for="firstname1">Firstname</label>
<InputText id="firstname1" type="text" /> <InputText id="firstname1" type="text" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="lastname1">Lastname</label> <label for="lastname1">Lastname</label>
<InputText id="lastname1" type="text" /> <InputText id="lastname1" type="text" />
</div> </div>
@ -249,12 +249,12 @@ export default {
<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 formgrid grid">
<div class="p-field p-col"> <div class="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="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>
@ -263,13 +263,13 @@ export default {
<div class="card"> <div class="card">
<h5>Horizontal and Fixed Width</h5> <h5>Horizontal and Fixed Width</h5>
<div class="p-field p-grid"> <div class="field grid">
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label> <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
<div class="p-col"> <div class="p-col">
<InputText id="firstname3" type="text" /> <InputText id="firstname3" type="text" />
</div> </div>
</div> </div>
<div class="p-field p-grid"> <div class="field grid">
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label> <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
<div class="p-col"> <div class="p-col">
<InputText id="lastname3" type="text" /> <InputText id="lastname3" type="text" />
@ -280,15 +280,15 @@ export default {
<div class="card"> <div class="card">
<h5>Horizontal and Fluid</h5> <h5>Horizontal and Fluid</h5>
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field p-grid"> <div class="field grid">
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label> <label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
<div class="p-col-12 p-md-10"> <div class="col-12 md:col-10">
<InputText id="firstname4" type="text" /> <InputText id="firstname4" type="text" />
</div> </div>
</div> </div>
<div class="p-field p-grid"> <div class="field grid">
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label> <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
<div class="p-col-12 p-md-10"> <div class="col-12 md:col-10">
<InputText id="lastname4" type="text" /> <InputText id="lastname4" type="text" />
</div> </div>
</div> </div>
@ -297,12 +297,12 @@ export default {
<div class="card"> <div class="card">
<h5>Inline</h5> <h5>Inline</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field"> <div class="field">
<label for="firstname5" class="p-sr-only">Firstname</label> <label for="firstname5" class="p-sr-only">Firstname</label>
<InputText id="firstname5" type="text" placeholder="Firstname" /> <InputText id="firstname5" type="text" placeholder="Firstname" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="lastname5" class="p-sr-only">Lastname</label> <label for="lastname5" class="p-sr-only">Lastname</label>
<InputText id="lastname5" type="text" placeholder="Lastname" /> <InputText id="lastname5" type="text" placeholder="Lastname" />
</div> </div>
@ -312,22 +312,22 @@ export default {
<div class="card"> <div class="card">
<h5>Vertical Checkbox</h5> <h5>Vertical Checkbox</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /> <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
<label for="city1">Chicago</label> <label for="city1">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" /> <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
<label for="city2">Los Angeles</label> <label for="city2">Los Angeles</label>
</div> </div>
<h5>Horizontal Checkbox</h5> <h5>Horizontal Checkbox</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" /> <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
<label for="city3">Chicago</label> <label for="city3">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" /> <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
<label for="city4">Los Angeles</label> <label for="city4">Los Angeles</label>
</div> </div>
@ -336,22 +336,22 @@ export default {
<div class="card"> <div class="card">
<h5>Vertical RadioButton</h5> <h5>Vertical RadioButton</h5>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /> <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
<label for="city5">Chicago</label> <label for="city5">Chicago</label>
</div> </div>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" /> <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
<label for="city6">Los Angeles</label> <label for="city6">Los Angeles</label>
</div> </div>
<h5>Horizontal RadioButton</h5> <h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" /> <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label> <label for="city7">Chicago</label>
</div> </div>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" /> <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label> <label for="city8">Los Angeles</label>
</div> </div>
@ -360,7 +360,7 @@ export default {
<div class="card"> <div class="card">
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="p-field p-fluid"> <div class="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>
@ -369,28 +369,28 @@ export default {
<div class="card"> <div class="card">
<h5>Advanced</h5> <h5>Advanced</h5>
<div class="p-fluid p-formgrid p-grid"> <div class="p-fluid formgrid grid">
<div class="p-field p-col-12 p-md-6"> <div class="field col-12 md:col-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="field col-12 md:col-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="field 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="field col-12 md:col-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="field col-12 md:col-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="field col-12 md:col-3">
<label for="zip">Zip</label> <label for="zip">Zip</label>
<InputText id="zip" type="text" /> <InputText id="zip" type="text" />
</div> </div>
@ -422,8 +422,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@media screen and (max-width: 489px) { @media screen and (max-width: 489px) {
.p-formgroup-inline { .formgroup-inline {
.p-field { .field {
margin-bottom: 1em !important; margin-bottom: 1em !important;
} }
} }
@ -447,11 +447,11 @@ textarea {
<div class="card"> <div class="card">
<h5>Vertical</h5> <h5>Vertical</h5>
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field"> <div class="field">
<label for="firstname1">Firstname</label> <label for="firstname1">Firstname</label>
<InputText id="firstname1" type="text" /> <InputText id="firstname1" type="text" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="lastname1">Lastname</label> <label for="lastname1">Lastname</label>
<InputText id="lastname1" type="text" /> <InputText id="lastname1" type="text" />
</div> </div>
@ -460,12 +460,12 @@ textarea {
<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 formgrid grid">
<div class="p-field p-col"> <div class="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="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>
@ -474,13 +474,13 @@ textarea {
<div class="card"> <div class="card">
<h5>Horizontal and Fixed Width</h5> <h5>Horizontal and Fixed Width</h5>
<div class="p-field p-grid"> <div class="field grid">
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label> <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
<div class="p-col"> <div class="p-col">
<InputText id="firstname3" type="text" /> <InputText id="firstname3" type="text" />
</div> </div>
</div> </div>
<div class="p-field p-grid"> <div class="field grid">
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label> <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
<div class="p-col"> <div class="p-col">
<InputText id="lastname3" type="text" /> <InputText id="lastname3" type="text" />
@ -491,15 +491,15 @@ textarea {
<div class="card"> <div class="card">
<h5>Horizontal and Fluid</h5> <h5>Horizontal and Fluid</h5>
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field p-grid"> <div class="field grid">
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label> <label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
<div class="p-col-12 p-md-10"> <div class="col-12 md:col-10">
<InputText id="firstname4" type="text" /> <InputText id="firstname4" type="text" />
</div> </div>
</div> </div>
<div class="p-field p-grid"> <div class="field grid">
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label> <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
<div class="p-col-12 p-md-10"> <div class="col-12 md:col-10">
<InputText id="lastname4" type="text" /> <InputText id="lastname4" type="text" />
</div> </div>
</div> </div>
@ -508,12 +508,12 @@ textarea {
<div class="card"> <div class="card">
<h5>Inline</h5> <h5>Inline</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field"> <div class="field">
<label for="firstname5" class="p-sr-only">Firstname</label> <label for="firstname5" class="p-sr-only">Firstname</label>
<InputText id="firstname5" type="text" placeholder="Firstname" /> <InputText id="firstname5" type="text" placeholder="Firstname" />
</div> </div>
<div class="p-field"> <div class="field">
<label for="lastname5" class="p-sr-only">Lastname</label> <label for="lastname5" class="p-sr-only">Lastname</label>
<InputText id="lastname5" type="text" placeholder="Lastname" /> <InputText id="lastname5" type="text" placeholder="Lastname" />
</div> </div>
@ -523,22 +523,22 @@ textarea {
<div class="card"> <div class="card">
<h5>Vertical Checkbox</h5> <h5>Vertical Checkbox</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /> <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
<label for="city1">Chicago</label> <label for="city1">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" /> <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
<label for="city2">Los Angeles</label> <label for="city2">Los Angeles</label>
</div> </div>
<h5>Horizontal Checkbox</h5> <h5>Horizontal Checkbox</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" /> <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
<label for="city3">Chicago</label> <label for="city3">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" /> <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
<label for="city4">Los Angeles</label> <label for="city4">Los Angeles</label>
</div> </div>
@ -547,22 +547,22 @@ textarea {
<div class="card"> <div class="card">
<h5>Vertical RadioButton</h5> <h5>Vertical RadioButton</h5>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /> <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
<label for="city5">Chicago</label> <label for="city5">Chicago</label>
</div> </div>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" /> <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
<label for="city6">Los Angeles</label> <label for="city6">Los Angeles</label>
</div> </div>
<h5>Horizontal RadioButton</h5> <h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" /> <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label> <label for="city7">Chicago</label>
</div> </div>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" /> <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label> <label for="city8">Los Angeles</label>
</div> </div>
@ -571,7 +571,7 @@ textarea {
<div class="card"> <div class="card">
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="p-field p-fluid"> <div class="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>
@ -580,28 +580,28 @@ textarea {
<div class="card"> <div class="card">
<h5>Advanced</h5> <h5>Advanced</h5>
<div class="p-fluid p-formgrid p-grid"> <div class="p-fluid formgrid grid">
<div class="p-field p-col-12 p-md-6"> <div class="field col-12 md:col-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="field col-12 md:col-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="field 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="field col-12 md:col-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="field col-12 md:col-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="field col-12 md:col-3">
<label for="zip">Zip</label> <label for="zip">Zip</label>
<InputText id="zip" type="text" /> <InputText id="zip" type="text" />
</div> </div>
@ -635,8 +635,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@media screen and (max-width: 489px) { @media screen and (max-width: 489px) {
.p-formgroup-inline { .formgroup-inline {
.p-field { .field {
margin-bottom: 1em !important; margin-bottom: 1em !important;
} }
} }
@ -662,11 +662,11 @@ textarea {
<div class="card"> <div class="card">
<h5>Vertical</h5> <h5>Vertical</h5>
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field"> <div class="field">
<label for="firstname1">Firstname</label> <label for="firstname1">Firstname</label>
<p-inputtext id="firstname1" type="text"></p-inputtext> <p-inputtext id="firstname1" type="text"></p-inputtext>
</div> </div>
<div class="p-field"> <div class="field">
<label for="lastname1">Lastname</label> <label for="lastname1">Lastname</label>
<p-inputtext id="lastname1" type="text"></p-inputtext> <p-inputtext id="lastname1" type="text"></p-inputtext>
</div> </div>
@ -675,12 +675,12 @@ textarea {
<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 formgrid grid">
<div class="p-field p-col"> <div class="field p-col">
<label for="firstname2">Firstname</label> <label for="firstname2">Firstname</label>
<p-inputtext id="firstname2" type="text"></p-inputtext> <p-inputtext id="firstname2" type="text"></p-inputtext>
</div> </div>
<div class="p-field p-col"> <div class="field p-col">
<label for="lastname2">Lastname</label> <label for="lastname2">Lastname</label>
<p-inputtext id="lastname2" type="text"></p-inputtext> <p-inputtext id="lastname2" type="text"></p-inputtext>
</div> </div>
@ -689,13 +689,13 @@ textarea {
<div class="card"> <div class="card">
<h5>Horizontal and Fixed Width</h5> <h5>Horizontal and Fixed Width</h5>
<div class="p-field p-grid"> <div class="field grid">
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label> <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
<div class="p-col"> <div class="p-col">
<p-inputtext id="firstname3" type="text"></p-inputtext> <p-inputtext id="firstname3" type="text"></p-inputtext>
</div> </div>
</div> </div>
<div class="p-field p-grid"> <div class="field grid">
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label> <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
<div class="p-col"> <div class="p-col">
<p-inputtext id="lastname3" type="text"></p-inputtext> <p-inputtext id="lastname3" type="text"></p-inputtext>
@ -706,15 +706,15 @@ textarea {
<div class="card"> <div class="card">
<h5>Horizontal and Fluid</h5> <h5>Horizontal and Fluid</h5>
<div class="p-fluid"> <div class="p-fluid">
<div class="p-field p-grid"> <div class="field grid">
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label> <label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
<div class="p-col-12 p-md-10"> <div class="col-12 md:col-10">
<p-inputtext id="firstname4" type="text"></p-inputtext> <p-inputtext id="firstname4" type="text"></p-inputtext>
</div> </div>
</div> </div>
<div class="p-field p-grid"> <div class="field grid">
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label> <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
<div class="p-col-12 p-md-10"> <div class="col-12 md:col-10">
<p-inputtext id="lastname4" type="text"></p-inputtext> <p-inputtext id="lastname4" type="text"></p-inputtext>
</div> </div>
</div> </div>
@ -723,12 +723,12 @@ textarea {
<div class="card"> <div class="card">
<h5>Inline</h5> <h5>Inline</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field"> <div class="field">
<label for="firstname5" class="p-sr-only">Firstname</label> <label for="firstname5" class="p-sr-only">Firstname</label>
<p-inputtext id="firstname5" type="text" placeholder="Firstname"></p-inputtext> <p-inputtext id="firstname5" type="text" placeholder="Firstname"></p-inputtext>
</div> </div>
<div class="p-field"> <div class="field">
<label for="lastname5" class="p-sr-only">Lastname</label> <label for="lastname5" class="p-sr-only">Lastname</label>
<p-inputtext id="lastname5" type="text" placeholder="Lastname"></p-inputtext> <p-inputtext id="lastname5" type="text" placeholder="Lastname"></p-inputtext>
</div> </div>
@ -738,22 +738,22 @@ textarea {
<div class="card"> <div class="card">
<h5>Vertical Checkbox</h5> <h5>Vertical Checkbox</h5>
<div class="p-field-checkbox"> <div class="field-checkbox">
<p-checkbox id="city1" name="city1" value="Chicago" v-model="cities1"></p-checkbox> <p-checkbox id="city1" name="city1" value="Chicago" v-model="cities1"></p-checkbox>
<label for="city1">Chicago</label> <label for="city1">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<p-checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1"></p-checkbox> <p-checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1"></p-checkbox>
<label for="city2">Los Angeles</label> <label for="city2">Los Angeles</label>
</div> </div>
<h5>Horizontal Checkbox</h5> <h5>Horizontal Checkbox</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field-checkbox"> <div class="field-checkbox">
<p-checkbox id="city3" name="city2" value="Chicago" v-model="cities2"></p-checkbox> <p-checkbox id="city3" name="city2" value="Chicago" v-model="cities2"></p-checkbox>
<label for="city3">Chicago</label> <label for="city3">Chicago</label>
</div> </div>
<div class="p-field-checkbox"> <div class="field-checkbox">
<p-checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2"></p-checkbox> <p-checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2"></p-checkbox>
<label for="city4">Los Angeles</label> <label for="city4">Los Angeles</label>
</div> </div>
@ -762,22 +762,22 @@ textarea {
<div class="card"> <div class="card">
<h5>Vertical RadioButton</h5> <h5>Vertical RadioButton</h5>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<p-radiobutton id="city5" name="city1" value="Chicago" v-model="city1"></p-radiobutton> <p-radiobutton id="city5" name="city1" value="Chicago" v-model="city1"></p-radiobutton>
<label for="city5">Chicago</label> <label for="city5">Chicago</label>
</div> </div>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<p-radiobutton id="city6" name="city1" value="Los Angeles" v-model="city1"></p-radiobutton> <p-radiobutton id="city6" name="city1" value="Los Angeles" v-model="city1"></p-radiobutton>
<label for="city6">Los Angeles</label> <label for="city6">Los Angeles</label>
</div> </div>
<h5>Horizontal RadioButton</h5> <h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<p-radiobutton id="city7" name="city2" value="Chicago" v-model="city2"></p-radiobutton> <p-radiobutton id="city7" name="city2" value="Chicago" v-model="city2"></p-radiobutton>
<label for="city7">Chicago</label> <label for="city7">Chicago</label>
</div> </div>
<div class="p-field-radiobutton"> <div class="field-radiobutton">
<p-radiobutton id="city8" name="city2" value="Los Angeles" v-model="city2"></p-radiobutton> <p-radiobutton id="city8" name="city2" value="Los Angeles" v-model="city2"></p-radiobutton>
<label for="city8">Los Angeles</label> <label for="city8">Los Angeles</label>
</div> </div>
@ -786,7 +786,7 @@ textarea {
<div class="card"> <div class="card">
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="p-field p-fluid"> <div class="field p-fluid">
<label for="username">Username</label> <label for="username">Username</label>
<p-inputtext id="username" type="username" aria-describedby="username-help"></p-inputtext> <p-inputtext id="username" type="username" aria-describedby="username-help"></p-inputtext>
<small id="username-help">Enter your username to reset your password.</small> <small id="username-help">Enter your username to reset your password.</small>
@ -795,28 +795,28 @@ textarea {
<div class="card"> <div class="card">
<h5>Advanced</h5> <h5>Advanced</h5>
<div class="p-fluid p-formgrid p-grid"> <div class="p-fluid formgrid grid">
<div class="p-field p-col-12 p-md-6"> <div class="field col-12 md:col-6">
<label for="firstname6">Firstname</label> <label for="firstname6">Firstname</label>
<p-inputtext id="firstname6" type="text"></p-inputtext> <p-inputtext id="firstname6" type="text"></p-inputtext>
</div> </div>
<div class="p-field p-col-12 p-md-6"> <div class="field col-12 md:col-6">
<label for="lastname6">Lastname</label> <label for="lastname6">Lastname</label>
<p-inputtext id="lastname6" type="text"></p-inputtext> <p-inputtext id="lastname6" type="text"></p-inputtext>
</div> </div>
<div class="p-field p-col-12"> <div class="field col-12">
<label for="address">Address</label> <label for="address">Address</label>
<p-textarea id="address" rows="4"></p-textarea> <p-textarea id="address" rows="4"></p-textarea>
</div> </div>
<div class="p-field p-col-12 p-md-6"> <div class="field col-12 md:col-6">
<label for="city">City</label> <label for="city">City</label>
<p-inputtext id="city" type="text"></p-inputtext> <p-inputtext id="city" type="text"></p-inputtext>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="state">State</label> <label for="state">State</label>
<p-dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select"></p-dropdown> <p-dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select"></p-dropdown>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="zip">Zip</label> <label for="zip">Zip</label>
<p-inputtext id="zip" type="text"></p-inputtext> <p-inputtext id="zip" type="text"></p-inputtext>
</div> </div>
@ -861,7 +861,7 @@ textarea {
<style> <style>
@media screen and (max-width: 489px) { @media screen and (max-width: 489px) {
.p-formgroup-inline .p-field { .formgroup-inline .field {
margin-bottom: 1em !important; margin-bottom: 1em !important;
} }
} }

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

@ -16,7 +16,7 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
</template> </template>
@ -46,7 +46,7 @@
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="grid grid-nogutter justify-content-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

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

@ -14,7 +14,7 @@
<img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" /> <img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="{item}"> <template #thumbnail="{item}">
<div class="p-grid p-nogutter p-justify-center"> <div class="grid grid-nogutter justify-content-center">
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /> <img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
</div> </div>
</template> </template>
@ -35,7 +35,7 @@
&lt;img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="{item}"&gt; &lt;template #thumbnail="{item}"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="grid grid-nogutter justify-content-center"&gt;
&lt;img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /&gt; &lt;img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

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

@ -50,8 +50,8 @@
</template> </template>
</Galleria> </Galleria>
<div v-if="images" class="p-grid" style="max-width: 400px;"> <div v-if="images" class="grid" style="max-width: 400px;">
<div v-for="(image, index) of images" class="p-col-3" :key="index"> <div v-for="(image, index) of images" class="col-3" :key="index">
<img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/> <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/>
</div> </div>
</div> </div>
@ -99,8 +99,8 @@
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
&lt;div v-if="images" class="p-grid" style="max-width: 400px;"&gt; &lt;div v-if="images" class="grid" style="max-width: 400px;"&gt;
&lt;div v-for="(image, index) of images" class="p-col-3" :key="index"&gt; &lt;div v-for="(image, index) of images" class="col-3" :key="index"&gt;
&lt;img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/&gt; &lt;img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;

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

@ -27,7 +27,7 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div> </div>
</template> </template>
@ -41,7 +41,7 @@
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="grid grid-nogutter justify-content-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div> </div>
</template> </template>
@ -81,7 +81,7 @@
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="grid grid-nogutter justify-content-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
@ -93,7 +93,7 @@
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="grid grid-nogutter justify-content-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

228
src/views/grid/GridDemo.vue
View File

@ -9,14 +9,14 @@
<p>Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.</p> <p>Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.</p>
<h5>Basic</h5> <h5>Basic</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">3</div> <div class="box">3</div>
</div> </div>
</div> </div>
@ -26,331 +26,331 @@
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" /> <Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
<div style="margin-top: .5em"> <div style="margin-top: .5em">
<transition-group name="dynamic-box" tag="div" class="p-grid"> <transition-group name="dynamic-box" tag="div" class="grid">
<div v-for="col of columns" :key="col" class="p-col"> <div v-for="col of columns" :key="col" class="col">
<div class="box">{{col}}</div> <div class="box">{{col}}</div>
</div> </div>
</transition-group> </transition-group>
</div> </div>
<h5>Reverse Direction</h5> <h5>Reverse Direction</h5>
<div class="p-grid p-flex-row-reverse"> <div class="grid flex-row-reverse">
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">3</div> <div class="box">3</div>
</div> </div>
</div> </div>
<h5>Column Direction</h5> <h5>Column Direction</h5>
<div class="p-grid p-flex-column"> <div class="grid flex-column">
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">3</div> <div class="box">3</div>
</div> </div>
</div> </div>
<h5>Reverse Column Direction</h5> <h5>Reverse Column Direction</h5>
<div class="p-grid p-flex-column-reverse"> <div class="grid flex-column-reverse">
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">3</div> <div class="box">3</div>
</div> </div>
</div> </div>
<h5>12 Column Grid</h5> <h5>12 Column Grid</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-4"> <div class="col-4">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
</div> </div>
<div class="p-grid"> <div class="grid">
<div class="p-col-2"> <div class="col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col-6"> <div class="col-6">
<div class="box">6</div> <div class="box">6</div>
</div> </div>
<div class="p-col-4"> <div class="col-4">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<div class="p-grid"> <div class="grid">
<div class="p-col-8"> <div class="col-8">
<div class="box">8</div> <div class="box">8</div>
</div> </div>
<div class="p-col-2"> <div class="col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col-2"> <div class="col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
</div> </div>
<h5>MultiLine</h5> <h5>MultiLine</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-6"> <div class="col-6">
<div class="box">6</div> <div class="box">6</div>
</div> </div>
<div class="p-col-6"> <div class="col-6">
<div class="box">6</div> <div class="box">6</div>
</div> </div>
<div class="p-col-6"> <div class="col-6">
<div class="box">6</div> <div class="box">6</div>
</div> </div>
<div class="p-col-6"> <div class="col-6">
<div class="box">6</div> <div class="box">6</div>
</div> </div>
</div> </div>
<h5>Fixed Width Column</h5> <h5>Fixed Width Column</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-fixed" style="width:100px"> <div class="col-fixed" style="width:100px">
<div class="box">100px</div> <div class="box">100px</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">auto</div> <div class="box">auto</div>
</div> </div>
</div> </div>
<h5>Responsive</h5> <h5>Responsive</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-6 p-lg-3"> <div class="col-12 md:col-6 lg:col-3">
<div class="box">p-col-12 p-md-6 p-lg-3</div> <div class="box">col-12 md:col-6 lg:col-3</div>
</div> </div>
<div class="p-col-12 p-md-6 p-lg-3"> <div class="col-12 md:col-6 lg:col-3">
<div class="box">p-col-12 p-md-6 p-lg-3</div> <div class="box">col-12 md:col-6 lg:col-3</div>
</div> </div>
<div class="p-col-12 p-md-6 p-lg-3"> <div class="col-12 md:col-6 lg:col-3">
<div class="box">p-col-12 p-md-6 p-lg-3</div> <div class="box">col-12 md:col-6 lg:col-3</div>
</div> </div>
<div class="p-col-12 p-md-6 p-lg-3"> <div class="col-12 md:col-6 lg:col-3">
<div class="box">p-col-12 p-md-6 p-lg-3</div> <div class="box">col-12 md:col-6 lg:col-3</div>
</div> </div>
</div> </div>
<h5>Horizontal Alignment - Start</h5> <h5>Horizontal Alignment - Start</h5>
<div class="p-grid p-jc-start"> <div class="grid justify-content-start">
<div class="p-col-2"> <div class="col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col-1"> <div class="col-1">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col-4"> <div class="col-4">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<h5>Horizontal Alignment - End</h5> <h5>Horizontal Alignment - End</h5>
<div class="p-grid p-jc-end"> <div class="grid justify-content-end">
<div class="p-col-2"> <div class="col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col-1"> <div class="col-1">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col-4"> <div class="col-4">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<h5>Horizontal Alignment - Center</h5> <h5>Horizontal Alignment - Center</h5>
<div class="p-grid p-jc-center"> <div class="grid justify-content-center">
<div class="p-col-2"> <div class="col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col-1"> <div class="col-1">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col-4"> <div class="col-4">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<h5>Horizontal Alignment - Between</h5> <h5>Horizontal Alignment - Between</h5>
<div class="p-grid p-jc-between"> <div class="grid justify-content-center">
<div class="p-col-2"> <div class="col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col-1"> <div class="col-1">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col-4"> <div class="col-4">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<h5>Horizontal Alignment - Around</h5> <h5>Horizontal Alignment - Around</h5>
<div class="p-grid p-jc-around"> <div class="grid justify-content-around">
<div class="p-col-2"> <div class="col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col-1"> <div class="col-1">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col-4"> <div class="col-4">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<h5>Horizontal Alignment - Even</h5> <h5>Horizontal Alignment - Even</h5>
<div class="p-grid p-jc-evenly"> <div class="grid justify-content-evenly">
<div class="p-col-2"> <div class="col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
<div class="p-col-1"> <div class="col-1">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
<div class="p-col-4"> <div class="col-4">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<h5>Vertical Alignment - Start</h5> <h5>Vertical Alignment - Start</h5>
<div class="p-grid p-ai-start vertical-container"> <div class="grid align-items-start vertical-container">
<div class="p-col"> <div class="col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<h5>Vertical Alignment - End</h5> <h5>Vertical Alignment - End</h5>
<div class="p-grid p-ai-end vertical-container"> <div class="grid align-items-end vertical-container">
<div class="p-col"> <div class="col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<h5>Vertical Alignment - Center</h5> <h5>Vertical Alignment - Center</h5>
<div class="p-grid p-ai-center vertical-container"> <div class="grid align-items-center vertical-container">
<div class="p-col"> <div class="col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<h5>Vertical Alignment - Stretch</h5> <h5>Vertical Alignment - Stretch</h5>
<div class="p-grid p-ai-stretch vertical-container"> <div class="grid align-items-stretch vertical-container">
<div class="p-col"> <div class="col">
<div class="box box-stretched">4</div> <div class="box box-stretched">4</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box box-stretched">4</div> <div class="box box-stretched">4</div>
</div> </div>
<div class="p-col"> <div class="col">
<div class="box box-stretched">4</div> <div class="box box-stretched">4</div>
</div> </div>
</div> </div>
<h5>Vertical Alignment - Per Column</h5> <h5>Vertical Alignment - Per Column</h5>
<div class="p-grid vertical-container"> <div class="grid vertical-container">
<div class="p-col p-as-start"> <div class="col align-self-start">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
<div class="p-col p-as-center"> <div class="col align-self-center">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
<div class="p-col p-as-end"> <div class="col align-self-end">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<h5>Offset</h5> <h5>Offset</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-6 p-offset-3"> <div class="col-6 col-offset-3">
<div class="box">6</div> <div class="box">6</div>
</div> </div>
</div> </div>
<div class="p-grid"> <div class="grid">
<div class="p-col-4"> <div class="col-4">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
<div class="p-col-4 p-offset-4"> <div class="col-4 col-offset-4">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>
<h5>Nested</h5> <h5>Nested</h5>
<div class="p-grid nested-grid"> <div class="grid nested-grid">
<div class="p-col-8"> <div class="col-8">
<div class="p-grid"> <div class="grid">
<div class="p-col-6"> <div class="col-6">
<div class="box">6</div> <div class="box">6</div>
</div> </div>
<div class="p-col-6"> <div class="col-6">
<div class="box">6</div> <div class="box">6</div>
</div> </div>
<div class="p-col-12"> <div class="col-12">
<div class="box">12</div> <div class="box">12</div>
</div> </div>
</div> </div>
</div> </div>
<div class="p-col-4"> <div class="col-4">
<div class="box box-stretched">4</div> <div class="box box-stretched">4</div>
</div> </div>
</div> </div>
<h5>Panels</h5> <h5>Panels</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col"> <div class="col">
<Panel header="Header"> <Panel header="Header">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@ -358,7 +358,7 @@
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</Panel> </Panel>
</div> </div>
<div class="p-col"> <div class="col">
<Panel header="Header"> <Panel header="Header">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@ -366,7 +366,7 @@
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</Panel> </Panel>
</div> </div>
<div class="p-col"> <div class="col">
<Panel header="Header"> <Panel header="Header">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@ -426,7 +426,7 @@ export default {
border-radius: 4px; border-radius: 4px;
} }
.nested-grid .p-col-4 { .nested-grid .col-4 {
padding-bottom: 1rem; padding-bottom: 1rem;
} }

900
src/views/grid/GridDoc.vue
View File

File diff suppressed because it is too large Load Diff

6
src/views/icons/Icons.vue
View File

@ -94,8 +94,8 @@ export default {
<InputText v-model="filter" class="icon-filter" placeholder="Search an icon" /> <InputText v-model="filter" class="icon-filter" placeholder="Search an icon" />
<div class="p-grid icons-list"> <div class="grid icons-list">
<div class="p-col-12 p-md-2" v-for="icon of filteredIcons" :key="icon.properties.name"> <div class="col-12 md:col-2 icon" v-for="icon of filteredIcons" :key="icon.properties.name">
<i :class="'pi pi-' + icon.properties.name"></i> <i :class="'pi pi-' + icon.properties.name"></i>
<div>pi-{{icon.properties.name}}</div> <div>pi-{{icon.properties.name}}</div>
</div> </div>
@ -158,7 +158,7 @@ export default {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.p-md-2 { .icon {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
} }

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

@ -12,8 +12,8 @@
<div class="card"> <div class="card">
<h5>Addons</h5> <h5>Addons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@ -22,7 +22,7 @@
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span> <span class="p-inputgroup-addon">$</span>
<InputText placeholder="Price" /> <InputText placeholder="Price" />
@ -30,7 +30,7 @@
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon">W</span> <span class="p-inputgroup-addon">W</span>
<InputText placeholder="Website" /> <InputText placeholder="Website" />
@ -39,8 +39,8 @@
</div> </div>
<h5>Multiple Addons</h5> <h5>Multiple Addons</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-12"> <div class="col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-clock"></i> <i class="pi pi-clock"></i>
@ -56,22 +56,22 @@
</div> </div>
<h5>Button Addons</h5> <h5>Button Addons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<Button label="Search"/> <Button label="Search"/>
<InputText placeholder="Keyword"/> <InputText placeholder="Keyword"/>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<InputText placeholder="Keyword"/> <InputText placeholder="Keyword"/>
<Button icon="pi pi-search" class="p-button-warning"/> <Button icon="pi pi-search" class="p-button-warning"/>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<Button icon="pi pi-check" class="p-button-success"/> <Button icon="pi pi-check" class="p-button-success"/>
<InputText placeholder="Vote"/> <InputText placeholder="Vote"/>
@ -81,8 +81,8 @@
</div> </div>
<h5>Checkbox and RadioButton</h5> <h5>Checkbox and RadioButton</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<Checkbox v-model="checked1" :binary="true" /> <Checkbox v-model="checked1" :binary="true" />
@ -91,7 +91,7 @@
</div> </div>
</div> </div>
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<InputText placeholder="Price"/> <InputText placeholder="Price"/>
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
@ -100,7 +100,7 @@
</div> </div>
</div> </div>
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<Checkbox v-model="checked2" :binary="true" /> <Checkbox v-model="checked2" :binary="true" />

84
src/views/inputgroup/InputGroupDoc.vue
View File

@ -13,8 +13,8 @@ export default {
<template> <template>
<div> <div>
<h5>Addons</h5> <h5>Addons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@ -23,7 +23,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span> <span class="p-inputgroup-addon">$</span>
<InputText placeholder="Price" /> <InputText placeholder="Price" />
@ -31,7 +31,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon">W</span> <span class="p-inputgroup-addon">W</span>
<InputText placeholder="Website" /> <InputText placeholder="Website" />
@ -40,8 +40,8 @@ export default {
</div> </div>
<h5>Multiple Addons</h5> <h5>Multiple Addons</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-12"> <div class="col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-clock"></i> <i class="pi pi-clock"></i>
@ -57,22 +57,22 @@ export default {
</div> </div>
<h5>Button Addons</h5> <h5>Button Addons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<Button label="Search"/> <Button label="Search"/>
<InputText placeholder="Keyword"/> <InputText placeholder="Keyword"/>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<InputText placeholder="Keyword"/> <InputText placeholder="Keyword"/>
<Button icon="pi pi-search" class="p-button-warning"/> <Button icon="pi pi-search" class="p-button-warning"/>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<Button icon="pi pi-check" class="p-button-success"/> <Button icon="pi pi-check" class="p-button-success"/>
<InputText placeholder="Vote"/> <InputText placeholder="Vote"/>
@ -82,8 +82,8 @@ export default {
</div> </div>
<h5>Checkbox and RadioButton</h5> <h5>Checkbox and RadioButton</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<Checkbox v-model="checked1" :binary="true" /> <Checkbox v-model="checked1" :binary="true" />
@ -92,7 +92,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<InputText placeholder="Price"/> <InputText placeholder="Price"/>
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
@ -101,7 +101,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<Checkbox v-model="checked2" :binary="true" /> <Checkbox v-model="checked2" :binary="true" />
@ -135,8 +135,8 @@ export default {
<template> <template>
<div> <div>
<h5>Addons</h5> <h5>Addons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@ -145,7 +145,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span> <span class="p-inputgroup-addon">$</span>
<InputText placeholder="Price" /> <InputText placeholder="Price" />
@ -153,7 +153,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon">W</span> <span class="p-inputgroup-addon">W</span>
<InputText placeholder="Website" /> <InputText placeholder="Website" />
@ -162,8 +162,8 @@ export default {
</div> </div>
<h5>Multiple Addons</h5> <h5>Multiple Addons</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-12"> <div class="col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-clock"></i> <i class="pi pi-clock"></i>
@ -179,22 +179,22 @@ export default {
</div> </div>
<h5>Button Addons</h5> <h5>Button Addons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<Button label="Search"/> <Button label="Search"/>
<InputText placeholder="Keyword"/> <InputText placeholder="Keyword"/>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<InputText placeholder="Keyword"/> <InputText placeholder="Keyword"/>
<Button icon="pi pi-search" class="p-button-warning"/> <Button icon="pi pi-search" class="p-button-warning"/>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<Button icon="pi pi-check" class="p-button-success"/> <Button icon="pi pi-check" class="p-button-success"/>
<InputText placeholder="Vote"/> <InputText placeholder="Vote"/>
@ -204,8 +204,8 @@ export default {
</div> </div>
<h5>Checkbox and RadioButton</h5> <h5>Checkbox and RadioButton</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<Checkbox v-model="checked1" :binary="true" /> <Checkbox v-model="checked1" :binary="true" />
@ -214,7 +214,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<InputText placeholder="Price"/> <InputText placeholder="Price"/>
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
@ -223,7 +223,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<Checkbox v-model="checked2" :binary="true" /> <Checkbox v-model="checked2" :binary="true" />
@ -259,8 +259,8 @@ export default {
<script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>`, <script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>`,
content: `<div id="app"> content: `<div id="app">
<h5>Addons</h5> <h5>Addons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-user"></i> <i class="pi pi-user"></i>
@ -269,7 +269,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span> <span class="p-inputgroup-addon">$</span>
<p-inputtext placeholder="Price"></p-inputtext> <p-inputtext placeholder="Price"></p-inputtext>
@ -277,7 +277,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon">W</span> <span class="p-inputgroup-addon">W</span>
<p-inputtext placeholder="Website"></p-inputtext> <p-inputtext placeholder="Website"></p-inputtext>
@ -286,8 +286,8 @@ export default {
</div> </div>
<h5>Multiple Addons</h5> <h5>Multiple Addons</h5>
<div class="p-grid"> <div class="grid">
<div class="p-col-12"> <div class="col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<i class="pi pi-clock"></i> <i class="pi pi-clock"></i>
@ -303,22 +303,22 @@ export default {
</div> </div>
<h5>Button Addons</h5> <h5>Button Addons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<p-button label="Search"></p-button> <p-button label="Search"></p-button>
<p-inputtext placeholder="Keyword"></p-inputtext> <p-inputtext placeholder="Keyword"></p-inputtext>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<p-inputtext placeholder="Keyword"></p-inputtext> <p-inputtext placeholder="Keyword"></p-inputtext>
<p-button icon="pi pi-search" class="p-button-warning"></p-button> <p-button icon="pi pi-search" class="p-button-warning"></p-button>
</div> </div>
</div> </div>
<div class="p-col-12 p-md-4"> <div class="col-12 md:col-4">
<div class="p-inputgroup"> <div class="p-inputgroup">
<p-button icon="pi pi-check" class="p-button-success"></p-button> <p-button icon="pi pi-check" class="p-button-success"></p-button>
<p-inputtext placeholder="Vote"></p-inputtext> <p-inputtext placeholder="Vote"></p-inputtext>
@ -328,8 +328,8 @@ export default {
</div> </div>
<h5>Checkbox and RadioButton</h5> <h5>Checkbox and RadioButton</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<p-checkbox v-model="checked1" :binary="true"></p-checkbox> <p-checkbox v-model="checked1" :binary="true"></p-checkbox>
@ -338,7 +338,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<p-inputtext placeholder="Price"></p-inputtext> <p-inputtext placeholder="Price"></p-inputtext>
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
@ -347,7 +347,7 @@ export default {
</div> </div>
</div> </div>
<div class="p-col-12 p-md-12"> <div class="col-12 md:col-12">
<div class="p-inputgroup"> <div class="p-inputgroup">
<span class="p-inputgroup-addon"> <span class="p-inputgroup-addon">
<p-checkbox v-model="checked2" :binary="true"></p-checkbox> <p-checkbox v-model="checked2" :binary="true"></p-checkbox>

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

@ -10,33 +10,33 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<div class="p-fluid p-formgrid p-grid"> <div class="p-fluid formgrid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="basic">Basic</label> <label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" /> <InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="ssn">SSN</label> <label for="ssn">SSN</label>
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" /> <InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="date">Date</label> <label for="date">Date</label>
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" /> <InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="Phone">Phone</label> <label for="Phone">Phone</label>
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" /> <InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="phoneext">Phone Ext</label> <label for="phoneext">Phone Ext</label>
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/> <InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="serial">Serial</label> <label for="serial">Serial</label>
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" /> <InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
</div> </div>

42
src/views/inputmask/InputMaskDoc.vue
View File

@ -139,33 +139,33 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<div class="p-fluid p-formgrid p-grid"> <div class="p-fluid formgrid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="basic">Basic</label> <label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" /> <InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="ssn">SSN</label> <label for="ssn">SSN</label>
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" /> <InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="date">Date</label> <label for="date">Date</label>
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" /> <InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="Phone">Phone</label> <label for="Phone">Phone</label>
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" /> <InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="phoneext">Phone Ext</label> <label for="phoneext">Phone Ext</label>
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/> <InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="serial">Serial</label> <label for="serial">Serial</label>
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" /> <InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
</div> </div>
@ -194,33 +194,33 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<div class="p-fluid p-formgrid p-grid"> <div class="p-fluid formgrid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="basic">Basic</label> <label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" /> <InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="ssn">SSN</label> <label for="ssn">SSN</label>
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" /> <InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="date">Date</label> <label for="date">Date</label>
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" /> <InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="Phone">Phone</label> <label for="Phone">Phone</label>
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" /> <InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="phoneext">Phone Ext</label> <label for="phoneext">Phone Ext</label>
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/> <InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="serial">Serial</label> <label for="serial">Serial</label>
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" /> <InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
</div> </div>
@ -250,33 +250,33 @@ export default {
tabName: 'Browser Source', tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"><\\/script>`, imports: `<script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"><\\/script>`,
content: `<div id="app"> content: `<div id="app">
<div class="p-fluid p-formgrid p-grid"> <div class="p-fluid formgrid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="basic">Basic</label> <label for="basic">Basic</label>
<p-inputmask mask="99-999999" v-model="val1" placeholder="99-999999"></p-inputmask> <p-inputmask mask="99-999999" v-model="val1" placeholder="99-999999"></p-inputmask>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="ssn">SSN</label> <label for="ssn">SSN</label>
<p-inputmask mask="999-99-9999" v-model="val2" placeholder="999-99-9999"></p-inputmask> <p-inputmask mask="999-99-9999" v-model="val2" placeholder="999-99-9999"></p-inputmask>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="date">Date</label> <label for="date">Date</label>
<p-inputmask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask> <p-inputmask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="Phone">Phone</label> <label for="Phone">Phone</label>
<p-inputmask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999"></p-inputmask> <p-inputmask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999"></p-inputmask>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="phoneext">Phone Ext</label> <label for="phoneext">Phone Ext</label>
<p-inputmask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"></p-inputmask> <p-inputmask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"></p-inputmask>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<label for="serial">Serial</label> <label for="serial">Serial</label>
<p-inputmask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999"></p-inputmask> <p-inputmask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999"></p-inputmask>
</div> </div>

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

@ -12,100 +12,100 @@
<div class="card"> <div class="card">
<h5>Numerals</h5> <h5>Numerals</h5>
<div class="p-fluid p-grid p-formgrid"> <div class="p-fluid grid formgrid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="integeronly">Integer Only</label> <label for="integeronly">Integer Only</label>
<InputNumber id="integeronly" v-model="value1" /> <InputNumber id="integeronly" v-model="value1" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="withoutgrouping">Without Grouping</label> <label for="withoutgrouping">Without Grouping</label>
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" /> <InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmaxfraction">Min-Max Fraction Digits</label> <label for="minmaxfraction">Min-Max Fraction Digits</label>
<InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" /> <InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmax">Min-Max Boundaries</label> <label for="minmax">Min-Max Boundaries</label>
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" /> <InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-user">User Locale</label> <label for="locale-user">User Locale</label>
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" /> <InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-us">United States Locale</label> <label for="locale-us">United States Locale</label>
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" /> <InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-german">German Locale</label> <label for="locale-german">German Locale</label>
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/> <InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-indian">Indian Locale</label> <label for="locale-indian">Indian Locale</label>
<InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" /> <InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
</div> </div>
</div> </div>
<h5>Currency</h5> <h5>Currency</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-us">United States</label> <label for="currency-us">United States</label>
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" /> <InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-germany">Germany</label> <label for="currency-germany">Germany</label>
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" /> <InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-india">India</label> <label for="currency-india">India</label>
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" /> <InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-japan">Japan</label> <label for="currency-japan">Japan</label>
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" /> <InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
</div> </div>
</div> </div>
<h5>Prefix and Suffix</h5> <h5>Prefix and Suffix</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="mile">Mile</label> <label for="mile">Mile</label>
<InputNumber id="mile" v-model="value13" suffix=" mi" /> <InputNumber id="mile" v-model="value13" suffix=" mi" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="percent">Percent</label> <label for="percent">Percent</label>
<InputNumber id="percent" v-model="value14" prefix="%" /> <InputNumber id="percent" v-model="value14" prefix="%" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="expiry">Expiry</label> <label for="expiry">Expiry</label>
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" /> <InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="temperature">Temperature</label> <label for="temperature">Temperature</label>
<InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" /> <InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
</div> </div>
</div> </div>
<h5>Buttons</h5> <h5>Buttons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="stacked">Stacked</label> <label for="stacked">Stacked</label>
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" /> <InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="horizontal">Horizontal with Step</label> <label for="horizontal">Horizontal with Step</label>
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25" <InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" /> decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmax-buttons">Min-Max Boundaries</label> <label for="minmax-buttons">Min-Max Boundaries</label>
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" /> <InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
</div> </div>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="vertical" style="display: block">Vertical</label> <label for="vertical" style="display: block">Vertical</label>
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem" <InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /> decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />

144
src/views/inputnumber/InputNumberDoc.vue
View File

@ -409,100 +409,100 @@ export default {
<template> <template>
<div> <div>
<h5>Numerals</h5> <h5>Numerals</h5>
<div class="p-fluid p-grid p-formgrid"> <div class="p-fluid grid formgrid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="integeronly">Integer Only</label> <label for="integeronly">Integer Only</label>
<InputNumber id="integeronly" v-model="value1" /> <InputNumber id="integeronly" v-model="value1" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="withoutgrouping">Without Grouping</label> <label for="withoutgrouping">Without Grouping</label>
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" /> <InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmaxfraction">Min-Max Fraction Digits</label> <label for="minmaxfraction">Min-Max Fraction Digits</label>
<InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" /> <InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmax">Min-Max Boundaries</label> <label for="minmax">Min-Max Boundaries</label>
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" /> <InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-user">User Locale</label> <label for="locale-user">User Locale</label>
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" /> <InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-us">United States Locale</label> <label for="locale-us">United States Locale</label>
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" /> <InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-german">German Locale</label> <label for="locale-german">German Locale</label>
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/> <InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-indian">Indian Locale</label> <label for="locale-indian">Indian Locale</label>
<InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" /> <InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
</div> </div>
</div> </div>
<h5>Currency</h5> <h5>Currency</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-us">United States</label> <label for="currency-us">United States</label>
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" /> <InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-germany">Germany</label> <label for="currency-germany">Germany</label>
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" /> <InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-india">India</label> <label for="currency-india">India</label>
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" /> <InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-japan">Japan</label> <label for="currency-japan">Japan</label>
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" /> <InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
</div> </div>
</div> </div>
<h5>Prefix and Suffix</h5> <h5>Prefix and Suffix</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="mile">Mile</label> <label for="mile">Mile</label>
<InputNumber id="mile" v-model="value13" suffix=" mi" /> <InputNumber id="mile" v-model="value13" suffix=" mi" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="percent">Percent</label> <label for="percent">Percent</label>
<InputNumber id="percent" v-model="value14" prefix="%" /> <InputNumber id="percent" v-model="value14" prefix="%" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="expiry">Expiry</label> <label for="expiry">Expiry</label>
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" /> <InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="temperature">Temperature</label> <label for="temperature">Temperature</label>
<InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" /> <InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
</div> </div>
</div> </div>
<h5>Buttons</h5> <h5>Buttons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="stacked">Stacked</label> <label for="stacked">Stacked</label>
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" /> <InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="horizontal">Horizontal with Step</label> <label for="horizontal">Horizontal with Step</label>
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25" <InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" /> decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmax-buttons">Min-Max Boundaries</label> <label for="minmax-buttons">Min-Max Boundaries</label>
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" /> <InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
</div> </div>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="vertical" style="display: block">Vertical</label> <label for="vertical" style="display: block">Vertical</label>
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem" <InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /> decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
@ -546,100 +546,100 @@ export default {
<template> <template>
<div> <div>
<h5>Numerals</h5> <h5>Numerals</h5>
<div class="p-fluid p-grid p-formgrid"> <div class="p-fluid grid formgrid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="integeronly">Integer Only</label> <label for="integeronly">Integer Only</label>
<InputNumber id="integeronly" v-model="value1" /> <InputNumber id="integeronly" v-model="value1" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="withoutgrouping">Without Grouping</label> <label for="withoutgrouping">Without Grouping</label>
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" /> <InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmaxfraction">Min-Max Fraction Digits</label> <label for="minmaxfraction">Min-Max Fraction Digits</label>
<InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" /> <InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmax">Min-Max Boundaries</label> <label for="minmax">Min-Max Boundaries</label>
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" /> <InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-user">User Locale</label> <label for="locale-user">User Locale</label>
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" /> <InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-us">United States Locale</label> <label for="locale-us">United States Locale</label>
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" /> <InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-german">German Locale</label> <label for="locale-german">German Locale</label>
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/> <InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-indian">Indian Locale</label> <label for="locale-indian">Indian Locale</label>
<InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" /> <InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
</div> </div>
</div> </div>
<h5>Currency</h5> <h5>Currency</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-us">United States</label> <label for="currency-us">United States</label>
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" /> <InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-germany">Germany</label> <label for="currency-germany">Germany</label>
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" /> <InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-india">India</label> <label for="currency-india">India</label>
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" /> <InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-japan">Japan</label> <label for="currency-japan">Japan</label>
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" /> <InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
</div> </div>
</div> </div>
<h5>Prefix and Suffix</h5> <h5>Prefix and Suffix</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="mile">Mile</label> <label for="mile">Mile</label>
<InputNumber id="mile" v-model="value13" suffix=" mi" /> <InputNumber id="mile" v-model="value13" suffix=" mi" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="percent">Percent</label> <label for="percent">Percent</label>
<InputNumber id="percent" v-model="value14" prefix="%" /> <InputNumber id="percent" v-model="value14" prefix="%" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="expiry">Expiry</label> <label for="expiry">Expiry</label>
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" /> <InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="temperature">Temperature</label> <label for="temperature">Temperature</label>
<InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" /> <InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
</div> </div>
</div> </div>
<h5>Buttons</h5> <h5>Buttons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="stacked">Stacked</label> <label for="stacked">Stacked</label>
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" /> <InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="horizontal">Horizontal with Step</label> <label for="horizontal">Horizontal with Step</label>
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25" <InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" /> decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmax-buttons">Min-Max Boundaries</label> <label for="minmax-buttons">Min-Max Boundaries</label>
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" /> <InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
</div> </div>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="vertical" style="display: block">Vertical</label> <label for="vertical" style="display: block">Vertical</label>
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem" <InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /> decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
@ -684,100 +684,100 @@ export default {
tabName: 'Browser Source', tabName: 'Browser Source',
content: `<div id="app"> content: `<div id="app">
<h5>Numerals</h5> <h5>Numerals</h5>
<div class="p-fluid p-grid p-formgrid"> <div class="p-fluid grid formgrid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="integeronly">Integer Only</label> <label for="integeronly">Integer Only</label>
<p-inputnumber id="integeronly" v-model="value1"></p-inputnumber> <p-inputnumber id="integeronly" v-model="value1"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="withoutgrouping">Without Grouping</label> <label for="withoutgrouping">Without Grouping</label>
<p-inputnumber id="withoutgrouping" v-model="value2" mode="decimal" :use-grouping="false"></p-inputnumber> <p-inputnumber id="withoutgrouping" v-model="value2" mode="decimal" :use-grouping="false"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmaxfraction">Min-Max Fraction Digits</label> <label for="minmaxfraction">Min-Max Fraction Digits</label>
<p-inputnumber id="minmaxfraction" v-model="value3" mode="decimal" :min-fraction-digits="2" :max-fraction-digits="5"></p-inputnumber> <p-inputnumber id="minmaxfraction" v-model="value3" mode="decimal" :min-fraction-digits="2" :max-fraction-digits="5"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmax">Min-Max Boundaries</label> <label for="minmax">Min-Max Boundaries</label>
<p-inputnumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100"></p-inputnumber> <p-inputnumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-user">User Locale</label> <label for="locale-user">User Locale</label>
<p-inputnumber id="locale-user" v-model="value5" mode="decimal" :min-fraction-digits="2"></p-inputnumber> <p-inputnumber id="locale-user" v-model="value5" mode="decimal" :min-fraction-digits="2"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-us">United States Locale</label> <label for="locale-us">United States Locale</label>
<p-inputnumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :min-fraction-digits="2"></p-inputnumber> <p-inputnumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :min-fraction-digits="2"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-german">German Locale</label> <label for="locale-german">German Locale</label>
<p-inputnumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :min-fraction-digits="2"></p-inputnumber> <p-inputnumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :min-fraction-digits="2"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="locale-indian">Indian Locale</label> <label for="locale-indian">Indian Locale</label>
<p-inputnumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :min-fraction-digits="2"></p-inputnumber> <p-inputnumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :min-fraction-digits="2"></p-inputnumber>
</div> </div>
</div> </div>
<h5>Currency</h5> <h5>Currency</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-us">United States</label> <label for="currency-us">United States</label>
<p-inputnumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US"></p-inputnumber> <p-inputnumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-germany">Germany</label> <label for="currency-germany">Germany</label>
<p-inputnumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE"></p-inputnumber> <p-inputnumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-india">India</label> <label for="currency-india">India</label>
<p-inputnumber id="currency-india" v-model="value11" mode="currency" currency="INR" currency-display="code" locale="en-IN"></p-inputnumber> <p-inputnumber id="currency-india" v-model="value11" mode="currency" currency="INR" currency-display="code" locale="en-IN"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="currency-japan">Japan</label> <label for="currency-japan">Japan</label>
<p-inputnumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP"></p-inputnumber> <p-inputnumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP"></p-inputnumber>
</div> </div>
</div> </div>
<h5>Prefix and Suffix</h5> <h5>Prefix and Suffix</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="mile">Mile</label> <label for="mile">Mile</label>
<p-inputnumber id="mile" v-model="value13" suffix=" mi"></p-inputnumber> <p-inputnumber id="mile" v-model="value13" suffix=" mi"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="percent">Percent</label> <label for="percent">Percent</label>
<p-inputnumber id="percent" v-model="value14" prefix="%"></p-inputnumber> <p-inputnumber id="percent" v-model="value14" prefix="%"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="expiry">Expiry</label> <label for="expiry">Expiry</label>
<p-inputnumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days"></p-inputnumber> <p-inputnumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="temperature">Temperature</label> <label for="temperature">Temperature</label>
<p-inputnumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputnumber> <p-inputnumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputnumber>
</div> </div>
</div> </div>
<h5>Buttons</h5> <h5>Buttons</h5>
<div class="p-grid p-fluid"> <div class="grid p-fluid">
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="stacked">Stacked</label> <label for="stacked">Stacked</label>
<p-inputnumber id="stacked" v-model="value17" show-buttons mode="currency" currency="USD"></p-inputnumber> <p-inputnumber id="stacked" v-model="value17" show-buttons mode="currency" currency="USD"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="horizontal">Horizontal with Step</label> <label for="horizontal">Horizontal with Step</label>
<p-inputnumber id="horizontal" v-model="value18" show-buttons button-layout="horizontal" :step="0.25" <p-inputnumber id="horizontal" v-model="value18" show-buttons button-layout="horizontal" :step="0.25"
decrement-button-class="p-button-danger" increment-button-class="p-button-success" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus" mode="currency" currency="EUR"></p-inputnumber> decrement-button-class="p-button-danger" increment-button-class="p-button-success" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus" mode="currency" currency="EUR"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="minmax-buttons">Min-Max Boundaries</label> <label for="minmax-buttons">Min-Max Boundaries</label>
<p-inputnumber id="minmax-buttons" v-model="value20" mode="decimal" show-buttons :min="0" :max="100"></p-inputnumber> <p-inputnumber id="minmax-buttons" v-model="value20" mode="decimal" show-buttons :min="0" :max="100"></p-inputnumber>
</div> </div>
</div> </div>
<div class="p-field p-col-12 p-md-3"> <div class="field col-12 md:col-3">
<label for="vertical" style="display: block">Vertical</label> <label for="vertical" style="display: block">Vertical</label>
<p-inputnumber id="vertical" v-model="value19" mode="decimal" show-buttons button-layout="vertical" style="width:4rem" <p-inputnumber id="vertical" v-model="value19" mode="decimal" show-buttons button-layout="vertical" style="width:4rem"
decrement-button-class="p-button-secondary" increment-button-class="p-button-secondary" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus"></p-inputnumber> decrement-button-class="p-button-secondary" increment-button-class="p-button-secondary" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus"></p-inputnumber>

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

@ -33,14 +33,14 @@
</span> </span>
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="p-field"> <div class="field">
<label for="username1">Username</label> <label for="username1">Username</label>
<InputText id="username1" type="username" aria-describedby="username1-help" /> <InputText id="username1" type="username" aria-describedby="username1-help" />
<small id="username1-help">Enter your username to reset your password.</small> <small id="username1-help">Enter your username to reset your password.</small>
</div> </div>
<h5>Invalid</h5> <h5>Invalid</h5>
<div class="p-field"> <div class="field">
<label for="username2">Username</label> <label for="username2">Username</label>
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" /> <InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
<small id="username2-help" class="p-error">Username is not available.</small> <small id="username2-help" class="p-error">Username is not available.</small>
@ -93,7 +93,7 @@ export default {
} }
} }
.p-field * { .field * {
display: block; display: block;
} }
</style> </style>

18
src/views/inputtext/InputTextDoc.vue
View File

@ -182,14 +182,14 @@ export default {
</span> </span>
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="p-field"> <div class="field">
<label for="username1">Username</label> <label for="username1">Username</label>
<InputText id="username1" type="username" aria-describedby="username1-help" /> <InputText id="username1" type="username" aria-describedby="username1-help" />
<small id="username1-help">Enter your username to reset your password.</small> <small id="username1-help">Enter your username to reset your password.</small>
</div> </div>
<h5>Invalid</h5> <h5>Invalid</h5>
<div class="p-field"> <div class="field">
<label for="username2">Username</label> <label for="username2">Username</label>
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" /> <InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
<small id="username2-help" class="p-error">Username is not available.</small> <small id="username2-help" class="p-error">Username is not available.</small>
@ -233,7 +233,7 @@ export default {
} }
} }
.p-field * { .field * {
display: block; display: block;
} }
</style>` </style>`
@ -266,14 +266,14 @@ export default {
</span> </span>
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="p-field"> <div class="field">
<label for="username1">Username</label> <label for="username1">Username</label>
<InputText id="username1" type="username" aria-describedby="username1-help" /> <InputText id="username1" type="username" aria-describedby="username1-help" />
<small id="username1-help">Enter your username to reset your password.</small> <small id="username1-help">Enter your username to reset your password.</small>
</div> </div>
<h5>Invalid</h5> <h5>Invalid</h5>
<div class="p-field"> <div class="field">
<label for="username2">Username</label> <label for="username2">Username</label>
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" /> <InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
<small id="username2-help" class="p-error">Username is not available.</small> <small id="username2-help" class="p-error">Username is not available.</small>
@ -319,7 +319,7 @@ export default {
} }
} }
.p-field * { .field * {
display: block; display: block;
} }
</style>` </style>`
@ -351,14 +351,14 @@ export default {
</span> </span>
<h5>Help Text</h5> <h5>Help Text</h5>
<div class="p-field"> <div class="field">
<label for="username1">Username</label> <label for="username1">Username</label>
<p-inputtext id="username1" type="username" aria-describedby="username1-help"></p-inputtext> <p-inputtext id="username1" type="username" aria-describedby="username1-help"></p-inputtext>
<small id="username1-help">Enter your username to reset your password.</small> <small id="username1-help">Enter your username to reset your password.</small>
</div> </div>
<h5>Invalid</h5> <h5>Invalid</h5>
<div class="p-field"> <div class="field">
<label for="username2">Username</label> <label for="username2">Username</label>
<p-inputtext id="username2" type="username" aria-describedby="username2-help" class="p-invalid"></p-inputtext> <p-inputtext id="username2" type="username" aria-describedby="username2-help" class="p-invalid"></p-inputtext>
<small id="username2-help" class="p-error">Username is not available.</small> <small id="username2-help" class="p-error">Username is not available.</small>
@ -409,7 +409,7 @@ export default {
margin-bottom: 0; margin-bottom: 0;
} }
.p-field * { .field * {
display: block; display: block;
} }
</style>` </style>`

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

@ -10,42 +10,42 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<div class="p-fluid p-grid"> <div class="p-fluid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" /> <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" /> <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" /> <Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" /> <Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" /> <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" /> <InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" /> :optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" /> <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" /> <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect> <TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" /> <Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" /> <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
</div> </div>
</div> </div>
@ -167,42 +167,42 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<div class="p-fluid p-grid"> <div class="p-fluid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" /> <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" /> <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" /> <Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" /> <Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" /> <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" /> <InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" /> :optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" /> <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" /> <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect> <TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" /> <Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" /> <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
</div> </div>
</div> </div>
@ -349,42 +349,42 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<div class="p-fluid p-grid"> <div class="p-fluid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" /> <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" /> <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" /> <Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" /> <Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" /> <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" /> <InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name" <CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" /> :optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" /> <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" /> <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect> <TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" /> <Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" /> <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
</div> </div>
</div> </div>
@ -538,42 +538,42 @@ export default {
<script src="./CountryService.js"><\\/script> <script src="./CountryService.js"><\\/script>
<script src="./NodeService.js"><\\/script>`, <script src="./NodeService.js"><\\/script>`,
content: `<div id="app"> content: `<div id="app">
<div class="p-fluid p-grid"> <div class="p-fluid grid">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-inputtext id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid"></p-inputtext> <p-inputtext id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid"></p-inputtext>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid"></p-autocomplete> <p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid"></p-autocomplete>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :show-icon="true"></p-calendar> <p-calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :show-icon="true"></p-calendar>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid"></p-chips> <p-chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid"></p-chips>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy" placeholder="InputMask" class="p-invalid"></p-inputmask> <p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy" placeholder="InputMask" class="p-invalid"></p-inputmask>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-inputnumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid"></p-inputnumber> <p-inputnumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid"></p-inputnumber>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-cascadeselect v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name" <p-cascadeselect v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name"
:option-group-children="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid"></p-cascadeselect> :option-group-children="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid"></p-cascadeselect>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-dropdown id="dropdown" v-model="value7" :options="cities" option-label="name" placeholder="Dropdown" class="p-invalid"></p-dropdown> <p-dropdown id="dropdown" v-model="value7" :options="cities" option-label="name" placeholder="Dropdown" class="p-invalid"></p-dropdown>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-multiselect id="multiselect" v-model="value8" :options="cities" option-label="name" placeholder="MultiSelect" class="p-invalid"></p-multiselect> <p-multiselect id="multiselect" v-model="value8" :options="cities" option-label="name" placeholder="MultiSelect" class="p-invalid"></p-multiselect>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-treeselect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></p-treeselect> <p-treeselect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></p-treeselect>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-password id="password" v-model="value10" placeholder="Password" class="p-invalid"></p-password> <p-password id="password" v-model="value10" placeholder="Password" class="p-invalid"></p-password>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<p-textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid"></p-textarea> <p-textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid"></p-textarea>
</div> </div>
</div> </div>

34
src/views/knob/KnobDemo.vue
View File

@ -10,41 +10,41 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<div class="p-grid p-formgrid p-text-center"> <div class="grid formgrid text-center">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Basic</h5> <h5>Basic</h5>
<Knob v-model="value1" /> <Knob v-model="value1" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Readonly</h5> <h5>Readonly</h5>
<Knob v-model="value2" readonly /> <Knob v-model="value2" readonly />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Disabled</h5> <h5>Disabled</h5>
<Knob v-model="value3" disabled /> <Knob v-model="value3" disabled />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Min/Max</h5> <h5 class="mt-3">Min/Max</h5>
<Knob v-model="value4" :min="-50" :max="50" /> <Knob v-model="value4" :min="-50" :max="50" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Step</h5> <h5 class="mt-3">Step</h5>
<Knob v-model="value5" :step="10" /> <Knob v-model="value5" :step="10" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Template</h5> <h5 class="mt-3">Template</h5>
<Knob v-model="value6" valueTemplate="{value}%" /> <Knob v-model="value6" valueTemplate="{value}%" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Stroke</h5> <h5 class="mt-3">Stroke</h5>
<Knob v-model="value7" :strokeWidth="5" /> <Knob v-model="value7" :strokeWidth="5" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Size</h5> <h5 class="mt-3">Size</h5>
<Knob v-model="value8" :size="200"/> <Knob v-model="value8" :size="200"/>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Color</h5> <h5 class="mt-3">Color</h5>
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" /> <Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
</div> </div>
</div> </div>

100
src/views/knob/KnobDoc.vue
View File

@ -222,41 +222,41 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<div class="p-grid p-formgrid p-text-center"> <div class="grid formgrid text-center">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Basic</h5> <h5>Basic</h5>
<Knob v-model="value1" /> <Knob v-model="value1" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Readonly</h5> <h5>Readonly</h5>
<Knob v-model="value2" readonly /> <Knob v-model="value2" readonly />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Disabled</h5> <h5>Disabled</h5>
<Knob v-model="value3" disabled /> <Knob v-model="value3" disabled />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Min/Max</h5> <h5 class="mt-3">Min/Max</h5>
<Knob v-model="value4" :min="-50" :max="50" /> <Knob v-model="value4" :min="-50" :max="50" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Step</h5> <h5 class="mt-3">Step</h5>
<Knob v-model="value5" :step="10" /> <Knob v-model="value5" :step="10" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Template</h5> <h5 class="mt-3">Template</h5>
<Knob v-model="value6" valueTemplate="{value}%" /> <Knob v-model="value6" valueTemplate="{value}%" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Stroke</h5> <h5 class="mt-3">Stroke</h5>
<Knob v-model="value7" :strokeWidth="5" /> <Knob v-model="value7" :strokeWidth="5" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Size</h5> <h5 class="mt-3">Size</h5>
<Knob v-model="value8" :size="200"/> <Knob v-model="value8" :size="200"/>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Color</h5> <h5 class="mt-3">Color</h5>
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" /> <Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
</div> </div>
</div> </div>
@ -287,41 +287,41 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<div class="p-grid p-formgrid p-text-center"> <div class="grid formgrid text-center">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Basic</h5> <h5>Basic</h5>
<Knob v-model="value1" /> <Knob v-model="value1" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Readonly</h5> <h5>Readonly</h5>
<Knob v-model="value2" readonly /> <Knob v-model="value2" readonly />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Disabled</h5> <h5>Disabled</h5>
<Knob v-model="value3" disabled /> <Knob v-model="value3" disabled />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Min/Max</h5> <h5 class="mt-3">Min/Max</h5>
<Knob v-model="value4" :min="-50" :max="50" /> <Knob v-model="value4" :min="-50" :max="50" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Step</h5> <h5 class="mt-3">Step</h5>
<Knob v-model="value5" :step="10" /> <Knob v-model="value5" :step="10" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Template</h5> <h5 class="mt-3">Template</h5>
<Knob v-model="value6" valueTemplate="{value}%" /> <Knob v-model="value6" valueTemplate="{value}%" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Stroke</h5> <h5 class="mt-3">Stroke</h5>
<Knob v-model="value7" :strokeWidth="5" /> <Knob v-model="value7" :strokeWidth="5" />
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Size</h5> <h5 class="mt-3">Size</h5>
<Knob v-model="value8" :size="200"/> <Knob v-model="value8" :size="200"/>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Color</h5> <h5 class="mt-3">Color</h5>
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" /> <Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
</div> </div>
</div> </div>
@ -352,41 +352,41 @@ export default {
tabName: 'Browser Source', tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/knob/knob.min.js"><\\/script>`, imports: `<script src="https://unpkg.com/primevue@^3/knob/knob.min.js"><\\/script>`,
content: `<div id="app"> content: `<div id="app">
<div class="p-grid p-formgrid p-text-center"> <div class="grid formgrid text-center">
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Basic</h5> <h5>Basic</h5>
<p-knob v-model="value1"></p-knob> <p-knob v-model="value1"></p-knob>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Readonly</h5> <h5>Readonly</h5>
<p-knob v-model="value2" readonly></p-knob> <p-knob v-model="value2" readonly></p-knob>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5>Disabled</h5> <h5>Disabled</h5>
<p-knob v-model="value3" disabled></p-knob> <p-knob v-model="value3" disabled></p-knob>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Min/Max</h5> <h5 class="mt-3">Min/Max</h5>
<p-knob v-model="value4" :min="-50" :max="50"></p-knob> <p-knob v-model="value4" :min="-50" :max="50"></p-knob>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Step</h5> <h5 class="mt-3">Step</h5>
<p-knob v-model="value5" :step="10"></p-knob> <p-knob v-model="value5" :step="10"></p-knob>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Template</h5> <h5 class="mt-3">Template</h5>
<p-knob v-model="value6" value-template="{value}%"></p-knob> <p-knob v-model="value6" value-template="{value}%"></p-knob>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Stroke</h5> <h5 class="mt-3">Stroke</h5>
<p-knob v-model="value7" :stroke-width="5"></p-knob> <p-knob v-model="value7" :stroke-width="5"></p-knob>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Size</h5> <h5 class="mt-3">Size</h5>
<p-knob v-model="value8" :size="200"></p-knob> <p-knob v-model="value8" :size="200"></p-knob>
</div> </div>
<div class="p-field p-col-12 p-md-4"> <div class="field col-12 md:col-4">
<h5 class="p-mt-3">Color</h5> <h5 class="mt-3">Color</h5>
<p-knob v-model="value9" value-color="SlateGray" range-color="MediumTurquoise"></p-knob> <p-knob v-model="value9" value-color="SlateGray" range-color="MediumTurquoise"></p-knob>
</div> </div>
</div> </div>

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

@ -16,7 +16,7 @@
<h5>Grouped</h5> <h5>Grouped</h5>
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px"> <Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>

18
src/views/listbox/ListboxDoc.vue
View File

@ -389,8 +389,8 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px"> <Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
</template> </template>
@ -400,7 +400,7 @@ export default {
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search"> <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
<div>{{slotProps.option.name}}</div> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>
@ -483,8 +483,8 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px"> <Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
</template> </template>
@ -494,7 +494,7 @@ export default {
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search"> <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
<div>{{slotProps.option.name}}</div> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>
@ -581,8 +581,8 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<p-listbox v-model="selectedGroupedCity" :options="groupedCities" option-label="label" style="width:15rem" option-group-label="label" option-group-children="items" list-style="max-height:250px"> <p-listbox v-model="selectedGroupedCity" :options="groupedCities" option-label="label" style="width:15rem" option-group-label="label" option-group-children="items" list-style="max-height:250px">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
</template> </template>
@ -592,7 +592,7 @@ export default {
<p-listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" option-label="name" list-style="max-height:250px" style="width:15rem" filter-placeholder="Search"> <p-listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" option-label="name" list-style="max-height:250px" style="width:15rem" filter-placeholder="Search">
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
<div>{{slotProps.option.name}}</div> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>

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

@ -1,5 +1,5 @@
<template> <template>
<span v-if="showEditor" class="p-d-flex p-jc-end"> <span v-if="showEditor" class="flex justify-content-end">
<SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" v-show="false"/> <SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" v-show="false"/>
</span> </span>
</template> </template>
@ -301,7 +301,6 @@ export default {
} }
} }
} }
return { return {
files: { files: {
@ -418,7 +417,7 @@ export default {
<!-- PrimeVue --> <!-- PrimeVue -->
<link href="https://unpkg.com/primevue@^3/resources/themes/lara-light-indigo/theme.css" rel="stylesheet" /> <link href="https://unpkg.com/primevue@^3/resources/themes/lara-light-indigo/theme.css" rel="stylesheet" />
<link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" /> <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" /> <link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" /> <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
<!-- Dependencies --> <!-- Dependencies -->

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

@ -12,7 +12,7 @@
<div class="card"> <div class="card">
<Menubar :model="items"> <Menubar :model="items">
<template #start> <template #start>
<img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2"> <img alt="logo" src="../../assets/images/logo.svg" height="40" class="mr-2">
</template> </template>
<template #end> <template #end>
<InputText placeholder="Search" type="text" /> <InputText placeholder="Search" type="text" />
@ -33,132 +33,129 @@ export default {
return { return {
items: [ items: [
{ {
label:'File', label:'File',
icon:'pi pi-fw pi-file', icon:'pi pi-fw pi-file',
items:[ items:[
{ {
label:'New', label:'New',
icon:'pi pi-fw pi-plus', icon:'pi pi-fw pi-plus',
items:[ items:[
{ {
label:'Bookmark', label:'Bookmark',
icon:'pi pi-fw pi-bookmark' icon:'pi pi-fw pi-bookmark'
}, },
{ {
label:'Video', label:'Video',
icon:'pi pi-fw pi-video' icon:'pi pi-fw pi-video'
}, }
]
] },
}, {
{ label:'Delete',
label:'Delete', icon:'pi pi-fw pi-trash'
icon:'pi pi-fw pi-trash' },
}, {
{ separator:true
separator:true },
}, {
{ label:'Export',
label:'Export', icon:'pi pi-fw pi-external-link'
icon:'pi pi-fw pi-external-link' }
} ]
]
}, },
{ {
label:'Edit', label:'Edit',
icon:'pi pi-fw pi-pencil', icon:'pi pi-fw pi-pencil',
items:[ items:[
{ {
label:'Left', label:'Left',
icon:'pi pi-fw pi-align-left' icon:'pi pi-fw pi-align-left'
}, },
{ {
label:'Right', label:'Right',
icon:'pi pi-fw pi-align-right' icon:'pi pi-fw pi-align-right'
}, },
{ {
label:'Center', label:'Center',
icon:'pi pi-fw pi-align-center' icon:'pi pi-fw pi-align-center'
}, },
{ {
label:'Justify', label:'Justify',
icon:'pi pi-fw pi-align-justify' icon:'pi pi-fw pi-align-justify'
}, }
]
]
}, },
{ {
label:'Users', label:'Users',
icon:'pi pi-fw pi-user', icon:'pi pi-fw pi-user',
items:[ items:[
{ {
label:'New', label:'New',
icon:'pi pi-fw pi-user-plus', icon:'pi pi-fw pi-user-plus',
}, },
{ {
label:'Delete', label:'Delete',
icon:'pi pi-fw pi-user-minus', icon:'pi pi-fw pi-user-minus',
}, },
{ {
label:'Search', label:'Search',
icon:'pi pi-fw pi-users', icon:'pi pi-fw pi-users',
items:[ items:[
{ {
label:'Filter', label:'Filter',
icon:'pi pi-fw pi-filter', icon:'pi pi-fw pi-filter',
items:[ items:[
{ {
label:'Print', label:'Print',
icon:'pi pi-fw pi-print' icon:'pi pi-fw pi-print'
} }
] ]
}, },
{ {
icon:'pi pi-fw pi-bars', icon:'pi pi-fw pi-bars',
label:'List' label:'List'
} }
] ]
} }
] ]
}, },
{ {
label:'Events', label:'Events',
icon:'pi pi-fw pi-calendar', icon:'pi pi-fw pi-calendar',
items:[ items:[
{ {
label:'Edit', label:'Edit',
icon:'pi pi-fw pi-pencil', icon:'pi pi-fw pi-pencil',
items:[ items:[
{ {
label:'Save', label:'Save',
icon:'pi pi-fw pi-calendar-plus' icon:'pi pi-fw pi-calendar-plus'
}, },
{ {
label:'Delete', label:'Delete',
icon:'pi pi-fw pi-calendar-minus' icon:'pi pi-fw pi-calendar-minus'
}, }
]
] },
}, {
{ label:'Archieve',
label:'Archieve', icon:'pi pi-fw pi-calendar-times',
icon:'pi pi-fw pi-calendar-times', items:[
items:[ {
{ label:'Remove',
label:'Remove', icon:'pi pi-fw pi-calendar-minus'
icon:'pi pi-fw pi-calendar-minus' }
} ]
] }
} ]
]
}, },
{ {
label:'Quit', label:'Quit',
icon:'pi pi-fw pi-power-off' icon:'pi pi-fw pi-power-off'
} }
] ]
} }
}, },
components: { components: {

6
src/views/menubar/MenubarDoc.vue
View File

@ -305,7 +305,7 @@ export default {
<div> <div>
<Menubar :model="items"> <Menubar :model="items">
<template #start> <template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2"> <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
</template> </template>
<template #end> <template #end>
<InputText placeholder="Search" type="text" /> <InputText placeholder="Search" type="text" />
@ -459,7 +459,7 @@ export default {
<div> <div>
<Menubar :model="items"> <Menubar :model="items">
<template #start> <template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2"> <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
</template> </template>
<template #end> <template #end>
<InputText placeholder="Search" type="text" /> <InputText placeholder="Search" type="text" />
@ -610,7 +610,7 @@ export default {
content: `<div id="app"> content: `<div id="app">
<p-menubar :model="items"> <p-menubar :model="items">
<template #start> <template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2"> <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
</template> </template>
<template #end> <template #end>
<p-inputtext placeholder="Search" type="text"></p-inputtext> <p-inputtext placeholder="Search" type="text"></p-inputtext>

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

@ -27,17 +27,17 @@
<h5>Inline Messages</h5> <h5>Inline Messages</h5>
<p>Message component is used to display inline messages mostly within forms.</p> <p>Message component is used to display inline messages mostly within forms.</p>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="info">Message Content</InlineMessage> <InlineMessage severity="info">Message Content</InlineMessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="success">Message Content</InlineMessage> <InlineMessage severity="success">Message Content</InlineMessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="warn">Message Content</InlineMessage> <InlineMessage severity="warn">Message Content</InlineMessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="error">Message Content</InlineMessage> <InlineMessage severity="error">Message Content</InlineMessage>
</div> </div>
</div> </div>
@ -46,12 +46,12 @@
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message> <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
<h5>Validation Message</h5> <h5>Validation Message</h5>
<div class="p-formgroup-inline" style="margin-bottom:.5rem"> <div class="formgroup-inline" style="margin-bottom:.5rem">
<label for="username" class="p-sr-only">Username</label> <label for="username" class="p-sr-only">Username</label>
<InputText id="username" placeholder="Username" class="p-invalid" /> <InputText id="username" placeholder="Username" class="p-invalid" />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<label for="email" class="p-sr-only">email</label> <label for="email" class="p-sr-only">email</label>
<InputText id="email" placeholder="Email" class="p-invalid" /> <InputText id="email" placeholder="Email" class="p-invalid" />
<InlineMessage /> <InlineMessage />

42
src/views/message/MessageDoc.vue
View File

@ -286,17 +286,17 @@ export default {
<h5>Inline Messages</h5> <h5>Inline Messages</h5>
<p>Message component is used to display inline messages mostly within forms.</p> <p>Message component is used to display inline messages mostly within forms.</p>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="info">Message Content</InlineMessage> <InlineMessage severity="info">Message Content</InlineMessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="success">Message Content</InlineMessage> <InlineMessage severity="success">Message Content</InlineMessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="warn">Message Content</InlineMessage> <InlineMessage severity="warn">Message Content</InlineMessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="error">Message Content</InlineMessage> <InlineMessage severity="error">Message Content</InlineMessage>
</div> </div>
</div> </div>
@ -305,12 +305,12 @@ export default {
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message> <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
<h5>Validation Message</h5> <h5>Validation Message</h5>
<div class="p-formgroup-inline" style="margin-bottom:.5rem"> <div class="formgroup-inline" style="margin-bottom:.5rem">
<label for="username" class="p-sr-only">Username</label> <label for="username" class="p-sr-only">Username</label>
<InputText id="username" placeholder="Username" class="p-invalid" /> <InputText id="username" placeholder="Username" class="p-invalid" />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<label for="email" class="p-sr-only">email</label> <label for="email" class="p-sr-only">email</label>
<InputText id="email" placeholder="Email" class="p-invalid" /> <InputText id="email" placeholder="Email" class="p-invalid" />
<InlineMessage /> <InlineMessage />
@ -367,17 +367,17 @@ button.p-button {
<h5>Inline Messages</h5> <h5>Inline Messages</h5>
<p>Message component is used to display inline messages mostly within forms.</p> <p>Message component is used to display inline messages mostly within forms.</p>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="info">Message Content</InlineMessage> <InlineMessage severity="info">Message Content</InlineMessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="success">Message Content</InlineMessage> <InlineMessage severity="success">Message Content</InlineMessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="warn">Message Content</InlineMessage> <InlineMessage severity="warn">Message Content</InlineMessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<InlineMessage severity="error">Message Content</InlineMessage> <InlineMessage severity="error">Message Content</InlineMessage>
</div> </div>
</div> </div>
@ -386,12 +386,12 @@ button.p-button {
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message> <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
<h5>Validation Message</h5> <h5>Validation Message</h5>
<div class="p-formgroup-inline" style="margin-bottom:.5rem"> <div class="formgroup-inline" style="margin-bottom:.5rem">
<label for="username" class="p-sr-only">Username</label> <label for="username" class="p-sr-only">Username</label>
<InputText id="username" placeholder="Username" class="p-invalid" /> <InputText id="username" placeholder="Username" class="p-invalid" />
<InlineMessage>Username is required</InlineMessage> <InlineMessage>Username is required</InlineMessage>
</div> </div>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<label for="email" class="p-sr-only">email</label> <label for="email" class="p-sr-only">email</label>
<InputText id="email" placeholder="Email" class="p-invalid" /> <InputText id="email" placeholder="Email" class="p-invalid" />
<InlineMessage /> <InlineMessage />
@ -447,17 +447,17 @@ button.p-button {
<h5>Inline Messages</h5> <h5>Inline Messages</h5>
<p>Message component is used to display inline messages mostly within forms.</p> <p>Message component is used to display inline messages mostly within forms.</p>
<div class="p-grid"> <div class="grid">
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<p-inlinemessage severity="info">Message Content</p-inlinemessage> <p-inlinemessage severity="info">Message Content</p-inlinemessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<p-inlinemessage severity="success">Message Content</p-inlinemessage> <p-inlinemessage severity="success">Message Content</p-inlinemessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<p-inlinemessage severity="warn">Message Content</p-inlinemessage> <p-inlinemessage severity="warn">Message Content</p-inlinemessage>
</div> </div>
<div class="p-col-12 p-md-3"> <div class="col-12 md:col-3">
<p-inlinemessage severity="error">Message Content</p-inlinemessage> <p-inlinemessage severity="error">Message Content</p-inlinemessage>
</div> </div>
</div> </div>
@ -466,12 +466,12 @@ button.p-button {
<p-message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</p-message> <p-message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</p-message>
<h5>Validation Message</h5> <h5>Validation Message</h5>
<div class="p-formgroup-inline" style="margin-bottom:.5rem"> <div class="formgroup-inline" style="margin-bottom:.5rem">
<label for="username" class="p-sr-only">Username</label> <label for="username" class="p-sr-only">Username</label>
<p-inputtext id="username" placeholder="Username" class="p-invalid"></p-inputtext> <p-inputtext id="username" placeholder="Username" class="p-invalid"></p-inputtext>
<p-inlinemessage>Username is required</p-inlinemessage> <p-inlinemessage>Username is required</p-inlinemessage>
</div> </div>
<div class="p-formgroup-inline"> <div class="formgroup-inline">
<label for="email" class="p-sr-only">email</label> <label for="email" class="p-sr-only">email</label>
<p-inputtext id="email" placeholder="Email" class="p-invalid"></p-inputtext> <p-inputtext id="email" placeholder="Email" class="p-invalid"></p-inputtext>
<p-inlinemessage></p-inlinemessage> <p-inlinemessage></p-inlinemessage>

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

@ -19,7 +19,7 @@
<h5>Grouped</h5> <h5>Grouped</h5>
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities"> <MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>

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

@ -552,8 +552,8 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities"> <MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
</template> </template>
@ -563,7 +563,7 @@ export default {
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom"> <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
<template #value="slotProps"> <template #value="slotProps">
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code"> <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
<div>{{option.name}}</div> <div>{{option.name}}</div>
</div> </div>
<template v-if="!slotProps.value || slotProps.value.length === 0"> <template v-if="!slotProps.value || slotProps.value.length === 0">
@ -572,7 +572,7 @@ export default {
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
<div>{{slotProps.option.name}}</div> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>
@ -703,8 +703,8 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities"> <MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
</template> </template>
@ -714,7 +714,7 @@ export default {
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom"> <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
<template #value="slotProps"> <template #value="slotProps">
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code"> <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
<div>{{option.name}}</div> <div>{{option.name}}</div>
</div> </div>
<template v-if="!slotProps.value || slotProps.value.length === 0"> <template v-if="!slotProps.value || slotProps.value.length === 0">
@ -723,7 +723,7 @@ export default {
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
<div>{{slotProps.option.name}}</div> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>
@ -857,8 +857,8 @@ export default {
<h5>Grouped</h5> <h5>Grouped</h5>
<p-multiselect v-model="selectedGroupedCities" :options="groupedCities" option-label="label" option-group-label="label" option-group-children="items" placeholder="Select Cities"> <p-multiselect v-model="selectedGroupedCities" :options="groupedCities" option-label="label" option-group-label="label" option-group-children="items" placeholder="Select Cities">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="p-d-flex p-ai-center country-item"> <div class="flex align-items-center country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
<div>{{slotProps.option.label}}</div> <div>{{slotProps.option.label}}</div>
</div> </div>
</template> </template>
@ -868,7 +868,7 @@ export default {
<p-multiselect v-model="selectedCountries" :options="countries" option-label="name" placeholder="Select Countries" :filter="true" class="multiselect-custom"> <p-multiselect v-model="selectedCountries" :options="countries" option-label="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
<template #value="slotProps"> <template #value="slotProps">
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code"> <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
<div>{{option.name}}</div> <div>{{option.name}}</div>
</div> </div>
<template v-if="!slotProps.value || slotProps.value.length === 0"> <template v-if="!slotProps.value || slotProps.value.length === 0">
@ -877,7 +877,7 @@ export default {
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
<div>{{slotProps.option.name}}</div> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>

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

@ -20,12 +20,12 @@
<img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
</div> </div>
<div class="product-list-detail"> <div class="product-list-detail">
<h6 class="p-mb-2">{{slotProps.item.name}}</h6> <h6 class="mb-2">{{slotProps.item.name}}</h6>
<i class="pi pi-tag product-category-icon"></i> <i class="pi pi-tag product-category-icon"></i>
<span class="product-category">{{slotProps.item.category}}</span> <span class="product-category">{{slotProps.item.category}}</span>
</div> </div>
<div class="product-list-action"> <div class="product-list-action">
<h6 class="p-mb-2">${{slotProps.item.price}}</h6> <h6 class="mb-2">${{slotProps.item.price}}</h6>
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
</div> </div>
</div> </div>

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

@ -243,12 +243,12 @@ export default {
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
</div> </div>
<div class="product-list-detail"> <div class="product-list-detail">
<h6 class="p-mb-2">{{slotProps.item.name}}</h6> <h6 class="mb-2">{{slotProps.item.name}}</h6>
<i class="pi pi-tag product-category-icon"></i> <i class="pi pi-tag product-category-icon"></i>
<span class="product-category">{{slotProps.item.category}}</span> <span class="product-category">{{slotProps.item.category}}</span>
</div> </div>
<div class="product-list-action"> <div class="product-list-action">
<h6 class="p-mb-2">\${{slotProps.item.price}}</h6> <h6 class="mb-2">\${{slotProps.item.price}}</h6>
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
</div> </div>
</div> </div>
@ -350,12 +350,12 @@ export default {
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
</div> </div>
<div class="product-list-detail"> <div class="product-list-detail">
<h6 class="p-mb-2">{{slotProps.item.name}}</h6> <h6 class="mb-2">{{slotProps.item.name}}</h6>
<i class="pi pi-tag product-category-icon"></i> <i class="pi pi-tag product-category-icon"></i>
<span class="product-category">{{slotProps.item.category}}</span> <span class="product-category">{{slotProps.item.category}}</span>
</div> </div>
<div class="product-list-action"> <div class="product-list-action">
<h6 class="p-mb-2">\${{slotProps.item.price}}</h6> <h6 class="mb-2">\${{slotProps.item.price}}</h6>
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
</div> </div>
</div> </div>
@ -458,12 +458,12 @@ export default {
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" /> <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
</div> </div>
<div class="product-list-detail"> <div class="product-list-detail">
<h6 class="p-mb-2">{{slotProps.item.name}}</h6> <h6 class="mb-2">{{slotProps.item.name}}</h6>
<i class="pi pi-tag product-category-icon"></i> <i class="pi pi-tag product-category-icon"></i>
<span class="product-category">{{slotProps.item.category}}</span> <span class="product-category">{{slotProps.item.category}}</span>
</div> </div>
<div class="product-list-action"> <div class="product-list-action">
<h6 class="p-mb-2">\${{slotProps.item.price}}</h6> <h6 class="mb-2">\${{slotProps.item.price}}</h6>
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span> <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
</div> </div>
</div> </div>

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