Finally I found how to do it!

I’m just using a computed style property, that calcs the right style size of the element. To be honest, this solution is a bit different to what I have originally asked for two reasons:

1. for performance reasons I am using codemirror instead of quasar text area input
2. Instead of setting the text area to 100% I just have to set it’s container to a proper size, because codemirror is nothing but a div.

Here is the code

  data () {
    return {
      currentTab: '',
      header: {h: '0px', w: 0}
    }
  },
  mounted () {
    this.header.h = style(this.$refs.layout.$refs.header, 'height')
  },
  computed: {
    computedMainStyle() {
      return { height: `calc( 100vh - ${this.header.h} )` };
    }
  },

The code is inspired on the layout code from quasar:
https://github.com/quasarframework/quasar/blob/ef358ece7dbb87ace6df26dc5d81fd6b704bcb68/src/components/layout/QLayout.vue

Hello.
Something that I think it will take advantage of a more detailed guide is customization. It is only outlined in the docs and a more practical and detailed approach will be very useful.

Also showing beginners to think our of the box or how to go beyond the basic examples may be very beneficial. For example, reading the documentation/guide one may think that only q-lists are allowed inside sidebar, when you can actually put whatever you want. Another example is the vue-router view, it is not mandatory to place it on the main section, you can place it whenever makes sense .

More detailed layout-ing is also required. Yes, layout and slots are described , but how do you structure things inside each section/slot ? Are cards the only way ? Should I create my own components?

Some Do’s and Don’t s will be also a good thing. For example, when Vue router is an overkill where you may be fine with just a couple of tabs ?

As an extra (last and small section) I would like to see some how to about how to integrate stuff from other Vue libraries and maybe some other popular libraries (D3?)

Thanks and regards

Hello everyone,

I have been reading the documentation of quasar, and indeed the customization system it looks very powerful.
What I want is tips to customize the stylus variables to make the interface match a desktop app (or close to it):

• Toolbars with all buttons close to each other (no space)
• Buttons with a clear border, and some glossy effect
• Toolbars with the exact same size of the buttons it holds, plus a border
• Input fields with less space between them

This forum for example, is closer to what I want to achieve than the default MAT theme

But how the hell do you make the column sticky ??

Well, at the end the solution was to install eslint-plugin-import, but also all the dependencies eslint-standard has and the standard plugin itself:
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

Then on the eslint config you have to add standard to the list of extends

 extends: ['plugin:vue/essential','standard'],

To be honest, it is a bit confusing that answering no to an optional question totally breaks your startup experience. I spent almost one hour on this.

Regards

@danielo515 said in Doubts about data table:

Regarding controls I was fearing an answer like that. To be honest, adding a property to my data just to be able to render a control column does not look like something clean to me. Just adding the column is not enough, you must add the actual field to the results.

That is just not true. You can just add a column to the list of columns and it will be rendered, even that prop does not exist on your data. My mistake here was that I was not including it on the list of visible columns

So in order to lazy load quasar components you must load them individually on each of your custom components/pages. Including them on the config bundles them all together, right ?

This is an answer to: http://forum.quasar-framework.org/topic/1874/doubts-about-data-table/5
Well, here is the summary of how I fixed (almost) all my issues on Quasar v0.15.2:

• If you want an extra column, then add it to the columns list, and don’t forget to include it in the list of visible columns if you are using that feature
• If you want to customize how cells are rendered, you don’t need to manually customize the entire row, you can customize just the cell slot. This allowed me to render different types of cells based on their type:

    <q-td slot='body-cell' slot-scope='props' :props='props'>
        <span v-if='isDate(props.row[props.col.field])'>
            {{ formatDate(props.row[props.col.field]) }}
        </span>
        <span v-else-if='props.col.field==="interval"'>
            {{ formatInterval(props.row[props.col.field]) }}
        </span>
        <p v-else-if='isPlainArray(props.row[props.col.field])' v-for='v in props.value' :key='v'>{{v}}</p>
        <object-tree v-else-if='isObject(props.row[props.col.field])' :traverse='props.row[props.col.field]' />
        <span v-else>{{props.row[props.col.field]}}</span>
    </q-td>

Now I have to see if I find a way to make columns sticky (low prio) and a way to understand how slot-scope works, because the props thing is still a bit obscure to me.

@benoitranque I already noticed (see my other posts about this). Mi mistake was not including them on the list of visible columns. By the way, for me it will be a blacklist functionality rather than a whitelist one.

I summarized my findings here:
http://forum.quasar-framework.org/topic/1877/datatable-small-tips

So sad, because the ability to highly customize is what made me choose the datatable. What is preventing the scroll area to be created when user is customizing the cells ? Any workaround like creating a custom sticky header (instead the ones at the table) and then use a scroll area around the table ?

Inspecting this in more depth, and being a bit more open-minded I can understand that this is maybe a feature.
Looking at the bundles on more detail I can see that they are not of the same exact size, and if you look closer you can see that they do not include the same files. Being each bundle a different route maybe this makes sense. Each route has just the files they need. Because we don’t know how routes will be loaded (which order)because can navigate to any random one we have to include all the possible files they may require.

My only complain may be that some files are present both at the vendor bundle and the route bundle. Since the vendor bundle is loaded on every route, I don’t see why those files needs to be included on the route bundle too.

In any case, this is just an unnecessary optimization concern, since page loading is already very fast.

I made some research on the webpack-config, and I can see that the comparision is about containing the provided module name. Since what webpack is reporting is on the form of /Users/danielo/GIT/alert-tools/node_modules/lodash/isArray.js".indexOf('lodash') specifying lodash should work.
So the problem may be at a different place. Seems that including certain library on the vendor bundle does not free it from being included on a different module too.

My knowledge of webpack is limited, but I think I’m on the right track.

Hello @rstoenescu ,
I’m a big fan and evangelist of ES6 features, and I know almost all the details about them, so it is not about simple functions/helpers.
Lodash is a very good library with ton of useful and composable functions that you don’t want to re-implement yourself. For example,the code snippet you posted will work well for arrays, but map method of lodash also works with any kind of collection, not just arrays, not to mention that it is safer:

_.map(null, _.identity) // => []
x = null;
x.map(x=>x) // cann not read property map of null

Regarding installing just a sub-package a lodash is an anti-pattern for several reasons. The first one is that lodash is a very popular dependency, and it just requires a single of your dependencies to include it and you will end with duplicated code. But the most important one is that those packages has been deprecated by lodash maintainer. Yes, it was a big surprise to me too, but check this GH issue: https://github.com/lodash/lodash/issues/3565#issuecomment-353970667

Also the functions that I’m using from lodash are utilities like pipe, capitalize, snakeCase, identity… small functions that you can implement yourself, but probably with less guarantees and less efficient.

I have to say that the babel plugin of lodash makes a good job three-shaking the lodash library. My lodash bundled functions are just a few KBs (14 kb) vs the entire lodash library which is about 500 kb, so I’m very happy about it.

My only problem is that I want to include that small bundles just once. I tried marking lodas as should being added to the vendor bundle, but that is not working. I suspect because instead of being reported as plain lodash, their are being cherry picked with their entire name.
To illustrate what is happening, here is a small screenshot:

I am also experiencing this problem, In my case it is happening with lodash.
Did you found any solution to this ? All my lodash imports are using destucturing. This means that I do import {map} from 'lodash'
I expected it to just include that particular function, and not the entire lodash.

I didn’t change the webpack config at all.
Any help will be appreciated.

Regards

Hello,
I really love the datatable component and I think I’m making good use of it.
The documentation is good and clear, however I’m running into problems while using server side pagination and Vuex.
I don’t want to reinvent the wheel neither handle pagination myself, so I’m just using the built-in methods of datatable. Because I’m using Vuex to handle the state all the pagination props should come from it (page, page size, results…) so far so good. In order to activate the server side pagination you have to provide an object with pagination information and here is where the problem comes. Because all the pagination controls are coming from Vuex they must be computed components, however vue is complaining that certain computed property requires a setter that it does not have. The datatable is working properly, but I’m worried about possible performance implications and problems.

Thanks for your help.

Hello @a47ae , thank you for your response.
The part about getting the element was pretty simple, I was just using references. However, the animation part was more difficult.
May I ask why are you calculating the offset that way ? In my case the element it’s out of view, and its size is close to the size of the window. Using your code I get an offset of 18, which is barely noticeable. However, if I just use ele.offsetTop directly the element just scrolls into view perfectly, sho hence my question, why are you calculating the offset that way ?

Another thing I am unable to understand is how the (and why) the target is decided. In my case, I don’t have any element with the scroll class, so window is used. Using window and calculating the offset as I said, works perfectly. On the contrary, if I add the scroll class to the current page, then the scroll does not happen, no matter how you calculate the offset. All this stuff is very confusing.

Regards.

Taking a look at the index.js of the router I noticed that it mentions the following property : build.publicPath. Setting that property to my subdomain fixed all my problems. It was very hard to find about it because the only places where it is mention are under the CLI documentation and and configuring quasar and none of them mentions the subdomain thing, which I think they should.

Hello, I just finished a small project using quasar 0.15.2 and now it’s time to deploy it.
I am deploying it on a subdomain, for example https://example.com/myproyect. The problem is that the template is trying to fetch all the resources from absolute paths from the root of the domain, so it is trying to reach things like https://example.com/js/app.54165164.js when it should be https://example.com/myproject/js/app.54165164.js.
Where is the correct place to configure this ? How can I make the paths relative so I don’t have to re-build the app every time I change the subdomain ?
Thanks in advance.
Regards

Hello, I have been reading the scroll documentation for almost an hour and I’m still unable to understand it.
What I want to do is, when someone clicks on one button I want to scroll to certain dom element, which is out of view.
I tried using refs and the scroll utils, but they don’t work at all, nothing happens. Checking the console I can see that the getScrollPosition function always returns 0, and therefore no navigation happens.
If you can tell me a nice way to simply scroll to certain element I will be very grateful. Also I really think that documentation should be revised, they seem wrong.

Thanks in advance