Merge branch 'v4' of https://github.com/primefaces/primevue into v4
commit
5318a081e5
|
@ -19,7 +19,7 @@
|
|||
<template v-for="(processedItem, index) of model" :key="index">
|
||||
<li
|
||||
:id="getItemId(index)"
|
||||
:class="cx('menuitem', { processedItem, index, id: getItemId(index) })"
|
||||
:class="cx('menuitem', { processedItem, id: getItemId(index) })"
|
||||
role="menuitem"
|
||||
:aria-label="processedItem.label"
|
||||
:aria-disabled="disabled(processedItem)"
|
||||
|
|
|
@ -10,16 +10,11 @@ const classes = {
|
|||
],
|
||||
container: 'p-dock-list-container',
|
||||
menu: 'p-dock-list',
|
||||
menuitem: ({ instance, processedItem, index, id }) => [
|
||||
menuitem: ({ instance, processedItem, id }) => [
|
||||
'p-dock-item',
|
||||
{
|
||||
'p-focus': instance.isItemActive(id),
|
||||
'p-disabled': instance.disabled(processedItem),
|
||||
'p-dock-item-second-prev': instance.currentIndex - 2 === index,
|
||||
'p-dock-item-prev': instance.currentIndex - 1 === index,
|
||||
'p-dock-item-current': instance.currentIndex === index,
|
||||
'p-dock-item-next': instance.currentIndex + 1 === index,
|
||||
'p-dock-item-second-next': instance.currentIndex + 2 === index
|
||||
'p-disabled': instance.disabled(processedItem)
|
||||
}
|
||||
],
|
||||
content: 'p-menuitem-content',
|
||||
|
|
|
@ -107,7 +107,7 @@ export default {
|
|||
});
|
||||
},
|
||||
onNodeClick(event) {
|
||||
if (DomHandler.getAttribute(event.target, 'nodeToggler') || DomHandler.getAttribute(event.target, 'nodeTogglerIcon')) {
|
||||
if (DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetoggler') || DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglericon')) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
@ -10,10 +10,6 @@ export default {
|
|||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showCloseIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
appendTo: {
|
||||
type: [String, Object],
|
||||
default: 'body'
|
||||
|
@ -30,10 +26,6 @@ export default {
|
|||
type: Object,
|
||||
default: null
|
||||
},
|
||||
closeIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
closeOnEscape: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
import { TransitionProps, VNode } from 'vue';
|
||||
import { ComponentHooks } from '../basecomponent';
|
||||
import { PassThroughOptions } from '../passthrough';
|
||||
import { ClassComponent, GlobalComponentConstructor, PassThrough, HintedString } from '../ts-helpers';
|
||||
import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
|
||||
|
||||
export declare type OverlayPanelPassThroughOptionType = OverlayPanelPassThroughAttributes | ((options: OverlayPanelPassThroughMethodOptions) => OverlayPanelPassThroughAttributes | string) | string | null | undefined;
|
||||
|
||||
|
@ -59,14 +59,6 @@ export interface OverlayPanelPassThroughOptions {
|
|||
* Used to pass attributes to the content's DOM element.
|
||||
*/
|
||||
content?: OverlayPanelPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the close button's DOM element.
|
||||
*/
|
||||
closeButton?: OverlayPanelPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the close icon's DOM element.
|
||||
*/
|
||||
closeIcon?: OverlayPanelPassThroughOptionType;
|
||||
/**
|
||||
* Used to manage all lifecycle hooks.
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
|
@ -127,11 +119,6 @@ export interface OverlayPanelProps {
|
|||
* @defaultValue true
|
||||
*/
|
||||
dismissable?: boolean;
|
||||
/**
|
||||
* When enabled, displays a close icon at top right corner.
|
||||
* @defaultValue false
|
||||
*/
|
||||
showCloseIcon?: boolean;
|
||||
/**
|
||||
* A valid query selector or an HTMLElement to specify where the overlay gets attached.
|
||||
* @defaultValue body
|
||||
|
@ -151,11 +138,6 @@ export interface OverlayPanelProps {
|
|||
* Object literal to define widths per screen size.
|
||||
*/
|
||||
breakpoints?: OverlayPanelBreakpoints;
|
||||
/**
|
||||
* Icon to display in the overlaypanel close button.
|
||||
* @deprecated since v3.27.0. Use 'closeicon' slot.
|
||||
*/
|
||||
closeIcon?: string | undefined;
|
||||
/**
|
||||
* Used to pass attributes to DOM elements inside the component.
|
||||
* @type {OverlayPanelPassThroughOptions}
|
||||
|
@ -186,10 +168,6 @@ export interface OverlayPanelSlots {
|
|||
* Custom content template.
|
||||
*/
|
||||
default(): VNode[];
|
||||
/**
|
||||
* Custom close icon template.
|
||||
*/
|
||||
closeicon(): VNode[];
|
||||
/**
|
||||
* Custom container slot.
|
||||
* @param {Object} scope - container slot's params.
|
||||
|
|
|
@ -7,11 +7,6 @@
|
|||
<div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<button v-if="showCloseIcon" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
|
||||
<slot name="closeicon">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
|
||||
</slot>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
|
@ -20,7 +15,6 @@
|
|||
|
||||
<script>
|
||||
import FocusTrap from 'primevue/focustrap';
|
||||
import TimesIcon from 'primevue/icons/times';
|
||||
import OverlayEventBus from 'primevue/overlayeventbus';
|
||||
import Portal from 'primevue/portal';
|
||||
import Ripple from 'primevue/ripple';
|
||||
|
@ -306,9 +300,6 @@ export default {
|
|||
computed: {
|
||||
attributeSelector() {
|
||||
return UniqueComponentId();
|
||||
},
|
||||
closeAriaLabel() {
|
||||
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
|
@ -316,8 +307,7 @@ export default {
|
|||
ripple: Ripple
|
||||
},
|
||||
components: {
|
||||
Portal: Portal,
|
||||
TimesIcon
|
||||
Portal
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -52,21 +52,6 @@ p-dock-item.p-focus {
|
|||
height: 3rem;
|
||||
}
|
||||
|
||||
.p-dock-item-second-prev,
|
||||
.p-dock-item-second-next {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.p-dock-item-prev,
|
||||
.p-dock-item-next {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
.p-dock-item-current {
|
||||
transform: scale(1.6);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-dock-top {
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
@ -115,38 +100,6 @@ p-dock-item.p-focus {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-dock-top .p-dock-item-second-prev,
|
||||
.p-dock-top .p-dock-item-second-next,
|
||||
.p-dock-bottom .p-dock-item-second-prev,
|
||||
.p-dock-bottom .p-dock-item-second-next {
|
||||
margin: 0 0.9rem;
|
||||
}
|
||||
.p-dock-top .p-dock-item-prev,
|
||||
.p-dock-top .p-dock-item-next,
|
||||
.p-dock-bottom .p-dock-item-prev,
|
||||
.p-dock-bottom .p-dock-item-next {
|
||||
margin: 0 1.3rem;
|
||||
}
|
||||
.p-dock-top .p-dock-item-current,
|
||||
.p-dock-bottom .p-dock-item-current {
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
.p-dock-left .p-dock-item-second-prev,
|
||||
.p-dock-left .p-dock-item-second-next,
|
||||
.p-dock-right .p-dock-item-second-prev,
|
||||
.p-dock-right .p-dock-item-second-next {
|
||||
margin: 0.9rem 0;
|
||||
}
|
||||
.p-dock-left .p-dock-item-prev,
|
||||
.p-dock-left .p-dock-item-next,
|
||||
.p-dock-right .p-dock-item-prev,
|
||||
.p-dock-right .p-dock-item-next {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
.p-dock-left .p-dock-item-current,
|
||||
.p-dock-right .p-dock-item-current {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.p-dock-mobile.p-dock-top .p-dock-list-container,
|
||||
.p-dock-mobile.p-dock-bottom .p-dock-list-container {
|
||||
overflow-x: auto;
|
||||
|
|
|
@ -217,32 +217,6 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Close Button Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><i>enter</i></td>
|
||||
<td>Closes the popup and moves focus to the multiselect element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>space</i></td>
|
||||
<td>Closes the popup and moves focus to the multiselect element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i>escape</i></td>
|
||||
<td>Closes the popup and moves focus to the multiselect element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -38,31 +38,5 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Close Button Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<i>enter</i>
|
||||
</td>
|
||||
<td>Closes the popup and moves focus to the trigger.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i>space</i>
|
||||
</td>
|
||||
<td>Closes the popup and moves focus to the trigger.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue