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

Merge branch 'master' of https://github.com/primefaces/primevue into radio-button-pt-fix

pull/4203/head
Huge Letters 2023-07-28 17:03:37 +02:00
parent 3d14af1c97 4b8a3f2b19
commit eb49853d1b
342 changed files with 13151 additions and 1499 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
CHANGELOG.md
View File

@ -1,5 +1,22 @@
# Changelog
## [3.31.0](https://github.com/primefaces/primevue/tree/3.31.0) (2023-07-25)
**Implemented New Features and Enhancements:**
- Tailwind Theme for Unstyled Mode [\#4205](https://github.com/primefaces/primevue/issues/4205)
- PT context improvements [\#4196](https://github.com/primefaces/primevue/issues/4196)
- Add item parameter to menuitem options for pt property [\#4190](https://github.com/primefaces/primevue/issues/4190)
**Fixed bugs:**
- Bootstrap: Breadcrumb icon fix [\#4195](https://github.com/primefaces/primevue/issues/4195)
- CascadeSelect unstyled mode defect [\#4192](https://github.com/primefaces/primevue/issues/4192)
- InputSwitch: pt prop has incorrect type [\#4187](https://github.com/primefaces/primevue/issues/4187)
- TabView: ID used in aria-controls does not exist on panel content div [\#4181](https://github.com/primefaces/primevue/issues/4181)
- Dropdown: default optionLabel and default optionValue are null \(but doc say, default to label and value\) [\#4174](https://github.com/primefaces/primevue/issues/4174)
- Image: Preview not closing on escape click [\#4089](https://github.com/primefaces/primevue/issues/4089)
## [3.30.2](https://github.com/primefaces/primevue/tree/3.30.2) (2023-07-20)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.30.1...3.30.2)

6
assets/styles/layout/_doc.scss
View File

@ -1,10 +1,11 @@
.doc-tabmenu {
list-style: none;
margin: 0 17rem 0 0;
padding: 0;
padding: 0 0 1px 0;
display: flex;
margin-bottom: 2rem;
border-bottom: 1px solid var(--surface-border);
overflow: auto;
li {
margin-bottom: -1px;
@ -13,7 +14,7 @@
background-color: transparent;
border: 0 none;
display: block;
padding: 1rem 0;
padding: 1rem 2rem;
min-width: 12rem;
text-align: center;
color: var(--text-color-secondary);
@ -25,6 +26,7 @@
border-bottom: 1px solid transparent;
border-top-right-radius: var(--border-round);
border-top-left-radius: var(--border-round);
white-space: nowrap;
&:hover {
border-bottom-color: var(--text-color);

15
components/doc/DocComponent.vue
View File

@ -12,8 +12,11 @@
<li :class="{ 'doc-tabmenu-active': tab === 1 }">
<button type="button" @click="tab = 1">API</button>
</li>
<li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 2 }">
<button type="button" @click="tab = 2">PASS THROUGH</button>
<li :class="{ 'doc-tabmenu-active': tab === 2 }">
<button type="button" @click="tab = 2">THEMING</button>
</li>
<li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 3 }">
<button type="button" @click="tab = 3">PASS THROUGH</button>
</li>
</ul>
@ -34,6 +37,10 @@
</div>
<div v-if="tab === 2" class="doc-tabpanel">
<component :is="{ ...themingDocs }" />
</div>
<div v-if="tab === 3" class="doc-tabpanel">
<component :is="{ ...ptTabComponent }" />
</div>
</div>
@ -42,14 +49,14 @@
<script>
export default {
props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent'],
props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent', 'themingDocs'],
data() {
return {
tab: 0
};
},
mounted() {
this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 2 : 0;
this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 3 : 0;
}
};
</script>

10
components/doc/DocSectionCode.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="relative doc-section-code">
<div v-if="!embedded" class="relative doc-section-code">
<div class="flex surface-card align-items-center justify-content-end absolute z-1" :style="{ right: '.75rem', top: '.75rem', gap: '.75rem' }">
<template v-if="codeMode !== 'basic' && !hideToggleCode">
<Button
@ -111,6 +111,7 @@
</code></pre>
</template>
</div>
<div v-else id="embed"></div>
</template>
<script>
@ -154,6 +155,10 @@ export default {
importCode: {
type: Boolean,
default: false
},
embedded: {
type: Boolean,
default: false
}
},
data() {
@ -162,6 +167,9 @@ export default {
codeLang: this.code['options'] ? 'composition' : 'basic'
};
},
mounted() {
this.embedded && useStackBlitz(this.codeLang, this.code['composition'], this.service, this.code.pages, this.dependencies, this.component, this.extFiles, this.embedded);
},
methods: {
toggleCodeMode(content) {
this.codeMode = this.codeMode === 'basic' ? content : 'basic';

36
components/doc/codeeditor/index.js
View File

@ -28,9 +28,9 @@ const useCodeSandbox = (language, code, service, extPages, dependencies, compone
.then((data) => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'));
};
const useStackBlitz = (language, code, service, extPages, dependencies, component, extFiles) => {
const useStackBlitz = (language, code, service, extPages, dependencies, component, extFiles, embedded = false) => {
const getStackBlitzParameters = (sourceType) => {
const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles }, sourceType);
const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles, embedded }, sourceType);
return { files, dependenciesDemo, sourceFileName };
};
@ -41,20 +41,28 @@ const useStackBlitz = (language, code, service, extPages, dependencies, componen
Object.entries(stackBlitzParameters.files).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content));
sdk.openProject(
{
title: 'PrimeVue Demo',
template: 'node',
description:
'**\n PrimeVue is an open source UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
dependencies: stackBlitzParameters.dependencies,
files
},
{
const primevueproject = {
title: embedded ? 'PrimeVue Tailwind Demo' : 'PrimeVue Demo',
template: 'node',
description: embedded
? "This example demonstrates how to style components with Tailwind CSS using PrimeVue's unstyled property. As mentioned in the PrimeVue documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
: '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
dependencies: stackBlitzParameters.dependencies,
files
};
if (embedded) {
sdk.embedProject('embed', primevueproject, {
openFile: 'src/main.js',
view: 'default',
height: '800px'
});
} else {
sdk.openProject(primevueproject, {
newWindow: true,
openFile: [stackBlitzParameters.sourceFileName]
}
);
});
}
};
export { useCodeSandbox, useStackBlitz };

143
components/doc/codeeditor/templates.js
View File

File diff suppressed because one or more lines are too long

4
components/lib/dock/Dock.d.ts vendored
View File

@ -104,6 +104,10 @@ export interface DockContext {
* Current index of the menuitem.
*/
index: number;
/**
* Current menuitem
*/
item: any;
/**
* Current active state of menuitem as a boolean.
* @defaultValue false

14
components/lib/dock/Dock.vue
View File

@ -1,6 +1,18 @@
<template>
<div :class="cx('root')" :style="style" v-bind="ptm('root')" data-pc-name="dock">
<DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt"></DockSub>
<DockSub
:model="model"
:templates="$slots"
:exact="exact"
:tooltipOptions="tooltipOptions"
:position="position"
:menuId="menuId"
:aria-label="ariaLabel"
:aria-labelledby="ariaLabelledby"
:tabindex="tabindex"
:pt="pt"
:unstyled="unstyled"
></DockSub>
</div>
</template>

15
components/lib/dock/DockSub.vue
View File

@ -25,11 +25,11 @@
:aria-disabled="disabled(processedItem)"
@click="onItemClick($event, processedItem)"
@mouseenter="onItemMouseEnter(index)"
v-bind="getPTOptions('menuitem', index)"
v-bind="getPTOptions('menuitem', processedItem, index)"
:data-p-focused="isItemActive(getItemId(index))"
:data-p-disabled="disabled(processedItem) || false"
>
<div :class="cx('content')" v-bind="getPTOptions('content', index)">
<div :class="cx('content')" v-bind="getPTOptions('content', processedItem, index)">
<template v-if="!templates['item']">
<router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
<a
@ -40,10 +40,10 @@
tabindex="-1"
aria-hidden="true"
@click="onItemActionClick($event, processedItem, navigate)"
v-bind="getPTOptions('action', index)"
v-bind="getPTOptions('action', processedItem, index)"
>
<template v-if="!templates['icon']">
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', index)"></span>
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span>
</template>
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
</a>
@ -56,10 +56,10 @@
:target="processedItem.target"
tabindex="-1"
aria-hidden="true"
v-bind="getPTOptions('action', index)"
v-bind="getPTOptions('action', processedItem, index)"
>
<template v-if="!templates['icon']">
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', index)"></span>
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span>
</template>
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
</a>
@ -141,10 +141,11 @@ export default {
getItemProp(processedItem, name) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
},
getPTOptions(key, index) {
getPTOptions(key, item, index) {
return this.ptm(key, {
context: {
index,
item,
active: this.isItemActive(this.getItemId(index))
}
});

30
components/lib/inputmask/InputMask.d.ts vendored
View File

@ -10,7 +10,16 @@
import { ComponentHooks } from '../basecomponent';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | null | undefined;
export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | ((options: InputMaskPassThroughMethodOptions) => InputMaskPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface InputMaskPassThroughMethodOptions {
instance: any;
props: InputMaskProps;
context: InputMaskContext;
}
/**
* Custom passthrough(pt) options.
@ -35,6 +44,22 @@ export interface InputMaskPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current options in InputMask component.
*/
export interface InputMaskContext {
/**
* Current filled state of the component as a boolean.
* @defaultValue false
*/
filled: boolean;
/**
* Current disabled state of the component as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
/**
* Defines valid properties in InputMask component.
*/
@ -79,6 +104,9 @@ export interface InputMaskProps {
unstyled?: boolean;
}
/**
* Defines valid slots in InputMask component.
*/
export interface InputMaskSlots {}
/**

10
components/lib/inputmask/InputMask.vue
View File

@ -1,5 +1,5 @@
<template>
<input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root')" data-pc-name="inputmask" />
<input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root', ptmParams)" data-pc-name="inputmask" />
</template>
<script>
@ -496,6 +496,14 @@ export default {
computed: {
filled() {
return this.modelValue != null && this.modelValue.toString().length > 0;
},
ptmParams() {
return {
context: {
filled: this.filled,
disabled: this.$attrs.disabled || this.$attrs.disabled === ''
}
};
}
}
};

8
components/lib/megamenu/MegaMenu.d.ts vendored
View File

@ -154,6 +154,14 @@ export interface MegaMenuState {
* Defines current options in MegaMenu component.
*/
export interface MegaMenuContext {
/**
* Current menuitem
*/
item: any;
/**
* Current index of the menuitem.
*/
index: number;
/**
* Current active state of menuitem as a boolean.
* @defaultValue false

25
components/lib/megamenu/MegaMenuSub.vue
View File

@ -15,27 +15,27 @@
:aria-level="level + 1"
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, 'menuitem')"
v-bind="getPTOptions(processedItem, index, 'menuitem')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
<template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :class="cx('text')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :class="cx('text')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
</template>
</a>
</template>
@ -58,6 +58,7 @@
:exact="exact"
:level="level + 1"
:pt="pt"
:unstyled="unstyled"
@item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)"
/>
@ -150,9 +151,11 @@ export default {
getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label');
},
getPTOptions(processedItem, key) {
getPTOptions(processedItem, index, key) {
return this.ptm(key, {
context: {
item: processedItem,
index,
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)
}

8
components/lib/menu/Menu.d.ts vendored
View File

@ -119,6 +119,14 @@ export interface MenuState {
* Defines current options in Menu component.
*/
export interface MenuContext {
/**
* Current menuitem
*/
item: any;
/**
* Current index of the menuitem.
*/
index: number;
/**
* Current focused state of menuitem as a boolean.
* @defaultValue false

2
components/lib/menu/Menu.vue
View File

@ -30,7 +30,7 @@
</template>
</template>
<li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="[cx('separator'), item.class]" :style="item.style" role="separator" v-bind="ptm('separator')"></li>
<PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
<PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :index="i" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
</template>
</ul>
<div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">

5
components/lib/menu/Menuitem.vue
View File

@ -47,7 +47,8 @@ export default {
templates: null,
exact: null,
id: null,
focusedOptionId: null
focusedOptionId: null,
index: null
},
methods: {
getItemProp(processedItem, name) {
@ -56,6 +57,8 @@ export default {
getPTOptions(key) {
return this.ptm(key, {
context: {
item: this.item,
index: this.index,
focused: this.isItemFocused()
}
});

8
components/lib/menubar/Menubar.d.ts vendored
View File

@ -151,6 +151,14 @@ export interface MenubarState {
* Defines current options in Menubar component.
*/
export interface MenubarContext {
/**
* Current menuitem
*/
item: any;
/**
* Current index of the menuitem.
*/
index: number;
/**
* Current active state of menuitem as a boolean.
* @defaultValue false

23
components/lib/menubar/MenubarSub.vue
View File

@ -14,27 +14,27 @@
:aria-level="level + 1"
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, 'menuitem')"
v-bind="getPTOptions(processedItem, index, 'menuitem')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
<template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
<component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
</template>
</a>
</template>
@ -53,6 +53,7 @@
:exact="exact"
:level="level + 1"
:pt="pt"
:unstyled="unstyled"
@item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)"
/>
@ -137,9 +138,11 @@ export default {
getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label');
},
getPTOptions(processedItem, key) {
getPTOptions(processedItem, index, key) {
return this.ptm(key, {
context: {
item: processedItem,
index,
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)
}

4
components/lib/panelmenu/PanelMenu.d.ts vendored
View File

@ -134,6 +134,10 @@ export interface PanelMenuState {
* Defines current options in PanelMenu component.
*/
export interface PanelMenuContext {
/**
* Current menuitem
*/
item: any;
/**
* Index of the menuitem.
*/

1
components/lib/panelmenu/PanelMenuSub.vue
View File

@ -130,6 +130,7 @@ export default {
getPTOptions(key, processedItem, index) {
return this.ptm(key, {
context: {
item: processedItem,
index,
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)

5
components/lib/speeddial/SpeedDial.d.ts vendored
View File

@ -112,6 +112,11 @@ export interface SpeedDialContext {
* @defaultValue false
*/
active: boolean;
/**
* Current hidden state of menuitem as a boolean.
* @defaultValue false
*/
hidden: boolean;
}
/**

3
components/lib/speeddial/SpeedDial.vue
View File

@ -111,7 +111,8 @@ export default {
getPTOptions(id, key) {
return this.ptm(key, {
context: {
active: this.isItemActive(id)
active: this.isItemActive(id),
hidden: !this.d_visible
}
});
},

11
components/lib/splitterpanel/SplitterPanel.d.ts vendored
View File

@ -19,6 +19,7 @@ export declare type SplitterPanelPassThroughOptionType = SplitterPanelPassThroug
export interface SplitterPanelPassThroughMethodOptions {
instance: any;
props: SplitterPanelProps;
context: SplitterPanelContext;
}
/**
@ -44,6 +45,16 @@ export interface SplitterPanelPassThroughAttributes {
[key: string]: any;
}
/**
* Defines options in SplitterPanel component.
*/
export interface SplitterPanelContext {
/**
* Current nested state of the panel.
*/
nested?: boolean;
}
/**
* Defines valid properties in SplitterPanel component.
*/

9
components/lib/splitterpanel/SplitterPanel.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="container" :class="cx('root')" v-bind="ptm('root')" data-pc-name="splitterpanel">
<div ref="container" :class="cx('root')" v-bind="ptm('root', getPTOptions)" data-pc-name="splitterpanel">
<slot></slot>
</div>
</template>
@ -15,6 +15,13 @@ export default {
return this.$slots.default().some((child) => {
return child.type.name === 'Splitter';
});
},
getPTOptions() {
return {
context: {
nested: this.isNested
}
};
}
}
};

4
components/lib/steps/Steps.d.ts vendored
View File

@ -70,6 +70,10 @@ export interface StepsPassThroughAttributes {
* Defines current options in Steps component.
*/
export interface StepsContext {
/**
* Current menuitem
*/
item: any;
/**
* Index of the menuitem.
*/

1
components/lib/steps/Steps.vue
View File

@ -46,6 +46,7 @@ export default {
getPTOptions(key, item, index) {
return this.ptm(key, {
context: {
item,
index,
active: this.isActive(item),
disabled: this.isItemDisabled(item)

4
components/lib/tabmenu/TabMenu.d.ts vendored
View File

@ -86,6 +86,10 @@ export interface TabMenuState {
* Defines current options in TabMenu component.
*/
export interface TabMenuContext {
/**
* Current menuitem
*/
item: any;
/**
* Index of the menuitem
*/

19
components/lib/tabmenu/TabMenu.vue
View File

@ -9,7 +9,7 @@
:class="[cx('menuitem', { item, isActive, isExactActive }), item.class]"
:style="item.style"
role="presentation"
v-bind="getPTOptions('menuitem', i)"
v-bind="getPTOptions('menuitem', item, i)"
:data-p-highlight="exact ? isExactActive : isActive"
:data-p-disabled="disabled(item)"
>
@ -25,11 +25,11 @@
:tabindex="-1"
@click="onItemClick($event, item, i, navigate)"
@keydown="onKeydownItem($event, item, i, navigate)"
v-bind="getPTOptions('action', i)"
v-bind="getPTOptions('action', item, i)"
>
<component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
<span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', item, i)" />
<span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span>
</a>
</template>
<component v-else :is="$slots.item" :item="item" :index="i"></component>
@ -42,15 +42,15 @@
role="presentation"
@click="onItemClick($event, item, i)"
@keydown="onKeydownItem($event, item, i)"
v-bind="getPTOptions('menuitem', i)"
v-bind="getPTOptions('menuitem', item, i)"
:data-p-highlight="d_activeIndex === i"
:data-p-disabled="disabled(item)"
>
<template v-if="!$slots.item">
<a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="-1" v-bind="getPTOptions('action', i)">
<a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="-1" v-bind="getPTOptions('action', item, i)">
<component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
<span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', item, i)" />
<span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span>
</a>
</template>
<component v-else :is="$slots.item" :item="item" :index="i"></component>
@ -98,9 +98,10 @@ export default {
clearTimeout(this.timeout);
},
methods: {
getPTOptions(key, index) {
getPTOptions(key, item, index) {
return this.ptm(key, {
context: {
item,
index
}
});

5
components/lib/tailwind/Tailwind.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
import { PrimeVuePTOptions } from '../config';
interface Tailwind extends PrimeVuePTOptions {}
export default Tailwind;

3150
components/lib/tailwind/Tailwind.js Normal file
View File

File diff suppressed because it is too large Load Diff

6
components/lib/tailwind/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./tailwind.cjs.js",
"module": "./tailwind.esm.js",
"unpkg": "./tailwind.min.js",
"types": "./Tailwind.d.ts"
}

8
components/lib/tieredmenu/TieredMenu.d.ts vendored
View File

@ -135,6 +135,14 @@ export interface TieredMenuState {
* Defines current options in TieredMenu component.
*/
export interface TieredMenuContext {
/**
* Current menuitem
*/
item: any;
/**
* Index of the menuitem.
*/
index: number;
/**
* Current active state of menuitem as a boolean.
* @defaultValue false

24
components/lib/tieredmenu/TieredMenuSub.vue
View File

@ -14,27 +14,27 @@
:aria-level="level + 1"
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, 'menuitem')"
v-bind="getPTOptions(processedItem, index, 'menuitem')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
<template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
</template>
</a>
</template>
@ -127,9 +127,11 @@ export default {
getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label');
},
getPTOptions(processedItem, key) {
getPTOptions(processedItem, index, key) {
return this.ptm(key, {
context: {
item: processedItem,
index,
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)
}

6
components/lib/toolbar/Toolbar.vue
View File

@ -1,12 +1,12 @@
<template>
<div :class="cx('root')" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')" data-pc-name="toolbar">
<div :class="cx('start')" data-pc-section="start" v-bind="ptm('start')">
<div :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot>
</div>
<div :class="cx('center')" data-pc-section="center" v-bind="ptm('center')">
<div :class="cx('center')" v-bind="ptm('center')">
<slot name="center"></slot>
</div>
<div :class="cx('end')" data-pc-section="end" v-bind="ptm('end')">
<div :class="cx('end')" v-bind="ptm('end')">
<slot name="end"></slot>
</div>
</div>

4
doc/accordion/StyleDoc.vue → doc/accordion/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

45
doc/accordion/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<Accordion :activeIndex="0">
<AccordionTab header="Header I">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</AccordionTab>
<AccordionTab header="Header II">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
</AccordionTab>
<AccordionTab header="Header III">
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
</AccordionTab>
</Accordion>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/accordion/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Accordion Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/autocomplete/StyleDoc.vue → doc/autocomplete/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

41
doc/autocomplete/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
value: '',
items: [],
code: {
composition: `
<template>
<div class="card flex justify-center">
<AutoComplete v-model="value" :suggestions="items" @complete="search" />
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref("");
const items = ref([]);
const search = (event) => {
items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
<\/script>`
}
};
},
methods: {
search(event) {
this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
}
}
};
</script>

33
doc/autocomplete/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>AutoComplete Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

19
doc/avatar/StylingAvatarDoc.vue → doc/avatar/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="stylingofavatar" label="Styling of Avatar" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
@ -42,4 +42,21 @@
</tbody>
</table>
</div>
<DocSectionText id="stylingofavatargroup" label="Styling of AvatarGroup" v-bind="$attrs"> </DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-avatar-group</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
</template>

56
doc/avatar/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<div class="flex flex-wrap gap-5">
<div>
<h5>Image</h5>
<div class="flex">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
</div>
</div>
<div>
<h5>Badge</h5>
<Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
</div>
<div>
<h5>Gravatar</h5>
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
</div>
</div>
</div>
<div class="card flex justify-content-center">
<AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
<Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
</AvatarGroup>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/avatar/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Avatar Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/badge/StyleDoc.vue → doc/badge/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

31
doc/badge/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<Badge value="2"></Badge>
<Badge value="8" severity="success"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="12" severity="warning"></Badge>
<Badge value="3" severity="danger"></Badge>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/badge/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Badge Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/blockui/StyleDoc.vue → doc/blockui/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

40
doc/blockui/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<div class="mb-3">
<Button label="Block" @click="blocked = true" class="mr-2"></Button>
<Button label="Unblock" @click="blocked = false"></Button>
</div>
<BlockUI :blocked="blocked">
<Panel header="Basic">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</BlockUI>
</div>
</template>
<script setup>
import { ref } from "vue";
const blocked = ref(false);
<\/script>`
}
};
}
};
</script>

33
doc/blockui/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>BlockUI Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/breadcrumb/StyleDoc.vue → doc/breadcrumb/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

45
doc/breadcrumb/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Breadcrumb requires a collection of menuitems as its <i>model</i>.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
home: {
icon: 'pi pi-home',
to: '/'
},
items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
code: {
composition: `
<template>
<div class="card flex justify-center">
<Breadcrumb :home="home" :model="items" />
</div>
</template>
<script setup>
import { ref } from "vue";
const home = ref({
icon: 'pi pi-home',
to: '/',
});
const items = ref([
{label: 'Computer'},
{label: 'Notebook'},
{label: 'Accessories'},
{label: 'Backpacks'},
{label: 'Item'}
]);
<\/script>`
}
};
}
};
</script>

33
doc/breadcrumb/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Breadcrumb Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/button/StyleDoc.vue → doc/button/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

29
doc/button/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card flex justify-center flex-wrap gap-3">
<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />
<Button label="Info" severity="info" />
<Button label="Warning" severity="warning" />
<Button label="Help" severity="help" />
<Button label="Danger" severity="danger" />
</div>
</template>`
}
};
}
};
</script>

33
doc/button/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Button Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/calendar/StyleDoc.vue → doc/calendar/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

30
doc/calendar/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
date: null,
code: {
composition: `
<template>
<div class="card flex justify-center">
<Calendar v-model="date" />
</div>
</template>
<script setup>
import { ref } from "vue";
const date = ref();
<\/script>`
}
};
}
};
</script>

33
doc/calendar/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Calendar Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/card/StyleDoc.vue → doc/card/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

42
doc/card/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card flex align-items-center justify-content-center">
<Card style="width: 25em">
<template #header>
<img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
</template>
<template #title> Advanced Card </template>
<template #subtitle> Card subtitle </template>
<template #content>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
</template>
<template #footer>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
</template>
</Card>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/card/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Card Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/carousel/StyleDoc.vue → doc/carousel/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">

85
doc/carousel/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5">
<Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
</div>
</div>
</div>
</template>
</Carousel>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ProductService } from '@/service/ProductService';
onMounted(() => {
ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
})
const products = ref();
const responsiveOptions = ref([
{
breakpoint: '1199px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '991px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '767px',
numVisible: 1,
numScroll: 1
}
]);
const getSeverity = (status) => {
switch (status) {
case 'INSTOCK':
return 'success';
case 'LOWSTOCK':
return 'warning';
case 'OUTOFSTOCK':
return 'danger';
default:
return null;
}
};
<\/script>`
}
};
}
};
</script>

33
doc/carousel/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Carousel Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/cascadeselect/StyleDoc.vue → doc/cascadeselect/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

179
doc/cascadeselect/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,179 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
],
code: {
composition: `
<template>
<div class="card flex justify-content-center">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
</div>
</template>
<script setup>
import { ref } from "vue";
const selectedCity = ref();
const countries = ref([
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
]);
<\/script>`
}
};
}
};
</script>

33
doc/cascadeselect/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>CascadeSelect Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/chart/StyleDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

4
doc/checkbox/StyleDoc.vue → doc/checkbox/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">

30
doc/checkbox/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
checked: false,
code: {
composition: `
<template>
<div class="card flex justify-center">
<Checkbox v-model="checked" :binary="true" />
</div>
</template>
<script setup>
import { ref } from "vue";
const checked = ref(false);
<\/script>`
}
};
}
};
</script>

33
doc/checkbox/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Checkbox Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/chip/StyleDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

33
doc/chip/theming/StyledDoc.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chip</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-chip-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-chip-text</td>
<td>Text of the chip.</td>
</tr>
<tr>
<td>pi-chip-remove-icon</td>
<td>Remove icon.</td>
</tr>
</tbody>
</table>
</div>
</template>

29
doc/chip/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card flex flex-wrap gap-2">
<Chip label="Apple" icon="pi pi-apple" />
<Chip label="Facebook" icon="pi pi-facebook" />
<Chip label="Google" icon="pi pi-google" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/chip/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Chip Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/chips/StyleDoc.vue → doc/chips/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">

30
doc/chips/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
composition: `
<template>
<div class="card">
<Chips v-model="value" />
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref();
<\/script>`
}
};
}
};
</script>

33
doc/chips/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Chips Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/colorpicker/StyleDoc.vue → doc/colorpicker/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">

30
doc/colorpicker/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
color: null,
code: {
composition: `
<template>
<div class="card flex justify-center">
<ColorPicker v-model="color" />
</div>
</template>
<script setup>
import { ref } from "vue";
const color = ref();
<\/script>`
}
};
}
};
</script>

33
doc/colorpicker/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>ColorPicker Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

837
doc/common/apidoc/index.json
View File

@ -12408,7 +12408,8 @@
"default": ""
}
],
"methods": []
"methods": [],
"extendedBy": "default"
},
"PrimeVueLocaleAriaOptions": {
"relatedProp": "",
@ -19093,6 +19094,14 @@
"default": "",
"description": "Current index of the menuitem."
},
{
"name": "item",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Current menuitem"
},
{
"name": "active",
"optional": false,
@ -24170,6 +24179,34 @@
"methodDescription": "Defines methods that can be accessed by the component's reference.",
"typeDescription": "Defines the custom types used by the module.",
"values": {
"InputMaskPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "instance",
"optional": false,
"readonly": false,
"type": "any",
"default": ""
},
{
"name": "props",
"optional": false,
"readonly": false,
"type": "InputMaskProps",
"default": ""
},
{
"name": "context",
"optional": false,
"readonly": false,
"type": "InputMaskContext",
"default": ""
}
],
"methods": []
},
"InputMaskPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "InputMaskProps.pt",
@ -24206,6 +24243,29 @@
],
"methods": []
},
"InputMaskContext": {
"description": "Defines current options in InputMask component.",
"relatedProp": "",
"props": [
{
"name": "filled",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Current filled state of the component as a boolean."
},
{
"name": "disabled",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Current disabled state of the component as a boolean."
}
],
"methods": []
},
"InputMaskProps": {
"description": "Defines valid properties in InputMask component.",
"relatedProp": "",
@ -24278,6 +24338,7 @@
"methods": []
},
"InputMaskSlots": {
"description": "Defines valid slots in InputMask component.",
"relatedProp": "",
"props": [],
"methods": []
@ -24366,7 +24427,7 @@
"description": "Defines the custom types used by the module.",
"values": {
"InputMaskPassThroughOptionType": {
"values": "InputMaskPassThroughAttributes | null | undefined"
"values": "InputMaskPassThroughAttributes | (options: InputMaskPassThroughMethodOptions) => undefined | string | null | undefined"
}
}
}
@ -26808,6 +26869,22 @@
"description": "Defines current options in MegaMenu component.",
"relatedProp": "",
"props": [
{
"name": "item",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Current menuitem"
},
{
"name": "index",
"optional": false,
"readonly": false,
"type": "number",
"default": "",
"description": "Current index of the menuitem."
},
{
"name": "active",
"optional": false,
@ -27262,6 +27339,22 @@
"description": "Defines current options in Menu component.",
"relatedProp": "",
"props": [
{
"name": "item",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Current menuitem"
},
{
"name": "index",
"optional": false,
"readonly": false,
"type": "number",
"default": "",
"description": "Current index of the menuitem."
},
{
"name": "focused",
"optional": false,
@ -27731,6 +27824,22 @@
"description": "Defines current options in Menubar component.",
"relatedProp": "",
"props": [
{
"name": "item",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Current menuitem"
},
{
"name": "index",
"optional": false,
"readonly": false,
"type": "number",
"default": "",
"description": "Current index of the menuitem."
},
{
"name": "active",
"optional": false,
@ -32126,6 +32235,14 @@
"description": "Defines current options in PanelMenu component.",
"relatedProp": "",
"props": [
{
"name": "item",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Current menuitem"
},
{
"name": "index",
"optional": false,
@ -36956,6 +37073,14 @@
"type": "boolean",
"default": "false",
"description": "Current active state of menuitem as a boolean."
},
{
"name": "hidden",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Current hidden state of menuitem as a boolean."
}
],
"methods": []
@ -37966,6 +38091,13 @@
"readonly": false,
"type": "SplitterPanelProps",
"default": ""
},
{
"name": "context",
"optional": false,
"readonly": false,
"type": "SplitterPanelContext",
"default": ""
}
],
"methods": []
@ -38006,6 +38138,21 @@
],
"methods": []
},
"SplitterPanelContext": {
"description": "Defines options in SplitterPanel component.",
"relatedProp": "",
"props": [
{
"name": "nested",
"optional": true,
"readonly": false,
"type": "boolean",
"default": "",
"description": "Current nested state of the panel."
}
],
"methods": []
},
"SplitterPanelProps": {
"description": "Defines valid properties in SplitterPanel component.",
"relatedProp": "",
@ -38200,6 +38347,14 @@
"description": "Defines current options in Steps component.",
"relatedProp": "",
"props": [
{
"name": "item",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Current menuitem"
},
{
"name": "index",
"optional": false,
@ -38603,6 +38758,14 @@
"description": "Defines current options in TabMenu component.",
"relatedProp": "",
"props": [
{
"name": "item",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Current menuitem"
},
{
"name": "index",
"optional": false,
@ -39647,6 +39810,660 @@
}
}
},
"tailwind/Tailwind": {
"interfaces": {
"description": "Defines the custom interfaces used by the module.",
"eventDescription": "Defines the custom events used by the component's emit.",
"methodDescription": "Defines methods that can be accessed by the component's reference.",
"typeDescription": "Defines the custom types used by the module.",
"values": {
"default": {
"relatedProp": "",
"props": [
{
"name": "accordion",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<AccordionPassThroughOptions>",
"default": ""
},
{
"name": "accordiontab",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<AccordionTabPassThroughOptions>",
"default": ""
},
{
"name": "autocomplete",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<AutoCompletePassThroughOptions>",
"default": ""
},
{
"name": "avatar",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<AvatarPassThroughOptions>",
"default": ""
},
{
"name": "avatargroup",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<AvatarGroupPassThroughOptions>",
"default": ""
},
{
"name": "badge",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<BadgePassThroughOptions>",
"default": ""
},
{
"name": "blockui",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<BlockUIPassThroughOptions>",
"default": ""
},
{
"name": "breadcrumb",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<BreadcrumbPassThroughOptions>",
"default": ""
},
{
"name": "button",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ButtonPassThroughOptions>",
"default": ""
},
{
"name": "calendar",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<CalendarPassThroughOptions>",
"default": ""
},
{
"name": "card",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<CardPassThroughOptions>",
"default": ""
},
{
"name": "carousel",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<CarouselPassThroughOptions>",
"default": ""
},
{
"name": "cascadeselect",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<CascadeSelectPassThroughOptions>",
"default": ""
},
{
"name": "chart",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ChartPassThroughOptions>",
"default": ""
},
{
"name": "checkbox",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<CheckboxPassThroughOptions>",
"default": ""
},
{
"name": "chip",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ChipPassThroughOptions>",
"default": ""
},
{
"name": "chips",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ChipsPassThroughOptions>",
"default": ""
},
{
"name": "colorpicker",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ColorPickerPassThroughOptions>",
"default": ""
},
{
"name": "column",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ColumnPassThroughOptions>",
"default": ""
},
{
"name": "columngroup",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ColumnGroupPassThroughOptions>",
"default": ""
},
{
"name": "confirmdialog",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ConfirmDialogPassThroughOptions>",
"default": ""
},
{
"name": "confirmpopup",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ConfirmPopupPassThroughOptions>",
"default": ""
},
{
"name": "contextmenu",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ContextMenuPassThroughOptions>",
"default": ""
},
{
"name": "datatable",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<DataTablePassThroughOptions>",
"default": ""
},
{
"name": "dataview",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<DataViewPassThroughOptions>",
"default": ""
},
{
"name": "dataviewlayoutoptions",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<DataViewLayoutOptionsPassThroughOptions>",
"default": ""
},
{
"name": "deferredcontent",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<DeferredContentPassThroughOptions>",
"default": ""
},
{
"name": "divider",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<DividerPassThroughOptions>",
"default": ""
},
{
"name": "dialog",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<DialogPassThroughOptions>",
"default": ""
},
{
"name": "dock",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<DockPassThroughOptions>",
"default": ""
},
{
"name": "dropdown",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<DropdownPassThroughOptions>",
"default": ""
},
{
"name": "dynamicdialog",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<DialogPassThroughOptions>",
"default": ""
},
{
"name": "editor",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<EditorPassThroughOptions>",
"default": ""
},
{
"name": "fieldset",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<FieldsetPassThroughOptions>",
"default": ""
},
{
"name": "fileupload",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<FileUploadPassThroughOptions>",
"default": ""
},
{
"name": "galleria",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<GalleriaPassThroughOptions>",
"default": ""
},
{
"name": "image",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ImagePassThroughOptions>",
"default": ""
},
{
"name": "inlinemessage",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<InlineMessagePassThroughOptions>",
"default": ""
},
{
"name": "inplace",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<InplacePassThroughOptions>",
"default": ""
},
{
"name": "inputmask",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<InputMaskPassThroughOptions>",
"default": ""
},
{
"name": "inputnumber",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<InputNumberPassThroughOptions>",
"default": ""
},
{
"name": "inputswitch",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<InputSwitchPassThroughOptions>",
"default": ""
},
{
"name": "inputtext",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<InputTextPassThroughOptions>",
"default": ""
},
{
"name": "knob",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<KnobPassThroughOptions>",
"default": ""
},
{
"name": "listbox",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ListboxPassThroughOptions>",
"default": ""
},
{
"name": "megamenu",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<MegaMenuPassThroughOptions>",
"default": ""
},
{
"name": "menu",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<MenuPassThroughOptions>",
"default": ""
},
{
"name": "menubar",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<MenubarPassThroughOptions>",
"default": ""
},
{
"name": "message",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<MessagePassThroughOptions>",
"default": ""
},
{
"name": "multiselect",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<MultiSelectPassThroughOptions>",
"default": ""
},
{
"name": "orderlist",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<OrderListPassThroughOptions>",
"default": ""
},
{
"name": "organizationchart",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<OrganizationChartPassThroughOptions>",
"default": ""
},
{
"name": "overlaypanel",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<OverlayPanelPassThroughOptions>",
"default": ""
},
{
"name": "paginator",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<PaginatorPassThroughOptions>",
"default": ""
},
{
"name": "panel",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<PanelPassThroughOptions>",
"default": ""
},
{
"name": "panelmenu",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<PanelMenuPassThroughOptions>",
"default": ""
},
{
"name": "password",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<PasswordPassThroughOptions>",
"default": ""
},
{
"name": "picklist",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<PickListPassThroughOptions>",
"default": ""
},
{
"name": "progressbar",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ProgressBarPassThroughOptions>",
"default": ""
},
{
"name": "progressspinner",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ProgressSpinnerPassThroughOptions>",
"default": ""
},
{
"name": "radiobutton",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<RadioButtonPassThroughOptions>",
"default": ""
},
{
"name": "rating",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<RatingPassThroughOptions>",
"default": ""
},
{
"name": "row",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<RowPassThroughOptions>",
"default": ""
},
{
"name": "scrollpanel",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ScrollPanelPassThroughOptions>",
"default": ""
},
{
"name": "scrolltop",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ScrollTopPassThroughOptions>",
"default": ""
},
{
"name": "sidebar",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<SidebarPassThroughOptions>",
"default": ""
},
{
"name": "skeleton",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<SkeletonPassThroughOptions>",
"default": ""
},
{
"name": "slider",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<SliderPassThroughOptions>",
"default": ""
},
{
"name": "speeddial",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<SpeedDialPassThroughOptions>",
"default": ""
},
{
"name": "selectbutton",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<SelectButtonPassThroughOptions>",
"default": ""
},
{
"name": "splitbutton",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<SplitButtonPassThroughOptions>",
"default": ""
},
{
"name": "splitter",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<SplitterPassThroughOptions>",
"default": ""
},
{
"name": "splitterpanel",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<SplitterPanelPassThroughOptions>",
"default": ""
},
{
"name": "steps",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<StepsPassThroughOptions>",
"default": ""
},
{
"name": "tabmenu",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TabMenuPassThroughOptions>",
"default": ""
},
{
"name": "tabpanel",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TabPanelPassThroughOptions>",
"default": ""
},
{
"name": "tabview",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TabViewPassThroughOptions>",
"default": ""
},
{
"name": "tag",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TagPassThroughOptions>",
"default": ""
},
{
"name": "terminal",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TerminalPassThroughOptions>",
"default": ""
},
{
"name": "textarea",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TextareaPassThroughOptions>",
"default": ""
},
{
"name": "tieredmenu",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TieredMenuPassThroughOptions>",
"default": ""
},
{
"name": "timeline",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TimelinePassThroughOptions>",
"default": ""
},
{
"name": "toast",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ToastPassThroughOptions>",
"default": ""
},
{
"name": "togglebutton",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ToggleButtonPassThroughOptions>",
"default": ""
},
{
"name": "toolbar",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<ToolbarPassThroughOptions>",
"default": ""
},
{
"name": "tree",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TreePassThroughOptions>",
"default": ""
},
{
"name": "treeselect",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TreeSelectPassThroughOptions>",
"default": ""
},
{
"name": "tristatecheckbox",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TriStateCheckboxPassThroughOptions>",
"default": ""
},
{
"name": "treetable",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<TreeTablePassThroughOptions>",
"default": ""
},
{
"name": "virtualscroller",
"optional": true,
"readonly": false,
"type": "DefaultPTOptions<VirtualScrollerPassThroughOptions>",
"default": ""
},
{
"name": "directives",
"optional": true,
"readonly": false,
"type": "Object",
"default": ""
}
],
"methods": [],
"extendedTypes": "PrimeVuePTOptions"
}
}
}
},
"terminal": {
"description": "Terminal is a text based user interface.\n\n[Live Demo](https://www.primevue.org/terminal)",
"components": {
@ -40369,6 +41186,22 @@
"description": "Defines current options in TieredMenu component.",
"relatedProp": "",
"props": [
{
"name": "item",
"optional": false,
"readonly": false,
"type": "any",
"default": "",
"description": "Current menuitem"
},
{
"name": "index",
"optional": false,
"readonly": false,
"type": "number",
"default": "",
"description": "Index of the menuitem."
},
{
"name": "active",
"optional": false,

21
doc/confirmdialog/StyleDoc.vue
View File

@ -1,21 +0,0 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-confirm-dialog</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
</template>

6
doc/avatar/StylingAvatarGroupDoc.vue → doc/confirmdialog/theming/StyledDoc.vue
View File

@ -1,5 +1,7 @@
<template>
<DocSectionText id="stylingofavatargroup" label="Styling of AvatarGroup" v-bind="$attrs"> </DocSectionText>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
@ -10,7 +12,7 @@
</thead>
<tbody>
<tr>
<td>p-avatar-group</td>
<td>p-confirm-dialog</td>
<td>Container element.</td>
</tr>
</tbody>

63
doc/confirmdialog/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<Toast />
<ConfirmDialog></ConfirmDialog>
<div class="card flex flex-wrap gap-2 justify-center">
<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
</div>
</template>
<script setup>
import { useConfirm } from "primevue/useconfirm";
import { useToast } from "primevue/usetoast";
const confirm = useConfirm();
const toast = useToast();
const confirm1 = () => {
confirm.require({
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
reject: () => {
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
};
const confirm2 = () => {
confirm.require({
message: 'Do you want to delete this record?',
header: 'Delete Confirmation',
icon: 'pi pi-info-circle',
acceptClass: 'p-button-danger',
accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
},
reject: () => {
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
};
<\/script>`
}
};
}
};
</script>

33
doc/confirmdialog/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>ConfirmDialog Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/confirmpopup/StyleDoc.vue → doc/confirmpopup/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

63
doc/confirmpopup/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<Toast />
<ConfirmPopup></ConfirmPopup>
<div class="card flex flex-wrap gap-2 justify-center">
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
</div>
</template>
<script setup>
import { useConfirm } from "primevue/useconfirm";
import { useToast } from "primevue/usetoast";
const confirm = useConfirm();
const toast = useToast();
const confirm1 = (event) => {
confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
},
reject: () => {
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
};
const confirm2 = (event) => {
confirm.require({
target: event.currentTarget,
message: 'Do you want to delete this record?',
icon: 'pi pi-info-circle',
acceptClass: 'p-button-danger',
accept: () => {
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
},
reject: () => {
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
}
});
};
<\/script>`
}
};
}
};
</script>

33
doc/confirmpopup/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>ConfirmPopup Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/contextmenu/StyleDoc.vue → doc/contextmenu/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

48
doc/contextmenu/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<DocSectionText v-bind="$attrs">
<p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using the <i>contextmenu</i> event of the target to display the menu.</p>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
items: [
{ label: 'View', icon: 'pi pi-fw pi-search' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' }
],
code: {
composition: `
<template>
<div class="card">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
<ContextMenu ref="menu" :model="items" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const menu = ref();
const items = ref([
{ label: 'View', icon: 'pi pi-fw pi-search' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' }
]);
const onImageRightClick = (event) => {
menu.value.show(event);
};
<\/script>`
}
};
},
methods: {
onImageRightClick(event) {
this.$refs.menu.show(event);
}
}
};
</script>

33
doc/contextmenu/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>ContextMenu Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/datatable/StyleDoc.vue → doc/datatable/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">

298
doc/datatable/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,298 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" :service="['CustomerService']" embedded />
</template>
<script>
import { CustomerService } from '@/service/CustomerService';
import { FilterMatchMode, FilterOperator } from 'primevue/api';
export default {
data() {
return {
customers: null,
filters: null,
representatives: [
{ name: 'Amy Elsner', image: 'amyelsner.png' },
{ name: 'Anna Fali', image: 'annafali.png' },
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' },
{ name: 'Bernardo Dominic', image: 'bernardodominic.png' },
{ name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png' },
{ name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
{ name: 'Onyama Limba', image: 'onyamalimba.png' },
{ name: 'Stephen Shaw', image: 'stephenshaw.png' },
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
],
statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
loading: true,
code: {
composition: `
<template>
<div class="card">
<DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
<template #header>
<div class="flex justify-between">
<Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span>
</div>
</template>
<template #empty> No customers found. </template>
<template #loading> Loading customers data. Please wait. </template>
<Column field="name" header="Name" style="min-width: 12rem">
<template #body="{ data }">
{{ data.name }}
</template>
<template #filter="{ filterModel }">
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
</template>
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<div class="flex items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
</template>
<template #filter="{ filterModel }">
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
</template>
<template #filterclear="{ filterCallback }">
<Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
</template>
<template #filterapply="{ filterCallback }">
<Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
</template>
<template #filterfooter>
<div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
</template>
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
</template>
<template #filter="{ filterModel }">
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="flex items-center gap-2">
<img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
<span>{{ slotProps.option.name }}</span>
</div>
</template>
</MultiSelect>
</template>
</Column>
<Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
<template #body="{ data }">
{{ formatDate(data.date) }}
</template>
<template #filter="{ filterModel }">
<Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
</template>
</Column>
<Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
<template #body="{ data }">
{{ formatCurrency(data.balance) }}
</template>
<template #filter="{ filterModel }">
<InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
</template>
</Column>
<Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
<template #body="{ data }">
<Tag :value="data.status" :severity="getSeverity(data.status)" />
</template>
<template #filter="{ filterModel }">
<Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
<template #option="slotProps">
<Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
</template>
</Dropdown>
</template>
</Column>
<Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
<template #body="{ data }">
<ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
</template>
<template #filter="{ filterModel }">
<Slider v-model="filterModel.value" range class="m-3"></Slider>
<div class="flex items-center justify-between px-2">
<span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
<span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
</div>
</template>
</Column>
<Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
<template #body="{ data }">
<i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
</template>
<template #filter="{ filterModel }">
<label for="verified-filter" class="font-bold"> Verified </label>
<TriStateCheckbox v-model="filterModel.value" inputId="verified-filter" />
</template>
</Column>
</DataTable>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { CustomerService } from '@/service/CustomerService';
import { FilterMatchMode, FilterOperator } from 'primevue/api';
const customers = ref();
const filters = ref();
const representatives = ref([
{ name: 'Amy Elsner', image: 'amyelsner.png' },
{ name: 'Anna Fali', image: 'annafali.png' },
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' },
{ name: 'Bernardo Dominic', image: 'bernardodominic.png' },
{ name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png' },
{ name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
{ name: 'Onyama Limba', image: 'onyamalimba.png' },
{ name: 'Stephen Shaw', image: 'stephenshaw.png' },
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
]);
const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
const loading = ref(true);
onMounted(() => {
CustomerService.getCustomersMedium().then((data) => {
customers.value = getCustomers(data);
loading.value = false;
});
});
const initFilters = () => {
filters.value = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
representative: { value: null, matchMode: FilterMatchMode.IN },
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
};
};
initFilters();
const formatDate = (value) => {
return value.toLocaleDateString('en-US', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
};
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};
const clearFilter = () => {
initFilters();
};
const getCustomers = (data) => {
return [...(data || [])].map((d) => {
d.date = new Date(d.date);
return d;
});
};
const getSeverity = (status) => {
switch (status) {
case 'unqualified':
return 'danger';
case 'qualified':
return 'success';
case 'new':
return 'info';
case 'negotiation':
return 'warning';
case 'renewal':
return null;
}
};
<\/script>`
}
};
},
created() {
this.initFilters();
},
mounted() {
CustomerService.getCustomersMedium().then((data) => {
this.customers = this.getCustomers(data);
this.loading = false;
});
},
methods: {
formatDate(value) {
return value.toLocaleDateString('en-US', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
},
formatCurrency(value) {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
},
clearFilter() {
this.initFilters();
},
initFilters() {
this.filters = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
representative: { value: null, matchMode: FilterMatchMode.IN },
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
};
},
getCustomers(data) {
return [...(data || [])].map((d) => {
d.date = new Date(d.date);
return d;
});
},
getSeverity(status) {
switch (status) {
case 'unqualified':
return 'danger';
case 'qualified':
return 'success';
case 'new':
return 'info';
case 'negotiation':
return 'warning';
case 'renewal':
return null;
}
}
}
};
</script>

33
doc/datatable/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>DataTable Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

4
doc/dataview/StyleDoc.vue → doc/dataview/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">

148
doc/dataview/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,148 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
<DocSectionCode :code="code" :service="['ProductService']" embedded />
</template>
<script>
import { ProductService } from '@/service/ProductService';
export default {
data() {
return {
products: null,
layout: 'grid',
code: {
composition: `
<template>
<div class="card">
<DataView :value="products" :layout="layout">
<template #header>
<div class="flex justify-end">
<DataViewLayoutOptions v-model="layout" />
</div>
</template>
<template #list="slotProps">
<div class="flex-initial shrink-0 w-full">
<div class="flex flex-col xl:flex-row xl:items-start p-4 gap-4">
<img class="w-3/4 sm:w-64 xl:w-40 shadow-md block xl:block mx-auto rounded" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
<div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-4">
<div class="flex flex-col items-center sm:items-start gap-3">
<div class="text-2xl font-bold text-900">
{{ slotProps.data.name }}
</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
<div class="flex items-center gap-3">
<span class="flex items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span>
</span>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
</div>
</div>
<div class="flex sm:flex-col items-center sm:align-end gap-3 sm:gap-2">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div>
</div>
</div>
</template>
<template #grid="slotProps">
<div class="flex-initial shrink-0 w-full sm:w-1/2 lg:w-full xl:w-1/3 p-2">
<div class="p-4 border surface-border surface-card rounded">
<div class="flex flex-wrap items-center justify-between gap-2">
<div class="flex items-center gap-2">
<i class="pi pi-tag"></i>
<span class="font-semibold">{{ slotProps.data.category }}</span>
</div>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
</div>
<div class="flex flex-col items-center gap-3 py-5">
<img class="w-3/4 shadow-md rounded" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
<div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
<Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
</div>
<div class="flex items-center justify-between">
<span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
<Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
</div>
</div>
</div>
</template>
</DataView>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ProductService } from '@/service/ProductService';
onMounted(() => {
ProductService.getProducts().then((data) => (products.value = data.slice(0, 12)));
});
const products = ref();
const layout = ref('grid');
const getSeverity = (product) => {
switch (product.inventoryStatus) {
case 'INSTOCK':
return 'success';
case 'LOWSTOCK':
return 'warning';
case 'OUTOFSTOCK':
return 'danger';
default:
return null;
}
}
<\/script>`,
data: `
/* ProductService */
{
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
},
...
`
}
};
},
mounted() {
ProductService.getProducts().then((data) => (this.products = data.slice(0, 12)));
},
methods: {
getSeverity(product) {
switch (product.inventoryStatus) {
case 'INSTOCK':
return 'success';
case 'LOWSTOCK':
return 'warning';
case 'OUTOFSTOCK':
return 'danger';
default:
return null;
}
}
}
};
</script>

33
doc/dataview/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>DataView Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

2
doc/deferredcontent/StyleDoc.vue
View File

@ -1,5 +1,5 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<DocSectionText v-bind="$attrs">
<p>Component does not apply any styling.</p>
</DocSectionText>
</template>

4
doc/dialog/StyleDoc.vue → doc/dialog/theming/StyledDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">

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