PyCS/webui/src/components/base/editable-headline.vue

<template>
  <h2>
    <img alt="delete" class="delete"
         src="@/assets/icons/x-circle.svg"
         @click="$emit('remove', $event)">

    <template v-if="!edit">
      {{ value }}

      <img alt="edit" class="edit"
           src="@/assets/icons/pencil.svg"
           @click="edit = true">
    </template>
    <template v-else>
      <text-input placeholder="name" v-model="input"
                  @change="change" @enter="change"/>

      <button-row>
        <button-input @click="change" type="primary">confirm</button-input>
        <button-input @click="edit = false">cancel</button-input>
      </button-row>
    </template>
  </h2>
</template>

<script>
import TextInput from "@/components/base/text-input";
import ButtonInput from "@/components/base/button-input";
import ButtonRow from "@/components/base/button-row";

export default {
  name: "editable-headline",
  components: {ButtonRow, ButtonInput, TextInput},
  props: ['value'],
  data: function () {
    return {
      input: this.value,
      edit: false
    }
  },
  methods: {
    change: function () {
      this.$emit('change', this.input);
      this.edit = false;
    }
  }
}
</script>

<style scoped>
h2 {
  display: flex;
  align-items: center;
  margin: 0;
}

img {
  width: 1.5rem;
}

.delete {
  margin-right: 1.5rem;
}

.edit,
.button-row {
  margin-left: 0.75rem;
}

.text-input {
  flex-grow: 1;
  margin-top: -0.5rem;
}
</style>