Refactor #3965 - For Breadcrumb

components/lib/breadcrumb/BaseBreadcrumb.vue

@@ -0,0 +1,87 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-breadcrumb {
+    overflow-x: auto;
+}
+
+.p-breadcrumb .p-breadcrumb-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+
+.p-breadcrumb .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-breadcrumb .p-menuitem-link {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+}
+
+.p-breadcrumb .p-menuitem-separator {
+    display: flex;
+    align-items: center;
+}
+
+.p-breadcrumb::-webkit-scrollbar {
+    display: none;
+}
+`;
+
+const classes = {
+    root: 'p-breadcrumb p-component',
+    menu: 'p-breadcrumb-list',
+    home: 'p-breadcrumb-home',
+    separator: 'p-menuitem-separator',
+    menuitem: ({ context }) => ['p-menuitem', { 'p-disabled': context.disabled() }],
+    action: ({ context, routerProps }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': routerProps && routerProps.isActive,
+            'router-link-active-exact': context.exact && routerProps && routerProps.isExactActive
+        }
+    ],
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text'
+};
+
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_breadcrumb_style', manual: true });
+
+export default {
+    name: 'BaseBreadcrumb',
+    extends: BaseComponent,
+    props: {
+        model: {
+            type: Array,
+            default: null
+        },
+        home: {
+            type: null,
+            default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>

components/lib/breadcrumb/Breadcrumb.d.ts

@@ -96,6 +96,11 @@ export interface BreadcrumbProps {
      * @type {BreadcrumbPassThroughOptions}
      */
     pt?: BreadcrumbPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/breadcrumb/Breadcrumb.vue

@@ -1,9 +1,9 @@
 <template>
-    <nav class="p-breadcrumb p-component" v-bind="ptm('root')">
+    <nav :class="cx('root')" v-bind="ptm('root')">
-        <ol class="p-breadcrumb-list" v-bind="ptm('menu')">
+        <ol :class="cx('menu')" v-bind="ptm('menu')">
-            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :templates="$slots" :exact="exact" :pt="pt" />
+            <BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :exact="exact" :pt="pt" v-bind="ptm('home')" />
             <template v-for="(item, i) of model" :key="item.label">
-                <li v-if="home || i !== 0" class="p-menuitem-separator" v-bind="ptm('separator')">
+                <li v-if="home || i !== 0" :class="cx('separator')" v-bind="ptm('separator')">
                     <slot name="separator">
                         <ChevronRightIcon aria-hidden="true" v-bind="ptm('separatorIcon')" />
                     </slot>
@@ -15,64 +15,16 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import ChevronRightIcon from 'primevue/icons/chevronright';
+import BaseBreadcrumb from './BaseBreadcrumb.vue';
 import BreadcrumbItem from './BreadcrumbItem.vue';
 
 export default {
     name: 'Breadcrumb',
-    extends: BaseComponent,
+    extends: BaseBreadcrumb,
-    props: {
-        model: {
-            type: Array,
-            default: null
-        },
-        home: {
-            type: null,
-            default: null
-        },
-        exact: {
-            type: Boolean,
-            default: true
-        }
-    },
     components: {
         BreadcrumbItem: BreadcrumbItem,
         ChevronRightIcon: ChevronRightIcon
     }
 };
 </script>
-
-<style>
-.p-breadcrumb {
-    overflow-x: auto;
-}
-
-.p-breadcrumb .p-breadcrumb-list {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-}
-
-.p-breadcrumb .p-menuitem-text {
-    line-height: 1;
-}
-
-.p-breadcrumb .p-menuitem-link {
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-}
-
-.p-breadcrumb .p-menuitem-separator {
-    display: flex;
-    align-items: center;
-}
-
-.p-breadcrumb::-webkit-scrollbar {
-    display: none;
-}
-</style>

components/lib/breadcrumb/BreadcrumbItem.vue

@@ -1,17 +1,17 @@
 <template>
-    <li v-if="visible()" :class="containerClass()" v-bind="ptm('menuitem')">
+    <li v-if="visible()" :class="[getCXOptions('menuitem'), item.class]" v-bind="ptm('menuitem')">
         <template v-if="!templates || !templates.item">
             <router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                <a :href="href" :class="linkClass({ isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
+                <a :href="href" :class="getCXOptions('action', { isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
-                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
+                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="getCXOptions('icon')" />
-                    <span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" v-bind="ptm('icon')" />
+                    <span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="ptm('icon')" />
-                    <span v-if="item.label" class="p-menuitem-text" v-bind="ptm('label')">{{ label() }}</span>
+                    <span v-if="item.label" :class="getCXOptions('label')" v-bind="ptm('label')">{{ label() }}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
+            <a v-else :href="item.url || '#'" :class="getCXOptions('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
-                <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
+                <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="getCXOptions('icon')" />
-                <span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" v-bind="ptm('icon')" />
+                <span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="ptm('icon')" />
-                <span v-if="item.label" class="p-menuitem-text" v-bind="ptm('label')">{{ label() }}</span>
+                <span v-if="item.label" :class="getCXOptions('label')" v-bind="ptm('label')">{{ label() }}</span>
             </a>
         </template>
         <component v-else :is="templates.item" :item="item"></component>
@@ -19,11 +19,11 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseBreadcrumb from './BaseBreadcrumb.vue';
 
 export default {
     name: 'BreadcrumbItem',
-    extends: BaseComponent,
+    extends: BaseBreadcrumb,
     props: {
         item: null,
         templates: null,
@@ -31,6 +31,12 @@ export default {
         index: null
     },
     methods: {
+        getCXOptions(key, params) {
+            return this.cx(key, {
+                ...params,
+                context: this
+            });
+        },
         onClick(event, navigate) {
             if (this.item.command) {
                 this.item.command({
@@ -43,18 +49,6 @@ export default {
                 navigate(event);
             }
         },
-        containerClass() {
-            return ['p-menuitem', { 'p-disabled': this.disabled() }, this.item.class];
-        },
-        linkClass(routerProps) {
-            return [
-                'p-menuitem-link',
-                {
-                    'router-link-active': routerProps && routerProps.isActive,
-                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-                }
-            ];
-        },
         visible() {
             return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
         },