vueless/ui.loader-progress/storybook/docs.mdx

Vue Styleless UI Component Library, powered by Tailwind CSS.

import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } 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 `useLoaderProgress` composable.

The loader uses queue of resources and will be shown until at least one item is present in a queue.

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

const {
  loaderProgressOn,
  loaderProgressOff,
  requestQueue,
} = useLoaderProgress();

// show loader (add resource into queue)
loaderProgressOn("/transactions");
loaderProgressOff(["/transactions", "/products"]);

// hide loader (remove resource from queue)
loaderProgressOff("/transactions");
loaderProgressOff(["/transactions", "/products"]);

// get current global resource queue
console.log(requestQueue.value);
`} language="jsx" dark />

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

<Source code={`
import { loaderProgressOn, loaderProgressOff } from "vueless";

// show loader
loaderProgressOn("/transactions");

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

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