Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. dsl101
    D
    • Profile
    • Following 0
    • Followers 0
    • Topics 18
    • Posts 49
    • Best 7
    • Groups 0

    dsl101

    @dsl101

    12
    Reputation
    649
    Profile views
    49
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    dsl101 Follow

    Best posts made by dsl101

    • RE: Best practice setting up q-scroll-area

      I know this is old now, and Quasar has moved on quite a bit too, but @eduardodgarciac on the Discord channel pointed me in the right direction. Actually, trying to use QScrollArea inside a QDialog, and fill the space in the dialog with variable sized content, scrolling if necessary. The key is to use flex column, and set the QScrollArea to class="col". Final result can be seen here: https://codepen.io/dsl101/pen/jOOJNXK

      Hope it helps someone!

      posted in Help
      D
      dsl101
    • RE: Creating custom app templates for quasar-cli

      Thanks - I tried a few things, and forked the existing template. Then I found the correct format for the init command:

      quasar init @myrepo/quasar-template-default test
      

      The @ is crucial - otherwise it tries to load a sub-version of the official template.

      posted in CLI
      D
      dsl101
    • RE: ~~Do not upgrade to Vue 2.4.x (yet)~~ Edit: Safe to upgrade

      For info - I had to pin vue-template-compiler to 2.3.4 as well - without that, I got a version mismatch when running quasar dev.

      posted in Announcements
      D
      dsl101
    • RE: Separators / sections for q-select and q-dialog-select

      Many thanks - I’ve posted a feature request: https://github.com/quasarframework/quasar/issues/557

      posted in Help
      D
      dsl101
    • RE: Using self-end on q-card-actions

      Not exactly the same content as you, but I got extra stuff on cards to ‘float to the bottom’ using style="flex-grow: 1":

          <q-card-title style="flex-grow: 1" @click="handleSelect">
            {{item.text}}
            <span v-if="!pageSettings.anonymous" slot="subtitle">{{subText}}</span>
            <q-icon v-if="isMine(item) || isAdmin()" slot="right" name="more_vert" >
           .
           .     
           .
            </q-icon>
      
          </q-card-title>
      
          <comment
            :id="id"
            :active="activities.includes('comment')"
            :pageSettings="pageSettings"
            :activitySettings="activitySettings.comment"
          />
      

      The output of the comment component is now anchored at the bottom of the card, however tall the card is.

      posted in Help
      D
      dsl101
    • Best practice setting up q-scroll-area

      I’m really struggling to get q-scroll-area to work reliably, and I’m sure I’m Doing It Wrong. The pattern I’ve been using is something like this:

      <template>
        <q-scroll-area class="fill-window">
          <div>
            <!-- Stuff here -->
          </div>
        </q-scroll-area>
      </template>
      
      <style scoped lang="stylus">
        .fill-window
          height calc(100vh - 160px)
      </style>
      

      This works, but (a) I’m hand tuning that offset (160px) to cater for the vertical position this component is rendered within the main layout, and (b) when I add something ‘optional’ to the component like this:

      <template>
        <q-scroll-area class="fill-window">
          <div v-if="showControls">
            <!-- Controls here -->
          </div>
          <div>
            <!-- Stuff here -->
          </div>
        </q-scroll-area>
      </template>
      

      The value of 160px now depends on whether the parent passed true or false to showControls.

      So, is there a better way to say “give as much height as possible without triggering the browsers own scrollbar”?

      posted in Help
      D
      dsl101
    • RE: Passing data into @input handler inside a list

      OK - here’s my solution. I’m still not 100% sure why this works and making setOption() return a function doesn’t, but hey ho. I’m sure it’s tied up inside template compilation:

      @input="val => { setOption(setting.key, val) }"
      posted in Help
      D
      dsl101

    Latest posts made by dsl101

    • RE: QPopupEdit not emitting @save when the QInput is cleared.

      I was wanting to use @before-show to set the ‘initial’ value. Then when clicking ‘Set’, the new (cleared) value would be null and cause an @save event. But it seems the initial value is stored before @before-show is triggered?

      In any case, setting the model via the Qbtn surrounding the popup works OK.

      I edited the code above to be clearer, and also updated the code pen with 2 versions (one that works and one that doesn’t). The only difference is where editLabel is set initially. In the QBtn @click works, in the QPopupEdit @before-show doesn’t.

      posted in Help
      D
      dsl101
    • RE: QPopupEdit not emitting @save when the QInput is cleared.

      Note this is the original code which doesn’t work:

      <q-btn flat round dense icon="edit">
        <q-popup-edit v-model="editLabel" buttons @before-show="editLabel = label" @save="saveLabel">
          <q-input v-model="editLabel" clearable></q-input>
        </q-popup-edit>
      </q-btn>
      
      

      whereas this version does work:

      <q-btn flat round dense icon="edit" @click="editLabel = label">
        <q-popup-edit v-model="editLabel" buttons @save="saveLabel">
          <q-input v-model="editLabel" clearable></q-input>
        </q-popup-edit>
      </q-btn>
      

      The significant difference is where editLabel is initialised. In the @before-show event the model is set, but apparently it is not set before the QPopupEdit initialValue has been copied from the model. This causes __hasChanged () to later return false when the model is cleared back to null.

      posted in Help
      D
      dsl101
    • QPopupEdit not emitting @save when the QInput is cleared.

      I’m struggling to get QPopupEdit to emit a @save when the QInput is clearable. Here’s an example: https://codepen.io/dsl101/pen/XWNRZYz?editors=1011

      1. Click on one of the edit icons
      2. The current value of editLabel changes and the popup opens
      3. Click the ‘clear’ icon at the right of the QInput
      4. Click the ‘Set’ button on the popup.

      I would expect to see null printed in the console, but I don’t see anything. What am I doing wrong? Note you can get null into the console by changing the QInput value first (and clicking ‘Set’).

      posted in Help
      D
      dsl101
    • RE: Some kind of menu plugin as alternative to QMenu?

      Yes, I’m using dynamic components in some places, but I’ve found they do need quite a bit of boilerplate to avoid premature loading, and then they need careful handling to get them to open with the data (e.g. I’m using them for seldom-used dialogs). I end up with lots of code like this:

          <component :is="editor"
            ref="edit"
            title="Edit Item"
            :item-text="item.text"
            @edit="handleEdit"
          />
      
          components: {
            EditFeedback: () => import('components/editors/EditorDialog')
          },
          methods: {
            handleOpenEditor (what) {
              this.item.text= what.text
              if (this.editor === null) {
                this.editor = 'EditFeedback'
              }
              setTimeout(() => { this.$nextTick(this.$refs.edit.show) }, 0)
            }
          }
      

      Without using both setTimeout() and $nextTick(), I find that either this.$refs.edit is undefined, or the props haven’t rippled down into the component.

      I’ve decided to refactor things into a parent component which only contains the multiple child components that used to contain menus, and instead have all the children emit an event which allows the parent to open an (already templated) menu based on the id of the child passed up in the event. I think this solves the problem without too much extra code like above.

      posted in Help
      D
      dsl101
    • Some kind of menu plugin as alternative to QMenu?

      I have a fairly complex component, with several menus that might be available to privileged users, and those menus may have many options. Currently all is working with <q-menu> components, but of course that means every menu is part of the template, whether or not it is visible. Many of the items on the menu are reactive to the components current state, and we’re seeing that once there are many tens or hundreds of components (each with several menus), performance starts to degrade—I assume because those menus are being reactively updated from item data.

      Each component could share a single menu (one menu open at a time is fine), but then that menu would have to live in the parent, and so becomes decoupled from the component it’s tightly integrated with.

      Is there some kind of analogy to the Dialog plugin where a menu could be created dynamically in code, only when the user clicks an <q-btn>?

      posted in Help
      D
      dsl101
    • RE: Best practice setting up q-scroll-area

      I know this is old now, and Quasar has moved on quite a bit too, but @eduardodgarciac on the Discord channel pointed me in the right direction. Actually, trying to use QScrollArea inside a QDialog, and fill the space in the dialog with variable sized content, scrolling if necessary. The key is to use flex column, and set the QScrollArea to class="col". Final result can be seen here: https://codepen.io/dsl101/pen/jOOJNXK

      Hope it helps someone!

      posted in Help
      D
      dsl101
    • RE: Best practice setting up q-scroll-area

      I made a codesandbox to illustrate the problem: https://codesandbox.io/embed/codesandbox-app-5g21z

      I would like the content in MyView to expand to fill the available space. That includes accounting for the variable sized controls on the parent view, which at the moment is done with a q-page-sticky (click the button to change its size), but I realise that will probably have to change. The 2 tabs show how not using any q-scroll-area means the entire page scrolls, and using a q-scroll-area with specific height ends up with cumbersome computed style="..." attributes.

      I suspect the main page will have to become a flex-column, but that’s a lot of refactoring in my app, and I wanted to be sure that was the right way to go and that I wasn’t missing something easy inside MyView.

      posted in Help
      D
      dsl101
    • Best practice setting up q-scroll-area

      I’m really struggling to get q-scroll-area to work reliably, and I’m sure I’m Doing It Wrong. The pattern I’ve been using is something like this:

      <template>
        <q-scroll-area class="fill-window">
          <div>
            <!-- Stuff here -->
          </div>
        </q-scroll-area>
      </template>
      
      <style scoped lang="stylus">
        .fill-window
          height calc(100vh - 160px)
      </style>
      

      This works, but (a) I’m hand tuning that offset (160px) to cater for the vertical position this component is rendered within the main layout, and (b) when I add something ‘optional’ to the component like this:

      <template>
        <q-scroll-area class="fill-window">
          <div v-if="showControls">
            <!-- Controls here -->
          </div>
          <div>
            <!-- Stuff here -->
          </div>
        </q-scroll-area>
      </template>
      

      The value of 160px now depends on whether the parent passed true or false to showControls.

      So, is there a better way to say “give as much height as possible without triggering the browsers own scrollbar”?

      posted in Help
      D
      dsl101
    • RE: [v1] QToolbar with Vuex doesn't seem to get updated state

      Dammit. Been pondering this for ages, and now having written the post, I realise I hadn’t properly initialised the properties of toolbarMenu. The fact they were working in QPage put me off the scent. Apologies for the noise.

      posted in Help
      D
      dsl101
    • [v1] QToolbar with Vuex doesn't seem to get updated state

      I have a fairly complex application, with a few levels of components, and I haven’t been able to replicate this in CodePen, so presume it’s something I’m doing. The component tree is like this:

      3644af8f-2830-4a76-a84b-49677d7a3ded-image.png

      and the Vuex state contains a setting for whether certain items in toolbar menu should be visible. It’s an object like this:

      781e8aeb-779a-4424-8b5b-4e22c8054b94-image.png

      To show the issue, I’ve included the Store Getter toolbarMenu, and put these 2 lines into the relevant templates. In Default.vue (which provides the QToolbar), and Page.vue (which provides the QTabs at the bottom of the component tree), I have:

          <pre>{{toolbarMenu.select}}</pre>
      

      To begin with, all is good:

      49380372-0639-4b16-a4b8-964dc3d8c256-image.png

      The problem is when this state is updated via an action within QPage triggered from the QTabs @input event. I can see via devtools that the Vuex state is indeed changed (all those trues become false), and the value in QPage updates, but the value in QToolbar does not:

      7ce7f01f-7ff5-48a8-a2ef-72fa41a3589a-image.png

      If I make a simple source code change when running via quasar dev, the HMR update brings the QToolbar value in line. Similarly, if I pull all this code into a single file in CodePen, it works exactly as it should. So I’m a bit stumped—what might I have done that makes this getter non-reactive in the toolbar?

      posted in Help
      D
      dsl101