ff-admin/src/components/ScanInput.vue

<template>
  <div>
    <label :for="name">{{ label }}{{ required ? "" : " (optional)" }}</label>
    <div class="relative flex flex-row items-center gap-2">
      <input ref="resultInput" class="pl-9!" :id="name" type="text" v-model="value" :required="required" />
      <QrCodeIcon class="absolute h-6 stroke-1 left-2 top-1/2 -translate-y-1/2 cursor-pointer z-10" @click="scanCode" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, markRaw, defineAsyncComponent } from "vue";
import { QrCodeIcon } from "@heroicons/vue/24/outline";
import { useModalStore } from "../stores/modal";
import { mapActions } from "pinia";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    label: String,
    name: String,
    required: {
      type: Boolean,
      default: true,
    },
    modelValue: {
      type: String,
      default: "",
      required: false,
    },
  },
  emits: ["update:model-value"],
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(val: String) {
        this.$emit("update:model-value", val);
      },
    },
  },
  methods: {
    ...mapActions(useModalStore, ["openModal"]),
    scanCode() {
      this.openModal(
        markRaw(defineAsyncComponent(() => import("@/components/CodeDetector.vue"))),
        "codeScanInput",
        (result: string) => {
          (this.$refs.resultInput as HTMLInputElement).value = result;
        }
      );
    },
  },
});
</script>