### Toast Usage Examples

Source: https://ui.vuestic.dev/ui-elements/toast

Code examples demonstrating various ways to use the Toast component.

```APIDOC
## Toast Usage Examples

### Basic Usage (Options API)
```javascript
export default {
  methods: {
    onButtonClick() {
      this.$vaToast.notify('Toast example!')
    },
  },

  beforeRouteLeave (to, from, next) {
    this.$vaToast.closeAll()
    next()
  },
}
```

### Basic Usage (Composition API)
```javascript
import { useToast } from 'vuestic-ui'

const { init, close, closeAll } = useToast()

// To show a toast
init({
  message: 'Toast message'
})

// To close a specific toast
// close('toast-id')

// To close all toasts
// closeAll()
```

### Toast with Options
```javascript
this.$vaToast.init({
  title: 'Important Notification',
  message: 'This is a detailed toast message.',
  color: 'primary',
  duration: 5000,
  position: 'top-center',
  closeable: true,
  onClick: () => {
    console.log('Toast clicked!')
  }
})
```

### Toast with Custom HTML
```javascript
this.$vaToast.init({
  dangerouslyUseHtmlString: true,
  message: '<strong>This is an important</strong> HTML message.'
})
```

### Toast with Custom Render Function
```javascript
import { h } from 'vue'

this.$vaToast.init({
  render: () => h('div', { style: 'color: blue;' }, 'Rendered Toast Content')
})
```
```

--------------------------------

### va-aspect-ratio 4/3 Example

Source: https://ui.vuestic.dev/ui-elements/aspect-ratio

This example shows how to use the 'ratio' prop to achieve a 4/3 aspect ratio.

```html
<va-aspect-ratio ratio="4/3">
  <va-image src="https://picsum.photos/200/300" />
</va-aspect-ratio>
```

--------------------------------

### VaBadge Placement Examples

Source: https://ui.vuestic.dev/ui-elements/badge

Demonstrates how to position the badge relative to a base element using the `placement` and `offset` props. Available placements include top, bottom, left, and right with start, center, and end variations.

```html
<va-badge placement="top-right" offset="-10px 5px">5 Button</va-badge>
<va-badge placement="top-center" offset="-10px 5px">5 Button</va-badge>
<va-badge placement="bottom-start" offset="-10px 5px">5 Button</va-badge>
<va-badge placement="left-center" offset="-10px 5px">5 __</va-badge>
```

--------------------------------

### Add Example Block

Source: https://ui.vuestic.dev/contribution/documentation-page

Use the `block.example()` method to display a component with its code preview. This block can utilize global services and is common for UI element examples.

```javascript
block.example('ComponentName')
```

--------------------------------

### Parallax Examples

Source: https://ui.vuestic.dev/ui-elements/parallax

Examples demonstrating different configurations of the Parallax component.

```APIDOC
## Parallax Examples

### Default
A block with a background image is displayed by default. You need to pass the `src` property.

### Custom height and speed
You can adjust parallax `height` and scroll `speed`. Attention, the scrolling speed depends on the ratio of the parallax height to the image height.

### Reversed
You can flip the parallax scrolling.

### Slot
You can provide some kind of content over the parallax.
```

--------------------------------

### Vuestic UI Configuration File Example

Source: https://ui.vuestic.dev/styles/tailwind

This is an example of the `vuestic.config.js` file after synchronization from Tailwind CSS. It shows how breakpoint thresholds and color variables are structured.

```javascript
// vuestic.config.js

{
  breakpoint: {
    thresholds: {
      sm: 640,
        md: 768,
        lg: 1024,
        xl: 1280,
        '2xl': 1536,
    },
  },
  colors: {
    variables: {
      black: '#000',
        white: '#fff',
        'gray-50': '#f9fafb',
        'gray-100': '#f3f4f6',
        'gray-200': '#e5e7eb',
    ...
      'rose-700': '#be123c',
        'rose-800': '#9f1239',
        'rose-900': '#881337',
    },
  },
}
```

--------------------------------

### Install Dependencies with Yarn

Source: https://ui.vuestic.dev/contribution/guide

Use this command to install project dependencies after cloning the repository.

```bash
yarn install
```

--------------------------------

### Basic Form Example with FormKit and Vuestic

Source: https://ui.vuestic.dev/extensions/formkit

A simple form demonstrating basic input fields like email, organization name, and a textarea for usage description. This example showcases the fundamental integration.

```html
#  Carbon Sequestration Grant 
*Email address 
*Organization name 
*How will you use the money? 
Submit
Form data
 _expand_more_
```

--------------------------------

### Accordion Examples

Source: https://ui.vuestic.dev/ui-elements/accordion

Examples demonstrating the usage of the Accordion component.

```APIDOC
## Accordion Component Examples

### Default Usage

Default usage of the `va-accordion` component.

```html
<va-accordion>
  <va-collapse title="First collapse">
    <!-- Content for first collapse -->
  </va-collapse>
  <va-collapse title="Second collapse">
    <!-- Content for second collapse -->
  </va-collapse>
  <va-collapse title="Third collapse">
    <!-- Content for third collapse -->
  </va-collapse>
</va-accordion>
```

### Multiple Collapses

Accordion component allows you to select multiple collapses.

```html
<va-accordion multiple>
  <va-collapse title="First collapse">
    <!-- Content for first collapse -->
  </va-collapse>
  <va-collapse title="Second collapse">
    <!-- Content for second collapse -->
  </va-collapse>
  <va-collapse title="Third collapse">
    <!-- Content for third collapse -->
  </va-collapse>
</va-accordion>
```

### Menu Example

One of the interesting ways to use the component is a collapsing menu.

```html
<va-accordion>
  <va-collapse title="UI Elements">
    <!-- UI Elements content -->
  </va-collapse>
  <va-collapse title="Services">
    <!-- Services content -->
  </va-collapse>
  <va-collapse title="Styles">
    <!-- Styles content -->
  </va-collapse>
</va-accordion>
```
```

--------------------------------

### va-aspect-ratio 1/1 Example

Source: https://ui.vuestic.dev/ui-elements/aspect-ratio

Demonstrates a 1/1 aspect ratio using the 'ratio' prop.

```html
<va-aspect-ratio ratio="1/1">
  <va-image src="https://picsum.photos/200/300" />
</va-aspect-ratio>
```

--------------------------------

### Install Vuestic UI NPM Package

Source: https://ui.vuestic.dev/getting-started/installation

Install the Vuestic UI package into an existing project using npm or yarn. This is part of the manual installation process.

```bash
npm install vuestic-ui
```

--------------------------------

### va-aspect-ratio 16/9 Example

Source: https://ui.vuestic.dev/ui-elements/aspect-ratio

Use the 'ratio' prop to set the aspect ratio. This example demonstrates a 16/9 ratio.

```html
<va-aspect-ratio ratio="16/9">
  <va-image src="https://picsum.photos/200/300" />
</va-aspect-ratio>
```

--------------------------------

### Rating Component Configuration Example

Source: https://ui.vuestic.dev/ui-elements/rating

This example demonstrates how to configure the rating component with custom sizes and icons. Ensure 'halves' prop is true to use 'emptyIcon' and 'halfIcon'.

```html
<va-rating
  v-model="value"
  :max="5"
  empty-icon="star_outline"
  half-icon="star_half"
  icon="star"
  :halves="true"
/>
```

--------------------------------

### Select with Objects as Options (Full Object Example)

Source: https://ui.vuestic.dev/ui-elements/select

Illustrates the structure of an object used as an option when 'text-by' and 'value-by' are configured.

```json
{ "text": "First", "textBy": "First text by", "value": "1", "valueBy": "first" }
```

--------------------------------

### Register Vuestic Plugin in Setup File

Source: https://ui.vuestic.dev/getting-started/testing

Create a setup file to register the Vuestic plugin globally for @vue/test-utils. This ensures Vuestic components are available in your tests.

```javascript
// tests/setup.js
import { config } from '@vue/test-utils'
import { createVuestic } from 'vuestic-ui'

config.global.plugins.push(createVuestic())
```

--------------------------------

### Install Vuestic Nuxt Integration

Source: https://ui.vuestic.dev/getting-started/nuxt

Install the Vuestic UI integration module for Nuxt using npm.

```bash
npm install @vuestic/nuxt
```

--------------------------------

### Configure Vitest for Vuestic UI Testing

Source: https://ui.vuestic.dev/getting-started/testing

Register the setup file in your Vitest configuration to enable Vuestic UI plugin for testing. Ensure the path to the setup file is correct.

```typescript
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  test: {
    setupFiles: resolve('./tests/setup.js'), // Path to setup file
  },
})
```

--------------------------------

### Install Material Design Icons

Source: https://ui.vuestic.dev/getting-started/configuration-guide

Install the `material-design-icons-iconfont` package using yarn or npm to use Material Design icons with Vuestic UI.

```bash
yarn add material-design-icons-iconfont -D

```

--------------------------------

### Install FormKit Theme for Vuestic UI

Source: https://ui.vuestic.dev/extensions/formkit

Install the Vuestic UI FormKit theme package using npm. This is the first step to using FormKit with Vuestic.

```bash
npm install @vuestic/formkit
```

--------------------------------

### Install Vueform Dependency

Source: https://ui.vuestic.dev/extensions/vueform

Install the Vueform dependency using npm. This is the first step to integrating Vueform into your project.

```bash
npm install @vuestic/vueform
```

--------------------------------

### Install unocss-preset-theme

Source: https://ui.vuestic.dev/extensions/unocss

Install the `unocss-preset-theme` package as a development dependency. This preset is required for integrating Vuestic UI themes with UnoCSS.

```bash
npm i -D unocss-preset-theme
```

--------------------------------

### Install Tailwind CSS Integration Package

Source: https://ui.vuestic.dev/styles/tailwind

Install the `@vuestic/tailwind` package using npm or yarn to enable synchronization between Vuestic UI and Tailwind CSS configurations.

```bash
npm install @vuestic/tailwind
```

--------------------------------

### Basic Slider Usage

Source: https://ui.vuestic.dev/ui-elements/slider

Demonstrates the default configuration of the slider component. No specific setup is required beyond importing the component.

```html
<va-slider v-model="value"></va-slider>
```

--------------------------------

### Modal Functional API (Options API)

Source: https://ui.vuestic.dev/ui-elements/modal

Example of how to use the `$vaModal` service in the Options API to initialize and display a modal.

```APIDOC
## Modal Functional API (Options API)

### Description
This section demonstrates how to use the `$vaModal` service, provided by the `VaModalPlugin`, to create and manage modal instances within an Options API application.

### Method
`$vaModal.init(options)`

### Endpoint
N/A (This is a service method, not an HTTP endpoint)

### Parameters
#### Options Object
- **message** (string) - Required - The main content of the modal.
- **onOk** (() => void) - Optional - Callback function executed when the 'Ok' button is clicked.
- **onCancel** (() => void) - Optional - Callback function executed when the 'Cancel' button is clicked.

### Request Example
```javascript
export default {
  methods: {
    onOkCallback() { /* ... */ },
    onCancelCallback() { /* ... */ },
    onButtonClick() {
      this.$vaModal.init({
        message: 'Modal example!',
        onOk: this.onOkCallback,
        onCancel: this.onCancelCallback,
      })
    },
  },
}
```

### Response
#### Success Response
- **modal instance VNode** - The VNode representing the modal instance.

#### Response Example
N/A (The `init` method returns a VNode, not a JSON response.)
```

--------------------------------

### Basic Date Input Usage

Source: https://ui.vuestic.dev/ui-elements/date-input

Demonstrates the basic implementation of the VaDateInput component. No specific setup is required beyond importing the component.

```html
<va-date-input v-model="date" />
```

--------------------------------

### Default Switch Usage

Source: https://ui.vuestic.dev/ui-elements/switch

Basic implementation of the Switch component. No specific setup required beyond importing the component.

```html
<va-switch></va-switch>
```

--------------------------------

### Text Justification Example - Vuestic UI

Source: https://ui.vuestic.dev/styles/typography

Provides an example of justified text, ensuring lines fill the container width. Useful for formal documents or long paragraphs.

```html
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet neque explicabo maxime optio doloremque alias quam eveniet saepe, facilis ullam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ullam est amet illum molestiae beatae adipisci numquam, repudiandae excepturi quidem vero, illo iure dignissimos cumque minus voluptatem harum odio provident! 
```

--------------------------------

### Select Offset Prop Example

Source: https://ui.vuestic.dev/ui-elements/select

Configures the offset for the option list placement. Use an array for [top, left] or a number for uniform offset.

```javascript
[
  1,
  0
]
```

--------------------------------

### Advanced Form Example

Source: https://ui.vuestic.dev/extensions/vueform

An advanced form showcasing more Vuestic components within Vueform, including VaInput, VaSelect, VaRadio, VaFileUpload, VaSlider, VaRating, and VaSwitch. This example demonstrates complex form structures with various input types, file uploads, and rating components.

```html
<form>
  <va-input
    name="fullName"
    label="Full Name"
  />

  <va-select
    name="country"
    label="Country"
    :options="['USA', 'Canada', 'Mexico']"
  />

  <va-radio
    name="gender"
    label="Gender"
    :options="['Male', 'Female', 'Other']"
  />

  <va-checkbox
    name="newsletter"
    label="Subscribe to newsletter"
  />

  <va-textarea
    name="about"
    label="About you"
  />

  <va-date-input
    name="birthdate"
    label="Birthdate"
  />

  <va-time-input
    name="appointmentTime"
    label="Preferred Appointment Time"
  />

  <va-slider
    name="satisfaction"
    label="Satisfaction level"
    min="0"
    max="10"
  />

  <va-counter
    name="quantity"
    label="Quantity"
    min="0"
    max="10"
  />

  <va-rating
    name="rating"
    label="Rate our service"
  />

  <va-textarea
    name="explanation"
    label="Explain what went wrong"
  />

  <va-file-upload
    name="avatar"
    label="Upload your avatar"
  />

  <va-switch
    name="advancedOptions"
    label="Show advanced options?"
  />

  <va-input
    name="githubUsername"
    label="GitHub Username"
  />

  <va-textarea
    name="internalNotes"
    label="Internal Notes"
  />

  <va-button type="submit">Submit</va-button>
</form>
```

--------------------------------

### Global Configuration with VaConfig

Source: https://ui.vuestic.dev/getting-started/web-components

Configure Vuestic components globally using the `va-config` web component. This example sets default properties for `VaButton` and `VaInput`.

```html
<va-config id="config">
  <!-- App code here -->
</va-config>

<script>
const config = document.getElementById("config");

config.components = {
 VaButton: {
   color: "danger",
 },
 VaInput: {
   outline: true,
 }
};
</script>
```

--------------------------------

### Create Modal with Options API

Source: https://ui.vuestic.dev/ui-elements/modal

Use the `$vaModal` global object to initialize and display a modal. This method is available in the Options API and requires the VaModalPlugin to be installed.

```javascript
export default {
  methods: {
    onOkCallback() { ... },
    onCancelCallback() { ... },
    onButtonClick() {
      this.$vaModal.init({
        message: 'Modal example!',
        onOk: this.onOkCallback,
        onCancel: this.onCancelCallback,
      })
    },
  },
}
```

--------------------------------

### Run Project Documentation Locally

Source: https://ui.vuestic.dev/contribution/guide

Use this command to run the project documentation locally, similar to the deployed vuestic.dev.

```bash
yarn serve:docs
```

--------------------------------

### Vue Vuestic UI List Clickable Example

Source: https://ui.vuestic.dev/ui-elements/list

Demonstrates how to make list items clickable, allowing them to function as links. This is useful for navigation or triggering actions.

```html
<va-list>
  <va-list-label>Clickable</va-list-label>
  <va-list-item>
    Audrey Clay
    644 Vermont Court, Freelandville, Kentucky, 2619
  </va-list-item>
  <va-list-separator />
  <va-list-item>
    Aguirre Klein
    626 Carroll Street, Roulette, Ohio, 1477
  </va-list-item>
  <va-list-separator />
  <va-list-item>
    Tucker Kaufman
    887 Winthrop Street, Tryon, Florida, 3912
  </va-list-item>
  <va-list-separator />
  <va-list-item>
    Herbert Keller
    286 NW. Shore St.Longwood, FL 32779
  </va-list-item>
</va-list>
```

--------------------------------

### Collapse with Color Schemes

Source: https://ui.vuestic.dev/ui-elements/collapse

Illustrates how to apply different color schemes to the collapse component. One example colors only the header, while the other colors both the header and body.

```html
<va-collapse color="#2c825e">
  <template #header>
    Color collapse header only
  </template>
  <template #default>
    Content
  </template>
</va-collapse>

<va-collapse
  header-color="#2c825e"
  color="#70a790"
>
  <template #header>
    Color collapse header and body
  </template>
  <template #default>
    Content
  </template>
</va-collapse>
```

--------------------------------

### Initialize Vuestic UI with Partial Configuration

Source: https://ui.vuestic.dev/styles/tailwind

When initializing Vuestic UI, you can selectively merge configurations. This example shows how to include only Tailwind CSS colors while using default settings for other Vuestic options.

```javascript
// main.*

import { createVuestic } from 'vuestic-ui'
import config from '../vuestic.config.js'

createApp(App)
  .use(createVuestic({
    config: {
      icons: [...],
      components: {
        all: { ... },
        presets: { ... },
      },
      colors: config.colors,
    },
  }))
  .mount('#app')
```

--------------------------------

### Initialize Vuestic UI with Synced Configuration

Source: https://ui.vuestic.dev/styles/tailwind

Import the `config` from your `vuestic.config.js` file and specify it when creating the Vuestic instance in your main application file. This ensures Vuestic UI uses the synchronized settings.

```javascript
// main.*

import { createVuestic } from 'vuestic-ui'
import config from '../vuestic.config.js'

createApp(App)
  .use(createVuestic({ config }))
  .mount('#app')
```

--------------------------------

### Create New Vuestic App with npm

Source: https://ui.vuestic.dev/getting-started/installation

Use this command to scaffold a new Vue project with Vuestic UI using the `create-vuestic` CLI tool. This is the recommended approach.

```bash
npm create vuestic@latest
```

--------------------------------

### Code Snippet - Vuestic UI

Source: https://ui.vuestic.dev/styles/typography

Use the `va-code-snippet` class for styling code examples within the application. Includes an example of a link within the snippet.

```html
<p class="va-code-snippet">
  This is a wonderful example.
  <a href="#" onClick="">Read more</a>
</p>
```

--------------------------------

### Grid System Breakpoints Example

Source: https://ui.vuestic.dev/styles/grid

Demonstrates the usage of breakpoint classes (md12, md6) for responsive grid layouts. These classes control element visibility and sizing based on screen width.

```html
<div class="md12">
  <div class="md6"></div>
  <div class="md6"></div>
</div>

<div class="md12">
  <div class="md9"></div>
  <div class="md3"></div>
</div>
```

--------------------------------

### Tree Shaking Specific Components

Source: https://ui.vuestic.dev/getting-started/web-components

Import and register only the necessary Vuestic web components to reduce bundle size. This example includes `VaConfig`, `VaCarousel`, and `VaInput`, along with default Material Icons CSS.

```javascript
import { registerVuesticWebComponentsEssential, VaConfig, VaCarousel, VaInput } from 'vuestic-ui/web-components'
import 'vuestic-ui/css'

const defaultCSS = `
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}`

registerVuesticWebComponentsEssential({
  css: defaultCSS,

  components: {
    VaConfig, VaCarousel, VaInput,
  }
})
```

--------------------------------

### Nested Modals Example

Source: https://ui.vuestic.dev/ui-elements/modal

Modals can be nested, allowing one modal to be opened from within another. This example demonstrates the basic structure for enabling nested modal functionality.

```html
<va-modal>
  Show modal
</va-modal>
```

--------------------------------

### Configuring First Day of the Week

Source: https://ui.vuestic.dev/ui-elements/date-picker

Demonstrates how to set Monday as the first day of the week using the GlobalConfig. The default is Sunday.

```html
<vuestic-date-picker />
```

```html
<vuestic-date-picker />
```

--------------------------------

### Basic Usage

Source: https://ui.vuestic.dev/ui-elements/inner-loading

Demonstrates the basic usage of the `va-inner-loading` component by wrapping another component and controlling its loading state with the `loading` prop.

```APIDOC
## Basic Usage

By default wrap a component in `va-inner-loading` with a `loading` property.

### Description

This example shows how to use the `va-inner-loading` component to display a loading indicator.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Request Example

```html
<va-inner-loading :loading="true">
  <!-- Content to be displayed when not loading -->
  <div>Your content here</div>
</va-inner-loading>
```

### Response

#### Success Response (200)

N/A (Component Usage)

#### Response Example

N/A (Component Usage)
```

--------------------------------

### Toast Initialization Options

Source: https://ui.vuestic.dev/ui-elements/toast

Details of the options available when initializing a toast.

```APIDOC
## Toast Initialization Options

### Description
Configuration options for creating a new toast instance.

### Options

- **title** (string): The title of the toast notification.
- **message** (string | VNode): The main content of the toast. Can be a string or a VNode.
- **iconClass** (string): CSS class for an icon to display in the toast.
- **customClass** (string): Custom CSS class to apply to the toast.
- **duration** (number): How long the toast will be visible in milliseconds.
- **closeable** (boolean): Whether the toast can be closed by the user.
- **dangerouslyUseHtmlString** (boolean): If true, the message will be treated as HTML. Use with caution.
- **render** (() => VNode): A function that returns a VNode for custom toast content.
- **onClose** (() => void): Callback function executed when the toast is closed.
- **onClick** (() => void): Callback function executed when the toast is clicked.
- **offsetX** (number): Horizontal offset from the edge of the screen.
- **position** (NotificationPosition): The position of the toast on the screen (e.g., 'top-right', 'bottom-left').
- **offsetY** (number): Vertical offset from the edge of the screen.
- **visible** (boolean): Controls the visibility of the toast.
- **color** (string): The color of the toast. Can be a theme color name or a HEX value.
```

--------------------------------

### Composable Naming Convention

Source: https://ui.vuestic.dev/contribution/structure

Composable functions should always start with the 'use' prefix.

```typescript
use[ComposableName]
```

--------------------------------

### Using Text as Icons

Source: https://ui.vuestic.dev/ui-elements/icon

Demonstrates how to use the `text` prop to display text content as an icon.

```html
<va-icon name="close" text="close" />
<va-icon name="star_border" text="✰" />
```

--------------------------------

### Add Component Block

Source: https://ui.vuestic.dev/contribution/documentation-page

Use the `block.component()` method to display a component that has logic and is not purely an example of use.

```javascript
block.component('ComponentName')
```

--------------------------------

### Grid System Offsets Example

Source: https://ui.vuestic.dev/styles/grid

Illustrates how to use offset classes (offset-xs, offset-sm, etc.) to create space between elements on different screen sizes. This is useful for controlling horizontal spacing in layouts.

```html
<div class="offset-md">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="last">Last</div>
</div>

<div class="offset-lg">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="last">Last</div>
</div>
```

--------------------------------

### Default VaBadge Usage

Source: https://ui.vuestic.dev/ui-elements/badge

Use this snippet for displaying information in views and tables. No special setup is required.

```html
<va-badge>Paid</va-badge>
<va-badge>Declined</va-badge>
<va-badge>pending</va-badge>
<va-badge>Verified</va-badge>
```

--------------------------------

### Default Parallax Example

Source: https://ui.vuestic.dev/ui-elements/parallax

Displays a basic parallax effect with a background image. Requires the `src` prop to be set.

```html
<va-parallax src="https://picsum.photos/seed/picsum/1920/1080"></va-parallax>
```

--------------------------------

### Fixed App Bar Example

Source: https://ui.vuestic.dev/ui-elements/app-bar

Illustrates how to make the `va-app-bar` component fixed to the viewport using the `fixed` prop.

```html
<va-app-bar fixed>
  _home_ _info_ __
  Login _expand_more_
</va-app-bar>
```

--------------------------------

### Multiple Presets Configuration for VaButton

Source: https://ui.vuestic.dev/services/components-config

Configure multiple presets for a component, allowing later presets to override earlier ones. This example defines 'addToCart' and 'promotion' presets for `VaButton`.

```javascript
createVuestic({
  config: {
    components: {
      presets: {
        VaButton: {
          addToCart: { round: true, color: 'success', icon: 'shopping_cart', 'slot:default': 'Add to card' },
          promotion: { gradient: true, color: 'primary' }
        },
      },
    },
  }
})
```

--------------------------------

### Default Time Input

Source: https://ui.vuestic.dev/ui-elements/time-input

Basic usage of the VaTimeInput component. No specific setup or imports are required beyond the component itself.

```html
<va-time-input></va-time-input>
```

--------------------------------

### Dropdown Default Usage

Source: https://ui.vuestic.dev/ui-elements/dropdown

Basic implementation of the Dropdown component. No specific setup or imports are required beyond the component itself.

```html
<template>
  <VaDropdown>
    <template #activator>
      <VaButton>Dropdownable</VaButton>
    </template>
    <VaDropdownContent>
      <div class="px-4 py-2">Dropdown content</div>
    </VaDropdownContent>
  </VaDropdown>
</template>

```

--------------------------------

### Default Button - Vuestic UI

Source: https://ui.vuestic.dev/ui-elements/button

A basic `va-button` component. No specific setup is required beyond importing the component.

```html
<va-button>Button</va-button>
```

--------------------------------

### Create Vuestic with Global Config

Source: https://ui.vuestic.dev/services/global-config

Configure default values for icons, components, and colors when creating the Vuestic UI instance.

```javascript
import { createApp } from 'vue'
import { createVuestic } from 'vuestic-ui'

createApp(App)
  .use(createVuestic({
    config: {
      icons: [/* ... */],
      components: {
        /* ... */
        all: { /* ... */ },
        presets: { /* ... */ },
      },
      colors: { /* ... */ },
    },
  }))
  .mount('#app')
```

--------------------------------

### Modal Functional API (Composition API)

Source: https://ui.vuestic.dev/ui-elements/modal

Example of how to use the `useModal` hook in the Composition API to initialize and display a modal.

```APIDOC
## Modal Functional API (Composition API)

### Description
This section demonstrates how to use the `useModal` hook to create and manage modal instances within a Composition API application.

### Method
`useModal().init(options)`

### Endpoint
N/A (This is a hook method, not an HTTP endpoint)

### Parameters
#### Options Object
- **message** (string) - Required - The main content of the modal.
- **onOk** (() => void) - Optional - Callback function executed when the 'Ok' button is clicked.
- **onCancel** (() => void) - Optional - Callback function executed when the 'Cancel' button is clicked.

### Request Example
```javascript
import { useModal } from 'vuestic-ui'

export default {
  setup() {
    const { init } = useModal()

    const onOkCallback = () => { ... }
    const onCancelCallback = () => { ... }

    const showModal = () => {
      init({
        message: 'Modal example!',
        onOk: onOkCallback,
        onCancel: onCancelCallback,
      })
    }

    return { showModal }
  },
}
```

### Response
#### Success Response
- **modal instance VNode** - The VNode representing the modal instance.

#### Response Example
N/A (The `init` method returns a VNode, not a JSON response.)
```

--------------------------------

### Simple VaSidebarItem Usage

Source: https://ui.vuestic.dev/ui-elements/sidebar-item

Demonstrates basic usage of VaSidebarItem with VaSidebarContent and VaSidebarTitle. Ensure VaSidebarContent is used for padding and VaSidebarTitle to fill remaining width.

```html
<va-sidebar-item>
  I'm default
</va-sidebar-item>
<va-sidebar-item>
  I'm centered!
</va-sidebar-item>
<va-sidebar-item active>
  I'm active
</va-sidebar-item>
```

--------------------------------

### Select Clear Event Argument Example

Source: https://ui.vuestic.dev/ui-elements/select

The 'clear' event is emitted when the select value is cleared. The event argument can be of any type.

```javascript
any
```

--------------------------------

### Select Trigger Prop Example

Source: https://ui.vuestic.dev/ui-elements/select

Defines the actions that trigger the opening and closing of the dropdown. Supports multiple trigger types.

```javascript
[
  "click",
  "right-click",
  "space",
  "enter"
]
```

--------------------------------

### Setting Min/Max Panel Sizes

Source: https://ui.vuestic.dev/ui-elements/split

Use the `limits` prop to define both minimum and maximum sizes for panels. The sum of min and max sizes should ideally equal 100% for full coverage. Supports units like percentages, pixels, and rems.

```html
<va-split-layout :limits="[[10, 'any'], ['50px', '30rem']]"></va-split-layout>
```

--------------------------------

### VaMenu Basic Usage with Options

Source: https://ui.vuestic.dev/ui-elements/menu

Demonstrates basic VaMenu usage by providing an array of options. The component automatically handles click and keyboard events for opening and closing the menu.

```vue
<va-menu :options="[{ text: 'Open menu' }]">
  <template #activator="{ props, isOpen, toggle }" >
    <va-button v-bind="props" @click="toggle">{{ isOpen ? 'Close menu' : 'Open menu' }}</va-button>
  </template>
</va-menu>
```

--------------------------------

### Link Styles - Vuestic UI

Source: https://ui.vuestic.dev/styles/typography

Provides examples of default and secondary link styles. Use for navigation and interactive elements.

```html
Default Link
Secondary Link
```

--------------------------------

### va-aspect-ratio with va-card

Source: https://ui.vuestic.dev/ui-elements/aspect-ratio

Combine va-aspect-ratio with other components like va-card to maintain aspect ratio. This example uses a 4/3 ratio.

```html
<va-card
  stripe
  stripe-color="info"
  gradient
  style="--va-card-max-width: 300px;"
>
  <va-aspect-ratio ratio="4/3" style="margin: -1.5rem -1.5rem 0;">
    <va-image src="https://picsum.photos/200/300" />
  </va-aspect-ratio>

  <template #title>Card Title</template>
  <template #content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </template>
</va-card>
```

--------------------------------

### Basic Form Example

Source: https://ui.vuestic.dev/extensions/vueform

A simple form demonstrating the use of Vuestic components like VaInput, VaDateInput, and VaSelect within Vueform. It includes fields for username, email, password, date of birth, GitHub URL, and language selection, along with submit and reset buttons.

```html
<form>
  <va-input
    name="username"
    label="Username"
    placeholder="Pick a username people will remember!"
  />

  <va-input
    name="email"
    label="Email address"
    type="email"
  />

  <va-input
    name="password"
    label="Password"
    type="password"
  />

  <va-date-input
    name="dob"
    label="Date of birth"
  />

  <va-input
    name="github"
    label="Github URL"
    placeholder="https://github.com/"
  />

  <va-select
    name="language"
    label="Language"
    :options="['AngularJS', 'Vue.js', 'React']"
  />

  <va-checkbox
    name="terms"
    label="I accept the terms and conditions"
  />

  <va-button type="submit">Submit</va-button>
  <va-button type="reset">Reset</va-button>
  <va-button color="danger" type="reset-validators">Reset Validators</va-button>
</form>

<pre>Form data
 _expand_more_</pre>
```

--------------------------------

### Highlighting Weekends and Custom Weekends

Source: https://ui.vuestic.dev/ui-elements/date-picker

Shows how to highlight weekends using the `highlight-weekends` prop and how to define custom weekends with the `weekends` function.

```html
<vuestic-date-picker highlight-weekends />
```

```html
<vuestic-date-picker :weekends="customWeekends" />
```

--------------------------------

### Default Pagination

Source: https://ui.vuestic.dev/ui-elements/pagination

Displays a list of pages with the length determined by the `pages` prop. No additional setup is required for basic usage.

```html
<va-pagination
  v-model="activePage"
  :pages="10"
/>
```

--------------------------------

### Basic va-input Usage

Source: https://ui.vuestic.dev/ui-elements/input

Demonstrates the basic usage of the va-input component with a placeholder and label.

```html
<va-input placeholder="Name" label="Name" v-model="name" />
```

--------------------------------

### Basic Toast Notification

Source: https://ui.vuestic.dev/ui-elements/toast

Initiate a basic toast notification using the `notify` method. This example shows a simple text message.

```javascript
this.$vaToast.notify('Toast example!')
```

--------------------------------

### Affix Component: Fixed at Bottom

Source: https://ui.vuestic.dev/ui-elements/affix

This example demonstrates fixing an element to the bottom of its container. Adjust the `offset-bottom` prop as needed for your layout.

```html
<va-affix offset-bottom="50">
  <va-button>Fixed at the bottom: 50</va-button>
</va-affix>
```

--------------------------------

### Importing images in Vite for va-image

Source: https://ui.vuestic.dev/ui-elements/image

Demonstrates how to import images in the script tag for use with `va-image` in Vite-based applications.

```html
<template>
  <va-image :src="image" />
</template>

<script setup>
  import image from '~/assets/path/to/image.jpg'
</script>
```

--------------------------------

### Button Toggle with Gradient Style

Source: https://ui.vuestic.dev/ui-elements/button-toggle

Apply a gradient style to the background of the button toggle. This example demonstrates using gradient presets.

```html
<va-button-toggle gradient="warning" v-model="value" :options="[{ label: 'One' }, { label: 'Two' }, { label: 'Three' }]" />
```

```html
<va-button-toggle gradient="#FF0000" v-model="value" :options="[{ label: 'One' }, { label: 'Two' }, { label: 'Three' }]" />
```

```html
<va-button-toggle gradient="info" v-model="value" :options="[{ label: 'One' }, { label: 'Two' }, { label: 'Three' }]" />
```

```html
<va-button-toggle gradient="light" v-model="value" :options="[{ label: 'One' }, { label: 'Two' }, { label: 'Three' }]" />
```

--------------------------------

### Run Storybook for Component Testing

Source: https://ui.vuestic.dev/contribution/guide

This script launches the project with demos in Storybook, allowing you to test component features in isolation.

```bash
yarn serve:storybook
```

--------------------------------

### Slider with Icons

Source: https://ui.vuestic.dev/ui-elements/slider

Adds icons at the start or end of the slider track. Use 'iconPrepend' and 'iconAppend' props to specify the icon names.

```html
<va-slider icon-prepend="home" v-model="value"></va-slider>
<va-slider icon-append="home" v-model="value"></va-slider>
```

--------------------------------

### Add Custom Colors and Configure Components

Source: https://ui.vuestic.dev/services/colors-config

Demonstrates how to define custom color variables and assign them to Vuestic components like VaButton. Ensure 'createVuestic' is used with the 'config' object.

```javascript
import { createVuestic } from "vuestic-ui";

createApp(App)
  .use(
    createVuestic({
      config: {
        colors: {
          variables: {
            primary: "#ff00ff",
            button: "#000",
          },
        },
        components: {
          VaButton: {
            color: "button",
          },
        },
      },
    })
  )
  .mount("#app");

```

--------------------------------

### Configure Vite for Auto-Importing Vuestic Components

Source: https://ui.vuestic.dev/extensions/unplugin-vue-components

Set up the unplugin-vue-components for Vite to automatically resolve components starting with 'Va' from the 'vuestic-ui' package.

```typescript
import {
    defineConfig
} from 'vite';
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
    plugins: [
        Components({
            resolvers: [
              (componentName) => {
                if (componentName.startsWith('Va'))
                  return { name: componentName, from: 'vuestic-ui' }
              },
            ],
        }),
    ],
});
```

--------------------------------

### Global Theme Switcher with useColors

Source: https://ui.vuestic.dev/styles/colors

Implement a global theme switcher using the `useColors` composable. The `applyPreset` method allows you to change the active color theme across the entire application.

```javascript
const { applyPreset } = useColors()

const changeTheme = (themeName) => {
  applyPreset(themeName)
}
```

--------------------------------

### Navbar Default Slots

Source: https://ui.vuestic.dev/ui-elements/navbar

Use the left, center, and right slots to pass items to the navbar. This example demonstrates basic content placement.

```html
<va-navbar>
  <template #left>
    Left slot
  </template>
  <template #center>
    Center slot
  </template>
  <template #right>
    Right slot
  </template>
</va-navbar>
```