Refactor #3965 - For Badge

assets/styles/primevue.css

@@ -1,4 +1,5 @@
 @import '../../components/lib/common/Common.css';
+/* Todo: badge.css should be removed for unstyled */
 @import '../../components/lib/badge/Badge.css';
 @import '../../components/lib/button/Button.css';
 @import '../../components/lib/checkbox/Checkbox.css';

components/lib/badge/Badge.d.ts

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

components/lib/badge/Badge.vue

@@ -1,49 +1,14 @@
 <template>
-    <span :class="badgeClass" v-bind="ptm('root')">
+    <span :class="cx('root')" v-bind="ptm('root')">
         <slot>{{ value }}</slot>
     </span>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
-import { ObjectUtils } from 'primevue/utils';
+import BaseBadge from './BaseBadge.vue';
 
 export default {
     name: 'Badge',
-    extends: BaseComponent,
-    props: {
-        value: {
-            type: [String, Number],
-            default: null
-        },
-        severity: {
-            type: String,
-            default: null
-        },
-        size: {
-            type: String,
-            default: null
-        }
-    },
-    computed: {
-        containerClass() {
-            return this.$slots.default ? 'p-overlay-badge' : this.badgeClass;
-        },
-        badgeClass() {
-            return [
-                'p-badge p-component',
-                {
-                    'p-badge-no-gutter': ObjectUtils.isNotEmpty(this.value) && String(this.value).length === 1,
-                    'p-badge-dot': ObjectUtils.isEmpty(this.value) && !this.$slots.default,
-                    'p-badge-lg': this.size === 'large',
-                    'p-badge-xl': this.size === 'xlarge',
-                    'p-badge-info': this.severity === 'info',
-                    'p-badge-success': this.severity === 'success',
-                    'p-badge-warning': this.severity === 'warning',
-                    'p-badge-danger': this.severity === 'danger'
-                }
-            ];
-        }
-    }
+    extends: BaseBadge
 };
 </script>

components/lib/badge/BaseBadge.vue

@@ -0,0 +1,87 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+import { ObjectUtils } from 'primevue/utils';
+const styles = `
+.p-badge {
+    display: inline-block;
+    border-radius: 10px;
+    text-align: center;
+    padding: 0 .5rem;
+}
+
+.p-overlay-badge {
+    position: relative;
+}
+
+.p-overlay-badge .p-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%,-50%);
+    transform-origin: 100% 0;
+    margin: 0;
+}
+
+.p-badge-dot {
+    width: .5rem;
+    min-width: .5rem;
+    height: .5rem;
+    border-radius: 50%;
+    padding: 0;
+}
+
+.p-badge-no-gutter {
+    padding: 0;
+    border-radius: 50%;
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-badge p-component',
+        {
+            'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
+            'p-badge-dot': ObjectUtils.isEmpty(props.value) && !props.$slots.default,
+            'p-badge-lg': props.size === 'large',
+            'p-badge-xl': props.size === 'xlarge',
+            'p-badge-info': props.severity === 'info',
+            'p-badge-success': props.severity === 'success',
+            'p-badge-warning': props.severity === 'warning',
+            'p-badge-danger': props.severity === 'danger'
+        }
+    ]
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_divider_style', manual: true });
+
+export default {
+    name: 'BaseAvatar',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: [String, Number],
+            default: null
+        },
+        severity: {
+            type: String,
+            default: null
+        },
+        size: {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>