primevue 3.17.0 → 3.18.0

package/calendar/Calendar.vue

@@ -20,6 +20,7 @@
             :readonly="!manualInput"
             :tabindex="0"
             @input="onInput"
+            @click="onInputClick"
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
@@ -291,7 +292,7 @@
                             <button v-ripple class="p-link" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled">
                                 <span class="pi pi-chevron-up"></span>
                             </button>
-                            <span>{{ pm ? 'PM' : 'AM' }}</span>
+                            <span>{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
                             <button v-ripple class="p-link" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled">
                                 <span class="pi pi-chevron-down"></span>
                             </button>
@@ -309,11 +310,11 @@
 </template>
 
 <script>
-import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils, UniqueComponentId } from 'primevue/utils';
-import OverlayEventBus from 'primevue/overlayeventbus';
 import Button from 'primevue/button';
-import Ripple from 'primevue/ripple';
+import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
+import Ripple from 'primevue/ripple';
+import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'Calendar',
@@ -1347,7 +1348,7 @@ export default {
             }
 
             if (this.hourFormat === '12') {
-                output += date.getHours() > 11 ? ' PM' : ' AM';
+                output += date.getHours() > 11 ? ` ${this.$primevue.config.locale.pm}` : ` ${this.$primevue.config.locale.am}`;
             }
 
             return output;
@@ -1758,7 +1759,8 @@ export default {
                 throw 'Invalid Time';
             }
 
-            this.pm = ampm === 'PM' || ampm === 'pm';
+            //DEBUG: 2952
+            this.pm = ampm === this.$primevue.config.locale.am || ampm === this.$primevue.config.locale.am.toLowerCase();
             let time = this.parseTime(timeString);
 
             value.setHours(time.hour);
@@ -1982,21 +1984,33 @@ export default {
             const cellContent = event.currentTarget;
             const cell = cellContent.parentElement;
 
+            const cellIndex = DomHandler.index(cell);
+
             switch (event.code) {
                 case 'ArrowDown': {
                     cellContent.tabIndex = '-1';
-                    let cellIndex = DomHandler.index(cell);
+
                     let nextRow = cell.parentElement.nextElementSibling;
 
                     if (nextRow) {
-                        let focusCell = nextRow.children[cellIndex].children[0];
+                        let tableRowIndex = DomHandler.index(cell.parentElement);
+                        const tableRows = Array.from(cell.parentElement.parentElement.children);
+                        const nextTableRows = tableRows.slice(tableRowIndex + 1);
+
+                        let hasNextFocusableDate = nextTableRows.find((el) => {
+                            let focusCell = el.children[cellIndex].children[0];
+
+                            return !DomHandler.hasClass(focusCell, 'p-disabled');
+                        });
 
-                        if (DomHandler.hasClass(focusCell, 'p-disabled')) {
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
                             this.navigationState = { backward: false };
                             this.navForward(event);
-                        } else {
-                            nextRow.children[cellIndex].children[0].tabIndex = '0';
-                            nextRow.children[cellIndex].children[0].focus();
                         }
                     } else {
                         this.navigationState = { backward: false };
@@ -2009,18 +2023,27 @@ export default {
 
                 case 'ArrowUp': {
                     cellContent.tabIndex = '-1';
-                    let cellIndex = DomHandler.index(cell);
                     let prevRow = cell.parentElement.previousElementSibling;
 
                     if (prevRow) {
-                        let focusCell = prevRow.children[cellIndex].children[0];
+                        let tableRowIndex = DomHandler.index(cell.parentElement);
+                        const tableRows = Array.from(cell.parentElement.parentElement.children);
+                        const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
+
+                        let hasNextFocusableDate = prevTableRows.find((el) => {
+                            let focusCell = el.children[cellIndex].children[0];
+
+                            return !DomHandler.hasClass(focusCell, 'p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
 
-                        if (DomHandler.hasClass(focusCell, 'p-disabled')) {
-                            this.navigationState = { backward: true };
-                            this.navBackward(event);
-                        } else {
                             focusCell.tabIndex = '0';
                             focusCell.focus();
+                        } else {
+                            this.navigationState = { backward: true };
+                            this.navBackward(event);
                         }
                     } else {
                         this.navigationState = { backward: true };
@@ -2036,13 +2059,22 @@ export default {
                     let prevCell = cell.previousElementSibling;
 
                     if (prevCell) {
-                        let focusCell = prevCell.children[0];
+                        const cells = Array.from(cell.parentElement.children);
+                        const prevCells = cells.slice(0, cellIndex).reverse();
+
+                        let hasNextFocusableDate = prevCells.find((el) => {
+                            let focusCell = el.children[0];
+
+                            return !DomHandler.hasClass(focusCell, 'p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[0];
 
-                        if (DomHandler.hasClass(focusCell, 'p-disabled')) {
-                            this.navigateToMonth(event, true, groupIndex);
-                        } else {
                             focusCell.tabIndex = '0';
                             focusCell.focus();
+                        } else {
+                            this.navigateToMonth(event, true, groupIndex);
                         }
                     } else {
                         this.navigateToMonth(event, true, groupIndex);
@@ -2057,13 +2089,21 @@ export default {
                     let nextCell = cell.nextElementSibling;
 
                     if (nextCell) {
-                        let focusCell = nextCell.children[0];
+                        const cells = Array.from(cell.parentElement.children);
+                        const nextCells = cells.slice(cellIndex + 1);
+                        let hasNextFocusableDate = nextCells.find((el) => {
+                            let focusCell = el.children[0];
+
+                            return !DomHandler.hasClass(focusCell, 'p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[0];
 
-                        if (DomHandler.hasClass(focusCell, 'p-disabled')) {
-                            this.navigateToMonth(event, false, groupIndex);
-                        } else {
                             focusCell.tabIndex = '0';
                             focusCell.focus();
+                        } else {
+                            this.navigateToMonth(event, false, groupIndex);
                         }
                     } else {
                         this.navigateToMonth(event, false, groupIndex);
@@ -2514,6 +2554,11 @@ export default {
 
             this.$emit('input', event);
         },
+        onInputClick() {
+            if (this.showOnFocus && this.isEnabled() && !this.overlayVisible) {
+                this.overlayVisible = true;
+            }
+        },
         onFocus(event) {
             if (this.showOnFocus && this.isEnabled()) {
                 this.overlayVisible = true;