@metalsadman, thank you, I was not completely sure if that is feasible to implement and that is why I stated it as a question.

BTW, Razvan just stated in GH that he is OK to add a “full header slot” support.

Yes, that is the “build your own Tree View component from scratch” approach. I was considering this but before I jump into the deep I wanted to explore if QTree could be exploited for the purpose.

So my original question still stands - would it be possible to extend the QTree component with such capabilities?

Thanks for the suggestion!

Would it be possible to extend the QTree header slots to include the whole header element and not only the header content part (which excludes the expand icon and the header element itself)?

Here is an illustration of what I mean (use-cases follow):

I have 2 use-cases why I need this:

1. Adding drag-n-drop capability to the QTree elements via the TouchPan directive

Unfortunately QTree does not support drag-n-drop so I decided to find a way to implement my own. I was thinking that having access to the QTree header slot would allow me to insert such functionality. Alas, currently I can only control the contents of the .q-tree__node-header-content element (which is a descendant of where I want to add draggability) via the QTree header slot but in order to add v-touch-pan I need access to an ancestor element. If it would be possible to override the whole .q-tree__node-header element via a header slot, that would work since then I would build the header myself (e.g. using QItem component or something else) and I would be able to add the v-touch-pan directive.

2. I also want to make every item in the tree span the whole width of the main container. Here is an illustration of what I mean (I have removed the connector lines via CSS):
   

IMHO if I can override the whole header element then I would calculate the padding for each item (increasing with indent level) and that way I could keep the header element span the full width.
Just for the record - currently I believe it might not be possible to overcome this simply with CSS because I could remove the default padding for children but then it would be a nightmare to add paddings to every element without full access to the header element.

Here is the solution (with the help from @eduardodgarciac):

onTouchPan (event) {
  if (event.isFirst) {
    this.$nextTick(() => {
      document.documentElement.style.cursor = 'col-resize'
    })
  }
  if (event.isFinal) {
    // no need to revert the cursor here since TouchPad does this anyway
  }
}

Hi,

I’m trying to utilize the TouchPan directive in order to enable drag-n-drop for a div element.

That div plays the role of a “drag handle” for a QDrawer and I need the cursor to be “col-resize” during the dragging. The default cursor while panning is “grabbing” and I don’t know how to change it.

I tried changing the cursor in the first handler call:

onTouchPan (event) {
  if (event.isFirst) {
    document.documentElement.style.cursor = 'col-resize'
  }
  if (event.isFinal) {
    document.documentElement.style.cursor = ''
  }
}

but this did not work - in the TouchPan.js code, the “grabbing” cursor is set after the call to my handler.

I also don’t want to set the cursor outside of “isFirst” check because that would effectively set the style on every event, which is a lot.

Any ideas?

Hi,

I upgraded the following packages:

• eslint 5.16.0 => 6.7.1
• eslint-plugin-vue 5.2.3 =>6.0.1
• @vue/eslint-config-standard 4.0.0 => 5.0.0

and now when I start my dev app I get a list of the following warnings:

Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
Failed to load plugin 'import' declared in '.eslintrc.js » @vue/eslint-config-standard » D:\Projects\editor\node_modules\eslint-config-standard\index.js': Cannot find module 'eslint-plugin-import'
Require stack:
- D:\Projects\editor\__placeholder__.js

I also get an error in WebStorm (when I open a .js file) with a stacktrace:

Error: Failed to load plugin 'import' declared in '.eslintrc.js » @vue/eslint-config-standard » D:\Projects\editor\node_modules\eslint-config-standard\index.js': Cannot find module 'eslint-plugin-import'
Require stack:
- D:\Projects\editor\__placeholder__.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:954:17)
    at Function.resolve (internal/modules/cjs/helpers.js:75:19)
    at Object.resolve (D:\Projects\editor\node_modules\eslint\lib\shared\relative-module-resolver.js:44:50)
    at ConfigArrayFactory._loadPlugin (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:957:39)
    at D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:846:33
    at Array.reduce (<anonymous>)
    at ConfigArrayFactory._loadPlugins (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:842:22)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:665:32)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:594:20)
Process finished with exit code -1

Is Quasar compatible with ESlint 6.x or shall I stick to 5.x?

@metalsadman Yes, already checked the router docs, nothing fancy there. The path property of router.currentRoute is not populated, it just contains '/'.

@tof06 I noticed the urlPath in the docs as well and it’s an option, yes. It’s just similar to using the URLSearchParams API, e.g.:

const params = new URLSearchParams(location.search)
const endpoint = params.get('site')

I just wanted to use the Vue Router way before I fallback to native JS
To address your question about the route - I indeed need this only at app init (my SPA is called at this URL initially and the site is passed as a query param) - I am aware that the boot file won’t be called again, but then - I don’t need to.

@metalsadman said:

yep, @ddenev you probably need your logic in a navigation guard ie. router.beforeEach, best place would be in your scr/router/index.js. nvm, look like you can also implement the guard in the same boot file, from docs example https://quasar.dev/quasar-cli/cli-documentation/boot-files#Router-authentication.

Aha! That might seem it

export default ({ Vue, router }) => {
  router.beforeEach((to, from, next) => {
    console.log(to)
    next()
  })

and the to.query object now contains the site and post properties. Neat!

Thank you both!

@metalsadman , thanks but I think you might have misunderstood my question

I need to get the query param from the URL, not push something to the route.

I am accessing my SPA at an URL that contains query params and I need to make those query params available in a boot file. I was hoping that the router would be prepared, at the time boot files run, to provide that info.

Or maybe I got your answer wrong?

Hi,

I am developing a SPA that uses a 3-rd party WordPress REST API client library (wp-api) and currently I bootstrap it in a boot file like this:

import WPAPI from 'wpapi'

export default ({ Vue }) => {
  Vue.prototype.$wp = new WPAPI({
    endpoint: 'http://my-wordpress-app.local/?rest_route=/',
    username: 'username',
    password: 'password'
  })
}

Now, I need to supply the endpoint URL dynamically, so I pass it as a query parameter in the URL to my SPA, e.g. http://my-spa-app.local:8082/?site=http%3A%2F%2Fmy-wordpress-app.local&post=24

Is it possible to get the site URL parameter from Vue router in the boot file?

I tried console-logging router.currentRoute (after passing it to the boot file with export default ({ Vue, router }) of course) but none of the properties I’m interested in were populated.

It seems to me that the route is not yet ready when boot files are running but I might be missing something obvious.

I was also thinking about using the URLSearchParams API but it feels a little bit like a hack in the Vue/Quasar world. Is it OK to use it or should I struggle to find a way with Vue Router?

An update to the solution has been added above