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.
The queue approach is useful if you want to implement global loading handling (for example in axios interceptors)

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

const {
  isLoading,
  loaderProgressOn,
  loaderProgressOff,
  progressRequestQueue,
} = useLoaderProgress();

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

/* show loader */
loaderProgressOn(); // simple
loaderProgressOn("/transactions"); // single resource
loaderProgressOff(["/transactions", "/products"]); // multiple resources

/* hide loader */
loaderProgressOff(); // simple
loaderProgressOff("/transactions"); // single resource
loaderProgressOff(["/transactions", "/products"]); // multiple resources

/* access loader progress resource queue */
console.log(progressRequestQueue.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(); // simple
loaderProgressOn("/transactions"); // single resource
loaderProgressOff(["/transactions", "/products"]); // multiple resources

/* hide loader */
loaderProgressOff(); // simple
loaderProgressOff("/transactions"); // single resource
loaderProgressOff(["/transactions", "/products"]); // multiple resources
`} language="jsx" dark />

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