BlitzForm QTable using body slot Popup editing

[wpplumber]

Thank you for offering this useful library with a doc too.

Is it possible to use QTr , QTd as slot component or it is open for html tags only?

<template>
  <q-page class="flex flex-center">
    <!-- <div class="col flex-center q-pa-xl">
      <BlitzTable :schemaColumns="schemaColumns" :rows="rows" />
    </div> -->

    <div class="col flex-center q-pa-xl">
      <BlitzForm
        v-model="formData"
        :schema="schema"
        :columnCount="2"
        :internalLabels="true"
        gridGap="2rem"
      />

      <div class="q-mt-md bg-black text-white q-pa-md">
        <pre><code>{{`// formData\n${JSON.stringify(formData, undefined, 2)}`}}</code></pre>
      </div>
    </div>
  </q-page>
</template>

<script>
import { defineComponent, ref } from "vue";
import { BlitzTable, BlitzForm } from "blitzar";
import "blitzar/dist/style.css";

// Make sure QInput, QToggle, etc. are globally registered via `quasar.conf.js`!

const schemaColumns = [
  { id: "firstName", label: "First Name" },
  { id: "lastName", label: "Last Name" },
  { id: "company", label: "Company" },
  { id: "birthdate", label: "Birthdate" },
  {
    id: "balance",
    label: "Balance",
    parseValue: (val) => val.toLocaleString(),
  },
];

const columnsToo = [
  {
    name: "name",
    required: true,
    label: "Dessert (100g serving)",
    align: "left",
    field: (row) => row.name,
    format: (val) => `${val}`,
    sortable: true,
  },
  {
    name: "calories",
    align: "center",
    label: "Calories",
    field: "calories",
    sortable: true,
  },
  { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
  { name: "carbs", label: "Carbs (g)", field: "carbs" },
  { name: "protein", label: "Protein (g)", field: "protein" },
];

const rowsToo = [
  {
    name: "Frozen Yogurt",
    calories: 159,
    fat: 6.0,
    carbs: 24,
    protein: 4.0,
    sodium: 87,
    calcium: "14%",
    iron: "1%",
  },
  {
    name: "Ice cream sandwich",
    calories: 237,
    fat: 9.0,
    carbs: 37,
    protein: 4.3,
    sodium: 129,
    calcium: "8%",
    iron: "1%",
  },
  {
    name: "Eclair",
    calories: 262,
    fat: 16.0,
    carbs: 23,
    protein: 6.0,
    sodium: 337,
    calcium: "6%",
    iron: "7%",
  },
  {
    name: "Cupcake",
    calories: 305,
    fat: 3.7,
    carbs: 67,
    protein: 4.3,
    sodium: 413,
    calcium: "3%",
    iron: "8%",
  },
  {
    name: "Gingerbread",
    calories: 356,
    fat: 16.0,
    carbs: 49,
    protein: 3.9,
    sodium: 327,
    calcium: "7%",
    iron: "16%",
  },
  {
    name: "Jelly bean",
    calories: 375,
    fat: 0.0,
    carbs: 94,
    protein: 0.0,
    sodium: 50,
    calcium: "0%",
    iron: "0%",
  },
  {
    name: "Lollipop",
    calories: 392,
    fat: 0.2,
    carbs: 98,
    protein: 0,
    sodium: 38,
    calcium: "0%",
    iron: "2%",
  },
  {
    name: "Honeycomb",
    calories: 408,
    fat: 3.2,
    carbs: 87,
    protein: 6.5,
    sodium: 562,
    calcium: "0%",
    iron: "45%",
  },
  {
    name: "Donut",
    calories: 452,
    fat: 25.0,
    carbs: 51,
    protein: 4.9,
    sodium: 326,
    calcium: "2%",
    iron: "22%",
  },
  {
    name: "KitKat",
    calories: 518,
    fat: 26.0,
    carbs: 65,
    protein: 7,
    sodium: 54,
    calcium: "12%",
    iron: "6%",
  },
];

const rows = [
  {
    balance: 93683,
    birthdate: "1946-07-22",
    firstName: "Harper",
    lastName: "Nolan",
    company: "Tortor At Risus LLC",
  },
  { balance: 69632, birthdate: '1945-11-27', firstName: 'Whoopi', lastName: 'David', company: 'Ipsum Institute' }, // prettier-ignore
  { balance: 75903, birthdate: '1955-10-01', firstName: 'Peter', lastName: 'Mendez', company: 'Curabitur Dictum LLC' }, // prettier-ignore
  { balance: 53509, birthdate: '1977-06-21', firstName: 'Harrison', lastName: 'Miller', company: 'Enim Etiam Imperdiet Industries' }, // prettier-ignore
  { balance: 93450, birthdate: '2017-11-27', firstName: 'Wendy', lastName: 'Strong', company: 'Ac PC' }, // prettier-ignore
  { balance: 64590, birthdate: '1975-12-10', firstName: 'Kyla', lastName: 'Dalton', company: 'Urna Nec Luctus PC' }, // prettier-ignore
  { balance: 72444, birthdate: '2001-07-31', firstName: 'Aimee', lastName: 'Stephens', company: 'Tempus Incorporated' }, // prettier-ignore
  { balance: 99856, birthdate: '1972-01-28', firstName: 'Phelan', lastName: 'Jennings', company: 'Consectetuer Adipiscing Elit LLP' }, // prettier-ignore
  { balance: 83325, birthdate: '1966-11-17', firstName: 'Xena', lastName: 'Emerson', company: 'Mollis Foundation' }, // prettier-ignore
  { balance: 50981, birthdate: '1995-07-26', firstName: 'Althea', lastName: 'Mcdaniel', company: 'Non Foundation' }, // prettier-ignore
  { balance: 97869, birthdate: '1945-10-01', firstName: 'Shad', lastName: 'Beard', company: 'Mollis Incorporated' }, // prettier-ignore
];

const schema = [
  {
    id: "name",
    span: 1,
    component: "QInput", // make sure it's registered in `quasar.conf.js`
    label: "Superhero name",
    subLabel: "Think of something cool.",
    required: true,
  },
  {
    id: "powerOrigin",
    label: "Power origin",
    subLabel: "Where does your power come from?",
    component: "QSelect", // make sure it's registered in `quasar.conf.js`
    options: [
      { value: "", label: "Select one", disabled: true },
      { value: "mutation", label: "Mutation" },
      { value: "self", label: "Self taught" },
      { value: "item", label: "Magic item" },
      { value: "gear", label: "Gear" },
    ],
  },
  {
    id: "power",
    span: 1,
    component: "QInput", // make sure it's registered in `quasar.conf.js`
    label: "Power",
    subLabel:
      "Fill in a number. (this will get formatted as a number in the formData)",
    parseInput: (val) => Number(val),
    type: "number",
  },
  {
    id: "roleModel",
    span: 1,
    component: "QSelect", // make sure it's registered in `quasar.conf.js`
    label: "Role model",
    subLabel: "Who do you look up to?",
    options: [
      { value: "", label: "Select one", disabled: true },
      { value: "captain-america", label: "Steve Rogers/Captain America" },
      { value: "iron-man", label: "Tony Stark/Iron Man" },
      { value: "thor-odinson", label: "Thor Odinson" },
      { value: "the-hulk", label: "Bruce Banner/The Hulk" },
      { value: "black-widow", label: "Natasha Romanoff/Black Widow" },
      { value: "hawkeye", label: "Clint Barton/Hawkeye" },
      { value: "quicksilver", label: "Pietro Maximoff/Quicksilver" },
      { value: "scarlet-witch", label: "Wanda Maximoff/Scarlet Witch" },
      { value: "the-vision", label: "The Vision" },
      { value: "war-machine", label: "James Rhodes/War Machine" },
      { value: "falcon", label: "Sam Wilson/Falcon" },
      { value: "the-winter-soldier", label: "Bucky Barnes/The Winter Soldier" },
      { value: "black-panther", slot: "T'Challa/Black Panther" },
      { value: "doctor-strange", label: "Stephen Strange/Doctor Strange" },
      { value: "spider-man", label: "Peter Parker/Spider-Man" },
      { value: "ant-man", label: "Scott Lang/Ant-Man (Giant-Man)" },
      { value: "wasp", label: "Hope van Dyne/Wasp" },
      { value: "captain-marvel", label: "Carol Danvers/Captain Marvel" },
      { value: "star-lord", label: "Peter Quill/Star-Lord" },
      { value: "gamora", label: "Gamora" },
      { value: "drax-the-destroyer", label: "Drax the Destroyer" },
      { value: "rocket-raccoon", label: "Rocket (Raccoon)" },
      { value: "groot", label: "(Baby, Teenage) Groot" },
      { value: "mantis", label: "Mantis" },
      { value: "daredevil", label: "Matthew Murdock/Daredevil" },
      { value: "jessica-jones", label: "Jessica Jones (Jewel)" },
      { value: "luke-cage", label: "Carl Lucas/Luke Cage (Power Man)" },
      { value: "iron-fist", label: "Danny Rand/Iron Fist" },
      { value: "the-punisher", label: "Frank Castle/The Punisher" },
    ],
  },
  {
    id: "powerUps",
    span: 1,
    component: "QOptionGroup", // make sure it's registered in `quasar.conf.js`
    type: "checkbox",
    defaultValue: () => [],
    label: "Choose some power-ups",
    columnCount: 3,
    options: [
      { value: "iso-8", label: "Magic crystal" },
      { value: "hp-potion", label: "Health potion" },
      { value: "energy-potion", label: "Energy drink" },
    ],
  },
  { span: 1 },
  {
    id: "consent",
    component: "QToggle", // make sure it's registered in `quasar.conf.js`
    span: 1,
    label: "Do you agree with our terms?",
    rules: [(val) => val || "You must accept our terms"],
    defaultValue: false,
  },
  {
    id: "submissionDate",
    span: 1,
    component: "QInput", // make sure it's registered in `quasar.conf.js`
    type: "date",
    label: "Date of submission",
  },
  {
    id: "sims",
    component: "QTable", // make sure it's registered in `quasar.conf.js`
    title: "Treats",
    rows: rowsToo,
    columns: columnsToo,
    rowKey: "name",
    dense: true,
    class: ["my-sticky-header-table"],
    cardClass: "bg-amber-5 text-brown",
    tableClass: "text-grey-8",
    tableHeaderClass: "text-brown",
    slots: {
      body: {
        component: "q-tr",
        // props: "props",
        slot: [
          {
            component: "q-td",
            key: "name",
            // props: "props",
            slot: {
              // vModel: "props.row.name",
              // vSlot: "scope",
              component: "q-popup-edit", // make sure it's registered in `quasar.conf.js`
              slot: {
                // vModel: "scope.value",
                dense: true,
                autofocus: true,
                component: "q-input",
              },
            },
          },
          {
            component: "q-td",
            // key: "calories",
            // props: "props",
            slot: {
              // vModel: "props.row.calories",
              // vSlot: "scope",
              component: "q-popup-edit", // make sure it's registered in `quasar.conf.js`
              slot: {
                // vModel: "scope.value",
                dense: true,
                autofocus: true,
                component: "q-input",
              },
            },
          },
          {
            component: "q-td",
            // key: "fat",
            // props: "props",
            slot: {
              // vModel: "props.row.fat",
              // vSlot: "scope",
              component: "q-popup-edit", // make sure it's registered in `quasar.conf.js`
              slot: {
                // vModel: "scope.value",
                dense: true,
                autofocus: true,
                component: "q-input",
              },
            },
          },
          {
            component: "q-td",
            // key: "carbs",
            // props: "props",
            slot: {
              // vModel: "props.row.carbs",
              // vSlot: "scope",
              component: "q-popup-edit", // make sure it's registered in `quasar.conf.js`
              slot: {
                // vModel: "scope.value",
                dense: true,
                autofocus: true,
                component: "q-input",
              },
            },
          },
          {
            component: "q-td",
            // key: "protein",
            // props: "props",
            slot: {
              // vModel: "props.row.protein",
              // vSlot: "scope",
              component: "q-popup-edit", // make sure it's registered in `quasar.conf.js`
              slot: {
                // vModel: "scope.value",
                dense: true,
                autofocus: true,
                component: "q-input",
              },
            },
          },
        ],
      },
    },
    // events: {
    //   click: (val, { id, label }) =>
    //     alert(`focussed: 「${label}」`, ` (field id: ${id})`),
    // },
  },
];

export default defineComponent({
  name: "PageIndex",
  components: {
    // BlitzTable,
    BlitzForm,
  },

  setup() {
    const formData = ref({});
    return { rows, schemaColumns, formData, schema };
  },
});
</script>
<style lang="sass">
.my-sticky-header-table
  /* height or max-height is important */
  height: 310px

  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th
    /* bg color is important for th; just specify one */
    background-color: #c1f4cd

  thead tr th
    position: sticky
    z-index: 1
  thead tr:first-child th
    top: 0

  /* this is when the loading indicator appears */
  &.q-table--loading thead tr:last-child th
    /* height of all previous header rows */
    top: 48px
</style>