CSV importer and spreadsheet editor for Vue

<script setup lang="ts">
import { useTemplateRef, watchEffect } from "vue";
import "@updog/data-editor-wc";
import "@updog/data-editor-wc/styles.css";
import type { UpdogEditorElement } from "@updog/data-editor-wc";

const columns = [
  { id: "name", title: "Name" },
  {
    id: "passport",
    title: "Passport",
    validators: [{ type: "required", message: "Passport is required" }],
  },
];

const editorRef = useTemplateRef<UpdogEditorElement>("editor");

watchEffect((onCleanup) => {
  const el = editorRef.value;
  if (!el) return;
  el.configure({
    apiKey: "YOUR_API_KEY",
    columns,
    primaryKey: "passport",
    onComplete: (result) => {
      console.log(result);
      el.hide();
    },
  });
  const onClose = () => el.hide();
  el.addEventListener("close", onClose);
  onCleanup(() => el.removeEventListener("close", onClose));
});

function open() {
  editorRef.value?.show();
}
</script>

<template>
  <button type="button" @click="open">Open Importer</button>
  <updog-editor ref="editor" />
</template>