Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. chbarr
    3. Posts
    C
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Best
    • Groups

    Posts made by chbarr

    • Building web components ?

      Hello,

      I have read the discussion about the differences between vue-cli3 and quasar-cli
      I understand the benefits of quasar-cli.
      But ihmo, i think there’s one thing really good in vue-cli: it’s possible to build web components with option “target --wc”

      I think web components is the future for web development (shadow dom is really great for mixing components from various sources without problem with css scoping).

      Is there a plan to improve Quasar with the ability to build web components ?

      And many thanks for your work

      posted in CLI
      C
      chbarr
    • RE: [Solved] How to get variable name of v-model for the current selected component

      check the answer of LinusBorg in this thread: https://forum.vuejs.org/t/re-ask-how-to-get-v-model-expression/16112
      it’s not possible…

      posted in Framework
      C
      chbarr
    • RE: [Solved] How to get variable name of v-model for the current selected component

      Pass the v-model name as parameter of your popup function

      <q-input v-model="name1" :after="[{icon: 'search', handler () { popup('name1') }}]"></q-input>
      <q-input v-model="name2" :after="[{icon: 'search', handler () { popup('name2') }}]"></q-input>
      
      popup: function (name) {
         this.$q.notify(name)
      }
      
      posted in Framework
      C
      chbarr
    • RE: Quasar app architecture

      yes it’s that
      in dev:

      • front-end dev with quasar tools
      • your nodejs api in backend

      in prod:

      • serve build of your quasar app (it’s static files so nginx is a good solution)
      • prod of your nodejs api (don’t forget to enable cors between your api and your front-end if it’s not the same domain)
      posted in Framework
      C
      chbarr
    • RE: Is there a way to let a modal takes automatically a size in such a way everything is visible without scroll bars

      Set the content-css of your modal with auto width an height:

      <q-modal :content-css="{height: 'auto', width: 'auto'}">
      

      You can see in this jsfiddle differents sizes of a modal depending of items in content

      posted in Framework
      C
      chbarr
    • RE: Dynamic error message

      I made a mistake while writing my “template strings”

      errorFieldName () {
        if (this.$v.form.name.required) return 'Field name is required'
        if (this.$v.form.name.minLength) return `Field name must have at least ${this.$v.form.name.$params.minLength.min} letters.`
        if (this.$v.form.name.maxLength) return `Field name cant have more than ${this.$v.form.name.$params.maxLength.max} letters.`
      }
      
      posted in Help
      C
      chbarr
    • RE: How to handle both click on whole q-item as well as button inside
      <div id="q-app">
        <div class="q-ma-md">
          <q-list link v-for="currentItem in items" :key="currentItem.id">
            <q-item tag="label" @click.native.prevent="showChild()" >
              <q-item-main >
                <div> more stuff </div>
              </q-item-main>
              <q-item-side right>
                <q-btn @click.capture.stop="moreButtonClick(currentItem)" icon="more vert"></q-btn>
              </q-item-side>
            </q-item>
          </q-list>
        </div>
      </div>
      

      In q-item native.prevent : preventDefault on the native Dom click event
      in q-item-side capture.stop : capture the event click and stop propagation

      posted in Framework
      C
      chbarr
    • RE: Dynamic error message
      <q-field :error="$v.form.name.$error" :error-label="errorFieldName">
        <q-input v-model="name" />
      </q-field>
      
      computed: {
        errorFieldName () {
          if (this.$v.form.name.required) return 'Field name is required'
          if (this.$v.form.name.minLength) return `Field name must have at least {{this.$v.form.name.$params.minLength.min}} letters.`
          if (this.$v.form.name.maxLength) return `Field name can't have more than {{this.$v.form.name.$params.maxLength.max}} letters.`
        }
      }
      
      posted in Help
      C
      chbarr
    • RE: Change ok button of dialog depending on tab selected

      You can refer to the documentation concerning Dialog: This means Dialogs should only be used for quick actions, like password verification, small App notifications or quick options. More in depth user flows should be reserved for ​Modals​.

      So you are right. If your “floating” component is a little complex, it’s better to use Modal

      posted in Help
      C
      chbarr
    • RE: Change ok button of dialog depending on tab selected

      you can have a prop in your modal for your custom label.
      And change this prop value on <q-tabs> select event

      See an example: https://jsfiddle.net/cLqkmcor/3/

      posted in Help
      C
      chbarr
    • RE: Change ok button of dialog depending on tab selected

      Bind your label prop button to a computed properties.

      In this computed properties return a value depending on your selected tab.

      posted in Help
      C
      chbarr
    • RE: Dynamic error message

      You can set prop error-label with your custom computed properties depending on the validation
      <q-field error :error-label="mycomputederrormessage" />

      posted in Help
      C
      chbarr
    • RE: Prevent collapsible toggle when button in header

      use the event modifiers of vue (https://vuejs.org/v2/guide/events.html#Event-Modifiers)

      you can add the stop modifier on q-btn. See in action: https://jsfiddle.net/f0cpycoL/1/

      posted in Framework
      C
      chbarr
    • RE: [Solved] How to update form field value dynamically when back from a dialog

      sorry another typo:

      onCallBack (payLoad) {
        let fieldToUpdate = this
        for (let subfield of payload.fieldName.split('.')) {
          fieldToUpdate = this[subfield]
        }
        fieldToUpdate = payLoad.retValue
      }
      
      posted in Framework
      C
      chbarr
    • RE: [Solved] How to update form field value dynamically when back from a dialog

      typo in my answer, it’s:
      for (let subfield of payload.fieldName.split(’.’))

      posted in Framework
      C
      chbarr
    • RE: [Solved] How to update form field value dynamically when back from a dialog

      i think if fieldName is a nested structure, it’s a little bit complicated.

      onCallBack (payLoad) {
        let fieldToUpdate = this
        for (let subfield in payload.fieldName.split('.')) {
          fieldToUpdate = this.subfield
        }
        this[fieldToUpdate] = payLoad.retValue
      }
      
      posted in Framework
      C
      chbarr
    • RE: Line breaks in a cell inside a Quasar Data Table

      You can use the format option of the column definition. (cf http://quasar-framework.org/components/datatable.html#Display-a-nested-property-or-format-a-column)
      Another way: use the cell scoped slot (cf http://quasar-framework.org/components/datatable.html#Custom-column-cell)

      posted in Help
      C
      chbarr
    • RE: Hows the proper way to do that layouts using flex

      the class ‘fixed-bottom’ is the solution. See an example: https://jsfiddle.net/0q7jysr1/7/
      Read about positioning classes here: http://quasar-framework.org/components/positioning.html

      posted in Help
      C
      chbarr
    • RE: [0.15.x] How to change heading font-size?

      I read in the source code and I think now it’s not possible easily.
      in the quasar-framework/src/css/core.variables.styl there’s a variable $headings with the style for each (display-4, display-3, …, caption)
      But there’s no stylus variable for the size.

      Maybe in the future we can have stylus variables like that : $display-1-size, etc…
      @rstoenescu : What do you think about adding these stylus variables ?

      posted in Help
      C
      chbarr