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.
*/
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.
*/

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

@ -1,12 +1,12 @@
<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">
<button v-if="$attrs.fullScreen" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="ptm('closeButton')">
<component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="ptm('closeIcon')" />
<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="getPTOptions('closeButton')">
<component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="getPTOptions('closeIcon')" />
</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']" />
</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
:id="id"
v-model:activeIndex="activeIndex"
@ -44,7 +44,7 @@
:unstyled="unstyled"
/>
</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']" />
</div>
</div>
@ -98,6 +98,15 @@ export default {
}
},
methods: {
getPTOptions(key) {
return this.ptm(key, {
props: {
...this.$attrs,
pt: this.pt,
unstyled: this.unstyled
}
});
},
isAutoPlayActive() {
return this.slideShowActive;
},

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

@ -29,7 +29,7 @@
v-bind="ptm('indicator')"
: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" />
</li>
</ul>