vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Migrated DataView, OrderList, PickList

pull/5507/head
Cagatay Civici 2024-02-16 13:34:41 +03:00
parent 6ebc7594d8
commit 90831e9f8d
7 changed files with 444 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
components/lib/theme/aura/dataview/index.js Normal file
View File

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

6
components/lib/theme/aura/dataview/package.json Normal file
View File

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

18
components/lib/theme/aura/index.js
View File

@ -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,

167
components/lib/theme/aura/orderlist/index.js Normal file
View File

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

6
components/lib/theme/aura/orderlist/package.json Normal file
View File

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

167
components/lib/theme/aura/picklist/index.js Normal file
View File

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

6
components/lib/theme/aura/picklist/package.json Normal file
View File

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