primevue 3.14.0 → 3.16.1

package/accordion/Accordion.d.ts

@@ -0,0 +1,90 @@
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export interface AccordionTabOpenEvent {
+    /**
+     * Browser mouse event.
+     * @type {MouseEvent}
+     */
+    originalEvent: MouseEvent;
+    /**
+     * Opened tab index.
+     */
+    index: number;
+}
+
+/**
+ * @extends {AccordionTabOpenEvent}
+ */
+export interface AccordionTabCloseEvent extends AccordionTabOpenEvent { }
+
+export interface AccordionProps {
+    /**
+     * When enabled, multiple tabs can be activated at the same time.
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Index of the active tab or an array of indexes in multiple mode.
+     */
+    activeIndex?: number | number[] | undefined;
+    /**
+     * When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
+     */
+    lazy?: boolean | undefined;
+    /**
+     * Icon of a collapsed tab.
+     */
+    expandIcon?: string | undefined;
+    /**
+     * Icon of an expanded tab.
+     */
+    collapseIcon?: string | undefined;
+}
+
+export interface AccordionSlots {
+    /**
+     * Default slot to detect AccordionTab components.
+     */
+    default: () => VNode[];
+}
+
+export declare type AccordionEmits = {
+    /**
+     * Emitted when the active tab changes.
+     * @param {number | undefined} value - Index of new active tab.
+     */
+    'update:activeIndex': (value: number | undefined) => void;
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @param {AccordionTabOpenEvent} event - Custom tab open event.
+     */
+    'tab-open': (event: AccordionTabOpenEvent) => void;
+    /**
+     * Callback to invoke when an active tab is collapsed by clicking on the header.
+     * @param {AccordionTabCloseEvent} event - Custom tab close event.
+     */
+    'tab-close': (event: AccordionTabCloseEvent) => void;
+}
+
+declare class Accordion extends ClassComponent<AccordionProps, AccordionSlots, AccordionEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Accordion: GlobalComponentConstructor<Accordion>
+    }
+}
+
+/**
+ *
+ * Accordion groups a collection of contents in tabs.
+ *
+ * Helper Components:
+ *
+ * - AccordionTab
+ *
+ * Demos:
+ *
+ * - [Accordion](https://www.primefaces.org/primevue/showcase/#/accordion)
+ *
+ */
+export default Accordion;

package/accordion/Accordion.vue

@@ -0,0 +1,169 @@
+<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>
+                </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 class="p-accordion-content">
+                        <component :is="tab"></component>
+                    </div>
+                </div>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script>
+import {UniqueComponentId} from 'primevue/utils';
+
+export default {
+    name: 'Accordion',
+    emits: ['tab-close', 'tab-open', 'update:activeIndex'],
+    props: {
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        activeIndex: {
+            type: [Number,Array],
+            default: null
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        },
+        expandIcon: {
+            type: String,
+            default: 'pi-chevron-right'
+        },
+        collapseIcon: {
+            type: String,
+            default: 'pi-chevron-down'
+        }
+    },
+    data() {
+        return {
+            d_activeIndex: this.activeIndex
+        }
+    },
+    watch: {
+        activeIndex(newValue) {
+            this.d_activeIndex = newValue;
+        }
+    },
+    methods: {
+        onTabClick(event, tab, i) {
+            if (!this.isTabDisabled(tab)) {
+                const active = this.isTabActive(i);
+                const eventName = active ? 'tab-close' : 'tab-open';
+
+                if (this.multiple) {
+                    if (active) {
+                        this.d_activeIndex = this.d_activeIndex.filter(index => index !== i);
+                    }
+                    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;
+                }
+
+                this.$emit('update:activeIndex', this.d_activeIndex);
+
+                this.$emit(eventName, {
+                    originalEvent: event,
+                    index: i
+                });
+            }
+        },
+        onTabKeydown(event, tab, i) {
+            if (event.which === 13) {
+                this.onTabClick(event, tab, i);
+            }
+        },
+        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)}];
+        },
+        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];
+        },
+        getHeaderExpandIcon() {
+            return ['p-accordion-toggle-icon pi', this.expandIcon];
+        },
+        isAccordionTab(child) {
+            return child.type.name === 'AccordionTab';
+        }
+    },
+    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 tabs;
+        },
+        ariaId() {
+            return UniqueComponentId();
+        }
+    }
+}
+</script>
+
+<style>
+.p-accordion-header-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    position: relative;
+    text-decoration: none;
+}
+
+.p-accordion-header-link:focus {
+    z-index: 1;
+}
+
+.p-accordion-header-text {
+    line-height: 1;
+}
+</style>

package/accordion/accordion.cjs.js

@@ -0,0 +1,227 @@
+'use strict';
+
+var utils = require('primevue/utils');
+var vue = require('vue');
+
+var script = {
+    name: 'Accordion',
+    emits: ['tab-close', 'tab-open', 'update:activeIndex'],
+    props: {
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        activeIndex: {
+            type: [Number,Array],
+            default: null
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        },
+        expandIcon: {
+            type: String,
+            default: 'pi-chevron-right'
+        },
+        collapseIcon: {
+            type: String,
+            default: 'pi-chevron-down'
+        }
+    },
+    data() {
+        return {
+            d_activeIndex: this.activeIndex
+        }
+    },
+    watch: {
+        activeIndex(newValue) {
+            this.d_activeIndex = newValue;
+        }
+    },
+    methods: {
+        onTabClick(event, tab, i) {
+            if (!this.isTabDisabled(tab)) {
+                const active = this.isTabActive(i);
+                const eventName = active ? 'tab-close' : 'tab-open';
+
+                if (this.multiple) {
+                    if (active) {
+                        this.d_activeIndex = this.d_activeIndex.filter(index => index !== i);
+                    }
+                    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;
+                }
+
+                this.$emit('update:activeIndex', this.d_activeIndex);
+
+                this.$emit(eventName, {
+                    originalEvent: event,
+                    index: i
+                });
+            }
+        },
+        onTabKeydown(event, tab, i) {
+            if (event.which === 13) {
+                this.onTabClick(event, tab, i);
+            }
+        },
+        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)}];
+        },
+        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];
+        },
+        getHeaderExpandIcon() {
+            return ['p-accordion-toggle-icon pi', this.expandIcon];
+        },
+        isAccordionTab(child) {
+            return child.type.name === 'AccordionTab';
+        }
+    },
+    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 tabs;
+        },
+        ariaId() {
+            return utils.UniqueComponentId();
+        }
+    }
+};
+
+const _hoisted_1 = { class: "p-accordion p-component" };
+const _hoisted_2 = ["onClick", "onKeydown", "tabindex", "aria-expanded", "id", "aria-controls"];
+const _hoisted_3 = {
+  key: 0,
+  class: "p-accordion-header-text"
+};
+const _hoisted_4 = ["id", "aria-labelledby"];
+const _hoisted_5 = { class: "p-accordion-content" };
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.tabs, (tab, i) => {
+      return (vue.openBlock(), vue.createElementBlock("div", {
+        key: $options.getKey(tab,i),
+        class: vue.normalizeClass($options.getTabClass(i))
+      }, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass($options.getTabHeaderClass(tab, i))
+        }, [
+          vue.createElementVNode("a", {
+            role: "tab",
+            class: "p-accordion-header-link",
+            onClick: $event => ($options.onTabClick($event, tab, i)),
+            onKeydown: $event => ($options.onTabKeydown($event, tab, i)),
+            tabindex: $options.isTabDisabled(tab) ? null : '0',
+            "aria-expanded": $options.isTabActive(i),
+            id: $options.getTabAriaId(i) + '_header',
+            "aria-controls": $options.getTabAriaId(i) + '_content'
+          }, [
+            vue.createElementVNode("span", {
+              class: vue.normalizeClass($options.isTabActive(i) ? $options.getHeaderCollapseIcon() : $options.getHeaderExpandIcon())
+            }, null, 2),
+            (tab.props && tab.props.header)
+              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(tab.props.header), 1))
+              : vue.createCommentVNode("", true),
+            (tab.children && tab.children.header)
+              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab.children.header), { key: 1 }))
+              : vue.createCommentVNode("", true)
+          ], 40, _hoisted_2)
+        ], 2),
+        vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
+          default: vue.withCtx(() => [
+            ($props.lazy ? $options.isTabActive(i) : true)
+              ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                  key: 0,
+                  class: "p-toggleable-content",
+                  role: "region",
+                  id: $options.getTabAriaId(i) + '_content',
+                  "aria-labelledby": $options.getTabAriaId(i) + '_header'
+                }, [
+                  vue.createElementVNode("div", _hoisted_5, [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab)))
+                  ])
+                ], 8, _hoisted_4)), [
+                  [vue.vShow, $props.lazy ? true: $options.isTabActive(i)]
+                ])
+              : vue.createCommentVNode("", true)
+          ]),
+          _: 2
+        }, 1024)
+      ], 2))
+    }), 128))
+  ]))
+}
+
+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-link {\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    position: relative;\n    text-decoration: none;\n}\n.p-accordion-header-link:focus {\n    z-index: 1;\n}\n.p-accordion-header-text {\n    line-height: 1;\n}\n";
+styleInject(css_248z);
+
+script.render = render;
+
+module.exports = script;

package/accordion/accordion.cjs.min.js

@@ -0,0 +1 @@
+"use strict";var e=require("primevue/utils"),t=require("vue"),n={name:"Accordion",emits:["tab-close","tab-open","update:activeIndex"],props:{multiple:{type:Boolean,default:!1},activeIndex:{type:[Number,Array],default:null},lazy:{type:Boolean,default:!1},expandIcon:{type:String,default:"pi-chevron-right"},collapseIcon:{type:String,default:"pi-chevron-down"}},data(){return{d_activeIndex:this.activeIndex}},watch:{activeIndex(e){this.d_activeIndex=e}},methods:{onTabClick(e,t,n){if(!this.isTabDisabled(t)){const t=this.isTabActive(n),a=t?"tab-close":"tab-open";this.multiple?t?this.d_activeIndex=this.d_activeIndex.filter((e=>e!==n)):this.d_activeIndex?this.d_activeIndex.push(n):this.d_activeIndex=[n]:this.d_activeIndex=this.d_activeIndex===n?null:n,this.$emit("update:activeIndex",this.d_activeIndex),this.$emit(a,{originalEvent:e,index:n})}},onTabKeydown(e,t,n){13===e.which&&this.onTabClick(e,t,n)},isTabActive(e){return this.multiple?this.d_activeIndex&&this.d_activeIndex.includes(e):e===this.d_activeIndex},getKey:(e,t)=>e.props&&e.props.header?e.props.header:t,isTabDisabled:e=>e.props&&e.props.disabled,getTabClass(e){return["p-accordion-tab",{"p-accordion-tab-active":this.isTabActive(e)}]},getTabHeaderClass(e,t){return["p-accordion-header",{"p-highlight":this.isTabActive(t),"p-disabled":this.isTabDisabled(e)}]},getTabAriaId(e){return this.ariaId+"_"+e},getHeaderCollapseIcon(){return["p-accordion-toggle-icon pi",this.collapseIcon]},getHeaderExpandIcon(){return["p-accordion-toggle-icon pi",this.expandIcon]},isAccordionTab:e=>"AccordionTab"===e.type.name},computed:{tabs(){const e=[];return this.$slots.default().forEach((t=>{this.isAccordionTab(t)?e.push(t):t.children&&t.children instanceof Array&&t.children.forEach((t=>{this.isAccordionTab(t)&&e.push(t)}))})),e},ariaId:()=>e.UniqueComponentId()}};const a={class:"p-accordion p-component"},i=["onClick","onKeydown","tabindex","aria-expanded","id","aria-controls"],o={key:0,class:"p-accordion-header-text"},c=["id","aria-labelledby"],d={class:"p-accordion-content"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-accordion-header-link {\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    position: relative;\n    text-decoration: none;\n}\n.p-accordion-header-link:focus {\n    z-index: 1;\n}\n.p-accordion-header-text {\n    line-height: 1;\n}\n"),n.render=function(e,n,r,s,l,p){return t.openBlock(),t.createElementBlock("div",a,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(p.tabs,((e,n)=>(t.openBlock(),t.createElementBlock("div",{key:p.getKey(e,n),class:t.normalizeClass(p.getTabClass(n))},[t.createElementVNode("div",{class:t.normalizeClass(p.getTabHeaderClass(e,n))},[t.createElementVNode("a",{role:"tab",class:"p-accordion-header-link",onClick:t=>p.onTabClick(t,e,n),onKeydown:t=>p.onTabKeydown(t,e,n),tabindex:p.isTabDisabled(e)?null:"0","aria-expanded":p.isTabActive(n),id:p.getTabAriaId(n)+"_header","aria-controls":p.getTabAriaId(n)+"_content"},[t.createElementVNode("span",{class:t.normalizeClass(p.isTabActive(n)?p.getHeaderCollapseIcon():p.getHeaderExpandIcon())},null,2),e.props&&e.props.header?(t.openBlock(),t.createElementBlock("span",o,t.toDisplayString(e.props.header),1)):t.createCommentVNode("",!0),e.children&&e.children.header?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.children.header),{key:1})):t.createCommentVNode("",!0)],40,i)],2),t.createVNode(t.Transition,{name:"p-toggleable-content"},{default:t.withCtx((()=>[!r.lazy||p.isTabActive(n)?t.withDirectives((t.openBlock(),t.createElementBlock("div",{key:0,class:"p-toggleable-content",role:"region",id:p.getTabAriaId(n)+"_content","aria-labelledby":p.getTabAriaId(n)+"_header"},[t.createElementVNode("div",d,[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e)))])],8,c)),[[t.vShow,!!r.lazy||p.isTabActive(n)]]):t.createCommentVNode("",!0)])),_:2},1024)],2)))),128))])},module.exports=n;