Migrated DataView, OrderList, PickList

components/lib/theme/aura/dataview/index.js

@@ -0,0 +1,78 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {
+                header: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                },
+                content: {
+                    background: '{surface.0}',
+                    textColor: '{surface.700}'
+                },
+                footer: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                }
+            },
+            dark: {
+                header: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
+                },
+                content: {
+                    background: '{surface.900}',
+                    textColor: '{surface.0}'
+                },
+                footer: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
+                }
+            }
+        }
+    },
+    css: `
+.p-dataview .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+}
+
+.p-dataview .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+}
+
+.p-dataview-header {
+    background: var(--p-dataview-header-background);
+    color: var(--p-dataview-header-text-color);
+    border: 1px solid var(--p-dataview-header-border-color);
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+}
+
+.p-dataview-content {
+    background: var(--p-dataview-content-background);
+    color: var(--p-dataview-content-text-color);
+    border: 0 none;
+    padding: 0;
+}
+
+.p-dataview-footer {
+    background: var(--p-dataview-footer-background);
+    color: var(--p-dataview-footer-text-color);
+    border: 1px solid var(--p-dataview-footer-border-color);
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+}
+
+.p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+}
+`
+};

components/lib/theme/aura/dataview/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/index.js

@@ -10,6 +10,7 @@ import chip from 'primevue/theme/aura/chip';
 import confirmdialog from 'primevue/theme/aura/confirmdialog';
 import confirmpopup from 'primevue/theme/aura/confirmpopup';
 import contextmenu from 'primevue/theme/aura/contextmenu';
+import dataview from 'primevue/theme/aura/dataview';
 import dialog from 'primevue/theme/aura/dialog';
 import divider from 'primevue/theme/aura/divider';
 import dock from 'primevue/theme/aura/dock';
@@ -24,9 +25,11 @@ import menu from 'primevue/theme/aura/menu';
 import menubar from 'primevue/theme/aura/menubar';
 import message from 'primevue/theme/aura/message';
 import metergroup from 'primevue/theme/aura/metergroup';
+import orderlist from 'primevue/theme/aura/orderlist';
 import overlaypanel from 'primevue/theme/aura/overlaypanel';
 import panel from 'primevue/theme/aura/panel';
 import panelmenu from 'primevue/theme/aura/panelmenu';
+import picklist from 'primevue/theme/aura/picklist';
 import progressbar from 'primevue/theme/aura/progressbar';
 import progressspinner from 'primevue/theme/aura/progressspinner';
 import scrollpanel from 'primevue/theme/aura/scrollpanel';
@@ -124,9 +127,11 @@ export default {
                     hoverColor: '{primary.600}',
                     activeColor: '{primary.700}'
                 },
-                highlight: {
+                listItemHighlight: {
                     background: '{primary.50}',
-                    textColor: '{primary.700}'
+                    backgroundFocus: '{primary.100}',
+                    textColor: '{primary.700}',
+                    textColorFocus: '{primary.800}'
                 },
                 maskBackground: 'rgba(0,0,0,0.4)'
             },
@@ -151,9 +156,11 @@ export default {
                     hoverColor: '{primary.300}',
                     activeColor: '{primary.200}'
                 },
-                highlight: {
+                listItemHighlight: {
                     background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-                    textColor: 'rgba(255,255,255,.87)'
+                    backgroundFocus: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+                    textColor: 'rgba(255,255,255,.87)',
+                    textColorFocus: 'rgba(255,255,255,.87)'
                 },
                 maskBackground: 'rgba(0,0,0,0.4)'
             }
@@ -173,6 +180,7 @@ export default {
         confirmdialog,
         confirmpopup,
         contextmenu,
+        dataview,
         dialog,
         divider,
         dock,
@@ -186,9 +194,11 @@ export default {
         image,
         inlinemessage,
         inplace,
+        orderlist,
         overlaypanel,
         panel,
         panelmenu,
+        picklist,
         progressbar,
         progressspinner,
         scrollpanel,

components/lib/theme/aura/orderlist/index.js

@@ -0,0 +1,167 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {
+                list: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}'
+                },
+                header: {
+                    textColor: '{surface.500}'
+                },
+                item: {
+                    background: 'transparent',
+                    backgroundHover: '{surface.100}',
+                    backgroundFocus: '{surface.100}',
+                    textColor: '{surface.700}',
+                    textColorHover: '{surface.800}',
+                    textColorFocus: '{surface.800}'
+                },
+                control: {
+                    background: '{surface.100}',
+                    backgroundHover: '{surface.200}',
+                    backgroundActive: '{surface.300}',
+                    borderColor: '{surface.100}',
+                    borderColorHover: '{surface.200}',
+                    borderColorActive: '{surface.300}',
+                    textColor: '{surface.600}',
+                    textColorHover: '{surface.700}',
+                    textColorActive: '{surface.800}'
+                }
+            },
+            dark: {
+                list: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}'
+                },
+                header: {
+                    textColor: '{surface.400}'
+                },
+                item: {
+                    background: 'transparent',
+                    backgroundHover: '{surface.800}',
+                    backgroundFocus: '{surface.800}',
+                    textColor: '{surface.0}',
+                    textColorHover: '{surface.0}',
+                    textColorFocus: '{surface.0}'
+                },
+                control: {
+                    background: '{surface.800}',
+                    backgroundHover: '{surface.700}',
+                    backgroundActive: '{surface.600}',
+                    borderColor: '{surface.800}',
+                    borderColorHover: '{surface.700}',
+                    borderColorActive: '{surface.600}',
+                    textColor: '{surface.300}',
+                    textColorHover: '{surface.200}',
+                    textColorActive: '{surface.100}'
+                }
+            }
+        }
+    },
+    css: `
+.p-orderlist {
+    display: flex;
+    gap: 1.125rem;
+}
+
+.p-orderlist-controls {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.p-orderlist-list-container {
+    flex: 1 1 auto;
+    background: var(--p-orderlist-list-background);
+    border: 1px solid var(--p-orderlist-list-border-color);
+    border-radius: var(--p-rounded-base);
+}
+
+.p-orderlist .p-orderlist-header {
+    color: var(--p-orderlist-header-text-color);
+    border: 0 none;
+    padding: 0.75rem 1rem 0.5rem 1rem;
+    font-weight: 600;
+}
+
+.p-orderlist-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    min-height: 12rem;
+    max-height: 24rem;
+    padding: 0.25rem 0.25rem;
+    outline: 0 none;
+}
+
+.p-orderlist-item {
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+    padding: 0.5rem 0.75rem;
+    margin: 2px 0;
+    border-radius: var(--p-rounded-base);
+    border: 0 none;
+    color: var(--p-orderlist-item-text-color);
+    background: var(--p-orderlist-item-background);
+    outline-color: transparent;
+    transition: transform var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+}
+
+.p-orderlist-item:first-child {
+    margin-top: 0;
+}
+
+.p-orderlist-item:last-child {
+    margin-bottom: 0;
+}
+
+.p-orderlist-item:not(.p-highlight):hover {
+    color: var(--p-orderlist-item-text-color-focus);
+    background: var(--p-orderlist-item-background-focus);
+}
+
+.p-orderlist-item.p-focus {
+    color: var(--p-orderlist-item-text-color-focus);
+    background: var(--p-orderlist-item-background-focus);
+}
+
+.p-orderlist-item.p-highlight {
+    background: var(--p-list-item-highlight-background);
+    color: var(--p-list-item-highlight-text-color);
+}
+
+.p-orderlist-item.p-highlight.p-focus {
+    background: var(--p-list-item-highlight-background-focus);
+    color: var(--p-list-item-highlight-text-color-focus);
+}
+
+.p-orderlist-controls .p-button {
+    background: var(--p-orderlist-control-background);
+    border: 1px solid var(--p-orderlist-control-border-color);
+    color: var(--p-order-listcontrol-text-color);
+    outline-color: transparent;
+    transition: opacity var(--p-transition-duration), outline-color var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration);
+}
+
+.p-orderlist-controls .p-button:not(:disabled):hover {
+    background: var(--p-orderlist-control-background-hover);
+    border: 1px solid var(--p-orderlist-control-border-color-hover);
+    color: var(--p-order-listcontrol-text-color-hover);
+}
+
+.p-orderlist-controls .p-button:not(:disabled):active {
+    background: var(--p-orderlist-control-background-active);
+    border: 1px solid var(--p-orderlist-control-border-color-active);
+    color: var(--p-order-listcontrol-text-color-active);
+}
+
+.p-orderlist-controls .p-button:focus-visible {
+    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-button-primary-background);
+    outline-offset: var(--p-focus-ring-offset);
+}
+`
+};

components/lib/theme/aura/orderlist/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/picklist/index.js

@@ -0,0 +1,167 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {
+                list: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}'
+                },
+                header: {
+                    textColor: '{surface.500}'
+                },
+                item: {
+                    background: 'transparent',
+                    backgroundHover: '{surface.100}',
+                    backgroundFocus: '{surface.100}',
+                    textColor: '{surface.700}',
+                    textColorHover: '{surface.800}',
+                    textColorFocus: '{surface.800}'
+                },
+                control: {
+                    background: '{surface.100}',
+                    backgroundHover: '{surface.200}',
+                    backgroundActive: '{surface.300}',
+                    borderColor: '{surface.100}',
+                    borderColorHover: '{surface.200}',
+                    borderColorActive: '{surface.300}',
+                    textColor: '{surface.600}',
+                    textColorHover: '{surface.700}',
+                    textColorActive: '{surface.800}'
+                }
+            },
+            dark: {
+                list: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}'
+                },
+                header: {
+                    textColor: '{surface.400}'
+                },
+                item: {
+                    background: 'transparent',
+                    backgroundHover: '{surface.800}',
+                    backgroundFocus: '{surface.800}',
+                    textColor: '{surface.0}',
+                    textColorHover: '{surface.0}',
+                    textColorFocus: '{surface.0}'
+                },
+                control: {
+                    background: '{surface.800}',
+                    backgroundHover: '{surface.700}',
+                    backgroundActive: '{surface.600}',
+                    borderColor: '{surface.800}',
+                    borderColorHover: '{surface.700}',
+                    borderColorActive: '{surface.600}',
+                    textColor: '{surface.300}',
+                    textColorHover: '{surface.200}',
+                    textColorActive: '{surface.100}'
+                }
+            }
+        }
+    },
+    css: `
+.p-picklist {
+    display: flex;
+    gap: 1.125rem;
+}
+
+.p-picklist-buttons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.p-picklist-list-wrapper {
+    flex: 1 1 50%;
+    background: var(--p-picklist-list-background);
+    border: 1px solid var(--p-picklist-list-border-color);
+    border-radius: var(--p-picklist-base);
+}
+
+.p-picklist .p-picklist-header {
+    color: var(--p-picklist-header-text-color);
+    border: 0 none;
+    padding: 0.75rem 1rem 0.5rem 1rem;
+    font-weight: 600;
+}
+
+.p-picklist-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    min-height: 12rem;
+    max-height: 24rem;
+    padding: 0.25rem 0.25rem;
+    outline: 0 none;
+}
+
+.p-picklist-item {
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+    padding: 0.5rem 0.75rem;
+    margin: 2px 0;
+    border-radius: var(--p-rounded-base);
+    border: 0 none;
+    color: var(--p-picklist-item-text-color);
+    background: var(--p-picklist-item-background);
+    outline-color: transparent;
+    transition: transform var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+}
+
+.p-picklist-item:first-child {
+    margin-top: 0;
+}
+
+.p-picklist-item:last-child {
+    margin-bottom: 0;
+}
+
+.p-picklist-item:not(.p-highlight):hover {
+    color: var(--p-picklist-item-text-color-focus);
+    background: var(--p-picklist-item-background-focus);
+}
+
+.p-picklist-item.p-focus {
+    color: var(--p-picklist-item-text-color-focus);
+    background: var(--p-picklist-item-background-focus);
+}
+
+.p-picklist-item.p-highlight {
+    background: var(--p-list-item-highlight-background);
+    color: var(--p-list-item-highlight-text-color);
+}
+
+.p-picklist-item.p-highlight.p-focus {
+    background: var(--p-list-item-highlight-background-focus);
+    color: var(--p-list-item-highlight-text-color-focus);
+}
+
+.p-picklist-buttons .p-button {
+    background: var(--p-picklist-control-background);
+    border: 1px solid var(--p-picklist-control-border-color);
+    color: var(--p-order-listcontrol-text-color);
+    outline-color: transparent;
+    transition: opacity var(--p-transition-duration), outline-color var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration);
+}
+
+.p-picklist-buttons .p-button:not(:disabled):hover {
+    background: var(--p-picklist-control-background-hover);
+    border: 1px solid var(--p-picklist-control-border-color-hover);
+    color: var(--p-order-listcontrol-text-color-hover);
+}
+
+.p-picklist-buttons .p-button:not(:disabled):active {
+    background: var(--p-picklist-control-background-active);
+    border: 1px solid var(--p-picklist-control-border-color-active);
+    color: var(--p-order-listcontrol-text-color-active);
+}
+
+.p-picklist-buttons .p-button:focus-visible {
+    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-button-primary-background);
+    outline-offset: var(--p-focus-ring-offset);
+}
+`
+};

components/lib/theme/aura/picklist/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}