Refactor #3832 Refactor #3833 - slot fixes

pull/3853/head
Tuğçe Küçükoğlu 2023-04-07 09:45:02 +03:00
parent b7d611727c
commit dbf14c217d
9 changed files with 16 additions and 33 deletions

View File

@ -15,9 +15,12 @@
<div v-ripple class="p-cascadeselect-item-content" @click="onOptionClick($event, processedOption)"> <div v-ripple class="p-cascadeselect-item-content" @click="onOptionClick($event, processedOption)">
<component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" /> <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
<span v-else class="p-cascadeselect-item-text">{{ getOptionLabelToRender(processedOption) }}</span> <span v-else class="p-cascadeselect-item-text">{{ getOptionLabelToRender(processedOption) }}</span>
<slot v-if="isOptionGroup(processedOption)" name="optiongroupicon"> <component
<component :is="templates['optiongroupicon'] ? templates['optiongroupicon'] : optionGroupIcon ? 'span' : 'AngleRightIcon'" :class="['p-cascadeselect-group-icon', optionGroupIcon]" aria-hidden="true" /> v-if="isOptionGroup(processedOption)"
</slot> :is="templates['optiongroupicon'] ? templates['optiongroupicon'] : optionGroupIcon ? 'span' : 'AngleRightIcon'"
:class="['p-cascadeselect-group-icon', optionGroupIcon]"
aria-hidden="true"
/>
</div> </div>
<CascadeSelectSub <CascadeSelectSub
v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)" v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)"

View File

@ -27,9 +27,7 @@
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span> <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
<slot v-if="getItemProp(processedItem, 'items')" name="submenuicon"> <component v-if="getItemProp(processedItem, 'items')" :is="template.submenuicon || 'AngleRightIcon'" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<component :is="template.submenuicon || 'AngleRightIcon'" :active="isItemActive(processedItem)" class="p-submenu-icon" />
</slot>
</a> </a>
</template> </template>
<component v-else :is="template.item" :item="processedItem.item"></component> <component v-else :is="template.item" :item="processedItem.item"></component>

View File

@ -1,9 +1,7 @@
<template> <template>
<div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle" v-bind="$attrs.containerProps"> <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle" v-bind="$attrs.containerProps">
<button v-if="$attrs.fullScreen" v-ripple autofocus type="button" class="p-galleria-close p-link" :aria-label="closeAriaLabel" @click="$emit('mask-hide')"> <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" class="p-galleria-close p-link" :aria-label="closeAriaLabel" @click="$emit('mask-hide')">
<slot name="closeicon">
<component :is="$attrs.templates['closeicon'] || 'TimesIcon'" class="p-galleria-close-icon" /> <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" class="p-galleria-close-icon" />
</slot>
</button> </button>
<div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header"> <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
<component :is="$attrs.templates['header']" /> <component :is="$attrs.templates['header']" />

View File

@ -2,17 +2,13 @@
<div class="p-galleria-item-wrapper"> <div class="p-galleria-item-wrapper">
<div class="p-galleria-item-container"> <div class="p-galleria-item-container">
<button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()"> <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
<slot name="itemprevicon">
<component :is="templates.itemprevicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" /> <component :is="templates.itemprevicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" />
</slot>
</button> </button>
<div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel"> <div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel">
<component v-if="templates.item" :is="templates.item" :item="activeItem" /> <component v-if="templates.item" :is="templates.item" :item="activeItem" />
</div> </div>
<button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()"> <button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
<slot name="itemnexticon">
<component :is="templates.itemnexticon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" /> <component :is="templates.itemnexticon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" />
</slot>
</button> </button>
<div v-if="templates['caption']" class="p-galleria-caption"> <div v-if="templates['caption']" class="p-galleria-caption">
<component v-if="templates.caption" :is="templates.caption" :item="activeItem" /> <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />

View File

@ -2,9 +2,7 @@
<div class="p-galleria-thumbnail-wrapper"> <div class="p-galleria-thumbnail-wrapper">
<div class="p-galleria-thumbnail-container"> <div class="p-galleria-thumbnail-container">
<button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" :disabled="isNavBackwardDisabled()" type="button" :aria-label="ariaPrevButtonLabel" @click="navBackward($event)" v-bind="prevButtonProps"> <button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" :disabled="isNavBackwardDisabled()" type="button" :aria-label="ariaPrevButtonLabel" @click="navBackward($event)" v-bind="prevButtonProps">
<slot name="prevthumbnailicon">
<component :is="templates.prevthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" /> <component :is="templates.prevthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" />
</slot>
</button> </button>
<div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }"> <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }">
<div ref="itemsContainer" class="p-galleria-thumbnail-items" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)"> <div ref="itemsContainer" class="p-galleria-thumbnail-items" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
@ -32,9 +30,7 @@
</div> </div>
</div> </div>
<button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" :disabled="isNavForwardDisabled()" type="button" :aria-label="ariaNextButtonLabel" @click="navForward($event)" v-bind="nextButtonProps"> <button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" :disabled="isNavForwardDisabled()" type="button" :aria-label="ariaNextButtonLabel" @click="navForward($event)" v-bind="nextButtonProps">
<slot name="nextthumbnailicon">
<component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-galleria-thumbnail-prev-icon" /> <component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-galleria-thumbnail-prev-icon" />
</slot>
</button> </button>
</div> </div>
</div> </div>

View File

@ -27,9 +27,7 @@
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span> <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
<slot v-if="isItemGroup(processedItem)" name="submenuicon"> <component v-if="isItemGroup(processedItem)" :is="template.submenuicon || (horizontal ? 'AngleDownIcon' : 'AngleRightIcon')" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<component :is="template.submenuicon || (horizontal ? 'AngleDownIcon' : 'AngleRightIcon')" :active="isItemActive(processedItem)" class="p-submenu-icon" />
</slot>
</a> </a>
</template> </template>
<component v-else :is="template.item" :item="processedItem.item"></component> <component v-else :is="template.item" :item="processedItem.item"></component>

View File

@ -26,9 +26,7 @@
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span> <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
<slot v-if="getItemProp(processedItem, 'items')" name="submenuicon"> <component v-if="getItemProp(processedItem, 'items')" :is="template.submenuicon || (root ? 'AngleDownIcon' : 'AngleRightIcon')" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<component :is="template.submenuicon || (root ? 'AngleDownIcon' : 'AngleRightIcon')" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" />
</slot>
</a> </a>
</template> </template>
<component v-else :is="template.item" :item="processedItem.item"></component> <component v-else :is="template.item" :item="processedItem.item"></component>

View File

@ -22,9 +22,7 @@
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<slot v-if="isItemGroup(processedItem)" name="submenuicon"> <component v-if="isItemGroup(processedItem)" :is="template.submenuicon || (isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-submenu-icon pi-fw" :active="isItemActive(processedItem)" />
<component :is="template.submenuicon || (isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-submenu-icon pi-fw" :active="isItemActive(processedItem)" />
</slot>
<span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span> <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
</a> </a>

View File

@ -26,9 +26,7 @@
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
<span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span> <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
<span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span> <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
<slot v-if="getItemProp(processedItem, 'items')" name="submenuicon"> <component v-if="getItemProp(processedItem, 'items')" :is="template.submenuicon || 'AngleRightIcon'" class="p-submenu-icon" :active="isItemActive(processedItem)" />
<component :is="template.submenuicon || 'AngleRightIcon'" class="p-submenu-icon" :active="isItemActive(processedItem)" />
</slot>
</a> </a>
</template> </template>
<component v-else :is="template.item" :item="processedItem.item"></component> <component v-else :is="template.item" :item="processedItem.item"></component>