import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import ChecBreadcrumbs from '../../components/ChecBreadcrumbs.vue';
import StoryRouter from 'storybook-vue-router';

<Meta title="Components" component={ChecBreadcrumbs} />

# Breadcrumbs

<Props of={ChecBreadcrumbs} />

# Default:

Set to iterate breadcrumbs based on `this.$route.matched`; works well with  a global `vue-router` installation.

<Preview>
  <Story name="Breadcrumbs" decorators={[StoryRouter({}, {
    initialEntry: "/settings/developers/api-keys",
    routes: [
      {
        path: '/',
        meta: { breadcrumb: 'Dashboard'},
        children: [
          {
            path: '/settings',
            meta: { breadcrumb: 'Settings' },
            children: [
              {
                path: 'developers',
                meta: {breadcrumb: 'Developers'},
                children: [
                  {
                    path: 'api-keys',
                    meta: {breadcrumb: 'API Keys'}
                  }
                ]
              }
            ]
          }
        ]
      },
    ]
  })]}>
    {{
      components: {
        ChecBreadcrumbs
      },
      template: `
        <div class="py-16 flex justify-center">
          <ChecBreadcrumbs />
        </div>`
    }}
  </Story>
</Preview>