# Bot Component Library Documentation

This file contains the documentation for all components in the @botim/bot component library.

---

# Component: ActionBar

## Introduction
Used to provide convenient interaction for page-related operations.

## Types
The component exports the following type definitions:

```ts
import type {
  ActionBarProps,
  ActionBarIconProps,
  ActionBarButtonProps,
} from '@botim/bot';
```

## Usage Examples
### Basic Usage

```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>
```

```js
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,
    };
  },
};
```

### Icon Badge

Use `badge` prop to show badge in icon.

```html
<bot-action-bar>
  <bot-action-bar-icon :icon="CustomerServiceLine" text="Icon1" dot />
  <bot-action-bar-icon :icon="WalletLine" text="Icon2" badge="5" />
  <bot-action-bar-icon :icon="CustomerServiceLine" text="Icon3" badge="12" />
  <bot-action-bar-button type="warning" text="Button" />
  <bot-action-bar-button type="danger" text="Button" />
</bot-action-bar>
```

### Custom Icon Color

```html
<bot-action-bar>
  <bot-action-bar-icon
    :icon="CustomerServiceLine"
    text="Icon1"
    color="#ee0a24"
  />
  <bot-action-bar-icon :icon="WalletLine" text="Icon2" />
  <bot-action-bar-icon
    :icon="CustomerServiceLine"
    text="Collected"
    color="#ff5000"
  />
  <bot-action-bar-button type="warning" text="Button" />
  <bot-action-bar-button type="danger" text="Button" />
</bot-action-bar>
```

### Custom Button Color

```html
<bot-action-bar>
  <bot-action-bar-icon :icon="CustomerServiceLine" text="Icon1" />
  <bot-action-bar-icon :icon="WalletLine" text="Icon2" />
  <bot-action-bar-button color="#be99ff" type="warning" text="Button" />
  <bot-action-bar-button color="#7232dd" type="danger" text="Button" />
</bot-action-bar>
```

---

# Component: ActionSheet

## Introduction
The pop-up modal panel at the bottom contains multiple options related to the current situation.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:show | Whether to show ActionSheet | _boolean_ | `false` |
| actions | Options | _ActionSheetAction[]_ | `[]` |
| title | Title | _string_ | - |
| cancel-text | Text of cancel button | _string_ | - |
| description | Description above the options | _string_ | - |
| closeable | Whether to show close icon | _boolean_ | `false` |
| close-icon | Close icon | _Component_ | `CloseTwoTone` |
| active-icon | Active icon | _Component_ | `CheckLine` |
| left-arrow | Show title left arrow | _boolean_ | `arrow-left` |
| left-icon-bg | Show left icon background | _boolean_ | `false` |
| default-index | Default Selected | _number \| number[] _ | `-1` |
| invalid-index | Default Disabled | _number \| number[] _ | `-1` |
| header-center | Title align center | _boolean_ | `false` |
| duration | Transition duration, unit second | _number \| string_ | `0.3` |
| z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` |
| round | Whether to show round corner | _boolean_ | `true` |
| overlay | Whether to show overlay | _boolean_ | `true` |
| overlay-class | Custom overlay class | _string \| Array \| object_ | - |
| overlay-style | Custom overlay style | _object_ | - |
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
| close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
| close-on-click-action | Whether to close when an action is clicked | _boolean_ | `false` |
| close-on-click-overlay | Whether to close when overlay is clicked | _boolean_ | `true` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
| teleport | Specifies a target element where ActionSheet will be mounted | _string \| Element_ | - |
| before-close | Callback function before close | _(action: string) => boolean \| Promise\<boolean\>_ | - |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| select | Emitted when an option is clicked | _action: ActionSheetAction, index: number \| action: ActionSheetAction, array: string[], index: number_ |
| cancel | Emitted when the cancel button is clicked | - |
| open | Emitted when opening ActionSheet | - |
| close | Emitted when closing ActionSheet | - |
| opened | Emitted when ActionSheet is opened | - |
| closed | Emitted when ActionSheet is closed | - |
| click-overlay | Emitted when overlay is clicked | _event: MouseEvent_ |

## Slots
| Name | Description | SlotProps |
| --- | --- | --- |
| default | Custom content |
| description | Custom description above the options |
| cancel | Custom the content of cancel button |
| action | Custom the content of action | _{ action: ActionSheetAction, index: number }_ |

## Types
The component exports the following type definitions:

```ts
import type { ActionSheetProps, ActionSheetAction } from '@botim/bot';
```

## Usage Examples
### Basic Usage

Use `actions` prop to set options of action-sheet.

```html
<bot-cell is-link title="Basic Usage" @click="show = true" />
<bot-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
```

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

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3' },
    ];
    const onSelect = (item) => {
      show.value = false;
      showToast(item.name);
    };

    return {
      show,
      actions,
      onSelect,
    };
  },
};
```

### Show Cancel Button

```html
<bot-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="Cancel"
  close-on-click-action
  @cancel="onCancel"
/>
```

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

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3' },
    ];
    const onCancel = () => showToast('cancel');

    return {
      show,
      actions,
      onCancel,
    };
  },
};
```

### Show Description

```html
<bot-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="Cancel"
  description="Description"
  close-on-click-action
/>
```

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

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3', subname: 'Description' },
    ];

    return {
      show,
      actions,
    };
  },
};
```

### Option Status

```html
<bot-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="Cancel"
  close-on-click-action
/>
```

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

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Colored Option', color: '#ee0a24' },
      { name: 'Disabled Option', disabled: true },
      { name: 'Loading Option', loading: true },
    ];

    return {
      show,
      actions,
    };
  },
};
```

### Title

```html
<bot-action-sheet
  v-model:show="showCloseable"
  :actions="leftTitle"
  title="title"
  description="Description"
  @select="onSelect"
/>
```

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

const showCloseable = ref(false);
const leftTitle = reactive([
  { name: 'option1', active: true },
  { name: 'option2' },
  { name: 'option3' },
]);
```

```html
<bot-action-sheet
  v-model:show="showLeftArrow"
  :actions="leftArrow"
  title="center title"
  left-arrow
  header-center
  @select="onSelect"
/>
```

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

const showLeftArrow = ref(false);
const leftArrow = reactive([
  { name: 'option1', active: true },
  { name: 'option2' },
  { name: 'option3' },
]);
```

```html
<bot-action-sheet v-model:show="show" closeable cancel-text="cancel" />
```

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

const show = ref(false);
```

### Left Icon

Set the left icon through the `icon` prop of `actions` data.

```html
<bot-action-sheet
  v-model:show="showLeftActionIcon"
  cancel-text="cancel"
  :actions="leftIconActions"
  @select="onLeftIconSelect"
/>
```

```js
import { ref, reactive } from 'vue';
import { UserLine, MusicSolid } from '@botim/buckit-icons';

const showLeftActionIcon = ref(false);
const leftIconActions = reactive([
  { name: 'option1', icon: UserLine, active: true },
  { name: 'option2', icon: MusicSolid },
  { name: 'option3', icon: UserLine },
]);
```

Set the left icon background through the `left-icon-bg` prop.

```html
<bot-action-sheet
  v-model:show="showLeftActionIcon"
  left-icon-bg
  cancel-text="cancel"
  :actions="leftIconActions"
  @select="onLeftIconSelect"
/>
```

```js
import { ref, reactive } from 'vue';
import { UserLine, MusicSolid } from '@botim/buckit-icons';

const showLeftActionIcon = ref(false);
const leftIconActions = reactive([
  { name: 'option1', icon: UserLine, active: true },
  { name: 'option2', icon: MusicSolid },
  { name: 'option3', icon: UserLine },
]);
```

### Custom Panel

```html
<bot-action-sheet v-model:show="show" title="Title">
  <div class="content">Content</div>
</bot-action-sheet>

<style>
  .content {
    padding: 16px 16px 160px;
  }
</style>
```

### Default Index

```html
<bot-action-sheet
  v-model:show="show"
  title="Title"
  default-index="1"
  @select="handleSelect"
>
  <div class="content">Content</div>
</bot-action-sheet>
```

```javascript
const show = ref(false)
const defaultIndex = ref(0);
const statusDefaultIndexAction = computed<ActionSheetAction[]>(() => [
  { name: 'option1' },
  { name: 'option2' },
  { name: 'option3' },
]);

const onSelect = (item: ActionSheetAction, index: number) => {
  show.value = false;
  defaultIndex.value = index;
  showToast(item.name);
};
```

### Disabled Index

```html
<bot-action-sheet
  v-model:show="show"
  title="Title"
  :invalid-index="invalidIndexArray"
  @select="onSelectInvalidArray"
>
  <div class="content">Content</div>
</bot-action-sheet>
```

```javascript
const show = ref(false)
const invalidIndexArray = ref([0, 1]);
const statusDefaultIndexAction = computed<ActionSheetAction[]>(() => [
  { name: 'option1' },
  { name: 'option2' },
  { name: 'option3' },
]);

const onSelectInvalidArray = (item: ActionSheetAction, array: Array<number>, index: number) => {
  show.value = false;
  console.log(item, array, index);
  showToast(item.name);
};
```

---

# Component: AutoComplete

## Introduction
Autocomplete function of field.

## Events
| Event | Description | Arguments |
| --- | --- | --- | --- |
| search | Emitted when input value changed | _value: string_ |
| select | Select the item of list | _value: string_ |
| focus | Emitted when input is focused | _event: Event_ |
| blur | Emitted when input is blurred | _event: Event_ |
| clear | Emitted when the clear icon is clicked | _event: MouseEvent_ | \_ |
| start-validate | Emitted when start validation | - |
| end-validate | Emitted when end validation | _{ status: string, message: string }_ |

## Slots
This slots refer to [field slots](https://fed.corp.algento.com/webfedcompontentui/index.html#/zh-CN/field#slots)

## Theming

## Usage Examples
### Basic Usage

Basic Usage, set data source of autocomplete with `options` property.

```html
<bot-auto-complete
  :value="value"
  :options="options"
  @search="onSearch"
  @select="onSelect"
/>
```

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

const value = ref<string>('');
const options = ref<{ label: string; value: string }[]>([]);

const getOptions = (val: string) =>
  [1, 2, 3].map((item) => ({
    value: val.repeat(item),
    label: val.repeat(item),
  }));

const onSearch = (val) => {
  value.value = val;
  if (!val) {
    options.value = [];
    return;
  }
  options.value = getOptions(val);
};

const onSelect = (val) => {
  value.value = val;
};
```

### Customized

You could set custom `Options` label

```html
<bot-auto-complete
  :value="value"
  :options="options"
  @search="onSearch"
  @select="onSelect"
/>
```

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

const value = ref<string>('');
const options = ref<{ label: string; value: string }[]>([]);

const getOptions = (val: string) => {
  if (!val) {
    return [];
  }
  return ['gmail.com', '163.com', 'qq.com'].map((domain) => ({
    value: val,
    label: `${val}@${domain}`,
  }));
};

const onSearch = (val) => {
  value.value = val;
  options.value = getOptions(val);
};

const onSelect = (val) => {
  value.value = val;
};
```

### Clearable

show clearable button

```html
<bot-auto-complete
  :value="value"
  :clearable="true"
  :options="options"
  @search="onSearch"
  @select="onSelect"
/>
```

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

const value = ref<string>('');
const options = ref<{ label: string; value: string }[]>([]);

const getOptions = (val: string) =>
  [1, 2, 3].map((item) => ({
    value: val.repeat(item),
    label: val.repeat(item),
  }));

const onSearch = (val) => {
  value.value = val;
  if (!val) {
    options.value = [];
    return;
  }
  options.value = getOptions(val);
};

const onSelect = (val) => {
  value.value = val;
};
```

---

# Component: BackTop

## Introduction
A button to back to top.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| target | Can be a selector or a DOM ELement | _string \| HTMLElement_ | - |
| right | Right distance of the page, the default unit is px | _number \| string_ | `30` |
| bottom | Bottom distance of the page, the default unit is px | _number \| string_ | `40` |
| offset | The component will not display until the scroll offset reaches this value | _number_ | `200` |
| teleport | Specifies a target element where BackTop will be mounted | _string \| Element_ | `body` |
| immediate | Whether to scroll to top immediately | _boolean_ | `false` |
| z-index | Set the z-index to a fixed value | _number \| string_ | `100` |

## Events
| Event | Description                       | Arguments           |
| ----- | --------------------------------- | ------------------- |
| click | Emitted when Component is clicked | _event: MouseEvent_ |

## Slots
| Name    | Description               |
| ------- | ------------------------- |
| default | customize default content |

## Types
The component exports the following type definitions:

```ts
import type { BackTopProps, BackTopThemeVars } from '@botim/bot';
```

## Usage Examples
### Basic Usage

Please scroll the demo page to display the back top button.

```html
<bot-cell v-for="item in list" :key="item" :title="item" />

<bot-back-top />
```

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

### Custom Position

Using `right` and `bottom` props to set the position of BackTop component.

```html
<bot-cell v-for="item in list" :key="item" :title="item" />
<bot-back-top right="15vw" bottom="10vh" />
```

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

### Custom Content

Using the default slot to custom content.

```html
<bot-cell v-for="item in list" :key="item" :title="item" />
<bot-back-top class="custom">Back Top</bot-back-top>

<style>
  .custom {
    width: 80px;
    font-size: 14px;
    text-align: center;
  }
</style>
```

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

### Set Scroll Target

```html
<div class="container">
  <bot-cell v-for="item in list" :key="item" :title="item" />
  <bot-back-top target=".container" bottom="30vh" />
</div>

<style>
  .container {
    height: 60vh;
    overflow: auto;
  }
</style>
```

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

### Immediate Scroll

Add `immediate` prop to scroll to top immediately.

```html
<bot-back-top immediate />
```

---

# Component: Badge

## Introduction
Display a small badge or a red dot to the top-right of its child.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| content | Badge content | _number \| string_ | - |
| color | Background color | _string_ | `#ee0a24` |
| dot | Whether to show dot | _boolean_ | `false` |
| max | Max value, show `{max}+` when exceed, only works when content is number | _number \| string_ | - |
| offset | Offset of badge dot, the two items of the array correspond to the horizontal and vertical offsets | _[number \| string, number \| string]_ | - |
| show-zero | Whether to show badge when content is zero | _boolean_ | `true` |
| position | Badge position, can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |

## Slots
| Name    | Description          |
| ------- | -------------------- |
| default | Default slot         |
| content | Custom badge content |

## Types
The component exports the following type definitions:

```ts
import type { BadgeProps, BadgePosition } from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-badge :content="5">
  <div class="child" />
</bot-badge>
<bot-badge :content="10">
  <div class="child" />
</bot-badge>
<bot-badge content="Hot">
  <div class="child" />
</bot-badge>
<bot-badge dot>
  <div class="child" />
</bot-badge>

<style>
  .child {
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    border-radius: 4px;
  }
</style>
```

### Max

```html
<bot-badge :content="20" max="9">
  <div class="child" />
</bot-badge>
<bot-badge :content="50" max="20">
  <div class="child" />
</bot-badge>
<bot-badge :content="200" max="99">
  <div class="child" />
</bot-badge>
```

### Custom Color

```html
<bot-badge :content="5" color="#1989fa">
  <div class="child" />
</bot-badge>
<bot-badge :content="10" color="#1989fa">
  <div class="child" />
</bot-badge>
<bot-badge dot color="#1989fa">
  <div class="child" />
</bot-badge>
```

### Custom Content

Use `content` slot to custom the content of badge.

```html
<bot-badge>
  <div class="child" />
  <template #content>
    <bot-icon :icon="BlockLine" class="badge-icon" />
  </template>
</bot-badge>
<bot-badge>
  <div class="child" />
  <template #content>
    <bot-icon :icon="BlockLine" class="badge-icon" />
  </template>
</bot-badge>
```

```css
.badge-icon {
  display: block;
  font-size: 10px;
  line-height: 16px;
}
```

### Custom Position

Use `position` prop to set the position of badge.

```html
<bot-badge :content="10" position="top-left">
  <div class="child" />
</bot-badge>
<bot-badge :content="10" position="bottom-left">
  <div class="child" />
</bot-badge>
<bot-badge :content="10" position="bottom-right">
  <div class="child" />
</bot-badge>
```

### Standalone

```html
<bot-badge :content="20" />

<bot-badge :content="200" max="99" />
```

---

# Component: Button

## Introduction
Basic and Customized Button components for configuring different button styles.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| type | Can be set to `primary` `danger` `plain`. `plain` only works in icon button | _string_ | `default` |
| size | Can be set to `large` `normal` `small` | _string_ | `large` |
| text | Text | _string_ | - |
| color | Color, support linear-gradient | _string_ | - |
| icon | Left Icon | _string_ | - |
| icon-prefix | Icon className prefix | _string_ | `bot-icon` |
| icon-position | Icon position, can be set to `right` | _string_ | `left` |
| tag | HTML Tag | _string_ | `button` |
| native-type | Native Type Attribute | _string_ | `button` |
| plain | Whether to be plain button | _boolean_ | `false` |
| block | Whether to set display block | _boolean_ | `false` |
| round | Whether to be round button | _boolean_ | `false` |
| circle | Whether to be icon button | _boolean_ | `false` |
| square | Whether to be square button | _boolean_ | `false` |
| disabled | Whether to disable button | _boolean_ | `false` |
| loading | Whether to show loading status | _boolean_ | `false` |
| loading-text | Loading text | _string_ | - |
| loading-type | Loading type, can be set to `spinner` | _string_ | `circular` |
| loading-size | Loading icon size | _number \| string_ | `20px` |
| url | Link URL | _string_ | - |
| to | Target route of the link, same as using vue-router | _string \| object_ | - |
| replace | If true, the navigation will not leave a history record | _boolean_ | `false` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| click | Emitted when button is clicked and not disabled or loading | _event: MouseEvent_ |
| touchstart | Emitted when button is touched | _event: TouchEvent_ |

## Slots
| Name    | Description         |
| ------- | ------------------- |
| default | Default slot        |
| icon    | Custom icon         |
| loading | Custom loading icon |

## Types
The component exports the following type definitions:

```ts
import type {
  ButtonType,
  ButtonSize,
  ButtonProps,
  ButtonNativeType,
  ButtonIconPosition,
} from '@botim/bot';
```

## Usage Examples
### Type

```html
<bot-button type="primary">Primary</bot-button>
<bot-button type="default">Default</bot-button>
<bot-button type="danger">Danger</bot-button>
```

### Plain

```html
<demo-block :title="t('plain')">
  <bot-button plain type="primary" :text="t('plain')" />
  <bot-button plain type="danger" :text="t('plain')" />
  <bot-button plain type="default" :text="t('plain')" />
</demo-block>
```

### IsText

```html
<bot-button is-text type="primary" :text="t('isText')"></bot-button>
<bot-button is-text type="default" :text="t('isText')"></bot-button>
<bot-button is-text type="danger" :text="t('isText')" />
<bot-button is-text disabled :text="t('disabled')" />
```

### Disabled

```html
<bot-button disabled type="primary" :text="t('disabled')" />
<bot-button is-text disabled :text="t('disabled')" />
```

### Loading

```html
<bot-button loading type="primary" />
<bot-button loading type="primary" loading-type="spinner" />
<bot-button loading type="success" loading-text="Loading..." />
```

### Shape

```html
<bot-button square type="primary">Square</bot-button>
<bot-button round type="success">Round</bot-button>
```

### Icon Button

```html
<demo-block :title="t('circle')">
  <bot-button circle>
    <BlockLine />
  </bot-button>
  <bot-button type="primary" circle>
    <BlockLine />
  </bot-button>
  <bot-button type="plain" circle>
    <BlockLine />
  </bot-button>
</demo-block>
```

### Icon

```ts
import { PlusLine } from '@botim/buckit-icons';
```

```html
<bot-button :icon="PlusLine" type="primary" />
<bot-button :icon="PlusLine" type="primary">Button</bot-button>
```

### Size

```html
<bot-button type="primary" size="large">Large</bot-button>
<bot-button type="primary" size="normal">Normal</bot-button>
<bot-button type="primary" size="small">Small</bot-button>
<bot-button type="primary" size="mini">Mini</bot-button>
```

### Block Element

```html
<bot-button type="primary" block>Block Element</bot-button>
```

### Route

```html
<bot-button type="primary" url="https://github.com">URL</bot-button>
<bot-button type="primary" to="index">Vue Router</bot-button>
```

### Custom Color

```html
<bot-button color="#7232dd">Pure</bot-button>
<bot-button color="#7232dd" plain>Pure</bot-button>
<bot-button color="linear-gradient(to right, #ff6034, #ee0a24)">
  Gradient
</bot-button>
```

---

# Component: Calendar

## Introduction
Calendar component for selecting dates or date ranges.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| type | Type, can be set to `range` `multiple` | _string_ | `single` |
| title | Title of calendar | _string_ | `Calendar` |
| color | Color for the bottom button and selected date | _string_ | `#1989fa` |
| min-date | Min date | _Date_ | Today |
| max-date | Max date | _Date_ | Six months after the today |
| default-date | Default selected date | _Date \| Date[] \| null_ | Today |
| row-height | Row height | _number \| string_ | `64` |
| formatter | Day formatter | _(day: Day) => Day_ | - |
| poppable | Whether to show the calendar inside a popup | _boolean_ | `true` |
| lazy-render | Whether to enable lazy render | _boolean_ | `true` |
| show-title | Whether to show title | _boolean_ | `true` |
| show-confirm | Whether to show confirm button | _boolean_ | `true` |
| readonly | Whether to be readonly | _boolean_ | `false` |
| confirm-text | Confirm button text | _string_ | `Confirm` |
| confirm-disabled-text | Confirm button text when disabled | _string_ | `Confirm` |
| first-day-of-week | Set the start day of week | _0-6_ | `0` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| select | Emitted when date is selected | _value: Date \| Date[]_ |
| confirm | Emitted after date selection is complete, if `show-confirm` is `true`, it is Emitted after clicking the confirm button | _value: Date \| Date[]_ |
| open | Emitted when opening Popup | - |
| close | Emitted when closing Popup | - |
| opened | Emitted when Popup is opened | - |
| closed | Emitted when Popup is closed | - |
| unselect | Emitted when unselect date when type is multiple | _value: Date_ |
| month-show | Emitted when a month enters the visible area | _value: { date: Date, title: string }_ |
| over-range | Emitted when exceeded max range | - |

## Slots
| Name         | Description               | SlotProps               |
| ------------ | ------------------------- | ----------------------- |
| title        | Custom title              | -                       |
| footer       | Custom footer             | -                       |
| confirm-text | Custom confirm text       | _{ disabled: boolean }_ |
| top-info     | Custom top info of day    | _day: Day_              |
| bottom-info  | Custom bottom info of day | _day: Day_              |

## Types
The component exports the following type definitions:

```ts
import type {
  CalendarType,
  CalendarProps,
  CalendarDayItem,
  CalendarDayType,
  CalendarInstance,
} from '@botim/bot';
```

`CalendarInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { CalendarInstance } from '@botim/bot';

const calendarRef = ref<CalendarInstance>();

calendarRef.value?.reset();
```

## 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,
    };
  },
};
```

### Select Multiple Date

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

```js
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,
    };
  },
};
```

### Select Date Range

You can select a date range after setting `type` to`range`. In range mode, the date returned by the `confirm` event is an array, the first item in the array is the start time and the second item is the end time.

```html
<bot-cell title="Select Date Range" :value="date" @click="show = true" />
<bot-calendar v-model:show="show" type="range" @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 = (values) => {
      const [start, end] = values;
      show.value = false;
      date.value = `${formatDate(start)} - ${formatDate(end)}`;
    };

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

### Quick Select

Set `show-confirm` to `false` to hide the confirm button. In this case, the `confirm` event will be emitted immediately after the selection is completed.

```html
<bot-calendar v-model:show="show" :show-confirm="false" />
```

### Custom Color

Use `color` prop to custom calendar color.

```html
<bot-calendar v-model:show="show" color="#ee0a24" />
```

### Custom Date Range

Use `min-date` and `max-date` to custom date range.

```html
<bot-calendar v-model:show="show" :min-date="minDate" :max-date="maxDate" />
```

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

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

    return {
      show,
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2010, 0, 31),
    };
  },
};
```

### Custom Confirm Text

Use `confirm-text` and `confirm-disabled-text` to custom confirm text.

```html
<bot-calendar
  v-model:show="show"
  type="range"
  confirm-text="OK"
  confirm-disabled-text="Select End Time"
/>
```

### Custom Day Text

Use `formatter` to custom day text.

```html
<bot-calendar v-model:show="show" type="range" :formatter="formatter" />
```

```js
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,
    };
  },
};
```

### Custom Position

Use `position` to custom popup position, can be set to `top`、`left`、`right`.

```html
<bot-calendar v-model:show="show" :round="false" position="right" />
```

### Max Range

When selecting a date range, you can use the `max-range` prop to specify the maximum number of selectable days.

```html
<bot-calendar type="range" :max-range="3" :style="{ height: '500px' }" />
```

### Custom First Day Of Week

Use `first-day-of-week` to custom the start day of week

```html
<bot-calendar first-day-of-week="1" />
```

### Tiled display

Set `poppable` to `false`, the calendar will be displayed directly on the page instead of appearing as a popup

```html
<bot-calendar
  title="Calendar"
  :poppable="false"
  :show-confirm="false"
  :style="{ height: '500px' }"
/>
```

---

# Component: Card

## Introduction
Integrate information in a card container. Please upgrade `bot` to >= v1.0.47 before using this component.

## Props
| Attribute  | Description     | Type      | Default |
| ---------- | --------------- | --------- | ------- |
| header     | Card title      | _string_  | `-`     |
| footer     | Card footer     | _string_  | `-`     |
| shadow     | Card shadow     | _boolean_ | `true`  |
| body-style | Card body style | _object_  | `-`     |

## Slots
| Name    | Description           |
| ------- | --------------------- |
| default | Card content          |
| header  | Customize card header |
| footer  | Customize card footer |

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

```html
<bot-card>
  <p v-for="o in 4" :key="o">{{ 'List item ' + o }}</p>
</bot-card>
```

### Header && Footer

Set the card title using the `header` prop, and set the card footer using the `footer` prop.

```html
<bot-card header="Header" footer="Footer">
  <p v-for="o in 4" :key="o">{{ 'List item ' + o }}</p>
</bot-card>
```

### Custom

Customize card header and footer using the `slot`.

```html
<bot-card>
  <template #header>
    <div class="card-header">
      Header
      <bot-button type="primary" is-text>Operation</bot-button>
    </div>
  </template>
  <p v-for="o in 4" :key="o">{{ 'List item ' + o }}</p>
  <template #footer>
    <div class="card-footer">
      <bot-button block size="small">Cancel</bot-button>
      <bot-button type="primary" block size="small">Confirm</bot-button>
    </div>
  </template>
</bot-card>

<style>
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card-footer {
    display: flex;
    gap: 8px;
  }
</style>
```

---

# Component: Cascader

## Introduction
The cascader component is used for the selection of multi-level data. The typical scene is the selection of provinces and cities.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| title | Title | _string_ | - |
| value | Value of selected option | _string \| number_ | - |
| options | Options | _CascaderOption[]_ | `[]` |
| placeholder | Placeholder of unselected tab | _string_ | `Select` |
| active-color | Active color | _string_ | `#1989fa` |
| swipeable | Whether to enable gestures to slide left and right | _boolean_ | `false` |
| closeable | Whether to show close icon | _boolean_ | `true` |
| show-header | Whether to show header | _boolean_ | `true` |
| close-icon | Close icon name | _string_ | `cross` |
| field-names | Custom the fields of options | _CascaderFieldNames_ | `{ text: 'text', value: 'value', children: 'children' }` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| change | Emitted when active option changed | _{ value: string \| number, selectedOptions: CascaderOption[], tabIndex: number }_ |
| finish | Emitted when all options is selected | _{ value: string \| number, selectedOptions: CascaderOption[], tabIndex: number }_ |
| close | Emitted when the close icon is clicked | - |
| click-tab | Emitted when a tab is clicked | _activeTab: number, title: string_ |

## Slots
| Name | Description | SlotProps |
| --- | --- | --- |
| title | Custom title | - |
| option | Custom option text | _{ option: CascaderOption, selected: boolean }_ |
| options-top | Custom the content above the options | _{ tabIndex: number }_ |
| options-bottom | Custom the content below the options | _{ tabIndex: number }_ |

## Types
The component exports the following type definitions:

```ts
import type {
  CascaderProps,
  CascaderOption,
  CascaderFieldNames,
} from '@botim/bot';
```

## Usage Examples
### Basic Usage

```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>
```

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

export default {
  setup() {
    const show = ref(false);
    const fieldValue = ref('');
    const cascaderValue = ref('');
    const options = [
      {
        text: 'Zhejiang',
        value: '330000',
        children: [{ text: 'Hangzhou', value: '330100' }],
      },
      {
        text: 'Jiangsu',
        value: '320000',
        children: [{ text: 'Nanjing', value: '320100' }],
      },
    ];
    const onFinish = ({ selectedOptions }) => {
      show.value = false;
      fieldValue.value = selectedOptions.map((option) => option.text).join('/');
    };

    return {
      show,
      options,
      onFinish,
      fieldValue,
      cascaderValue,
    };
  },
};
```

### Custom Color

```html
<bot-cascader
  v-model="cascaderValue"
  title="Select Area"
  :options="options"
  active-color="#ee0a24"
  @close="show = false"
  @finish="onFinish"
/>
```

### Async Options

```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"
    @change="onChange"
    @finish="onFinish"
  />
</bot-popup>
```

```js
import { ref } from 'vue';
import { closeToast, showLoadingToast } from '@botim/bot';

export default {
  setup() {
    const show = ref(false);
    const fieldValue = ref('');
    const cascaderValue = ref('');
    const options = ref([
      {
        text: 'Zhejiang',
        value: '330000',
        children: [],
      },
    ]);
    const onChange = ({ value }) => {
      if (
        value === options.value[0].value &&
        options.value[0].children.length === 0
      ) {
        showLoadingToast('Loading...');
        // mock data request
        setTimeout(() => {
          options.value[0].children = [
            { text: 'Hangzhou', value: '330100' },
            { text: 'Ningbo', value: '330200' },
          ];
          closeToast();
        }, 1000);
      }
    };
    const onFinish = ({ selectedOptions }) => {
      show.value = false;
      fieldValue.value = selectedOptions.map((option) => option.text).join('/');
    };

    return {
      show,
      options,
      onFinish,
      fieldValue,
      cascaderValue,
    };
  },
};
```

### Custom Field Names

```html
<bot-cascader
  v-model="code"
  title="Select Area"
  :options="options"
  :field-names="fieldNames"
/>
```

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

export default {
  setup() {
    const code = ref('');
    const fieldNames = {
      text: 'name',
      value: 'code',
      children: 'items',
    };
    const options = [
      {
        name: 'Zhejiang',
        code: '330000',
        items: [{ name: 'Hangzhou', code: '330100' }],
      },
      {
        name: 'Jiangsu',
        code: '320000',
        items: [{ name: 'Nanjing', code: '320100' }],
      },
    ];

    return {
      code,
      options,
      fieldNames,
    };
  },
};
```

### Custom Content

```html
<bot-cascader v-model="code" title="Select Area" :options="options">
  <template #options-top="{ tabIndex }">
    <div class="current-level">Current level is {{ tabIndex + 1 }}</div>
  </template>
</bot-cascader>

<style>
  .current-level {
    font-size: 14px;
    padding: 16px 16px 0;
    color: var(--bot-gray-6);
  }
</style>
```

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

export default {
  setup() {
    const code = ref('');
    const options = [
      {
        name: 'Zhejiang',
        code: '330000',
        items: [{ name: 'Hangzhou', code: '330100' }],
      },
      {
        name: 'Jiangsu',
        code: '320000',
        items: [{ name: 'Nanjing', code: '320100' }],
      },
    ];

    return {
      code,
      options,
    };
  },
};
```

---

# Component: Cell

## Introduction
The cell is a single display item in the list.

## Types
The component exports the following type definitions:

```ts
import type {
  CellSize,
  CellProps,
  CellGroupProps,
  CellArrowDirection,
} from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-cell-group>
  <bot-cell title="Cell title" value="Content" />
  <bot-cell title="Cell title" value="Content" label="Description" />
</bot-cell-group>
```

### Inset Grouped

```html
<bot-cell-group inset>
  <bot-cell title="Cell title" value="Content" />
  <bot-cell title="Cell title" value="Content" label="Description" />
</bot-cell-group>
```

### Size

```html
<bot-cell-group>
  <bot-cell title="Cell title" value="Content" size="large" />
  <bot-cell
    title="Cell title"
    value="Content"
    size="large"
    label="Description"
  />
</bot-cell-group>
```

### Left Icon

```html
<bot-cell-group>
  <bot-cell title="Cell title" icon="location-o" />
</bot-cell-group>
```

### Link

```html
<bot-cell-group>
  <bot-cell title="Cell title" is-link />
  <bot-cell title="Cell title" is-link value="Content" />
  <bot-cell title="Cell title" is-link arrow-direction="down" value="Content" />
</bot-cell-group>
```

### Router

```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>
```

### Group Title

```html
<bot-cell-group title="Group 1" title-border="true">
  <bot-cell title="Cell title" value="Content" />
</bot-cell-group>
<bot-cell-group title="Group 2">
  <bot-cell title="Cell title" value="Content" />
</bot-cell-group>
```

### Use Slots

```html
<bot-cell value="Content" is-link>
  <!-- Use the title slot to customize the title -->
  <template #title>
    <span class="custom-title">Title</span>
    <bot-tag type="primary">Tag</bot-tag>
  </template>
</bot-cell>

<bot-cell title="Title" icon="shop-o">
  <!-- Use the right-icon slot to customize the right icon -->
  <template #right-icon>
    <bot-icon :icon="SearchLine" class="search-icon" />
  </template>
</bot-cell>

<style>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
</style>
```

### Vertical Center

```html
<bot-cell center title="Cell title" value="Content" label="Description" />
```

---

# Component: Checkbox

## Introduction
A group of options for multiple choices.

## Types
The component exports the following type definitions:

```ts
import type {
  CheckboxProps,
  CheckboxInstance,
  CheckboxGroupProps,
  CheckboxButtonSize,
  CheckboxLabelPosition,
  CheckboxGroupInstance,
  CheckboxGroupDirection,
  CheckboxGroupToggleAllOptions,
} from '@botim/bot';
```

`CheckboxInstance` and `CheckboxGroupInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { CheckboxInstance, CheckboxGroupInstance } from '@botim/bot';

const checkboxRef = ref<CheckboxInstance>();
const checkboxGroupRef = ref<CheckboxGroupInstance>();

checkboxRef.value?.toggle();
checkboxGroupRef.value?.toggleAll();
```

## Usage Examples
### Basic Usage

```html
<bot-checkbox v-model="checked">Checkbox</bot-checkbox>
```

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

export default {
  setup() {
    const checked = ref(true);
    return {
      checked,
    };
  },
};
```

### Disabled

```html
<bot-checkbox v-model="checked" disabled>Checkbox</bot-checkbox>
```

### Button Type

```html
<bot-checkbox-button v-model="checked">Checkbox</bot-checkbox-button>
```

### Custom Color

```html
<bot-checkbox v-model="checked" checked-color="#ee0a24">Checkbox</bot-checkbox>
```

### Custom Icon Size

```html
<bot-checkbox v-model="checked" icon-size="24px">Checkbox</bot-checkbox>
```

### Custom Icon

Use icon slot to custom icon.

```html
<bot-checkbox v-model="checked">
  customize icon
  <template #icon="props">
    <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
  </template>
</bot-checkbox>

<style>
  .img-icon {
    height: 20px;
  }
</style>
```

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

export default {
  setup() {
    const checked = ref(true);
    return {
      checked,
      activeIcon:
        'https://cdn-web-sg.botim.me/upd/v1/mp/perm/npuploadtools/202306/15-ca652e35fd074e1d82fc28e486b0a836.png',
      inactiveIcon:
        'https://cdn-web-sg.botim.me/upd/v1/mp/perm/npuploadtools/202306/15-eabc6c49f8164e4fbe0e478f918c9b0c.png',
    };
  },
};
```

### Left Label

Set `label-position` prop to `'left'` to adjust the label position to the left of the Checkbox.

```html
<bot-checkbox v-model="checked" label-position="left">Checkbox</bot-checkbox>
```

### Disable Label Click

```html
<bot-checkbox v-model="checked" label-disabled>Checkbox</bot-checkbox>
```

### Checkbox Group

When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.

```html
<bot-checkbox-group v-model="checked">
  <bot-checkbox name="a">Checkbox a</bot-checkbox>
  <bot-checkbox name="b">Checkbox b</bot-checkbox>
</bot-checkbox-group>
```

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

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

### Checkbox Button Group

Set button styles with `bot-checkbox-button`, and set whether the button is a plain button with `plain` prop.

```html
<bot-checkbox-group v-model="checked">
  <bot-checkbox-button name="a">Checkbox a</bot-checkbox-button>
  <bot-checkbox-button name="b">Checkbox b</bot-checkbox-button>
</bot-checkbox-group>

<bot-checkbox-group v-model="checked">
  <bot-checkbox-button :plain="false" name="a">Checkbox a</bot-checkbox-button>
  <bot-checkbox-button :plain="false" name="b">Checkbox b</bot-checkbox-button>
</bot-checkbox-group>
```

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

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

### Checkbox Button Size

Can be set to `large`、`normal`、`small`, default to `normal`。

```html
<bot-checkbox-group v-model="checked" direction="horizontal">
  <bot-checkbox-button name="a" :plain="false" size="large">
    Large a
  </bot-checkbox-button>
  <bot-checkbox-button name="b" :plain="false" size="large">
    Large b
  </bot-checkbox-button>
</bot-checkbox-group>

<bot-checkbox-group v-model="checked" direction="horizontal">
  <bot-checkbox-button name="a" :plain="false" size="small">
    Small a
  </bot-checkbox-button>
  <bot-checkbox-button name="b" :plain="false" size="small">
    Small b
  </bot-checkbox-button>
</bot-checkbox-group>
```

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

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

### Horizontal

```html
<bot-checkbox-group v-model="checked" direction="horizontal">
  <bot-checkbox name="a">Checkbox a</bot-checkbox>
  <bot-checkbox name="b">Checkbox b</bot-checkbox>
</bot-checkbox-group>
```

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

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

### Maximum amount of checked options

```html
<bot-checkbox-group v-model="checked" :max="2">
  <bot-checkbox name="a">Checkbox a</bot-checkbox>
  <bot-checkbox name="b">Checkbox b</bot-checkbox>
  <bot-checkbox name="c">Checkbox c</bot-checkbox>
</bot-checkbox-group>
```

### Toggle All

```html
<bot-checkbox-group v-model="checked" ref="checkboxGroup">
  <bot-checkbox name="a">Checkbox a</bot-checkbox>
  <bot-checkbox name="b">Checkbox b</bot-checkbox>
  <bot-checkbox name="c">Checkbox c</bot-checkbox>
</bot-checkbox-group>

<bot-button type="primary" @click="checkAll">Check All</bot-button>
<bot-button type="primary" @click="toggleAll">Toggle All</bot-button>
```

```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,
    };
  },
};
```

### Inside a Cell

```html
<bot-checkbox-group v-model="checked">
  <bot-cell-group inset>
    <bot-cell
      v-for="(item, index) in list"
      clickable
      :key="item"
      :title="`Checkbox ${item}`"
      @click="toggle(index)"
    >
      <template #right-icon>
        <bot-checkbox
          :name="item"
          :ref="el => checkboxRefs[index] = el"
          @click.stop
        />
      </template>
    </bot-cell>
  </bot-cell-group>
</bot-checkbox-group>
```

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

export default {
  setup() {
    const checked = ref([]);
    const checkboxRefs = ref([]);
    const toggle = (index) => {
      checkboxRefs.value[index].toggle();
    };

    onBeforeUpdate(() => {
      checkboxRefs.value = [];
    });

    return {
      list: ['a', 'b'],
      toggle,
      checked,
      checkboxRefs,
    };
  },
};
```

---

# Component: Circle

## Introduction
Circular progress bar component, and supports gradient color animation.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:current-rate | Current rate | _number_ | - |
| rate | Target rate | _number \| string_ | `100` |
| size | Circle size | _number \| string_ | `100px` |
| color | Progress color, passing object to render gradient | _string \| object_ | `#1989fa` |
| layer-color | Layer color | _string_ | `white` |
| fill | Fill color | _string_ | `none` |
| speed | Animate speed（rate/s） | _number \| string_ | `0` |
| text | Text | _string_ | - |
| stroke-width | Stroke width | _number \| string_ | `40` |
| stroke-linecap | Stroke linecap, can be set to `square` `butt` | _string_ | `round` |
| clockwise | Whether to be clockwise | _boolean_ | `true` |
| start-position | Progress start position, can be set to `left`、`right`、`bottom` | _CircleStartPosition_ | `top` |

## Slots
| Name    | Description         |
| ------- | ------------------- |
| default | custom text content |

## Types
The component exports the following type definitions:

```ts
import type { CircleProps, CircleStartPosition } from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-circle
  v-model:current-rate="currentRate"
  :rate="30"
  :speed="100"
  :text="text"
/>
```

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

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

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

### Custom Width

The width of the progress bar is controlled by the `stroke-width` prop, `stroke-width` refers to the width of `path` in SVG, and the default value is `40`.

```html
<bot-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :stroke-width="60"
  text="Custom Width"
/>
```

The unit of `stroke-width` is not `px`, if you want to know the relationship between `stroke-width` and `px`, you can use the following formula to calculate:

```js
// viewBox size for SVG
const viewBox = 1000 + strokeWidth;

// The width of the Circle component, the default is 100px
const circleWidth = 100;

// Final rendered progress bar width (px)
const pxWidth = (strokeWidth * circleWidth) / viewBox;
```

### Custom Color

```html
<bot-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  layer-color="#ebedf0"
  text="Custom Color"
/>
```

### Gradient

```html
<bot-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :color="gradientColor"
  text="Gradient"
/>
```

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

export default {
  setup() {
    const currentRate = ref(0);
    const gradientColor = {
      '0%': '#3fecff',
      '100%': '#6149f6',
    };

    return {
      currentRate,
      gradientColor,
    };
  },
};
```

### Counter Clockwise

```html
<bot-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :clockwise="false"
  text="Counter Clockwise"
/>
```

### Custom Size

```html
<bot-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  size="120px"
  text="Custom Size"
/>
```

### Start Position

```html
<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"
/>
```

---

# Component: Col

## Introduction
Quickly and easily create layouts with `bot-row` and `bot-col`.

## Types
The component exports the following type definitions:

```ts
import type { ColProps, RowProps, RowAlign, RowJustify } from '@botim/bot';
```

## Usage Examples
### Basic Usage

Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.

```html
<bot-row>
  <bot-col span="8">span: 8</bot-col>
  <bot-col span="8">span: 8</bot-col>
  <bot-col span="8">span: 8</bot-col>
</bot-row>

<bot-row>
  <bot-col span="4">span: 4</bot-col>
  <bot-col span="10" offset="4">offset: 4, span: 10</bot-col>
  <bot-col span="6">span: 6</bot-col>
</bot-row>

<bot-row>
  <bot-col offset="12" span="12">offset: 12, span: 12</bot-col>
</bot-row>
```

### Column Spacing

Set grid spacing using `gutter` attribute. The default value is 0.

```html
<bot-row gutter="20">
  <bot-col span="8">span: 8</bot-col>
  <bot-col span="8">span: 8</bot-col>
  <bot-col span="8">span: 8</bot-col>
</bot-row>
```

### Justify Content

```html
<bot-row justify="center">
  <bot-col span="6">span: 6</bot-col>
  <bot-col span="6">span: 6</bot-col>
  <bot-col span="6">span: 6</bot-col>
</bot-row>

<bot-row justify="end">
  <bot-col span="6">span: 6</bot-col>
  <bot-col span="6">span: 6</bot-col>
  <bot-col span="6">span: 6</bot-col>
</bot-row>

<bot-row justify="space-between">
  <bot-col span="6">span: 6</bot-col>
  <bot-col span="6">span: 6</bot-col>
  <bot-col span="6">span: 6</bot-col>
</bot-row>

<bot-row justify="space-around">
  <bot-col span="6">span: 6</bot-col>
  <bot-col span="6">span: 6</bot-col>
  <bot-col span="6">span: 6</bot-col>
</bot-row>
```

---

# Component: Collapse

## Introduction
Place a group of content in multiple collapsible panels, click the title of the panel to expand or contract its content.

## Types
The component exports the following type definitions:

```ts
import type {
  CollapseProps,
  CollapseItemProps,
  CollapseItemInstance,
  CollapseToggleAllOptions,
} from '@botim/bot';
```

`CollapseItemInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { CollapseItemInstance } from '@botim/bot';

const collapseItemRef = ref<CollapseItemInstance>();

collapseItemRef.value?.toggle();
```

## Usage Examples
### Basic Usage

Use `v-model` to control the name of active panels.

```html
<bot-collapse v-model="activeNames">
  <bot-collapse-item title="Title1" name="1">Content 1</bot-collapse-item>
  <bot-collapse-item title="Title2" name="2">Content 2</bot-collapse-item>
  <bot-collapse-item title="Title3" name="3">Content 3</bot-collapse-item>
</bot-collapse>
```

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

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

### Accordion

In accordion mode, only one panel can be expanded at the same time.

```html
<bot-collapse v-model="activeName" accordion>
  <bot-collapse-item title="Title1" name="1">Content 1</bot-collapse-item>
  <bot-collapse-item title="Title2" name="2">Content 2</bot-collapse-item>
  <bot-collapse-item title="Title3" name="3">Content 3</bot-collapse-item>
</bot-collapse>
```

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

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

### Disabled

Use the `disabled` prop to disable CollapseItem.

```html
<bot-collapse v-model="activeNames">
  <bot-collapse-item title="Title1" name="1">Content 1</bot-collapse-item>
  <bot-collapse-item title="Title2" name="2" disabled>
    Content 2
  </bot-collapse-item>
  <bot-collapse-item title="Title3" name="3" disabled>
    Content 3
  </bot-collapse-item>
</bot-collapse>
```

### Custom title

```html
<bot-collapse v-model="activeNames">
  <bot-collapse-item name="1">
    <template #title>
      <div>Title1 <bot-icon name="question-o" /></div>
    </template>
    Content 1
  </bot-collapse-item>
  <bot-collapse-item title="Title2" name="2" icon="shop-o">
    Content 2
  </bot-collapse-item>
</bot-collapse>
```

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

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

### Toggle All

Using `toggleAll` method to toggle all items.

```html
<bot-collapse v-model="activeNames">
  <bot-collapse-item title="Title1" name="1">Content 1</bot-collapse-item>
  <bot-collapse-item title="Title2" name="2">Content 2</bot-collapse-item>
  <bot-collapse-item title="Title3" name="3">Content 3</bot-collapse-item>
</bot-collapse>

<bot-button type="primary" @click="openAll">Open All</bot-button>
<bot-button type="primary" @click="toggleAll">Toggle All</bot-button>
```

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

export default {
  setup() {
    const activeNames = ref(['1']);
    const collapse = ref(null);

    const openAll = () => {
      collapse.value.toggleAll(true);
    }
    const toggleAll = () => {
      collapse.value.toggleAll();
    },

    return {
      activeNames,
      openAll,
      toggleAll,
      collapse,
    };
  },
};
```

> Tips: The toggleAll method cannot be used in accordion mode.

---

# Component: ConfigProvider

## Introduction
Used to configure Bot components globally, providing dark mode, theme customization and other capabilities.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| theme | Theme mode, can be set to `dark` | _ConfigProviderTheme_ | `light` |
| theme-vars | Theme variables | _object_ | - |
| theme-vars-dark | Theme variables that work in dark mode，will override `theme-vars` | _object_ | - |
| theme-vars-light | Theme variables that work in light mode, will override `theme-vars` | _object_ | - |
| z-index | Set the z-index of all popup components, this property takes effect globally | _number_ | `2000` |
| tag | HTML Tag of root element | _string_ | `div` |

## Types
The component exports the following type definitions:

```ts
import type {
  ConfigProviderProps,
  ConfigProviderTheme,
  ConfigProviderThemeVars,
} from '@botim/bot';
```

---

# Component: Confirm

## Introduction
A modal box pops up on the page, which is often used for message prompts, message confirmation, or to complete specific interactive operations in the current page. It supports two methods: component call and function call.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:show | Whether to show Confirm | _boolean_ | - |
| title | Title | _string_ | - |
| icon | Icon | _string_ | - |
| icon-size | Icon size | _string \| number _ | `48` |
| message | Message | _string \| () => JSX.ELement_ | - |
| message-align | Message align, can be set to `left` `right` `justify` | _string_ | `center` |
| show-confirm-button | Whether to show confirm button | _boolean_ | `true` |
| show-cancel-button | Whether to show cancel button | _boolean_ | `false` |
| cancel-button-text | Cancel button text | _string_ | `Cancel` |
| cancel-button-color | Cancel button color | _string_ | `black` |
| cancel-button-disabled | Whether to disable cancel button | _boolean_ | `false` |
| cancelButtonType | Cancel button type | _string_ | `default` |
| confirmButtonType | Confirm button type | _string_ | `primary` |
| confirm-button-text | Confirm button text | _string_ | `Confirm` |
| confirm-button-color | Confirm button color | _string_ | `#ee0a24` |
| confirm-button-disabled | Whether to disable confirm button | _boolean_ | `false` |
| z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` |
| overlay | Whether to show overlay | _boolean_ | `true` |
| overlay-class | Custom overlay class | _string_ | - |
| overlay-style | Custom overlay style | _object_ | - |
| close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
| close-on-click-overlay | Whether to close when overlay is clicked | _boolean_ | `false` |
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
| allow-html | Whether to allow HTML rendering in message | _boolean_ | `false` |
| vertical | Show button vertically | _boolean_ | `false` |
| before-close | Callback function before close | _(action: string) => boolean \| Promise\<boolean\>_ | - |
| transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
| teleport | Specifies a target element where Confirm will be mounted | _string \| Element_ | - |

## Events
| Event   | Description                                | Parameters |
| ------- | ------------------------------------------ | ---------- |
| confirm | Emitted when the confirm button is clicked | -          |
| cancel  | Emitted when the cancel button is clicked  | -          |
| open    | Emitted when opening Confirm               | -          |
| close   | Emitted when closing Confirm               | -          |
| opened  | Emitted when Confirm is opened             | -          |
| closed  | Emitted when Confirm is closed             | -          |

## Slots
| Name    | Description    |
| ------- | -------------- |
| default | Custom message |
| header  | Custom Header  |
| title   | Custom title   |
| footer  | Custom footer  |
| content | Custom content |

## Types
The component exports the following type definitions:

```ts
import type {
  ConfirmProps,
  ConfirmMessage,
  ConfirmOptions,
  ConfirmMessageAlign,
} from '@botim/bot';
```

## Usage Examples
### Alert Confirm

Used to prompt for some messages, only including one confirm button.

```js
showConfirmPopup({
  title: 'Title',
  message: 'Content',
}).then(() => {
  // on close
});

showConfirmPopup({
  message: 'Content',
}).then(() => {
  // on close
});
```

### Confirm with Cancel Button

Used to confirm some messages, including a confirm button and a cancel button.

```js
import { showCCPopup } from '@botim/bot';
showCCPopup({
  title: 'Title',
  message: 'Content',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

showCCPopup({
  title: 'Title',
  message: 'Content',
  showCancelButton: false,
}).then(() => {
  // on confirm
});
```

### User Icon

```js
import { showConfirmPopup } from '@botim/bot';
showConfirmPopup({
  icon: 'success',
  title: 'Title',
  message: 'Content',
});
```

### Button Vertical

```js
import { showConfirmPopup } from '@botim/bot';
showConfirmPopup({
  title: 'Title',
  vertical: true,
  message: 'Content',
});
```

### Button Type

```js
import { showConfirmPopup } from '@botim/bot';
showConfirmPopup({
  title: 'Title',
  confirmButtonType: 'danger',
  message: 'Content',
});
```

### Async Close

```js
const beforeClose = (action) =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve(action === 'confirm');
    }, 1000);
  });

showCCPopup({
  title: 'Title',
  message: 'Content',
  beforeClose,
});
```

### Use Confirm Component

If you need to render Vue components within a Confirm, you can use the Confirm component.

```html
<bot-confirm v-model:show="show" title="标题" message="消息" show-cancel-button>
  <template #content>
    <bot-field />
  </template>
</bot-confirm>
```

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

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

---

# Component: CountDown

## Introduction
Used to display the countdown value in real time, and precision supports milliseconds.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| time | Total time, unit milliseconds | _number \| string_ | `0` |
| format | Time format | _string_ | `HH:mm:ss` |
| auto-start | Whether to auto start count down | _boolean_ | `true` |
| millisecond | Whether to enable millisecond render | _boolean_ | `false` |

## Events
| Event  | Description                      | Arguments                  |
| ------ | -------------------------------- | -------------------------- |
| finish | Emitted when count down finished | -                          |
| change | Emitted when count down changed  | _currentTime: CurrentTime_ |

## Slots
| Name    | Description    | SlotProps                  |
| ------- | -------------- | -------------------------- |
| default | Custom Content | _currentTime: CurrentTime_ |

## Types
The component exports the following type definitions:

```ts
import type {
  CountDownProps,
  CountDownInstance,
  CountDownCurrentTime,
} from '@botim/bot';
```

`CountDownInstance` is the type of component instance:

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

const countDownRef = ref<CountDownInstance>();

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

## Usage Examples
### Basic Usage

```html
<bot-count-down :time="time" />
```

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

export default {
  setup() {
    const time = ref(30 * 60 * 60 * 1000);
    return { time };
  },
};
```

### Custom Format

```html
<bot-count-down :time="time" format="DD Day, HH:mm:ss" />
```

### Millisecond

```html
<bot-count-down millisecond :time="time" format="HH:mm:ss:SS" />
```

### Custom Style

```html
<bot-count-down :time="time">
  <template #default="timeData">
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
  </template>
</bot-count-down>

<style>
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
  }
</style>
```

### Manual Control

```html
<bot-count-down
  ref="countDown"
  millisecond
  :time="3000"
  :auto-start="false"
  format="ss:SSS"
  @finish="onFinish"
/>
<bot-grid clickable :column-num="3">
  <bot-grid-item text="Start" icon="play-circle-o" @click="start" />
  <bot-grid-item text="Pause" icon="pause-circle-o" @click="pause" />
  <bot-grid-item text="Reset" icon="replay" @click="reset" />
</bot-grid>
```

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

export default {
  setup() {
    const countDown = ref(null);

    const start = () => {
      countDown.value.start();
    };
    const pause = () => {
      countDown.value.pause();
    };
    const reset = () => {
      countDown.value.reset();
    };
    const onFinish = () => showToast('Finished');

    return {
      start,
      pause,
      reset,
      onFinish,
      countDown,
    };
  },
};
```

---

# Component: DatePicker

## Introduction
Used to select date, usually used with the [Popup](#/en-US/popup) component.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Current date | _string[]_ | `[]` |
| columns-type | Columns type | _string[]_ | `['day', 'month', 'year']` |
| min-date | Min date | _Date_ | Ten years ago on January 1 |
| max-date | Max date | _Date_ | Ten years later on December 31 |
| confirm-button-text | Text of confirm button | _string_ | `Confirm` |
| loading | Whether to show loading prompt | _boolean_ | `false` |
| readonly | Whether to be readonly | _boolean_ | `false` |
| filter | Option filter | _(type: string, options: PickerOption[]) => PickerOption[]_ | - |
| formatter | Option formatter | _(type: string, option: PickerOption) => PickerOption_ | - |
| option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |
| visible-option-num | Count of visible columns | _number \| string_ | `6` |
| swipe-duration | Duration of the momentum animation, unit `ms` | _number \| string_ | `1000` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| confirm | Emitted when the confirm button is clicked | _{ selectedValues, selectedOptions, selectedIndexes }_ |
| cancel | Emitted when the cancel button is clicked | _{ selectedValues, selectedOptions, selectedIndexes }_ |
| change | Emitted when current option is changed | _{ selectedValues, selectedOptions, selectedIndexes, columnIndex }_ |

## Slots
| Name | Description | SlotProps |
| --- | --- | --- |
| confirm | Custom confirm button text | - |
| option | Custom option content | _option: PickerOption, index: number_ |
| columns-top | Custom content above columns | - |
| columns-bottom | Custom content below columns | - |

## Types
The component exports the following type definitions:

```ts
import type { DatePickerProps, DatePickerColumnType } from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-date-picker
  v-model="currentDate"
  :min-date="minDate"
  :max-date="maxDate"
/>
```

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

export default {
  setup() {
    const currentDate = ref(['01', '01', '2021']);

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

### Columns Type

Using `columns-type` prop to control the type of columns.

For example:

- Pass in `['year']` to select year.
- Pass in `['month']` to select month.
- Pass in `['month', 'year']` to select year and month.
- Pass in `['day', 'month']` to select month and day.

```html
<bot-date-picker
  v-model="currentDate"
  :min-date="minDate"
  :max-date="maxDate"
  :columns-type="columnsType"
/>
```

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

export default {
  setup() {
    const currentDate = ref(['01', '2021']);
    const columnsType = ['month', 'year'];

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

### Options Formatter

```html
<bot-date-picker
  v-model="currentDate"
  :min-date="minDate"
  :max-date="maxDate"
  :formatter="formatter"
  :columns-type="columnsType"
/>
```

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

export default {
  setup() {
    const currentDate = ref(['01', '2021']);
    const columnsType = ['month', 'year'];

    const formatter = (type, option) => {
      if (type === 'year') {
        option.text += 'Year';
      }
      if (type === 'month') {
        option.text += 'Month';
      }
      return option;
    };

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

### Options Filter

```html
<bot-date-picker
  v-model="currentDate"
  :filter="filter"
  :min-date="minDate"
  :max-date="maxDate"
  :columns-type="columnsType"
/>
```

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

export default {
  setup() {
    const currentDate = ref(['01', '2021']);
    const columnsType = ['month', 'year'];

    const filter = (type, options) => {
      if (type === 'month') {
        return options.filter((option) => Number(option.value) % 6 === 0);
      }
      return options;
    };

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

---

# Component: Dialog

## Introduction
A modal box pops up on the page, which is often used for message prompts, message confirmation, or to complete specific interactive operations in the current page. It supports two methods: component call and function call.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:show | Whether to show dialog | _boolean_ | - |
| title | Title | _string_ | - |
| width | Width | _number \| string_ | `320px` |
| message | Message | _string \| () => JSX.ELement_ | - |
| message-align | Message align, can be set to `left` `right` `justify` | _string_ | `center` |
| theme | Theme style, can be set to `round-button` | _string_ | `default` |
| show-confirm-button | Whether to show confirm button | _boolean_ | `true` |
| show-cancel-button | Whether to show cancel button | _boolean_ | `false` |
| cancel-button-text | Cancel button text | _string_ | `Cancel` |
| cancel-button-color | Cancel button color | _string_ | `black` |
| cancel-button-disabled | Whether to disable cancel button | _boolean_ | `false` |
| confirm-button-text | Confirm button text | _string_ | `Confirm` |
| confirm-button-color | Confirm button color | _string_ | `#ee0a24` |
| confirm-button-disabled | Whether to disable confirm button | _boolean_ | `false` |
| z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` |
| overlay | Whether to show overlay | _boolean_ | `true` |
| overlay-class | Custom overlay class | _string_ | - |
| overlay-style | Custom overlay style | _object_ | - |
| close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
| closeable | Whether to show close icon | _boolean_ | `false` |
| close-on-click-overlay | Whether to close when overlay is clicked | _boolean_ | `false` |
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
| allow-html | Whether to allow HTML rendering in message | _boolean_ | `false` |
| before-close | Callback function before close | _(action: string) => boolean \| Promise\<boolean\>_ | - |
| transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
| teleport | Specifies a target element where Dialog will be mounted | _string \| Element_ | - |

## Events
| Event   | Description                                | Parameters |
| ------- | ------------------------------------------ | ---------- |
| confirm | Emitted when the confirm button is clicked | -          |
| cancel  | Emitted when the cancel button is clicked  | -          |
| open    | Emitted when opening Dialog                | -          |
| close   | Emitted when closing Dialog                | -          |
| opened  | Emitted when Dialog is opened              | -          |
| closed  | Emitted when Dialog is closed              | -          |

## Slots
| Name    | Description    |
| ------- | -------------- |
| default | Custom message |
| title   | Custom title   |
| footer  | Custom footer  |

## Types
The component exports the following type definitions:

```ts
import type {
  DialogProps,
  DialogTheme,
  DialogMessage,
  DialogOptions,
  DialogMessageAlign,
} from '@botim/bot';
```

## Usage Examples
### Alert dialog

Used to prompt for some messages, only including one confirm button.

```js
showDialog({
  title: 'Title',
  message: 'Content',
}).then(() => {
  // on close
});

showDialog({
  message: 'Content',
}).then(() => {
  // on close
});
```

### Confirm dialog

Used to confirm some messages, including a confirm button and a cancel button.

```js
showConfirmDialog({
  title: 'Title',
  closeable: true,
  message: 'Content',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

showConfirmDialog({
  title: 'Title',
  closeable: true,
  message: 'Content',
  showCancelButton: false,
}).then(() => {
  // on confirm
});
```

### Round Button Style

Use round button style.

```js
showDialog({
  title: 'Title',
  message: 'Content',
  theme: 'round-button',
}).then(() => {
  // on close
});

showDialog({
  message: 'Content',
  theme: 'round-button',
}).then(() => {
  // on close
});
```

### Async Close

```js
const beforeClose = (action) =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve(action === 'confirm');
    }, 1000);
  });

showConfirmDialog({
  title: 'Title',
  message: 'Content',
  beforeClose,
});
```

### Use Dialog Component

If you need to render Vue components within a Dialog, you can use the Dialog component.

```html
<bot-dialog v-model:show="show" title="Title" show-cancel-button>
  <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
</bot-dialog>
```

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

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

---

# Component: Divider

## Introduction
Separate content into multiple areas.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| dashed | Whether to use dashed border | _boolean_ | `false` |
| hairline | Whether to use hairline | _boolean_ | `true` |
| content-position | Content position, can be set to `left` `right` | _string_ | `center` |
| vertical | Whether to use vertical | _boolean_ | `false` |

## Slots
| Name    | Description |
| ------- | ----------- |
| default | content     |

## Types
The component exports the following type definitions:

```ts
import type { DividerProps, DividerContentPosition } from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-divider />
```

### With Text

```html
<bot-divider>Text</bot-divider>
```

### Content Position

```html
<bot-divider content-position="left">Text</bot-divider>
<bot-divider content-position="right">Text</bot-divider>
```

### Dashed

```html
<bot-divider dashed>Text</bot-divider>
```

### Custom Style

```html
<bot-divider
  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
  Text
</bot-divider>
```

### vertical

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

---

# Component: DropdownMenu

## Introduction
The menu list that pops down downwards.

## Types
The component exports the following type definitions:

```ts
import type {
  DropdownMenuProps,
  DropdownItemProps,
  DropdownItemOption,
  DropdownItemInstance,
  DropdownMenuDirection,
} from '@botim/bot';
```

`DropdownItemInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { DropdownItemInstance } from '@botim/bot';

const dropdownItemRef = ref<DropdownItemInstance>();

dropdownItemRef.value?.toggle();
```

## Usage Examples
### Basic Usage

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

```js
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,
    };
  },
};
```

### Custom Content

```html
<bot-dropdown-menu>
  <bot-dropdown-item v-model="value" :options="options" />
  <bot-dropdown-item title="Title" ref="item">
    <bot-cell center title="Title">
      <template #right-icon>
        <bot-switch v-model="switch1" />
      </template>
    </bot-cell>
    <bot-cell center title="Title">
      <template #right-icon>
        <bot-switch v-model="switch2" />
      </template>
    </bot-cell>
    <div style="padding: 5px 16px;">
      <bot-button type="primary" block round @click="onConfirm">
        Confirm
      </bot-button>
    </div>
  </bot-dropdown-item>
</bot-dropdown-menu>
```

```js
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,
    };
  },
};
```

### Custom Active Color

Use `active-color` prop to custom active color of the title and options.

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

### Expand Direction

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

### Disabled

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

---

# Component: Empty

## Introduction
Occupation reminder when empty.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| image | Image type, can be set to `error` `network` `search` or image URL | _string_ | `default` |
| image-size | Image size | _number \| string \| Array_ | - |
| description | Description | _string_ | - |
| action-text | Button Text | _string_ | - |

## Slots
| Name        | Description           |
| ----------- | --------------------- |
| default     | Custom bottom content |
| image       | Custom image          |
| description | Custom description    |
| action      | Custom Action         |

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

```html
<bot-empty description="Description" />
```

### Image Type

Use the image prop to display different placeholder images.

```html
<!-- Error -->
<bot-empty image="error" description="Description" />
<!-- Network -->
<bot-empty image="network" description="Description" />
<!-- Search -->
<bot-empty image="search" description="Description" />
```

### Custom Size

Using `image-size` prop to custom the size of image.

```html
<!-- The default unit is px -->
<bot-empty image-size="100" description="Description" />
<!-- Support other units, such as rem, vh, vw -->
<bot-empty image-size="10rem" description="Description" />
```

You can set the width and height separately.

```html
<bot-empty :image-size="[60, 40]" description="Description" />
```

### Custom Image

```html
<bot-empty
  image="https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"
  image-size="80"
  description="Description"
/>
```

### ActionText

```html
<bot-empty description="Description" action-text="ButtonText" @action="“click”">
</bot-empty>
```

### Bottom Content

```html
<bot-empty description="Description">
  <bot-button round type="primary" class="bottom-button">Button</bot-button>
</bot-empty>

<style>
  .bottom-button {
    width: 160px;
    height: 40px;
  }
</style>
```

---

# Component: Field

## Introduction
Field component let users enter and edit text.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Input value | _number \| string_ | - |
| label | Left side label | _string_ | - |
| sub-label | Whether to show sub label when this `label-align` is `top` | _string_ | - |
| name | As the identifier when submitting the form | _string_ | - |
| id | Input id, the for attribute of the label also will be set | _string_ | `bot-field-n-input` |
| type | Input type, support all [native types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) and `digit` type | _FieldType_ | `text` |
| size | Size, can be set to `large` | _string_ | - |
| maxlength | Max length of value | _number \| string_ | - |
| placeholder | Input placeholder | _string_ | - |
| border | Whether to show inner border | _boolean_ | `true` |
| disabled | Whether to disable field | _boolean_ | `false` |
| readonly | Whether to be readonly | _boolean_ | `false` |
| colon | Whether to display colon after label | _boolean_ | `false` |
| required | Whether to show required mark | _boolean_ | `false` |
| center | Whether to center content vertically | _boolean_ | `true` |
| label-for | Whether to set label for | _boolean_ | `true` |
| clearable | Whether to be clearable | _boolean_ | `false` |
| clear-icon | Clear icon name | _string_ | `clear` |
| clear-trigger | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _FieldClearTrigger_ | `focus` |
| clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
| is-link | Whether to show link icon | _boolean_ | `false` |
| autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
| allow-minus | Whether to allow minus as a separator when the type is set to 'number'. | _boolean_ | `false` |
| show-word-limit | Whether to show word limit, need to set the `maxlength` prop | _boolean_ | `false` |
| error | Whether to mark the input content in red | _boolean_ | `false` |
| error-message | Error message | _string_ | - |
| error-message-align | Error message align, can be set to `center` `right` | _FieldTextAlign_ | `left` |
| formatter | Input value formatter | _(val: string) => string_ | - |
| format-trigger | When to format value, can be set to `onBlur` | _FieldFormatTrigger \| FieldFormatTrigger[]_ | `onChange` |
| arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` |
| label-class | Label className | _string \| Array \| object_ | - |
| label-width | Label width | _number \| string_ | `6.2em` |
| label-align | Label align, can be set to `center` `right` `top` | _FieldTextAlign_ | `left` |
| input-align | Input align, can be set to `center` `right` | _FieldTextAlign_ | `left` |
| autosize | Textarea auto resize, can accept an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| FieldAutosizeConfig_ | `false` |
| left-icon | Left side icon name | _string_ | - |
| right-icon | Right side icon name | _string_ | - |
| icon-prefix | Icon className prefix | _string_ | `bot-icon` |
| rules | Form validation rules | _FieldRule[]_ | - |
| autocomplete | HTML native attribute, see [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - |
| enterkeyhint | HTML native attribute, see [MDN - enterkeyhint](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)<br> | _string_ | - |
| composing | whether to skip update value when composing | _boolean_ | `true` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| update:model-value | Emitted when input value changed | _value: string_ |
| focus | Emitted when input is focused | _event: Event_ |
| blur | Emitted when input is blurred | _event: Event_ |
| clear | Emitted when the clear icon is clicked | _event: MouseEvent_ |
| click | Emitted when component is clicked | _event: MouseEvent_ |
| click-input | Emitted when the input is clicked | _event: MouseEvent_ |
| click-content | Emitted when the content is clicked | _event: MouseEvent_ |
| click-left-icon | Emitted when the left icon is clicked | _event: MouseEvent_ |
| click-right-icon | Emitted when the right icon is clicked | _event: MouseEvent_ |
| start-validate | Emitted when start validation | - |
| end-validate | Emitted when end validation | _{ status: string, message: string }_ |

## Slots
| Name | Description | SlotProps |
| --- | --- | --- |
| label | Custom label | - |
| input | Custom input | - |
| left-icon | Custom left icon | - |
| right-icon | Custom right icon | - |
| button | Insert button | - |
| error-message | Custom error message | _{ message: string }_ |
| extra | Custom content on the right | - |
| subLabel | Whether to show sub label when this `label-align` is `top` | - |

## Theming

## Types
The component exports the following type definitions:

```ts
import type {
  FieldType,
  FieldRule,
  FieldProps,
  FieldInstance,
  FieldTextAlign,
  FieldRuleMessage,
  FieldClearTrigger,
  FieldFormatTrigger,
  FieldRuleValidator,
  FieldRuleFormatter,
  FieldValidateError,
  FieldAutosizeConfig,
  FieldValidateTrigger,
  FieldValidationStatus,
} from '@botim/bot';
```

`FieldInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { FieldInstance } from '@botim/bot';

const fieldRef = ref<FieldInstance>();

fieldRef.value?.focus();
```

## Usage Examples
### Basic Usage

The value of field is bound with v-model.

```html
<bot-cell-group inset>
  <bot-field v-model="value" label="Label" placeholder="Text" />
</bot-cell-group>
```

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

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

### Custom Type

Use `type` prop to custom different type fields.

```html
<bot-cell-group inset>
  <bot-field v-model="text" label="Text" />
  <bot-field v-model="tel" type="tel" label="Phone" />
  <bot-field v-model="digit" type="digit" label="Digit" />
  <bot-field v-model="number" type="number" label="Number" />
  <bot-field v-model="password" type="password" label="Password" />
</bot-cell-group>
```

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

export default {
  setup() {
    const tel = ref('');
    const text = ref('');
    const digit = ref('');
    const number = ref('');
    const password = ref('');

    return { tel, text, digit, number, password };
  },
};
```

### Disabled

```html
<bot-cell-group inset>
  <bot-field label="Text" model-value="Input Readonly" readonly />
  <bot-field label="Text" model-value="Input Disabled" disabled />
</bot-cell-group>
```

### Show Icon

```html
<bot-cell-group inset>
  <bot-field
    v-model="value1"
    label="Text"
    left-icon="smile-o"
    right-icon="warning-o"
    placeholder="Show Icon"
  />
  <bot-field
    v-model="value2"
    clearable
    label="Text"
    left-icon="music-o"
    placeholder="Show Clear Icon"
  />
</bot-cell-group>
```

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

export default {
  setup() {
    const value1 = ref('');
    const value2 = ref('123');
    return {
      value1,
      value2,
    };
  },
};
```

### Error Info

Use `error` or `error-message` to show error info.

```html
<bot-cell-group inset>
  <bot-field
    v-model="username"
    error
    required
    label="Username"
    placeholder="Username"
  />
  <bot-field
    v-model="phone"
    required
    label="Phone"
    placeholder="Phone"
    error-message="Invalid phone"
  />
</bot-cell-group>
```

### Insert Button

Use button slot to insert button.

```html
<bot-cell-group inset>
  <bot-field v-model="sms" center clearable label="SMS" placeholder="SMS">
    <template #button>
      <bot-button size="small" type="primary">Send SMS</bot-button>
    </template>
  </bot-field>
</bot-cell-group>
```

### Sub Label

Set the sublabel

```html
<bot-cell-group inset>
  <bot-field
    v-model="value"
    label="Text"
    sub-label="This is sub label"
    placeholder="Text"
  />
</bot-cell-group>
```

### Format Value

Use `formatter` prop to format the input value.

```html
<bot-cell-group inset>
  <bot-field
    v-model="value1"
    label="Text"
    :formatter="formatter"
    placeholder="Format On Change"
  />
  <bot-field
    v-model="value2"
    label="Text"
    :formatter="formatter"
    format-trigger="onBlur"
    placeholder="Format On Blur"
  />
</bot-cell-group>
```

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

export default {
  setup() {
    const value1 = ref('');
    const value2 = ref('');
    const formatter = (value) => value.replace(/\d/g, '');

    return {
      value1,
      value2,
      formatter,
    };
  },
};
```

### Auto Resize

Textarea Field can be auto resize when has `autosize` prop.

```html
<bot-cell-group inset>
  <bot-field
    v-model="message"
    label="Message"
    type="textarea"
    placeholder="Message"
    rows="1"
    autosize
  />
</bot-cell-group>
```

### Show Word Limit

```html
<bot-cell-group inset>
  <bot-field
    v-model="message"
    rows="2"
    autosize
    label="Message"
    type="textarea"
    maxlength="50"
    placeholder="Message"
    show-word-limit
  />
</bot-cell-group>
```

### Input Align

Use `input-align` prop to align the input value.

```html
<bot-cell-group inset>
  <bot-field
    v-model="value"
    label="Text"
    placeholder="Input Align Right"
    input-align="right"
  />
</bot-cell-group>
```

### Label Align

Use `label-align` prop to align the input value, can be set to `center`, `right` or `top`.

```html
<bot-cell-group inset>
  <bot-field
    v-model="value"
    label="Label"
    placeholder="Align Top"
    label-align="top"
  />
  <bot-field
    v-model="value2"
    label="Label"
    placeholder="Align Left"
    label-align="left"
  />
  <bot-field
    v-model="value3"
    label="Label"
    placeholder="Align Center"
    label-align="center"
  />
  <bot-field
    v-model="value4"
    label="Label"
    placeholder="Align Right"
    label-align="right"
  />
</bot-cell-group>
```

### custom left style

The left side content can be customized with `left slot`

```html
<bot-cell-group inset>
  <bot-field v-model="value" show-divider :placeholder="t('placeholder')">
    <template #[inputLeft]>
      <div class="left">
        <bot-image
          height="18px"
          width="18px"
          fit="cover"
          round
          :src="imageUrl"
        />
        <span class="left-text">+924</span>
        <bot-icon style="margin-left: 8px" :icon="ChevronDownLine" />
      </div>
    </template>
  </bot-field>
</bot-cell-group>
```

---

# 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>
```

---

# Component: FooterBar

## Introduction
Fixed container at the bottom of the page. Please upgrade `bot` to >= v1.0.47 before using this component.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| wrap | Whether to automatically wrap content | _boolean_ | `false` |
| fixed | Whether to fix the bottom | _boolean_ | `true` |
| gutter | Spacing between buttons, default unit is `px` | _string \| number_ | - |
| shadow | Whether to display shadow | _boolean_ | `true` |
| placeholder | Whether to generate a placeholder element | _boolean_ | `true` |
| custom-style | Custom style | _object_ | - |

## Slots
| Name    | Description             |
| ------- | ----------------------- |
| default | Content fixed to bottom |

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

```html
<bot-footer-bar>
  <bot-button type="primary" block>Pay</bot-button>
</bot-footer-bar>
```

### Pay Button

Payment button at the bottom, displaying amount, with loading icon shown on the right side.

Please refer to [bot-pay-button](https://fed.corp.algento.com/webfedcompontentui/bot-plus-index.html#/zh-CN/pay-button) component.

```html
<bot-footer-bar>
  <bot-button
    class="jusitify-between"
    type="primary"
    block
    @click="handleClick"
  >
    <span>Pay</span>
    <div>
      <span v-if="!loading">AED 98.00</span>
      <bot-loading v-else class="bot-button__loading" />
    </div>
  </bot-button>
</bot-footer-bar>

<style lang="less" scoped>
  .jusitify-between {
    :deep(.bot-button__text) {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
</style>
```

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

export default {
  setup() {
    const loading = ref(false);

    const handleClick = () => {
      if (loading.value) return;
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
      }, 1500);
    };

    return {
      loading,
      handleClick,
    };
  },
};
```

### Button Group

The `gutter` prop can be used to set the spacing between buttons.

```html
<bot-footer-bar gutter="8">
  <bot-button block>Cancel</bot-button>
  <bot-button type="primary" block>Pay</bot-button>
</bot-footer-bar>
```

### Auto Wrap

The `wrap` prop can be used to set the content to wrap automatically.

```html
<bot-footer-bar gutter="8" wrap>
  <bot-button block>Cancel</bot-button>
  <bot-button type="primary" block>Pay</bot-button>
</bot-footer-bar>
```

---

# Component: Form

## Introduction
Used for data entry and verification, and supports input boxes, radio buttons, check boxes, file uploads and other types. Should be used with [Field](#/en-US/field) component.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| label-width | Field label width | _number \| string_ | `6.2em` |
| label-align | Field label align, can be set to `center` `right` `top` | _string_ | `left` |
| input-align | Field input align, can be set to `center` `right` | _string_ | `left` |
| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
| validate-trigger | When to validate the form, can be set to `onChange`、`onSubmit`, supports using array to set multiple values | _string \| string[]_ | `onBlur` |
| colon | Whether to display colon after label | _boolean_ | `false` |
| disabled | Whether to disable form | _boolean_ | `false` |
| readonly | Whether to be readonly | _boolean_ | `false` |
| validate-first | Whether to stop the validation when a rule fails | _boolean_ | `false` |
| scroll-to-error | Whether to scroll to the error field when validation failed | _boolean_ | `false` |
| show-error | Whether to highlight input when validation failed | _boolean_ | `false` |
| show-error-message | Whether to show error message when validation failed | _boolean_ | `true` |
| submit-on-enter | Whether to submit form on enter | _boolean_ | `true` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| submit | Emitted after submitting the form and validation passed | _values: object_ |
| failed | Emitted after submitting the form and validation failed | _errorInfo: { values: object, errors: object[] }_ |

## Slots
| Name    | Description  |
| ------- | ------------ |
| default | Form content |

## Types
The component exports the following type definitions:

```ts
import type { FormProps, FormInstance } from '@botim/bot';
```

`FormInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { FormInstance } from '@botim/bot';

const formRef = ref<FormInstance>();

formRef.value?.submit();
```

## Usage Examples
### Basic Usage

```html
<bot-form @submit="onSubmit">
  <bot-cell-group inset>
    <bot-field
      v-model="username"
      name="Username"
      label="Username"
      placeholder="Username"
      :rules="[{ required: true, message: 'Username is required' }]"
    />
    <bot-field
      v-model="password"
      type="password"
      name="Password"
      label="Password"
      placeholder="Password"
      :rules="[{ required: true, message: 'Password is required' }]"
    />
  </bot-cell-group>
  <div style="margin: 16px;">
    <bot-button round block type="primary" native-type="submit">
      Submit
    </bot-button>
  </div>
</bot-form>
```

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

export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const onSubmit = (values) => {
      console.log('submit', values);
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
};
```

### Validate Rules

```html
<bot-form @failed="onFailed">
  <bot-cell-group inset>
    <bot-field
      v-model="value1"
      name="pattern"
      placeholder="Use pattern"
      :rules="[{ pattern, message: 'Error message' }]"
    />
    <bot-field
      v-model="value2"
      name="validator"
      placeholder="Use validator"
      :rules="[{ validator, message: 'Error message' }]"
    />
    <bot-field
      v-model="value3"
      name="validatorMessage"
      placeholder="Use validator to return message"
      :rules="[{ validator: validatorMessage }]"
    />
    <bot-field
      v-model="value4"
      name="asyncValidator"
      placeholder="Use async validator"
      :rules="[{ validator: asyncValidator, message: 'Error message' }]"
    />
  </bot-cell-group>
  <div style="margin: 16px;">
    <bot-button round block type="primary" native-type="submit">
      Submit
    </bot-button>
  </div>
</bot-form>
```

```js
import { ref } from 'vue';
import { closeToast, showLoadingToast } from '@botim/bot';

export default {
  setup() {
    const value1 = ref('');
    const value2 = ref('');
    const value3 = ref('abc');
    const value4 = ref('');
    const pattern = /\d{6}/;

    const validator = (val) => /1\d{10}/.test(val);

    const validatorMessage = (val) => `${val} is invalid`;

    const asyncValidator = (val) =>
      new Promise((resolve) => {
        showLoadingToast('Validating...');

        setTimeout(() => {
          closeToast();
          resolve(val === '1234');
        }, 1000);
      });

    const onFailed = (errorInfo) => {
      console.log('failed', errorInfo);
    };

    return {
      value1,
      value2,
      value3,
      value4,
      pattern,
      onFailed,
      validator,
      asyncValidator,
      validatorMessage,
    };
  },
};
```

### Field Type - Switch

```html
<bot-field name="switch" label="Switch">
  <template #input>
    <bot-switch v-model="checked" />
  </template>
</bot-field>
```

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

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

### Field Type - Checkbox

```html
<bot-field name="checkbox" label="Checkbox">
  <template #input>
    <bot-checkbox v-model="checked" shape="square" />
  </template>
</bot-field>
<bot-field name="checkboxGroup" label="CheckboxGroup">
  <template #input>
    <bot-checkbox-group v-model="groupChecked" direction="horizontal">
      <bot-checkbox name="1" shape="square">Checkbox 1</bot-checkbox>
      <bot-checkbox name="2" shape="square">Checkbox 2</bot-checkbox>
    </bot-checkbox-group>
  </template>
</bot-field>
```

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

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

### Field Type - Radio

```html
<bot-field name="radio" label="Radio">
  <template #input>
    <bot-radio-group v-model="checked" direction="horizontal">
      <bot-radio name="1">Radio 1</bot-radio>
      <bot-radio name="2">Radio 2</bot-radio>
    </bot-radio-group>
  </template>
</bot-field>
```

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

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

### Field Type - Stepper

```html
<bot-field name="stepper" label="Stepper">
  <template #input>
    <bot-stepper v-model="value" />
  </template>
</bot-field>
```

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

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

### Field Type - Rate

```html
<bot-field name="rate" label="Rate">
  <template #input>
    <bot-rate v-model="value" />
  </template>
</bot-field>
```

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

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

### Field Type - Slider

```html
<bot-field name="slider" label="Slider">
  <template #input>
    <bot-slider v-model="value" />
  </template>
</bot-field>
```

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

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

### Field Type - Uploader

```html
<bot-field name="uploader" label="Uploader">
  <template #input>
    <bot-uploader v-model="value" />
  </template>
</bot-field>
```

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

export default {
  setup() {
    const value = ref([
      { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
    ]);
    return { value };
  },
};
```

### Field Type - Picker

```html
<bot-field
  v-model="result"
  is-link
  readonly
  name="picker"
  label="Picker"
  placeholder="Select city"
  @click="showPicker = true"
/>
<bot-popup v-model:show="showPicker" position="bottom">
  <bot-picker
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</bot-popup>
```

```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,
    };
  },
};
```

### Field Type - DatePicker

```html
<bot-field
  v-model="result"
  is-link
  readonly
  name="datePicker"
  label="Date Picker"
  placeholder="Select date"
  @click="showPicker = true"
/>
<bot-popup v-model:show="showPicker" position="bottom">
  <bot-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
</bot-popup>
```

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

export default {
  setup() {
    const result = ref('');
    const showPicker = ref(false);
    const onConfirm = ({ selectedValues }) => {
      result.value = selectedValues.join('/');
      showPicker.value = false;
    };

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

### Field Type - Area

```html
<bot-field
  v-model="result"
  is-link
  readonly
  name="area"
  label="Area Picker"
  placeholder="Select area"
  @click="showArea = true"
/>
<bot-popup v-model:show="showArea" position="bottom">
  <bot-area
    :area-list="areaList"
    @confirm="onConfirm"
    @cancel="showArea = false"
  />
</bot-popup>
```

```js
import { ref } from 'vue';
import { areaList } from '@vant/area-data';

export default {
  setup() {
    const result = ref('');
    const showArea = ref(false);
    const onConfirm = ({ selectedOptions }) => {
      showArea.value = false;
      result.value = selectedOptions.map((item) => item.text).join('/');
    };

    return {
      result,
      areaList,
      showArea,
      onConfirm,
    };
  },
};
```

### Field Type - Calendar

```html
<bot-field
  v-model="result"
  is-link
  readonly
  name="calendar"
  label="Calendar"
  placeholder="Select date"
  @click="showCalendar = true"
/>
<bot-calendar v-model:show="showCalendar" @confirm="onConfirm" />
```

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

export default {
  setup() {
    const result = ref('');
    const showCalendar = ref(false);
    const onConfirm = (date) => {
      result.value = `${date.getMonth() + 1}/${date.getDate()}`;
      showCalendar.value = false;
    };

    return {
      result,
      onConfirm,
      showCalendar,
    };
  },
};
```

---

# Component: Grid

## Introduction
Used to divide the page into blocks of equal width in the horizontal direction for displaying content or page navigation.

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

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

```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>
```

### Column Num

```html
<bot-grid :column-num="3">
  <bot-grid-item
    v-for="value in 6"
    :key="value"
    :icon="ImageLine"
    text="Text"
  />
</bot-grid>
```

### Custom Content

```html
<bot-grid :border="false" :column-num="3">
  <bot-grid-item>
    <bot-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
    />
  </bot-grid-item>
  <bot-grid-item>
    <bot-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
    />
  </bot-grid-item>
  <bot-grid-item>
    <bot-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
    />
  </bot-grid-item>
</bot-grid>
```

### Square

```html
<bot-grid square>
  <bot-grid-item
    v-for="value in 8"
    :key="value"
    :icon="ImageLine"
    text="Text"
  />
</bot-grid>
```

### Gutter

```html
<bot-grid :gutter="10">
  <bot-grid-item
    v-for="value in 8"
    :key="value"
    :icon="ImageLine"
    text="Text"
  />
</bot-grid>
```

### Horizontal

```html
<bot-grid direction="horizontal" :column-num="3">
  <bot-grid-item :icon="ImageLine" text="文字" />
  <bot-grid-item :icon="ImageLine" text="文字" />
  <bot-grid-item :icon="ImageLine" text="文字" />
</bot-grid>
```

### Route

```ts
import { Home02Line, SearchLine } from '@botim/buckit-icons';
```

```html
<bot-grid clickable :column-num="2">
  <bot-grid-item :icon="Home02Line" text="Vue Router" to="/" />
  <bot-grid-item :icon="SearchLine" text="URL" url="https://github.com" />
</bot-grid>
```

### Show Badge

```html
<bot-grid :column-num="2">
  <bot-grid-item :text="t('text')" dot>
    <template #icon>
      <Home02Line style="font-size: 30px; width:1em; height:1em" />
    </template>
  </bot-grid-item>
  <bot-grid-item :text="t('text')" badge="99+">
    <template #icon>
      <SearchLine style="font-size: 30px; width:1em; height:1em" />
    </template>
  </bot-grid-item>
</bot-grid>
```

---

# Component: Highlight

## Introduction
Highlight specific text content.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| keywords | Expected highlighted text | _string \| string[]_ | - |
| source-string | Source text | _string_ | - |
| auto-escape | Whether to automatically escape | _boolean_ | `true` |
| case-sensitive | Is case sensitive | _boolean_ | `false` |
| highlight-class | Class name of the highlight tag | _string_ | - |

## Types
The component exports the following type definitions:

```ts
import type { HighlightProps, HighlightThemeVars } from '@botim/bot';
```

## Usage Examples
### Basic Usage

You can specify keywords to be highlighted with `keywords` and source text with `source-string`.

```html
<bot-highlight :keywords="keywords" :source-string="text" />
```

```ts
export default {
  setup() {
    const text =
      'When you feel confused and lost, dont give up on yourself. Every challenge in life is an opportunity to make you stronger and more mature.';
    const keywords = 'lost';

    return {
      text,
      keywords,
    };
  },
};
```

### Multiple Keywords

If you need to match more than one keyword, you can pass in `keywords` as an array.

```html
<bot-highlight :keywords="keywords" :source-string="text" />
```

```ts
export default {
  setup() {
    const text =
      'When you feel confused and lost, dont give up on yourself. Every challenge in life is an opportunity to make you stronger and more mature.';
    const keywords = ['confused', 'lost', 'challenge'];

    return {
      text,
      keywords,
    };
  },
};
```

### Custom Class

Set the `highlight-class` of the highlighted tag to customize the style.

```html
<bot-highlight
  :keywords="keywords"
  :source-string="text"
  highlight-class="custom-class"
/>
```

```ts
export default {
  setup() {
    const text =
      'When you feel confused and lost, dont give up on yourself. Every challenge in life is an opportunity to make you stronger and more mature.';
    const keywords = 'stronger';

    return {
      text,
      keywords,
    };
  },
};
```

```css
.custom-class {
  color: #7232dd;
}
```

---

# Component: Icon

## Introduction
Semantic vector graphics. Before use icons, you need to install @botim/buckit-icons package:

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

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| tag | The wrapper element for the icon | _HTMLElementTagNameMap_ | `i` |
| icon | Icon component | _Component_ | - |
| url | Image url | _string_ | - |
| color | Icon color | _string_ | - |
| inner-color | Icon inner color, only effective for two-color icons | _string_ | - |
| size | Icon size | _number_ | - |

## Events
| Event | Description                  | Arguments           |
| ----- | ---------------------------- | ------------------- |
| click | Emitted when icon is clicked | _event: MouseEvent_ |

## Usage Examples
### Basic Usage

```html
<bot-icon :icon="AirpodsLine" />
<!-- or -->
<AirpodsLine width="1em" height="1em" style="font-size: 16px;" />
```

### Icon Color

Use `color` prop to set icon color.

```html
<bot-icon :icon="AirpodsLine" color="#1989fa" />
```

### Icon Size

Use `size` prop to set icon size.

```html
<bot-icon :icon="AirpodsLine" :size="40" />
```

### Double Color Icon

Use `inner-color` prop to set double color icon inner color.

```html
<bot-icon :icon="AirpodsLine" :size="40" inner-color="#79bbff" />

<!-- or -->
<AirpodsLine style="color: #79bbff; --bot-icon-inner-color: #79bbff;" />
```

---

# Component: Image

## Introduction
Enhanced img tag with multiple image fill modes, support for image lazy loading, loading hint, loading failure hint.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| src | Src | _string_ | - |
| fit | Fit mode, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | _string_ | `fill` |
| position | Position, same as [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position), can be set to `top` `right` `bottom` `left` or `string` | _string_ | `center` |
| alt | Alt | _string_ | - |
| width | Width | _number \| string_ | - |
| height | Height | _number \| string_ | - |
| radius | Border Radius | _number \| string_ | `0` |
| round | Whether to be round | _boolean_ | `false` |
| block `3.6.3` | Whether the root node is a block element | _boolean_ | `false` |
| lazy-load | Whether to enable lazy load, should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
| show-error | Whether to show error placeholder | _boolean_ | `true` |
| show-loading | Whether to show loading placeholder | _boolean_ | `true` |
| error-icon | Error icon | _string_ | `ImageBlockLine` |
| loading-icon | Loading icon | _string_ | `Botim` |
| icon-size | Icon size | _number \| string_ | `32px` |

## Events
| Event | Description                    | Arguments           |
| ----- | ------------------------------ | ------------------- |
| click | Emitted when image is clicked  | _event: MouseEvent_ |
| load  | Emitted when image loaded      | _event: Event_      |
| error | Emitted when image load failed | -                   |

## Slots
| Name    | Description                        |
| ------- | ---------------------------------- |
| default | Custom the content below the image |
| loading | Custom loading placeholder         |
| error   | Custom error placeholder           |

## Types
The component exports the following type definitions:

```ts
import type { ImageFit, ImagePosition, ImageProps } from '@botim/bot';
```

## Usage Examples
### Basic Usage

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

### Fit Mode

Same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).

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

### Position

Same as [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position).

```html
<bot-image
  width="10rem"
  height="10rem"
  fit="cover"
  position="left"
  src="https://cdn-web-sg.botim.me/upd/v1/mp/perm/npuploadtools/202306/15-b2d8e4f5c1fb4e928adcdd6c8ed259cf.jpeg"
/>
```

### Round

Show round image, it may not works at `fit=contain` and `fit=scale-down`.

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

### Lazy Load

```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"
/>
```

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

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

---

# Component: ImagePreview

## Introduction
Used to zoom in and preview the picture, and it supports two methods: function call and component call.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:show | Whether to show ImagePreview | _boolean_ | `false` |
| images | Images URL list | _string[]_ | `[]` |
| start-position | Start position | _number \| string_ | `0` |
| swipe-duration | Animation duration (ms) | _number \| string_ | `300` |
| show-index | Whether to show index | _boolean_ | `true` |
| show-indicators | Whether to show indicators | _boolean_ | `false` |
| loop | Whether to enable loop | _boolean_ | `true` |
| before-close | Callback function before close | _(action: number) => boolean \| Promise\<boolean\>_ | - |
| close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
| class-name | Custom className | _string \| Array \| object_ | - |
| max-zoom | Max zoom | _number \| string_ | `3` |
| min-zoom | Min zoom | _number \| string_ | `1/3` |
| closeable | Whether to show close icon | _boolean_ | `false` |
| close-icon | Close icon name | _string_ | `clear` |
| close-icon-position | Close icon position, can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
| transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `bot-fade` |
| overlay-class | Custom overlay class | _string \| Array \| object_ | - |
| overlay-style | Custom overlay style | _object_ | - |
| teleport | Specifies a target element where ImagePreview will be mounted | _string \| Element_ | - |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| close | Emitted when closing ImagePreview | _{ index: number, url: string }_ |
| closed | Emitted when ImagePreview is closed | - |
| change | Emitted when current image changed | _index: number_ |
| scale | Emitted when scaling current image | _{ index: number, scale: number }_ |
| long-press | Emitted when long press current image | _{ index: number }_ |

## Slots
| Name | Description | SlotProps |
| --- | --- | --- |
| index | Custom index | { index: index of current image } |
| cover | Custom content that covers the image preview | - |
| image | Custom image content | { src: current image src } |

## Types
The component exports the following type definitions:

```ts
import type {
  ImagePreviewProps,
  ImagePreviewOptions,
  ImagePreviewInstance,
  ImagePreviewScaleEventParams,
} from '@botim/bot';
```

`ImagePreviewInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { ImagePreviewInstance } from '@botim/bot';

const imagePreviewRef = ref<ImagePreviewInstance>();

imagePreviewRef.value?.swipeTo(1);
```

## Usage Examples
### Basic Usage

```js
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',
]);
```

### Set Start Position

```js
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,
});
```

### Show Close Icon

After setting the `closeable` attribute, the close icon will be displayed in the upper right corner of the pop-up layer, and the icon can be customized through the `close-icon` attribute, and the icon location can be customized by using the `close-icon-position` attribute.

```js
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',
  ],
  closeable: true,
});
```

### Close Event

```js
import { showToast, 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',
  ],
  onClose() {
    showToast('closed');
  },
});
```

### Before Close

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

const instance = showImagePreview({
  images: [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  ],
  beforeClose: () => false,
});

setTimeout(() => {
  instance.close();
}, 2000);
```

### Use ImagePreview Component

```html
<bot-image-preview v-model:show="show" :images="images" @change="onChange">
  <template v-slot:index>Page: {{ index + 1 }}</template>
</bot-image-preview>
```

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

export default {
  setup() {
    const show = ref(false);
    const index = ref(0);
    const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ];
    const onChange = (newIndex) => {
      index.value = newIndex;
    };

    return {
      show,
      index,
      images,
      onChange,
    };
  },
};
```

### Use image slot

When using ImagePreview component, you can custom the image through the `image` slot, such as render a video content.

```html
<bot-image-preview v-model:show="show" :images="images">
  <template #image="{ src }">
    <video style="width: 100%;" controls>
      <source :src="src" />
    </video>
  </template>
</bot-image-preview>
```

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

export default {
  setup() {
    const show = ref(false);
    const images = [
      'https://www.w3school.com.cn/i/movie.ogg',
      'https://www.w3school.com.cn/i/movie.ogg',
      'https://www.w3school.com.cn/i/movie.ogg',
    ];
    return {
      show,
      images,
    };
  },
};
```

---

# Component: IndexBar

## Introduction
Used for indexed sorting display and quick positioning of lists.

## Types
The component exports the following type definitions:

```ts
import type {
  IndexBarProps,
  IndexAnchorProps,
  IndexBarInstance,
} from '@botim/bot';
```

`IndexBarInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { IndexBarInstance } from '@botim/bot';

const indexBarRef = ref<IndexBarInstance>();

indexBarRef.value?.scrollTo('B');
```

## Usage Examples
### Basic Usage

```html
<bot-index-bar>
  <bot-index-anchor index="A" />
  <bot-cell title="Text" />
  <bot-cell title="Text" />
  <bot-cell title="Text" />

  <bot-index-anchor index="B" />
  <bot-cell title="Text" />
  <bot-cell title="Text" />
  <bot-cell title="Text" />

  ...
</bot-index-bar>
```

### Custom Index List

```html
<bot-index-bar :index-list="indexList">
  <bot-index-anchor index="1">Title 1</bot-index-anchor>
  <bot-cell title="Text" />
  <bot-cell title="Text" />
  <bot-cell title="Text" />

  <bot-index-anchor index="2">Title 2</bot-index-anchor>
  <bot-cell title="Text" />
  <bot-cell title="Text" />
  <bot-cell title="Text" />

  ...
</bot-index-bar>
```

```js
export default {
  setup() {
    return {
      indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    };
  },
};
```

---

# Component: Lazyload

## Introduction
When the page needs to load a large amount of content, delay loading the content outside the visible area of the page to make the page load smoother.

## Usage Examples
### Basic Usage

```html
<img v-for="img in imageList" v-lazy="img" />
```

```js
export default {
  setup() {
    return {
      imageList: [
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      ],
    };
  },
};
```

### Lazyload Background Image

Use `v-lazy:background-image` to set background url, and declare the height of the container.

```html
<div v-for="img in imageList" v-lazy:background-image="img" />
```

### Lazyload Component

```js
// set `lazyComponent` option
app.use(Lazyload, {
  lazyComponent: true,
});
```

```html
<lazy-component>
  <img v-for="img in imageList" v-lazy="img" />
</lazy-component>
```

---

# Component: List

## Introduction
A list component to show items and control loading status.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:loading | Whether to show loading info, the `load` event will not be Emitted when loading | _boolean_ | `false` |
| v-model:error | Whether loading is error, the `load` event will be Emitted only when error text clicked | _boolean_ | `false` |
| finished | Whether loading is finished, the `load` event will not be Emitted when finished | _boolean_ | `false` |
| offset | The load event will be Emitted when the distance between the scrollbar and the bottom is less than offset | _number \| string_ | `300` |
| loading-text | Loading text | _string_ | `Loading...` |
| loading-vertical | Loading vertical | _boolean_ | `false` |
| finished-text | Finished text | _string_ | - |
| error-text | Error loaded text | _string_ | - |
| immediate-check | Whether to check loading position immediately after mounted | _boolean_ | `true` |
| disabled | Whether to disable the load event | _boolean_ | `false` |
| direction | Scroll direction, can be set to `up` | _string_ | `down` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| load | Emitted when the distance between the scrollbar and the bottom is less than offset | - |

## Slots
| Name     | Description          |
| -------- | -------------------- |
| default  | List content         |
| loading  | Custom loading tips  |
| finished | Custom finished tips |
| error    | Custom error tips    |

## Theming

## Types
The component exports the following type definitions:

```ts
import type { ListProps, ListInstance, ListDirection } from '@botim/bot';
```

`ListInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { ListInstance } from '@botim/bot';

const listRef = ref<ListInstance>();

listRef.value?.check();
```

## Usage Examples
### Basic Usage

```html
<bot-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="Finished"
  @load="onLoad"
>
  <bot-cell v-for="item in list" :key="item" :title="item" />
</bot-list>
```

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

export default {
  setup() {
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);

    const onLoad = () => {
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };

    return {
      list,
      onLoad,
      loading,
      finished,
    };
  },
};
```

### Error Info

```html
<bot-list
  v-model:loading="loading"
  v-model:error="error"
  error-text="Request failed. Click to reload"
  @load="onLoad"
>
  <bot-cell v-for="item in list" :key="item" :title="item" />
</bot-list>
```

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

export default {
  setup() {
    const list = ref([]);
    const error = ref(false);
    const loading = ref(false);
    const onLoad = () => {
      fetchSomeThing().catch(() => {
        error.value = true;
      });
    };

    return {
      list,
      error,
      onLoad,
      loading,
    };
  },
};
```

### PullRefresh

```html
<bot-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <bot-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="Finished"
    @load="onLoad"
  >
    <bot-cell v-for="item in list" :key="item" :title="item" />
  </bot-list>
</bot-pull-refresh>
```

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

export default {
  setup() {
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);

    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };

    const onRefresh = () => {
      finished.value = false;
      loading.value = true;
      onLoad();
    };

    return {
      list,
      onLoad,
      loading,
      finished,
      onRefresh,
      refreshing,
    };
  },
};
```

---

# Component: Loading

## Introduction
Used to indicate the transition state during loading.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| color | Loading color | _string_ | `#c9c9c9` |
| type | Can be set to `spinner`, `botim`, `botim2`, `dot`, `progress` | _string_ | `circular` |
| is-dark | Whether to use dark mode, only takes effect when type is `botim` | _boolean_ | `false` |
| size | Icon size | _number \| string_ | `30px` |
| text-size | Text font size | _number \| string_ | `14px` |
| text-color | Text color | _string_ | `#c9c9c9` |
| vertical | Whether to arrange icons and text content vertically | _boolean_ | `false` |
| path-color | When of type `progress`, Trajectory color | _string_ | `#f4f6f9` |
| stroke-width | When of type `progress`, Stroke width | _number \| string_ | `8` |
| stroke-linecap | When of type `progress`, can be set to `square` `butt` | _string_ | `round` |

## Slots
| Name    | Description                                    |
| ------- | ---------------------------------------------- |
| default | Loading text                                   |
| icon    | Custom loading icon                            |
| inside  | When of type `progress`, custom inside content |

## Types
The component exports the following type definitions:

```ts
import type { LoadingType, LoadingProps } from '@botim/bot';
```

## Usage Examples
### Type

```html
<bot-loading />

<bot-loading type="spinner" />

<bot-loading type="botim" />

<bot-loading type="dot" />

<bot-loading type="progress" />
```

### Color

```html
<bot-loading color="red" />

<bot-loading type="spinner" color="red" />

<bot-loading type="progress" color="red" />
```

### Size

```html
<bot-loading size="60" />

<bot-loading type="spinner" size="60" />

<bot-loading type="progress" size="60" />
```

### Text

```html
<bot-loading size="24px">Loading...</bot-loading>
```

### Vertical

```html
<bot-loading size="24px" vertical>Loading...</bot-loading>
```

### Text Color

use `color` or `text-color` to change text color.

```html
<!-- the color of text and icon will be changed -->
<bot-loading color="#0094ff" />

<!-- only change text color -->
<bot-loading text-color="#0094ff" />
```

### Custom Icon

Use `icon` slot to custom icon.

```html
<bot-loading vertical>
  <template #icon>
    <bot-icon :icon="StarLine" size="30" />
  </template>
  Loading...
</bot-loading>
```

### Custom Progress Style

Use `stroke-width` prop to set progress width、 `path-color` prop to set trajectory color and `stroke-linecap` prop to set stroke linecap.

```html
<bot-loading type="progress" size="60" stroke-width="2" />

<bot-loading type="progress" size="60" path-color="#ccc" />

<bot-loading type="progress" size="60" stroke-linecap="square" />
```

The unit of `stroke-width` is not `px`, if you want to know the relationship between `stroke-width` and `px`, you can use the following formula to calculate:

```js
// viewBox size for SVG
const viewBox = 100 + strokeWidth;

// The width of the Circle component, for example: 100px
const circleWidth = 100;

// Final rendered progress bar width (px)
const pxWidth = (strokeWidth * circleWidth) / viewBox;
```

### Custom Progress Inside Content

Use inside slot to custom inside content when of type progress.

```html
<bot-loading type="progress" size="120" stroke-width="4">
  <template #inside>
    <bot-icon :icon="StarLine" size="30" />
  </template>
</bot-loading>

<bot-loading type="progress" size="120" stroke-width="4">
  <template #inside>
    <div style="font-size: 14px;">Loading</div>
  </template>
</bot-loading>
```

---

# Component: Locale

## Introduction
Bot uses Chinese as the default language. If you want to use other languages, please follow the instructions below.

## Usage Examples
### Switch languages

Bot supports multiple languages with the Locale component, and the `Locale.use` method allows you to switch to different languages.

```js
import { Locale } from '@botim/bot';
import enUS from '@botim/bot/es/locale/lang/en-US';

Locale.use('en-US', enUS);
```

### Override default configs

Use `Locale.add` method to modify the default configs.

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

const messages = {
  'en-US': {
    botPicker: {
      confirm: 'Close',
    },
  },
};

Locale.add(messages);
```

### Config files

Current supported languages:

| Language                 | Filename     | Version |
| ------------------------ | ------------ | ------- |
| Bulgarian                | bg-BG        | -       |
| Bangla (Bangladesh)      | bn-BD        | -       |
| Danish                   | da-DK        | -       |
| German                   | de-DE        | -       |
| German (formal)          | de-DE-formal | -       |
| Greek                    | el-GR        | -       |
| English                  | en-US        | -       |
| Esperanto                | eo-EO        | -       |
| Spanish (Spain)          | es-ES        | -       |
| Farsi                    | fa-IR        | -       |
| French                   | fr-FR        | -       |
| Hebrew                   | he-IL        | -       |
| Hindi                    | hi-IN        | -       |
| Indonesian               | id-ID        | -       |
| Icelandic                | is-IS        | -       |
| Italian                  | it-IT        | -       |
| Japanese                 | ja-JP        | -       |
| Khmer                    | km-KH        | -       |
| Korean                   | ko-KR        | -       |
| Lao                      | la-LA        | -       |
| Mongolian                | mm-MN        | -       |
| Norwegian                | nb-NO        | -       |
| Dutch                    | nl-NL        | -       |
| Portuguese (Brazil)      | pt-BR        | -       |
| Romanian                 | ro-RO        | -       |
| Russian                  | ru-RU        | -       |
| Swedish                  | sv-SE        | -       |
| Turkish                  | tr-TR        | -       |
| Thai                     | th-TH        | -       |
| Ukrainian                | uk-UA        | -       |
| Vietnamese               | vi-VN        | -       |
| Chinese                  | zh-CN        | -       |
| Traditional Chinese (HK) | zh-HK        | -       |
| Traditional Chinese (TW) | zh-TW        | -       |

### Get Current Lang

You can get the current language using `useCurrentLang` method.

- **Type:**

```ts
function useCurrentLang(): Ref<string>;
```

- **Example:**

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

const currentLang = useCurrentLang();

console.log(currentLang.value); // --> 'en-US'
```

---

# Component: Lottie

## Introduction
Botim Lottie component is based on [lottie-web](https://github.com/airbnb/lottie-web).

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| width | Lottie width | _string_ | `100%` |
| height | Lottie height | _string_ | `100%` |
| src | Lottie source | _string_ | `undefined` |
| animationData | Lottie animation data | _Record<string, any>_ | `undefined` |
| renderer | Lottie renderer | _RendererType_ | `svg` |
| loop | Lottie loop | _boolean_ | `true` |
| autoPlay | Lottie auto play | _boolean_ | `true` |
| rendererSettings | Lottie renderer settings | _SVGRendererConfig \| CanvasRendererConfig \| HTMLRendererConfig_ | `{}` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| onceComplete | Emitted when the animation is complete | _CustomEvent\<BMCompleteEvent\>_ |
| loopComplete | Emitted when the animation is complete | _CustomEvent\<BMCompleteLoopEvent\>_ |
| dataReady | Emitted when the animation is complete | _CustomEvent\<void\>_ |
| createdStatus | Emitted when the animation is complete | _CustomEvent\<boolean\>_ |

## Types
The component exports the following type definitions:

```ts [Vue]
import type {
  BMCompleteEvent,
  BMCompleteLoopEvent,
  AnimationItem,
  RendererType,
  SVGRendererConfig,
  CanvasRendererConfig,
  HTMLRendererConfig,
  LottieExpose,
  LottieProps,
} from '@botim/bot';
```

## Usage Examples
### Basic

```html [Vue]
<template>
  <bot-lottie :animation-data="LottieDemo" />
</template>

<script setup>
  import LottieDemo from './loader_botim.json';
</script>
```

### Size

```html [Vue]
<template>
  <bot-lottie :animation-data="LottieDemo" height="100px" width="100px" />
  <bot-lottie :animation-data="LottieDemo" height="50px" width="50px" />
</template>

<script setup>
  import LottieDemo from './loader_botim.json';
</script>
```

### Manual Play

```html [Vue]
<template>
  <bot-lottie
    ref="lottieRef"
    src="./loader_botim.json"
    height="100px"
    width="100px"
    :auto-play="false"
  />
  <bot-button @click="startOrStop">
    {{ isPlaying ? 'stop' : 'play' }}
  </bot-button>
</template>

<script setup>
  import { ref } from 'vue';
  import LottieDemo from './loader_botim.json';

  const lottieRef = ref(null);
  const isPlaying = ref(false);

  function startOrStop() {
    if (isPlaying.value) {
      lottieRef.value.stop();
      isPlaying.value = false;
      return;
    }
    lottieRef.value.play();
    isPlaying.value = true;
  }
</script>
```

### Source

```html [Vue]
<template>
  <bot-lottie src="./loader_botim.json" height="50px" width="50px" />
  <bot-lottie :animation-data="LottieDemo" height="50px" width="50px" />
</template>

<script setup>
  import LottieDemo from './loader_botim.json';
</script>
```

---

# Component: NavBar

## Introduction
Provide navigation function for the page, often used at the top of the page.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| title | Title | _string_ | `''` |
| titleAlign | Title Align | _`left \| center \| right`_ | `'center'` |
| weaken | weaken model | _boolean_ | `false` |
| description | Description | _string_ | `''` |
| size | Size of Navbar | `large` | `'normal'` |
| type | Navbar Type | `default` | `'capsule'` |
| left-text | Left Text | _string_ | `''` |
| right-text | Right Text | _string_ | `''` |
| extra-icon | Extra Icon | _Component_ | `''` |
| left-arrow | Whether to show left arrow | _boolean_ | `false` |
| capsule-left-icon | Show left-icon when type is `capsule` | _Component_ | `''` |
| capsule-left-clickable | Whether left-icon is clickable | _boolean_ | `''` |
| border | Whether to show bottom border | _boolean_ | `true` |
| fixed | Whether to fixed top | _boolean_ | `false` |
| placeholder | Whether to generate a placeholder element when fixed | _boolean_ | `false` |
| z-index | Z-index | _number \| string_ | `1` |
| safe-area-inset-top | Whether to enable top safe area adaptation | _boolean_ | `false` |
| closeable | Whether to show close icon | _boolean_ | `true` |
| clickable | Whether to show click feedback when the left or right content is clicked | _boolean_ | `true` |
| extra-clickable | Whether to show click feedback when the extra content is clicked | _boolean_ | `true` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| click-left | Emitted when the left button is clicked | _event: MouseEvent_ |
| click-right | Emitted when the right button is clicked | _event: MouseEvent_ |
| click-extra | Emitted when the right extra button is clicked | _event: MouseEvent_ |
| click-capsule-left | Emitted when the let button is clicked when type is capsule | _event: MouseEvent_ |
| longpress | Emitted when the let button is longpressed when type is capsule | _event: MouseEvent_ |

## Slots
| Name        | Description                     |
| ----------- | ------------------------------- |
| title       | Custom title                    |
| left        | Custom left side content        |
| right       | Custom right side content       |
| extra       | Custom right side extra content |
| description | Custom description              |

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

```html
<bot-nav-bar title="Title" />
```

### Back

```html
<bot-nav-bar
  title="Title"
  left-text="Back"
  left-arrow
  @click-left="onClickLeft"
/>
```

```js
export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};
```

### Right Button

```html
<bot-nav-bar
  title="Title"
  left-text="Back"
  right-text="Button"
  left-arrow
  :closeable="false"
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
```

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

export default {
  setup() {
    const onClickLeft = () => history.back();
    const onClickRight = () => showToast('Button');
    return {
      onClickLeft,
      onClickRight,
    };
  },
};
```

### Extra Content

```html
<bot-nav-bar
  title="Title"
  left-text="Back"
  extra-icon="music"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
  @click-extra="onClickExtra"
/>
```

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

export default {
  setup() {
    const onClickLeft = () => history.back();
    const onClickRight = () => showToast('Button');
    const onClickExtra = () => showToast('Button');
    return {
      onClickLeft,
      onClickRight,
      onClickExtra,
    };
  },
};
```

### Navbar Size

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

```js
import { showToast } from '@botim/bot';
import { MusicSolid } from '@botim/buckit-icons';
export default {
  setup() {
    const onClickLeft = () => history.back();
    const onClickRight = () => showToast('Button');
    return {
      onClickLeft,
      onClickRight,
    };
  },
};
```

### Type Capsule

```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>
```

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

export default {
  setup() {
    const onClickCapsuleLeft = () => showToast('Button');
    const onClickRight = () => showToast('Button');
    return {
      onClickCapsuleLeft,
      onClickRight,
    };
  },
};
```

### Use Slot

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

---

# Component: NoticeBar

## Introduction
Used to display a group of message notifications in a continuons loop.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| mode | Mode, can be set to `closeable` `link` | _string_ | `''` |
| text | Text content | _string_ | `''` |
| type | Component type | _string_ | `'info/success/warning/danger'` |
| title | Title | _string_ | `''` |
| color | Customized text color | _string_ | - |
| icon-color | Customized left icon color, only supported for default type | _string_ | - |
| background | Background color, if you use dark-mode, use two values to differ | _string_ | `#fffbe8` |
| show-icon | If a type icon is displayed, types are 'info/success/warning/danger' | _boolean_ | `true` |
| left-icon | Left icon | _component_ | - |
| delay | Animation delay (s) | _number \| string_ | `1` |
| speed | Scroll speed (px/s) | _number \| string_ | `60` |
| scrollable | Whether to scroll content | _boolean_ | - |
| wrapable | Whether to enable text wrap | _boolean_ | `true` |

## Events
| Event  | Description                        | Arguments           |
| ------ | ---------------------------------- | ------------------- |
| click  | Emitted when NoticeBar is clicked  | _event: MouseEvent_ |
| close  | Emitted when NoticeBar is closed   | _event: MouseEvent_ |
| replay | Emitted when NoticeBar is replayed | -                   |

## Slots
| Name       | Description         |
| ---------- | ------------------- |
| default    | Notice text content |
| left-icon  | Custom left icon    |
| right-icon | Custom right icon   |

## Theming

## Types
The component exports the following type definitions:

```ts
import type {
  NoticeBarMode,
  NoticeBarProps,
  NoticeBarInstance,
} from '@botim/bot';
```

`NoticeBarInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { NoticeBarInstance } from '@botim/bot';

const noticeBarRef = ref<NoticeBarInstance>();

noticeBarRef.value?.reset();
```

## Usage Examples
### Basic Usage

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

### Scrollable

```html
<!-- Enable scroll when text is short -->
<bot-notice-bar scrollable text="Short Content" />

<!-- Disable scroll when text is long -->
<bot-notice-bar :scrollable="false" title="标题1" text="文字说明" />
```

### Mode

```html
<bot-notice-bar mode="closeable">Short Content</bot-notice-bar>

<bot-notice-bar mode="link">Short Content</bot-notice-bar>
```

### Custom Style

```html
<bot-notice-bar
  color="#1989fa"
  background="#ecf9ff"
  :left-icon="StarLine"
  icon-color="#ec5447"
>
  Short Content
</bot-notice-bar>
```

### Vertical Scroll

```html
<bot-notice-bar :left-icon="StarLine" :scrollable="false">
  <bot-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :touchable="false"
    :show-indicators="false"
  >
    <bot-swipe-item>Content 1</bot-swipe-item>
    <bot-swipe-item>Content 2</bot-swipe-item>
    <bot-swipe-item>Content 3</bot-swipe-item>
  </bot-swipe>
</bot-notice-bar>

<style>
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
</style>
```

### Center

```html
<bot-notice-bar
  color="#1989fa"
  center
  text="Text"
  background="#ecf9ff"
  :left-icon="StarLine"
  icon-color="#ec5447"
/>
```

---

# Component: NumberKeyboard

## Introduction
The NumberKeyboard component can be used with [PasswordInput](#/en-US/password-input) component or custom input box components.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Current value | _string_ | - |
| show | Whether to show keyboard | _boolean_ | - |
| title | Keyboard title | _string_ | - |
| theme | Keyboard theme, can be set to `custom` | _string_ | `default` |
| maxlength | Value maxlength | _number \| string_ | `Infinity` |
| transition | Whether to show transition animation | _boolean_ | `true` |
| z-index | Keyboard z-index | _number \| string_ | `100` |
| extra-key | Content of bottom left key | _string \| string[]_ | `''` |
| close-button-text | Close button text | _string_ | - |
| delete-button-text | Delete button text | _string_ | Delete Icon |
| close-button-loading | Whether to show loading close button in custom theme | _boolean_ | `false` |
| show-delete-key | Whether to show delete button | _boolean_ | `true` |
| blur-on-close | Whether to emit blur event when clicking close button | _boolean_ | `true` |
| hide-on-click-outside | Whether to hide keyboard when outside is clicked | _boolean_ | `true` |
| teleport | Specifies a target element where NumberKeyboard will be mounted | _string \| Element_ | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
| random-key-order | Whether to shuffle the order of keys | _boolean_ | `false` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| input | Emitted when a key is pressed | _key: string_ |
| delete | Emitted when the delete key is pressed | - |
| close | Emitted when the close button is clicked | - |
| blur | Emitted when the close button is clicked or the keyboard is blurred | - |
| show | Emitted when keyboard is fully displayed | - |
| hide | Emitted when keyboard is fully hidden | - |

## Slots
| Name       | Description               |
| ---------- | ------------------------- |
| delete     | Custom delete key content |
| extra-key  | Custom extra key content  |
| title-left | Custom title left content |

## Types
The component exports the following type definitions:

```ts
import type { NumberKeyboardProps, NumberKeyboardTheme } from 'botim/bot';
```

## Usage Examples
### Default Keyboard

```html
<bot-cell @touchstart.stop="show = true">Show Keyboard</bot-cell>
<bot-number-keyboard
  :show="show"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>
```

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

export default {
  setup() {
    const show = ref(true);
    const onInput = (value) => showToast(value);
    const onDelete = () => showToast('delete');

    return {
      show,
      onInput,
      onDelete,
    };
  },
};
```

### Keyboard With Sidebar

```html
<bot-number-keyboard
  :show="show"
  theme="custom"
  extra-key="."
  close-button-text="Close"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>
```

### IdNumber Keyboard

Use `extra-key` prop to set the content of bottom left button.

```html
<bot-cell plain type="primary" @touchstart.stop="show = true">
  Show IdNumber Keyboard
</bot-cell>

<bot-number-keyboard
  :show="show"
  extra-key="X"
  close-button-text="Close"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>
```

### Keyboard With Title

Use `title` prop to set keyboard title.

```html
<bot-cell plain type="primary" @touchstart.stop="show = true">
  Show Keyboard With Title
</bot-cell>
<bot-number-keyboard
  :show="show"
  title="Keyboard Title"
  extra-key="."
  close-button-text="Close"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>
```

### Multiple ExtraKey

```html
<bot-cell plain type="primary" @touchstart.stop="show = true">
  Show Keyboard With Multiple ExtraKey
</bot-cell>
<bot-number-keyboard
  :show="show"
  theme="custom"
  :extra-key="['00', '.']"
  close-button-text="Close"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>
```

### Random Key Order

Use `random-key-order` prop to shuffle the order of keys.

```html
<bot-cell @touchstart.stop="show = true">
  Show Keyboard With Random Key Order
</bot-cell>
<bot-number-keyboard
  :show="show"
  random-key-order
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>
```

### Bind Value

```html
<bot-field v-model="value" readonly clickable @touchstart.stop="show = true" />
<bot-number-keyboard
  v-model="value"
  :show="show"
  :maxlength="6"
  @blur="show = false"
/>
```

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

export default {
  setup() {
    const show = ref(true);
    const value = ref('');
    return {
      show,
      value,
    };
  },
};
```

---

# Component: Overlay

## Introduction
Create a mask layer to emphasize specific page elements and prevent users from performing other operations.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| show | Whether to show overlay | _boolean_ | `false` |
| z-index | z-index | _number \| string_ | `1` |
| duration | Animation duration | _number \| string_ | `0.3` |
| class-name | ClassName | _string_ | - |
| custom-class | Custom style | _object_ | - |
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |

## Events
| Event | Description                       | Arguments           |
| ----- | --------------------------------- | ------------------- |
| click | Emitted when component is clicked | _event: MouseEvent_ |

## Slots
| Name    | Description  |
| ------- | ------------ |
| default | Default slot |

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

```html
<bot-button type="primary" text="Show Overlay" @click="show = true" />
<bot-overlay :show="show" @click="show = false" />
```

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

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

### Embedded Content

```html
<bot-overlay :show="show" @click="show = false">
  <div class="wrapper" @click.stop>
    <div class="block" />
  </div>
</bot-overlay>

<style>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
</style>
```

---

# Component: Pagination

## Introduction
When the amount of data is too much, use pagination to separate the data, and load only one page at a time.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Current page number | _number_ | - |
| mode | Mode, can be set to `simple` `multi` | _string_ | `multi` |
| prev-text | Previous text | _string_ | `Previous` |
| next-text | Next text | _string_ | `Next` |
| total-items | Total items | _number \| string_ | `0` |
| items-per-page | Item number per page | _number \| string_ | `10` |
| page-count | The total number of pages, if not set, will be calculated based on `total-items` and `items-per-page` | _number \| string_ | `-` |
| show-page-size | Count of page size to show | _number \| string_ | `5` |
| force-ellipses | Whether to show ellipses | _boolean_ | `false` |

## Events
| Event  | Description                       | Arguments |
| ------ | --------------------------------- | --------- |
| change | Emitted when current page changed | -         |

## Slots
| Name | Description | SlotProps |
| --- | --- | --- |
| page | Custom pagination item | _{ number: number, text: string, active: boolean }_ |
| prev-text | Custom prev text | - |
| next-text | Custom next text | - |

## Types
The component exports the following type definitions:

```ts
import type { PaginationMode, PaginationProps } from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
```

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

export default {
  setup() {
    const currentPage = ref(1);
    return { currentPage };
  },
};
```

### Simple mode

```html
<bot-pagination v-model="currentPage" :page-count="12" mode="simple" />
```

### Show ellipses

```html
<bot-pagination
  v-model="currentPage"
  :total-items="125"
  :show-page-size="3"
  force-ellipses
/>
```

### Custom Button

```html
<bot-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
  <template #prev-text>
    <bot-icon :icon="ChevronLeftLine" />
  </template>
  <template #next-text>
    <bot-icon :icon="ChevronRightLine" />
  </template>
  <template #page="{ text }">{{ text }}</template>
</bot-pagination>
```

---

# Component: PasswordInput

## Introduction
The PasswordInput component is usually used with [NumberKeyboard](#/en-US/number-keyboard) Component.

## Props
| Attribute  | Description                    | Type               | Default |
| ---------- | ------------------------------ | ------------------ | ------- |
| value      | Password value                 | _string_           | `''`    |
| info       | Bottom info                    | _string_           | -       |
| error-info | Bottom error info              | _string_           | -       |
| length     | Maxlength of password          | _number \| string_ | `6`     |
| mask       | Whether to mask value          | _boolean_          | `true`  |
| focused    | Whether to show focused cursor | _boolean_          | `false` |

## Events
| Event | Description                   | Arguments |
| ----- | ----------------------------- | --------- |
| focus | Emitted when input is focused | -         |

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

```html
<bot-password-input
  :value="value"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<bot-number-keyboard
  v-model="value"
  :show="showKeyboard"
  @blur="showKeyboard = false"
/>
```

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

export default {
  setup() {
    const value = ref('123');
    const showKeyboard = ref(true);

    return {
      value,
      showKeyboard,
    };
  },
};
```

### Custom Length

```html
<bot-password-input
  :value="value"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
```

### Without Mask

```html
<bot-password-input
  :value="value"
  :mask="false"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
```

### Hint Error

Use `info` to set info message, use `error-info` prop to set error message.

```html
<bot-password-input
  :value="value"
  info="Some tips"
  :error-info="errorInfo"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<bot-number-keyboard
  v-model="value"
  :show="showKeyboard"
  @blur="showKeyboard = false"
/>
```

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

export default {
  setup() {
    const value = ref('123');
    const errorInfo = ref('');
    const showKeyboard = ref(true);

    watch(value, (newVal) => {
      if (newVal.length === 6 && newVal !== '123456') {
        errorInfo.value = 'Password Mistake';
      } else {
        errorInfo.value = '';
      }
    });

    return {
      value,
      errorInfo,
      showKeyboard,
    };
  },
};
```

---

# Component: Picker

## Introduction
The picker component is usually used with [Popup](#/en-US/popup) Component.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| columns | Columns data | _PickerOption[] \| PickerOption[][]_ | `[]` |
| columns-field-names | custom columns field | _object_ | `{ text: 'text', value: 'value', children: 'children' }` |
| closeable | Whether to show close icon | _boolean_ | `true` |
| confirm-button-text | Text of confirm button | _string_ | `Confirm` |
| cancel-button-text | Text of cancel button | _string_ | `Cancel` |
| toolbar-position | Toolbar position, cat be set to `bottom` | _string_ | `top` |
| loading | Whether to show loading prompt | _boolean_ | `false` |
| show-toolbar | Whether to show toolbar | _boolean_ | `true` |
| allow-html | Whether to allow HTML in option text | _boolean_ | `false` |
| option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |
| visible-option-num | Count of visible columns | _number \| string_ | `6` |
| swipe-duration | Duration of the momentum animation, unit `ms` | _number \| string_ | `1000` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| confirm | Emitted when the confirm button is clicked | _{ selectedValues, selectedOptions, selectedIndexes }_ |
| cancel | Emitted when the cancel button is clicked | _{ selectedValues, selectedOptions, selectedIndexes }_ |
| change | Emitted when current option is changed | _{ selectedValues, selectedOptions,selectedIndexes, columnIndex }_ |
| click-option | Emitted when an option is clicked | _{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex }_ |

## Slots
| Name | Description | SlotProps |
| --- | --- | --- |
| toolbar `3.1.2` | Custom toolbar content | - |
| confirm | Custom confirm button text | - |
| cancel | Custom cancel button text | - |
| option | Custom option content | _option: PickerOption, index: number_ |
| columns-top | Custom content above columns | - |
| columns-bottom | Custom content below columns | - |

## Types
The component exports the following type definitions:

```ts
import type {
  PickerProps,
  PickerColumn,
  PickerOption,
  PickerInstance,
  PickerFieldNames,
  PickerToolbarPosition,
  PickerCancelEventParams,
  PickerChangeEventParams,
  PickerConfirmEventParams,
} from '@botim/bot';
```

`PickerInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { PickerInstance } from '@botim/bot';

const pickerRef = ref<PickerInstance>();

pickerRef.value?.confirm();
```

## Usage Examples
### Basic Usage

```html
<bot-picker
  :columns="columns"
  @confirm="onConfirm"
  @cancel="onCancel"
  @change="onChange"
/>
```

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

export default {
  setup() {
    const columns = [
      { text: 'Delaware', value: 'Delaware' },
      { text: 'Florida', value: 'Florida' },
      { text: 'Wenzhou', value: 'Wenzhou' },
      { text: 'Indiana', value: 'Indiana' },
      { text: 'Maine', value: 'Maine' },
    ];
    const onConfirm = ({ selectedValues }) => {
      showToast(`Value: ${selectedValues.join(',')}`);
    };
    const onChange = ({ selectedValues }) => {
      showToast(`Value: ${selectedValues.join(',')}`);
    };
    const onCancel = () => showToast('Cancel');

    return {
      columns,
      onChange,
      onCancel,
      onConfirm,
    };
  },
};
```

### With Popup

```html
<bot-field
  v-model="fieldValue"
  is-link
  readonly
  label="City"
  placeholder="Choose City"
  @click="showPicker = true"
/>
<bot-popup v-model:show="showPicker" round position="bottom">
  <bot-picker
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</bot-popup>
```

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

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

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

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

### v-model

Using `v-model` to bind selected values.

```html
<bot-picker v-model="selectedValues" :columns="columns" />
```

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

export default {
  setup() {
    const columns = [
      { text: 'Delaware', value: 'Delaware' },
      { text: 'Florida', value: 'Florida' },
      { text: 'Wenzhou', value: 'Wenzhou' },
      { text: 'Indiana', value: 'Indiana' },
      { text: 'Maine', value: 'Maine' },
    ];
    const selectedValues = ref(['Wenzhou']);

    return {
      columns,
      selectedValues,
    };
  },
};
```

### Multiple Columns

```html
<bot-picker :columns="columns" />
```

```js
export default {
  setup() {
    const columns = [
      [
        { text: 'Monday', value: 'Monday' },
        { text: 'Tuesday', value: 'Tuesday' },
        { text: 'Wednesday', value: 'Wednesday' },
        { text: 'Thursday', value: 'Thursday' },
        { text: 'Friday', value: 'Friday' },
      ],
      [
        { text: 'Morning', value: 'Morning' },
        { text: 'Afternoon', value: 'Afternoon' },
        { text: 'Evening', value: 'Evening' },
      ],
    ];

    return { columns };
  },
};
```

### Cascade

```html
<bot-picker :columns="columns" />
```

```js
export default {
  setup() {
    const columns = [
      {
        text: 'Zhejiang',
        value: 'Zhejiang',
        children: [
          {
            text: 'Hangzhou',
            value: 'Hangzhou',
            children: [
              { text: 'Xihu', value: 'Xihu' },
              { text: 'Yuhang', value: 'Yuhang' },
            ],
          },
          {
            text: 'Wenzhou',
            value: 'Wenzhou',
            children: [
              { text: 'Lucheng', value: 'Lucheng' },
              { text: 'Ouhai', value: 'Ouhai' },
            ],
          },
        ],
      },
      {
        text: 'Fujian',
        value: 'Fujian',
        children: [
          {
            text: 'Fuzhou',
            value: 'Fuzhou',
            children: [
              { text: 'Gulou', value: 'Gulou' },
              { text: 'Taijiang', value: 'Taijiang' },
            ],
          },
          {
            text: 'Xiamen',
            value: 'Xiamen',
            children: [
              { text: 'Siming', value: 'Siming' },
              { text: 'Haicang', value: 'Haicang' },
            ],
          },
        ],
      },
    ];

    return { columns };
  },
};
```

### Disable option

```html
<bot-picker :columns="columns" />
```

```js
export default {
  setup() {
    const columns = [
      { text: 'Delaware', value: 'Delaware', disabled: true },
      { text: 'Florida', value: 'Florida' },
      { text: 'Wenzhou', value: 'Wenzhou' },
    ];
    return { columns };
  },
};
```

### Loading

When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt.

```html
<bot-picker :columns="columns" :loading="loading" />
```

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

export default {
  setup() {
    const columns = ref([]);
    const loading = ref(true);

    setTimeout(() => {
      columns.value = [{ text: 'Option', value: 'option' }];
      loading.value = false;
    }, 1000);

    return { columns, loading };
  },
};
```

### Custom Columns Field

```html
<bot-picker :columns="columns" :columns-field-names="customFieldName" />
```

```js
export default {
  setup() {
    const columns = [
      {
        cityName: 'Zhejiang',
        cities: [
          {
            cityName: 'Hangzhou',
            cities: [{ cityName: 'Xihu' }, { cityName: 'Yuhang' }],
          },
          {
            cityName: 'Wenzhou',
            cities: [{ cityName: 'Lucheng' }, { cityName: 'Ouhai' }],
          },
        ],
      },
      {
        cityName: 'Fujian',
        cities: [
          {
            cityName: 'Fuzhou',
            cities: [{ cityName: 'Gulou' }, { cityName: 'Taijiang' }],
          },
          {
            cityName: 'Xiamen',
            cities: [{ cityName: 'Siming' }, { cityName: 'Haicang' }],
          },
        ],
      },
    ];

    const customFieldName = {
      text: 'cityName',
      value: 'cityName',
      children: 'cities',
    };

    return {
      columns,
      customFieldName,
    };
  },
};
```

---

# Component: PickerGroup

## Introduction
Used to combine multiple Picker components, allow users to select multiple value.

The following components can be placed inside PickerGroup:

- [Picker](#/en-US/picker)
- [Area](#/en-US/area)
- [DatePicker](#/en-US/date-picker)
- [TimePicker](#/en-US/time-picker)
- Other custom components based on Picker component

## Props
| Attribute           | Description                | Type       | Default   |
| ------------------- | -------------------------- | ---------- | --------- |
| tabs                | Titles of tabs             | _string[]_ | `[]`      |
| closeable           | Whether to show close icon | _boolean_  | `true`    |
| confirm-button-text | Text of confirm button     | _string_   | `Confirm` |

## Slots
| Name    | Description                | SlotProps |
| ------- | -------------------------- | --------- |
| toolbar | Custom toolbar content     | -         |
| title   | Custom title               | -         |
| confirm | Custom confirm button text | -         |
| cancel  | Custom cancel button text  | -         |

## Types
The component exports the following type definitions:

```ts
import type { DatePickerProps, DatePickerColumnType } from '@botim/bot';
```

## 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,
    };
  },
};
```

### Select Time Range

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

```html
<bot-picker-group
  title="Title"
  :tabs="['Start Time', 'End Time']"
  @confirm="onConfirm"
  @cancel="onCancel"
>
  <bot-time-picker v-model="startTime" />
  <bot-time-picker v-model="endTime" />
</bot-picker-group>
```

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

export default {
  setup() {
    const startTime = ref(['12', '00']);
    const endTime = ref(['12', '00']);

    const onConfirm = () => {
      showToast(`${startTime.value.join(':')} ${endTime.value.join(':')}`);
    };
    const onCancel = () => {
      showToast('cancel');
    };

    return {
      endTime,
      startTime,
    };
  },
};
```

---

# Component: Popover

## Introduction
Used to display some content on top of another.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:show | Whether to show Popover | _boolean_ | `false` |
| actions | Actions | _PopoverAction[]_ | `[]` |
| placement | Placement | _PopoverPlacement_ | `bottom` |
| theme | Theme, can be set to `dark` | _PopoverTheme_ | `light` |
| trigger | Trigger mode, can be set to `manual` | _PopoverTrigger_ | `click` |
| duration | Transition duration, unit second | _number \| string_ | `0.3` |
| offset | Distance to reference | _[number, number]_ | `[0, 8]` |
| overlay | Whether to show overlay | _boolean_ | `false` |
| overlay-class | Custom overlay class | _string \| Array \| object_ | - |
| overlay-style | Custom overlay style | _object_ | - |
| show-arrow | Whether to show arrow | _boolean_ | `true` |
| close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
| close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` |
| close-on-click-overlay | Whether to close when clicking overlay | _boolean_ | `true` |
| teleport | Specifies a target element where Popover will be mounted | _string \| Element_ | `body` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| select | Emitted when an action is clicked | _action: PopoverAction, index: number_ |
| open | Emitted when opening Popover | - |
| close | Emitted when closing Popover | - |
| opened | Emitted when Popover is opened | - |
| closed | Emitted when Popover is closed | - |
| click-overlay | Emitted when overlay is clicked | _event: MouseEvent_ |

## Slots
| Name | Description | SlotProps |
| --- | --- | --- |
| default | Custom content | - |
| reference | Reference Element | - |
| action | Custom the content of option | _{ action: PopoverAction, index: number }_ |

## Types
The component exports the following type definitions:

```ts
import type {
  PopoverProps,
  PopoverTheme,
  PopoverAction,
  PopoverTrigger,
  PopoverPlacement,
} from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
  <template #reference>
    <bot-button type="primary">Light Theme</bot-button>
  </template>
</bot-popover>
```

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

export default {
  setup() {
    const showPopover = ref(false);
    const actions = [
      { text: 'Option 1' },
      { text: 'Option 2' },
      { text: 'Option 3' },
    ];
    const onSelect = (action) => showToast(action.text);

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

### Dark theme

Using the `theme` prop to change the style of Popover.

```html
<bot-popover v-model:show="showPopover" theme="dark" :actions="actions">
  <template #reference>
    <bot-button type="primary">Dark Theme</bot-button>
  </template>
</bot-popover>
```

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

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

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

### Placement

```html
<bot-popover placement="top" />
```

`placement` supports the following values:

```bash
top           # Top middle
top-start     # Top left
top-end       # Top right
left          # Left middle
left-start    # Left top
left-end      # Left bottom
right         # Right middle
right-start   # Right top
right-end     # Right bottom
bottom        # Bottom middle
bottom-start  # Bottom left
bottom-end    # Bottom right
```

### Show Icon

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

```js
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,
    };
  },
};
```

### Disable Action

Using the `disabled` option to disable an action.

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

```js
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,
    };
  },
};
```

### Custom Content

```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>
```

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

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

### Uncontrolled

You can use Popover as a controlled or uncontrolled component:

- When binding `v-model:show`, Popover is a controlled component, and the display of the component is completely controlled by the value of `v-model:show`.
- When `v-model:show` is not used, Popover is an uncontrolled component. You can pass in a default value through the `show` prop, and the display is controlled by the component itself.

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

```js
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,
    };
  },
};
```

---

# Component: Popup

## Introduction
Used to display pop-up windows, information prompts, etc., and supports multiple pop-up layers to display.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:show | Whether to show popup | _boolean_ | `false` |
| title | Title | _string_ | - |
| title-align | Title align, can be set to `center` `right` | _string_ | `left` |
| overlay | Whether to show overlay | _boolean_ | `true` |
| position | Can be set to `top` `bottom` `right` `left` | _string_ | `center` |
| overlay-class | Custom overlay class | _string \| Array \| object_ | - |
| overlay-style | Custom overlay style | _object_ | - |
| duration | Transition duration, unit second, 0.2s for half screen popup, and .3s for more than half screen popup | _number \| string_ | `0.2` |
| z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` |
| round | Whether to show round corner | _boolean_ | `false` |
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
| close-on-popstate | Whether to close when popstate | _boolean_ | `false` |
| close-on-click-overlay | Whether to close when overlay is clicked | _boolean_ | `true` |
| closeable | Whether to show close icon | _boolean_ | `false` |
| close-icon | Close icon | _Component_ | `CloseTwoTone` |
| close-icon-position | Close Icon Position, can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
| before-close | Callback function before close | _(action: string) => boolean \| Promise\<boolean\>_ | - |
| icon-prefix | Icon className prefix | _string_ | `bot-icon` |
| custom-style | Custom popup style | _object_ | - |
| transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
| transition-appear | Whether to apply transition on initial render | _boolean_ | `false` |
| teleport | Specifies a target element where Popup will be mounted | _string \| Element_ | - |
| safe-area-inset-top | Whether to enable top safe area adaptation | _boolean_ | `false` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `false` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| click | Emitted when Popup is clicked | _event: MouseEvent_ |
| click-overlay | Emitted when overlay is clicked | _event: MouseEvent_ |
| click-close-icon | Emitted when close icon is clicked | _event: MouseEvent_ |
| open | Emitted immediately when Popup is opened | - |
| close | Emitted immediately when Popup is closed | - |
| opened | Emitted when Popup is opened and the animation ends | - |
| closed | Emitted when Popup is closed and the animation ends | - |

## Slots
| Name            | Description              |
| --------------- | ------------------------ |
| default         | Content of Popup         |
| overlay-content | Content of Popup overlay |

## Types
The component exports the following type definitions:

```ts
import type {
  PopupProps,
  PopupPosition,
  PopupInstance,
  PopupTitleAlign,
  PopupCloseIconPosition,
} from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-cell title="Show Popup" is-link @click="showPopup" />
<bot-popup v-model:show="show" :style="{ padding: '64px' }">Content</bot-popup>
```

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

export default {
  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    return {
      show,
      showPopup,
    };
  },
};
```

### Position

Use `position` prop to set Popup display position.

The default position is `center`, it can be set to `top`, `bottom`, `left`, `right`.

- When the position is `top` or `bottom`, the default width is consistent with the screen width, and the height of the Popup depends on the height of the content.
- When the position is `left` or `right` side, the width and height are not set by default, and the width and height of the popup depend on the width and height of the content.

```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%' }"
/>
```

### Close Icon

```html
<bot-popup
  v-model:show="show"
  closeable
  position="bottom"
  :style="{ height: '30%' }"
/>
<!-- Custom Icon -->
<bot-popup
  v-model:show="show"
  closeable
  :close-icon="CheckLine"
  position="bottom"
  :style="{ height: '30%' }"
/>
<!-- Icon Position -->
<bot-popup
  v-model:show="show"
  closeable
  close-icon-position="top-left"
  position="bottom"
  :style="{ height: '30%' }"
/>
```

### Title

Setting the `title` prop to displayed the title, and the align of the `title` can be set using the `title-align` prop.

```html
<bot-popup
  v-model:show="show"
  title="Test"
  position="bottom"
  :style="{ height: '30%' }"
/>

<bot-popup
  v-model:show="show"
  title="Test"
  title-align="right"
  closeable
  close-icon-position="top-left"
  position="bottom"
  :style="{ height: '30%' }"
/>
```

### Round Corner

After setting the `round` prop, the Popup will add different rounded corner styles according to the position.

```html
<!-- Round Popup (center) -->
<bot-popup v-model:show="showCenter" round :style="{ padding: '64px' }" />

<!-- Round Popup (bottom) -->
<bot-popup
  v-model:show="showBottom"
  round
  position="bottom"
  :style="{ height: '30%' }"
/>
```

### Listen To Click Events

Popup supports following events:

- `click`: Emitted when Popup is clicked.
- `click-overlay`: Emitted when overlay is clicked.
- `click-close-icon`: Emitted when close icon is clicked.

```html
<bot-cell title="Listen Click Events" is-link @click="show = true" />
<bot-popup
  v-model:show="show"
  position="bottom"
  :style="{ height: '30%' }"
  closeable
  @click-overlay="onClickOverlay"
  @click-close-icon="onClickCloseIcon"
/>
```

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

export default {
  setup() {
    const show = ref(false);
    const onClickOverlay = () => {
      showToast('click-overlay');
    };
    const onClickCloseIcon = () => {
      showToast('click-close-icon');
    };
    return {
      show,
      onClickOverlay,
      onClickCloseIcon,
    };
  },
};
```

### Listen to Display Events

When the Popup is opened or closed, the following events will be emitted:

- `open`: Emitted immediately when the Popup is opened.
- `opened`: Emitted when the Popup is opened and the animation ends.
- `close`: Emitted immediately when the Popup is closed.
- `closed`: Emitted when the Popup is closed and the animation ends.

```html
<bot-cell title="Listen to display events" is-link @click="show = true" />
<bot-popup
  v-model:show="show"
  position="bottom"
  :style="{ height: '30%' }"
  @open="showToast('open')"
  @opened="showToast('opened')"
  @close="showToast('close')"
  @closed="showToast('closed')"
/>
```

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

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

### Get Container

Use `teleport` prop to specify mount location.

```html
<!-- teleport to body -->
<bot-popup v-model:show="show" teleport="body" />

<!-- teleport to #app -->
<bot-popup v-model:show="show" teleport="#app" />
```

---

# Component: Progress

## Introduction
Used to show the current progress of the operation.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| percentage | Percentage | _number \| string_ | `0` |
| dotted | Dotted Model | _boolean_ | `false` |
| only-dotted | Only Dotted Model | _boolean_ | `false` |
| stroke-width | Stroke width | _number \| string_ | `4px` |
| color | Color | _string_ | `#1989fa` |
| track-color | Track color | _string_ | `#e5e5e5` |
| pivot-text | Pivot text | _string_ | percentage |
| pivot-color | Pivot text background color | _string_ | inherit progress color |
| text-color | Pivot text color | _string_ | `white` |
| inactive | Whether to be gray | _boolean_ | `false` |
| show-pivot | Whether to show text | _boolean_ | `true` |

## Types
The component exports the following type definitions:

```ts
import type { ProgressProps, ProgressInstance } from '@botim/bot';
```

`ProgressInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { ProgressInstance } from '@botim/bot';

const progressRef = ref<ProgressInstance>();

progressRef.value?.resize();
```

## Usage Examples
### Basic Usage

Use `percentage` prop to set current progress.

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

### Stroke Width

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

### Inactive

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

### Custom Style

Use `pivot-text` to custom text, use `color` to custom bar color.

```html
<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)"
/>
```

---

# Component: PullRefresh

## Introduction
Used to provide interactive operations for pull-down refresh.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Loading status | _boolean_ | - |
| pulling-text | Text to show when pulling | _string_ | `Pull to refresh...` |
| loosing-text | Text to show when loosing | _string_ | `Loose to refresh...` |
| loading-text | Text to show when loading | _string_ | `Loading...` |
| success-text | Text to show when loading success | _string_ | - |
| success-duration | Success text display duration(ms) | _number \| string_ | `500` |
| animation-duration | Animation duration | _number \| string_ | `300` |
| head-height | Height of head | _number \| string_ | `50` |
| pull-distance | The distance to trigger the pull refresh | _number \| string_ | same as `head-height` |
| disabled | Whether to disable pull refresh | _boolean_ | `false` |

## Events
| Event | Description | Parameters |
| --- | --- | --- |
| refresh | Emitted after pulling refresh | - |
| change | Emitted when draging or status changed | _{ status: string, distance: number }_ |

## Slots
| Name    | Description                           | SlotProps              |
| ------- | ------------------------------------- | ---------------------- |
| default | Default slot                          | -                      |
| normal  | Content of head when at normal status | -                      |
| pulling | Content of head when at pulling       | _{ distance: number }_ |
| loosing | Content of head when at loosing       | _{ distance: number }_ |
| loading | Content of head when at loading       | _{ distance: number }_ |
| success | Content of head when succeed          | -                      |

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

The `refresh` event will be Emitted when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event.

```html
<bot-pull-refresh v-model="loading" @refresh="onRefresh">
  <p>Refresh Count: {{ count }}</p>
</bot-pull-refresh>
```

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

export default {
  setup() {
    const count = ref(0);
    const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        showToast('Refresh Success');
        loading.value = false;
        count.value++;
      }, 1000);
    };

    return {
      count,
      loading,
      onRefresh,
    };
  },
};
```

### Success Tip

Use `success-text` to set the success prompt after the refresh is successful

```html
<bot-pull-refresh
  v-model="isLoading"
  success-text="Refresh success"
  @refresh="onRefresh"
>
  <p>Refresh Count: {{ count }}</p>
</bot-pull-refresh>
```

### Custom Tips

Use slots to custom tips.

```html
<bot-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
  <template #pulling="props">
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
      :style="{ transform: `scale(${props.distance / 80})` }"
    />
  </template>

  <template #loosing>
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
    />
  </template>

  <template #loading>
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"
    />
  </template>
  <p>Refresh Count: {{ count }}</p>
</bot-pull-refresh>

<style>
  .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
</style>
```

---

# Component: Radio

## Introduction
Single selection among multiple options.

## Types
The component exports the following type definitions:

```ts
import type {
  RadioProps,
  RadioGroupProps,
  RadioButtonSize,
  RadioLabelPosition,
  RadioGroupDirection,
} from '@botim/bot';
```

## Usage Examples
### Basic Usage

Use `v-model` to bind the name of checked radio.

```html
<bot-radio-group v-model="checked">
  <bot-radio name="1">Radio 1</bot-radio>
  <bot-radio name="2">Radio 2</bot-radio>
</bot-radio-group>
```

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

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

### Horizontal

```html
<bot-radio-group v-model="checked" direction="horizontal">
  <bot-radio name="1">Radio 1</bot-radio>
  <bot-radio name="2">Radio 2</bot-radio>
</bot-radio-group>
```

### Disabled

```html
<bot-radio-group v-model="checked" disabled>
  <bot-radio name="1">Radio 1</bot-radio>
  <bot-radio name="2">Radio 2</bot-radio>
</bot-radio-group>
```

### BotRadioButton

Set button styles with `bot-radio-button`, and set whether the button is a plain button with `plain` prop.

```html
<bot-radio-group v-model="checked">
  <bot-radio-button name="1">Radio 1</bot-radio-button>
  <bot-radio-button name="2">Radio 2</bot-radio-button>
</bot-radio-group>

<bot-radio-group v-model="checked">
  <bot-radio-button :plain="false" name="1">Radio 1</bot-radio-button>
  <bot-radio-button :plain="false" name="2">Radio 2</bot-radio-button>
</bot-radio-group>
```

### RadioButton Size

Can be set to `large`、`normal`、`small`, default to `normal`。

```html
<bot-radio-group v-model="checked" direction="horizontal">
  <bot-radio-button name="1" :plain="false" size="large">
    Large 1
  </bot-radio-button>
  <bot-radio-button name="2" :plain="false" size="large">
    Large 2
  </bot-radio-button>
</bot-radio-group>

<bot-radio-group v-model="checked" direction="horizontal">
  <bot-radio-button name="1" :plain="false" size="small">
    Small 1
  </bot-radio-button>
  <bot-radio-button name="2" :plain="false" size="small">
    Small 2
  </bot-radio-button>
</bot-radio-group>
```

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

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

### Custom Color

```html
<bot-radio-group v-model="checked">
  <bot-radio name="1" checked-color="#ee0a24">Radio 1</bot-radio>
  <bot-radio name="2" checked-color="#ee0a24">Radio 2</bot-radio>
</bot-radio-group>
```

### Custom Icon Size

```html
<bot-radio-group v-model="checked">
  <bot-radio name="1" icon-size="24px">Radio 1</bot-radio>
  <bot-radio name="2" icon-size="24px">Radio 2</bot-radio>
</bot-radio-group>
```

### Custom Icon

Use icon slot to custom icon

```html
<bot-radio-group v-model="checked">
  <bot-radio name="1">
    Radio 1
    <template #icon="props">
      <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
    </template>
  </bot-radio>
  <bot-radio name="2">
    Radio 2
    <template #icon="props">
      <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
    </template>
  </bot-radio>
</bot-radio-group>

<style>
  .img-icon {
    height: 20px;
  }
</style>
```

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

export default {
  setup() {
    const checked = ref('1');
    return {
      checked,
      activeIcon:
        'https://cdn-web-sg.botim.me/upd/v1/mp/perm/npuploadtools/202306/15-ca652e35fd074e1d82fc28e486b0a836.png',
      inactiveIcon:
        'https://cdn-web-sg.botim.me/upd/v1/mp/perm/npuploadtools/202306/15-eabc6c49f8164e4fbe0e478f918c9b0c.png',
    };
  },
};
```

### Left Label

Set `label-position` prop to `'left'` to adjust the label position to the left of the Radio.

```html
<bot-radio-group v-model="checked">
  <bot-radio name="1" label-position="left">Radio 1</bot-radio>
  <bot-radio name="2" label-position="left">Radio 2</bot-radio>
</bot-radio-group>
```

### Disable Label Click

```html
<bot-radio-group v-model="checked">
  <bot-radio name="1" label-disabled>Radio 1</bot-radio>
  <bot-radio name="2" label-disabled>Radio 2</bot-radio>
</bot-radio-group>
```

### Inside a Cell

```html
<bot-radio-group v-model="checked">
  <bot-cell-group inset>
    <bot-cell title="Radio 1" clickable @click="checked = '1'">
      <template #right-icon>
        <bot-radio name="1" />
      </template>
    </bot-cell>
    <bot-cell title="Radio 2" clickable @click="checked = '2'">
      <template #right-icon>
        <bot-radio name="2" />
      </template>
    </bot-cell>
  </bot-cell-group>
</bot-radio-group>
```

### Types

The component exports the following type definitions:

```ts
import type {
  RadioProps,
  RadioGroupProps,
  RadioButtonSize,
  RadioLabelPosition,
  RadioGroupDirection,
} from '@botim/bot';
```

---

# Component: Rate

## Introduction
The rate component is used for rating things.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Current rate | _number_ | - |
| count | Count | _number \| string_ | `5` |
| size | Icon size | _number \| string_ | `20px` |
| gutter | Icon gutter | _number \| string_ | `4px` |
| color | Selected color | _string_ | `#ee0a24` |
| void-color | Void color | _string_ | `#c8c9cc` |
| disabled-color | Disabled color | _string_ | `#c8c9cc` |
| icon | Selected icon | _string_ | `StarSolid` |
| void-icon | Void icon | _string_ | `StarLine` |
| allow-half | Whether to allow half star | _boolean_ | `false` |
| readonly | Whether to be readonly | _boolean_ | `false` |
| disabled | Whether to disable rate | _boolean_ | `false` |
| touchable | Whether to allow select rate by touch gesture | _boolean_ | `true` |

## Events
| Event  | Description               | Parameters             |
| ------ | ------------------------- | ---------------------- |
| change | Emitted when rate changed | _currentValue: number_ |

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

```html
<bot-rate v-model="value" />
```

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

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

### Custom Icon

```html
<bot-rate v-model="value" icon="heart" void-icon="heart-o" />
```

### Custom Style

```html
<bot-rate
  v-model="value"
  :size="25"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/>
```

### Half Star

```html
<bot-rate v-model="value" allow-half />
```

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

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

### Custom Count

```html
<bot-rate v-model="value" :count="6" />
```

### Disabled

```html
<bot-rate v-model="value" disabled />
```

### Readonly

```html
<bot-rate v-model="value" readonly />
```

### Readonly Half Star

```html
<bot-rate v-model="value" readonly />
```

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

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

### Change Event

```html
<bot-rate v-model="value" @change="onChange" />
```

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

export default {
  setup() {
    const value = ref(3);
    const onChange = (value) => showToast('current value:' + value);
    return {
      value,
      onChange,
    };
  },
};
```

---

# Component: RollingText

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| start-num | Start number | _number_ | `0` |
| target-num | Target number | _number_ | - |
| text-list | Text array | _string[]_ | `[]` |
| duration | Duration of the animation, in seconds | _number_ | `2` |
| direction | Rolling direction of the text, with `down` and `up` as the values | _string_ | `down` |
| auto-start | Whether to start the animation | _boolean_ | `true` |
| stop-order | Order of stopping the animation of each digit, with `ltr` and `rtl` as the values | _string_ | `ltr` |
| height | Height of digit, `px` as unit | _number_ | `40` |

## Types
The component exports the following type definitions:

```ts
import type {
  RollingTextProps,
  RollingTextInstance,
  RollingTextDirection,
  RollingTextStopOrder,
} from '@botim/bot';
```

`RollingTextInstance` is the type of component instance:

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

const rollingTextRef = ref<RollingTextInstance>();

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

## Usage Examples
### Basic Usage

You can set the starting value with `start-num` and the target value with `target-num`. The RollingText component will automatically start the animation, rolling from the starting value to the target value.

```html
<bot-rolling-text :start-num="0" :target-num="123" />
```

### Set Rolling Direction

You can set the rolling direction of the numbers using the `direction` prop. By default, it rolls downwards, but you can set it to `up` to roll upwards.

```html
<bot-rolling-text :start-num="0" :target-num="432" direction="up" />
```

### Set Stop Order

You can set the order of stopping the animation of each digit through the `stop-order` prop. By default, it stops from the higher digits. Setting `rtl` can stop from the ones digit.

```html
<bot-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />
```

### Roll Non-numeric Text

You can reverse non-numeric content by using the `text-list` prop. The component will rolling from the first item to the last item in the array. Please make sure that the array length is greater than or equal to 2, and that each item has the same length.

```html
<bot-rolling-text :text-list="textList" :duration="1" />
```

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

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

### Custom Style

The RollingText component provides some CSS variables that you can override to customize the style, or you can directly modify the component's style. Additionally, you can set the height of the numbers using the `height` prop.

```html
<bot-rolling-text
  class="my-rolling-text"
  :height="54"
  :start-num="12345"
  :target-num="54321"
/>
```

```css
.my-rolling-text {
  --bot-rolling-text-background: #1989fa;
  --bot-rolling-text-color: white;
  --bot-rolling-text-font-size: 24px;
  --bot-rolling-text-gap: 6px;
  --bot-rolling-text-item-border-radius: 5px;
  --bot-rolling-text-item-width: 40px;
}
```

### Manual Control

After obtaining the component instance through `ref`, you can call the `start` and `reset` methods. The `start` method is used to start the animation, and the `reset` method is used to reset the animation.

```html
<bot-rolling-text
  ref="rollingTextRef"
  :start-num="0"
  :target-num="54321"
  :auto-start="false"
/>
<bot-grid clickable :column-num="3">
  <bot-grid-item :icon="PlayCircleLine" :text="start" @click="start" />
  <bot-grid-item :icon="ResetLine" :text="reset" @click="reset" />
</bot-grid>
```

```js
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 };
  },
};
```

---

# Component: RouterView

---

# Component: Search

## Introduction
Input box component for search scenarios.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Input value | _number \| string_ | - |
| label | Left side label | _string_ | - |
| name | As the identifier when submitting the form | _string_ | - |
| shape | Shape of field, can be set to `round` | _string_ | `square` |
| id | Input id, the for attribute of the label also will be set | _string_ | `bot-search-n-input` |
| background | Background color of field | _string_ | `#f2f2f2` |
| maxlength | Max length of value | _number \| string_ | - |
| placeholder | Placeholder | _string_ | - |
| clearable | Whether to be clearable | _boolean_ | `true` |
| clear-icon | Clear icon name | _string_ | `clear` |
| clear-trigger | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _string_ | `focus` |
| autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
| show-action | Whether to show right action button | _boolean_ | `false` |
| action-text | Text of action button | _string_ | `Cancel` |
| disabled | Whether to disable field | _boolean_ | `false` |
| readonly | Whether to be readonly | _boolean_ | `false` |
| error | Whether to mark the input content in red | _boolean_ | `false` |
| error-message | Error message | _string_ | - |
| formatter | Input value formatter | _(val: string) => string_ | - |
| format-trigger | When to format value, can be set to `onBlur` | _string_ | `onChange` |
| input-align | Text align of field, can be set to `center` `right` | _string_ | `left` |
| left-icon | Left icon name | _string_ | `search` |
| right-icon | Right icon name | _string_ | - |
| autocomplete | [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute of native input element | _string_ | - |
| composing | whether to skip update value when composing | _boolean_ | `true` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| search | Emitted when confirming search | _value: string_ |
| update:model-value | Emitted when input value changed | _value: string_ |
| focus | Emitted when input is focused | _event: Event_ |
| blur | Emitted when input is blurred | _event: Event_ |
| click-input | Emitted when the input is clicked | _event: MouseEvent_ |
| click-left-icon | Emitted when the left icon is clicked | _event: MouseEvent_ |
| click-right-icon | Emitted when the right icon is clicked | _event: MouseEvent_ |
| clear | Emitted when the clear icon is clicked | _event: MouseEvent_ |
| cancel | Emitted when the cancel button is clicked | - |

## Slots
| Name       | Description                                                 |
| ---------- | ----------------------------------------------------------- |
| left       | Custom left side content                                    |
| action     | Custom right button, displayed when `show-action` is `true` |
| label      | Custom Search label                                         |
| left-icon  | Custom left icon                                            |
| right-icon | Custom right icon                                           |

## Theming

## Types
The component exports the following type definitions:

```ts
import type { SearchProps, SearchShape, SearchInstance } from '@botim/bot';
```

`SearchInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { SearchInstance } from '@botim/bot';

const searchRef = ref<SearchInstance>();

searchRef.value?.focus();
```

## Usage Examples
### Basic Usage

```html
<bot-search v-model="value" placeholder="Placeholder" />
```

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

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

### Listen to Events

`search` event will be Emitted when click the search button on the keyboard, `cancel` event will be Emitted when click the cancel button.

```html
<form action="/">
  <bot-search
    v-model="value"
    show-action
    placeholder="Placeholder"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>
```

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

export default {
  setup() {
    const value = ref('');
    const onSearch = (val) => showToast(val);
    const onCancel = () => showToast('Cancel');
    return {
      value,
      onSearch,
      onCancel,
    };
  },
};
```

> Tips: There will be a search button on the keyboard when Search is inside a form in iOS.

### Input Align

```html
<bot-search v-model="value" input-align="center" placeholder="Placeholder" />
```

### Disabled

```html
<bot-search v-model="value" disabled placeholder="Placeholder" />
```

### Custom Background Color

```html
<bot-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="Placeholder"
/>
```

### Custom Action Button

Use `action` slot to custom right button, `cancel` event will no longer be Emitted when use this slot.

```html
<bot-search
  v-model="value"
  show-action
  label="Address"
  placeholder="Placeholder"
  @search="onSearch"
>
  <template #action>
    <div @click="onClickButton">Search</div>
  </template>
</bot-search>
```

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

export default {
  setup() {
    const value = ref('');
    const onSearch = (val) => showToast(val);
    const onClickButton = () => showToast(value.value);
    return {
      value,
      onSearch,
      onClickButton,
    };
  },
};
```

### Custom Animation

```html
<bot-search
  class="bot-search--custom-action"
  v-model="value6"
  show-action
  :placeholder="t('placeholder')"
  @search="onSearch"
  @focus="focusSearch"
  @blur="showAction = false"
>
  <template #action>
    <div
      class="bot-search__action-content"
      @click="cancelSearch"
      :class="{ 'bot-search__action-content--appear': showAction }"
    >
      {{ t('search') }}
    </div>
  </template>
</bot-search>
```

```css
.bot-search--custom-action {
  width: 100%;
  overflow: hidden;

  ::v-deep(.bot-search__action) {
    padding: 0;
  }
  .bot-search__action-content {
    transition: all 0.4s;
    width: 0px;
    padding-left: 16px;
    color: #377af6;
    border-radius: 3px;
    white-space: nowrap;

    &--appear {
      padding-left: 8px;
      padding-right: 16px;
      width: auto;
    }
  }
}
```

---

# Component: Select

## Introduction
When there are plenty of options, use a drop-down menu to display and select desired ones.

## Slots
| 名称          | 说明                 | 参数                  |
| ------------- | -------------------- | --------------------- |
| label         | Custom label         | -                     |
| prefix        | Custom prefix        | -                     |
| error-message | Custom error message | _{ message: string }_ |

## Theming

## Usage Examples
### Basic Usage

The value of field is bound with v-model.

```html
<bot-select v-model="value" placeholder="please select">
  <bot-select-item value="Beijing" label="Beijing"></bot-select-item>
  <bot-select-item value="Shanghai" label="Shanghai"></bot-select-item>
  <bot-select-item value="Guangzhou" label="Guangzhou"></bot-select-item>
  <bot-select-item value="Shenzhen" label="Shenzhen"></bot-select-item>
</bot-select>
```

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

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

### Remote Search

Enter keywords and search data from server.

```html
<bot-select v-model="value" placeholder="please select" filterable>
  <bot-select-item value="Beijing" label="Beijing"></bot-select-item>
  <bot-select-item value="Shanghai" label="Shanghai"></bot-select-item>
  <bot-select-item value="Guangzhou" label="Guangzhou"></bot-select-item>
  <bot-select-item value="Shenzhen" label="Shenzhen"></bot-select-item>
</bot-select>
```

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

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

### Label

You can add a title to the selector

```html
<bot-select v-model="value" placeholder="please select" label="Select" required>
  <bot-select-item value="Beijing" label="Beijing"></bot-select-item>
  <bot-select-item value="Shanghai" label="Shanghai"></bot-select-item>
  <bot-select-item value="Guangzhou" label="Guangzhou"></bot-select-item>
  <bot-select-item value="Shenzhen" label="Shenzhen"></bot-select-item>
</bot-select>
```

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

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

### Disabled option

```html
<bot-select v-model="value" placeholder="please select">
  <bot-select-item value="option" label="Beijing"></bot-select-item>
  <bot-select-item value="Shanghai" label="Shanghai" disabled></bot-select-item>
  <bot-select-item value="Guangzhou" label="Guangzhou"></bot-select-item>
  <bot-select-item value="Shenzhen" label="Shenzhen"></bot-select-item>
</bot-select>
```

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

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

### Disabled select

Disable the whole component.

```html
<bot-select v-model="value" placeholder="please select" disabled>
  <bot-select-item value="Beijing" label="Beijing"></bot-select-item>
  <bot-select-item value="Shanghai" label="Shanghai"></bot-select-item>
  <bot-select-item value="Guangzhou" label="Guangzhou"></bot-select-item>
  <bot-select-item value="Shenzhen" label="Shenzhen"></bot-select-item>
</bot-select>
```

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

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

### Clearable single select

You can clear Select using a clear icon.

```html
<bot-select v-model="value" placeholder="please select" clearable>
  <bot-select-item value="Beijing" label="Beijing"></bot-select-item>
  <bot-select-item value="Shanghai" label="Shanghai"></bot-select-item>
  <bot-select-item value="Guangzhou" label="Guangzhou"></bot-select-item>
  <bot-select-item value="Shenzhen" label="Shenzhen"></bot-select-item>
</bot-select>
```

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

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

### Custom template

You can customize HTML templates for options.

```html
<bot-select v-model="value" placeholder="please select" clearable>
  <bot-select-item value="Beijing" label="Beijing">
    <div class="custom-template">
      <span>Beijing</span>
      <span>Beijing</span>
    </div>
  </bot-select-item>
  <bot-select-item value="Shanghai" label="Shanghai">
    <div class="custom-template">
      <span>Shanghai</span>
      <span>Shanghai</span>
    </div>
  </bot-select-item>
  <bot-select-item value="Guangzhou" label="Guangzhou">
    <div class="custom-template">
      <span>Guangzhou</span>
      <span>Guangzhou</span>
    </div>
  </bot-select-item>
  <bot-select-item value="Shenzhen" label="Shenzhen">
    <div class="custom-template">
      <span>Shenzhen</span>
      <span>Shenzhen</span>
    </div>
  </bot-select-item>
</bot-select>
```

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

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

---

# Component: ShareSheet

## Introduction
A pop-up sharing panel at the bottom for displaying the action buttons corresponding to each sharing channel, without specific sharing logic.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model:show | Whether to show ShareSheet | _boolean_ | `false` |
| options | Share options | _Option[]_ | `[]` |
| title | Title | _string_ | - |
| cancel-text | Cancel button text | _string_ | `'Cancel'` |
| description | Description | _string_ | - |
| duration | Transition duration, unit second | _number \| string_ | `0.3` |
| z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` |
| round | Whether to show round corner | _boolean_ | `true` |
| overlay | Whether to show overlay | _boolean_ | `true` |
| overlay-class | Custom overlay class | _string \| Array \| object_ | - |
| overlay-style | Custom overlay style | _object_ | - |
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
| close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
| close-on-click-overlay | Whether to close when overlay is clicked | _boolean_ | `true` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
| teleport | Specifies a target element where ShareSheet will be mounted | _string \| Element_ | - |
| before-close | Callback function before close | _(action: string) => boolean \| Promise\<boolean\>_ | - |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| select | Emitted when an option is clicked | _option: Option, index: number_ |
| cancel | Emitted when the cancel button is clicked | - |
| open | Emitted when opening ShareSheet | - |
| close | Emitted when closing ShareSheet | - |
| opened | Emitted when ShareSheet is opened | - |
| closed | Emitted when ShareSheet is closed | - |
| click-overlay | Emitted when overlay is clicked | _event: MouseEvent_ |

## Slots
| Name        | Description                         |
| ----------- | ----------------------------------- |
| title       | Custom title                        |
| description | Custom description                  |
| cancel      | Custom the content of cancel button |

## Types
The component exports the following type definitions:

```ts
import type {
  ShareSheetProps,
  ShareSheetOption,
  ShareSheetOptions,
} from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-cell title="Show ShareSheet" @click="showShare = true" />
<bot-share-sheet
  v-model:show="showShare"
  title="Share"
  :options="options"
  @select="onSelect"
/>
```

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

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      { name: 'WeChat', icon: 'wechat' },
      { name: 'Weibo', icon: 'weibo' },
      { name: 'Link', icon: 'link' },
      { name: 'Poster', icon: 'poster' },
      { name: 'Qrcode', icon: 'qrcode' },
    ];

    const onSelect = (option) => {
      showToast(option.name);
      showShare.value = false;
    };

    return {
      options,
      onSelect,
      showShare,
    };
  },
};
```

### Multi Line

```html
<bot-share-sheet v-model:show="showShare" title="Share" :options="options" />
```

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

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      [
        { name: 'WeChat', icon: 'wechat' },
        { name: 'WeChat Moments', icon: 'wechat-moments' },
        { name: 'Weibo', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: 'Link', icon: 'link' },
        { name: 'Poster', icon: 'poster' },
        { name: 'Qrcode', icon: 'qrcode' },
        { name: 'Weapp Qrcode', icon: 'weapp-qrcode' },
      ],
    ];

    return {
      options,
      showShare,
    };
  },
};
```

### Custom Icon

```html
<bot-share-sheet v-model:show="showShare" :options="options" />
```

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

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      {
        name: 'Name',
        icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-fire.png',
      },
      {
        name: 'Name',
        icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-light.png',
      },
      {
        name: 'Name',
        icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-water.png',
      },
    ];

    return {
      options,
      showShare,
    };
  },
};
```

### Show Description

```html
<bot-share-sheet
  v-model:show="showShare"
  :options="options"
  title="Share"
  description="Description"
/>
```

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

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      { name: 'WeChat', icon: 'wechat' },
      { name: 'Weibo', icon: 'weibo' },
      { name: 'Link', icon: 'link', description: 'Description' },
      { name: 'Poster', icon: 'poster' },
      { name: 'Qrcode', icon: 'qrcode' },
    ];

    return {
      options,
      showShare,
    };
  },
};
```

---

# Component: Sidebar

## Introduction
The vertically displayed navigation bar is used to switch between different content areas.

## Types
The component exports the following type definitions:

```ts
import type { SidebarProps, SidebarItemProps } from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-sidebar v-model="active">
  <bot-sidebar-item title="Title" />
  <bot-sidebar-item title="Title" />
  <bot-sidebar-item title="Title" />
</bot-sidebar>
```

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

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

### Show Badge

```html
<bot-sidebar v-model="active">
  <bot-sidebar-item title="Title" dot />
  <bot-sidebar-item title="Title" badge="5" />
  <bot-sidebar-item title="Title" />
</bot-sidebar>
```

### Disabled

```html
<bot-sidebar v-model="active">
  <bot-sidebar-item title="Title" />
  <bot-sidebar-item title="Title" disabled />
  <bot-sidebar-item title="Title" />
</bot-sidebar>
```

### Change Event

```html
<bot-sidebar v-model="active" @change="onChange">
  <bot-sidebar-item title="Title 1" />
  <bot-sidebar-item title="Title 2" />
  <bot-sidebar-item title="Title 3" />
</bot-sidebar>
```

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

export default {
  setup() {
    const active = ref(0);
    const onChange = (index) => showToast(`Title ${index + 1}`);
    return {
      active,
      onChange,
    };
  },
};
```

---

# Component: Skeleton

## Introduction
Used to display a set of placeholder graphics during the content loading process.

## Types
The component exports the following type definitions:

```ts
import type {
  SkeletonProps,
  SkeletonImageProps,
  SkeletonTitleProps,
  SkeletonAvatarShape,
  SkeletonImageShape,
  SkeletonParagraphProps,
} from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-skeleton title :rows="3" />
```

### Show Avatar

```html
<bot-skeleton title avatar :rows="3" />
```

### Show Children

```html
<bot-skeleton title avatar :rows="3" :loading="loading">
  <div>Content</div>
</bot-skeleton>
```

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

export default {
  setup() {
    const loading = ref(true);

    onMounted(() => {
      loading.value = false;
    });

    return {
      loading,
    };
  },
};
```

### Custom Content

Using `template` slots to custom skeleton content.

```html
<bot-skeleton>
  <template #template>
    <div :style="{ display: 'flex', width: '100%' }">
      <bot-skeleton-image />
      <div :style="{ flex: 1, marginLeft: '16px' }">
        <bot-skeleton-paragraph row-width="60%" />
        <bot-skeleton-paragraph />
        <bot-skeleton-paragraph />
        <bot-skeleton-paragraph />
      </div>
    </div>
  </template>
</bot-skeleton>
```

### Custom Style

Using the following props to customize the skeleton style, including width, height, radius, background color, etc.

```html
<bot-skeleton
  title
  title-height="60px"
  radius="10px"
  background-color="#c8c9cc"
  :rows="3"
  :row-width="['100%', '40%', '80%']"
  row-height="40px"
/>
```

---

# Component: SkeletonAvatar

---

# Component: SkeletonImage

---

# Component: SkeletonParagraph

---

# Component: SkeletonTitle

---

# Component: Slider

## Introduction
Used to select a value within a given range.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Current value | _number \| [number, number]_ | `0` |
| max | Max value | _number \| string_ | `100` |
| min | Min value | _number \| string_ | `0` |
| step | Step size | _number \| string_ | `1` |
| bar-height | Height of bar | _number \| string_ | `2px` |
| button-size | Button size | _number \| string_ | `24px` |
| active-color | Active color of bar | _string_ | `#1989fa` |
| inactive-color | Inactive color of bar | _string_ | `#e5e5e5` |
| range | Whether to enable dual thumb mode | _boolean_ | `false` |
| reverse | Whether to reverse slider | _boolean_ | `false` |
| disabled | Whether to disable slider | _boolean_ | `false` |
| readonly | Whether to be readonly | _boolean_ | `false` |
| vertical | Whether to display slider vertically | _boolean_ | `false` |

## Events
| Event              | Description                    | Arguments           |
| ------------------ | ------------------------------ | ------------------- |
| update:model-value | Emitted when value is changing | _value: number_     |
| change             | Emitted after value changed    | _value: number_     |
| drag-start         | Emitted when start dragging    | _event: TouchEvent_ |
| drag-end           | Emitted when end dragging      | _event: TouchEvent_ |

## Slots
| Name         | Description                       | SlotProps           |
| ------------ | --------------------------------- | ------------------- |
| button       | Custom button                     | _{ value: number }_ |
| left-button  | Custom left button in range mode  | _{ value: number }_ |
| right-button | Custom right button in range mode | _{ value: number }_ |

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

```html
<bot-slider v-model="value" @change="onChange" />
```

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

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

### Dual thumb

Add `range` attribute to open dual thumb mode.

```html
<bot-slider v-model="value" range @change="onChange" />
```

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

export default {
  setup() {
    // value must be an Array
    const value = ref([10, 50]);
    const onChange = (value) => showToast('Current value: ' + value);
    return {
      value,
      onChange,
    };
  },
};
```

### Range

```html
<bot-slider v-model="value" :min="-50" :max="50" />
```

### Disabled

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

### Step size

```html
<bot-slider v-model="value" :step="10" />
```

### Custom style

```html
<bot-slider v-model="value" bar-height="4px" active-color="#ee0a24" />
```

### Custom button

```html
<bot-slider v-model="value">
  <template #button>
    <div class="custom-button">{{ value }}</div>
  </template>
</bot-slider>

<style>
  .custom-button {
    width: 26px;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: var(--bot-primary-color);
    border-radius: 100px;
  }
</style>
```

### Vertical

```html
<div :style="{ height: '150px' }">
  <bot-slider v-model="value" vertical @change="onChange" />
  <bot-slider
    v-model="value2"
    range
    vertical
    style="margin-left: 100px;"
    @change="onChange"
  />
</div>
```

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

export default {
  setup() {
    const value = ref(50);
    const value2 = ref([10, 50]);
    const onChange = (value) => showToast('Current value: ' + value);
    return {
      value,
      value2,
      onChange,
    };
  },
};
```

---

# Component: Space

## Introduction
Set the spacing between elements.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| direction | Spacing direction | _vertical \| horizontal_ | `horizontal` |
| size | Spacing size, such as `20px` `2em`. The default unit is px, supports using array to set horizontal and vertical spacing | _number \| string \| number[] \| string[]_ | `8px` |
| align | Spacing alignment | _start \| end \| center \| baseline_ | - |
| wrap | Whether to wrap automatically, only for horizontal alignment | _boolean_ | `false` |
| fill | Whether to render Space as a block element and fill the parent element | _boolean_ | `false` |

## Slots
| Name    | Description  |
| ------- | ------------ |
| default | Default slot |

## Types
The component exports the following type definitions:

```ts
import type { SpaceProps, SpaceSize, SpaceAlign } from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-space>
  <bot-button type="primary">Button</bot-button>
  <bot-button type="primary">Button</bot-button>
  <bot-button type="primary">Button</bot-button>
  <bot-button type="primary">Button</bot-button>
</bot-space>
```

### Vertical

```html
<bot-space direction="vertical" fill>
  <bot-button type="primary" block>Button</bot-button>
  <bot-button type="primary" block>Button</bot-button>
  <bot-button type="primary" block>Button</bot-button>
</bot-space>
```

### Custom Size

```html
<!-- 20px -->
<bot-space :size="20">
  <bot-button type="primary">Button</bot-button>
  <bot-button type="primary">Button</bot-button>
  <bot-button type="primary">Button</bot-button>
</bot-space>

<!-- 2rem -->
<bot-space size="2rem">
  <bot-button type="primary">Button</bot-button>
  <bot-button type="primary">Button</bot-button>
  <bot-button type="primary">Button</bot-button>
</bot-space>
```

### Alignment

```html
<bot-radio-group
  v-model="align"
  direction="horizontal"
  style="margin-bottom: 16px"
>
  <bot-radio name="start">start</bot-radio>
  <bot-radio name="center">center</bot-radio>
  <bot-radio name="end">end</bot-radio>
  <bot-radio name="baseline">baseline</bot-radio>
</bot-radio-group>

<bot-space :align="align" style="padding: 16px; background: #f3f2f5">
  <bot-button type="primary">{{ align }}</bot-button>
  <div style="padding: 40px 20px; background: #fff">Block</div>
</bot-space>
```

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

export default {
  setup() {
    const align = ref('center');
    return { align };
  },
};
```

### Auto Wrap

```html
<bot-space wrap>
  <bot-button type="primary" block>Button</bot-button>
  <bot-button type="primary" block>Button</bot-button>
  <bot-button type="primary" block>Button</bot-button>
  <bot-button type="primary" block>Button</bot-button>
  <bot-button type="primary" block>Button</bot-button>
  <bot-button type="primary" block>Button</bot-button>
  <bot-button type="primary" block>Button</bot-button>
  <bot-button type="primary" block>Button</bot-button>
</bot-space>
```

---

# Component: Stepper

## Introduction
The stepper component consists of an increase button, a decrease button and an input box, which are used to input and adjust numbers within a certain range.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Current value | _number \| string_ | - |
| min | Min value | _number \| string_ | `1` |
| max | Max value | _number \| string_ | - |
| auto-fixed | Whether to auto fix value that is out of range, set to `false` and value that is out of range won’t be auto fixed | _boolean_ | `true` |
| default-value | Default value, valid when v-model is empty | _number \| string_ | `1` |
| step | Value change step | _number \| string_ | `1` |
| name | Stepper name, usually a unique string or number | _number \| string_ | - |
| input-width | Input width | _number \| string_ | `32px` |
| button-size | Button size | _number \| string_ | `28px` |
| decimal-length | Decimal length | _number \| string_ | - |
| theme | Theme, can be set to `round` | _string_ | - |
| placeholder | Input placeholder | _string_ | - |
| integer | Whether to allow only integers | _boolean_ | `false` |
| disabled | Whether to disable value change | _boolean_ | `false` |
| disable-plus | Whether to disable plus button | _boolean_ | `false` |
| disable-minus | Whether to disable minus button | _boolean_ | `false` |
| disable-input | Whether to disable input | _boolean_ | `false` |
| before-change | Callback function before changing, return `false` to prevent change, support return Promise | _(value: number \| string) => boolean \| Promise\<boolean\>_ | `false` |
| show-plus | Whether to show plus button | _boolean_ | `true` |
| show-minus | Whether to show minus button | _boolean_ | `true` |
| show-input | Whether to show input | _boolean_ | `true` |
| long-press | Whether to enable the long press gesture, when enabled you can long press the increase and decrease buttons | _boolean_ | `true` |
| allow-empty | Whether to allow the input value to be empty, set to `true` to allow an empty string to be passed in | _boolean_ | `false` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| change | Emitted when value changed | _value: string, detail: { name: string }_ |
| overlimit | Emitted when a disabled button is clicked | - |
| plus | Emitted when the plus button is clicked | - |
| minus | Emitted when the minus button is clicked | - |
| focus | Emitted when the input is focused | _event: Event_ |
| blur | Emitted when the input is blurred | _event: Event_ |

## Types
The component exports the following type definitions:

```ts
import type { StepperTheme, StepperProps } from 'botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-stepper v-model="value" />
```

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

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

### Step

```html
<bot-stepper v-model="value" step="2" />
```

### Range

```html
<bot-stepper v-model="value" min="5" max="8" />
```

### Integer

```html
<bot-stepper v-model="value" integer />
```

### Disabled

```html
<bot-stepper v-model="value" disabled />
```

### Disable Input

```html
<bot-stepper v-model="value" disable-input />
```

### Decimal Length

```html
<bot-stepper v-model="value" step="0.2" :decimal-length="1" />
```

### Custom Size

```html
<bot-stepper v-model="value" input-width="40px" button-size="32px" />
```

### Before Change

```html
<bot-stepper v-model="value" :before-change="beforeChange" />
```

```js
import { ref } from 'vue';
import { closeToast, showLoadingToast } from 'botim/bot';

export default {
  setup() {
    const value = ref(1);

    const beforeChange = (value) => {
      showLoadingToast({ forbidClick: true });

      return new Promise((resolve) => {
        setTimeout(() => {
          closeToast();
          // resolve 'true' or 'false'
          resolve(true);
        }, 500);
      });
    };

    return {
      value,
      beforeChange,
    };
  },
};
```

### Round Theme

```html
<bot-stepper v-model="value" theme="round" button-size="22" disable-input />
```

---

# Component: Steps

## Introduction
Used to show the various parts of the action flow and let the user know where the current action fits into the overall flow.

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

```html
<bot-steps :active="active">
  <bot-step>Step1</bot-step>
  <bot-step>Step2</bot-step>
  <bot-step>Step3</bot-step>
  <bot-step>Step4</bot-step>
</bot-steps>
```

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

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

### Custom Style

```html
<bot-steps :active="active" active-icon="success" active-color="#07c160">
  <bot-step>Step1</bot-step>
  <bot-step>Step2</bot-step>
  <bot-step>Step3</bot-step>
  <bot-step>Step4</bot-step>
</bot-steps>
```

### Vertical Steps

```html
<bot-steps direction="vertical" :active="0">
  <bot-step>
    <h3>【City】Status1</h3>
    <p>2016-07-12 12:40</p>
  </bot-step>
  <bot-step>
    <h3>【City】Status2</h3>
    <p>2016-07-11 10:00</p>
  </bot-step>
  <bot-step>
    <h3>【City】Status3</h3>
    <p>2016-07-10 09:30</p>
  </bot-step>
</bot-steps>
```

---

# Component: Sticky

## Introduction
The sticky component is consistent with the effect achieved by the `position: sticky` property in CSS, in that when the component is within screen range, it will follow the normal layout arrangement, and when the component rolls out of screen range, it will always be fixed at the top of the screen.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| position | Offset position, can be set to `bottom` | _string_ | `top` |
| offset-top | Offset top, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `0` |
| offset-bottom | Offset bottom, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `0` |
| z-index | z-index when sticky | _number \| string_ | `99` |
| container | Container DOM | _Element_ | - |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| change | Emitted when sticky status changed | _isFixed: boolean_ |
| scroll | Emitted when scrolling | _{ scrollTop: number, isFixed: boolean }_ |

## Types
The component exports the following type definitions:

```ts
import type { StickyProps, StickyPosition } from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-sticky>
  <bot-button type="primary">Basic Usage</bot-button>
</bot-sticky>
```

### Offset Top

```html
<bot-sticky :offset-top="50">
  <bot-button type="primary">Offset Top</bot-button>
</bot-sticky>
```

### Set Container

```html
<div ref="container" style="height: 150px;">
  <bot-sticky :container="container">
    <bot-button type="warning">Set Container</bot-button>
  </bot-sticky>
</div>
```

```js
export default {
  setup() {
    const container = ref(null);
    return { container };
  },
};
```

### Offset Bottom

```html
<bot-sticky :offset-bottom="50" position="bottom">
  <bot-button type="primary">Offset Bottom</bot-button>
</bot-sticky>
```

---

# Component: Style

## Introduction
Bot contains some common styles that can be used directly by the className.

---

# Component: Swipe

## Introduction
Used to loop a group of pictures or content.

## Types
The component exports the following type definitions:

```ts
import type {
  SwipeProps,
  SwipeInstance,
  SwipeToOptions,
  SwipeIndicatorType,
} from '@botim/bot';
```

`SwipeInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { SwipeInstance } from '@botim/bot';

const swipeRef = ref<SwipeInstance>();

swipeRef.value?.next();
```

## Usage Examples
### Basic Usage

Use `autoplay` prop to set autoplay interval.

```html
<bot-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <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>

<style>
  .my-swipe .bot-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
```

### Indicator Type

Use `indicator-type` prop to set indicator type.

```html
<bot-swipe
  class="my-swipe"
  :autoplay="3000"
  indicator-type="line"
  indicator-color="white"
>
  <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>

<style>
  .my-swipe .bot-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
```

### Indicator Position

Use `indicator-type` prop to set indicator position (only supported in horizontal scrolling mode).

```html
<bot-swipe
  class="my-swipe"
  :autoplay="0"
  indicators-outside
  indicator-type="line"
>
  <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>

<style>
  .my-swipe .bot-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
```

### Lazy Render

Use `lazy-render` prop to enable lazy rendering.

```html
<bot-swipe :autoplay="3000" lazy-render>
  <bot-swipe-item v-for="image in images" :key="image">
    <img :src="image" />
  </bot-swipe-item>
</bot-swipe>
```

```js
export default {
  setup() {
    const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ];
    return { images };
  },
};
```

### Change Event

```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 };
  },
};
```

### Vertical Scrolling

```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>
```

### Set SwipeItem Size

> It's not supported to set SwipeItem size in the loop mode.

```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>
```

### Custom Indicator

```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>
```

---

# Component: SwipeCell

## Introduction
Used for cell components that can slide left and right to display operation buttons.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| name | Identifier of SwipeCell, usually a unique string or number | _number \| string_ | - |
| left-width | Width of the left swipe area | _number \| string_ | `auto` |
| right-width | Width of the right swipe area | _number \| string_ | `auto` |
| before-close | Callback function before close | _(args) => boolean \| Promise\<boolean\>_ | - |
| disabled | Whether to disabled swipe | _boolean_ | `false` |
| stop-propagation | Whether to stop touchmove event propagation | _boolean_ | `false` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| click | Emitted when SwipeCell is clicked | _position: 'left' \| 'right' \| 'cell' \| 'outside'_ |
| open | Emitted when SwipeCell is opened | _value: { name: string \| number, position: 'left' \| 'right' }_ |
| close | Emitted when SwipeCell is closed | _value: { name: string \| number, position: 'left' \| 'right' \| 'cell' \| 'outside' }_ |

## Slots
| Name    | Description                      |
| ------- | -------------------------------- |
| default | custom content                   |
| left    | content of left scrollable area  |
| right   | content of right scrollable area |

## Types
The component exports the following type definitions:

```ts
import type {
  SwipeCellSide,
  SwipeCellProps,
  SwipeCellPosition,
  SwipeCellInstance,
} from '@botim/bot';
```

`SwipeCellInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { SwipeCellInstance } from '@botim/bot';

const swipeCellRef = ref<SwipeCellInstance>();

swipeCellRef.value?.close();
```

## Usage Examples
### Basic Usage

```html
<bot-swipe-cell>
  <template #left>
    <bot-button square type="primary" text="Select" />
  </template>
  <bot-cell :border="false" title="Cell" value="Cell Content" />
  <template #right>
    <bot-button square type="danger" text="Delete" />
    <bot-button square type="primary" text="Collect" />
  </template>
</bot-swipe-cell>
```

### Custom Content

```html
<bot-swipe-cell>
<bot-swipe-cell>
  <bot-image
    src="https://cdn-web-sg.botim.me/upd/v1/mp/perm/npuploadtools/202306/15-b2d8e4f5c1fb4e928adcdd6c8ed259cf.jpeg"
  />
  </template>
</bot-swipe-cell>
</bot-swipe-cell>

<style>
  .goods-card {
    margin: 0;
    background-color: @white;
  }

  .delete-button {
    height: 100%;
  }
</style>
```

### Before Close

```html
<bot-swipe-cell :before-close="beforeClose">
  <template #left>
    <bot-button square type="primary" text="Select" />
  </template>
  <bot-cell :border="false" title="Cell" value="Cell Content" />
  <template #right>
    <bot-button square type="danger" text="Delete" />
  </template>
</bot-swipe-cell>
```

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

export default {
  setup() {
    const beforeClose = ({ position }) => {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          return true;
        case 'right':
          return new Promise((resolve) => {
            showConfirmDialog({
              title: 'Are you sure to delete?',
            }).then(resolve);
          });
      }
    };

    return { beforeClose };
  },
};
```

---

# Component: Switch

## Introduction
Used to switch between open and closed states.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Check status of Switch | _ActiveValue \| InactiveValue_ | `false` |
| loading | Whether to show loading icon | _boolean_ | `false` |
| disabled | Whether to disable switch | _boolean_ | `false` |
| size | Size of switch button | _number \| string_ | `26px` |
| active-color | Background color when active | _string_ | `#1989fa` |
| inactive-color | Background color when inactive | _string_ | `rgba(120, 120, 128, 0.16)` |
| active-value | Value when active | _any_ | `true` |
| inactive-value | Value when inactive | _any_ | `false` |

## Events
| Event  | Description                       | Parameters          |
| ------ | --------------------------------- | ------------------- |
| change | Emitted when check status changed | _value: any_        |
| click  | Emitted when component is clicked | _event: MouseEvent_ |

## Slots
| Name       | Description                     | SlotProps |
| ---------- | ------------------------------- | --------- |
| node       | Custom the content of node      | -         |
| background | Custom the background of switch | -         |

## Types
The component exports the following type definitions:

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

## Usage Examples
### Basic Usage

```html
<bot-switch v-model="checked" />
```

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

export default {
  setup() {
    const checked = ref(true);
    return { checked };
  },
};
```

### Disabled

```html
<bot-switch v-model="checked" disabled />
```

### Loading

```html
<bot-switch v-model="checked" loading />
```

### Custom Size

```html
<bot-switch v-model="checked" size="22px" />
```

### Custom Color

```html
<bot-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />
```

### Custom Node

Using `node` slot to custom the content of the node.

```html
<bot-switch v-model="checked">
  <template #node>
    <div class="icon-wrapper">
      <bot-icon :icon="checked ? CheckLine : BlockLine" />
    </div>
  </template>
</bot-switch>

<style>
  .icon-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 18px;
  }

  .icon-wrapper .bot-icon-success {
    line-height: 20px;
    color: var(--bot-blue);
  }

  .icon-wrapper .bot-icon-cross {
    line-height: 20px;
    color: var(--bot-gray-5);
  }
</style>
```

### Async Control

```html
<bot-switch :model-value="checked" @update:model-value="onUpdateValue" />
```

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

export default {
  setup() {
    const checked = ref(true);
    const onUpdateValue = (newValue) => {
      showConfirmDialog({
        title: 'Confirm',
        message: 'Are you sure to toggle switch?',
      }).then(() => {
        checked.value = newValue;
      });
    };

    return {
      checked,
      onUpdateValue,
    };
  },
};
```

### Inside a Cell

```html
<bot-cell center title="Title">
  <template #right-icon>
    <bot-switch v-model="checked" />
  </template>
</bot-cell>
```

---

# Component: Tab

## Introduction
Used to switch between different content areas.

## Types
The component exports the following type definitions:

```ts
import type { TabProps, TabsType, TabsProps, TabsInstance } from '@botim/bot';
```

`TabsInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { TabsInstance } from '@botim/bot';

const tabsRef = ref<TabsInstance>();

tabsRef.value?.scrollTo(0);
```

## Usage Examples
### Basic Usage

The first tab is active by default, you can set `v-model:active` to active specified tab.

```html
<bot-tabs v-model:active="active">
  <bot-tab v-for="index in 4" :title="'tab' + index">
    content of tab {{ index }}
  </bot-tab>
</bot-tabs>
```

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

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

### Match By Name

```html
<bot-tabs v-model:active="activeName">
  <bot-tab title="tab 1" name="a">content of tab 1</bot-tab>
  <bot-tab title="tab 2" name="b">content of tab 2</bot-tab>
  <bot-tab title="tab 3" name="c">content of tab 3</bot-tab>
</bot-tabs>
```

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

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

### Swipe Tabs

By default more than 5 tabs, you can scroll through the tabs. You can set `swipe-threshold` attribute to customize threshold number.

```html
<bot-tabs v-model:active="active">
  <bot-tab v-for="index in 8" :title="'tab' + index">
    content of tab {{ index }}
  </bot-tab>
</bot-tabs>
```

### Disabled Tab

Use `disabled` prop to disable a tab.

```html
<bot-tabs v-model:active="active">
  <bot-tab v-for="index in 3" :title="'tab' + index" :disabled="index === 2">
    content of tab {{ index }}
  </bot-tab>
</bot-tabs>
```

### Card Style

Tabs styled as cards.

```html
<bot-tabs v-model:active="active" type="card">
  <bot-tab v-for="index in 3" :title="'tab' + index">
    content of tab {{ index }}
  </bot-tab>
</bot-tabs>
```

Tabs styled as cards with non-slide.

```html
<bot-tabs v-model:active="active" type="card" :slidable="false">
  <bot-tab title="标签 1">内容 1</bot-tab>
  <bot-tab title="标签 2">内容 2</bot-tab>
  <bot-tab title="标签 3">内容 3</bot-tab>
</bot-tabs>
```

### Click Tab Event

```html
<bot-tabs v-model:active="active" @click-tab="onClickTab">
  <bot-tab v-for="index in 2" :title="'tab' + index">
    content of tab {{ index }}
  </bot-tab>
</bot-tabs>
```

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

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

### Sticky

In sticky mode, the tab nav will be fixed to top when scroll to top.

```html
<bot-tabs v-model:active="active" sticky>
  <bot-tab v-for="index in 4" :title="'tab ' + index">
    content {{ index }}
  </bot-tab>
</bot-tabs>
```

### Shrink

In shrink mode, the tabs will be shrinked to the left.

```html
<bot-tabs v-model:active="active" shrink>
  <bot-tab v-for="index in 4" :title="'tab ' + index">
    content {{ index }}
  </bot-tab>
</bot-tabs>
```

### Custom title

Use title slot to custom tab title.

```html
<bot-tabs v-model:active="active">
  <bot-tab v-for="index in 2">
    <template #title>
      <bot-icon name="more-o" />tab <bot-badge content="5"
    /></template>
    content {{ index }}
  </bot-tab>
</bot-tabs>
```

```css
.bot-tab__text {
  line-height: 20px;
}
.bot-badge {
  transform: none;
}
```

### Switch Animation

Use `animated` props to change tabs with animation.

```html
<bot-tabs v-model:active="active" animated>
  <bot-tab v-for="index in 4" :title="'tab ' + index">
    content {{ index }}
  </bot-tab>
</bot-tabs>
```

### Swipeable

In swipeable mode, you can switch tabs with swipe gesture in the content.

```html
<bot-tabs v-model:active="active" swipeable>
  <bot-tab v-for="index in 4" :title="'tab ' + index">
    content {{ index }}
  </bot-tab>
</bot-tabs>
```

### Scrollspy

In scrollspy mode, the list of content will be tiled.

```html
<bot-tabs v-model:active="active" scrollspy sticky>
  <bot-tab v-for="index in 8" :title="'tab ' + index">
    content {{ index }}
  </bot-tab>
</bot-tabs>
```

### Before Change

```html
<bot-tabs v-model:active="active" :before-change="beforeChange">
  <bot-tab v-for="index in 4" :title="'tab ' + index">
    content {{ index }}
  </bot-tab>
</bot-tabs>
```

```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,
    };
  },
};
```

---

# Component: Tabbar

## Introduction
Used to switch between different pages.

## Types
The component exports the following type definitions:

```ts
import type { TabbarProps, TabbarItemProps } from '@botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-tabbar v-model="active">
  <bot-tabbar-item :icon="Home02Line">Tab</bot-tabbar-item>
  <bot-tabbar-item :icon="SearchLine">Tab</bot-tabbar-item>
  <bot-tabbar-item :icon="CustomerServiceSolid">Tab</bot-tabbar-item>
  <bot-tabbar-item :icon="GearLine">Tab</bot-tabbar-item>
</bot-tabbar>
```

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

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

### Match by name

```html
<bot-tabbar v-model="active">
  <bot-tabbar-item name="home" :icon="Home02Line">Tab</bot-tabbar-item>
  <bot-tabbar-item name="search" :icon="SearchLine">Tab</bot-tabbar-item>
  <bot-tabbar-item name="friends" :icon="CustomerServiceSolid"
    >Tab</bot-tabbar-item
  >
  <bot-tabbar-item name="setting" :icon="GearLine">Tab</bot-tabbar-item>
</bot-tabbar>
```

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

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

### Show Badge

```html
<bot-tabbar v-model="active">
  <bot-tabbar-item :icon="Home02Line">Tab</bot-tabbar-item>
  <bot-tabbar-item :icon="SearchLine" dot>Tab</bot-tabbar-item>
  <bot-tabbar-item :icon="CustomerServiceSolid" badge="5">Tab</bot-tabbar-item>
  <bot-tabbar-item :icon="GearLine" badge="20">Tab</bot-tabbar-item>
</bot-tabbar>
```

### Custom Icon

Use `icon` slot to custom icon.

```html
<bot-tabbar v-model="active">
  <bot-tabbar-item badge="3">
    <span>Custom</span>
    <template #icon="props">
      <img :src="props.active ? icon.active : icon.inactive" />
    </template>
  </bot-tabbar-item>
  <bot-tabbar-item :icon="SearchLine">Tab</bot-tabbar-item>
  <bot-tabbar-item :icon="GearLine">Tab</bot-tabbar-item>
</bot-tabbar>
```

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

export default {
  setup() {
    const active = ref(0);
    const icon = {
      active:
        'https://cdn-web-sg.botim.me/upd/v1/mp/perm/npuploadtools/202306/15-ca652e35fd074e1d82fc28e486b0a836.png',
      inactive:
        'https://cdn-web-sg.botim.me/upd/v1/mp/perm/npuploadtools/202306/15-eabc6c49f8164e4fbe0e478f918c9b0c.png',
    };
    return {
      icon,
      active,
    };
  },
};
```

### Custom Color

```html
<bot-tabbar v-model="active" active-color="#ee0a24">
  <bot-tabbar-item :icon="Home02Line">Tab</bot-tabbar-item>
  <bot-tabbar-item :icon="SearchLine">Tab</bot-tabbar-item>
  <bot-tabbar-item :icon="CustomerServiceSolid">Tab</bot-tabbar-item>
  <bot-tabbar-item :icon="GearLine">Tab</bot-tabbar-item>
</bot-tabbar>
```

### Change Event

```html
<bot-tabbar v-model="active" @change="onChange">
  <bot-tabbar-item :icon="Home02Line">Tab 1</bot-tabbar-item>
  <bot-tabbar-item :icon="SearchLine">Tab 2</bot-tabbar-item>
  <bot-tabbar-item :icon="CustomerServiceSolid">Tab 3</bot-tabbar-item>
  <bot-tabbar-item :icon="GearLine">Tab 4</bot-tabbar-item>
</bot-tabbar>
```

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

export default {
  setup() {
    const active = ref(0);
    const onChange = (index) => showToast(`Tab ${index}`);
    return {
      active,
      onChange,
    };
  },
};
```

### Route Mode

```html
<router-view />

<bot-tabbar route>
  <bot-tabbar-item replace to="/home" :icon="Home02Line">Tab</bot-tabbar-item>
  <bot-tabbar-item replace to="/search" :icon="SearchLine">Tab</bot-tabbar-item>
</bot-tabbar>
```

---

# Component: Tag

## Introduction
Used to mark keywords and summarize the main content.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| type | Type, can be set to `default` `disable` | _string_ | `default` |
| size | Size, can be set to `large` `small` `normal` | _string_ | `normal` |
| active | Whether to be active style | _boolean_ | `false` |
| clickable | Whether to be clickable style | _boolean_ | `false` |
| color | Custom color | _string_ | - |
| show | Whether to show tag | _boolean_ | `true` |
| plain | Whether to be plain style | _boolean_ | `false` |
| round | Whether to be round style | _boolean_ | `false` |
| mark | Whether to be mark style | _boolean_ | `false` |
| text-color | Text color | _string_ | `white` |
| closeable | Whether to be closeable | _boolean_ | `false` |

## Events
| Event | Description                        | Arguments           |
| ----- | ---------------------------------- | ------------------- |
| click | Emitted when component is clicked  | _event: MouseEvent_ |
| close | Emitted when close icon is clicked | _event: MouseEvent_ |

## Slots
| Name    | Description  |
| ------- | ------------ |
| default | Default slot |

## Types
The component exports the following type definitions:

```ts
import type { TagSize, TagType, TagProps } from 'botim/bo';
```

## Usage Examples
### Basic Usage

```html
<bot-tag>Tag</bot-tag> <bot-tag type="diasble">Tag</bot-tag>
```

### Plain style

```html
<bot-tag plain>Tag</bot-tag>
```

### Round style

```html
<bot-tag round>Tag</bot-tag>
```

### Mark style

```html
<bot-tag mark>Tag</bot-tag>
```

### Closeable

```html
<bot-tag :show="show" closeable @close="close"> Tag </bot-tag>
```

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

export default {
  setup() {
    const show = ref(true);
    const close = () => {
      show.value = false;
    };

    return {
      show,
      close,
    };
  },
};
```

### Custom Size

```html
<bot-tag>Tag</bot-tag>
<bot-tag size="small">Tag</bot-tag>
<bot-tag size="large">Tag</bot-tag>
```

### Use Slots

```html
<bot-tag>
  <!-- Use the icon slot to customize the left icon -->
  <template #icon>
    <bot-icon :icon="UserLine" />
  </template>
  Tag
</bot-tag>

<bot-tag>
  <!-- Use the right-icon slot to customize the right icon -->
  <template #rightIcon>
    <bot-icon :icon="UserLine" />
  </template>
  Tag
</bot-tag>

<style>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
</style>
```

### Custom Color

```html
<bot-tag color="#7232dd">Tag</bot-tag>
<bot-tag color="#ffe1e1" text-color="#ad0000">Tag</bot-tag>
<bot-tag color="#7232dd" plain>Tag</bot-tag>
```

---

# Component: TextEllipsis

## Introduction
Display ellipsis for long text and support for expanding or collapsing text.

## Props
| Attribute     | Description              | Type               | Default |
| ------------- | ------------------------ | ------------------ | ------- |
| rows          | Number of rows displayed | _number \| string_ | `1`     |
| content       | The text displayed       | _string_           | -       |
| expand-text   | Expand operation text    | _string_           | -       |
| collapse-text | Collapse operation text  | _string_           | -       |
| dots          | Text content of ellipsis | _string_           | `'...'` |

## Events
| Event        | Description                             | Arguments           |
| ------------ | --------------------------------------- | ------------------- |
| click-action | Emitted when Expand/Collapse is clicked | _event: MouseEvent_ |

## Types
The component exports the following type definitions:

```ts
import type { TextEllipsisProps, TextEllipsisThemeVars } from '@botim/bot';
```

## Usage Examples
### Basic Usage

Show one rows by default.

```html
<bot-text-ellipsis :content="text" />
```

```js
export default {
  setup() {
    const text =
      'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';
    return { text };
  },
};
```

### Expand/Collapse

Support Expand/Collapse.

```html
<bot-text-ellipsis
  :content="text"
  expand-text="expand"
  collapse-text="collapse"
/>
```

```js
export default {
  setup() {
    const text =
      "The fleeting time of one's life is everything that belongs to a person. Only this thing truly belongs to you. Everything else is just a momentary pleasure or misfortune, which will soon be gone with the passing of time.";
    return { text };
  },
};
```

### Customize rows

Display the number of `rows` by setting rows.

```html
<bot-text-ellipsis
  rows="3"
  :content="text"
  expand-text="expand"
  collapse-text="collapse"
/>
```

```js
export default {
  setup() {
    const text =
      "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.";
    return { text };
  },
};
```

---

# Component: TimePicker

## Introduction
Used to select time, usually used with the [Popup](#/en-US/popup) component.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Current time | _string[]_ | - |
| simple | Simple model. | _boolean_ | `false` |
| start-time | Start Time. Valid in simple model | _number[] \| string[]_ | `[0, 0]` |
| end-time | End Time. Valid in simple model | _number[] \| string[]_ | `[23, 59]` |
| Step | Time Step. Valid in simple model | _number_ | `30` |
| columns-type | Columns type. Invalid in simple mode | _string[]_ | `['hour', 'minute']` |
| min-hour | Min hour | _number \| string_ | `0` |
| max-hour | Max hour | _number \| string_ | `23` |
| min-minute | Min minute | _number \| string_ | `0` |
| max-minute | Max minute | _number \| string_ | `59` |
| min-second | Min second. Invalid in simple mode | _number \| string_ | `0` |
| max-second | Max second. Invalid in simple mode | _number \| string_ | `59` |
| title | Toolbar title. Invalid in simple mode | _string_ | `''` |
| confirm-button-text | Text of confirm button. Invalid in simple mode | _string_ | `Confirm` |
| cancel-button-text | Text of cancel button. Invalid in simple mode | _string_ | `Cancel` |
| show-toolbar | Whether to show toolbar. Invalid in simple mode | _boolean_ | `true` |
| loading | Whether to show loading prompt. Invalid in simple mode | _boolean_ | `false` |
| readonly | Whether to be readonly. Invalid in simple mode | _boolean_ | `false` |
| filter | Option filter. Invalid in simple mode | _(type: string, options: PickerOption[]) => PickerOption[]_ | - |
| formatter | Option text formatter. Invalid in simple mode | _(type: string, option: PickerOption) => PickerOption_ | - |
| option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px`. Invalid in simple mode | _number \| string_ | `44` |
| visible-option-num | Count of visible columns. Invalid in simple mode | _number \| string_ | `6` |
| swipe-duration | Duration of the momentum animation, unit `ms`. Invalid in simple mode | _number \| string_ | `1000` |

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| confirm | Emitted when the confirm button is clicked. Invalid in simple mode | _{ selectedValues, selectedOptions, selectedIndexes }_ |
| cancel | Emitted when the cancel button is clicked. Invalid in simple mode | _{ selectedValues, selectedOptions, selectedIndexes }_ |
| change | Emitted when current option is changed | _{ selectedValues, selectedOptions, selectedIndexes, columnIndex }_ |

## Slots
| Name | Description | SlotProps |
| --- | --- | --- |
| toolbar | Custom toolbar content. Invalid in simple mode | - |
| title | Custom title. Invalid in simple mode | - |
| confirm | Custom confirm button text. Invalid in simple mode | - |
| cancel | Custom cancel button text. Invalid in simple mode | - |
| option | Custom option content. Invalid in simple mode | _option: PickerOption, index: number_ |
| columns-top | Custom content above columns. Invalid in simple mode | - |
| columns-bottom | Custom content below columns. Invalid in simple mode | - |

## Types
The component exports the following type definitions:

```ts
import type { TimePickerProps, TimePickerColumnType } from 'botim/bot';
```

## Usage Examples
### Basic Usage

```html
<bot-time-picker v-model="currentTime" title="Choose Time" />
```

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

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

### Columns Type

Using `columns-type` prop to control the type of columns.

For example:

- Pass in `['hour']` to select hour.
- Pass in `['minute']` to select minute.
- Pass in `['minute', 'second']` to select minute and second.
- Pass in `['hour', 'minute', 'second']` to select hour, minute and second.

```html
<bot-time-picker
  v-model="currentTime"
  title="Choose Time"
  :columns-type="columnsType"
/>
```

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

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

### Time Range

```html
<bot-time-picker
  v-model="currentTime"
  title="Choose Time"
  :min-hour="10"
  :max-hour="20"
  :min-minute="30"
  :max-minute="40"
/>
```

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

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

### Options Formatter

Using `formatter` prop to format option text.

```html
<bot-time-picker
  v-model="currentTime"
  title="Choose Time"
  :formatter="formatter"
/>
```

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

export default {
  setup() {
    const currentTime = ref(['12', '00']);
    const formatter = (type, option) => {
      if (type === 'hour') {
        option.text += 'h';
      }
      if (type === 'minute') {
        option.text += 'm';
      }
      return option;
    };

    return {
      filter,
      currentTime,
    };
  },
};
```

### Options Filter

Using `filter` prop to filter options.

```html
<bot-time-picker v-model="currentTime" title="Choose Time" :filter="filter" />
```

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

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

    const filter = (type, options) => {
      if (type === 'minute') {
        return options.filter((option) => Number(option) % 10 === 0);
      }
      return options;
    };

    return {
      filter,
      currentTime,
    };
  },
};
```

### simple

```html
<bot-time-picker
  v-model="simpleTime"
  simple
  :start-time="[10, 0]"
  :end-time="[15, 0]"
/>
```

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

export default {
  setup() {
    const simpleTime = ref(['12', '00']);

    return {
      currentTime,
    };
  },
};
```

---

# Component: Toast

## Introduction
Black semi-transparent pop-up hint in the middle of the page, used for message notification, loading hint, operation result hint and other scenarios.

## Slots
You can use following slots when using `Toast` component:

| Name    | Description    |
| ------- | -------------- |
| message | Custom message |

## Types
The component exports the following type definitions:

```ts
import type {
  ToastType,
  ToastProps,
  ToastOptions,
  ToastPosition,
  ToastWordBreak,
} from '@botim/bot';
```

## Usage Examples
### Text

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

showToast('Some messages');
```

### Closeable

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

showToast({
  message: 'Some messages',
  showClose: true,
  closeText: 'Undo',
});
```

### Loading

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

showLoadingToast({
  message: 'Loading...',
  forbidClick: true,
});
```

### Botim/Dot/Success/Info/Warning/Fail

```js
import {
  showBotimToast,
  showDotToast,
  showSuccessToast,
  showInfoToast,
  showWarningToast,
  showFailToast,
} from '@botim/bot';

showBotimToast();
showDotToast();
showSuccessToast('Success');
showInfoToast('Fail');
showWarningToast('Warning');
showFailToast('Fail');
```

### Custom Icon

```js
import { showToast, showLoadingToast } from '@botim/bot';
import { CheckCircleSolid } from '@botim/buckit-icons';

showToast({
  message: 'Custom Icon',
  icon: CheckCircleSolid,
});

showLoadingToast({
  message: 'Loading...',
  forbidClick: true,
  loadingType: 'spinner',
});
```

### Custom Position

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

showToast({
  message: 'Top',
  position: 'top',
});

showToast({
  message: 'Mddile',
  position: 'center',
});

showToast({
  message: 'Bottom',
  bottom: '200px',
});
```

### Word Break

Using `wordBreak` option to set whether line breaks appear wherever the text would otherwise overflow its content box. The default value is `break-all`, and can be set to `break-word` or `normal`.

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

showToast({
  message: 'This message will contain a incomprehensibilities long word.',
  wordBreak: 'break-all',
});

showToast({
  message: 'This message will contain a incomprehensibilities long word.',
  wordBreak: 'break-word',
});
```

### Update Message

```js
import { showLoadingToast, closeToast } from '@botim/bot';

const toast = showLoadingToast({
  duration: 0,
  forbidClick: true,
  loadingType: 'spinner',
  message: '3 seconds',
});

let second = 3;
const timer = setInterval(() => {
  second--;
  if (second) {
    toast.message = `${second} seconds`;
  } else {
    clearInterval(timer);
    closeToast();
  }
}, 1000);
```

### Set Default Options

The Toast default configuration can be globally modified with the `setToastDefaultOptions` function.

```js
import { setToastDefaultOptions, resetToastDefaultOptions } from '@botim/bot';

setToastDefaultOptions({ duration: 2000 });

setToastDefaultOptions('loading', { forbidClick: true });

resetToastDefaultOptions();

resetToastDefaultOptions('loading');
```

### Use Toast Component

If you want to render Vue components within a Toast, you can use the Toast component.

```html
<bot-toast v-model:show="show" style="padding: 0">
  <template #message>
    <bot-image :src="image" width="200" height="140" style="display: block" />
  </template>
</bot-toast>
```

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

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

---

# Component: TreeSelect

## Introduction
Used to select from a set of related data sets.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| items | Required datasets for the component | _TreeSelectItem[]_ | `[]` |
| height | Height | _number \| string_ | `300` |
| main-active-index | The index of selected parent node | _number \| string_ | `0` |
| active-id | Id of selected item | _number \| string \|<br>(number \| string)[]_ | `0` |
| max | Maximum number of selected items | _number \| string_ | `Infinity` |
| selected-icon | Selected icon | _Component_ | `CheckCircleSolid` |

## Events
| Event      | Description                          | Arguments               |
| ---------- | ------------------------------------ | ----------------------- |
| click-nav  | Emitted when parent node is selected | _index: number_         |
| click-item | Emitted when item is selected        | _item: TreeSelectChild_ |

## Slots
| Name     | Description                    | SlotProps               |
| -------- | ------------------------------ | ----------------------- |
| nav-text | Custom name of the parent node | _item: TreeSelectChild_ |
| content  | Custom right content           | -                       |

## Types
The component exports the following type definitions:

```ts
import type {
  TreeSelectItem,
  TreeSelectChild,
  TreeSelectProps,
} from '@botim/bot';
```

## Usage Examples
### Radio Mode

```html
<bot-tree-select
  v-model:active-id="activeId"
  v-model:main-active-index="activeIndex"
  :items="items"
/>
```

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

export default {
  setup() {
    const activeId = ref(1);
    const activeIndex = ref(0);
    const items = [
      {
        text: 'Group 1',
        children: [
          { text: 'Delaware', id: 1 },
          { text: 'Florida', id: 2 },
          { text: 'Georqia', id: 3, disabled: true },
        ],
      },
      {
        text: 'Group 2',
        children: [
          { text: 'Alabama', id: 4 },
          { text: 'Kansas', id: 5 },
          { text: 'Louisiana', id: 6 },
        ],
      },
      { text: 'Group 3', disabled: true },
    ];

    return {
      items,
      activeId,
      activeIndex,
    };
  },
};
```

### Multiple Mode

```html
<bot-tree-select
  v-model:active-id="activeIds"
  v-model:main-active-index="activeIndex"
  :items="items"
/>
```

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

export default {
  setup() {
    const activeId = ref([1, 2]);
    const activeIndex = ref(0);
    const items = [
      {
        text: 'Group 1',
        children: [
          { text: 'Delaware', id: 1 },
          { text: 'Florida', id: 2 },
          { text: 'Georqia', id: 3, disabled: true },
        ],
      },
      {
        text: 'Group 2',
        children: [
          { text: 'Alabama', id: 4 },
          { text: 'Kansas', id: 5 },
          { text: 'Louisiana', id: 6 },
        ],
      },
      { text: 'Group 3', disabled: true },
    ];

    return {
      items,
      activeId,
      activeIndex,
    };
  },
};
```

### Custom Content

```html
<bot-tree-select
  v-model:main-active-index="activeIndex"
  height="55vw"
  :items="items"
>
  <template #content>
    <bot-image
      v-if="activeIndex === 0"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
    />
    <bot-image
      v-if="activeIndex === 1"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
    />
  </template>
</bot-tree-select>
```

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

export default {
  setup() {
    const activeIndex = ref(0);
    return {
      activeIndex,
      items: [{ text: 'Group 1' }, { text: 'Group 2' }],
    };
  },
};
```

### Show Badge

```html
<bot-tree-select
  v-model:main-active-index="activeIndex"
  height="55vw"
  :items="items"
/>
```

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

export default {
  setup() {
    const activeIndex = ref(0);
    return {
      activeIndex,
      items: [
        {
          text: 'Group 1',
          children: [
            { text: 'Delaware', id: 1 },
            { text: 'Florida', id: 2 },
            { text: 'Georqia', id: 3, disabled: true },
          ],
          dot: true,
        },
        {
          text: 'Group 2',
          children: [
            { text: 'Alabama', id: 4 },
            { text: 'Kansas', id: 5 },
            { text: 'Louisiana', id: 6 },
          ],
          badge: 5,
        },
      ],
    };
  },
};
```

---

# Component: Uploader

## Introduction
Used to upload a local image or file to the server and display a preview image and upload progress during the upload process. The Uploader component does not currently contain the interface logic for uploading files to the server, this step needs to be implemented by the user.

## Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | List of uploaded files | _FileListItem[]_ | - |
| accept | Accepted [file type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) | _string_ | `image/*` |
| name | Input name, usually a unique string or number | _number \| string_ | - |
| preview-size | Size of preview image | _number \| string \| Array_ | `80px` |
| preview-image | Whether to show image preview | _boolean_ | `true` |
| preview-full-image | Whether to show full screen image preview when image is clicked | _boolean_ | `true` |
| preview-options | Options of full screen image preview, see [ImagePreview](#/en-US/image-preview) | _object_ | - |
| multiple | Whether to enable multiple selection pictures | _boolean_ | `false` |
| disabled | Whether to disabled the upload | _boolean_ | `false` |
| readonly | Whether to make upload area readonly | _boolean_ | `false` |
| deletable | Whether to show delete icon | _boolean_ | `true` |
| show-upload | Whether to show upload area | _boolean_ | `true` |
| lazy-load | Whether to enable lazy load, should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
| capture | Capture, can be set to `camera` | _string_ | - |
| after-read | Hook after reading the file | _Function_ | - |
| before-read | Hook before reading the file, return false to stop reading the file, can return Promise | _Function_ | - |
| before-delete | Hook before delete the file, return false to stop reading the file, can return Promise | _Function_ | - |
| max-size | Max size of file | _number \| string \| (file: File) => boolean_ | `Infinity` |
| max-count | Max count of image | _number \| string_ | `Infinity` |
| result-type | Type of file read result, can be set to `file` `text` | _string_ | `dataUrl` |
| upload-text | Upload text | _string_ | - |
| image-fit | Preview image fit mode | _string_ | `cover` |
| upload-icon | Upload icon | _string_ | `photograph` |

> Tips: accept, capture and multiple are the attributes of the native input tag, there may be some compatibility issues under different systems and WebView.

## Events
| Event | Description | Arguments |
| --- | --- | --- |
| oversize | Emitted when file size over limit | Same as after-read |
| click-upload | Emitted when click upload area | _event: MouseEvent_ |
| click-preview | Emitted when preview image is clicked | Same as after-read |
| close-preview | Emitted when the full screen image preview is closed | - |
| delete | Emitted when preview file is deleted | Same as after-read |

## Slots
| Name | Description | SlotProps |
| --- | --- | --- |
| default | Custom upload area | - |
| preview-delete `v.3.5.0` | Custom delete icon | `item: FileListItem` |
| preview-cover | Custom content that covers the image preview | `item: FileListItem` |

## Types
The component exports the following type definitions:

```ts
import type {
  UploaderProps,
  UploaderInstance,
  UploaderResultType,
  UploaderFileListItem,
} from '@botim/bot';
```

`UploaderInstance` is the type of component instance:

```ts
import { ref } from 'vue';
import type { UploaderInstance } from '@botim/bot';

const uploaderRef = ref<UploaderInstance>();

uploaderRef.value?.chooseFile();
```

## Usage Examples
### Basic Usage

```html
<bot-uploader :after-read="afterRead" />
```

```js
export default {
  setup() {
    const afterRead = (file) => {
      console.log(file);
    };

    return {
      afterRead,
    };
  },
};
```

### Preview File

```html
<bot-uploader v-model="fileList" multiple />
```

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

export default {
  setup() {
    const fileList = ref([
      { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
      { url: 'https://cloud-image', isImage: true },
    ]);

    return {
      fileList,
    };
  },
};
```

### Upload Status

```html
<bot-uploader v-model="fileList" :after-read="afterRead" />
```

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

export default {
  setup() {
    const fileList = ref([
      {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
        status: 'uploading',
        message: 'Uploading...',
      },
      {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',
        status: 'failed',
        message: 'Failed',
      },
    ]);

    const afterRead = (file) => {
      file.status = 'uploading';
      file.message = 'Uploading...';

      setTimeout(() => {
        file.status = 'failed';
        file.message = 'Failed';
      }, 1000);
    };

    return {
      fileList,
      afterRead,
    };
  },
};
```

### Max Count

```html
<bot-uploader v-model="fileList" multiple :max-count="2" />
```

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

export default {
  setup() {
    const fileList = ref([]);

    return {
      fileList,
    };
  },
};
```

### Max Size

```html
<bot-uploader multiple :max-size="500 * 1024" @oversize="onOversize" />
```

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

export default {
  setup() {
    const onOversize = (file) => {
      console.log(file);
      showToast('File size cannot exceed 500kb');
    };

    return {
      onOversize,
    };
  },
};
```

If you need to make different size limits for different types of files, you can pass a function to the `max-size` props.

```html
<bot-uploader multiple :max-size="isOverSize" />
```

```js
export default {
  setup() {
    const isOverSize = (file) => {
      const maxSize = file.type === 'image/jpeg' ? 500 * 1024 : 1000 * 1024;
      return file.size >= maxSize;
    };
    return {
      isOverSize,
    };
  },
};
```

### Custom Upload Area

```html
<bot-uploader>
  <bot-button icon="plus" type="primary">Upload Image</bot-button>
</bot-uploader>
```

### Preview Cover

```html
<bot-uploader v-model="fileList">
  <template #preview-cover="{ file }">
    <div class="preview-cover bot-ellipsis">{{ file.name }}</div>
  </template>
</bot-uploader>

<style>
  .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
</style>
```

### Preview Size

Using `preview-size` prop to custom the size of preview image.

```html
<!-- The default unit is px -->
<bot-uploader v-model="fileList" preview-size="60" />
<!-- Support other units, such as rem, vh, vw -->
<bot-uploader v-model="fileList" preview-size="5rem" />
```

You can set the width and height separately.

```html
<bot-uploader v-model="fileList" :preview-size="[60, 40]" />
```

### Before Read

```html
<bot-uploader :before-read="beforeRead" />
```

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

export default {
  setup() {
    // 返回布尔值
    const beforeRead = (file) => {
      if (file.type !== 'image/jpeg') {
        showToast('Please upload an image in jpg format');
        return false;
      }
      return true;
    };

    // 返回 Promise
    const asyncBeforeRead = (file) =>
      new Promise((resolve, reject) => {
        if (file.type !== 'image/jpeg') {
          showToast('Please upload an image in jpg format');
          reject();
        } else {
          const img = new File(['foo'], 'bar.jpg', {
            type: 'image/jpeg',
          });
          resolve(img);
        }
      });

    return {
      beforeRead,
      asyncBeforeRead,
    };
  },
};
```

### Disable Uploader

Use `disabled` prop to disable uploader.

```html
<bot-uploader disabled />
```

### Customize Single Preview Image Style

```html
<bot-uploader v-model="fileList" :deletable="false" />
```

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

export default {
  setup() {
    const fileList = ref([
      {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',
        deletable: true,
        beforeDelete: () => {
          showToast(
            'Customize the events and styles of a single preview image'
          );
        },
      },
      {
        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',
        imageFit: 'contain',
      },
    ]);

    return { fileList };
  },
};
```

---