Merge branch 'master' into master

.github/workflows/generate_api_doc.yml

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

CHANGELOG.md

@@ -1,5 +1,53 @@
 # 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)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/3.34.1...3.35.0)

api-generator/build-apidoc.js

@@ -352,7 +352,17 @@ if (project) {
                                 readonly: prop.flags.isReadonly,
                                 type: prop.type.toString(),
                                 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
                             });
                         });

api-generator/components/selectbutton.js

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

components/doc/DocApiTable.vue

@@ -59,7 +59,10 @@
                                 {{ v }}
                             </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>
                     </td>
                 </tr>

components/doc/codeeditor/templates.js

@@ -2,7 +2,7 @@ import pkg from '../../../package.json';
 import { services } from './services';
 
 const PrimeVue = {
-    version: '^3.35.0',
+    version: '^3.36.0',
     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.'
 };

components/lib/api/FilterService.js

@@ -4,10 +4,19 @@ const FilterService = {
     filter(value, fields, filterValue, filterMatchMode, filterLocale) {
         let filteredItems = [];
 
-        if (value) {
-            for (let item of value) {
-                for (let field of fields) {
-                    let fieldValue = ObjectUtils.resolveFieldData(item, field);
+        if (!value) {
+            return filteredItems;
+        }
+
+        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)) {
                         filteredItems.push(item);

components/lib/badgedirective/BadgeDirective.js

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

components/lib/basedirective/BaseDirective.js

@@ -4,6 +4,7 @@ import { mergeProps } from 'vue';
 
 const BaseDirective = {
     _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 = {}) => {
         const fKeys = ObjectUtils.toFlatCase(key).split('.');
         const fKey = fKeys.shift();
@@ -23,7 +24,7 @@ const BaseDirective = {
 
         const datasetPrefix = 'data-pc-';
         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 datasets = {
             ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }),
@@ -70,7 +71,7 @@ const BaseDirective = {
     },
     _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
         const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
-        const config = binding?.instance?.$primevue?.config;
+        const config = BaseDirective._getConfig(binding, vnode);
         const instance = el?.$instance;
         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}`);
@@ -83,7 +84,7 @@ const BaseDirective = {
         const handleHook = (hook, el, binding, vnode, prevVnode) => {
             el._$instances = el._$instances || {};
 
-            const config = binding?.instance?.$primevue?.config;
+            const config = BaseDirective._getConfig(binding, vnode);
             const $prevInstance = el._$instances[name] || {};
             const $options = ObjectUtils.isEmpty($prevInstance) ? { ...options, ...options?.methods } : {};
 
@@ -97,12 +98,12 @@ const BaseDirective = {
                 $style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style },
                 $config: config,
                 /* computed instance variables */
-                defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
-                isUnstyled: el.unstyled !== undefined ? el.unstyled : config?.unstyled,
+                defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
+                isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
                 /* instance's methods */
                 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),
-                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),
                 ...$options
             };
@@ -117,10 +118,10 @@ const BaseDirective = {
                 handleHook('created', 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 });
-                !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);
             },
             mounted: (el, binding, vnode, prevVnode) => {

components/lib/blockui/BlockUI.vue

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