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

Refactor #5681 - CascadeSelect

pull/5756/head
tugcekucukoglu 2024-05-10 14:33:27 +03:00
parent 913dc05982
commit b37dd8d4d6
3 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/lib/cascadeselect/CascadeSelect.d.ts vendored
View File

@ -113,21 +113,21 @@ export interface CascadeSelectPassThroughOptions {
*/
list?: CascadeSelectPassThroughOptionType;
/**
* Used to pass attributes to the item's DOM element.
* Used to pass attributes to the option's DOM element.
*/
item?: CascadeSelectPassThroughOptionType;
option?: CascadeSelectPassThroughOptionType;
/**
* Used to pass attributes to the item content's DOM element.
* Used to pass attributes to the option content's DOM element.
*/
itemContent?: CascadeSelectPassThroughOptionType;
optionContent?: CascadeSelectPassThroughOptionType;
/**
* Used to pass attributes to the item text's DOM element.
* Used to pass attributes to the option text's DOM element.
*/
itemText?: CascadeSelectPassThroughOptionType;
optionText?: CascadeSelectPassThroughOptionType;
/**
* Used to pass attributes to the item list's DOM element.
* Used to pass attributes to the option list's DOM element.
*/
itemList?: CascadeSelectPassThroughOptionType;
optionList?: CascadeSelectPassThroughOptionType;
/**
* Used to pass attributes to the group icon's DOM element.
*/
@ -217,7 +217,7 @@ export interface CascadeSelectContext {
/**
* Current option.
*/
item: any;
option: any;
/**
* Index of the option.
*/
@ -227,9 +227,9 @@ export interface CascadeSelectContext {
*/
level: number;
/**
* Current item group state of option as a boolean.
* Current option group state of option as a boolean.
*/
itemGroup: boolean;
optionGroup: boolean;
/**
* Current active state of option as a boolean.
* @defaultValue false

20
components/lib/cascadeselect/CascadeSelectSub.vue
View File

@ -1,9 +1,9 @@
<template>
<ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('itemList')">
<ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('optionList')">
<template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
<li
:id="getOptionId(processedOption)"
:class="cx('item', { processedOption })"
:class="cx('option', { processedOption })"
role="treeitem"
:aria-label="getOptionLabelToRender(processedOption)"
:aria-selected="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
@ -11,15 +11,15 @@
:aria-level="level + 1"
:aria-setsize="options.length"
:aria-posinset="index + 1"
v-bind="getPTOptions(processedOption, index, 'item')"
:data-p-item-group="isOptionGroup(processedOption)"
v-bind="getPTOptions(processedOption, index, 'option')"
:data-p-option-group="isOptionGroup(processedOption)"
:data-p-highlight="isOptionActive(processedOption)"
:data-p-focus="isOptionFocused(processedOption)"
:data-p-disabled="isOptionDisabled(processedOption)"
>
<div v-ripple :class="cx('itemContent')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'itemContent')">
<div v-ripple :class="cx('optionContent')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'optionContent')">
<component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
<span v-else :class="cx('itemText')" v-bind="getPTOptions(processedOption, index, 'itemText')">{{ getOptionLabelToRender(processedOption) }}</span>
<span v-else :class="cx('optionText')" v-bind="getPTOptions(processedOption, index, 'optionText')">{{ getOptionLabelToRender(processedOption) }}</span>
<template v-if="isOptionGroup(processedOption)">
<component v-if="templates['optiongroupicon']" :is="templates['optiongroupicon']" aria-hidden="true" />
<span v-else-if="optionGroupIcon" :class="[cx('groupIcon'), optionGroupIcon]" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" />
@ -29,7 +29,7 @@
<CascadeSelectSub
v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)"
role="group"
:class="cx('itemList')"
:class="cx('optionList')"
:selectId="selectId"
:focusedOptionId="focusedOptionId"
:options="getOptionGroupChildren(processedOption)"
@ -96,7 +96,7 @@ export default {
}
},
mounted() {
// entering order correction when an item is selected
// entering order correction when an option is selected
(this.isParentMount || this.level === 0) && DomHandler.nestedPosition(this.container, this.level);
this.mounted = true;
},
@ -113,10 +113,10 @@ export default {
getPTOptions(processedOption, index, key) {
return this.ptm(key, {
context: {
item: processedOption,
option: processedOption,
index,
level: this.level,
itemGroup: this.isOptionGroup(processedOption),
optionGroup: this.isOptionGroup(processedOption),
active: this.isOptionActive(processedOption),
focused: this.isOptionFocused(processedOption),
disabled: this.isOptionDisabled(processedOption)

32
components/lib/cascadeselect/style/CascadeSelectStyle.js
View File

@ -105,7 +105,7 @@ const theme = ({ dt }) => `
min-width: 100%;
}
.p-cascadeselect-item-list {
.p-cascadeselect-option-list {
display: none;
min-width: 100%;
position: absolute;
@ -123,7 +123,7 @@ const theme = ({ dt }) => `
gap: ${dt('cascadeselect.list.gap')}
}
.p-cascadeselect-item {
.p-cascadeselect-option {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
@ -134,38 +134,38 @@ const theme = ({ dt }) => `
border-radius: ${dt('cascadeselect.option.border.radius')};
}
.p-cascadeselect-item-active {
.p-cascadeselect-option-active {
overflow: visible;
background: ${dt('cascadeselect.option.focus.background')};
color: ${dt('cascadeselect.option.focus.color')};
}
.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus {
.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus {
background: ${dt('cascadeselect.option.focus.background')};
color: ${dt('cascadeselect.option.focus.color')};
}
.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
color: ${dt('cascadeselect.option.icon.focus.color')};
}
.p-cascadeselect-item-selected {
.p-cascadeselect-option-selected {
background: ${dt('cascadeselect.option.selected.background')};
color: ${dt('cascadeselect.option.selected.color')};
}
.p-cascadeselect-item-selected.p-focus {
.p-cascadeselect-option-selected.p-focus {
background: ${dt('cascadeselect.option.selected.focus.background')};
color: ${dt('cascadeselect.option.selected.focus.color')};
}
.p-cascadeselect-item-active > .p-cascadeselect-item-list {
.p-cascadeselect-option-active > .p-cascadeselect-option-list {
display: block;
left: 100%;
top: 0;
}
.p-cascadeselect-item-content {
.p-cascadeselect-option-content {
display: flex;
align-items: center;
overflow: hidden;
@ -212,19 +212,19 @@ const classes = {
overlay: 'p-cascadeselect-overlay p-component',
listContainer: 'p-cascadeselect-list-container',
list: 'p-cascadeselect-list',
item: ({ instance, processedOption }) => [
'p-cascadeselect-item',
option: ({ instance, processedOption }) => [
'p-cascadeselect-option',
{
'p-cascadeselect-item-active': instance.isOptionActive(processedOption),
'p-cascadeselect-item-selected': instance.isOptionSelected(processedOption),
'p-cascadeselect-option-active': instance.isOptionActive(processedOption),
'p-cascadeselect-option-selected': instance.isOptionSelected(processedOption),
'p-focus': instance.isOptionFocused(processedOption),
'p-disabled': instance.isOptionDisabled(processedOption)
}
],
itemContent: 'p-cascadeselect-item-content',
itemText: 'p-cascadeselect-item-text',
optionContent: 'p-cascadeselect-option-content',
optionText: 'p-cascadeselect-option-text',
groupIcon: 'p-cascadeselect-group-icon',
itemList: 'p-cascadeselect-overlay p-cascadeselect-item-list'
optionList: 'p-cascadeselect-overlay p-cascadeselect-option-list'
};
export default BaseStyle.extend({