From c53b2869f8a1e245962589d64373623e44d17dbb Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 25 May 2024 14:57:35 +0300 Subject: [PATCH] Visual updates for OverlayBadge --- components/lib/overlaybadge/style/OverlayBadgeStyle.js | 3 +++ components/lib/themes/aura/index.js | 2 ++ components/lib/themes/aura/overlaybadge/index.js | 8 ++++++++ components/lib/themes/lara/index.js | 2 ++ components/lib/themes/lara/overlaybadge/index.js | 8 ++++++++ components/lib/themes/nora/index.js | 2 ++ components/lib/themes/nora/overlaybadge/index.js | 8 ++++++++ doc/badge/OverlayDoc.vue | 8 ++++---- nuxt-vite.config.js | 2 +- 9 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 components/lib/themes/aura/overlaybadge/index.js create mode 100644 components/lib/themes/lara/overlaybadge/index.js create mode 100644 components/lib/themes/nora/overlaybadge/index.js diff --git a/components/lib/overlaybadge/style/OverlayBadgeStyle.js b/components/lib/overlaybadge/style/OverlayBadgeStyle.js index 3ebda953a..4597d89f7 100644 --- a/components/lib/overlaybadge/style/OverlayBadgeStyle.js +++ b/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')}; } `; diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js index 38c8fe432..67a9aa764 100644 --- a/components/lib/themes/aura/index.js +++ b/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, diff --git a/components/lib/themes/aura/overlaybadge/index.js b/components/lib/themes/aura/overlaybadge/index.js new file mode 100644 index 000000000..7099114d4 --- /dev/null +++ b/components/lib/themes/aura/overlaybadge/index.js @@ -0,0 +1,8 @@ +export default { + root: { + outline: { + width: '2px', + color: '{content.background}' + } + } +}; diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js index 65e30ce00..4152708c4 100644 --- a/components/lib/themes/lara/index.js +++ b/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, diff --git a/components/lib/themes/lara/overlaybadge/index.js b/components/lib/themes/lara/overlaybadge/index.js new file mode 100644 index 000000000..7099114d4 --- /dev/null +++ b/components/lib/themes/lara/overlaybadge/index.js @@ -0,0 +1,8 @@ +export default { + root: { + outline: { + width: '2px', + color: '{content.background}' + } + } +}; diff --git a/components/lib/themes/nora/index.js b/components/lib/themes/nora/index.js index 5d8dde286..63d3d2b43 100644 --- a/components/lib/themes/nora/index.js +++ b/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, diff --git a/components/lib/themes/nora/overlaybadge/index.js b/components/lib/themes/nora/overlaybadge/index.js new file mode 100644 index 000000000..7099114d4 --- /dev/null +++ b/components/lib/themes/nora/overlaybadge/index.js @@ -0,0 +1,8 @@ +export default { + root: { + outline: { + width: '2px', + color: '{content.background}' + } + } +}; diff --git a/doc/badge/OverlayDoc.vue b/doc/badge/OverlayDoc.vue index 9c3b95bc2..c6da655e5 100644 --- a/doc/badge/OverlayDoc.vue +++ b/doc/badge/OverlayDoc.vue @@ -6,7 +6,7 @@ - + @@ -25,7 +25,7 @@ export default { - + @@ -38,7 +38,7 @@ export default { - + @@ -57,7 +57,7 @@ export default { - + diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index 0041e2fe3..c5790d736 100644 --- a/nuxt-vite.config.js +++ b/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) => {