The Quasar devServer can be started in an HTTPS enviroment setting the https attribute in quasar.conf.js:

devServer: {
  https: true
 [...]
}

Unfortunately this setting is ignored when starting the devServer in Cordova or Electron mode, since false is hard-coded in <project>/node_modules/quasar-cli/lib/quasar-config.js line 528:

  else if (this.ctx.mode.cordova || this.ctx.mode.electron) {
    Object.assign(cfg.devServer, {
      https: false,
      open: false
    })
  }

Changing here the https value to true “solves” this issue, but being inside the library it’s not a good way to solve it. We should have the possibility to configure it from the project’s quasar.conf.js.

@sharpbcd It has been replaced by the QDialog. It can be styled to look exactly as the MD Dialog, furthermore it has been added a Popup Proxy, to use when you need either a QMenu (on bigger screens) or a QDialog (on smaller screens) to be displayed.

@garlicbread Yeah, but a div inside that div will have the same problem… I have a slot defined in the QPage, whenever I implement something in the slot, the problem reappears.

<q-page padding>
    <div style="min-height: inherit">
      <slot name="content"></slot> <!-- even with full-height this slot won't get 100% -->
    </div>
</q-page>

@sharpbcd said in QModal in v1? Replaced by something else?:

Off topic: do I have the stackoverflow “mark as answer” option?

I don’t think so, but is enough to know that it helped you

@sharpbcd It has been replaced by the QDialog. It can be styled to look exactly as the MD Dialog, furthermore it has been added a Popup Proxy, to use when you need either a QMenu (on bigger screens) or a QDialog (on smaller screens) to be displayed.

There’s no way of having two overlays, it is not expected. Neverthless you can leverage on positioning and CSS to have what you’re asking, although not elegant IMHO. See my fiddle.

Quasar is a High Performance Full Frontend Stack. With Quasar you can easily manage Cookies and other stuff, but I think what you’re looking for are Social Login functionalities.

Have a look at vue-authenticate, which implements most of the famous social login OAuths, or use Firebase to achieve the same goal.

If you instead are asking for really private API, e.g. of your company, Quasar has little to do with it. Is more related to Vue and how the APIs are made. Since Quasar uses Vue the final answer is yes, you can, but Quasar is not going to be the tool to do it (also, Quasar is not nor has a builtin browser in it).

@flight9 You can use the Header slot to fully customize the header. JSFiddle as an example.

npm ERR! Unexpected end of JSON input while parsing near ‘…s":"^4.1.2","jsonfile’ could you post your package.json?

I’ve found another solution. Pratically with my expandedRows array I was doing exactly what the selection property of the table is doing.

I’ve updated the fiddle using the props.selected instead of the row __index, still not satisfied with the result but at least I don’t have to initialize an array by myself.

I wanted to create a DataTable similar to the table used in Gmail.

Imagine you have a list of users with a set of tasks associated to each of them. I wanted to create a table of users with expanding rows to show the tasks, and action buttons (e.g. to add a task) which appear at the far right of each row on hover.

I needed a total of 3 user interactions:

• Expand a row to show list of task (table/list)
• On hover show command buttons on the far right (as in Gmail)
• On row click change $router state to e.g. user detail

I’ve managed to have all of the interactions working, but I find it a bit “clumsy”.

In order to get it right, I had to override the default body slot and create a custom row. Using the @click.native I covered the row click, while using the props.expand property in @mouseenter.native and @mouseleave.native on the row I can hide/show a td in the far right side of the row, with specific CSS to position it above others tds. The q-btns in the command cell use the @click.stop.prevent to not fire the row click.

Last is the row expand. As per the example in the DataTable page I should use the props.expand property on a q-checkbox to open and close the row, but props.expand has been already used for the command cell. I thought that props.expand was just an example, and that we could use wathever variable we wanted as long as it’s relative to the row. I was wrong .Other variables simply are not initialized or whatsover, I tried to dig up a little bit and found that expand is a variable in the q-table itself.

Since I didn’t want to throw away the work (which I like how it renders), I decided for a workaround where I initialize an array of false values for each of the rows of the current page, leveraging on the __index attribute of the props.row object to open/close the row expand.

I don’t really like this solution, like I said it’s a workaround. Does anyone know or can find a better one?

I’ve created a fiddle to show my solution.

Thanks in advance!

@Ben-Hayat Actually there is a roadmap!