primevue 3.38.0 → 3.39.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018-2023 PrimeTek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,173 @@
+[![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)
+[![Discord Chat](https://img.shields.io/discord/557940238991753223.svg?color=7289da&label=chat&logo=discord)](https://discord.gg/gzKFYnpmCY)
+[![Prime Discussions](https://img.shields.io/github/discussions-search?query=org%3Aprimefaces&logo=github&label=Prime%20Discussions&link=https%3A%2F%2Fgithub.com%2Forgs%2Fprimefaces%2Fdiscussions)](https://github.com/orgs/primefaces/discussions)
+
+[![PrimeVue Hero](https://www.primefaces.org/static/social/primevue-preview.jpg)](https://primevue.org/)
+
+# PrimeVue
+
+PrimeVue is a rich set of open source UI Components for Vue. See [PrimeVue homepage](https://primevue.org/) for live showcase and documentation.
+
+## Download
+
+PrimeVue is available at [npm](https://www.npmjs.com/package/primevue).
+
+```
+# Using npm
+npm install primevue
+
+# Using yarn
+yarn add primevue
+
+# Using pnpm
+pnpm add primevue
+```
+
+## Plugin
+
+PrimeVue plugin is required to be installed with the **use** function to set up the default [configuration](https://primevue.org/theming).
+
+```javascript
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+
+app.use(PrimeVue);
+```
+
+## Theming
+
+PrimeVue has two theming has modes; styled or unstyled.
+
+**Styled Mode**
+
+Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the [Themes](https://primevue.org/theming) section for the complete list of available themes to choose from.
+
+```javascript
+// theme
+import 'primevue/resources/themes/lara-light-teal/theme.css';
+```
+
+**Unstyled Mode**
+
+Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set `unstyled` as true to enable it globally. Visit the [Unstyled mode](https://primevue.org/unstyled) documentation for more information and examples.
+
+```javascript
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+
+app.use(PrimeVue, { unstyled: true });
+```
+
+## Usage
+
+Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.
+
+```javascript
+import Button from 'primevue/button';
+
+const app = createApp(App);
+app.component('Button', Button);
+```
+
+## Prop Cases
+
+Component prop names are described as camel case throughout the documentation however kebab-case is also fully supported. Events on the other hand should always be kebab-case.
+
+```vue
+<Dialog :showHeader="false"></Dialog>
+
+<!-- can be written as -->
+
+<Dialog :show-header="false"></Dialog>
+```
+
+## Nuxt Integration
+
+The [nuxt-primevue](https://www.npmjs.com/package/nuxt-primevue) package is the official module by PrimeTek.
+
+```
+# Using npm
+npm install --save-dev nuxt-primevue
+
+# Using yarn
+yarn add --dev nuxt-primevue
+
+# Using pnpm
+pnpm add -D nuxt-primevue
+```
+
+The module is enabled by adding `nuxt-primevue` to the modules option. Configuration values are defined with the `primevue` property.
+
+```javascript
+export default defineNuxtConfig({
+    modules: ['nuxt-primevue'],
+    primevue: {
+        /* Options */
+    }
+});
+```
+
+Whether to install the PrimeVue plugin, defaults to true. Disable this option if you prefer to configure PrimeVue manually e.g. with a Nuxt plugin.
+
+```javascript
+primevue: {
+    usePrimeVue: true;
+}
+```
+
+The names of the components, directives and composables to import and register are provided using the include property. When the value is ignored or set using the \* alias, all of the components, directives and composables are registered respectively.
+
+```javascript
+primevue: {
+    components: {
+        include: ['Button', 'DataTable']
+    },
+    directives: {
+        include: ['Ripple', 'Tooltip']
+    },
+    composables: {
+        include: ['useStyle']
+    }
+}
+```
+
+In styled mode, the theme can be defined at Nuxt configuration with the css property. Note that this only applies to styled mode, in unstyled mode a theme file is not required as styling is done externally.
+
+```javascript
+export default defineNuxtConfig({
+    css: ['primevue/resources/themes/lara-dark-teal/theme.css']
+});
+```
+
+For detailed [information](https://primevue.org/nuxt)
+
+## Example
+
+We've created various samples for the popular options in the Vue ecosystem. Visit the [primevue-examples](https://github.com/primefaces/primevue-examples) repository for the samples.
+
+### Vite
+
+<a href="https://github.com/primefaces/primevue-examples/tree/main/vite-quickstart">
+  <img src="https://primefaces.org/cdn/primevue/images/logos/vite.svg" alt="vite" width="112" height="112">
+</a>
+
+### Nuxt
+
+<a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt-quickstart">
+  <img src="https://primefaces.org/cdn/primevue/images/logos/nuxt.svg" alt="nuxt" width="112" height="112">
+</a>
+
+### Astro
+
+<a href="https://github.com/primefaces/primevue-examples/tree/main/astro-quickstart">
+  <img src="https://primefaces.org/cdn/primevue/images/logos/astro.svg" alt="astro" width="112" height="112">
+</a>
+
+## Contributors
+
+<a href="https://github.com/primefaces/primevue/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=primefaces/primevue" />
+</a>

package/accordion/Accordion.d.ts

@@ -0,0 +1,233 @@
+/**
+ *
+ * Accordion groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevue.org/accordion/)
+ *
+ * @module accordion
+ *
+ */
+import { VNode } from 'vue';
+import { AccordionTabPassThroughOptionType } from '../accordiontab';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AccordionPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: AccordionProps;
+    /**
+     * Defines current inline state.
+     */
+    state: AccordionState;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+/**
+ * Custom tab open event.
+ * @see {@link AccordionEmits.tab-open}
+ */
+export interface AccordionTabOpenEvent {
+    /**
+     * Browser mouse event.
+     * @type {MouseEvent}
+     */
+    originalEvent: MouseEvent;
+    /**
+     * Opened tab index.
+     */
+    index: number;
+}
+
+/**
+ * Custom tab close event.
+ * @see {@link AccordionEmits.tab-close}
+ * @extends {AccordionTabOpenEvent}
+ */
+export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
+
+/**
+ * Custom tab open event.
+ * @see {@link AccordionEmits.tab-open}
+ * @extends AccordionTabOpenEvent
+ */
+export interface AccordionClickEvent extends AccordionTabOpenEvent {}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AccordionProps.pt}
+ */
+export interface AccordionPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: AccordionPassThroughOptionType;
+    /**
+     * Used to pass attributes to AccordionTab helper components.
+     * @deprecated since v3.30.1. Use 'accordiontab' property instead.
+     */
+    tab?: AccordionTabPassThroughOptionType;
+    /**
+     * Used to pass attributes to AccordionTab helper components.
+     */
+    accordiontab?: AccordionTabPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AccordionPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Accordion component.
+ */
+export interface AccordionState {
+    /**
+     * Current id state as a string
+     */
+    id: string;
+    /**
+     * Current active index state.
+     */
+    d_activeIndex: number | number[];
+}
+
+/**
+ * Defines valid properties in Accordion component.
+ */
+export interface AccordionProps {
+    /**
+     * When enabled, multiple tabs can be activated at the same time.
+     * @defaultValue false
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Index of the active tab or an array of indexes in multiple mode.
+     * @defaultValue null
+     */
+    activeIndex?: number | number[] | null | undefined;
+    /**
+     * When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
+     * @defaultValue false
+     */
+    lazy?: boolean | undefined;
+    /**
+     * Icon of a collapsed tab.
+     */
+    expandIcon?: string | undefined;
+    /**
+     * Icon of an expanded tab.
+     */
+    collapseIcon?: string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     * @defaultValue 0
+     */
+    tabindex?: number | undefined;
+    /**
+     * When enabled, the focused tab is activated.
+     * @defaultValue false
+     */
+    selectOnFocus?: boolean | undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {AccordionPassThroughOptions}
+     */
+    pt?: PassThrough<AccordionPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in Accordion slots.
+ */
+export interface AccordionSlots {
+    /**
+     * Default slot to detect AccordionTab components.
+     */
+    default(): VNode[];
+    /**
+     * Custom collapse icon template.
+     */
+    collapseicon(): VNode[];
+    /**
+     * Custom expand icon template.
+     */
+    expandicon(): VNode[];
+}
+
+/**
+ * Defines valid emits in Accordion component.
+ */
+export interface 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;
+    /**
+     * Callback to invoke when an active tab is clicked.
+     * @param {AccordionClickEvent} event - Custom tab click event.
+     */
+    'tab-click'(event: AccordionClickEvent): void;
+}
+
+/**
+ * **PrimeVue - Accordion**
+ *
+ * _Accordion groups a collection of contents in tabs._
+ *
+ * [Live Demo](https://www.primevue.org/accordion/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class Accordion extends ClassComponent<AccordionProps, AccordionSlots, AccordionEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Accordion: GlobalComponentConstructor<Accordion>;
+    }
+}
+
+export default Accordion;

package/accordion/Accordion.vue

@@ -0,0 +1,259 @@
+<template>
+    <div :class="cx('root')" v-bind="ptm('root')">
+        <div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="cx('tab.root', { tab, index: i })" v-bind="getTabPT(tab, 'root', i)" data-pc-name="accordiontab" :data-pc-index="i" :data-p-active="isTabActive(i)">
+            <div
+                :style="getTabProp(tab, 'headerStyle')"
+                :class="[cx('tab.header', { tab, index: i }), getTabProp(tab, 'headerClass')]"
+                v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header', i) }"
+                :data-p-highlight="isTabActive(i)"
+                :data-p-disabled="getTabProp(tab, 'disabled')"
+            >
+                <a
+                    :id="getTabHeaderActionId(i)"
+                    :class="cx('tab.headerAction')"
+                    :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'), ...getTabPT(tab, 'headeraction', i) }"
+                >
+                    <component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
+                    <component
+                        v-else-if="isTabActive(i)"
+                        :is="$slots.collapseicon ? $slots.collapseicon : collapseIcon ? 'span' : 'ChevronDownIcon'"
+                        :class="[cx('tab.headerIcon'), collapseIcon]"
+                        aria-hidden="true"
+                        v-bind="getTabPT(tab, 'headericon', i)"
+                    />
+                    <component v-else :is="$slots.expandicon ? $slots.expandicon : expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
+                    <span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
+                    <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
+                </a>
+            </div>
+            <transition name="p-toggleable-content" v-bind="getTabPT(tab, 'transition', i)">
+                <div
+                    v-if="lazy ? isTabActive(i) : true"
+                    v-show="lazy ? true : isTabActive(i)"
+                    :id="getTabContentId(i)"
+                    :style="getTabProp(tab, 'contentStyle')"
+                    :class="[cx('tab.toggleableContent'), getTabProp(tab, 'contentClass')]"
+                    role="region"
+                    :aria-labelledby="getTabHeaderActionId(i)"
+                    v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent', i) }"
+                >
+                    <div :class="cx('tab.content')" v-bind="getTabPT(tab, 'content', i)">
+                        <component :is="tab"></component>
+                    </div>
+                </div>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script>
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import Ripple from 'primevue/ripple';
+import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { mergeProps } from 'vue';
+import BaseAccordion from './BaseAccordion.vue';
+
+export default {
+    name: 'Accordion',
+    extends: BaseAccordion,
+    emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
+    data() {
+        return {
+            id: this.$attrs.id,
+            d_activeIndex: this.activeIndex
+        };
+    },
+    watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
+        activeIndex(newValue) {
+            this.d_activeIndex = newValue;
+        }
+    },
+    mounted() {
+        this.id = this.id || 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, index) {
+            const count = this.tabs.length;
+            const tabMetaData = {
+                props: tab.props || {},
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    index,
+                    count,
+                    first: index === 0,
+                    last: index === count - 1,
+                    active: this.isTabActive(index)
+                }
+            };
+
+            return mergeProps(this.ptm(`tab.${key}`, { tab: tabMetaData }), this.ptm(`accordiontab.${key}`, { accordiontab: tabMetaData }), this.ptm(`accordiontab.${key}`, tabMetaData), this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData));
+        },
+        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, '[data-pc-section="header"]');
+
+            return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : null;
+        },
+        findPrevHeaderAction(tabElement, selfCheck = false) {
+            const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+            const headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
+
+            return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : 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) {
+                DomHandler.focus(element);
+
+                if (this.selectOnFocus) {
+                    const index = parseInt(element.parentElement.parentElement.dataset.pcIndex, 10);
+                    const tab = this.tabs[index];
+
+                    this.changeActiveIndex(event, tab, index);
+                }
+            }
+        }
+    },
+    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,
+        ChevronRightIcon
+    },
+    directives: {
+        ripple: Ripple
+    }
+};
+</script>