Refactor #3965 - For TreeSelect

components/lib/treeselect/BaseTreeSelect.vue

@@ -0,0 +1,187 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-treeselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-treeselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.p-treeselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+}
+
+.p-treeselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.p-treeselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.p-treeselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.p-treeselect .p-treeselect-panel {
+    min-width: 100%;
+}
+
+.p-treeselect-items-wrapper {
+    overflow: auto;
+}
+
+.p-fluid .p-treeselect {
+    display: flex;
+}
+`;
+
+const inlineStyles = {
+    root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
+};
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-treeselect p-component p-inputwrapper',
+        {
+            'p-treeselect-chip': props.display === 'chip',
+            'p-disabled': props.disabled,
+            'p-focus': instance.focused,
+            'p-inputwrapper-filled': !instance.emptyValue,
+            'p-inputwrapper-focus': instance.focused || instance.overlayVisible
+        }
+    ],
+    hiddenInputWrapper: 'p-hidden-accessible',
+    labelContainer: 'p-treeselect-label-container',
+    label: ({ instance, props }) => [
+        'p-treeselect-label',
+        {
+            'p-placeholder': instance.label === props.placeholder,
+            'p-treeselect-label-empty': !props.placeholder && instance.emptyValue
+        }
+    ],
+    token: 'p-treeselect-token',
+    tokenLabel: 'p-treeselect-token-label',
+    trigger: 'p-treeselect-trigger',
+    triggerIcon: 'p-treeselect-trigger-icon',
+    panel: ({ instance }) => [
+        'p-treeselect-panel p-component',
+        {
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    wrapper: 'p-treeselect-items-wrapper',
+    emptyMessage: 'p-treeselect-empty-message'
+};
+
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_treeselect_style', manual: true });
+
+export default {
+    name: 'BaseTreeSelect',
+    extends: BaseComponent,
+    props: {
+        modelValue: null,
+        options: Array,
+        scrollHeight: {
+            type: String,
+            default: '400px'
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: Number,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: 'single'
+        },
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
+        emptyMessage: {
+            type: String,
+            default: null
+        },
+        display: {
+            type: String,
+            default: 'comma'
+        },
+        metaKeySelection: {
+            type: Boolean,
+            default: true
+        },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: [String, Object],
+            default: null
+        },
+        inputStyle: {
+            type: Object,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
+        panelClass: {
+            type: [String, Object],
+            default: null
+        },
+        panelProps: {
+            type: null,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        inlineStyles
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>

components/lib/treeselect/TreeSelect.d.ts

@@ -196,6 +196,11 @@ export interface TreeSelectProps {
      * @type {TreeSelectPassThroughOptions}
      */
     pt?: TreeSelectPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
@@ -256,7 +261,12 @@ export interface TreeSelectSlots {
     /**
      * Custom indicator template.
      */
-    triggericon(): VNode[];
+    triggericon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom item toggler icon template.
      * @param {Object} scope - item toggler icon slot's params.

components/lib/treeselect/TreeSelect.vue

@@ -1,6 +1,6 @@
 <template>
-    <div ref="container" :class="containerClass" @click="onClick" v-bind="ptm('root')">
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onClick" v-bind="ptm('root')">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
+        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
                 :id="inputId"
@@ -22,31 +22,31 @@
                 v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
             />
         </div>
-        <div class="p-treeselect-label-container" v-bind="ptm('labelContainer')">
+        <div :class="cx('labelContainer')" v-bind="ptm('labelContainer')">
-            <div :class="labelClass" v-bind="ptm('label')">
+            <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="p-treeselect-token" v-bind="ptm('token')">
+                        <div v-for="node of selectedNodes" :key="node.key" :class="cx('token')" v-bind="ptm('token')">
-                            <span class="p-treeselect-token-label" v-bind="ptm('tokenLabel')">{{ node.label }}</span>
+                            <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ node.label }}</span>
                         </div>
                         <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
                     </template>
                 </slot>
             </div>
         </div>
-        <div class="p-treeselect-trigger" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('trigger')">
+        <div :class="cx('trigger')" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('trigger')">
-            <slot name="triggericon">
+            <slot name="triggericon" :class="cx('triggerIcon')">
-                <component :is="'ChevronDownIcon'" class="p-treeselect-trigger-icon" v-bind="ptm('triggerIcon')" />
+                <component :is="'ChevronDownIcon'" :class="cx('triggerIcon')" v-bind="ptm('triggerIcon')" />
             </slot>
         </div>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="overlayVisible" :ref="overlayRef" @click="onOverlayClick" :class="panelStyleClass" @keydown="onOverlayKeydown" v-bind="{ ...panelProps, ...ptm('panel') }">
+                <div v-if="overlayVisible" :ref="overlayRef" @click="onOverlayClick" :class="[cx('panel'), panelClass]" @keydown="onOverlayKeydown" v-bind="{ ...panelProps, ...ptm('panel') }">
                     <slot name="header" :value="modelValue" :options="options"></slot>
-                    <div class="p-treeselect-items-wrapper" :style="{ 'max-height': scrollHeight }" v-bind="ptm('wrapper')">
+                    <div :class="cx('panel')" :style="{ 'max-height': scrollHeight }" v-bind="ptm('wrapper')">
                         <TSTree
                             ref="tree"
                             :id="listId"
@@ -63,6 +63,7 @@
                             @node-unselect="onNodeUnselect"
                             :level="0"
                             :pt="ptm('tree')"
+                            data-pc-section="tree"
                         >
                             <template v-if="$slots.itemtogglericon" #togglericon="iconProps">
                                 <slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
@@ -71,7 +72,7 @@
                                 <slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
                             </template>
                         </TSTree>
-                        <div v-if="emptyOptions" class="p-treeselect-empty-message" v-bind="ptm('emptyMessage')">
+                        <div v-if="emptyOptions" :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
                             <slot name="empty">{{ emptyMessageText }}</slot>
                         </div>
                     </div>
@@ -83,90 +84,18 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import Tree from 'primevue/tree';
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import BaseTreeSelect from './BaseTreeSelect.vue';
 
 export default {
     name: 'TreeSelect',
-    extends: BaseComponent,
+    extends: BaseTreeSelect,
     emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur'],
-    props: {
-        modelValue: null,
-        options: Array,
-        scrollHeight: {
-            type: String,
-            default: '400px'
-        },
-        placeholder: {
-            type: String,
-            default: null
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        tabindex: {
-            type: Number,
-            default: null
-        },
-        selectionMode: {
-            type: String,
-            default: 'single'
-        },
-        appendTo: {
-            type: String,
-            default: 'body'
-        },
-        emptyMessage: {
-            type: String,
-            default: null
-        },
-        display: {
-            type: String,
-            default: 'comma'
-        },
-        metaKeySelection: {
-            type: Boolean,
-            default: true
-        },
-        inputId: {
-            type: String,
-            default: null
-        },
-        inputClass: {
-            type: [String, Object],
-            default: null
-        },
-        inputStyle: {
-            type: Object,
-            default: null
-        },
-        inputProps: {
-            type: null,
-            default: null
-        },
-        panelClass: {
-            type: [String, Object],
-            default: null
-        },
-        panelProps: {
-            type: null,
-            default: null
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        }
-    },
     data() {
         return {
             focused: false,
@@ -231,7 +160,7 @@ export default {
             this.$emit('blur', event);
         },
         onClick(event) {
-            if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
+            if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target))) {
                 if (this.overlayVisible) this.hide();
                 else this.show();
 
@@ -282,7 +211,7 @@ export default {
             this.show();
 
             this.$nextTick(() => {
-                const treeNodeEl = DomHandler.find(this.$refs.tree.$el, '.p-treenode');
+                const treeNodeEl = DomHandler.find(this.$refs.tree.$el, '[data-pc-section="treeitem"]');
                 const focusedElement = [...treeNodeEl].find((item) => item.getAttribute('tabindex') === '0');
 
                 DomHandler.focus(focusedElement);
@@ -307,6 +236,8 @@ export default {
         },
         onOverlayEnter(el) {
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
+
+            DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
             this.alignOverlay();
             this.bindOutsideClickListener();
             this.bindScrollListener();
@@ -459,7 +390,7 @@ export default {
         },
         scrollValueInView() {
             if (this.overlay) {
-                let selectedItem = DomHandler.findSingle(this.overlay, 'li.p-highlight');
+                let selectedItem = DomHandler.findSingle(this.overlay, '[data-p-highlight="true"]');
 
                 if (selectedItem) {
                     selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' });
@@ -468,37 +399,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return [
-                'p-treeselect p-component p-inputwrapper',
-                {
-                    'p-treeselect-chip': this.display === 'chip',
-                    'p-disabled': this.disabled,
-                    'p-focus': this.focused,
-                    'p-inputwrapper-filled': !this.emptyValue,
-                    'p-inputwrapper-focus': this.focused || this.overlayVisible
-                }
-            ];
-        },
-        labelClass() {
-            return [
-                'p-treeselect-label',
-                {
-                    'p-placeholder': this.label === this.placeholder,
-                    'p-treeselect-label-empty': !this.placeholder && this.emptyValue
-                }
-            ];
-        },
-        panelStyleClass() {
-            return [
-                'p-treeselect-panel p-component',
-                this.panelClass,
-                {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }
-            ];
-        },
         selectedNodes() {
             let selectedNodes = [];
 
@@ -538,63 +438,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-treeselect {
-    display: inline-flex;
-    cursor: pointer;
-    position: relative;
-    user-select: none;
-}
-
-.p-treeselect-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-
-.p-treeselect-label-container {
-    overflow: hidden;
-    flex: 1 1 auto;
-    cursor: pointer;
-}
-
-.p-treeselect-label {
-    display: block;
-    white-space: nowrap;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.p-treeselect-label-empty {
-    overflow: hidden;
-    visibility: hidden;
-}
-
-.p-treeselect-token {
-    cursor: default;
-    display: inline-flex;
-    align-items: center;
-    flex: 0 0 auto;
-}
-
-.p-treeselect .p-treeselect-panel {
-    min-width: 100%;
-}
-
-.p-treeselect-panel {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.p-treeselect-items-wrapper {
-    overflow: auto;
-}
-
-.p-fluid .p-treeselect {
-    display: flex;
-}
-</style>