parent
b7d611727c
commit
dbf14c217d
|
@ -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)"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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']" />
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue