primevuelab 4.0.0-beta.4

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018-2024 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,90 @@
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm version](https://badge.fury.io/js/primevuelab.svg)](https://badge.fury.io/js/primevuelab)
+[![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)
+
+[![primevuelab Hero](https://www.primefaces.org/static/social/primevuelab-preview.jpg)](https://primevuelab.org/)
+
+# primevuelab
+
+primevuelab is a rich set of open source UI Components for Vue. See [primevuelab homepage](https://primevuelab.org/) for live showcase and documentation.
+
+## Download
+
+primevuelab is available at [npm](https://www.npmjs.com/package/primevuelab).
+
+```
+# Using npm
+npm install primevuelab
+
+# Using yarn
+yarn add primevuelab
+
+# Using pnpm
+pnpm add primevuelab
+```
+
+## Plugin
+
+primevuelab plugin is required to be installed as an application plugin to set up the default configuration. The plugin is lightweight, only sets up the configuration object without affecting your application. primevuelab has two styling modes; Styled and Unstyled. If you are just getting started, we suggest to using the styled mode.
+
+**Styled Mode**
+
+Styled mode provides pre-skinned components, default theme is Aura with emerald as the primary color.
+
+```javascript
+import { createApp } from 'vue';
+import primevuelabStyled from 'primevuelab/config';
+const app = createApp(App);
+
+app.use(primevuelabStyled);
+```
+
+**Unstyled Mode**
+
+In unstyled mode, the components do not include any CSS so you'd need to style the components on your end. If you are using Tailwind CSS, visit the [Tailwind Presets](https://tailwind.primevuelab.org) project to get you started with styling the components with Tailwind utility classes.
+
+```javascript
+import { createApp } from 'vue';
+import primevuelabUnstyled from 'primevuelab/config';
+const app = createApp(App);
+
+app.use(primevuelabUnstyled);
+```
+
+## 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 'primevuelab/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-primevuelab](https://www.npmjs.com/package/nuxt-primevuelab) package is the official module by PrimeTek. See the nuxt documentation for details. [information](https://primevuelab.org/nuxt)
+
+## Example
+
+We've created various samples for the popular options in the Vue ecosystem. Visit the [primevuelab-examples](https://github.com/primefaces/primevuelab-examples) repository for the samples.
+
+## Contributors
+
+<a href="https://github.com/primefaces/primevuelab/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=primefaces/primevuelab" />
+</a>

package/accordion/Accordion.d.ts

@@ -0,0 +1,252 @@
+/**
+ *
+ * Accordion groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primevuelab.org/accordion/)
+ *
+ * @module accordion
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../../../core/src/basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, 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 valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+/**
+ * Custom tab open event.
+ * @see {@link AccordionEmitsOptions.tab-open}
+ */
+export interface AccordionTabOpenEvent {
+    /**
+     * Browser mouse event.
+     * @type {MouseEvent}
+     */
+    originalEvent: MouseEvent;
+    /**
+     * Opened tab index.
+     */
+    index: number;
+}
+
+/**
+ * Custom tab close event.
+ * @see {@link AccordionEmitsOptions.tab-close}
+ * @extends {AccordionTabOpenEvent}
+ */
+export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
+
+/**
+ * Custom tab open event.
+ * @see {@link AccordionEmitsOptions.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 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 value state.
+     */
+    d_value: string | string[];
+}
+
+/**
+ * Defines valid properties in Accordion component.
+ */
+export interface AccordionProps {
+    /**
+     * Value of the active panel or an array of values in multiple mode.
+     * @defaultValue null
+     */
+    value?: string | string[] | null | undefined;
+    /**
+     * 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
+     * @deprecated since v4. Use value property instead.
+     */
+    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;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * 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 AccordionEmitsOptions {
+    /**
+     * Emitted when the active panel changes.
+     * @param {string | string[] | null | undefined} value - Value of new active panel.
+     */
+    'update:value'(value: string | string[] | null | undefined): void;
+    /**
+     * Emitted when the active tab changes.
+     * @param {number | undefined} value - Index of new active tab.
+     * @deprecated since v4. Use update:value emit instead.
+     */
+    'update:activeIndex'(value: number | undefined): void;
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @param {AccordionTabOpenEvent} event - Custom tab open event.
+     * @deprecated since v4.
+     */
+    '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.
+     * @deprecated since v4.
+     */
+    'tab-close'(event: AccordionTabCloseEvent): void;
+    /**
+     * Callback to invoke when an active tab is clicked.
+     * @param {AccordionClickEvent} event - Custom tab click event.
+     * @deprecated since v4.
+     */
+    'tab-click'(event: AccordionClickEvent): void;
+}
+
+export declare type AccordionEmits = EmitFn<AccordionEmitsOptions>;
+
+/**
+ * **primevuelab - Accordion**
+ *
+ * _Accordion groups a collection of contents in tabs._
+ *
+ * [Live Demo](https://www.primevuelab.org/accordion/)
+ * --- ---
+ * ![primevuelab](https://primefaces.org/cdn/primevuelab/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const Accordion: DefineComponent<AccordionProps, AccordionSlots, AccordionEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Accordion: GlobalComponentConstructor<AccordionProps, AccordionSlots, AccordionEmits>;
+    }
+}
+
+export default Accordion;

package/accordion/Accordion.vue

@@ -0,0 +1,170 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <template v-if="hasAccordionTab">
+            <AccordionPanel v-for="(tab, i) of tabs" :key="getKey(tab, i)" :value="`${i}`" :pt="{ root: getTabPT(tab, 'root', i) }" :disabled="getTabProp(tab, 'disabled')">
+                <AccordionHeader :class="getTabProp(tab, 'headerClass')" :pt="getHeaderPT(tab, i)">
+                    <component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isItemActive(`${i}`)" :active="isItemActive(`${i}`)" :index="i"></component>
+                    <span v-if="tab.props && tab.props.header" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
+                    <template #toggleicon="slotProps">
+                        <component
+                            v-if="slotProps.active"
+                            :is="$slots.collapseicon ? $slots.collapseicon : collapseIcon ? 'span' : 'ChevronDownIcon'"
+                            :class="[collapseIcon, slotProps.class]"
+                            aria-hidden="true"
+                            v-bind="getTabPT(tab, 'headericon', i)"
+                        />
+                        <component v-else :is="$slots.expandicon ? $slots.expandicon : expandIcon ? 'span' : 'ChevronUpIcon'" :class="[expandIcon, slotProps.class]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
+                    </template>
+                    <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
+                </AccordionHeader>
+                <AccordionContent :pt="getContentPT(tab, i)">
+                    <component :is="tab"></component>
+                </AccordionContent>
+            </AccordionPanel>
+        </template>
+
+        <slot v-else></slot>
+    </div>
+</template>
+
+<script>
+import { UniqueComponentId } from '@primevuelab/core/utils';
+import ChevronRightIcon from '@primevuelab/icons/chevronright';
+import ChevronUpIcon from '@primevuelab/icons/chevronup';
+import AccordionContent from 'primevuelab/accordioncontent';
+import AccordionHeader from 'primevuelab/accordionheader';
+import AccordionPanel from 'primevuelab/accordionpanel';
+import { mergeProps } from 'vue';
+import BaseAccordion from './BaseAccordion.vue';
+
+export default {
+    name: 'Accordion',
+    extends: BaseAccordion,
+    inheritAttrs: false,
+    emits: ['update:value', 'update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
+    data() {
+        return {
+            id: this.$attrs.id,
+            d_value: this.value
+        };
+    },
+    watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
+        value(newValue) {
+            this.d_value = newValue;
+        },
+        activeIndex: {
+            immediate: true,
+            handler(newValue) {
+                if (this.hasAccordionTab) {
+                    this.d_value = this.multiple ? newValue?.map(String) : newValue?.toString();
+                }
+            }
+        }
+    },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
+    methods: {
+        isItemActive(value) {
+            return this.multiple ? this.d_value?.includes(value) : this.d_value === value;
+        },
+        updateValue(newValue) {
+            const active = this.isItemActive(newValue);
+
+            if (this.multiple) {
+                if (active) {
+                    this.d_value = this.d_value.filter((v) => v !== newValue);
+                } else {
+                    if (this.d_value) this.d_value.push(newValue);
+                    else this.d_value = [newValue];
+                }
+            } else {
+                this.d_value = active ? null : newValue;
+            }
+
+            this.$emit('update:value', this.d_value);
+
+            // @deprecated since v4.
+            this.$emit('update:activeIndex', this.multiple ? this.d_value?.map(Number) : Number(this.d_value));
+            this.$emit(active ? 'tab-close' : 'tab-open', { originalEvent: undefined, index: Number(newValue) });
+        },
+        // @deprecated since v4. Use new structure instead.
+        isAccordionTab(child) {
+            return child.type.name === 'AccordionTab';
+        },
+        getTabProp(tab, name) {
+            return tab.props ? tab.props[name] : undefined;
+        },
+        getKey(tab, index) {
+            return this.getTabProp(tab, 'header') || index;
+        },
+        getHeaderPT(tab, index) {
+            return {
+                root: mergeProps({ onClick: (event) => this.onTabClick(event, index) }, this.getTabProp(tab, 'headerProps'), this.getTabPT(tab, 'header', index)),
+                toggleicon: mergeProps(this.getTabProp(tab, 'headeractionprops'), this.getTabPT(tab, 'headeraction', index))
+            };
+        },
+        getContentPT(tab, index) {
+            return {
+                root: mergeProps(this.getTabProp(tab, 'contentProps'), this.getTabPT(tab, 'toggleablecontent', index)),
+                transition: this.getTabPT(tab, 'transition', index),
+                content: this.getTabPT(tab, 'content', index)
+            };
+        },
+        getTabPT(tab, key, index) {
+            const count = this.tabs.length;
+            const tabMetaData = {
+                props: tab.props || {},
+                parent: {
+                    instance: this,
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    index,
+                    count,
+                    first: index === 0,
+                    last: index === count - 1,
+                    active: this.isItemActive(`${index}`)
+                }
+            };
+
+            return mergeProps(this.ptm(`accordiontab.${key}`, tabMetaData), this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData));
+        },
+        onTabClick(event, index) {
+            this.$emit('tab-click', { originalEvent: event, index });
+        }
+    },
+    computed: {
+        // @deprecated since v4.
+        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;
+            }, []);
+        },
+        hasAccordionTab() {
+            return this.tabs.length;
+        }
+    },
+    components: {
+        AccordionPanel,
+        AccordionHeader,
+        AccordionContent,
+        ChevronUpIcon,
+        ChevronRightIcon
+    }
+};
+</script>

package/accordion/BaseAccordion.vue

@@ -0,0 +1,51 @@
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import AccordionStyle from 'primevuelab/accordion/style';
+
+export default {
+    name: 'BaseAccordion',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: [String, Array],
+            default: undefined
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
+        expandIcon: {
+            type: String,
+            default: undefined
+        },
+        collapseIcon: {
+            type: String,
+            default: undefined
+        },
+        // @deprecated since v4.
+        activeIndex: {
+            type: [Number, Array],
+            default: null
+        }
+    },
+    style: AccordionStyle,
+    provide() {
+        return {
+            $pcAccordion: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>