Fixed #5769 - Add OverlayBadge component, deprecate Badge directive

components/lib/badge/style/BadgeStyle.js

@@ -16,19 +16,6 @@ const theme = ({ dt }) => `
     line-height: ${dt('badge.height')};
 }
 
-.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: ${dt('badge.dot.size')};
     min-width: ${dt('badge.dot.size')};

components/lib/badgedirective/BadgeDirective.js

@@ -3,6 +3,7 @@ import BaseBadgeDirective from './BaseBadgeDirective';
 
 const BadgeDirective = BaseBadgeDirective.extend('badge', {
     mounted(el, binding) {
+        console.warn('Deprecated since v4. Use OverlayBadge component instead.');
         const id = UniqueComponentId() + '_badge';
 
         const badge = DomHandler.createElement('span', {

components/lib/index.json

@@ -2545,6 +2545,24 @@
                 }
             }
         },
+        "overlaybadge": {
+            "import": {
+                "name": "OverlayBadge",
+                "as": "OverlayBadge",
+                "from": "primevue/overlaybadge",
+                "local": "./components/lib/overlaybadge/OverlayBadge.vue"
+            },
+            "description": "OverlayBadge represents people using icon, label, image and badge.",
+            "style": {
+                "global": true,
+                "import": {
+                    "name": "OverlayBadgeStyle",
+                    "as": "OverlayBadgeStyle",
+                    "from": "primevue/overlaybadge/style",
+                    "local": "./components/lib/overlaybadge/style/OverlayBadgeStyle.js"
+                }
+            }
+        },
         "overlaypanel": {
             "import": {
                 "name": "OverlayPanel",

components/lib/overlaybadge/BaseOverlayBadge.vue

@@ -0,0 +1,16 @@
+<script>
+import Badge from 'primevue/badge';
+import OverlayBadgeStyle from 'primevue/overlaybadge/style';
+
+export default {
+    name: 'OverlayBadge',
+    extends: Badge,
+    style: OverlayBadgeStyle,
+    provide() {
+        return {
+            $pcOverlayBadge: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/overlaybadge/OverlayBadge.d.ts

@@ -0,0 +1,152 @@
+/**
+ *
+ * OverlayBadge represents people using icon, label, image and badge.
+ *
+ * [Live Demo](https://www.primevue.org/badge)
+ *
+ * @module overlaybadge
+ *
+ */
+import { VNode } from 'vue';
+import { BadgePassThroughOptions } from '../badge';
+import { ComponentHooks } from '../basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
+
+export declare type OverlayBadgePassThroughOptionType<T = any> = OverlayBadgePassThroughAttributes | ((options: OverlayBadgePassThroughMethodOptions<T>) => OverlayBadgePassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OverlayBadgePassThroughMethodOptions<T> {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: OverlayBadgeProps;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+    /**
+     * Defines parent instance.
+     */
+    parent: T;
+}
+
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface OverlayBadgeSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: OverlayBadgeProps;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface OverlayBadgePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OverlayBadgeProps.pt}
+ */
+export interface OverlayBadgePassThroughOptions<T = any> {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: OverlayBadgePassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the Badge.
+     * @see {@link BadgePassThroughOptions}
+     */
+    pcBadge?: BadgePassThroughOptions<OverlayBadgeSharedPassThroughMethodOptions>;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in OverlayBadge component.
+ */
+export interface OverlayBadgeProps {
+    /**
+     * Value to display inside the badge.
+     */
+    value?: string | number;
+    /**
+     * Severity type of the badge.
+     */
+    severity?: HintedString<'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast'> | null | undefined;
+    /**
+     * Size of the badge, valid options are 'small', 'large', and 'xlarge'.
+     */
+    size?: 'small' | 'large' | 'xlarge' | null | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {OverlayBadgePassThroughOptions}
+     */
+    pt?: PassThrough<OverlayBadgePassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in OverlayBadge component.
+ */
+export interface OverlayBadgeSlots {
+    /**
+     * Content can easily be customized with the default slot instead of using the built-in display.
+     */
+    default(): VNode[];
+}
+
+/**
+ * Defines valid emits in OverlayBadge component.
+ */
+export interface OverlayBadgeEmitsOptions {}
+
+export declare type OverlayBadgeEmits = EmitFn<OverlayBadgeEmitsOptions>;
+
+/**
+ * **PrimeVue - OverlayBadge**
+ *
+ * _OverlayBadge represents people using icon, label, image and badge._
+ *
+ * [Live Demo](https://www.primevue.org/badge/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const OverlayBadge: DefineComponent<OverlayBadgeProps, OverlayBadgeSlots, OverlayBadgeEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        OverlayBadge: GlobalComponentConstructor<OverlayBadgeProps, OverlayBadgeSlots, OverlayBadgeEmits>;
+    }
+}
+
+export default OverlayBadge;

components/lib/overlaybadge/OverlayBadge.vue

@@ -0,0 +1,16 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <slot />
+        <Badge v-bind="$props" :pt="ptm('pcBadge')" />
+    </div>
+</template>
+
+<script>
+import BaseOverlayBadge from './BaseOverlayBadge.vue';
+
+export default {
+    name: 'OverlayBadge',
+    extends: BaseOverlayBadge,
+    inheritAttrs: false
+};
+</script>

components/lib/overlaybadge/package.json

@@ -0,0 +1,12 @@
+{
+    "main": "./overlaybadge.cjs.js",
+    "module": "./overlaybadge.esm.js",
+    "unpkg": "./overlaybadge.min.js",
+    "types": "./OverlayBadge.d.ts",
+    "browser": {
+        "./sfc": "./OverlayBadge.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}

components/lib/overlaybadge/style/OverlayBadge.d.ts

@@ -0,0 +1,16 @@
+/**
+ *
+ * OverlayBadge wraps an input and an icon.
+ *
+ * [Live Demo](https://www.primevue.org/badge/)
+ *
+ * @module overlaybadgestyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum OverlayBadgeClasses {
+    root = 'p-overlaybadge'
+}
+
+export interface OverlayBadgeStyle extends BaseStyle {}

components/lib/overlaybadge/style/OverlayBadgeStyle.js

@@ -0,0 +1,26 @@
+import BaseStyle from 'primevue/base/style';
+
+const theme = ({ dt }) => `
+.p-overlaybadge {
+    position: relative;
+}
+
+.p-overlaybadge .p-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+    margin: 0;
+}
+`;
+
+const classes = {
+    root: 'p-overlaybadge'
+};
+
+export default BaseStyle.extend({
+    name: 'overlaybadge',
+    theme,
+    classes
+});

components/lib/overlaybadge/style/package.json

@@ -0,0 +1,7 @@
+{
+    "main": "./overlaybadgestyle.cjs.js",
+    "module": "./overlaybadgestyle.esm.js",
+    "unpkg": "./overlaybadgestyle.min.js",
+    "types": "./OverlayBadgeStyle.d.ts",
+    "sideEffects": false
+}

modules/nuxt-primevue/runtime/core/components/index.js

@@ -84,6 +84,6 @@ const messages = ['Message', 'InlineMessage', { name: 'Toast', use: { as: 'Toast
 
 const media = ['Carousel', 'Galleria', 'Image'];
 
-const misc = ['Avatar', 'AvatarGroup', 'Badge', 'BlockUI', 'Chip', 'Inplace', 'MeterGroup', 'ScrollTop', 'Skeleton', 'ProgressBar', 'ProgressSpinner', 'Tag', 'Terminal'];
+const misc = ['Avatar', 'AvatarGroup', 'Badge', 'BlockUI', 'Chip', 'Inplace', 'MeterGroup', 'OverlayBadge', 'ScrollTop', 'Skeleton', 'ProgressBar', 'ProgressSpinner', 'Tag', 'Terminal'];
 
 export const components = [...form, ...button, ...data, ...panel, ...overlay, ...file, ...menu, ...chart, ...messages, ...media, ...misc].map((c) => (typeof c === 'string' ? { name: c } : c));

nuxt-vite.config.js

@@ -74,6 +74,7 @@ const STYLE_ALIAS = {
     'primevue/multiselect/style': path.resolve(__dirname, './components/lib/multiselect/style/MultiSelectStyle.js'),
     'primevue/orderlist/style': path.resolve(__dirname, './components/lib/orderlist/style/OrderListStyle.js'),
     'primevue/organizationchart/style': path.resolve(__dirname, './components/lib/organizationchart/style/OrganizationChartStyle.js'),
+    'primevue/overlaybadge/style': path.resolve(__dirname, './components/lib/overlaybadge/style/OverlayBadgeStyle.js'),
     'primevue/overlaypanel/style': path.resolve(__dirname, './components/lib/overlaypanel/style/OverlayPanelStyle.js'),
     'primevue/paginator/style': path.resolve(__dirname, './components/lib/paginator/style/PaginatorStyle.js'),
     'primevue/panel/style': path.resolve(__dirname, './components/lib/panel/style/PanelStyle.js'),

rollup.config.js

@@ -135,6 +135,7 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/multiselect/style': 'primevue.multiselect.style',
     'primevue/orderlist/style': 'primevue.orderlist.style',
     'primevue/organizationchart/style': 'primevue.organizationchart.style',
+    'primevue/overlaybadge/style': 'primevue.overlaybadge.style',
     'primevue/overlaypanel/style': 'primevue.overlaypanel.style',
     'primevue/paginator/style': 'primevue.paginator.style',
     'primevue/panel/style': 'primevue.panel.style',