Navigation

    Quasar Framework

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

    stefanvh

    @stefanvh

    11
    Reputation
    12
    Posts
    123
    Profile views
    1
    Followers
    0
    Following
    Joined Last Online

    stefanvh Follow

    Posts made by stefanvh

    • RE: Adding custom functionality to Quasar's components

      Turns out there is an easier way to achieve this:

      https://stackoverflow.com/questions/50800945/vue-wrap-another-component-passing-props-and-events/50801786#50801786

      posted in Useful Tips (NEW)
      S
      stefanvh
    • Adding custom functionality to Quasar's components

      First of all, I definitely do not consider myself to be an expert and there are tutorials which describe this process in more detail (for example: https://medium.com/quasar-framework/component-building-with-quasar-fc101b6730ae). However, sometimes you simply want to know how to do something without knowing all the ins and outs.

      Anyway, I noticed that since Quasar v1 beta was released, a lot of questions or remarks come down to “this was much easier in v0.17”. I also experienced this myself and as annoying as it is that you can’t simply do something, it is the only way to create a proper and maintainable framework. Let’s hope that in the future Quasar will get improved to a point where you can perform everything without programming anything, but until that time arrives we will have to add the functionality ourselves.

      So, the great thing about Quasar v1 is that they seemed to have considered every scenario when developing the base components, so by extending the base you can add your own functionality.

      For example, there is an Input and a Date component, and as explained in the documentation you can combine the two to get a date input (https://v1.quasar-framework.org/vue-components/date#Example--With-QInput). Now, I wanted to hide the popup on selection of a date: https://codepen.io/stefanvh/pen/XGJVMv

      This works fine as of itself, but imagine you would need 10 date inputs. That requires 90 lines of code, and in the case you would want to change something in the future, changing the same thing 10 times. So, what do we do? We create a reusable component:

      quasar new component QDateInput
      If we would copy the code from the codepen into QDateInput.vue, we can import QDateInput.vue as a component in any page in Quasar:

      import qDateInput from 'components/QDateInput.vue'
      
      export default {
        name: 'PageDates',
        components: {
          qDateInput
        }
      }
      

      In the template we can then use it with <q-date-input>:

      <template>
          <q-date-input />
      </template>
      

      However, QInput and QDate have a lot of properties which are and cannot be used in this way. To be able to set the underlying properties of QDate and QInput we will have to add the properties to our QDateInput component:

      <template>
        <q-input
          :value="formattedDate"
          v-bind="{ error, errorMessage, label, stackLabel, hint, hideHint, color, dark, filled, outlined, borderless, standout, bottomSlots, rounded, square, dense, readOnly }"
        >
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy ref="proxy">
              <q-date
                v-model="localValue"
                v-bind="{ landscape, color, textColor, dark, readonly, disable, firstDayOfWeek, todayBtn, minimal, options, events, eventColor }"
                @input="$refs.proxy.hide()"
              />
            </q-popup-proxy>
          </q-icon>
      ` </template>
      </q-input>
      </template>
      
      <script>
      import { date as dateUtil } from 'quasar'
      
      export default {
        name: 'QDateInput',
        props: {
          value: {
            type: String,
            default: ''
          },
          error: Boolean,
          errorMessage: String,
          label: String,
          stackLabel: String,
          hint: String,
          hideHint: Boolean,
          filled: Boolean,
          outlined: Boolean,
          borderless: Boolean,
          standout: Boolean,
          bottomSlots: Boolean,
          rounded: Boolean,
          square: Boolean,
          readOnly: Boolean,
          dense: Boolean,
          landscape: Boolean,
          color: String,
          textColor: String,
          dark: Boolean,
          readonly: Boolean,
          disable: Boolean,
          firstDayOfWeek: [String, Number],
          todayBtn: Boolean,
          minimal: Boolean,
          options: [Array, Function],
          events: [Array, Function],
          eventColor: [String, Function]
        },
        computed: {
          localValue: {
            get () { return this.value },
            set (localValue) { this.$emit('input', localValue) }
          },
          formattedDate () {
            return dateUtil.formatDate(this.value, 'DD/MM/YYYY')
          }
        }
      }
      </script>
      
      

      By defining the value prop, you are able to use v-model on the component. This will give a two-way binding with the data you use as v-model. Note that in order to set the date, the data is also coupled with v-model inside the component. Directly using value as v-model for QDate will result in a “Avoid mutating a prop directly” error, so instead we will have to use a local computed value which takes the value of value and emits an input event on change.
      Now we can use the component as followss:

      <q-date-input
        filled
        hint="Hint"
        bottom-slots
        first-day-of-week="1"
        :events="['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']"
        ...
       />
      

      So you can use any of the props of either QInput and QDate and it will change them inside the component accordingly, and we added our own custom functionality. Hiding the popup on select is a really simple example, but it proves the point.

      “Wait, will I have to do this everytime I need a function that isn’t covered by Quasar out of the box?”
      Well, yes, or you let someone else do it. And that is what I think the app extensions will be for.

      posted in Useful Tips (NEW)
      S
      stefanvh
    • RE: Dynamic content in layout

      I found a solution in https://github.com/LinusBorg/portal-vue.

      yarn add portal-vue
      quasar new boot PortalVue

      boot/PortalVue.js:

      import PortalVue from 'portal-vue'
      
      export default async ({ Vue }) => {
        Vue.use(PortalVue)
      }
      

      In MyLayout.vue:

      <q-menu>
        <q-list style="min-width: 100px">
          <portal-target name="menu" />
        </q-list>
      </q-menu>
      

      In any component:

      <portal to="menu">
        <q-item
          v-close-menu
          clickable
        >
          <q-item-section>
            <div class="text-h6 text-truncate">
              Title
            </div>
            <div class="text-subtitle2">
              Subtitle
            </div>
          </q-item-section>
        </q-item>
      </portal>
      
      posted in Help
      S
      stefanvh
    • Dynamic content in layout

      I did some searching but can’t really find the solution which I am looking for (might not even be possible maybe):
      https://forum.quasar-framework.org/topic/171/could-you-change-the-layout-header-slot-from-a-child-component
      https://forum.quasar-framework.org/topic/2017/dynamic-left-drawer-to-pages

      I’d want to have a button in the toolbar in the main layout which dynamically changes content according to the page which is shown and triggers actions on the shown page. From the topics above I understand that I should define the menu for the whole app and show the right actions by using v-if. However, how does the layout interact with the component in that case?

      An example of the layout would be:

        <q-layout view="lHh Lpr lFf">
          <q-header
            elevated
            class="glossy"
          >
            <q-toolbar>
              <q-btn
                flat
                round
                dense
                icon="menu"
              >
                <q-menu>
                  <q-list style="min-width: 100px">
      		<!-- Dynamic content -->  
                  </q-list>
                </q-menu>
              </q-btn>
            </q-toolbar>
          </q-header>
      
          <q-page-container>
            <router-view />
          </q-page-container>
        </q-layout>
      
      posted in Help
      S
      stefanvh
    • RE: How to UPGRADE from Quasar 0.17 to 1.0 beta

      You can´t expect to upgrade to v1 and have the CLI tell you what to change.

      Copied from Discord:
      If you a want a “preview” for Upgrade notes (remember, these are the notes), you can look here: https://gist.github.com/hawkeye64/da4b4d662ab1484bd0b532ffd871679e

      This will tell you what has changed, but you will still have to manually check and edit the code yourself. I believe the best way at this moment is to start a new project and copy/rewrite your project from scratch (as there still might be bugs in the beta so you will have to check if you made a mistake or if it is a bug that has to be fixed).

      posted in Help
      S
      stefanvh
    • RE: Laravel + Quasar 1.0 with Quasar CLI

      It’s your lucky day 😄 :
      https://github.com/stefanvanherwijnen/quasar-auth-starter/tree/quasar1.0

      I just updated it to v1.0 and as far as I tested everything works. Please check it out and I am open to any feedback

      https://github.com/stefanvanherwijnen/quasar-auth-starter

      posted in Starter Kits
      S
      stefanvh
    • RE: Quasar v1.0 beta has arrived

      @pavarine said in Quasar v1.0 beta has arrived:

      Has anyone already mentioned that u guys are VERY awesome? Thank you Razvan and colaborators!

      I’ll have to agree. Quasar 0.x already was the most developer-friendly framework imo, but with v1.0 you guys kicked it to another level. Really impressive.

      posted in Announcements
      S
      stefanvh
    • RE: [Solved] PWA force refresh when new version released?

      Quasar also provides a localstorage API:
      https://quasar-framework.org/components/web-storage.html

      posted in Framework
      S
      stefanvh
    • RE: Text of QInputs overlap with FlexCSS

      Hmm, weird. I first noticed it on a Windows 10 laptop with a low resolution. Then I could reproduce it on a Linux machine in the responsive design mode of Firefox.
      I’ll try to figure out what the problem is, but there does not seem to be an obvious solution.

      posted in Framework
      S
      stefanvh
    • RE: Text of QInputs overlap with FlexCSS

      I am using Firefox. In Chrome it seems to work fine indeed. I forgot to check the behavior in different browsers than Firefox…
      alt text
      So it is a bug, but is it a bug with Quasar or Firefox?

      The limiting width of a QCard seems to be default behaviour. The only way to get it to stretch across the whole width of the screen is by applying col-12, by default it seems to match col-4.

      posted in Framework
      S
      stefanvh