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

Refactor #5437 - For OrderList

pull/5507/head
tugcekucukoglu 2024-03-21 16:20:49 +03:00
parent 007ed56d06
commit 2ac69c31f8
6 changed files with 118 additions and 421 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/lib/listbox/Listbox.d.ts vendored
View File

@ -14,12 +14,12 @@ import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
export declare type ListboxPassThroughOptionType = ListboxPassThroughAttributes | ((options: ListboxPassThroughMethodOptions) => ListboxPassThroughAttributes | string) | string | null | undefined;
export declare type ListboxPassThroughOptionType<T = any> = ListboxPassThroughAttributes | ((options: ListboxPassThroughMethodOptions<T>) => ListboxPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface ListboxPassThroughMethodOptions {
export interface ListboxPassThroughMethodOptions<T = any> {
/**
* Defines instance.
*/
@ -43,7 +43,7 @@ export interface ListboxPassThroughMethodOptions {
/**
* Defines parent options.
*/
parent: any;
parent: T;
/**
* Defines passthrough(pt) options in global config.
*/
@ -79,6 +79,21 @@ export interface ListboxChangeEvent {
value: any;
}
/**
* Custom double click event.
* @see {@link ListboxEmits.['item-dblclick']}
*/
export interface ListboxItemDblClickEvent {
/**
* Original event
*/
originalEvent: Event;
/**
* Selected option value
*/
value: any;
}
/**
* Custom filter event.
* @see {@link ListboxEmits.filter}
@ -98,7 +113,7 @@ export interface ListboxFilterEvent {
* Custom passthrough(pt) options.
* @see {@link ListboxProps.pt}
*/
export interface ListboxPassThroughOptions {
export interface ListboxPassThroughOptions<T = any> {
/**
* Used to pass attributes to the root's DOM element.
*/
@ -132,7 +147,7 @@ export interface ListboxPassThroughOptions {
/**
* Used to pass attributes to the list's DOM element.
*/
list?: ListboxPassThroughOptionType;
list?: ListboxPassThroughOptionType<T>;
/**
* Used to pass attributes to the item group's DOM element.
*/
@ -526,6 +541,11 @@ export interface ListboxEmits {
* @param {ListboxFilterEvent} event - Custom filter event.
*/
filter(event: ListboxFilterEvent): void;
/**
* Callback to invoke on item double click.
* @param {ListboxItemDblClickEvent} event - Custom item double click event.
*/
'item-dblclick'(event: ListboxItemDblClickEvent): void;
}
/**

10
components/lib/listbox/Listbox.vue
View File

@ -81,6 +81,7 @@
@mousedown="onOptionMouseDown($event, getOptionIndex(i, getItemOptions))"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
@touchend="onOptionTouchEnd()"
@dblclick="onOptionDblClick($event, option)"
v-bind="getPTOptions(option, getItemOptions, i, 'item')"
:data-p-highlight="isSelected(option)"
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
@ -136,7 +137,7 @@ export default {
name: 'Listbox',
extends: BaseListbox,
inheritAttrs: false,
emits: ['update:modelValue', 'change', 'focus', 'blur', 'filter'],
emits: ['update:modelValue', 'change', 'focus', 'blur', 'filter', 'item-dblclick'],
list: null,
virtualScroller: null,
optionTouched: false,
@ -324,6 +325,12 @@ export default {
this.optionTouched = true;
},
onOptionDblClick(event, item) {
this.$emit('item-dblclick', {
originalEvent: event,
value: item
});
},
onOptionSelectSingle(event, option) {
let selected = this.isSelected(option);
let valueChanged = false;
@ -505,6 +512,7 @@ export default {
}
},
onSpaceKey(event) {
event.preventDefault();
this.onEnterKey(event);
},
onShiftKey() {

24
components/lib/orderlist/BaseOrderList.vue
View File

@ -46,30 +46,14 @@ export default {
type: Boolean,
default: false
},
severity: {
type: String,
default: null
},
tabindex: {
type: Number,
default: 0
},
listProps: {
type: null,
default: null
},
moveUpButtonProps: {
type: null,
default: null
},
moveTopButtonProps: {
type: null,
default: null
},
moveDownButtonProps: {
type: null,
default: null
},
moveBottomButtonProps: {
type: null,
default: null
},
ariaLabelledby: {
type: String,
default: null

70
components/lib/orderlist/OrderList.d.ts vendored
View File

@ -7,11 +7,12 @@
* @module orderlist
*
*/
import { ButtonHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { ListboxPassThroughOptions } from '../listbox';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
export declare type OrderListPassThroughOptionType = OrderListPassThroughAttributes | ((options: OrderListPassThroughMethodOptions) => OrderListPassThroughAttributes | string) | string | null | undefined;
@ -33,10 +34,6 @@ export interface OrderListPassThroughMethodOptions {
* Defines current inline state.
*/
state: OrderListState;
/**
* Defines current options.
*/
context: OrderListContext;
/**
* Defines valid attributes.
*/
@ -114,18 +111,22 @@ export interface OrderListPassThroughOptions {
controls?: OrderListPassThroughOptionType;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
moveUpButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
moveTopButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
moveDownButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to pass attributes to the Button component.
* @see {@link ButtonPassThroughOptions}
*/
moveBottomButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
@ -137,13 +138,10 @@ export interface OrderListPassThroughOptions {
*/
header?: OrderListPassThroughOptionType;
/**
* Used to pass attributes to the list's DOM element.
* Used to pass attributes to the Listbox component.
* @see {@link ListboxPassThroughOptions}
*/
list?: OrderListPassThroughOptionType;
/**
* Used to pass attributes to the item's DOM element.
*/
item?: OrderListPassThroughOptionType;
list?: ListboxPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -174,32 +172,6 @@ export interface OrderListState {
* Current id state as a string.
*/
d_selection: any[];
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current focused item index as a number.
* @defaultvalue -1
*/
focusedOptionIndex: number;
}
/**
* Defines current options in OrderList component.
*/
export interface OrderListContext {
/**
* Current active state of the item as a boolean.
* @defaultValue false
*/
active: boolean;
/**
* Current focus state of the item as a boolean.
* @defaultValue false
*/
focused: boolean;
}
/**
@ -219,7 +191,7 @@ export interface OrderListProps {
*/
selection?: any[];
/**
* Defines whether metaKey is requred or not for the selection.
* Defines whether metaKey is required or not for the selection.
* When true metaKey needs to be pressed to select or unselect an item and
* when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
* @defaultValue false
@ -258,25 +230,9 @@ export interface OrderListProps {
*/
tabindex?: number | string | undefined;
/**
* Used to pass all properties of the HTMLAttributes to the list element.
* Defines the style of the button.
*/
listProps?: HTMLAttributes | undefined;
/**
* Used to pass all properties of the HTMLButtonElement to the move up button inside the component.
*/
moveUpButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Used to pass all properties of the HTMLButtonElement to the move top button inside the component.
*/
moveTopButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Used to pass all properties of the HTMLButtonElement to the move down button inside the component.
*/
moveDownButtonProps?: ButtonHTMLAttributes | undefined;
/**
* Used to pass all properties of the HTMLButtonElement to the move bottom button inside the component.
*/
moveBottomButtonProps?: ButtonHTMLAttributes | undefined;
severity?: HintedString<'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | 'contrast'> | undefined;
/**
* Defines a string value that labels an interactive list element.
*/

397
components/lib/orderlist/OrderList.vue
View File

@ -2,78 +2,65 @@
<div :class="cx('root')" v-bind="ptmi('root')">
<div :class="cx('controls')" v-bind="ptm('controls')">
<slot name="controlsstart"></slot>
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps" :pt="ptm('moveUpButton')" :unstyled="unstyled">
<Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveUpButton')" :unstyled="unstyled">
<template #icon>
<slot name="moveupicon">
<AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps" :pt="ptm('moveTopButton')" :unstyled="unstyled">
</Button>
<Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveTopButton')" :unstyled="unstyled">
<template #icon>
<slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps" :pt="ptm('moveDownButton')" :unstyled="unstyled">
</Button>
<Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveDownButton')" :unstyled="unstyled">
<template #icon>
<slot name="movedownicon">
<AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
</slot>
</template>
</OLButton>
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
</Button>
<Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" :severity="severity" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
<template #icon>
<slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />
</slot>
</template>
</OLButton>
</Button>
<slot name="controlsend"></slot>
</div>
<div :class="cx('container')" v-bind="ptm('container')">
<div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot>
</div>
<transition-group
:ref="listRef"
:id="id + '_list'"
name="p-orderlist-flip"
tag="ul"
:class="cx('list')"
:style="listStyle"
role="listbox"
aria-multiselectable="true"
:tabindex="tabindex"
:aria-activedescendant="focused ? focusedOptionId : undefined"
:aria-label="ariaLabel"
:aria-labelledby="ariaLabelledby"
@focus="onListFocus"
@blur="onListBlur"
@keydown="onListKeyDown"
v-bind="{ ...listProps, ...ptm('list'), ...ptm('transition') }"
>
<template v-for="(item, i) of modelValue" :key="getItemKey(item, i)">
<li
:id="id + '_' + i"
v-ripple
role="option"
:class="cx('item', { item, id: `${id}_${i}` })"
@click="onItemClick($event, item, i)"
@touchend="onItemTouchEnd"
@mousedown="onOptionMouseDown($event, i)"
@mousemove="onOptionMouseMove(i)"
:aria-selected="isSelected(item)"
v-bind="getPTOptions(item, 'item', i)"
:data-p-highlight="isSelected(item)"
:data-p-focused="`${id}_${i}` === focusedOptionId"
>
<slot name="item" :item="item" :index="i"> </slot>
</li>
</template>
</transition-group>
</div>
<Listbox
ref="listbox"
:id="id"
:modelValue="d_selection"
:options="modelValue"
multiple
:metaKeySelection="metaKeySelection"
:listStyle="listStyle"
:tabindex="tabindex"
:dataKey="dataKey"
:autoOptionFocus="autoOptionFocus"
:focusOnHover="focusOnHover"
:ariaLabel="ariaLabel"
:ariaLabelledby="ariaLabelledby"
:pt="ptm('list')"
:unstyled="unstyled"
@focus="onListFocus"
@blur="onListBlur"
@change="onChangeSelection"
>
<template v-if="$slots.header" #header>
<div :class="cx('header')" v-bind="ptm('header')">
<slot name="header"></slot>
</div>
</template>
<template #option="{ option, index }">
<slot name="item" :item="option" :index="index" />
</template>
</Listbox>
</div>
</template>
@ -83,6 +70,7 @@ import AngleDoubleDownIcon from 'primevue/icons/angledoubledown';
import AngleDoubleUpIcon from 'primevue/icons/angledoubleup';
import AngleDownIcon from 'primevue/icons/angledown';
import AngleUpIcon from 'primevue/icons/angleup';
import Listbox from 'primevue/listbox';
import Ripple from 'primevue/ripple';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
import BaseOrderList from './BaseOrderList.vue';
@ -99,9 +87,7 @@ export default {
data() {
return {
id: this.$attrs.id,
d_selection: this.selection,
focused: false,
focusedOptionIndex: -1
d_selection: this.selection
};
},
watch: {
@ -126,222 +112,30 @@ export default {
}
},
methods: {
getItemKey(item, index) {
return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
},
getPTOptions(item, key, index) {
return this.ptm(key, {
context: {
active: this.isSelected(item),
focused: `${this.id}_${index}` === this.focusedOptionId
}
updateSelection(event) {
this.$emit('update:selection', this.d_selection);
this.$emit('selection-change', {
originalEvent: event,
value: this.d_selection
});
},
isSelected(item) {
return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
onChangeSelection(params) {
this.d_selection = params.value;
this.updateSelection(params.event);
},
onListFocus(event) {
this.focused = true;
this.findCurrentFocusedIndex();
this.scrollInView(this.focusedOptionIndex);
this.$emit('focus', event);
},
onListBlur(event) {
this.focused = false;
this.focusedOptionIndex = -1;
this.$emit('blur', event);
},
onListKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
this.onArrowDownKey(event);
break;
case 'ArrowUp':
this.onArrowUpKey(event);
break;
case 'Home':
this.onHomeKey(event);
break;
case 'End':
this.onEndKey(event);
break;
case 'Enter':
case 'NumpadEnter':
this.onEnterKey(event);
break;
case 'Space':
this.onSpaceKey(event);
break;
case 'KeyA':
if (event.ctrlKey) {
this.d_selection = [...this.modelValue];
this.$emit('update:selection', this.d_selection);
event.preventDefault();
}
default:
break;
}
},
onOptionMouseDown(event, index) {
this.changeFocusedOptionIndex(index);
},
onOptionMouseMove(index) {
if (this.focusOnHover && this.focused) {
this.changeFocusedOptionIndex(index);
}
},
onArrowDownKey(event) {
const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex() : this.findFirstSelectedOptionIndex();
this.changeFocusedOptionIndex(optionIndex);
if (event.shiftKey) {
this.onEnterKey(event);
}
event.preventDefault();
},
onArrowUpKey(event) {
const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex() : this.findLastSelectedOptionIndex();
this.changeFocusedOptionIndex(optionIndex);
if (event.shiftKey) {
this.onEnterKey(event);
}
event.preventDefault();
},
onHomeKey(event) {
if (event.ctrlKey && event.shiftKey) {
const matchedOptionIndex = this.findMatchedOptionIndex();
this.d_selection = [...this.modelValue].slice(0, matchedOptionIndex + 1);
this.$emit('update:selection', this.d_selection);
this.$emit('selection-change', {
originalEvent: event,
value: this.d_selection
});
} else {
this.changeFocusedOptionIndex(0);
}
event.preventDefault();
},
onEndKey(event) {
if (event.ctrlKey && event.shiftKey) {
const matchedOptionIndex = this.findMatchedOptionIndex();
this.d_selection = [...this.modelValue].slice(matchedOptionIndex, items.length);
this.$emit('update:selection', this.d_selection);
this.$emit('selection-change', {
originalEvent: event,
value: this.d_selection
});
} else {
this.changeFocusedOptionIndex(this.findAllItems().length - 1);
}
event.preventDefault();
},
onEnterKey(event) {
const matchedOptionIndex = this.findMatchedOptionIndex();
this.onItemClick(event, this.modelValue[matchedOptionIndex], matchedOptionIndex);
event.preventDefault();
},
onSpaceKey(event) {
event.preventDefault();
if (event.shiftKey && this.d_selection && this.d_selection.length > 0) {
const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[0], [...this.modelValue]);
const matchedOptionIndex = this.findMatchedOptionIndex();
this.d_selection = [...this.modelValue].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1);
this.$emit('update:selection', this.d_selection);
this.$emit('selection-change', {
originalEvent: event,
value: this.d_selection
});
} else {
this.onEnterKey(event);
}
},
findAllItems() {
return DomHandler.find(this.list, '[data-pc-section="item"]');
},
findFocusedItem() {
return DomHandler.findSingle(this.list, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
},
findCurrentFocusedIndex() {
if (this.focusedOptionIndex === -1) {
this.focusedOptionIndex = this.findFirstSelectedOptionIndex();
if (this.autoOptionFocus && this.focusedOptionIndex === -1) {
this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
}
}
},
findFirstFocusedOptionIndex() {
const firstFocusableItem = DomHandler.findSingle(this.list, '[data-pc-section="item"]');
return DomHandler.getAttribute(firstFocusableItem, 'id');
},
findFirstSelectedOptionIndex() {
if (this.hasSelectedOption) {
const selectedFirstItem = DomHandler.findSingle(this.list, '[data-p-highlight="true"]');
return DomHandler.getAttribute(selectedFirstItem, 'id');
}
return -1;
},
findLastSelectedOptionIndex() {
if (this.hasSelectedOption) {
const selectedItems = DomHandler.find(this.list, '[data-p-highlight="true"]');
return ObjectUtils.findIndexInList(selectedItems[selectedItems.length - 1], this.list.children);
}
return -1;
},
findMatchedOptionIndex(id = this.focusedOptionIndex) {
const items = this.findAllItems();
return [...items].findIndex((link) => link.id === id);
},
findNextOptionIndex() {
const matchedOptionIndex = this.findMatchedOptionIndex();
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
},
findPrevOptionIndex() {
const matchedOptionIndex = this.findMatchedOptionIndex();
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
},
changeFocusedOptionIndex(index) {
const items = this.findAllItems();
let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
this.focusedOptionIndex = items[order] ? items[order].getAttribute('id') : -1;
this.scrollInView(this.focusedOptionIndex);
},
scrollInView(id) {
const element = DomHandler.findSingle(this.list, `[data-pc-section="item"][id="${id}"]`);
if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start', behavior: 'smooth' });
}
onReorderUpdate(event, value) {
this.$emit('update:modelValue', value);
this.$emit('reorder', {
originalEvent: event,
value: value,
direction: this.reorderDirection
});
},
moveUp(event) {
if (this.d_selection) {
@ -363,12 +157,7 @@ export default {
}
this.reorderDirection = 'up';
this.$emit('update:modelValue', value);
this.$emit('reorder', {
originalEvent: event,
value: value,
direction: this.reorderDirection
});
this.onReorderUpdate(event, value);
}
},
moveTop(event) {
@ -389,12 +178,7 @@ export default {
}
this.reorderDirection = 'top';
this.$emit('update:modelValue', value);
this.$emit('reorder', {
originalEvent: event,
value: value,
direction: this.reorderDirection
});
this.onReorderUpdate(event, value);
}
},
moveDown(event) {
@ -417,12 +201,7 @@ export default {
}
this.reorderDirection = 'down';
this.$emit('update:modelValue', value);
this.$emit('reorder', {
originalEvent: event,
value: value,
direction: this.reorderDirection
});
this.onReorderUpdate(event, value);
}
},
moveBottom(event) {
@ -443,51 +222,12 @@ export default {
}
this.reorderDirection = 'bottom';
this.$emit('update:modelValue', value);
this.$emit('reorder', {
originalEvent: event,
value: value,
direction: this.reorderDirection
});
this.onReorderUpdate(event, value);
}
},
onItemClick(event, item, index) {
this.itemTouched = false;
const selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection);
const selected = selectedIndex != -1;
const metaSelection = this.itemTouched ? false : this.metaKeySelection;
const selectedId = this.findAllItems()[index].getAttribute('id');
this.focusedOptionIndex = selectedId;
if (metaSelection) {
const metaKey = event.metaKey || event.ctrlKey;
if (selected && metaKey) {
this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex);
} else {
this.d_selection = metaKey ? (this.d_selection ? [...this.d_selection] : []) : [];
ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
}
} else {
if (selected) {
this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex);
} else {
this.d_selection = this.d_selection ? [...this.d_selection] : [];
ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
}
}
this.$emit('update:selection', this.d_selection);
this.$emit('selection-change', {
originalEvent: event,
value: this.d_selection
});
},
onItemTouchEnd() {
this.itemTouched = true;
},
updateListScroll() {
this.list = DomHandler.findSingle(this.$refs.listbox.$el, '[data-pc-section="list"]');
const listItems = DomHandler.find(this.list, '[data-pc-section="item"][data-p-highlight="true"]');
if (listItems && listItems.length) {
@ -556,18 +296,12 @@ export default {
if (!this.d_selection || !this.d_selection.length) {
return true;
}
},
listRef(el) {
this.list = el ? el.$el : undefined;
}
},
computed: {
attributeSelector() {
return UniqueComponentId();
},
focusedOptionId() {
return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
},
moveUpAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined;
},
@ -585,11 +319,12 @@ export default {
}
},
components: {
OLButton: Button,
AngleUpIcon: AngleUpIcon,
AngleDownIcon: AngleDownIcon,
AngleDoubleUpIcon: AngleDoubleUpIcon,
AngleDoubleDownIcon: AngleDoubleDownIcon
Listbox,
Button,
AngleUpIcon,
AngleDownIcon,
AngleDoubleUpIcon,
AngleDoubleDownIcon
},
directives: {
ripple: Ripple

8
components/lib/orderlist/style/OrderListStyle.js
View File

@ -11,13 +11,7 @@ const classes = {
container: 'p-orderlist-list-container',
header: 'p-orderlist-header',
list: 'p-orderlist-list',
item: ({ instance, item, id }) => [
'p-orderlist-item',
{
'p-highlight': instance.isSelected(item),
'p-focus': id === instance.focusedOptionId
}
]
item: 'p-orderlist-item'
};
export default BaseStyle.extend({