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

Merge branch 'master' into resolves-fix

pull/3430/head
Michał Kleszczyński 2022-12-21 16:46:53 +01:00
parent f57c90a743 456c69eba0
commit 2c53c1536f
177 changed files with 24115 additions and 26005 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
.github/ISSUE_TEMPLATE/bug_report.yml vendored Normal file
View File

@ -0,0 +1,98 @@
name: Bug report
description: Create a report to help us improve
title: "Component Name: Issue Title"
labels: "Status: Needs Triage"
body:
- type: markdown
attributes:
# yamllint disable rule:line-length
value: >
### There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider *PrimeVue PRO Support* where support is provided within 4 business hours
# yamllint enable rule:line-length
- type: textarea
id: description
attributes:
label: Describe the bug
description: A clear and concise description of what the bug is.
validations:
required: true
- type: input
id: reproducer
attributes:
label: Reproducer
placeholder: https://codesandbox.io/s/primevue-3-issue-template-ip3vm
description: |
Please fork one of the issue template
[PrimeVue 3 Issue Template](https://codesandbox.io/s/primevue-3-issue-template-ip3vm)
[PrimeVue TypeScript Issue Template](https://codesandbox.io/s/primevue-3-typescript-issue-template-z1f6e2)
[PrimeVue 2 Issue Template](https://codesandbox.io/s/primevue-2-issue-template-dw7jd7)
and create a case demonstrating your bug report. Issues **without** a CodeSandbox have much less possibility to be reviewed.
validations:
required: true
- type: input
id: pr-version
attributes:
label: PrimeVue version
placeholder: x.x.x
validations:
required: true
- type: dropdown
id: vue-version
attributes:
label: Vue version
multiple: false
options:
- 3.x
- 2.x
validations:
required: true
- type: dropdown
id: language
attributes:
label: Language
multiple: false
options:
- TypeScript
- ES5
- ES6
- ALL
validations:
required: true
- type: dropdown
id: engine
attributes:
label: Build / Runtime
multiple: false
options:
- Vue CLI App
- TypeScript
- Nuxt
- Vite
validations:
required: true
- type: input
id: browsers
attributes:
label: Browser(s)
description: List specific browser(s) the problem occurs on or leave blank if ALL browsers
placeholder: >
e.g. Safari 15, iOS 15.4, Chrome 90
- type: textarea
id: reproduce-steps
attributes:
label: Steps to reproduce the behavior
description: A clear and concise description of how to make the issue happen.
placeholder: >
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
validations:
required: false
- type: textarea
id: expected-behavior
attributes:
label: Expected behavior
description: A clear and concise description of what you expected to happen.
validations:
required: false

4
.github/ISSUE_TEMPLATE/config.yml vendored Normal file
View File

@ -0,0 +1,4 @@
contact_links:
- name: Support
url: https://www.primefaces.org/primevue/support/
about: Professional support for the open source innovation.

39
.github/ISSUE_TEMPLATE/feature_request.yml vendored Normal file
View File

@ -0,0 +1,39 @@
name: Feature request
description: Suggest an idea for this project
title: "Component Name: Issue Title"
labels: ['Type: New Feature', 'Status: Discussion']
body:
- type: textarea
id: description
attributes:
label: Describe the feature you would like to see added
validations:
required: true
- type: textarea
id: problem-related
attributes:
label: Is your feature request related to a problem?
description: A clear and concise description of what the problem is. Ex. I'm always frustrated when?
validations:
required: false
- type: textarea
id: solution
attributes:
label: Describe the solution you'd like
description: A clear and concise description of what you want to happen.
validations:
required: false
- type: textarea
id: alternatives
attributes:
label: Describe alternatives you have considered
description: A clear and concise description of any alternative solutions or features you've considered.
validations:
required: false
- type: textarea
id: additional-context
attributes:
label: Additional context
description: Add any other context or screenshots about the feature request here.
validations:
required: false

5
.github/PULL_REQUEST_TEMPLATE.md vendored Normal file
View File

@ -0,0 +1,5 @@
###Defect Fixes
When submitting a PR, please also create an issue documenting the error.
###Feature Requests
Due to company policy, we are unable to accept feature request PRs with significant changes as such cases has to be implemented by our team following our own processes.

22
.github/workflows/issue-inactive-checker.yml vendored Normal file
View File

@ -0,0 +1,22 @@
name: Issue Inactive Checker
on:
schedule:
- cron: "0 13 * * 1" # Every Monday at 1PM UTC (9AM EST)
permissions:
contents: read
jobs:
issue-close-require:
permissions:
issues: write
pull-requests: write
runs-on: ubuntu-latest
steps:
- name: cannot replicate
uses: actions-cool/issues-helper@v3
with:
actions: "close-issues"
labels: "Resolution: Cannot Replicate"
inactive-day: 20

25
.github/workflows/issue-labeled.yml vendored Normal file
View File

@ -0,0 +1,25 @@
name: Issue Labeled
on:
issues:
types: [labeled]
permissions:
contents: read
jobs:
issue-labeled:
permissions:
issues: write # for actions-cool/issues-helper to update issues
pull-requests: write # for actions-cool/issues-helper to update PRs
runs-on: ubuntu-latest
steps:
- name: Cannot Replicate
if: "${{ github.event.label.name == 'Resolution: Cannot Replicate'}}"
uses: actions-cool/issues-helper@v3
with:
actions: 'create-comment'
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ github.event.issue.number }}
body: |
We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.

32
.github/workflows/nightly.yml vendored Normal file
View File

@ -0,0 +1,32 @@
name: Daily Build
on:
schedule:
- cron: '0 6 * * *'
permissions:
contents: read
jobs:
nightly:
if: github.repository == 'primefaces/primevue' && github.ref == 'refs/heads/master'
runs-on: ubuntu-latest
name: Node ${{ matrix.node-version }}
strategy:
matrix:
node-version: [16.x, 18.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: Build
run: |
npm install
npm run build:lib

49
.github/workflows/node.js.yml vendored Normal file
View File

@ -0,0 +1,49 @@
name: NodeJS CI
on:
push:
branches: [master]
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x, 18.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: Build
run: |
npm install
- name: Lint Check
if: ${{ success() }}
run: |
npm run format:check
- name: Code Format
if: ${{ success() }}
run: |
npm run format:check
- name: Security Check
if: ${{ success() }}
run: |
npm run security:check
- name: Test
if: ${{ success() }}
run: |
npm run test:unit

71
.github/workflows/pr-checker.yml vendored Normal file
View File

@ -0,0 +1,71 @@
name: Pr Checker
on:
pull_request:
types: [edited, synchronize, opened, reopened]
permissions:
contents: read
pull-requests: write
jobs:
pr-open-check:
permissions:
issues: write
pull-requests: write
runs-on: ubuntu-latest
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
steps:
- name: Verify Linked Issue
uses: hattan/verify-linked-issue-action@v1.1.5
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
message: 'Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please [manually link to an issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#manually-linking-a-pull-request-or-branch-to-an-issue-using-the-issue-sidebar) or mention it in the description using #<issue_id>.'
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'npm'
- name: Install packages
run: |
npm install
- name: Code Format
id: codeFormat
run: |
npm run format:check
- name: Unit Test
id: unitTest
run: |
npm run test:unit
- name: Add Code Format Fail Comment
if: always() && steps.codeFormat.outcome == 'failure'
uses: thollander/actions-comment-pull-request@v1
with:
message: |
Thanks a lot for your contribution! But, PR does not seem to fit our code format standards. Please run the 'npm run format' command and commit the changes.
- name: Add Unit Test Fail Comment
if: always() && steps.unitTest.outcome == 'failure'
uses: thollander/actions-comment-pull-request@v1
with:
message: |
Thanks a lot for your contribution! But, Unit tests failed. You can check the unit tests with the command 'npm run test:unit' and commit the changes.
- name: Add Label
if: ${{ failure() }}
uses: actions-ecosystem/action-add-labels@v1
with:
labels: 'Resolution: Needs Revision'
- name: Remove Label
uses: actions-ecosystem/action-remove-labels@v1
if: ${{ success() }}
with:
labels: 'Resolution: Needs Revision'

4
.prettierignore
View File

@ -2,8 +2,10 @@
build build
coverage coverage
dist dist
out
public public
styles styles
node_modules node_modules
.vscode .vscode
dist
.nuxt
.output

6
api-generator/build-api.js
View File

@ -17,6 +17,7 @@ const fileModules = {},
veturAttributes = {}; veturAttributes = {};
const files = fs.readdirSync(componentPath); const files = fs.readdirSync(componentPath);
files.forEach((file) => { files.forEach((file) => {
const { name } = path.parse(file); const { name } = path.parse(file);
@ -123,11 +124,13 @@ const createWebTypes = (component) => {
const createVeturTags = (component) => { const createVeturTags = (component) => {
const attributes = []; const attributes = [];
if (component.props) { if (component.props) {
component.props.forEach((comp) => { component.props.forEach((comp) => {
attributes.push(comp.name); attributes.push(comp.name);
}); });
} }
if (attributes.length > 0) { if (attributes.length > 0) {
veturTags[component.name] = { veturTags[component.name] = {
description: component.description, description: component.description,
@ -154,10 +157,13 @@ Object.keys(fileModules).forEach((p) => {
}); });
const webTypesJson = JSON.stringify(webTypes, null, 2); const webTypesJson = JSON.stringify(webTypes, null, 2);
fs.writeFileSync(path.resolve(distDir, 'web-types.json'), webTypesJson); fs.writeFileSync(path.resolve(distDir, 'web-types.json'), webTypesJson);
const veturTagsJson = JSON.stringify(veturTags, null, 2); const veturTagsJson = JSON.stringify(veturTags, null, 2);
fs.writeFileSync(path.resolve(distDir, 'vetur-tags.json'), veturTagsJson); fs.writeFileSync(path.resolve(distDir, 'vetur-tags.json'), veturTagsJson);
const veturAttributesJson = JSON.stringify(veturAttributes, null, 2); const veturAttributesJson = JSON.stringify(veturAttributes, null, 2);
fs.writeFileSync(path.resolve(distDir, 'vetur-attributes.json'), veturAttributesJson); fs.writeFileSync(path.resolve(distDir, 'vetur-attributes.json'), veturAttributesJson);

7
assets/styles/landing/_designer.scss
View File

@ -86,13 +86,6 @@
box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0); box-shadow: 0 0 0 2px var(--surface-ground), 0 0 0 4px var(--dd-primary), 0 1px 2px 0 rgba(0, 0, 0, 1.0);
} }
} }
.p-listbox {
.p-listbox-list .p-listbox-item.p-highlight {
background-color: transparent;
box-shadow: inset 0 0 0 0.15rem var(--dd-primary);
}
}
.p-inputtext, .p-button, .p-listbox-item, .p-slider { .p-inputtext, .p-button, .p-listbox-item, .p-slider {
transition: all .5s; transition: all .5s;

5
components/badgedirective/BadgeDirective.js
View File

@ -1,8 +1,7 @@
import { DomHandler } from 'primevue/utils'; import { DomHandler, UniqueComponentId } from 'primevue/utils';
import { UniqueComponentId } from 'primevue/utils';
const BadgeDirective = { const BadgeDirective = {
beforeMount(el, options) { mounted(el, options) {
const id = UniqueComponentId() + '_badge'; const id = UniqueComponentId() + '_badge';
el.$_pbadgeId = id; el.$_pbadgeId = id;

25
components/carousel/Carousel.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :id="id" :class="['p-carousel p-component', { 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }]" role="region"> <div :class="['p-carousel p-component', { 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }]" role="region">
<div v-if="$slots.header" class="p-carousel-header"> <div v-if="$slots.header" class="p-carousel-header">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
@ -141,7 +141,6 @@ export default {
isRemainingItemsAdded: false, isRemainingItemsAdded: false,
data() { data() {
return { return {
id: UniqueComponentId(),
remainingItems: 0, remainingItems: 0,
d_numVisible: this.numVisible, d_numVisible: this.numVisible,
d_numScroll: this.numScroll, d_numScroll: this.numScroll,
@ -177,6 +176,7 @@ export default {
mounted() { mounted() {
let stateChanged = false; let stateChanged = false;
this.$el.setAttribute(this.attributeSelector, '');
this.createStyle(); this.createStyle();
this.calculatePosition(); this.calculatePosition();
@ -563,10 +563,10 @@ export default {
} }
let innerHTML = ` let innerHTML = `
#${this.id} .p-carousel-item { .p-carousel[${this.attributeSelector}] .p-carousel-item {
flex: 1 0 ${100 / this.d_numVisible}% flex: 1 0 ${100 / this.d_numVisible}%
} }
`; `;
if (this.responsiveOptions) { if (this.responsiveOptions) {
let _responsiveOptions = [...this.responsiveOptions]; let _responsiveOptions = [...this.responsiveOptions];
@ -589,12 +589,12 @@ export default {
let res = _responsiveOptions[i]; let res = _responsiveOptions[i];
innerHTML += ` innerHTML += `
@media screen and (max-width: ${res.breakpoint}) { @media screen and (max-width: ${res.breakpoint}) {
#${this.id} .p-carousel-item { .p-carousel[${this.attributeSelector}] .p-carousel-item {
flex: 1 0 ${100 / res.numVisible}% flex: 1 0 ${100 / res.numVisible}%
}
} }
} `;
`;
} }
} }
@ -649,6 +649,9 @@ export default {
}, },
ariaNextButtonLabel() { ariaNextButtonLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.nextPageLabel : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.nextPageLabel : undefined;
},
attributeSelector() {
return UniqueComponentId();
} }
}, },
directives: { directives: {

3
components/panelmenu/PanelMenu.spec.js
View File

@ -72,8 +72,9 @@ describe('PanelMenu', () => {
await wrapper.vm.onHeaderClick({}, wrapper.vm.model[0]); await wrapper.vm.onHeaderClick({}, wrapper.vm.model[0]);
expect(wrapper.find('.p-panelmenu-header-action > .p-submenu-icon').classes()).toContain('pi-chevron-down'); expect(wrapper.find('.p-panelmenu-header-action > .p-submenu-icon').classes()).toContain('pi-chevron-down');
setTimeout(() => { setTimeout(() => {
expect(wrapper.findAll('.p-toggleable-content')[0].attributes().style).toBe(undefined); expect(wrapper.findAll('.p-toggleable-content')[0].attributes().style).toBe('');
}, 25); }, 25);
}); });

6
components/utils/Utils.js
View File

@ -1,8 +1,8 @@
import ConnectedOverlayScrollHandler from './ConnectedOverlayScrollHandler'; import ConnectedOverlayScrollHandler from './ConnectedOverlayScrollHandler';
import DomHandler from './DomHandler'; import DomHandler from './DomHandler';
import ObjectUtils from './ObjectUtils';
import ZIndexUtils from './ZIndexUtils';
import UniqueComponentId from './UniqueComponentId';
import EventBus from './EventBus'; import EventBus from './EventBus';
import ObjectUtils from './ObjectUtils';
import UniqueComponentId from './UniqueComponentId';
import ZIndexUtils from './ZIndexUtils';
export { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, ZIndexUtils, UniqueComponentId, EventBus }; export { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, ZIndexUtils, UniqueComponentId, EventBus };

6
layouts/AppCodeHighlight.js
View File

@ -1,7 +1,7 @@
import Prism from 'prismjs'; import { DomHandler } from 'primevue/utils';
const CodeHighlight = { const CodeHighlight = {
beforeMount(el, binding) { mounted(el, binding) {
const modifiers = binding.modifiers; const modifiers = binding.modifiers;
const value = binding.value; const value = binding.value;
@ -9,7 +9,7 @@ const CodeHighlight = {
else if (modifiers.css || value === 'css') el.className = 'language-css'; else if (modifiers.css || value === 'css') el.className = 'language-css';
else el.className = 'language-markup'; else el.className = 'language-markup';
Prism.highlightElement(el.children[0]); DomHandler.isClient() && window.Prism.highlightElement(el.children[0]);
} }
}; };

23
layouts/default.vue
View File

@ -32,15 +32,6 @@ export default {
sidebarActive: false sidebarActive: false
}; };
}, },
mounted() {
if (this.isOutdatedIE()) {
this.$toast.add({
severity: 'warn',
summary: 'Limited Functionality',
detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'
});
}
},
watch: { watch: {
$route: { $route: {
immediate: true, immediate: true,
@ -49,12 +40,25 @@ export default {
return; return;
} }
window['gtag']('config', 'UA-93461466-1', {
page_path: '/primevue' + to.path
});
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll'); DomHandler.removeClass(document.body, 'blocked-scroll');
this.$toast.removeAllGroups(); this.$toast.removeAllGroups();
} }
} }
}, },
mounted() {
if (this.isOutdatedIE()) {
this.$toast.add({
severity: 'warn',
summary: 'Limited Functionality',
detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'
});
}
},
methods: { methods: {
onMenuButtonClick() { onMenuButtonClick() {
if (this.sidebarActive) { if (this.sidebarActive) {
@ -90,6 +94,7 @@ export default {
}, },
isOutdatedIE() { isOutdatedIE() {
let ua = window.navigator.userAgent; let ua = window.navigator.userAgent;
if (ua.indexOf('MSIE ') > 0 || ua.indexOf('Trident/') > 0) { if (ua.indexOf('MSIE ') > 0 || ua.indexOf('Trident/') > 0) {
return true; return true;
} }

7
nuxt.config.js
View File

@ -1,6 +1,5 @@
import vueJsx from '@vitejs/plugin-vue-jsx'; import vueJsx from '@vitejs/plugin-vue-jsx';
const path = require('path'); const path = require('path');
const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/'; const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
// https://v3.nuxtjs.org/api/configuration/nuxt.config // https://v3.nuxtjs.org/api/configuration/nuxt.config
@ -56,11 +55,15 @@ export default defineNuxtConfig({
gtag('config', 'UA-93461466-1'); gtag('config', 'UA-93461466-1');
` `
},
{
src: baseUrl + 'scripts/prism.js',
'data-manual': true
} }
] ]
} }
}, },
css: ['@/assets/styles/primevue.css', '/node_modules/primeflex/primeflex.css', '/node_modules/primeicons/primeicons.css', '/node_modules/prismjs/themes/prism-coy.css', '@/assets/styles/flags.css'], css: ['@/assets/styles/primevue.css', '/node_modules/primeflex/primeflex.css', '/node_modules/primeicons/primeicons.css', '@/assets/styles/flags.css'],
vite: { vite: {
plugins: [vueJsx()], plugins: [vueJsx()],
resolve: { resolve: {

2644
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

112
package.json
View File

@ -1,58 +1,58 @@
{ {
"name": "primevue", "name": "primevue",
"version": "3.21.0", "version": "3.21.0",
"homepage": "https://www.primefaces.org/primevue", "homepage": "https://www.primefaces.org/primevue",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/primefaces/primevue.git" "url": "https://github.com/primefaces/primevue.git"
}, },
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"build": "nuxt build", "build": "nuxt build",
"dev": "nuxt dev", "dev": "nuxt dev",
"generate": "nuxt generate", "generate": "nuxt generate",
"preview": "nuxt preview", "preview": "nuxt preview",
"postinstall": "nuxt prepare", "postinstall": "nuxt prepare",
"build:package": "NODE_ENV=production rollup -c && node build-meta && node api-generator/build-api && gulp build-styles", "build:lib": "npm run build:check && npm run build:package",
"build:check": "npm run lint && npm run format:check && npm run security:check && npm run test:unit", "build:package": "NODE_ENV=production rollup -c && node build-meta && node api-generator/build-api && gulp build-styles",
"security:check": "npm audit --production --audit-level high", "build:check": "npm run format:check && npm run security:check && npm run test:unit",
"format": "prettier --write \"**/*.{js,vue,d.ts}\"", "security:check": "npm audit --production --audit-level high",
"format:check": "prettier --check \"**/*.{js,vue,d.ts}\"", "format": "prettier --write \"**/*.{js,vue,d.ts}\"",
"test:unit": "vitest", "format:check": "prettier --check \"**/*.{js,vue,d.ts}\"",
"test:build": "NODE_ENV=production rollup -c" "test:unit": "vitest",
}, "test:build": "NODE_ENV=production rollup -c"
"devDependencies": { },
"@fullcalendar/core": "^5.11.0", "devDependencies": {
"@fullcalendar/daygrid": "^5.11.0", "@fullcalendar/core": "^5.11.0",
"@fullcalendar/interaction": "^5.11.0", "@fullcalendar/daygrid": "^5.11.0",
"@fullcalendar/timegrid": "^5.11.0", "@fullcalendar/interaction": "^5.11.0",
"@fullcalendar/vue3": "^5.11.0", "@fullcalendar/timegrid": "^5.11.0",
"@vitejs/plugin-vue-jsx": "^2.0.1", "@fullcalendar/vue3": "^5.11.0",
"@vue/test-utils": "^2.0.0", "@vitejs/plugin-vue-jsx": "^2.0.1",
"@vuelidate/core": "^2.0.0-alpha.14", "@vue/test-utils": "^2.0.0",
"@vuelidate/validators": "^2.0.0-alpha.12", "@vuelidate/core": "^2.0.0-alpha.14",
"chart.js": "3.3.2", "@vuelidate/validators": "^2.0.0-alpha.12",
"gulp": "^4.0.2", "chart.js": "3.3.2",
"gulp-concat": "^2.6.0", "gulp": "^4.0.2",
"gulp-flatten": "^0.4.0", "gulp-concat": "^2.6.0",
"gulp-rename": "^2.0.0", "gulp-flatten": "^0.4.0",
"gulp-uglify": "^3.0.2", "gulp-rename": "^2.0.0",
"gulp-uglifycss": "^1.0.6", "gulp-uglify": "^3.0.2",
"jsdom": "^19.0.0", "gulp-uglifycss": "^1.0.6",
"nuxt": "^3.0.0", "jsdom": "^19.0.0",
"primeflex": "^3.3.0", "nuxt": "^3.0.0",
"primeicons": "^6.0.1", "primeflex": "^3.3.0",
"prismjs": "^1.15.0", "primeicons": "^6.0.1",
"quill": "^1.3.7", "quill": "^1.3.7",
"rollup-plugin-postcss": "^4.0.0", "rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^6.0.0-beta.9", "rollup-plugin-vue": "^6.0.0-beta.9",
"sass": "^1.45.0", "sass": "^1.45.0",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"vitest": "^0.23.2", "vitest": "^0.23.2",
"prettier": "2.7.1", "prettier": "2.7.1",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-vue": "^9.4.0", "eslint-plugin-vue": "^9.4.0",
"@babel/eslint-parser": "^7.18.9" "@babel/eslint-parser": "^7.18.9"
} }
} }

598
pages/accordion/AccordionDoc.vue
View File

@ -1,24 +1,23 @@
<template> <template>
<ClientOnly> <AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue">
<AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Accordion from 'primevue/accordion'; import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab'; import AccordionTab from 'primevue/accordiontab';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/accordion/accordion.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/accordion/accordion.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/accordiontab/accordiontab.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/accordiontab/accordiontab.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p> <p>Accordion element consists of one or more AccordionTab elements. Title of the tab is defined using header attribute.</p>
<pre v-code><code> <pre v-code><code>
&lt;Accordion&gt; &lt;Accordion&gt;
&lt;AccordionTab header="Header I"&gt; &lt;AccordionTab header="Header I"&gt;
Content Content
@ -33,9 +32,9 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre> </code></pre>
<h5>Active</h5> <h5>Active</h5>
<p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p> <p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
<pre v-code><code> <pre v-code><code>
&lt;Accordion :activeIndex="0"&gt; &lt;Accordion :activeIndex="0"&gt;
&lt;AccordionTab header="Header I"&gt; &lt;AccordionTab header="Header I"&gt;
Content Content
@ -50,8 +49,8 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre> </code></pre>
<p>Two-way binding requires v-model.</p> <p>Two-way binding requires v-model.</p>
<pre v-code><code> <pre v-code><code>
&lt;Accordion v-model:activeIndex="activeIndex"&gt; &lt;Accordion v-model:activeIndex="activeIndex"&gt;
&lt;AccordionTab header="Header I"&gt; &lt;AccordionTab header="Header I"&gt;
Content Content
@ -66,9 +65,9 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre> </code></pre>
<h5>Multiple</h5> <h5>Multiple</h5>
<p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple tabs be active at the same time.</p> <p>By default only one tab at a time can be active, enabling multiple property changes this behavior to allow multiple tabs be active at the same time.</p>
<pre v-code><code> <pre v-code><code>
&lt;Accordion :multiple="true"&gt; &lt;Accordion :multiple="true"&gt;
&lt;AccordionTab header="Header I"&gt; &lt;AccordionTab header="Header I"&gt;
Content Content
@ -83,9 +82,9 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre> </code></pre>
<h5>Disabled</h5> <h5>Disabled</h5>
<p>A tab can be disabled by setting the <i>disabled</i> property to true.</p> <p>A tab can be disabled by setting the <i>disabled</i> property to true.</p>
<pre v-code><code> <pre v-code><code>
&lt;Accordion&gt; &lt;Accordion&gt;
&lt;AccordionTab header="Header I"&gt; &lt;AccordionTab header="Header I"&gt;
Content Content
@ -100,9 +99,9 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre> </code></pre>
<h5>Custom Content at Headers</h5> <h5>Custom Content at Headers</h5>
<p>Custom content for the title section of a panel is defined using the header template.</p> <p>Custom content for the title section of a panel is defined using the header template.</p>
<pre v-code><code> <pre v-code><code>
&lt;Accordion&gt; &lt;Accordion&gt;
&lt;AccordionTab&gt; &lt;AccordionTab&gt;
&lt;template #header&gt; &lt;template #header&gt;
@ -129,9 +128,9 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre> </code></pre>
<h5>Programmatic Control</h5> <h5>Programmatic Control</h5>
<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p> <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button @click="active = 0" class="p-button-text" label="Activate 1st" /&gt; &lt;Button @click="active = 0" class="p-button-text" label="Activate 1st" /&gt;
&lt;Button @click="active = 1" class="p-button-text" label="Activate 2nd" /&gt; &lt;Button @click="active = 1" class="p-button-text" label="Activate 2nd" /&gt;
&lt;Button @click="active = 2" class="p-button-text" label="Activate 3rd" /&gt; &lt;Button @click="active = 2" class="p-button-text" label="Activate 3rd" /&gt;
@ -150,7 +149,7 @@ import AccordionTab from 'primevue/accordiontab';
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -161,18 +160,18 @@ export default {
</code></pre> </code></pre>
<h5>Dynamic Tabs</h5> <h5>Dynamic Tabs</h5>
<p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p> <p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;Accordion&gt; &lt;Accordion&gt;
&lt;AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt; &lt;AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt;
&lt;p&gt;{{tab.content}}&lt;/p&gt; &lt;p&gt;&#123;&#123;tab.content&#125;&#125;&lt;/p&gt;
&lt;/AccordionTab&gt; &lt;/AccordionTab&gt;
&lt;/Accordion&gt; &lt;/Accordion&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -187,13 +186,13 @@ export default {
</code></pre> </code></pre>
<h5>Lazy Rendering</h5> <h5>Lazy Rendering</h5>
<p> <p>
All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is useful to speed up the initial
rendering performance if there are many tabs. rendering performance if there are many tabs.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;Accordion lazy&gt; &lt;Accordion lazy&gt;
&lt;AccordionTab header="Header I"&gt; &lt;AccordionTab header="Header I"&gt;
Content Content
@ -208,273 +207,272 @@ export default {
</code></pre> </code></pre>
<h5>Properties of AccordionTab</h5> <h5>Properties of AccordionTab</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>header</td> <td>header</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Orientation of tab headers.</td> <td>Orientation of tab headers.</td>
</tr> </tr>
<tr> <tr>
<td>headerStyle</td> <td>headerStyle</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Inline style of the tab header.</td> <td>Inline style of the tab header.</td>
</tr> </tr>
<tr> <tr>
<td>headerClass</td> <td>headerClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the tab header.</td> <td>Style class of the tab header.</td>
</tr> </tr>
<tr> <tr>
<td>headerProps</td> <td>headerProps</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Uses to pass all properties of the HTMLDivElement to the tab header.</td> <td>Uses to pass all properties of the HTMLDivElement to the tab header.</td>
</tr> </tr>
<tr> <tr>
<td>headerActionProps</td> <td>headerActionProps</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.</td> <td>Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.</td>
</tr> </tr>
<tr> <tr>
<td>contentStyle</td> <td>contentStyle</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Inline style of the tab content.</td> <td>Inline style of the tab content.</td>
</tr> </tr>
<tr> <tr>
<td>contentClass</td> <td>contentClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the tab content.</td> <td>Style class of the tab content.</td>
</tr> </tr>
<tr> <tr>
<td>contentProps</td> <td>contentProps</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Uses to pass all properties of the HTMLDivElement to the tab content.</td> <td>Uses to pass all properties of the HTMLDivElement to the tab content.</td>
</tr> </tr>
<tr> <tr>
<td>disabled</td> <td>disabled</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Whether the tab is disabled.</td> <td>Whether the tab is disabled.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Properties of Accordion</h5> <h5>Properties of Accordion</h5>
<p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>multiple</td> <td>multiple</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When enabled, multiple tabs can be activated at the same time.</td> <td>When enabled, multiple tabs can be activated at the same time.</td>
</tr> </tr>
<tr> <tr>
<td>activeIndex</td> <td>activeIndex</td>
<td>number|array</td> <td>number|array</td>
<td>null</td> <td>null</td>
<td>Index of the active tab or an array of indexes in multiple mode.</td> <td>Index of the active tab or an array of indexes in multiple mode.</td>
</tr> </tr>
<tr> <tr>
<td>lazy</td> <td>lazy</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td> <td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
</tr> </tr>
<tr> <tr>
<td>expandIcon</td> <td>expandIcon</td>
<td>string</td> <td>string</td>
<td>pi-chevron-right</td> <td>pi-chevron-right</td>
<td>Icon of a collapsed tab.</td> <td>Icon of a collapsed tab.</td>
</tr> </tr>
<tr> <tr>
<td>collapseIcon</td> <td>collapseIcon</td>
<td>string</td> <td>string</td>
<td>pi-chevron-down</td> <td>pi-chevron-down</td>
<td>Icon of an expanded tab.</td> <td>Icon of an expanded tab.</td>
</tr> </tr>
<tr> <tr>
<td>tabindex</td> <td>tabindex</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Index of the element in tabbing order.</td> <td>Index of the element in tabbing order.</td>
</tr> </tr>
<tr> <tr>
<td>selectOnFocus</td> <td>selectOnFocus</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When enabled, the focused tab is activated.</td> <td>When enabled, the focused tab is activated.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>tab-open</td> <td>tab-open</td>
<td> <td>
event.originalEvent: Browser event <br /> event.originalEvent: Browser event <br />
event.index: Opened tab index event.index: Opened tab index
</td> </td>
<td>Callback to invoke when a tab gets expanded.</td> <td>Callback to invoke when a tab gets expanded.</td>
</tr> </tr>
<tr> <tr>
<td>tab-close</td> <td>tab-close</td>
<td> <td>
event.originalEvent: Browser event <br /> event.originalEvent: Browser event <br />
event.index: Closed tab index event.index: Closed tab index
</td> </td>
<td>Callback to invoke when an active tab is collapsed by clicking on the header.</td> <td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
</tr> </tr>
<tr> <tr>
<td>tab-click</td> <td>tab-click</td>
<td> <td>
event.originalEvent: Browser event <br /> event.originalEvent: Browser event <br />
event.index: Index of the clicked tab event.index: Index of the clicked tab
</td> </td>
<td>Callback to invoke when an active tab is clicked.</td> <td>Callback to invoke when an active tab is clicked.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-accordion</td> <td>p-accordion</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-accordion-header</td> <td>p-accordion-header</td>
<td>Header of a tab.</td> <td>Header of a tab.</td>
</tr> </tr>
<tr> <tr>
<td>p-accordion-content</td> <td>p-accordion-content</td>
<td>Container of a tab.</td> <td>Container of a tab.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the value of
value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerActionProps</i> property. the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerActionProps</i> property.
</p> </p>
<p>The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p> <p>The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.</p>
<h6>Header Keyboard Support</h6> <h6>Header Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>tab</i> <i>tab</i>
</td> </td>
<td>Moves focus to the next focusable element in the page tab sequence.</td> <td>Moves focus to the next focusable element in the page tab sequence.</td>
</tr> </tr>
<tr> <tr>
<td><i>shift</i> + <i>tab</i></td> <td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous focusable element in the page tab sequence.</td> <td>Moves focus to the previous focusable element in the page tab sequence.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>enter</i> <i>enter</i>
</td> </td>
<td>Toggles the visibility of the content.</td> <td>Toggles the visibility of the content.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>space</i> <i>space</i>
</td> </td>
<td>Toggles the visibility of the content.</td> <td>Toggles the visibility of the content.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>down arrow</i> <i>down arrow</i>
</td> </td>
<td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td> <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>up arrow</i> <i>up arrow</i>
</td> </td>
<td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td> <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>home</i> <i>home</i>
</td> </td>
<td>Moves focus to the first header.</td> <td>Moves focus to the first header.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>end</i> <i>end</i>
</td> </td>
<td>Moves focus to the last header.</td> <td>Moves focus to the last header.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

1336
pages/autocomplete/AutoCompleteDoc.vue
View File

File diff suppressed because it is too large Load Diff

346
pages/avatar/AvatarDoc.vue
View File

@ -1,40 +1,39 @@
<template> <template>
<ClientOnly <AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue">
><AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Avatar from 'primevue/avatar'; import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup'; import AvatarGroup from 'primevue/avatargroup';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/avatar/avatar.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/avatar/avatar.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Avatar has three built-in display modes; "label", "icon" and "image".</p> <p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
<pre v-code><code> <pre v-code><code>
&lt;Avatar label="P" /&gt; &lt;Avatar label="P" /&gt;
&lt;Avatar icon="pi pi-search" /&gt; &lt;Avatar icon="pi pi-search" /&gt;
&lt;Avatar image="user.png" /&gt; &lt;Avatar image="user.png" /&gt;
</code></pre> </code></pre>
<h5>Sizes</h5> <h5>Sizes</h5>
<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p> <p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
<pre v-code><code> <pre v-code><code>
&lt;Avatar label="P" size="large"/&gt; &lt;Avatar label="P" size="large"/&gt;
</code></pre> </code></pre>
<h5>AvatarGroup</h5> <h5>AvatarGroup</h5>
<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p> <p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
<pre v-code><code> <pre v-code><code>
&lt;AvatarGroup&gt; &lt;AvatarGroup&gt;
&lt;Avatar label="P" /&gt; &lt;Avatar label="P" /&gt;
&lt;Avatar icon="pi pi-search" /&gt; &lt;Avatar icon="pi pi-search" /&gt;
@ -44,186 +43,185 @@ import AvatarGroup from 'primevue/avatargroup';
</code></pre> </code></pre>
<h5>Shape</h5> <h5>Shape</h5>
<p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p> <p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
<pre v-code><code> <pre v-code><code>
&lt;Avatar label="P" shape="circle"/&gt; &lt;Avatar label="P" shape="circle"/&gt;
</code></pre> </code></pre>
<h5>Badge</h5> <h5>Badge</h5>
<p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p> <p>A badge can be added to an Avatar with the <router-link to="/badge">Badge</router-link> directive.</p>
<pre v-code><code> <pre v-code><code>
&lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt; &lt;Avatar image="user.png" size="xlarge" v-badge.danger="4" /&gt;
</code></pre> </code></pre>
<h5>Templating</h5> <h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p> <p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<pre v-code><code> <pre v-code><code>
&lt;Avatar&gt; &lt;Avatar&gt;
Content Content
&lt;/Avatar&gt; &lt;/Avatar&gt;
</code></pre> </code></pre>
<h5>Properties of Avatar</h5> <h5>Properties of Avatar</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>label</td> <td>label</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Defines the text to display.</td> <td>Defines the text to display.</td>
</tr> </tr>
<tr> <tr>
<td>icon</td> <td>icon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Defines the icon to display.</td> <td>Defines the icon to display.</td>
</tr> </tr>
<tr> <tr>
<td>image</td> <td>image</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Defines the image to display.</td> <td>Defines the image to display.</td>
</tr> </tr>
<tr> <tr>
<td>size</td> <td>size</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Size of the element, valid options are "large" and "xlarge".</td> <td>Size of the element, valid options are "large" and "xlarge".</td>
</tr> </tr>
<tr> <tr>
<td>shape</td> <td>shape</td>
<td>string</td> <td>string</td>
<td>square</td> <td>square</td>
<td>Shape of the element, valid options are "square" and "circle".</td> <td>Shape of the element, valid options are "square" and "circle".</td>
</tr> </tr>
<tr> <tr>
<td>aria-label</td> <td>aria-label</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Defines a string value that labels an interactive element.</td> <td>Defines a string value that labels an interactive element.</td>
</tr> </tr>
<tr> <tr>
<td>aria-labelledby</td> <td>aria-labelledby</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td> <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Properties of AvatarGroup</h5> <h5>Properties of AvatarGroup</h5>
<p>Any property as style and class are passed to the main container element. There are no additional properties.</p> <p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>error</td> <td>error</td>
<td>-</td> <td>-</td>
<td>Triggered when an error occurs while loading an image file.</td> <td>Triggered when an error occurs while loading an image file.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling of Avatar</h5> <h5>Styling of Avatar</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-avatar</td> <td>p-avatar</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-avatar-image</td> <td>p-avatar-image</td>
<td>Container element in image mode.</td> <td>Container element in image mode.</td>
</tr> </tr>
<tr> <tr>
<td>p-avatar-circle</td> <td>p-avatar-circle</td>
<td>Container element with a circle shape.</td> <td>Container element with a circle shape.</td>
</tr> </tr>
<tr> <tr>
<td>p-avatar-text</td> <td>p-avatar-text</td>
<td>Text of the Avatar.</td> <td>Text of the Avatar.</td>
</tr> </tr>
<tr> <tr>
<td>p-avatar-icon</td> <td>p-avatar-icon</td>
<td>Icon of the Avatar.</td> <td>Icon of the Avatar.</td>
</tr> </tr>
<tr> <tr>
<td>p-avatar-lg</td> <td>p-avatar-lg</td>
<td>Container element with a large size.</td> <td>Container element with a large size.</td>
</tr> </tr>
<tr> <tr>
<td>p-avatar-xl</td> <td>p-avatar-xl</td>
<td>Container element with an xlarge size.</td> <td>Container element with an xlarge size.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling of AvatarGroup</h5> <h5>Styling of AvatarGroup</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-avatar-group</td> <td>p-avatar-group</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case
avatars need to be tabbable, <i>tabindex</i> can be added as well to implement custom key handlers. avatars need to be tabbable, <i>tabindex</i> can be added as well to implement custom key handlers.
</p> </p>
<h5>Keyboard Support</h5> <h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p> <p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

270
pages/badge/BadgeDoc.vue
View File

@ -1,208 +1,206 @@
<template> <template>
<ClientOnly <AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue">
><AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue"> <h5>Getting Started</h5>
<h5>Getting Started</h5> <p>Badge can either be used as a standalone component or as a directive.</p>
<p>Badge can either be used as a standalone component or as a directive.</p>
<h5>Component</h5> <h5>Component</h5>
<h6>Import via Module</h6> <h6>Import via Module</h6>
<pre v-code.script><code> <pre v-code.script><code>
import Badge from 'primevue/badge'; import Badge from 'primevue/badge';
</code></pre> </code></pre>
<h6>Import via CDN</h6> <h6>Import via CDN</h6>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/badge/badge.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/badge/badge.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<p>Content of the badge is specified using the <i>value</i> property.</p> <p>Content of the badge is specified using the <i>value</i> property.</p>
<pre v-code><code> <pre v-code><code>
&lt;Badge value="2"&gt;&lt;/Badge&gt; &lt;Badge value="2"&gt;&lt;/Badge&gt;
</code></pre> </code></pre>
<h5>Directive</h5> <h5>Directive</h5>
<h6>Import via Module</h6> <h6>Import via Module</h6>
<pre v-code.script><code> <pre v-code.script><code>
import BadgeDirective from 'primevue/badgedirective'; import BadgeDirective from 'primevue/badgedirective';
</code></pre> </code></pre>
<h6>Import via CDN</h6> <h6>Import via CDN</h6>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p> <p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
<pre v-code.script><code> <pre v-code.script><code>
import BadgeDirective from 'primevue/badgedirective'; import BadgeDirective from 'primevue/badgedirective';
app.directive('badge', BadgeDirective); app.directive('badge', BadgeDirective);
</code></pre> </code></pre>
<p>Next step is attaching it to an element.</p> <p>Next step is attaching it to an element.</p>
<pre v-code><code> <pre v-code><code>
&lt;i class="pi pi-bell" v-badge="2"&gt;&lt;/i&gt; &lt;i class="pi pi-bell" v-badge="2"&gt;&lt;/i&gt;
</code></pre> </code></pre>
<h5>Severities</h5> <h5>Severities</h5>
<p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p> <p>Different color options are available as severity levels. When used as a component use the <i>severity</i> property to apply a severity and use a <i>modifier</i> as the severity value in directive mode.</p>
<ul> <ul>
<li>success</li> <li>success</li>
<li>info</li> <li>info</li>
<li>warning</li> <li>warning</li>
<li>danger</li> <li>danger</li>
</ul> </ul>
<pre v-code><code> <pre v-code><code>
&lt;Badge value="2" severity="success"&gt;&lt;/Badge&gt; &lt;Badge value="2" severity="success"&gt;&lt;/Badge&gt;
&lt;i class="pi pi-bell" v-badge.success="2"&gt;&lt;/i&gt; &lt;i class="pi pi-bell" v-badge.success="2"&gt;&lt;/i&gt;
</code></pre> </code></pre>
<h5>Button Badges</h5> <h5>Button Badges</h5>
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p> <p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button type="button" label="Emails" badge="8" /&gt; &lt;Button type="button" label="Emails" badge="8" /&gt;
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt; &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt;
</code></pre> </code></pre>
<h5>Sizes</h5> <h5>Sizes</h5>
<p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently sizes only apply to component mode.</p> <p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size. Currently sizes only apply to component mode.</p>
<pre v-code><code> <pre v-code><code>
&lt;Badge value="2"&gt;&lt;/Badge&gt; &lt;Badge value="2"&gt;&lt;/Badge&gt;
&lt;Badge value="4" size="large" severity="warning"&gt;&lt;/Badge&gt; &lt;Badge value="4" size="large" severity="warning"&gt;&lt;/Badge&gt;
&lt;Badge value="6" size="xlarge" severity="success"&gt;&lt;/Badge&gt; &lt;Badge value="6" size="xlarge" severity="success"&gt;&lt;/Badge&gt;
</code></pre> </code></pre>
<p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p> <p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
<pre v-code><code> <pre v-code><code>
&lt;h1&gt;Heading 1 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h1&gt; &lt;h1&gt;Heading 1 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h1&gt;
&lt;h2&gt;Heading 2 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h2&gt; &lt;h2&gt;Heading 2 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h2&gt;
</code></pre> </code></pre>
<h5>Templating</h5> <h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in display.</p> <p>Content can easily be customized with the default slot instead of using the built-in display.</p>
<pre v-code><code> <pre v-code><code>
&lt;Badge&gt; &lt;Badge&gt;
Content Content
&lt;/Badge&gt; &lt;/Badge&gt;
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>value</td> <td>value</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Value to display inside the badge.</td> <td>Value to display inside the badge.</td>
</tr> </tr>
<tr> <tr>
<td>severity</td> <td>severity</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Severity type of the badge.</td> <td>Severity type of the badge.</td>
</tr> </tr>
<tr> <tr>
<td>size</td> <td>size</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Size of the badge, valid options are "large" and "xlarge".</td> <td>Size of the badge, valid options are "large" and "xlarge".</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-badge</td> <td>p-badge</td>
<td>Badge element</td> <td>Badge element</td>
</tr> </tr>
<tr> <tr>
<td>p-overlay-badge</td> <td>p-overlay-badge</td>
<td>Wrapper of a badge and its target.</td> <td>Wrapper of a badge and its target.</td>
</tr> </tr>
<tr> <tr>
<td>p-badge-dot</td> <td>p-badge-dot</td>
<td>Badge element with no value.</td> <td>Badge element with no value.</td>
</tr> </tr>
<tr> <tr>
<td>p-badge-success</td> <td>p-badge-success</td>
<td>Badge element with success severity.</td> <td>Badge element with success severity.</td>
</tr> </tr>
<tr> <tr>
<td>p-badge-info</td> <td>p-badge-info</td>
<td>Badge element with info severity.</td> <td>Badge element with info severity.</td>
</tr> </tr>
<tr> <tr>
<td>p-badge-warning</td> <td>p-badge-warning</td>
<td>Badge element with warning severity.</td> <td>Badge element with warning severity.</td>
</tr> </tr>
<tr> <tr>
<td>p-badge-danger</td> <td>p-badge-danger</td>
<td>Badge element with danger severity.</td> <td>Badge element with danger severity.</td>
</tr> </tr>
<tr> <tr>
<td>p-badge-lg</td> <td>p-badge-lg</td>
<td>Large badge element</td> <td>Large badge element</td>
</tr> </tr>
<tr> <tr>
<td>p-badge-xl</td> <td>p-badge-xl</td>
<td>Extra large badge element</td> <td>Extra large badge element</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic, Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic,
<i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers. <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabindex</i> can be added to implement custom key handlers.
</p> </p>
<h5>Keyboard Support</h5> <h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p> <p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

225
pages/blockui/BlockUIDoc.vue
View File

@ -1,25 +1,24 @@
<template> <template>
<ClientOnly <AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue">
><AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import BlockUI from 'primevue/blockui'; import BlockUI from 'primevue/blockui';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/blockui/blockui.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/blockui/blockui.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p> <p>
BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable is
is set to false. set to false.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;BlockUI :blocked="blockedPanel"&gt; &lt;BlockUI :blocked="blockedPanel"&gt;
&lt;Panel header="Header"&gt; &lt;Panel header="Header"&gt;
Panel Content Panel Content
@ -28,7 +27,7 @@ import BlockUI from 'primevue/blockui';
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -47,117 +46,115 @@ export default {
</code></pre> </code></pre>
<h5>Full Screen</h5> <h5>Full Screen</h5>
<p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p> <p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
<pre v-code><code> <pre v-code><code>
&lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt; &lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>blocked</td> <td>blocked</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>Controls the blocked state.</td> <td>Controls the blocked state.</td>
</tr> </tr>
<tr> <tr>
<td>fullscreen</td> <td>fullscreen</td>
<td>menuitem</td> <td>menuitem</td>
<td>null</td> <td>null</td>
<td>When enabled, the whole document gets blocked.</td> <td>When enabled, the whole document gets blocked.</td>
</tr> </tr>
<tr> <tr>
<td>baseZIndex</td> <td>baseZIndex</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Base zIndex value to use in layering.</td> <td>Base zIndex value to use in layering.</td>
</tr> </tr>
<tr> <tr>
<td>autoZIndex</td> <td>autoZIndex</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to automatically manage layering.</td> <td>Whether to automatically manage layering.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>block</td> <td>block</td>
<td>-</td> <td>-</td>
<td>Fired when the element gets blocked.</td> <td>Fired when the element gets blocked.</td>
</tr> </tr>
<tr> <tr>
<td>unblock</td> <td>unblock</td>
<td>-</td> <td>-</td>
<td>Fired when the element gets unblocked.</td> <td>Fired when the element gets unblocked.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-blockui</td> <td>p-blockui</td>
<td>Mask element.</td> <td>Mask element.</td>
</tr> </tr>
<tr> <tr>
<td>p-blockui-document</td> <td>p-blockui-document</td>
<td>Mask element in full screen mode.</td> <td>Mask element in full screen mode.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live regions.
regions. </p>
</p>
<h5>Keyboard Support</h5> <h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p> <p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

278
pages/breadcrumb/BreadcrumbDoc.vue
View File

@ -1,30 +1,29 @@
<template> <template>
<ClientOnly <AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue">
><AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Breadcrumb from 'primevue/breadcrumb'; import Breadcrumb from 'primevue/breadcrumb';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/breadcrumb/breadcrumb.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/breadcrumb/breadcrumb.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Breadcrumb requires a collection of menuitems as its model and a home item.</p> <p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
<pre v-code><code> <pre v-code><code>
&lt;Breadcrumb :home="home" :model="items" /&gt; &lt;Breadcrumb :home="home" :model="items" /&gt;
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -42,154 +41,153 @@ export default {
</code></pre> </code></pre>
<h5>Templating</h5> <h5>Templating</h5>
<p>Breadcrumb offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p> <p>Breadcrumb offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;Breadcrumb :home="home" :model="items"&gt; &lt;Breadcrumb :home="home" :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt; &lt;a :href="item.url"&gt;&#123;&#123;item.label&#125;&#125;&lt;/a&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Breadcrumb&gt; &lt;/Breadcrumb&gt;
</template>
</code></pre> </code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p> <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;Breadcrumb :home="home" :model="items"&gt; &lt;Breadcrumb :home="home" :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt; &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt; &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;&#123;&#123;route.fullPath&#125;&#125;&lt;/a&gt;
&lt;/router-link&gt; &lt;/router-link&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Breadcrumb&gt; &lt;/Breadcrumb&gt;
</template>
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>model</td> <td>model</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>An array of menuitems.</td> <td>An array of menuitems.</td>
</tr> </tr>
<tr> <tr>
<td>home</td> <td>home</td>
<td>menuitem</td> <td>menuitem</td>
<td>null</td> <td>null</td>
<td>Configuration for the home icon.</td> <td>Configuration for the home icon.</td>
</tr> </tr>
<tr> <tr>
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
<tr> <tr>
<td>aria-label</td> <td>aria-label</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Defines a string value that labels an interactive element.</td> <td>Defines a string value that labels an interactive element.</td>
</tr> </tr>
<tr> <tr>
<td>aria-labelledby</td> <td>aria-labelledby</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td> <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>item</td> <td>item</td>
<td>item: Menuitem instance</td> <td>item: Menuitem instance</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-breadcrumb</td> <td>p-breadcrumb</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-breadcrumb-list</td> <td>p-breadcrumb-list</td>
<td>Ordered list element.</td> <td>Ordered list element.</td>
</tr> </tr>
<tr> <tr>
<td>p-breadcrumb-home</td> <td>p-breadcrumb-home</td>
<td>First list element.</td> <td>First list element.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem</td> <td>p-menuitem</td>
<td>Menuitem element.</td> <td>Menuitem element.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem-link</td> <td>p-menuitem-link</td>
<td>Link element of the menuitem.</td> <td>Link element of the menuitem.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem-text</td> <td>p-menuitem-text</td>
<td>Label of a menuitem.</td> <td>Label of a menuitem.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem-icon</td> <td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td> <td>Icon of a menuitem.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item
separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value. separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.
</p> </p>
<h6>Keyboard Support</h6> <h6>Keyboard Support</h6>
<p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p> <p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

384
pages/button/ButtonDoc.vue
View File

@ -1,58 +1,57 @@
<template> <template>
<ClientOnly <AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue">
><AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Button from 'primevue/button'; import Button from 'primevue/button';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Button is created using the Button element.</p> <p>Button is created using the Button element.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button /&gt; &lt;Button /&gt;
</code></pre> </code></pre>
<h5>Label</h5> <h5>Label</h5>
<p>Text of the button is defined using the <i>label</i> property.</p> <p>Text of the button is defined using the <i>label</i> property.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Submit" /&gt; &lt;Button label="Submit" /&gt;
</code></pre> </code></pre>
<h5>Icons</h5> <h5>Icons</h5>
<p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p> <p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt; &lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
</code></pre> </code></pre>
<h5>Events</h5> <h5>Events</h5>
<p>Events are defined with the standard notation.</p> <p>Events are defined with the standard notation.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Submit" @click="handleClick($event)"/&gt; &lt;Button label="Submit" @click="handleClick($event)"/&gt;
</code></pre> </code></pre>
<h5>Severity</h5> <h5>Severity</h5>
<p>Different options are available as severity levels.</p> <p>Different options are available as severity levels.</p>
<ul> <ul>
<li>.p-button-secondary</li> <li>.p-button-secondary</li>
<li>.p-button-success</li> <li>.p-button-success</li>
<li>.p-button-info</li> <li>.p-button-info</li>
<li>.p-button-warning</li> <li>.p-button-warning</li>
<li>.p-button-help</li> <li>.p-button-help</li>
<li>.p-button-danger</li> <li>.p-button-danger</li>
</ul> </ul>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Primary" /&gt; &lt;Button label="Primary" /&gt;
&lt;Button label="Secondary" class="p-button-secondary" /&gt; &lt;Button label="Secondary" class="p-button-secondary" /&gt;
&lt;Button label="Success" class="p-button-success" /&gt; &lt;Button label="Success" class="p-button-success" /&gt;
@ -63,9 +62,9 @@ import Button from 'primevue/button';
</code></pre> </code></pre>
<h5>Text Buttons</h5> <h5>Text Buttons</h5>
<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i> text buttons ignore severity levels and displayed as a regular text.</p> <p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i> text buttons ignore severity levels and displayed as a regular text.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Submit" class="p-button-text" /&gt; &lt;Button label="Submit" class="p-button-text" /&gt;
&lt;Button icon="pi pi-check" class="p-button-text" /&gt; &lt;Button icon="pi pi-check" class="p-button-text" /&gt;
&lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt; &lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
@ -73,39 +72,39 @@ import Button from 'primevue/button';
</code></pre> </code></pre>
<h5>Raised and Rounded Buttons</h5> <h5>Raised and Rounded Buttons</h5>
<p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p> <p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Primary" class="p-button-raised p-button-rounded" /&gt; &lt;Button label="Primary" class="p-button-raised p-button-rounded" /&gt;
</code></pre> </code></pre>
<h5>Outlined Buttons</h5> <h5>Outlined Buttons</h5>
<p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p> <p>An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Primary" class="p-button-outlined" /&gt; &lt;Button label="Primary" class="p-button-outlined" /&gt;
</code></pre> </code></pre>
<h5>Link Buttons</h5> <h5>Link Buttons</h5>
<p>Use "p-button-link" class to render the button as a link.</p> <p>Use "p-button-link" class to render the button as a link.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Link" class="p-button-link" /&gt; &lt;Button label="Link" class="p-button-link" /&gt;
</code></pre> </code></pre>
<h5>Badges</h5> <h5>Badges</h5>
<p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p> <p>Badge is a small status indicator for a button. Refer to the <router-link to="/badge">badge</router-link> documentation for available styling options.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button type="button" label="Emails" badge="8" /&gt; &lt;Button type="button" label="Emails" badge="8" /&gt;
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" /&gt; &lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" /&gt;
</code></pre> </code></pre>
<h5>ButtonSet</h5> <h5>ButtonSet</h5>
<p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p> <p>Wrapping the buttons in a container having a <i>.p-buttonset</i> class, groups the buttons side to side.</p>
<pre v-code><code> <pre v-code><code>
&lt;span class="p-buttonset"&gt; &lt;span class="p-buttonset"&gt;
&lt;Button label="Save" icon="pi pi-check" /&gt; &lt;Button label="Save" icon="pi pi-check" /&gt;
&lt;Button label="Delete" icon="pi pi-trash" /&gt; &lt;Button label="Delete" icon="pi pi-trash" /&gt;
@ -114,28 +113,28 @@ import Button from 'primevue/button';
</code></pre> </code></pre>
<h5>Sizes</h5> <h5>Sizes</h5>
<p> <p>
2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for 2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>. Note that these classes available to change the size of a particular button, for global
global scaling see the <router-link to="/theming">theming</router-link> page. scaling see the <router-link to="/theming">theming</router-link> page.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&gt; &lt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&gt;
&lt;Button label="Normal" icon="pi pi-check" class="p-button" /&gt; &lt;Button label="Normal" icon="pi pi-check" class="p-button" /&gt;
&lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt; &lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
</code></pre> </code></pre>
<h5>Loading State</h5> <h5>Loading State</h5>
<p>Button displays a <i>loadingIcon</i> when <i>loading</i> property is enabled.</p> <p>Button displays a <i>loadingIcon</i> when <i>loading</i> property is enabled.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Save" icon="pi pi-check" :loading="isLoading" /&gt; &lt;Button label="Save" icon="pi pi-check" :loading="isLoading" /&gt;
</code></pre> </code></pre>
<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="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;
@ -147,114 +146,114 @@ import Button from 'primevue/button';
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.</p> <p>Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>label</td> <td>label</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Text of the button.</td> <td>Text of the button.</td>
</tr> </tr>
<tr> <tr>
<td>icon</td> <td>icon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Name of the icon.</td> <td>Name of the icon.</td>
</tr> </tr>
<tr> <tr>
<td>iconPos</td> <td>iconPos</td>
<td>string</td> <td>string</td>
<td>left</td> <td>left</td>
<td>Position of the icon, valid values are "left", "right", "bottom" and "top".</td> <td>Position of the icon, valid values are "left", "right", "bottom" and "top".</td>
</tr> </tr>
<tr> <tr>
<td>iconClass</td> <td>iconClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the icon.</td> <td>Style class of the icon.</td>
</tr> </tr>
<tr> <tr>
<td>badge</td> <td>badge</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Value of the badge.</td> <td>Value of the badge.</td>
</tr> </tr>
<tr> <tr>
<td>badgeClass</td> <td>badgeClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the badge.</td> <td>Style class of the badge.</td>
</tr> </tr>
<tr> <tr>
<td>loading</td> <td>loading</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Whether the button is in loading state.</td> <td>Whether the button is in loading state.</td>
</tr> </tr>
<tr> <tr>
<td>loadingIcon</td> <td>loadingIcon</td>
<td>string</td> <td>string</td>
<td>pi pi-spinner pi-spin</td> <td>pi pi-spinner pi-spin</td>
<td>Icon to display in loading state.</td> <td>Icon to display in loading state.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-button</td> <td>p-button</td>
<td>Button element</td> <td>Button element</td>
</tr> </tr>
<tr> <tr>
<td>p-button-icon</td> <td>p-button-icon</td>
<td>Icon element</td> <td>Icon element</td>
</tr> </tr>
<tr> <tr>
<td>p-button-label</td> <td>p-button-label</td>
<td>Label element of the button</td> <td>Label element of the button</td>
</tr> </tr>
<tr> <tr>
<td>p-button-sm</td> <td>p-button-sm</td>
<td>Smaller button element</td> <td>Smaller button element</td>
</tr> </tr>
<tr> <tr>
<td>p-button-lg</td> <td>p-button-lg</td>
<td>Larger button element</td> <td>Larger button element</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the button is Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the button is
icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly. icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;Button icon="pi pi-check" aria-label="Submit" /&gt; &lt;Button icon="pi pi-check" aria-label="Submit" /&gt;
&lt;Button icon="pi pi-check" label="Submit" /&gt; &lt;Button icon="pi pi-check" label="Submit" /&gt;
@ -266,36 +265,35 @@ import Button from 'primevue/button';
</code></pre> </code></pre>
<h6>Keyboard Support</h6> <h6>Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><i>tab</i></td> <td><i>tab</i></td>
<td>Moves focus to the button.</td> <td>Moves focus to the button.</td>
</tr> </tr>
<tr> <tr>
<td><i>enter</i></td> <td><i>enter</i></td>
<td>Activates the button.</td> <td>Activates the button.</td>
</tr> </tr>
<tr> <tr>
<td><i>space</i></td> <td><i>space</i></td>
<td>Activates the button.</td> <td>Activates the button.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

1566
pages/calendar/CalendarDoc.vue
View File

File diff suppressed because it is too large Load Diff

176
pages/card/CardDoc.vue
View File

@ -1,22 +1,21 @@
<template> <template>
<ClientOnly <AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue">
><AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Card from 'primevue/card'; import Card from 'primevue/card';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/card/card.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/card/card.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p> <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
<pre v-code><code> <pre v-code><code>
&lt;Card&gt; &lt;Card&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;img alt="user header" src="/demo/images/usercard.png"&gt; &lt;img alt="user header" src="/demo/images/usercard.png"&gt;
@ -36,97 +35,96 @@ import Card from 'primevue/card';
</code></pre> </code></pre>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>header</td> <td>header</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>title</td> <td>title</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>subtitle</td> <td>subtitle</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>content</td> <td>content</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>footer</td> <td>footer</td>
<td>-</td> <td>-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-card</td> <td>p-card</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-card-title</td> <td>p-card-title</td>
<td>Title element.</td> <td>Title element.</td>
</tr> </tr>
<tr> <tr>
<td>p-card-subtitle</td> <td>p-card-subtitle</td>
<td>Subtitle element.</td> <td>Subtitle element.</td>
</tr> </tr>
<tr> <tr>
<td>p-card-content</td> <td>p-card-content</td>
<td>Content of the card.</td> <td>Content of the card.</td>
</tr> </tr>
<tr> <tr>
<td>p-card-footer</td> <td>p-card-footer</td>
<td>Footer of the card.</td> <td>Footer of the card.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you require
require to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property. to use one of the <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> roles like <i>region</i>, you may use the <i>role</i> property.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;Card role="region"&gt; &lt;Card role="region"&gt;
Content Content
&lt;/Card&gt; &lt;/Card&gt;
</code></pre> </code></pre>
<h5>Keyboard Support</h5> <h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p> <p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

636
pages/carousel/CarouselDoc.vue
View File

@ -1,22 +1,21 @@
<template> <template>
<ClientOnly <AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue">
><AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Carousel from 'primevue/carousel'; import Carousel from 'primevue/carousel';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/carousel/carousel.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/carousel/carousel.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Carousel requires a collection of items as its value along with a template to render each item.</p> <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
<pre v-code><code> <pre v-code><code>
&lt;Carousel :value="cars"&gt; &lt;Carousel :value="cars"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;/template&gt; &lt;/template&gt;
@ -24,9 +23,9 @@ import Carousel from 'primevue/carousel';
</code></pre> </code></pre>
<h5>Items per page and Scroll Items</h5> <h5>Items per page and Scroll Items</h5>
<p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p> <p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
<pre v-code><code> <pre v-code><code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt; &lt;Carousel :value="cars" :numVisible="3" :numScroll="1"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;/template&gt; &lt;/template&gt;
@ -34,9 +33,9 @@ import Carousel from 'primevue/carousel';
</code></pre> </code></pre>
<h5>Responsive</h5> <h5>Responsive</h5>
<p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of objects whose breakpoint defines the max-width to apply the settings.</p> <p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of objects whose breakpoint defines the max-width to apply the settings.</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt; &lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;h2&gt;Basic&lt;/h2&gt; &lt;h2&gt;Basic&lt;/h2&gt;
@ -48,8 +47,8 @@ import Carousel from 'primevue/carousel';
&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&gt; &lt;/div&gt;
&lt;div&gt; &lt;div&gt;
&lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt; &lt;div class="car-title"&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/div&gt;
&lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt; &lt;div class="car-subtitle"&gt;&#123;&#123;slotProps.data.year | slotProps.data.color&#125;&#125;&lt;/div&gt;
&lt;div class="car-buttons"&gt; &lt;div class="car-buttons"&gt;
&lt;Button icon="pi pi-search" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-search" class="p-button-secondary" /&gt;
@ -61,9 +60,9 @@ import Carousel from 'primevue/carousel';
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Carousel&gt; &lt;/Carousel&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
data() { data() {
return { return {
responsiveOptions: [ responsiveOptions: [
@ -88,10 +87,10 @@ data() {
</code></pre> </code></pre>
<h5>Header and Footer</h5> <h5>Header and Footer</h5>
<p>Custom content projection is available using the <i>item</i>, <i>header</i> and <i>footer</i> templates.</p> <p>Custom content projection is available using the <i>item</i>, <i>header</i> and <i>footer</i> templates.</p>
<pre v-code><code> <pre v-code><code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions"&gt; &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;h2&gt;Custom Header&lt;/h2&gt; &lt;h2&gt;Custom Header&lt;/h2&gt;
@ -106,9 +105,9 @@ data() {
</code></pre> </code></pre>
<h5>Orientation</h5> <h5>Orientation</h5>
<p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p> <p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
<pre v-code><code> <pre v-code><code>
&lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt; &lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" :responsiveOptions="responsiveOptions"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
Content Content
@ -117,11 +116,9 @@ data() {
</code></pre> </code></pre>
<h5>AutoPlay and Circular</h5> <h5>AutoPlay and Circular</h5>
<p> <p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default. <pre v-code><code>
</p>
<pre v-code><code>
&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt; &lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :circular="true" :autoplayInterval="3000"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;h2&gt;Circular, AutoPlay&lt;/h2&gt; &lt;h2&gt;Circular, AutoPlay&lt;/h2&gt;
@ -133,305 +130,304 @@ data() {
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>value</td> <td>value</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>An array of objects to display.</td> <td>An array of objects to display.</td>
</tr> </tr>
<tr> <tr>
<td>page</td> <td>page</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Index of the first item.</td> <td>Index of the first item.</td>
</tr> </tr>
<tr> <tr>
<td>circular</td> <td>circular</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Defines if scrolling would be infinite.</td> <td>Defines if scrolling would be infinite.</td>
</tr> </tr>
<tr> <tr>
<td>autoplayInterval</td> <td>autoplayInterval</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Time in milliseconds to scroll items automatically.</td> <td>Time in milliseconds to scroll items automatically.</td>
</tr> </tr>
<tr> <tr>
<td>numVisible</td> <td>numVisible</td>
<td>number</td> <td>number</td>
<td>1</td> <td>1</td>
<td>Number of items per page.</td> <td>Number of items per page.</td>
</tr> </tr>
<tr> <tr>
<td>numScroll</td> <td>numScroll</td>
<td>number</td> <td>number</td>
<td>1</td> <td>1</td>
<td>Number of items to scroll.</td> <td>Number of items to scroll.</td>
</tr> </tr>
<tr> <tr>
<td>responsiveOptions</td> <td>responsiveOptions</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>An array of options for responsive design.</td> <td>An array of options for responsive design.</td>
</tr> </tr>
<tr> <tr>
<td>orientation</td> <td>orientation</td>
<td>string</td> <td>string</td>
<td>horizontal</td> <td>horizontal</td>
<td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td> <td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
</tr> </tr>
<tr> <tr>
<td>verticalViewPortHeight</td> <td>verticalViewPortHeight</td>
<td>string</td> <td>string</td>
<td>300px</td> <td>300px</td>
<td>Height of the viewport in vertical layout.</td> <td>Height of the viewport in vertical layout.</td>
</tr> </tr>
<tr> <tr>
<td>contentClass</td> <td>contentClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of main content.</td> <td>Style class of main content.</td>
</tr> </tr>
<tr> <tr>
<td>containerClass</td> <td>containerClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the viewport container.</td> <td>Style class of the viewport container.</td>
</tr> </tr>
<tr> <tr>
<td>indicatorsContentClass</td> <td>indicatorsContentClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the indicator items.</td> <td>Style class of the indicator items.</td>
</tr> </tr>
<tr> <tr>
<td>showNavigators</td> <td>showNavigators</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to display navigation buttons in container.</td> <td>Whether to display navigation buttons in container.</td>
</tr> </tr>
<tr> <tr>
<td>showIndicators</td> <td>showIndicators</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to display indicator container.</td> <td>Whether to display indicator container.</td>
</tr> </tr>
<tr> <tr>
<td>prevButtonProps</td> <td>prevButtonProps</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Uses to pass all properties of the HTMLButtonElement to the previous navigation button.</td> <td>Uses to pass all properties of the HTMLButtonElement to the previous navigation button.</td>
</tr> </tr>
<tr> <tr>
<td>nextButtonProps</td> <td>nextButtonProps</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Uses to pass all properties of the HTMLButtonElement to the next navigation button.</td> <td>Uses to pass all properties of the HTMLButtonElement to the next navigation button.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>header</td> <td>header</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>item</td> <td>item</td>
<td> <td>
data: Data of the component<br /> data: Data of the component<br />
index: Index of the item index: Index of the item
</td> </td>
</tr> </tr>
<tr> <tr>
<td>footer</td> <td>footer</td>
<td>-</td> <td>-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-carousel</td> <td>p-carousel</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-carousel-header</td> <td>p-carousel-header</td>
<td>Header section.</td> <td>Header section.</td>
</tr> </tr>
<tr> <tr>
<td>p-carousel-footer</td> <td>p-carousel-footer</td>
<td>Footer section.</td> <td>Footer section.</td>
</tr> </tr>
<tr> <tr>
<td>p-carousel-content</td> <td>p-carousel-content</td>
<td>Main content element. It contains the container of the viewport.</td> <td>Main content element. It contains the container of the viewport.</td>
</tr> </tr>
<tr> <tr>
<td>p-carousel-container</td> <td>p-carousel-container</td>
<td>Container of the viewport. It contains navigation buttons and viewport.</td> <td>Container of the viewport. It contains navigation buttons and viewport.</td>
</tr> </tr>
<tr> <tr>
<td>p-carousel-items-content</td> <td>p-carousel-items-content</td>
<td>Viewport.</td> <td>Viewport.</td>
</tr> </tr>
<tr> <tr>
<td>p-carousel-indicators</td> <td>p-carousel-indicators</td>
<td>Container of the indicators.</td> <td>Container of the indicators.</td>
</tr> </tr>
<tr> <tr>
<td>p-carousel-indicator</td> <td>p-carousel-indicator</td>
<td>Indicator element.</td> <td>Indicator element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Carousel uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has Carousel uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has
<i>aria-live</i> attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay. <i>aria-live</i> attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.
</p> </p>
<p> <p>
A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <router-link to="/locale">locale</router-link> API. Similarly <i>aria.slide</i> is used as the A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <router-link to="/locale">locale</router-link> API. Similarly <i>aria.slide</i> is used as the <i>aria-roledescription</i> of
<i>aria-roledescription</i> of the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>. the item. Inactive slides are hidden from the readers with <i>aria-hidden</i>.
</p> </p>
<p> <p>
Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <router-link to="/locale">locale</router-link> API by Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.prevPageLabel</i> and <i>aria.nextPageLabel</i> properties of the <router-link to="/locale">locale</router-link> API by default
default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>. respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
</p> </p>
<p>Quick navigation elements are button elements with an <i>aria-label</i> attribute referring to the <i>aria.pageLabel</i> of the <router-link to="/locale">locale</router-link> API. Current page is marked with <i>aria-current</i>.</p> <p>Quick navigation elements are button elements with an <i>aria-label</i> attribute referring to the <i>aria.pageLabel</i> of the <router-link to="/locale">locale</router-link> API. Current page is marked with <i>aria-current</i>.</p>
<h6>Next/Prev Keyboard Support</h6> <h6>Next/Prev Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>tab</i> <i>tab</i>
</td> </td>
<td>Moves focus through interactive elements in the carousel.</td> <td>Moves focus through interactive elements in the carousel.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>enter</i> <i>enter</i>
</td> </td>
<td>Activates navigation.</td> <td>Activates navigation.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>space</i> <i>space</i>
</td> </td>
<td>Activates navigation.</td> <td>Activates navigation.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h6>Quick Navigation Keyboard Support</h6> <h6>Quick Navigation Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>tab</i> <i>tab</i>
</td> </td>
<td>Moves focus through the active slide link.</td> <td>Moves focus through the active slide link.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>enter</i> <i>enter</i>
</td> </td>
<td>Activates the focused slide link.</td> <td>Activates the focused slide link.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>space</i> <i>space</i>
</td> </td>
<td>Activates the focused slide link.</td> <td>Activates the focused slide link.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>right arrow</i> <i>right arrow</i>
</td> </td>
<td>Moves focus to the next slide link.</td> <td>Moves focus to the next slide link.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>left arrow</i> <i>left arrow</i>
</td> </td>
<td>Moves focus to the previous slide link.</td> <td>Moves focus to the previous slide link.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>home</i> <i>home</i>
</td> </td>
<td>Moves focus to the first slide link.</td> <td>Moves focus to the first slide link.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>end</i> <i>end</i>
</td> </td>
<td>Moves focus to the last slide link.</td> <td>Moves focus to the last slide link.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

11
pages/carousel/index.vue
View File

@ -23,7 +23,7 @@
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="mb-3"> <div class="mb-3">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -50,7 +50,7 @@
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="mb-3"> <div class="mb-3">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -77,7 +77,7 @@
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="mb-3"> <div class="mb-3">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -124,7 +124,8 @@ export default {
numVisible: 1, numVisible: 1,
numScroll: 1 numScroll: 1
} }
] ],
baseUrl: '/'
}; };
}, },
productService: null, productService: null,
@ -133,6 +134,8 @@ export default {
}, },
mounted() { mounted() {
this.productService.getProductsSmall().then((data) => (this.products = data.slice(0, 9))); this.productService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
components: { components: {
CarouselDoc: CarouselDoc CarouselDoc: CarouselDoc

975
pages/cascadeselect/CascadeSelectDoc.vue
View File

File diff suppressed because it is too large Load Diff

2
pages/chart/BarChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" /></ClientOnly> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" />
</template> </template>
<script> <script>

2
pages/chart/ComboChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" /></ClientOnly> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" />
</template> </template>
<script> <script>

2
pages/chart/DoughnutChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" /></ClientOnly> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" />
</template> </template>
<script> <script>

2
pages/chart/LineChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" /></ClientOnly> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" />
</template> </template>
<script> <script>

2
pages/chart/PieChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" /></ClientOnly> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" />
</template> </template>
<script> <script>

2
pages/chart/PolarAreaChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" /></ClientOnly> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" />
</template> </template>
<script> <script>

2
pages/chart/RadarChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ClientOnly><AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" /></ClientOnly> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" />
</template> </template>
<script> <script>

426
pages/checkbox/CheckboxDoc.vue
View File

@ -1,29 +1,28 @@
<template> <template>
<ClientOnly <AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue">
><AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Checkbox from 'primevue/checkbox'; import Checkbox from 'primevue/checkbox';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p> <p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>
<pre v-code><code> <pre v-code><code>
&lt;Checkbox v-model="checked" :binary="true" /&gt; &lt;Checkbox v-model="checked" :binary="true" /&gt;
</code></pre> </code></pre>
<h5>Multiple Values</h5> <h5>Multiple Values</h5>
<p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p> <p>Multiple mode is enabled by default, v-model property refers to an array to bind the selected values.</p>
<pre v-code><code> <pre v-code><code>
&lt;Checkbox name="city" value="Chicago" v-model="cities" /&gt; &lt;Checkbox name="city" value="Chicago" v-model="cities" /&gt;
&lt;Checkbox name="city" value="Los Angeles" v-model="cities" /&gt; &lt;Checkbox name="city" value="Los Angeles" v-model="cities" /&gt;
&lt;Checkbox name="city" value="New York" v-model="cities" /&gt; &lt;Checkbox name="city" value="New York" v-model="cities" /&gt;
@ -31,7 +30,7 @@ import Checkbox from 'primevue/checkbox';
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -42,187 +41,187 @@ export default {
</code></pre> </code></pre>
<p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.</p> <p>As v-model is two-way binding enabled, prepopulating the model array with values is enough to display the related checkboxes as checked by default.</p>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p> <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>value</td> <td>value</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Value of the checkbox.</td> <td>Value of the checkbox.</td>
</tr> </tr>
<tr> <tr>
<td>modelValue</td> <td>modelValue</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Value binding of the checkbox.</td> <td>Value binding of the checkbox.</td>
</tr> </tr>
<tr> <tr>
<td>name</td> <td>name</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Name of the input element.</td> <td>Name of the input element.</td>
</tr> </tr>
<tr> <tr>
<td>binary</td> <td>binary</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Allows to select a boolean value instead of multiple values.</td> <td>Allows to select a boolean value instead of multiple values.</td>
</tr> </tr>
<tr> <tr>
<td>trueValue</td> <td>trueValue</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Value in checked state.</td> <td>Value in checked state.</td>
</tr> </tr>
<tr> <tr>
<td>falseValue</td> <td>falseValue</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Value in unchecked state.</td> <td>Value in unchecked state.</td>
</tr> </tr>
<tr> <tr>
<td>disabled</td> <td>disabled</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When present, it specifies that the element should be disabled.</td> <td>When present, it specifies that the element should be disabled.</td>
</tr> </tr>
<tr> <tr>
<td>readonly</td> <td>readonly</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When present, it specifies that an input field is read-only.</td> <td>When present, it specifies that an input field is read-only.</td>
</tr> </tr>
<tr> <tr>
<td>required</td> <td>required</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When present, it specifies that the element is required.</td> <td>When present, it specifies that the element is required.</td>
</tr> </tr>
<tr> <tr>
<td>tabindex</td> <td>tabindex</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Index of the element in tabbing order.</td> <td>Index of the element in tabbing order.</td>
</tr> </tr>
<tr> <tr>
<td>inputId</td> <td>inputId</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Identifier of the underlying input element.</td> <td>Identifier of the underlying input element.</td>
</tr> </tr>
<tr> <tr>
<td>inputClass</td> <td>inputClass</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Style class of the input field.</td> <td>Style class of the input field.</td>
</tr> </tr>
<tr> <tr>
<td>inputStyle</td> <td>inputStyle</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Inline style of the input field.</td> <td>Inline style of the input field.</td>
</tr> </tr>
<tr> <tr>
<td>inputProps</td> <td>inputProps</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td> <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr> </tr>
<tr> <tr>
<td>aria-label</td> <td>aria-label</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Defines a string value that labels an interactive element.</td> <td>Defines a string value that labels an interactive element.</td>
</tr> </tr>
<tr> <tr>
<td>aria-labelledby</td> <td>aria-labelledby</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td> <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<p>In addition to the following events, any other valid events such as focus and blur are passed implicitly.</p> <p>In addition to the following events, any other valid events such as focus and blur are passed implicitly.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>click</td> <td>click</td>
<td>event: Browser event</td> <td>event: Browser event</td>
<td>Callback to invoke on value click.</td> <td>Callback to invoke on value click.</td>
</tr> </tr>
<tr> <tr>
<td>change</td> <td>change</td>
<td>event: Browser event</td> <td>event: Browser event</td>
<td>Callback to invoke on value change.</td> <td>Callback to invoke on value change.</td>
</tr> </tr>
<tr> <tr>
<td>input</td> <td>input</td>
<td>value: New value</td> <td>value: New value</td>
<td>Callback to invoke on value change.</td> <td>Callback to invoke on value change.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-checkbox</td> <td>p-checkbox</td>
<td>Container element</td> <td>Container element</td>
</tr> </tr>
<tr> <tr>
<td>p-checkbox-box</td> <td>p-checkbox-box</td>
<td>Container of icon.</td> <td>Container of icon.</td>
</tr> </tr>
<tr> <tr>
<td>p-checkbox-icon</td> <td>p-checkbox-icon</td>
<td>Icon element.</td> <td>Icon element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using
<i>aria-labelledby</i>, <i>aria-label</i> props. <i>aria-labelledby</i>, <i>aria-label</i> props.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;label for="chkbox1"&gt;Remember Me&lt;/label&gt; &lt;label for="chkbox1"&gt;Remember Me&lt;/label&gt;
&lt;Checkbox inputId="chkbox1" /&gt; &lt;Checkbox inputId="chkbox1" /&gt;
@ -233,32 +232,31 @@ export default {
</code></pre> </code></pre>
<h6>Keyboard Support</h6> <h6>Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><i>tab</i></td> <td><i>tab</i></td>
<td>Moves focus to the checkbox.</td> <td>Moves focus to the checkbox.</td>
</tr> </tr>
<tr> <tr>
<td><i>space</i></td> <td><i>space</i></td>
<td>Toggles the checked state.</td> <td>Toggles the checked state.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

288
pages/chip/ChipDoc.vue
View File

@ -1,179 +1,177 @@
<template> <template>
<ClientOnly <AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue">
><AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Chip from 'primevue/chip'; import Chip from 'primevue/chip';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/chip/chip.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/chip/chip.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Chip can display labels, icons and images.</p> <p>Chip can display labels, icons and images.</p>
<pre v-code><code> <pre v-code><code>
&lt;Chip label="Text Only" /&gt; &lt;Chip label="Text Only" /&gt;
&lt;Chip label="Text with icon" icon="pi pi-check" /&gt; &lt;Chip label="Text with icon" icon="pi pi-check" /&gt;
&lt;Chip label="Text with image" image="user.png" /&gt; &lt;Chip label="Text with image" image="user.png" /&gt;
</code></pre> </code></pre>
<h5>Removable</h5> <h5>Removable</h5>
<p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i> event is available to get notified when a chip is hidden.</p> <p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i> event is available to get notified when a chip is hidden.</p>
<pre v-code><code> <pre v-code><code>
&lt;Chip label="Text" removable /&gt; &lt;Chip label="Text" removable /&gt;
</code></pre> </code></pre>
<h5>Templating</h5> <h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p> <p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<pre v-code><code> <pre v-code><code>
&lt;Chip&gt; &lt;Chip&gt;
Content Content
&lt;/Chip&gt; &lt;/Chip&gt;
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>label</td> <td>label</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Defines the text to display.</td> <td>Defines the text to display.</td>
</tr> </tr>
<tr> <tr>
<td>icon</td> <td>icon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Defines the icon to display.</td> <td>Defines the icon to display.</td>
</tr> </tr>
<tr> <tr>
<td>image</td> <td>image</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Defines the image to display.</td> <td>Defines the image to display.</td>
</tr> </tr>
<tr> <tr>
<td>removable</td> <td>removable</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Whether to display a remove icon.</td> <td>Whether to display a remove icon.</td>
</tr> </tr>
<tr> <tr>
<td>removeIcon</td> <td>removeIcon</td>
<td>string</td> <td>string</td>
<td>pi pi-times-circle</td> <td>pi pi-times-circle</td>
<td>Icon of the remove element.</td> <td>Icon of the remove element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>remove</td> <td>remove</td>
<td>event: Browser event</td> <td>event: Browser event</td>
<td>Callback to invoke when a chip is removed.</td> <td>Callback to invoke when a chip is removed.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-chip</td> <td>p-chip</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-chip-image</td> <td>p-chip-image</td>
<td>Container element in image mode.</td> <td>Container element in image mode.</td>
</tr> </tr>
<tr> <tr>
<td>p-chip-text</td> <td>p-chip-text</td>
<td>Text of the chip.</td> <td>Text of the chip.</td>
</tr> </tr>
<tr> <tr>
<td>p-chip-remove-icon</td> <td>p-chip-remove-icon</td>
<td>Remove icon.</td> <td>Remove icon.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have a Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have a
<i>tabindex</i> and focusable with the tab key. <i>tabindex</i> and focusable with the tab key.
</p> </p>
<h6>Keyboard Support</h6> <h6>Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>backspace</i> <i>backspace</i>
</td> </td>
<td>Hides removable.</td> <td>Hides removable.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>enter</i> <i>enter</i>
</td> </td>
<td>Hides removable.</td> <td>Hides removable.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

496
pages/chips/ChipsDoc.vue
View File

@ -1,222 +1,221 @@
<template> <template>
<ClientOnly <AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue">
><AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Chips from 'primevue/chips'; import Chips from 'primevue/chips';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/chips/chips.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/chips/chips.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>An array as the value can be bound using the standard v-model directive.</p> <p>An array as the value can be bound using the standard v-model directive.</p>
<pre v-code><code> <pre v-code><code>
&lt;Chips v-model="value" /&gt; &lt;Chips v-model="value" /&gt;
</code></pre> </code></pre>
<h5>Custom Content</h5> <h5>Custom Content</h5>
<p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p> <p>A chip is customized using the <i>chip</i> template where the chip value is passed to the slotProps with the value property.</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;Chips v-model="value"&gt; &lt;Chips v-model="value"&gt;
&lt;template #chip="slotProps"&gt; &lt;template #chip="slotProps"&gt;
&lt;div&gt; &lt;div&gt;
&lt;span&gt;{{slotProps.value}} - (active) &lt;/span&gt; &lt;span&gt;&#123;&#123;slotProps.value&#125;&#125; - (active) &lt;/span&gt;
&lt;i class="pi pi-user-plus" style="font-size: 14px"&gt;&lt;/i&gt; &lt;i class="pi pi-user-plus" style="font-size: 14px"&gt;&lt;/i&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Chips&gt; &lt;/Chips&gt;
</template>
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p> <p>Any property such as name and placeholder are passed to the underlying input element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>modelValue</td> <td>modelValue</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>Value of the component.</td> <td>Value of the component.</td>
</tr> </tr>
<tr> <tr>
<td>max</td> <td>max</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Maximum number of entries allowed.</td> <td>Maximum number of entries allowed.</td>
</tr> </tr>
<tr> <tr>
<td>separator</td> <td>separator</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td> <td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td>
</tr> </tr>
<tr> <tr>
<td>addOnBlur</td> <td>addOnBlur</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Whether to add an item when the input loses focus.</td> <td>Whether to add an item when the input loses focus.</td>
</tr> </tr>
<tr> <tr>
<td>allowDuplicate</td> <td>allowDuplicate</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to allow duplicate values or not.</td> <td>Whether to allow duplicate values or not.</td>
</tr> </tr>
<tr> <tr>
<td>disabled</td> <td>disabled</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When present, it specifies that the element should be disabled.</td> <td>When present, it specifies that the element should be disabled.</td>
</tr> </tr>
<tr> <tr>
<td>placeholder</td> <td>placeholder</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Placeholder text for the input.</td> <td>Placeholder text for the input.</td>
</tr> </tr>
<tr> <tr>
<td>inputId</td> <td>inputId</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the component input field.</td> <td>Style class of the component input field.</td>
</tr> </tr>
<tr> <tr>
<td>inputClass</td> <td>inputClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the input field.</td> <td>Style class of the input field.</td>
</tr> </tr>
<tr> <tr>
<td>inputStyle</td> <td>inputStyle</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Inline style of the input field.</td> <td>Inline style of the input field.</td>
</tr> </tr>
<tr> <tr>
<td>inputProps</td> <td>inputProps</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td> <td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
</tr> </tr>
<tr> <tr>
<td>removeTokenIcon</td> <td>removeTokenIcon</td>
<td>string</td> <td>string</td>
<td>pi pi-times-circle</td> <td>pi pi-times-circle</td>
<td>Icon to display in chip remove action.</td> <td>Icon to display in chip remove action.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p> <p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>add</td> <td>add</td>
<td> <td>
originalEvent: Browser event <br /> originalEvent: Browser event <br />
value: Added item value value: Added item value
</td> </td>
<td>Callback to invoke when a chip is added.</td> <td>Callback to invoke when a chip is added.</td>
</tr> </tr>
<tr> <tr>
<td>remove</td> <td>remove</td>
<td> <td>
originalEvent: Browser event <br /> originalEvent: Browser event <br />
value: Removed item value value: Removed item value
</td> </td>
<td>Callback to invoke when a chip is removed.</td> <td>Callback to invoke when a chip is removed.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>chip</td> <td>chip</td>
<td>value: Value of the component</td> <td>value: Value of the component</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-chips</td> <td>p-chips</td>
<td>Container element</td> <td>Container element</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-token</td> <td>p-chips-token</td>
<td>Chip element container.</td> <td>Chip element container.</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-token-icon</td> <td>p-chips-token-icon</td>
<td>Icon of a chip.</td> <td>Icon of a chip.</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-token-label</td> <td>p-chips-token-label</td>
<td>label of a chip.</td> <td>label of a chip.</td>
</tr> </tr>
<tr> <tr>
<td>p-chips-input-token</td> <td>p-chips-input-token</td>
<td>Container of input element.</td> <td>Container of input element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Chip list uses <i>listbox</i> role with Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to
<i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip. horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;label for="chips1"&gt;Tags&lt;/label&gt; &lt;label for="chips1"&gt;Tags&lt;/label&gt;
&lt;Chips inputId="chips1" /&gt; &lt;Chips inputId="chips1" /&gt;
@ -227,66 +226,65 @@ import Chips from 'primevue/chips';
</code></pre> </code></pre>
<h6>Input Field Keyboard Support</h6> <h6>Input Field Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><i>tab</i></td> <td><i>tab</i></td>
<td>Moves focus to the input element</td> <td>Moves focus to the input element</td>
</tr> </tr>
<tr> <tr>
<td><i>enter</i></td> <td><i>enter</i></td>
<td>Adds a new chips using the input field value.</td> <td>Adds a new chips using the input field value.</td>
</tr> </tr>
<tr> <tr>
<td><i>backspace</i></td> <td><i>backspace</i></td>
<td>Deletes the previous chip if the input field is empty.</td> <td>Deletes the previous chip if the input field is empty.</td>
</tr> </tr>
<tr> <tr>
<td><i>left arrow</i></td> <td><i>left arrow</i></td>
<td>Moves focus to the previous chip if available and input field is empty.</td> <td>Moves focus to the previous chip if available and input field is empty.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h6>Chip Keyboard Support</h6> <h6>Chip Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><i>left arrow</i></td> <td><i>left arrow</i></td>
<td>Moves focus to the previous chip if available.</td> <td>Moves focus to the previous chip if available.</td>
</tr> </tr>
<tr> <tr>
<td><i>right arrow</i></td> <td><i>right arrow</i></td>
<td>Moves focus to the next chip, if there is none then input field receives the focus.</td> <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
</tr> </tr>
<tr> <tr>
<td><i>backspace</i></td> <td><i>backspace</i></td>
<td>Deletes the chips and adds focus to the input field.</td> <td>Deletes the chips and adds focus to the input field.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

538
pages/colorpicker/ColorPickerDoc.vue
View File

@ -1,27 +1,26 @@
<template> <template>
<ClientOnly <AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue">
><AppDoc name="ColorPickerDemo" :sources="sources" :extFiles="extFiles" github="colorpicker/ColorPickerDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import ColorPicker from 'primevue/colorpicker'; import ColorPicker from 'primevue/colorpicker';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/colorpicker/colorpicker.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/colorpicker/colorpicker.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p> <p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
<pre v-code><code> <pre v-code><code>
&lt;ColorPicker v-model="color" /&gt; &lt;ColorPicker v-model="color" /&gt;
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -32,278 +31,277 @@ export default {
</code></pre> </code></pre>
<h5>Inline and Overlay</h5> <h5>Inline and Overlay</h5>
<p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p> <p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
<pre v-code><code> <pre v-code><code>
&lt;ColorPicker v-model="color" :inline="true" /&gt; &lt;ColorPicker v-model="color" :inline="true" /&gt;
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>modelValue</td> <td>modelValue</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Value of the component.</td> <td>Value of the component.</td>
</tr> </tr>
<tr> <tr>
<td>defaultColor</td> <td>defaultColor</td>
<td>string</td> <td>string</td>
<td>ff0000</td> <td>ff0000</td>
<td>Initial color to display when value is not defined.</td> <td>Initial color to display when value is not defined.</td>
</tr> </tr>
<tr> <tr>
<td>inline</td> <td>inline</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Whether to display as an overlay or not.</td> <td>Whether to display as an overlay or not.</td>
</tr> </tr>
<tr> <tr>
<td>format</td> <td>format</td>
<td>string</td> <td>string</td>
<td>hex</td> <td>hex</td>
<td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td> <td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td>
</tr> </tr>
<tr> <tr>
<td>disabled</td> <td>disabled</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When present, it specifies that the component should be disabled.</td> <td>When present, it specifies that the component should be disabled.</td>
</tr> </tr>
<tr> <tr>
<td>tabindex</td> <td>tabindex</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Index of the element in tabbing order.</td> <td>Index of the element in tabbing order.</td>
</tr> </tr>
<tr> <tr>
<td>baseZIndex</td> <td>baseZIndex</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Base zIndex value to use in layering.</td> <td>Base zIndex value to use in layering.</td>
</tr> </tr>
<tr> <tr>
<td>autoZIndex</td> <td>autoZIndex</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to automatically manage layering.</td> <td>Whether to automatically manage layering.</td>
</tr> </tr>
<tr> <tr>
<td>panelClass</td> <td>panelClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the overlay panel.</td> <td>Style class of the overlay panel.</td>
</tr> </tr>
<tr> <tr>
<td>appendTo</td> <td>appendTo</td>
<td>string</td> <td>string</td>
<td>body</td> <td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td> <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>change</td> <td>change</td>
<td> <td>
event.originalEvent: Browser event <br /> event.originalEvent: Browser event <br />
event.value: Selected color event.value: Selected color
</td> </td>
<td>Callback to invoke when a color is selected.</td> <td>Callback to invoke when a color is selected.</td>
</tr> </tr>
<tr> <tr>
<td>show</td> <td>show</td>
<td>-</td> <td>-</td>
<td>Callback to invoke when popup is shown.</td> <td>Callback to invoke when popup is shown.</td>
</tr> </tr>
<tr> <tr>
<td>hide</td> <td>hide</td>
<td>-</td> <td>-</td>
<td>Callback to invoke when popup is hidden.</td> <td>Callback to invoke when popup is hidden.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list style classed of the component.</p> <p>Following is the list style classed of the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-colorpicker</td> <td>p-colorpicker</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-colorpicker-overlay</td> <td>p-colorpicker-overlay</td>
<td>Container element in overlay mode.</td> <td>Container element in overlay mode.</td>
</tr> </tr>
<tr> <tr>
<td>p-colorpicker-preview</td> <td>p-colorpicker-preview</td>
<td>Preview input in overlay mode.</td> <td>Preview input in overlay mode.</td>
</tr> </tr>
<tr> <tr>
<td>p-colorpicker-panel</td> <td>p-colorpicker-panel</td>
<td>Panel element of the colorpicker.</td> <td>Panel element of the colorpicker.</td>
</tr> </tr>
<tr> <tr>
<td>p-colorpicker-content</td> <td>p-colorpicker-content</td>
<td>Wrapper that contains color and hue sections.</td> <td>Wrapper that contains color and hue sections.</td>
</tr> </tr>
<tr> <tr>
<td>p-colorpicker-color-selector</td> <td>p-colorpicker-color-selector</td>
<td>Color selector container.</td> <td>Color selector container.</td>
</tr> </tr>
<tr> <tr>
<td>p-colorpicker-color</td> <td>p-colorpicker-color</td>
<td>Color element.</td> <td>Color element.</td>
</tr> </tr>
<tr> <tr>
<td>p-colorpicker-color-handle</td> <td>p-colorpicker-color-handle</td>
<td>Handle of the color element.</td> <td>Handle of the color element.</td>
</tr> </tr>
<tr> <tr>
<td>p-colorpicker-hue</td> <td>p-colorpicker-hue</td>
<td>Hue slider.</td> <td>Hue slider.</td>
</tr> </tr>
<tr> <tr>
<td>p-colorpicker-hue-handle</td> <td>p-colorpicker-hue-handle</td>
<td>Handle of the hue slider.</td> <td>Handle of the hue slider.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers.
readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
</p> </p>
<h6>Closed State Keyboard Support of Popup ColorPicker</h6> <h6>Closed State Keyboard Support of Popup ColorPicker</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><i>tab</i></td> <td><i>tab</i></td>
<td>Moves focus to the color picker button.</td> <td>Moves focus to the color picker button.</td>
</tr> </tr>
<tr> <tr>
<td><i>space</i></td> <td><i>space</i></td>
<td>Opens the popup and moves focus to the color slider.</td> <td>Opens the popup and moves focus to the color slider.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h6>Popup Keyboard Support</h6> <h6>Popup Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><i>enter</i></td> <td><i>enter</i></td>
<td>Selects the color and closes the popup.</td> <td>Selects the color and closes the popup.</td>
</tr> </tr>
<tr> <tr>
<td><i>space</i></td> <td><i>space</i></td>
<td>Selects the color and closes the popup.</td> <td>Selects the color and closes the popup.</td>
</tr> </tr>
<tr> <tr>
<td><i>escape</i></td> <td><i>escape</i></td>
<td>Closes the popup, moves focus to the input.</td> <td>Closes the popup, moves focus to the input.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h6>Color Picker Slider</h6> <h6>Color Picker Slider</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><i>arrow keys</i></td> <td><i>arrow keys</i></td>
<td>Changes color.</td> <td>Changes color.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h6>Hue Slider</h6> <h6>Hue Slider</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<span class="inline-flex flex-column"> <span class="inline-flex flex-column">
<i class="mb-1">up arrow</i> <i class="mb-1">up arrow</i>
<i>down arrow</i> <i>down arrow</i>
</span> </span>
</td> </td>
<td>Changes hue.</td> <td>Changes hue.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

630
pages/confirmdialog/ConfirmDialogDoc.vue
View File

@ -1,9 +1,8 @@
<template> <template>
<ClientOnly <AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue">
><AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue"> <h5>ConfirmationService</h5>
<h5>ConfirmationService</h5> <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p> <pre v-code.script><code>
<pre v-code.script><code>
import {createApp} from 'vue'; import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice'; import ConfirmationService from 'primevue/confirmationservice';
@ -12,32 +11,32 @@ app.use(ConfirmationService);
</code></pre> </code></pre>
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import ConfirmDialog from 'primevue/confirmdialog'; import ConfirmDialog from 'primevue/confirmdialog';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/confirmdialog/confirmdialog.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/confirmdialog/confirmdialog.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p> <p>
ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component where it can be shared ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component where it can be shared by
by any component within the application. any component within the application.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt; &lt;ConfirmDialog&gt;&lt;/ConfirmDialog&gt;
&lt;Button @click="delete()" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt; &lt;Button @click="delete()" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
methods: { methods: {
delete() { delete() {
@ -64,9 +63,9 @@ export default {
</code></pre> </code></pre>
<h5>Composition API</h5> <h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p> <p>The service can be injected with the <i>useConfirm</i> function.</p>
<pre v-code.script><code> <pre v-code.script><code>
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { useConfirm } from "primevue/useconfirm"; import { useConfirm } from "primevue/useconfirm";
@ -95,9 +94,9 @@ export default defineComponent({
</code></pre> </code></pre>
<h5>Close Confirmation</h5> <h5>Close Confirmation</h5>
<p>The dialog can also be hidden programmatically using the <i>close</i> method.</p> <p>The dialog can also be hidden programmatically using the <i>close</i> method.</p>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
methods: { methods: {
discard() { discard() {
@ -108,268 +107,268 @@ export default {
</code></pre> </code></pre>
<h5>Templating</h5> <h5>Templating</h5>
<p>Templating allows customizing the content where the message instance is available as the implicit variable.</p> <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;ConfirmPopup group="demo"> &lt;ConfirmPopup group="demo">
&lt;template #message="slotProps"&gt; &lt;template #message="slotProps"&gt;
&lt;div class="flex 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="pl-2"&gt;{{slotProps.message.message}}&lt;/p&gt; &lt;p class="pl-2"&gt;&#123;&#123;slotProps.message.message&#125;&#125;&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/ConfirmPopup&gt; &lt;/ConfirmPopup&gt;
</template>
</code></pre> </code></pre>
<h5>Responsive</h5> <h5>Responsive</h5>
<p> <p>
ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
<i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen. <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;ConfirmDialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;&lt;/ConfirmDialog&gt; &lt;ConfirmDialog :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;&lt;/ConfirmDialog&gt;
</code></pre> </code></pre>
<h5>Confirmation Options</h5> <h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p> <p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>message</td> <td>message</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Message of the confirmation.</td> <td>Message of the confirmation.</td>
</tr> </tr>
<tr> <tr>
<td>group</td> <td>group</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td> <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr> </tr>
<tr> <tr>
<td>icon</td> <td>icon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon to display next to the message.</td> <td>Icon to display next to the message.</td>
</tr> </tr>
<tr> <tr>
<td>header</td> <td>header</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Header text of the dialog.</td> <td>Header text of the dialog.</td>
</tr> </tr>
<tr> <tr>
<td>position</td> <td>position</td>
<td>string</td> <td>string</td>
<td>center</td> <td>center</td>
<td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td> <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
</tr> </tr>
<tr> <tr>
<td>accept</td> <td>accept</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when action is confirmed.</td> <td>Callback to execute when action is confirmed.</td>
</tr> </tr>
<tr> <tr>
<td>reject</td> <td>reject</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when action is rejected.</td> <td>Callback to execute when action is rejected.</td>
</tr> </tr>
<tr> <tr>
<td>onShow</td> <td>onShow</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when dialog is shown.</td> <td>Callback to execute when dialog is shown.</td>
</tr> </tr>
<tr> <tr>
<td>onHide</td> <td>onHide</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when dialog is hidden.</td> <td>Callback to execute when dialog is hidden.</td>
</tr> </tr>
<tr> <tr>
<td>acceptLabel</td> <td>acceptLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>rejectLabel</td> <td>rejectLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>acceptIcon</td> <td>acceptIcon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon of the accept button.</td> <td>Icon of the accept button.</td>
</tr> </tr>
<tr> <tr>
<td>rejectIcon</td> <td>rejectIcon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon of the reject button.</td> <td>Icon of the reject button.</td>
</tr> </tr>
<tr> <tr>
<td>acceptClass</td> <td>acceptClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the accept button.</td> <td>Style class of the accept button.</td>
</tr> </tr>
<tr> <tr>
<td>rejectClass</td> <td>rejectClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the reject button.</td> <td>Style class of the reject button.</td>
</tr> </tr>
<tr> <tr>
<td>blockScroll</td> <td>blockScroll</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether background scroll should be blocked when dialog is visible.</td> <td>Whether background scroll should be blocked when dialog is visible.</td>
</tr> </tr>
<tr> <tr>
<td>defaultFocus</td> <td>defaultFocus</td>
<td>string</td> <td>string</td>
<td>accept</td> <td>accept</td>
<td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td> <td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>ConfirmationService</h5> <h5>ConfirmationService</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>require</td> <td>require</td>
<td>confirm: Confirmation Object</td> <td>confirm: Confirmation Object</td>
<td>Displays the dialog using the confirmation object options.</td> <td>Displays the dialog using the confirmation object options.</td>
</tr> </tr>
<tr> <tr>
<td>close</td> <td>close</td>
<td>-</td> <td>-</td>
<td>Hides the dialog without invoking accept or reject callbacks.</td> <td>Hides the dialog without invoking accept or reject callbacks.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>group</td> <td>group</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td> <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr> </tr>
<tr> <tr>
<td>breakpoints</td> <td>breakpoints</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Object literal to define widths per screen size.</td> <td>Object literal to define widths per screen size.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>message</td> <td>message</td>
<td>-</td> <td>-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p> <p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-confirm-dialog</td> <td>p-confirm-dialog</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-confirm-dialog-message</td> <td>p-confirm-dialog-message</td>
<td>Container of message.</td> <td>Container of message.</td>
</tr> </tr>
<tr> <tr>
<td>p-confirm-dialog-icon</td> <td>p-confirm-dialog-icon</td>
<td>Icon container inside content.</td> <td>Icon container inside content.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
ConfirmDialog component uses <i>alertdialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default ConfirmDialog component uses <i>alertdialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default
behavior. In addition <i>aria-modal</i> is added since focus is kept within the popup. behavior. In addition <i>aria-modal</i> is added since focus is kept within the popup.
</p> </p>
<p> <p>
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
the trigger and the dialog is defined. trigger and the dialog is defined.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;ConfirmDialog id="confirm" /&gt; &lt;ConfirmDialog id="confirm" /&gt;
&lt;Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"&gt;&lt;/Button&gt; &lt;Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"&gt;&lt;/Button&gt;
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
setup() { setup() {
const confirm = useConfirm(); const confirm = useConfirm();
const isVisible = ref(false); const isVisible = ref(false);
@ -392,66 +391,65 @@ setup() {
</code></pre> </code></pre>
<h6>Overlay Keyboard Support</h6> <h6>Overlay Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>tab</i> <i>tab</i>
</td> </td>
<td>Moves focus to the next the focusable element within the dialog.</td> <td>Moves focus to the next the focusable element within the dialog.</td>
</tr> </tr>
<tr> <tr>
<td><i>shift</i> + <i>tab</i></td> <td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous the focusable element within the dialog.</td> <td>Moves focus to the previous the focusable element within the dialog.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>escape</i> <i>escape</i>
</td> </td>
<td>Closes the dialog.</td> <td>Closes the dialog.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h6>Buttons Keyboard Support</h6> <h6>Buttons Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>enter</i> <i>enter</i>
</td> </td>
<td>Closes the dialog.</td> <td>Closes the dialog.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>space</i> <i>space</i>
</td> </td>
<td>Closes the dialog.</td> <td>Closes the dialog.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

591
pages/confirmpopup/ConfirmPopupDoc.vue
View File

@ -1,9 +1,8 @@
<template> <template>
<ClientOnly <AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue">
><AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue"> <h5>ConfirmationService</h5>
<h5>ConfirmationService</h5> <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
<p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p> <pre v-code.script><code>
<pre v-code.script><code>
import {createApp} from 'vue'; import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice'; import ConfirmationService from 'primevue/confirmationservice';
@ -12,29 +11,29 @@ app.use(ConfirmationService);
</code></pre> </code></pre>
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import ConfirmPopup from 'primevue/confirmpopup'; import ConfirmPopup from 'primevue/confirmpopup';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/confirmpopup/confirmpopup.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/confirmpopup/confirmpopup.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p> <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
<pre v-code><code> <pre v-code><code>
&lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt; &lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
&lt;Button @click="delete($event)" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt; &lt;Button @click="delete($event)" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
methods: { methods: {
delete(event) { delete(event) {
@ -61,9 +60,9 @@ export default {
</code></pre> </code></pre>
<h5>Composition API</h5> <h5>Composition API</h5>
<p>The service can be injected with the <i>useConfirm</i> function.</p> <p>The service can be injected with the <i>useConfirm</i> function.</p>
<pre v-code.script><code> <pre v-code.script><code>
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { useConfirm } from "primevue/useconfirm"; import { useConfirm } from "primevue/useconfirm";
@ -96,9 +95,9 @@ export default defineComponent({
</code></pre> </code></pre>
<h5>Close Confirmation</h5> <h5>Close Confirmation</h5>
<p>The popup can also be hidden programmatically using the <i>close</i> method.</p> <p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
methods: { methods: {
discard() { discard() {
@ -109,248 +108,247 @@ export default {
</code></pre> </code></pre>
<h5>Templating</h5> <h5>Templating</h5>
<p>Templating allows customizing the content where the message instance is available as the implicit variable.</p> <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;ConfirmPopup group="demo"> &lt;ConfirmPopup group="demo">
&lt;template #message="slotProps"&gt; &lt;template #message="slotProps"&gt;
&lt;div class="flex 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="pl-2"&gt;{{slotProps.message.message}}&lt;/p&gt; &lt;p class="pl-2"&gt;&#123;&#123;slotProps.message.message&#125;&#125;&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/ConfirmPopup&gt; &lt;/ConfirmPopup&gt;
</template>
</code></pre> </code></pre>
<h5>Confirmation Options</h5> <h5>Confirmation Options</h5>
<p>ConfirmDialog can be customized with various options listed here.</p> <p>ConfirmDialog can be customized with various options listed here.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>target</td> <td>target</td>
<td>DomElement</td> <td>DomElement</td>
<td>null</td> <td>null</td>
<td>Element to align the overlay.</td> <td>Element to align the overlay.</td>
</tr> </tr>
<tr> <tr>
<td>message</td> <td>message</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Message of the confirmation.</td> <td>Message of the confirmation.</td>
</tr> </tr>
<tr> <tr>
<td>group</td> <td>group</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td> <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr> </tr>
<tr> <tr>
<td>icon</td> <td>icon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon to display next to the message.</td> <td>Icon to display next to the message.</td>
</tr> </tr>
<tr> <tr>
<td>accept</td> <td>accept</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when action is confirmed.</td> <td>Callback to execute when action is confirmed.</td>
</tr> </tr>
<tr> <tr>
<td>reject</td> <td>reject</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when action is rejected.</td> <td>Callback to execute when action is rejected.</td>
</tr> </tr>
<tr> <tr>
<td>onShow</td> <td>onShow</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when popup is shown.</td> <td>Callback to execute when popup is shown.</td>
</tr> </tr>
<tr> <tr>
<td>onHide</td> <td>onHide</td>
<td>Function</td> <td>Function</td>
<td>null</td> <td>null</td>
<td>Callback to execute when popup is hidden.</td> <td>Callback to execute when popup is hidden.</td>
</tr> </tr>
<tr> <tr>
<td>acceptLabel</td> <td>acceptLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the accept button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>rejectLabel</td> <td>rejectLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the reject button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>acceptIcon</td> <td>acceptIcon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon of the accept button.</td> <td>Icon of the accept button.</td>
</tr> </tr>
<tr> <tr>
<td>rejectIcon</td> <td>rejectIcon</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Icon of the reject button.</td> <td>Icon of the reject button.</td>
</tr> </tr>
<tr> <tr>
<td>acceptClass</td> <td>acceptClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the accept button.</td> <td>Style class of the accept button.</td>
</tr> </tr>
<tr> <tr>
<td>rejectClass</td> <td>rejectClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the reject button.</td> <td>Style class of the reject button.</td>
</tr> </tr>
<tr> <tr>
<td>defaultFocus</td> <td>defaultFocus</td>
<td>string</td> <td>string</td>
<td>accept</td> <td>accept</td>
<td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td> <td>Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>ConfirmationService</h5> <h5>ConfirmationService</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>require</td> <td>require</td>
<td>confirm: Confirmation Object</td> <td>confirm: Confirmation Object</td>
<td>Displays the dialog using the confirmation object options.</td> <td>Displays the dialog using the confirmation object options.</td>
</tr> </tr>
<tr> <tr>
<td>close</td> <td>close</td>
<td>-</td> <td>-</td>
<td>Hides the dialog without invoking accept or reject callbacks.</td> <td>Hides the dialog without invoking accept or reject callbacks.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>group</td> <td>group</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td> <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>message</td> <td>message</td>
<td>-</td> <td>-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p> <p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-confirm-popup</td> <td>p-confirm-popup</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-confirm-popup-content</td> <td>p-confirm-popup-content</td>
<td>Content element.</td> <td>Content element.</td>
</tr> </tr>
<tr> <tr>
<td>p-confirm-popup-icon</td> <td>p-confirm-popup-icon</td>
<td>Message icon.</td> <td>Message icon.</td>
</tr> </tr>
<tr> <tr>
<td>p-confirm-popup-message</td> <td>p-confirm-popup-message</td>
<td>Message text.</td> <td>Message text.</td>
</tr> </tr>
<tr> <tr>
<td>p-confirm-popup-footer</td> <td>p-confirm-popup-footer</td>
<td>Footer element for buttons.</td> <td>Footer element for buttons.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
ConfirmPopup component uses <i>alertdialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition ConfirmPopup component uses <i>alertdialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition
<i>aria-modal</i> is added since focus is kept within the popup. <i>aria-modal</i> is added since focus is kept within the popup.
</p> </p>
<p> <p>
When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
the trigger and the dialog is defined. trigger and the dialog is defined.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;ConfirmPopup id="confirm" aria-label="popup" /&gt; &lt;ConfirmPopup id="confirm" aria-label="popup" /&gt;
&lt;Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" /&gt; &lt;Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" /&gt;
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
setup() { setup() {
const confirm = useConfirm(); const confirm = useConfirm();
const isVisible = ref(false); const isVisible = ref(false);
@ -374,66 +372,65 @@ setup() {
</code></pre> </code></pre>
<h6>Overlay Keyboard Support</h6> <h6>Overlay Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>tab</i> <i>tab</i>
</td> </td>
<td>Moves focus to the next the focusable element within the popup.</td> <td>Moves focus to the next the focusable element within the popup.</td>
</tr> </tr>
<tr> <tr>
<td><i>shift</i> + <i>tab</i></td> <td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous the focusable element within the popup.</td> <td>Moves focus to the previous the focusable element within the popup.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>escape</i> <i>escape</i>
</td> </td>
<td>Closes the popup and moves focus to the trigger.</td> <td>Closes the popup and moves focus to the trigger.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h6>Buttons Keyboard Support</h6> <h6>Buttons Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>enter</i> <i>enter</i>
</td> </td>
<td>Triggers the action, closes the popup and moves focus to the trigger.</td> <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>space</i> <i>space</i>
</td> </td>
<td>Triggers the action, closes the popup and moves focus to the trigger.</td> <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

656
pages/contextmenu/ContextMenuDoc.vue
View File

@ -1,26 +1,25 @@
<template> <template>
<ClientOnly <AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue">
><AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import ContextMenu from 'primevue/contextmenu'; import ContextMenu from 'primevue/contextmenu';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/contextmenu/contextmenu.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/contextmenu/contextmenu.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>MenuModel</h5> <h5>MenuModel</h5>
<p>ContextMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>ContextMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>ContextMenu requires a collection of menuitems as its model.</p> <p>ContextMenu requires a collection of menuitems as its model.</p>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -160,23 +159,23 @@ export default {
</code></pre> </code></pre>
<h5>Document Menu</h5> <h5>Document Menu</h5>
<p>Setting global property attaches the context menu to the document.</p> <p>Setting global property attaches the context menu to the document.</p>
<pre v-code><code> <pre v-code><code>
&lt;ContextMenu :global="true" :model="items" /&gt; &lt;ContextMenu :global="true" :model="items" /&gt;
</code></pre> </code></pre>
<h5>Element Menu</h5> <h5>Element Menu</h5>
<p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p> <p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
<pre v-code><code> <pre v-code><code>
&lt;img alt="logo" src="/demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt; &lt;img alt="logo" src="/demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
&lt;ContextMenu ref="menu" :model="items" /&gt; &lt;ContextMenu ref="menu" :model="items" /&gt;
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -192,338 +191,337 @@ export default {
</code></pre> </code></pre>
<h5>Templating</h5> <h5>Templating</h5>
<p>ContextMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p> <p>ContextMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;ContextMenu :model="items"&gt; &lt;ContextMenu :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt; &lt;a :href="item.url"&gt;&#123;&#123;item.label&#125;&#125;&lt;/a&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/ContextMenu&gt; &lt;/ContextMenu&gt;
</template>
</code></pre> </code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p> <p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;ContextMenu :model="items"&gt; &lt;ContextMenu :model="items"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt; &lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt; &lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;&#123;&#123;route.fullPath&#125;&#125;&lt;/a&gt;
&lt;/router-link&gt; &lt;/router-link&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/ContextMenu&gt; &lt;/ContextMenu&gt;
</template>
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>model</td> <td>model</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>An array of menuitems.</td> <td>An array of menuitems.</td>
</tr> </tr>
<tr> <tr>
<td>appendTo</td> <td>appendTo</td>
<td>string</td> <td>string</td>
<td>body</td> <td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td> <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr> </tr>
<tr> <tr>
<td>baseZIndex</td> <td>baseZIndex</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Base zIndex value to use in layering.</td> <td>Base zIndex value to use in layering.</td>
</tr> </tr>
<tr> <tr>
<td>autoZIndex</td> <td>autoZIndex</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to automatically manage layering.</td> <td>Whether to automatically manage layering.</td>
</tr> </tr>
<tr> <tr>
<td>global</td> <td>global</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Attaches the menu to document instead of a particular item.</td> <td>Attaches the menu to document instead of a particular item.</td>
</tr> </tr>
<tr> <tr>
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
<tr> <tr>
<td>tabindex</td> <td>tabindex</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Index of the element in tabbing order.</td> <td>Index of the element in tabbing order.</td>
</tr> </tr>
<tr> <tr>
<td>aria-label</td> <td>aria-label</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Defines a string value that labels an interactive element.</td> <td>Defines a string value that labels an interactive element.</td>
</tr> </tr>
<tr> <tr>
<td>aria-labelledby</td> <td>aria-labelledby</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td> <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Methods</h5> <h5>Methods</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>toggle</td> <td>toggle</td>
<td>event: Browser event</td> <td>event: Browser event</td>
<td>Toggles the visibility of the menu.</td> <td>Toggles the visibility of the menu.</td>
</tr> </tr>
<tr> <tr>
<td>show</td> <td>show</td>
<td>event: Browser event</td> <td>event: Browser event</td>
<td>Shows the menu.</td> <td>Shows the menu.</td>
</tr> </tr>
<tr> <tr>
<td>hide</td> <td>hide</td>
<td>-</td> <td>-</td>
<td>Hides the menu.</td> <td>Hides the menu.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>focus</td> <td>focus</td>
<td>event</td> <td>event</td>
<td>Callback to invoke when the component receives focus.</td> <td>Callback to invoke when the component receives focus.</td>
</tr> </tr>
<tr> <tr>
<td>blur</td> <td>blur</td>
<td>event</td> <td>event</td>
<td>Callback to invoke when the component loses focus.</td> <td>Callback to invoke when the component loses focus.</td>
</tr> </tr>
<tr> <tr>
<td>before-show</td> <td>before-show</td>
<td>-</td> <td>-</td>
<td>Callback to invoke before the popup is shown.</td> <td>Callback to invoke before the popup is shown.</td>
</tr> </tr>
<tr> <tr>
<td>before-hide</td> <td>before-hide</td>
<td>-</td> <td>-</td>
<td>Callback to invoke before the popup is hidden.</td> <td>Callback to invoke before the popup is hidden.</td>
</tr> </tr>
<tr> <tr>
<td>show</td> <td>show</td>
<td>-</td> <td>-</td>
<td>Callback to invoke when the popup is shown.</td> <td>Callback to invoke when the popup is shown.</td>
</tr> </tr>
<tr> <tr>
<td>hide</td> <td>hide</td>
<td>-</td> <td>-</td>
<td>Callback to invoke when the popup is hidden.</td> <td>Callback to invoke when the popup is hidden.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>item</td> <td>item</td>
<td>item: Menuitem instance</td> <td>item: Menuitem instance</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-contextmenu</td> <td>p-contextmenu</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-contextmenu-root-list</td> <td>p-contextmenu-root-list</td>
<td>Root list element.</td> <td>Root list element.</td>
</tr> </tr>
<tr> <tr>
<td>p-submenu-list</td> <td>p-submenu-list</td>
<td>Submenu list element.</td> <td>Submenu list element.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem</td> <td>p-menuitem</td>
<td>Menuitem element.</td> <td>Menuitem element.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem-active</td> <td>p-menuitem-active</td>
<td>Active menuitem element.</td> <td>Active menuitem element.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem-content</td> <td>p-menuitem-content</td>
<td>Content of menuitem.</td> <td>Content of menuitem.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem-link</td> <td>p-menuitem-link</td>
<td>Link element of the menuitem.</td> <td>Link element of the menuitem.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem-text</td> <td>p-menuitem-text</td>
<td>Label of a menuitem.</td> <td>Label of a menuitem.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem-icon</td> <td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td> <td>Icon of a menuitem.</td>
</tr> </tr>
<tr> <tr>
<td>p-submenu-icon</td> <td>p-submenu-icon</td>
<td>Arrow icon of a submenu.</td> <td>Arrow icon of a submenu.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
ContextMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a ContextMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a
<i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a ContextMenu uses the <i>menu</i> role with an <i>aria-labelledby</i> defined as
as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu. the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
</p> </p>
<h6>Keyboard Support</h6> <h6>Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>tab</i> <i>tab</i>
</td> </td>
<td>When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence.</td> <td>When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>enter</i> <i>enter</i>
</td> </td>
<td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td> <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>space</i> <i>space</i>
</td> </td>
<td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td> <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>escape</i> <i>escape</i>
</td> </td>
<td>Closes the context menu.</td> <td>Closes the context menu.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>down arrow</i> <i>down arrow</i>
</td> </td>
<td>If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu.</td> <td>If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>up arrow</i> <i>up arrow</i>
</td> </td>
<td>If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu.</td> <td>If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>right arrow</i> <i>right arrow</i>
</td> </td>
<td>Opens a submenu if there is one available and moves focus to the first item.</td> <td>Opens a submenu if there is one available and moves focus to the first item.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>left arrow</i> <i>left arrow</i>
</td> </td>
<td>Closes a submenu and moves focus to the root item of the closed submenu.</td> <td>Closes a submenu and moves focus to the root item of the closed submenu.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>home</i> <i>home</i>
</td> </td>
<td>Moves focus to the first menuitem within the submenu.</td> <td>Moves focus to the first menuitem within the submenu.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>end</i> <i>end</i>
</td> </td>
<td>Moves focus to the last menuitem within the submenu.</td> <td>Moves focus to the last menuitem within the submenu.</td>
</tr> </tr>
<tr> <tr>
<td><i>any printable character</i></td> <td><i>any printable character</i></td>
<td>Moves focus to the menuitem whose label starts with the characters being typed.</td> <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

2
pages/datatable/ColGroup.vue
View File

@ -55,7 +55,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" /> </ClientOnly> <AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/ColResize.vue
View File

@ -33,7 +33,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" /></ClientOnly> <AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/ColToggle.vue
View File

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

2
pages/datatable/ContextMenu.vue
View File

@ -25,7 +25,7 @@
<ContextMenu ref="cm" :model="menuModel" /> <ContextMenu ref="cm" :model="menuModel" />
</div> </div>
<ClientOnly><AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" /></ClientOnly> <AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Crud.vue
View File

@ -171,7 +171,7 @@
</Dialog> </Dialog>
</div> </div>
<ClientOnly><AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" /></ClientOnly> <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/DataTableBasicDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ClientOnly><AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" /></ClientOnly> <AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" />
</template> </template>
<script> <script>

3437
pages/datatable/DataTableDoc.vue
View File

File diff suppressed because it is too large Load Diff

2
pages/datatable/DynamicColumns.vue
View File

@ -16,7 +16,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" /></ClientOnly> <AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Edit.vue
View File

@ -70,7 +70,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" /></ClientOnly> <AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Export.vue
View File

@ -24,7 +24,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" /></ClientOnly> <AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Filter.vue
View File

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

2
pages/datatable/FlexScroll.vue
View File

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

2
pages/datatable/GridLines.vue
View File

@ -21,7 +21,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" /></ClientOnly> <AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Lazy.vue
View File

@ -62,7 +62,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" /></ClientOnly> <AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Paginator.vue
View File

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

2
pages/datatable/Reorder.vue
View File

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" /></ClientOnly> <AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Responsive.vue
View File

@ -50,7 +50,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" /></ClientOnly> <AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/RowExpand.vue
View File

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

2
pages/datatable/RowGroup.vue
View File

@ -115,7 +115,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" /></ClientOnly> <AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Scroll.vue
View File

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

2
pages/datatable/Selection.vue
View File

@ -79,7 +79,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" /></ClientOnly> <AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Size.vue
View File

@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" /></ClientOnly> <AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Sort.vue
View File

@ -71,7 +71,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" /></ClientOnly> <AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/State.vue
View File

@ -142,7 +142,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" /></ClientOnly> <AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Striped.vue
View File

@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" /></ClientOnly> <AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Style.vue
View File

@ -25,7 +25,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" /></ClientOnly> <AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/Templating.vue
View File

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" /> </ClientOnly> <AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" />
</div> </div>
</template> </template>

2
pages/datatable/VirtualScroll.vue
View File

@ -61,7 +61,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" /></ClientOnly> <AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" />
</div> </div>
</template> </template>

652
pages/dataview/DataViewDoc.vue
View File

@ -1,29 +1,28 @@
<template> <template>
<ClientOnly <AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue">
><AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import DataView from 'primevue/dataview'; import DataView from 'primevue/dataview';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/dataview/dataview.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/dataview/dataview.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>PrimeFlex</h5> <h5>PrimeFlex</h5>
<p>DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to <a href="https://www.primefaces.org/primeflex/gridsystem">PrimeFlex</a> documentation for details.</p> <p>DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to <a href="https://www.primefaces.org/primeflex/gridsystem">PrimeFlex</a> documentation for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p> <p>
DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an
object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars. object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.
</p> </p>
<pre v-code.script><code><template v-pre> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -38,13 +37,13 @@ export default {
this.carService.getCarsLarge().then(data => this.cars = data); this.carService.getCarsLarge().then(data => this.cars = data);
} }
} }
</template>
</code></pre> </code></pre>
<h5>Layouts</h5> <h5>Layouts</h5>
<p>DataView has two layout modes; <i>list</i> and <i>grid</i> where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas in grid mode it is "grid".</p> <p>DataView has two layout modes; <i>list</i> and <i>grid</i> where a separate template is used to render an item in each mode. In list mode name of the template is "list" whereas in grid mode it is "grid".</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> <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>
&lt;template #list="slotProps"&gt; &lt;template #list="slotProps"&gt;
&lt;div class="col-12"&gt; &lt;div class="col-12"&gt;
&lt;div class="car-details"&gt; &lt;div class="car-details"&gt;
@ -65,56 +64,56 @@ export default {
&lt;div style="padding: .5em" class="col-12 md:col-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;&#123;&#123;slotProps.data.year&#125;&#125; - &#123;&#123;slotProps.data.color&#125;&#125;&lt;/div&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt; &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
</template>
</code></pre> </code></pre>
<h5>Sections</h5> <h5>Sections</h5>
<p>Header and Footer are the two templates that are capable of displaying custom content.</p> <p>Header and Footer are the two templates that are capable of displaying custom content.</p>
<pre v-code><code> <pre v-code><code>
&lt;template #header&gt;Header Content&lt;/template&gt; &lt;template #header&gt;Header Content&lt;/template&gt;
&lt;template #footer&gt;Footer Content&lt;/template&gt; &lt;template #footer&gt;Footer Content&lt;/template&gt;
</code></pre> </code></pre>
<h5>Empty Message</h5> <h5>Empty Message</h5>
<p>Where there is no data to display, the optional <i>empty</i> template can be used to display information.</p> <p>Where there is no data to display, the optional <i>empty</i> template can be used to display information.</p>
<pre v-code><code> <pre v-code><code>
&lt;template #empty&gt;No records found.&lt;/template&gt; &lt;template #empty&gt;No records found.&lt;/template&gt;
</code></pre> </code></pre>
<h5>DataViewLayoutOptions</h5> <h5>DataViewLayoutOptions</h5>
<p> <p>
When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView. When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view. DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView. Location of
Location of the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element you can create your own that updates the layout property of the DataView. the DataViewLayoutOptions should be inside the DataView component. If you prefer a different UI element you can create your own that updates the layout property of the DataView.
</p> </p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;DataView :value="cars" :layout="layout"&gt; &lt;DataView :value="cars" :layout="layout"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt; &lt;DataViewLayoutOptions v-model="layout"&gt;&lt;/DataViewLayoutOptions&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #list="slotProps" &gt; &lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #grid="slotProps"&gt; &lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
</template>
</code></pre> </code></pre>
<h5>Paginator</h5> <h5>Paginator</h5>
<p> <p>
Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display. To customize the left and right side of the paginators, use Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display. To customize the left and right side of the paginators, use
<i>paginatorstart</i> and <i>paginatorend</i> templates. <i>paginatorstart</i> and <i>paginatorend</i> templates.
</p> </p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt; &lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20"&gt;
&lt;template #paginatorstart&gt; &lt;template #paginatorstart&gt;
&lt;Button type="button" icon="pi pi-refresh"/&gt; &lt;Button type="button" icon="pi pi-refresh"/&gt;
@ -123,21 +122,21 @@ export default {
&lt;Button type="button" icon="pi pi-search" /&gt; &lt;Button type="button" icon="pi pi-search" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #list="slotProps" &gt; &lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #grid="slotProps"&gt; &lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
</template>
</code></pre> </code></pre>
<h5>Sorting</h5> <h5>Sorting</h5>
<p> <p>
<i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. Here is an example that uses a <i>sortField</i> and <i>sortOrder</i> properties are available for the sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element. Here is an example that uses a
dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting. dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.
</p> </p>
<pre v-code><code><template v-pre> <pre v-code><code>
&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="grid grid-nogutter"&gt; &lt;div class="grid grid-nogutter"&gt;
@ -150,16 +149,16 @@ export default {
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #list="slotProps" &gt; &lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #grid="slotProps"&gt; &lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code><template v-pre> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -200,27 +199,27 @@ export default {
} }
} }
} }
</template>
</code></pre> </code></pre>
<h5>Lazy Loading</h5> <h5>Lazy Loading</h5>
<p> <p>
Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend. Pagination in this case needs to display the logical Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination and utilize the <i>page</i> callback to load your data from the backend. Pagination in this case needs to display the logical number
number of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only need to load the data of the current page. of records bound to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only need to load the data of the current page.
</p> </p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;DataView :value="cars" :layout="layout" :paginator="true" :rows="20" :lazy="true" @page="onPage($event)"&gt; &lt;DataView :value="cars" :layout="layout" :paginator="true" :rows="20" :lazy="true" @page="onPage($event)"&gt;
&lt;template #list="slotProps" &gt; &lt;template #list="slotProps" &gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #grid="slotProps"&gt; &lt;template #grid="slotProps"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/DataView&gt; &lt;/DataView&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code><template v-pre> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -238,276 +237,275 @@ export default {
} }
} }
} }
</template>
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>value</td> <td>value</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>An array of objects to display.</td> <td>An array of objects to display.</td>
</tr> </tr>
<tr> <tr>
<td>layout</td> <td>layout</td>
<td>string</td> <td>string</td>
<td>list</td> <td>list</td>
<td>Layout of the items, valid values are "list" and "grid".</td> <td>Layout of the items, valid values are "list" and "grid".</td>
</tr> </tr>
<tr> <tr>
<td>rows</td> <td>rows</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Number of rows to display per page.</td> <td>Number of rows to display per page.</td>
</tr> </tr>
<tr> <tr>
<td>first</td> <td>first</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Index of the first record to render.</td> <td>Index of the first record to render.</td>
</tr> </tr>
<tr> <tr>
<td>totalRecords</td> <td>totalRecords</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Number of total records, defaults to length of value when not defined.</td> <td>Number of total records, defaults to length of value when not defined.</td>
</tr> </tr>
<tr> <tr>
<td>paginator</td> <td>paginator</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When specified as true, enables the pagination.</td> <td>When specified as true, enables the pagination.</td>
</tr> </tr>
<tr> <tr>
<td>paginatorPosition</td> <td>paginatorPosition</td>
<td>string</td> <td>string</td>
<td>bottom</td> <td>bottom</td>
<td>Position of the paginator, options are "top","bottom" or "both".</td> <td>Position of the paginator, options are "top","bottom" or "both".</td>
</tr> </tr>
<tr> <tr>
<td>alwaysShowPaginator</td> <td>alwaysShowPaginator</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to show it even there is only one page.</td> <td>Whether to show it even there is only one page.</td>
</tr> </tr>
<tr> <tr>
<td>paginatorTemplate</td> <td>paginatorTemplate</td>
<td>string</td> <td>string</td>
<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td> <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
<td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td> <td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td>
</tr> </tr>
<tr> <tr>
<td>pageLinkSize</td> <td>pageLinkSize</td>
<td>number</td> <td>number</td>
<td>5</td> <td>5</td>
<td>Number of page links to display.</td> <td>Number of page links to display.</td>
</tr> </tr>
<tr> <tr>
<td>rowsPerPageOptions</td> <td>rowsPerPageOptions</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>Array of integer values to display inside rows per page dropdown.</td> <td>Array of integer values to display inside rows per page dropdown.</td>
</tr> </tr>
<tr> <tr>
<td>currentPageReportTemplate</td> <td>currentPageReportTemplate</td>
<td>string</td> <td>string</td>
<td>({currentPage} of {totalPages})</td> <td>({currentPage} of {totalPages})</td>
<td>Template of the current page report element.</td> <td>Template of the current page report element.</td>
</tr> </tr>
<tr> <tr>
<td>sortField</td> <td>sortField</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Property name or a getter function of data to use in sorting by default.</td> <td>Property name or a getter function of data to use in sorting by default.</td>
</tr> </tr>
<tr> <tr>
<td>sortOrder</td> <td>sortOrder</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Order to sort the data by default.</td> <td>Order to sort the data by default.</td>
</tr> </tr>
<tr> <tr>
<td>lazy</td> <td>lazy</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Defines if data is loaded and interacted with in lazy manner.</td> <td>Defines if data is loaded and interacted with in lazy manner.</td>
</tr> </tr>
<tr> <tr>
<td>dataKey</td> <td>dataKey</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Name of the data that uniquely identifies the a record in the data.</td> <td>Name of the data that uniquely identifies the a record in the data.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>page</td> <td>page</td>
<td> <td>
event.page: New page number <br /> event.page: New page number <br />
event.first: Index of first record <br /> event.first: Index of first record <br />
event.rows: Number of rows to display in new page <br /> event.rows: Number of rows to display in new page <br />
event.pageCount: Total number of pages event.pageCount: Total number of pages
</td> </td>
<td>Callback to invoke when page changes, the event object contains information about the new state.</td> <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>header</td> <td>header</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>paginatorstart</td> <td>paginatorstart</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>paginatorend</td> <td>paginatorend</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>list</td> <td>list</td>
<td> <td>
data: Value of the component <br /> data: Value of the component <br />
index: Index of the list index: Index of the list
</td> </td>
</tr> </tr>
<tr> <tr>
<td>grid</td> <td>grid</td>
<td> <td>
data: Value of the component <br /> data: Value of the component <br />
index: Index of the grid index: Index of the grid
</td> </td>
</tr> </tr>
<tr> <tr>
<td>empty</td> <td>empty</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>footer</td> <td>footer</td>
<td>-</td> <td>-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-dataview</td> <td>p-dataview</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-dataview-list</td> <td>p-dataview-list</td>
<td>Container element in list layout.</td> <td>Container element in list layout.</td>
</tr> </tr>
<tr> <tr>
<td>p-dataview-grid</td> <td>p-dataview-grid</td>
<td>Container element in grid layout.</td> <td>Container element in grid layout.</td>
</tr> </tr>
<tr> <tr>
<td>p-dataview-header</td> <td>p-dataview-header</td>
<td>Header section.</td> <td>Header section.</td>
</tr> </tr>
<tr> <tr>
<td>p-dataview-footer</td> <td>p-dataview-footer</td>
<td>Footer section.</td> <td>Footer section.</td>
</tr> </tr>
<tr> <tr>
<td>p-dataview-content</td> <td>p-dataview-content</td>
<td>Container of items.</td> <td>Container of items.</td>
</tr> </tr>
<tr> <tr>
<td>p-dataview-emptymessage</td> <td>p-dataview-emptymessage</td>
<td>Empty message element.</td> <td>Empty message element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons are
are derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <router-link to="/locale">locale</router-link> API respectively. derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <router-link to="/locale">locale</router-link> API respectively.
</p> </p>
<p>Refer to <router-link to="/paginator">paginator</router-link> accessibility documentation for the paginator of the component.</p> <p>Refer to <router-link to="/paginator">paginator</router-link> accessibility documentation for the paginator of the component.</p>
<h6>Keyboard Support</h6> <h6>Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>tab</i> <i>tab</i>
</td> </td>
<td>Moves focus to the buttons.</td> <td>Moves focus to the buttons.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>space</i> <i>space</i>
</td> </td>
<td>Toggles the checked state of a button.</td> <td>Toggles the checked state of a button.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>PrimeFlex</p> <p>PrimeFlex</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

98
pages/deferredcontent/DeferredContentDoc.vue
View File

@ -1,22 +1,21 @@
<template> <template>
<ClientOnly <AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue">
><AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import DeferredContent from 'primevue/deferredcontent'; import DeferredContent from 'primevue/deferredcontent';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/deferredcontent/deferredcontent.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/deferredcontent/deferredcontent.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>DeferredContent is used as a wrapper element of its content..</p> <p>DeferredContent is used as a wrapper element of its content..</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;DeferredContent&gt; &lt;DeferredContent&gt;
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -25,12 +24,12 @@ import DeferredContent from 'primevue/deferredcontent';
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/DeferredContent&gt; &lt;/DeferredContent&gt;
</template>
</code></pre> </code></pre>
<h5>Load Event</h5> <h5>Load Event</h5>
<p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p> <p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;DeferredContent @load="onDataLoad"&gt; &lt;DeferredContent @load="onDataLoad"&gt;
&lt;DataTable :value="cars"&gt; &lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
@ -39,56 +38,55 @@ import DeferredContent from 'primevue/deferredcontent';
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/DeferredContent&gt; &lt;/DeferredContent&gt;
</template>
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Component has no properties.</p> <p>Component has no properties.</p>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>load</td> <td>load</td>
<td>event: Event object</td> <td>event: Event object</td>
<td>Callback to invoke when deferred content is loaded..</td> <td>Callback to invoke when deferred content is loaded..</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Component does not apply any styling.</p> <p>Component does not apply any styling.</p>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>. have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down"&gt; &lt;DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down"&gt;
Content Content
&lt;/DeferredContent&gt; &lt;/DeferredContent&gt;
</code></pre> </code></pre>
<h5>Keyboard Support</h5> <h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p> <p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

746
pages/dialog/DialogDoc.vue
View File

@ -1,28 +1,27 @@
<template> <template>
<ClientOnly <AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue">
><AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Dialog from 'primevue/dialog'; import Dialog from 'primevue/dialog';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p> <p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p>
<pre v-code><code> <pre v-code><code>
&lt;Dialog header="Header" v-model:visible="display" &gt; &lt;Dialog header="Header" v-model:visible="display" &gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -33,16 +32,16 @@ export default {
</code></pre> </code></pre>
<h5>Header and Footer</h5> <h5>Header and Footer</h5>
<p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p> <p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
<pre v-code><code> <pre v-code><code>
&lt;Dialog header="Header" footer="Footer" v-model:visible="display"&gt; &lt;Dialog header="Header" footer="Footer" v-model:visible="display"&gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</code></pre> </code></pre>
<pre v-code><code> <pre v-code><code>
&lt;Dialog v-model:visible="display"&gt; &lt;Dialog v-model:visible="display"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;h3&gt;Header&lt;/h3&gt; &lt;h3&gt;Header&lt;/h3&gt;
@ -58,31 +57,31 @@ export default {
</code></pre> </code></pre>
<h5>Positioning</h5> <h5>Positioning</h5>
<p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p> <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright".</p>
<pre v-code><code> <pre v-code><code>
&lt;Dialog position="top" v-model:visible="display"&gt; &lt;Dialog position="top" v-model:visible="display"&gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</code></pre> </code></pre>
<h5>Responsive</h5> <h5>Responsive</h5>
<p> <p>
Dialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of Dialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes 100%. The value of
<i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen. <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;Dialog v-model:visible="display" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt; &lt;Dialog v-model:visible="display" :breakpoints="{'960px': '75vw', '640px': '100vw'}" :style="{width: '50vw'}"&gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</code></pre> </code></pre>
<h5>Initial Focus</h5> <h5>Initial Focus</h5>
<p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p> <p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
<pre v-code><code> <pre v-code><code>
&lt;Dialog v-model:visible="display"&gt; &lt;Dialog v-model:visible="display"&gt;
Content Content
&lt;template #footer&gt; &lt;template #footer&gt;
@ -93,301 +92,301 @@ export default {
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>header</td> <td>header</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Title content of the dialog.</td> <td>Title content of the dialog.</td>
</tr> </tr>
<tr> <tr>
<td>footer</td> <td>footer</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Footer content of the dialog.</td> <td>Footer content of the dialog.</td>
</tr> </tr>
<tr> <tr>
<td>visible</td> <td>visible</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Specifies the visibility of the dialog.</td> <td>Specifies the visibility of the dialog.</td>
</tr> </tr>
<tr> <tr>
<td>modal</td> <td>modal</td>
<td>boolean</td> <td>boolean</td>
<td>null</td> <td>null</td>
<td>Defines if background should be blocked when dialog is displayed.</td> <td>Defines if background should be blocked when dialog is displayed.</td>
</tr> </tr>
<tr> <tr>
<td>closeOnEscape</td> <td>closeOnEscape</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Specifies if pressing escape key should hide the dialog.</td> <td>Specifies if pressing escape key should hide the dialog.</td>
</tr> </tr>
<tr> <tr>
<td>dismissableMask</td> <td>dismissableMask</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Specifies if clicking the modal background should hide the dialog.</td> <td>Specifies if clicking the modal background should hide the dialog.</td>
</tr> </tr>
<tr> <tr>
<td>position</td> <td>position</td>
<td>string</td> <td>string</td>
<td>center</td> <td>center</td>
<td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td> <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
</tr> </tr>
<tr> <tr>
<td>contentStyle</td> <td>contentStyle</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Style of the content section.</td> <td>Style of the content section.</td>
</tr> </tr>
<tr> <tr>
<td>contentClass</td> <td>contentClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the content section.</td> <td>Style class of the content section.</td>
</tr> </tr>
<tr> <tr>
<td>contentProps</td> <td>contentProps</td>
<td>null</td> <td>null</td>
<td>null</td> <td>null</td>
<td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td> <td>Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.</td>
</tr> </tr>
<tr> <tr>
<td>rtl</td> <td>rtl</td>
<td>boolean</td> <td>boolean</td>
<td>null</td> <td>null</td>
<td>When enabled dialog is displayed in RTL direction.</td> <td>When enabled dialog is displayed in RTL direction.</td>
</tr> </tr>
<tr> <tr>
<td>closable</td> <td>closable</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Adds a close icon to the header to hide the dialog.</td> <td>Adds a close icon to the header to hide the dialog.</td>
</tr> </tr>
<tr> <tr>
<td>showHeader</td> <td>showHeader</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to show the header or not.</td> <td>Whether to show the header or not.</td>
</tr> </tr>
<tr> <tr>
<td>baseZIndex</td> <td>baseZIndex</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Base zIndex value to use in layering.</td> <td>Base zIndex value to use in layering.</td>
</tr> </tr>
<tr> <tr>
<td>autoZIndex</td> <td>autoZIndex</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to automatically manage layering.</td> <td>Whether to automatically manage layering.</td>
</tr> </tr>
<tr> <tr>
<td style="text-decoration: line-through">ariaCloseLabel</td> <td style="text-decoration: line-through">ariaCloseLabel</td>
<td>string</td> <td>string</td>
<td>close</td> <td>close</td>
<td> <td>
Aria label of the close icon. Aria label of the close icon.
<br /> <br />
<b> Deprecated: </b> <i>aria.close</i> can be used in defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration. <b> Deprecated: </b> <i>aria.close</i> can be used in defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>maximizable</td> <td>maximizable</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Whether the dialog can be displayed full screen.</td> <td>Whether the dialog can be displayed full screen.</td>
</tr> </tr>
<tr> <tr>
<td>breakpoints</td> <td>breakpoints</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Object literal to define widths per screen size.</td> <td>Object literal to define widths per screen size.</td>
</tr> </tr>
<tr> <tr>
<td>draggable</td> <td>draggable</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Enables dragging to change the position using header.</td> <td>Enables dragging to change the position using header.</td>
</tr> </tr>
<tr> <tr>
<td>minX</td> <td>minX</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Minimum value for the left coordinate of dialog in dragging.</td> <td>Minimum value for the left coordinate of dialog in dragging.</td>
</tr> </tr>
<tr> <tr>
<td>minY</td> <td>minY</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Minimum value for the top coordinate of dialog in dragging.</td> <td>Minimum value for the top coordinate of dialog in dragging.</td>
</tr> </tr>
<tr> <tr>
<td>keepInViewport</td> <td>keepInViewport</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Keeps dialog in the viewport when dragging.</td> <td>Keeps dialog in the viewport when dragging.</td>
</tr> </tr>
<tr> <tr>
<td>appendTo</td> <td>appendTo</td>
<td>string</td> <td>string</td>
<td>body</td> <td>body</td>
<td>A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.</td> <td>A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.</td>
</tr> </tr>
<tr> <tr>
<td>closeIcon</td> <td>closeIcon</td>
<td>string</td> <td>string</td>
<td>pi pi-times</td> <td>pi pi-times</td>
<td>Icon to display in the dialog close button.</td> <td>Icon to display in the dialog close button.</td>
</tr> </tr>
<tr> <tr>
<td>maximizeIcon</td> <td>maximizeIcon</td>
<td>string</td> <td>string</td>
<td>pi pi-window-maximize</td> <td>pi pi-window-maximize</td>
<td>Icon to display in the dialog maximize button when dialog is not maximized.</td> <td>Icon to display in the dialog maximize button when dialog is not maximized.</td>
</tr> </tr>
<tr> <tr>
<td>minimizeIcon</td> <td>minimizeIcon</td>
<td>string</td> <td>string</td>
<td>pi pi-window-minimize</td> <td>pi pi-window-minimize</td>
<td>Icon to display in the dialog maximize button when dialog is maximized.</td> <td>Icon to display in the dialog maximize button when dialog is maximized.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>hide</td> <td>hide</td>
<td>-</td> <td>-</td>
<td>Callback to invoke when dialog is hidden.</td> <td>Callback to invoke when dialog is hidden.</td>
</tr> </tr>
<tr> <tr>
<td>after-hide</td> <td>after-hide</td>
<td>-</td> <td>-</td>
<td>Callback to invoke after dialog is hidden.</td> <td>Callback to invoke after dialog is hidden.</td>
</tr> </tr>
<tr> <tr>
<td>show</td> <td>show</td>
<td>-</td> <td>-</td>
<td>Callback to invoke when dialog is showed.</td> <td>Callback to invoke when dialog is showed.</td>
</tr> </tr>
<tr> <tr>
<td>maximize</td> <td>maximize</td>
<td>event: Event object</td> <td>event: Event object</td>
<td>Fired when a dialog gets maximized.</td> <td>Fired when a dialog gets maximized.</td>
</tr> </tr>
<tr> <tr>
<td>unmaximize</td> <td>unmaximize</td>
<td>event: Event object</td> <td>event: Event object</td>
<td>Fired when a dialog gets unmaximized.</td> <td>Fired when a dialog gets unmaximized.</td>
</tr> </tr>
<tr> <tr>
<td>dragend</td> <td>dragend</td>
<td>event: Event object</td> <td>event: Event object</td>
<td>Fired when a dialog drag completes..</td> <td>Fired when a dialog drag completes..</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>header</td> <td>header</td>
<td>-</td> <td>-</td>
</tr> </tr>
<tr> <tr>
<td>footer</td> <td>footer</td>
<td>-</td> <td>-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-dialog</td> <td>p-dialog</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-dialog-titlebar</td> <td>p-dialog-titlebar</td>
<td>Container of header.</td> <td>Container of header.</td>
</tr> </tr>
<tr> <tr>
<td>p-dialog-title</td> <td>p-dialog-title</td>
<td>Header element.</td> <td>Header element.</td>
</tr> </tr>
<tr> <tr>
<td>p-dialog-titlebar-icon</td> <td>p-dialog-titlebar-icon</td>
<td>Icon container inside header.</td> <td>Icon container inside header.</td>
</tr> </tr>
<tr> <tr>
<td>p-dialog-titlebar-close</td> <td>p-dialog-titlebar-close</td>
<td>Close icon element.</td> <td>Close icon element.</td>
</tr> </tr>
<tr> <tr>
<td>p-dialog-content</td> <td>p-dialog-content</td>
<td>Content element</td> <td>Content element</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Dialog component uses <i>dialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default behavior. In Dialog component uses <i>dialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default behavior. In
addition <i>aria-modal</i> is added since focus is kept within the popup. addition <i>aria-modal</i> is added since focus is kept within the popup.
</p> </p>
<p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p> <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
<p> <p>
Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <router-link to="/locale">locale</router-link> API by default, you may use <i>closeButtonProps</i> to customize the element
element and override the default <i>aria-label</i>. and override the default <i>aria-label</i>.
</p> </p>
<pre v-code><code> <pre v-code><code>
&lt;Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" /&gt; &lt;Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'dlg' : null" :aria-expanded="visible ? true : false" /&gt;
&lt;Dialog id="dlg" header="Header" v-model:visible="visible" :style="{ width: '50vw' }"&gt; &lt;Dialog id="dlg" header="Header" v-model:visible="visible" :style="{ width: '50vw' }"&gt;
@ -396,66 +395,65 @@ export default {
</code></pre> </code></pre>
<h6>Overlay Keyboard Support</h6> <h6>Overlay Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>tab</i> <i>tab</i>
</td> </td>
<td>Moves focus to the next the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td> <td>Moves focus to the next the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
</tr> </tr>
<tr> <tr>
<td><i>shift</i> + <i>tab</i></td> <td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td> <td>Moves focus to the previous the focusable element within the dialog if <i>modal</i> is true. Otherwise, the focusable element in the page tab sequence.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>escape</i> <i>escape</i>
</td> </td>
<td>Closes the dialog if <i>closeOnEscape</i> is true.</td> <td>Closes the dialog if <i>closeOnEscape</i> is true.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h6>Close Button Keyboard Support</h6> <h6>Close Button Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>enter</i> <i>enter</i>
</td> </td>
<td>Closes the dialog.</td> <td>Closes the dialog.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>space</i> <i>space</i>
</td> </td>
<td>Closes the dialog.</td> <td>Closes the dialog.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

242
pages/divider/DividerDoc.vue
View File

@ -1,40 +1,39 @@
<template> <template>
<ClientOnly <AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue">
><AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Divider from 'primevue/divider'; import Divider from 'primevue/divider';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/divider/divider.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/divider/divider.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Divider has two orientations defined with the <i>layout</i> property, default is "horizontal" and the alternative is "vertical".</p> <p>Divider has two orientations defined with the <i>layout</i> property, default is "horizontal" and the alternative is "vertical".</p>
<pre v-code><code> <pre v-code><code>
&lt;div&gt;Content 1&lt;/div&gt; &lt;div&gt;Content 1&lt;/div&gt;
&lt;Divider /&gt; &lt;Divider /&gt;
&lt;div&gt;Content 2&lt;/div&gt; &lt;div&gt;Content 2&lt;/div&gt;
</code></pre> </code></pre>
<h5>Border Style</h5> <h5>Border Style</h5>
<p>Style of the border is configured with the <i>type</i> property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".</p> <p>Style of the border is configured with the <i>type</i> property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".</p>
<pre v-code><code> <pre v-code><code>
&lt;div&gt;Content 1&lt;/div&gt; &lt;div&gt;Content 1&lt;/div&gt;
&lt;Divider type="dashed"/&gt; &lt;Divider type="dashed"/&gt;
&lt;div&gt;Content 2&lt;/div&gt; &lt;div&gt;Content 2&lt;/div&gt;
</code></pre> </code></pre>
<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="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;
@ -45,12 +44,12 @@ import Divider from 'primevue/divider';
</code></pre> </code></pre>
<h5>Content</h5> <h5>Content</h5>
<p> <p>
Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the <i>align</i> property. In horizontal layout, alignment options are "left", "center" and "right" Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the <i>align</i> property. In horizontal layout, alignment options are "left", "center" and "right"
whereas vertical mode supports "top", "center" and "bottom". whereas vertical mode supports "top", "center" and "bottom".
</p> </p>
<pre v-code><code> <pre v-code><code>
&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;
@ -76,111 +75,110 @@ import Divider from 'primevue/divider';
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>align</td> <td>align</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.</td> <td>Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.</td>
</tr> </tr>
<tr> <tr>
<td>layout</td> <td>layout</td>
<td>string</td> <td>string</td>
<td>horizontal</td> <td>horizontal</td>
<td>Specifies the orientation, valid values are "horizontal" and "vertical".</td> <td>Specifies the orientation, valid values are "horizontal" and "vertical".</td>
</tr> </tr>
<tr> <tr>
<td>type</td> <td>type</td>
<td>string</td> <td>string</td>
<td>solid</td> <td>solid</td>
<td>Border style type, default is "solid" and other options are "dashed" and "dotted".</td> <td>Border style type, default is "solid" and other options are "dashed" and "dotted".</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-divider</td> <td>p-divider</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-divider-horizontal</td> <td>p-divider-horizontal</td>
<td>Container element in horizontal layout.</td> <td>Container element in horizontal layout.</td>
</tr> </tr>
<tr> <tr>
<td>p-divider-vertical</td> <td>p-divider-vertical</td>
<td>Container element in vertical layout.</td> <td>Container element in vertical layout.</td>
</tr> </tr>
<tr> <tr>
<td>p-divider-solid</td> <td>p-divider-solid</td>
<td>Container element with solid border.</td> <td>Container element with solid border.</td>
</tr> </tr>
<tr> <tr>
<td>p-divider-dashed</td> <td>p-divider-dashed</td>
<td>Container element with dashed border.</td> <td>Container element with dashed border.</td>
</tr> </tr>
<tr> <tr>
<td>p-divider-dotted</td> <td>p-divider-dotted</td>
<td>Container element with dotted border.</td> <td>Container element with dotted border.</td>
</tr> </tr>
<tr> <tr>
<td>p-divider-left</td> <td>p-divider-left</td>
<td>Container element with content aligned to left.</td> <td>Container element with content aligned to left.</td>
</tr> </tr>
<tr> <tr>
<td>p-divider-right</td> <td>p-divider-right</td>
<td>Container element with content aligned to right.</td> <td>Container element with content aligned to right.</td>
</tr> </tr>
<tr> <tr>
<td>p-divider-center</td> <td>p-divider-center</td>
<td>Container element with content aligned to center.</td> <td>Container element with content aligned to center.</td>
</tr> </tr>
<tr> <tr>
<td>p-divider-bottom</td> <td>p-divider-bottom</td>
<td>Container element with content aligned to bottom.</td> <td>Container element with content aligned to bottom.</td>
</tr> </tr>
<tr> <tr>
<td>p-divider-top</td> <td>p-divider-top</td>
<td>Container element with content aligned to top.</td> <td>Container element with content aligned to top.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p>Divider uses a <i>separator</i> role with <i>aria-orientation</i> set to either "horizontal" or "vertical".</p> <p>Divider uses a <i>separator</i> role with <i>aria-orientation</i> set to either "horizontal" or "vertical".</p>
<h5>Keyboard Support</h5> <h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p> <p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

484
pages/dock/DockDoc.vue
View File

@ -1,28 +1,27 @@
<template> <template>
<ClientOnly <AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
><AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Dock from 'primevue/dock'; import Dock from 'primevue/dock';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/slider/slider.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/slider/slider.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the <i>model</i> property.</p> <p>Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the <i>model</i> property.</p>
<pre v-code><code> <pre v-code><code>
&lt;Dock :model="items" /&gt; &lt;Dock :model="items" /&gt;
</code></pre> </code></pre>
<pre v-code.script><code><template> <pre v-code.script><code><template>
export default { export default {
data() { data() {
return { return {
@ -51,246 +50,245 @@ import Dock from 'primevue/dock';
</template> </template>
</code></pre> </code></pre>
<h5>MenuModel API</h5> <h5>MenuModel API</h5>
<p>Dock uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p> <p>Dock uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>model</td> <td>model</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>MenuModel instance to define the action items.</td> <td>MenuModel instance to define the action items.</td>
</tr> </tr>
<tr> <tr>
<td>position</td> <td>position</td>
<td>string</td> <td>string</td>
<td>bottom</td> <td>bottom</td>
<td>Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.</td> <td>Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.</td>
</tr> </tr>
<tr> <tr>
<td>class</td> <td>class</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the element.</td> <td>Style class of the element.</td>
</tr> </tr>
<tr> <tr>
<td>style</td> <td>style</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Inline style of the element.</td> <td>Inline style of the element.</td>
</tr> </tr>
<tr> <tr>
<td>exact</td> <td>exact</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td> <td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
</tr> </tr>
<tr> <tr>
<td>tooltipOptions</td> <td>tooltipOptions</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td> <td>Whether to display the tooltip on items. The modifiers of <router-link to="/tooltip">Tooltip</router-link> can be used like an object in it. Valid keys are 'event' and 'position'.</td>
</tr> </tr>
<tr> <tr>
<td>menuId</td> <td>menuId</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Unique identifier of the menu.</td> <td>Unique identifier of the menu.</td>
</tr> </tr>
<tr> <tr>
<td>tabindex</td> <td>tabindex</td>
<td>number</td> <td>number</td>
<td>0</td> <td>0</td>
<td>Index of the element in tabbing order.</td> <td>Index of the element in tabbing order.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>focus</td> <td>focus</td>
<td>event</td> <td>event</td>
<td>Callback to invoke when the component receives focus.</td> <td>Callback to invoke when the component receives focus.</td>
</tr> </tr>
<tr> <tr>
<td>blur</td> <td>blur</td>
<td>event</td> <td>event</td>
<td>Callback to invoke when the component loses focus.</td> <td>Callback to invoke when the component loses focus.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-dock</td> <td>p-dock</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-dock-list-container</td> <td>p-dock-list-container</td>
<td>Container of the list.</td> <td>Container of the list.</td>
</tr> </tr>
<tr> <tr>
<td>p-dock-list</td> <td>p-dock-list</td>
<td>List of items.</td> <td>List of items.</td>
</tr> </tr>
<tr> <tr>
<td>p-dock-item</td> <td>p-dock-item</td>
<td>Each items in list.</td> <td>Each items in list.</td>
</tr> </tr>
<tr> <tr>
<td>p-menuitem-content</td> <td>p-menuitem-content</td>
<td>Content of menuitem.</td> <td>Content of menuitem.</td>
</tr> </tr>
<tr> <tr>
<td>p-dock-link</td> <td>p-dock-link</td>
<td>Link of the menuitem.</td> <td>Link of the menuitem.</td>
</tr> </tr>
<tr> <tr>
<td>p-dock-icon</td> <td>p-dock-icon</td>
<td>Icon of a menuitem.</td> <td>Icon of a menuitem.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>item</td> <td>item</td>
<td> <td>
item: Custom content for menuitem<br /> item: Custom content for menuitem<br />
index: Index of the menuitem index: Index of the menuitem
</td> </td>
</tr> </tr>
<tr> <tr>
<td>icon</td> <td>icon</td>
<td>item: Custom content for icon</td> <td>item: Custom content for icon</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Dock component uses the <i>menu</i> role with the <i>aria-orientation</i> and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with Dock component uses the <i>menu</i> role with the <i>aria-orientation</i> and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>menuitem</i> role with
<i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
</p> </p>
<h6>Keyboard Support</h6> <h6>Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>tab</i> <i>tab</i>
</td> </td>
<td>Moves focus to the first menuitem.</td> <td>Moves focus to the first menuitem.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>enter</i> <i>enter</i>
</td> </td>
<td>Activates the focused menuitem.</td> <td>Activates the focused menuitem.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>space</i> <i>space</i>
</td> </td>
<td>Activates the focused menuitem.</td> <td>Activates the focused menuitem.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>down arrow</i> <i>down arrow</i>
</td> </td>
<td>Moves focus to the next menuitem in vertical layout.</td> <td>Moves focus to the next menuitem in vertical layout.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>up arrow</i> <i>up arrow</i>
</td> </td>
<td>Moves focus to the previous menuitem in vertical layout.</td> <td>Moves focus to the previous menuitem in vertical layout.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>right arrow</i> <i>right arrow</i>
</td> </td>
<td>Moves focus to the next menuitem in horizontal layout.</td> <td>Moves focus to the next menuitem in horizontal layout.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>left arrow</i> <i>left arrow</i>
</td> </td>
<td>Moves focus to the previous menuitem in horizontal layout.</td> <td>Moves focus to the previous menuitem in horizontal layout.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>home</i> <i>home</i>
</td> </td>
<td>Moves focus to the first menuitem.</td> <td>Moves focus to the first menuitem.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>end</i> <i>end</i>
</td> </td>
<td>Moves focus to the last menuitem.</td> <td>Moves focus to the last menuitem.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

1422
pages/dropdown/DropdownDoc.vue
View File

File diff suppressed because it is too large Load Diff

296
pages/dynamicdialog/DynamicDialogDoc.vue
View File

@ -1,10 +1,9 @@
<template> <template>
<ClientOnly <AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue">
><AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue"> <h5>DialogService</h5>
<h5>DialogService</h5> <p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>
<pre v-code.script><code> <pre v-code.script><code>
import {createApp} from 'vue'; import {createApp} from 'vue';
import DialogService from 'primevue/dialogservice'; import DialogService from 'primevue/dialogservice';
@ -13,50 +12,50 @@ app.use(DialogService);
</code></pre> </code></pre>
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import DynamicDialog from 'primevue/dynamicdialog'; import DynamicDialog from 'primevue/dynamicdialog';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/dynamicdialog/dynamicdialog.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/dynamicdialog/dynamicdialog.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.</p> <p>Ideal location of a DynamicDialog is the main application template so that it can be used by any component within the application.</p>
<pre v-code><code> <pre v-code><code>
&lt;template&gt; &lt;template&gt;
&lt;DynamicDialog /&gt; &lt;DynamicDialog /&gt;
&lt;template&gt; &lt;template&gt;
</code></pre> </code></pre>
<h5>Options API</h5> <h5>Options API</h5>
<p><i>$dialog</i> is available as a property in the application instance.</p> <p><i>$dialog</i> is available as a property in the application instance.</p>
<pre v-code.script><code> <pre v-code.script><code>
const dialogRef = this.$dialog; const dialogRef = this.$dialog;
</code></pre> </code></pre>
<h5>Composition API</h5> <h5>Composition API</h5>
<p>The service can be injected with the <i>useDialog</i> function.</p> <p>The service can be injected with the <i>useDialog</i> function.</p>
<pre v-code.script><code> <pre v-code.script><code>
import { useDialog } from 'primevue/usedialog'; import { useDialog } from 'primevue/usedialog';
const dialog = useDialog(); const dialog = useDialog();
</code></pre> </code></pre>
<h5>Opening a Dialog</h5> <h5>Opening a Dialog</h5>
<p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p> <p>The <i>open</i> function of the <i>DialogService</i> is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.</p>
<h6>Options API</h6> <h6>Options API</h6>
<pre v-code.script><code> <pre v-code.script><code>
import ProductListDemo from './ProductListDemo'; import ProductListDemo from './ProductListDemo';
export default { export default {
@ -69,8 +68,8 @@ export default {
</code></pre> </code></pre>
<h6>Composition API</h6> <h6>Composition API</h6>
<pre v-code.script><code> <pre v-code.script><code>
import ProductListDemo from './ProductListDemo'; import ProductListDemo from './ProductListDemo';
import { useDialog } from 'primevue/usedialog'; import { useDialog } from 'primevue/usedialog';
@ -85,11 +84,11 @@ export default {
</code></pre> </code></pre>
<h5>Closing a Dialog</h5> <h5>Closing a Dialog</h5>
<p>The <i>close</i> function of the <i>dialogRef</i> is used to hide a Dialog. The <i>dialogRef</i> is injected to the component that is loaded by the dialog.</p> <p>The <i>close</i> function of the <i>dialogRef</i> is used to hide a Dialog. The <i>dialogRef</i> is injected to the component that is loaded by the dialog.</p>
<h6>Options API</h6> <h6>Options API</h6>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
inject: ['dialogRef'], inject: ['dialogRef'],
methods:{ methods:{
@ -101,8 +100,8 @@ export default {
</code></pre> </code></pre>
<h6>Composition API</h6> <h6>Composition API</h6>
<pre v-code.script><code> <pre v-code.script><code>
import { inject } from 'vue' import { inject } from 'vue'
export default { export default {
@ -116,10 +115,10 @@ export default {
</code></pre> </code></pre>
<h5>Passing Data</h5> <h5>Passing Data</h5>
<p>Data can be passed to the component that is loaded by the Dialog and also from the component back to the caller component. Use the <i>open</i> function and pass your parameters with the <i>data</i> property in the options object.</p> <p>Data can be passed to the component that is loaded by the Dialog and also from the component back to the caller component. Use the <i>open</i> function and pass your parameters with the <i>data</i> property in the options object.</p>
<pre v-code.script><code> <pre v-code.script><code>
this.$dialog.open(ProductListDemo, { this.$dialog.open(ProductListDemo, {
data: { data: {
user: 'primetime' user: 'primetime'
@ -128,7 +127,7 @@ this.$dialog.open(ProductListDemo, {
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
inject: ['dialogRef'], inject: ['dialogRef'],
mounted:{ mounted:{
@ -138,8 +137,8 @@ export default {
</code></pre> </code></pre>
<p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback defined by the <i>open</i> function at the caller.</p> <p>Similarly when hiding a Dialog, any parameter passed to the <i>close</i> function is received from the <i>onClose</i> callback defined by the <i>open</i> function at the caller.</p>
<pre v-code.script><code> <pre v-code.script><code>
this.$dialog.open(ProductListDemo, { this.$dialog.open(ProductListDemo, {
onClose(options) { onClose(options) {
const callbackParams = options.data; //{id: 12} const callbackParams = options.data; //{id: 12}
@ -148,7 +147,7 @@ this.$dialog.open(ProductListDemo, {
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
inject: ['dialogRef'], inject: ['dialogRef'],
methods:{ methods:{
@ -160,10 +159,10 @@ export default {
</code></pre> </code></pre>
<h5>Customizing a Dialog</h5> <h5>Customizing a Dialog</h5>
<p><i>props</i> option is used to customize the dynamically generated Dialog, refer to the <router-link to="/dialog">Dialog</router-link> documentation for the whole list of options.</p> <p><i>props</i> option is used to customize the dynamically generated Dialog, refer to the <router-link to="/dialog">Dialog</router-link> documentation for the whole list of options.</p>
<pre v-code.script><code> <pre v-code.script><code>
import { h } from 'vue'; import { h } from 'vue';
import Button from 'primevue/button'; import Button from 'primevue/button';
import ProductListDemo from './ProductListDemo'; import ProductListDemo from './ProductListDemo';
@ -203,120 +202,119 @@ export default {
} }
</code></pre> </code></pre>
<h5>DialogService API</h5> <h5>DialogService API</h5>
<p>DialogService is the main entry point to open a dialog and load any content within.</p> <p>DialogService is the main entry point to open a dialog and load any content within.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>open</td> <td>open</td>
<td> <td>
content: The component to load<br /> content: The component to load<br />
options: Configuration of the Dialog options: Configuration of the Dialog
</td> </td>
<td>Creates a dialog dynamically with the given options and loads the component. See the <i>Dialog Open Configuration API</i> section below for the avaiable properties.</td> <td>Creates a dialog dynamically with the given options and loads the component. See the <i>Dialog Open Configuration API</i> section below for the avaiable properties.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dialog Open Configuration API</h5> <h5>Dialog Open Configuration API</h5>
<p>Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.</p> <p>Options to configure a dynamically loaded Dialog including Dialog props, data to pass and callback to execute on hide.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>props</td> <td>props</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Properties of a dialog.</td> <td>Properties of a dialog.</td>
</tr> </tr>
<tr> <tr>
<td>data</td> <td>data</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Data to pass to the loaded component.</td> <td>Data to pass to the loaded component.</td>
</tr> </tr>
<tr> <tr>
<td>templates</td> <td>templates</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Templates of a dialog including, <strong>header</strong> and <strong>footer</strong>.</td> <td>Templates of a dialog including, <strong>header</strong> and <strong>footer</strong>.</td>
</tr> </tr>
<tr> <tr>
<td>onClose</td> <td>onClose</td>
<td>function</td> <td>function</td>
<td>null</td> <td>null</td>
<td>Function callback to invoke when dialog is closed.</td> <td>Function callback to invoke when dialog is closed.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dialog Ref API</h5> <h5>Dialog Ref API</h5>
<p>Reference to the dynamic dialog that can be used to access the passed data and close the dialog with the option of passing data back to the caller.</p> <p>Reference to the dynamic dialog that can be used to access the passed data and close the dialog with the option of passing data back to the caller.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>content</td> <td>content</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Loaded content of a dialog.</td> <td>Loaded content of a dialog.</td>
</tr> </tr>
<tr> <tr>
<td>options</td> <td>options</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Options used to open a dialog.</td> <td>Options used to open a dialog.</td>
</tr> </tr>
<tr> <tr>
<td>data</td> <td>data</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Data passed to the dialog.</td> <td>Data passed to the dialog.</td>
</tr> </tr>
<tr> <tr>
<td>close</td> <td>close</td>
<td>function</td> <td>function</td>
<td>null</td> <td>null</td>
<td>Function to close a dialog.</td> <td>Function to close a dialog.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<p>DynamicDialog uses the Dialog component internally, visit <router-link to="/dialog">dialog</router-link> for more information.</p> <p>DynamicDialog uses the Dialog component internally, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

320
pages/editor/EditorDoc.vue
View File

@ -1,29 +1,28 @@
<template> <template>
<ClientOnly <AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor" github="editor/EditorDemo.vue">
><AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor" github="editor/EditorDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Editor from 'primevue/editor'; import Editor from 'primevue/editor';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/editor/editor.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/editor/editor.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>A model can be bound using the standard v-model directive.</p> <p>A model can be bound using the standard v-model directive.</p>
<pre v-code><code> <pre v-code><code>
&lt;Editor v-model="value" editorStyle="height: 320px"/&gt; &lt;Editor v-model="value" editorStyle="height: 320px"/&gt;
</code></pre> </code></pre>
<h5>Toolbar</h5> <h5>Toolbar</h5>
<p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p> <p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
<pre v-code><code> <pre v-code><code>
&lt;Editor v-model="value" editorStyle="height: 320px"&gt; &lt;Editor v-model="value" editorStyle="height: 320px"&gt;
&lt;template #toolbar&gt; &lt;template #toolbar&gt;
&lt;span class="ql-formats"&gt; &lt;span class="ql-formats"&gt;
@ -36,164 +35,163 @@ import Editor from 'primevue/editor';
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p> <p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>modelValue</td> <td>modelValue</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Value of the content.</td> <td>Value of the content.</td>
</tr> </tr>
<tr> <tr>
<td>placeholder</td> <td>placeholder</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Placeholder text to show when editor is empty.</td> <td>Placeholder text to show when editor is empty.</td>
</tr> </tr>
<tr> <tr>
<td>readonly</td> <td>readonly</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Whether to instantiate the editor to readonly mode.</td> <td>Whether to instantiate the editor to readonly mode.</td>
</tr> </tr>
<tr> <tr>
<td>formats</td> <td>formats</td>
<td>string[]</td> <td>string[]</td>
<td>null</td> <td>null</td>
<td>Whitelist of formats to display, see <a href="http://quilljs.com/docs/formats/">here</a> for available options.</td> <td>Whitelist of formats to display, see <a href="http://quilljs.com/docs/formats/">here</a> for available options.</td>
</tr> </tr>
<tr> <tr>
<td>editorStyle</td> <td>editorStyle</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Inline style of the container.</td> <td>Inline style of the container.</td>
</tr> </tr>
<tr> <tr>
<td>modules</td> <td>modules</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.</td> <td>Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>text-change</td> <td>text-change</td>
<td> <td>
event.delta: Representation of the change.<br /> event.delta: Representation of the change.<br />
event.source: Source of change. Will be either "user" or "api".<br /> event.source: Source of change. Will be either "user" or "api".<br />
event.htmlValue: Current value as html.<br /> event.htmlValue: Current value as html.<br />
event.textValue: Current value as text.<br /> event.textValue: Current value as text.<br />
event.instance: Text editor instance. event.instance: Text editor instance.
</td> </td>
<td>Callback to invoke when text of editor changes.</td> <td>Callback to invoke when text of editor changes.</td>
</tr> </tr>
<tr> <tr>
<td>selection-change</td> <td>selection-change</td>
<td> <td>
event.range: Representation of the selection boundaries.<br /> event.range: Representation of the selection boundaries.<br />
event.oldRange: Representation of the previous selection boundaries.<br /> event.oldRange: Representation of the previous selection boundaries.<br />
event.source: Source of change. Will be either "user" or "api".<br /> event.source: Source of change. Will be either "user" or "api".<br />
event.htmlValue: Current value as html.<br /> event.htmlValue: Current value as html.<br />
event.textValue: Current value as text.<br /> event.textValue: Current value as text.<br />
event.instance: Text editor instance. event.instance: Text editor instance.
</td> </td>
<td>Callback to invoke when selection of the text changes.</td> <td>Callback to invoke when selection of the text changes.</td>
</tr> </tr>
<tr> <tr>
<td>load</td> <td>load</td>
<td>event.instance: Quill instance</td> <td>event.instance: Quill instance</td>
<td>Callback to invoke when the quill modules are loaded.</td> <td>Callback to invoke when the quill modules are loaded.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>toolbar</td> <td>toolbar</td>
<td>-</td> <td>-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<p>Refer to <a href="http://beta.quilljs.com/docs/api/#events">Quill documentation</a> for more information.</p> <p>Refer to <a href="http://beta.quilljs.com/docs/api/#events">Quill documentation</a> for more information.</p>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-editor-container</td> <td>p-editor-container</td>
<td>Container element</td> <td>Container element</td>
</tr> </tr>
<tr> <tr>
<td>p-editor-toolbar</td> <td>p-editor-toolbar</td>
<td>Toolbar of the editor</td> <td>Toolbar of the editor</td>
</tr> </tr>
<tr> <tr>
<td>p-editor-content</td> <td>p-editor-content</td>
<td>Editable area</td> <td>Editable area</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<p> <p>
Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for
<a href="https://github.com/quilljs/quill/issues/1031">dropdowns</a> in the toolbar that may be overcome with a custom toolbar. <a href="https://github.com/quilljs/quill/issues/1031">dropdowns</a> in the toolbar that may be overcome with a custom toolbar.
</p> </p>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p> <p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>
<p>Resources of quill needs to be added to your application.</p> <p>Resources of quill needs to be added to your application.</p>
<pre v-code><code> <pre v-code><code>
npm install quill --save npm install quill --save
</code></pre> </code></pre>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

336
pages/fieldset/FieldsetDoc.vue
View File

@ -1,22 +1,21 @@
<template> <template>
<ClientOnly <AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue">
><AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Fieldset from 'primevue/fieldset'; import Fieldset from 'primevue/fieldset';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Fieldset is a container component that accepts content as its children.</p> <p>Fieldset is a container component that accepts content as its children.</p>
<pre v-code><code> <pre v-code><code>
&lt;Fieldset legend="Godfather I"&gt; &lt;Fieldset legend="Godfather I"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
@ -26,9 +25,9 @@ import Fieldset from 'primevue/fieldset';
</code></pre> </code></pre>
<h5>Custom Header</h5> <h5>Custom Header</h5>
<p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p> <p>Header of the panel is either defined with the <i>legend</i> property or the legend template.</p>
<pre v-code><code> <pre v-code><code>
&lt;Fieldset&gt; &lt;Fieldset&gt;
&lt;template #legend&gt; &lt;template #legend&gt;
Header Content Header Content
@ -38,9 +37,9 @@ import Fieldset from 'primevue/fieldset';
</code></pre> </code></pre>
<h5>Toggleable</h5> <h5>Toggleable</h5>
<p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p> <p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option..</p>
<pre v-code><code> <pre v-code><code>
&lt;Fieldset legend="Godfather I" :toggleable="true"&gt; &lt;Fieldset legend="Godfather I" :toggleable="true"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
@ -50,16 +49,16 @@ import Fieldset from 'primevue/fieldset';
</code></pre> </code></pre>
<p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p> <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
<pre v-code><code> <pre v-code><code>
&lt;Fieldset legend="Header Text" :toggleable="true" :collapsed="true"&gt; &lt;Fieldset legend="Header Text" :toggleable="true" :collapsed="true"&gt;
Content Content
&lt;/Fieldset&gt; &lt;/Fieldset&gt;
</code></pre> </code></pre>
<p>Use the v-model directive to enable two-way binding.</p> <p>Use the v-model directive to enable two-way binding.</p>
<pre v-code><code> <pre v-code><code>
&lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt; &lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
&lt;Fieldset legend="Header Text" :toggleable="true" v-model:collapsed="isCollapsed"&gt; &lt;Fieldset legend="Header Text" :toggleable="true" v-model:collapsed="isCollapsed"&gt;
Content Content
@ -67,162 +66,161 @@ import Fieldset from 'primevue/fieldset';
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p> <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>legend</td> <td>legend</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Header text of the fieldset.</td> <td>Header text of the fieldset.</td>
</tr> </tr>
<tr> <tr>
<td>toggleable</td> <td>toggleable</td>
<td>boolean</td> <td>boolean</td>
<td>null</td> <td>null</td>
<td>When specified, content can toggled by clicking the legend.</td> <td>When specified, content can toggled by clicking the legend.</td>
</tr> </tr>
<tr> <tr>
<td>collapsed</td> <td>collapsed</td>
<td>boolean</td> <td>boolean</td>
<td>null</td> <td>null</td>
<td>Defines the default visibility state of the content.</td> <td>Defines the default visibility state of the content.</td>
</tr> </tr>
<tr> <tr>
<td>toggleButtonProps</td> <td>toggleButtonProps</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Uses to pass the custom value to read for the anchor inside the component.</td> <td>Uses to pass the custom value to read for the anchor inside the component.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>toggle</td> <td>toggle</td>
<td> <td>
event.originalEvent: browser event <br /> event.originalEvent: browser event <br />
event.value: collapsed state as a boolean event.value: collapsed state as a boolean
</td> </td>
<td>Callback to invoke when a tab gets expanded or collapsed.</td> <td>Callback to invoke when a tab gets expanded or collapsed.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>legend</td> <td>legend</td>
<td>-</td> <td>-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-fieldset</td> <td>p-fieldset</td>
<td>Fieldset element.</td> <td>Fieldset element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fieldset-toggleable</td> <td>p-fieldset-toggleable</td>
<td>Toggleable fieldset element.</td> <td>Toggleable fieldset element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fieldset-legend</td> <td>p-fieldset-legend</td>
<td>Legend element.</td> <td>Legend element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fieldset-content</td> <td>p-fieldset-content</td>
<td>Content element.</td> <td>Content element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to define Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to define the
the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an <i>aria-label</i> or id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an <i>aria-label</i> or
<i>aria-labelledby</i> via the <i>toggleButtonProps</i> property. <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
</p> </p>
<p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p> <p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
<h6>Content Toggle Button Keyboard Support</h6> <h6>Content Toggle Button Keyboard Support</h6>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><i>tab</i></td> <td><i>tab</i></td>
<td>Moves focus to the next the focusable element in the page tab sequence.</td> <td>Moves focus to the next the focusable element in the page tab sequence.</td>
</tr> </tr>
<tr> <tr>
<td><i>shift</i> + <i>tab</i></td> <td><i>shift</i> + <i>tab</i></td>
<td>Moves focus to the previous the focusable element in the page tab sequence.</td> <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
</tr> </tr>
<tr> <tr>
<td><i>enter</i></td> <td><i>enter</i></td>
<td>Toggles the visibility of the content.</td> <td>Toggles the visibility of the content.</td>
</tr> </tr>
<tr> <tr>
<td><i>space</i></td> <td><i>space</i></td>
<td>Toggles the visibility of the content.</td> <td>Toggles the visibility of the content.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

808
pages/fileupload/FileUploadDoc.vue
View File

@ -1,91 +1,90 @@
<template> <template>
<ClientOnly <AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue">
><AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import FileUpload from 'primevue/fileupload'; import FileUpload from 'primevue/fileupload';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/fileupload/fileupload.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/fileupload/fileupload.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p> <p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
<pre v-code><code> <pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload" /&gt; &lt;FileUpload name="demo[]" url="./upload" /&gt;
</code></pre> </code></pre>
<h5>Multiple Uploads</h5> <h5>Multiple Uploads</h5>
<p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p> <p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
<pre v-code><code> <pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload" :multiple="true" /&gt; &lt;FileUpload name="demo[]" url="./upload" :multiple="true" /&gt;
</code></pre> </code></pre>
<h5>Basic UI</h5> <h5>Basic UI</h5>
<p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p> <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
<pre v-code><code> <pre v-code><code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" /&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload" /&gt;
</code></pre> </code></pre>
<h5>DragDrop</h5> <h5>DragDrop</h5>
<p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p> <p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p>
<h5>Auto Uploads</h5> <h5>Auto Uploads</h5>
<p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p> <p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
<pre v-code><code> <pre v-code><code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" /&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload" :auto="true" /&gt;
</code></pre> </code></pre>
<h5>File Types</h5> <h5>File Types</h5>
<p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p> <p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
<pre v-code><code> <pre v-code><code>
&lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt; &lt;FileUpload mode="basic" name="demo[]" url="./upload" accept="image/*" /&gt;
</code></pre> </code></pre>
<h5>File Size and File Limit</h5> <h5>File Size and File Limit</h5>
<p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p> <p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes. Similarly <i>fileLimit</i> is available to restrict the number of files to be uploaded.</p>
<pre v-code><code> <pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" /&gt; &lt;FileUpload name="demo[]" url="./upload" :maxFileSize="1000000" :fileLimit="3" /&gt;
</code></pre> </code></pre>
<p>In order to customize the default messages use <i>invalidFileSizeMessage</i> and <i>invalidFileLimitMessage</i> options where &#123;0&#125; placeholder refers to the filename and &#123;1&#125; the file size.</p> <p>In order to customize the default messages use <i>invalidFileSizeMessage</i> and <i>invalidFileLimitMessage</i> options where &#123;0&#125; placeholder refers to the filename and &#123;1&#125; the file size.</p>
<ul> <ul>
<li>invalidFileSizeMessage: '&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;.'</li> <li>invalidFileSizeMessage: '&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;.'</li>
<li>invalidFileLimitMessage: 'Maximum number of files exceeded, limit is &#123;0&#125; at most.'</li> <li>invalidFileLimitMessage: 'Maximum number of files exceeded, limit is &#123;0&#125; at most.'</li>
</ul> </ul>
<h5>Request Customization</h5> <h5>Request Customization</h5>
<p>XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.</p> <p>XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.</p>
<h5>Custom Upload</h5> <h5>Custom Upload</h5>
<p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p> <p>Uploading implementation can be overridden by enabling <i>customMode</i> property and defining a custom upload handler event.</p>
<pre v-code><code> <pre v-code><code>
&lt;FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" /&gt; &lt;FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" /&gt;
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
myUploader(event) { myUploader(event) {
//event.files == files to upload //event.files == files to upload
} }
</code></pre> </code></pre>
<h5>Templating</h5> <h5>Templating</h5>
<p>FileUpload component is extremely customizable thanks to the templating features, both the <i>header</i> and <i>content</i> sections provide custom slots.</p> <p>FileUpload component is extremely customizable thanks to the templating features, both the <i>header</i> and <i>content</i> sections provide custom slots.</p>
<pre v-code><code> <pre v-code><code>
&lt;FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles"&gt; &lt;FileUpload name="demo[]" url="./upload.php" @upload="onTemplatedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles"&gt;
&lt;template #header="&#123; chooseCallback, uploadCallback, clearCallback, files &#125;"&gt; &lt;template #header="&#123; chooseCallback, uploadCallback, clearCallback, files &#125;"&gt;
&lt;div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2"&gt; &lt;div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2"&gt;
@ -138,375 +137,374 @@ myUploader(event) {
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>name</td> <td>name</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Name of the request parameter to identify the files at backend.</td> <td>Name of the request parameter to identify the files at backend.</td>
</tr> </tr>
<tr> <tr>
<td>url</td> <td>url</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Remote url to upload the files.</td> <td>Remote url to upload the files.</td>
</tr> </tr>
<tr> <tr>
<td>mode</td> <td>mode</td>
<td>string</td> <td>string</td>
<td>advanced</td> <td>advanced</td>
<td>Defines the UI of the component, possible values are "advanced" and "basic".</td> <td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
</tr> </tr>
<tr> <tr>
<td>multiple</td> <td>multiple</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Used to select multiple files at once from file dialog.</td> <td>Used to select multiple files at once from file dialog.</td>
</tr> </tr>
<tr> <tr>
<td>accept</td> <td>accept</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Pattern to restrict the allowed file types such as "image/*".</td> <td>Pattern to restrict the allowed file types such as "image/*".</td>
</tr> </tr>
<tr> <tr>
<td>disabled</td> <td>disabled</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Disables the upload functionality.</td> <td>Disables the upload functionality.</td>
</tr> </tr>
<tr> <tr>
<td>auto</td> <td>auto</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When enabled, upload begins automatically after selection is completed.</td> <td>When enabled, upload begins automatically after selection is completed.</td>
</tr> </tr>
<tr> <tr>
<td>maxFileSize</td> <td>maxFileSize</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Maximum file size allowed in bytes.</td> <td>Maximum file size allowed in bytes.</td>
</tr> </tr>
<tr> <tr>
<td>invalidFileSizeMessage</td> <td>invalidFileSizeMessage</td>
<td>string</td> <td>string</td>
<td>"&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;."</td> <td>"&#123;0&#125;: Invalid file size, file size should be smaller than &#123;1&#125;."</td>
<td>Message of the invalid fize size.</td> <td>Message of the invalid fize size.</td>
</tr> </tr>
<tr> <tr>
<td>invalidFileLimitMessage</td> <td>invalidFileLimitMessage</td>
<td>string</td> <td>string</td>
<td>Maximum number of files exceeded, limit is &#123;0&#125; at most.</td> <td>Maximum number of files exceeded, limit is &#123;0&#125; at most.</td>
<td>Message to display when number of files to be uploaded exceeeds the limit.</td> <td>Message to display when number of files to be uploaded exceeeds the limit.</td>
</tr> </tr>
<tr> <tr>
<td>invalidFileTypeMessage</td> <td>invalidFileTypeMessage</td>
<td>string</td> <td>string</td>
<td>"&#123;0&#125;: Invalid file type, allowed file types: &#123;1&#125;"".</td> <td>"&#123;0&#125;: Invalid file type, allowed file types: &#123;1&#125;"".</td>
<td>Message of the invalid file type.</td> <td>Message of the invalid file type.</td>
</tr> </tr>
<tr> <tr>
<td>fileLimit</td> <td>fileLimit</td>
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Maximum number of files that can be uploaded.</td> <td>Maximum number of files that can be uploaded.</td>
</tr> </tr>
<tr> <tr>
<td>withCredentials</td> <td>withCredentials</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td> <td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
</tr> </tr>
<tr> <tr>
<td>previewWidth</td> <td>previewWidth</td>
<td>number</td> <td>number</td>
<td>50</td> <td>50</td>
<td>Width of the image thumbnail in pixels.</td> <td>Width of the image thumbnail in pixels.</td>
</tr> </tr>
<tr> <tr>
<td>chooseLabel</td> <td>chooseLabel</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Label of the choose button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the choose button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>uploadLabel</td> <td>uploadLabel</td>
<td>string</td> <td>string</td>
<td>Upload</td> <td>Upload</td>
<td>Label of the upload button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the upload button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>cancelLabel</td> <td>cancelLabel</td>
<td>string</td> <td>string</td>
<td>Cancel</td> <td>Cancel</td>
<td>Label of the cancel button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Label of the cancel button. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>customUpload</td> <td>customUpload</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td> <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.</td>
</tr> </tr>
<tr> <tr>
<td>showUploadButton</td> <td>showUploadButton</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to show the upload button.</td> <td>Whether to show the upload button.</td>
</tr> </tr>
<tr> <tr>
<td>showCancelButton</td> <td>showCancelButton</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>Whether to show the cancel button.</td> <td>Whether to show the cancel button.</td>
</tr> </tr>
<tr> <tr>
<td>chooseIcon</td> <td>chooseIcon</td>
<td>string</td> <td>string</td>
<td>pi pi-plus</td> <td>pi pi-plus</td>
<td>Icon of the choose button.</td> <td>Icon of the choose button.</td>
</tr> </tr>
<tr> <tr>
<td>uploadIcon</td> <td>uploadIcon</td>
<td>string</td> <td>string</td>
<td>pi pi-upload</td> <td>pi pi-upload</td>
<td>Icon of the upload button.</td> <td>Icon of the upload button.</td>
</tr> </tr>
<tr> <tr>
<td>cancelIcon</td> <td>cancelIcon</td>
<td>string</td> <td>string</td>
<td>pi pi-times</td> <td>pi pi-times</td>
<td>Icon of the cancel button.</td> <td>Icon of the cancel button.</td>
</tr> </tr>
<tr> <tr>
<td>style</td> <td>style</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Inline style of the component.</td> <td>Inline style of the component.</td>
</tr> </tr>
<tr> <tr>
<td>class</td> <td>class</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the component.</td> <td>Style class of the component.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<div classe="doc-tablewrapper"> <div classe="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>before-upload</td> <td>before-upload</td>
<td> <td>
event.xhr: XmlHttpRequest instance. <br /> event.xhr: XmlHttpRequest instance. <br />
event.formData: FormData object. event.formData: FormData object.
</td> </td>
<td>Callback to invoke before file upload begins to customize the request such as post parameters before the files.</td> <td>Callback to invoke before file upload begins to customize the request such as post parameters before the files.</td>
</tr> </tr>
<tr> <tr>
<td>before-send</td> <td>before-send</td>
<td> <td>
event.xhr: XmlHttpRequest instance. <br /> event.xhr: XmlHttpRequest instance. <br />
event.formData: FormData object. event.formData: FormData object.
</td> </td>
<td>Callback to invoke before file send begins to customize the request such as adding headers.</td> <td>Callback to invoke before file send begins to customize the request such as adding headers.</td>
</tr> </tr>
<tr> <tr>
<td>upload</td> <td>upload</td>
<td> <td>
event.xhr: XmlHttpRequest instance.<br /> event.xhr: XmlHttpRequest instance.<br />
event.files: Uploaded files. event.files: Uploaded files.
</td> </td>
<td>Callback to invoke when file upload is complete.</td> <td>Callback to invoke when file upload is complete.</td>
</tr> </tr>
<tr> <tr>
<td>error</td> <td>error</td>
<td> <td>
event.xhr: XmlHttpRequest instance.<br /> event.xhr: XmlHttpRequest instance.<br />
event.files: Files that are not uploaded. event.files: Files that are not uploaded.
</td> </td>
<td>Callback to invoke if file upload fails.</td> <td>Callback to invoke if file upload fails.</td>
</tr> </tr>
<tr> <tr>
<td>clear</td> <td>clear</td>
<td>-.</td> <td>-.</td>
<td>Callback to invoke when files in queue are removed without uploading.</td> <td>Callback to invoke when files in queue are removed without uploading.</td>
</tr> </tr>
<tr> <tr>
<td>select</td> <td>select</td>
<td> <td>
event.originalEvent: Original browser event. <br /> event.originalEvent: Original browser event. <br />
event.files: List of selected files. event.files: List of selected files.
</td> </td>
<td>Callback to invoke when files are selected.</td> <td>Callback to invoke when files are selected.</td>
</tr> </tr>
<tr> <tr>
<td>progress</td> <td>progress</td>
<td> <td>
event.originalEvent: Original browser event. <br /> event.originalEvent: Original browser event. <br />
event.progress: Calculated progress value. event.progress: Calculated progress value.
</td> </td>
<td>Callback to invoke when files are being uploaded.</td> <td>Callback to invoke when files are being uploaded.</td>
</tr> </tr>
<tr> <tr>
<td>uploader</td> <td>uploader</td>
<td>event.files: List of selected files.</td> <td>event.files: List of selected files.</td>
<td>Callback to invoke to implement a custom upload.</td> <td>Callback to invoke to implement a custom upload.</td>
</tr> </tr>
<tr> <tr>
<td>remove</td> <td>remove</td>
<td> <td>
event.file: Removed file. <br /> event.file: Removed file. <br />
event.files: Remaining files to be uploaded. event.files: Remaining files to be uploaded.
</td> </td>
<td>Callback to invoke when a single file is removed from the file list to upload.</td> <td>Callback to invoke when a single file is removed from the file list to upload.</td>
</tr> </tr>
<tr> <tr>
<td>removeUploadedFile</td> <td>removeUploadedFile</td>
<td> <td>
event.file: Removed uploaded file. <br /> event.file: Removed uploaded file. <br />
event.files: Remaining uploaded files. event.files: Remaining uploaded files.
</td> </td>
<td>Callback to invoke when a single uploaded file is removed from the uploaded file list.</td> <td>Callback to invoke when a single uploaded file is removed from the uploaded file list.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>header</td> <td>header</td>
<td> <td>
files: Files to upload <br /> files: Files to upload <br />
uploadedFiles: Uploaded Files <br /> uploadedFiles: Uploaded Files <br />
chooseCallback: Choose function <br /> chooseCallback: Choose function <br />
uploadCallback: Upload function <br /> uploadCallback: Upload function <br />
clearCallback: Clear function clearCallback: Clear function
</td> </td>
</tr> </tr>
<tr> <tr>
<td>content</td> <td>content</td>
<td> <td>
files: Files to upload <br /> files: Files to upload <br />
uploadedFiles: Uploaded Files <br /> uploadedFiles: Uploaded Files <br />
progress: Uploaded progress as number <br /> progress: Uploaded progress as number <br />
messages: Status messages about upload process <br /> messages: Status messages about upload process <br />
removeFileCallback(index): Function to remove a file <br /> removeFileCallback(index): Function to remove a file <br />
removeUploadedFileCallback(index): Function to remove an uploaded file removeUploadedFileCallback(index): Function to remove an uploaded file
</td> </td>
</tr> </tr>
<tr> <tr>
<td>empty</td> <td>empty</td>
<td>-</td> <td>-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-fileupload</td> <td>p-fileupload</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-basic</td> <td>p-fileupload-basic</td>
<td>Container element in basic mode.</td> <td>Container element in basic mode.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-advanced</td> <td>p-fileupload-advanced</td>
<td>Container element in advanced mode.</td> <td>Container element in advanced mode.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-buttonbar</td> <td>p-fileupload-buttonbar</td>
<td>Header containing the buttons.</td> <td>Header containing the buttons.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-content</td> <td>p-fileupload-content</td>
<td>Content section.</td> <td>Content section.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-file</td> <td>p-fileupload-file</td>
<td>File item.</td> <td>File item.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-file-thumbnail</td> <td>p-fileupload-file-thumbnail</td>
<td>Image preview of a file.</td> <td>Image preview of a file.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-file-details</td> <td>p-fileupload-file-details</td>
<td>Container of file details.</td> <td>Container of file details.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-file-name</td> <td>p-fileupload-file-name</td>
<td>File name element.</td> <td>File name element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-file-size</td> <td>p-fileupload-file-size</td>
<td>File size element.</td> <td>File size element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-file-badge</td> <td>p-fileupload-file-badge</td>
<td>File badge element.</td> <td>File badge element.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-file-actions</td> <td>p-fileupload-file-actions</td>
<td>Container of file actions.</td> <td>Container of file actions.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-file-remove</td> <td>p-fileupload-file-remove</td>
<td>Button to remove a file.</td> <td>Button to remove a file.</td>
</tr> </tr>
<tr> <tr>
<td>p-fileupload-empty</td> <td>p-fileupload-empty</td>
<td>Container of the empty slot.</td> <td>Container of the empty slot.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

340
pages/filterservice/FilterServiceDoc.vue
View File

@ -1,21 +1,20 @@
<template> <template>
<ClientOnly <AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue">
><AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import &#123;FilterService&#125; from 'primevue/api'; import &#123;FilterService&#125; from 'primevue/api';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Filters are accessed with <i>FilterService.filters</i>.</p> <p>Filters are accessed with <i>FilterService.filters</i>.</p>
<pre v-code.script><code> <pre v-code.script><code>
const value = 'PrimeVue'; const value = 'PrimeVue';
FilterService.filters.equals(value, 'Vue'); //false FilterService.filters.equals(value, 'Vue'); //false
@ -30,9 +29,9 @@ FilterService.filters.in(value, ['PrimeFaces', 'PrimeVue']); //true
</code></pre> </code></pre>
<h5>Custom Constraint</h5> <h5>Custom Constraint</h5>
<p>FilterService can be extended by adding new constraints using the <span>register</span> function.</p> <p>FilterService can be extended by adding new constraints using the <span>register</span> function.</p>
<pre v-code.script><code> <pre v-code.script><code>
FilterService.register('isPrimeNumber', (value, filter): boolean => &#123; FilterService.register('isPrimeNumber', (value, filter): boolean => &#123;
if (filter === undefined || filter === null || filter.trim() === '') &#123; if (filter === undefined || filter === null || filter.trim() === '') &#123;
return true; return true;
@ -51,7 +50,147 @@ FilterService.filters['isPrimeNumber'](568985673); //false
</code></pre> </code></pre>
<h5>Built-in Constraints</h5> <h5>Built-in Constraints</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>startsWith</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value starts with the filter value</td>
</tr>
<tr>
<td>contains</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value contains the filter value</td>
</tr>
<tr>
<td>endsWith</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value ends with the filter value</td>
</tr>
<tr>
<td>equals</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value equals the filter value</td>
</tr>
<tr>
<td>notEquals</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value does not equal the filter value</td>
</tr>
<tr>
<td>in</td>
<td>
value: Value to filter<br />
filter[]: An array of filter values<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value contains the filter value</td>
</tr>
<tr>
<td>lt</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is less than the filter value</td>
</tr>
<tr>
<td>lte</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is less than or equals to the filter value</td>
</tr>
<tr>
<td>gt</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is greater than the filter value</td>
</tr>
<tr>
<td>gte</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is greater than or equals to the filter value</td>
</tr>
<tr>
<td>is</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value equals the filter value, alias to equals</td>
</tr>
<tr>
<td>isNot</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value does not equal the filter value, alias to notEquals.</td>
</tr>
<tr>
<td>before</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the date value is before the filter date.</td>
</tr>
<tr>
<td>after</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the date value is after the filter date.</td>
</tr>
</tbody>
</table>
<h5>FilterService API</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
@ -63,178 +202,37 @@ FilterService.filters['isPrimeNumber'](568985673); //false
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>startsWith</td> <td>filter</td>
<td> <td>
value: Value to filter<br /> value[]: An array of values to filter<br />
filter: Filter value<br /> fields[]: An array of properties in the value object<br />
filterValue: Filter value<br />
filterMatchMode: Constraint<br />
filterLocale: Locale to use in filtering filterLocale: Locale to use in filtering
</td> </td>
<td>Whether the value starts with the filter value</td> <td>Whether the property values of the given value collection matches the filter.</td>
</tr> </tr>
<tr> <tr>
<td>contains</td> <td>filters</td>
<td> <td>-</td>
value: Value to filter<br /> <td>Property to access constraints collection.</td>
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value contains the filter value</td>
</tr> </tr>
<tr> <tr>
<td>endsWith</td> <td>register</td>
<td> <td>
value: Value to filter<br /> name: string <br />
filter: Filter value<br /> fn: Filter callback
filterLocale: Locale to use in filtering
</td> </td>
<td>Whether the value ends with the filter value</td> <td>Registers a new constraint in filters.</td>
</tr>
<tr>
<td>equals</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value equals the filter value</td>
</tr>
<tr>
<td>notEquals</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value does not equal the filter value</td>
</tr>
<tr>
<td>in</td>
<td>
value: Value to filter<br />
filter[]: An array of filter values<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value contains the filter value</td>
</tr>
<tr>
<td>lt</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is less than the filter value</td>
</tr>
<tr>
<td>lte</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is less than or equals to the filter value</td>
</tr>
<tr>
<td>gt</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is greater than the filter value</td>
</tr>
<tr>
<td>gte</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value is greater than or equals to the filter value</td>
</tr>
<tr>
<td>is</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value equals the filter value, alias to equals</td>
</tr>
<tr>
<td>isNot</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the value does not equal the filter value, alias to notEquals.</td>
</tr>
<tr>
<td>before</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the date value is before the filter date.</td>
</tr>
<tr>
<td>after</td>
<td>
value: Value to filter<br />
filter: Filter value<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the date value is after the filter date.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<h5>FilterService API</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>filter</td>
<td>
value[]: An array of values to filter<br />
fields[]: An array of properties in the value object<br />
filterValue: Filter value<br />
filterMatchMode: Constraint<br />
filterLocale: Locale to use in filtering
</td>
<td>Whether the property values of the given value collection matches the filter.</td>
</tr>
<tr>
<td>filters</td>
<td>-</td>
<td>Property to access constraints collection.</td>
</tr>
<tr>
<td>register</td>
<td>
name: string <br />
fn: Filter callback
</td>
<td>Registers a new constraint in filters.</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

2
pages/floatlabel/index.vue
View File

@ -112,7 +112,7 @@
</div> </div>
</div> </div>
<ClientOnly><AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" /></ClientOnly> <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" />
</div> </div>
</template> </template>

74
pages/focustrap/FocusTrapDoc.vue
View File

@ -1,66 +1,64 @@
<template> <template>
<ClientOnly <AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue">
><AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import FocusTrap from 'primevue/focustrap'; import FocusTrap from 'primevue/focustrap';
app.directive('focustrap', FocusTrap); app.directive('focustrap', FocusTrap);
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/focustrap/focustrap.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/focustrap/focustrap.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>
directives: { directives: {
'focustrap': FocusTrap 'focustrap': FocusTrap
} }
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>FocusTrap is applied to a container element with the v-focustrap directive.</p> <p>FocusTrap is applied to a container element with the v-focustrap directive.</p>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;div v-focustrap&gt; &lt;div v-focustrap&gt;
//content //content
&lt;/div&gt; &lt;/div&gt;
</template>
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>disabled</td> <td>disabled</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>When set as true, focus wouldn't be managed.</td> <td>When set as true, focus wouldn't be managed.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<p>Directive has no events.</p> <p>Directive has no events.</p>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

22
pages/fullcalendar/FullCalendarDoc.vue
View File

@ -1,17 +1,15 @@
<template> <template>
<ClientOnly <AppDoc
><AppDoc name="FullCalendarDemo"
name="FullCalendarDemo" :sources="sources"
:sources="sources" :service="['EventService']"
:service="['EventService']" :data="['events']"
:data="['events']" github="fullcalendar/FullCalendarDemo.vue"
github="fullcalendar/FullCalendarDemo.vue" :dependencies="{ '@fullcalendar/core': '^5.7.2', '@fullcalendar/vue3': '^5.7.2', '@fullcalendar/daygrid': '^5.7.2', '@fullcalendar/interaction': '^5.7.2', '@fullcalendar/timegrid': '^5.7.2' }"
:dependencies="{ '@fullcalendar/core': '^5.7.2', '@fullcalendar/vue3': '^5.7.2', '@fullcalendar/daygrid': '^5.7.2', '@fullcalendar/interaction': '^5.7.2', '@fullcalendar/timegrid': '^5.7.2' }" component="FullCalendar"
component="FullCalendar"
>
<p>As it is not a component from PrimeVue, refer to the FullCalendar <a href="https://fullcalendar.io/docs/vue">documentation</a> for more information.</p>
</AppDoc></ClientOnly
> >
<p>As it is not a component from PrimeVue, refer to the FullCalendar <a href="https://fullcalendar.io/docs/vue">documentation</a> for more information.</p>
</AppDoc>
</template> </template>
<script> <script>

10
pages/galleria/Advanced.vue
View File

@ -49,7 +49,7 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass" &lt;Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"&gt; :circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
@ -65,15 +65,15 @@
&lt;div class="custom-galleria-footer"&gt; &lt;div class="custom-galleria-footer"&gt;
&lt;Button icon="pi pi-list" @click="onThumbnailButtonClick" /&gt; &lt;Button icon="pi pi-list" @click="onThumbnailButtonClick" /&gt;
&lt;span v-if="images" class="title-container"&gt; &lt;span v-if="images" class="title-container"&gt;
&lt;span&gt;{{activeIndex + 1}}/{{images.length}}&lt;/span&gt; &lt;span&gt;&#123;&#123;activeIndex + 1&#125;&#125;/&#123;&#123;images.length&#125;&#125;&lt;/span&gt;
&lt;span class="title"&gt;{{images[activeIndex].title}}&lt;/span&gt; &lt;span class="title"&gt;&#123;&#123;images[activeIndex].title&#125;&#125;&lt;/span&gt;
&lt;span&gt;{{images[activeIndex].alt}}&lt;/span&gt; &lt;span&gt;&#123;&#123;images[activeIndex].alt&#125;&#125;&lt;/span&gt;
&lt;/span&gt; &lt;/span&gt;
&lt;Button :icon="fullScreenIcon" @click="toggleFullScreen" class="fullscreen-button" /&gt; &lt;Button :icon="fullScreenIcon" @click="toggleFullScreen" class="fullscreen-button" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>

4
pages/galleria/AutoPlay.vue
View File

@ -23,7 +23,7 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:circular="true" :autoPlay="true" :transitionInterval="2000"&gt; :circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
@ -33,7 +33,7 @@
&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;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>

8
pages/galleria/Caption.vue
View File

@ -29,7 +29,7 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
&lt;template #item="{item}"&gt; &lt;template #item="{item}"&gt;
&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;
@ -40,11 +40,11 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #caption="{item}"&gt; &lt;template #caption="{item}"&gt;
&lt;h4 style="margin-bottom: .5rem;"&gt;{{item.title}}&lt;/h4&gt; &lt;h4 style="margin-bottom: .5rem;"&gt;&#123;&#123;item.title&#125;&#125;&lt;/h4&gt;
&lt;p&gt;{{item.alt}}&lt;/p&gt; &lt;p&gt;&#123;&#123;item.alt&#125;&#125;&lt;/p&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>

4
pages/galleria/FullScreen.vue
View File

@ -69,7 +69,7 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;h3&gt;With Thumbnails&lt;/h3&gt; &lt;h3&gt;With Thumbnails&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showItemNavigators="true" v-model:visible="displayBasic"&gt; :circular="true" :fullScreen="true" :showItemNavigators="true" v-model:visible="displayBasic"&gt;
@ -112,7 +112,7 @@
&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;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>

4
pages/galleria/GalleriaDoc.vue
View File

@ -625,7 +625,7 @@ responsiveOptions: [
<a href="https://github.com/primefaces/primevue/tree/master/src/views/galleria" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/primefaces/primevue/tree/master/src/views/galleria" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span> <span>View on GitHub</span>
</a> </a>
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
@ -634,7 +634,7 @@ responsiveOptions: [
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>

6
pages/galleria/Indicator.vue
View File

@ -121,7 +121,7 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;h3&gt;Indicators with Click Event&lt;/h3&gt; &lt;h3&gt;Indicators with Click Event&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
:showThumbnails="false" :showIndicators="true"&gt; :showThumbnails="false" :showIndicators="true"&gt;
@ -178,11 +178,11 @@
&lt;/template&gt; &lt;/template&gt;
&lt;template #indicator="{index}"&gt; &lt;template #indicator="{index}"&gt;
&lt;span style="color: #e9ecef; cursor: pointer"&gt; &lt;span style="color: #e9ecef; cursor: pointer"&gt;
{{index + 1}} &#123;&#123;index + 1&#125;&#125;
&lt;/span&gt; &lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>

4
pages/galleria/Navigator.vue
View File

@ -70,7 +70,7 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;h3&gt;Item Navigators and Thumbnails&lt;/h3&gt; &lt;h3&gt;Item Navigators and Thumbnails&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
:showItemNavigators="true"&gt; :showItemNavigators="true"&gt;
@ -114,7 +114,7 @@
&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;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>

4
pages/galleria/Programmatic.vue
View File

@ -28,7 +28,7 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;div style="padding: .5rem 0"&gt; &lt;div style="padding: .5rem 0"&gt;
&lt;Button icon="pi pi-minus" @click="prev" class="p-button-secondary" /&gt; &lt;Button icon="pi pi-minus" @click="prev" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" /&gt; &lt;Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" /&gt;
@ -42,7 +42,7 @@
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>

4
pages/galleria/Responsive.vue
View File

@ -23,7 +23,7 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&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;
@ -32,7 +32,7 @@
&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;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>

4
pages/galleria/Thumbnail.vue
View File

@ -64,7 +64,7 @@
<div class="content-section documentation"> <div class="content-section documentation">
<TabView> <TabView>
<TabPanel header="Source"> <TabPanel header="Source">
<pre v-code><code><template v-pre> <pre v-code><code>
&lt;h3&gt;Positioned at Bottom&lt;/h3&gt; &lt;h3&gt;Positioned at Bottom&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
@ -108,7 +108,7 @@
&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;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
</template>
</code></pre> </code></pre>
<pre v-code.script><code> <pre v-code.script><code>

380
pages/image/ImageDoc.vue
View File

@ -1,32 +1,31 @@
<template> <template>
<ClientOnly <AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue">
><AppDoc name="ImageDemo" :sources="sources" github="image/ImageDemo.vue"> <h5>Import via Module</h5>
<h5>Import via Module</h5> <pre v-code.script><code>
<pre v-code.script><code>
import Image from 'primevue/image'; import Image from 'primevue/image';
</code></pre> </code></pre>
<h5>Import via CDN</h5> <h5>Import via CDN</h5>
<pre v-code><code> <pre v-code><code>
&lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/core/core.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/primevue@^3/image/image.min.js"&gt;&lt;/script&gt; &lt;script src="https://unpkg.com/primevue@^3/image/image.min.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Image is used as the native <i>img</i> element and supports all properties that the native element has.</p> <p>Image is used as the native <i>img</i> element and supports all properties that the native element has.</p>
<pre v-code><code> <pre v-code><code>
&lt;Image src="image1.png" alt="Image Text" /&gt; &lt;Image src="image1.png" alt="Image Text" /&gt;
</code></pre> </code></pre>
<h5>Preview</h5> <h5>Preview</h5>
<p>Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.</p> <p>Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.</p>
<h5>Indicator Templating</h5> <h5>Indicator Templating</h5>
<p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> template for custom content.</p> <p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> template for custom content.</p>
<pre v-code><code> <pre v-code><code>
&lt;Image src="image1.png" alt="Image Text"&gt; &lt;Image src="image1.png" alt="Image Text"&gt;
&lt;template #indicator&gt; &lt;template #indicator&gt;
Preview Content Preview Content
@ -35,191 +34,190 @@ import Image from 'primevue/image';
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
<p>Image passes any valid attribute to the underlying img element, additional attribute is the following.</p> <p>Image passes any valid attribute to the underlying img element, additional attribute is the following.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Default</th> <th>Default</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>preview</td> <td>preview</td>
<td>boolean</td> <td>boolean</td>
<td>false</td> <td>false</td>
<td>Controls the preview functionality.</td> <td>Controls the preview functionality.</td>
</tr> </tr>
<tr> <tr>
<td>imageStyle</td> <td>imageStyle</td>
<td>any</td> <td>any</td>
<td>null</td> <td>null</td>
<td>Inline style of the image element.</td> <td>Inline style of the image element.</td>
</tr> </tr>
<tr> <tr>
<td>imageClass</td> <td>imageClass</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the image element.</td> <td>Style class of the image element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Events</h5> <h5>Events</h5>
<p>Any valid event like click and mouseover are passed to the underlying input element. Events below are the additional ones related to the preview functionality.</p> <p>Any valid event like click and mouseover are passed to the underlying input element. Events below are the additional ones related to the preview functionality.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>show</td> <td>show</td>
<td>-</td> <td>-</td>
<td>Triggered when the preview overlay is shown.</td> <td>Triggered when the preview overlay is shown.</td>
</tr> </tr>
<tr> <tr>
<td>hide</td> <td>hide</td>
<td>-</td> <td>-</td>
<td>Triggered when the preview overlay is hidden.</td> <td>Triggered when the preview overlay is hidden.</td>
</tr> </tr>
<tr> <tr>
<td>error</td> <td>error</td>
<td>-</td> <td>-</td>
<td>Triggered when an error occurs while loading an image file.</td> <td>Triggered when an error occurs while loading an image file.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Slots</h5> <h5>Slots</h5>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Parameters</th> <th>Parameters</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>indicator</td> <td>indicator</td>
<td>-</td> <td>-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p> <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Element</th> <th>Element</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-image</td> <td>p-image</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-image-preview-container</td> <td>p-image-preview-container</td>
<td>Container element with preview enabled.</td> <td>Container element with preview enabled.</td>
</tr> </tr>
<tr> <tr>
<td>p-image-preview-indicator</td> <td>p-image-preview-indicator</td>
<td>Mask layer over the image when hovered.</td> <td>Mask layer over the image when hovered.</td>
</tr> </tr>
<tr> <tr>
<td>p-image-preview-icon</td> <td>p-image-preview-icon</td>
<td>Icon of the preview indicator.</td> <td>Icon of the preview indicator.</td>
</tr> </tr>
<tr> <tr>
<td>p-image-mask</td> <td>p-image-mask</td>
<td>Preview overlay container.</td> <td>Preview overlay container.</td>
</tr> </tr>
<tr> <tr>
<td>p-image-toolbar</td> <td>p-image-toolbar</td>
<td>Transformation options container.</td> <td>Transformation options container.</td>
</tr> </tr>
<tr> <tr>
<td>p-image-action</td> <td>p-image-action</td>
<td>An element inside the toolbar.</td> <td>An element inside the toolbar.</td>
</tr> </tr>
<tr> <tr>
<td>p-image-preview</td> <td>p-image-preview</td>
<td>Image element inside the preview overlay.</td> <td>Image element inside the preview overlay.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Accessibility</h5> <h5>Accessibility</h5>
<h6>Screen Reader</h6> <h6>Screen Reader</h6>
<p> <p>
The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the <router-link to="/locale">locale</router-link> API by default, with <i>previewButtonProps</i> The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the <router-link to="/locale">locale</router-link> API by default, with <i>previewButtonProps</i>
you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly. you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
</p> </p>
<p>When preview is active, <i>dialog</i> role with <i>aria-modal</i> is applied to the overlay image container.</p> <p>When preview is active, <i>dialog</i> role with <i>aria-modal</i> is applied to the overlay image container.</p>
<p>Button controls use <i>aria.rotateRight</i>, <i>aria.rotateLeft</i>, <i>aria.zoomIn</i>, <i>aria.zoomOut</i> and <i>aria.close</i> from the <router-link to="/locale">locale</router-link> API as <i>aria-label</i>.</p> <p>Button controls use <i>aria.rotateRight</i>, <i>aria.rotateLeft</i>, <i>aria.zoomIn</i>, <i>aria.zoomOut</i> and <i>aria.close</i> from the <router-link to="/locale">locale</router-link> API as <i>aria-label</i>.</p>
<h6>ButtonBar Keyboard Support</h6> <h6>ButtonBar Keyboard Support</h6>
<p>When preview is activated, close button receives the initial focus.</p> <p>When preview is activated, close button receives the initial focus.</p>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
<table class="doc-table"> <table class="doc-table">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th>Key</th>
<th>Function</th> <th>Function</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<i>tab</i> <i>tab</i>
</td> </td>
<td>Moves focus through button bar.</td> <td>Moves focus through button bar.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>enter</i> <i>enter</i>
</td> </td>
<td>Activates the button.</td> <td>Activates the button.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>space</i> <i>space</i>
</td> </td>
<td>Activates the button.</td> <td>Activates the button.</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<i>esc</i> <i>esc</i>
</td> </td>
<td>Closes the image preview.</td> <td>Closes the image preview.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc></ClientOnly </AppDoc>
>
</template> </template>
<script> <script>

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