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

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

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

        <button-input @click="change" type="primary">confirm</button-input>
        <button-input @click="edit = false">cancel</button-input>
        <button-input @click="remove" type="error">delete</button-input>
      </input-group>
    </template>
  </h2>
</template>

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

export default {
  name: "editable-headline",
  components: {InputGroup, ButtonInput, TextInput},
  props: ['value'],
  data: function () {
    return {
      input: this.value,
      edit: false
    }
  },
  methods: {
    change: function () {
      this.$emit('change', this.input);
      this.edit = false;
    },
    remove: function (event) {
      this.$emit('remove', event);
    }
  }
}
</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;
}
</style>