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
459
components/lib/dropdown/Dropdown.d.ts
vendored
Executable file
459
components/lib/dropdown/Dropdown.d.ts
vendored
Executable file
|
|
@ -0,0 +1,459 @@
|
|||
/**
|
||||
*
|
||||
* Dropdown also known as Select, is used to choose an item from a collection of options.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/dropdown/)
|
||||
*
|
||||
* @module dropdown
|
||||
*
|
||||
*/
|
||||
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
|
||||
|
||||
/**
|
||||
* Custom change event.
|
||||
* @see {@link DropdownEmits.change}
|
||||
*/
|
||||
export interface DropdownChangeEvent {
|
||||
/**
|
||||
* Browser event.
|
||||
*/
|
||||
originalEvent: Event;
|
||||
/**
|
||||
* Selected option value
|
||||
*/
|
||||
value: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom filter event.
|
||||
* @see {@link DropdownEmits.filter}
|
||||
*/
|
||||
export interface DropdownFilterEvent {
|
||||
/**
|
||||
* Browser event.
|
||||
*/
|
||||
originalEvent: Event;
|
||||
/**
|
||||
* Filter value
|
||||
*/
|
||||
value: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid properties in Dropdown component.
|
||||
*/
|
||||
export interface DropdownProps {
|
||||
/**
|
||||
* Value of the component.
|
||||
*/
|
||||
modelValue?: any;
|
||||
/**
|
||||
* An array of selectitems to display as the available options.
|
||||
*/
|
||||
options?: any[];
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* When present, custom value instead of predefined options can be entered using the editable input field.
|
||||
* @defaultValue false
|
||||
*/
|
||||
editable?: boolean | undefined;
|
||||
/**
|
||||
* Default text to display when no option is selected.
|
||||
*/
|
||||
placeholder?: string | undefined;
|
||||
/**
|
||||
* When present, it specifies that the component should be disabled.
|
||||
* @defaultValue false
|
||||
*/
|
||||
disabled?: boolean | undefined;
|
||||
/**
|
||||
* A property to uniquely identify an option.
|
||||
*/
|
||||
dataKey?: string | undefined;
|
||||
/**
|
||||
* When enabled, a clear icon is displayed to clear the value.
|
||||
* @defaultValue false
|
||||
*/
|
||||
showClear?: boolean | undefined;
|
||||
/**
|
||||
* Identifier of the underlying input element.
|
||||
*/
|
||||
inputId?: string | undefined;
|
||||
/**
|
||||
* Inline style of the input field.
|
||||
*/
|
||||
inputStyle?: object | undefined;
|
||||
/**
|
||||
* Style class of the input field.
|
||||
*/
|
||||
inputClass?: string | object | undefined;
|
||||
/**
|
||||
* Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component.
|
||||
*/
|
||||
inputProps?: InputHTMLAttributes | HTMLAttributes | undefined;
|
||||
/**
|
||||
* Inline style of the overlay panel.
|
||||
*/
|
||||
panelStyle?: object | undefined;
|
||||
/**
|
||||
* Style class of the overlay panel.
|
||||
*/
|
||||
panelClass?: string | object | undefined;
|
||||
/**
|
||||
* Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.
|
||||
*/
|
||||
panelProps?: HTMLAttributes | undefined;
|
||||
/**
|
||||
* Uses to pass all properties of the HTMLInputElement to the filter input inside the component.
|
||||
*/
|
||||
filterInputProps?: InputHTMLAttributes | undefined;
|
||||
/**
|
||||
* Uses to pass all properties of the HTMLElement to the clear icon inside the component.
|
||||
*/
|
||||
clearIconProps?: HTMLAttributes | undefined;
|
||||
/**
|
||||
* A valid query selector or an HTMLElement to specify where the overlay gets attached.
|
||||
* @defaultValue body
|
||||
*/
|
||||
appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
|
||||
/**
|
||||
* Whether the dropdown is in loading state.
|
||||
* @defaultValue false
|
||||
*/
|
||||
loading?: boolean | undefined;
|
||||
/**
|
||||
* Icon to display in clear button.
|
||||
* @defaultValue pi pi-times
|
||||
*/
|
||||
clearIcon?: 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;
|
||||
/**
|
||||
* Clears the filter value when hiding the dropdown.
|
||||
* @defaultValue false
|
||||
*/
|
||||
resetFilterOnHide?: boolean;
|
||||
/**
|
||||
* Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
|
||||
*/
|
||||
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;
|
||||
/**
|
||||
* When enabled, the focused option is selected.
|
||||
* @defaultValue false
|
||||
*/
|
||||
selectOnFocus?: 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 foun
|
||||
*/
|
||||
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 Dropdown component.
|
||||
*/
|
||||
export interface DropdownSlots {
|
||||
/**
|
||||
* 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 indicator template.
|
||||
*/
|
||||
indicator(): VNode[];
|
||||
/**
|
||||
* Custom header template of panel.
|
||||
* @param {Object} scope - header slot's params.
|
||||
*/
|
||||
header(scope: {
|
||||
/**
|
||||
* Value of the component
|
||||
*/
|
||||
value: any;
|
||||
/**
|
||||
* Displayed options
|
||||
*/
|
||||
options: any[];
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom footer template of panel.
|
||||
* @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 empty filter 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 {@link VirtualScroller.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 Dropdown component.
|
||||
*/
|
||||
export interface DropdownEmits {
|
||||
/**
|
||||
* Emitted when the value changes.
|
||||
* @param {*} value - New value.
|
||||
*/
|
||||
'update:modelValue'(value: any): void;
|
||||
/**
|
||||
* Callback to invoke on value change.
|
||||
* @param {DropdownChangeEvent} event - Custom change event.
|
||||
*/
|
||||
change(event: DropdownChangeEvent): 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 {DropdownFilterEvent} event - Custom filter event.
|
||||
*/
|
||||
filter(event: DropdownFilterEvent): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* **PrimeVue - Dropdown**
|
||||
*
|
||||
* _Dropdown also known as Select, is used to choose an item from a collection of options._
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/dropdown/)
|
||||
* --- ---
|
||||
* 
|
||||
*
|
||||
* @group Component
|
||||
*/
|
||||
declare class Dropdown extends ClassComponent<DropdownProps, DropdownSlots, DropdownEmits> {
|
||||
/**
|
||||
* Shows the overlay.
|
||||
* @param {boolean} [isFocus] - Decides whether to focus on the component. @defaultValue false.
|
||||
*
|
||||
* @memberof Dropdown
|
||||
*/
|
||||
show: (isFocus?: boolean) => void;
|
||||
/**
|
||||
* Hides the overlay.
|
||||
* @param {boolean} [isFocus] - Decides whether to focus on the component. @defaultValue false.
|
||||
*
|
||||
* @memberof Dropdown
|
||||
*/
|
||||
hide: (isFocus?: boolean) => void;
|
||||
}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
interface GlobalComponents {
|
||||
Dropdown: GlobalComponentConstructor<Dropdown>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Dropdown;
|
||||
361
components/lib/dropdown/Dropdown.spec.js
Normal file
361
components/lib/dropdown/Dropdown.spec.js
Normal file
|
|
@ -0,0 +1,361 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import PrimeVue from 'primevue/config';
|
||||
import { h } from 'vue';
|
||||
import Dropdown from './Dropdown.vue';
|
||||
|
||||
describe('Dropdown.vue', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
wrapper = mount(Dropdown, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.trigger('click');
|
||||
});
|
||||
|
||||
it('should Dropdown exist', () => {
|
||||
expect(wrapper.find('.p-dropdown.p-component').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-dropdown-panel').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-dropdown-empty-message').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-inputwrapper-filled').exists()).toBe(false);
|
||||
expect(wrapper.find('.p-inputwrapper-focus').exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('option checks', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
wrapper = mount(Dropdown, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
options: [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
],
|
||||
optionLabel: 'name',
|
||||
optionValue: 'code',
|
||||
placeholder: 'Select a City'
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.trigger('click');
|
||||
});
|
||||
|
||||
it('should show the options', () => {
|
||||
expect(wrapper.find('.p-dropdown-label.p-placeholder').text()).toBe('Select a City');
|
||||
expect(wrapper.find('.p-dropdown-items-wrapper > .p-dropdown-items').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-dropdown-item').exists()).toBe(true);
|
||||
expect(wrapper.findAll('.p-dropdown-item').length).toBe(5);
|
||||
expect(wrapper.findAll('.p-dropdown-item')[0].text()).toBe('New York');
|
||||
});
|
||||
});
|
||||
|
||||
describe('clear checks', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
wrapper = mount(Dropdown, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
clearIcon: 'pi pi-discord',
|
||||
modelValue: 'value',
|
||||
showClear: true
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.trigger('click');
|
||||
});
|
||||
|
||||
it('should have correct icon', () => {
|
||||
expect(wrapper.find('.p-dropdown-clear-icon').classes()).toContain('pi-discord');
|
||||
});
|
||||
});
|
||||
|
||||
describe('editable checks', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
wrapper = mount(Dropdown, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
options: [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
],
|
||||
optionLabel: 'name',
|
||||
optionValue: 'code',
|
||||
placeholder: 'Select a City',
|
||||
editable: true
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.trigger('click');
|
||||
});
|
||||
|
||||
it('should show the options', () => {
|
||||
expect(wrapper.find('.p-dropdown-label.p-placeholder').exists()).toBe(false);
|
||||
expect(wrapper.find('.p-dropdown-label.p-inputtext').exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('option groups checks', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
wrapper = mount(Dropdown, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
label: 'Germany',
|
||||
code: 'DE',
|
||||
items: [
|
||||
{ label: 'Berlin', value: 'Berlin' },
|
||||
{ label: 'Frankfurt', value: 'Frankfurt' },
|
||||
{ label: 'Hamburg', value: 'Hamburg' },
|
||||
{ label: 'Munich', value: 'Munich' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'USA',
|
||||
code: 'US',
|
||||
items: [
|
||||
{ label: 'Chicago', value: 'Chicago' },
|
||||
{ label: 'Los Angeles', value: 'Los Angeles' },
|
||||
{ label: 'New York', value: 'New York' },
|
||||
{ label: 'San Francisco', value: 'San Francisco' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Japan',
|
||||
code: 'JP',
|
||||
items: [
|
||||
{ label: 'Kyoto', value: 'Kyoto' },
|
||||
{ label: 'Osaka', value: 'Osaka' },
|
||||
{ label: 'Tokyo', value: 'Tokyo' },
|
||||
{ label: 'Yokohama', value: 'Yokohama' }
|
||||
]
|
||||
}
|
||||
],
|
||||
optionLabel: 'label',
|
||||
optionGroupLabel: 'label',
|
||||
optionGroupChildren: 'items'
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.trigger('click');
|
||||
});
|
||||
|
||||
it('should show the option groups', () => {
|
||||
expect(wrapper.findAll('.p-dropdown-item-group').length).toBe(3);
|
||||
expect(wrapper.findAll('.p-dropdown-item-group')[0].text()).toBe('Germany');
|
||||
});
|
||||
});
|
||||
|
||||
describe('templating checks', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
wrapper = mount(Dropdown, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true
|
||||
}
|
||||
},
|
||||
slots: {
|
||||
header: h('span', { class: 'header-slot' }, 'Header slot'),
|
||||
footer: h('span', { class: 'footer-slot' }, 'Footer slot'),
|
||||
option: h('span', { class: 'option-slot' }, 'Option slot'),
|
||||
optiongroup: h('span', { class: 'optiongroup-slot' }, 'OptionGroup slot'),
|
||||
emptyfilter: h('span', { class: 'emptyfilter-slot' }, 'Empty filter slot')
|
||||
},
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
label: 'Germany',
|
||||
code: 'DE',
|
||||
items: [
|
||||
{ label: 'Berlin', value: 'Berlin' },
|
||||
{ label: 'Frankfurt', value: 'Frankfurt' },
|
||||
{ label: 'Hamburg', value: 'Hamburg' },
|
||||
{ label: 'Munich', value: 'Munich' }
|
||||
]
|
||||
}
|
||||
],
|
||||
optionLabel: 'label',
|
||||
optionGroupLabel: 'label',
|
||||
optionGroupChildren: 'items'
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.trigger('click');
|
||||
});
|
||||
|
||||
it('should see header and footer slots', () => {
|
||||
expect(wrapper.find('.header-slot').exists()).toBe(true);
|
||||
expect(wrapper.find('.header-slot').text()).toBe('Header slot');
|
||||
expect(wrapper.find('.footer-slot').exists()).toBe(true);
|
||||
expect(wrapper.find('.footer-slot').text()).toBe('Footer slot');
|
||||
expect(wrapper.find('.option-slot').exists()).toBe(true);
|
||||
expect(wrapper.find('.option-slot').text()).toBe('Option slot');
|
||||
expect(wrapper.find('.optiongroup-slot').exists()).toBe(true);
|
||||
expect(wrapper.find('.optiongroup-slot').text()).toBe('OptionGroup slot');
|
||||
});
|
||||
});
|
||||
|
||||
describe('empty templating checks', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
wrapper = mount(Dropdown, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
options: [],
|
||||
optionLabel: 'label',
|
||||
optionGroupLabel: 'label',
|
||||
optionGroupChildren: 'items',
|
||||
emptyMessage: 'Need options prop',
|
||||
filterValue: 'xd'
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.trigger('click');
|
||||
});
|
||||
|
||||
it('should see empty slots', () => {
|
||||
expect(wrapper.find('.p-dropdown-empty-message').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-dropdown-empty-message').text()).toBe('Need options prop');
|
||||
});
|
||||
});
|
||||
|
||||
describe('loader checks', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
wrapper = mount(Dropdown, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
loading: true,
|
||||
loadingIcon: 'pi pi-discord',
|
||||
options: [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
],
|
||||
optionLabel: 'name',
|
||||
optionValue: 'code',
|
||||
placeholder: 'Select a City'
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.trigger('click');
|
||||
});
|
||||
|
||||
it('should show the loader', async () => {
|
||||
expect(wrapper.find('.p-dropdown-trigger-icon').classes()).toContain('pi-discord');
|
||||
|
||||
await wrapper.setProps({ loading: false });
|
||||
|
||||
expect(wrapper.find('.p-dropdown-trigger-icon').classes()).not.toContain('pi-discord');
|
||||
});
|
||||
});
|
||||
|
||||
describe('filter checks', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(async () => {
|
||||
wrapper = mount(Dropdown, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
filter: true,
|
||||
filterIcon: 'pi pi-discord',
|
||||
options: [
|
||||
{ name: 'Australia', code: 'AU' },
|
||||
{ name: 'Brazil', code: 'BR' },
|
||||
{ name: 'China', code: 'CN' },
|
||||
{ name: 'Egypt', code: 'EG' },
|
||||
{ name: 'France', code: 'FR' },
|
||||
{ name: 'Germany', code: 'DE' },
|
||||
{ name: 'India', code: 'IN' },
|
||||
{ name: 'Japan', code: 'JP' },
|
||||
{ name: 'Spain', code: 'ES' },
|
||||
{ name: 'United States', code: 'US' }
|
||||
],
|
||||
optionLabel: 'name'
|
||||
}
|
||||
});
|
||||
|
||||
await wrapper.trigger('click');
|
||||
});
|
||||
|
||||
it('should make filtering', async () => {
|
||||
const filterInput = wrapper.find('.p-dropdown-filter');
|
||||
const filterIcon = wrapper.find('.p-dropdown-filter-icon');
|
||||
|
||||
expect(filterInput.exists()).toBe(true);
|
||||
expect(filterIcon.classes()).toContain('pi-discord');
|
||||
|
||||
const event = { target: { value: 'c' } };
|
||||
const onFilterChange = vi.spyOn(wrapper.vm, 'onFilterChange');
|
||||
|
||||
wrapper.vm.onFilterChange(event);
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
expect(onFilterChange).toHaveBeenCalled();
|
||||
|
||||
await wrapper.setData({ filterValue: 'c' });
|
||||
|
||||
expect(wrapper.findAll('.p-dropdown-item').length).toBe(2);
|
||||
});
|
||||
});
|
||||
1147
components/lib/dropdown/Dropdown.vue
Executable file
1147
components/lib/dropdown/Dropdown.vue
Executable file
File diff suppressed because it is too large
Load diff
9
components/lib/dropdown/package.json
Normal file
9
components/lib/dropdown/package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"main": "./dropdown.cjs.js",
|
||||
"module": "./dropdown.esm.js",
|
||||
"unpkg": "./dropdown.min.js",
|
||||
"types": "./Dropdown.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Dropdown.vue"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue