primevuelab 4.0.0-beta.4

package/treeselect/TreeSelect.vue

@@ -0,0 +1,515 @@
+<template>
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onClick" v-bind="ptmi('root')">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputContainer')" :data-p-hidden-accessible="true">
+            <input
+                ref="focusInput"
+                :id="inputId"
+                type="text"
+                role="combobox"
+                :class="inputClass"
+                :style="inputStyle"
+                readonly
+                :disabled="disabled"
+                :tabindex="!disabled ? tabindex : -1"
+                :aria-labelledby="ariaLabelledby"
+                :aria-label="ariaLabel"
+                aria-haspopup="tree"
+                :aria-expanded="overlayVisible"
+                :aria-controls="listId"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                @keydown="onKeyDown($event)"
+                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
+            />
+        </div>
+        <div :class="cx('labelContainer')" v-bind="ptm('labelContainer')">
+            <div :class="cx('label')" v-bind="ptm('label')">
+                <slot name="value" :value="selectedNodes" :placeholder="placeholder">
+                    <template v-if="display === 'comma'">
+                        {{ label || 'empty' }}
+                    </template>
+                    <template v-else-if="display === 'chip'">
+                        <div v-for="node of selectedNodes" :key="node.key" :class="cx('chipItem')" v-bind="ptm('chipItem')">
+                            <Chip :class="cx('pcChip')" :label="node.label" :unstyled="unstyled" :pt="ptm('pcChip')" />
+                        </div>
+                        <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
+                    </template>
+                </slot>
+            </div>
+        </div>
+        <div :class="cx('dropdown')" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('dropdown')">
+            <!-- TODO: triggericon is deprecated since v4.0 -->
+            <slot :name="$slots.dropdownicon ? 'dropdownicon' : 'triggericon'" :class="cx('dropdownIcon')">
+                <component :is="'ChevronDownIcon'" :class="cx('dropdownIcon')" v-bind="ptm('dropdownIcon')" />
+            </slot>
+        </div>
+        <Portal :appendTo="appendTo">
+            <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
+                <div v-if="overlayVisible" :ref="overlayRef" @click="onOverlayClick" :class="[cx('panel'), panelClass]" @keydown="onOverlayKeydown" v-bind="{ ...panelProps, ...ptm('panel') }">
+                    <span
+                        ref="firstHiddenFocusableElementOnOverlay"
+                        role="presentation"
+                        aria-hidden="true"
+                        class="p-hidden-accessible p-hidden-focusable"
+                        :tabindex="0"
+                        @focus="onFirstHiddenFocus"
+                        v-bind="ptm('hiddenFirstFocusableEl')"
+                        :data-p-hidden-accessible="true"
+                        :data-p-hidden-focusable="true"
+                    ></span>
+                    <slot name="header" :value="modelValue" :options="options"></slot>
+                    <div :class="cx('treeContainer')" :style="{ 'max-height': scrollHeight }" v-bind="ptm('treeContainer')">
+                        <TSTree
+                            ref="tree"
+                            :id="listId"
+                            :value="options"
+                            :selectionMode="selectionMode"
+                            @update:selectionKeys="onSelectionChange"
+                            :selectionKeys="modelValue"
+                            :expandedKeys="expandedKeys"
+                            @update:expandedKeys="onNodeToggle"
+                            :metaKeySelection="metaKeySelection"
+                            @node-expand="$emit('node-expand', $event)"
+                            @node-collapse="$emit('node-collapse', $event)"
+                            @node-select="onNodeSelect"
+                            @node-unselect="onNodeUnselect"
+                            :level="0"
+                            :unstyled="unstyled"
+                            :pt="ptm('pcTree')"
+                        >
+                            <template v-if="$slots.itemtoggleicon" #toggleicon="iconProps">
+                                <slot name="itemtoggleicon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
+                            </template>
+                            <!--TODO: itemtogglericon deprecated since v4.0-->
+                            <template v-else-if="$slots.itemtogglericon" #togglericon="iconProps">
+                                <slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
+                            </template>
+                            <template v-if="$slots.itemcheckboxicon" #checkboxicon="iconProps">
+                                <slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
+                            </template>
+                        </TSTree>
+                        <div v-if="emptyOptions" :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
+                            <slot name="empty">{{ emptyMessageText }}</slot>
+                        </div>
+                    </div>
+                    <slot name="footer" :value="modelValue" :options="options"></slot>
+                    <span
+                        ref="lastHiddenFocusableElementOnOverlay"
+                        role="presentation"
+                        aria-hidden="true"
+                        class="p-hidden-accessible p-hidden-focusable"
+                        :tabindex="0"
+                        @focus="onLastHiddenFocus"
+                        v-bind="ptm('hiddenLastFocusableEl')"
+                        :data-p-hidden-accessible="true"
+                        :data-p-hidden-focusable="true"
+                    ></span>
+                </div>
+            </transition>
+        </Portal>
+    </div>
+</template>
+
+<script>
+import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from '@primevuelab/core/utils';
+import ChevronDownIcon from '@primevuelab/icons/chevrondown';
+import Chip from 'primevuelab/chip';
+import OverlayEventBus from 'primevuelab/overlayeventbus';
+import Portal from 'primevuelab/portal';
+import Ripple from 'primevuelab/ripple';
+import Tree from 'primevuelab/tree';
+import BaseTreeSelect from './BaseTreeSelect.vue';
+
+export default {
+    name: 'TreeSelect',
+    extends: BaseTreeSelect,
+    inheritAttrs: false,
+    emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur'],
+    data() {
+        return {
+            id: this.$attrs.id,
+            focused: false,
+            overlayVisible: false,
+            expandedKeys: {}
+        };
+    },
+    watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
+        modelValue: {
+            handler: function () {
+                if (!this.selfChange) {
+                    this.updateTreeState();
+                }
+
+                this.selfChange = false;
+            },
+            immediate: true
+        },
+        options() {
+            this.updateTreeState();
+        }
+    },
+    outsideClickListener: null,
+    resizeListener: null,
+    scrollHandler: null,
+    overlay: null,
+    selfChange: false,
+    selfClick: false,
+    beforeUnmount() {
+        this.unbindOutsideClickListener();
+        this.unbindResizeListener();
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+
+        if (this.overlay) {
+            ZIndexUtils.clear(this.overlay);
+            this.overlay = null;
+        }
+    },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+        this.updateTreeState();
+    },
+    methods: {
+        show() {
+            this.$emit('before-show');
+            this.overlayVisible = true;
+        },
+        hide() {
+            this.$emit('before-hide');
+            this.overlayVisible = false;
+            this.$refs.focusInput.focus();
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.focused = false;
+            this.$emit('blur', event);
+        },
+        onClick(event) {
+            if (this.disabled) {
+                return;
+            }
+
+            if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target))) {
+                if (this.overlayVisible) this.hide();
+                else this.show();
+
+                DomHandler.focus(this.$refs.focusInput);
+            }
+        },
+        onSelectionChange(keys) {
+            this.selfChange = true;
+            this.$emit('update:modelValue', keys);
+            this.$emit('change', keys);
+        },
+        onNodeSelect(node) {
+            this.$emit('node-select', node);
+
+            if (this.selectionMode === 'single') {
+                this.hide();
+            }
+        },
+        onNodeUnselect(node) {
+            this.$emit('node-unselect', node);
+        },
+        onNodeToggle(keys) {
+            this.expandedKeys = keys;
+        },
+        onFirstHiddenFocus(event) {
+            const focusableEl = event.relatedTarget === this.$refs.focusInput ? DomHandler.getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
+
+            DomHandler.focus(focusableEl);
+        },
+        onLastHiddenFocus(event) {
+            const focusableEl = event.relatedTarget === this.$refs.focusInput ? DomHandler.getLastFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
+
+            DomHandler.focus(focusableEl);
+        },
+        onKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onArrowDownKey(event);
+                    break;
+
+                case 'Space':
+                case 'Enter':
+                case 'NumpadEnter':
+                    this.onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    this.onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    this.onTabKey(event);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onArrowDownKey(event) {
+            if (this.overlayVisible) return;
+
+            this.show();
+
+            this.$nextTick(() => {
+                const treeNodeEl = DomHandler.find(this.$refs.tree.$el, '[data-pc-section="treeitem"]');
+                const focusedElement = [...treeNodeEl].find((item) => item.getAttribute('tabindex') === '0');
+
+                DomHandler.focus(focusedElement);
+            });
+
+            event.preventDefault();
+        },
+        onEnterKey(event) {
+            if (this.overlayVisible) {
+                this.hide();
+            } else {
+                this.onArrowDownKey(event);
+            }
+
+            event.preventDefault();
+        },
+        onEscapeKey(event) {
+            if (this.overlayVisible) {
+                this.hide();
+                event.preventDefault();
+            }
+        },
+        onTabKey(event, pressedInInputText = false) {
+            if (!pressedInInputText) {
+                if (this.overlayVisible && this.hasFocusableElements()) {
+                    DomHandler.focus(this.$refs.firstHiddenFocusableElementOnOverlay);
+
+                    event.preventDefault();
+                }
+            }
+        },
+        hasFocusableElements() {
+            return DomHandler.getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0;
+        },
+        onOverlayEnter(el) {
+            ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
+
+            DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
+            this.alignOverlay();
+            this.focus();
+        },
+        onOverlayAfterEnter() {
+            this.bindOutsideClickListener();
+            this.bindScrollListener();
+            this.bindResizeListener();
+            this.scrollValueInView();
+            this.$emit('show');
+        },
+        onOverlayLeave() {
+            this.unbindOutsideClickListener();
+            this.unbindScrollListener();
+            this.unbindResizeListener();
+            this.$emit('hide');
+            this.overlay = null;
+        },
+        onOverlayAfterLeave(el) {
+            ZIndexUtils.clear(el);
+        },
+        focus() {
+            let focusableElements = DomHandler.getFocusableElements(this.overlay);
+
+            if (focusableElements && focusableElements.length > 0) {
+                focusableElements[0].focus();
+            }
+        },
+        alignOverlay() {
+            if (this.appendTo === 'self') {
+                DomHandler.relativePosition(this.overlay, this.$el);
+            } else {
+                this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+                DomHandler.absolutePosition(this.overlay, this.$el);
+            }
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event)) {
+                        this.hide();
+                    }
+
+                    this.selfClick = false;
+                };
+
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
+                    if (this.overlayVisible) {
+                        this.hide();
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible && !DomHandler.isTouchDevice()) {
+                        this.hide();
+                    }
+                };
+
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
+        isOutsideClicked(event) {
+            return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
+        },
+        overlayRef(el) {
+            this.overlay = el;
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.$el
+            });
+
+            this.selfClick = true;
+        },
+        onOverlayKeydown(event) {
+            if (event.code === 'Escape') this.hide();
+        },
+        findSelectedNodes(node, keys, selectedNodes) {
+            if (node) {
+                if (this.isSelected(node, keys)) {
+                    selectedNodes.push(node);
+                    delete keys[node.key];
+                }
+
+                if (Object.keys(keys).length && node.children) {
+                    for (let childNode of node.children) {
+                        this.findSelectedNodes(childNode, keys, selectedNodes);
+                    }
+                }
+            } else {
+                for (let childNode of this.options) {
+                    this.findSelectedNodes(childNode, keys, selectedNodes);
+                }
+            }
+        },
+        isSelected(node, keys) {
+            return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];
+        },
+        updateTreeState() {
+            let keys = { ...this.modelValue };
+
+            this.expandedKeys = {};
+
+            if (keys && this.options) {
+                this.updateTreeBranchState(null, null, keys);
+            }
+        },
+        updateTreeBranchState(node, path, keys) {
+            if (node) {
+                if (this.isSelected(node, keys)) {
+                    this.expandPath(path);
+                    delete keys[node.key];
+                }
+
+                if (Object.keys(keys).length && node.children) {
+                    for (let childNode of node.children) {
+                        path.push(node.key);
+                        this.updateTreeBranchState(childNode, path, keys);
+                    }
+                }
+            } else {
+                for (let childNode of this.options) {
+                    this.updateTreeBranchState(childNode, [], keys);
+                }
+            }
+        },
+        expandPath(path) {
+            if (path.length > 0) {
+                for (let key of path) {
+                    this.expandedKeys[key] = true;
+                }
+            }
+        },
+        scrollValueInView() {
+            if (this.overlay) {
+                let selectedItem = DomHandler.findSingle(this.overlay, '[data-p-selected="true"]');
+
+                if (selectedItem) {
+                    selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' });
+                }
+            }
+        }
+    },
+    computed: {
+        selectedNodes() {
+            let selectedNodes = [];
+
+            if (this.modelValue && this.options) {
+                let keys = { ...this.modelValue };
+
+                this.findSelectedNodes(null, keys, selectedNodes);
+            }
+
+            return selectedNodes;
+        },
+        label() {
+            let value = this.selectedNodes;
+
+            return value.length ? value.map((node) => node.label).join(', ') : this.placeholder;
+        },
+        emptyMessageText() {
+            return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
+        },
+        emptyValue() {
+            return !this.modelValue || Object.keys(this.modelValue).length === 0;
+        },
+        emptyOptions() {
+            return !this.options || this.options.length === 0;
+        },
+        listId() {
+            return this.id + '_list';
+        }
+    },
+    components: {
+        TSTree: Tree,
+        Chip,
+        Portal: Portal,
+        ChevronDownIcon: ChevronDownIcon
+    },
+    directives: {
+        ripple: Ripple
+    }
+};
+</script>

package/treeselect/package.json

@@ -0,0 +1,11 @@
+{
+    "main": "treeselect.mjs",
+    "module": "treeselect.mjs",
+    "types": "./TreeSelect.d.ts",
+    "browser": {
+        "./sfc": "./TreeSelect.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}

package/treeselect/style/TreeSelectStyle.d.ts

@@ -0,0 +1,55 @@
+/**
+ *
+ * TreeSelect is a form component to choose from hierarchical data.
+ *
+ * [Live Demo](https://www.primevuelab.org/treeselect/)
+ *
+ * @module treeselectstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum TreeSelectClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-treeselect',
+    /**
+     * Class name of the label container element
+     */
+    labelContainer = 'p-treeselect-label-container',
+    /**
+     * Class name of the label element
+     */
+    label = 'p-treeselect-label',
+    /**
+     * Class name of the chip item element
+     */
+    chipItem = 'p-treeselect-chip-item',
+    /**
+     * Class name of the chip element
+     */
+    pcChip = 'p-treeselect-chip',
+    /**
+     * Class name of the dropdown element
+     */
+    dropdown = 'p-treeselect-dropdown',
+    /**
+     * Class name of the dropdown icon element
+     */
+    dropdownIcon = 'p-treeselect-dropdown-icon',
+    /**
+     * Class name of the panel element
+     */
+    panel = 'p-treeselect-overlay',
+    /**
+     * Class name of the tree container element
+     */
+    treeContainer = 'p-treeselect-tree-container',
+    /**
+     * Class name of the empty message element
+     */
+    emptyMessage = 'p-treeselect-empty-message'
+}
+
+export interface TreeSelectStyle extends BaseStyle {}

package/treeselect/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "treeselectstyle.mjs",
+    "module": "treeselectstyle.mjs",
+    "types": "./TreeSelectStyle.d.ts",
+    "sideEffects": false
+}

package/treeselect/style/treeselectstyle.mjs

@@ -0,0 +1,55 @@
+import BaseStyle from '@primevuelab/core/base/style';
+
+var theme = function theme(_ref) {
+  var dt = _ref.dt;
+  return "\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n    background: ".concat(dt('treeselect.background'), ";\n    border: 1px solid ").concat(dt('treeselect.border.color'), ";\n    transition: background ").concat(dt('treeselect.transition.duration'), ", color ").concat(dt('treeselect.transition.duration'), ", border-color ").concat(dt('treeselect.transition.duration'), ", outline-color ").concat(dt('treeselect.transition.duration'), ", box-shadow ").concat(dt('treeselect.transition.duration'), ";\n    border-radius: ").concat(dt('treeselect.border.radius'), ";\n    outline-color: transparent;\n    box-shadow: ").concat(dt('treeselect.shadow'), ";\n}\n\n.p-treeselect:not(.p-disabled):hover {\n    border-color: ").concat(dt('treeselect.hover.border.color'), ";\n}\n\n.p-treeselect:not(.p-disabled).p-focus {\n    border-color: ").concat(dt('treeselect.focus.border.color'), ";\n    box-shadow: ").concat(dt('treeselect.focus.ring.shadow'), ";\n    outline: ").concat(dt('treeselect.focus.ring.width'), " ").concat(dt('treeselect.focus.ring.style'), " ").concat(dt('treeselect.focus.ring.color'), ";\n    outline-offset: ").concat(dt('treeselect.focus.ring.offset'), ";\n}\n\n.p-treeselect.p-variant-filled {\n    background: ").concat(dt('treeselect.filled.background'), ";\n}\n\n.p-treeselect.p-variant-filled.p-focus {\n    background: ").concat(dt('treeselect.filled.focus.background'), ";\n}\n\n.p-treeselect.p-invalid {\n    border-color: ").concat(dt('treeselect.invalid.border.color'), ";\n}\n\n.p-treeselect.p-disabled {\n    opacity: 1;\n    background: ").concat(dt('treeselect.disabled.background'), ";\n}\n\n.p-treeselect-dropdown {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    background: transparent;\n    color: ").concat(dt('treeselect.dropdown.color'), ";\n    width: ").concat(dt('treeselect.dropdown.width'), ";\n    border-top-right-radius: ").concat(dt('border.radius.md'), ";\n    border-bottom-right-radius: ").concat(dt('border.radius.md'), ";\n}\n\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n\n.p-treeselect-label {\n    display: flex;\n    align-items-center;\n    gap: calc(").concat(dt('treeselect.padding.y'), " / 2);\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    padding: ").concat(dt('treeselect.padding.y'), " ").concat(dt('treeselect.padding.x'), ";\n    color: ").concat(dt('treeselect.color'), ";\n}\n\n.p-treeselect-label.p-placeholder {\n    color: ").concat(dt('treeselect.placeholder.color'), ";\n}\n\n.p-treeselect.p-disabled .p-treeselect-label {\n    color: ").concat(dt('treeselect.disabled.color'), ";\n}\n\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n\n.p-treeselect .p-treeselect-overlay {\n    min-width: 100%;\n}\n\n.p-treeselect-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: ").concat(dt('treeselect.overlay.background'), ";\n    color: ").concat(dt('treeselect.overlay.color'), ";\n    border: 1px solid ").concat(dt('treeselect.overlay.border.color'), ";\n    border-radius: ").concat(dt('treeselect.overlay.border.radius'), ";\n    box-shadow: ").concat(dt('treeselect.overlay.shadow'), ";\n    overflow: hidden;\n}\n\n\n.p-treeselect-tree-container {\n    overflow: auto;\n}\n\n.p-treeselect-empty-message {\n    padding: ").concat(dt('treeselect.empty.message.padding'), ";\n    background: transparent;\n}\n\n.p-fluid .p-treeselect {\n    display: flex;\n}\n\n.p-treeselect-overlay .p-tree {\n    padding: ").concat(dt('treeselect.tree.padding'), ";\n}\n\n.p-treeselect-label .p-chip {\n    padding-top: calc(").concat(dt('treeselect.padding.y'), " / 2);\n    padding-bottom: calc(").concat(dt('treeselect.padding.y'), " / 2);\n    border-radius: ").concat(dt('treeselect.chip.border.radius'), ";\n}\n\n.p-treeselect-label:has(.p-chip) {\n    padding: calc(").concat(dt('treeselect.padding.y'), " / 2) calc(").concat(dt('treeselect.padding.x'), " / 2);\n}\n");
+};
+var inlineStyles = {
+  root: function root(_ref2) {
+    var props = _ref2.props;
+    return {
+      position: props.appendTo === 'self' ? 'relative' : undefined
+    };
+  }
+};
+var classes = {
+  root: function root(_ref3) {
+    var instance = _ref3.instance,
+      props = _ref3.props;
+    return ['p-treeselect p-component p-inputwrapper', {
+      'p-treeselect-display-chip': props.display === 'chip',
+      'p-disabled': props.disabled,
+      'p-invalid': props.invalid,
+      'p-focus': instance.focused,
+      'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
+      'p-inputwrapper-filled': !instance.emptyValue,
+      'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
+      'p-treeselect-open': instance.overlayVisible
+    }];
+  },
+  labelContainer: 'p-treeselect-label-container',
+  label: function label(_ref4) {
+    var instance = _ref4.instance,
+      props = _ref4.props;
+    return ['p-treeselect-label', {
+      'p-placeholder': instance.label === props.placeholder,
+      'p-treeselect-label-empty': !props.placeholder && instance.emptyValue
+    }];
+  },
+  chip: 'p-treeselect-chip-item',
+  pcChip: 'p-treeselect-chip',
+  dropdown: 'p-treeselect-dropdown',
+  dropdownIcon: 'p-treeselect-dropdown-icon',
+  panel: 'p-treeselect-overlay p-component',
+  treeContainer: 'p-treeselect-tree-container',
+  emptyMessage: 'p-treeselect-empty-message'
+};
+var TreeSelectStyle = BaseStyle.extend({
+  name: 'treeselect',
+  theme: theme,
+  classes: classes,
+  inlineStyles: inlineStyles
+});
+
+export { TreeSelectStyle as default };
+//# sourceMappingURL=treeselectstyle.mjs.map

package/treeselect/style/treeselectstyle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeselectstyle.mjs","sources":["../../../src/treeselect/style/TreeSelectStyle.js"],"sourcesContent":["import BaseStyle from '@primevuelab/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-treeselect {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n    background: ${dt('treeselect.background')};\n    border: 1px solid ${dt('treeselect.border.color')};\n    transition: background ${dt('treeselect.transition.duration')}, color ${dt('treeselect.transition.duration')}, border-color ${dt('treeselect.transition.duration')}, outline-color ${dt('treeselect.transition.duration')}, box-shadow ${dt(\n        'treeselect.transition.duration'\n    )};\n    border-radius: ${dt('treeselect.border.radius')};\n    outline-color: transparent;\n    box-shadow: ${dt('treeselect.shadow')};\n}\n\n.p-treeselect:not(.p-disabled):hover {\n    border-color: ${dt('treeselect.hover.border.color')};\n}\n\n.p-treeselect:not(.p-disabled).p-focus {\n    border-color: ${dt('treeselect.focus.border.color')};\n    box-shadow: ${dt('treeselect.focus.ring.shadow')};\n    outline: ${dt('treeselect.focus.ring.width')} ${dt('treeselect.focus.ring.style')} ${dt('treeselect.focus.ring.color')};\n    outline-offset: ${dt('treeselect.focus.ring.offset')};\n}\n\n.p-treeselect.p-variant-filled {\n    background: ${dt('treeselect.filled.background')};\n}\n\n.p-treeselect.p-variant-filled.p-focus {\n    background: ${dt('treeselect.filled.focus.background')};\n}\n\n.p-treeselect.p-invalid {\n    border-color: ${dt('treeselect.invalid.border.color')};\n}\n\n.p-treeselect.p-disabled {\n    opacity: 1;\n    background: ${dt('treeselect.disabled.background')};\n}\n\n.p-treeselect-dropdown {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    background: transparent;\n    color: ${dt('treeselect.dropdown.color')};\n    width: ${dt('treeselect.dropdown.width')};\n    border-top-right-radius: ${dt('border.radius.md')};\n    border-bottom-right-radius: ${dt('border.radius.md')};\n}\n\n.p-treeselect-label-container {\n    overflow: hidden;\n    flex: 1 1 auto;\n    cursor: pointer;\n}\n\n.p-treeselect-label {\n    display: flex;\n    align-items-center;\n    gap: calc(${dt('treeselect.padding.y')} / 2);\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    padding: ${dt('treeselect.padding.y')} ${dt('treeselect.padding.x')};\n    color: ${dt('treeselect.color')};\n}\n\n.p-treeselect-label.p-placeholder {\n    color: ${dt('treeselect.placeholder.color')};\n}\n\n.p-treeselect.p-disabled .p-treeselect-label {\n    color: ${dt('treeselect.disabled.color')};\n}\n\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n\n.p-treeselect .p-treeselect-overlay {\n    min-width: 100%;\n}\n\n.p-treeselect-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: ${dt('treeselect.overlay.background')};\n    color: ${dt('treeselect.overlay.color')};\n    border: 1px solid ${dt('treeselect.overlay.border.color')};\n    border-radius: ${dt('treeselect.overlay.border.radius')};\n    box-shadow: ${dt('treeselect.overlay.shadow')};\n    overflow: hidden;\n}\n\n\n.p-treeselect-tree-container {\n    overflow: auto;\n}\n\n.p-treeselect-empty-message {\n    padding: ${dt('treeselect.empty.message.padding')};\n    background: transparent;\n}\n\n.p-fluid .p-treeselect {\n    display: flex;\n}\n\n.p-treeselect-overlay .p-tree {\n    padding: ${dt('treeselect.tree.padding')};\n}\n\n.p-treeselect-label .p-chip {\n    padding-top: calc(${dt('treeselect.padding.y')} / 2);\n    padding-bottom: calc(${dt('treeselect.padding.y')} / 2);\n    border-radius: ${dt('treeselect.chip.border.radius')};\n}\n\n.p-treeselect-label:has(.p-chip) {\n    padding: calc(${dt('treeselect.padding.y')} / 2) calc(${dt('treeselect.padding.x')} / 2);\n}\n`;\n\nconst inlineStyles = {\n    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })\n};\n\nconst classes = {\n    root: ({ instance, props }) => [\n        'p-treeselect p-component p-inputwrapper',\n        {\n            'p-treeselect-display-chip': props.display === 'chip',\n            'p-disabled': props.disabled,\n            'p-invalid': props.invalid,\n            'p-focus': instance.focused,\n            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',\n            'p-inputwrapper-filled': !instance.emptyValue,\n            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,\n            'p-treeselect-open': instance.overlayVisible\n        }\n    ],\n    labelContainer: 'p-treeselect-label-container',\n    label: ({ instance, props }) => [\n        'p-treeselect-label',\n        {\n            'p-placeholder': instance.label === props.placeholder,\n            'p-treeselect-label-empty': !props.placeholder && instance.emptyValue\n        }\n    ],\n    chip: 'p-treeselect-chip-item',\n    pcChip: 'p-treeselect-chip',\n    dropdown: 'p-treeselect-dropdown',\n    dropdownIcon: 'p-treeselect-dropdown-icon',\n    panel: 'p-treeselect-overlay p-component',\n    treeContainer: 'p-treeselect-tree-container',\n    emptyMessage: 'p-treeselect-empty-message'\n};\n\nexport default BaseStyle.extend({\n    name: 'treeselect',\n    theme,\n    classes,\n    inlineStyles\n});\n"],"names":["theme","_ref","dt","concat","inlineStyles","root","_ref2","props","position","appendTo","undefined","classes","_ref3","instance","display","disabled","invalid","focused","variant","$primevue","config","inputStyle","inputVariant","emptyValue","overlayVisible","labelContainer","label","_ref4","placeholder","chip","pcChip","dropdown","dropdownIcon","panel","treeContainer","emptyMessage","BaseStyle","extend","name"],"mappings":"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"}