Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. felek
    F
    • Profile
    • Following 0
    • Followers 0
    • Topics 11
    • Posts 23
    • Best 3
    • Groups 0

    felek

    @felek

    3
    Reputation
    1
    Profile views
    23
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    felek Follow

    Best posts made by felek

    • RE: Quasar app in sub directory

      @Hawkeye64 I think so to. Thank You.

      posted in Help
      F
      felek
    • RE: q table add expanded row

      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,
            });
          },
      }}
      
      posted in Help
      F
      felek
    • RE: q-select how to close when not in focus

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

      posted in Help
      F
      felek

    Latest posts made by felek

    • RE: nested components and v-model

      @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)"
              />
      
      posted in Help
      F
      felek
    • nested components and v-model

      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.

      posted in Help
      F
      felek
    • RE: q-select how to close when not in focus

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

      posted in Help
      F
      felek
    • Using backgroundFetch in pwa.

      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 ?

      posted in Help
      F
      felek
    • RE: passing reactive props to $scopedSlots component wrapper

      @metalsadman yeach true

      posted in Framework
      F
      felek
    • RE: passing reactive props to $scopedSlots component wrapper

      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

      posted in Framework
      F
      felek
    • RE: passing reactive props to $scopedSlots component wrapper

      @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"
      
      posted in Framework
      F
      felek
    • RE: passing reactive props to $scopedSlots component wrapper

      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.

      posted in Framework
      F
      felek
    • passing reactive props to $scopedSlots component wrapper

      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 ?

      posted in Framework
      F
      felek
    • RE: q table add expanded row

      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,
            });
          },
      }}
      
      posted in Help
      F
      felek