Dropbox component not working with IDropdownItem

[calebeaires]

1. Vite: 2.0
2. Vue: 3.0.5
3. Inkline: 3.0.0-beta.5

• I'm submitting a:

  • Bug Report

• Steps to reproduce

index.html

<div id="app"></div>
<script type="module">
  import { createApp } from "vue";
  import App from "./App.vue";

import '@inkline/inkline/src/inkline.scss'
export { Inkline } from '@inkline/inkline/src'
export * as components from '@inkline/inkline/src/components/index.js'
const app = createApp(App);

  app.use(Inkline, {components});
  app.config.globalProperties.$inkline.options.colorMode = "light";

  app.mount("#app");
</script>

App.vue

<template>
  <div>
    <i-dropdown>
      <i-button>Dropdown</i-button>
      <i-dropdown-menu>
        <i-dropdown-item href="">Action</i-dropdown-item>
        <i-dropdown-item disabled>Something disabled here</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
      </i-dropdown-menu>
    </i-dropdown>
  </div>
</template>

Result

Dropbox, tabs and select components has issues with css. Is the setup wrong?

[alexgrozav]

Hey! The dropdown component now has a new simplified syntax.

<i-dropdown>
    <i-button>Dropdown</i-button>
    <template #body>
        <i-dropdown-item>Action</i-dropdown-item>
        <i-dropdown-item>Another action</i-dropdown-item>
        <i-dropdown-item disabled>Disabled action</i-dropdown-item>
        <i-dropdown-divider />
        <i-dropdown-item>Separated item</i-dropdown-item>
    </template>
</i-dropdown>

You can access the new docs (currently in progress) by doing the following:

• git clone https://github.com/inkline/inkline.git
• npm install, if you run into issues check vite build error: out of memory vitejs/vite#2433 (comment)
• npm run dev

I'll be hosting the beta docs as soon as I'm done with writing the last form documentation parts. :)

[calebeaires]

Did it. Now I see! 👍