Navigation

    Quasar Framework

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

    dsl101

    @dsl101

    12
    Reputation
    649
    Profile views
    53
    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: ESLint import plugin not finding Quasar aliased imports

      OK, this is probably horribly hacky, and I’d love to find there’s a better way to integrate external editor ESLint and Quasar webpack, but I added this to the end of the extendWebpack() hook, and it was sufficient to get eslint-import-resolver-webpack working with both my custom and Quasar’s default aliases:

      fs.writeFileSync('./webpack.config.js', `module.exports = {
        resolve: ${util.inspect(cfg.resolve, { showHidden: false, compact: false, depth: null })}
      }`)
      
      posted in Help
      D
      dsl101
    • RE: ESLint import plugin not finding Quasar aliased imports

      BTW, it occurred to me that my original post was missing some perhaps important details…

      I don’t use ESLint as part of the Quasar build process, and this is not an error coming from running quasar dev or quasar build. I’m using SublimeText with SublimeLinter, which calls ESLint in the project. So I do have the .eslintrc.js file that Quasar created as a base, but don’t use it in build.

      So, the problem is that I suspect the webpack configuration that Quasar generates during dev is not accessible to ESLint when run ‘outside’ that context, and that explains why it can’t resolve. The eslint-import-resolver-webpack plugin expects to be able to access a webpack.conf.js containing the webpack configuration, which I guess would give it those aliases. So, I’m assuming that unless I can persuade Quasar to write out the config (could I do this quasar.conf.js in the extendWebpack() hook?), it will be very hard to solve this one.

      posted in Help
      D
      dsl101
    • RE: ESLint import plugin not finding Quasar aliased imports

      That’s the whole point though–I don’t want relative imports in case the importing file gets moved around. That’s why Quasar provides those aliases isn’t it?

      Relative imports are recognised correctly by ESLint, but then become fragile as code is reorganised…

      posted in Help
      D
      dsl101
    • ESLint import plugin not finding Quasar aliased imports

      I’m making use of the Quasar webpack aliases to do things like this:

      import Thing from 'components/Thing'
      

      but ESLint’s import plugin is complaining that it can’t resolve path to the module. I believe part of the answer is to use eslint-import-resolver-webpack, but I’ve tried naively adding it as a dev dependency, and putting this into .eslintrc.js:

        'settings': {
          'import/resolver': 'webpack'
        },
      

      and no dice. Is there something else needed to allow it to resolve those aliases properly?

      posted in Help
      D
      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