flaschengeist-frontend/src/plugins/pricelist/components/BuildManual/BuildManualVolume.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 } 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;
    });
    return { volume, options };
  },
});
</script>