No More Posting New Topics!

Same issue, just curious if there is a better solution in the current quasar version?

https://www.npmjs.com/package/vue-tel-input here a repo that integrate beautifully vue-tel-input

Here an exemple to make it work with q-form:

<q-field v-model="bookingPhoneNumber" borderless :rules="[isRequired, isPhoneNumberValid]" > <vue3-q-tel-input v-model:tel="bookingPhoneNumber" class="pr-b-tel-input pronto-input" default-country="fr" :label="t('generic.phoneNumber')" rounded outlined @error="isPhoneNumberInError = $event" /> </q-field> const isPhoneNumberInError = ref(false); async function isPhoneNumberValid(): Promise<boolean | string> { // sleep 100ms await new Promise((r) => setTimeout(r, 100)); return ( !isPhoneNumberInError.value || 'Rentrer un numéro de téléphone valide' ); }

I was talking about using it in single js file, I found a solution:

import { i18n } from 'src/boot/i18n' const { t } = i18n.global . . . export const eStatusList = [ { code: '0', label: t('documents.inProgress') }, { code: '1', label: t('documents.sent') }, { code: '2', label: t('documents.accepted') }, { code: '3', label: t('documents.rejected') }, { code: '4', label: t('documents.voiding') }, { code: '5', label: t('documents.voided') } ]

There is a way to position dialog with custom css and content-class dialog property.

For example if you want dialog with position=“top” move 60px down (add gap between top of the screen), create css (sass):
.q-dialog__top60
.q-dialog__inner–top
top: 60px

and in the dialog add property
content-class=“q-dialog__top60”

Any luck with V2 and auth0? I’m currently working through this at the moment.

Had the same problem, was able to fix it manually:

go to src-capacitor/android/app/src/main/res/values/ic_launcher_background.xml ic_launcher_background.xml content should look like:

<?xml version=“1.0” encoding=“utf-8”?>
<resources>
<color name=“ic_launcher_background”>#0062A0</color>
</resources>

just change color code in the <color>!

Hi did you ever figure this out? Having the same issue

@andrei94ro found this solution:

//template '<div @click="parentClick" @dblclick="parentDblClick"> <q-popup-edit></q-popup-edit> </div > ' //setup return { parentDblClick:(e)=>{ //emit "click" event with payload e.target.dispatchEvent(new CustomEvent("click", {detail: {trigger:true}})) }, parentClick:function (e, open){ //check payload and stop in current if(!e.detail?.trigger) e.stopPropagation() //keep event propagating on parent e.target.parentNode.dispatchEvent(new Event("click")) }, }

I’m also trying to get Google Analytics to work. Followed the tutorials in the links in this thread and when I try to add the file to the plugin section of the quasar.conf file I get an error. :(. Anyone have a fully complete tutorial that works?

i have the same problem .

@wpq said in How to list tags followed by a "new tag" entry?:

Should someone stumble upon the same issue, this is how I finally did it using purely the framework:

<div> <q-input v-model="newTag" label="New..."> <template v-slot:before> <q-chip removable @remove="deleteTag(tag)" v-for="tag in displayedNote.tags"> {{tag}} </q-chip> </template> </q-input> </div>

I did some changes to achieve my goal.

<q-input v-model="newTag" outlined @keyup.enter="addTag" dense> <template v-slot:prepend> <q-chip removable @remove="form.tags.splice(key, 1)" v-for="(tag, key) in form.tags" :key="key"> {{tag}} </q-chip> </template> </q-input>

@jubalj said in How to select text on focus in a QInput:

Posting for someone else looking for a simpler solution as I found a solution;

Add the following to inside the <q-input>

@focus="(input) => input.target.select()"

Found it at https://github.com/quasarframework/quasar/issues/8402

Thanks for this! I’m looking for the same thing. However when I apply your solution to my q-input I get this error:
Uncaught TypeError: input.target.select is not a function

I’m still pretty darn new to Quasar, is there something I’m missing when I add this?

hmm playing around, it looks like this doesn’t work on a number field. Dangit. Any solutions for a number field?
I have mask="##" included.

Hey guys, stumbled upon that issue today. This is how I managed to do it.
Suppose you call the dialog like this in you vue

// draft.vue this.$q.dialog({ title: this.$t('mixin.delete.title'), message: this.$t('mixin.delete.confirmation'), cancel: true, persistent: true }).onOk(() => { this.deleteDraftLifts() })

You can trigger the onOk callback in two times by using the mockReturnThis() function of jest. The trick is to understand that we are tying to mock chained functions (this.$q.dialog({...}).onOk())

So start by mocking this.$q.dialog({...}) with

// draft.spec.js vm.$q.dialog = jest.fn().mockReturnThis()

then mock the onOK like this

// draft.spec.js vm.$q.dialog().onOk = jest.fn()

now you can trigger your function and it will pass.

// draft.spec.js wrapper.find('xxxx-class' ).trigger('click') expect(vm.$q.dialog().onOk).toHaveBeenCalled()

You can go further by checking the delete logic inside if you want. You will need to abstract the logic inside a function like I did in my example draft.vue withthis.deleteDraftLifts()
by doing this you can now write the following code

// draft.spec.js vm.$q.dialog = jest.fn().mockReturnThis() vm.$q.dialog().onOk = jest.fn(() => vm.deleteDraftLifts()) wrapper.find('xxxx-class' ).trigger('click') expect(vm.$q.dialog().onOk).toHaveBeenCalled()

Same issue did you manage to resolve this ?

One way could be to use label slots in quasar v2.1.1

Hi, I think this is a normal issue across the development of bots.
You will have to avoid creating new slots and integrate the code in the existing slots. But the code by default creates a new slot I guess. If that is the issue you could try out the code below:
<!–
Forked from:
https://quasar.dev/vue-components/chat#Example--Default-slot
–>
<div id=“q-app”>
<div class=“q-pa-md row justify-center”>
<div style=“width: 100%; max-width: 400px”>
<q-chat-message
v-for="(msg,i) in messages"
:name=“msg.name”
:avatar=“msg.avatar”
:stamp=“msg.stamp”
:sent=“msg.status === ‘sent’”
:bg-color=“msg.bgColor”
:text-color=“msg.textColor”
:key=“i”
>
<template v-for="(text, j) in msg.text" :key=“j”>
{{text}} 
<q-icon :name=“msg.action.icon” @click=“someAction(msg.action.name)” :color=“msg.action.color”></q-icon>
<br v-if=“text.length > j”>
<q-markdown>

{{text}}

This is a Blockquote
with a token and a link

Blockquotes can also be nested…

…by using additional greater-than signs right next to each other…

…or with spaces between arrows.
</q-markdown>
</template>
</q-chat-message>
</div>
</div>
</div>
This is just for Quasar chatmessage option and not for other platforms. If you are interested in other platforms it would be better if you take help from any chatbot development services as they might provide you a quik and simple solution. Also this stage is quite simple and further integrating complex cognitive functionalities could be quite challenging.