mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Fixed #3802 - Improve folder structure for nuxt configurations
This commit is contained in:
mertsincan
parent
851950270b
commit
f5fe822afb
563 changed files with 1703 additions and 1095 deletions
506
components/lib/multiselect/MultiSelect.d.ts
vendored
Executable file
506
components/lib/multiselect/MultiSelect.d.ts
vendored
Executable file
|
|
@ -0,0 +1,506 @@
|
|||
/**
|
||||
*
|
||||
* MultiSelect is used to select multiple items from a collection.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/multiselect/)
|
||||
*
|
||||
* @module multiselect
|
||||
*
|
||||
*/
|
||||
import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
|
||||
|
||||
/**
|
||||
* Custom change event.
|
||||
* @see {@link MultiSelectEmits.change}
|
||||
*/
|
||||
export interface MultiSelectChangeEvent {
|
||||
/**
|
||||
* Browser event
|
||||
*/
|
||||
originalEvent: Event;
|
||||
/**
|
||||
* Selected option value
|
||||
*/
|
||||
value: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom all change event.
|
||||
* @see {@link MultiSelectEmits['selectall-change']}
|
||||
*/
|
||||
export interface MultiSelectAllChangeEvent {
|
||||
/**
|
||||
* Browser event
|
||||
*/
|
||||
originalEvent: Event;
|
||||
/**
|
||||
* Whether all data is selected.
|
||||
*/
|
||||
checked: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom filter event
|
||||
* @see {@link MultiSelectEmits.filter}
|
||||
*/
|
||||
export interface MultiSelectFilterEvent {
|
||||
/**
|
||||
* Original event
|
||||
*/
|
||||
originalEvent: Event;
|
||||
/**
|
||||
* Filter value
|
||||
*/
|
||||
value: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid properties in MultiSelect component.
|
||||
*/
|
||||
export interface MultiSelectProps {
|
||||
/**
|
||||
* Value of the component.
|
||||
*/
|
||||
modelValue?: any;
|
||||
/**
|
||||
* An array of selectitems to display as the available options.
|
||||
*/
|
||||
options?: any[] | undefined;
|
||||
/**
|
||||
* Property name or getter function to use as the label of an option.
|
||||
*/
|
||||
optionLabel?: string | ((data: any) => string) | undefined;
|
||||
/**
|
||||
* Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
|
||||
*/
|
||||
optionValue?: string | ((data: any) => any) | undefined;
|
||||
/**
|
||||
* Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
|
||||
*/
|
||||
optionDisabled?: string | ((data: any) => boolean) | undefined;
|
||||
/**
|
||||
* Property name or getter function to use as the label of an option group.
|
||||
*/
|
||||
optionGroupLabel?: string | ((data: any) => string) | undefined;
|
||||
/**
|
||||
* Property name or getter function that refers to the children options of option group.
|
||||
*/
|
||||
optionGroupChildren?: string | ((data: any) => any[]) | undefined;
|
||||
/**
|
||||
* Height of the viewport, a scrollbar is defined if height of list exceeds this value.
|
||||
* @defaultValue 200px
|
||||
*/
|
||||
scrollHeight?: string | undefined;
|
||||
/**
|
||||
* Label to display when there are no selections.
|
||||
*/
|
||||
placeholder?: string | undefined;
|
||||
/**
|
||||
* When present, it specifies that the component should be disabled.
|
||||
* @defaultValue false
|
||||
*/
|
||||
disabled?: boolean | undefined;
|
||||
/**
|
||||
* Identifier of the underlying input element.
|
||||
*/
|
||||
inputId?: string | undefined;
|
||||
/**
|
||||
* Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
|
||||
*/
|
||||
inputProps?: InputHTMLAttributes | undefined;
|
||||
/**
|
||||
* Inline style of the overlay panel.
|
||||
*/
|
||||
panelStyle?: any;
|
||||
/**
|
||||
* Style class of the overlay panel.
|
||||
*/
|
||||
panelClass?: any;
|
||||
/**
|
||||
* Uses to pass all properties of the HTMLDivElement to the overlay panel.
|
||||
*/
|
||||
panelProps?: HTMLAttributes | undefined;
|
||||
/**
|
||||
* Uses to pass all properties of the HTMLInputElement to the filter input inside the overlay panel.
|
||||
*/
|
||||
filterInputProps?: InputHTMLAttributes | undefined;
|
||||
/**
|
||||
* Uses to pass all properties of the HTMLButtonElement to the clear button inside the overlay panel.
|
||||
*/
|
||||
closeButtonProps?: ButtonHTMLAttributes | undefined;
|
||||
/**
|
||||
* A property to uniquely identify an option.
|
||||
*/
|
||||
dataKey?: string | undefined;
|
||||
/**
|
||||
* When specified, displays a filter input at header.
|
||||
* @defaultValue false
|
||||
*/
|
||||
filter?: boolean | undefined;
|
||||
/**
|
||||
* Placeholder text to show when filter input is empty.
|
||||
*/
|
||||
filterPlaceholder?: string | undefined;
|
||||
/**
|
||||
* Locale to use in filtering. The default locale is the host environment's current locale.
|
||||
*/
|
||||
filterLocale?: string | undefined;
|
||||
/**
|
||||
* Defines the filtering algorithm to use when searching the options.
|
||||
* @defaultValue contains
|
||||
*/
|
||||
filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | undefined;
|
||||
/**
|
||||
* Fields used when filtering the options, defaults to optionLabel.
|
||||
*/
|
||||
filterFields?: string[] | undefined;
|
||||
/**
|
||||
* A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
|
||||
* @defaultValue body
|
||||
*/
|
||||
appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
|
||||
/**
|
||||
* Defines how the selected items are displayed.
|
||||
* @defaultValue comma
|
||||
*/
|
||||
display?: 'comma' | 'chip' | undefined;
|
||||
/**
|
||||
* Label to display after exceeding max selected labels.
|
||||
* @defaultValue '{0} items selected'
|
||||
*/
|
||||
selectedItemsLabel?: string | undefined;
|
||||
/**
|
||||
* Decides how many selected item labels to show at most.
|
||||
*/
|
||||
maxSelectedLabels?: number | undefined;
|
||||
/**
|
||||
* Maximum number of selectable items.
|
||||
*/
|
||||
selectionLimit?: number | undefined;
|
||||
/**
|
||||
* Whether to show the header checkbox to toggle the selection of all items at once.
|
||||
* @defaultValue true
|
||||
*/
|
||||
showToggleAll?: boolean | undefined;
|
||||
/**
|
||||
* Whether the multiselect is in loading state.
|
||||
* @defaultValue false
|
||||
*/
|
||||
loading?: boolean | undefined;
|
||||
/**
|
||||
* Icon to display in the checkboxes.
|
||||
* @defaultValue pi pi-check
|
||||
*/
|
||||
checkboxIcon?: string | undefined;
|
||||
/**
|
||||
* Icon to display in the dropdown close button.
|
||||
* @defaultValue pi pi-times
|
||||
*/
|
||||
closeIcon?: string | undefined;
|
||||
/**
|
||||
* Icon to display in the dropdown.
|
||||
* @defaultValue pi pi-chevron-down
|
||||
*/
|
||||
dropdownIcon?: string | undefined;
|
||||
/**
|
||||
* Icon to display in filter input.
|
||||
* @defaultValue pi pi-search
|
||||
*/
|
||||
filterIcon?: string | undefined;
|
||||
/**
|
||||
* Icon to display in loading state.
|
||||
* @defaultValue pi pi-spinner pi-spin
|
||||
*/
|
||||
loadingIcon?: string | undefined;
|
||||
/**
|
||||
* Icon to display in chip remove action.
|
||||
* @defaultValue pi pi-times-circle
|
||||
*/
|
||||
removeTokenIcon?: string | undefined;
|
||||
/**
|
||||
* Whether all data is selected.
|
||||
* @defaultValue false
|
||||
*/
|
||||
selectAll?: boolean | undefined;
|
||||
/**
|
||||
* Clears the filter value when hiding the dropdown.
|
||||
* @defaultValue false
|
||||
*/
|
||||
resetFilterOnHide?: boolean | undefined;
|
||||
/**
|
||||
* Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
|
||||
* @type {VirtualScrollerProps}
|
||||
*/
|
||||
virtualScrollerOptions?: VirtualScrollerProps;
|
||||
/**
|
||||
* Whether to focus on the first visible or selected element when the overlay panel is shown.
|
||||
* @defaultValue true
|
||||
*/
|
||||
autoOptionFocus?: boolean | undefined;
|
||||
/**
|
||||
* Whether to focus on the filter element when the overlay panel is shown.
|
||||
* @defaultValue false
|
||||
*/
|
||||
autoFilterFocus?: boolean | undefined;
|
||||
/**
|
||||
* Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
|
||||
* @defaultValue '{0} results are available'
|
||||
*/
|
||||
filterMessage?: string | undefined;
|
||||
/**
|
||||
* Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.
|
||||
* @defaultValue '{0} items selected'
|
||||
*/
|
||||
selectionMessage?: string | undefined;
|
||||
/**
|
||||
* Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration.
|
||||
* @defaultValue No selected item
|
||||
*/
|
||||
emptySelectionMessage?: string | undefined;
|
||||
/**
|
||||
* Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.
|
||||
* @defaultValue No results found
|
||||
*/
|
||||
emptyFilterMessage?: string | undefined;
|
||||
/**
|
||||
* Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
|
||||
* @defaultValue No results found'
|
||||
*/
|
||||
emptyMessage?: string | undefined;
|
||||
/**
|
||||
* Index of the element in tabbing order.
|
||||
*/
|
||||
tabindex?: number | string | undefined;
|
||||
/**
|
||||
* Defines a string value that labels an interactive element.
|
||||
*/
|
||||
'aria-label'?: string | undefined;
|
||||
/**
|
||||
* Identifier of the underlying input element.
|
||||
*/
|
||||
'aria-labelledby'?: string | undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid slots in MultiSelect component.
|
||||
*/
|
||||
export interface MultiSelectSlots {
|
||||
/**
|
||||
* Custom value template.
|
||||
* @param {Object} scope - value slot's params.
|
||||
*/
|
||||
value(scope: {
|
||||
/**
|
||||
* Value of the component
|
||||
*/
|
||||
value: any;
|
||||
/**
|
||||
* Placeholder prop value
|
||||
*/
|
||||
placeholder: string;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom chip template.
|
||||
* @param {Object} scope - chip slot's params.
|
||||
*/
|
||||
chip(scope: {
|
||||
/**
|
||||
* A value in the selection
|
||||
*/
|
||||
value: any;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom indicator template.
|
||||
*/
|
||||
indicator(): VNode[];
|
||||
/**
|
||||
* Custom header template.
|
||||
* @param {Object} scope - header slot's params.
|
||||
*/
|
||||
header(scope: {
|
||||
/**
|
||||
* Value of the component
|
||||
*/
|
||||
value: any;
|
||||
/**
|
||||
* Displayed options
|
||||
*/
|
||||
options: any[];
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom footer template.
|
||||
* @param {Object} scope - footer slot's params.
|
||||
*/
|
||||
footer(scope: {
|
||||
/**
|
||||
* Value of the component
|
||||
*/
|
||||
value: any;
|
||||
/**
|
||||
* Displayed options
|
||||
*/
|
||||
options: any[];
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom option template.
|
||||
* @param {Object} scope - option slot's params.
|
||||
*/
|
||||
option(scope: {
|
||||
/**
|
||||
* Option instance
|
||||
*/
|
||||
option: any;
|
||||
/**
|
||||
* Index of the option
|
||||
*/
|
||||
index: number;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom option group template.
|
||||
* @param {Object} scope - option group slot's params.
|
||||
*/
|
||||
optiongroup(scope: {
|
||||
/**
|
||||
* Option instance
|
||||
*/
|
||||
option: any;
|
||||
/**
|
||||
* Index of the option
|
||||
*/
|
||||
index: number;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom emptyfilter template.
|
||||
*/
|
||||
emptyfilter(): VNode[];
|
||||
/**
|
||||
* Custom empty template.
|
||||
*/
|
||||
empty(): VNode[];
|
||||
/**
|
||||
* Custom content template.
|
||||
* @param {Object} scope - content slot's params.
|
||||
*/
|
||||
content(scope: {
|
||||
/**
|
||||
* An array of objects to display for virtualscroller
|
||||
*/
|
||||
items: any;
|
||||
/**
|
||||
* Style class of the component
|
||||
*/
|
||||
styleClass: string;
|
||||
/**
|
||||
* Referance of the content
|
||||
* @param {HTMLElement} el - Element of 'ref' property
|
||||
*/
|
||||
contentRef(el: any): void;
|
||||
/**
|
||||
* Options of the items
|
||||
* @param {number} index - Rendered index
|
||||
* @return {VirtualScrollerItemOptions}
|
||||
*/
|
||||
getItemOptions(index: number): VirtualScrollerItemOptions;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom loader template.
|
||||
* @param {Object} scope - loader slot's params.
|
||||
*/
|
||||
loader(scope: {
|
||||
/**
|
||||
* Options of the loader items for virtualscroller
|
||||
*/
|
||||
options: any[];
|
||||
}): VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid emits in MultiSelect component.
|
||||
*/
|
||||
export interface MultiSelectEmits {
|
||||
/**
|
||||
* Emitted when the value changes.
|
||||
* @param {*} value - New value.
|
||||
*/
|
||||
'update:modelValue'(value: any): void;
|
||||
/**
|
||||
* Callback to invoke on value change.
|
||||
* @param {MultiSelectChangeEvent} event - Custom change event.
|
||||
*/
|
||||
change(event: MultiSelectChangeEvent): void;
|
||||
/**
|
||||
* Callback to invoke when the component receives focus.
|
||||
* @param {Event} event - Browser event.
|
||||
*/
|
||||
focus(event: Event): void;
|
||||
/**
|
||||
* Callback to invoke when the component loses focus.
|
||||
* @param {Event} event - Browser event.
|
||||
*/
|
||||
blur(event: Event): void;
|
||||
/**
|
||||
* Callback to invoke before the overlay is shown.
|
||||
*/
|
||||
'before-show'(): void;
|
||||
/**
|
||||
* Callback to invoke before the overlay is hidden.
|
||||
*/
|
||||
'before-hide'(): void;
|
||||
/**
|
||||
* Callback to invoke when the overlay is shown.
|
||||
*/
|
||||
show(): void;
|
||||
/**
|
||||
* Callback to invoke when the overlay is hidden.
|
||||
*/
|
||||
hide(): void;
|
||||
/**
|
||||
* Callback to invoke on filter input.
|
||||
* @param {MultiSelectFilterEvent} event - Custom filter event.
|
||||
*/
|
||||
filter(event: MultiSelectFilterEvent): void;
|
||||
/**
|
||||
* Callback to invoke when all data is selected.
|
||||
* @param {MultiSelectAllChangeEvent} event - Custom select all change event.
|
||||
*/
|
||||
'selectall-change'(event: MultiSelectAllChangeEvent): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* **PrimeVue - MultiSelect**
|
||||
*
|
||||
* _MultiSelect is used to select multiple items from a collection._
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/multiselect/)
|
||||
* --- ---
|
||||
* 
|
||||
*
|
||||
* @group Component
|
||||
*
|
||||
*/
|
||||
declare class MultiSelect extends ClassComponent<MultiSelectProps, MultiSelectSlots, MultiSelectEmits> {
|
||||
/**
|
||||
* Shows the overlay.
|
||||
* @param {boolean} [isFocus] - Decides whether to focus on the component. Default value is false.
|
||||
*
|
||||
* @memberof MultiSelect
|
||||
*/
|
||||
show(isFocus?: boolean): void;
|
||||
/**
|
||||
* Hides the overlay.
|
||||
* @param {boolean} [isFocus] - Decides whether to focus on the component. Default value is false.
|
||||
*
|
||||
* @memberof MultiSelect
|
||||
*/
|
||||
hide(isFocus?: boolean): void;
|
||||
}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
interface GlobalComponents {
|
||||
MultiSelect: GlobalComponentConstructor<MultiSelect>;
|
||||
}
|
||||
}
|
||||
|
||||
export default MultiSelect;
|
||||
233
components/lib/multiselect/MultiSelect.spec.js
Normal file
233
components/lib/multiselect/MultiSelect.spec.js
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
import PrimeVue from 'primevue/config';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import MultiSelect from './MultiSelect.vue';
|
||||
|
||||
describe('MultiSelect.vue', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
wrapper = mount(MultiSelect, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modelValue: null,
|
||||
options: [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
],
|
||||
optionLabel: 'name',
|
||||
placeholder: 'Select Cities'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('should exist', async () => {
|
||||
expect(wrapper.find('.p-multiselect.p-component').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-multiselect-label.p-placeholder').text()).toBe('Select Cities');
|
||||
expect(wrapper.find('.p-multiselect-panel').exists()).toBe(false);
|
||||
|
||||
await wrapper.vm.onContainerClick();
|
||||
|
||||
expect(wrapper.findAll('li.p-multiselect-item').length).toBe(5);
|
||||
expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['aria-label']).toBe('New York');
|
||||
expect(wrapper.findAll('li.p-multiselect-item')[0].findAll('span')[1].text()).toBe('New York');
|
||||
});
|
||||
|
||||
it('should select an item', async () => {
|
||||
await wrapper.vm.onOptionSelect({}, wrapper.vm.options[0]);
|
||||
|
||||
expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[wrapper.vm.options[0]]]);
|
||||
|
||||
await wrapper.setProps({ modelValue: [wrapper.vm.options[0]] });
|
||||
await wrapper.vm.onContainerClick();
|
||||
|
||||
expect(wrapper.findAll('li.p-multiselect-item')[0].classes()).toContain('p-highlight');
|
||||
expect(wrapper.find('.p-multiselect-label').text()).toBe('New York');
|
||||
});
|
||||
|
||||
it('should select multiple item', async () => {
|
||||
await wrapper.setProps({ modelValue: [wrapper.vm.options[0]] });
|
||||
|
||||
await wrapper.vm.onOptionSelect({}, wrapper.vm.options[1]);
|
||||
|
||||
expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[wrapper.vm.options[0], wrapper.vm.options[1]]]);
|
||||
|
||||
await wrapper.setProps({ modelValue: [wrapper.vm.options[0], wrapper.vm.options[1]] });
|
||||
await wrapper.vm.onContainerClick();
|
||||
|
||||
expect(wrapper.findAll('li.p-multiselect-item')[0].classes()).toContain('p-highlight');
|
||||
expect(wrapper.findAll('li.p-multiselect-item')[1].classes()).toContain('p-highlight');
|
||||
});
|
||||
|
||||
it('should close panel', async () => {
|
||||
await wrapper.vm.onCloseClick();
|
||||
|
||||
expect(wrapper.find('.p-multiselect-panel').exists()).toBe(false);
|
||||
});
|
||||
|
||||
it('should chip work', async () => {
|
||||
await wrapper.setProps({
|
||||
display: 'chip',
|
||||
modelValue: [wrapper.vm.options[0]]
|
||||
});
|
||||
|
||||
expect(wrapper.find('.p-multiselect-token').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-multiselect-token-label').text()).toBe('New York');
|
||||
});
|
||||
|
||||
describe('custom icons', () => {
|
||||
it('should have custom chip remove icon', async () => {
|
||||
await wrapper.setProps({
|
||||
display: 'chip',
|
||||
modelValue: [wrapper.vm.options[0]],
|
||||
removeTokenIcon: 'pi pi-discord'
|
||||
});
|
||||
|
||||
const icon = wrapper.find('.p-multiselect-token-icon');
|
||||
|
||||
expect(icon.classes()).toContain('pi-discord');
|
||||
});
|
||||
|
||||
it('should have custom dropdown icon', async () => {
|
||||
await wrapper.setProps({
|
||||
dropdownIcon: 'pi pi-discord'
|
||||
});
|
||||
|
||||
const icon = wrapper.find('.p-multiselect-trigger-icon');
|
||||
|
||||
expect(icon.classes()).toContain('pi-discord');
|
||||
});
|
||||
|
||||
it('should have custom filter icon', async () => {
|
||||
await wrapper.setProps({
|
||||
filter: true,
|
||||
filterIcon: 'pi pi-discord'
|
||||
});
|
||||
|
||||
await wrapper.vm.onContainerClick();
|
||||
|
||||
const icon = wrapper.find('.p-multiselect-filter-icon');
|
||||
|
||||
expect(icon.classes()).toContain('pi-discord');
|
||||
});
|
||||
|
||||
it('should have custom close icon', async () => {
|
||||
await wrapper.setProps({
|
||||
closeIcon: 'pi pi-discord'
|
||||
});
|
||||
|
||||
await wrapper.vm.onContainerClick();
|
||||
|
||||
const icon = wrapper.find('.p-multiselect-close-icon');
|
||||
|
||||
expect(icon.classes()).toContain('pi-discord');
|
||||
});
|
||||
|
||||
it('should have custom checkbox icons', async () => {
|
||||
await wrapper.setProps({
|
||||
checkboxIcon: 'pi pi-discord'
|
||||
});
|
||||
|
||||
await wrapper.setProps({
|
||||
checkboxIcon: 'pi pi-discord',
|
||||
modelValue: wrapper.vm.options
|
||||
});
|
||||
|
||||
await wrapper.vm.onContainerClick();
|
||||
|
||||
wrapper.findAll('.p-checkbox-icon').forEach((icon) => {
|
||||
expect(icon.classes()).toContain('pi-discord');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const groupedItems = [
|
||||
{
|
||||
name: 'Germany',
|
||||
code: 'DE',
|
||||
items: [
|
||||
{ name: 'Berlin', value: 'Berlin' },
|
||||
{ name: 'Frankfurt', value: 'Frankfurt' },
|
||||
{ name: 'Hamburg', value: 'Hamburg' },
|
||||
{ name: 'Munich', value: 'Munich' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
code: 'US',
|
||||
items: [
|
||||
{ name: 'Chicago', value: 'Chicago' },
|
||||
{ name: 'Los Angeles', value: 'Los Angeles' },
|
||||
{ name: 'New York', value: 'New York' },
|
||||
{ name: 'San Francisco', value: 'San Francisco' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Japan',
|
||||
code: 'JP',
|
||||
items: [
|
||||
{ name: 'Kyoto', value: 'Kyoto' },
|
||||
{ name: 'Osaka', value: 'Osaka' },
|
||||
{ name: 'Tokyo', value: 'Tokyo' },
|
||||
{ name: 'Yokohama', value: 'Yokohama' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
describe('grouped', () => {
|
||||
it('should show group labels', async () => {
|
||||
await wrapper.setProps({
|
||||
options: groupedItems,
|
||||
optionGroupLabel: 'name',
|
||||
optionGroupChildren: 'items'
|
||||
});
|
||||
|
||||
await wrapper.vm.onContainerClick();
|
||||
expect(wrapper.find('.p-multiselect-item-group').exists()).toBe(true);
|
||||
});
|
||||
|
||||
it('should show emit the filter event when filter text is entered', async () => {
|
||||
await wrapper.setProps({
|
||||
options: groupedItems,
|
||||
optionGroupLabel: 'name',
|
||||
optionGroupChildren: 'items',
|
||||
filter: true,
|
||||
autoFilterFocus: true
|
||||
});
|
||||
|
||||
await wrapper.vm.onContainerClick();
|
||||
const input = await wrapper.find('input.p-multiselect-filter');
|
||||
|
||||
input.setValue('Ber');
|
||||
input.trigger('input');
|
||||
|
||||
expect(wrapper.emitted()).toHaveProperty('filter');
|
||||
});
|
||||
|
||||
it('should show relevant group labels for filtered items', async () => {
|
||||
await wrapper.setProps({
|
||||
options: groupedItems,
|
||||
optionGroupLabel: 'name',
|
||||
optionGroupChildren: 'items',
|
||||
filter: true,
|
||||
autoFilterFocus: true
|
||||
});
|
||||
|
||||
await wrapper.vm.onContainerClick();
|
||||
const input = await wrapper.find('input.p-multiselect-filter');
|
||||
|
||||
input.value = 'Ber';
|
||||
|
||||
await wrapper.vm.onFilterChange({ target: input });
|
||||
expect(wrapper.findAll('.p-multiselect-item-group').length).toBe(1);
|
||||
expect(wrapper.find('.p-multiselect-item-group').text()).toBe('Germany');
|
||||
});
|
||||
});
|
||||
});
|
||||
1311
components/lib/multiselect/MultiSelect.vue
Executable file
1311
components/lib/multiselect/MultiSelect.vue
Executable file
File diff suppressed because it is too large
Load diff
9
components/lib/multiselect/package.json
Normal file
9
components/lib/multiselect/package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"main": "./multiselect.cjs.js",
|
||||
"module": "./multiselect.esm.js",
|
||||
"unpkg": "./multiselect.min.js",
|
||||
"types": "./MultiSelect.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./MultiSelect.vue"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue