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

Galleria PT name updates

pull/6082/head
tugcekucukoglu 2024-07-18 10:04:59 +03:00
parent 44ed1dc381
commit 9d55f04629
4 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/primevue/src/galleria/GalleriaItem.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div :class="cx('itemsContainer')" v-bind="ptm('itemsContainer')"> <div :class="cx('itemsContainer')" v-bind="ptm('itemsContainer')">
<div :class="cx('items')" v-bind="ptm('items')"> <div :class="cx('items')" v-bind="ptm('items')">
<button v-if="showItemNavigators" v-ripple type="button" :class="cx('previousItemButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')" data-pc-group-section="itemnavigator"> <button v-if="showItemNavigators" v-ripple type="button" :class="cx('prevButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('prevButton')" data-pc-group-section="itemnavigator">
<component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('previousItemIcon')" v-bind="ptm('previousItemIcon')" /> <component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('prevIcon')" v-bind="ptm('prevIcon')" />
</button> </button>
<div :id="id + '_item_' + activeIndex" :class="cx('item')" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')"> <div :id="id + '_item_' + activeIndex" :class="cx('item')" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')">
<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="cx('nextItemButton')" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextItemButton')" data-pc-group-section="itemnavigator"> <button v-if="showItemNavigators" v-ripple type="button" :class="cx('nextButton')" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextButton')" data-pc-group-section="itemnavigator">
<component :is="templates.nextitemicon || 'ChevronRightIcon'" :class="cx('nextItemIcon')" v-bind="ptm('nextItemIcon')" /> <component :is="templates.nextitemicon || 'ChevronRightIcon'" :class="cx('nextIcon')" v-bind="ptm('nextIcon')" />
</button> </button>
<div v-if="templates['caption']" :class="cx('caption')" v-bind="ptm('caption')"> <div v-if="templates['caption']" :class="cx('caption')" v-bind="ptm('caption')">
<component v-if="templates.caption" :is="templates.caption" :item="activeItem" /> <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
@ -36,8 +36,8 @@
</template> </template>
<script> <script>
import { find, findSingle, getAttribute } from '@primeuix/utils/dom';
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { find, getAttribute, findSingle } from '@primeuix/utils/dom';
import ChevronLeftIcon from '@primevue/icons/chevronleft'; import ChevronLeftIcon from '@primevue/icons/chevronleft';
import ChevronRightIcon from '@primevue/icons/chevronright'; import ChevronRightIcon from '@primevue/icons/chevronright';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';

12
packages/primevue/src/galleria/GalleriaThumbnails.vue
View File

@ -4,15 +4,15 @@
<button <button
v-if="showThumbnailNavigators" v-if="showThumbnailNavigators"
v-ripple v-ripple
:class="cx('previousThumbnailButton')" :class="cx('thumbnailPrevButton')"
:disabled="isNavBackwardDisabled()" :disabled="isNavBackwardDisabled()"
type="button" type="button"
:aria-label="ariaPrevButtonLabel" :aria-label="ariaPrevButtonLabel"
@click="navBackward($event)" @click="navBackward($event)"
v-bind="{ ...prevButtonProps, ...ptm('previousThumbnailButton') }" v-bind="{ ...prevButtonProps, ...ptm('thumbnailPrevButton') }"
data-pc-group-section="thumbnailnavigator" data-pc-group-section="thumbnailnavigator"
> >
<component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('previousThumbnailIcon')" v-bind="ptm('previousThumbnailIcon')" /> <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('thumbnailPrevIcon')" v-bind="ptm('thumbnailPrevIcon')" />
</button> </button>
<div :class="cx('thumbnailsViewport')" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailsViewport')"> <div :class="cx('thumbnailsViewport')" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailsViewport')">
<div <div
@ -56,15 +56,15 @@
<button <button
v-if="showThumbnailNavigators" v-if="showThumbnailNavigators"
v-ripple v-ripple
:class="cx('nextThumbnailButton')" :class="cx('thumbnailNextButton')"
:disabled="isNavForwardDisabled()" :disabled="isNavForwardDisabled()"
type="button" type="button"
:aria-label="ariaNextButtonLabel" :aria-label="ariaNextButtonLabel"
@click="navForward($event)" @click="navForward($event)"
v-bind="{ ...nextButtonProps, ...ptm('nextThumbnailButton') }" v-bind="{ ...nextButtonProps, ...ptm('thumbnailNextButton') }"
data-pc-group-section="thumbnailnavigator" data-pc-group-section="thumbnailnavigator"
> >
<component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" :class="cx('nextThumbnailIcon')" v-bind="ptm('nextThumbnailIcon')" /> <component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" :class="cx('thumbnailNextIcon')" v-bind="ptm('thumbnailNextIcon')" />
</button> </button>
</div> </div>
</div> </div>

8
packages/primevue/src/galleria/style/GalleriaStyle.d.ts vendored
View File

@ -49,11 +49,11 @@ export enum GalleriaClasses {
/** /**
* Class name of the previous item button element * Class name of the previous item button element
*/ */
previousItemButton = 'p-galleria-prev-button', prevButton = 'p-galleria-prev-button',
/** /**
* Class name of the previous item icon element * Class name of the previous item icon element
*/ */
previousItemIcon = 'p-galleria-prev-icon', prevIcon = 'p-galleria-prev-icon',
/** /**
* Class name of the item element * Class name of the item element
*/ */
@ -61,11 +61,11 @@ export enum GalleriaClasses {
/** /**
* Class name of the next item button element * Class name of the next item button element
*/ */
nextItemButton = 'p-galleria-next-button', nextButton = 'p-galleria-next-button',
/** /**
* Class name of the next item icon element * Class name of the next item icon element
*/ */
nextItemIcon = 'p-galleria-next-icon', nextIcon = 'p-galleria-next-icon',
/** /**
* Class name of the caption element * Class name of the caption element
*/ */

16
packages/primevue/src/galleria/style/GalleriaStyle.js
View File

@ -438,21 +438,21 @@ const classes = {
footer: 'p-galleria-footer', footer: 'p-galleria-footer',
itemsContainer: 'p-galleria-items-container', itemsContainer: 'p-galleria-items-container',
items: 'p-galleria-items', items: 'p-galleria-items',
previousItemButton: ({ instance }) => [ prevButton: ({ instance }) => [
'p-galleria-prev-button p-galleria-nav-button', 'p-galleria-prev-button p-galleria-nav-button',
{ {
'p-disabled': instance.isNavBackwardDisabled() 'p-disabled': instance.isNavBackwardDisabled()
} }
], ],
previousItemIcon: 'p-galleria-prev-icon', prevIcon: 'p-galleria-prev-icon',
item: 'p-galleria-item', item: 'p-galleria-item',
nextItemButton: ({ instance }) => [ nextButton: ({ instance }) => [
'p-galleria-next-button p-galleria-nav-button', 'p-galleria-next-button p-galleria-nav-button',
{ {
'p-disabled': instance.isNavForwardDisabled() 'p-disabled': instance.isNavForwardDisabled()
} }
], ],
nextItemIcon: 'p-galleria-next-icon', nextIcon: 'p-galleria-next-icon',
caption: 'p-galleria-caption', caption: 'p-galleria-caption',
indicatorList: 'p-galleria-indicator-list', indicatorList: 'p-galleria-indicator-list',
indicator: ({ instance, index }) => [ indicator: ({ instance, index }) => [
@ -464,13 +464,13 @@ const classes = {
indicatorButton: 'p-galleria-indicator-button', indicatorButton: 'p-galleria-indicator-button',
thumbnails: 'p-galleria-thumbnails', thumbnails: 'p-galleria-thumbnails',
thumbnailContent: 'p-galleria-thumbnails-content', thumbnailContent: 'p-galleria-thumbnails-content',
previousThumbnailButton: ({ instance }) => [ thumbnailPrevButton: ({ instance }) => [
'p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button', 'p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button',
{ {
'p-disabled': instance.isNavBackwardDisabled() 'p-disabled': instance.isNavBackwardDisabled()
} }
], ],
previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon', thumbnailPrevIcon: 'p-galleria-thumbnail-prev-icon',
thumbnailsViewport: 'p-galleria-thumbnails-viewport', thumbnailsViewport: 'p-galleria-thumbnails-viewport',
thumbnailItems: 'p-galleria-thumbnail-items', thumbnailItems: 'p-galleria-thumbnail-items',
thumbnailItem: ({ instance, index, activeIndex }) => [ thumbnailItem: ({ instance, index, activeIndex }) => [
@ -483,13 +483,13 @@ const classes = {
} }
], ],
thumbnail: 'p-galleria-thumbnail', thumbnail: 'p-galleria-thumbnail',
nextThumbnailButton: ({ instance }) => [ thumbnailNextButton: ({ instance }) => [
'p-galleria-thumbnail-next-button p-galleria-thumbnail-nav-button', 'p-galleria-thumbnail-next-button p-galleria-thumbnail-nav-button',
{ {
'p-disabled': instance.isNavForwardDisabled() 'p-disabled': instance.isNavForwardDisabled()
} }
], ],
nextThumbnailIcon: 'p-galleria-thumbnail-next-icon' thumbnailNextIcon: 'p-galleria-thumbnail-next-icon'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({