pull/5507/head
mertsincan 2024-03-18 12:24:02 +00:00
commit 5318a081e5
9 changed files with 6 additions and 150 deletions

View File

@ -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)"

View File

@ -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',

View File

@ -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;
}

View File

@ -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

View File

@ -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.

View File

@ -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>

View File

@ -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;

View File

@ -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>

View File

@ -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>