Refactor #3965 - For Accordion

primefaces · May 23, 2023 · e58fc57 · e58fc57
1 parent 78552d8
commit e58fc57
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 112 deletions.
diff --git a/components/lib/accordion/Accordion.d.ts b/components/lib/accordion/Accordion.d.ts
@@ -128,6 +128,11 @@ export interface AccordionProps {
      * @type {AccordionPassThroughOptions}
      */
     pt?: AccordionPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
@@ -1,10 +1,17 @@
 <template>
-    <div class="p-accordion p-component" v-bind="ptm('root')">
-        <div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i" v-bind="getTabPT(tab, 'root', i)">
-            <div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header', i) }">
+    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="accordion" data-pc-section="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-section="root" :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-pc-section="header"
+                :data-p-highlight="isTabActive(i)"
+                :data-p-disabled="getTabProp(tab, 'disabled')"
+            >
                 <a
                     :id="getTabHeaderActionId(i)"
-                    class="p-accordion-header-link p-accordion-header-action"
+                    :class="cx('tab.headerAction')"
                     :tabindex="getTabProp(tab, 'disabled') ? -1 : tabindex"
                     role="button"
                     :aria-disabled="getTabProp(tab, 'disabled')"
@@ -13,11 +20,12 @@
                     @click="onTabClick($event, tab, i)"
                     @keydown="onTabKeyDown($event, tab, i)"
                     v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
+                    data-pc-section="headeraction"
                 >
                     <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="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="['p-accordion-toggle-icon', collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
-                    <component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="['p-accordion-toggle-icon', expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
-                    <span v-if="tab.props && tab.props.header" class="p-accordion-header-text" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
+                    <component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('tab.headerIcon'), collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" data-pc-section="headericon" />
+                    <component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" data-pc-section="headericon" />
+                    <span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)" data-pc-section="headertitle">{{ tab.props.header }}</span>
                     <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
                 </a>
             </div>
@@ -27,12 +35,13 @@
                     v-show="lazy ? true : isTabActive(i)"
                     :id="getTabContentId(i)"
                     :style="getTabProp(tab, 'contentStyle')"
-                    :class="getTabContentClass(tab)"
+                    :class="[cx('tab.toggleableContent'), getTabProp(tab, 'contentClass')]"
                     role="region"
                     :aria-labelledby="getTabHeaderActionId(i)"
                     v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent', i) }"
+                    data-pc-section="toggleablecontent"
                 >
-                    <div class="p-accordion-content" v-bind="getTabPT(tab, 'content', i)">
+                    <div :class="cx('tab.content')" v-bind="getTabPT(tab, 'content', i)" data-pc-section="content">
                         <component :is="tab"></component>
                     </div>
                 </div>
@@ -42,46 +51,16 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import BaseAccordion from './BaseAccordion.vue';
 
 export default {
     name: 'Accordion',
-    extends: BaseComponent,
+    extends: BaseAccordion,
     emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
-    props: {
-        multiple: {
-            type: Boolean,
-            default: false
-        },
-        activeIndex: {
-            type: [Number, Array],
-            default: null
-        },
-        lazy: {
-            type: Boolean,
-            default: false
-        },
-        expandIcon: {
-            type: String,
-            default: undefined
-        },
-        collapseIcon: {
-            type: String,
-            default: undefined
-        },
-        tabindex: {
-            type: Number,
-            default: 0
-        },
-        selectOnFocus: {
-            type: Boolean,
-            default: false
-        }
-    },
     data() {
         return {
             id: this.$attrs.id,
@@ -194,15 +173,15 @@ export default {
         },
         findNextHeaderAction(tabElement, selfCheck = false) {
             const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
-            const headerElement = DomHandler.findSingle(nextTabElement, '.p-accordion-header');
+            const headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
 
-            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
+            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, '.p-accordion-header');
+            const headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
 
-            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
+            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);
@@ -235,33 +214,12 @@ export default {
                 DomHandler.focus(element);
 
                 if (this.selectOnFocus) {
-                    const index = parseInt(element.parentElement.parentElement.dataset.index, 10);
+                    const index = parseInt(element.parentElement.parentElement.dataset.pcIndex, 10);
                     const tab = this.tabs[index];
 
                     this.changeActiveIndex(event, tab, index);
                 }
             }
-        },
-        getTabClass(i) {
-            return [
-                'p-accordion-tab',
-                {
-                    'p-accordion-tab-active': this.isTabActive(i)
-                }
-            ];
-        },
-        getTabHeaderClass(tab, i) {
-            return [
-                'p-accordion-header',
-                this.getTabProp(tab, 'headerClass'),
-                {
-                    'p-highlight': this.isTabActive(i),
-                    'p-disabled': this.getTabProp(tab, 'disabled')
-                }
-            ];
-        },
-        getTabContentClass(tab) {
-            return ['p-toggleable-content', this.getTabProp(tab, 'contentClass')];
         }
     },
     computed: {
@@ -290,22 +248,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-accordion-header-action {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    user-select: none;
-    position: relative;
-    text-decoration: none;
-}
-
-.p-accordion-header-action:focus {
-    z-index: 1;
-}
-
-.p-accordion-header-text {
-    line-height: 1;
-}
-</style>
diff --git a/components/lib/accordion/BaseAccordion.vue b/components/lib/accordion/BaseAccordion.vue
@@ -0,0 +1,95 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-accordion-header-action {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    position: relative;
+    text-decoration: none;
+}
+
+.p-accordion-header-action:focus {
+    z-index: 1;
+}
+
+.p-accordion-header-text {
+    line-height: 1;
+}
+`;
+
+const classes = {
+    root: 'p-accordion p-component',
+    tab: {
+        root: ({ instance, index }) => [
+            'p-accordion-tab',
+            {
+                'p-accordion-tab-active': instance.isTabActive(index)
+            }
+        ],
+        header: ({ instance, tab, index }) => [
+            'p-accordion-header',
+            {
+                'p-highlight': instance.isTabActive(index),
+                'p-disabled': instance.getTabProp(tab, 'disabled')
+            }
+        ],
+        headerAction: 'p-accordion-header-link p-accordion-header-action',
+        headerIcon: 'p-accordion-toggle-icon',
+        headerTitle: 'p-accordion-header-text',
+        toggleableContent: 'p-toggleable-content',
+        content: 'p-accordion-content'
+    }
+};
+
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true });
+
+export default {
+    name: 'BaseAccordion',
+    extends: BaseComponent,
+    props: {
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        activeIndex: {
+            type: [Number, Array],
+            default: null
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        },
+        expandIcon: {
+            type: String,
+            default: undefined
+        },
+        collapseIcon: {
+            type: String,
+            default: undefined
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>
diff --git a/components/lib/accordiontab/AccordionTab.vue b/components/lib/accordiontab/AccordionTab.vue
@@ -3,21 +3,10 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseAccordionTab from './BaseAccordionTab.vue';
 
 export default {
     name: 'AccordionTab',
-    extends: BaseComponent,
-    props: {
-        header: null,
-        headerStyle: null,
-        headerClass: null,
-        headerProps: null,
-        headerActionProps: null,
-        contentStyle: null,
-        contentClass: null,
-        contentProps: null,
-        disabled: Boolean
-    }
+    extends: BaseAccordionTab
 };
 </script>
diff --git a/components/lib/accordiontab/BaseAccordionTab.vue b/components/lib/accordiontab/BaseAccordionTab.vue
@@ -0,0 +1,19 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+
+export default {
+    name: 'BaseAccordionTab',
+    extends: BaseComponent,
+    props: {
+        header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
+        disabled: Boolean
+    }
+};
+</script>
diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
@@ -28,15 +28,19 @@ export default {
         }
     },
     methods: {
-        getOption(options, key = '') {
+        getOptionValue(options, key = '', params = {}) {
             const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
             const fKey = fKeys.shift();
 
-            return fKey ? (typeof options === 'object' ? this.getOption(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], fKeys.join('.')) : undefined) : options;
+            return fKey
+                ? ObjectUtils.isObject(options)
+                    ? this.getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
+                    : undefined
+                : ObjectUtils.getItemValue(options, params);
         },
         getPTValue(obj = {}, key = '', params = {}) {
-            const self = ObjectUtils.getItemValue(this.getOption(obj, key), params);
-            const globalPT = ObjectUtils.getItemValue(this.getOption(this.defaultPT, key), params);
+            const self = this.getOptionValue(obj, key, params);
+            const globalPT = this.getOptionValue(this.defaultPT, key, params);
             const merged = mergeProps(self, globalPT);
 
             return merged;
@@ -53,16 +57,16 @@ export default {
             return this.getPTValue(obj, key, params);
         },
         cx(key = '', params = {}) {
-            return !this.isUnstyled ? ObjectUtils.getItemValue(this.getOption(this.$options.css && this.$options.css.classes, key), { instance: this, props: this.$props, state: this.$data, ...params }) : undefined;
+            return !this.isUnstyled ? this.getOptionValue(this.$options.css && this.$options.css.classes, key, { instance: this, props: this.$props, state: this.$data, ...params }) : undefined;
         },
         cxo(obj = {}, key = '', params = {}) {
             // @todo
-            return !this.isUnstyled ? ObjectUtils.getItemValue(this.getOption(obj.css && obj.css.classes, key), { instance: obj, props: obj && obj.props, state: obj && obj.data, ...params }) : undefined;
+            return !this.isUnstyled ? this.getOptionValue(obj.css && obj.css.classes, key, { instance: obj, props: obj && obj.props, state: obj && obj.data, ...params }) : undefined;
         },
         sx(key = '', when = true, params = {}) {
             if (when) {
-                const self = ObjectUtils.getItemValue(this.getOption(this.$options.css && this.$options.css.inlineStyles, key), { instance: this, props: this.$props, state: this.$data, ...params });
-                const base = ObjectUtils.getItemValue(this.getOption(inlineStyles, key), { instance: this, props: this.$props, state: this.$data, ...params });
+                const self = this.getOptionValue(this.$options.css && this.$options.css.inlineStyles, key, { instance: this, props: this.$props, state: this.$data, ...params });
+                const base = this.getOptionValue(inlineStyles, key, { instance: this, props: this.$props, state: this.$data, ...params });
 
                 return [base, self];
             }
@@ -72,7 +76,7 @@ export default {
     },
     computed: {
         defaultPT() {
-            return ObjectUtils.getItemValue(this.getOption(this.$primevue.config.pt, this.$.type.name), this.defaultsParams);
+            return this.getOptionValue(this.$primevue.config.pt, this.$.type.name, this.defaultsParams);
         },
         defaultsParams() {
             return { instance: this };