diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 7f9dd5c37..aacc90185 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -8,8 +8,11 @@ import divider from 'primevue/theme/aura/divider'; import fieldset from 'primevue/theme/aura/fieldset'; import global from 'primevue/theme/aura/global'; import inplace from 'primevue/theme/aura/inplace'; +import metergroup from 'primevue/theme/aura/metergroup'; import panel from 'primevue/theme/aura/panel'; import scrollpanel from 'primevue/theme/aura/scrollpanel'; +import scrolltop from 'primevue/theme/aura/scrolltop'; +import skeleton from 'primevue/theme/aura/skeleton'; import splitter from 'primevue/theme/aura/splitter'; import tabview from 'primevue/theme/aura/tabview'; import toolbar from 'primevue/theme/aura/toolbar'; @@ -131,9 +134,12 @@ export default { chip, divider, fieldset, + metergroup, inplace, panel, scrollpanel, + scrolltop, + skeleton, splitter, tabview, toolbar diff --git a/components/lib/theme/aura/metergroup/index.js b/components/lib/theme/aura/metergroup/index.js new file mode 100644 index 000000000..7f33e17e8 --- /dev/null +++ b/components/lib/theme/aura/metergroup/index.js @@ -0,0 +1,109 @@ +export default { + variables: { + colorScheme: { + light: { + meters: { + background: '{surface.200}' + } + }, + dark: { + meters: { + background: '{surface.700}' + } + } + } + }, + css: ` +.p-metergroup { + display: flex; + gap: 1rem; +} + +.p-metergroup-meters { + display: flex; + background: var(--p-metergroup-meters-background); + border-radius: var(--p-rounded-base); +} + +.p-metergroup-meter { + border: 0 none; + background: var(--p-primary-color); +} + +.p-metergroup-labels { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; +} + +.p-metergroup-label { + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.p-metergroup-label-marker { + display: inline-flex; + background: var(--p-primary-color); + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; +} + +.p-metergroup-label-icon { + width: 1rem; + height: 1rem; +} + +.p-metergroup-horizontal { + flex-direction: column; +} + +.p-metergroup-labels-horizontal { + gap: 1rem; +} + +.p-metergroup-horizontal .p-metergroup-meters { + height: 0.5rem; +} + +.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: var(--p-rounded-base); + border-bottom-left-radius: var(--p-rounded-base); +} +.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: var(--p-rounded-base); + border-bottom-right-radius: var(--p-rounded-base); +} + +.p-metergroup-vertical { + flex-direction: row; +} + +.p-metergroup-labels-vertical { + flex-direction: column; + gap: 0.5rem; +} + +.p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + width: 0.5rem; + height: 100%; +} + +.p-metergroup-vertical .p-metergroup-labels { + align-items: start; +} + +.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: var(--p-rounded-base); + border-top-right-radius: var(--p-rounded-base); +} +.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: var(--p-rounded-base); + border-bottom-right-radius: var(--p-rounded-base); +} +` +}; diff --git a/components/lib/theme/aura/metergroup/package.json b/components/lib/theme/aura/metergroup/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/metergroup/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/aura/scrolltop/index.js b/components/lib/theme/aura/scrolltop/index.js new file mode 100644 index 000000000..f64fb6639 --- /dev/null +++ b/components/lib/theme/aura/scrolltop/index.js @@ -0,0 +1,78 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.800}', + backgroundHover: '{surface.700}', + textColor: '{surface.100}', + textColorHover: '{surface.0}' + } + }, + dark: { + root: { + background: '{surface.800}', + backgroundHover: '{surface.700}', + textColor: '{surface.300}', + textColorHover: '{surface.200}' + } + } + } + }, + css: ` +.p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + background: var(--p-scrolltop-background); + color: var(--p-scrolltop-text-color); +} + +.p-scrolltop:hover { + background: var(--p-scrolltop-background-hover); + color: var(--p-scrolltop-text-color-hover); +} + +.p-scrolltop-icon { + font-size: 1.5rem; + width: 1.5rem; + height: 1.5rem; +} + +.p-scrolltop-sticky { + position: sticky; +} + +.p-scrolltop-sticky { + margin-left: auto; +} + +.p-scrolltop-enter-from { + opacity: 0; +} + +.p-scrolltop-enter-active { + transition: opacity 0.15s; +} + +.p-scrolltop.p-scrolltop-leave-to { + opacity: 0; +} + +.p-scrolltop-leave-active { + transition: opacity 0.15s; +} + +.p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration); + outline-color: transparent; +} +` +}; diff --git a/components/lib/theme/aura/scrolltop/package.json b/components/lib/theme/aura/scrolltop/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/scrolltop/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/aura/skeleton/index.js b/components/lib/theme/aura/skeleton/index.js new file mode 100644 index 000000000..4349a1fa6 --- /dev/null +++ b/components/lib/theme/aura/skeleton/index.js @@ -0,0 +1,55 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.200}', + animationBackground: 'rgba(255,255,255,0.4)' + } + }, + dark: { + root: { + background: 'rgba(255, 255, 255, 0.06)', + animationBackground: 'rgba(255, 255, 255, 0.04)' + } + } + } + }, + css: ` +.p-skeleton { + overflow: hidden; + background-color: var(--p-skeleton-background); + border-radius: var(--p-rounded-base); +} + +.p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + background: linear-gradient( 90deg, rgba(255, 255, 255, 0), var(--p-skeleton-animation-background), rgba(255, 255, 255, 0) ); +} + +.p-skeleton-circle { + border-radius: 50%; +} + +.p-skeleton-none::after { + animation: none; +} + +@keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } +} +` +}; diff --git a/components/lib/theme/aura/skeleton/package.json b/components/lib/theme/aura/skeleton/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/skeleton/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index 2e87f64bb..aeba343d5 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -202,6 +202,7 @@ const THEME_ALIAS = { 'primevue/theme/aura/menu': path.resolve(__dirname, './components/lib/theme/aura/menu/index.js'), 'primevue/theme/aura/menubar': path.resolve(__dirname, './components/lib/theme/aura/menubar/index.js'), 'primevue/theme/aura/message': path.resolve(__dirname, './components/lib/theme/aura/message/index.js'), + 'primevue/theme/aura/metergroup': path.resolve(__dirname, './components/lib/theme/aura/metergroup/index.js'), 'primevue/theme/aura/multiselect': path.resolve(__dirname, './components/lib/theme/aura/multiselect/index.js'), 'primevue/theme/aura/orderlist': path.resolve(__dirname, './components/lib/theme/aura/orderlist/index.js'), 'primevue/theme/aura/organizationchart': path.resolve(__dirname, './components/lib/theme/aura/organizationchart/index.js'),