Usage of Single File Component Drawers, not inline

Kirby 4
,
1

Hi,

I started a component for Kirby 3.x based on a Toggle-component opening a drawer.
It turned out that the former way of using a reference to trigger that component does not seem to work anymore throwing the following error:

Invalid drawer state

by using

window.panel.drawer.open(this.$refs.mydrawer)

(formerly this.$refs.mydrawer.open() )

Has anyone found a tweak to get around this hurdle?

Following the new lab/components/ example this seems to be the propper way to go:

	@click="
		$panel.drawer.open({
			component: 'k-text-drawer',
			props: {
				icon: 'text',
				title: 'Text',
				text: 'Hello world. This is some nice text.'
			}
		})
	"

It works though but how messy is that?
To me it does make no sense at all to switch from a clean and working single file component based on markup to an inline “quote-on-quote-solution” especially when complexity becomes an issue.

Am I missing anything?

Thank you!

Cheers Jan

2

Hi Jan,

have you worked this out? I am currently upgrading a Kirby 3 project to Kirby 4 and run into the same issue. I used to use <k-drawer> inline with some custom markup in there and everything was perfectly fine. When I use <k-overlay type="drawer"> instead, it will open and close the drawer, but the styling is broken (it is not a drawer and has no backdrop; it rather is a broken modal).

Cheerio

3

Hi @benzin ,
yes I did, indeed. Fortunately @bastianallgeier gave me some valuable hints:
https://forum.getkirby.com/t/k4-opening-k-drawer-with-button/30318/11?u=janck

  1. import custom vue component
  2. register plugin by
  3. setting the path
  4. naming the component according to the import alias

Given that you should manage to find a proper solution.

Cheers

4

… followed by:

$panel.drawer.open({…

of course