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

Merge branch 'master' into master

pull/4591/head
Cagatay Civici 2023-10-11 20:45:31 +03:00 committed by GitHub
parent 7142c4d264 da2038e248
commit 781ff3c259
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
56 changed files with 871 additions and 807 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
.github/workflows/generate_api_doc.yml vendored
View File

@ -1,42 +1,45 @@
name: Generate API DOC name: Generate API DOC
on: on:
push: push:
branches: [ master ] branches: [master]
paths: paths:
- '**/**/*.d.ts' - '**/**/*.d.ts'
- '/api-generator/build-apidoc.js' - '/api-generator/build-apidoc.js'
permissions: permissions:
contents: write contents: write
jobs: jobs:
build: build:
if: github.repository == 'primefaces/primevue' && github.ref == 'refs/heads/master' if: github.repository == 'primefaces/primevue' && github.ref == 'refs/heads/master'
runs-on: ubuntu-latest runs-on: ubuntu-latest
strategy: strategy:
matrix: matrix:
node-version: [16.x] node-version: [16.x]
steps: steps:
- uses: actions/checkout@v3 - uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }} - name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3 uses: actions/setup-node@v3
with: with:
node-version: ${{ matrix.node-version }} node-version: ${{ matrix.node-version }}
cache: 'npm' cache: 'npm'
- name: Install node packages - name: Install node packages
run: npm install run: npm install
- name: Generate api doc - name: Generate api doc
run: npm run apidoc run: npm run apidoc
- name: Commit doc - name: Code Format
run: | run: npm run format
git config user.name "GitHub Actions Bot"
git config user.email "<>" - name: Commit doc
git commit -a -m "Update API doc" run: |
git push git config user.name "GitHub Actions Bot"
git config user.email "<>"
git commit -a -m "Update API doc"
git push

48
CHANGELOG.md
View File

@ -1,5 +1,53 @@
# Changelog # Changelog
## [3.36.0](https://github.com/primefaces/primevue/tree/3.36.0) (2023-10-11)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.35.0...3.36.0)
**Implemented New Features and Enhancements:**
- Improve block/unblockScroll architecture [\#4589](https://github.com/primefaces/primevue/issues/4589)
- Splitter: Add Resize event to Splitter component [\#4561](https://github.com/primefaces/primevue/issues/4561)
- Datatable: Sort mode multiple - undefined breaks order [\#4555](https://github.com/primefaces/primevue/issues/4555)
- InlineMessage: Icon shrinks as text grows larger [\#4550](https://github.com/primefaces/primevue/issues/4550)
- Export styles of all components [\#4530](https://github.com/primefaces/primevue/issues/4530)
- Add `modules` property to Editor [\#4450](https://github.com/primefaces/primevue/issues/4450)
- No styles injected on SSR resulting in Large Layout Shifts on load [\#4210](https://github.com/primefaces/primevue/issues/4210)
- MultiSelect: Filter does not work when options is an array of strings [\#4071](https://github.com/primefaces/primevue/issues/4071)
- Add `allowEmpty` property to SelectButton [\#3973](https://github.com/primefaces/primevue/issues/3973)
- Ability to close a specific toast message [\#1763](https://github.com/primefaces/primevue/issues/1763)
**Fixed bugs:**
- Dock Component MenuBar z-index issue [\#4584](https://github.com/primefaces/primevue/issues/4584)
- OrderList: Missing moveUpButtonProps [\#4581](https://github.com/primefaces/primevue/issues/4581)
- Config: Missing export definition in types [\#4579](https://github.com/primefaces/primevue/issues/4579)
- Cannot click to select min or max value when using slider with step property [\#4577](https://github.com/primefaces/primevue/issues/4577)
- Editor layer defect [\#4576](https://github.com/primefaces/primevue/issues/4576)
- Tailwind Datatable: Uncaught \(in promise\) TypeError: Cannot read properties of undefined \(reading 'frozen'\) [\#4566](https://github.com/primefaces/primevue/issues/4566)
- Using Tailwind setup - the Ripple data attributes get added automatically [\#4564](https://github.com/primefaces/primevue/issues/4564)
- Splitter: In the tailwind theme, double-clicking on a split line causes the element to move. [\#4562](https://github.com/primefaces/primevue/issues/4562)
- InputNumber: Buttons are not sorted correctly in TW theme if buttonLayout is horizontal [\#4560](https://github.com/primefaces/primevue/issues/4560)
- The `appearance` style is not working in Tailwind preset [\#4559](https://github.com/primefaces/primevue/issues/4559)
- Image: preview mode button spacing fixes [\#4554](https://github.com/primefaces/primevue/issues/4554)
- Image: toolbar unstyled mode fixes [\#4553](https://github.com/primefaces/primevue/issues/4553)
- Galleria: indicator list z-index defect [\#4545](https://github.com/primefaces/primevue/issues/4545)
- Column: headercheckboxicon slot not working [\#4543](https://github.com/primefaces/primevue/issues/4543)
- ContextMenu: global property is not working [\#4536](https://github.com/primefaces/primevue/issues/4536)
- InputText: Float labels bug out when page loads with form auto-filled \(webkit\) [\#4533](https://github.com/primefaces/primevue/issues/4533)
- Sidebar: autofocus cannot with other components [\#4532](https://github.com/primefaces/primevue/issues/4532)
- PanelMenu | Separator is not ignored when navigating with the arrow keys. [\#4522](https://github.com/primefaces/primevue/issues/4522)
- V-Tooltip, TailwindCSS: Styling not working when using pinia store [\#4505](https://github.com/primefaces/primevue/issues/4505)
- Calendar: Timepicker changes from `12 am` to `12 pm` automatically [\#4449](https://github.com/primefaces/primevue/issues/4449)
- Calendar: Multiple Month/Year selection mode not highlighting selected month [\#4418](https://github.com/primefaces/primevue/issues/4418)
- File Upload - Chrome/Windows input is triggered during any mouse click, not just left click [\#4144](https://github.com/primefaces/primevue/issues/4144)
- InputSwitch: Type Definition doesn't expose `disabled` [\#3985](https://github.com/primefaces/primevue/issues/3985)
- DataGrid: Invalid typing of slot props [\#3395](https://github.com/primefaces/primevue/issues/3395)
**Deprecated:**
- Remove FullCalendar theme support [\#4575](https://github.com/primefaces/primevue/issues/4575)
## [3.35.0](https://github.com/primefaces/primevue/tree/3.35.0) (2023-09-26) ## [3.35.0](https://github.com/primefaces/primevue/tree/3.35.0) (2023-09-26)
[Full Changelog](https://github.com/primefaces/primevue/compare/3.34.1...3.35.0) [Full Changelog](https://github.com/primefaces/primevue/compare/3.34.1...3.35.0)

12
api-generator/build-apidoc.js
View File

@ -352,7 +352,17 @@ if (project) {
readonly: prop.flags.isReadonly, readonly: prop.flags.isReadonly,
type: prop.type.toString(), type: prop.type.toString(),
default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
description: prop.comment && prop.comment.summary.map((s) => s.text || '').join(' '), description:
prop.comment &&
prop.comment.summary
.map((s) => {
if (s.text.indexOf('[here]') > -1) {
return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
}
return s.text || '';
})
.join(' '),
deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0].text) : undefined deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0].text) : undefined
}); });
}); });

6
api-generator/components/selectbutton.js
View File

@ -51,6 +51,12 @@ const SelectButtonProps = [
name: 'unselectable', name: 'unselectable',
type: 'boolean', type: 'boolean',
default: 'false', default: 'false',
description: 'Whether selection can not be cleared.'
},
{
name: 'allowEmpty',
type: 'boolean',
default: 'true',
description: 'Whether selection can be cleared.' description: 'Whether selection can be cleared.'
}, },
{ {

5
components/doc/DocApiTable.vue
View File

@ -59,7 +59,10 @@
{{ v }} {{ v }}
</div> </div>
<span v-else :id="id + '.' + k" class="doc-option-description"> {{ v }} </span> <template v-else>
<span v-if="v?.includes('<a')" :id="id + '.' + k" class="doc-option-description" v-html="v"> </span>
<span v-else :id="id + '.' + k" class="doc-option-description">{{ v }} </span>
</template>
</template> </template>
</td> </td>
</tr> </tr>

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

@ -2,7 +2,7 @@ import pkg from '../../../package.json';
import { services } from './services'; import { services } from './services';
const PrimeVue = { const PrimeVue = {
version: '^3.35.0', version: '^3.36.0',
description: description:
'PrimeVue is an open source UI library for Vue featuring a rich set of 80+ 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.' 'PrimeVue is an open source UI library for Vue featuring a rich set of 80+ 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.'
}; };

17
components/lib/api/FilterService.js
View File

@ -4,10 +4,19 @@ const FilterService = {
filter(value, fields, filterValue, filterMatchMode, filterLocale) { filter(value, fields, filterValue, filterMatchMode, filterLocale) {
let filteredItems = []; let filteredItems = [];
if (value) { if (!value) {
for (let item of value) { return filteredItems;
for (let field of fields) { }
let fieldValue = ObjectUtils.resolveFieldData(item, field);
for (const item of value) {
if (typeof item === 'string') {
if (this.filters[filterMatchMode](item, filterValue, filterLocale)) {
filteredItems.push(item);
continue;
}
} else {
for (const field of fields) {
const fieldValue = ObjectUtils.resolveFieldData(item, field);
if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) { if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) {
filteredItems.push(item); filteredItems.push(item);

18
components/lib/badgedirective/BadgeDirective.js
View File

@ -5,11 +5,9 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
mounted(el, binding) { mounted(el, binding) {
const id = UniqueComponentId() + '_badge'; const id = UniqueComponentId() + '_badge';
el.unstyled = binding.instance.$primevue?.config?.unstyled || binding.value?.unstyled || false;
const badge = DomHandler.createElement('span', { const badge = DomHandler.createElement('span', {
id, id,
class: !el.unstyled && this.cx('root'), class: !this.isUnstyled() && this.cx('root'),
'p-bind': this.ptm('root', { 'p-bind': this.ptm('root', {
context: { context: {
...binding.modifiers, ...binding.modifiers,
@ -22,7 +20,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
el.$_pbadgeId = badge.getAttribute('id'); el.$_pbadgeId = badge.getAttribute('id');
for (let modifier in binding.modifiers) { for (let modifier in binding.modifiers) {
!el.unstyled && DomHandler.addClass(badge, 'p-badge-' + modifier); !this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-' + modifier);
} }
if (binding.value != null) { if (binding.value != null) {
@ -30,22 +28,22 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
else el.$_badgeValue = binding.value; else el.$_badgeValue = binding.value;
badge.appendChild(document.createTextNode(el.$_badgeValue)); badge.appendChild(document.createTextNode(el.$_badgeValue));
if (String(el.$_badgeValue).length === 1 && !el.unstyled) { if (String(el.$_badgeValue).length === 1 && !this.isUnstyled()) {
!el.unstyled && DomHandler.addClass(badge, 'p-badge-no-gutter'); !this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-no-gutter');
} }
} else { } else {
!el.unstyled && DomHandler.addClass(badge, 'p-badge-dot'); !this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-dot');
} }
el.setAttribute('data-pd-badge', true); el.setAttribute('data-pd-badge', true);
!el.unstyled && DomHandler.addClass(el, 'p-overlay-badge'); !this.isUnstyled() && DomHandler.addClass(el, 'p-overlay-badge');
el.setAttribute('data-p-overlay-badge', 'true'); el.setAttribute('data-p-overlay-badge', 'true');
el.appendChild(badge); el.appendChild(badge);
this.$el = badge; this.$el = badge;
}, },
updated(el, binding) { updated(el, binding) {
!el.unstyled && DomHandler.addClass(el, 'p-overlay-badge'); !this.isUnstyled() && DomHandler.addClass(el, 'p-overlay-badge');
el.setAttribute('data-p-overlay-badge', 'true'); el.setAttribute('data-p-overlay-badge', 'true');
if (binding.oldValue !== binding.value) { if (binding.oldValue !== binding.value) {
@ -54,7 +52,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value; if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value;
else el.$_badgeValue = binding.value; else el.$_badgeValue = binding.value;
if (!el.unstyled) { if (!this.isUnstyled()) {
if (el.$_badgeValue) { if (el.$_badgeValue) {
if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot'); if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot');

17
components/lib/basedirective/BaseDirective.js
View File

@ -4,6 +4,7 @@ import { mergeProps } from 'vue';
const BaseDirective = { const BaseDirective = {
_getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])], _getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])],
_getConfig: (binding, vnode) => (binding?.instance?.$primevue || vnode?.ctx?.appContext?.config?.globalProperties?.$primevue)?.config,
_getOptionValue: (options, key = '', params = {}) => { _getOptionValue: (options, key = '', params = {}) => {
const fKeys = ObjectUtils.toFlatCase(key).split('.'); const fKeys = ObjectUtils.toFlatCase(key).split('.');
const fKey = fKeys.shift(); const fKey = fKeys.shift();
@ -23,7 +24,7 @@ const BaseDirective = {
const datasetPrefix = 'data-pc-'; const datasetPrefix = 'data-pc-';
const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || instance.$config?.ptOptions || {}; const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || instance.$config?.ptOptions || {};
const global = searchInDefaultPT ? BaseDirective._useDefaultPT(instance, instance.defaultPT, getValue, key, params) : undefined; const global = searchInDefaultPT ? BaseDirective._useDefaultPT(instance, instance.defaultPT(), getValue, key, params) : undefined;
const self = BaseDirective._usePT(instance, BaseDirective._getPT(obj, instance.$name), getValue, key, { ...params, global: global || {} }); const self = BaseDirective._usePT(instance, BaseDirective._getPT(obj, instance.$name), getValue, key, { ...params, global: global || {} });
const datasets = { const datasets = {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }), ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }),
@ -70,7 +71,7 @@ const BaseDirective = {
}, },
_hook: (directiveName, hookName, el, binding, vnode, prevVnode) => { _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
const name = `on${ObjectUtils.toCapitalCase(hookName)}`; const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
const config = binding?.instance?.$primevue?.config; const config = BaseDirective._getConfig(binding, vnode);
const instance = el?.$instance; const instance = el?.$instance;
const selfHook = BaseDirective._usePT(instance, BaseDirective._getPT(binding?.value?.pt, directiveName), BaseDirective._getOptionValue, `hooks.${name}`); const selfHook = BaseDirective._usePT(instance, BaseDirective._getPT(binding?.value?.pt, directiveName), BaseDirective._getOptionValue, `hooks.${name}`);
const defaultHook = BaseDirective._useDefaultPT(instance, config?.pt?.directives?.[directiveName], BaseDirective._getOptionValue, `hooks.${name}`); const defaultHook = BaseDirective._useDefaultPT(instance, config?.pt?.directives?.[directiveName], BaseDirective._getOptionValue, `hooks.${name}`);
@ -83,7 +84,7 @@ const BaseDirective = {
const handleHook = (hook, el, binding, vnode, prevVnode) => { const handleHook = (hook, el, binding, vnode, prevVnode) => {
el._$instances = el._$instances || {}; el._$instances = el._$instances || {};
const config = binding?.instance?.$primevue?.config; const config = BaseDirective._getConfig(binding, vnode);
const $prevInstance = el._$instances[name] || {}; const $prevInstance = el._$instances[name] || {};
const $options = ObjectUtils.isEmpty($prevInstance) ? { ...options, ...options?.methods } : {}; const $options = ObjectUtils.isEmpty($prevInstance) ? { ...options, ...options?.methods } : {};
@ -97,12 +98,12 @@ const BaseDirective = {
$style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style }, $style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style },
$config: config, $config: config,
/* computed instance variables */ /* computed instance variables */
defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]), defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
isUnstyled: el.unstyled !== undefined ? el.unstyled : config?.unstyled, isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
/* instance's methods */ /* instance's methods */
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }), ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false), ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),
cx: (key = '', params = {}) => (!el.$instance?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.$style?.classes, key, { ...params }) : undefined), cx: (key = '', params = {}) => (!el.$instance?.isUnstyled() ? BaseDirective._getOptionValue(el.$instance?.$style?.classes, key, { ...params }) : undefined),
sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$style?.inlineStyles, key, { ...params }) : undefined), sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$style?.inlineStyles, key, { ...params }) : undefined),
...$options ...$options
}; };
@ -117,10 +118,10 @@ const BaseDirective = {
handleHook('created', el, binding, vnode, prevVnode); handleHook('created', el, binding, vnode, prevVnode);
}, },
beforeMount: (el, binding, vnode, prevVnode) => { beforeMount: (el, binding, vnode, prevVnode) => {
const config = binding?.instance?.$primevue?.config; const config = BaseDirective._getConfig(binding, vnode);
BaseStyle.loadStyle(undefined, { nonce: config?.csp?.nonce }); BaseStyle.loadStyle(undefined, { nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled && el.$instance?.$style?.loadStyle(undefined, { nonce: config?.csp?.nonce }); !el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle(undefined, { nonce: config?.csp?.nonce });
handleHook('beforeMount', el, binding, vnode, prevVnode); handleHook('beforeMount', el, binding, vnode, prevVnode);
}, },
mounted: (el, binding, vnode, prevVnode) => { mounted: (el, binding, vnode, prevVnode) => {

6
components/lib/blockui/BlockUI.vue
View File

@ -50,8 +50,7 @@ export default {
}); });
document.body.appendChild(this.mask); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
document.activeElement.blur(); document.activeElement.blur();
} else { } else {
this.mask = DomHandler.createElement('div', { this.mask = DomHandler.createElement('div', {
@ -92,8 +91,7 @@ export default {
if (this.fullScreen) { if (this.fullScreen) {
document.body.removeChild(this.mask); document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} else { } else {
this.$refs.container.removeChild(this.mask); this.$refs.container.removeChild(this.mask);
} }

8
components/lib/calendar/Calendar.vue
View File

@ -1656,8 +1656,7 @@ export default {
this.mask.addEventListener('click', this.maskClickListener); this.mask.addEventListener('click', this.maskClickListener);
document.body.appendChild(this.mask); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} }
}, },
disableModality() { disableModality() {
@ -1691,8 +1690,7 @@ export default {
} }
if (!hasBlockerMasks) { if (!hasBlockerMasks) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} }
}, },
updateCurrentMetaData() { updateCurrentMetaData() {
@ -2671,7 +2669,7 @@ export default {
let innerHTML = ''; let innerHTML = '';
if (this.responsiveOptions) { if (this.responsiveOptions) {
const comparer = new Intl.Collator(undefined, { numeric: true }).compare; const comparer = ObjectUtils.localeComparator();
let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * comparer(o1.breakpoint, o2.breakpoint)); let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * comparer(o1.breakpoint, o2.breakpoint));
for (let i = 0; i < responsiveOptions.length; i++) { for (let i = 0; i < responsiveOptions.length; i++) {

2
components/lib/calendar/style/CalendarStyle.js
View File

@ -210,8 +210,6 @@ const classes = {
decrementButton: 'p-link', decrementButton: 'p-link',
separatorContainer: 'p-separator', separatorContainer: 'p-separator',
minutePicker: 'p-minute-picker', minutePicker: 'p-minute-picker',
incrementButton: 'p-link',
decrementButton: 'p-link',
secondPicker: 'p-second-picker', secondPicker: 'p-second-picker',
ampmPicker: 'p-ampm-picker', ampmPicker: 'p-ampm-picker',
buttonbar: 'p-datepicker-buttonbar', buttonbar: 'p-datepicker-buttonbar',

13
components/lib/carousel/Carousel.vue
View File

@ -101,7 +101,7 @@ import ChevronLeftIcon from 'primevue/icons/chevronleft';
import ChevronRightIcon from 'primevue/icons/chevronright'; import ChevronRightIcon from 'primevue/icons/chevronright';
import ChevronUpIcon from 'primevue/icons/chevronup'; import ChevronUpIcon from 'primevue/icons/chevronup';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import { DomHandler, UniqueComponentId } from 'primevue/utils'; import { DomHandler, UniqueComponentId, ObjectUtils } from 'primevue/utils';
import BaseCarousel from './BaseCarousel.vue'; import BaseCarousel from './BaseCarousel.vue';
export default { export default {
@ -548,20 +548,13 @@ export default {
if (this.responsiveOptions && !this.isUnstyled) { if (this.responsiveOptions && !this.isUnstyled) {
let _responsiveOptions = [...this.responsiveOptions]; let _responsiveOptions = [...this.responsiveOptions];
const comparer = new Intl.Collator(undefined, { numeric: true }).compare; const comparer = ObjectUtils.localeComparator();
_responsiveOptions.sort((data1, data2) => { _responsiveOptions.sort((data1, data2) => {
const value1 = data1.breakpoint; const value1 = data1.breakpoint;
const value2 = data2.breakpoint; const value2 = data2.breakpoint;
let result = null;
if (value1 == null && value2 != null) result = -1; return ObjectUtils.sort(value1, value2, -1, comparer);
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return -1 * result;
}); });
for (let i = 0; i < _responsiveOptions.length; i++) { for (let i = 0; i < _responsiveOptions.length; i++) {

2
components/lib/config/PrimeVue.d.ts vendored
View File

@ -108,6 +108,8 @@ export interface PrimeVueConfiguration {
csp?: PrimeVueCSPOptions; csp?: PrimeVueCSPOptions;
} }
export declare const defaultOptions: PrimeVueConfiguration;
export interface PrimeVueZIndexOptions { export interface PrimeVueZIndexOptions {
modal?: number; modal?: number;
overlay?: number; overlay?: number;

4
components/lib/datatable/BaseDataTable.vue
View File

@ -78,6 +78,10 @@ export default {
type: Number, type: Number,
default: 1 default: 1
}, },
nullSortOrder: {
type: Number,
default: 1
},
multiSortMeta: { multiSortMeta: {
type: Array, type: Array,
default: null default: null

5
components/lib/datatable/DataTable.d.ts vendored
View File

@ -887,6 +887,11 @@ export interface DataTableProps {
* Order to sort the data by default. * Order to sort the data by default.
*/ */
sortOrder?: number | undefined; sortOrder?: number | undefined;
/**
* Determines how null values are sorted.
* @defaultValue 1
*/
nullSortOrder?: number;
/** /**
* Default sort order of an unsorted column. * Default sort order of an unsorted column.
* @defaultValue 1 * @defaultValue 1

38
components/lib/datatable/DataTable.vue
View File

@ -341,6 +341,7 @@ export default {
d_rows: this.rows, d_rows: this.rows,
d_sortField: this.sortField, d_sortField: this.sortField,
d_sortOrder: this.sortOrder, d_sortOrder: this.sortOrder,
d_nullSortOrder: this.nullSortOrder,
d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [], d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
d_groupRowsSortMeta: null, d_groupRowsSortMeta: null,
d_selectionKeys: null, d_selectionKeys: null,
@ -381,6 +382,9 @@ export default {
sortOrder(newValue) { sortOrder(newValue) {
this.d_sortOrder = newValue; this.d_sortOrder = newValue;
}, },
nullSortOrder(newValue) {
this.d_nullSortOrder = newValue;
},
multiSortMeta(newValue) { multiSortMeta(newValue) {
this.d_multiSortMeta = newValue; this.d_multiSortMeta = newValue;
}, },
@ -530,27 +534,19 @@ export default {
} }
let data = [...value]; let data = [...value];
let resolvedFieldDatas = new Map(); let resolvedFieldData = new Map();
for (let item of data) { for (let item of data) {
resolvedFieldDatas.set(item, ObjectUtils.resolveFieldData(item, this.d_sortField)); resolvedFieldData.set(item, ObjectUtils.resolveFieldData(item, this.d_sortField));
} }
const comparer = new Intl.Collator(undefined, { numeric: true }).compare; const comparer = ObjectUtils.localeComparator();
data.sort((data1, data2) => { data.sort((data1, data2) => {
let value1 = resolvedFieldDatas.get(data1); let value1 = resolvedFieldData.get(data1);
let value2 = resolvedFieldDatas.get(data2); let value2 = resolvedFieldData.get(data2);
let result = null; return ObjectUtils.sort(value1, value2, this.d_sortOrder, comparer, this.d_nullSortOrder);
if (value1 == null && value2 != null) result = -1;
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return this.d_sortOrder * result;
}); });
return data; return data;
@ -579,23 +575,13 @@ export default {
multisortField(data1, data2, index) { multisortField(data1, data2, index) {
const value1 = ObjectUtils.resolveFieldData(data1, this.d_multiSortMeta[index].field); const value1 = ObjectUtils.resolveFieldData(data1, this.d_multiSortMeta[index].field);
const value2 = ObjectUtils.resolveFieldData(data2, this.d_multiSortMeta[index].field); const value2 = ObjectUtils.resolveFieldData(data2, this.d_multiSortMeta[index].field);
let result = null; const comparer = ObjectUtils.localeComparator();
if (typeof value1 === 'string' || value1 instanceof String) {
if (value1.localeCompare && value1 !== value2) {
const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
return this.d_multiSortMeta[index].order * comparer(value1, value2);
}
} else {
result = value1 < value2 ? -1 : 1;
}
if (value1 === value2) { if (value1 === value2) {
return this.d_multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, index + 1) : 0; return this.d_multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, index + 1) : 0;
} }
return this.d_multiSortMeta[index].order * result; return ObjectUtils.sort(value1, value2, this.d_multiSortMeta[index].order, comparer, this.d_nullSortOrder);
}, },
addMultiSortField(field) { addMultiSortField(field) {
let index = this.d_multiSortMeta.findIndex((meta) => meta.field === field); let index = this.d_multiSortMeta.findIndex((meta) => meta.field === field);

11
components/lib/dataview/DataView.vue
View File

@ -110,20 +110,13 @@ export default {
sort() { sort() {
if (this.value) { if (this.value) {
const value = [...this.value]; const value = [...this.value];
const comparer = new Intl.Collator(undefined, { numeric: true }).compare; const comparer = ObjectUtils.localeComparator();
value.sort((data1, data2) => { value.sort((data1, data2) => {
let value1 = ObjectUtils.resolveFieldData(data1, this.sortField); let value1 = ObjectUtils.resolveFieldData(data1, this.sortField);
let value2 = ObjectUtils.resolveFieldData(data2, this.sortField); let value2 = ObjectUtils.resolveFieldData(data2, this.sortField);
let result = null;
if (value1 == null && value2 != null) result = -1; return ObjectUtils.sort(value1, value2, this.sortOrder, comparer);
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return this.sortOrder * result;
}); });
return value; return value;

14
components/lib/dialog/Dialog.vue
View File

@ -203,25 +203,17 @@ export default {
} }
if (!this.modal) { if (!this.modal) {
if (this.maximized) { this.maximized ? DomHandler.blockBodyScroll() : DomHandler.unblockBodyScroll();
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} else {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.style.removeProperty('--scrollbar-width');
}
} }
}, },
enableDocumentSettings() { enableDocumentSettings() {
if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) { if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} }
}, },
unbindDocumentState() { unbindDocumentState() {
if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) { if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} }
}, },
onKeyDown(event) { onKeyDown(event) {

10
components/lib/editor/style/EditorStyle.js
View File

@ -2,11 +2,11 @@ import BaseStyle from 'primevue/base/style';
const quillCSS = ` const quillCSS = `
/*! /*!
* Quill Editor v1.3.3 * Quill Editor v1.3.3
* https://quilljs.com/ * https://quilljs.com/
* Copyright (c) 2014, Jason Chen * Copyright (c) 2014, Jason Chen
* Copyright (c) 2013, salesforce.com * Copyright (c) 2013, salesforce.com
*/ */
.ql-container { .ql-container {
box-sizing: border-box; box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;

1
components/lib/fieldset/style/FieldsetStyle.js
View File

@ -33,7 +33,6 @@ const classes = {
legend: 'p-fieldset-legend', legend: 'p-fieldset-legend',
legendtitle: 'p-fieldset-legend-text', legendtitle: 'p-fieldset-legend-text',
togglericon: 'p-fieldset-toggler', togglericon: 'p-fieldset-toggler',
legendtitle: 'p-fieldset-legend-text',
toggleablecontent: 'p-toggleable-content', toggleablecontent: 'p-toggleable-content',
content: 'p-fieldset-content' content: 'p-fieldset-content'
}; };

9
components/lib/galleria/Galleria.vue
View File

@ -35,8 +35,7 @@ export default {
}, },
beforeUnmount() { beforeUnmount() {
if (this.fullScreen) { if (this.fullScreen) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} }
this.mask = null; this.mask = null;
@ -52,8 +51,7 @@ export default {
}, },
onEnter(el) { onEnter(el) {
this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1); this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
this.focus(); this.focus();
}, },
onBeforeLeave() { onBeforeLeave() {
@ -62,8 +60,7 @@ export default {
onAfterLeave(el) { onAfterLeave(el) {
ZIndexUtils.clear(el); ZIndexUtils.clear(el);
this.containerVisible = false; this.containerVisible = false;
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
}, },
onActiveItemChange(index) { onActiveItemChange(index) {
if (this.activeIndex !== index) { if (this.activeIndex !== index) {

13
components/lib/galleria/GalleriaThumbnails.vue
View File

@ -68,7 +68,7 @@ import ChevronLeftIcon from 'primevue/icons/chevronleft';
import ChevronRightIcon from 'primevue/icons/chevronright'; import ChevronRightIcon from 'primevue/icons/chevronright';
import ChevronUpIcon from 'primevue/icons/chevronup'; import ChevronUpIcon from 'primevue/icons/chevronup';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import { DomHandler } from 'primevue/utils'; import { DomHandler, ObjectUtils } from 'primevue/utils';
export default { export default {
name: 'GalleriaThumbnails', name: 'GalleriaThumbnails',
@ -438,20 +438,13 @@ export default {
if (this.responsiveOptions && !this.isUnstyled) { if (this.responsiveOptions && !this.isUnstyled) {
this.sortedResponsiveOptions = [...this.responsiveOptions]; this.sortedResponsiveOptions = [...this.responsiveOptions];
const comparer = new Intl.Collator(undefined, { numeric: true }).compare; const comparer = ObjectUtils.localeComparator();
this.sortedResponsiveOptions.sort((data1, data2) => { this.sortedResponsiveOptions.sort((data1, data2) => {
const value1 = data1.breakpoint; const value1 = data1.breakpoint;
const value2 = data2.breakpoint; const value2 = data2.breakpoint;
let result = null;
if (value1 == null && value2 != null) result = -1; return ObjectUtils.sort(value1, value2, -1, comparer);
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return -1 * result;
}); });
for (let i = 0; i < this.sortedResponsiveOptions.length; i++) { for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {

9
components/lib/image/Image.vue
View File

@ -93,8 +93,7 @@ export default {
}, },
onImageClick() { onImageClick() {
if (this.preview) { if (this.preview) {
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
this.maskVisible = true; this.maskVisible = true;
setTimeout(() => { setTimeout(() => {
this.previewVisible = true; this.previewVisible = true;
@ -164,8 +163,7 @@ export default {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave'); !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
}, },
onLeave() { onLeave() {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
this.$emit('hide'); this.$emit('hide');
}, },
onAfterLeave(el) { onAfterLeave(el) {
@ -183,8 +181,7 @@ export default {
this.previewVisible = false; this.previewVisible = false;
this.rotate = 0; this.rotate = 0;
this.scale = 1; this.scale = 1;
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} }
}, },
computed: { computed: {

8
components/lib/orderlist/OrderList.vue
View File

@ -2,28 +2,28 @@
<div :class="cx('root')" v-bind="ptm('root')"> <div :class="cx('root')" v-bind="ptm('root')">
<div :class="cx('controls')" v-bind="ptm('controls')"> <div :class="cx('controls')" v-bind="ptm('controls')">
<slot name="controlsstart"></slot> <slot name="controlsstart"></slot>
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveUpButton')" v-bind="moveUpButtonProps" :unstyled="unstyled"> <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveUpButton')" v-bind="moveUpButtonProps" data-pc-section="moveupbutton" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" /> <AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
</slot> </slot>
</template> </template>
</OLButton> </OLButton>
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveTopButton')" v-bind="ptm('moveTopButton')" :unstyled="unstyled"> <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveTopButton')" v-bind="moveTopButtonProps" data-pc-section="movetopbutton" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movetopicon"> <slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" /> <AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
</slot> </slot>
</template> </template>
</OLButton> </OLButton>
<OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveDownButton')" v-bind="moveDownButtonProps" :unstyled="unstyled"> <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveDownButton')" v-bind="moveDownButtonProps" data-pc-section="movedownbutton" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movedownicon"> <slot name="movedownicon">
<AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" /> <AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
</slot> </slot>
</template> </template>
</OLButton> </OLButton>
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveBottomButton')" v-bind="moveBottomButtonProps" :unstyled="unstyled"> <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveBottomButton')" v-bind="moveBottomButtonProps" data-pc-section="movebottombutton" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movebottomicon"> <slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" /> <AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />

7
components/lib/organizationchart/OrganizationChart.d.ts vendored
View File

@ -261,7 +261,12 @@ export interface OrganizationChartSlots {
/** /**
* Custom content template. * Custom content template.
*/ */
default(node: any): VNode[]; default(scope: {
/**
* Current node
*/
node: any;
}): VNode[];
/** /**
* Dynamic content template. * Dynamic content template.
* @todo * @todo

1
components/lib/organizationchart/style/OrganizationChartStyle.js
View File

@ -65,7 +65,6 @@ const classes = {
nodeTogglerIcon: 'p-node-toggler-icon', nodeTogglerIcon: 'p-node-toggler-icon',
lines: 'p-organizationchart-lines', lines: 'p-organizationchart-lines',
lineDown: 'p-organizationchart-line-down', lineDown: 'p-organizationchart-line-down',
lines: 'p-organizationchart-lines',
lineLeft: ({ index }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(index === 0) }], lineLeft: ({ index }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(index === 0) }],
lineRight: ({ props, index }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(index === props.node.children.length - 1) }], lineRight: ({ props, index }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(index === props.node.children.length - 1) }],
nodes: 'p-organizationchart-nodes' nodes: 'p-organizationchart-nodes'

27
components/lib/passthrough/tailwind/index.js
View File

@ -369,11 +369,6 @@ export default {
} }
] ]
}), }),
splitterpanel: {
root: {
class: 'flex grow'
}
},
gutter: ({ props }) => ({ gutter: ({ props }) => ({
class: [ class: [
'flex items-center justify-center shrink-0', 'flex items-center justify-center shrink-0',
@ -394,6 +389,11 @@ export default {
] ]
}) })
}, },
splitterpanel: {
root: {
class: 'flex grow'
}
},
dialog: { dialog: {
root: ({ state }) => ({ root: ({ state }) => ({
class: [ class: [
@ -901,7 +901,14 @@ export default {
class: 'w-full inline-flex' class: 'w-full inline-flex'
}, },
input: ({ props }) => ({ input: ({ props }) => ({
class: [{ 'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked' }] class: [
{
'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked'
},
{
'order-2': props.buttonLayout == 'horizontal'
}
]
}), }),
buttongroup: ({ props }) => ({ buttongroup: ({ props }) => ({
class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }] class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }]
@ -911,6 +918,9 @@ export default {
'flex !items-center !justify-center', 'flex !items-center !justify-center',
{ {
'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked' 'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
},
{
'order-3': props.buttonLayout == 'horizontal'
} }
] ]
}), }),
@ -922,6 +932,9 @@ export default {
'flex !items-center !justify-center', 'flex !items-center !justify-center',
{ {
'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked' 'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
},
{
'order-1': props.buttonLayout == 'horizontal'
} }
] ]
}) })
@ -3734,7 +3747,7 @@ export default {
context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort
context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode
{ {
'sticky z-[1]': props.frozen || props.frozen === '', // Frozen Columns 'sticky z-[1]': context.frozen || context.frozen === '', // Frozen Columns
'border-x border-y': context?.showGridlines, 'border-x border-y': context?.showGridlines,
'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable 'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable
} }

24
components/lib/ripple/Ripple.js
View File

@ -2,17 +2,15 @@ import { DomHandler } from 'primevue/utils';
import BaseRipple from './BaseRipple'; import BaseRipple from './BaseRipple';
const Ripple = BaseRipple.extend('ripple', { const Ripple = BaseRipple.extend('ripple', {
mounted(el, binding) { mounted(el) {
const primevue = binding.instance.$primevue; const config = el?.$instance?.$config;
if (primevue && primevue.config && primevue.config.ripple) {
el.unstyled = primevue.config.unstyled || binding.value?.unstyled || false;
if (config && config.ripple) {
this.create(el); this.create(el);
this.bindEvents(el); this.bindEvents(el);
}
el.setAttribute('data-pd-ripple', true); el.setAttribute('data-pd-ripple', true);
}
}, },
unmounted(el) { unmounted(el) {
this.remove(el); this.remove(el);
@ -31,8 +29,8 @@ const Ripple = BaseRipple.extend('ripple', {
'aria-hidden': true, 'aria-hidden': true,
'data-p-ink': true, 'data-p-ink': true,
'data-p-ink-active': false, 'data-p-ink-active': false,
class: !el.unstyled && this.cx('root'), class: !this.isUnstyled() && this.cx('root'),
onAnimationEnd: this.onAnimationEnd, onAnimationEnd: this.onAnimationEnd.bind(this),
'p-bind': this.ptm('root') 'p-bind': this.ptm('root')
}); });
@ -57,7 +55,7 @@ const Ripple = BaseRipple.extend('ripple', {
return; return;
} }
!target.unstyled && DomHandler.removeClass(ink, 'p-ink-active'); !this.isUnstyled() && DomHandler.removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false'); ink.setAttribute('data-p-ink-active', 'false');
if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) { if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
@ -74,12 +72,12 @@ const Ripple = BaseRipple.extend('ripple', {
ink.style.top = y + 'px'; ink.style.top = y + 'px';
ink.style.left = x + 'px'; ink.style.left = x + 'px';
!target.unstyled && DomHandler.addClass(ink, 'p-ink-active'); !this.isUnstyled() && DomHandler.addClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'true'); ink.setAttribute('data-p-ink-active', 'true');
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
if (ink) { if (ink) {
!target.unstyled && DomHandler.removeClass(ink, 'p-ink-active'); !this.isUnstyled() && DomHandler.removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false'); ink.setAttribute('data-p-ink-active', 'false');
} }
}, 401); }, 401);
@ -89,7 +87,7 @@ const Ripple = BaseRipple.extend('ripple', {
clearTimeout(this.timeout); clearTimeout(this.timeout);
} }
!event.currentTarget.unstyled && DomHandler.removeClass(event.currentTarget, 'p-ink-active'); !this.isUnstyled() && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
event.currentTarget.setAttribute('data-p-ink-active', 'false'); event.currentTarget.setAttribute('data-p-ink-active', 'false');
}, },
getInk(el) { getInk(el) {

4
components/lib/selectbutton/BaseSelectButton.vue
View File

@ -16,6 +16,10 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
allowEmpty: {
type: Boolean,
default: true
},
disabled: Boolean, disabled: Boolean,
dataKey: null, dataKey: null,
'aria-labelledby': { 'aria-labelledby': {

8
components/lib/selectbutton/SelectButton.d.ts vendored
View File

@ -155,10 +155,16 @@ export interface SelectButtonProps {
*/ */
dataKey?: string | undefined; dataKey?: string | undefined;
/** /**
* Whether selection can be cleared. * Whether selection can not be cleared.
* @defaultValue false * @defaultValue false
* @deprecated Use 'allowEmpty' property instead.
*/ */
unselectable?: boolean | undefined; unselectable?: boolean | undefined;
/**
* Whether selection can be cleared.
* @defaultValue true
*/
allowEmpty?: boolean | undefined;
/** /**
* Identifier of the underlying element. * Identifier of the underlying element.
*/ */

2
components/lib/selectbutton/SelectButton.vue
View File

@ -81,7 +81,7 @@ export default {
let selected = this.isSelected(option); let selected = this.isSelected(option);
if (selected && this.unselectable) { if (selected && (this.unselectable || !this.allowEmpty)) {
return; return;
} }

6
components/lib/sidebar/Sidebar.vue
View File

@ -124,16 +124,14 @@ export default {
} }
if (this.blockScroll) { if (this.blockScroll) {
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.blockBodyScroll();
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} }
}, },
disableDocumentSettings() { disableDocumentSettings() {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
if (this.blockScroll) { if (this.blockScroll) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); DomHandler.unblockBodyScroll();
document.body.style.removeProperty('--scrollbar-width');
} }
}, },
onKeydown(event) { onKeydown(event) {

4
components/lib/slider/Slider.vue
View File

@ -102,8 +102,8 @@ export default {
const oldValue = this.range ? this.modelValue[this.handleIndex] : this.modelValue; const oldValue = this.range ? this.modelValue[this.handleIndex] : this.modelValue;
const diff = newValue - oldValue; const diff = newValue - oldValue;
if (diff < 0) newValue = oldValue + Math.ceil(newValue / this.step - oldValue / this.step) * this.step; if (diff < 0) newValue = oldValue + Math.floor(newValue / this.step - oldValue / this.step) * this.step;
else if (diff > 0) newValue = oldValue + Math.floor(newValue / this.step - oldValue / this.step) * this.step; else if (diff > 0) newValue = oldValue + Math.ceil(newValue / this.step - oldValue / this.step) * this.step;
} else { } else {
newValue = Math.floor(newValue); newValue = Math.floor(newValue);
} }

5
components/lib/toast/Toast.d.ts vendored
View File

@ -238,6 +238,11 @@ export interface ToastProps {
* @deprecated since v3.26.0. Use 'pt' property. * @deprecated since v3.26.0. Use 'pt' property.
*/ */
closeButtonProps?: ButtonHTMLAttributes | undefined; closeButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Used to access message options.
* @type {ToastMessageOptions}
*/
message?: ToastMessageOptions;
/** /**
* Used to pass attributes to DOM elements inside the component. * Used to pass attributes to DOM elements inside the component.
* @type {ToastPassThroughOptions} * @type {ToastPassThroughOptions}

14
components/lib/tooltip/Tooltip.js
View File

@ -32,7 +32,6 @@ const Tooltip = BaseTooltip.extend('tooltip', {
} }
target.$_ptooltipZIndex = options.instance.$primevue?.config?.zIndex?.tooltip; target.$_ptooltipZIndex = options.instance.$primevue?.config?.zIndex?.tooltip;
target.unstyled = options.instance.$primevue?.config?.unstyled || options.value?.unstyled || false;
this.bindEvents(target, options); this.bindEvents(target, options);
@ -76,8 +75,6 @@ const Tooltip = BaseTooltip.extend('tooltip', {
this.bindEvents(target, options); this.bindEvents(target, options);
} }
} }
target.unstyled = options.instance.$primevue?.config?.unstyled || options.value?.unstyled || false;
}, },
unmounted(el, options) { unmounted(el, options) {
let target = this.getTarget(el); let target = this.getTarget(el);
@ -186,7 +183,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
let tooltipElement = this.create(el, options); let tooltipElement = this.create(el, options);
this.align(el); this.align(el);
!el.unstyled && DomHandler.fadeIn(tooltipElement, 250); !this.isUnstyled() && DomHandler.fadeIn(tooltipElement, 250);
const $this = this; const $this = this;
@ -228,7 +225,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
const modifiers = el.$_ptooltipModifiers; const modifiers = el.$_ptooltipModifiers;
const tooltipArrow = DomHandler.createElement('div', { const tooltipArrow = DomHandler.createElement('div', {
class: !el.unstyled && this.cx('arrow'), class: !this.isUnstyled() && this.cx('arrow'),
style: { style: {
top: modifiers?.bottom ? '0' : modifiers?.right || modifiers?.left || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '50%' : null, top: modifiers?.bottom ? '0' : modifiers?.right || modifiers?.left || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '50%' : null,
bottom: modifiers?.top ? '0' : null, bottom: modifiers?.top ? '0' : null,
@ -241,7 +238,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
}); });
const tooltipText = DomHandler.createElement('div', { const tooltipText = DomHandler.createElement('div', {
class: !el.unstyled && this.cx('text'), class: !this.isUnstyled() && this.cx('text'),
'p-bind': this.ptm('text', { 'p-bind': this.ptm('text', {
context: modifiers context: modifiers
}) })
@ -263,7 +260,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
display: 'inline-block', display: 'inline-block',
width: el.$_ptooltipFitContent ? 'fit-content' : undefined width: el.$_ptooltipFitContent ? 'fit-content' : undefined
}, },
class: [!el.unstyled && this.cx('root'), el.$_ptooltipClass], class: [!this.isUnstyled() && this.cx('root'), el.$_ptooltipClass],
'p-bind': this.ptm('root', { 'p-bind': this.ptm('root', {
context: modifiers context: modifiers
}) })
@ -405,8 +402,9 @@ const Tooltip = BaseTooltip.extend('tooltip', {
tooltipElement.style.left = -999 + 'px'; tooltipElement.style.left = -999 + 'px';
tooltipElement.style.top = -999 + 'px'; tooltipElement.style.top = -999 + 'px';
DomHandler.removeClass(tooltipElement, `p-tooltip-${tooltipElement.$_ptooltipPosition}`); DomHandler.removeClass(tooltipElement, `p-tooltip-${tooltipElement.$_ptooltipPosition}`);
DomHandler.addClass(tooltipElement, `p-tooltip-${position}`); !this.isUnstyled() && DomHandler.addClass(tooltipElement, `p-tooltip-${position}`);
tooltipElement.$_ptooltipPosition = position; tooltipElement.$_ptooltipPosition = position;
tooltipElement.setAttribute('data-p-position', position);
}, },
isOutOfBounds(el) { isOutOfBounds(el) {
let tooltipElement = this.getTooltipElement(el); let tooltipElement = this.getTooltipElement(el);

7
components/lib/tree/Tree.d.ts vendored
View File

@ -347,6 +347,10 @@ export interface TreeProps {
* Defines valid slots in Tree component. * Defines valid slots in Tree component.
*/ */
export interface TreeSlots { export interface TreeSlots {
/**
* Default content slot.
*/
default(): VNode[];
/** /**
* Custom loading icon template. * Custom loading icon template.
* @param {Object} scope - loadingicon slot's params. * @param {Object} scope - loadingicon slot's params.
@ -399,12 +403,11 @@ export interface TreeSlots {
* Optional slots. * Optional slots.
* @todo * @todo
*/ */
[key: string]: (node: any) => VNode[]; [key: string]: (node: any) => VNode[];
} }
/** /**
* Defines valid slots in Tree component. * Defines valid emits in Tree component.
*/ */
export interface TreeEmits { export interface TreeEmits {
/** /**

28
components/lib/treetable/TreeTable.vue
View File

@ -429,20 +429,13 @@ export default {
}, },
sortNodesSingle(nodes) { sortNodesSingle(nodes) {
let _nodes = [...nodes]; let _nodes = [...nodes];
const comparer = new Intl.Collator(undefined, { numeric: true }).compare; const comparer = ObjectUtils.localeComparator();
_nodes.sort((node1, node2) => { _nodes.sort((node1, node2) => {
const value1 = ObjectUtils.resolveFieldData(node1.data, this.d_sortField); const value1 = ObjectUtils.resolveFieldData(node1.data, this.d_sortField);
const value2 = ObjectUtils.resolveFieldData(node2.data, this.d_sortField); const value2 = ObjectUtils.resolveFieldData(node2.data, this.d_sortField);
let result = null;
if (value1 == null && value2 != null) result = -1; return ObjectUtils.sort(value1, value2, this.d_sortOrder, comparer);
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return this.d_sortOrder * result;
}); });
return _nodes; return _nodes;
@ -462,22 +455,13 @@ export default {
multisortField(node1, node2, index) { multisortField(node1, node2, index) {
const value1 = ObjectUtils.resolveFieldData(node1.data, this.d_multiSortMeta[index].field); const value1 = ObjectUtils.resolveFieldData(node1.data, this.d_multiSortMeta[index].field);
const value2 = ObjectUtils.resolveFieldData(node2.data, this.d_multiSortMeta[index].field); const value2 = ObjectUtils.resolveFieldData(node2.data, this.d_multiSortMeta[index].field);
let result = null; const comparer = ObjectUtils.localeComparator();
if (value1 == null && value2 != null) result = -1; if (value1 === value2) {
else if (value1 != null && value2 == null) result = 1; return this.d_multiSortMeta.length - 1 > index ? this.multisortField(node1, node2, index + 1) : 0;
else if (value1 == null && value2 == null) result = 0;
else {
if (value1 === value2) {
return this.d_multiSortMeta.length - 1 > index ? this.multisortField(node1, node2, index + 1) : 0;
} else {
if ((typeof value1 === 'string' || value1 instanceof String) && (typeof value2 === 'string' || value2 instanceof String))
return this.d_multiSortMeta[index].order * new Intl.Collator(undefined, { numeric: true }).compare(value1, value2);
else result = value1 < value2 ? -1 : 1;
}
} }
return this.d_multiSortMeta[index].order * result; return ObjectUtils.sort(value1, value2, this.d_multiSortMeta[index].order, comparer);
}, },
filter(value) { filter(value) {
let filteredNodes = []; let filteredNodes = [];

14
components/lib/utils/DomHandler.js
View File

@ -564,6 +564,10 @@ export default {
return scrollbarWidth; return scrollbarWidth;
}, },
calculateBodyScrollbarWidth() {
return window.innerWidth - document.documentElement.offsetWidth;
},
getBrowser() { getBrowser() {
if (!this.browser) { if (!this.browser) {
let matched = this.resolveUserAgent(); let matched = this.resolveUserAgent();
@ -755,5 +759,15 @@ export default {
window.open(encodeURI(csv)); window.open(encodeURI(csv));
} }
} }
},
blockBodyScroll(className = 'p-overflow-hidden') {
document.body.style.setProperty('--scrollbar-width', this.calculateBodyScrollbarWidth() + 'px');
this.addClass(document.body, className);
},
unblockBodyScroll(className = 'p-overflow-hidden') {
document.body.style.removeProperty('--scrollbar-width');
this.removeClass(document.body, className);
} }
}; };

31
components/lib/utils/ObjectUtils.js
View File

@ -302,6 +302,37 @@ export default {
return index; return index;
}, },
sort(value1, value2, order = 1, comparator, nullSortOrder = 1) {
const result = this.compare(value1, value2, comparator, order);
let finalSortOrder = order;
// nullSortOrder == 1 means Excel like sort nulls at bottom
if (this.isEmpty(value1) || this.isEmpty(value2)) {
finalSortOrder = nullSortOrder === 1 ? order : nullSortOrder;
}
return finalSortOrder * result;
},
compare(value1, value2, comparator, order = 1) {
let result = -1;
const emptyValue1 = this.isEmpty(value1);
const emptyValue2 = this.isEmpty(value2);
if (emptyValue1 && emptyValue2) result = 0;
else if (emptyValue1) result = order;
else if (emptyValue2) result = -order;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparator(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return result;
},
localeComparator() {
//performance gain using Int.Collator. It is not recommended to use localeCompare against large arrays.
return new Intl.Collator(undefined, { numeric: true }).compare;
},
nestedKeys(obj = {}, parentKey = '') { nestedKeys(obj = {}, parentKey = '') {
return Object.entries(obj).reduce((o, [key, value]) => { return Object.entries(obj).reduce((o, [key, value]) => {
const currentKey = parentKey ? `${parentKey}.${key}` : key; const currentKey = parentKey ? `${parentKey}.${key}` : key;

5
components/lib/utils/Utils.d.ts vendored
View File

@ -46,6 +46,7 @@ export declare class DomHandler {
static clearSelection(): void; static clearSelection(): void;
static getSelection(): string | null; static getSelection(): string | null;
static calculateScrollbarWidth(): number; static calculateScrollbarWidth(): number;
static calculateBodyScrollbarWidth(): number;
static getBrowser(): object; static getBrowser(): object;
static resolveUserAgent(): { browser: string; version: string }; static resolveUserAgent(): { browser: string; version: string };
static isVisible(el: HTMLElement): boolean; static isVisible(el: HTMLElement): boolean;
@ -64,6 +65,8 @@ export declare class DomHandler {
static hasCSSAnimation(el: HTMLElement): boolean; static hasCSSAnimation(el: HTMLElement): boolean;
static hasCSSTransition(el: HTMLElement): boolean; static hasCSSTransition(el: HTMLElement): boolean;
static exportCSV(csv: any, filename: string): void; static exportCSV(csv: any, filename: string): void;
static blockBodyScroll(className?: string): void;
static unblockBodyScroll(className?: string): void;
} }
export declare class ObjectUtils { export declare class ObjectUtils {
@ -89,6 +92,8 @@ export declare class ObjectUtils {
static isPrintableCharacter(char: string): boolean; static isPrintableCharacter(char: string): boolean;
static findLast(value: any[], callback: () => any): any; static findLast(value: any[], callback: () => any): any;
static findLastIndex(value: any[], callback: () => any): number; static findLastIndex(value: any[], callback: () => any): number;
static sort(value1: any, value2: any, order: number, comparator: (a: any, b: any) => any, nullSortOrder: number): number;
static compare(value1: any, value2: any, comparator: (a: any, b: any) => any, order: number): number;
static nestedKeys(obj: object, parentKey?: string): string[]; static nestedKeys(obj: object, parentKey?: string): string[];
} }

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

@ -18854,6 +18854,14 @@
"default": "", "default": "",
"description": "Order to sort the data by default." "description": "Order to sort the data by default."
}, },
{
"name": "nullSortOrder",
"optional": true,
"readonly": false,
"type": "number",
"default": "1",
"description": "Determines how null values are sorted."
},
{ {
"name": "defaultSortOrder", "name": "defaultSortOrder",
"optional": true, "optional": true,
@ -24332,7 +24340,7 @@
"readonly": false, "readonly": false,
"type": "any[]", "type": "any[]",
"default": "", "default": "",
"description": "Whitelist of formats to display, see [here](https://quilljs.com/docs/formats/) for available options." "description": "Whitelist of formats to display, see <a target=\"_blank\" href=\"https://quilljs.com/docs/formats/\">here</a> for available options."
}, },
{ {
"name": "editorStyle", "name": "editorStyle",
@ -24348,7 +24356,7 @@
"readonly": false, "readonly": false,
"type": "any", "type": "any",
"default": "", "default": "",
"description": "Modules configuration, see [here](https://quilljs.com/docs/modules/) for available options." "description": "Modules configuration, see <a target=\"_blank\" href=\"https://quilljs.com/docs/modules/\">here</a> for available options."
}, },
{ {
"name": "pt", "name": "pt",
@ -35969,9 +35977,9 @@
"name": "default", "name": "default",
"parameters": [ "parameters": [
{ {
"name": "node", "name": "scope",
"optional": false, "optional": false,
"type": "any" "type": "{\n \t <span class=\"ml-3 text-primary-700\">node</span>: <span class=\"text-primary-500\">any</span>, <span class=\"text-primary-300\">// Current node</span>\n }"
} }
], ],
"returnType": "VNode<RendererNode, RendererElement, Object>[]", "returnType": "VNode<RendererNode, RendererElement, Object>[]",
@ -42662,6 +42670,15 @@
"readonly": false, "readonly": false,
"type": "boolean", "type": "boolean",
"default": "false", "default": "false",
"description": "Whether selection can not be cleared.",
"deprecated": "Use 'allowEmpty' property instead."
},
{
"name": "allowEmpty",
"optional": true,
"readonly": false,
"type": "boolean",
"default": "true",
"description": "Whether selection can be cleared." "description": "Whether selection can be cleared."
}, },
{ {
@ -49714,6 +49731,14 @@
"description": "Used to pass all properties of the HTMLButtonElement to the close button.", "description": "Used to pass all properties of the HTMLButtonElement to the close button.",
"deprecated": "since v3.26.0. Use 'pt' property." "deprecated": "since v3.26.0. Use 'pt' property."
}, },
{
"name": "message",
"optional": true,
"readonly": false,
"type": "ToastMessageOptions",
"default": "",
"description": "Used to access message options."
},
{ {
"name": "pt", "name": "pt",
"optional": true, "optional": true,
@ -51650,6 +51675,12 @@
} }
], ],
"methods": [ "methods": [
{
"name": "default",
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Default content slot."
},
{ {
"name": "loadingicon", "name": "loadingicon",
"parameters": [ "parameters": [
@ -51705,7 +51736,7 @@
] ]
}, },
"TreeEmits": { "TreeEmits": {
"description": "Defines valid slots in Tree component.", "description": "Defines valid emits in Tree component.",
"relatedProp": "", "relatedProp": "",
"props": [], "props": [],
"methods": [ "methods": [

61
doc/dock/AdvancedDoc.vue
View File

@ -6,15 +6,15 @@
<Toast position="top-center" group="tc" /> <Toast position="top-center" group="tc" />
<Menubar :model="menubarItems"> <Menubar :model="menubarItems">
<template #start> <template #start>
<i class="pi pi-apple px-3"></i> <i class="pi pi-apple px-2"></i>
</template> </template>
<template #end> <template #end>
<i class="pi pi-video px-3" /> <i class="pi pi-video px-2" />
<i class="pi pi-wifi px-3" /> <i class="pi pi-wifi px-2" />
<i class="pi pi-volume-up px-3" /> <i class="pi pi-volume-up px-2" />
<span class="px-3">Fri 13:07</span> <span class="px-2">Fri 13:07</span>
<i class="pi pi-search px-3" /> <i class="pi pi-search px-2" />
<i class="pi pi-bars px-3" /> <i class="pi pi-bars px-2" />
</template> </template>
</Menubar> </Menubar>
@ -257,15 +257,15 @@ export default {
<Toast position="top-center" group="tc" /> <Toast position="top-center" group="tc" />
<Menubar :model="menubarItems"> <Menubar :model="menubarItems">
<template #start> <template #start>
<i class="pi pi-apple px-3"></i> <i class="pi pi-apple px-2"></i>
</template> </template>
<template #end> <template #end>
<i class="pi pi-video px-3" /> <i class="pi pi-video px-2" />
<i class="pi pi-wifi px-3" /> <i class="pi pi-wifi px-2" />
<i class="pi pi-volume-up px-3" /> <i class="pi pi-volume-up px-2" />
<span class="px-3">Fri 13:07</span> <span class="px-2">Fri 13:07</span>
<i class="pi pi-search px-3" /> <i class="pi pi-search px-2" />
<i class="pi pi-bars px-3" /> <i class="pi pi-bars px-2" />
</template> </template>
</Menubar> </Menubar>
@ -546,11 +546,6 @@ export default {
background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg"); background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
z-index: 1;
}
.dock-demo > .p-dock {
z-index: 1000;
} }
.dock-demo .p-menubar { .dock-demo .p-menubar {
@ -564,10 +559,24 @@ export default {
<div class="card dock-demo"> <div class="card dock-demo">
<Toast position="top-center" group="tc" /> <Toast position="top-center" group="tc" />
<Menubar :model="menubarItems">
<template #start>
<i class="pi pi-apple px-2"></i>
</template>
<template #end>
<i class="pi pi-video px-2" />
<i class="pi pi-wifi px-2" />
<i class="pi pi-volume-up px-2" />
<span class="px-2">Fri 13:07</span>
<i class="pi pi-search px-2" />
<i class="pi pi-bars px-2" />
</template>
</Menubar>
<div class="dock-window dock-advanced"> <div class="dock-window dock-advanced">
<Dock :model="items"> <Dock :model="items">
<template #item="{ item }"> <template #item="{ item }">
<a href="#" class="p-dock-link" v-tooltip.top="item.label" @click="onDockItemClick($event, item)"> <a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
<img :alt="item.label" :src="item.icon" style="width: 100%" /> <img :alt="item.label" :src="item.icon" style="width: 100%" />
</a> </a>
</template> </template>
@ -581,8 +590,7 @@ export default {
<Tree :value="nodes" /> <Tree :value="nodes" />
</Dialog> </Dialog>
<Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" <Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
:circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template> </template>
@ -845,11 +853,7 @@ const commandHandler = (text) => {
background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg"); background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
z-index: 1;
}
.dock-demo > .p-dock {
z-index: 1000;
} }
.dock-demo .p-menubar { .dock-demo .p-menubar {
@ -912,11 +916,6 @@ const commandHandler = (text) => {
background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg'); background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
z-index: 1;
}
.dock-demo > .p-dock {
z-index: 1000;
} }
.dock-demo .p-menubar { .dock-demo .p-menubar {

2
doc/tailwind/SetupDoc.vue
View File

@ -55,7 +55,6 @@ export default {
basic: ` basic: `
import {createApp} from "vue"; import {createApp} from "vue";
import PrimeVue from "primevue/config"; import PrimeVue from "primevue/config";
import Tailwind from "primevue/passthrough/tailwind";
const app = createApp(App); const app = createApp(App);
@ -66,7 +65,6 @@ app.use(PrimeVue, { unstyled: true, pt: {} });
basic: ` basic: `
import {createApp} from "vue"; import {createApp} from "vue";
import PrimeVue from "primevue/config"; import PrimeVue from "primevue/config";
import Tailwind from "primevue/passthrough/tailwind";
const app = createApp(App); const app = createApp(App);

12
layouts/default.vue
View File

@ -42,8 +42,7 @@ export default {
} }
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll'); DomHandler.unblockBodyScroll('blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
this.$toast.removeAllGroups(); this.$toast.removeAllGroups();
} }
} }
@ -61,18 +60,15 @@ export default {
onMenuButtonClick() { onMenuButtonClick() {
if (this.sidebarActive) { if (this.sidebarActive) {
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll'); DomHandler.unblockBodyScroll('blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
} else { } else {
this.sidebarActive = true; this.sidebarActive = true;
DomHandler.addClass(document.body, 'blocked-scroll'); DomHandler.blockBodyScroll('blocked-scroll');
document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
} }
}, },
onMaskClick() { onMaskClick() {
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.removeClass(document.body, 'blocked-scroll'); DomHandler.unblockBodyScroll('blocked-scroll');
document.body.style.removeProperty('--scrollbar-width');
}, },
hideNews(event) { hideNews(event) {
this.$appState.newsActive = false; this.$appState.newsActive = false;

2
package-build.json
View File

@ -1,6 +1,6 @@
{ {
"name": "primevue", "name": "primevue",
"version": "3.35.1-SNAPSHOT", "version": "3.36.1-SNAPSHOT",
"homepage": "https://primevue.org/", "homepage": "https://primevue.org/",
"repository": { "repository": {
"type": "git", "type": "git",

595
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "primevue", "name": "primevue",
"version": "3.35.1", "version": "3.36.1-SNAPSHOT",
"homepage": "https://primevue.org/", "homepage": "https://primevue.org/",
"repository": { "repository": {
"type": "git", "type": "git",
@ -17,8 +17,8 @@
"build:package": "NODE_ENV=production rollup -c && node build-meta && node api-generator/build-api && gulp build-styles", "build:package": "NODE_ENV=production rollup -c && node build-meta && node api-generator/build-api && gulp build-styles",
"build:check": "npm run format:check && npm run security:check", "build:check": "npm run format:check && npm run security:check",
"security:check": "npm audit --production --audit-level high", "security:check": "npm audit --production --audit-level high",
"format": "prettier --write \"**/*.{js,vue,d.ts,json}\" --cache", "format": "prettier --write \"**/*.{js,vue,d.ts}\" --cache",
"format:check": "prettier --check \"**/*.{js,vue,d.ts,json}\"", "format:check": "prettier --check \"**/*.{js,vue,d.ts}\"",
"test:unit": "vitest run", "test:unit": "vitest run",
"test:unit:watch": "vitest watch", "test:unit:watch": "vitest watch",
"test:coverage": "vitest run --coverage", "test:coverage": "vitest run --coverage",

12
public/themes/lara-dark-blue/theme.css
View File

@ -191,12 +191,12 @@
} }
.p-editor-container .p-editor-toolbar { .p-editor-container .p-editor-toolbar {
background: #1f2937; background: #071426;
border-top-right-radius: 6px; border-top-right-radius: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
} }
.p-editor-container .p-editor-toolbar.ql-snow { .p-editor-container .p-editor-toolbar.ql-snow {
border: 1px solid #424b57; border: 1px solid #0b213f;
} }
.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
stroke: rgba(255, 255, 255, 0.6); stroke: rgba(255, 255, 255, 0.6);
@ -227,8 +227,8 @@
fill: rgba(255, 255, 255, 0.87); fill: rgba(255, 255, 255, 0.87);
} }
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
background: #1f2937; background: #071426;
border: 1px solid #424b57; border: 1px solid #0b213f;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 6px; border-radius: 6px;
padding: 0.75rem 0; padding: 0.75rem 0;
@ -248,10 +248,10 @@
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
} }
.p-editor-container .p-editor-content.ql-snow { .p-editor-container .p-editor-content.ql-snow {
border: 1px solid #424b57; border: 1px solid #0b213f;
} }
.p-editor-container .p-editor-content .ql-editor { .p-editor-container .p-editor-content .ql-editor {
background: #111827; background: #040d19;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;

12
public/themes/lara-dark-indigo/theme.css
View File

@ -191,12 +191,12 @@
} }
.p-editor-container .p-editor-toolbar { .p-editor-container .p-editor-toolbar {
background: #1f2937; background: #071426;
border-top-right-radius: 6px; border-top-right-radius: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
} }
.p-editor-container .p-editor-toolbar.ql-snow { .p-editor-container .p-editor-toolbar.ql-snow {
border: 1px solid #424b57; border: 1px solid #0b213f;
} }
.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
stroke: rgba(255, 255, 255, 0.6); stroke: rgba(255, 255, 255, 0.6);
@ -227,8 +227,8 @@
fill: rgba(255, 255, 255, 0.87); fill: rgba(255, 255, 255, 0.87);
} }
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
background: #1f2937; background: #071426;
border: 1px solid #424b57; border: 1px solid #0b213f;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 6px; border-radius: 6px;
padding: 0.75rem 0; padding: 0.75rem 0;
@ -248,10 +248,10 @@
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
} }
.p-editor-container .p-editor-content.ql-snow { .p-editor-container .p-editor-content.ql-snow {
border: 1px solid #424b57; border: 1px solid #0b213f;
} }
.p-editor-container .p-editor-content .ql-editor { .p-editor-container .p-editor-content .ql-editor {
background: #111827; background: #040d19;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;

13
public/themes/lara-dark-purple/theme.css
View File

@ -191,12 +191,12 @@
} }
.p-editor-container .p-editor-toolbar { .p-editor-container .p-editor-toolbar {
background: #1f2937; background: #071426;
border-top-right-radius: 6px; border-top-right-radius: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
} }
.p-editor-container .p-editor-toolbar.ql-snow { .p-editor-container .p-editor-toolbar.ql-snow {
border: 1px solid #424b57; border: 1px solid #0b213f;
} }
.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke { .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
stroke: rgba(255, 255, 255, 0.6); stroke: rgba(255, 255, 255, 0.6);
@ -227,8 +227,8 @@
fill: rgba(255, 255, 255, 0.87); fill: rgba(255, 255, 255, 0.87);
} }
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
background: #1f2937; background: #071426;
border: 1px solid #424b57; border: 1px solid #0b213f;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 6px; border-radius: 6px;
padding: 0.75rem 0; padding: 0.75rem 0;
@ -251,7 +251,10 @@
border: 1px solid #424b57; border: 1px solid #424b57;
} }
.p-editor-container .p-editor-content .ql-editor { .p-editor-container .p-editor-content .ql-editor {
background: #111827; border: 1px solid #0b213f;
}
.p-editor-container .p-editor-content .ql-editor {
background: #040d19;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;

99
public/themes/lara-dark-teal/theme.css
View File

@ -289,6 +289,105 @@
color: #10b981; color: #10b981;
} }
.p-editor-container .p-editor-toolbar {
background: #071426;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.p-editor-container .p-editor-toolbar.ql-snow {
border: 1px solid #0b213f;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
stroke: rgba(255, 255, 255, 0.6);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
fill: rgba(255, 255, 255, 0.6);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
border: 0 none;
color: rgba(255, 255, 255, 0.6);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
color: rgba(255, 255, 255, 0.87);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
stroke: rgba(255, 255, 255, 0.87);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
fill: rgba(255, 255, 255, 0.87);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
color: rgba(255, 255, 255, 0.87);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
stroke: rgba(255, 255, 255, 0.87);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
fill: rgba(255, 255, 255, 0.87);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
background: #071426;
border: 1px solid #0b213f;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 6px;
padding: 0.75rem 0;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
color: rgba(255, 255, 255, 0.87);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
padding: 0.75rem 1.25rem;
}
.p-editor-container .p-editor-content {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-editor-container .p-editor-content.ql-snow {
border: 1px solid #0b213f;
}
.p-editor-container .p-editor-content .ql-editor {
background: #040d19;
color: rgba(255, 255, 255, 0.87);
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-editor-container .ql-snow.ql-toolbar button:hover,
.p-editor-container .ql-snow.ql-toolbar button:focus {
color: rgba(255, 255, 255, 0.87);
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
stroke: rgba(255, 255, 255, 0.87);
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
fill: rgba(255, 255, 255, 0.87);
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
color: #5EEAD4;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
stroke: #5EEAD4;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
fill: #5EEAD4;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
color: #5EEAD4;
}
@layer primevue { @layer primevue {
* { * {
box-sizing: border-box; box-sizing: border-box;

59
public/themes/lara-light-blue/theme.css
View File

@ -191,40 +191,12 @@
} }
.p-editor-container .p-editor-toolbar { .p-editor-container .p-editor-toolbar {
background: #f9fafb;
background: #f8f9fa;
border-top-right-radius: 6px; border-top-right-radius: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
} }
.p-editor-container .p-editor-toolbar.ql-snow { .p-editor-container .p-editor-toolbar.ql-snow {
border: 1px solid #e5e7eb;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
stroke: #6b7280;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
fill: #6b7280;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
border: 0 none;
color: #6b7280;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
color: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
stroke: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
fill: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
color: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
stroke: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
fill: #4b5563;
} }
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
background: #ffffff; background: #ffffff;
@ -233,12 +205,6 @@
border-radius: 6px; border-radius: 6px;
padding: 0.75rem 0; padding: 0.75rem 0;
} }
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
color: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
color: #4b5563;
background: #f3f4f6;
} }
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
@ -247,27 +213,8 @@
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
} }
.p-editor-container .p-editor-content.ql-snow {
border: 1px solid #e5e7eb;
}
.p-editor-container .p-editor-content .ql-editor {
background: #ffffff;
color: #4b5563;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-editor-container .ql-snow.ql-toolbar button:hover, .p-editor-container .ql-snow.ql-toolbar button:hover,
.p-editor-container .ql-snow.ql-toolbar button:focus { .p-editor-container .ql-snow.ql-toolbar button:focus,
color: #4b5563;
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
stroke: #4b5563;
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
fill: #4b5563;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active, .p-editor-container .ql-snow.ql-toolbar button.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {

71
public/themes/lara-light-indigo/theme.css
View File

@ -190,56 +190,6 @@
--primary-900:#282960; --primary-900:#282960;
} }
.p-editor-container .p-editor-toolbar {
background: #f9fafb;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.p-editor-container .p-editor-toolbar.ql-snow {
border: 1px solid #e5e7eb;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
stroke: #6b7280;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
fill: #6b7280;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
border: 0 none;
color: #6b7280;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
color: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
stroke: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
fill: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
color: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
stroke: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
fill: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 6px;
padding: 0.75rem 0;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
color: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
color: #4b5563;
background: #f3f4f6;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
} }
@ -247,27 +197,6 @@
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
} }
.p-editor-container .p-editor-content.ql-snow {
border: 1px solid #e5e7eb;
}
.p-editor-container .p-editor-content .ql-editor {
background: #ffffff;
color: #4b5563;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-editor-container .ql-snow.ql-toolbar button:hover,
.p-editor-container .ql-snow.ql-toolbar button:focus {
color: #4b5563;
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
stroke: #4b5563;
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
fill: #4b5563;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active, .p-editor-container .ql-snow.ql-toolbar button.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {

66
public/themes/lara-light-purple/theme.css
View File

@ -190,42 +190,6 @@
--primary-900:#382562; --primary-900:#382562;
} }
.p-editor-container .p-editor-toolbar {
background: #f9fafb;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.p-editor-container .p-editor-toolbar.ql-snow {
border: 1px solid #e5e7eb;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
stroke: #6b7280;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
fill: #6b7280;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
border: 0 none;
color: #6b7280;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
color: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
stroke: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
fill: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
color: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
stroke: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
fill: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
background: #ffffff; background: #ffffff;
border: 0 none; border: 0 none;
@ -233,13 +197,7 @@
border-radius: 6px; border-radius: 6px;
padding: 0.75rem 0; padding: 0.75rem 0;
} }
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
color: #4b5563;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
color: #4b5563;
background: #f3f4f6;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
} }
@ -247,27 +205,7 @@
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
} }
.p-editor-container .p-editor-content.ql-snow {
border: 1px solid #e5e7eb;
}
.p-editor-container .p-editor-content .ql-editor {
background: #ffffff;
color: #4b5563;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-editor-container .ql-snow.ql-toolbar button:hover,
.p-editor-container .ql-snow.ql-toolbar button:focus {
color: #4b5563;
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
stroke: #4b5563;
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
fill: #4b5563;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active, .p-editor-container .ql-snow.ql-toolbar button.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {

99
public/themes/lara-light-teal/theme.css
View File

@ -289,6 +289,105 @@
color: #10b981; color: #10b981;
} }
.p-editor-container .p-editor-toolbar {
background: #f8f9fa;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.p-editor-container .p-editor-toolbar.ql-snow {
border: 1px solid #dee2e6;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
stroke: #6c757d;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
fill: #6c757d;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
border: 0 none;
color: #6c757d;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
color: #495057;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
stroke: #495057;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
fill: #495057;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
color: #495057;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
stroke: #495057;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
fill: #495057;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
background: #ffffff;
border: 0 none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 6px;
padding: 0.75rem 0;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
color: #495057;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
color: #495057;
background: #e9ecef;
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
padding: 0.75rem 1.25rem;
}
.p-editor-container .p-editor-content {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-editor-container .p-editor-content.ql-snow {
border: 1px solid #dee2e6;
}
.p-editor-container .p-editor-content .ql-editor {
background: #ffffff;
color: #495057;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-editor-container .ql-snow.ql-toolbar button:hover,
.p-editor-container .ql-snow.ql-toolbar button:focus {
color: #495057;
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
stroke: #495057;
}
.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
fill: #495057;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
color: #14B8A6;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
stroke: #14B8A6;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
fill: #14B8A6;
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
color: #14B8A6;
}
@layer primevue { @layer primevue {
* { * {
box-sizing: border-box; box-sizing: border-box;