[Table] New generic slots. about ui HOT 5 OPEN

<script setup lang="ts">
import { z } from "zod";
import type { FormError, FormSubmitEvent } from "#ui/types";
const formtype = z.object({
  name: z.string(),
  title: z.string(),
  email: z.string().email(),
  role: z.string(),
});

const datatype = z.object({
  id: z.number(),
  name: z.string(),
  title: z.string(),
  email: z.string().email(),
  role: z.string(),
});
type dataschema = z.output<typeof datatype>;

const people = reactive<dataschema[]>([
  {
    id: 1,
    name: "Lindsay Walton",
    title: "Front-end Developer",
    email: "[email protected]",
    role: "Member",
  },
  {
    id: 2,
    name: "Courtney Henry",
    title: "Designer",
    email: "[email protected]",
    role: "Admin",
  },
  {
    id: 3,
    name: "Tom Cook",
    title: "Director of Product",
    email: "[email protected]",
    role: "Member",
  },
  {
    id: 4,
    name: "Whitney Francis",
    title: "Copywriter",
    email: "[email protected]",
    role: "Admin",
  },
  {
    id: 5,
    name: "Leonard Krasner",
    title: "Senior Designer",
    email: "[email protected]",
    role: "Owner",
  },
]);
const edit = ref<boolean>(false);
const editIndex = ref<number>();
function select(row: dataschema) {
  edit.value = true;
  editIndex.value = row.id;
}

// const selected = ref([people[1]]);
</script>

<template>
  <UTable :rows="people" @select="select">
    <template #name-data="{ row }">
      <div class="flex items-center">
        <!-- Create a uinput that only shows when editindex is row.id else show row content -->

        <UInput v-if="editIndex === row.id" v-model="row.name" :state="row.name" />
        <span v-else>{{ row.name }}</span>
      </div>
    </template>
    <template #title-data="{ row }">
      <div class="flex items-center">
        <UInput v-if="editIndex === row.id" v-model="row.title" :state="row.title" />
        <span v-else>{{ row.title }}</span>
      </div>
    </template>
    <template #email-data="{ row }">
      <div class="flex items-center">
        <UForm :schema="datatype" :state="row">
          <UFormGroup name="email">
            <UInput v-if="editIndex === row.id" v-model="row.email" />
            <span v-else>{{ row.email }}</span>
          </UFormGroup>
        </UForm>
        <!-- <UInput v-if="editIndex === row.id" v-model="row.email" :state="row.email" /> -->
      </div>
    </template>

    <template #role-data="{ row }">
      <div class="flex items-center">
        <USelect
          v-if="editIndex === row.id"
          v-model="row.role"
          :state="row.role"
          :options="[
            { value: 'Admin', label: 'Admin' },
            { value: 'Member', label: 'Member' },
            { value: 'Owner', label: 'Owner' },
          ]"
        />
        <span v-else>{{ row.role }}</span>
      </div>
    </template>
  </UTable>
</template>