No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Zyme
    Z
    • Profile
    • Following 0
    • Followers 0
    • Topics 10
    • Posts 24
    • Best 7
    • Groups 0

    Zyme

    @Zyme

    9
    Reputation
    510
    Profile views
    24
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    Zyme Follow

    Best posts made by Zyme

    • RE: Context menu not closing on click

      Okay figured it out.

      When you use a v-for you need to apply an index.

      So changing to:

      <div v-for="(item, index) in subDirectories">
      

      And:

      <q-item @click="renameItemAction(item.path), $refs.context[index].close()">
      

      Makes it work.

      posted in Help
      Z
      Zyme
    • RE: File / directory select?

      Figured it out:

      <template>
        <main>
          <q-field helper="Path to data store">
          
            <q-input clearable v-model="settings.data_path" stack-label="Data storage" />
            
            <input type="file" id="dataPath" v-on:change="setDataPath" ref="fileInput" hidden />
      
          </q-field>
          <q-btn color="primary" v-on:click="selectPath">Set data path</q-btn>
        </main>
      </template>
      

      …

      methods: {
            selectPath () {
              console.log('Selecting path for data store')
      
              this.$refs.fileInput.click()
            },
      
            setDataPath (file) {
              this.settings.data_path = file.target.files[0].path
            }
          }
      
      posted in Help
      Z
      Zyme
    • Feature request: Side menu with icons always showing

      Can you add a side menu where you can only see the icons when it is folded?

      If you look at this for example:

      https://adminlte.io/themes/AdminLTE/pages/UI/general.html

      And hit the menu icon, you can see it fold up and the icons are visible.

      Instead of hiding the entire menu like the drawer does now.

      posted in Framework
      Z
      Zyme
    • RE: QForm - Form Fields Generator

      I need something like this for my new project.

      Could you use JSON schema spec for this?

      Found a bunch of dead projects like this but not for Quasar components.

      Basically looking for this https://github.com/icebob/vue-form-generator/

      posted in Show & Tell
      Z
      Zyme
    • Context menu not closing on click

      I have a context menu I want to close when I click an item. But it doesn’t and throws an error.

      I did like the sample code says:

          <div class="row">
              <div v-for="item in subDirectories">
                <div class="col" @click="navigateToDirectory(item.path)">
                  <q-icon name="folder" size="2.5em"/>
                  <q-context-menu ref="context">
                    <q-list link style="min-width: 150px; max-height: 300px;">
                      <q-item @click="">
                        <q-icon name="mode edit" style="margin-right: 10px; font-size: 1.2em" />
                        <q-item-main label="Edit" />
                      </q-item>
                      <q-item @click="renameItemAction(item.path), $refs.context.close()">
                        <q-icon name="insert drive file" style="margin-right: 10px; font-size: 1.2em" />
                        <q-item-main label="Rename" />
                      </q-item>
                      <q-item @click="">
                        <q-icon name="delete" style="margin-right: 10px; font-size: 1.2em" />
                        <q-item-main label="Delete" />
                      </q-item>
                    </q-list>
                  </q-context-menu>
                  <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]" :delay="500">{{ item.name }}</q-tooltip>
                  <p>{{ item.name }}</p>
                </div>
              </div>
            </div>
      

      Error:

      TypeError: _vm.$refs.context.close is not a function
      

      What is wrong?

      I also tried this.$refs.context.close

      posted in Help
      Z
      Zyme
    • Change vuex store with modules syntax?

      The default Quasar syntax for the store really bothers me. It has way too much “export const” repetition going on.

      Example here: https://github.com/slowaways/quasar-documentation-pp/blob/master/src/store/layout/mutations.js

      What I would like is more like this:
      https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/store/modules/cart.js

      But in multiple files. But I can’t seem to get it working.

      My getters.js:

      const getters = {
        getAllSignals (state, getters) {
          return state.signalsList
        }
      }
      
      export default {
        getters
      }
      

      index.js for the module:

      import state from './state'
      import getters from './getters'
      
      export default {
        namespaced: true,
        state,
        getters,
      }
      

      What am I doing wrong?
      Error:

      Uncaught Error: [vuex] getters should be function but "getters.getters" in module "signals" is {}.
      
      posted in Help
      Z
      Zyme
    • RE: Put components in data table columns?

      Solved it with:

      <!-- slot name syntax: body-cell-<column_name> -->
        <q-td slot="body-cell-desc" slot-scope="props" :props="props">
          <q-chip small color="secondary">{{ props.value }}</q-chip>
        </q-td>
      
      posted in Help
      Z
      Zyme

    Latest posts made by Zyme

    • CSS selector for data table?

      I am trying to style my data table using scoped CSS but I simply can’t.

      I applied a custom class to my q-table called “price-table”.

      Then I tried hundreds of different selectors to try and style the elements but nothing is applied when I use scoped.

      When I remove scoped however, it works…

      How do I do this?

      CSS selectors I tested to try and change the th font color for example:

      // Works without "scoped"
      .price-table table th {
        color: red;
      }
      
      posted in Help
      Z
      Zyme
    • RE: Put components in data table columns?

      Solved it with:

      <!-- slot name syntax: body-cell-<column_name> -->
        <q-td slot="body-cell-desc" slot-scope="props" :props="props">
          <q-chip small color="secondary">{{ props.value }}</q-chip>
        </q-td>
      
      posted in Help
      Z
      Zyme
    • Put components in data table columns?

      Is there a way to put component in data table?

      For example a q-btn in one of the columns that I can click on?

      posted in Help
      Z
      Zyme
    • RE: Difference between this.$store.state.search.query and this.$store.getters['search/getQuery']

      I looked into this issue recently and the conclusion I came to was this:

      Both return the same value if you are just accessing raw data. But a getter can manipulate the data before passing it along.

      If you are accessing the state directly throughout your app on many places, and you want to manipulate the data, for example change the number formatting or whatever. It wil become a pain to change it on all places.

      If you used a getter you only change this in one place.

      posted in Help
      Z
      Zyme
    • RE: Change tooltip animation?

      @hawkeye64 said in Change tooltip animation?:

      Here’s documentation: https://quasar-framework.org/components/tooltip.html
      Look at properties for anchor and self.
      This is my go to tooltip position:

      <q-tooltip anchor="bottom middle" self="top middle">Play/Pause</q-tooltip>
      

      But depending where the tooltip shows up, I’ve had to adjust it a bit so the display doesn’t hide something:

      <q-tooltip anchor="top middle" self="bottom middle">Date/Time</q-tooltip>
      

      Hope that helps!

      That just changes where the tooltip appears, not how it appears. It still folds out with the same animation.

      posted in Help
      Z
      Zyme
    • Change vuex store with modules syntax?

      The default Quasar syntax for the store really bothers me. It has way too much “export const” repetition going on.

      Example here: https://github.com/slowaways/quasar-documentation-pp/blob/master/src/store/layout/mutations.js

      What I would like is more like this:
      https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/store/modules/cart.js

      But in multiple files. But I can’t seem to get it working.

      My getters.js:

      const getters = {
        getAllSignals (state, getters) {
          return state.signalsList
        }
      }
      
      export default {
        getters
      }
      

      index.js for the module:

      import state from './state'
      import getters from './getters'
      
      export default {
        namespaced: true,
        state,
        getters,
      }
      

      What am I doing wrong?
      Error:

      Uncaught Error: [vuex] getters should be function but "getters.getters" in module "signals" is {}.
      
      posted in Help
      Z
      Zyme
    • Change tooltip animation?

      How do I change a tooltip animation direction?

      Right now it “folds out” from top to bottom, but I would like it to fold out from left to right.

      The actual positioning is correct, just not the animation itself.

      posted in Help
      Z
      Zyme
    • RE: Nested menu?

      Thanks looks good.

      posted in Help
      Z
      Zyme
    • Nested menu?

      Can I achieve a nested side menu like I can with Vuetify?

      Example here:

      https://vuetifyjs.com/en/components/navigation-drawers#example-nested

      posted in Help
      Z
      Zyme
    • RE: QUploader warning in console

      @rstoenescu I think that template structure is better laid out. I don’t want to have two node_modules taking up 1,2 GB in my project… when I can have one at 600 mb. Also it has a lot of built in features like great error messages in console which I did not find in electron wrapper.

      Check it out, maybe you can get some inspiration from it to improve your wrapper.

      But still I find it odd that the spinner will not work when I am importing it. When everything else seems to work.

      I can’t find what kind of magic the electron wrapper is doing to fix this.

      posted in Framework
      Z
      Zyme