import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
import { getSource } from "../../utils/storybook";

import * as stories from "./stories";
import defaultConfig from "../config?raw"

<Meta of={stories} />
<Title of={stories} />
<Subtitle of={stories} />
<Description of={stories} />
<Primary of={stories}  />
<Controls of={stories.Default} />
<Stories of={stories} />

## Using loader
To control the loader state in Vue components use `useLoaderOverlay` composable.

<Source code={`
import { useLoaderOverlay } from "vueless";

const { isLoading, loaderOverlayOn, loaderOverlayOff } = useLoaderOverlay();

// get loader state
console.log(isLoading.value);

// show loader
loaderOverlayOn();

// hide loader
loaderOverlayOff();
`} language="jsx" dark />

## Using loader outside Vue components
To control the loader state outside Vue components, use the following methods.

<Source code={`
import { loaderOverlayOn, loaderOverlayOff } from "vueless";

// show loader
loaderOverlayOn();

// hide loader
loaderOverlayOff();
`} language="jsx" dark />

## Default config
<Source code={getSource(defaultConfig)} language="jsx" dark />