ff-operation/src/components/admin/operation/mission/DetailFormInput.vue

<template>
  <div :class="growing ? 'grow' : 'w-full'">
    <div class="flex flex-row gap-2 items-center">
      <label :for="title">{{ title }}</label>
      <lottie-player
        v-if="currentEditors.length != 0"
        src="/typing_animation.json"
        class="w-fit h-5"
        loop
        autoplay
        v-tippy="currentEditors.map((c) => c.username).join(', ')"
      />
    </div>
    <input :type="type" :id="title" v-model="value" :min="min" @focus="focused" @blur="blured" />
  </div>
</template>

<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import "@lottiefiles/lottie-player";
import type { Awareness } from "@/helpers/awareness";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    growing: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "text",
    },
    min: {
      type: String,
      default: "",
    },
    awareness: {
      type: Object as PropType<Awareness>,
      required: true,
    },
  },
  emits: ["update:model-value"],
  data() {
    return {
      typing: false,
    };
  },
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(val: string) {
        this.$emit("update:model-value", val);
      },
    },
    currentEditors() {
      return this.awareness.getEditorObjsByField(this.title);
    },
  },
  mounted() {
    this.awareness.emitter.on("change", (d) => {});
  },
  methods: {
    focused() {
      this.awareness.publishMyState({
        field: this.title,
      });
    },
    blured() {
      this.awareness.publishMyState({
        field: "blured user",
      });
    },
  },
});
</script>