99 lines
2.4 KiB
Text
99 lines
2.4 KiB
Text
<template>
|
|
<div class="container-fluid">
|
|
<div class="row mb-5">
|
|
<div class="col text-center">
|
|
<img
|
|
v-if="data.logo.src !== null"
|
|
class="img-fluid"
|
|
:src="data.logo.src"
|
|
:width="data.logo.width"
|
|
>
|
|
<h1 v-if="data.title !== null" class="py-3 px-5 m-5 h1 d-inline-block badge bg-dark text-bg-dark rounded-pill">
|
|
{{ data.title }}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<template
|
|
v-for="(item, itemIndex) in data.items"
|
|
:key="itemIndex"
|
|
>
|
|
<div
|
|
v-if="item"
|
|
:data="item"
|
|
:class="`${data.itemsByLine ? `col-${12 / data.itemsByLine}`: 'col-6 col-md-4 col-lg-3 col-xl-2'} item`"
|
|
>
|
|
<img
|
|
class="img-fluid"
|
|
:src="item.img"
|
|
:title="item.name"
|
|
:alt="item.name"
|
|
@click="itemClicked(item)"
|
|
>
|
|
</div>
|
|
<ShelfRow v-if="item && data.itemsByLine" :row-index="itemIndex" :max-by-line="data.itemsByLine" />
|
|
<ShelfRow v-else-if="item" :row-index="itemIndex" />
|
|
</template>
|
|
|
|
<template v-if="!isMultOf(data.items.length, 6) && !isMultOf(data.items.length, 4) && !isMultOf(data.items.length, 3) && !isMultOf(data.items.length, 2)">
|
|
<div class="col-12 shelf" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
|
|
export default defineComponent({
|
|
name: "RangesShow",
|
|
props: {
|
|
dataJson: {
|
|
type: Object as PropType<Data>,
|
|
required: true,
|
|
},
|
|
},
|
|
emits: {
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
selected: (payload: { item: Item }) => true
|
|
},
|
|
data(): {
|
|
data: Data;
|
|
} {
|
|
return {
|
|
data: {
|
|
logo: {
|
|
src: "",
|
|
width: ""
|
|
},
|
|
title: "",
|
|
modalSettings: {
|
|
ctaBtnText: "",
|
|
ctaDisclaimerText: "",
|
|
ctaSaveBtn: ""
|
|
},
|
|
itemsByLine: 0,
|
|
items: []
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
},
|
|
watch :{
|
|
dataJson() {
|
|
this.data = this.dataJson;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.data = this.dataJson;
|
|
},
|
|
methods: {
|
|
itemClicked(item: Item): void {
|
|
this.$emit("selected", { item });
|
|
},
|
|
isMultOf(numerator:number, divider: number):boolean {
|
|
return numerator % divider === 0;
|
|
},
|
|
},
|
|
});
|
|
</script>
|