flaschengeist-frontend/src/plugins/pricelist/components/CalculationTable/BuildManual.vue

<template>
  <div
    v-for="(step, index) in steps"
    :key="index"
    class="full-width row q-gutter-sm justify-between q-py-sm"
  >
    <div class="row">
      <div>{{ index + 1 }}.</div>
      <div class="q-pl-sm">
        {{ step }}
      </div>
    </div>
    <q-btn
      v-if="editable"
      round
      color="negative"
      size="sm"
      icon="mdi-delete"
      @click="deleteStep(index)"
    />
  </div>
  <div v-if="editable" class="full-width row q-gutter-sm justify-between">
    <q-input v-model="newStep" filled label="Arbeitsschritt" dense />
    <q-btn label="Schritt hinzufügen" dense @click="addStep" />
  </div>
</template>

<script lang="ts">
import { PropType, defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'BuildManual',
  props: {
    steps: {
      type: Array as PropType<Array<string>>,
    },
    editable: {
      type: Boolean,
      default: true,
    },
  },
  emits: {
    deleteStep: (index: number) => index,
    addStep: (val: string) => val,
  },
  setup(_, { emit }) {
    const newStep = ref('');
    function deleteStep(index: number) {
      emit('deleteStep', index);
    }
    function addStep() {
      emit('addStep', newStep.value);
      newStep.value = '';
    }
    return { newStep, addStep, deleteStep };
  },
});
</script>

<style scoped></style>