primevue 3.16.2 → 3.17.0

package/README.md

@@ -1,6 +1,7 @@
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/primevue.svg)](https://badge.fury.io/js/primevue)
+[![Actions CI](https://github.com/primefaces/primevue/workflows/NodeJS%20CI/badge.svg)](https://github.com/primefaces/primevue/actions/workflows/node.js.yml)
 [![Discord Chat](https://img.shields.io/discord/557940238991753223.svg?color=7289da&label=chat&logo=discord)](https://discord.gg/gzKFYnpmCY)
 
 [![PrimeVue Hero](https://user-images.githubusercontent.com/686247/138925407-2a7e916d-c674-4fb5-b721-1dd41a8eeebc.jpg)](https://www.primefaces.org/primevue)
@@ -261,4 +262,4 @@ A [sample application](https://github.com/primefaces/primevue-quickstart-nuxt3)
 
 ## Quickstart with TypeScript
 
-Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample [typescript-primevue](https://github.com/primefaces/primevue-typescript-quickstart) application with Vue CLI is available as at github.
+Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample [typescript-primevue](https://github.com/primefaces/primevue-typescript-quickstart) application with Vue CLI is available as at github.

package/accordion/Accordion.d.ts

@@ -16,7 +16,12 @@ export interface AccordionTabOpenEvent {
 /**
  * @extends {AccordionTabOpenEvent}
  */
-export interface AccordionTabCloseEvent extends AccordionTabOpenEvent { }
+export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
+
+/**
+ * @extends AccordionTabOpenEvent
+ */
+export interface AccordionClickEvent extends AccordionTabOpenEvent {}
 
 export interface AccordionProps {
     /**
@@ -39,6 +44,14 @@ export interface AccordionProps {
      * Icon of an expanded tab.
      */
     collapseIcon?: string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * When enabled, the focused tab is activated.
+     */
+    selectOnFocus?: boolean | undefined;
 }
 
 export interface AccordionSlots {
@@ -64,13 +77,18 @@ export declare type AccordionEmits = {
      * @param {AccordionTabCloseEvent} event - Custom tab close event.
      */
     'tab-close': (event: AccordionTabCloseEvent) => void;
-}
+    /**
+     * Callback to invoke when an active tab is clicked.
+     * @param {AccordionClickEvent} event - Custom tab click event.
+     */
+    'tab-click': (event: AccordionClickEvent) => void;
+};
 
-declare class Accordion extends ClassComponent<AccordionProps, AccordionSlots, AccordionEmits> { }
+declare class Accordion extends ClassComponent<AccordionProps, AccordionSlots, AccordionEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Accordion: GlobalComponentConstructor<Accordion>
+        Accordion: GlobalComponentConstructor<Accordion>;
     }
 }
 
@@ -84,7 +102,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Accordion](https://www.primefaces.org/primevue/showcase/#/accordion)
+ * - [Accordion](https://www.primefaces.org/primevue/accordion)
  *
  */
 export default Accordion;

package/accordion/Accordion.vue

@@ -1,17 +1,35 @@
 <template>
     <div class="p-accordion p-component">
-        <div v-for="(tab,i) of tabs" :key="getKey(tab,i)" :class="getTabClass(i)">
-            <div :class="getTabHeaderClass(tab, i)">
-                <a role="tab" class="p-accordion-header-link" @click="onTabClick($event, tab, i)" @keydown="onTabKeydown($event, tab, i)" :tabindex="isTabDisabled(tab) ? null : '0'"
-                    :aria-expanded="isTabActive(i)" :id="getTabAriaId(i) + '_header'" :aria-controls="getTabAriaId(i) + '_content'">
-                    <span :class="isTabActive(i) ? getHeaderCollapseIcon() : getHeaderExpandIcon()"></span>
-                    <span class="p-accordion-header-text" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
-                    <component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
+        <div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i">
+            <div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="getTabProp(tab, 'headerProps')">
+                <a
+                    :id="getTabHeaderActionId(i)"
+                    class="p-accordion-header-link p-accordion-header-action"
+                    :tabindex="getTabProp(tab, 'disabled') ? -1 : tabindex"
+                    role="button"
+                    :aria-disabled="getTabProp(tab, 'disabled')"
+                    :aria-expanded="isTabActive(i)"
+                    :aria-controls="getTabContentId(i)"
+                    @click="onTabClick($event, tab, i)"
+                    @keydown="onTabKeyDown($event, tab, i)"
+                    v-bind="getTabProp(tab, 'headerActionProps')"
+                >
+                    <span :class="getTabHeaderIconClass(i)" aria-hidden="true"></span>
+                    <span v-if="tab.props && tab.props.header" class="p-accordion-header-text">{{ tab.props.header }}</span>
+                    <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
                 </a>
             </div>
             <transition name="p-toggleable-content">
-                <div class="p-toggleable-content" v-if="lazy ? isTabActive(i) : true" v-show="lazy ? true: isTabActive(i)"
-                    role="region" :id="getTabAriaId(i) + '_content'" :aria-labelledby="getTabAriaId(i) + '_header'">
+                <div
+                    v-if="lazy ? isTabActive(i) : true"
+                    v-show="lazy ? true : isTabActive(i)"
+                    :id="getTabContentId(i)"
+                    :style="getTabProp(tab, 'contentStyle')"
+                    :class="getTabContentClass(tab)"
+                    role="region"
+                    :aria-labelledby="getTabHeaderActionId(i)"
+                    v-bind="getTabProp(tab, 'contentProps')"
+                >
                     <div class="p-accordion-content">
                         <component :is="tab"></component>
                     </div>
@@ -22,18 +40,19 @@
 </template>
 
 <script>
-import {UniqueComponentId} from 'primevue/utils';
+import { UniqueComponentId, DomHandler } from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     name: 'Accordion',
-    emits: ['tab-close', 'tab-open', 'update:activeIndex'],
+    emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
     props: {
         multiple: {
             type: Boolean,
             default: false
         },
         activeIndex: {
-            type: [Number,Array],
+            type: [Number, Array],
             default: null
         },
         lazy: {
@@ -47,12 +66,20 @@ export default {
         collapseIcon: {
             type: String,
             default: 'pi-chevron-down'
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
         return {
             d_activeIndex: this.activeIndex
-        }
+        };
     },
     watch: {
         activeIndex(newValue) {
@@ -60,97 +87,187 @@ export default {
         }
     },
     methods: {
-        onTabClick(event, tab, i) {
-            if (!this.isTabDisabled(tab)) {
-                const active = this.isTabActive(i);
+        isAccordionTab(child) {
+            return child.type.name === 'AccordionTab';
+        },
+        isTabActive(index) {
+            return this.multiple ? this.d_activeIndex && this.d_activeIndex.includes(index) : this.d_activeIndex === index;
+        },
+        getTabProp(tab, name) {
+            return tab.props ? tab.props[name] : undefined;
+        },
+        getKey(tab, index) {
+            return this.getTabProp(tab, 'header') || index;
+        },
+        getTabHeaderActionId(index) {
+            return `${this.id}_${index}_header_action`;
+        },
+        getTabContentId(index) {
+            return `${this.id}_${index}_content`;
+        },
+        onTabClick(event, tab, index) {
+            this.changeActiveIndex(event, tab, index);
+            this.$emit('tab-click', { originalEvent: event, index });
+        },
+        onTabKeyDown(event, tab, index) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onTabArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    this.onTabArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    this.onTabHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onTabEndKey(event);
+                    break;
+
+                case 'Enter':
+                case 'Space':
+                    this.onTabEnterKey(event, tab, index);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onTabArrowDownKey(event) {
+            const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement.parentElement);
+
+            nextHeaderAction ? this.changeFocusedTab(event, nextHeaderAction) : this.onTabHomeKey(event);
+            event.preventDefault();
+        },
+        onTabArrowUpKey(event) {
+            const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement.parentElement);
+
+            prevHeaderAction ? this.changeFocusedTab(event, prevHeaderAction) : this.onTabEndKey(event);
+            event.preventDefault();
+        },
+        onTabHomeKey(event) {
+            const firstHeaderAction = this.findFirstHeaderAction();
+
+            this.changeFocusedTab(event, firstHeaderAction);
+            event.preventDefault();
+        },
+        onTabEndKey(event) {
+            const lastHeaderAction = this.findLastHeaderAction();
+
+            this.changeFocusedTab(event, lastHeaderAction);
+            event.preventDefault();
+        },
+        onTabEnterKey(event, tab, index) {
+            this.changeActiveIndex(event, tab, index);
+
+            event.preventDefault();
+        },
+        findNextHeaderAction(tabElement, selfCheck = false) {
+            const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
+            const headerElement = DomHandler.findSingle(nextTabElement, '.p-accordion-header');
+
+            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
+        },
+        findPrevHeaderAction(tabElement, selfCheck = false) {
+            const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+            const headerElement = DomHandler.findSingle(prevTabElement, '.p-accordion-header');
+
+            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
+        },
+        findFirstHeaderAction() {
+            return this.findNextHeaderAction(this.$el.firstElementChild, true);
+        },
+        findLastHeaderAction() {
+            return this.findPrevHeaderAction(this.$el.lastElementChild, true);
+        },
+        changeActiveIndex(event, tab, index) {
+            if (!this.getTabProp(tab, 'disabled')) {
+                const active = this.isTabActive(index);
                 const eventName = active ? 'tab-close' : 'tab-open';
 
                 if (this.multiple) {
                     if (active) {
-                        this.d_activeIndex = this.d_activeIndex.filter(index => index !== i);
+                        this.d_activeIndex = this.d_activeIndex.filter((i) => i !== index);
+                    } else {
+                        if (this.d_activeIndex) this.d_activeIndex.push(index);
+                        else this.d_activeIndex = [index];
                     }
-                    else {
-                        if (this.d_activeIndex)
-                            this.d_activeIndex.push(i);
-                        else
-                            this.d_activeIndex = [i];
-                    }
-                }
-                else {
-                    this.d_activeIndex = this.d_activeIndex === i ? null : i;
+                } else {
+                    this.d_activeIndex = this.d_activeIndex === index ? null : index;
                 }
 
                 this.$emit('update:activeIndex', this.d_activeIndex);
-
-                this.$emit(eventName, {
-                    originalEvent: event,
-                    index: i
-                });
+                this.$emit(eventName, { originalEvent: event, index });
             }
         },
-        onTabKeydown(event, tab, i) {
-            if (event.which === 13) {
-                this.onTabClick(event, tab, i);
+        changeFocusedTab(event, element) {
+            if (element) {
+                DomHandler.focus(element);
+
+                if (this.selectOnFocus) {
+                    const index = parseInt(element.parentElement.parentElement.dataset.index, 10);
+                    const tab = this.tabs[index];
+
+                    this.changeActiveIndex(event, tab, index);
+                }
             }
         },
-        isTabActive(index) {
-            if (this.multiple)
-                return this.d_activeIndex && this.d_activeIndex.includes(index);
-            else
-                return index === this.d_activeIndex;
-        },
-        getKey(tab, i) {
-            return (tab.props && tab.props.header) ? tab.props.header : i;
-        },
-        isTabDisabled(tab) {
-            return tab.props && tab.props.disabled;
-        },
         getTabClass(i) {
-            return ['p-accordion-tab', {'p-accordion-tab-active': this.isTabActive(i)}];
+            return [
+                'p-accordion-tab',
+                {
+                    'p-accordion-tab-active': this.isTabActive(i)
+                }
+            ];
         },
         getTabHeaderClass(tab, i) {
-            return ['p-accordion-header', {'p-highlight': this.isTabActive(i), 'p-disabled': this.isTabDisabled(tab)}];
-        },
-        getTabAriaId(i) {
-            return this.ariaId + '_' + i;
-        },
-        getHeaderCollapseIcon() {
-            return ['p-accordion-toggle-icon pi', this.collapseIcon];
+            return [
+                'p-accordion-header',
+                this.getTabProp(tab, 'headerClass'),
+                {
+                    'p-highlight': this.isTabActive(i),
+                    'p-disabled': this.getTabProp(tab, 'disabled')
+                }
+            ];
         },
-        getHeaderExpandIcon() {
-            return ['p-accordion-toggle-icon pi', this.expandIcon];
+        getTabHeaderIconClass(i) {
+            return ['p-accordion-toggle-icon pi', this.isTabActive(i) ? this.collapseIcon : this.expandIcon];
         },
-        isAccordionTab(child) {
-            return child.type.name === 'AccordionTab';
+        getTabContentClass(tab) {
+            return ['p-toggleable-content', this.getTabProp(tab, 'contentClass')];
         }
     },
     computed: {
         tabs() {
-            const tabs = []
-            this.$slots.default().forEach(child => {
-                    if (this.isAccordionTab(child)) {
-                        tabs.push(child);
-                    }
-                    else if (child.children && child.children instanceof Array) {
-                        child.children.forEach(nestedChild => {
-                            if (this.isAccordionTab(nestedChild)) {
-                                tabs.push(nestedChild)
-                            }
-                        });
-                    }
+            return this.$slots.default().reduce((tabs, child) => {
+                if (this.isAccordionTab(child)) {
+                    tabs.push(child);
+                } else if (child.children && child.children instanceof Array) {
+                    child.children.forEach((nestedChild) => {
+                        if (this.isAccordionTab(nestedChild)) {
+                            tabs.push(nestedChild);
+                        }
+                    });
                 }
-            )
-            return tabs;
+
+                return tabs;
+            }, []);
         },
-        ariaId() {
-            return UniqueComponentId();
+        id() {
+            return this.$attrs.id || UniqueComponentId();
         }
+    },
+    directives: {
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>
-.p-accordion-header-link {
+.p-accordion-header-action {
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -159,7 +276,7 @@ export default {
     text-decoration: none;
 }
 
-.p-accordion-header-link:focus {
+.p-accordion-header-action:focus {
     z-index: 1;
 }