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; 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. * Used to pass attributes to the group icon's DOM element.
*/ */
@ -217,7 +217,7 @@ export interface CascadeSelectContext {
/** /**
* Current option. * Current option.
*/ */
item: any; option: any;
/** /**
* Index of the option. * Index of the option.
*/ */
@ -227,9 +227,9 @@ export interface CascadeSelectContext {
*/ */
level: number; 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. * Current active state of option as a boolean.
* @defaultValue false * @defaultValue false

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

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

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

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