From fa0a2f267af4e2a7f7306497f9f21bc6f403e76d Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sun, 4 Feb 2024 14:09:23 +0300 Subject: [PATCH 01/11] Refactored variant input usage --- components/lib/treeselect/style/TreeSelectStyle.js | 1 - layouts/default.vue | 1 - 2 files changed, 2 deletions(-) diff --git a/components/lib/treeselect/style/TreeSelectStyle.js b/components/lib/treeselect/style/TreeSelectStyle.js index 02c9beedf..5de76f1bb 100644 --- a/components/lib/treeselect/style/TreeSelectStyle.js +++ b/components/lib/treeselect/style/TreeSelectStyle.js @@ -87,7 +87,6 @@ const classes = { panel: ({ props, instance }) => [ 'p-treeselect-panel p-component', { - 'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled', 'p-ripple-disabled': instance.$primevue.config.ripple === false } ], diff --git a/layouts/default.vue b/layouts/default.vue index 6cdf03dc7..2d4f483c3 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -121,7 +121,6 @@ export default { { 'layout-news-active': this.$appState.newsActive, 'p-ripple-disabled': this.$appState.ripple === false, - 'p-input-filled': this.$primevue.config.inputStyle === 'filled', 'layout-dark': this.$appState.darkTheme, 'layout-light': !this.$appState.darkTheme } From ed82bfd238f3a4f0dcdfdf58c388754b87d589a0 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sun, 4 Feb 2024 14:10:58 +0300 Subject: [PATCH 02/11] Use a tag instead --- layouts/AppMenuItem.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/AppMenuItem.vue b/layouts/AppMenuItem.vue index b850bcf9b..aef78cc8c 100644 --- a/layouts/AppMenuItem.vue +++ b/layouts/AppMenuItem.vue @@ -13,14 +13,14 @@ {{ menuitem.name }} - + {{ menuitem.name }} - + {{ menuitem.name }} From 9a29cbc990e609a4332ac15a1894a41956e62028 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sun, 4 Feb 2024 19:11:37 +0300 Subject: [PATCH 03/11] Fixed #5203 - MeterGroup Refactor --- .../lib/metergroup/style/MeterGroupStyle.js | 49 ++-- doc/metergroup/BasicDoc.vue | 2 +- doc/metergroup/IconDoc.vue | 69 ++++++ doc/metergroup/LabelDoc.vue | 36 +-- doc/metergroup/MinMaxDoc.vue | 32 +-- doc/metergroup/MultipleDoc.vue | 23 +- doc/metergroup/TemplateDoc.vue | 213 ++++++++++++++++++ doc/metergroup/TemplatingDoc.vue | 153 ------------- doc/metergroup/VerticalDoc.vue | 37 +-- pages/metergroup/index.vue | 28 ++- public/themes/arya-blue/theme.css | 41 ++-- public/themes/arya-green/theme.css | 41 ++-- public/themes/arya-orange/theme.css | 41 ++-- public/themes/arya-purple/theme.css | 41 ++-- public/themes/aura-dark-amber/theme.css | 41 ++-- public/themes/aura-dark-blue/theme.css | 41 ++-- public/themes/aura-dark-cyan/theme.css | 41 ++-- public/themes/aura-dark-green/theme.css | 41 ++-- public/themes/aura-dark-indigo/theme.css | 41 ++-- public/themes/aura-dark-lime/theme.css | 41 ++-- public/themes/aura-dark-noir/theme.css | 41 ++-- public/themes/aura-dark-pink/theme.css | 41 ++-- public/themes/aura-dark-purple/theme.css | 41 ++-- public/themes/aura-dark-teal/theme.css | 41 ++-- public/themes/aura-light-amber/theme.css | 41 ++-- public/themes/aura-light-blue/theme.css | 41 ++-- public/themes/aura-light-cyan/theme.css | 41 ++-- public/themes/aura-light-green/theme.css | 41 ++-- public/themes/aura-light-indigo/theme.css | 41 ++-- public/themes/aura-light-lime/theme.css | 41 ++-- public/themes/aura-light-noir/theme.css | 41 ++-- public/themes/aura-light-pink/theme.css | 41 ++-- public/themes/aura-light-purple/theme.css | 41 ++-- public/themes/aura-light-teal/theme.css | 41 ++-- public/themes/bootstrap4-dark-blue/theme.css | 41 ++-- .../themes/bootstrap4-dark-purple/theme.css | 41 ++-- public/themes/bootstrap4-light-blue/theme.css | 41 ++-- .../themes/bootstrap4-light-purple/theme.css | 41 ++-- public/themes/fluent-light/theme.css | 41 ++-- public/themes/lara-dark-amber/theme.css | 41 ++-- public/themes/lara-dark-blue/theme.css | 41 ++-- public/themes/lara-dark-cyan/theme.css | 41 ++-- public/themes/lara-dark-green/theme.css | 41 ++-- public/themes/lara-dark-indigo/theme.css | 41 ++-- public/themes/lara-dark-pink/theme.css | 41 ++-- public/themes/lara-dark-purple/theme.css | 41 ++-- public/themes/lara-dark-teal/theme.css | 41 ++-- public/themes/lara-light-amber/theme.css | 41 ++-- public/themes/lara-light-blue/theme.css | 41 ++-- public/themes/lara-light-cyan/theme.css | 41 ++-- public/themes/lara-light-green/theme.css | 41 ++-- public/themes/lara-light-indigo/theme.css | 41 ++-- public/themes/lara-light-pink/theme.css | 41 ++-- public/themes/lara-light-purple/theme.css | 41 ++-- public/themes/lara-light-teal/theme.css | 41 ++-- public/themes/luna-amber/theme.css | 41 ++-- public/themes/luna-blue/theme.css | 41 ++-- public/themes/luna-green/theme.css | 41 ++-- public/themes/luna-pink/theme.css | 41 ++-- public/themes/md-dark-deeppurple/theme.css | 41 ++-- public/themes/md-dark-indigo/theme.css | 41 ++-- public/themes/md-light-deeppurple/theme.css | 41 ++-- public/themes/md-light-indigo/theme.css | 41 ++-- public/themes/mdc-dark-deeppurple/theme.css | 41 ++-- public/themes/mdc-dark-indigo/theme.css | 41 ++-- public/themes/mdc-light-deeppurple/theme.css | 41 ++-- public/themes/mdc-light-indigo/theme.css | 41 ++-- public/themes/mira/theme.css | 41 ++-- public/themes/nano/theme.css | 41 ++-- public/themes/nova-accent/theme.css | 41 ++-- public/themes/nova-alt/theme.css | 41 ++-- public/themes/nova-vue/theme.css | 41 ++-- public/themes/nova/theme.css | 41 ++-- public/themes/rhea/theme.css | 41 ++-- public/themes/saga-blue/theme.css | 41 ++-- public/themes/saga-green/theme.css | 41 ++-- public/themes/saga-orange/theme.css | 41 ++-- public/themes/saga-purple/theme.css | 41 ++-- public/themes/soho-dark/theme.css | 41 ++-- public/themes/soho-light/theme.css | 41 ++-- public/themes/tailwind-light/theme.css | 41 ++-- public/themes/vela-blue/theme.css | 41 ++-- public/themes/vela-green/theme.css | 41 ++-- public/themes/vela-orange/theme.css | 41 ++-- public/themes/vela-purple/theme.css | 41 ++-- public/themes/viva-dark/theme.css | 41 ++-- public/themes/viva-light/theme.css | 41 ++-- 87 files changed, 2007 insertions(+), 1792 deletions(-) create mode 100644 doc/metergroup/IconDoc.vue create mode 100644 doc/metergroup/TemplateDoc.vue delete mode 100644 doc/metergroup/TemplatingDoc.vue diff --git a/components/lib/metergroup/style/MeterGroupStyle.js b/components/lib/metergroup/style/MeterGroupStyle.js index a7abe3a76..c1e4798f1 100644 --- a/components/lib/metergroup/style/MeterGroupStyle.js +++ b/components/lib/metergroup/style/MeterGroupStyle.js @@ -3,48 +3,40 @@ import BaseStyle from 'primevue/base/style'; const css = ` @layer primevue { .p-metergroup { - position: relative; - overflow: hidden; - } - - .p-metergroup-vertical.p-metergroup { display: flex; } - .p-metergroup-vertical .p-metergroup-meter-container { + .p-metergroup-meters { + display: flex; + } + + .p-metergroup-vertical .p-metergroup-meters { flex-direction: column; } - .p-metergroup-meter-container { - display: flex; - } - - .p-metergroup-label-list { + .p-metergroup-labels { display: flex; + flex-wrap: wrap; margin: 0; padding: 0; list-style-type: none; } - .p-metergroup-vertical .p-metergroup-label-list { + .p-metergroup-vertical .p-metergroup-labels { align-items: start; } - .p-metergroup-horizontal .p-metergroup-label-list-vertical { + .p-metergroup-labels-vertical { flex-direction: column; } - .p-metergroup-vertical .p-metergroup-label-list-horizontal { - flex-direction: column; - } - - .p-metergroup-label-list-item { + .p-metergroup-label { display: inline-flex; align-items: center; } - .p-metergroup-label-type { - display: inline-block; + .p-metergroup-label-marker { + display: inline-flex; } } `; @@ -57,22 +49,19 @@ const classes = { 'p-metergroup-vertical': props.orientation === 'vertical' } ], - metercontainer: 'p-metergroup-meter-container', + metercontainer: 'p-metergroup-meters', meter: 'p-metergroup-meter', labellist: ({ props }) => [ - 'p-metergroup-label-list', - + 'p-metergroup-labels', { - 'p-metergroup-label-list-start': props.labelPosition === 'start', - 'p-metergroup-label-list-end': props.labelPosition === 'end', - 'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical', - 'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal' + 'p-metergroup-labels-vertical': props.labelOrientation === 'vertical', + 'p-metergroup-labels-horizontal': props.labelOrientation === 'horizontal' } ], - labellistitem: 'p-metergroup-label-list-item', + labellistitem: 'p-metergroup-label', labelicon: 'p-metergroup-label-icon', - labellisttype: 'p-metergroup-label-type', - label: 'p-metergroup-label' + labellisttype: 'p-metergroup-label-marker', + label: 'p-metergroup-label-text' }; export default BaseStyle.extend({ diff --git a/doc/metergroup/BasicDoc.vue b/doc/metergroup/BasicDoc.vue index bbb6d0bae..e67b02c23 100644 --- a/doc/metergroup/BasicDoc.vue +++ b/doc/metergroup/BasicDoc.vue @@ -1,6 +1,6 @@ @@ -13,19 +13,19 @@ export default { data() { return { value: [ - { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' }, - { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' }, - { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' }, - { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' } + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } ], code: { basic: ` - + `, options: ` @@ -34,10 +34,10 @@ export default { data() { return { value: [ - { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' }, - { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' }, - { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' }, - { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' } + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } ], }; } @@ -47,7 +47,7 @@ export default { composition: ` @@ -55,10 +55,10 @@ export default { import { ref } from "vue"; const value = ref([ - { label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' }, - { label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' }, - { label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' }, - { label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' } + { label: 'Apps', color: '#34d399', value: 16 }, + { label: 'Messages', color: '#fbbf24', value: 8 }, + { label: 'Media', color: '#60a5fa', value: 24 }, + { label: 'System', color: '#c084fc', value: 10 } ]); <\/script> ` diff --git a/doc/metergroup/MultipleDoc.vue b/doc/metergroup/MultipleDoc.vue index 9a3c94b9a..3fd4bf1af 100644 --- a/doc/metergroup/MultipleDoc.vue +++ b/doc/metergroup/MultipleDoc.vue @@ -1,6 +1,6 @@