BlitzForm QTable using body slot Popup editing #129
Description
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>