vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed #4530 - Export styles of all components

Browse source
This commit is contained in:
mertsincan 2023-10-02 11:46:09 +01:00
parent 7b6d458067
commit dc2913e887
463 changed files with 10696 additions and 9670 deletions
Download patch file Download diff file Expand all files Collapse all files

193
components/lib/multiselect/style/MultiSelectStyle.js Normal file
View file

@ -0,0 +1,193 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-multiselect {
display: inline-flex;
cursor: pointer;
user-select: none;
}
.p-multiselect-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-multiselect-label-container {
overflow: hidden;
flex: 1 1 auto;
cursor: pointer;
}
.p-multiselect-label {
display: block;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
}
.p-multiselect-label-empty {
overflow: hidden;
visibility: hidden;
}
.p-multiselect-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-multiselect-token-icon {
cursor: pointer;
}
.p-multiselect .p-multiselect-panel {
min-width: 100%;
}
.p-multiselect-items-wrapper {
overflow: auto;
}
.p-multiselect-items {
margin: 0;
padding: 0;
list-style-type: none;
}
.p-multiselect-item {
cursor: pointer;
display: flex;
align-items: center;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.p-multiselect-item-group {
cursor: auto;
}
.p-multiselect-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.p-multiselect-filter-container {
position: relative;
flex: 1 1 auto;
}
.p-multiselect-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-multiselect-filter-container .p-inputtext {
width: 100%;
}
.p-multiselect-close {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
position: relative;
margin-left: auto;
}
.p-fluid .p-multiselect {
display: flex;
}
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
const classes = {
root: ({ instance, props }) => [
'p-multiselect p-component p-inputwrapper',
{
'p-multiselect-chip': props.display === 'chip',
'p-disabled': props.disabled,
'p-focus': instance.focused,
'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
'p-overlay-open': instance.overlayVisible
}
],
labelContainer: 'p-multiselect-label-container',
label: ({ instance, props }) => [
'p-multiselect-label',
{
'p-placeholder': instance.label === props.placeholder,
'p-multiselect-label-empty': !props.placeholder && (!props.modelValue || props.modelValue.length === 0)
}
],
token: 'p-multiselect-token',
tokenLabel: 'p-multiselect-token-label',
removeTokenIcon: 'p-multiselect-token-icon',
trigger: 'p-multiselect-trigger',
loadingIcon: 'p-multiselect-trigger-icon',
dropdownIcon: 'p-multiselect-trigger-icon',
panel: ({ instance }) => [
'p-multiselect-panel p-component',
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
header: 'p-multiselect-header',
headerCheckboxContainer: ({ instance }) => [
'p-checkbox p-component',
{
'p-checkbox-checked': instance.allSelected,
'p-checkbox-focused': instance.headerCheckboxFocused
}
],
headerCheckbox: ({ instance }) => [
'p-checkbox-box',
{
'p-highlight': instance.allSelected,
'p-focus': instance.headerCheckboxFocused
}
],
headerCheckboxIcon: 'p-checkbox-icon',
filterContainer: 'p-multiselect-filter-container',
filterInput: 'p-multiselect-filter p-inputtext p-component',
filterIcon: 'p-multiselect-filter-icon',
closeButton: 'p-multiselect-close p-link',
closeIcon: 'p-multiselect-close-icon',
wrapper: 'p-multiselect-items-wrapper',
list: 'p-multiselect-items p-component',
itemGroup: 'p-multiselect-item-group',
item: ({ instance, option, index, getItemOptions }) => [
'p-multiselect-item',
{
'p-highlight': instance.isSelected(option),
'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
'p-disabled': instance.isOptionDisabled(option)
}
],
checkboxContainer: 'p-checkbox p-component',
checkbox: ({ instance, option }) => ['p-checkbox-box', { 'p-highlight': instance.isSelected(option) }],
checkboxIcon: 'p-checkbox-icon',
emptyMessage: 'p-multiselect-empty-message'
};
export default BaseStyle.extend({
name: 'multiselect',
css,
classes,
inlineStyles
});