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.

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
      }
    }

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.

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/

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

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 {}.

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>

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;
}

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>

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?

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.

@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.

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 {}.

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.

Thanks looks good.

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

Example here:

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

@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.