Merge branch 'primefaces:master' into master

primefaces · Aug 1, 2024 · 07c2dbb · 07c2dbb
2 parents 4b7c015 + 95b5af1
commit 07c2dbb
Show file tree

Hide file tree

Showing 23 changed files with 303 additions and 223 deletions.
diff --git a/.github/workflows/pr-checker.yml b/.github/workflows/pr-checker.yml
@@ -42,10 +42,10 @@ jobs:
               run: |
                   pnpm run format:check
 
-            - name: Unit Test
-              id: unitTest
-              run: |
-                  pnpm run test:unit
+            # - name: Unit Test
+            #   id: unitTest
+            #   run: |
+            #       pnpm run test:unit
 
             - name: Lint
               run: |
@@ -62,12 +62,12 @@ jobs:
                   message: |
                       Thanks a lot for your contribution! But, PR does not seem to fit our code format standards. Please run the 'npm run format' command and commit the changes.
 
-            - name: Add Unit Test Fail Comment
-              if: always() && steps.unitTest.outcome == 'failure'
-              uses: thollander/actions-comment-pull-request@v1
-              with:
-                  message: |
-                      Thanks a lot for your contribution! But, Unit tests failed. You can check the unit tests with the command 'npm run test:unit' and commit the changes.
+            # - name: Add Unit Test Fail Comment
+            #   if: always() && steps.unitTest.outcome == 'failure'
+            #   uses: thollander/actions-comment-pull-request@v1
+            #   with:
+            #       message: |
+            #           Thanks a lot for your contribution! But, Unit tests failed. You can check the unit tests with the command 'npm run test:unit' and commit the changes.
 
             - name: Add Label
               if: ${{ failure() }}

diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json
@@ -32301,6 +32301,14 @@
                             "default": "",
                             "description": "Mask pattern."
                         },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the element."
+                        },
                         {
                             "name": "class",
                             "optional": true,
@@ -32349,6 +32357,14 @@
                             "default": "false",
                             "description": "When present, it specifies that the component should have invalid state style."
                         },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the input element."
+                        },
                         {
                             "name": "variant",
                             "optional": true,
@@ -66396,7 +66412,7 @@
                             "optional": true,
                             "readonly": false,
                             "type": "boolean",
-                            "default": "false",
+                            "default": "null",
                             "description": "Whether the node is selectable when selection mode is enabled."
                         },
                         {

diff --git a/apps/showcase/doc/dock/AdvancedDoc.vue b/apps/showcase/doc/dock/AdvancedDoc.vue
@@ -28,7 +28,7 @@
             </Dock>
 
             <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
-                <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}', 'random' and 'clear')" prompt="primevue $" />
+                <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
             </Dialog>
 
             <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
@@ -280,7 +280,7 @@ export default {
             </Dock>
 
             <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
-                <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}', 'random' and 'clear')" prompt="primevue $" />
+                <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
             </Dialog>
 
             <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
@@ -585,7 +585,7 @@ export default {
                 </Dock>
 
                 <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
-                    <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}', 'random' and 'clear')" prompt="primevue $" />
+                    <Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
                 </Dialog>
 
                 <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">

diff --git a/apps/showcase/package.json b/apps/showcase/package.json
@@ -72,4 +72,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
diff --git a/package.json b/package.json
@@ -35,7 +35,8 @@
         "format": "prettier --write \"**/*.{vue,js,mjs,ts,d.ts}\" --cache",
         "format:check": "prettier --check \"**/*.{vue,js,mjs,ts,d.ts}\"",
         "lint": "eslint --ext \".vue,.js,.mjs,.ts\" --ignore-path .gitignore . --cache",
-        "lint:fix": "eslint --fix --ext \".vue,.js,.mjs,.ts\" --ignore-path .gitignore ."
+        "lint:fix": "eslint --fix --ext \".vue,.js,.mjs,.ts\" --ignore-path .gitignore .",
+        "test:unit": "pnpm --filter primevue test:unit"
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.18.9",

diff --git a/packages/core/src/config/PrimeVue.js b/packages/core/src/config/PrimeVue.js
@@ -3,6 +3,7 @@ import { FilterMatchMode } from '@primevue/core/api';
 import BaseStyle from '@primevue/core/base/style';
 import PrimeVueService from '@primevue/core/service';
 import { inject, reactive, ref, watch } from 'vue';
+import { mergeKeys } from '@primeuix/utils';
 
 export const defaultOptions = {
     ripple: false,
@@ -266,7 +267,7 @@ export function setupConfig(app, PrimeVue) {
 
 export default {
     install: (app, options) => {
-        const configOptions = { ...defaultOptions, ...options };
+        const configOptions = mergeKeys(defaultOptions, options);
 
         setup(app, configOptions);
     }

diff --git a/packages/primevue/package.json b/packages/primevue/package.json
@@ -321,7 +321,14 @@
         "build:api": "node ./scripts/build-api.js",
         "build:prebuild": "node ./scripts/prebuild.mjs",
         "build:postbuild": "node ./scripts/postbuild.mjs",
-        "dev:link": "pnpm link --global && npm link"
+        "dev:link": "pnpm link --global && npm link",
+        "test:unit": "vitest run",
+        "test:unit:watch": "vitest watch",
+        "test:coverage": "vitest run --coverage"
+    },
+    "devDependencies": {
+        "@vue/test-utils": "^2.0.0",
+        "vitest": "^0.29.8"
     },
     "dependencies": {
         "@primeuix/styled": "^0.0.5",
@@ -332,4 +339,4 @@
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
diff --git a/packages/primevue/src/config/Config.spec.js b/packages/primevue/src/config/Config.spec.js
@@ -0,0 +1,21 @@
+import { defaultOptions } from '@primevue/core/config';
+import { config } from '@vue/test-utils';
+
+config.global.mocks['$primevue'] = {
+    config: defaultOptions
+};
+
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn()
+    }))
+});
+
+describe('PrimeVue.vue', () => {
+    it('should exist', async () => {});
+});
diff --git a/packages/primevue/src/confirmpopup/ConfirmPopup.vue b/packages/primevue/src/confirmpopup/ConfirmPopup.vue
@@ -78,7 +78,8 @@ export default {
             visible: false,
             confirmation: null,
             autoFocusAccept: null,
-            autoFocusReject: null
+            autoFocusReject: null,
+            target: null
         };
     },
     target: null,
@@ -175,6 +176,8 @@ export default {
             this.autoFocusAccept = this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept' ? true : false;
             this.autoFocusReject = this.confirmation.defaultFocus === 'reject' ? true : false;
 
+            this.target = document.activeElement;
+
             this.bindOutsideClickListener();
             this.bindScrollListener();
             this.bindResizeListener();
@@ -188,6 +191,9 @@ export default {
             this.autoFocusAccept = null;
             this.autoFocusReject = null;
 
+            DomHandler.focus(this.target);
+            this.target = null;
+
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
             this.unbindResizeListener();
@@ -206,7 +212,7 @@ export default {
                 arrowLeft = targetOffset.left - containerOffset.left;
             }
 
-            this.container.style.setProperty($dt('overlay.arrow.left').name, `${arrowLeft}px`);
+            this.container.style.setProperty($dt('confirmpopup.arrow.left').name, `${arrowLeft}px`);
 
             if (containerOffset.top < targetOffset.top) {
                 this.container.setAttribute('data-p-confirmpopup-flipped', 'true');

diff --git a/packages/primevue/src/confirmpopup/style/ConfirmPopupStyle.js b/packages/primevue/src/confirmpopup/style/ConfirmPopupStyle.js
@@ -67,7 +67,7 @@ const theme = ({ dt }) => `
 .p-confirmpopup:after,
 .p-confirmpopup:before {
     bottom: 100%;
-    left: ${dt('confirmpopup.arrow.offset')};
+    left: calc(${dt('confirmpopup.arrow.offset')} + ${dt('confirmpopup.arrow.left')});
     content: " ";
     height: 0;
     width: 0;

diff --git a/packages/primevue/src/contextmenu/ContextMenu.vue b/packages/primevue/src/contextmenu/ContextMenu.vue
@@ -324,7 +324,7 @@ export default {
         onEnterKey(event) {
             if (this.focusedItemInfo.index !== -1) {
                 const element = findSingle(this.list, `li[id="${`${this.focusedItemIdx}`}"]`);
-                const anchorElement = element && findSingle(element, 'a[data-pc-section="itemlink"]');
+                const anchorElement = element && findSingle(element, '[data-pc-section="itemlink"]');
 
                 anchorElement ? anchorElement.click() : element && element.click();
                 const processedItem = this.visibleItems[this.focusedItemInfo.index];

diff --git a/packages/primevue/src/datepicker/DatePicker.vue b/packages/primevue/src/datepicker/DatePicker.vue
@@ -32,7 +32,7 @@
             @keydown="onKeyDown"
             :pt="ptm('pcInput')"
         />
-        <slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
+        <slot v-if="showIcon && iconDisplay === 'button' && !inline" name="dropdownbutton">
             <button
                 :class="cx('dropdown')"
                 :disabled="disabled"
@@ -49,7 +49,7 @@
                 </slot>
             </button>
         </slot>
-        <template v-else-if="showIcon && iconDisplay === 'input'">
+        <template v-else-if="showIcon && iconDisplay === 'input' && !inline">
             <span v-if="$slots.inputicon || showIcon" :class="cx('inputIconContainer')" v-bind="ptm('inputIconContainer')">
                 <slot name="inputicon" :class="cx('inputIcon')" :clickCallback="onButtonClick">
                     <component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
@@ -1735,7 +1735,7 @@ export default {
                 }
             } else if (value.every((v) => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false))) {
                 if (this.isRangeSelection()) {
-                    isValid = value.length > 1 && value[1] > value[0] ? true : false;
+                    isValid = value.length > 1 && value[1] >= value[0];
                 }
             }
 
@@ -2516,7 +2516,7 @@ export default {
                 cell = findSingle(this.overlay, 'span[data-p-selected="true"]');
 
                 if (!cell) {
-                    let todayCell = findSingle(this.overlay, 'td.p-datepicker-today span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+                    let todayCell = findSingle(this.overlay, 'td[data-p-today="true"] span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
 
                     if (todayCell) cell = todayCell;
                     else cell = findSingle(this.overlay, '.p-datepicker-calendar td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
@@ -2645,6 +2645,8 @@ export default {
                         /* NoOp */
                     }
                 }
+
+                this.$emit('keydown', event);
             }
         },
         overlayRef(el) {

diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js
@@ -418,7 +418,7 @@ const classes = {
         let selectedDayClass = '';
 
         if (instance.isRangeSelection() && instance.isSelected(date) && date.selectable) {
-            selectedDayClass = date.day === props.modelValue[0].getDate() || date.day === props.modelValue[1].getDate() ? 'p-datepicker-day-selected' : 'p-datepicker-day-selected-range';
+            selectedDayClass = instance.isDateEquals(props.modelValue[0], date) || instance.isDateEquals(props.modelValue[1], date) ? 'p-datepicker-day-selected' : 'p-datepicker-day-selected-range';
         }
 
         return [

diff --git a/packages/primevue/src/dialog/Dialog.vue b/packages/primevue/src/dialog/Dialog.vue
@@ -1,6 +1,6 @@
 <template>
     <Portal :appendTo="appendTo">
-        <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @click="onMaskClick" v-bind="ptm('mask')">
+        <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @mousedown="onMaskMouseDown" @mouseup="onMaskMouseUp" v-bind="ptm('mask')">
             <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
                 <div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="ptmi('root')">
                     <slot v-if="$slots.container" name="container" :closeCallback="close" :maximizeCallback="(event) => maximize(event)"></slot>
@@ -91,7 +91,8 @@ export default {
             containerVisible: this.visible,
             maximized: false,
             focusableMax: null,
-            focusableClose: null
+            focusableClose: null,
+            target: null
         };
     },
     watch: {
@@ -113,6 +114,7 @@ export default {
     documentDragEndListener: null,
     lastPageX: null,
     lastPageY: null,
+    maskMouseDownTarget: null,
     updated() {
         if (this.visible) {
             this.containerVisible = this.visible;
@@ -146,6 +148,7 @@ export default {
         },
         onEnter() {
             this.$emit('show');
+            this.target = document.activeElement;
             this.focus();
             this.enableDocumentSettings();
             this.bindGlobalListeners();
@@ -161,6 +164,8 @@ export default {
         },
         onLeave() {
             this.$emit('hide');
+            DomHandler.focus(this.target);
+            this.target = null;
             this.focusableClose = null;
             this.focusableMax = null;
         },
@@ -174,8 +179,11 @@ export default {
             this.unbindGlobalListeners();
             this.$emit('after-hide');
         },
-        onMaskClick(event) {
-            if (this.dismissableMask && this.modal && this.mask === event.target) {
+        onMaskMouseDown(event) {
+            this.maskMouseDownTarget = event.target;
+        },
+        onMaskMouseUp() {
+            if (this.dismissableMask && this.modal && this.mask === this.maskMouseDownTarget) {
                 this.close();
             }
         },

diff --git a/packages/primevue/src/drawer/Drawer.vue b/packages/primevue/src/drawer/Drawer.vue
@@ -31,7 +31,7 @@
                         <div :ref="contentRef" :class="cx('content')" v-bind="ptm('content')">
                             <slot></slot>
                         </div>
-                        <div :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
+                        <div v-if="$slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
                             <slot name="footer"> </slot>
                         </div>
                     </template>
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { addClass, focus, blockBodyScroll, unblockBodyScroll } from '@primeuix/utils/dom';
+import { addClass, blockBodyScroll, focus, unblockBodyScroll } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
 import TimesIcon from '@primevue/icons/times';
 import Button from 'primevue/button';

diff --git a/packages/primevue/src/inputmask/BaseInputMask.vue b/packages/primevue/src/inputmask/BaseInputMask.vue
@@ -11,6 +11,10 @@ export default {
             type: String,
             default: '_'
         },
+        id: {
+            type: String,
+            default: null
+        },
         class: {
             type: [String, Object],
             default: null
@@ -43,6 +47,10 @@ export default {
             type: Boolean,
             default: false
         },
+        name: {
+            type: String,
+            default: null
+        },
         variant: {
             type: String,
             default: null