Visual updates for OverlayBadge

components/lib/overlaybadge/style/OverlayBadgeStyle.js

@@ -12,6 +12,9 @@ const theme = ({ dt }) => `
     transform: translate(50%, -50%);
     transform-origin: 100% 0;
     margin: 0;
+    outline-width: ${dt('overlaybadge.outline.width')};
+    outline-style: solid;
+    outline-color: ${dt('overlaybadge.outline.color')};
 }
 `;
 

components/lib/themes/aura/index.js

@@ -44,6 +44,7 @@ import metergroup from 'primevue/themes/aura/metergroup';
 import multiselect from 'primevue/themes/aura/multiselect';
 import orderlist from 'primevue/themes/aura/orderlist';
 import organizationchart from 'primevue/themes/aura/organizationchart';
+import overlaybadge from 'primevue/themes/aura/overlaybadge';
 import paginator from 'primevue/themes/aura/paginator';
 import panel from 'primevue/themes/aura/panel';
 import panelmenu from 'primevue/themes/aura/panelmenu';
@@ -502,6 +503,7 @@ export default {
         multiselect,
         orderlist,
         organizationchart,
+        overlaybadge,
         popover,
         paginator,
         password,

components/lib/themes/aura/overlaybadge/index.js

@@ -0,0 +1,8 @@
+export default {
+    root: {
+        outline: {
+            width: '2px',
+            color: '{content.background}'
+        }
+    }
+};

components/lib/themes/lara/index.js

@@ -44,6 +44,7 @@ import metergroup from 'primevue/themes/lara/metergroup';
 import multiselect from 'primevue/themes/lara/multiselect';
 import orderlist from 'primevue/themes/lara/orderlist';
 import organizationchart from 'primevue/themes/lara/organizationchart';
+import overlaybadge from 'primevue/themes/lara/overlaybadge';
 import paginator from 'primevue/themes/lara/paginator';
 import panel from 'primevue/themes/lara/panel';
 import panelmenu from 'primevue/themes/lara/panelmenu';
@@ -507,6 +508,7 @@ export default {
         multiselect,
         orderlist,
         organizationchart,
+        overlaybadge,
         popover,
         paginator,
         password,

components/lib/themes/lara/overlaybadge/index.js

@@ -0,0 +1,8 @@
+export default {
+    root: {
+        outline: {
+            width: '2px',
+            color: '{content.background}'
+        }
+    }
+};

components/lib/themes/nora/index.js

@@ -44,6 +44,7 @@ import metergroup from 'primevue/themes/nora/metergroup';
 import multiselect from 'primevue/themes/nora/multiselect';
 import orderlist from 'primevue/themes/nora/orderlist';
 import organizationchart from 'primevue/themes/nora/organizationchart';
+import overlaybadge from 'primevue/themes/nora/overlaybadge';
 import paginator from 'primevue/themes/nora/paginator';
 import panel from 'primevue/themes/nora/panel';
 import panelmenu from 'primevue/themes/nora/panelmenu';
@@ -501,6 +502,7 @@ export default {
         multiselect,
         orderlist,
         organizationchart,
+        overlaybadge,
         popover,
         paginator,
         password,

components/lib/themes/nora/overlaybadge/index.js

@@ -0,0 +1,8 @@
+export default {
+    root: {
+        outline: {
+            width: '2px',
+            color: '{content.background}'
+        }
+    }
+};

doc/badge/OverlayDoc.vue

@@ -6,7 +6,7 @@
         <OverlayBadge value="2">
             <i class="pi pi-bell" style="font-size: 2rem" />
         </OverlayBadge>
-        <OverlayBadge value="5+" severity="danger">
+        <OverlayBadge value="4" severity="danger">
             <i class="pi pi-calendar" style="font-size: 2rem" />
         </OverlayBadge>
         <OverlayBadge severity="danger">
@@ -25,7 +25,7 @@ export default {
 <OverlayBadge value="2">
     <i class="pi pi-bell" style="font-size: 2rem" />
 </OverlayBadge>
-<OverlayBadge value="5+" severity="danger">
+<OverlayBadge value="4" severity="danger">
     <i class="pi pi-calendar" style="font-size: 2rem" />
 </OverlayBadge>
 <OverlayBadge severity="danger">
@@ -38,7 +38,7 @@ export default {
         <OverlayBadge value="2">
             <i class="pi pi-bell" style="font-size: 2rem" />
         </OverlayBadge>
-        <OverlayBadge value="5+" severity="danger">
+        <OverlayBadge value="4" severity="danger">
             <i class="pi pi-calendar" style="font-size: 2rem" />
         </OverlayBadge>
         <OverlayBadge severity="danger">
@@ -57,7 +57,7 @@ export default {
         <OverlayBadge value="2">
             <i class="pi pi-bell" style="font-size: 2rem" />
         </OverlayBadge>
-        <OverlayBadge value="5+" severity="danger">
+        <OverlayBadge value="4" severity="danger">
             <i class="pi pi-calendar" style="font-size: 2rem" />
         </OverlayBadge>
         <OverlayBadge severity="danger">

nuxt-vite.config.js

@@ -180,7 +180,7 @@ const ICON_ALIAS = {
 };
 
 // prettier-ignore
-const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','ripple','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabs','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
+const THEME_COMPONENTS = ['accordion','autocomplete','avatar','badge','blockui','breadcrumb','button','buttongroup','card','carousel','cascadeselect','checkbox','chip','colorpicker','confirmdialog','confirmpopup','contextmenu','datatable','dataview','datepicker','dialog','divider','dock','drawer','editor','fieldset','fileupload','floatlabel','galleria','iconfield','image','inlinemessage','inplace','inputchips','inputgroup','inputnumber','inputotp','inputtext','knob','listbox','megamenu','menu','menubar','message','metergroup','multiselect','orderlist','organizationchart','overlaybadge','paginator','panel','panelmenu','password','picklist','popover','progressbar','progressspinner','radiobutton','rating','ripple','scrollpanel','scrolltop','select','selectbutton','skeleton','slider','speeddial','splitbutton','splitter','steps','stepper','tabmenu','tabs','tabview','tag','terminal','textarea','tieredmenu','timeline','toast','togglebutton','toggleswitch','toolbar','tooltip','tree','treeselect','treetable'];
 
 const createThemeAlias = (presets) => {
     const presetAlias = presets?.reduce((p_acc, p_name) => {