primevue/accordion/accordion.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue = this.primevue || {};
this.primevue.accordion = (function (BaseComponent, ChevronDownIcon, ChevronRightIcon, Ripple, utils, vue) {
    'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
    var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
    var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);

    var script = {
        name: 'Accordion',
        extends: BaseComponent__default["default"],
        emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
        props: {
            multiple: {
                type: Boolean,
                default: false
            },
            activeIndex: {
                type: [Number, Array],
                default: null
            },
            lazy: {
                type: Boolean,
                default: false
            },
            expandIcon: {
                type: String,
                default: undefined
            },
            collapseIcon: {
                type: String,
                default: undefined
            },
            tabindex: {
                type: Number,
                default: 0
            },
            selectOnFocus: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                id: this.$attrs.id,
                d_activeIndex: this.activeIndex
            };
        },
        watch: {
            '$attrs.id': function (newValue) {
                this.id = newValue || utils.UniqueComponentId();
            },
            activeIndex(newValue) {
                this.d_activeIndex = newValue;
            }
        },
        mounted() {
            this.id = this.id || utils.UniqueComponentId();
        },
        methods: {
            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`;
            },
            getTabPT(tab, key) {
                return this.ptmo(this.getTabProp(tab, 'pt'), key, {
                    props: tab.props,
                    parent: {
                        props: this.$props,
                        state: this.$data
                    }
                });
            },
            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;
                }
            },
            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 = utils.DomHandler.findSingle(nextTabElement, '.p-accordion-header');

                return headerElement ? (utils.DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : utils.DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
            },
            findPrevHeaderAction(tabElement, selfCheck = false) {
                const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
                const headerElement = utils.DomHandler.findSingle(prevTabElement, '.p-accordion-header');

                return headerElement ? (utils.DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : utils.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((i) => i !== index);
                        } else {
                            if (this.d_activeIndex) this.d_activeIndex.push(index);
                            else this.d_activeIndex = [index];
                        }
                    } else {
                        this.d_activeIndex = this.d_activeIndex === index ? null : index;
                    }

                    this.$emit('update:activeIndex', this.d_activeIndex);
                    this.$emit(eventName, { originalEvent: event, index });
                }
            },
            changeFocusedTab(event, element) {
                if (element) {
                    utils.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);
                    }
                }
            },
            getTabClass(i) {
                return [
                    'p-accordion-tab',
                    {
                        'p-accordion-tab-active': this.isTabActive(i)
                    }
                ];
            },
            getTabHeaderClass(tab, i) {
                return [
                    'p-accordion-header',
                    this.getTabProp(tab, 'headerClass'),
                    {
                        'p-highlight': this.isTabActive(i),
                        'p-disabled': this.getTabProp(tab, 'disabled')
                    }
                ];
            },
            getTabContentClass(tab) {
                return ['p-toggleable-content', this.getTabProp(tab, 'contentClass')];
            }
        },
        computed: {
            tabs() {
                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;
                }, []);
            }
        },
        components: {
            ChevronDownIcon: ChevronDownIcon__default["default"],
            ChevronRightIcon: ChevronRightIcon__default["default"]
        },
        directives: {
            ripple: Ripple__default["default"]
        }
    };

    const _hoisted_1 = ["data-index"];
    const _hoisted_2 = ["id", "tabindex", "aria-disabled", "aria-expanded", "aria-controls", "onClick", "onKeydown"];
    const _hoisted_3 = ["id", "aria-labelledby"];

    function render(_ctx, _cache, $props, $setup, $data, $options) {
      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "p-accordion p-component" }, _ctx.ptm('root')), [
        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.tabs, (tab, i) => {
          return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
            key: $options.getKey(tab, i),
            class: $options.getTabClass(i),
            "data-index": i
          }, $options.getTabPT(tab, 'root')), [
            vue.createElementVNode("div", vue.mergeProps({
              style: $options.getTabProp(tab, 'headerStyle'),
              class: $options.getTabHeaderClass(tab, i)
            }, { ...$options.getTabProp(tab, 'headerProps'), ...$options.getTabPT(tab, 'header') }), [
              vue.createElementVNode("a", vue.mergeProps({
                id: $options.getTabHeaderActionId(i),
                class: "p-accordion-header-link p-accordion-header-action",
                tabindex: $options.getTabProp(tab, 'disabled') ? -1 : $props.tabindex,
                role: "button",
                "aria-disabled": $options.getTabProp(tab, 'disabled'),
                "aria-expanded": $options.isTabActive(i),
                "aria-controls": $options.getTabContentId(i),
                onClick: $event => ($options.onTabClick($event, tab, i)),
                onKeydown: $event => ($options.onTabKeyDown($event, tab, i))
              }, { ...$options.getTabProp(tab, 'headeractionprops'), ...$options.getTabPT(tab, 'headeraction') }), [
                (tab.children && tab.children.headericon)
                  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab.children.headericon), {
                      key: 0,
                      isTabActive: $options.isTabActive(i),
                      index: i
                    }, null, 8, ["isTabActive", "index"]))
                  : ($options.isTabActive(i))
                    ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.collapseIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
                        key: 1,
                        class: ['p-accordion-toggle-icon', $props.collapseIcon],
                        "aria-hidden": "true"
                      }, $options.getTabPT(tab, 'headericon')), null, 16, ["class"]))
                    : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.expandIcon ? 'span' : 'ChevronRightIcon'), vue.mergeProps({
                        key: 2,
                        class: ['p-accordion-toggle-icon', $props.expandIcon],
                        "aria-hidden": "true"
                      }, $options.getTabPT(tab, 'headericon')), null, 16, ["class"])),
                (tab.props && tab.props.header)
                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                      key: 3,
                      class: "p-accordion-header-text"
                    }, $options.getTabPT(tab, 'headertitle')), vue.toDisplayString(tab.props.header), 17))
                  : vue.createCommentVNode("", true),
                (tab.children && tab.children.header)
                  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab.children.header), { key: 4 }))
                  : vue.createCommentVNode("", true)
              ], 16, _hoisted_2)
            ], 16),
            vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
              default: vue.withCtx(() => [
                ($props.lazy ? $options.isTabActive(i) : true)
                  ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                      key: 0,
                      id: $options.getTabContentId(i),
                      style: $options.getTabProp(tab, 'contentStyle'),
                      class: $options.getTabContentClass(tab),
                      role: "region",
                      "aria-labelledby": $options.getTabHeaderActionId(i)
                    }, { ...$options.getTabProp(tab, 'contentProps'), ...$options.getTabPT(tab, 'toggleablecontent') }), [
                      vue.createElementVNode("div", vue.mergeProps({ class: "p-accordion-content" }, $options.getTabPT(tab, 'content')), [
                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab)))
                      ], 16)
                    ], 16, _hoisted_3)), [
                      [vue.vShow, $props.lazy ? true : $options.isTabActive(i)]
                    ])
                  : vue.createCommentVNode("", true)
              ]),
              _: 2
            }, 1024)
          ], 16, _hoisted_1))
        }), 128))
      ], 16))
    }

    function styleInject(css, ref) {
      if ( ref === void 0 ) ref = {};
      var insertAt = ref.insertAt;

      if (!css || typeof document === 'undefined') { return; }

      var head = document.head || document.getElementsByTagName('head')[0];
      var style = document.createElement('style');
      style.type = 'text/css';

      if (insertAt === 'top') {
        if (head.firstChild) {
          head.insertBefore(style, head.firstChild);
        } else {
          head.appendChild(style);
        }
      } else {
        head.appendChild(style);
      }

      if (style.styleSheet) {
        style.styleSheet.cssText = css;
      } else {
        style.appendChild(document.createTextNode(css));
      }
    }

    var css_248z = "\n.p-accordion-header-action {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    user-select: none;\n    position: relative;\n    text-decoration: none;\n}\n.p-accordion-header-action:focus {\n    z-index: 1;\n}\n.p-accordion-header-text {\n    line-height: 1;\n}\n";
    styleInject(css_248z);

    script.render = render;

    return script;

})(primevue.basecomponent, primevue.icons.chevrondown, primevue.icons.chevronright, primevue.ripple, primevue.utils, Vue);