[ Bug Report ] Wrong Dropdown example code

[HipyCas]

Environment

- **browser**: Mozilla Firefox 91.0.1
- **equal**: 0.79.3
- **vue**: 3.1.4

Current Behavior

The dropdown (it-dropdown) component is appearing open always, whether you're hovering, clicking or none of them. It even gets weirder when I try to use Vue's shorter version for slot="menu", #menu, which makes the whole component break.

It first appeared when using it in a flex container, that made me think that the problem could be with the flex display, or maybe with how I had written it. And so I tested the official example both inside the flex container and outside of it, and I still got the same problem.

The dropdown menu links and buttons work flawlessly, just the opening and closing is what is not working. No other component is giving me errors.

For the first case, this is the code and screenshot:

<template>
  <div id="container">
      <p>{{ file.name }}</p>
      <it-dropdown>
        <it-button icon="more_vert" round text slot="default"></it-button>
        <it-dropdown-menu slot="menu">
          <it-dropdown-item icon="download" @click="navigate(file.download_url)"
            >Download</it-dropdown-item
          >
          <it-dropdown-item icon="visibility" @click="navigate(file.contents_url)"
            >View</it-dropdown-item
          >
          <it-dropdown-item icon="info" @click="drawerVisible = true"
            >About</it-dropdown-item
          >
        </it-dropdown-menu>
      </it-dropdown>
    </div>
</template>

<style>
#container {
  display: flex;
  justify-content: space-between;
  border-radius: 1em;
  border-width: 0.1em;
  box-shadow: 10px 0 30px 0 #88888888;
  padding: 1em;
}
</style>

The second case:

<template>
  <router-view></router-view>
  <it-dropdown>
    <it-button>Hover me</it-button>
    <it-dropdown-menu slot="menu">
      <it-dropdown-item>Hello</it-dropdown-item>
      <it-dropdown-item disabled>Disabled</it-dropdown-item>
      <it-dropdown-item icon="cloud">Cloud</it-dropdown-item>
      <it-dropdown-item divided>Divided</it-dropdown-item>
    </it-dropdown-menu>
  </it-dropdown>
</template>

Expected Behavior

To simply work, as stated in the documentation. I thought I was writing it incorrectly, but the fact that the documentation example doesn't work is just driving me crazy.

Steps To Reproduce

1. Create a vue app with the version mentioned before (I am using vite)
2. Install and enable globally equal components.
3. Personally, I'm also using the Inter font through their NPM package and downloaded Material Icons CSS
4. Copy and paste the dropdown example in the docs or build your owm
5. Serve and see

Anything else?

No response

[HipyCas]

SOLUTION FOUND I was so confused by this that I went to the docs Vue pages to see how you got them working, and found out that the docs were wrong. As opposed to the code shown to the user in the docs (shown above), the inner workings or the codes are like this:

<it-dropdown>
  <it-button>Hover me</it-button>
  <template #menu>
    <it-dropdown-menu>
      <it-dropdown-item>Hello</it-dropdown-item>
      <it-dropdown-item disabled>Disabled</it-dropdown-item>
      <it-dropdown-item icon="cloud">Cloud</it-dropdown-item>
      <it-dropdown-item divided>Divided</it-dropdown-item>
    </it-dropdown-menu>
  </template>
</it-dropdown>

Making use of the template tag, it works perfectly (I also tried using the optional <template #default> for the button, which also worked perfectly).

What to fix? Just have to change the docs to make use of the template tag. I could try do that myself if you'd like.

[quatrochan]

I could try do that myself if you'd like.

It'd be nice