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

paret parameter added

pull/4931/head
tugcekucukoglu 2023-12-05 12:49:37 +03:00
parent 65f6191ad4
commit d382e6c960
6 changed files with 110 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/lib/badge/Badge.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<span :class="cx('root')" v-bind="ptm('root')" data-pc-name="badge"> <span :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="badge">
<slot>{{ value }}</slot> <slot>{{ value }}</slot>
</span> </span>
</template> </template>
@ -9,6 +9,16 @@ import BaseBadge from './BaseBadge.vue';
export default { export default {
name: 'Badge', name: 'Badge',
extends: BaseBadge extends: BaseBadge,
methods: {
getPTOptions(key) {
return this.ptm(key, {
parent: {
props: this.$parent?.$props,
state: this.$parent?.$data
}
});
}
}
}; };
</script> </script>

73
components/lib/dropdown/Dropdown.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="dropdown"> <div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="getPTOptions('root')" data-pc-name="dropdown">
<input <input
v-if="editable" v-if="editable"
ref="focusInput" ref="focusInput"
@ -23,7 +23,7 @@
@blur="onBlur" @blur="onBlur"
@keydown="onKeyDown" @keydown="onKeyDown"
@input="onEditableInput" @input="onEditableInput"
v-bind="{ ...inputProps, ...ptm('input') }" v-bind="{ ...inputProps, ...getPTOptions('input') }"
/> />
<span <span
v-else v-else
@ -43,25 +43,25 @@
@focus="onFocus" @focus="onFocus"
@blur="onBlur" @blur="onBlur"
@keydown="onKeyDown" @keydown="onKeyDown"
v-bind="{ ...inputProps, ...ptm('input') }" v-bind="{ ...inputProps, ...getPTOptions('input') }"
> >
<slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot> <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
</span> </span>
<slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick" :clearCallback="onClearClick"> <slot v-if="showClear && modelValue != null" name="clearicon" :class="cx('clearIcon')" :onClick="onClearClick" :clearCallback="onClearClick">
<component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="{ ...clearIconProps, ...ptm('clearIcon') }" data-pc-section="clearicon" /> <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="{ ...clearIconProps, ...getPTOptions('clearIcon') }" data-pc-section="clearicon" />
</slot> </slot>
<div :class="cx('trigger')" v-bind="ptm('trigger')"> <div :class="cx('trigger')" v-bind="getPTOptions('trigger')">
<slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')"> <slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
<span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" /> <span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="getPTOptions('loadingIcon')" />
<SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" /> <SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="getPTOptions('loadingIcon')" />
</slot> </slot>
<slot v-else name="dropdownicon" :class="cx('dropdownIcon')"> <slot v-else name="dropdownicon" :class="cx('dropdownIcon')">
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" /> <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" v-bind="getPTOptions('dropdownIcon')" />
</slot> </slot>
</div> </div>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="getPTOptions('transition')">
<div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }"> <div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...getPTOptions('panel') }">
<span <span
ref="firstHiddenFocusableElementOnOverlay" ref="firstHiddenFocusableElementOnOverlay"
role="presentation" role="presentation"
@ -69,13 +69,13 @@
class="p-hidden-accessible p-hidden-focusable" class="p-hidden-accessible p-hidden-focusable"
:tabindex="0" :tabindex="0"
@focus="onFirstHiddenFocus" @focus="onFirstHiddenFocus"
v-bind="ptm('hiddenFirstFocusableEl')" v-bind="getPTOptions('hiddenFirstFocusableEl')"
:data-p-hidden-accessible="true" :data-p-hidden-accessible="true"
:data-p-hidden-focusable="true" :data-p-hidden-focusable="true"
></span> ></span>
<slot name="header" :value="modelValue" :options="visibleOptions"></slot> <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
<div v-if="filter" :class="cx('header')" v-bind="ptm('header')"> <div v-if="filter" :class="cx('header')" v-bind="getPTOptions('header')">
<div :class="cx('filterContainer')" v-bind="ptm('filterContainer')"> <div :class="cx('filterContainer')" v-bind="getPTOptions('filterContainer')">
<input <input
ref="filterInput" ref="filterInput"
type="text" type="text"
@ -90,22 +90,29 @@
@keydown="onFilterKeyDown" @keydown="onFilterKeyDown"
@blur="onFilterBlur" @blur="onFilterBlur"
@input="onFilterChange" @input="onFilterChange"
v-bind="{ ...filterInputProps, ...ptm('filterInput') }" v-bind="{ ...filterInputProps, ...getPTOptions('filterInput') }"
/> />
<slot name="filtericon" :class="cx('filterIcon')"> <slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'FilterIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" /> <component :is="filterIcon ? 'span' : 'FilterIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="getPTOptions('filterIcon')" />
</slot> </slot>
</div> </div>
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true"> <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="getPTOptions('hiddenFilterResult')" :data-p-hidden-accessible="true">
{{ filterResultMessageText }} {{ filterResultMessageText }}
</span> </span>
</div> </div>
<div :class="cx('wrapper')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')"> <div :class="cx('wrapper')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="getPTOptions('wrapper')">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')"> <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="getPTOptions('virtualScroller')">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }"> <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')"> <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="getPTOptions('list')">
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))"> <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="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')"> <li
v-if="isOptionGroup(option)"
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('itemGroup')"
role="option"
v-bind="getPTOptions('itemGroup')"
>
<slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot> <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
</li> </li>
<li <li
@ -125,15 +132,15 @@
:data-p-highlight="isSelected(option)" :data-p-highlight="isSelected(option)"
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)" :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)" :data-p-disabled="isOptionDisabled(option)"
v-bind="getPTOptions(option, getItemOptions, i, 'item')" v-bind="getPTItemOptions(option, getItemOptions, i, 'item')"
> >
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot> <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
</li> </li>
</template> </template>
<li v-if="filterValue && (!items || (items && items.length === 0))" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true"> <li v-if="filterValue && (!items || (items && items.length === 0))" :class="cx('emptyMessage')" role="option" v-bind="getPTOptions('emptyMessage')" :data-p-hidden-accessible="true">
<slot name="emptyfilter">{{ emptyFilterMessageText }}</slot> <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
</li> </li>
<li v-else-if="!options || (options && options.length === 0)" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true"> <li v-else-if="!options || (options && options.length === 0)" :class="cx('emptyMessage')" role="option" v-bind="getPTOptions('emptyMessage')" :data-p-hidden-accessible="true">
<slot name="empty">{{ emptyMessageText }}</slot> <slot name="empty">{{ emptyMessageText }}</slot>
</li> </li>
</ul> </ul>
@ -144,10 +151,10 @@
</VirtualScroller> </VirtualScroller>
</div> </div>
<slot name="footer" :value="modelValue" :options="visibleOptions"></slot> <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
<span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true"> <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="getPTOptions('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
{{ emptyMessageText }} {{ emptyMessageText }}
</span> </span>
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true"> <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="getPTOptions('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
{{ selectedMessageText }} {{ selectedMessageText }}
</span> </span>
<span <span
@ -157,7 +164,7 @@
class="p-hidden-accessible p-hidden-focusable" class="p-hidden-accessible p-hidden-focusable"
:tabindex="0" :tabindex="0"
@focus="onLastHiddenFocus" @focus="onLastHiddenFocus"
v-bind="ptm('hiddenLastFocusableEl')" v-bind="getPTOptions('hiddenLastFocusableEl')"
:data-p-hidden-accessible="true" :data-p-hidden-accessible="true"
:data-p-hidden-focusable="true" :data-p-hidden-focusable="true"
></span> ></span>
@ -253,8 +260,20 @@ export default {
getOptionRenderKey(option, index) { getOptionRenderKey(option, index) {
return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index; return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
}, },
getPTOptions(option, itemOptions, index, key) { getPTOptions(key) {
return this.ptm(key, { return this.ptm(key, {
parent: {
props: this.$parent?.$props,
state: this.$parent?.$data
}
});
},
getPTItemOptions(option, itemOptions, index, key) {
return this.ptm(key, {
parent: {
props: this.$parent?.$props,
state: this.$parent?.$data
},
context: { context: {
selected: this.isSelected(option), selected: this.isSelected(option),
focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions), focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),

4
components/lib/inputtext/InputText.vue
View File

@ -20,6 +20,10 @@ export default {
}, },
ptmParams() { ptmParams() {
return { return {
parent: {
props: this.$parent?.$props,
state: this.$parent?.$data
},
context: { context: {
filled: this.filled, filled: this.filled,
disabled: this.$attrs.disabled || this.$attrs.disabled === '' disabled: this.$attrs.disabled || this.$attrs.disabled === ''

24
components/lib/message/Message.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<transition name="p-message" appear v-bind="ptm('transition')"> <transition name="p-message" appear v-bind="getPTOptions('transition')">
<div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')" data-pc-name="message"> <div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="getPTOptions('root')" data-pc-name="message">
<slot v-if="$slots.container" name="container" :onClose="close" :closeCallback="close"></slot> <slot v-if="$slots.container" name="container" :onClose="close" :closeCallback="close"></slot>
<div v-else :class="cx('wrapper')" v-bind="ptm('wrapper')"> <div v-else :class="cx('wrapper')" v-bind="getPTOptions('wrapper')">
<slot name="messageicon" class="p-message-icon"> <slot name="messageicon" class="p-message-icon">
<component :is="icon ? 'span' : iconComponent" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></component> <component :is="icon ? 'span' : iconComponent" :class="[cx('icon'), icon]" v-bind="getPTOptions('icon')"></component>
</slot> </slot>
<div class="p-message-text" :class="cx('text')" v-bind="ptm('text')"> <div class="p-message-text" :class="cx('text')" v-bind="getPTOptions('text')">
<slot></slot> <slot></slot>
</div> </div>
<button v-if="closable" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...ptm('button'), ...ptm('closeButton') }"> <button v-if="closable" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...getPTOptions('button'), ...getPTOptions('closeButton') }">
<slot name="closeicon"> <slot name="closeicon">
<i v-if="closeIcon" :class="[cx('closeIcon'), closeIcon]" v-bind="{ ...ptm('buttonIcon'), ...ptm('closeIcon') }" /> <i v-if="closeIcon" :class="[cx('closeIcon'), closeIcon]" v-bind="{ ...getPTOptions('buttonIcon'), ...getPTOptions('closeIcon') }" />
<TimesIcon v-else :class="[cx('closeIcon'), closeIcon]" v-bind="{ ...ptm('buttonIcon'), ...ptm('closeIcon') }" /> <TimesIcon v-else :class="[cx('closeIcon'), closeIcon]" v-bind="{ ...getPTOptions('buttonIcon'), ...getPTOptions('closeIcon') }" />
</slot> </slot>
</button> </button>
</div> </div>
@ -52,6 +52,14 @@ export default {
} }
}, },
methods: { methods: {
getPTOptions(key) {
return this.ptm(key, {
parent: {
props: this.$parent?.$props,
state: this.$parent?.$data
}
});
},
close(event) { close(event) {
this.visible = false; this.visible = false;
this.$emit('close', event); this.$emit('close', event);

20
components/lib/progressbar/ProgressBar.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptm('root')"> <div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="getPTOptions('root')">
<div v-if="determinate" :class="cx('value')" :style="progressStyle" v-bind="ptm('value')"> <div v-if="determinate" :class="cx('value')" :style="progressStyle" v-bind="getPTOptions('value')">
<div v-if="value != null && value !== 0 && showValue" :class="cx('label')" v-bind="ptm('label')"> <div v-if="value != null && value !== 0 && showValue" :class="cx('label')" v-bind="getPTOptions('label')">
<slot>{{ value + '%' }}</slot> <slot>{{ value + '%' }}</slot>
</div> </div>
</div> </div>
<div v-if="indeterminate" :class="cx('container')" v-bind="ptm('container')"> <div v-if="indeterminate" :class="cx('container')" v-bind="getPTOptions('container')">
<div :class="cx('value')" v-bind="ptm('value')"></div> <div :class="cx('value')" v-bind="getPTOptions('value')"></div>
</div> </div>
</div> </div>
</template> </template>
@ -17,6 +17,16 @@ import BaseProgressBar from './BaseProgressBar.vue';
export default { export default {
name: 'ProgressBar', name: 'ProgressBar',
extends: BaseProgressBar, extends: BaseProgressBar,
methods: {
getPTOptions(key) {
return this.ptm(key, {
parent: {
props: this.$parent?.$props,
state: this.$parent?.$data
}
});
}
},
computed: { computed: {
progressStyle() { progressStyle() {
return { return {

26
components/lib/tree/Tree.vue
View File

@ -1,21 +1,21 @@
<template> <template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="tree"> <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="tree">
<template v-if="loading && loadingMode === 'mask'"> <template v-if="loading && loadingMode === 'mask'">
<div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')"> <div :class="cx('loadingOverlay')" v-bind="getPTOptions('loadingOverlay')">
<slot name="loadingicon" :class="cx('loadingIcon')"> <slot name="loadingicon" :class="cx('loadingIcon')">
<i v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" /> <i v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" v-bind="getPTOptions('loadingIcon')" />
<SpinnerIcon v-else spin :class="cx('loadingIcon')" v-bind="ptm('loadingIcon')" /> <SpinnerIcon v-else spin :class="cx('loadingIcon')" v-bind="getPTOptions('loadingIcon')" />
</slot> </slot>
</div> </div>
</template> </template>
<div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')"> <div v-if="filter" :class="cx('filterContainer')" v-bind="getPTOptions('filterContainer')">
<input v-model="filterValue" type="text" autocomplete="off" :class="cx('input')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('input')" /> <input v-model="filterValue" type="text" autocomplete="off" :class="cx('input')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="getPTOptions('input')" />
<slot name="searchicon" :class="cx('searchIcon')"> <slot name="searchicon" :class="cx('searchIcon')">
<SearchIcon :class="cx('searchIcon')" v-bind="ptm('searchIcon')" /> <SearchIcon :class="cx('searchIcon')" v-bind="getPTOptions('searchIcon')" />
</slot> </slot>
</div> </div>
<div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')"> <div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="getPTOptions('wrapper')">
<ul :class="cx('container')" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('container')"> <ul :class="cx('container')" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="getPTOptions('container')">
<TreeNode <TreeNode
v-for="(node, index) of valueToRender" v-for="(node, index) of valueToRender"
:key="node.key" :key="node.key"
@ -61,6 +61,14 @@ export default {
} }
}, },
methods: { methods: {
getPTOptions(key) {
return this.ptm(key, {
parent: {
props: this.$parent?.$props,
state: this.$parent?.$data
}
});
},
onNodeToggle(node) { onNodeToggle(node) {
const key = node.key; const key = node.key;