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

Refactor #4163 - For Galleria

pull/4176/head
Tuğçe Küçükoğlu 2023-07-20 11:57:56 +03:00
parent 671fb20b44
commit f38724d56e
3 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/galleria/Galleria.d.ts vendored
View File

@ -101,6 +101,10 @@ export interface GalleriaPassThroughOptions {
* Uses to pass attributes to the indicator's DOM element. * Uses to pass attributes to the indicator's DOM element.
*/ */
indicator?: GalleriaPassThroughOptionType; indicator?: GalleriaPassThroughOptionType;
/**
* Uses to pass attributes to the indicator button's DOM element.
*/
indicatorButton?: GalleriaPassThroughOptionType;
/** /**
* Uses to pass attributes to the thumbnail wrapper's DOM element. * Uses to pass attributes to the thumbnail wrapper's DOM element.
*/ */

21
components/lib/galleria/GalleriaContent.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="[cx('root'), $attrs.containerClass]" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...ptm('root') }" data-pc-name="galleria"> <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="[cx('root'), $attrs.containerClass]" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...getPTOptions('root') }" data-pc-name="galleria">
<button v-if="$attrs.fullScreen" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="ptm('closeButton')"> <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="getPTOptions('closeButton')">
<component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="ptm('closeIcon')" /> <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="getPTOptions('closeIcon')" />
</button> </button>
<div v-if="$attrs.templates && $attrs.templates['header']" :class="cx('header')" v-bind="ptm('header')"> <div v-if="$attrs.templates && $attrs.templates['header']" :class="cx('header')" v-bind="getPTOptions('header')">
<component :is="$attrs.templates['header']" /> <component :is="$attrs.templates['header']" />
</div> </div>
<div :class="cx('content')" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="ptm('content')"> <div :class="cx('content')" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="getPTOptions('content')">
<GalleriaItem <GalleriaItem
:id="id" :id="id"
v-model:activeIndex="activeIndex" v-model:activeIndex="activeIndex"
@ -44,7 +44,7 @@
:unstyled="unstyled" :unstyled="unstyled"
/> />
</div> </div>
<div v-if="$attrs.templates && $attrs.templates['footer']" :class="cx('footer')" v-bind="ptm('footer')"> <div v-if="$attrs.templates && $attrs.templates['footer']" :class="cx('footer')" v-bind="getPTOptions('footer')">
<component :is="$attrs.templates['footer']" /> <component :is="$attrs.templates['footer']" />
</div> </div>
</div> </div>
@ -98,6 +98,15 @@ export default {
} }
}, },
methods: { methods: {
getPTOptions(key) {
return this.ptm(key, {
props: {
...this.$attrs,
pt: this.pt,
unstyled: this.unstyled
}
});
},
isAutoPlayActive() { isAutoPlayActive() {
return this.slideShowActive; return this.slideShowActive;
}, },

2
components/lib/galleria/GalleriaItem.vue
View File

@ -29,7 +29,7 @@
v-bind="ptm('indicator')" v-bind="ptm('indicator')"
:data-p-highlight="isIndicatorItemActive(index)" :data-p-highlight="isIndicatorItemActive(index)"
> >
<button v-if="!templates['indicator']" type="button" tabindex="-1" :class="cx('indicatorButton')"></button> <button v-if="!templates['indicator']" type="button" tabindex="-1" :class="cx('indicatorButton')" v-bind="ptm('indicatorButton')"></button>
<component v-if="templates.indicator" :is="templates.indicator" :index="index" /> <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
</li> </li>
</ul> </ul>