### Start Project

Source: https://github.com/airbnb/lottie-web

Starts the project after dependencies have been installed.

```bash
npm start
```

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

### Vue Setup for Basic Tabbar

Source: https://context7_llms

Provides the JavaScript setup for the basic Tabbar example. It imports necessary icons from '@botim/buckit-icons' and uses Vue's `ref` to manage the active tab state.

```js
import { ref } from 'vue';
import {
  Home02Line,
  SearchLine,
  CustomerServiceSolid,
  GearLine,
} from '@botim/buckit-icons';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};
```

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

### DropdownMenu Custom Content Setup

Source: https://context7_llms

Provides the JavaScript setup for the custom content example, managing references to dropdown items, switch states, and handling confirmation logic.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const item = ref(null);
    const value = ref(0);
    const switch1 = ref(false);
    const switch2 = ref(false);
    const options = [
      { text: 'Option1', value: 0 },
      { text: 'Option2', value: 1 },
      { text: 'Option3', value: 2 },
    ];
    const onConfirm = () => {
      item.value.toggle();
    };

    return {
      item,
      value,
      switch1,
      switch2,
      options,
      onConfirm,
    };
  },
};
```

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

### Development Setup (npm/bower)

Source: https://github.com/airbnb/lottie-web

Instructions for setting up the project development environment using either npm or bower, followed by starting the development server.

```bash
npm install

# or

bower install

# then

npm start
```

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

### Navbar Component Examples

Source: https://context7_llms

Demonstrates various configurations and use cases for the Navbar component, including basic setup, type variations, and slot usage.

```APIDOC
## Navbar Size

### Description
This example shows a basic Navbar with a title, left text, an extra icon, and left arrow.

### Method
N/A (Component Usage)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<bot-nav-bar
  title="Title"
  left-text="Back"
  :extra-icon="MusicSolid"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
```

### Response
N/A

---
```

```APIDOC
## Type Capsule

### Description
This example demonstrates the Navbar component configured with a 'capsule' type, featuring a title, back text, left arrow, and custom capsule left icon.

### Method
N/A (Component Usage)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<bot-nav-bar
  title="title"
  type="capsule"
  left-text="back"
  left-arrow
  capsule-left-icon="star"
  @click-right="onClickRight"
  @click-capsule-left="onClickCapsuleLeft"
>
</bot-nav-bar>
```

### Response
N/A

---
```

```APIDOC
## Use Slot

### Description
This example illustrates using slots in the Navbar component to customize the right side content, here displaying a search icon.

### Method
N/A (Component Usage)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<bot-nav-bar title="Title" left-text="Back" left-arrow>
  <template #right>
    <bot-icon :icon="SearchLine" />
  </template>
</bot-nav-bar>
```

### Response
N/A

---
```

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

### Install ZXP Extension using ZXP Installer

Source: https://github.com/airbnb/lottie-web

This option describes the process of downloading a ZIP file from a repository, extracting the ZXP file from the '/build/extension' directory, and then using the ZXP installer from aescripts.com to install the extension.

```text
download the ZIP from the repo.
Extract content and get the .zxp file from '/build/extension'
Use the ZXP installer from aescripts.com.
```

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

### Vue Setup for Basic Tab Matching

Source: https://context7_llms

Provides the JavaScript setup for the basic tab matching example, using Vue's `ref` to manage the active tab's state. This script is essential for the HTML structure to function correctly.

```js
import { ref } from 'vue';

export default {
  setup() {
    const activeName = ref('a');
    return { activeName };
  },
};
```

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

### Botim Image: Lazy Load Setup

Source: https://context7_llms

Provides an example of enabling lazy loading for images with the 'lazy-load' prop and shows the necessary Vue application setup to register the Lazyload component.

```html
<bot-image
  width="100"
  height="100"
  lazy-load
  src="https://cdn-web-sg.botim.me/upd/v1/mp/perm/npuploadtools/202306/15-b2d8e4f5c1fb4e928adcdd6c8ed259cf.jpeg"
/>
```

```javascript
import { createApp } from 'vue';
import { Lazyload } from '@botim/bot';

const app = createApp();
app.use(Lazyload);
```

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

### Vue 3 Setup for Half Star Bot Rate

Source: https://context7_llms

Vue 3 Composition API setup for the half-star `bot-rate` example, initializing a reactive `ref` with a decimal value.

```js
import { ref } from 'vue';

export default {
  setup() {
    const value = ref(2.5);
    return { value };
  },
};
```

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

### RollingText Instance and Start Method

Source: https://context7_llms

Demonstrates how to get a reference to a RollingText instance using Vue's `ref` and call its `start` method to begin the animation.

```javascript
import { ref } from 'vue';
import type { RollingTextInstance } from '@botim/bot';

const rollingTextRef = ref<RollingTextInstance>();

rollingTextRef.value?.start();
```

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

### Install Project Dependencies

Source: https://github.com/airbnb/lottie-web

Installs project dependencies using either npm or bower. This is a prerequisite before running the project.

```bash
npm install
```

```bash
bower install
```

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

### BackTop component setup with Vue.js

Source: https://context7_llms

Vue.js setup function to manage the list data for the BackTop component examples. It generates an array of items to be displayed, enabling the scrolling behavior needed to trigger the BackTop button.

```javascript
export default {
  setup() {
    const list = [...Array(50).keys()];
    return { list };
  },
};
```

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

### Install Icon Package

Source: https://context7_llms

Installs the '@botim/buckit-icons' package using npm, which is required before using icon components.

```shell
npm install @botim/buckit-icons
```

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

### Install Lottie via npm

Source: https://github.com/airbnb/lottie-web

Installs the Lottie Web player using the npm package manager.

```shell
npm install lottie-web
```

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

### Install Lottie Web Player with npm or Bower

Source: https://github.com/airbnb/lottie-web

This snippet shows how to install the lottie-web library using either npm or Bower. These commands are typically run in a project's terminal.

```shell
# with npm
npm install lottie-web

# with bower
bower install bodymovin
```

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

### Composition API - setup()

Source: https://v3.vuejs.org/api/built-in-components.html

Documentation for the setup() function within the Vue.js Composition API.

```APIDOC
## Composition API - setup()

Details on the `setup()` function, a core part of the Vue.js Composition API.

### Description
Explains the `setup()` function and its role in the Composition API.

### Method
N/A (Documentation Page)

### Endpoint
N/A (Documentation Page)

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

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

### Vue.js setup for Multiple Date Selection

Source: https://context7_llms

Provides the Vue.js setup for the multiple date selection example. It uses 'ref' to manage the 'text' and 'show' states and defines the 'onConfirm' function to handle the date selection confirmation.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const text = ref('');
    const show = ref(false);

    const onConfirm = (dates) => {
      show.value = false;
      text.value = `选择了 ${dates.length} 个日期`;
    };

    return {
      text,
      show,
      onConfirm,
    };
  },
};
```

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

### DropdownMenu Setup with Options

Source: https://context7_llms

Provides the JavaScript setup for the basic DropdownMenu usage, defining reactive variables for selected values and the options arrays.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const value1 = ref(0);
    const value2 = ref('a');
    const option1 = [
      { text: 'Option1', value: 0 },
      { text: 'Option2', value: 1 },
      { text: 'Option3', value: 2 },
    ];
    const option2 = [
      { text: 'Option A', value: 'a' },
      { text: 'Option B', value: 'b' },
      { text: 'Option C', value: 'c' },
    ];

    return {
      value1,
      value2,
      option1,
      option2,
    };
  },
};
```

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

### Vue.js setup for Date Range Selection

Source: https://context7_llms

The Vue.js setup for the date range selection example. It includes a 'formatDate' helper function and the 'onConfirm' function to format and display the selected date range.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const date = ref('');
    const show = ref(false);

    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = (values) => {
      const [start, end] = values;
      show.value = false;
      date.value = `${formatDate(start)} - ${formatDate(end)}`;
    };

    return {
      date,
      show,
      onConfirm,
    };
  },
};
```

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

### Vue 3 Setup for Readonly Half Star Bot Rate

Source: https://context7_llms

Vue 3 Composition API setup for the readonly half-star `bot-rate` example, initializing a reactive `ref` with a decimal value.

```js
import { ref } from 'vue';

export default {
  setup() {
    const value = ref(3.3);
    return { value };
  },
};
```

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

### Vue Setup for Non-numeric Text Animation

Source: https://context7_llms

Provides the Vue.js `setup` function for the non-numeric text animation example. It defines a reactive `textList` array containing strings that the RollingText component will animate.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const textList = ref([
      'aaaaa',
      'bbbbb',
      'ccccc',
      'ddddd',
      'eeeee',
      'fffff',
      'ggggg',
    ]);
    return { textList };
  },
};
```

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

### Install Lottie via Homebrew (Shell)

Source: https://github.com/airbnb/lottie-web

This snippet shows how to install the LottieFiles extension for After Effects using Homebrew. It requires tapping the 'danielbayley/adobe' repository and then installing the 'lottie' cask. Ensure Homebrew is installed and configured on your system.

```shell
brew tap danielbayley/adobe
brew cask install lottie
```

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

### Swipe Component Examples

Source: https://context7_llms

Examples demonstrating various functionalities of the Swipe component, including change events, vertical scrolling, setting item size, and custom indicators.

```APIDOC
## Swipe Component - Change Event

### Description
This example shows how to handle the `change` event on the Swipe component to display a toast message with the current swipe index.

### Method
N/A (Component Event)

### Endpoint
N/A (Component)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<bot-swipe @change="onChange">
  <bot-swipe-item>1</bot-swipe-item>
  <bot-swipe-item>2</bot-swipe-item>
  <bot-swipe-item>3</bot-swipe-item>
  <bot-swipe-item>4</bot-swipe-item>
</bot-swipe>
```

```js
import { showToast } from '@botim/bot';

export default {
  setup() {
    const onChange = (index) => showToast('Current Swipe index:' + index);
    return { onChange };
  },
};
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Swipe Component - Vertical Scrolling

### Description
This example demonstrates how to configure the Swipe component for vertical scrolling with autoplay.

### Method
N/A (Component Property)

### Endpoint
N/A (Component)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<bot-swipe :autoplay="3000" vertical>
  <bot-swipe-item>1</bot-swipe-item>
  <bot-swipe-item>2</bot-swipe-item>
  <bot-swipe-item>3</bot-swipe-item>
  <bot-swipe-item>4</bot-swipe-item>
</bot-swipe>
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Swipe Component - Set SwipeItem Size

### Description
This example shows how to set a custom width for SwipeItems when the loop mode is disabled.

### Method
N/A (Component Property)

### Endpoint
N/A (Component)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<bot-swipe
  class="swipe-size"
  :loop="false"
  :width="300"
  indicator-color="white"
>
  <bot-swipe-item><div class="swipe-item-box">1</div></bot-swipe-item>
  <bot-swipe-item><div class="swipe-item-box">2</div></bot-swipe-item>
  <bot-swipe-item><div class="swipe-item-box">3</div></bot-swipe-item>
  <bot-swipe-item><div class="swipe-item-box">4</div></bot-swipe-item>
</bot-swipe>

<style lang="less">
  .swipe-size {
    .bot-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      box-sizing: border-box;

      &:first-child {
        padding-left: 16px;
      }

      &:last-child {
        padding-right: 16px;
      }

      & + .bot-swipe-item {
        padding-left: 8px;
      }

      .swipe-item-box {
        background: #39a9ed;
      }
    }
  }
</style>
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

```APIDOC
## Swipe Component - Custom Indicator

### Description
This example demonstrates how to create a custom indicator for the Swipe component to display the current item number and total items.

### Method
N/A (Component Slot)

### Endpoint
N/A (Component)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<bot-swipe>
  <bot-swipe-item>1</bot-swipe-item>
  <bot-swipe-item>2</bot-swipe-item>
  <bot-swipe-item>3</bot-swipe-item>
  <bot-swipe-item>4</bot-swipe-item>
  <template #indicator="{ active, total }">
    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
  </template>
</bot-swipe>

<style>
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
</style>
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Vue.js setup for Custom Day Text Formatting

Source: https://context7_llms

The Vue.js setup for the custom day text formatting example, defining the 'formatter' function to modify day display properties.

```javascript
export default {
  setup() {
    const formatter = (day) => {
      const month = day.date.getMonth() + 1;
      const date = day.date.getDate();

      if (month === 5) {
        if (date === 1) {
          day.topInfo = 'Labor Day';
        } else if (date === 4) {
          day.topInfo = 'Youth Day';
        } else if (date === 11) {
          day.text = 'Today';
        }
      }

      if (day.type === 'start') {
        day.bottomInfo = 'In';
      } else if (day.type === 'end') {
        day.bottomInfo = 'Out';
      }

      return day;
    };

    return {
      formatter,
    };
  },
};
```

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

### Usage Examples for PickerGroup

Source: https://context7_llms

Provides examples of how to use the PickerGroup component for selecting date and time, or a date range.

```APIDOC
## Usage Examples

### Select Date Time

Place a `DatePicker` component and a `TimePicker` component in the default slot of the `PickerGroup` to select both a date and a time.

`PickerGroup` will render a unified toolbar, so the child components will not render is's toolbar, and the toolbar props and events need to be set to the `PickerGroup`, such as the `title` prop, `confirm` event, `cancel` event, etc. Other props and events in child components can be used as before.

```html
<bot-picker-group
  title="Title"
  :tabs="['Date', 'Time']"
  @confirm="onConfirm"
  @cancel="onCancel"
>
  <bot-date-picker
    v-model="currentDate"
    :min-date="minDate"
    :max-date="maxDate"
  />
  <bot-time-picker v-model="currentTime" />
</bot-picker-group>
```

```js
import { ref } from 'vue';
import { showToast } from '@botim/bot';

export default {
  setup() {
    const currentDate = ref(['2022', '06', '01']);
    const currentTime = ref(['12', '00']);
    const onConfirm = () => {
      showToast(
        `${currentDate.value.join('/')} ${currentTime.value.join(':')}`
      );
    };
    const onCancel = () => {
      showToast('cancel');
    };

    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentDate,
      currentTime,
    };
  },
};
```

### Select Date Range

Place two `DatePicker` components in the default slot of `PickerGroup` to select the time range.

```html
<bot-picker-group
  title="Title"
  :tabs="['Start Date', 'End Date']"
  @confirm="onConfirm"
  @cancel="onCancel"
>
  <bot-date-picker
    v-model="startDate"
    :min-date="minDate"
    :max-date="maxDate"
  />
  <bot-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />
</bot-picker-group>
```

```js
import { ref } from 'vue';
import { showToast } from '@botim/bot';

export default {
  setup() {
    const startDate = ref(['2022', '06', '01']);
    const endDate = ref(['2023', '06', '01']);

    const onConfirm = () => {
      showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);
    };
    const onCancel = () => {
      showToast('cancel');
    };

    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      endDate,
      startDate,
    };
  },
};
```
```

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

### Install Bodymovin via Bower

Source: https://github.com/airbnb/lottie-web

Installs the Bodymovin library using the Bower package manager.

```shell
bower install bodymovin
```

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

### Use CountDown Instance Methods

Source: https://context7_llms

Illustrates how to get a reference to the CountDown component instance using `ref` and call its methods like `start()`. This allows for programmatic control over the countdown timer.

```typescript
import { ref } from 'vue';
import type { CountDownInstance } from '@botim/bot';

const countDownRef = ref<CountDownInstance>();

countDownRef.value?.start();
```

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

### Botim Progress Component Usage Examples (HTML)

Source: https://context7_llms

Provides examples of using the Botim Progress component with various props. Demonstrates basic usage with `percentage`, dotted styles using `dotted` and `only-dotted`, setting `stroke-width`, applying an `inactive` state, and customizing text and colors with `pivot-text`, `color`, `pivot-color`, and `text-color`.

```html
<bot-progress :percentage="50" />
<bot-progress :percentage="60" dotted />
<bot-progress :percentage="60" dotted only-dotted />

<bot-progress :percentage="50" stroke-width="8" />

<bot-progress inactive :percentage="50" />

<bot-progress pivot-text="Orange" color="#f2826a" :percentage="25" />
<bot-progress pivot-text="Red" color="#ee0a24" :percentage="50" />
<bot-progress
  :percentage="75"
  pivot-text="Purple"
  pivot-color="#7232dd"
  color="linear-gradient(to right, #be99ff, #7232dd)"
/>
```

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

### Vue Setup for Manual RollingText Control

Source: https://context7_llms

Provides the Vue.js `setup` function for manual control of the RollingText animation. It imports necessary icons and defines `start` and `reset` functions that call the corresponding methods on the `rollingTextRef`.

```javascript
import { ref } from 'vue';
import { PlayCircleLine, ResetLine } from '@botim/buckit-icons';
export default {
  setup() {
    const rollingTextRef = ref(null);
    const start = () => {
      rollingTextRef.value.start();
    };
    const reset = () => {
      rollingTextRef.value.reset();
    };
    return { rollingTextRef, start, reset };
  },
};
```

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

### Basic ActionBar Usage Example

Source: https://context7_llms

Demonstrates the basic usage of the bot-action-bar component with icons and buttons, including click event handling.

```html
<bot-action-bar>
  <bot-action-bar-icon
    :icon="CustomerServiceLine"
    text="Icon1"
    @click="onClickIcon"
  />
  <bot-action-bar-icon :icon="WalletLine" text="Icon2" @click="onClickIcon" />
  <bot-action-bar-icon
    :icon="CustomerServiceLine"
    text="Icon3"
    @click="onClickIcon"
  />
  <bot-action-bar-button type="danger" text="Button" @click="onClickButton" />
</bot-action-bar>
```

```javascript
import { showToast } from '@botim/bot';
import { CustomerServiceLine, WalletLine } from '@botim/buckit-icons';

export default {
  setup() {
    const onClickIcon = () => showToast('Click Icon');
    const onClickButton = () => showToast('Click Button');
    return {
      onClickIcon,
      onClickButton,
    };
  },
};
```

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

### Usage Examples

Source: https://context7_llms

Demonstrates how to use the Calendar component for single date selection.

```APIDOC
## Usage Examples

### Select Single Date

The `confirm` event will be emitted after the date selection is completed.

```html
<bot-cell title="Select Single Date" :value="date" @click="show = true" />
<bot-calendar v-model:show="show" @confirm="onConfirm" />
```

```js
import { ref } from 'vue';

export default {
  setup() {
    const date = ref('');
    const show = ref(false);

    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = (value) => {
      show.value = false;
      date.value = formatDate(value);
    };

    return {
      date,
      show,
      onConfirm,
    };
  },
};
```
```

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

### Manual Extension Installation for Adobe After Effects

Source: https://github.com/airbnb/lottie-web

This option details the manual installation process for the extension, requiring After Effects to be closed. It involves extracting the 'bodymovin.zxp' file to specific Adobe CEP extension directories for Windows and Mac, followed by registry key modification for debugging.

```text
Close After Effects
Extract the zipped file on build/extension/bodymovin.zxp to the adobe CEP folder:
WINDOWS:
C:\Program Files (x86)\Common Files\Adobe\CEP\extensions or
C:\<username>\AppData\Roaming\Adobe\CEP\extensions
MAC:
/Library/Application Support/Adobe/CEP/extensions/bodymovin
(you can open the terminal and type:
$ cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
then type:
$ ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin
to make sure it was copied correctly type)
Edit the registry key:
WINDOWS:
open the registry key HKEY_CURRENT_USER/Software/Adobe/CSXS.6 and add a key named PlayerDebugMode, of type String, and value 1.
MAC:
open the file ~/Library/Preferences/com.adobe.CSXS.6.plist and add a row with key PlayerDebugMode, of type S
```

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

### Bot Picker Field Logic (Vue.js)

Source: https://context7_llms

Vue.js setup logic for the bot-field picker example. It manages the picker's visibility, data, and confirmation logic.

```js
import { ref } from 'vue';

export default {
  setup() {
    const result = ref('');
    const showPicker = ref(false);
    const columns = [
      { text: 'Delaware', value: 'Delaware' },
      { text: 'Florida', value: 'Florida' },
      { text: 'Georqia', value: 'Georqia' },
      { text: 'Indiana', value: 'Indiana' },
      { text: 'Maine', value: 'Maine' },
    ];

    const onConfirm = ({ selectedOptions }) => {
      result.value = selectedOptions[0]?.text;
      showPicker.value = false;
    };

    return {
      result,
      columns,
      onConfirm,
      showPicker,
    };
  },
};
```

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

### Popup Positioning Examples (Vue)

Source: https://context7_llms

Illustrates how to position the bot-popup component using the `position` prop. Examples include top, bottom, left, and right alignments, with specified heights or widths.

```html
<!-- top popup -->
<bot-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />

<!-- bottom popup -->
<bot-popup
  v-model:show="showBottom"
  position="bottom"
  :style="{ height: '30%' }"
/>

<!-- left popup -->
<bot-popup v-model:show="showLeft" position="left" :style="{ width: '30%' }" />

<!-- Popup on the right -->
<bot-popup
  v-model:show="showRight"
  position="right"
  :style="{ width: '30%' }"
/>
```

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

### Vue Setup for Dialog Component

Source: https://context7_llms

Provides the necessary JavaScript setup for a Vue component to manage the visibility of the `<bot-dialog>` component using `ref`.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    return { show };
  },
};
```

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

### Show Image Preview (Basic)

Source: https://context7_llms

A basic example of how to display an image preview using the showImagePreview function with an array of image URLs.

```javascript
import { showImagePreview } from '@botim/bot';

showImagePreview([
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]);
```

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

### BotUI Popover Component

Source: https://context7_llms

Examples demonstrating the usage of the BotUI Popover component, including showing icons, disabling actions, and custom content.

```APIDOC
## BotUI Popover: Show Icon

### Description
Displays a popover with a list of actions, each associated with an icon.

### Method
Not applicable (Component Usage)

### Endpoint
Not applicable (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<bot-popover v-model:show="showPopover" :actions="actions">
  <template #reference>
    <bot-button type="primary">Show Icon</bot-button>
  </template>
</bot-popover>
```

### Response
#### Success Response (200)
Not applicable (Component Usage)

#### Response Example
```javascript
import { ref } from 'vue';
import { PlusLine, MusicSolid, DotsSolid } from '@botim/buckit-icons';

export default {
  setup() {
    const showPopover = ref(false);
    const actions = [
      { text: 'Option 1', icon: PlusLine },
      { text: 'Option 2', icon: MusicSolid },
      { text: 'Option 3', icon: DotsSolid },
    ];

    return {
      actions,
      showPopover,
    };
  },
};
```

## BotUI Popover: Disable Action

### Description
Demonstrates how to disable specific actions within the popover.

### Method
Not applicable (Component Usage)

### Endpoint
Not applicable (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<bot-popover v-model:show="showPopover" :actions="actions">
  <template #reference>
    <bot-button type="primary">Disable Action</bot-button>
  </template>
</bot-popover>
```

### Response
#### Success Response (200)
Not applicable (Component Usage)

#### Response Example
```javascript
import { ref } from 'vue';

export default {
  setup() {
    const showPopover = ref(false);
    const actions = [
      { text: 'Option 1', disabled: true },
      { text: 'Option 2', disabled: true },
      { text: 'Option 3' },
    ];

    return {
      actions,
      showPopover,
    };
  },
};
```

## BotUI Popover: Custom Content

### Description
Shows how to use custom content within the popover instead of a predefined list of actions.

### Method
Not applicable (Component Usage)

### Endpoint
Not applicable (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<bot-popover v-model:show="showPopover">
  <bot-grid
    square
    clickable
    :border="false"
    column-num="3"
    style="width: 240px;"
  >
    <bot-grid-item
      v-for="i in 6"
      :key="i"
      text="Option"
      :icon="ImageLine"
      @click="showPopover = false"
    />
  </bot-grid>
  <template #reference>
    <bot-button type="primary">Custom Content</bot-button>
  </template>
</bot-popover>
```

### Response
#### Success Response (200)
Not applicable (Component Usage)

#### Response Example
```javascript
import { ref } from 'vue';

export default {
  setup() {
    const showPopover = ref(false);
    return { showPopover };
  },
};
```

## BotUI Popover: Uncontrolled

### Description
Illustrates the uncontrolled usage of the Popover component, where its display is managed internally.

### Method
Not applicable (Component Usage)

### Endpoint
Not applicable (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<bot-popover :actions="actions" position="top-start" @select="onSelect">
  <template #reference>
    <bot-button type="primary">Uncontrolled</bot-button>
  </template>
</bot-popover>
```

### Response
#### Success Response (200)
Not applicable (Component Usage)

#### Response Example
```javascript
import { ref } from 'vue';
import { showToast } from '@botim/bot';

export default {
  setup() {
    const actions = [
      { text: '选项一' },
      { text: '选项二' },
      { text: '选项三' },
    ];
    const onSelect = (action) => showToast(action.text);
    return {
      actions,
      onSelect,
    };
  },
};
```
```

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

### Show Image Preview with Start Position

Source: https://context7_llms

Displays an image preview and sets the initial image to display using the 'startPosition' option.

```javascript
import { showImagePreview } from '@botim/bot';

showImagePreview({
  images: [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  ],
  startPosition: 1,
});
```

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

### Bot Circle: Custom Size and Start Position

Source: https://context7_llms

Demonstrates setting a custom size for the bot-circle component using the 'size' prop and controlling the starting position with 'start-position'.

```html
<bot-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  size="120px"
  text="Custom Size"
/>
<bot-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :text="Left"
  start-position="left"
/>
<bot-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  text="Right"
  start-position="right"
/>
<bot-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  text="Bottom"
  start-position="bottom"
/>
```

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

### Vue 3 Setup for Basic Bot Rate

Source: https://context7_llms

Vue 3 Composition API setup for the basic `bot-rate` usage, initializing a reactive `ref` for the rating value.

```js
import { ref } from 'vue';

export default {
  setup() {
    const value = ref(3);
    return { value };
  },
};
```

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

### Vue Checkbox Setup for Toggle All

Source: https://context7_llms

Provides the Vue.js setup function to manage checkbox states and implement 'Check All' and 'Toggle All' features using template refs. Includes refs for 'checked' state and the checkbox group.

```js
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref([]);
    const checkboxGroup = ref(null);

    const checkAll = () => {
      checkboxGroup.value.toggleAll(true);
    }
    const toggleAll = () => {
      checkboxGroup.value.toggleAll();
    },

    return {
      checked,
      checkAll,
      toggleAll,
      checkboxGroup,
    };
  },
};
```

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

### Vue Setup for Circle Progress Bar

Source: https://context7_llms

Provides the Vue.js setup function to manage the reactive 'currentRate' and compute the 'text' for the bot-circle component. Uses Vue's ref and computed properties.

```js
import { ref, computed } from 'vue';

export default {
  setup() {
    const currentRate = ref(0);
    const text = computed(() => currentRate.value.toFixed(0) + '%');

    return {
      text,
      currentRate,
    };
  },
};
```

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

### Vue Checkbox Setup for Button Sizing

Source: https://context7_llms

Provides the Vue.js setup function for managing the 'checked' state when using bot-checkbox-button components with different sizes. Uses Vue's ref for reactive state.

```js
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref(['a']);
    return { checked };
  },
};
```

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

### Import Steps Types

Source: https://context7_llms

Example of importing type definitions for Steps components from the bot library.

```typescript
import type { StepsProps, StepsDirection } from '@botim/bot';
```

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

### Basic DropdownMenu Usage

Source: https://context7_llms

Illustrates a basic setup for the DropdownMenu component, containing two DropdownItem components with predefined options and v-model bindings.

```html
<bot-dropdown-menu>
  <bot-dropdown-item v-model="value1" :options="option1" />
  <bot-dropdown-item v-model="value2" :options="option2" />
</bot-dropdown-menu>
```

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

### Cascader Basic Usage Example

Source: https://context7_llms

Provides a basic usage example for the bot-cascader component within a Vue.js application. It demonstrates how to bind values, provide options, and handle events like closing the popup and finishing the selection.

```html
<bot-field
  v-model="fieldValue"
  is-link
  readonly
  label="Area"
  placeholder="Select Area"
  @click="show = true"
/>
<bot-popup v-model="show" round position="bottom">
  <bot-cascader
    v-model="cascaderValue"
    title="Select Area"
    :options="options"
    @close="show = false"
    @finish="onFinish"
  />
</bot-popup>
```

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

### Vue Setup for Before Change Hook

Source: https://context7_llms

Provides the JavaScript setup for the `before-change` hook. It defines an `active` ref and a `beforeChange` function that can either prevent the change (return false), allow it (return true), or asynchronously determine the outcome.

```js
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    const beforeChange = (index) => {
      // prevent change
      if (index === 1) {
        return false;
      }

      // async
      return new Promise((resolve) => {
        resolve(index !== 3);
      });
    };

    return {
      active,
      beforeChange,
    };
  },
};
```

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

### Vue Setup for Click Tab Event

Source: https://context7_llms

Provides the JavaScript setup for handling tab click events. It imports `showToast` from '@botim/bot' and defines an `onClickTab` function to display a toast with the clicked tab's title.

```js
import { showToast } from '@botim/bot';

export default {
  setup() {
    const onClickTab = ({ title }) => showToast(title);
    return {
      onClickTab,
    };
  },
};
```

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

### Basic Time Picker Setup (JavaScript)

Source: https://context7_llms

Sets up the Vue.js component's script section, initializing the 'currentTime' reactive variable for the time picker.

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const currentTime = ref(['12', '00']);
    return { currentTime };
  },
};
```

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

### Vertical Divider Examples

Source: https://context7_llms

Demonstrates various configurations of the vertical Divider, including dashed styles, hairline, and custom border colors.

```html
<bot-divider vertical />
文本
<bot-divider vertical dashed />
文本
<bot-divider vertical :hairline="false" />
文本
<bot-divider vertical :style="{ borderColor: '#1989fa' }" />
```

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

### NoticeBar basic usage

Source: https://context7_llms

A simple NoticeBar example displaying a short message with the 'info' type and disabled scrolling.

```html
<bot-notice-bar type="info" :scrollable="false" text="Short Content" />
```

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

### Cell: Router Navigation Example

Source: https://context7_llms

Provides an example of using `bot-cell` for navigation within a Vue application using Vue Router. It shows how to link to an external URL using the `url` prop and to an internal route using the `to` prop.

```html
<bot-cell-group>
  <bot-cell title="URL" is-link url="https://github.com" />
  <bot-cell title="Vue Router" is-link to="index" />
</bot-cell-group>
```

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

### Bot Grid Basic Usage

Source: https://context7_llms

Example of using the bot-grid component to display content in a grid layout. It imports necessary icons.

```ts
import type { GridProps, GridDirection, GridItemProps } from '@botim/bot';
```

```html
<bot-grid>
  <bot-grid-item :icon="ImageLine" text="Text" />
  <bot-grid-item :icon="ImageLine" text="Text" />
  <bot-grid-item :icon="ImageLine" text="Text" />
  <bot-grid-item :icon="ImageLine" text="Text" />
</bot-grid>
```

```js
import { ImageLine } from '@botim/buckit-icons';
```

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

### FloatingPanel Component API

Source: https://context7_llms

Documentation for the FloatingPanel component, covering its introduction, props, events, slots, and usage examples.

```APIDOC
## Component: FloatingPanel

### Introduction
A panel that floats at the bottom of a page, which can be dragged up and down to browse content, often used to provide additional functionality or information. Please upgrade `@botim/bot` to >= v1.1.1 before using this component.

### Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:height | The current display height of the panel | _number \| string_ | `0` |
| anchors | Setting custom anchors, unit `px` | _number[]_ | `[100, window.innerWidth * 0.6]` |
| duration | Transition duration, unit second | _number \| string_ | `0.3` |
| content-draggable | Allow dragging content | _boolean_ | `true` |
| lock-scroll `v4.6.4` | When not dragging, Whether to lock background scroll | _boolean_ | `false` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |

### Events
| Event | Description | Arguments |
| --- | --- | --- |
| height-change | Emitted when panel height is changed and the dragging is finished | _{ height: number }_ |

### Slots
| Name    | Description          |
| ------- | -------------------- |
| default | Custom panel content |
| header  | Custom panel header  |

### Types
The component exports the following type definitions:

```ts
import type { FloatingPanelProps } from '@botim/bot';
```

### Usage Examples

**Basic Usage**
The default height of FloatingPanel is `100px`, and users can drag it to expand the panel to a height of `60%` of the screen height.

```html
<bot-floating-panel>
  <bot-cell-group>
    <bot-cell
      v-for="i in 26"
      :key="i"
      :title="String.fromCharCode(i + 64)"
      size="large"
    />
  </bot-cell-group>
</bot-floating-panel>
```

**Custom Anchors**
You can set the anchor position of FloatingPanel through the `anchors` attribute, and control the display height of the current panel through `v-model:height`.

For example, you can make the panel stop at three positions: `100px`, 40% of the screen height, and 70% of the screen height.

```html
<bot-floating-panel v-model:height="height" :anchors="anchors">
  <div style="text-align: center; padding: 15px">
    <p>Panel Show Height {{ height.toFixed(0) }} px</p>
  </div>
</bot-floating-panel>
```

```js
import { ref } from 'vue';

export default {
  setup() {
    const anchors = [
      100,
      Math.round(0.4 * window.innerHeight),
      Math.round(0.7 * window.innerHeight),
    ];
    const height = ref(anchors[0]);

    return { anchors, height };
  },
};
```

**Head Drag Only**
By default, both the header and content areas of FloatingPanel can be dragged, but you can disable dragging of the content area through the `content-draggable` attribute.

```html
<bot-floating-panel :content-draggable="false">
  <div style="text-align: center; padding: 15px">
    <p>Content cannot be dragged</p>
  </div>
</bot-floating-panel>
```
```