@Hawkeye64 I think so to. Thank You.

Found it.
Create custom component:
Key here is to add custom prop, register it and than can be used.

import RowExpandTwo from "./table-row-expandTwo.js";
import TableBodyTwo from "./table-bodyTwo.js";
import QTable from "quasar/src/components/table/QTable.js";

export default {
  name: "qTableExtend",
  extends: QTable,
  mixins: [RowExpandTwo, TableBodyTwo],
};

Then RowExpandTwo:

function getVal(val) {
  return Array.isArray(val) ? val.slice() : [];
}

export default {
  props: {
    expandedTwo: Array, // sync
  },

  data() {
    return {
      innerExpandedTwo: getVal(this.expandedTwo),
    };
  },

  watch: {
    expandedTwo(val) {
      this.innerExpandedTwo = getVal(val);
    },
  },

  methods: {
    isRowExpandedTwo(key) {
      return this.innerExpandedTwo.includes(key);
    },

    setExpandedTwo(val) {
      if (this.expandedTwo !== void 0) {
        this.$emit("update:expandedTwo", val);
      } else {
        this.innerExpandedTwo = val;
      }
    },

    __updateExpandedTwo(key, add) {
      const target = this.innerExpandedTwo.slice();
      const index = target.indexOf(key);

      if (add === true) {
        if (index === -1) {
          target.push(key);
          this.setExpandedTwo(target);
        }
      } else if (index !== -1) {
        target.splice(index, 1);
        this.setExpandedTwo(target);
      }
    },
  },
};

TableBodyTwo:

export default {
  methods: {
__injectBodyCommonScope(data) {
      Object.assign(data, {
        cols: this.computedCols,
        colsMap: this.computedColsMap,
        sort: this.sort,
        rowIndex: this.firstRowIndex + data.pageIndex,
        color: this.color,
        dark: this.isDark,
        dense: this.dense,
      });

      this.hasSelectionMode === true &&
        Object.defineProperty(data, "selected", {
          get: () => this.isRowSelected(data.key),
          set: (adding, evt) => {
            this.__updateSelection([data.key], [data.row], adding, evt);
          },
          configurable: true,
          enumerable: true,
        });

      Object.defineProperty(data, "expand", {
        get: () => this.isRowExpanded(data.key),
        set: (adding) => {
          this.__updateExpanded(data.key, adding);
        },
        configurable: true,
        enumerable: true,
      });

//ONLY THIS ADD
      Object.defineProperty(data, "expandTwo", {
        get: () => this.isRowExpandedTwo(data.key),
        set: (adding) => {
          this.__updateExpandedTwo(data.key, adding);
        },
        configurable: true,
        enumerable: true,
      });
    },
}}

I think there is method called hidePopup. You will have to implement event listener mouse leave and then hidePopup.

@dobbel
Yes i use that in one component but only when i want to over js / add props. Here i Also use template. For now i solved it as computed properties. Example:

computed: {
  cVal: {
    get() {
      return this.model;
    },
    set(val) {
      this.$emit("modelChanged", val);
    },
  },
},

and pass it like
v-model="cVal" to quasar component.

After in parent use like this

<inputWithButton
          .....
          :model="form.searchText"
          @modelChanged="(v) => (form.searchText = v)"
        />

Hello i create custom component that wraps quasar components with some default props.

<q-select
      rounded
      outlined
      map-options
      :name="name"
      :use-input="search"
      :clearable="clearable"
      :class="className"
      :label="label"
      :menu-offset="[0, 10]"
      :bottom-slots="bottomSlots"
      :options="cOptions"
      :placeholder="placeholder"
      v-model="cModel"
      @filter="filterFn"
    >

I crate props one of them is model. Now when i pass my model as prop to v-model i get mutation warning so i create local data cModel.

data() {
  return {
    cModel: this.model,

And watcher:

model: function (newValue, _) {
      this.cModel = newValue;
    },

However i read about passing props to v-model. And after try to implement this.

:value="model"
     @input="$emit('input', $event.target.value)"

Initial value are pass correct. However update is not working.
How can i fix that not to use internal data cModel.

I think there is method called hidePopup. You will have to implement event listener mouse leave and then hidePopup.

Hello i want to try backgroundFetch in my pwa app.
The final idea is to have array of object with links and some additional data and store them in indexdb. I did that using axios.
However i would like to try that with backgroundFetch.
In config:

workboxPluginMode: "InjectManifest",
workboxOptions: {},

Now my: custom-service-worker

import { precacheAndRoute } from "workbox-precaching";
import { register } from "register-service-worker";
import { newContentAvailable } from "src/services/notification/notyfication";
import { i18n } from "boot/i18n";

precacheAndRoute(self.__WB_MANIFEST);
console.log("custom sw11");

register(process.env.SERVICE_WORKER_FILE, {
  updated(/* registration */) {
    console.log("New content is available; please refresh.bzzzz");
    newContentAvailable(i18n.t("newContentAvailable"));
  },
});

self.addEventListener("backgroundfetchsuccess", (event) => {
  console.log("[Service Worker]: Background Fetch Success", event.registration);
});
self.addEventListener("backgroundfetchfail", (event) => {
  console.log("backgroundfetchfail", event);
});

self.addEventListener("backgroundfetchabort", (event) => {
  console.log("backgroundfetchabort", event);
});

self.addEventListener("install", (event) => {
  console.log("install", event);
});

However when i build app and deploy i can see message from: register-service-worker.js

Service worker is active.
Service worker has been registered.

When in dev tools i unregister it i get new messages from custom-service-worker . However when refresh again thaere is back that 2 messages above. Then when i start download file:

  navigator.serviceWorker.ready.then(async (swReg) => {
    console.log("swReg", swReg.backgroundFetch);
    const bgFetch = await swReg.backgroundFetch.fetch(
      "my-fetch",
      ["url"],
      {
        title: "index",
        // icons: [
        //   {
        //     sizes: "300x300",
        //     src: "/ep-5-icon.png",
        //     type: "image/png",
        //   },
        // ],
        downloadTotal: 512,
      }
    );

…
It never finish and event only fire backgroundfetchabort

Any one know maybe why ?

@metalsadman yeach true

One more think regarding to expand.
When in expand element i have

<q-input autogrow v-model="props.row.name" type="textarea" />

When i update value just keyup expand auto close why ? and can i prevent it ?

Possible workaround.
Example i can create tmp variable for input and change for submit but then i need to allow only one expand in table in the same time

@Callo I try with this. Not work for me.

<template v-for="(_, name) in $scopedSlots" v-slot:[name]="scope">
      <slot :name="name" v-bind="scope" />
    </template>

PROPS
    :title="myTitle"
    :data="myData"
    :columns="myColumns"
    :row-key="myKey"
    :grid="myGrid"
    v-bind="$attrs"
    v-on="$listeners"

ah ok so no work around thx :), there are if you look around, but i haven’t tested, and looks like a PITA to me.

Hello i create component like so: its based on q-table.

Component

<template>
  <div>
    <q-table
      :title="myTitle"
      :data="myData"
      :columns="myColumns"
      :row-key="myKey"
      :grid="myGrid"
    >
      <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
        <slot :name="name" v-bind="data"></slot>
      </template>
    </q-table>
  </div>
</template>

Some times i wish to use scoped slots and use props like so:

<template #item="props">
          <div
            class="q-table__grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3"
            style="padding: 15px"
          >
            <q-card>
              <q-card-section>
                <q-item
                  clickable
                  tag="a"
                  target="_blank"
                  :href="props.row.name"
                  >{{ props.row.name }}</q-item
                >
              </q-card-section>
              <q-card-section>
                <q-btn
                  size="sm"
                  color="accent"
                  round
                  dense
                  @click="props.expand = !props.expand"
                  :icon="
                    props.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
                  "
                ></q-btn>
                {{ props.expand }}
              </q-card-section>
            </q-card>
          </div>
        </template>

And it renders fine but expand props not working for me. I try pass :props=“props”(nearly every place to test it) with no results. What i might miss here ?

Found it.
Create custom component:
Key here is to add custom prop, register it and than can be used.

import RowExpandTwo from "./table-row-expandTwo.js";
import TableBodyTwo from "./table-bodyTwo.js";
import QTable from "quasar/src/components/table/QTable.js";

export default {
  name: "qTableExtend",
  extends: QTable,
  mixins: [RowExpandTwo, TableBodyTwo],
};

Then RowExpandTwo:

function getVal(val) {
  return Array.isArray(val) ? val.slice() : [];
}

export default {
  props: {
    expandedTwo: Array, // sync
  },

  data() {
    return {
      innerExpandedTwo: getVal(this.expandedTwo),
    };
  },

  watch: {
    expandedTwo(val) {
      this.innerExpandedTwo = getVal(val);
    },
  },

  methods: {
    isRowExpandedTwo(key) {
      return this.innerExpandedTwo.includes(key);
    },

    setExpandedTwo(val) {
      if (this.expandedTwo !== void 0) {
        this.$emit("update:expandedTwo", val);
      } else {
        this.innerExpandedTwo = val;
      }
    },

    __updateExpandedTwo(key, add) {
      const target = this.innerExpandedTwo.slice();
      const index = target.indexOf(key);

      if (add === true) {
        if (index === -1) {
          target.push(key);
          this.setExpandedTwo(target);
        }
      } else if (index !== -1) {
        target.splice(index, 1);
        this.setExpandedTwo(target);
      }
    },
  },
};

TableBodyTwo:

export default {
  methods: {
__injectBodyCommonScope(data) {
      Object.assign(data, {
        cols: this.computedCols,
        colsMap: this.computedColsMap,
        sort: this.sort,
        rowIndex: this.firstRowIndex + data.pageIndex,
        color: this.color,
        dark: this.isDark,
        dense: this.dense,
      });

      this.hasSelectionMode === true &&
        Object.defineProperty(data, "selected", {
          get: () => this.isRowSelected(data.key),
          set: (adding, evt) => {
            this.__updateSelection([data.key], [data.row], adding, evt);
          },
          configurable: true,
          enumerable: true,
        });

      Object.defineProperty(data, "expand", {
        get: () => this.isRowExpanded(data.key),
        set: (adding) => {
          this.__updateExpanded(data.key, adding);
        },
        configurable: true,
        enumerable: true,
      });

//ONLY THIS ADD
      Object.defineProperty(data, "expandTwo", {
        get: () => this.isRowExpandedTwo(data.key),
        set: (adding) => {
          this.__updateExpandedTwo(data.key, adding);
        },
        configurable: true,
        enumerable: true,
      });
    },
}}