Migrated scrolltop, skeleton and metergroup

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

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);
+}
+`
+};

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"
+}

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;
+}
+`
+};

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"
+}

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%);
+    }
+}
+`
+};

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"
+}