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

Migrated listbox

pull/5507/head
Cagatay Civici 2024-02-21 14:05:31 +03:00
parent d5f9439d12
commit e7e9ad2c7f
6 changed files with 183 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/themes/primeone/base/index.js
View File

@ -33,6 +33,7 @@ import inputgroup from 'primevue/themes/primeone/base/inputgroup';
import inputswitch from 'primevue/themes/primeone/base/inputswitch';
import inputtext from 'primevue/themes/primeone/base/inputtext';
import knob from 'primevue/themes/primeone/base/knob';
import listbox from 'primevue/themes/primeone/base/listbox';
import megamenu from 'primevue/themes/primeone/base/megamenu';
import menu from 'primevue/themes/primeone/base/menu';
import menubar from 'primevue/themes/primeone/base/menubar';
@ -113,6 +114,7 @@ export default {
inputswitch,
inputtext,
knob,
listbox,
megamenu,
menu,
menubar,

116
components/lib/themes/primeone/base/listbox/index.js Normal file
View File

@ -0,0 +1,116 @@
export default {
css: `
.p-listbox {
background: var(--p-listbox-background);
color: var(--p-listbox-text-color);
border: 1px solid var(--p-listbox-border-color);
border-radius: var(--p-rounded-base);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
outline-color: transparent;
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
}
.p-listbox.p-focus {
outline: 0 none;
border-color: var(--p-listbox-border-color-focus);
}
.p-listbox.p-disabled {
opacity: 1;
background: var(--p-listbox-background-disabled);
color: var(--p-listbox-text-color-disabled);
}
.p-listbox.p-invalid {
border-color: var(--p-listbox-border-color-invalid);
}
.p-listbox .p-listbox-header {
padding: 0.5rem 0.5rem 0 0.5rem;
border-bottom: 0 none;
margin: 0 0 0 0;
}
.p-listbox-filter-container {
position: relative;
}
.p-listbox-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
right: 0.75rem;
color: var(--p-listbox-filter-icon);
}
.p-listbox-filter {
width: 100%;
padding-right: 1.75rem;
}
.p-listbox-list-wrapper {
overflow: auto;
}
.p-listbox-list {
list-style-type: none;
margin: 0;
padding: 0.25rem 0.25rem;
outline: 0 none;
}
.p-listbox-item {
cursor: pointer;
position: relative;
overflow: hidden;
margin: 2px 0;
padding: 0.5rem 0.75rem;
border: 0 none;
color: var(--p-listbox-item-text-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-listbox-rounded-sm);
}
.p-listbox-item:first-child {
margin-top: 0;
}
.p-listbox-item:last-child {
margin-bottom: 0;
}
.p-listbox .p-listbox-list .p-listbox-item.p-highlight {
background: var(--p-listbox-item-background-selected);
color: var(--p-listbox-item-text-color-selected);
}
.p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
background: var(--p-listbox-item-background-selected-focus);
color: var(--p-listbox-item-text-color-selected-focus);
}
.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
background: var(--p-listbox-item-background-focus);
color: var(--p-listbox-item-text-color-focus);
}
.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
background: var(--p-listbox-item-background-focus);
color: var(--p-listbox-item-text-color-focus);
}
.p-listbox-item-group {
cursor: auto;
margin: 0;
padding: 0.5rem 0.75rem;
color: var(--p-listbox-item-group-text-color);
background: var(--p-listbox-item-group-background);
font-weight: 600;
}
.p-listbox-empty-message {
padding: 0.5rem 0.75rem;
background: transparent;
}
`
};

6
components/lib/themes/primeone/base/listbox/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"
}

2
components/lib/themes/primeone/presets/aura/index.js
View File

@ -32,6 +32,7 @@ import inputgroup from 'primevue/themes/primeone/presets/aura/inputgroup';
import inputswitch from 'primevue/themes/primeone/presets/aura/inputswitch';
import inputtext from 'primevue/themes/primeone/presets/aura/inputtext';
import knob from 'primevue/themes/primeone/presets/aura/knob';
import listbox from 'primevue/themes/primeone/presets/aura/listbox';
import megamenu from 'primevue/themes/primeone/presets/aura/megamenu';
import menu from 'primevue/themes/primeone/presets/aura/menu';
import menubar from 'primevue/themes/primeone/presets/aura/menubar';
@ -254,6 +255,7 @@ export default {
inputswitch,
inputtext,
knob,
listbox,
megamenu,
menu,
menubar,

51
components/lib/themes/primeone/presets/aura/listbox/index.js Normal file
View File

@ -0,0 +1,51 @@
export default {
root: {
background: '{form.field.background}',
backgroundDisabled: '{form.field.background.disabled}',
borderColor: '{form.field.border.color}',
borderColorHover: '{form.field.border.color.hover}',
borderColorFocus: '{form.field.border.color.focus}',
borderColorInvalid: '{form.field.border.color.invalid}',
textColor: '{form.field.text.color}',
textColorDisabled: '{form.field.text.disabled}',
boxShadow: '{form.field.box.shadow}'
},
colorScheme: {
light: {
filterIcon: {
color: '{surface.400}'
},
itemGroup: {
background: '{surface.0}',
textColor: '{surface.500}'
},
item: {
backgroundFocus: '{surface.100}',
backgroundSelected: '{highlight.background}',
backgroundSelectedFocus: '{highlight.background.focus}',
textColor: '{surface.700}',
textColorFocus: '{surface.800}',
textColorSelected: '{highlight.text.color}',
textColorSelectedFocus: '{highlight.text.color.focus}'
}
},
dark: {
filterIcon: {
color: '{surface.400}'
},
itemGroup: {
background: '{surface.900}',
textColor: '{surface.400}'
},
item: {
backgroundFocus: '{surface.800}',
backgroundSelected: '{highlight.background}',
backgroundSelectedFocus: '{highlight.background.focus}',
textColor: '{surface.0}',
textColorFocus: '{surface.0}',
textColorSelected: '{highlight.text.color}',
textColorSelectedFocus: '{highlight.text.color.focus}'
}
}
}
};

6
components/lib/themes/primeone/presets/aura/listbox/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"
}