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

Components added. Build issues fixed

pull/3420/head
Bahadir Sofuoglu 2022-09-14 14:26:01 +03:00
parent 5b66ed1093
commit 18c3721848
344 changed files with 12446 additions and 8758 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/accordion/Accordion.d.ts vendored
View File

@ -18,6 +18,11 @@ export interface AccordionTabOpenEvent {
*/
export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
/**
* @extends AccordionTabOpenEvent
*/
export interface AccordionClickEvent extends AccordionTabOpenEvent {}
export interface AccordionProps {
/**
* When enabled, multiple tabs can be activated at the same time.
@ -39,6 +44,14 @@ export interface AccordionProps {
* Icon of an expanded tab.
*/
collapseIcon?: string | undefined;
/**
* Index of the element in tabbing order.
*/
tabindex?: number | undefined;
/**
* When enabled, the focused tab is activated.
*/
selectOnFocus?: boolean | undefined;
}
export interface AccordionSlots {
@ -64,13 +77,18 @@ export declare type AccordionEmits = {
* @param {AccordionTabCloseEvent} event - Custom tab close event.
*/
'tab-close': (event: AccordionTabCloseEvent) => void;
}
/**
* Callback to invoke when an active tab is clicked.
* @param {AccordionClickEvent} event - Custom tab click event.
*/
'tab-click': (event: AccordionClickEvent) => void;
};
declare class Accordion extends ClassComponent<AccordionProps, AccordionSlots, AccordionEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Accordion: GlobalComponentConstructor<Accordion>
Accordion: GlobalComponentConstructor<Accordion>;
}
}
@ -84,7 +102,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Accordion](https://www.primefaces.org/primevue/showcase/#/accordion)
* - [Accordion](https://www.primefaces.org/primevue/accordion)
*
*/
export default Accordion;

257
components/accordion/Accordion.vue
View File

@ -1,17 +1,35 @@
<template>
<div class="p-accordion p-component">
<div v-for="(tab,i) of tabs" :key="getKey(tab,i)" :class="getTabClass(i)">
<div :class="getTabHeaderClass(tab, i)">
<a role="tab" class="p-accordion-header-link" @click="onTabClick($event, tab, i)" @keydown="onTabKeydown($event, tab, i)" :tabindex="isTabDisabled(tab) ? null : '0'"
:aria-expanded="isTabActive(i)" :id="getTabAriaId(i) + '_header'" :aria-controls="getTabAriaId(i) + '_content'">
<span :class="isTabActive(i) ? getHeaderCollapseIcon() : getHeaderExpandIcon()"></span>
<span class="p-accordion-header-text" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
<component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
<div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i">
<div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="getTabProp(tab, 'headerProps')">
<a
:id="getTabHeaderActionId(i)"
class="p-accordion-header-link p-accordion-header-action"
:tabindex="getTabProp(tab, 'disabled') ? -1 : tabindex"
role="button"
:aria-disabled="getTabProp(tab, 'disabled')"
:aria-expanded="isTabActive(i)"
:aria-controls="getTabContentId(i)"
@click="onTabClick($event, tab, i)"
@keydown="onTabKeyDown($event, tab, i)"
v-bind="getTabProp(tab, 'headerActionProps')"
>
<span :class="getTabHeaderIconClass(i)" aria-hidden="true"></span>
<span v-if="tab.props && tab.props.header" class="p-accordion-header-text">{{ tab.props.header }}</span>
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
</a>
</div>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-if="lazy ? isTabActive(i) : true" v-show="lazy ? true: isTabActive(i)"
role="region" :id="getTabAriaId(i) + '_content'" :aria-labelledby="getTabAriaId(i) + '_header'">
<div
v-if="lazy ? isTabActive(i) : true"
v-show="lazy ? true : isTabActive(i)"
:id="getTabContentId(i)"
:style="getTabProp(tab, 'contentStyle')"
:class="getTabContentClass(tab)"
role="region"
:aria-labelledby="getTabHeaderActionId(i)"
v-bind="getTabProp(tab, 'contentProps')"
>
<div class="p-accordion-content">
<component :is="tab"></component>
</div>
@ -22,11 +40,12 @@
</template>
<script>
import {UniqueComponentId} from 'primevue/utils';
import { UniqueComponentId, DomHandler } from 'primevue/utils';
import Ripple from 'primevue/ripple';
export default {
name: 'Accordion',
emits: ['tab-close', 'tab-open', 'update:activeIndex'],
emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
props: {
multiple: {
type: Boolean,
@ -47,12 +66,20 @@ export default {
collapseIcon: {
type: String,
default: 'pi-chevron-down'
},
tabindex: {
type: Number,
default: 0
},
selectOnFocus: {
type: Boolean,
default: false
}
},
data() {
return {
d_activeIndex: this.activeIndex
}
};
},
watch: {
activeIndex(newValue) {
@ -60,97 +87,187 @@ export default {
}
},
methods: {
onTabClick(event, tab, i) {
if (!this.isTabDisabled(tab)) {
const active = this.isTabActive(i);
isAccordionTab(child) {
return child.type.name === 'AccordionTab';
},
isTabActive(index) {
return this.multiple ? this.d_activeIndex && this.d_activeIndex.includes(index) : this.d_activeIndex === index;
},
getTabProp(tab, name) {
return tab.props ? tab.props[name] : undefined;
},
getKey(tab, index) {
return this.getTabProp(tab, 'header') || index;
},
getTabHeaderActionId(index) {
return `${this.id}_${index}_header_action`;
},
getTabContentId(index) {
return `${this.id}_${index}_content`;
},
onTabClick(event, tab, index) {
this.changeActiveIndex(event, tab, index);
this.$emit('tab-click', { originalEvent: event, index });
},
onTabKeyDown(event, tab, index) {
switch (event.code) {
case 'ArrowDown':
this.onTabArrowDownKey(event);
break;
case 'ArrowUp':
this.onTabArrowUpKey(event);
break;
case 'Home':
this.onTabHomeKey(event);
break;
case 'End':
this.onTabEndKey(event);
break;
case 'Enter':
case 'Space':
this.onTabEnterKey(event, tab, index);
break;
default:
break;
}
},
onTabArrowDownKey(event) {
const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement.parentElement);
nextHeaderAction ? this.changeFocusedTab(event, nextHeaderAction) : this.onTabHomeKey(event);
event.preventDefault();
},
onTabArrowUpKey(event) {
const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement.parentElement);
prevHeaderAction ? this.changeFocusedTab(event, prevHeaderAction) : this.onTabEndKey(event);
event.preventDefault();
},
onTabHomeKey(event) {
const firstHeaderAction = this.findFirstHeaderAction();
this.changeFocusedTab(event, firstHeaderAction);
event.preventDefault();
},
onTabEndKey(event) {
const lastHeaderAction = this.findLastHeaderAction();
this.changeFocusedTab(event, lastHeaderAction);
event.preventDefault();
},
onTabEnterKey(event, tab, index) {
this.changeActiveIndex(event, tab, index);
event.preventDefault();
},
findNextHeaderAction(tabElement, selfCheck = false) {
const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
const headerElement = DomHandler.findSingle(nextTabElement, '.p-accordion-header');
return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
},
findPrevHeaderAction(tabElement, selfCheck = false) {
const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
const headerElement = DomHandler.findSingle(prevTabElement, '.p-accordion-header');
return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
},
findFirstHeaderAction() {
return this.findNextHeaderAction(this.$el.firstElementChild, true);
},
findLastHeaderAction() {
return this.findPrevHeaderAction(this.$el.lastElementChild, true);
},
changeActiveIndex(event, tab, index) {
if (!this.getTabProp(tab, 'disabled')) {
const active = this.isTabActive(index);
const eventName = active ? 'tab-close' : 'tab-open';
if (this.multiple) {
if (active) {
this.d_activeIndex = this.d_activeIndex.filter(index => index !== i);
this.d_activeIndex = this.d_activeIndex.filter((i) => i !== index);
} else {
if (this.d_activeIndex) this.d_activeIndex.push(index);
else this.d_activeIndex = [index];
}
else {
if (this.d_activeIndex)
this.d_activeIndex.push(i);
else
this.d_activeIndex = [i];
}
}
else {
this.d_activeIndex = this.d_activeIndex === i ? null : i;
} else {
this.d_activeIndex = this.d_activeIndex === index ? null : index;
}
this.$emit('update:activeIndex', this.d_activeIndex);
this.$emit(eventName, { originalEvent: event, index });
}
},
changeFocusedTab(event, element) {
if (element) {
DomHandler.focus(element);
this.$emit(eventName, {
originalEvent: event,
index: i
});
if (this.selectOnFocus) {
const index = parseInt(element.parentElement.parentElement.dataset.index, 10);
const tab = this.tabs[index];
this.changeActiveIndex(event, tab, index);
}
},
onTabKeydown(event, tab, i) {
if (event.which === 13) {
this.onTabClick(event, tab, i);
}
},
isTabActive(index) {
if (this.multiple)
return this.d_activeIndex && this.d_activeIndex.includes(index);
else
return index === this.d_activeIndex;
},
getKey(tab, i) {
return (tab.props && tab.props.header) ? tab.props.header : i;
},
isTabDisabled(tab) {
return tab.props && tab.props.disabled;
},
getTabClass(i) {
return ['p-accordion-tab', {'p-accordion-tab-active': this.isTabActive(i)}];
return [
'p-accordion-tab',
{
'p-accordion-tab-active': this.isTabActive(i)
}
];
},
getTabHeaderClass(tab, i) {
return ['p-accordion-header', {'p-highlight': this.isTabActive(i), 'p-disabled': this.isTabDisabled(tab)}];
return [
'p-accordion-header',
this.getTabProp(tab, 'headerClass'),
{
'p-highlight': this.isTabActive(i),
'p-disabled': this.getTabProp(tab, 'disabled')
}
];
},
getTabAriaId(i) {
return this.ariaId + '_' + i;
getTabHeaderIconClass(i) {
return ['p-accordion-toggle-icon pi', this.isTabActive(i) ? this.collapseIcon : this.expandIcon];
},
getHeaderCollapseIcon() {
return ['p-accordion-toggle-icon pi', this.collapseIcon];
},
getHeaderExpandIcon() {
return ['p-accordion-toggle-icon pi', this.expandIcon];
},
isAccordionTab(child) {
return child.type.name === 'AccordionTab';
getTabContentClass(tab) {
return ['p-toggleable-content', this.getTabProp(tab, 'contentClass')];
}
},
computed: {
tabs() {
const tabs = []
this.$slots.default().forEach(child => {
return this.$slots.default().reduce((tabs, child) => {
if (this.isAccordionTab(child)) {
tabs.push(child);
}
else if (child.children && child.children instanceof Array) {
child.children.forEach(nestedChild => {
} else if (child.children && child.children instanceof Array) {
child.children.forEach((nestedChild) => {
if (this.isAccordionTab(nestedChild)) {
tabs.push(nestedChild)
tabs.push(nestedChild);
}
});
}
}
)
return tabs;
}, []);
},
ariaId() {
return UniqueComponentId();
}
id() {
return this.$attrs.id || UniqueComponentId();
}
},
directives: {
ripple: Ripple
}
};
</script>
<style>
.p-accordion-header-link {
.p-accordion-header-action {
cursor: pointer;
display: flex;
align-items: center;
@ -159,7 +276,7 @@ export default {
text-decoration: none;
}
.p-accordion-header-link:focus {
.p-accordion-header-action:focus {
z-index: 1;
}

36
components/accordiontab/AccordionTab.d.ts vendored
View File

@ -1,4 +1,4 @@
import { VNode } from 'vue';
import { AnchorHTMLAttributes, HTMLAttributes, VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export interface AccordionTabProps {
@ -6,6 +6,34 @@ export interface AccordionTabProps {
* Orientation of tab headers.
*/
header?: string | undefined;
/**
* Inline style of the tab header.
*/
headerStyle?: any;
/**
* Style class of the tab header.
*/
headerClass?: any;
/**
* Uses to pass all properties of the HTMLDivElement to the tab header.
*/
headerProps?: HTMLAttributes | undefined;
/**
* Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
*/
headerActionProps?: AnchorHTMLAttributes | undefined;
/**
* Inline style of the tab content.
*/
contentStyle?: any;
/**
* Style class of the tab content.
*/
contentClass?: any;
/**
* Uses to pass all properties of the HTMLDivElement to the tab content.
*/
contentProps?: HTMLAttributes | undefined;
/**
* Whether the tab is disabled.
*/
@ -23,13 +51,13 @@ export interface AccordionTabSlots {
header: () => VNode[];
}
export declare type AccordionTabEmits = { }
export declare type AccordionTabEmits = {};
declare class AccordionTab extends ClassComponent<AccordionTabProps, AccordionTabSlots, AccordionTabEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
AccordionTab: GlobalComponentConstructor<AccordionTab>
AccordionTab: GlobalComponentConstructor<AccordionTab>;
}
}
@ -39,7 +67,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Accordion](https://www.primefaces.org/primevue/showcase/#/accordion)
* - [Accordion](https://www.primefaces.org/primevue/accordion)
*
*/
export default AccordionTab;

9
components/accordiontab/AccordionTab.vue
View File

@ -7,7 +7,14 @@ export default {
name: 'AccordionTab',
props: {
header: null,
headerStyle: null,
headerClass: null,
headerProps: null,
headerActionProps: null,
contentStyle: null,
contentClass: null,
contentProps: null,
disabled: Boolean
}
}
};
</script>

2
components/api/FilterMatchMode.js
View File

@ -15,6 +15,6 @@ const FilterMatchMode = {
DATE_IS_NOT: 'dateIsNot',
DATE_BEFORE: 'dateBefore',
DATE_AFTER: 'dateAfter'
}
};
export default FilterMatchMode;

2
components/api/FilterOperator.js
View File

@ -1,6 +1,6 @@
const FilterOperator = {
AND: 'and',
OR: 'or'
}
};
export default FilterOperator;

44
components/api/FilterService.js
View File

@ -85,10 +85,8 @@ const FilterService = {
return false;
}
if (value.getTime && filter.getTime)
return value.getTime() === filter.getTime();
else
return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) == ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
if (value.getTime && filter.getTime) return value.getTime() === filter.getTime();
else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) == ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
},
notEquals(value, filter, filterLocale) {
if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
@ -99,10 +97,8 @@ const FilterService = {
return true;
}
if (value.getTime && filter.getTime)
return value.getTime() !== filter.getTime();
else
return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) != ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
if (value.getTime && filter.getTime) return value.getTime() !== filter.getTime();
else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) != ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
},
in(value, filter) {
if (filter === undefined || filter === null || filter.length === 0) {
@ -126,10 +122,8 @@ const FilterService = {
return false;
}
if (value.getTime)
return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime();
else
return filter[0] <= value && value <= filter[1];
if (value.getTime) return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime();
else return filter[0] <= value && value <= filter[1];
},
lt(value, filter) {
if (filter === undefined || filter === null) {
@ -140,10 +134,8 @@ const FilterService = {
return false;
}
if (value.getTime && filter.getTime)
return value.getTime() < filter.getTime();
else
return value < filter;
if (value.getTime && filter.getTime) return value.getTime() < filter.getTime();
else return value < filter;
},
lte(value, filter) {
if (filter === undefined || filter === null) {
@ -154,10 +146,8 @@ const FilterService = {
return false;
}
if (value.getTime && filter.getTime)
return value.getTime() <= filter.getTime();
else
return value <= filter;
if (value.getTime && filter.getTime) return value.getTime() <= filter.getTime();
else return value <= filter;
},
gt(value, filter) {
if (filter === undefined || filter === null) {
@ -168,10 +158,8 @@ const FilterService = {
return false;
}
if (value.getTime && filter.getTime)
return value.getTime() > filter.getTime();
else
return value > filter;
if (value.getTime && filter.getTime) return value.getTime() > filter.getTime();
else return value > filter;
},
gte(value, filter) {
if (filter === undefined || filter === null) {
@ -182,10 +170,8 @@ const FilterService = {
return false;
}
if (value.getTime && filter.getTime)
return value.getTime() >= filter.getTime();
else
return value >= filter;
if (value.getTime && filter.getTime) return value.getTime() >= filter.getTime();
else return value >= filter;
},
dateIs(value, filter) {
if (filter === undefined || filter === null) {
@ -235,6 +221,6 @@ const FilterService = {
register(rule, fn) {
this.filters[rule] = fn;
}
}
};
export default FilterService;

2
components/api/PrimeIcons.js
View File

@ -235,6 +235,6 @@ const PrimeIcons = {
WINDOW_MAXIMIZE: 'pi pi-window-maximize',
WINDOW_MINIMIZE: 'pi pi-window-minimize',
YOUTUBE: 'pi pi-youtube'
}
};
export default PrimeIcons;

29
components/autocomplete/AutoComplete.d.ts vendored
View File

@ -202,6 +202,11 @@ export interface AutoCompleteProps {
* Default value is true.
*/
autoOptionFocus?: boolean | undefined;
/**
* When enabled, the focused option is selected.
* Default value is false.
*/
selectOnFocus?: boolean | undefined;
/**
* Locale to use in searching. The default locale is the host environment's current locale.
*/
@ -233,11 +238,11 @@ export interface AutoCompleteProps {
/**
* Defines a string value that labels an interactive element.
*/
"aria-label"?: string | undefined;
'aria-label'?: string | undefined;
/**
* Identifier of the underlying input element.
*/
"aria-labelledby"?: string | undefined;
'aria-labelledby'?: string | undefined;
}
export interface AutoCompleteSlots {
@ -374,17 +379,17 @@ export declare type AutoCompleteEmits = {
* Callback to invoke on value change.
* @param {AutoCompleteChangeEvent} event - Custom change event.
*/
'change': (event: AutoCompleteChangeEvent) => void;
change: (event: AutoCompleteChangeEvent) => void;
/**
* Callback to invoke when the component receives focus.
* @param {Event} event - Browser event.
*/
'focus': (event: Event) => void;
focus: (event: Event) => void;
/**
* Callback to invoke when the component loses focus.
* @param {Event} event - Browser event.
*/
'blur': (event: Event) => void;
blur: (event: Event) => void;
/**
* Callback to invoke when a suggestion is selected.
* @param {AutoCompleteItemSelectEvent} event - Custom item select event.
@ -403,12 +408,12 @@ export declare type AutoCompleteEmits = {
/**
* Callback to invoke when input is cleared by the user.
*/
'clear': () => void;
clear: () => void;
/**
* Callback to invoke to search for suggestions.
* @param {AutoCompleteCompleteEvent} event - Custom complete event.
*/
'complete': (event: AutoCompleteCompleteEvent) => void;
complete: (event: AutoCompleteCompleteEvent) => void;
/**
* Callback to invoke before the overlay is shown.
*/
@ -420,18 +425,18 @@ export declare type AutoCompleteEmits = {
/**
* Callback to invoke when the overlay is shown.
*/
'show': () => void;
show: () => void;
/**
* Callback to invoke when the overlay is hidden.
*/
'hide': () => void;
}
hide: () => void;
};
declare class AutoComplete extends ClassComponent<AutoCompleteProps, AutoCompleteSlots, AutoCompleteEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
AutoComplete: GlobalComponentConstructor<AutoComplete>
AutoComplete: GlobalComponentConstructor<AutoComplete>;
}
}
@ -441,7 +446,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [AutoComplete](https://www.primefaces.org/primevue/showcase/#/autocomplete)
* - [AutoComplete](https://www.primefaces.org/primevue/autocomplete)
*
*/
export default AutoComplete;

16
components/autocomplete/AutoComplete.spec.js
View File

@ -20,12 +20,12 @@ describe('AutoComplete.vue', () => {
data() {
return {
countries: [
{"name": "Afghanistan", "code": "AF"},
{"name": "Bahrain", "code": "BH"},
{"name": "Chile", "code": "CL"},
{"name": "Denmark", "code": "DK"}
{ name: 'Afghanistan', code: 'AF' },
{ name: 'Bahrain', code: 'BH' },
{ name: 'Chile', code: 'CL' },
{ name: 'Denmark', code: 'DK' }
]
}
};
}
});
@ -38,7 +38,7 @@ describe('AutoComplete.vue', () => {
});
it('search copmlete', async () => {
const event = {'target': { 'value': 'b' }};
const event = { target: { value: 'b' } };
wrapper.vm.onInput(event);
await wrapper.vm.$nextTick();
@ -47,9 +47,7 @@ describe('AutoComplete.vue', () => {
await wrapper.vm.$nextTick();
await wrapper.setProps({
suggestions: [
{"name": "Bahrain", "code": "BH"}
]
suggestions: [{ name: 'Bahrain', code: 'BH' }]
});
expect(wrapper.find('.p-autocomplete-items').exists()).toBe(true);

313
components/autocomplete/AutoComplete.vue
View File

@ -1,21 +1,86 @@
<template>
<div ref="container" :class="containerClass" @click="onContainerClick">
<input v-if="!multiple" ref="focusInput" :id="inputId" type="text" :style="inputStyle" :class="inputStyleClass" :value="inputValue" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1" :disabled="disabled" autocomplete="off"
role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="listbox" aria-autocomplete="list" :aria-expanded="overlayVisible" :aria-controls="id + '_list'" :aria-activedescendant="focused ? focusedOptionId : undefined"
@focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @input="onInput" @change="onChange" v-bind="inputProps" />
<ul v-if="multiple" ref="multiContainer" :class="multiContainerClass" tabindex="-1" role="listbox" aria-orientation="horizontal" :aria-activedescendant="focused ? focusedMultipleOptionId : undefined"
@focus="onMultipleContainerFocus" @blur="onMultipleContainerBlur" @keydown="onMultipleContainerKeyDown">
<li v-for="(option, i) of modelValue" :key="i" :id="id + '_multiple_option_' + i" :class="['p-autocomplete-token', {'p-focus': focusedMultipleOptionIndex === i}]"
role="option" :aria-label="getOptionLabel(option)" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1">
<input
v-if="!multiple"
ref="focusInput"
:id="inputId"
type="text"
:style="inputStyle"
:class="inputStyleClass"
:value="inputValue"
:placeholder="placeholder"
:tabindex="!disabled ? tabindex : -1"
:disabled="disabled"
autocomplete="off"
role="combobox"
:aria-label="ariaLabel"
:aria-labelledby="ariaLabelledby"
aria-haspopup="listbox"
aria-autocomplete="list"
:aria-expanded="overlayVisible"
:aria-controls="id + '_list'"
:aria-activedescendant="focused ? focusedOptionId : undefined"
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
@input="onInput"
@change="onChange"
v-bind="inputProps"
/>
<ul
v-if="multiple"
ref="multiContainer"
:class="multiContainerClass"
tabindex="-1"
role="listbox"
aria-orientation="horizontal"
:aria-activedescendant="focused ? focusedMultipleOptionId : undefined"
@focus="onMultipleContainerFocus"
@blur="onMultipleContainerBlur"
@keydown="onMultipleContainerKeyDown"
>
<li
v-for="(option, i) of modelValue"
:key="i"
:id="id + '_multiple_option_' + i"
:class="['p-autocomplete-token', { 'p-focus': focusedMultipleOptionIndex === i }]"
role="option"
:aria-label="getOptionLabel(option)"
:aria-selected="true"
:aria-setsize="modelValue.length"
:aria-posinset="i + 1"
>
<slot name="chip" :value="option">
<span class="p-autocomplete-token-label">{{ getOptionLabel(option) }}</span>
</slot>
<span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeOption($event, i)" aria-hidden="true"></span>
</li>
<li class="p-autocomplete-input-token" role="option">
<input ref="focusInput" :id="inputId" type="text" :style="inputStyle" :class="inputClass" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1" :disabled="disabled" autocomplete="off"
role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="listbox" aria-autocomplete="list" :aria-expanded="overlayVisible" :aria-controls="id + '_list'" :aria-activedescendant="focused ? focusedOptionId : undefined"
@focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @input="onInput" @change="onChange" v-bind="inputProps" />
<input
ref="focusInput"
:id="inputId"
type="text"
:style="inputStyle"
:class="inputClass"
:placeholder="placeholder"
:tabindex="!disabled ? tabindex : -1"
:disabled="disabled"
autocomplete="off"
role="combobox"
:aria-label="ariaLabel"
:aria-labelledby="ariaLabelledby"
aria-haspopup="listbox"
aria-autocomplete="list"
:aria-expanded="overlayVisible"
:aria-controls="id + '_list'"
:aria-activedescendant="focused ? focusedOptionId : undefined"
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
@input="onInput"
@change="onChange"
v-bind="inputProps"
/>
</li>
</ul>
<i v-if="searching" :class="loadingIconClass" aria-hidden="true"></i>
@ -27,19 +92,31 @@
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div v-if="overlayVisible" :ref="overlayRef" :class="panelStyleClass" :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
<slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{'height': scrollHeight}" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
<li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-autocomplete-item-group" role="option">
<slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
</li>
<li v-else v-ripple :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}"
<li
v-else
:id="id + '_' + getOptionIndex(i, getItemOptions)"
v-ripple
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="['p-autocomplete-item', { 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option) }]"
role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" :aria-disabled="isOptionDisabled(option)" :aria-setsize="ariaSetSize" :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
@click="onOptionSelect($event, option)" @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))">
role="option"
:aria-label="getOptionLabel(option)"
:aria-selected="isSelected(option)"
:aria-disabled="isOptionDisabled(option)"
:aria-setsize="ariaSetSize"
:aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
@click="onOptionSelect($event, option)"
@mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
>
<slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
<slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot> <!--TODO: Deprecated since v3.16.0-->
<slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
<!--TODO: Deprecated since v3.16.0-->
</li>
</template>
</ul>
@ -75,7 +152,8 @@ export default {
type: Array,
default: null
},
field: { // TODO: Deprecated since v3.16.0
field: {
// TODO: Deprecated since v3.16.0
type: [String, Function],
default: null
},
@ -95,7 +173,8 @@ export default {
type: String,
default: 'blank'
},
autoHighlight: { // TODO: Deprecated since v3.16.0
autoHighlight: {
// TODO: Deprecated since v3.16.0. Use selectOnFocus property instead.
type: Boolean,
default: false
},
@ -135,13 +214,34 @@ export default {
type: Boolean,
default: false
},
inputId: String,
inputStyle: null,
inputClass: null,
inputProps: null,
panelStyle: null,
panelClass: null,
panelProps: null,
inputId: {
type: String,
default: null
},
inputStyle: {
type: null,
default: null
},
inputClass: {
type: String,
default: null
},
inputProps: {
type: null,
default: null
},
panelStyle: {
type: null,
default: null
},
panelClass: {
type: String,
default: null
},
panelProps: {
type: null,
default: null
},
loadingIcon: {
type: String,
default: 'pi pi-spinner'
@ -154,6 +254,10 @@ export default {
type: Boolean,
default: true
},
selectOnFocus: {
type: Boolean,
default: false
},
searchLocale: {
type: String,
default: undefined
@ -193,18 +297,16 @@ export default {
overlay: null,
virtualScroller: null,
searchTimeout: null,
selectOnFocus: false,
focusOnHover: false,
dirty: false,
data() {
return {
id: UniqueComponentId(),
focused: false,
focusedOptionIndex: -1,
focusedMultipleOptionIndex: -1,
overlayVisible: false,
searching: false
}
};
},
watch: {
suggestions() {
@ -218,8 +320,6 @@ export default {
}
},
mounted() {
this.id = this.$attrs.id || this.id;
this.autoUpdateModel();
},
updated() {
@ -243,7 +343,7 @@ export default {
},
methods: {
getOptionIndex(index, fn) {
return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
},
getOptionLabel(option) {
return this.field || this.optionLabel ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option;
@ -267,15 +367,15 @@ export default {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
},
getAriaPosInset(index) {
return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(option => this.isOptionGroup(option)).length : index) + 1;
return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
},
show(isFocus) {
this.$emit('before-show');
this.dirty = true;
this.overlayVisible = true;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1);
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
isFocus && this.$refs.focusInput.focus();
isFocus && DomHandler.focus(this.$refs.focusInput);
},
hide(isFocus) {
const _hide = () => {
@ -284,10 +384,12 @@ export default {
this.overlayVisible = false;
this.focusedOptionIndex = -1;
isFocus && this.$refs.focusInput.focus();
}
isFocus && DomHandler.focus(this.$refs.focusInput);
};
setTimeout(() => { _hide() }, 0); // For ScreenReaders
setTimeout(() => {
_hide();
}, 0); // For ScreenReaders
},
onFocus(event) {
if (!this.dirty && this.completeOnFocus) {
@ -371,6 +473,7 @@ export default {
}
let query = event.target.value;
if (!this.multiple) {
this.updateModel(event, query);
}
@ -378,16 +481,14 @@ export default {
if (query.length === 0) {
this.hide();
this.$emit('clear');
}
else {
} else {
if (query.length >= this.minLength) {
this.focusedOptionIndex = -1;
this.searchTimeout = setTimeout(() => {
this.search(event, query, 'input');
}, this.delay);
}
else {
} else {
this.hide();
}
}
@ -397,7 +498,7 @@ export default {
let valid = false;
if (this.visibleOptions) {
const matchedValue = this.visibleOptions.find(option => this.isOptionMatched(option, event.target.value));
const matchedValue = this.visibleOptions.find((option) => this.isOptionMatched(option, event.target.value));
if (matchedValue !== undefined) {
valid = true;
@ -443,7 +544,7 @@ export default {
}
if (!this.overlay || !this.overlay.contains(event.target)) {
this.$refs.focusInput.focus();
DomHandler.focus(this.$refs.focusInput);
}
},
onDropdownClick(event) {
@ -451,20 +552,17 @@ export default {
if (this.overlayVisible) {
this.hide(true);
}
else {
this.$refs.focusInput.focus();
} else {
DomHandler.focus(this.$refs.focusInput);
query = this.$refs.focusInput.value;
if (this.dropdownMode === 'blank')
this.search(event, '', 'dropdown');
else if (this.dropdownMode === 'current')
this.search(event, query, 'dropdown');
if (this.dropdownMode === 'blank') this.search(event, '', 'dropdown');
else if (this.dropdownMode === 'current') this.search(event, query, 'dropdown');
}
this.$emit('dropdown-click', { originalEvent: event, query });
},
onOptionSelect(event, option) {
onOptionSelect(event, option, isHide = true) {
const value = this.getOptionValue(option);
if (this.multiple) {
@ -473,14 +571,13 @@ export default {
if (!this.isSelected(option)) {
this.updateModel(event, [...(this.modelValue || []), value]);
}
}
else {
} else {
this.updateModel(event, value);
}
this.$emit('item-select', { originalEvent: event, value: option });
this.hide(true);
isHide && this.hide(true);
},
onOptionMouseMove(event, index) {
if (this.focusOnHover) {
@ -526,8 +623,7 @@ export default {
this.overlayVisible && this.hide();
event.preventDefault();
}
else {
} else {
const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();
this.changeFocusedOptionIndex(event, optionIndex);
@ -537,14 +633,14 @@ export default {
},
onArrowLeftKey(event) {
const target = event.currentTarget;
this.focusedOptionIndex = -1;
if (this.multiple) {
if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) {
this.$refs.multiContainer.focus();
DomHandler.focus(this.$refs.multiContainer);
this.focusedMultipleOptionIndex = this.modelValue.length;
}
else {
} else {
event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method
}
}
@ -563,6 +659,7 @@ export default {
onEndKey(event) {
const target = event.currentTarget;
const len = target.value.length;
target.setSelectionRange(len, len);
this.focusedOptionIndex = -1;
@ -579,8 +676,7 @@ export default {
onEnterKey(event) {
if (!this.overlayVisible) {
this.onArrowDownKey(event);
}
else {
} else {
if (this.focusedOptionIndex !== -1) {
this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
}
@ -620,9 +716,9 @@ export default {
onArrowRightKeyOnMultiple() {
this.focusedMultipleOptionIndex++;
if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) {
if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) {
this.focusedMultipleOptionIndex = -1;
this.$refs.focusInput.focus();
DomHandler.focus(this.$refs.focusInput);
}
},
onBackspaceKeyOnMultiple(event) {
@ -654,10 +750,10 @@ export default {
},
alignOverlay() {
let target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput;
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, target);
}
else {
} else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px';
DomHandler.absolutePosition(this.overlay, target);
}
@ -669,6 +765,7 @@ export default {
this.hide();
}
};
document.addEventListener('click', this.outsideClickListener);
}
},
@ -701,6 +798,7 @@ export default {
this.hide();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
@ -714,13 +812,11 @@ export default {
return !this.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
},
isInputClicked(event) {
if (this.multiple)
return event.target === this.$refs.multiContainer || this.$refs.multiContainer.contains(event.target);
else
return event.target === this.$refs.focusInput;
if (this.multiple) return event.target === this.$refs.multiContainer || this.$refs.multiContainer.contains(event.target);
else return event.target === this.$refs.focusInput;
},
isDropdownClicked(event) {
return this.$refs.dropdownButton ? (event.target === this.$refs.dropdownButton || this.$refs.dropdownButton.$el.contains(event.target)) : false;
return this.$refs.dropdownButton ? event.target === this.$refs.dropdownButton || this.$refs.dropdownButton.$el.contains(event.target) : false;
},
isOptionMatched(option, value) {
return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);
@ -735,28 +831,32 @@ export default {
return ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
},
findFirstOptionIndex() {
return this.visibleOptions.findIndex(option => this.isValidOption(option));
return this.visibleOptions.findIndex((option) => this.isValidOption(option));
},
findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, option => this.isValidOption(option));
return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
},
findNextOptionIndex(index) {
const matchedOptionIndex = index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(option => this.isValidOption(option)) : -1;
const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
},
findPrevOptionIndex(index) {
const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), option => this.isValidOption(option)) : -1;
const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : index;
},
findSelectedOptionIndex() {
return this.hasSelectedOption ? this.visibleOptions.findIndex(option => this.isValidSelectedOption(option)) : -1;
return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
},
findFirstFocusedOptionIndex() {
const selectedIndex = this.findSelectedOptionIndex();
return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
},
findLastFocusedOptionIndex() {
const selectedIndex = this.findSelectedOptionIndex();
return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
},
search(event, query, source) {
@ -775,12 +875,12 @@ export default {
},
removeOption(event, index) {
const removedOption = this.modelValue[index];
const value = this.modelValue.filter((_, i) => i !== index).map(option => this.getOptionValue(option));
const value = this.modelValue.filter((_, i) => i !== index).map((option) => this.getOptionValue(option));
this.updateModel(event, value);
this.$emit('item-unselect', { originalEvent: event, value: removedOption });
this.dirty = true;
this.$refs.focusInput.focus();
DomHandler.focus(this.$refs.focusInput);
},
changeFocusedOptionIndex(event, index) {
if (this.focusedOptionIndex !== index) {
@ -788,17 +888,17 @@ export default {
this.scrollInView();
if (this.selectOnFocus || this.autoHighlight) {
this.updateModel(event, this.getOptionValue(this.visibleOptions[index]));
this.onOptionSelect(event, this.visibleOptions[index], false);
}
}
},
scrollInView(index = -1) {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
}
else if (!this.virtualScrollerDisabled) {
} else if (!this.virtualScrollerDisabled) {
setTimeout(() => {
this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
}, 0);
@ -807,8 +907,7 @@ export default {
autoUpdateModel() {
if ((this.selectOnFocus || this.autoHighlight) && this.autoOptionFocus && !this.hasSelectedOption) {
this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
const value = this.getOptionValue(this.visibleOptions[this.focusedOptionIndex]);
this.updateModel(null, this.multiple ? [value] : value);
this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);
}
},
updateModel(event, value) {
@ -820,7 +919,8 @@ export default {
result.push({ optionGroup: option, group: true, index });
const optionGroupChildren = this.getOptionGroupChildren(option);
optionGroupChildren && optionGroupChildren.forEach(o => result.push(o));
optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
return result;
}, []);
@ -838,7 +938,9 @@ export default {
},
computed: {
containerClass() {
return ['p-autocomplete p-component p-inputwrapper', {
return [
'p-autocomplete p-component p-inputwrapper',
{
'p-disabled': this.disabled,
'p-focus': this.focused,
'p-autocomplete-dd': this.dropdown,
@ -846,39 +948,47 @@ export default {
'p-inputwrapper-filled': this.modelValue || ObjectUtils.isNotEmpty(this.inputValue),
'p-inputwrapper-focus': this.focused,
'p-overlay-open': this.overlayVisible
}];
}
];
},
inputStyleClass() {
return ['p-autocomplete-input p-inputtext p-component', this.inputClass, {
return [
'p-autocomplete-input p-inputtext p-component',
this.inputClass,
{
'p-autocomplete-dd-input': this.dropdown
}];
}
];
},
multiContainerClass() {
return ['p-autocomplete-multiple-container p-component p-inputtext'];
},
panelStyleClass() {
return ['p-autocomplete-panel p-component', this.panelClass, {
return [
'p-autocomplete-panel p-component',
this.panelClass,
{
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}];
}
];
},
loadingIconClass() {
return ['p-autocomplete-loader pi-spin', this.loadingIcon];
},
visibleOptions() {
return this.optionGroupLabel ? this.flatOptions(this.suggestions) : (this.suggestions || []);
return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || [];
},
inputValue() {
if (this.modelValue) {
if (typeof this.modelValue === 'object') {
const label = this.getOptionLabel(this.modelValue);
return label != null ? label : this.modelValue;
}
else {
} else {
return this.modelValue;
}
}
else {
} else {
return '';
}
},
@ -906,6 +1016,9 @@ export default {
selectedMessageText() {
return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
},
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedOptionId() {
return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
},
@ -913,21 +1026,21 @@ export default {
return this.focusedMultipleOptionIndex !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
},
ariaSetSize() {
return this.visibleOptions.filter(option => !this.isOptionGroup(option)).length;
return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
},
virtualScrollerDisabled() {
return !this.virtualScrollerOptions;
}
},
components: {
'Button': Button,
'VirtualScroller': VirtualScroller,
'Portal': Portal
Button: Button,
VirtualScroller: VirtualScroller,
Portal: Portal
},
directives: {
'ripple': Ripple
}
ripple: Ripple
}
};
</script>
<style>
@ -939,7 +1052,7 @@ export default {
.p-autocomplete-loader {
position: absolute;
top: 50%;
margin-top: -.5rem;
margin-top: -0.5rem;
}
.p-autocomplete-dd .p-autocomplete-input {

6
components/avatar/Avatar.d.ts vendored
View File

@ -44,13 +44,13 @@ export declare type AvatarEmits = {
* Triggered when an error occurs while loading an image file.
*/
error: () => void;
}
};
declare class Avatar extends ClassComponent<AvatarProps, AvatarSlots, AvatarEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Avatar: GlobalComponentConstructor<Avatar>
Avatar: GlobalComponentConstructor<Avatar>;
}
}
@ -60,7 +60,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Avatar](https://www.primefaces.org/primevue/showcase/#/avatar)
* - [Avatar](https://www.primefaces.org/primevue/avatar)
*
*/
export default Avatar;

18
components/avatar/Avatar.vue
View File

@ -1,9 +1,9 @@
<template>
<div :class="containerClass">
<slot>
<span class="p-avatar-text" v-if="label">{{label}}</span>
<span :class="iconClass" v-else-if="icon"></span>
<img :src="image" v-else-if="image" @error="onError">
<span v-if="label" class="p-avatar-text">{{ label }}</span>
<span v-else-if="icon" :class="iconClass"></span>
<img v-else-if="image" :src="image" @error="onError" />
</slot>
</div>
</template>
@ -11,6 +11,7 @@
<script>
export default {
name: 'Avatar',
emits: ['error'],
props: {
label: {
type: String,
@ -30,7 +31,7 @@ export default {
},
shape: {
type: String,
default: "square"
default: 'square'
}
},
methods: {
@ -40,18 +41,21 @@ export default {
},
computed: {
containerClass() {
return ['p-avatar p-component', {
return [
'p-avatar p-component',
{
'p-avatar-image': this.image != null,
'p-avatar-circle': this.shape === 'circle',
'p-avatar-lg': this.size === 'large',
'p-avatar-xl': this.size === 'xlarge'
}];
}
];
},
iconClass() {
return ['p-avatar-icon', this.icon];
}
}
}
};
</script>
<style>

13
components/avatargroup/AvatarGroup.d.ts vendored
View File

@ -1,19 +1,16 @@
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export interface AvatarGroupProps {
}
export interface AvatarGroupProps {}
export interface AvatarGroupSlots {
}
export interface AvatarGroupSlots {}
export declare type AvatarGroupEmits = {
}
export declare type AvatarGroupEmits = {};
declare class AvatarGroup extends ClassComponent<AvatarGroupProps, AvatarGroupSlots, AvatarGroupEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
AvatarGroup: GlobalComponentConstructor<AvatarGroup>
AvatarGroup: GlobalComponentConstructor<AvatarGroup>;
}
}
@ -27,7 +24,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [AvatarGroup](https://www.primefaces.org/primevue/showcase/#/avatar)
* - [AvatarGroup](https://www.primefaces.org/primevue/avatar)
*
*/
export default AvatarGroup;

2
components/avatargroup/AvatarGroup.vue
View File

@ -7,7 +7,7 @@
<script>
export default {
name: 'AvatarGroup'
}
};
</script>
<style>

7
components/badge/Badge.d.ts vendored
View File

@ -29,14 +29,13 @@ export interface BadgeSlots {
default: () => VNode[];
}
export declare type BadgeEmits = {
}
export declare type BadgeEmits = {};
declare class Badge extends ClassComponent<BadgeProps, BadgeSlots, BadgeEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Badge: GlobalComponentConstructor<Badge>
Badge: GlobalComponentConstructor<Badge>;
}
}
@ -46,7 +45,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Badge](https://www.primefaces.org/primevue/showcase/#/badge)
* - [Badge](https://www.primefaces.org/primevue/badge)
*
*/
export default Badge;

9
components/badge/Badge.vue
View File

@ -17,7 +17,9 @@ export default {
return this.$slots.default ? 'p-overlay-badge' : this.badgeClass;
},
badgeClass() {
return ['p-badge p-component', {
return [
'p-badge p-component',
{
'p-badge-no-gutter': this.value && String(this.value).length === 1,
'p-badge-dot': !this.value && !this.$slots.default,
'p-badge-lg': this.size === 'large',
@ -26,8 +28,9 @@ export default {
'p-badge-success': this.severity === 'success',
'p-badge-warning': this.severity === 'warning',
'p-badge-danger': this.severity === 'danger'
}];
}
}
];
}
}
};
</script>

14
components/badgedirective/BadgeDirective.js
View File

@ -4,9 +4,11 @@ import {UniqueComponentId} from 'primevue/utils';
const BadgeDirective = {
beforeMount(el, options) {
const id = UniqueComponentId() + '_badge';
el.$_pbadgeId = id;
let badge = document.createElement('span');
badge.id = id;
badge.className = 'p-badge p-component';
@ -20,8 +22,7 @@ const BadgeDirective = {
if (String(options.value).length === 1) {
DomHandler.addClass(badge, 'p-badge-no-gutter');
}
}
else {
} else {
DomHandler.addClass(badge, 'p-badge-dot');
}
@ -39,12 +40,9 @@ const BadgeDirective = {
DomHandler.removeClass(badge, 'p-badge-dot');
}
if (String(options.value).length === 1)
DomHandler.addClass(badge, 'p-badge-no-gutter');
else
DomHandler.removeClass(badge, 'p-badge-no-gutter');
}
else if (!options.value && !DomHandler.hasClass(badge, 'p-badge-dot')) {
if (String(options.value).length === 1) DomHandler.addClass(badge, 'p-badge-no-gutter');
else DomHandler.removeClass(badge, 'p-badge-no-gutter');
} else if (!options.value && !DomHandler.hasClass(badge, 'p-badge-dot')) {
DomHandler.addClass(badge, 'p-badge-dot');
}

2
components/badgedirective/BadgeDirective.spec.js
View File

@ -6,7 +6,7 @@ describe('directive badge should exist', () => {
const wrapper = mount({
template: '<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>',
directives: {
'badge': BadgeDirective
badge: BadgeDirective
}
});

10
components/blockui/BlockUI.d.ts vendored
View File

@ -33,18 +33,18 @@ export declare type BlockUIEmits = {
/**
* Fired when the element gets blocked.
*/
'block': () => void;
block: () => void;
/**
* Fired when the element gets unblocked.
*/
'unblock': () => void;
}
unblock: () => void;
};
declare class BlockUI extends ClassComponent<BlockUIProps, BlockUISlots, BlockUIEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
BlockUI: GlobalComponentConstructor<BlockUI>
BlockUI: GlobalComponentConstructor<BlockUI>;
}
}
@ -54,7 +54,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [BlockUI](https://www.primefaces.org/primevue/showcase/#/blockui)
* - [BlockUI](https://www.primefaces.org/primevue/blockui)
*
*/
export default BlockUI;

4
components/blockui/BlockUI.spec.js
View File

@ -11,7 +11,7 @@ config.global.mocks = {
}
}
}
}
};
describe('BlockUI.vue', () => {
it('should blocked and unblocked the panel', async () => {
@ -34,7 +34,7 @@ describe('BlockUI.vue', () => {
data() {
return {
blockedPanel: false
}
};
},
methods: {
blockPanel() {

24
components/blockui/BlockUI.vue
View File

@ -29,22 +29,21 @@ export default {
}
},
mask: null,
watch: {
blocked(newValue) {
if (newValue === true) this.block();
else this.unblock();
}
},
mounted() {
if (this.blocked) {
this.block();
}
},
watch: {
blocked(newValue) {
if (newValue === true)
this.block();
else
this.unblock();
}
},
methods: {
block() {
let styleClass = 'p-blockui p-component-overlay p-component-overlay-enter';
if (this.fullScreen) {
styleClass += ' p-blockui-document';
this.mask = document.createElement('div');
@ -52,8 +51,7 @@ export default {
document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.activeElement.blur();
}
else {
} else {
this.mask = document.createElement('div');
this.mask.setAttribute('class', styleClass);
this.$refs.container.appendChild(this.mask);
@ -73,18 +71,18 @@ export default {
},
removeMask() {
ZIndexUtils.clear(this.mask);
if (this.fullScreen) {
document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
else {
} else {
this.$refs.container.removeChild(this.mask);
}
this.$emit('unblock');
}
}
}
};
</script>
<style>

9
components/breadcrumb/Breadcrumb.d.ts vendored
View File

@ -31,14 +31,13 @@ export interface BreadcrumbSlots {
}) => VNode[];
}
export declare type BreadcrumbEmits = {
}
export declare type BreadcrumbEmits = {};
declare class Breadcrumb extends ClassComponent<BreadcrumbProps, BreadcrumbSlots, BreadcrumbEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Breadcrumb: GlobalComponentConstructor<Breadcrumb>
Breadcrumb: GlobalComponentConstructor<Breadcrumb>;
}
}
@ -48,11 +47,11 @@ declare module '@vue/runtime-core' {
*
* Helper API:
*
* - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
* - [MenuItem](https://www.primefaces.org/primevue/menumodel)
*
* Demos:
*
* - [Breadcrumb](https://www.primefaces.org/primevue/showcase/#/breadcrumb)
* - [Breadcrumb](https://www.primefaces.org/primevue/breadcrumb)
*
*/
export default Breadcrumb;

8
components/breadcrumb/Breadcrumb.spec.js
View File

@ -9,13 +9,7 @@ describe('Breadcrumb', () => {
},
props: {
home: { icon: 'pi pi-home', to: '/' },
model: [
{label: 'Computer'},
{label: 'Notebook'},
{label: 'Accessories'},
{label: 'Backpacks'},
{label: 'Item'}
]
model: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]
}
});

4
components/breadcrumb/Breadcrumb.vue
View File

@ -30,9 +30,9 @@ export default {
}
},
components: {
'BreadcrumbItem': BreadcrumbItem
}
BreadcrumbItem: BreadcrumbItem
}
};
</script>
<style>

19
components/breadcrumb/BreadcrumbItem.vue
View File

@ -1,7 +1,7 @@
<template>
<li :class="containerClass(item)" v-if="visible()">
<li v-if="visible()" :class="containerClass(item)">
<template v-if="!template">
<router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a :href="href" :class="linkClass({ isActive, isExactActive })" @click="onClick($event, navigate)">
<span v-if="item.icon" :class="iconClass"></span>
<span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
@ -41,19 +41,22 @@ export default {
return [{ 'p-disabled': this.disabled(item) }, this.item.class];
},
linkClass(routerProps) {
return ['p-menuitem-link', {
return [
'p-menuitem-link',
{
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}];
}
];
},
visible() {
return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
},
label() {
return (typeof this.item.label === 'function' ? this.item.label() : this.item.label);
return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
}
},
computed: {
@ -61,5 +64,5 @@ export default {
return ['p-menuitem-icon', this.item.icon];
}
}
}
};
</script>

11
components/button/Button.d.ts vendored
View File

@ -25,6 +25,10 @@ export interface ButtonProps extends ButtonHTMLAttributes {
* Default value is 'left'.
*/
iconPos?: ButtonIconPosType;
/**
* Style class of the icon.
*/
iconClass?: string | undefined;
/**
* Value of the badge.
*/
@ -51,14 +55,13 @@ export interface ButtonSlots {
default: () => VNode[];
}
export declare type ButtonEmits = {
}
export declare type ButtonEmits = {};
declare class Button extends ClassComponent<ButtonProps, ButtonSlots, ButtonEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Button: GlobalComponentConstructor<Button>
Button: GlobalComponentConstructor<Button>;
}
}
@ -68,7 +71,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Button](https://www.primefaces.org/primevue/showcase/#/button)
* - [Button](https://www.primefaces.org/primevue/button)
*
*/
export default Button;

13
components/button/Button.spec.js
View File

@ -8,7 +8,7 @@ describe('Button.vue', () => {
expect(wrapper.find('.p-button.p-component').exists()).toBe(true);
expect(wrapper.find('.p-button-label').exists()).toBe(true);
})
});
});
describe('Button.vue', () => {
@ -30,7 +30,7 @@ describe('Button.vue', () => {
});
expect(wrapper.find('.p-button-icon.p-button-icon-' + iconPos).exists()).toBe(true);
})
});
});
describe('Button.vue', () => {
@ -41,10 +41,9 @@ describe('Button.vue', () => {
props: { badge, badgeClass }
});
expect(wrapper.find('.p-badge').text()).toEqual(badge);
expect(wrapper.find('.' + badgeClass).exists()).toBe(true);
})
});
});
describe('Button.vue', () => {
@ -59,7 +58,7 @@ describe('Button.vue', () => {
expect(wrapper.find('.p-disabled').exists()).toBe(false);
await wrapper.setProps({ loading: true })
await wrapper.setProps({ loading: true });
const array = loadingIcon.split(' ');
const lastIcon = '.' + array.join('.');
@ -69,7 +68,7 @@ describe('Button.vue', () => {
await wrapper.setProps({ loading: false });
expect(wrapper.find('.p-button-loading').exists()).toBe(false);
})
});
});
describe('Button.vue', () => {
@ -81,5 +80,5 @@ describe('Button.vue', () => {
});
expect(wrapper.html()).toBe('<button class="p-button p-component" type="button"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>');
})
});
});

30
components/button/Button.vue
View File

@ -1,8 +1,8 @@
<template>
<button :class="buttonClass" type="button" :aria-label="defaultAriaLabel" v-ripple :disabled="disabled">
<button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled">
<slot>
<span v-if="loading && !icon" :class="iconClass"></span>
<span v-if="icon" :class="iconClass"></span>
<span v-if="loading && !icon" :class="iconStyleClass"></span>
<span v-if="icon" :class="iconStyleClass"></span>
<span class="p-button-label">{{ label || '&nbsp;' }}</span>
<span v-if="badge" :class="badgeStyleClass">{{ badge }}</span>
</slot>
@ -25,6 +25,10 @@ export default {
type: String,
default: 'left'
},
iconClass: {
type: String,
default: null
},
badge: {
type: String
},
@ -50,35 +54,39 @@ export default {
'p-disabled': this.$attrs.disabled || this.loading,
'p-button-loading': this.loading,
'p-button-loading-label-only': this.loading && !this.icon && this.label
}
};
},
iconClass() {
iconStyleClass() {
return [
this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
'p-button-icon',
this.iconClass,
{
'p-button-icon-left': this.iconPos === 'left' && this.label,
'p-button-icon-right': this.iconPos === 'right' && this.label,
'p-button-icon-top': this.iconPos === 'top' && this.label,
'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
}
]
];
},
badgeStyleClass() {
return [
'p-badge p-component', this.badgeClass, {
'p-badge p-component',
this.badgeClass,
{
'p-badge-no-gutter': this.badge && String(this.badge).length === 1
}]
}
];
},
disabled() {
return this.$attrs.disabled || this.loading;
},
defaultAriaLabel() {
return (this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label']);
return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
}
},
directives: {
'ripple': Ripple
}
ripple: Ripple
}
};
</script>

20
components/calendar/Calendar.d.ts vendored
View File

@ -3,7 +3,7 @@ import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
type CalendarValueType = Date | Date[] | undefined;
type CalendarSlotDateType = { day: number; month: number; year: number; today: boolean; selectable: boolean }
type CalendarSlotDateType = { day: number; month: number; year: number; today: boolean; selectable: boolean };
type CalendarSelectionModeType = 'single' | 'multiple' | 'range' | undefined;
@ -330,7 +330,7 @@ export declare type CalendarEmits = {
* Callback to invoke when input field is being typed.
* @param {Event} event - Browser event
*/
'input': (event: Event) => void;
input: (event: Event) => void;
/**
* Callback to invoke when a date is selected.
* @param {Date} value - Selected value.
@ -339,11 +339,11 @@ export declare type CalendarEmits = {
/**
* Callback to invoke when datepicker panel is shown.
*/
'show': () => void;
show: () => void;
/**
* Callback to invoke when datepicker panel is hidden.
*/
'hide': () => void;
hide: () => void;
/**
* Callback to invoke when today button is clicked.
* @param {Date} date - Today as a date instance.
@ -368,23 +368,23 @@ export declare type CalendarEmits = {
* Callback to invoke on focus of input field.
* @param {Event} event - Focus event
*/
'focus': (event: Event) => void;
focus: (event: Event) => void;
/**
* Callback to invoke on blur of input field.
* @param {CalendarBlurEvent} event - Blur event
*/
'blur': (event: CalendarBlurEvent) => void;
blur: (event: CalendarBlurEvent) => void;
/**
* Callback to invoke when a key is pressed.
*/
'keydown': (event: Event) => void;
}
keydown: (event: Event) => void;
};
declare class Calendar extends ClassComponent<CalendarProps, CalendarSlots, CalendarEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Calendar: GlobalComponentConstructor<Calendar>
Calendar: GlobalComponentConstructor<Calendar>;
}
}
@ -394,7 +394,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Calendar](https://www.primefaces.org/primevue/showcase/#/calendar)
* - [Calendar](https://www.primefaces.org/primevue/calendar)
*
*/
export default Calendar;

7
components/calendar/Calendar.spec.js
View File

@ -40,14 +40,15 @@ describe('Calendar.vue', () => {
const onDateSelect = jest.spyOn(wrapper.vm, 'onDateSelect');
await wrapper.vm.onDateSelect({ currentTarget: { focus: () => {} } }, event);
expect(onDateSelect).toHaveBeenCalled()
expect(onDateSelect).toHaveBeenCalled();
});
it('should calculate the correct view date when in range mode', async () => {
const dateOne = new Date();
const dateTwo = new Date();
dateTwo.setFullYear(dateOne.getFullYear(), dateOne.getMonth(), dateOne.getDate() + 1)
dateTwo.setFullYear(dateOne.getFullYear(), dateOne.getMonth(), dateOne.getDate() + 1);
await wrapper.setProps({ selectionMode: 'range', showTime: true, modelValue: [dateOne, dateTwo] });
expect(wrapper.vm.viewDate).toEqual(dateTwo)
expect(wrapper.vm.viewDate).toEqual(dateTwo);
});
});

1072
components/calendar/Calendar.vue
View File

File diff suppressed because it is too large Load Diff

10
components/card/Card.d.ts vendored
View File

@ -1,8 +1,7 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export interface CardProps {
}
export interface CardProps {}
export interface CardSlots {
/**
@ -27,14 +26,13 @@ export interface CardSlots {
footer: () => VNode[];
}
export declare type CardEmits = {
}
export declare type CardEmits = {};
declare class Card extends ClassComponent<CardProps, CardSlots, CardEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Card: GlobalComponentConstructor<Card>
Card: GlobalComponentConstructor<Card>;
}
}
@ -44,7 +42,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Card](https://www.primefaces.org/primevue/showcase/#/card)
* - [Card](https://www.primefaces.org/primevue/card)
*
*/
export default Card;

10
components/card/Card.vue
View File

@ -1,15 +1,15 @@
<template>
<div class="p-card p-component">
<div class="p-card-header" v-if="$slots.header">
<div v-if="$slots.header" class="p-card-header">
<slot name="header"></slot>
</div>
<div class="p-card-body">
<div class="p-card-title" v-if="$slots.title"><slot name="title"></slot></div>
<div class="p-card-subtitle" v-if="$slots.subtitle"><slot name="subtitle"></slot></div>
<div v-if="$slots.title" class="p-card-title"><slot name="title"></slot></div>
<div v-if="$slots.subtitle" class="p-card-subtitle"><slot name="subtitle"></slot></div>
<div class="p-card-content">
<slot name="content"></slot>
</div>
<div class="p-card-footer" v-if="$slots.footer">
<div v-if="$slots.footer" class="p-card-footer">
<slot name="footer"></slot>
</div>
</div>
@ -19,7 +19,7 @@
<script>
export default {
name: 'Card'
}
};
</script>
<style>

16
components/carousel/Carousel.d.ts vendored
View File

@ -75,6 +75,16 @@ export interface CarouselProps {
* Default value is 0.
*/
autoplayInterval?: number | undefined;
/**
* Whether to display navigation buttons in container.
* Default value is true.
*/
showNavigators?: boolean | undefined;
/**
* Whether to display indicator container.
* Default value is true.
*/
showIndicators?: boolean | undefined;
}
export interface CarouselSlots {
@ -108,13 +118,13 @@ export declare type CarouselEmits = {
* @param {number} value - New page value.
*/
'update:page': (value: number) => void;
}
};
declare class Carousel extends ClassComponent<CarouselProps, CarouselSlots, CarouselEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Carousel: GlobalComponentConstructor<Carousel>
Carousel: GlobalComponentConstructor<Carousel>;
}
}
@ -124,7 +134,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Carousel](https://www.primefaces.org/primevue/showcase/#/carousel)
* - [Carousel](https://www.primefaces.org/primevue/carousel)
*
*/
export default Carousel;

84
components/carousel/Carousel.spec.js
View File

@ -7,52 +7,52 @@ describe('Carousel.vue', () => {
props: {
value: [
{
"id": "1000",
"code": "vbb124btr",
"name": "Game Controller",
"description": "Product Description",
"image": "game-controller.jpg",
"price": 99,
"category": "Electronics",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 4
id: '1000',
code: 'vbb124btr',
name: 'Game Controller',
description: 'Product Description',
image: 'game-controller.jpg',
price: 99,
category: 'Electronics',
quantity: 2,
inventoryStatus: 'LOWSTOCK',
rating: 4
},
{
"id": "1001",
"code": "nvklal433",
"name": "Black Watch",
"description": "Product Description",
"image": "black-watch.jpg",
"price": 72,
"category": "Accessories",
"quantity": 61,
"inventoryStatus": "INSTOCK",
"rating": 4
id: '1001',
code: 'nvklal433',
name: 'Black Watch',
description: 'Product Description',
image: 'black-watch.jpg',
price: 72,
category: 'Accessories',
quantity: 61,
inventoryStatus: 'INSTOCK',
rating: 4
},
{
"id": "1002",
"code": "zz21cz3c1",
"name": "Blue Band",
"description": "Product Description",
"image": "blue-band.jpg",
"price": 79,
"category": "Fitness",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 3
id: '1002',
code: 'zz21cz3c1',
name: 'Blue Band',
description: 'Product Description',
image: 'blue-band.jpg',
price: 79,
category: 'Fitness',
quantity: 2,
inventoryStatus: 'LOWSTOCK',
rating: 3
},
{
"id": "1003",
"code": "244wgerg2",
"name": "Blue T-Shirt",
"description": "Product Description",
"image": "blue-t-shirt.jpg",
"price": 29,
"category": "Clothing",
"quantity": 25,
"inventoryStatus": "INSTOCK",
"rating": 5
id: '1003',
code: '244wgerg2',
name: 'Blue T-Shirt',
description: 'Product Description',
image: 'blue-t-shirt.jpg',
price: 29,
category: 'Clothing',
quantity: 25,
inventoryStatus: 'INSTOCK',
rating: 5
}
]
},
@ -74,11 +74,13 @@ describe('Carousel.vue', () => {
expect(wrapper.findAll('.p-carousel-item').length).toBe(4);
const firstItem = wrapper.findAll('.p-carousel-item')[0];
expect(firstItem.classes()).toContain('p-carousel-item-active');
const nextBtn = wrapper.find('.p-carousel-next');
await nextBtn.trigger('click');
expect(firstItem.classes()).not.toContain('p-carousel-item-active');
})
});
});

371
components/carousel/Carousel.vue
View File

@ -1,52 +1,58 @@
<template>
<div :id="id" :class="['p-carousel p-component', { 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }]">
<div class="p-carousel-header" v-if="$slots.header">
<div v-if="$slots.header" class="p-carousel-header">
<slot name="header"></slot>
</div>
<div :class="contentClasses">
<div :class="containerClasses">
<button :class="['p-carousel-prev p-link', {'p-disabled': backwardIsDisabled}]" :disabled="backwardIsDisabled" @click="navBackward" type="button" v-ripple>
<button v-if="showNavigators" v-ripple :class="['p-carousel-prev p-link', { 'p-disabled': backwardIsDisabled }]" :disabled="backwardIsDisabled" @click="navBackward" type="button">
<span :class="['p-carousel-prev-icon pi', { 'pi-chevron-left': !isVertical(), 'pi-chevron-up': isVertical() }]"></span>
</button>
<div class="p-carousel-items-content" :style="[{'height': isVertical() ? verticalViewPortHeight : 'auto'}]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove">
<div class="p-carousel-items-content" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove">
<div ref="itemsContainer" class="p-carousel-items-container" @transitionend="onTransitionEnd">
<template v-if="isCircular()">
<div v-for="(item, index) of value.slice(-1 * d_numVisible)" :key="index + '_scloned'" :class="['p-carousel-item p-carousel-item-cloned',
{'p-carousel-item-active': (totalShiftedItems * -1) === (value.length + d_numVisible),
'p-carousel-item-start': 0 === index,
'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index}]">
<div
v-for="(item, index) of value.slice(-1 * d_numVisible)"
:key="index + '_scloned'"
:class="[
'p-carousel-item p-carousel-item-cloned',
{ 'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible, 'p-carousel-item-start': 0 === index, 'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index }
]"
>
<slot name="item" :data="item" :index="index"></slot>
</div>
</template>
<div v-for="(item, index) of value" :key="index" :class="['p-carousel-item',
{'p-carousel-item-active': firstIndex() <= index && lastIndex() >= index,
'p-carousel-item-start': firstIndex() === index,
'p-carousel-item-end': lastIndex() === index}]">
<div
v-for="(item, index) of value"
:key="index"
:class="['p-carousel-item', { 'p-carousel-item-active': firstIndex() <= index && lastIndex() >= index, 'p-carousel-item-start': firstIndex() === index, 'p-carousel-item-end': lastIndex() === index }]"
>
<slot name="item" :data="item" :index="index"></slot>
</div>
<template v-if="isCircular()">
<div v-for="(item, index) of value.slice(0, d_numVisible)" :key="index + '_fcloned'" :class="['p-carousel-item p-carousel-item-cloned',
{'p-carousel-item-active': totalShiftedItems === 0,
'p-carousel-item-start': 0 === index,
'p-carousel-item-end': value.slice(0, d_numVisible).length - 1 === index}]">
<div
v-for="(item, index) of value.slice(0, d_numVisible)"
:key="index + '_fcloned'"
:class="['p-carousel-item p-carousel-item-cloned', { 'p-carousel-item-active': totalShiftedItems === 0, 'p-carousel-item-start': 0 === index, 'p-carousel-item-end': value.slice(0, d_numVisible).length - 1 === index }]"
>
<slot name="item" :data="item" :index="index"></slot>
</div>
</template>
</div>
</div>
<button :class="['p-carousel-next p-link', {'p-disabled': forwardIsDisabled}]" :disabled="forwardIsDisabled" @click="navForward" type="button" v-ripple>
<button v-if="showNavigators" v-ripple :class="['p-carousel-next p-link', { 'p-disabled': forwardIsDisabled }]" :disabled="forwardIsDisabled" @click="navForward" type="button">
<span :class="['p-carousel-prev-icon pi', { 'pi-chevron-right': !isVertical(), 'pi-chevron-down': isVertical() }]"></span>
</button>
</div>
<ul v-if="totalIndicators >= 0" :class="indicatorsContentClasses">
<ul v-if="totalIndicators >= 0 && showIndicators" :class="indicatorsContentClasses">
<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="['p-carousel-indicator', { 'p-highlight': d_page === i }]">
<button class="p-link" @click="onIndicatorClick($event, i)" type="button" />
</li>
</ul>
</div>
<div class="p-carousel-footer" v-if="$slots.footer">
<div v-if="$slots.footer" class="p-carousel-footer">
<slot name="footer"></slot>
</div>
</div>
@ -93,6 +99,14 @@ export default {
autoplayInterval: {
type: Number,
default: 0
},
showNavigators: {
type: Boolean,
default: true
},
showIndicators: {
type: Boolean,
default: true
}
},
data() {
@ -109,7 +123,7 @@ export default {
allowAutoplay: !!this.autoplayInterval,
d_circular: this.circular || this.allowAutoplay,
swipeThreshold: 20
}
};
},
isRemainingItemsAdded: false,
watch: {
@ -131,41 +145,154 @@ export default {
this.d_oldValue = oldValue;
}
},
mounted() {
let stateChanged = false;
this.createStyle();
this.calculatePosition();
if (this.responsiveOptions) {
this.bindDocumentListeners();
}
if (this.isCircular()) {
let totalShiftedItems = this.totalShiftedItems;
if (this.d_page === 0) {
totalShiftedItems = -1 * this.d_numVisible;
} else if (totalShiftedItems === 0) {
totalShiftedItems = -1 * this.value.length;
if (this.remainingItems > 0) {
this.isRemainingItemsAdded = true;
}
}
if (totalShiftedItems !== this.totalShiftedItems) {
this.totalShiftedItems = totalShiftedItems;
stateChanged = true;
}
}
if (!stateChanged && this.isAutoplay()) {
this.startAutoplay();
}
},
updated() {
const isCircular = this.isCircular();
let stateChanged = false;
let totalShiftedItems = this.totalShiftedItems;
if (this.autoplayInterval) {
this.stopAutoplay();
}
if (this.d_oldNumScroll !== this.d_numScroll || this.d_oldNumVisible !== this.d_numVisible || this.d_oldValue.length !== this.value.length) {
this.remainingItems = (this.value.length - this.d_numVisible) % this.d_numScroll;
let page = this.d_page;
if (this.totalIndicators !== 0 && page >= this.totalIndicators) {
page = this.totalIndicators - 1;
this.$emit('update:page', page);
this.d_page = page;
stateChanged = true;
}
totalShiftedItems = page * this.d_numScroll * -1;
if (isCircular) {
totalShiftedItems -= this.d_numVisible;
}
if (page === this.totalIndicators - 1 && this.remainingItems > 0) {
totalShiftedItems += -1 * this.remainingItems + this.d_numScroll;
this.isRemainingItemsAdded = true;
} else {
this.isRemainingItemsAdded = false;
}
if (totalShiftedItems !== this.totalShiftedItems) {
this.totalShiftedItems = totalShiftedItems;
stateChanged = true;
}
this.d_oldNumScroll = this.d_numScroll;
this.d_oldNumVisible = this.d_numVisible;
this.d_oldValue = this.value;
this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
}
if (isCircular) {
if (this.d_page === 0) {
totalShiftedItems = -1 * this.d_numVisible;
} else if (totalShiftedItems === 0) {
totalShiftedItems = -1 * this.value.length;
if (this.remainingItems > 0) {
this.isRemainingItemsAdded = true;
}
}
if (totalShiftedItems !== this.totalShiftedItems) {
this.totalShiftedItems = totalShiftedItems;
stateChanged = true;
}
}
if (!stateChanged && this.isAutoplay()) {
this.startAutoplay();
}
},
beforeUnmount() {
if (this.responsiveOptions) {
this.unbindDocumentListeners();
}
if (this.autoplayInterval) {
this.stopAutoplay();
}
},
methods: {
step(dir, page) {
let totalShiftedItems = this.totalShiftedItems;
const isCircular = this.isCircular();
if (page != null) {
totalShiftedItems = (this.d_numScroll * page) * -1;
totalShiftedItems = this.d_numScroll * page * -1;
if (isCircular) {
totalShiftedItems -= this.d_numVisible;
}
this.isRemainingItemsAdded = false;
}
else {
totalShiftedItems += (this.d_numScroll * dir);
} else {
totalShiftedItems += this.d_numScroll * dir;
if (this.isRemainingItemsAdded) {
totalShiftedItems += this.remainingItems - (this.d_numScroll * dir);
totalShiftedItems += this.remainingItems - this.d_numScroll * dir;
this.isRemainingItemsAdded = false;
}
let originalShiftedItems = isCircular ? (totalShiftedItems + this.d_numVisible) : totalShiftedItems;
let originalShiftedItems = isCircular ? totalShiftedItems + this.d_numVisible : totalShiftedItems;
page = Math.abs(Math.floor(originalShiftedItems / this.d_numScroll));
}
if (isCircular && this.d_page === (this.totalIndicators - 1) && dir === -1) {
if (isCircular && this.d_page === this.totalIndicators - 1 && dir === -1) {
totalShiftedItems = -1 * (this.value.length + this.d_numVisible);
page = 0;
}
else if (isCircular && this.d_page === 0 && dir === 1) {
} else if (isCircular && this.d_page === 0 && dir === 1) {
totalShiftedItems = 0;
page = (this.totalIndicators - 1);
}
else if (page === (this.totalIndicators - 1) && this.remainingItems > 0) {
totalShiftedItems += ((this.remainingItems * -1) - (this.d_numScroll * dir));
page = this.totalIndicators - 1;
} else if (page === this.totalIndicators - 1 && this.remainingItems > 0) {
totalShiftedItems += this.remainingItems * -1 - this.d_numScroll * dir;
this.isRemainingItemsAdded = true;
}
@ -198,9 +325,10 @@ export default {
if (this.d_numScroll !== matchedResponsiveOptionsData.numScroll) {
let page = this.d_page;
page = parseInt((page * this.d_numScroll) / matchedResponsiveOptionsData.numScroll);
this.totalShiftedItems = (matchedResponsiveOptionsData.numScroll * page) * -1;
this.totalShiftedItems = matchedResponsiveOptionsData.numScroll * page * -1;
if (this.isCircular()) {
this.totalShiftedItems -= matchedResponsiveOptionsData.numVisible;
@ -229,7 +357,7 @@ export default {
}
},
navForward(e, index) {
if (this.d_circular || this.d_page < (this.totalIndicators - 1)) {
if (this.d_circular || this.d_page < this.totalIndicators - 1) {
this.step(-1, index);
}
@ -244,8 +372,7 @@ export default {
if (index > page) {
this.navForward(e, index);
}
else if (index < page) {
} else if (index < page) {
this.navBackward(e, index);
}
},
@ -254,7 +381,7 @@ export default {
DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transition = '';
if ((this.d_page === 0 || this.d_page === (this.totalIndicators - 1)) && this.isCircular()) {
if ((this.d_page === 0 || this.d_page === this.totalIndicators - 1) && this.isCircular()) {
this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${this.totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${this.totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
}
}
@ -276,18 +403,18 @@ export default {
let touchobj = e.changedTouches[0];
if (this.isVertical()) {
this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
}
else {
this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
} else {
this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
}
},
changePageOnTouch(e, diff) {
if (Math.abs(diff) > this.swipeThreshold) {
if (diff < 0) { // left
if (diff < 0) {
// left
this.navForward(e);
}
else { // right
} else {
// right
this.navBackward(e);
}
}
@ -309,14 +436,12 @@ export default {
},
startAutoplay() {
this.interval = setInterval(() => {
if(this.d_page === (this.totalIndicators - 1)) {
if (this.d_page === this.totalIndicators - 1) {
this.step(-1, 0);
}
else {
} else {
this.step(-1, this.d_page + 1);
}
},
this.autoplayInterval);
}, this.autoplayInterval);
},
stopAutoplay() {
if (this.interval) {
@ -332,27 +457,23 @@ export default {
let innerHTML = `
#${this.id} .p-carousel-item {
flex: 1 0 ${ (100/ this.d_numVisible) }%
flex: 1 0 ${100 / this.d_numVisible}%
}
`;
if (this.responsiveOptions) {
let _responsiveOptions = [...this.responsiveOptions];
_responsiveOptions.sort((data1, data2) => {
const value1 = data1.breakpoint;
const value2 = data2.breakpoint;
let result = null;
if (value1 == null && value2 != null)
result = -1;
else if (value1 != null && value2 == null)
result = 1;
else if (value1 == null && value2 == null)
result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string')
result = value1.localeCompare(value2, undefined, { numeric: true });
else
result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
if (value1 == null && value2 != null) result = -1;
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return -1 * result;
});
@ -363,10 +484,10 @@ export default {
innerHTML += `
@media screen and (max-width: ${res.breakpoint}) {
#${this.id} .p-carousel-item {
flex: 1 0 ${ (100/ res.numVisible) }%
flex: 1 0 ${100 / res.numVisible}%
}
}
`
`;
}
}
@ -382,122 +503,10 @@ export default {
return this.autoplayInterval && this.allowAutoplay;
},
firstIndex() {
return this.isCircular()? (-1 * (this.totalShiftedItems + this.d_numVisible)) : (this.totalShiftedItems * -1);
return this.isCircular() ? -1 * (this.totalShiftedItems + this.d_numVisible) : this.totalShiftedItems * -1;
},
lastIndex() {
return (this.firstIndex() + this.d_numVisible - 1);
}
},
mounted() {
let stateChanged = false;
this.createStyle();
this.calculatePosition();
if (this.responsiveOptions) {
this.bindDocumentListeners();
}
if (this.isCircular()) {
let totalShiftedItems = this.totalShiftedItems;
if (this.d_page === 0) {
totalShiftedItems = -1 * this.d_numVisible;
}
else if (totalShiftedItems === 0) {
totalShiftedItems = -1 * this.value.length;
if (this.remainingItems > 0) {
this.isRemainingItemsAdded = true;
}
}
if (totalShiftedItems !== this.totalShiftedItems) {
this.totalShiftedItems = totalShiftedItems;
stateChanged = true;
}
}
if (!stateChanged && this.isAutoplay()) {
this.startAutoplay();
}
},
updated() {
const isCircular = this.isCircular();
let stateChanged = false;
let totalShiftedItems = this.totalShiftedItems;
if (this.autoplayInterval) {
this.stopAutoplay();
}
if(this.d_oldNumScroll !== this.d_numScroll || this.d_oldNumVisible !== this.d_numVisible || this.d_oldValue.length !== this.value.length) {
this.remainingItems = (this.value.length - this.d_numVisible) % this.d_numScroll;
let page = this.d_page;
if (this.totalIndicators !== 0 && page >= this.totalIndicators) {
page = this.totalIndicators - 1;
this.$emit('update:page', page);
this.d_page = page;
stateChanged = true;
}
totalShiftedItems = (page * this.d_numScroll) * -1;
if (isCircular) {
totalShiftedItems -= this.d_numVisible;
}
if (page === (this.totalIndicators - 1) && this.remainingItems > 0) {
totalShiftedItems += (-1 * this.remainingItems) + this.d_numScroll;
this.isRemainingItemsAdded = true;
}
else {
this.isRemainingItemsAdded = false;
}
if (totalShiftedItems !== this.totalShiftedItems) {
this.totalShiftedItems = totalShiftedItems;
stateChanged = true;
}
this.d_oldNumScroll = this.d_numScroll;
this.d_oldNumVisible = this.d_numVisible;
this.d_oldValue = this.value;
this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
}
if (isCircular) {
if (this.d_page === 0) {
totalShiftedItems = -1 * this.d_numVisible;
}
else if (totalShiftedItems === 0) {
totalShiftedItems = -1 * this.value.length;
if (this.remainingItems > 0) {
this.isRemainingItemsAdded = true;
}
}
if (totalShiftedItems !== this.totalShiftedItems) {
this.totalShiftedItems = totalShiftedItems;
stateChanged = true;
}
}
if (!stateChanged && this.isAutoplay()) {
this.startAutoplay();
}
},
beforeUnmount() {
if (this.responsiveOptions) {
this.unbindDocumentListeners();
}
if (this.autoplayInterval) {
this.stopAutoplay();
return this.firstIndex() + this.d_numVisible - 1;
}
},
computed: {
@ -505,10 +514,10 @@ export default {
return this.value ? Math.max(Math.ceil((this.value.length - this.d_numVisible) / this.d_numScroll) + 1, 0) : 0;
},
backwardIsDisabled() {
return (this.value && (!this.circular || this.value.length < this.d_numVisible) && this.d_page === 0);
return this.value && (!this.circular || this.value.length < this.d_numVisible) && this.d_page === 0;
},
forwardIsDisabled() {
return (this.value && (!this.circular || this.value.length < this.d_numVisible) && (this.d_page === (this.totalIndicators - 1) || this.totalIndicators === 0));
return this.value && (!this.circular || this.value.length < this.d_numVisible) && (this.d_page === this.totalIndicators - 1 || this.totalIndicators === 0);
},
containerClasses() {
return ['p-carousel-container', this.containerClass];
@ -518,12 +527,12 @@ export default {
},
indicatorsContentClasses() {
return ['p-carousel-indicators p-reset', this.indicatorsContentClass];
},
}
},
directives: {
'ripple': Ripple
}
ripple: Ripple
}
};
</script>
<style>

23
components/cascadeselect/CascadeSelect.d.ts vendored
View File

@ -121,6 +121,11 @@ export interface CascadeSelectProps {
* Default value is true.
*/
autoOptionFocus?: boolean | undefined;
/**
* When enabled, the focused option is selected/opened.
* Default value is false.
*/
selectOnFocus?: boolean | undefined;
/**
* Locale to use in searching. The default locale is the host environment's current locale.
*/
@ -205,22 +210,22 @@ export declare type CascadeSelectEmits = {
* Callback to invoke on value change.
* @param { CascadeSelectChangeEvent } event - Custom change event.
*/
'change': (event: CascadeSelectChangeEvent) => void;
change: (event: CascadeSelectChangeEvent) => void;
/**
* Callback to invoke when the component receives focus.
* @param {Event} event - Browser event.
*/
'focus': (event: Event) => void;
focus: (event: Event) => void;
/**
* Callback to invoke when the component loses focus.
* @param {Event} event - Browser event.
*/
'blur': (event: Event) => void;
blur: (event: Event) => void;
/**
* Callback to invoke on click.
* @param { Event } event - Browser event.
*/
'click': (event: Event) => void;
click: (event: Event) => void;
/**
* Callback to invoke when a group changes.
* @param { CascadeSelectGroupChangeEvent } event - Custom change event.
@ -237,18 +242,18 @@ export declare type CascadeSelectEmits = {
/**
* Callback to invoke when the overlay is shown.
*/
'show': () => void;
show: () => void;
/**
* Callback to invoke when the overlay is hidden.
*/
'hide': () => void;
}
hide: () => void;
};
declare class CascadeSelect extends ClassComponent<CascadeSelectProps, CascadeSelectSlots, CascadeSelectEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
CascadeSelect: GlobalComponentConstructor<CascadeSelect>
CascadeSelect: GlobalComponentConstructor<CascadeSelect>;
}
}
@ -258,7 +263,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [CascadeSelect](https://www.primefaces.org/primevue/showcase/#/cascadeselect)
* - [CascadeSelect](https://www.primefaces.org/primevue/cascadeselect)
*
*/
export default CascadeSelect;

7
components/cascadeselect/CascadeSelect.spec.js
View File

@ -34,8 +34,7 @@ describe('CascadeSelect.vue', () => {
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
},
}
]
},
{
@ -55,8 +54,7 @@ describe('CascadeSelect.vue', () => {
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
},
}
]
},
{
@ -112,6 +110,7 @@ describe('CascadeSelect.vue', () => {
expect(wrapper.findAll('.p-cascadeselect-item-text')[0].text()).toBe('Australia');
const firstGroup = wrapper.findAll('.p-cascadeselect-item-content')[0];
await firstGroup.trigger('click');
expect(wrapper.find('.p-cascadeselect-panel.p-cascadeselect-sublist').exists()).toBe(true);

232
components/cascadeselect/CascadeSelect.vue
View File

@ -1,9 +1,28 @@
<template>
<div ref="container" :class="containerClass" @click="onContainerClick($event)">
<div class="p-hidden-accessible">
<input ref="focusInput" :id="inputId" type="text" :style="inputStyle" :class="inputClass" readonly :disabled="disabled" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1"
role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="tree" :aria-expanded="overlayVisible" :aria-controls="id + '_tree'" :aria-activedescendant="focused ? focusedOptionId : undefined"
@focus="onFocus" @blur="onBlur" @keydown="onKeyDown" v-bind="inputProps" />
<input
ref="focusInput"
:id="inputId"
type="text"
:style="inputStyle"
:class="inputClass"
readonly
:disabled="disabled"
:placeholder="placeholder"
:tabindex="!disabled ? tabindex : -1"
role="combobox"
:aria-label="ariaLabel"
:aria-labelledby="ariaLabelledby"
aria-haspopup="tree"
:aria-expanded="overlayVisible"
:aria-controls="id + '_tree'"
:aria-activedescendant="focused ? focusedOptionId : undefined"
@focus="onFocus"
@blur="onBlur"
@keydown="onKeyDown"
v-bind="inputProps"
/>
</div>
<span :class="labelClass">
<slot name="value" :value="modelValue" :placeholder="placeholder">
@ -22,9 +41,23 @@
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="panelStyleClass" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
<div class="p-cascadeselect-items-wrapper">
<CascadeSelectSub :id="id + '_tree'" role="tree" aria-orientation="horizontal" :selectId="id" :focusedOptionId="focused ? focusedOptionId : undefined"
:options="processedOptions" :activeOptionPath="activeOptionPath" :level="0" :templates="$slots" :optionLabel="optionLabel" :optionValue="optionValue" :optionDisabled="optionDisabled"
:optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren" @option-change="onOptionChange" />
<CascadeSelectSub
:id="id + '_tree'"
role="tree"
aria-orientation="horizontal"
:selectId="id"
:focusedOptionId="focused ? focusedOptionId : undefined"
:options="processedOptions"
:activeOptionPath="activeOptionPath"
:level="0"
:templates="$slots"
:optionLabel="optionLabel"
:optionValue="optionValue"
:optionDisabled="optionDisabled"
:optionGroupLabel="optionGroupLabel"
:optionGroupChildren="optionGroupChildren"
@option-change="onOptionChange"
/>
<span role="status" aria-live="polite" class="p-hidden-accessible">
{{ selectedMessageText }}
@ -56,13 +89,34 @@ export default {
placeholder: String,
disabled: Boolean,
dataKey: null,
inputId: null,
inputStyle: null,
inputClass: null,
inputProps: null,
panelStyle: null,
panelClass: null,
panelProps: null,
inputId: {
type: String,
default: null
},
inputClass: {
type: String,
default: null
},
inputStyle: {
type: null,
default: null
},
inputProps: {
type: null,
default: null
},
panelClass: {
type: String,
default: null
},
panelStyle: {
type: null,
default: null
},
panelProps: {
type: null,
default: null
},
appendTo: {
type: String,
default: 'body'
@ -79,6 +133,10 @@ export default {
type: Boolean,
default: true
},
selectOnFocus: {
type: Boolean,
default: false
},
searchLocale: {
type: String,
default: undefined
@ -122,17 +180,15 @@ export default {
overlay: null,
searchTimeout: null,
searchValue: null,
selectOnFocus: false,
focusOnHover: false,
data() {
return {
id: UniqueComponentId(),
focused: false,
focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
activeOptionPath: [],
overlayVisible: false,
dirty: false
}
};
},
watch: {
options() {
@ -140,7 +196,7 @@ export default {
}
},
mounted() {
this.id = this.$attrs.id || this.id;
this.autoUpdateModel();
},
beforeUnmount() {
this.unbindOutsideClickListener();
@ -177,6 +233,7 @@ export default {
},
getProccessedOptionLabel(processedOption) {
const grouped = this.isProccessedOptionGroup(processedOption);
return grouped ? this.getOptionGroupLabel(processedOption.option, processedOption.level) : this.getOptionLabel(processedOption.option);
},
isProccessedOptionGroup(processedOption) {
@ -185,17 +242,17 @@ export default {
show(isFocus) {
this.$emit('before-show');
this.overlayVisible = true;
this.activeOptionPath = this.findOptionPathByValue(this.modelValue);
this.activeOptionPath = this.hasSelectedOption ? this.findOptionPathByValue(this.modelValue) : this.activeOptionPath;
if (this.hasSelectedOption && ObjectUtils.isNotEmpty(this.activeOptionPath)) {
const processedOption = this.activeOptionPath[this.activeOptionPath.length - 1];
this.focusedOptionInfo = { index: (this.autoOptionFocus ? processedOption.index : -1), level: processedOption.level, parentKey: processedOption.parentKey };
}
else {
this.focusedOptionInfo = { index: (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1), level: 0, parentKey: '' };
this.focusedOptionInfo = { index: this.autoOptionFocus ? processedOption.index : -1, level: processedOption.level, parentKey: processedOption.parentKey };
} else {
this.focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1, level: 0, parentKey: '' };
}
isFocus && this.$refs.focusInput.focus();
isFocus && DomHandler.focus(this.$refs.focusInput);
},
hide(isFocus) {
const _hide = () => {
@ -204,10 +261,12 @@ export default {
this.activeOptionPath = [];
this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };
isFocus && this.$refs.focusInput.focus();
}
isFocus && DomHandler.focus(this.$refs.focusInput);
};
setTimeout(() => { _hide() }, 0); // For ScreenReaders
setTimeout(() => {
_hide();
}, 0); // For ScreenReaders
},
onFocus(event) {
this.focused = true;
@ -222,9 +281,12 @@ export default {
onKeyDown(event) {
if (this.disabled || this.loading) {
event.preventDefault();
return;
}
const metaKey = event.metaKey || event.ctrlKey;
switch (event.code) {
case 'ArrowDown':
this.onArrowDownKey(event);
@ -275,7 +337,7 @@ export default {
break;
default:
if (ObjectUtils.isPrintableCharacter(event.key)) {
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
!this.overlayVisible && this.show();
this.searchOptions(event, event.key);
}
@ -284,25 +346,29 @@ export default {
}
},
onOptionChange(event) {
const { originalEvent, processedOption, isFocus } = event;
const { originalEvent, processedOption, isFocus, isHide } = event;
if (ObjectUtils.isEmpty(processedOption)) return;
const { index, level, parentKey, children } = processedOption;
const grouped = ObjectUtils.isNotEmpty(children);
const activeOptionPath = this.activeOptionPath.filter(p => p.parentKey !== parentKey);
const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey);
activeOptionPath.push(processedOption);
this.focusedOptionInfo = { index, level, parentKey };
this.activeOptionPath = activeOptionPath;
grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption);
isFocus && this.$refs.focusInput.focus();
grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
isFocus && DomHandler.focus(this.$refs.focusInput);
},
onOptionSelect(event, processedOption) {
onOptionSelect(event, processedOption, isHide = true) {
const value = this.getOptionValue(processedOption.option);
this.activeOptionPath.forEach(p => p.selected = true);
this.activeOptionPath.forEach((p) => (p.selected = true));
this.updateModel(event, value);
this.hide(true);
isHide && this.hide(true);
},
onOptionGroupSelect(event, processedOption) {
this.dirty = true;
@ -315,7 +381,7 @@ export default {
if (!this.overlay || !this.overlay.contains(event.target)) {
this.overlayVisible ? this.hide() : this.show();
this.$refs.focusInput.focus();
DomHandler.focus(this.$refs.focusInput);
}
this.$emit('click', event);
@ -349,13 +415,13 @@ export default {
if (this.focusedOptionInfo.index !== -1) {
const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
const grouped = this.isProccessedOptionGroup(processedOption);
!grouped && this.onOptionChange({ originalEvent: event, processedOption });
}
this.overlayVisible && this.hide();
event.preventDefault();
}
else {
} else {
const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo.index) : this.findLastFocusedOptionIndex();
this.changeFocusedOptionIndex(event, optionIndex);
@ -367,12 +433,12 @@ export default {
onArrowLeftKey(event) {
if (this.overlayVisible) {
const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
const parentOption = this.activeOptionPath.find(p => p.key === processedOption.parentKey);
const parentOption = this.activeOptionPath.find((p) => p.key === processedOption.parentKey);
const matched = this.focusedOptionInfo.parentKey === '' || (parentOption && parentOption.key === this.focusedOptionInfo.parentKey);
const root = ObjectUtils.isEmpty(processedOption.parent);
if (matched) {
this.activeOptionPath = this.activeOptionPath.filter(p => p.parentKey !== this.focusedOptionInfo.parentKey);
this.activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== this.focusedOptionInfo.parentKey);
}
if (!root) {
@ -390,14 +456,13 @@ export default {
const grouped = this.isProccessedOptionGroup(processedOption);
if (grouped) {
const matched = this.activeOptionPath.some(p => processedOption.key === p.key);
const matched = this.activeOptionPath.some((p) => processedOption.key === p.key);
if (matched) {
this.focusedOptionInfo = { index: -1, parentKey: processedOption.key };
this.searchValue = '';
this.onArrowDownKey(event);
}
else {
} else {
this.onOptionChange({ originalEvent: event, processedOption });
}
}
@ -420,8 +485,7 @@ export default {
onEnterKey(event) {
if (!this.overlayVisible) {
this.onArrowDownKey(event);
}
else {
} else {
if (this.focusedOptionInfo.index !== -1) {
const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
const grouped = this.isProccessedOptionGroup(processedOption);
@ -477,8 +541,7 @@ export default {
alignOverlay() {
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$el);
}
else {
} else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
}
@ -490,6 +553,7 @@ export default {
this.hide();
}
};
document.addEventListener('click', this.outsideClickListener);
}
},
@ -522,6 +586,7 @@ export default {
this.hide();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
@ -541,31 +606,35 @@ export default {
return this.isValidOption(processedOption) && this.isSelected(processedOption);
},
isSelected(processedOption) {
return this.activeOptionPath.some(p => p.key === processedOption.key);
return this.activeOptionPath.some((p) => p.key === processedOption.key);
},
findFirstOptionIndex() {
return this.visibleOptions.findIndex(processedOption => this.isValidOption(processedOption));
return this.visibleOptions.findIndex((processedOption) => this.isValidOption(processedOption));
},
findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, processedOption => this.isValidOption(processedOption));
return ObjectUtils.findLastIndex(this.visibleOptions, (processedOption) => this.isValidOption(processedOption));
},
findNextOptionIndex(index) {
const matchedOptionIndex = index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(processedOption => this.isValidOption(processedOption)) : -1;
const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((processedOption) => this.isValidOption(processedOption)) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
},
findPrevOptionIndex(index) {
const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), processedOption => this.isValidOption(processedOption)) : -1;
const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (processedOption) => this.isValidOption(processedOption)) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : index;
},
findSelectedOptionIndex() {
return this.visibleOptions.findIndex(processedOption => this.isValidSelectedOption(processedOption));
return this.visibleOptions.findIndex((processedOption) => this.isValidSelectedOption(processedOption));
},
findFirstFocusedOptionIndex() {
const selectedIndex = this.findSelectedOptionIndex();
return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
},
findLastFocusedOptionIndex() {
const selectedIndex = this.findSelectedOptionIndex();
return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
},
findOptionPathByValue(value, processedOptions, level = 0) {
@ -582,6 +651,7 @@ export default {
}
const matchedOptions = this.findOptionPathByValue(value, processedOption.children, level + 1);
if (matchedOptions) {
matchedOptions.unshift(processedOption);
@ -596,11 +666,10 @@ export default {
let matched = false;
if (this.focusedOptionInfo.index !== -1) {
optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex(processedOption => this.isOptionMatched(processedOption));
optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex(processedOption => this.isOptionMatched(processedOption)) : optionIndex + this.focusedOptionInfo.index;
}
else {
optionIndex = this.visibleOptions.findIndex(processedOption => this.isOptionMatched(processedOption));
optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption));
optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption)) : optionIndex + this.focusedOptionInfo.index;
} else {
optionIndex = this.visibleOptions.findIndex((processedOption) => this.isOptionMatched(processedOption));
}
if (optionIndex !== -1) {
@ -632,13 +701,14 @@ export default {
this.scrollInView();
if (this.selectOnFocus) {
this.updateModel(event, this.getOptionValue(this.visibleOptions[index]));
this.onOptionChange({ originalEvent: event, processedOption: this.visibleOptions[index], isHide: false });
}
}
},
scrollInView(index = -1) {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
}
@ -646,8 +716,9 @@ export default {
autoUpdateModel() {
if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
this.focusedOptionInfo.index = this.findFirstFocusedOptionIndex();
const value = this.getOptionValue(this.visibleOptions[this.focusedOptionInfo.index]);
this.updateModel(null, value);
this.onOptionChange({ processedOption: this.visibleOptions[this.focusedOptionInfo.index], isHide: false });
!this.overlayVisible && (this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' });
}
},
updateModel(event, value) {
@ -657,7 +728,8 @@ export default {
createProcessedOptions(options, level = 0, parent = {}, parentKey = '') {
const processedOptions = [];
options && options.forEach((option, index) => {
options &&
options.forEach((option, index) => {
const key = (parentKey !== '' ? parentKey + '_' : '') + index;
const newOption = {
option,
@ -666,7 +738,7 @@ export default {
key,
parent,
parentKey
}
};
newOption['children'] = this.createProcessedOptions(this.getOptionGroupChildren(option, level), level + 1, newOption, key);
processedOptions.push(newOption);
@ -680,25 +752,35 @@ export default {
},
computed: {
containerClass() {
return ['p-cascadeselect p-component p-inputwrapper', {
return [
'p-cascadeselect p-component p-inputwrapper',
{
'p-disabled': this.disabled,
'p-focus': this.focused,
'p-inputwrapper-filled': this.modelValue,
'p-inputwrapper-focus': this.focused || this.overlayVisible,
'p-overlay-open': this.overlayVisible
}];
}
];
},
labelClass() {
return ['p-cascadeselect-label', {
return [
'p-cascadeselect-label',
{
'p-placeholder': this.label === this.placeholder,
'p-cascadeselect-label-empty': !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
}];
}
];
},
panelStyleClass() {
return ['p-cascadeselect-panel p-component', this.panelClass, {
return [
'p-cascadeselect-panel p-component',
this.panelClass,
{
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}];
}
];
},
dropdownIconClass() {
return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
@ -711,7 +793,7 @@ export default {
if (this.hasSelectedOption) {
const activeOptionPath = this.findOptionPathByValue(this.modelValue);
const processedOption = activeOptionPath.length ? activeOptionPath[activeOptionPath.length - 1] : null;
const processedOption = ObjectUtils.isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null;
return processedOption ? this.getOptionLabel(processedOption.option) : label;
}
@ -722,7 +804,8 @@ export default {
return this.createProcessedOptions(this.options || []);
},
visibleOptions() {
const processedOption = this.activeOptionPath.find(p => p.key === this.focusedOptionInfo.parentKey);
const processedOption = this.activeOptionPath.find((p) => p.key === this.focusedOptionInfo.parentKey);
return processedOption ? processedOption.children : this.processedOptions;
},
equalityKey() {
@ -749,15 +832,18 @@ export default {
selectedMessageText() {
return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
},
id() {
return this.$attrs.id || UniqueComponentId();
},
focusedOptionId() {
return this.focusedOptionInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
}
},
components: {
'CascadeSelectSub': CascadeSelectSub,
'Portal': Portal
}
CascadeSelectSub: CascadeSelectSub,
Portal: Portal
}
};
</script>
<style>

52
components/cascadeselect/CascadeSelectSub.vue
View File

@ -1,17 +1,47 @@
<template>
<ul class="p-cascadeselect-panel p-cascadeselect-items">
<template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
<li :id="getOptionId(processedOption)" :class="['p-cascadeselect-item', {'p-cascadeselect-item-group': isOptionGroup(processedOption), 'p-cascadeselect-item-active p-highlight': isOptionActive(processedOption), 'p-focus': isOptionFocused(processedOption), 'p-disabled': isOptionDisabled(processedOption)}]"
role="treeitem" :aria-label="getOptionLabelToRender(processedOption)" :aria-selected="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)" :aria-expanded="isOptionGroup(processedOption) ? isOptionActive(processedOption) : undefined"
:aria-setsize="processedOption.length" :aria-posinset="index + 1" :aria-level="level + 1">
<div class="p-cascadeselect-item-content" @click="onOptionClick($event, processedOption)" v-ripple>
<li
:id="getOptionId(processedOption)"
:class="[
'p-cascadeselect-item',
{
'p-cascadeselect-item-group': isOptionGroup(processedOption),
'p-cascadeselect-item-active p-highlight': isOptionActive(processedOption),
'p-focus': isOptionFocused(processedOption),
'p-disabled': isOptionDisabled(processedOption)
}
]"
role="treeitem"
:aria-label="getOptionLabelToRender(processedOption)"
:aria-selected="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
:aria-expanded="isOptionGroup(processedOption) ? isOptionActive(processedOption) : undefined"
:aria-setsize="processedOption.length"
:aria-posinset="index + 1"
:aria-level="level + 1"
>
<div v-ripple class="p-cascadeselect-item-content" @click="onOptionClick($event, processedOption)">
<component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
<span v-else class="p-cascadeselect-item-text">{{ getOptionLabelToRender(processedOption) }}</span>
<span v-if="isOptionGroup(processedOption)" class="p-cascadeselect-group-icon pi pi-angle-right" aria-hidden="true"></span>
</div>
<CascadeSelectSub v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)" role="group" class="p-cascadeselect-sublist" :selectId="selectId" :focusedOptionId="focusedOptionId"
:options="getOptionGroupChildren(processedOption)" :activeOptionPath="activeOptionPath" :level="level + 1" :templates="templates" :optionLabel="optionLabel" :optionValue="optionValue" :optionDisabled="optionDisabled"
:optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren" @option-change="onOptionChange" />
<CascadeSelectSub
v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)"
role="group"
class="p-cascadeselect-sublist"
:selectId="selectId"
:focusedOptionId="focusedOptionId"
:options="getOptionGroupChildren(processedOption)"
:activeOptionPath="activeOptionPath"
:level="level + 1"
:templates="templates"
:optionLabel="optionLabel"
:optionValue="optionValue"
:optionDisabled="optionDisabled"
:optionGroupLabel="optionGroupLabel"
:optionGroupChildren="optionGroupChildren"
@option-change="onOptionChange"
/>
</li>
</template>
</ul>
@ -68,7 +98,7 @@ export default {
return !this.isOptionGroup(processedOption) && this.isOptionActive(processedOption);
},
isOptionActive(processedOption) {
return this.activeOptionPath.some(path => path.key === processedOption.key);
return this.activeOptionPath.some((path) => path.key === processedOption.key);
},
isOptionFocused(processedOption) {
return this.focusedOptionId === this.getOptionId(processedOption);
@ -89,13 +119,13 @@ export default {
const sublistWidth = this.$el.offsetParent ? this.$el.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$el);
const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) {
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
this.$el.style.left = '-100%';
}
}
},
directives: {
'ripple': Ripple
}
ripple: Ripple
}
};
</script>

13
components/chart/Chart.d.ts vendored
View File

@ -44,21 +44,20 @@ export interface ChartProps {
height?: number | undefined;
}
export interface ChartSlots {
}
export interface ChartSlots {}
export declare type ChartEmits = {
/**
* Callback to invoke when a tab gets expanded.
* @param {ChartSelectEvent} event - Custom select event.
*/
'select': (event: ChartSelectEvent) => void;
select: (event: ChartSelectEvent) => void;
/**
* Callback to invoke when chart is loaded.
* @param {*} chart - Chart instance.
*/
'loaded': (chart: any) => void;
}
loaded: (chart: any) => void;
};
declare class Chart extends ClassComponent<ChartProps, ChartSlots, ChartEmits> {
/**
@ -89,7 +88,7 @@ declare class Chart extends ClassComponent<ChartProps, ChartSlots, ChartEmits> {
declare module '@vue/runtime-core' {
interface GlobalComponents {
Chart: GlobalComponentConstructor<Chart>
Chart: GlobalComponentConstructor<Chart>;
}
}
@ -103,7 +102,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Chart](https://www.primefaces.org/primevue/showcase/#/chart)
* - [Chart](https://www.primefaces.org/primevue/chart)
*
*/
export default Chart;

22
components/chart/Chart.vue
View File

@ -20,18 +20,9 @@ export default {
height: {
type: Number,
default: 150
},
},
chart: null,
mounted() {
this.initChart();
},
beforeUnmount() {
if (this.chart) {
this.chart.destroy();
this.chart = null;
}
},
chart: null,
watch: {
/*
* Use deep watch to enable triggering watch for changes within structure
@ -50,6 +41,15 @@ export default {
this.reinit();
}
},
mounted() {
this.initChart();
},
beforeUnmount() {
if (this.chart) {
this.chart.destroy();
this.chart = null;
}
},
methods: {
initChart() {
import('chart.js/auto').then((module) => {
@ -103,7 +103,7 @@ export default {
}
}
}
}
};
</script>
<style>

15
components/checkbox/Checkbox.d.ts vendored
View File

@ -68,8 +68,7 @@ export interface CheckboxProps {
'aria-label'?: string | undefined;
}
export interface CheckboxSlots {
}
export interface CheckboxSlots {}
export declare type CheckboxEmits = {
/**
@ -81,24 +80,24 @@ export declare type CheckboxEmits = {
* Callback to invoke on value click.
* @param {MouseEvent} event - Browser event.
*/
'click': (event: MouseEvent) => void;
click: (event: MouseEvent) => void;
/**
* Callback to invoke on value change.
* @param {Event} event - Browser event.
*/
'change': (event: Event) => void;
change: (event: Event) => void;
/**
* Callback to invoke on value change.
* @param {boolean} value - New value.
*/
'input': (value: boolean) => void;
}
input: (value: boolean) => void;
};
declare class Checkbox extends ClassComponent<CheckboxProps, CheckboxSlots, CheckboxEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Checkbox: GlobalComponentConstructor<Checkbox>
Checkbox: GlobalComponentConstructor<Checkbox>;
}
}
@ -108,7 +107,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Checkbox](https://www.primefaces.org/primevue/showcase/#/checkbox)
* - [Checkbox](https://www.primefaces.org/primevue/checkbox)
*
*/
export default Checkbox;

60
components/checkbox/Checkbox.vue
View File

@ -1,8 +1,25 @@
<template>
<div :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input :id="inputId" ref="input" type="checkbox" :value="value" :class="inputClass" :style="inputStyle" :name="name" :checked="checked" :tabindex="tabindex" :disabled="disabled" :readonly="readonly" :required="required" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
@focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
<input
ref="input"
:id="inputId"
type="checkbox"
:value="value"
:class="inputClass"
:style="inputStyle"
:name="name"
:checked="checked"
:tabindex="tabindex"
:disabled="disabled"
:readonly="readonly"
:required="required"
:aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel"
@focus="onFocus($event)"
@blur="onBlur($event)"
v-bind="inputProps"
/>
</div>
<div ref="box" :class="['p-checkbox-box', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
<span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
@ -48,10 +65,22 @@ export default {
type: Number,
default: null
},
inputId: null,
inputClass: null,
inputStyle: null,
inputProps: null,
inputId: {
type: String,
default: null
},
inputClass: {
type: String,
default: null
},
inputStyle: {
type: null,
default: null
},
inputProps: {
type: null,
default: null
},
'aria-labelledby': {
type: String,
default: null
@ -64,7 +93,7 @@ export default {
data() {
return {
focused: false
}
};
},
methods: {
onClick(event) {
@ -73,12 +102,9 @@ export default {
if (this.binary) {
newModelValue = this.checked ? this.falseValue : this.trueValue;
}
else {
if (this.checked)
newModelValue = this.modelValue.filter(val => !ObjectUtils.equals(val, this.value));
else
newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
} else {
if (this.checked) newModelValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.value));
else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
}
this.$emit('click', event);
@ -103,12 +129,14 @@ export default {
},
containerClass() {
return [
'p-checkbox p-component', {
'p-checkbox p-component',
{
'p-checkbox-checked': this.checked,
'p-checkbox-disabled': this.disabled,
'p-checkbox-focused': this.focused
}];
}
}
];
}
}
};
</script>

8
components/chip/Chip.d.ts vendored
View File

@ -37,14 +37,14 @@ export declare type ChipEmits = {
* Callback to invoke when a chip is removed.
* @param {Event} event - Browser event.
*/
'remove': (event: Event) => void;
}
remove: (event: Event) => void;
};
declare class Chip extends ClassComponent<ChipProps, ChipSlots, ChipEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Chip: GlobalComponentConstructor<Chip>
Chip: GlobalComponentConstructor<Chip>;
}
}
@ -54,7 +54,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Chip](https://www.primefaces.org/primevue/showcase/#/chip)
* - [Chip](https://www.primefaces.org/primevue/chip)
*
*/
export default Chip;

2
components/chip/Chip.spec.js
View File

@ -22,7 +22,7 @@ describe('Chip.vue', () => {
});
it('should close icon work', async () => {
await wrapper.find('.p-chip-remove-icon').trigger('click')
await wrapper.find('.p-chip-remove-icon').trigger('click');
expect(wrapper.find('.p-chip.p-component').exists()).toBe(false);
});

22
components/chip/Chip.vue
View File

@ -1,12 +1,11 @@
<template>
<div :class="containerClass" v-if="visible">
<div v-if="visible" :class="containerClass">
<slot>
<img :src="image" v-if="image">
<span :class="iconClass" v-else-if="icon"></span>
<div class="p-chip-text" v-if="label">{{label}}</div>
<img v-if="image" :src="image" />
<span v-else-if="icon" :class="iconClass"></span>
<div v-if="label" class="p-chip-text">{{ label }}</div>
</slot>
<span v-if="removable" tabindex="0" :class="removeIconClass"
@click="close" @keydown.enter="close"></span>
<span v-if="removable" tabindex="0" :class="removeIconClass" @click="close" @keydown.enter="close"></span>
</div>
</template>
@ -39,7 +38,7 @@ export default {
data() {
return {
visible: true
}
};
},
methods: {
close(event) {
@ -49,9 +48,12 @@ export default {
},
computed: {
containerClass() {
return ['p-chip p-component', {
return [
'p-chip p-component',
{
'p-chip-image': this.image != null
}];
}
];
},
iconClass() {
return ['p-chip-icon', this.icon];
@ -60,7 +62,7 @@ export default {
return ['p-chip-remove-icon', this.removeIcon];
}
}
}
};
</script>
<style>

10
components/chips/Chips.d.ts vendored
View File

@ -96,19 +96,19 @@ export declare type ChipsEmits = {
* Callback to invoke when a chip is added.
* @param {ChipsAddEvent} event - Custom add event.
*/
'add': (event: ChipsAddEvent) => void;
add: (event: ChipsAddEvent) => void;
/**
* Callback to invoke when a chip is removed.
* @param {ChipsRemoveEvent} event - Custom remove event.
*/
'remove': (event: ChipsRemoveEvent) => void;
}
remove: (event: ChipsRemoveEvent) => void;
};
declare class Chips extends ClassComponent<ChipsProps, ChipsSlots, ChipsEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Chips: GlobalComponentConstructor<Chips>
Chips: GlobalComponentConstructor<Chips>;
}
}
@ -118,7 +118,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Chips](https://www.primefaces.org/primevue/showcase/#/chips)
* - [Chips](https://www.primefaces.org/primevue/chips)
*
*/
export default Chips;

96
components/chips/Chips.vue
View File

@ -1,17 +1,51 @@
<template>
<div :class="containerClass">
<ul ref="container" class="p-inputtext p-chips-multiple-container" tabindex="-1" role="listbox" aria-orientation="horizontal" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-activedescendant="focused ? focusedOptionId : undefined"
@click="onWrapperClick()" @focus="onContainerFocus" @blur="onContainerBlur" @keydown="onContainerKeyDown">
<li v-for="(val,i) of modelValue" :key="`${i}_${val}`" :id="id + '_chips_item_' + i" role="option" :class="['p-chips-token', {'p-focus': focusedIndex === i}]"
:aria-label="val" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1">
<ul
ref="container"
class="p-inputtext p-chips-multiple-container"
tabindex="-1"
role="listbox"
aria-orientation="horizontal"
:aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel"
:aria-activedescendant="focused ? focusedOptionId : undefined"
@click="onWrapperClick()"
@focus="onContainerFocus"
@blur="onContainerBlur"
@keydown="onContainerKeyDown"
>
<li
v-for="(val, i) of modelValue"
:key="`${i}_${val}`"
:id="id + '_chips_item_' + i"
role="option"
:class="['p-chips-token', { 'p-focus': focusedIndex === i }]"
:aria-label="val"
:aria-selected="true"
:aria-setsize="modelValue.length"
:aria-posinset="i + 1"
>
<slot name="chip" :value="val">
<span class="p-chips-token-label">{{ val }}</span>
</slot>
<span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)" aria-hidden="true"></span>
</li>
<li class="p-chips-input-token" role="option">
<input ref="input" type="text" :id="inputId" :class="inputClass" :style="inputStyle" :disabled="disabled || maxedOut" :placeholder="placeholder"
@focus="onFocus($event)" @blur="onBlur($event)" @input="onInput" @keydown="onKeyDown($event)" @paste="onPaste($event)" v-bind="inputProps">
<input
ref="input"
:id="inputId"
type="text"
:class="inputClass"
:style="inputStyle"
:disabled="disabled || maxedOut"
:placeholder="placeholder"
@focus="onFocus($event)"
@blur="onBlur($event)"
@input="onInput"
@keydown="onKeyDown($event)"
@paste="onPaste($event)"
v-bind="inputProps"
/>
</li>
</ul>
</div>
@ -48,14 +82,26 @@ export default {
type: String,
default: null
},
inputId: null,
inputClass: null,
inputStyle: null,
inputProps: null,
disabled: {
type: Boolean,
default: false
},
inputId: {
type: String,
default: null
},
inputClass: {
type: String,
default: null
},
inputStyle: {
type: null,
default: null
},
inputProps: {
type: null,
default: null
},
'aria-labelledby': {
type: String,
default: null
@ -89,9 +135,11 @@ export default {
onBlur(event) {
this.focused = false;
this.focusedIndex = null;
if (this.addOnBlur) {
this.addItem(event, event.target.value, false);
}
this.$emit('blur', event);
},
onKeyDown(event) {
@ -102,21 +150,23 @@ export default {
if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
if (this.focusedIndex !== null) {
this.removeItem(event, this.focusedIndex);
} else this.removeItem(event, this.modelValue.length - 1);
}
else this.removeItem(event, this.modelValue.length - 1);
}
break;
case 'Enter':
if (inputValue && inputValue.trim().length && !this.maxedOut) {
this.addItem(event, inputValue, true);
}
break;
case 'ArrowLeft':
if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
this.$refs.container.focus();
}
break;
case 'ArrowRight':
@ -129,16 +179,19 @@ export default {
this.addItem(event, inputValue, true);
}
}
break;
}
},
onPaste(event) {
if (this.separator) {
let pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
if (pastedData) {
let value = this.modelValue || [];
let pastedValues = pastedData.split(this.separator);
pastedValues = pastedValues.filter(val => (this.allowDuplicate || value.indexOf(val) === -1));
pastedValues = pastedValues.filter((val) => this.allowDuplicate || value.indexOf(val) === -1);
value = [...value, ...pastedValues];
this.updateModel(event, value, true);
}
@ -177,12 +230,10 @@ export default {
},
onArrowRightKeyOn() {
if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
if (this.focusedIndex === this.modelValue.length - 1) {
this.focusedIndex = null;
this.$refs.input.focus();
}
else {
} else {
this.focusedIndex++;
}
}
@ -208,6 +259,7 @@ export default {
addItem(event, item, preventDefault) {
if (item && item.trim().length) {
let value = this.modelValue ? [...this.modelValue] : [];
if (this.allowDuplicate || value.indexOf(item) === -1) {
value.push(item);
this.updateModel(event, value, preventDefault);
@ -221,6 +273,7 @@ export default {
let values = [...this.modelValue];
const removedItem = values.splice(index, 1);
this.focusedIndex = null;
this.$refs.input.focus();
this.$emit('update:modelValue', values);
@ -235,18 +288,21 @@ export default {
return this.max && this.modelValue && this.max === this.modelValue.length;
},
containerClass() {
return ['p-chips p-component p-inputwrapper', {
return [
'p-chips p-component p-inputwrapper',
{
'p-disabled': this.disabled,
'p-focus': this.focused,
'p-inputwrapper-filled': ((this.modelValue && this.modelValue.length) || (this.inputValue && this.inputValue.length)),
'p-inputwrapper-filled': (this.modelValue && this.modelValue.length) || (this.inputValue && this.inputValue.length),
'p-inputwrapper-focus': this.focused
}];
}
];
},
focusedOptionId() {
return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
}
}
}
};
</script>
<style>

15
components/colorpicker/ColorPicker.d.ts vendored
View File

@ -65,8 +65,7 @@ export interface ColorPickerProps {
appendTo?: ColorPickerAppendToType;
}
export interface ColorPickerSlots {
}
export interface ColorPickerSlots {}
export declare type ColorPickerEmits = {
/**
@ -78,22 +77,22 @@ export declare type ColorPickerEmits = {
* Callback to invoke when a chip is added.
* @param {ColorPickerChangeEvent} event - Custom add event.
*/
'change': (event: ColorPickerChangeEvent) => void;
change: (event: ColorPickerChangeEvent) => void;
/**
* Callback to invoke when input is cleared by the user.
*/
'show': () => void;
show: () => void;
/**
* Callback to invoke when input is cleared by the user.
*/
'hide': () => void;
}
hide: () => void;
};
declare class ColorPicker extends ClassComponent<ColorPickerProps, ColorPickerSlots, ColorPickerEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
ColorPicker: GlobalComponentConstructor<ColorPicker>
ColorPicker: GlobalComponentConstructor<ColorPicker>;
}
}
@ -103,7 +102,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [ColorPicker](https://www.primefaces.org/primevue/showcase/#/colorpicker)
* - [ColorPicker](https://www.primefaces.org/primevue/colorpicker)
*
*/
export default ColorPicker;

164
components/colorpicker/ColorPicker.vue
View File

@ -1,19 +1,16 @@
<template>
<div ref="container" :class="containerClass">
<input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled"
@click="onInputClick" @keydown="onInputKeydown" v-if="!inline"/>
<input v-if="!inline" ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" />
<Portal :appendTo="appendTo" :disabled="inline">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="pickerRef" :class="pickerClass" v-if="inline ? true : overlayVisible" @click="onOverlayClick">
<div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="pickerClass" @click="onOverlayClick">
<div class="p-colorpicker-content">
<div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown($event)"
@touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
<div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
<div class="p-colorpicker-color">
<div :ref="colorHandleRef" class="p-colorpicker-color-handle"></div>
</div>
</div>
<div :ref="hueViewRef" class="p-colorpicker-hue" @mousedown="onHueMousedown($event)"
@touchstart="onHueDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
<div :ref="hueViewRef" class="p-colorpicker-hue" @mousedown="onHueMousedown($event)" @touchstart="onHueDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
<div :ref="hueHandleRef" class="p-colorpicker-hue-handle"></div>
</div>
</div>
@ -89,6 +86,17 @@ export default {
colorHandle: null,
hueView: null,
hueHandle: null,
watch: {
modelValue: {
immediate: true,
handler(newValue) {
this.hsbValue = this.toHSB(newValue);
if (this.selfUpdate) this.selfUpdate = false;
else this.updateUI();
}
}
},
beforeUnmount() {
this.unbindOutsideClickListener();
this.unbindDragListeners();
@ -108,26 +116,14 @@ export default {
mounted() {
this.updateUI();
},
watch: {
modelValue: {
immediate: true,
handler(newValue) {
this.hsbValue = this.toHSB(newValue);
if (this.selfUpdate)
this.selfUpdate = false;
else
this.updateUI();
}
}
},
methods: {
pickColor(event) {
let rect = this.colorSelector.getBoundingClientRect();
let top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
let left = rect.left + document.body.scrollLeft;
let saturation = Math.floor(100 * (Math.max(0, Math.min(150, ((event.pageX || event.changedTouches[0].pageX)- left)))) / 150);
let brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, ((event.pageY || event.changedTouches[0].pageY) - top)))) / 150);
let saturation = Math.floor((100 * Math.max(0, Math.min(150, (event.pageX || event.changedTouches[0].pageX) - left))) / 150);
let brightness = Math.floor((100 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top)))) / 150);
this.hsbValue = this.validateHSB({
h: this.hsbValue.h,
s: saturation,
@ -142,8 +138,9 @@ export default {
},
pickHue(event) {
let top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
this.hsbValue = this.validateHSB({
h: Math.floor(360 * (150 - Math.max(0, Math.min(150, ((event.pageY || event.changedTouches[0].pageY) - top)))) / 150),
h: Math.floor((360 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top)))) / 150),
s: 100,
b: 100
});
@ -181,18 +178,19 @@ export default {
s: 100,
b: 100
});
this.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(hsbValue);
}
},
updateColorHandle() {
if (this.colorHandle) {
this.colorHandle.style.left = Math.floor(150 * this.hsbValue.s / 100) + 'px';
this.colorHandle.style.top = Math.floor(150 * (100 - this.hsbValue.b) / 100) + 'px';
this.colorHandle.style.left = Math.floor((150 * this.hsbValue.s) / 100) + 'px';
this.colorHandle.style.top = Math.floor((150 * (100 - this.hsbValue.b)) / 100) + 'px';
}
},
updateHue() {
if (this.hueHandle) {
this.hueHandle.style.top = Math.floor(150 - (150 * this.hsbValue.h / 360)) + 'px';
this.hueHandle.style.top = Math.floor(150 - (150 * this.hsbValue.h) / 360) + 'px';
}
},
updateInput() {
@ -222,19 +220,24 @@ export default {
},
validateHEX(hex) {
var len = 6 - hex.length;
if (len > 0) {
var o = [];
for (var i = 0; i < len; i++) {
o.push('0');
}
o.push(hex);
hex = o.join('');
}
return hex;
},
HEXtoRGB(hex) {
let hexValue = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
return {r: hexValue >> 16, g: (hexValue & 0x00FF00) >> 8, b: (hexValue & 0x0000FF)};
let hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
return { r: hexValue >> 16, g: (hexValue & 0x00ff00) >> 8, b: hexValue & 0x0000ff };
},
HEXtoHSB(hex) {
return this.RGBtoHSB(this.HEXtoRGB(hex));
@ -248,8 +251,10 @@ export default {
var min = Math.min(rgb.r, rgb.g, rgb.b);
var max = Math.max(rgb.r, rgb.g, rgb.b);
var delta = max - min;
hsb.b = max;
hsb.s = max !== 0 ? 255 * delta / max : 0;
hsb.s = max !== 0 ? (255 * delta) / max : 0;
if (hsb.s !== 0) {
if (rgb.r === max) {
hsb.h = (rgb.g - rgb.b) / delta;
@ -261,49 +266,76 @@ export default {
} else {
hsb.h = -1;
}
hsb.h *= 60;
if (hsb.h < 0) {
hsb.h += 360;
}
hsb.s *= 100 / 255;
hsb.b *= 100 / 255;
return hsb;
},
HSBtoRGB(hsb) {
var rgb = {
r: null, g: null, b: null
r: null,
g: null,
b: null
};
var h = Math.round(hsb.h);
var s = Math.round(hsb.s*255/100);
var v = Math.round(hsb.b*255/100);
var s = Math.round((hsb.s * 255) / 100);
var v = Math.round((hsb.b * 255) / 100);
if (s === 0) {
rgb = {
r: v,
g: v,
b: v
}
}
else {
};
} else {
var t1 = v;
var t2 = (255-s)*v/255;
var t3 = (t1-t2)*(h%60)/60;
var t2 = ((255 - s) * v) / 255;
var t3 = ((t1 - t2) * (h % 60)) / 60;
if (h === 360) h = 0;
if (h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
else if (h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
else if (h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
else if (h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
else if (h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
else if (h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
else {rgb.r=0; rgb.g=0; rgb.b=0}
if (h < 60) {
rgb.r = t1;
rgb.b = t2;
rgb.g = t2 + t3;
} else if (h < 120) {
rgb.g = t1;
rgb.b = t2;
rgb.r = t1 - t3;
} else if (h < 180) {
rgb.g = t1;
rgb.r = t2;
rgb.b = t2 + t3;
} else if (h < 240) {
rgb.b = t1;
rgb.r = t2;
rgb.g = t1 - t3;
} else if (h < 300) {
rgb.b = t1;
rgb.g = t2;
rgb.r = t2 + t3;
} else if (h < 360) {
rgb.r = t1;
rgb.g = t2;
rgb.b = t1 - t3;
} else {
rgb.r = 0;
rgb.g = 0;
rgb.b = 0;
}
}
return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
},
RGBtoHEX(rgb) {
var hex = [
rgb.r.toString(16),
rgb.g.toString(16),
rgb.b.toString(16)
];
var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
for (var key in hex) {
if (hex[key].length === 1) {
@ -336,8 +368,7 @@ export default {
default:
break;
}
}
else {
} else {
hsb = this.HEXtoHSB(this.defaultColor);
}
@ -369,10 +400,8 @@ export default {
}
},
alignOverlay() {
if (this.appendTo === 'self')
DomHandler.relativePosition(this.picker, this.$refs.input);
else
DomHandler.absolutePosition(this.picker, this.$refs.input);
if (this.appendTo === 'self') DomHandler.relativePosition(this.picker, this.$refs.input);
else DomHandler.absolutePosition(this.picker, this.$refs.input);
},
onInputClick() {
if (this.disabled) {
@ -470,6 +499,7 @@ export default {
this.overlayVisible = false;
}
};
document.addEventListener('click', this.outsideClickListener);
}
},
@ -502,6 +532,7 @@ export default {
this.overlayVisible = false;
}
};
window.addEventListener('resize', this.resizeListener);
}
},
@ -536,7 +567,7 @@ export default {
}
},
pickerRef(el) {
this.picker = el
this.picker = el;
},
colorSelectorRef(el) {
this.colorSelector = el;
@ -572,17 +603,22 @@ export default {
return ['p-colorpicker-preview p-inputtext', { 'p-disabled': this.disabled }];
},
pickerClass() {
return ['p-colorpicker-panel', this.panelClass, {
'p-colorpicker-overlay-panel': !this.inline, 'p-disabled': this.disabled,
return [
'p-colorpicker-panel',
this.panelClass,
{
'p-colorpicker-overlay-panel': !this.inline,
'p-disabled': this.disabled,
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}];
}
];
}
},
components: {
'Portal': Portal
}
Portal: Portal
}
};
</script>
<style>
@ -642,7 +678,7 @@ export default {
border-style: solid;
margin: -5px 0 0 -5px;
cursor: pointer;
opacity: .85;
opacity: 0.85;
}
.p-colorpicker-panel .p-colorpicker-hue {
@ -651,7 +687,7 @@ export default {
top: 8px;
left: 167px;
position: absolute;
opacity: .85;
opacity: 0.85;
}
.p-colorpicker-panel .p-colorpicker-hue-handle {
@ -664,7 +700,7 @@ export default {
height: 10px;
border-width: 2px;
border-style: solid;
opacity: .85;
opacity: 0.85;
cursor: pointer;
}
</style>

9
components/column/Column.d.ts vendored
View File

@ -464,14 +464,13 @@ export interface ColumnSlots {
}) => VNode[];
}
export declare type ColumnEmits = {
}
export declare type ColumnEmits = {};
declare class Column extends ClassComponent<ColumnProps, ColumnSlots, ColumnEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Column: GlobalComponentConstructor<Column>
Column: GlobalComponentConstructor<Column>;
}
}
@ -481,8 +480,8 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [DataTable](https://www.primefaces.org/primevue/showcase/#/datatable)
* - [TreeTable](https://www.primefaces.org/primevue/showcase/#/treetable)
* - [DataTable](https://www.primefaces.org/primevue/datatable)
* - [TreeTable](https://www.primefaces.org/primevue/treetable)
*
*/
export default Column;

2
components/column/Column.vue
View File

@ -182,5 +182,5 @@ export default {
render() {
return null;
}
}
};
</script>

10
components/columngroup/ColumnGroup.d.ts vendored
View File

@ -9,17 +9,15 @@ export interface ColumnGroupProps {
type?: ColumnGroupType;
}
export interface ColumnGroupSlots {
}
export interface ColumnGroupSlots {}
export declare type ColumnGroupEmits = {
}
export declare type ColumnGroupEmits = {};
declare class ColumnGroup extends ClassComponent<ColumnGroupProps, ColumnGroupSlots, ColumnGroupEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
ColumnGroup: GlobalComponentConstructor<ColumnGroup>
ColumnGroup: GlobalComponentConstructor<ColumnGroup>;
}
}
@ -29,7 +27,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [ColumnGroup](https://www.primefaces.org/primevue/showcase/#/datatable/colgroup)
* - [ColumnGroup](https://www.primefaces.org/primevue/datatable/colgroup)
*
*/
export default ColumnGroup;

2
components/columngroup/ColumnGroup.vue
View File

@ -10,5 +10,5 @@ export default {
render() {
return null;
}
}
};
</script>

6
components/config/PrimeVue.d.ts vendored
View File

@ -24,6 +24,8 @@ interface PrimeVueLocaleAriaOptions {
selectAll?: string;
unselectAll?: string;
close?: string;
previous?: string;
next?: string;
}
interface PrimeVueLocaleOptions {
@ -101,7 +103,7 @@ declare module 'vue/types/vue' {
interface Vue {
$primevue: {
config: PrimeVueConfiguration;
}
};
}
}
@ -109,6 +111,6 @@ declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$primevue: {
config: PrimeVueConfiguration;
}
};
}
}

41
components/config/PrimeVue.js
View File

@ -31,11 +31,11 @@ const defaultOptions = {
choose: 'Choose',
upload: 'Upload',
cancel: 'Cancel',
dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"],
monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
chooseYear: 'Choose Year',
chooseMonth: 'Choose Month',
chooseDate: 'Choose Date',
@ -75,32 +75,15 @@ const defaultOptions = {
stars: '{star} stars',
selectAll: 'All items selected',
unselectAll: 'All items unselected',
close: 'Close'
close: 'Close',
previous: 'Previous',
next: 'Next'
}
},
filterMatchModeOptions: {
text: [
FilterMatchMode.STARTS_WITH,
FilterMatchMode.CONTAINS,
FilterMatchMode.NOT_CONTAINS,
FilterMatchMode.ENDS_WITH,
FilterMatchMode.EQUALS,
FilterMatchMode.NOT_EQUALS
],
numeric: [
FilterMatchMode.EQUALS,
FilterMatchMode.NOT_EQUALS,
FilterMatchMode.LESS_THAN,
FilterMatchMode.LESS_THAN_OR_EQUAL_TO,
FilterMatchMode.GREATER_THAN,
FilterMatchMode.GREATER_THAN_OR_EQUAL_TO
],
date: [
FilterMatchMode.DATE_IS,
FilterMatchMode.DATE_IS_NOT,
FilterMatchMode.DATE_BEFORE,
FilterMatchMode.DATE_AFTER
]
text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
},
zIndex: {
modal: 1100,
@ -114,6 +97,7 @@ const PrimeVueSymbol = Symbol();
export function usePrimeVue() {
const PrimeVue = inject(PrimeVueSymbol);
if (!PrimeVue) {
throw new Error('PrimeVue is not installed!');
}
@ -127,6 +111,7 @@ export default {
const PrimeVue = {
config: reactive(configOptions)
};
app.config.globalProperties.$primevue = PrimeVue;
app.provide(PrimeVueSymbol, PrimeVue);
}

4
components/confirmationoptions/ConfirmationOptions.d.ts vendored
View File

@ -39,6 +39,10 @@ export interface ConfirmationOptions {
* Callback to execute when action is rejected.
*/
reject?: () => void;
/**
* Callback to execute when dialog is hidden.
*/
onHide?: () => void;
/**
* Label of the accept button. Defaults to PrimeVue Locale configuration.
*/

1
components/confirmationservice/ConfirmationService.js
View File

@ -11,6 +11,7 @@ export default {
ConfirmationEventBus.emit('close');
}
};
app.config.globalProperties.$confirm = ConfirmationService;
app.provide(PrimeVueConfirmSymbol, ConfirmationService);
}

11
components/confirmdialog/ConfirmDialog.d.ts vendored
View File

@ -38,19 +38,16 @@ export interface ConfirmDialogSlots {
* Custom message template.
* @param {Object} scope - message slot's params.
*/
message: (scope: {
message: ConfirmationOptions;
}) => VNode[];
message: (scope: { message: ConfirmationOptions }) => VNode[];
}
export declare type ConfirmDialogEmits = {
}
export declare type ConfirmDialogEmits = {};
declare class ConfirmDialog extends ClassComponent<ConfirmDialogProps, ConfirmDialogSlots, ConfirmDialogEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
ConfirmDialog: GlobalComponentConstructor<ConfirmDialog>
ConfirmDialog: GlobalComponentConstructor<ConfirmDialog>;
}
}
@ -65,7 +62,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [ConfirmDialog](https://www.primefaces.org/primevue/showcase/#/confirmdialog)
* - [ConfirmDialog](https://www.primefaces.org/primevue/confirmdialog)
*
*/
export default ConfirmDialog;

28
components/confirmdialog/ConfirmDialog.spec.js
View File

@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils';
import PrimeVue from '@/components/config/PrimeVue';
import { mount } from '@vue/test-utils';
import ConfirmDialog from './ConfirmDialog.vue';
describe('ConfirmDialog', () => {
@ -10,7 +10,7 @@ describe('ConfirmDialog', () => {
stubs: {
teleport: true,
transition: false
},
}
},
data() {
return {
@ -19,7 +19,7 @@ describe('ConfirmDialog', () => {
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle'
}
}
};
}
});
@ -31,7 +31,7 @@ describe('ConfirmDialog', () => {
await wrapper.vm.reject();
expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(false);
expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(true);
});
it('should dialog trigger the accept function', async () => {
@ -50,14 +50,15 @@ describe('ConfirmDialog', () => {
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
console.log('accept')
// eslint-disable-next-line no-console
console.log('accept');
},
reject: () => {
// eslint-disable-next-line no-console
console.log('reject');
}
}
}
};
}
});
@ -88,14 +89,15 @@ describe('ConfirmDialog', () => {
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
console.log('accept')
// eslint-disable-next-line no-console
console.log('accept');
},
reject: () => {
// eslint-disable-next-line no-console
console.log('reject');
}
}
}
};
}
});
@ -126,7 +128,7 @@ describe('ConfirmDialog', () => {
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle'
}
}
};
}
});
@ -136,7 +138,7 @@ describe('ConfirmDialog', () => {
await dialogCloseBtn.trigger('click');
expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(false);
expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(true);
});
it('should position work', async () => {
@ -157,7 +159,7 @@ describe('ConfirmDialog', () => {
icon: 'pi pi-info-circle',
position: 'bottom'
}
}
};
}
});

31
components/confirmdialog/ConfirmDialog.vue
View File

@ -1,6 +1,5 @@
<template>
<CDialog v-model:visible="visible" :modal="true" :header="header" :blockScroll="blockScroll" :position="position" class="p-confirm-dialog"
:breakpoints="breakpoints" :closeOnEscape="closeOnEscape">
<CDialog v-model:visible="visible" :modal="true" :header="header" :blockScroll="blockScroll" :position="position" class="p-confirm-dialog" :breakpoints="breakpoints" :closeOnEscape="closeOnEscape" @update:visible="onHide">
<template v-if="!$slots.message">
<i :class="iconClass" />
<span class="p-confirm-dialog-message">{{ message }}</span>
@ -14,9 +13,9 @@
</template>
<script>
import Button from 'primevue/button';
import ConfirmationEventBus from 'primevue/confirmationeventbus';
import Dialog from 'primevue/dialog';
import Button from 'primevue/button';
export default {
name: 'ConfirmDialog',
@ -32,8 +31,8 @@ export default {
data() {
return {
visible: false,
confirmation: null,
}
confirmation: null
};
},
mounted() {
this.confirmListener = (options) => {
@ -51,6 +50,7 @@ export default {
this.visible = false;
this.confirmation = null;
};
ConfirmationEventBus.on('confirm', this.confirmListener);
ConfirmationEventBus.on('close', this.closeListener);
},
@ -71,6 +71,13 @@ export default {
this.confirmation.reject();
}
this.visible = false;
},
onHide() {
if (this.confirmation.onHide) {
this.confirmation.onHide();
}
this.visible = false;
}
},
@ -91,10 +98,10 @@ export default {
return ['p-confirm-dialog-icon', this.confirmation ? this.confirmation.icon : null];
},
acceptLabel() {
return this.confirmation ? (this.confirmation.acceptLabel || this.$primevue.config.locale.accept) : null;
return this.confirmation ? this.confirmation.acceptLabel || this.$primevue.config.locale.accept : null;
},
rejectLabel() {
return this.confirmation ? (this.confirmation.rejectLabel || this.$primevue.config.locale.reject) : null;
return this.confirmation ? this.confirmation.rejectLabel || this.$primevue.config.locale.reject : null;
},
acceptIcon() {
return this.confirmation ? this.confirmation.acceptIcon : null;
@ -106,10 +113,10 @@ export default {
return ['p-confirm-dialog-accept', this.confirmation ? this.confirmation.acceptClass : null];
},
rejectClass() {
return ['p-confirm-dialog-reject', this.confirmation ? (this.confirmation.rejectClass || 'p-button-text') : null];
return ['p-confirm-dialog-reject', this.confirmation ? this.confirmation.rejectClass || 'p-button-text' : null];
},
autoFocusAccept() {
return (this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept') ? true : false;
return this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept' ? true : false;
},
autoFocusReject() {
return this.confirmation.defaultFocus === 'reject' ? true : false;
@ -119,8 +126,8 @@ export default {
}
},
components: {
'CDialog': Dialog,
'CDButton': Button
}
CDialog: Dialog,
CDButton: Button
}
};
</script>

11
components/confirmpopup/ConfirmPopup.d.ts vendored
View File

@ -14,19 +14,16 @@ export interface ConfirmPopupSlots {
* Custom message template.
* @param {Object} scope - message slot's params.
*/
message: (scope: {
message: ConfirmationOptions;
}) => VNode[];
message: (scope: { message: ConfirmationOptions }) => VNode[];
}
export declare type ConfirmPopupEmits = {
}
export declare type ConfirmPopupEmits = {};
declare class ConfirmPopup extends ClassComponent<ConfirmPopupProps, ConfirmPopupSlots, ConfirmPopupEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
ConfirmPopup: GlobalComponentConstructor<ConfirmPopup>
ConfirmPopup: GlobalComponentConstructor<ConfirmPopup>;
}
}
@ -41,7 +38,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [ConfirmPopup](https://www.primefaces.org/primevue/showcase/#/confirmpopup)
* - [ConfirmPopup](https://www.primefaces.org/primevue/confirmpopup)
*
*/
export default ConfirmPopup;

44
components/confirmpopup/ConfirmPopup.vue
View File

@ -1,7 +1,7 @@
<template>
<Portal>
<transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
<div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
<div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="$attrs" @click="onOverlayClick">
<template v-if="!$slots.message">
<div class="p-confirm-popup-content">
<i :class="iconClass" />
@ -35,7 +35,7 @@ export default {
return {
visible: false,
confirmation: null
}
};
},
target: null,
outsideClickListener: null,
@ -56,10 +56,12 @@ export default {
this.visible = true;
}
};
this.closeListener = () => {
this.visible = false;
this.confirmation = null;
};
ConfirmationEventBus.on('confirm', this.confirmListener);
ConfirmationEventBus.on('close', this.closeListener);
},
@ -68,10 +70,12 @@ export default {
ConfirmationEventBus.off('close', this.closeListener);
this.unbindOutsideClickListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
this.unbindResizeListener();
if (this.container) {
@ -122,6 +126,7 @@ export default {
if (containerOffset.left < targetOffset.left) {
arrowLeft = targetOffset.left - containerOffset.left;
}
this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) {
@ -137,6 +142,7 @@ export default {
this.alignOverlay();
}
};
document.addEventListener('click', this.outsideClickListener);
}
},
@ -169,6 +175,7 @@ export default {
this.visible = false;
}
};
window.addEventListener('resize', this.resizeListener);
}
},
@ -193,10 +200,13 @@ export default {
},
computed: {
containerClass() {
return ['p-confirm-popup p-component', {
return [
'p-confirm-popup p-component',
{
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}];
}
];
},
message() {
return this.confirmation ? this.confirmation.message : null;
@ -205,10 +215,10 @@ export default {
return ['p-confirm-popup-icon', this.confirmation ? this.confirmation.icon : null];
},
acceptLabel() {
return this.confirmation ? (this.confirmation.acceptLabel || this.$primevue.config.locale.accept) : null;
return this.confirmation ? this.confirmation.acceptLabel || this.$primevue.config.locale.accept : null;
},
rejectLabel() {
return this.confirmation ? (this.confirmation.rejectLabel || this.$primevue.config.locale.reject) : null;
return this.confirmation ? this.confirmation.rejectLabel || this.$primevue.config.locale.reject : null;
},
acceptIcon() {
return this.confirmation ? this.confirmation.acceptIcon : null;
@ -220,14 +230,14 @@ export default {
return ['p-confirm-popup-accept p-button-sm', this.confirmation ? this.confirmation.acceptClass : null];
},
rejectClass() {
return ['p-confirm-popup-reject p-button-sm', this.confirmation ? (this.confirmation.rejectClass || 'p-button-text') : null];
return ['p-confirm-popup-reject p-button-sm', this.confirmation ? this.confirmation.rejectClass || 'p-button-text' : null];
}
},
components: {
'CPButton': Button,
'Portal': Portal
}
CPButton: Button,
Portal: Portal
}
};
</script>
<style>
@ -254,17 +264,18 @@ export default {
}
.p-confirm-popup-enter-active {
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-confirm-popup-leave-active {
transition: opacity .1s linear;
transition: opacity 0.1s linear;
}
.p-confirm-popup:after, .p-confirm-popup:before {
.p-confirm-popup:after,
.p-confirm-popup:before {
bottom: 100%;
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
content: " ";
content: ' ';
height: 0;
width: 0;
position: absolute;
@ -281,7 +292,8 @@ export default {
margin-left: -10px;
}
.p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before {
.p-confirm-popup-flipped:after,
.p-confirm-popup-flipped:before {
bottom: auto;
top: 100%;
}
@ -291,7 +303,7 @@ export default {
}
.p-confirm-popup.p-confirm-popup-flipped:before {
border-bottom-color: transparent
border-bottom-color: transparent;
}
.p-confirm-popup .p-confirm-popup-content {

9
components/contextmenu/ContextMenu.d.ts vendored
View File

@ -49,8 +49,7 @@ export interface ContextMenuSlots {
}) => VNode[];
}
export declare type ContextMenuEmits = {
}
export declare type ContextMenuEmits = {};
declare class ContextMenu extends ClassComponent<ContextMenuProps, ContextMenuSlots, ContextMenuEmits> {
/**
@ -77,7 +76,7 @@ declare class ContextMenu extends ClassComponent<ContextMenuProps, ContextMenuSl
declare module '@vue/runtime-core' {
interface GlobalComponents {
ContextMenu: GlobalComponentConstructor<ContextMenu>
ContextMenu: GlobalComponentConstructor<ContextMenu>;
}
}
@ -88,11 +87,11 @@ declare module '@vue/runtime-core' {
*
* Helper API:
*
* - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
* - [MenuItem](https://www.primefaces.org/primevue/menumodel)
*
* Demos:
*
* - [ContextMenu](https://www.primefaces.org/primevue/showcase/#/contextmenu)
* - [ContextMenu](https://www.primefaces.org/primevue/contextmenu)
*
*/
export default ContextMenu;

13
components/contextmenu/ContextMenu.spec.js
View File

@ -31,7 +31,7 @@ describe('ContextMenu.vue', () => {
{
label: 'Video',
icon: 'pi pi-fw pi-video'
},
}
]
},
{
@ -66,8 +66,7 @@ describe('ContextMenu.vue', () => {
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
},
}
]
},
{
@ -76,13 +75,11 @@ describe('ContextMenu.vue', () => {
items: [
{
label: 'New',
icon:'pi pi-fw pi-user-plus',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon:'pi pi-fw pi-user-minus',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
@ -121,7 +118,7 @@ describe('ContextMenu.vue', () => {
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
},
}
]
},
{

32
components/contextmenu/ContextMenu.vue
View File

@ -1,7 +1,7 @@
<template>
<Portal :appendTo="appendTo">
<transition name="p-contextmenu" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
<div :ref="containerRef" :class="containerClass" v-if="visible" v-bind="$attrs">
<div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="$attrs">
<ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
</div>
</transition>
@ -62,6 +62,7 @@ export default {
if (this.container && this.autoZIndex) {
ZIndexUtils.clear(this.container);
}
this.container = null;
},
mounted() {
@ -72,17 +73,17 @@ export default {
methods: {
itemClick(event) {
const item = event.item;
if (item.command) {
item.command(event);
event.originalEvent.preventDefault();
}
this.hide();
},
toggle(event) {
if (this.visible)
this.hide();
else
this.show(event);
if (this.visible) this.hide();
else this.show(event);
},
onLeafClick() {
this.hide();
@ -91,10 +92,8 @@ export default {
this.pageX = event.pageX;
this.pageY = event.pageY;
if (this.visible)
this.position();
else
this.visible = true;
if (this.visible) this.position();
else this.visible = true;
event.stopPropagation();
event.preventDefault();
@ -157,6 +156,7 @@ export default {
this.hide();
}
};
document.addEventListener('click', this.outsideClickListener);
}
},
@ -173,6 +173,7 @@ export default {
this.hide();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
@ -203,17 +204,20 @@ export default {
},
computed: {
containerClass() {
return ['p-contextmenu p-component', {
return [
'p-contextmenu p-component',
{
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}]
}
];
}
},
components: {
'ContextMenuSub': ContextMenuSub,
'Portal': Portal
}
ContextMenuSub: ContextMenuSub,
Portal: Portal
}
};
</script>
<style>

82
components/contextmenu/ContextMenuSub.vue
View File

@ -1,28 +1,36 @@
<template>
<transition name="p-contextmenusub" @enter="onEnter">
<ul ref="container" :class="containerClass" role="menu" v-if="root ? true : parentActive">
<ul v-if="root ? true : parentActive" ref="container" :class="containerClass" role="menu">
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
@mouseenter="onItemMouseEnter($event, item)">
<li v-if="visible(item) && !item.separator" role="none" :class="getItemClass(item)" :style="item.style" @mouseenter="onItemMouseEnter($event, item)">
<template v-if="!template">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple role="menuitem">
<span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
<router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a v-ripple :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, { isActive, isExactActive })" role="menuitem">
<span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{ label(item) }}</span>
</a>
</router-link>
<a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)" v-ripple
:aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="disabled(item) ? null : '0'">
<span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
<a
v-else
v-ripple
:href="item.url"
:class="linkClass(item)"
:target="item.target"
@click="onItemClick($event, item)"
:aria-haspopup="item.items != null"
:aria-expanded="item === activeItem"
role="menuitem"
:tabindex="disabled(item) ? null : '0'"
>
<span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{ label(item) }}</span>
<span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
<span v-if="item.items" class="p-submenu-icon pi pi-angle-right"></span>
</a>
</template>
<component v-else :is="template" :item="item"></component>
<ContextMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
@leaf-click="onLeafClick" :parentActive="item === activeItem" :exact="exact" />
<ContextMenuSub v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :model="item.items" :template="template" @leaf-click="onLeafClick" :parentActive="item === activeItem" :exact="exact" />
</li>
<li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
<li v-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="['p-menu-separator', item.class]" :style="item.style" role="separator"></li>
</template>
</ul>
</transition>
@ -57,6 +65,11 @@ export default {
default: true
}
},
data() {
return {
activeItem: null
};
},
watch: {
parentActive(newValue) {
if (!newValue) {
@ -64,15 +77,11 @@ export default {
}
}
},
data() {
return {
activeItem: null
}
},
methods: {
onItemMouseEnter(event, item) {
if (this.disabled(item)) {
event.preventDefault();
return;
}
@ -81,6 +90,7 @@ export default {
onItemClick(event, item, navigate) {
if (this.disabled(item)) {
event.preventDefault();
return;
}
@ -92,10 +102,8 @@ export default {
}
if (item.items) {
if (this.activeItem && item === this.activeItem)
this.activeItem = null;
else
this.activeItem = item;
if (this.activeItem && item === this.activeItem) this.activeItem = null;
else this.activeItem = item;
}
if (!item.items) {
@ -115,42 +123,46 @@ export default {
},
position() {
const parentItem = this.$refs.container.parentElement;
const containerOffset = DomHandler.getOffset(this.$refs.container.parentElement)
const containerOffset = DomHandler.getOffset(this.$refs.container.parentElement);
const viewport = DomHandler.getViewport();
const sublistWidth = this.$refs.container.offsetParent ? this.$refs.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$refs.container);
const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
this.$refs.container.style.top = '0px';
if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) {
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
this.$refs.container.style.left = -1 * sublistWidth + 'px';
}
else {
} else {
this.$refs.container.style.left = itemOuterWidth + 'px';
}
},
getItemClass(item) {
return [
'p-menuitem', item.class, {
'p-menuitem',
item.class,
{
'p-menuitem-active': this.activeItem === item
}
]
];
},
linkClass(item, routerProps) {
return ['p-menuitem-link', {
return [
'p-menuitem-link',
{
'p-disabled': this.disabled(item),
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}];
}
];
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
},
label(item) {
return (typeof item.label === 'function' ? item.label() : item.label);
return typeof item.label === 'function' ? item.label() : item.label;
}
},
computed: {
@ -159,7 +171,7 @@ export default {
}
},
directives: {
'ripple': Ripple
}
ripple: Ripple
}
};
</script>

108
components/datatable/BodyCell.vue
View File

@ -4,29 +4,39 @@
</td>
<td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell">
<span v-if="responsiveLayout === 'stack'" class="p-column-title">{{ columnProp('header') }}</span>
<component :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" v-if="column.children && column.children.body && !d_editing" />
<component :is="column.children.editor" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorSaveCallback="editorSaveCallback" :editorCancelCallback="editorCancelCallback" v-else-if="column.children && column.children.editor && d_editing" />
<component :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" v-else-if="column.children && column.children.body && !column.children.editor && d_editing" />
<component v-if="column.children && column.children.body && !d_editing" :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" />
<component
v-else-if="column.children && column.children.editor && d_editing"
:is="column.children.editor"
:data="editingRowData"
:column="column"
:field="field"
:index="rowIndex"
:frozenRow="frozenRow"
:editorSaveCallback="editorSaveCallback"
:editorCancelCallback="editorCancelCallback"
/>
<component v-else-if="column.children && column.children.body && !column.children.editor && d_editing" :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" />
<template v-else-if="columnProp('selectionMode')">
<DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" v-if="columnProp('selectionMode') === 'single'" />
<DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox($event, rowIndex)" v-else-if="columnProp('selectionMode') ==='multiple'" />
<DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" />
<DTCheckbox v-else-if="columnProp('selectionMode') === 'multiple'" :value="rowData" :checked="selected" @change="toggleRowWithCheckbox($event, rowIndex)" />
</template>
<template v-else-if="columnProp('rowReorder')">
<i :class="['p-datatable-reorderablerow-handle', (columnProp('rowReorderIcon') || 'pi pi-bars')]"></i>
<i :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon') || 'pi pi-bars']"></i>
</template>
<template v-else-if="columnProp('expander')">
<button class="p-row-toggler p-link" @click="toggleRow" type="button" v-ripple>
<button v-ripple class="p-row-toggler p-link" @click="toggleRow" type="button">
<span :class="rowTogglerIcon"></span>
</button>
</template>
<template v-else-if="editMode === 'row' && columnProp('rowEditor')">
<button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button" v-ripple>
<button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" @click="onRowEditInit" type="button">
<span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
</button>
<button class="p-row-editor-save p-link" v-if="d_editing" @click="onRowEditSave" type="button" v-ripple>
<button v-if="d_editing" v-ripple class="p-row-editor-save p-link" @click="onRowEditSave" type="button">
<span class="p-row-editor-save-icon pi pi-fw pi-check"></span>
</button>
<button class="p-row-editor-cancel p-link" v-if="d_editing" @click="onRowEditCancel" type="button" v-ripple>
<button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" @click="onRowEditCancel" type="button">
<span class="p-row-editor-cancel-icon pi pi-fw pi-times"></span>
</button>
</template>
@ -43,8 +53,7 @@ import Ripple from 'primevue/ripple';
export default {
name: 'BodyCell',
emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel',
'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
props: {
rowData: {
type: Object,
@ -102,14 +111,14 @@ export default {
return {
d_editing: this.editing,
styleObject: {}
}
};
},
watch: {
editing(newValue) {
this.d_editing = newValue;
},
'$data.d_editing': function (newValue) {
this.$emit('editing-meta-change', {data: this.rowData, field: (this.field || `field_${this.index}`), index: this.rowIndex, editing: newValue});
this.$emit('editing-meta-change', { data: this.rowData, field: this.field || `field_${this.index}`, index: this.rowIndex, editing: newValue });
}
},
mounted() {
@ -124,6 +133,7 @@ export default {
if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) {
const focusableEl = DomHandler.getFirstFocusableElement(this.$el);
focusableEl && focusableEl.focus();
}
},
@ -161,6 +171,7 @@ export default {
if (!this.selfClick) {
this.completeEdit(event, 'outside');
}
this.selfClick = false;
};
@ -193,7 +204,8 @@ export default {
if (this.$el && this.$el.contains(e.target)) {
this.selfClick = true;
}
}
};
OverlayEventBus.on('overlay-click', this.overlayEventListener);
}
}
@ -235,10 +247,8 @@ export default {
case 9:
this.completeEdit(event, 'tab');
if (event.shiftKey)
this.moveToPreviousCell(event);
else
this.moveToNextCell(event);
if (event.shiftKey) this.moveToPreviousCell(event);
else this.moveToNextCell(event);
break;
}
}
@ -264,13 +274,13 @@ export default {
findCell(element) {
if (element) {
let cell = element;
while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) {
cell = cell.parentElement;
}
return cell;
}
else {
} else {
return null;
}
},
@ -279,18 +289,16 @@ export default {
if (!prevCell) {
let previousRow = cell.parentElement.previousElementSibling;
if (previousRow) {
prevCell = previousRow.lastElementChild;
}
}
if (prevCell) {
if (DomHandler.hasClass(prevCell, 'p-editable-column'))
return prevCell;
else
return this.findPreviousEditableColumn(prevCell);
}
else {
if (DomHandler.hasClass(prevCell, 'p-editable-column')) return prevCell;
else return this.findPreviousEditableColumn(prevCell);
} else {
return null;
}
},
@ -299,23 +307,21 @@ export default {
if (!nextCell) {
let nextRow = cell.parentElement.nextElementSibling;
if (nextRow) {
nextCell = nextRow.firstElementChild;
}
}
if (nextCell) {
if (DomHandler.hasClass(nextCell, 'p-editable-column'))
return nextCell;
else
return this.findNextEditableColumn(nextCell);
}
else {
if (DomHandler.hasClass(nextCell, 'p-editable-column')) return nextCell;
else return this.findNextEditableColumn(nextCell);
} else {
return null;
}
},
isEditingCellValid() {
return (DomHandler.find(this.$el, '.p-invalid').length === 0);
return DomHandler.find(this.$el, '.p-invalid').length === 0;
},
onRowEditInit(event) {
this.$emit('row-edit-init', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
@ -347,20 +353,24 @@ export default {
updateStickyPosition() {
if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
}
else {
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
}
}
@ -377,12 +387,16 @@ export default {
return this.columnProp('field');
},
containerClass() {
return [this.columnProp('bodyClass'), this.columnProp('class'), {
return [
this.columnProp('bodyClass'),
this.columnProp('class'),
{
'p-selection-column': this.columnProp('selectionMode') != null,
'p-editable-column': this.isEditable(),
'p-cell-editing': this.d_editing,
'p-frozen-column': this.columnProp('frozen')
}];
}
];
},
containerStyle() {
let bodyStyle = this.columnProp('bodyStyle');
@ -395,23 +409,27 @@ export default {
},
loadingOptions() {
const getLoaderOptions = this.getVirtualScrollerProp('getLoaderOptions');
return getLoaderOptions && getLoaderOptions(this.rowIndex, {
return (
getLoaderOptions &&
getLoaderOptions(this.rowIndex, {
cellIndex: this.index,
cellFirst: this.index === 0,
cellLast: this.index === (this.getVirtualScrollerProp('columns').length - 1),
cellLast: this.index === this.getVirtualScrollerProp('columns').length - 1,
cellEven: this.index % 2 === 0,
cellOdd: this.index % 2 !== 0,
column: this.column,
field: this.field
});
})
);
}
},
components: {
'DTRadioButton': RowRadioButton,
'DTCheckbox': RowCheckbox
DTRadioButton: RowRadioButton,
DTCheckbox: RowCheckbox
},
directives: {
'ripple': Ripple
}
ripple: Ripple
}
};
</script>

151
components/datatable/ColumnFilter.vue
View File

@ -1,40 +1,73 @@
<template>
<div :class="containerClass">
<div class="p-fluid p-column-filter-element" v-if="display === 'row'" >
<div v-if="display === 'row'" class="p-fluid p-column-filter-element">
<component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
</div>
<button ref="icon" v-if="showMenuButton" type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" :aria-expanded="overlayVisible"
<button
v-if="showMenuButton"
ref="icon"
type="button"
class="p-column-filter-menu-button p-link"
aria-haspopup="true"
:aria-expanded="overlayVisible"
:class="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
@click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
@click="toggleMenu()"
@keydown="onToggleButtonKeyDown($event)"
>
<span class="pi pi-filter-icon pi-filter"></span>
</button>
<button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
<Portal>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick" @mousedown="onContentMouseDown">
<div v-if="overlayVisible" :ref="overlayRef" :class="overlayClass" @keydown.escape="onEscape" @click="onContentClick" @mousedown="onContentMouseDown">
<component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
<template v-if="display === 'row'">
<ul class="p-column-filter-row-items">
<li class="p-column-filter-row-item" v-for="(matchMode,i) of matchModes" :key="matchMode.label"
@click="onRowMatchModeChange(matchMode.value)" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
:class="{'p-highlight': isRowMatchModeSelected(matchMode.value)}" :tabindex="i === 0 ? '0' : null">{{matchMode.label}}</li>
<li
v-for="(matchMode, i) of matchModes"
:key="matchMode.label"
class="p-column-filter-row-item"
@click="onRowMatchModeChange(matchMode.value)"
@keydown="onRowMatchModeKeyDown($event)"
@keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
:class="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
:tabindex="i === 0 ? '0' : null"
>
{{ matchMode.label }}
</li>
<li class="p-column-filter-separator"></li>
<li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()">{{ noFilterLabel }}</li>
</ul>
</template>
<template v-else>
<div class="p-column-filter-operator" v-if="isShowOperator">
<div v-if="isShowOperator" class="p-column-filter-operator">
<CFDropdown :options="operatorOptions" :modelValue="operator" @update:modelValue="onOperatorChange($event)" class="p-column-filter-operator-dropdown" optionLabel="label" optionValue="value"></CFDropdown>
</div>
<div class="p-column-filter-constraints">
<div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" class="p-column-filter-constraint">
<CFDropdown v-if="isShowMatchModes" :options="matchModes" :modelValue="fieldConstraint.matchMode" optionLabel="label" optionValue="value"
@update:modelValue="onMenuMatchModeChange($event, i)" class="p-column-filter-matchmode-dropdown"></CFDropdown>
<CFDropdown
v-if="isShowMatchModes"
:options="matchModes"
:modelValue="fieldConstraint.matchMode"
optionLabel="label"
optionValue="value"
@update:modelValue="onMenuMatchModeChange($event, i)"
class="p-column-filter-matchmode-dropdown"
></CFDropdown>
<component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
<div>
<CFButton v-if="showRemoveIcon" type="button" icon="pi pi-trash" class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm" @click="removeConstraint(i)" :label="removeRuleButtonLabel"></CFButton>
<CFButton
v-if="showRemoveIcon"
type="button"
icon="pi pi-trash"
class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm"
@click="removeConstraint(i)"
:label="removeRuleButtonLabel"
></CFButton>
</div>
</div>
</div>
<div class="p-column-filter-add-rule" v-if="isShowAddConstraint">
<div v-if="isShowAddConstraint" class="p-column-filter-add-rule">
<CFButton type="button" :label="addRuleButtonLabel" icon="pi pi-plus" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()"></CFButton>
</div>
<div class="p-column-filter-buttonbar">
@ -140,7 +173,7 @@ export default {
overlayVisible: false,
defaultMatchMode: null,
defaultOperator: null
}
};
},
overlay: null,
selfClick: false,
@ -159,11 +192,11 @@ export default {
mounted() {
if (this.filters && this.filters[this.field]) {
let fieldFilters = this.filters[this.field];
if (fieldFilters.operator) {
this.defaultMatchMode = fieldFilters.constraints[0].matchMode;
this.defaultOperator = fieldFilters.operator;
}
else {
} else {
this.defaultMatchMode = this.filters[this.field].matchMode;
}
}
@ -171,12 +204,12 @@ export default {
methods: {
clearFilter() {
let _filters = { ...this.filters };
if (_filters[this.field].operator) {
_filters[this.field].constraints.splice(1);
_filters[this.field].operator = this.defaultOperator;
_filters[this.field].constraints[0] = { value: null, matchMode: this.defaultMatchMode };
}
else {
} else {
_filters[this.field].value = null;
_filters[this.field].matchMode = this.defaultMatchMode;
}
@ -194,11 +227,10 @@ export default {
hasFilter() {
if (this.filtersStore) {
let fieldFilter = this.filtersStore[this.field];
if (fieldFilter) {
if (fieldFilter.operator)
return !this.isFilterBlank(fieldFilter.constraints[0].value);
else
return !this.isFilterBlank(fieldFilter.value);
if (fieldFilter.operator) return !this.isFilterBlank(fieldFilter.constraints[0].value);
else return !this.isFilterBlank(fieldFilter.value);
}
}
@ -209,11 +241,10 @@ export default {
},
isFilterBlank(filter) {
if (filter !== null && filter !== undefined) {
if ((typeof filter === 'string' && filter.trim().length == 0) || (filter instanceof Array && filter.length == 0))
return true;
else
return false;
if ((typeof filter === 'string' && filter.trim().length == 0) || (filter instanceof Array && filter.length == 0)) return true;
else return false;
}
return true;
},
toggleMenu() {
@ -229,26 +260,30 @@ export default {
case 'ArrowDown':
if (this.overlayVisible) {
let focusable = DomHandler.getFocusableElements(this.overlay);
if (focusable) {
focusable[0].focus();
}
event.preventDefault();
}
else if (event.altKey) {
} else if (event.altKey) {
this.overlayVisible = true;
event.preventDefault();
}
break;
}
},
onEscape() {
this.overlayVisible = false;
if (this.$refs.icon) {
this.$refs.icon.focus();
}
},
onRowMatchModeChange(matchMode) {
let _filters = { ...this.filters };
_filters[this.field].matchMode = matchMode;
this.$emit('matchmode-change', { field: this.field, matchMode: matchMode });
this.$emit('filter-change', _filters);
@ -261,6 +296,7 @@ export default {
switch (event.key) {
case 'ArrowDown':
var nextItem = this.findNextItem(item);
if (nextItem) {
item.removeAttribute('tabindex');
nextItem.tabIndex = '0';
@ -272,6 +308,7 @@ export default {
case 'ArrowUp':
var prevItem = this.findPrevItem(item);
if (prevItem) {
item.removeAttribute('tabindex');
prevItem.tabIndex = '0';
@ -283,20 +320,23 @@ export default {
}
},
isRowMatchModeSelected(matchMode) {
return (this.filters[this.field]).matchMode === matchMode;
return this.filters[this.field].matchMode === matchMode;
},
onOperatorChange(value) {
let _filters = { ...this.filters };
_filters[this.field].operator = value;
this.$emit('filter-change', _filters);
this.$emit('operator-change', { field: this.field, operator: value });
if (!this.showApplyButton) {
this.$emit('filter-apply');
}
},
onMenuMatchModeChange(value, index) {
let _filters = { ...this.filters };
_filters[this.field].constraints[index].matchMode = value;
this.$emit('matchmode-change', { field: this.field, matchMode: value, index: index });
@ -307,6 +347,7 @@ export default {
addConstraint() {
let _filters = { ...this.filters };
let newConstraint = { value: null, matchMode: this.defaultMatchMode };
_filters[this.field].constraints.push(newConstraint);
this.$emit('constraint-add', { field: this.field, constraing: newConstraint });
this.$emit('filter-change', _filters);
@ -318,6 +359,7 @@ export default {
removeConstraint(index) {
let _filters = { ...this.filters };
let removedConstraint = _filters[this.field].constraints.splice(index, 1);
this.$emit('constraint-remove', { field: this.field, constraing: removedConstraint });
this.$emit('filter-change', _filters);
@ -331,18 +373,14 @@ export default {
findNextItem(item) {
let nextItem = item.nextElementSibling;
if (nextItem)
return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;
else
return item.parentElement.firstElementChild;
if (nextItem) return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;
else return item.parentElement.firstElementChild;
},
findPrevItem(item) {
let prevItem = item.previousElementSibling;
if (prevItem)
DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;
else
return item.parentElement.lastElementChild;
if (prevItem) DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;
else return item.parentElement.lastElementChild;
},
hide() {
this.overlayVisible = false;
@ -362,6 +400,7 @@ export default {
if (this.filterMenuStyle) {
DomHandler.applyStyle(this.overlay, this.filterMenuStyle);
}
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
DomHandler.absolutePosition(this.overlay, this.$refs.icon);
this.bindOutsideClickListener();
@ -372,7 +411,8 @@ export default {
if (!this.isOutsideClicked(e.target)) {
this.selfClick = true;
}
}
};
OverlayEventBus.on('overlay-click', this.overlayEventListener);
},
onOverlayLeave() {
@ -404,8 +444,10 @@ export default {
if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event.target)) {
this.overlayVisible = false;
}
this.selfClick = false;
};
document.addEventListener('click', this.outsideClickListener);
}
},
@ -439,6 +481,7 @@ export default {
this.hide();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
@ -451,27 +494,35 @@ export default {
},
computed: {
containerClass() {
return ['p-column-filter p-fluid', {
return [
'p-column-filter p-fluid',
{
'p-column-filter-row': this.display === 'row',
'p-column-filter-menu': this.display === 'menu'
}];
}
];
},
overlayClass() {
return [this.filterMenuClass, {
return [
this.filterMenuClass,
{
'p-column-filter-overlay p-component p-fluid': true,
'p-column-filter-overlay-menu': this.display === 'menu',
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}];
}
];
},
showMenuButton() {
return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
},
matchModes() {
return this.matchModeOptions ||
this.$primevue.config.filterMatchModeOptions[this.type].map(key => {
return {label: this.$primevue.config.locale[key], value: key}
});
return (
this.matchModeOptions ||
this.$primevue.config.filterMatchModeOptions[this.type].map((key) => {
return { label: this.$primevue.config.locale[key], value: key };
})
);
},
isShowMatchModes() {
return this.type !== 'boolean' && this.showMatchModes && this.matchModes;
@ -504,7 +555,7 @@ export default {
return this.$primevue.config.locale.addRule;
},
isShowAddConstraint() {
return this.showAddButton && this.filters[this.field].operator && (this.fieldConstraints && this.fieldConstraints.length < this.maxConstraints);
return this.showAddButton && this.filters[this.field].operator && this.fieldConstraints && this.fieldConstraints.length < this.maxConstraints;
},
clearButtonLabel() {
return this.$primevue.config.locale.clear;
@ -514,9 +565,9 @@ export default {
}
},
components: {
'CFDropdown': Dropdown,
'CFButton': Button,
'Portal': Portal
}
CFDropdown: Dropdown,
CFButton: Button,
Portal: Portal
}
};
</script>

18
components/datatable/DataTable.d.ts vendored
View File

@ -907,17 +907,17 @@ export declare type DataTableEmits = {
* Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.
* @param {DataTablePageEvent} event - Custom page event.
*/
'page': (event: DataTablePageEvent) => void;
page: (event: DataTablePageEvent) => void;
/**
* Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.
* @param {DataTableSortEvent} event - Custom sort event.
*/
'sort': (event: DataTableSortEvent) => void;
sort: (event: DataTableSortEvent) => void;
/**
* Event to emit after filtering, not triggered in lazy mode.
* @param {DataTableFilterEvent} event - Custom filter event.
*/
'filter': (event: DataTableFilterEvent) => void;
filter: (event: DataTableFilterEvent) => void;
/**
* Callback to invoke after filtering, sorting, pagination and cell editing to pass the rendered value.
* @param {*} value - Value displayed by the table.
@ -1038,7 +1038,7 @@ export declare type DataTableEmits = {
* @param {DataTableStateEvent} event - Custom state event.
*/
'state-save': (event: DataTableStateEvent) => void;
}
};
declare class DataTable extends ClassComponent<DataTableProps, DataTableSlots, DataTableEmits> {
/**
@ -1051,7 +1051,7 @@ declare class DataTable extends ClassComponent<DataTableProps, DataTableSlots, D
declare module '@vue/runtime-core' {
interface GlobalComponents {
DataTable: GlobalComponentConstructor<DataTable>
DataTable: GlobalComponentConstructor<DataTable>;
}
}
@ -1066,10 +1066,10 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [DataTable](https://www.primefaces.org/primevue/showcase/#/datatable)
* - [Edit](https://www.primefaces.org/primevue/showcase/#/datatable/edit)
* - [Sort](https://www.primefaces.org/primevue/showcase/#/datatable/sort)
* - [Filter](https://www.primefaces.org/primevue/showcase/#/datatable/filter)
* - [DataTable](https://www.primefaces.org/primevue/datatable)
* - [Edit](https://www.primefaces.org/primevue/datatable/edit)
* - [Sort](https://www.primefaces.org/primevue/datatable/sort)
* - [Filter](https://www.primefaces.org/primevue/datatable/filter)
* etc.
*
*/

260
components/datatable/DataTable.spec.js
View File

@ -11,72 +11,72 @@ window.URL.createObjectURL = function() {};
const smallData = [
{
"id": "1000",
"code": "vbb124btr",
"name": "Game Controller"
id: '1000',
code: 'vbb124btr',
name: 'Game Controller'
},
{
"id": "1001",
"code": "nvklal433",
"name": "Black Watch"
id: '1001',
code: 'nvklal433',
name: 'Black Watch'
},
{
"id": "1002",
"code": "zz21cz3c1",
"name": "Blue Band"
id: '1002',
code: 'zz21cz3c1',
name: 'Blue Band'
}
];
const data = [
{
"id": "1000",
"code": "vbb124btr",
"name": "Game Controller"
id: '1000',
code: 'vbb124btr',
name: 'Game Controller'
},
{
"id": "1001",
"code": "nvklal433",
"name": "Black Watch"
id: '1001',
code: 'nvklal433',
name: 'Black Watch'
},
{
"id": "1002",
"code": "zz21cz3c1",
"name": "Blue Band"
id: '1002',
code: 'zz21cz3c1',
name: 'Blue Band'
},
{
"id": "1003",
"code": "244wgerg2",
"name": "Blue T-Shirt"
id: '1003',
code: '244wgerg2',
name: 'Blue T-Shirt'
},
{
"id": "1004",
"code": "h456wer53",
"name": "Bracelet"
id: '1004',
code: 'h456wer53',
name: 'Bracelet'
},
{
"id": "1005",
"code": "cm230f032",
"name": "Gaming Set"
id: '1005',
code: 'cm230f032',
name: 'Gaming Set'
},
{
"id": "1006",
"code": "bib36pfvm",
"name": "Chakra Bracelet"
id: '1006',
code: 'bib36pfvm',
name: 'Chakra Bracelet'
},
{
"id": "1007",
"code": "mbvjkgip5",
"name": "Galaxy Earrings"
id: '1007',
code: 'mbvjkgip5',
name: 'Galaxy Earrings'
},
{
"id": "1008",
"code": "f230fh0g3",
"name": "Bamboo Watch"
id: '1008',
code: 'f230fh0g3',
name: 'Bamboo Watch'
},
{
"id": "1009",
"code": "av2231fwg",
"name": "Brown Purse"
id: '1009',
code: 'av2231fwg',
name: 'Brown Purse'
}
];
@ -133,7 +133,6 @@ describe('DataTable.vue', () => {
expect(rows[0].findAll('td').length).toEqual(3);
});
// table templating
it('should have header template', () => {
expect(wrapper.find('.p-datatable-header').exists()).toBe(true);
@ -173,10 +172,8 @@ describe('DataTable.vue', () => {
expect(wrapper.find('.p-paginator-right-content').text()).toBe('Paginator End Templating');
});
// column templating
// column grouping
it('should exist', () => {
wrapper = mount({
@ -216,7 +213,7 @@ describe('DataTable.vue', () => {
data() {
return {
sales: null
}
};
},
created() {
this.sales = [
@ -233,6 +230,7 @@ describe('DataTable.vue', () => {
computed: {
lastYearTotal() {
let total = 0;
for (let sale of this.sales) {
total += sale.lastYearProfit;
}
@ -241,6 +239,7 @@ describe('DataTable.vue', () => {
},
thisYearTotal() {
let total = 0;
for (let sale of this.sales) {
total += sale.thisYearProfit;
}
@ -281,7 +280,6 @@ describe('DataTable.vue', () => {
expect(footerRows[0].findAll('td')[2].text()).toEqual('This Year Total');
});
// sorting
it('should single sort', async () => {
wrapper = mount(DataTable, {
@ -422,10 +420,9 @@ describe('DataTable.vue', () => {
expect(sortableTH.attributes()['aria-sort']).toBe('none');
});
// filtering
it('should filtered globally', async () => {
await wrapper.setProps({ filters: { 'global': {value: 'b', matchMode: FilterMatchMode.STARTS_WITH} }});
await wrapper.setProps({ filters: { global: { value: 'b', matchMode: FilterMatchMode.STARTS_WITH } } });
await wrapper.vm.filter(smallData);
@ -433,10 +430,7 @@ describe('DataTable.vue', () => {
});
it('should filtered with menu display', async () => {
await wrapper.setProps({ filters: { 'name': {value: 'b', matchMode: FilterMatchMode.STARTS_WITH} },
filterDisplay: 'menu',
globalFilterFields: ['name']
});
await wrapper.setProps({ filters: { name: { value: 'b', matchMode: FilterMatchMode.STARTS_WITH } }, filterDisplay: 'menu', globalFilterFields: ['name'] });
await wrapper.vm.filter(smallData);
@ -445,10 +439,7 @@ describe('DataTable.vue', () => {
});
it('should filtered with row display', async () => {
await wrapper.setProps({ filters: { 'name': {value: 'b', matchMode: FilterMatchMode.STARTS_WITH} },
filterDisplay: 'row',
globalFilterFields: ['name']
});
await wrapper.setProps({ filters: { name: { value: 'b', matchMode: FilterMatchMode.STARTS_WITH } }, filterDisplay: 'row', globalFilterFields: ['name'] });
await wrapper.vm.filter(smallData);
@ -635,7 +626,6 @@ describe('DataTable.vue', () => {
expect(wrapper.emitted()['update:selection'][0][0]).toEqual([]);
});
// scrolling
it('should scrolling', async () => {
await wrapper.setProps({ scrollable: true });
@ -697,10 +687,8 @@ describe('DataTable.vue', () => {
// expect(wrapper.findAll('td.p-frozen-column')[0].attributes().style).toBe('left: 0px;');
});
// lazy loading
// row expansion
it('should have row toggler', () => {
expect(wrapper.findAll('.p-row-toggler').length).toBe(3);
@ -724,7 +712,6 @@ describe('DataTable.vue', () => {
expect(wrapper.emitted()['row-collapse'][0][0].data).toEqual(smallData[0]);
});
// editing
// cell editing
@ -799,10 +786,10 @@ describe('DataTable.vue', () => {
}
});
await wrapper.vm.onRowEditSave({data: { "id": "9999", "code": "vbb124btr", "name": "Game Controller"}});
await wrapper.vm.onRowEditSave({ data: { id: '9999', code: 'vbb124btr', name: 'Game Controller' } });
expect(wrapper.emitted()['update:editingRows'][0][0]).toEqual([]);
expect(wrapper.emitted()['row-edit-save'][0][0].data).toEqual({ "id": "9999", "code": "vbb124btr", "name": "Game Controller"});
expect(wrapper.emitted()['row-edit-save'][0][0].data).toEqual({ id: '9999', code: 'vbb124btr', name: 'Game Controller' });
});
it('should cancel row editing', async () => {
@ -841,7 +828,6 @@ describe('DataTable.vue', () => {
expect(wrapper.emitted()['row-edit-cancel'][0][0].data).toEqual(smallData[0]);
});
// column resize
it('should fit mode expanding exists', () => {
wrapper = mount(DataTable, {
@ -1032,7 +1018,6 @@ describe('DataTable.vue', () => {
expect(wrapper.find('.p-column-resizer-helper').attributes().style).toContain('display: none;');
});
// column reorder
it('should reorder columns', async () => {
await wrapper.setProps({ reorderableColumns: true });
@ -1041,7 +1026,6 @@ describe('DataTable.vue', () => {
expect(wrapper.find('.p-datatable-reorder-indicator-down').exists()).toBe(true);
});
// row reorder
it('should exist', () => {
wrapper = mount(DataTable, {
@ -1065,7 +1049,6 @@ describe('DataTable.vue', () => {
expect(wrapper.findAll('.p-datatable-reorderablerow-handle').length).toBe(3);
});
// row group
// subheader grouping
it('should exist', () => {
@ -1169,81 +1152,81 @@ describe('DataTable.vue', () => {
props: {
value: [
{
"id":1000,
"name":"James Butt",
"country":{
"name":"Algeria",
"code":"dz"
id: 1000,
name: 'James Butt',
country: {
name: 'Algeria',
code: 'dz'
},
"company":"Benton, John B Jr",
"representative":{
"name":"Ioni Bowcher",
"image":"ionibowcher.png"
company: 'Benton, John B Jr',
representative: {
name: 'Ioni Bowcher',
image: 'ionibowcher.png'
}
},
{
"id":1001,
"name":"Josephine Darakjy",
"country":{
"name":"Egypt",
"code":"eg"
id: 1001,
name: 'Josephine Darakjy',
country: {
name: 'Egypt',
code: 'eg'
},
"company":"Chanay, Jeffrey A Esq",
"representative":{
"name":"Amy Elsner",
"image":"amyelsner.png"
company: 'Chanay, Jeffrey A Esq',
representative: {
name: 'Amy Elsner',
image: 'amyelsner.png'
}
},
{
"id":1013,
"name":"Graciela Ruta",
"country":{
"name":"Chile",
"code":"cl"
id: 1013,
name: 'Graciela Ruta',
country: {
name: 'Chile',
code: 'cl'
},
"company":"Buckley Miller & Wright",
"representative":{
"name":"Amy Elsner",
"image":"amyelsner.png"
company: 'Buckley Miller & Wright',
representative: {
name: 'Amy Elsner',
image: 'amyelsner.png'
}
},
{
"id":1021,
"name":"Veronika Inouye",
"country":{
"name":"Ecuador",
"code":"ec"
id: 1021,
name: 'Veronika Inouye',
country: {
name: 'Ecuador',
code: 'ec'
},
"company":"C 4 Network Inc",
"representative":{
"name":"Ioni Bowcher",
"image":"ionibowcher.png"
company: 'C 4 Network Inc',
representative: {
name: 'Ioni Bowcher',
image: 'ionibowcher.png'
}
},
{
"id":1026,
"name":"Chanel Caudy",
"country":{
"name":"Argentina",
"code":"ar"
id: 1026,
name: 'Chanel Caudy',
country: {
name: 'Argentina',
code: 'ar'
},
"company":"Professional Image Inc",
"representative":{
"name":"Ioni Bowcher",
"image":"ionibowcher.png"
company: 'Professional Image Inc',
representative: {
name: 'Ioni Bowcher',
image: 'ionibowcher.png'
}
},
{
"id":1027,
"name":"Ezekiel Chui",
"country":{
"name":"Ireland",
"code":"ie"
id: 1027,
name: 'Ezekiel Chui',
country: {
name: 'Ireland',
code: 'ie'
},
"company":"Sider, Donald C Esq",
"representative":{
"name":"Amy Elsner",
"image":"amyelsner.png"
company: 'Sider, Donald C Esq',
representative: {
name: 'Amy Elsner',
image: 'amyelsner.png'
}
}
],
@ -1294,34 +1277,34 @@ describe('DataTable.vue', () => {
props: {
value: [
{
"id": "1000",
"code": "vbb124btr",
"name": "Game Controller"
id: '1000',
code: 'vbb124btr',
name: 'Game Controller'
},
{
"id": "1001",
"code": "nvklal433",
"name": "Black Watch"
id: '1001',
code: 'nvklal433',
name: 'Black Watch'
},
{
"id": "1002",
"code": "zz21cz3c1",
"name": "Blue Band"
id: '1002',
code: 'zz21cz3c1',
name: 'Blue Band'
},
{
"id": "1003",
"code": "vbb124btrvbb124btr",
"name": "Game Controller"
id: '1003',
code: 'vbb124btrvbb124btr',
name: 'Game Controller'
},
{
"id": "1004",
"code": "nvklal433nvklal433",
"name": "Black Watch"
id: '1004',
code: 'nvklal433nvklal433',
name: 'Black Watch'
},
{
"id": "1006",
"code": "zz21cz3c1zz21cz3c1",
"name": "Blue Band"
id: '1006',
code: 'zz21cz3c1zz21cz3c1',
name: 'Blue Band'
}
],
rowGroupMode: 'rowspan',
@ -1353,7 +1336,6 @@ describe('DataTable.vue', () => {
expect(wrapper.findAll('.p-datatable-tbody > tr')[4].findAll('td')[1].attributes().rowspan).toBe('2');
});
// export
it('should export table', async () => {
const exportCSV = jest.spyOn(wrapper.vm, 'exportCSV');
@ -1363,7 +1345,6 @@ describe('DataTable.vue', () => {
expect(exportCSV).toHaveBeenCalled();
});
// state
it('should get storage', async () => {
await wrapper.setProps({ stateStorage: 'session', stateKey: 'dt-state-demo-session', paginator: true });
@ -1393,10 +1374,8 @@ describe('DataTable.vue', () => {
expect(wrapper.emitted()['state-save'][0]).not.toBeNull();
});
// contextmenu
// responsive
it('should have stack layout', () => {
expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-responsive-stack');
@ -1408,6 +1387,5 @@ describe('DataTable.vue', () => {
expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-responsive-scroll');
});
// row styling
});

660
components/datatable/DataTable.vue
View File

File diff suppressed because it is too large Load Diff

25
components/datatable/FooterCell.vue
View File

@ -1,7 +1,6 @@
<template>
<td :style="containerStyle" :class="containerClass" role="cell"
:colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')">
<component :is="column.children.footer" :column="column" v-if="column.children && column.children.footer"/>
<td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')">
<component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
{{ columnProp('footer') }}
</td>
</template>
@ -20,7 +19,7 @@ export default {
data() {
return {
styleObject: {}
}
};
},
mounted() {
if (this.columnProp('frozen')) {
@ -39,20 +38,24 @@ export default {
updateStickyPosition() {
if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
}
this.styleObject.right = right + 'px';
}
else {
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
}
this.styleObject.left = left + 'px';
}
}
@ -60,9 +63,13 @@ export default {
},
computed: {
containerClass() {
return [this.columnProp('footerClass'), this.columnProp('class'), {
return [
this.columnProp('footerClass'),
this.columnProp('class'),
{
'p-frozen-column': this.columnProp('frozen')
}];
}
];
},
containerStyle() {
let bodyStyle = this.columnProp('footerStyle');
@ -71,5 +78,5 @@ export default {
return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
}
}
}
};
</script>

141
components/datatable/HeaderCell.vue
View File

@ -1,23 +1,57 @@
<template>
<th :style="containerStyle" :class="containerClass" :tabindex="columnProp('sortable') ? '0' : null" role="cell"
@click="onClick" @keydown="onKeyDown" @mousedown="onMouseDown"
@dragstart="onDragStart" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop"
:colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" :aria-sort="ariaSort">
<span class="p-column-resizer" @mousedown="onResizeStart" v-if="resizableColumns && !columnProp('frozen')"></span>
<th
:style="containerStyle"
:class="containerClass"
:tabindex="columnProp('sortable') ? '0' : null"
role="cell"
@click="onClick"
@keydown="onKeyDown"
@mousedown="onMouseDown"
@dragstart="onDragStart"
@dragover="onDragOver"
@dragleave="onDragLeave"
@drop="onDrop"
:colspan="columnProp('colspan')"
:rowspan="columnProp('rowspan')"
:aria-sort="ariaSort"
>
<span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
<div class="p-column-header-content">
<component :is="column.children.header" :column="column" v-if="column.children && column.children.header"/>
<span class="p-column-title" v-if="columnProp('header')">{{columnProp('header')}}</span>
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>
<span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" v-if="columnProp('selectionMode') ==='multiple' && filterDisplay !== 'row'" />
<DTColumnFilter v-if="filterDisplay === 'menu' && column.children && column.children.filter" :field="columnProp('filterField')||columnProp('field')" :type="columnProp('dataType')" display="menu"
:showMenu="columnProp('showFilterMenu')" :filterElement="column.children && column.children.filter"
:filterHeaderTemplate="column.children && column.children.filterheader" :filterFooterTemplate="column.children && column.children.filterfooter"
:filterClearTemplate="column.children && column.children.filterclear" :filterApplyTemplate="column.children && column.children.filterapply"
:filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp('filterMenuStyle')" :filterMenuClass="columnProp('filterMenuClass')"
:showOperator="columnProp('showFilterOperator')" :showClearButton="columnProp('showClearButton')" :showApplyButton="columnProp('showApplyButton')"
:showMatchModes="columnProp('showFilterMatchModes')" :showAddButton="columnProp('showAddButton')" :matchModeOptions="columnProp('filterMatchModeOptions')" :maxConstraints="columnProp('maxConstraints')"
@operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
<DTHeaderCheckbox v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'" :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" />
<DTColumnFilter
v-if="filterDisplay === 'menu' && column.children && column.children.filter"
:field="columnProp('filterField') || columnProp('field')"
:type="columnProp('dataType')"
display="menu"
:showMenu="columnProp('showFilterMenu')"
:filterElement="column.children && column.children.filter"
:filterHeaderTemplate="column.children && column.children.filterheader"
:filterFooterTemplate="column.children && column.children.filterfooter"
:filterClearTemplate="column.children && column.children.filterclear"
:filterApplyTemplate="column.children && column.children.filterapply"
:filters="filters"
:filtersStore="filtersStore"
@filter-change="$emit('filter-change', $event)"
@filter-apply="$emit('filter-apply')"
:filterMenuStyle="columnProp('filterMenuStyle')"
:filterMenuClass="columnProp('filterMenuClass')"
:showOperator="columnProp('showFilterOperator')"
:showClearButton="columnProp('showClearButton')"
:showApplyButton="columnProp('showApplyButton')"
:showMatchModes="columnProp('showFilterMatchModes')"
:showAddButton="columnProp('showAddButton')"
:matchModeOptions="columnProp('filterMatchModeOptions')"
:maxConstraints="columnProp('maxConstraints')"
@operator-change="$emit('operator-change', $event)"
@matchmode-change="$emit('matchmode-change', $event)"
@constraint-add="$emit('constraint-add', $event)"
@constraint-remove="$emit('constraint-remove', $event)"
@apply-click="$emit('apply-click', $event)"
/>
</div>
</th>
</template>
@ -29,9 +63,24 @@ import ColumnFilter from './ColumnFilter.vue';
export default {
name: 'HeaderCell',
emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
'column-resizestart', 'checkbox-change', 'filter-change', 'filter-apply',
'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
emits: [
'column-click',
'column-mousedown',
'column-dragstart',
'column-dragover',
'column-dragleave',
'column-drop',
'column-resizestart',
'checkbox-change',
'filter-change',
'filter-apply',
'operator-change',
'matchmode-change',
'constraint-add',
'constraint-remove',
'filter-clear',
'apply-click'
],
props: {
column: {
type: Object,
@ -97,7 +146,7 @@ export default {
data() {
return {
styleObject: {}
}
};
},
mounted() {
if (this.columnProp('frozen')) {
@ -140,42 +189,48 @@ export default {
this.$emit('column-resizestart', event);
},
getMultiSortMetaIndex() {
return this.multiSortMeta.findIndex(meta => (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')));
return this.multiSortMeta.findIndex((meta) => meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField'));
},
getBadgeValue() {
let index = this.getMultiSortMetaIndex();
return (this.groupRowsBy && this.groupRowsBy === this.groupRowSortField) && index > -1 ? index : index + 1;
return this.groupRowsBy && this.groupRowsBy === this.groupRowSortField && index > -1 ? index : index + 1;
},
isMultiSorted() {
return this.sortMode === 'multiple' && this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1
return this.sortMode === 'multiple' && this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1;
},
isColumnSorted() {
return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'))) : this.isMultiSorted();
return this.sortMode === 'single' ? this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField')) : this.isMultiSorted();
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
}
else {
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
}
let filterRow = this.$el.parentElement.nextElementSibling;
if (filterRow) {
let index = DomHandler.index(this.$el);
filterRow.children[index].style.left = this.styleObject.left;
filterRow.children[index].style.right = this.styleObject.right;
}
@ -187,14 +242,18 @@ export default {
},
computed: {
containerClass() {
return [this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class'), {
return [
this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'),
this.columnProp('class'),
{
'p-sortable-column': this.columnProp('sortable'),
'p-resizable-column': this.resizableColumns,
'p-highlight': this.isColumnSorted(),
'p-filter-column': this.filterColumn,
'p-frozen-column': this.columnProp('frozen'),
'p-reorderable-column': this.reorderableColumns
}];
}
];
},
containerStyle() {
let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle') : this.columnProp('headerStyle');
@ -209,9 +268,9 @@ export default {
if (this.sortMode === 'single') {
sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));
sortOrder = sorted ? this.sortOrder : 0;
}
else if (this.sortMode === 'multiple') {
} else if (this.sortMode === 'multiple') {
let metaIndex = this.getMultiSortMetaIndex();
if (metaIndex > -1) {
sorted = true;
sortOrder = this.multiSortMeta[metaIndex].order;
@ -219,7 +278,8 @@ export default {
}
return [
'p-sortable-column-icon pi pi-fw', {
'p-sortable-column-icon pi pi-fw',
{
'pi-sort-alt': !sorted,
'pi-sort-amount-up-alt': sorted && sortOrder > 0,
'pi-sort-amount-down': sorted && sortOrder < 0
@ -229,21 +289,18 @@ export default {
ariaSort() {
if (this.columnProp('sortable')) {
const sortIcon = this.sortableColumnIcon;
if (sortIcon[1]['pi-sort-amount-down'])
return 'descending';
else if (sortIcon[1]['pi-sort-amount-up-alt'])
return 'ascending';
else
return 'none';
}
else {
if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
else return 'none';
} else {
return null;
}
}
},
components: {
'DTHeaderCheckbox': HeaderCheckbox,
'DTColumnFilter': ColumnFilter
}
DTHeaderCheckbox: HeaderCheckbox,
DTColumnFilter: ColumnFilter
}
};
</script>

13
components/datatable/HeaderCheckbox.vue
View File

@ -1,7 +1,14 @@
<template>
<div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused, 'p-disabled': $attrs.disabled }]" @click="onClick" @keydown.space.prevent="onClick">
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @focus="onFocus($event)" @blur="onBlur($event)">
<div
ref="box"
:class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]"
role="checkbox"
:aria-checked="checked"
:tabindex="$attrs.disabled ? null : '0'"
@focus="onFocus($event)"
@blur="onBlur($event)"
>
<span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
</div>
</div>
@ -37,5 +44,5 @@ export default {
this.focused = false;
}
}
}
};
</script>

14
components/datatable/RowCheckbox.vue
View File

@ -1,7 +1,15 @@
<template>
<div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused }]" @click.stop.prevent="onClick">
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @keydown.space.prevent="onClick" @focus="onFocus($event)" @blur="onBlur($event)">
<div
ref="box"
:class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]"
role="checkbox"
:aria-checked="checked"
:tabindex="$attrs.disabled ? null : '0'"
@keydown.space.prevent="onClick"
@focus="onFocus($event)"
@blur="onBlur($event)"
>
<span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
</div>
</div>
@ -38,5 +46,5 @@ export default {
this.focused = false;
}
}
}
};
</script>

2
components/datatable/RowRadioButton.vue
View File

@ -38,5 +38,5 @@ export default {
this.focused = false;
}
}
}
};
</script>

188
components/datatable/TableBody.vue
View File

@ -2,42 +2,75 @@
<tbody :ref="bodyRef" class="p-datatable-tbody" role="rowgroup" :style="bodyStyle">
<template v-if="!empty">
<template v-for="(rowData, index) of value" :key="getRowKey(rowData, getRowIndex(index)) + '_subheader'">
<tr class="p-rowgroup-header" :style="rowGroupHeaderStyle" v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))" role="row">
<tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))" class="p-rowgroup-header" :style="rowGroupHeaderStyle" role="row">
<td :colspan="columnsLength - 1">
<button class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" v-if="expandableRowGroups" type="button">
<button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button">
<span :class="rowGroupTogglerIcon(rowData)"></span>
</button>
<component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
</td>
</tr>
<tr :class="getRowClass(rowData)" :style="rowStyle" :key="getRowKey(rowData, getRowIndex(index))"
<tr
v-if="expandableRowGroups ? isRowGroupExpanded(rowData) : true"
@click="onRowClick($event, rowData, getRowIndex(index))" @dblclick="onRowDblClick($event, rowData, getRowIndex(index))" @contextmenu="onRowRightClick($event, rowData, getRowIndex(index))" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, getRowIndex(index))" :tabindex="selectionMode || contextMenu ? '0' : null"
@mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, getRowIndex(index))" @dragover="onRowDragOver($event, getRowIndex(index))" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)" role="row">
:key="getRowKey(rowData, getRowIndex(index))"
:class="getRowClass(rowData)"
:style="rowStyle"
@click="onRowClick($event, rowData, getRowIndex(index))"
@dblclick="onRowDblClick($event, rowData, getRowIndex(index))"
@contextmenu="onRowRightClick($event, rowData, getRowIndex(index))"
@touchend="onRowTouchEnd($event)"
@keydown="onRowKeyDown($event, rowData, getRowIndex(index))"
:tabindex="selectionMode || contextMenu ? '0' : null"
@mousedown="onRowMouseDown($event)"
@dragstart="onRowDragStart($event, getRowIndex(index))"
@dragover="onRowDragOver($event, getRowIndex(index))"
@dragleave="onRowDragLeave($event)"
@dragend="onRowDragEnd($event)"
@drop="onRowDrop($event)"
role="row"
>
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<DTBodyCell v-if="shouldRenderBodyCell(value, col, getRowIndex(index))" :rowData="rowData" :column="col" :rowIndex="getRowIndex(index)" :index="i" :selected="isSelected(rowData)"
:rowTogglerIcon="columnProp(col,'expander') ? rowTogglerIcon(rowData): null" :frozenRow="frozenRow"
<DTBodyCell
v-if="shouldRenderBodyCell(value, col, getRowIndex(index))"
:rowData="rowData"
:column="col"
:rowIndex="getRowIndex(index)"
:index="i"
:selected="isSelected(rowData)"
:rowTogglerIcon="columnProp(col, 'expander') ? rowTogglerIcon(rowData) : null"
:frozenRow="frozenRow"
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, getRowIndex(index)) : null"
:editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :responsiveLayout="responsiveLayout"
@radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"
@cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
:editingMeta="editingMeta" @editing-meta-change="onEditingMetaChange" :virtualScrollerContentProps="virtualScrollerContentProps"/>
:editMode="editMode"
:editing="editMode === 'row' && isRowEditing(rowData)"
:responsiveLayout="responsiveLayout"
@radio-change="onRadioChange($event)"
@checkbox-change="onCheckboxChange($event)"
@row-toggle="onRowToggle($event)"
@cell-edit-init="onCellEditInit($event)"
@cell-edit-complete="onCellEditComplete($event)"
@cell-edit-cancel="onCellEditCancel($event)"
@row-edit-init="onRowEditInit($event)"
@row-edit-save="onRowEditSave($event)"
@row-edit-cancel="onRowEditCancel($event)"
:editingMeta="editingMeta"
@editing-meta-change="onEditingMetaChange"
:virtualScrollerContentProps="virtualScrollerContentProps"
/>
</template>
</tr>
<tr class="p-datatable-row-expansion" v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, getRowIndex(index)) + '_expansion'" role="row">
<tr v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, getRowIndex(index)) + '_expansion'" class="p-datatable-row-expansion" role="row">
<td :colspan="columnsLength">
<component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
</td>
</tr>
<tr class="p-rowgroup-footer" v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))" :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'" role="row">
<tr v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))" :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'" class="p-rowgroup-footer" role="row">
<component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
</tr>
</template>
</template>
<tr v-else class="p-datatable-emptymessage" role="row">
<td :colspan="columnsLength">
<component :is="templates.empty" v-if="templates.empty" />
<component v-if="templates.empty" :is="templates.empty" />
</td>
</tr>
</tbody>
@ -49,10 +82,30 @@ import BodyCell from './BodyCell.vue';
export default {
name: 'TableBody',
emits: ['rowgroup-toggle', 'row-click', 'row-dblclick', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown',
'row-dragstart', 'row-dragover', 'row-dragleave', 'row-dragend', 'row-drop', 'row-toggle',
'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel',
'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-meta-change'],
emits: [
'rowgroup-toggle',
'row-click',
'row-dblclick',
'row-rightclick',
'row-touchend',
'row-keydown',
'row-mousedown',
'row-dragstart',
'row-dragover',
'row-dragleave',
'row-dragend',
'row-drop',
'row-toggle',
'radio-change',
'checkbox-change',
'cell-edit-init',
'cell-edit-complete',
'cell-edit-cancel',
'row-edit-init',
'row-edit-save',
'row-edit-cancel',
'editing-meta-change'
],
props: {
value: {
type: Array,
@ -175,6 +228,11 @@ export default {
default: false
}
},
data() {
return {
rowGroupHeaderStyleObject: {}
};
},
watch: {
virtualScrollerContentProps(newValue, oldValue) {
if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical') && this.getVirtualScrollerProp('itemSize', oldValue) !== this.getVirtualScrollerProp('itemSize', newValue)) {
@ -204,11 +262,6 @@ export default {
this.updateFrozenRowGroupHeaderStickyPosition();
}
},
data() {
return {
rowGroupHeaderStyleObject: {}
}
},
methods: {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
@ -216,11 +269,12 @@ export default {
shouldRenderRowGroupHeader(value, rowData, i) {
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
let prevRowData = value[i - 1];
if (prevRowData) {
let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
return currentRowFieldData !== previousRowFieldData;
}
else {
} else {
return true;
}
},
@ -229,10 +283,12 @@ export default {
},
getRowIndex(index) {
const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
return getItemOptions ? getItemOptions(index).index : index;
},
getRowClass(rowData) {
let rowStyleClass = [];
if (this.selectionMode) {
rowStyleClass.push('p-selectable-row');
}
@ -262,15 +318,15 @@ export default {
shouldRenderRowGroupFooter(value, rowData, i) {
if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
return false;
}
else {
} else {
let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
let nextRowData = value[i + 1];
if (nextRowData) {
let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
return currentRowFieldData !== nextRowFieldData;
}
else {
} else {
return true;
}
}
@ -279,25 +335,23 @@ export default {
if (this.rowGroupMode) {
if (this.rowGroupMode === 'subheader') {
return this.groupRowsBy !== this.columnProp(column, 'field');
}
else if (this.rowGroupMode === 'rowspan') {
} else if (this.rowGroupMode === 'rowspan') {
if (this.isGrouped(column)) {
let prevRowData = value[i - 1];
if (prevRowData) {
let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], this.columnProp(column, 'field'));
let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.columnProp(column, 'field'));
return currentRowFieldData !== previousRowFieldData;
} else {
return true;
}
else {
} else {
return true;
}
}
else {
return true;
}
}
}
else {
} else {
return !this.columnProp(column, 'hidden');
}
},
@ -310,55 +364,49 @@ export default {
while (currentRowFieldData === nextRowFieldData) {
groupRowSpan++;
let nextRowData = value[++index];
if (nextRowData) {
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.columnProp(column, 'field'));
}
else {
} else {
break;
}
}
return groupRowSpan === 1 ? null : groupRowSpan;
}
else {
} else {
return null;
}
},
rowTogglerIcon(rowData) {
const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
return ['p-row-toggler-icon pi', icon];
},
rowGroupTogglerIcon(rowData) {
const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
return ['p-row-toggler-icon pi', icon];
},
isGrouped(column) {
if (this.groupRowsBy && this.columnProp(column, 'field')) {
if (Array.isArray(this.groupRowsBy))
return this.groupRowsBy.indexOf(column.props.field) > -1;
else
return this.groupRowsBy === column.props.field;
}
else {
if (Array.isArray(this.groupRowsBy)) return this.groupRowsBy.indexOf(column.props.field) > -1;
else return this.groupRowsBy === column.props.field;
} else {
return false;
}
},
isRowEditing(rowData) {
if (rowData && this.editingRows) {
if (this.dataKey)
return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
else
return this.findIndex(rowData, this.editingRows) > -1;
if (this.dataKey) return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
else return this.findIndex(rowData, this.editingRows) > -1;
}
return false;
},
isRowExpanded(rowData) {
if (rowData && this.expandedRows) {
if (this.dataKey)
return this.expandedRowKeys ? this.expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
else
return this.findIndex(rowData, this.expandedRows) > -1;
if (this.dataKey) return this.expandedRowKeys ? this.expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
else return this.findIndex(rowData, this.expandedRows) > -1;
}
return false;
@ -366,20 +414,19 @@ export default {
isRowGroupExpanded(rowData) {
if (this.expandableRowGroups && this.expandedRowGroups) {
let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
}
return false;
},
isSelected(rowData) {
if (rowData && this.selection) {
if (this.dataKey) {
return this.selectionKeys ? this.selectionKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
}
else {
if (this.selection instanceof Array)
return this.findIndexInSelection(rowData) > -1;
else
return this.equals(rowData, this.selection);
} else {
if (this.selection instanceof Array) return this.findIndexInSelection(rowData) > -1;
else return this.equals(rowData, this.selection);
}
}
@ -397,6 +444,7 @@ export default {
},
findIndex(rowData, collection) {
let index = -1;
if (collection && collection.length) {
for (let i = 0; i < collection.length; i++) {
if (this.equals(rowData, collection[i])) {
@ -409,7 +457,7 @@ export default {
return index;
},
equals(data1, data2) {
return this.compareSelectionBy === 'equals' ? (data1 === data2) : ObjectUtils.equals(data1, data2, this.dataKey);
return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey);
},
onRowGroupToggle(event, data) {
this.$emit('rowgroup-toggle', { originalEvent: event, data: data });
@ -482,19 +530,23 @@ export default {
},
updateFrozenRowGroupHeaderStickyPosition() {
let tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px'
this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
},
updateVirtualScrollerPosition() {
const tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
this.$el.style.top = (this.$el.style.top || 0) + tableHeaderHeight + 'px';
},
getVirtualScrollerProp(option, options) {
options = options || this.virtualScrollerContentProps;
return options ? options[option] : null;
},
bodyRef(el) {
// For VirtualScroller
const contentRef = this.getVirtualScrollerProp('contentRef');
contentRef && contentRef(el);
}
},
@ -502,7 +554,7 @@ export default {
columnsLength() {
let hiddenColLength = 0;
this.columns.forEach(column => {
this.columns.forEach((column) => {
if (this.columnProp(column, 'hidden')) hiddenColLength++;
});
@ -520,7 +572,7 @@ export default {
}
},
components: {
'DTBodyCell': BodyCell
}
DTBodyCell: BodyCell
}
};
</script>

27
components/datatable/TableFooter.vue
View File

@ -1,14 +1,14 @@
<template>
<tfoot class="p-datatable-tfoot" v-if="hasFooter" role="rowgroup">
<tfoot v-if="hasFooter" class="p-datatable-tfoot" role="rowgroup">
<tr v-if="!columnGroup" role="row">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<DTFooterCell :column="col" v-if="!columnProp(col,'hidden')"/>
<DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" />
</template>
</tr>
<template v-else>
<tr v-for="(row, i) of getFooterRows()" :key="i" role="row">
<template v-for="(col, j) of getFooterColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
<DTFooterCell :column="col" v-if="!columnProp(col,'hidden')"/>
<DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" />
</template>
</tr>
</template>
@ -29,7 +29,7 @@ export default {
columns: {
type: null,
default: null
},
}
},
methods: {
columnProp(col, prop) {
@ -39,12 +39,12 @@ export default {
let rows = [];
let columnGroup = this.columnGroup;
if (columnGroup.children && columnGroup.children.default) {
for (let child of columnGroup.children.default()) {
if (child.type.name === 'Row') {
rows.push(child);
}
else if (child.children && child.children instanceof Array) {
} else if (child.children && child.children instanceof Array) {
rows = child.children;
}
}
@ -56,11 +56,9 @@ export default {
let cols = [];
if (row.children && row.children.default) {
row.children.default().forEach(child => {
if (child.children && child.children instanceof Array)
cols = [...cols, ...child.children];
else if (child.type.name === 'Column')
cols.push(child);
row.children.default().forEach((child) => {
if (child.children && child.children instanceof Array) cols = [...cols, ...child.children];
else if (child.type.name === 'Column') cols.push(child);
});
return cols;
@ -73,8 +71,7 @@ export default {
if (this.columnGroup) {
hasFooter = true;
}
else if (this.columns) {
} else if (this.columns) {
for (let col of this.columns) {
if (this.columnProp(col, 'footer') || (col.children && col.children.footer)) {
hasFooter = true;
@ -87,7 +84,7 @@ export default {
}
},
components: {
'DTFooterCell': FooterCell
}
DTFooterCell: FooterCell
}
};
</script>

166
components/datatable/TableHeader.vue
View File

@ -3,30 +3,74 @@
<template v-if="!columnGroup">
<tr role="row">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<DTHeaderCell v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field')))" :column="col"
@column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
@column-dragstart="$emit('column-dragstart', $event)" @column-dragover="$emit('column-dragover', $event)" @column-dragleave="$emit('column-dragleave', $event)" @column-drop="$emit('column-drop', $event)"
:groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :reorderableColumns="reorderableColumns" :resizableColumns="resizableColumns" @column-resizestart="$emit('column-resizestart', $event)"
:sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
:allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)"
:filters="filters" :filterDisplay="filterDisplay" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
@operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)"
@constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
<DTHeaderCell
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
:column="col"
@column-click="$emit('column-click', $event)"
@column-mousedown="$emit('column-mousedown', $event)"
@column-dragstart="$emit('column-dragstart', $event)"
@column-dragover="$emit('column-dragover', $event)"
@column-dragleave="$emit('column-dragleave', $event)"
@column-drop="$emit('column-drop', $event)"
:groupRowsBy="groupRowsBy"
:groupRowSortField="groupRowSortField"
:reorderableColumns="reorderableColumns"
:resizableColumns="resizableColumns"
@column-resizestart="$emit('column-resizestart', $event)"
:sortMode="sortMode"
:sortField="sortField"
:sortOrder="sortOrder"
:multiSortMeta="multiSortMeta"
:allRowsSelected="allRowsSelected"
:empty="empty"
@checkbox-change="$emit('checkbox-change', $event)"
:filters="filters"
:filterDisplay="filterDisplay"
:filtersStore="filtersStore"
@filter-change="$emit('filter-change', $event)"
@filter-apply="$emit('filter-apply')"
@operator-change="$emit('operator-change', $event)"
@matchmode-change="$emit('matchmode-change', $event)"
@constraint-add="$emit('constraint-add', $event)"
@constraint-remove="$emit('constraint-remove', $event)"
@apply-click="$emit('apply-click', $event)"
/>
</template>
</tr>
<tr v-if="filterDisplay === 'row'" role="row">
<template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
<th :style="getFilterColumnHeaderStyle(col)" :class="getFilterColumnHeaderClass(col)" v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field')))">
<DTHeaderCheckbox :checked="allRowsSelected" @change="$emit('checkbox-change', $event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple'" />
<DTColumnFilter v-if="col.children && col.children.filter" :field="columnProp(col,'filterField')||columnProp(col,'field')" :type="columnProp(col,'dataType')" display="row"
:showMenu="columnProp(col,'showFilterMenu')" :filterElement="col.children && col.children.filter"
:filterHeaderTemplate="col.children && col.children.filterheader" :filterFooterTemplate="col.children && col.children.filterfooter"
:filterClearTemplate="col.children && col.children.filterclear" :filterApplyTemplate="col.children && col.children.filterapply"
:filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col,'filterMenuStyle')" :filterMenuClass="columnProp(col,'filterMenuClass')"
:showOperator="columnProp(col,'showFilterOperator')" :showClearButton="columnProp(col,'showClearButton')" :showApplyButton="columnProp(col,'showApplyButton')"
:showMatchModes="columnProp(col,'showFilterMatchModes')" :showAddButton="columnProp(col,'showAddButton')" :matchModeOptions="columnProp(col,'filterMatchModeOptions')" :maxConstraints="columnProp(col,'maxConstraints')"
@operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)"
@constraint-add="$emit('constraint-add', $event)" @constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
<th v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))" :style="getFilterColumnHeaderStyle(col)" :class="getFilterColumnHeaderClass(col)">
<DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" @change="$emit('checkbox-change', $event)" :disabled="empty" />
<DTColumnFilter
v-if="col.children && col.children.filter"
:field="columnProp(col, 'filterField') || columnProp(col, 'field')"
:type="columnProp(col, 'dataType')"
display="row"
:showMenu="columnProp(col, 'showFilterMenu')"
:filterElement="col.children && col.children.filter"
:filterHeaderTemplate="col.children && col.children.filterheader"
:filterFooterTemplate="col.children && col.children.filterfooter"
:filterClearTemplate="col.children && col.children.filterclear"
:filterApplyTemplate="col.children && col.children.filterapply"
:filters="filters"
:filtersStore="filtersStore"
@filter-change="$emit('filter-change', $event)"
@filter-apply="$emit('filter-apply')"
:filterMenuStyle="columnProp(col, 'filterMenuStyle')"
:filterMenuClass="columnProp(col, 'filterMenuClass')"
:showOperator="columnProp(col, 'showFilterOperator')"
:showClearButton="columnProp(col, 'showClearButton')"
:showApplyButton="columnProp(col, 'showApplyButton')"
:showMatchModes="columnProp(col, 'showFilterMatchModes')"
:showAddButton="columnProp(col, 'showAddButton')"
:matchModeOptions="columnProp(col, 'filterMatchModeOptions')"
:maxConstraints="columnProp(col, 'maxConstraints')"
@operator-change="$emit('operator-change', $event)"
@matchmode-change="$emit('matchmode-change', $event)"
@constraint-add="$emit('constraint-add', $event)"
@constraint-remove="$emit('constraint-remove', $event)"
@apply-click="$emit('apply-click', $event)"
/>
</th>
</template>
</tr>
@ -34,13 +78,31 @@
<template v-else>
<tr v-for="(row, i) of getHeaderRows()" :key="i" role="row">
<template v-for="(col, j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
<DTHeaderCell v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))) && (typeof col.children !== 'string')" :column="col"
@column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
:groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
:allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)"
:filters="filters" :filterDisplay="filterDisplay" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
@operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)"
@constraint-remove="$emit('constraint-remove', $event)" @apply-click="$emit('apply-click',$event)"/>
<DTHeaderCell
v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field')) && typeof col.children !== 'string'"
:column="col"
@column-click="$emit('column-click', $event)"
@column-mousedown="$emit('column-mousedown', $event)"
:groupRowsBy="groupRowsBy"
:groupRowSortField="groupRowSortField"
:sortMode="sortMode"
:sortField="sortField"
:sortOrder="sortOrder"
:multiSortMeta="multiSortMeta"
:allRowsSelected="allRowsSelected"
:empty="empty"
@checkbox-change="$emit('checkbox-change', $event)"
:filters="filters"
:filterDisplay="filterDisplay"
:filtersStore="filtersStore"
@filter-change="$emit('filter-change', $event)"
@filter-apply="$emit('filter-apply')"
@operator-change="$emit('operator-change', $event)"
@matchmode-change="$emit('matchmode-change', $event)"
@constraint-add="$emit('constraint-add', $event)"
@constraint-remove="$emit('constraint-remove', $event)"
@apply-click="$emit('apply-click', $event)"
/>
</template>
</tr>
</template>
@ -55,9 +117,24 @@ import {ObjectUtils} from 'primevue/utils';
export default {
name: 'TableHeader',
emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
'column-resizestart', 'checkbox-change', 'filter-change', 'filter-apply',
'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
emits: [
'column-click',
'column-mousedown',
'column-dragstart',
'column-dragover',
'column-dragleave',
'column-drop',
'column-resizestart',
'checkbox-change',
'filter-change',
'filter-apply',
'operator-change',
'matchmode-change',
'constraint-add',
'constraint-remove',
'filter-clear',
'apply-click'
],
props: {
columnGroup: {
type: null,
@ -129,9 +206,14 @@ export default {
return ObjectUtils.getVNodeProp(col, prop);
},
getFilterColumnHeaderClass(column) {
return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), this.columnProp(column, 'class'), {
return [
'p-filter-column',
this.columnProp(column, 'filterHeaderClass'),
this.columnProp(column, 'class'),
{
'p-frozen-column': this.columnProp(column, 'frozen')
}];
}
];
},
getFilterColumnHeaderStyle(column) {
return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];
@ -140,12 +222,12 @@ export default {
let rows = [];
let columnGroup = this.columnGroup;
if (columnGroup.children && columnGroup.children.default) {
for (let child of columnGroup.children.default()) {
if (child.type.name === 'Row') {
rows.push(child);
}
else if (child.children && child.children instanceof Array) {
} else if (child.children && child.children instanceof Array) {
rows = child.children;
}
}
@ -157,11 +239,9 @@ export default {
let cols = [];
if (row.children && row.children.default) {
row.children.default().forEach(child => {
if (child.children && child.children instanceof Array)
cols = [...cols, ...child.children];
else if (child.type.name === 'Column')
cols.push(child);
row.children.default().forEach((child) => {
if (child.children && child.children instanceof Array) cols = [...cols, ...child.children];
else if (child.type.name === 'Column') cols.push(child);
});
return cols;
@ -169,9 +249,9 @@ export default {
}
},
components: {
'DTHeaderCell': HeaderCell,
'DTHeaderCheckbox': HeaderCheckbox,
'DTColumnFilter': ColumnFilter
}
DTHeaderCell: HeaderCell,
DTHeaderCheckbox: HeaderCheckbox,
DTColumnFilter: ColumnFilter
}
};
</script>

4
components/datatable/TableLoadingBody.vue
View File

@ -2,7 +2,7 @@
<tbody class="p-datatable-tbody">
<tr v-for="n in rows" :key="n">
<td v-for="(col, i) of columns" :key="col.props.columnKey || col.props.field || i">
<component :is="col.children.loading" :column="col" :index="i" v-if="col.children && col.children.loading" />
<component v-if="col.children && col.children.loading" :is="col.children.loading" :column="col" :index="i" />
</td>
</tr>
</tbody>
@ -21,5 +21,5 @@ export default {
default: null
}
}
}
};
</script>

8
components/dataview/DataView.d.ts vendored
View File

@ -185,14 +185,14 @@ export declare type DataViewEmits = {
* Callback to invoke when page changes, the event object contains information about the new state.
* @param {DataViewPageEvent} event - Custom page event.
*/
'page': (event: DataViewPageEvent) => void;
}
page: (event: DataViewPageEvent) => void;
};
declare class DataView extends ClassComponent<DataViewProps, DataViewSlots, DataViewEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
DataView: GlobalComponentConstructor<DataView>
DataView: GlobalComponentConstructor<DataView>;
}
}
@ -206,7 +206,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [DataView](https://www.primefaces.org/primevue/showcase/#/dataview)
* - [DataView](https://www.primefaces.org/primevue/dataview)
*
*/
export default DataView;

60
components/dataview/DataView.spec.js
View File

@ -7,40 +7,40 @@ describe('DataView.vue', () => {
props: {
value: [
{
"id": "1000",
"code": "f230fh0g3",
"name": "Bamboo Watch",
"description": "Product Description",
"image": "bamboo-watch.jpg",
"price": 65,
"category": "Accessories",
"quantity": 24,
"inventoryStatus": "INSTOCK",
"rating": 5
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
},
{
"id": "1001",
"code": "nvklal433",
"name": "Black Watch",
"description": "Product Description",
"image": "black-watch.jpg",
"price": 72,
"category": "Accessories",
"quantity": 61,
"inventoryStatus": "INSTOCK",
"rating": 4
id: '1001',
code: 'nvklal433',
name: 'Black Watch',
description: 'Product Description',
image: 'black-watch.jpg',
price: 72,
category: 'Accessories',
quantity: 61,
inventoryStatus: 'INSTOCK',
rating: 4
},
{
"id": "1002",
"code": "zz21cz3c1",
"name": "Blue Band",
"description": "Product Description",
"image": "blue-band.jpg",
"price": 79,
"category": "Fitness",
"quantity": 2,
"inventoryStatus": "LOWSTOCK",
"rating": 3
id: '1002',
code: 'zz21cz3c1',
name: 'Blue Band',
description: 'Product Description',
image: 'blue-band.jpg',
price: 79,
category: 'Fitness',
quantity: 2,
inventoryStatus: 'LOWSTOCK',
rating: 3
}
],
layout: 'grid',

94
components/dataview/DataView.vue
View File

@ -1,14 +1,25 @@
<template>
<div :class="containerClass">
<div class="p-dataview-header" v-if="$slots.header">
<div v-if="$slots.header" class="p-dataview-header">
<slot name="header"></slot>
</div>
<DVPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}" :alwaysShow="alwaysShowPaginator" @page="onPage($event)">
<template #start v-if="$slots.paginatorstart">
<DVPaginator
v-if="paginatorTop"
:rows="d_rows"
:first="d_first"
:totalRecords="getTotalRecords"
:pageLinkSize="pageLinkSize"
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="{ 'p-paginator-top': paginatorTop }"
:alwaysShow="alwaysShowPaginator"
@page="onPage($event)"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>
</template>
<template #end v-if="$slots.paginatorend">
<template v-if="$slots.paginatorend" #end>
<slot name="paginatorend"></slot>
</template>
</DVPaginator>
@ -25,16 +36,27 @@
</div>
</div>
</div>
<DVPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}" :alwaysShow="alwaysShowPaginator" @page="onPage($event)">
<template #start v-if="$slots.paginatorstart">
<DVPaginator
v-if="paginatorBottom"
:rows="d_rows"
:first="d_first"
:totalRecords="getTotalRecords"
:pageLinkSize="pageLinkSize"
:template="paginatorTemplate"
:rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate"
:class="{ 'p-paginator-bottom': paginatorBottom }"
:alwaysShow="alwaysShowPaginator"
@page="onPage($event)"
>
<template v-if="$slots.paginatorstart" #start>
<slot name="paginatorstart"></slot>
</template>
<template #end v-if="$slots.paginatorend">
<template v-if="$slots.paginatorend" #end>
<slot name="paginatorend"></slot>
</template>
</DVPaginator>
<div class="p-dataview-footer" v-if="$slots.footer">
<div v-if="$slots.footer" class="p-dataview-footer">
<slot name="footer"></slot>
</div>
</div>
@ -116,7 +138,7 @@ export default {
return {
d_first: this.first,
d_rows: this.rows
}
};
},
watch: {
first(newValue) {
@ -153,23 +175,17 @@ export default {
let value2 = ObjectUtils.resolveFieldData(data2, this.sortField);
let result = null;
if (value1 == null && value2 != null)
result = -1;
else if (value1 != null && value2 == null)
result = 1;
else if (value1 == null && value2 == null)
result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string')
result = value1.localeCompare(value2, undefined, { numeric: true });
else
result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
if (value1 == null && value2 != null) result = -1;
else if (value1 != null && value2 == null) result = 1;
else if (value1 == null && value2 == null) result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return (this.sortOrder * result);
return this.sortOrder * result;
});
return value;
}
else {
} else {
return null;
}
},
@ -180,20 +196,20 @@ export default {
},
computed: {
containerClass() {
return ['p-dataview p-component', {
'p-dataview-list': (this.layout === 'list'),
'p-dataview-grid': (this.layout === 'grid')
return [
'p-dataview p-component',
{
'p-dataview-list': this.layout === 'list',
'p-dataview-grid': this.layout === 'grid'
}
]
];
},
getTotalRecords() {
if (this.totalRecords)
return this.totalRecords;
else
return this.value ? this.value.length : 0;
if (this.totalRecords) return this.totalRecords;
else return this.value ? this.value.length : 0;
},
empty() {
return (!this.value || this.value.length === 0);
return !this.value || this.value.length === 0;
},
paginatorTop() {
return this.paginator && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both');
@ -211,20 +227,18 @@ export default {
if (this.paginator) {
const first = this.lazy ? 0 : this.d_first;
return data.slice(first, first + this.d_rows);
}
else {
} else {
return data;
}
}
else {
} else {
return null;
}
}
},
components: {
'DVPaginator': Paginator
}
DVPaginator: Paginator
}
};
</script>

9
components/dataviewlayoutoptions/DataViewLayoutOptions.d.ts vendored
View File

@ -7,8 +7,7 @@ export interface DataViewLayoutOptionsProps {
modelValue?: string | undefined;
}
export interface DataViewLayoutOptionsSlots {
}
export interface DataViewLayoutOptionsSlots {}
export declare type DataViewLayoutOptionsEmits = {
/**
@ -16,13 +15,13 @@ export declare type DataViewLayoutOptionsEmits = {
* @param {*} value - New value.
*/
'update:modelValue': (value: string) => void;
}
};
declare class DataViewLayoutOptions extends ClassComponent<DataViewLayoutOptionsProps, DataViewLayoutOptionsSlots, DataViewLayoutOptionsEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
DataViewLayoutOptions: GlobalComponentConstructor<DataViewLayoutOptions>
DataViewLayoutOptions: GlobalComponentConstructor<DataViewLayoutOptions>;
}
}
@ -33,7 +32,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [DataViewLayoutOptions](https://www.primefaces.org/primevue/showcase/#/dataview)
* - [DataViewLayoutOptions](https://www.primefaces.org/primevue/dataview)
*
*/
export default DataViewLayoutOptions;

22
components/dataviewlayoutoptions/DataViewLayoutOptions.vue
View File

@ -16,24 +16,18 @@
props: {
modelValue: String
},
computed: {
buttonListClass(){
return [
'p-button p-button-icon-only',
{'p-highlight': this.modelValue === 'list'}
]
},
buttonGridClass() {
return [
'p-button p-button-icon-only',
{'p-highlight': this.modelValue === 'grid'}
]
}
},
methods: {
changeLayout(layout) {
this.$emit('update:modelValue', layout);
}
},
computed: {
buttonListClass() {
return ['p-button p-button-icon-only', { 'p-highlight': this.modelValue === 'list' }];
},
buttonGridClass() {
return ['p-button p-button-icon-only', { 'p-highlight': this.modelValue === 'grid' }];
}
}
};
</script>

11
components/deferredcontent/DeferredContent.d.ts vendored
View File

@ -1,8 +1,7 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export interface DeferredContentProps {
}
export interface DeferredContentProps {}
export interface DeferredContentSlots {
/**
@ -15,14 +14,14 @@ export declare type DeferredContentEmits = {
/**
* Callback to invoke when deferred content is loaded.
*/
'load': () => void;
}
load: () => void;
};
declare class DeferredContent extends ClassComponent<DeferredContentProps, DeferredContentSlots, DeferredContentEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
DeferredContent: GlobalComponentConstructor<DeferredContent>
DeferredContent: GlobalComponentConstructor<DeferredContent>;
}
}
@ -32,7 +31,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [DeferredContent](https://www.primefaces.org/primevue/showcase/#/deferredcontent)
* - [DeferredContent](https://www.primefaces.org/primevue/deferredcontent)
*
*/
export default DeferredContent;

15
components/deferredcontent/DeferredContent.vue
View File

@ -11,14 +11,12 @@ export default {
data() {
return {
loaded: false
}
};
},
mounted() {
if (!this.loaded) {
if (this.shouldLoad())
this.load();
else
this.bindScrollListener();
if (this.shouldLoad()) this.load();
else this.bindScrollListener();
}
},
beforeUnmount() {
@ -44,13 +42,12 @@ export default {
shouldLoad() {
if (this.loaded) {
return false;
}
else {
} else {
const rect = this.$refs.container.getBoundingClientRect();
const docElement = document.documentElement;
const winHeight = docElement.clientHeight;
return (winHeight >= rect.top);
return winHeight >= rect.top;
}
},
load(event) {
@ -58,5 +55,5 @@ export default {
this.$emit('load', event);
}
}
}
};
</script>

16
components/dialog/Dialog.d.ts vendored
View File

@ -158,7 +158,7 @@ export declare type DialogEmits = {
/**
* Callback to invoke when dialog is hidden.
*/
'hide': () => void;
hide: () => void;
/**
* Callback to invoke after dialog is hidden.
*/
@ -166,29 +166,29 @@ export declare type DialogEmits = {
/**
* Callback to invoke when dialog is shown.
*/
'show': () => void;
show: () => void;
/**
* Fired when a dialog gets maximized.
* @param {event} event - Browser event.
*/
'maximize': (event: Event) => void;
maximize: (event: Event) => void;
/**
* Fired when a dialog gets unmaximized.
* @param {event} event - Browser event.
*/
'unmaximize': (event: Event) => void;
unmaximize: (event: Event) => void;
/**
* Fired when a dialog drag completes.
* @param {event} event - Browser event.
*/
'dragend': (event: Event) => void;
}
dragend: (event: Event) => void;
};
declare class Dialog extends ClassComponent<DialogProps, DialogSlots, DialogEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Dialog: GlobalComponentConstructor<Dialog>
Dialog: GlobalComponentConstructor<Dialog>;
}
}
@ -198,7 +198,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Dialog](https://www.primefaces.org/primevue/showcase/#/dialog)
* - [Dialog](https://www.primefaces.org/primevue/dialog)
*
*/
export default Dialog;

6
components/dialog/Dialog.spec.js
View File

@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils';
import PrimeVue from '@/components/config/PrimeVue';
import { mount } from '@vue/test-utils';
import Dialog from './Dialog.vue';
describe('Dialog.vue', () => {
@ -40,7 +40,7 @@ describe('Dialog.vue', () => {
}
});
expect(wrapper.find('.p-dialog-content').exists()).toBe(true);
expect(wrapper.find('.p-dialog-footer').exists()).toBe(true);
expect(wrapper.find('.p-dialog-content').exists()).toBe(false);
expect(wrapper.find('.p-dialog-footer').exists()).toBe(false);
});
});

92
components/dialog/Dialog.vue
View File

@ -1,17 +1,17 @@
<template>
<Portal :appendTo="appendTo">
<div :ref="maskRef" :class="maskClass" v-if="containerVisible" @click="onMaskClick">
<div v-if="containerVisible" :ref="maskRef" :class="maskClass" @click="onMaskClick">
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
<div :ref="containerRef" :class="dialogClass" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
<div class="p-dialog-header" v-if="showHeader" @mousedown="initDrag">
<div v-if="visible" :ref="containerRef" :class="dialogClass" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
<div v-if="showHeader" class="p-dialog-header" @mousedown="initDrag">
<slot name="header">
<span :id="ariaLabelledById" class="p-dialog-title" v-if="header">{{header}}</span>
<span v-if="header" :id="ariaLabelledById" class="p-dialog-title">{{ header }}</span>
</slot>
<div class="p-dialog-header-icons">
<button class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" v-if="maximizable" type="button" tabindex="-1" v-ripple>
<button v-if="maximizable" v-ripple class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" type="button" tabindex="-1">
<span :class="maximizeIconClass"></span>
</button>
<button class="p-dialog-header-icon p-dialog-header-close p-link" @click="close" v-if="closable" :aria-label="ariaCloseLabel" type="button" v-ripple>
<button v-if="closable" v-ripple class="p-dialog-header-icon p-dialog-header-close p-link" @click="close" :aria-label="ariaCloseLabel" type="button">
<span class="p-dialog-header-close-icon pi pi-times"></span>
</button>
</div>
@ -19,7 +19,7 @@
<div :class="contentStyleClass" :style="contentStyle">
<slot></slot>
</div>
<div class="p-dialog-footer" v-if="footer || $slots.footer">
<div v-if="footer || $slots.footer" class="p-dialog-footer">
<slot name="footer">{{ footer }}</slot>
</div>
</div>
@ -105,13 +105,13 @@ export default {
provide() {
return {
dialogRef: computed(() => this._instance)
}
};
},
data() {
return {
containerVisible: this.visible,
maximized: false
}
};
},
documentKeydownListener: null,
container: null,
@ -135,6 +135,7 @@ export default {
if (this.mask && this.autoZIndex) {
ZIndexUtils.clear(this.mask);
}
this.container = null;
this.mask = null;
},
@ -172,6 +173,7 @@ export default {
if (this.autoZIndex) {
ZIndexUtils.clear(this.mask);
}
this.containerVisible = false;
this.unbindDocumentState();
this.unbindGlobalListeners();
@ -184,6 +186,7 @@ export default {
},
focus() {
let focusTarget = this.container.querySelector('[autofocus]');
if (focusTarget) {
focusTarget.focus();
}
@ -192,17 +195,14 @@ export default {
if (this.maximized) {
this.maximized = false;
this.$emit('unmaximize', event);
}
else {
} else {
this.maximized = true;
this.$emit('maximize', event);
}
if (!this.modal) {
if (this.maximized)
DomHandler.addClass(document.body, 'p-overflow-hidden');
else
DomHandler.removeClass(document.body, 'p-overflow-hidden');
if (this.maximized) DomHandler.addClass(document.body, 'p-overflow-hidden');
else DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
},
enableDocumentSettings() {
@ -219,23 +219,19 @@ export default {
if (event.which === 9) {
event.preventDefault();
let focusableElements = DomHandler.getFocusableElements(this.container);
if (focusableElements && focusableElements.length > 0) {
if (!document.activeElement) {
focusableElements[0].focus();
}
else {
} else {
let focusedIndex = focusableElements.indexOf(document.activeElement);
if (event.shiftKey) {
if (focusedIndex == -1 || focusedIndex === 0)
focusableElements[focusableElements.length - 1].focus();
else
focusableElements[focusedIndex - 1].focus();
}
else {
if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1))
focusableElements[0].focus();
else
focusableElements[focusedIndex + 1].focus();
if (focusedIndex == -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
else focusableElements[focusedIndex - 1].focus();
} else {
if (focusedIndex == -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
else focusableElements[focusedIndex + 1].focus();
}
}
}
@ -257,7 +253,7 @@ export default {
},
getPositionClass() {
const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
const pos = positions.find(item => item === this.position);
const pos = positions.find((item) => item === this.position);
return pos ? `p-dialog-${pos}` : '';
},
@ -274,6 +270,7 @@ export default {
document.head.appendChild(this.styleElement);
let innerHTML = '';
for (let breakpoint in this.breakpoints) {
innerHTML += `
@media screen and (max-width: ${breakpoint}) {
@ -281,7 +278,7 @@ export default {
width: ${this.breakpoints[breakpoint]} !important;
}
}
`
`;
}
this.styleElement.innerHTML = innerHTML;
@ -337,24 +334,24 @@ export default {
this.container.style.position = 'fixed';
if (this.keepInViewport) {
if (leftPos >= this.minX && (leftPos + width) < viewport.width) {
if (leftPos >= this.minX && leftPos + width < viewport.width) {
this.lastPageX = event.pageX;
this.container.style.left = leftPos + 'px';
}
if (topPos >= this.minY && (topPos + height) < viewport.height) {
if (topPos >= this.minY && topPos + height < viewport.height) {
this.lastPageY = event.pageY;
this.container.style.top = topPos + 'px';
}
}
else {
} else {
this.lastPageX = event.pageX;
this.container.style.left = leftPos + 'px';
this.lastPageY = event.pageY;
this.container.style.top = topPos + 'px';
}
}
}
};
window.document.addEventListener('mousemove', this.documentDragListener);
},
unbindDocumentDragListener() {
@ -372,6 +369,7 @@ export default {
this.$emit('dragend', event);
}
};
window.document.addEventListener('mouseup', this.documentDragEndListener);
},
unbindDocumentDragEndListener() {
@ -386,18 +384,24 @@ export default {
return ['p-dialog-mask', { 'p-component-overlay p-component-overlay-enter': this.modal }, this.getPositionClass()];
},
dialogClass() {
return ['p-dialog p-component', {
return [
'p-dialog p-component',
{
'p-dialog-rtl': this.rtl,
'p-dialog-maximized': this.maximizable && this.maximized,
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}];
}
];
},
maximizeIconClass() {
return ['p-dialog-header-maximize-icon pi', {
return [
'p-dialog-header-maximize-icon pi',
{
'pi-window-maximize': !this.maximized,
'pi-window-minimize': this.maximized
}];
}
];
},
ariaId() {
return UniqueComponentId();
@ -413,12 +417,12 @@ export default {
}
},
directives: {
'ripple': Ripple
ripple: Ripple
},
components: {
'Portal': Portal
}
Portal: Portal
}
};
</script>
<style>
.p-dialog-mask {
@ -484,7 +488,7 @@ export default {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-dialog-leave-active {
transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-dialog-enter-from,
.p-dialog-leave-to {
@ -501,7 +505,7 @@ export default {
.p-dialog-topright .p-dialog,
.p-dialog-bottomleft .p-dialog,
.p-dialog-bottomright .p-dialog {
margin: .75rem;
margin: 0.75rem;
transform: translate3d(0px, 0px, 0px);
}
.p-dialog-top .p-dialog-enter-active,
@ -520,7 +524,7 @@ export default {
.p-dialog-bottomleft .p-dialog-leave-active,
.p-dialog-bottomright .p-dialog-enter-active,
.p-dialog-bottomright .p-dialog-leave-active {
transition: all .3s ease-out;
transition: all 0.3s ease-out;
}
.p-dialog-top .p-dialog-enter-from,
.p-dialog-top .p-dialog-leave-to {

4
components/dialogservice/DialogService.js
View File

@ -13,7 +13,7 @@ export default {
close: (params) => {
DynamicDialogEventBus.emit('close', { instance, params });
}
}
};
DynamicDialogEventBus.emit('open', { instance });
@ -25,4 +25,4 @@ export default {
app.config.globalProperties.$dialog = DialogService;
app.provide(PrimeVueDialogSymbol, DialogService);
}
}
};

7
components/divider/Divider.d.ts vendored
View File

@ -38,14 +38,13 @@ export interface DividerSlots {
default: () => VNode[];
}
export declare type DividerEmits = {
}
export declare type DividerEmits = {};
declare class Divider extends ClassComponent<DividerProps, DividerSlots, DividerEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Divider: GlobalComponentConstructor<Divider>
Divider: GlobalComponentConstructor<Divider>;
}
}
@ -55,7 +54,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Divider](https://www.primefaces.org/primevue/showcase/#/divider)
* - [Divider](https://www.primefaces.org/primevue/divider)
*
*/
export default Divider;

17
components/divider/Divider.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="containerClass" role="separator">
<div class="p-divider-content" v-if="$slots.default">
<div :class="containerClass" role="separator" :aria-orientation="layout">
<div v-if="$slots.default" class="p-divider-content">
<slot></slot>
</div>
</div>
@ -25,17 +25,20 @@ export default {
},
computed: {
containerClass() {
return ['p-divider p-component', 'p-divider-' + this.layout, 'p-divider-' + this.type,
return [
'p-divider p-component',
'p-divider-' + this.layout,
'p-divider-' + this.type,
{ 'p-divider-left': this.layout === 'horizontal' && (!this.align || this.align === 'left') },
{ 'p-divider-center': this.layout === 'horizontal' && this.align === 'center' },
{ 'p-divider-right': this.layout === 'horizontal' && this.align === 'right' },
{'p-divider-top': this.layout === 'vertical' && (this.align === 'top')},
{ 'p-divider-top': this.layout === 'vertical' && this.align === 'top' },
{ 'p-divider-center': this.layout === 'vertical' && (!this.align || this.align === 'center') },
{ 'p-divider-bottom': this.layout === 'vertical' && this.align === 'bottom' }
];
}
}
}
};
</script>
<style>
@ -52,7 +55,7 @@ export default {
top: 50%;
left: 0;
width: 100%;
content: "";
content: '';
}
.p-divider-horizontal.p-divider-left {
@ -85,7 +88,7 @@ export default {
top: 0;
left: 50%;
height: 100%;
content: "";
content: '';
}
.p-divider-vertical.p-divider-top {

9
components/dock/Dock.d.ts vendored
View File

@ -78,14 +78,13 @@ export interface DockSlots {
}) => VNode[];
}
export declare type DockEmits = {
}
export declare type DockEmits = {};
declare class Dock extends ClassComponent<DockProps, DockSlots, DockEmits> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Dock: GlobalComponentConstructor<Dock>
Dock: GlobalComponentConstructor<Dock>;
}
}
@ -95,11 +94,11 @@ declare module '@vue/runtime-core' {
*
* Helper API:
*
* - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
* - [MenuItem](https://www.primefaces.org/primevue/menumodel)
*
* Demos:
*
* - [Dock](https://www.primefaces.org/primevue/showcase/#/dock)
* - [Dock](https://www.primefaces.org/primevue/dock)
*
*/
export default Dock;

6
components/dock/Dock.vue
View File

@ -12,7 +12,7 @@ export default {
props: {
position: {
type: String,
default: "bottom"
default: 'bottom'
},
model: null,
class: null,
@ -31,7 +31,7 @@ export default {
components: {
DockSub
}
}
};
</script>
<style>
@ -59,7 +59,7 @@ export default {
}
.p-dock-item {
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}

63
components/dock/DockSub.vue
View File

@ -1,21 +1,35 @@
<template>
<div class="p-dock-list-container">
<ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
<li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
<li v-for="(item, index) of model" :key="index" :class="itemClass(index)" role="none" @mouseenter="onItemMouseEnter(index)">
<template v-if="!templates['item']">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
<router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<a
v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
:href="href"
role="menuitem"
:class="linkClass(item, { isActive, isExactActive })"
:target="item.target"
@click="onItemClick($event, item, navigate)"
>
<template v-if="!templates['icon']">
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
<span v-ripple :class="['p-dock-action-icon', item.icon]"></span>
</template>
<component v-else :is="templates['icon']" :item="item"></component>
</a>
</router-link>
<a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
<a
v-else
v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
:href="item.url"
role="menuitem"
:class="linkClass(item)"
:target="item.target"
@click="onItemClick($event, item)"
:tabindex="disabled(item) ? null : '0'"
>
<template v-if="!templates['icon']">
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
<span v-ripple :class="['p-dock-action-icon', item.icon]"></span>
</template>
<component v-else :is="templates['icon']" :item="item"></component>
</a>
@ -50,7 +64,7 @@ export default {
data() {
return {
currentIndex: -3
}
};
},
methods: {
onListMouseLeave() {
@ -62,6 +76,7 @@ export default {
onItemClick(event, item, navigate) {
if (this.disabled(item)) {
event.preventDefault();
return;
}
@ -77,28 +92,34 @@ export default {
}
},
itemClass(index) {
return ['p-dock-item', {
'p-dock-item-second-prev': (this.currentIndex - 2) === index,
'p-dock-item-prev': (this.currentIndex - 1) === index,
return [
'p-dock-item',
{
'p-dock-item-second-prev': this.currentIndex - 2 === index,
'p-dock-item-prev': this.currentIndex - 1 === index,
'p-dock-item-current': this.currentIndex === index,
'p-dock-item-next': (this.currentIndex + 1) === index,
'p-dock-item-second-next': (this.currentIndex + 2) === index
}];
'p-dock-item-next': this.currentIndex + 1 === index,
'p-dock-item-second-next': this.currentIndex + 2 === index
}
];
},
linkClass(item, routerProps) {
return ['p-dock-action', {
return [
'p-dock-action',
{
'p-disabled': this.disabled(item),
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}];
}
];
},
disabled(item) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
}
},
directives: {
'ripple': Ripple,
'tooltip': Tooltip
}
ripple: Ripple,
tooltip: Tooltip
}
};
</script>

38
components/dropdown/Dropdown.d.ts vendored
View File

@ -1,6 +1,6 @@
import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
import { VirtualScrollerProps, VirtualScrollerItemOptions } from '../virtualscroller';
import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
type DropdownOptionLabelType = string | ((data: any) => string) | undefined;
@ -168,6 +168,10 @@ export interface DropdownProps {
* Default value is 'pi pi-spinner pi-spin'.
*/
loadingIcon?: string | undefined;
/**
* Clears the filter value when hiding the dropdown.
*/
resetFilterOnHide?: boolean;
/**
* Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
* @see VirtualScroller.VirtualScrollerProps
@ -178,6 +182,16 @@ export interface DropdownProps {
* Default value is true.
*/
autoOptionFocus?: boolean | undefined;
/**
* Whether to focus on the filter element when the overlay panel is shown.
* Default value is false.
*/
autoFilterFocus?: boolean | undefined;
/**
* When enabled, the focused option is selected.
* Default value is false.
*/
selectOnFocus?: boolean | undefined;
/**
* Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
* Default value is '{0} results are available'.
@ -210,11 +224,11 @@ export interface DropdownProps {
/**
* Defines a string value that labels an interactive element.
*/
"aria-label"?: string | undefined;
'aria-label'?: string | undefined;
/**
* Identifier of the underlying input element.
*/
"aria-labelledby"?: string | undefined;
'aria-labelledby'?: string | undefined;
}
export interface DropdownSlots {
@ -347,17 +361,17 @@ export declare type DropdownEmits = {
* Callback to invoke on value change.
* @param {DropdownChangeEvent} event - Custom change event.
*/
'change': (event: DropdownChangeEvent) => void;
change: (event: DropdownChangeEvent) => void;
/**
* Callback to invoke when the component receives focus.
* @param {Event} event - Browser event.
*/
'focus': (event: Event) => void;
focus: (event: Event) => void;
/**
* Callback to invoke when the component loses focus.
* @param {Event} event - Browser event.
*/
'blur': (event: Event) => void;
blur: (event: Event) => void;
/**
* Callback to invoke before the overlay is shown.
*/
@ -369,17 +383,17 @@ export declare type DropdownEmits = {
/**
* Callback to invoke when the overlay is shown.
*/
'show': () => void;
show: () => void;
/**
* Callback to invoke when the overlay is hidden.
*/
'hide': () => void;
hide: () => void;
/**
* Callback to invoke on filter input.
* @param {DropdownFilterEvent} event - Custom filter event.
*/
'filter': (event: DropdownFilterEvent) => void;
}
filter: (event: DropdownFilterEvent) => void;
};
declare class Dropdown extends ClassComponent<DropdownProps, DropdownSlots, DropdownEmits> {
/**
@ -400,7 +414,7 @@ declare class Dropdown extends ClassComponent<DropdownProps, DropdownSlots, Drop
declare module '@vue/runtime-core' {
interface GlobalComponents {
Dropdown: GlobalComponentConstructor<Dropdown>
Dropdown: GlobalComponentConstructor<Dropdown>;
}
}
@ -410,7 +424,7 @@ declare module '@vue/runtime-core' {
*
* Demos:
*
* - [Dropdown](https://www.primefaces.org/primevue/showcase/#/dropdown)
* - [Dropdown](https://www.primefaces.org/primevue/dropdown)
*
*/
export default Dropdown;

Some files were not shown because too many files have changed in this diff Show More