hi,
it’s not a quasar question, but you can use vue-adal (exemple in repo)

https://github.com/survirtual/vue-adal

https://github.com/AzureAD/azure-activedirectory-library-for-js

Hi, sorry it’s not very clear for me.

whatsapp use markdown ?
wysiwyg create an html text, but you dont want real html ?
quasar editor (wysiwyg) let you creating button, you can just create whatever you want as button and component
in my opinion, you want to recreate the wheel

hi,
if you want to change the color of the line or the point under the line, just change css

for the line

.q-slider__track-container--h{ background: red }

for the point/maker the 2 first color are for the makers and lasts color for the line…

background-image: repeating-linear-gradient(90deg,red,red,2px,transparent 0,transparent)
```

Hi all,
I would like to integrate Skeleton into my app.
https://quasar.dev/vue-components/skeleton

I load my data from a method (axios consumes an api) called in the mounted.
I can load a “skeleton” data and update my DOM from this value, but i dont know if it’s the best way

axios({
        method: 'GET',
        url: process.env.API_URL + '/method/' + this.user.id + '/' + this.day,
        headers: { 'Content-Type': 'application/json' }
      })
        .then(response => {
          this.poste = response.data
         this.skeleton = false
        })
        .catch((e) => {
          this.$q.notify({ message: e, type: 'negative' })
        })

        <q-item-section avatar>
          <q-skeleton type="QAvatar" animation="fade" v-if="skeleton" />
          <q-avatar v-else><img :src="poste.avatar"><q-avatar/>
        </q-item-section>
```

hi, it is possible that <q-td auto-width interfere with <q-table dense can you try to delete auto-width ?

a dot instead what ?
can you be more explicit?

you juste want an empty badge ?

<q-btn push color="white" text-color="primary" label="Unread Mails">
      <q-badge color="orange" floating>&nbsp;</q-badge>
    </q-btn>

you want a exclamation ?

<q-btn push color="white" text-color="primary" label="Unread Mails">
     <q-badge color="orange" floating>!</q-badge>
   </q-btn>

you want an icon ?

<q-btn push color="white" text-color="primary" label="Unread Mails">
     <q-badge color="orange" floating><q-icon name="warning" /></q-badge>
   </q-btn>

Hi,
i’m not an expert, but, i dont think you understand how vuex can help you.
first, i dont think to get data directly by state is really good.
second,you cant change your data directly.

https://forum.quasar-framework.org/topic/3607/solved-qpopupedit-in-qtable-with-vuex-data-source-do-not-emitted-save-event
this post can help you more than me good luck

Hi all,

I integrated the darkmode plugin in one of my developments.

It’s very nice on chrome, but when I test in firefox, it doesn’t matter if dark mode is activated in my browser, console.log(this.$q.dark.isActive); always returns true …

in quasar.conf.js i set dark mode status on auto

In firefox, i select the clear template, i delete cookies and cache and refresh my app page, but it’s always dark…

Hi,
i never deploy to firebase, but, can you try to change the destination by “/index.html” instead of “/dist/spa/index.html”
you already specify public directory previously.

https://quasar.dev/vue-components/table#Popup-editing

you can edit 1 by 1 cellule of your table.
if you want editing à line, you can code this, i think is not really hard.

https://forum.quasar-framework.org/topic/2923/solved-q-select-on-change-event-not-triggered/5 ?

Hi @igor_local with your code, it’s more easier

globaly, if all your checkbox are the same data, you cant have the behavior you expect.

if your v-for point on an array of object, your checkbox must to point on a data of your object

for exemple:

in your data
posts: [
{ id: 1, title: ‘my first title’, check: false},
{ id: 2, title: ‘my second title’, check: false},
…
]

in your template:
<div v-for="(post, i) in posts">
{{ post.title }}
<q-checkbox v-model=“post.check” />

Now that I see the solution, I understand.
thank you so much

Thank you for your answer, however, I do not understand what you want me to do.

You propose that I create a new data replacing “options” in the v-model? and I suppose I have to create a watcher to follow and modify this new data according to the evolution of options?

Hi all,

I have a menu in a parent.
When I click on the menu button, I want to trigger a dialog in a child.

This works well, except when the user clicks on the dialog overlay to close it.

How to spend a $ emit on click on the overlay?
Actually, if an user clic on overlay i have this error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "options"

The parent’s watered-down code:

<template>
<component :options="this.options" :is="componentName" @update-options="optionsProps"></component>
<q-btn
        fab
        color="positive"
        icon="fas fa-cog"
        class="absolute-center no-shadow"
        @click="optionsProps"
        style="border: 4px solid white; top: 0; right: 0; transform: translateX(-50%), translateY(-30%);"
      />
</template>
<script>
export default {
    data () {
        return {
          options: true
       }
    },
    methods: {
        optionsProps () {
            this.options === true ? this.options = false : this.options = true
            return this.options
        }
    }
...

The child’s watered-down code

<template>
    <q-card>
        <q-dialog square full-width v-model="options" position="bottom" class="">
            <q-card-section class="row items-center">
                <div class="text-h6">{{ title }}</div>
                <q-space />
                <q-btn icon="close" flat round dense @click="close" />
            </q-card-section>
        <q-card-section class="items-center no-wrap">....</q-card-section>
    </q-card>
</template>
<script>
export default {
    props: {
        options: { type: Boolean, default: false }
    },
    methods: {
       activate: function (el) {
            this.$emit('update-options', false)
            this.filter = el
        },
        close () {
            this.$emit('update-options', false)
        }
    }
}...

Thanks for your help,

Sorry, I’m answering myself, I found 2 tracks.

First: IndexedDB
https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa
https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB

Second:
SQLite
https://forum.quasar-framework.org/topic/3002/sqlite-cordova-plugin

I will use IndexedDB.
thank you

Hi, I am a new quasar user and I am trying to create an android app.

I would like to store user preferences, but how? Coockies? Session? Vuex?
For a website I will have saved these values ​​in database, but for an application?

Could you tell me how to do it?
thanks in advance.