63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
<template>
|
|
<q-carousel
|
|
v-model="volume"
|
|
transition-prev="slide-right"
|
|
transition-next="slide-left"
|
|
animated
|
|
swipeable
|
|
control-color="primary"
|
|
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>
|
|
<div class="full-width row justify-center q-pa-sm">
|
|
<div class="q-px-sm">
|
|
<q-btn-toggle v-model="volume" :options="btn_options" rounded />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent, PropType, ref, computed } from 'vue';
|
|
import { DrinkPriceVolume } 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 _volume = ref<number>();
|
|
const volume = computed({
|
|
get: () => {
|
|
if (_volume.value !== undefined) {
|
|
return _volume.value;
|
|
}
|
|
return props.volumes[0].id;
|
|
},
|
|
set: (val: number) => (_volume.value = val),
|
|
});
|
|
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;
|
|
});
|
|
const btn_options = computed<Array<{ label: string; value: number }>>(() => {
|
|
const retVal: Array<{ label: string; value: number }> = [];
|
|
props.volumes.forEach((volume: DrinkPriceVolume) => {
|
|
retVal.push({ label: `${(<number>volume.volume).toFixed(3)}L`, value: volume.id });
|
|
});
|
|
return retVal;
|
|
});
|
|
return { volume, options, btn_options };
|
|
},
|
|
});
|
|
</script>
|