Refactor #4163 - For Galleria

This commit is contained in:
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

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;
},