44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<q-carousel
|
||
|
|
v-model="volume"
|
||
|
|
transition-prev="slide-right"
|
||
|
|
transition-next="slide-left"
|
||
|
|
animated
|
||
|
|
swipeable
|
||
|
|
control-color="primary"
|
||
|
|
navigation
|
||
|
|
arrows
|
||
|
|
>
|
||
|
|
<q-carousel-slide v-for="volume in volumes" :key="volume.id" :name="volume.id">
|
||
|
|
<build-manual-volume-part :volume="volume" />
|
||
|
|
</q-carousel-slide>
|
||
|
|
</q-carousel>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, PropType, ref, computed } from 'vue';
|
||
|
|
import { DrinkPriceVolume, usePricelistStore } from '../../store';
|
||
|
|
import BuildManualVolumePart from './BuildManualVolumePart.vue';
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'BuildManualVolume',
|
||
|
|
components: { BuildManualVolumePart },
|
||
|
|
props: {
|
||
|
|
volumes: {
|
||
|
|
type: Array as PropType<Array<DrinkPriceVolume>>,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
setup(props) {
|
||
|
|
const store = usePricelistStore();
|
||
|
|
const volume = ref(props.volumes[0].id);
|
||
|
|
const options = computed(() => {
|
||
|
|
let ret: Array<{ label: number; value: number }> = [];
|
||
|
|
props.volumes.forEach((volume: DrinkPriceVolume) => {
|
||
|
|
ret.push({ label: volume.id, value: volume.id });
|
||
|
|
});
|
||
|
|
return ret;
|
||
|
|
});
|
||
|
|
return { volume, options };
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|