### Install Tailwind CSS

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/atomic-css.md

Install Tailwind CSS version 3. Higher versions are not supported. This command installs Tailwind CSS as a development dependency.

```bash
npm install tailwindcss@3 -D
```

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

### Spacing and Sizing Utility Classes

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/atomic-css.md

Example SCSS utility classes for controlling width, height, margin, padding, top position, and gap. These classes use `rpx` units and are configured in `tailwind.config.js`.

```scss
.w-100 {
  width: 100rpx !important;
}

.h-100 {
  height: 100rpx !important;
}

.m-100 {
  margin: 100rpx !important;
}

.p-100 {
  padding: 100rpx !important;
}

.top-100 {
  top: 100rpx !important;
}

.gap-100 {
  gap: 100rpx !important;
}

// ...
```

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

### Picker CSS Variables

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/picker.md

Customize the appearance of the Picker component using CSS variables. This example shows the available variables for theming.

```scss
:root {
  --picker-item-height: 44px;
  --picker-mask-color: rgba(255, 255, 255, 0.7);
  --picker-indicator-color: #000;
  --picker-indicator-border: 1px solid #e0e0e0;
  --picker-column-width: auto;
}

```

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

### Imperative Popup Agent Setup

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/popup.md

Place a `sar-popup-agent` component on the page to manage popups imperatively. You can assign an `id` to the agent to control specific agents when displaying multiple imperative popups.

```vue
<sar-popup-agent></sar-popup-agent>
```

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

### ScrollList CSS Variables

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/scroll-list.md

Provides an example of customizing the ScrollList component's appearance using CSS variables for theming.

```scss
<<< @comp/scroll-list/variables.scss#variables
```

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

### Local Theme Customization with CSS Variables

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/guide/theme.md

Customize themes for specific components or sections by applying CSS variables directly to the element or its parent container. This example shows how to change the `--sar-primary` color for a button locally.

```html
<sar-button>button</sar-button>

<view style="--sar-primary: green;">
  <sar-button>button</sar-button>
</view>
```

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

### Creating Request Instances

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/request.md

Shows how to use the `createRequest` factory function to instantiate `Request` objects with different base URLs.

```APIDOC
## Creating Request Instances

Instantiate `Request` objects using the `createRequest` factory function, specifying a `baseURL` for each instance.

### Example Usage

```ts
export const requestV1 = createRequest({
  baseURL: 'http://localhost/api-v1',
})

export const requestV2 = createRequest({
  baseURL: 'http://localhost/api-v2',
})
```
```

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

### getLunarDayName

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/date.md

Gets the Chinese name for a given lunar day.

```APIDOC
## getLunarDayName

### Description
Gets the Chinese name for a lunar day. Example: 初一, 十二, 廿一.

### Signature
```ts
function getLunarDayName(day: number): string
```
```

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

### Basic Picker Usage

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/picker.md

Demonstrates the basic usage of the Picker component. Bind the current value using `v-model` and configure options with the `columns` prop.

```vue
<template>
  <Picker v-model="value" :columns="columns" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const columns = ref([
  '选项1',
  '选项2',
  '选项3',
])

```

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

### Import CascaderPopout

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/cascader-popout.md

Import the CascaderPopout component from the sard-uniapp library.

```javascript
import CascaderPopout from 'sard-uniapp/components/cascader-popout/cascader-popout.vue'
```

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

### getLunarMonthName

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/date.md

Gets the Chinese name for a given lunar month.

```APIDOC
## getLunarMonthName

### Description
Gets the Chinese name for a lunar month. Months are 1-indexed. Example:正月, 十月, 腊月.

### Signature
```ts
function getLunarMonthName(month: number, isLeapMonth?: boolean): string
```
```

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

### getLunarLeapMonth

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/date.md

Gets the leap month of a given lunar year.

```APIDOC
## getLunarLeapMonth

### Description
Gets the leap month of a lunar year. Months are 1-indexed (0 indicates no leap month).

### Signature
```ts
function getLunarLeapMonth(year: number): number
```
```

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

### Import CascaderInput

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/cascader-input.md

Import the CascaderInput component from the library.

```javascript
import CascaderInput from 'sard-uniapp/components/cascader-input/cascader-input.vue'
```

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

### getLunarYearDays

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/date.md

Gets the total number of days in a given lunar year.

```APIDOC
## getLunarYearDays

### Description
Gets the total number of days in a lunar year.

### Signature
```ts
function getLunarYearDays(year: number): number
```
```

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

### Import DatetimePicker

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/datetime-picker.md

Import the DatetimePicker component from the library.

```js
import DatetimePicker from 'sard-uniapp/components/datetime-picker/datetime-picker.vue'
```

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

### getLunarMonthDays

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/date.md

Gets the number of days in a specific month of a given lunar year.

```APIDOC
## getLunarMonthDays

### Description
Gets the number of days in a specific month of a lunar year. Months are 1-indexed.

### Signature
```ts
function getLunarMonthDays(year: number, month: number): number
```
```

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

### Import Select Components

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/select.md

Import the necessary Select, SelectOption, and SelectOptionGroup components for use in your application.

```javascript
import Select from 'sard-uniapp/components/select/select.vue'
import SelectOption from 'sard-uniapp/components/select-option/select-option.vue'
import SelectOptionGroup from 'sard-uniapp/components/select-option-group/select-option-group.vue'
```

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

### getLunarLeapMonthDays

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/date.md

Gets the number of days in the leap month of a given lunar year.

```APIDOC
## getLunarLeapMonthDays

### Description
Gets the number of days in the leap month of a lunar year.

### Signature
```ts
function getLunarLeapMonthDays(year: number): number
```
```

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

### getLunarHourName

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/date.md

Gets the Chinese name for a given lunar hour (traditional Chinese timekeeping).

```APIDOC
## getLunarHourName

### Description
Gets the Chinese name for a lunar hour. Example: 子初, 子正, 午初, 午正.

### Signature
```ts
function getLunarHourName(hour: number): string
```
```

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

### Import Popup Component

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/popup.md

Import the Popup component from the library.

```js
import Popup from 'sard-uniapp/components/popup/popup.vue'
```

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

### Initialize URLQuery

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/url-query.md

Instantiate URLQuery with a query string. Supports TypeScript and JavaScript.

```ts
import { URLQuery } from 'sard-uniapp'

const query = new URLQuery('foo=123&bar=456')
```

```js
import { URLQuery } from 'sard-uniapp'
const query = new URLQuery('foo=123&bar=456')
```

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

### Import CalendarInput

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/calendar-input.md

Import the CalendarInput component from the library.

```javascript
import CalendarInput from 'sard-uniapp/components/calendar-input/calendar-input.vue'
```

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

### Get Translated Text

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/guide/i18n.md

The `useTranslate` hook provides a `t` function to retrieve translated strings. It supports dynamic data interpolation and can be prefixed for cleaner access.

```ts
// 任意组件中

const { t } = useTranslate('calendar')

// 中文
t('start') // '开始'

// 英文
t('start') // 'start'

// 可传入数据
t('monthTitle', {
  year: 2000,
  month: '05',
}) // '2000年05月'
```

```js
// 任意组件中
const { t } = useTranslate('calendar')
// 中文
t('start') // '开始'
// 英文
t('start') // 'start'
// 可传入数据
t('monthTitle', {
  year: 2000,
  month: '05',
}) // '2000年05月'
```

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

### URLQuery Constructor

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/url-query.md

Initializes a new URLQuery object. It can be initialized with a string, an object, an array of key-value pairs, or another URLQuery instance.

```APIDOC
## Constructor

```ts
constructor URLQuery(init?: string[][] | Record<string, string> | string | URLQuery): URLQuery
```

Returns a `URLQuery` object.
```

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

### Access and Set Current Locale

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/guide/i18n.md

Use the `useLocale` hook in any component to get a reactive reference to the current locale. You can read its value or update it to switch languages.

```ts
// 任意组件中

const locale = useLocale()!

// 获取
console.log(locale.value) // zhCN

// 设置
locale.value = 'enUS'
```

```js
// 任意组件中
const locale = useLocale()
// 获取
console.log(locale.value) // zhCN
// 设置
locale.value = 'enUS'
```

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

### Import PickerPopout

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/picker-popout.md

Import the PickerPopout component from the sard-uniapp library.

```javascript
import PickerPopout from 'sard-uniapp/components/picker-popout/picker-popout.vue'
```

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

### Basic Usage

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/datetime-picker.md

Use v-model to bind the current value and the type attribute to set the displayed column types. More examples can be found in the DatetimePickerPopout component documentation.

```vue
<<< @demo/datetime-picker/demo/Basic.vue
```

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

### Import SelectInput

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/select-input.md

Import the SelectInput component from the sard-uniapp library.

```javascript
import SelectInput from 'sard-uniapp/components/select-input/select-input.vue'
```

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

### Import Picker Component

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/picker.md

Import the Picker component from the library. This is a required step before using the component.

```javascript
import Picker from 'sard-uniapp/components/picker/picker.vue'
```

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

### Select Component API

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/select.md

API documentation for the Select component, detailing its props, slots, and events.

```APIDOC
## SelectProps

| 属性               | 描述                                              | 类型                                                                     | 默认值                                                   |
| ------------------ | ------------------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------- |
| root-class         | 组件根元素类名                                    | string                                                                   | -
| root-style         | 组件根元素样式                                    | StyleValue                                                               | -
| model-value        | 当前绑定的值                                      | any                                                                      | -
| multiple           | 是否允许多选                                      | boolean                                                                  | false
| multiple-limit     | 多选时允许最多选择的个数，为0则不限制             | number                                                                   | 0
| filterable         | 是否允许筛选                                      | boolean                                                                  | false
| filter-placeholder | 筛选输入框的占位文案                              | string                                                                   | -
| filter-method      | 允许筛选时的回调                                  | `(query: string) => void`                                                | -
| remote             | 是否允许远程加载数据                              | boolean                                                                  | false
| remote-method      | 允许远程加载数据时的回调                          | `(query: string, page: number, isRefresh: boolean) => Promise<boolean>` | -
| threshold          | 触发远程加载回调的阈值，单位ms                    | number                                                                   | 500
| show-toolbar       | 多选时，是否显示工具栏                            | boolean                                                                  | false
| options            | 选项的数据                                        | Record<string, any>[]                                                    | []
| option-keys        | 自定义 `options` 中的字段                         | OptionKeys                                                               | `{label: 'label', value: 'value', children: 'children'}`
| value-key          | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | OptionKeys                                                               | `{label: 'label', value: 'value', children: 'children'}`

## OptionKeys

```tsx
interface OptionKeys {
  label?: string
  value?: string
  children?: string
}
```

## SelectSlots

| 插槽    | 描述           | 属性 |
| ------- | -------------- | ---- |
| default | 自定义默认内容 | -    |

## SelectEmits

| 事件               | 描述                     | 类型                   |
| ------------------ | ------------------------ | ---------------------- |
| update:model-value | 列表选择组件值改变时触发 | `(value: any) => void` |
| change             | 列表选择组件值改变时触发 | `(value: any) => void` |

## SelectOptionGroupProps

| 属性       | 描述                   | 类型             | 默认值 |
| ---------- | ---------------------- | ---------------- | ------ |
| root-class | 组件根元素类名         | string           | -      |
| root-style | 组件根元素样式         | StyleValue       | -      |
| label      | 选项组的标签           | string | number | -      |
| disabled   | 是否禁用组内所有的选项 | boolean          | false  |

## SelectOptionGroupSlots

| 插槽    | 描述           | 属性 |
| ------- | -------------- | ---- |
| default | 自定义默认内容 | -    |
```

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

### Basic RadioInput Usage

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/radio-input.md

Demonstrates basic usage of the RadioInput component. Set the popup title and input placeholder using `title` and `placeholder` props, and provide selectable options via the `options` prop.

```vue
<template>
  <RadioInput
    title="请选择"
    placeholder="请选择"
    :options="options"
  />
</template>

<script lang="ts" setup>
import RadioInput from 'sard-uniapp/components/radio-input/radio-input.vue'

const options = [
  { label: '选项一', value: 1 },
  { label: '选项二', value: 2 },
  { label: '选项三', value: 3 },
]
</script>

```

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

### UseSlotMachineReturn

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/lucky-draw.md

Methods and computed properties for controlling the slot machine animation.

```APIDOC
## UseSlotMachineReturn

### Description
Provides methods to control the slot machine animation and computed properties to get its current state.

### Methods
- **play**: `() => void` - Starts the slot machine animation.
- **stop**: `(index?: number[]) => void` - Starts the deceleration animation for specified columns.
- **pause**: `() => void` - Pauses the animation.
- **reset**: `() => void` - Resets the animation to its initial state.

### Computed Properties
- **playing**: `ComputedRef<boolean>` - Indicates whether the animation is currently running.
- **offset**: `ComputedRef<number[]>` - The current offset for each column.
```

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

### Import PullDownRefresh Component

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/pull-down-refresh.md

Import the PullDownRefresh component from the sard-uniapp library.

```javascript
import PullDownRefresh from 'sard-uniapp/components/pull-down-refresh/pull-down-refresh.vue'
```

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

### Basic Usage of PickerPopout

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/picker-popout.md

Demonstrates the basic usage of PickerPopout. Use `v-model` for two-way binding of the current value and `v-model:visible` to control the popout's visibility.

```vue
<template>
  <PickerPopout v-model="value" v-model:visible="visible" title="请选择">
    <template #activator>
      <van-field v-model="value" placeholder="请选择" readonly />
    </template>
  </PickerPopout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const visible = ref(false)

```

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

### Basic ScrollList Usage

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/scroll-list.md

Demonstrates the basic implementation of the ScrollList component. Content within the default slot will be rendered and made scrollable.

```vue
<<< @demo/scroll-list/demo/Basic.vue
```

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

### URLQuery Instance Methods

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/url-query.md

Details the methods available on URLQuery instances for manipulating query parameters.

```APIDOC
## Instance Methods

### append()

```ts
(method) URLQuery.append(name: string, value: string): void
```

Appends a specified key-value pair as a new query parameter.
```

```APIDOC
### delete()

```ts
(method) URLQuery.delete(name: string, value?: string): void
```

Deletes a specified query parameter and its corresponding value from the list.
```

```APIDOC
### entries()

```ts
(method) URLQuery.entries(): ArrayIterator<string[]>
```

Returns an iterator that allows iterating over all key-value pairs in the object.
```

```APIDOC
### forEach()

```ts
(method) URLQuery.forEach(callbackfn: (value: string, key: string, parent: URLQuery) => void, thisArg?: any): void
```

Iterates over all values in the object using a callback function.
```

```APIDOC
### get()

```ts
(method) URLQuery.get(name: string): string | null
```

Retrieves the first value for a specified query parameter.
```

```APIDOC
### getAll()

```ts
(method) URLQuery.getAll(name: string): string[]
```

Retrieves all values for a specified query parameter, returning them as an array.
```

```APIDOC
### has()

```ts
(method) URLQuery.has(name: string, value?: string): boolean
```

Returns a boolean indicating whether a specific query parameter exists.
```

```APIDOC
### keys()

```ts
(method) URLQuery.keys(): Generator<string, void, unknown>
```

Returns an iterator for all keys in the object.
```

```APIDOC
### set()

```ts
(method) URLQuery.set(name: string, value: string): void
```

Sets a new value for a query parameter. If multiple values exist, all others are removed.
```

```APIDOC
### sort()

```ts
(method) URLQuery.sort(): void
```

Sorts the query parameters by key name.
```

```APIDOC
### toString()

```ts
(method) URLQuery.toString(): string
```

Returns the query parameters as a string, suitable for direct use in a URL.
```

```APIDOC
### values()

```ts
(method) URLQuery.values(): Generator<string, void, unknown>
```

Returns an iterator for all values in the object.
```

```APIDOC
### [Symbol.iterator]()

Returns an iterator that allows iterating over the key-value pairs in the query string in the order they appear.
```

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

### useSlotMachine

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/lucky-draw.md

Function to initialize and control a slot machine animation.

```APIDOC
## useSlotMachine

### Description
Initializes a slot machine animation with configurable options and returns a control object.

### Signature
`function useSlotMachine(options: UseSlotMachineOptions): UseSlotMachineReturn`

### Parameters
#### options (UseSlotMachineOptions)
- **columns**: `number[] | unknown[][] | Ref<number[] | unknown[][]>` - The number of prizes for each column. Defaults to `[]`.
- **staggerDelay**: `number | Ref<number>` - The delay between columns in milliseconds. Defaults to `600`.
- **minSpeed**: `number | Ref<number>` - The minimum acceleration. Defaults to `0.01`.
- **maxSpeed**: `number | Ref<number>` - The maximum acceleration. Defaults to `0.3`.
- **accelTime**: `number | Ref<number>` - The acceleration time in milliseconds. Defaults to `2500`.
- **decelTime**: `number | Ref<number>` - The deceleration time in milliseconds. Defaults to `2500`.
- **easeIn**: `(progress: number) => number` - The easing function for acceleration. Defaults to `(k) => k * k`.
- **easeOut**: `(progress: number) => number` - The easing function for deceleration. Defaults to `(k) => k * (2 - k)`.
- **startDelay**: `number | Ref<number>` - The waiting time before starting acceleration in milliseconds. Defaults to `0`.
- **endDelay**: `number | Ref<number>` - The waiting time after deceleration in milliseconds. Defaults to `300`.
- **complete**: `(index: number[]) => void` - Callback function executed after the animation completes, receiving the final indices for each column.
```

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

### UseLuckyWheelReturn

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/lucky-draw.md

Methods and computed properties for controlling the lucky wheel animation.

```APIDOC
## UseLuckyWheelReturn

### Description
Provides methods to control the lucky wheel animation and computed properties to get its current state.

### Methods
- **play**: `() => void` - Starts the lucky draw animation.
- **stop**: `(index?: number) => void` - Starts the deceleration animation, optionally specifying an index.
- **pause**: `() => void` - Pauses the animation.
- **reset**: `() => void` - Resets the animation to its initial state.

### Computed Properties
- **playing**: `ComputedRef<boolean>` - Indicates whether the animation is currently running.
- **sectorDegrees**: `ComputedRef<number>` - The angle occupied by each prize sector in degrees.
- **degrees**: `ComputedRef<number>` - The current rendering angle of the turntable in degrees.
```

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

### Upload Method

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/request.md

Details the parameters available for the `request.upload` method, used for uploading files.

```APIDOC
## Upload Method

The `request.upload` method is used to upload files. It accepts a path and an options object.

### Method Signature

`request.upload(path: string, options: UploadOptions): Promise<any>`

### Parameters for Options Object

- **url** (`string`, optional): The resource URL. If not provided, it defaults to the `baseURL`.
- **baseURL** (`string`, optional): A base URL to prepend to the `url`, unless `url` is an absolute URL.
- **params** (`{ [key: string]: any }`, optional): URL parameters to send with the request.
- **getTask** (`(task: UniApp.UploadTask, config: RequestConfig) => void`, optional): A callback to get the `uni.uploadFile` task, which can be used to abort the request.
- **header** (`any`, optional): HTTP headers to send with the request. `Referer` cannot be set.
- **timeout** (`number`, optional): The timeout duration for the request in milliseconds.
- **files** (`UploadFileOptionFiles[]`, optional): A list of files to upload. Supported in App and H5 (2.6.15+).
- **fileType** (`'image' | 'video' | 'audio'`, optional): The type of file being uploaded. Required for Alipay mini program. Options are 'image', 'video', 'audio'.
- **file** (`File`, optional): A file object. Supported only in H5 (2.6.15+).
- **filePath** (`string`, optional): The path to the file resource to upload.
- **name** (`string`, optional): The key for the file, used by the server to retrieve the file content.
- **formData** (`{ [key: string]: any }`, optional): Additional form data to send with the upload request.

### Example Usage

```ts
request.upload('api/upload', {
  filePath: '/path/to/your/file',
  name: 'file',
  formData: {
    userId: '123'
  }
})
```
```

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

### Configure Animation Durations with Exceptions

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/guide/config.md

Apply a global animation duration (e.g., 0ms) to most components using `getDurationConfig` while specifying a different duration for specific components like Toast. `setConfig` can accept multiple configuration objects.

```ts
setConfig(getDurationConfig(0), {
  toast: {
    duration: 300,
  },
})
```

```js
setConfig(getDurationConfig(0), {
  toast: {
    duration: 300,
  },
})
```

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

### Import RadioInput Component

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/radio-input.md

Import the RadioInput component from the sard-uniapp library.

```js
import RadioInput from 'sard-uniapp/components/radio-input/radio-input.vue'
```

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

### Create Request Instances

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/request.md

Instantiate the generic request factory to create specific request objects for different API versions. Each instance can have its own base URL.

```ts
export const requestV1 = createRequest({
  baseURL: 'http://localhost/api-v1',
})

export const requestV2 = createRequest({
  baseURL: 'http://localhost/api-v2',
})
```

```js
export const requestV1 = createRequest({
  baseURL: 'http://localhost/api-v1',
})
export const requestV2 = createRequest({
  baseURL: 'http://localhost/api-v2',
})
```

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

### Cascaded Selection with PickerPopout

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/picker-popout.md

Illustrates how to implement cascaded selection using the PickerPopout component. This allows for hierarchical data selection.

```vue
<template>
  <PickerPopout
    v-model="value"
    v-model:visible="visible"
    title="请选择省市区"
    :columns="columns"
    is-cascade
  >
    <template #activator>
      <van-field v-model="value" placeholder="请选择省市区" readonly />
    </template>
  </PickerPopout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const visible = ref(false)
const columns = [
  {
    text: '浙江',
    children: [
      {
        text: '杭州',
        children: [
          {
            text: '西湖区'
          },
          {
            text: '滨江区'
          }
        ]
      },
      {
        text: '温州'
      }
    ]
  },
  {
    text: '江苏',
    children: [
      {
        text: '南京'
      }
    ]
  }
]

```

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

### Multi-Column Picker

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/picker.md

Implement a multi-column Picker by providing a two-dimensional array to the `columns` prop. Each inner array represents a column.

```vue
<template>
  <Picker v-model="value" :columns="columns" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const columns = ref([
  ['选项1', '选项2', '选项3'],
  ['A', 'B', 'C'],
])

```

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

### Picker with Object Options

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/picker.md

Configure the Picker to use objects for column items. Use the `optionKeys` prop to specify which object properties represent the value and label.

```vue
<template>
  <Picker v-model="value" :columns="columns" :option-keys="optionKeys" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const optionKeys = ref({
  label: 'text',
  value: 'id',
})
const columns = ref([
  { text: '选项1', id: '1' },
  { text: '选项2', id: '2' },
  { text: '选项3', id: '3' },
])

```

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

### URLQuery Instance Properties

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/url-query.md

Provides access to the properties of a URLQuery instance.

```APIDOC
## Instance Properties

### size

```ts
(getter) URLQuery.size: number
```

Returns the total number of query parameters in the `URLQuery` object.
```

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

### Basic Popup Usage

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/popup.md

Control the visibility of the popup using the `visible` prop and its display effect with the `effect` prop.

```vue
<<< @demo/popup/demo/Basic.vue
```

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

### 生成随机数

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/number.md

使用 `random` 函数生成指定范围内的随机整数。需要从 'sard-uniapp' 导入。

```ts
import { random } from 'sard-uniapp'

random(0, 10)
```

```js
import { random } from 'sard-uniapp'
random(0, 10)
```

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

### Basic Select Usage

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/select.md

Demonstrates the basic usage of the Select component. The `v-model` directive binds to the `value` property of the selected `SelectOption`.

```vue
<template>
  <Select v-model="selectedValue">
    <SelectOption value="1">Option 1</SelectOption>
    <SelectOption value="2">Option 2</SelectOption>
  </Select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectedValue = ref('')
</script>
```

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

### Grayscale Scene Color Utilities

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/atomic-css.md

Adds utility classes for grayscale scene colors, providing adaptable background and text colors for light and dark system themes. These classes use CSS variables for dynamic theming.

```scss
.sbg-body {
  background-color: var(--sar-body-bg) !important;
}

.sbg-secondary {
  background-color: var(--sar-secondary-bg) !important;
}

.sbg-tertiary {
  background-color: var(--sar-tertiary-bg) !important;
}

.sbg-fourth {
  background-color: var(--sar-fourth-bg) !important;
}

.sbg-emphasis {
  background-color: var(--sar-emphasis-bg) !important;
}

.sbg-active {
  background-color: var(--sar-active-bg) !important;
}

.sbg-active-deep {
  background-color: var(--sar-active-deep-bg) !important;
}

.stext-body {
  color: var(--sar-body-color) !important;
}

.stext-secondary {
  color: var(--sar-secondary-color) !important;
}

.stext-tertiary {
  color: var(--sar-tertiary-color) !important;
}

.stext-fourth {
  color: var(--sar-fourth-color) !important;
}

.stext-emphasis {
  color: var(--sar-emphasis-color) !important;
}
```

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

### Font Size Utility Classes

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/atomic-css.md

SCSS utility classes for controlling font size, mapping to Sard Uniapp's CSS variables for xs, sm, base, lg, xl, and 2xl sizes.

```scss
.text-xs {
  font-size: var(--sar-text-xs) !important;
}

.text-sm {
  font-size: var(--sar-text-sm) !important;
}

.text-base {
  font-size: var(--sar-text-base) !important;
}

.text-lg {
  font-size: var(--sar-text-lg) !important;
}

.text-xl {
  font-size: var(--sar-text-xl) !important;
}

.text-2xl {
  font-size: var(--sar-text-2xl) !important;
}
```

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

### getDaysBeforeFirstDay

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/date.md

Calculates the number of days from the previous month that need to be displayed before the first day of the current month.

```APIDOC
## getDaysBeforeFirstDay

### Description
Calculates the number of trailing days from the previous month that need to be displayed before the 1st of the current month.

### Signature
```ts
function getDaysBeforeFirstDay(
  year: number,
  month: number,
  weekStartsOn?: number,
): number
```
```

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

### Upload File Configuration

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/request.md

Defines the configuration options for the `request.upload` method, including parameters for file uploads, headers, timeouts, and form data.

```ts
request.upload('api/upload', {
  /**
   * 资源url
   */
  url?: string
  /**
   * 自动加在 `url` 前面，除非 `url` 是一个绝对 URL
   */
  baseURL?: string
  /**
   * 与请求一起发送的 URL 参数
   */
  params?: {
    [key: string]: any
  }
  /**
   * 获取 uni.uploadFile 返回值，可用于中断请求
   */
  getTask?: (task: UniApp.UploadTask, config: RequestConfig) => void
  /**
   * 设置请求的 header，header 中不能设置 Referer。
   */
  header?: any
  /**
   * 超时时间
   */
  timeout?: number
  /**
   * 需要上传的文件列表。App、H5（ 2.6.15+）
   */
  files?: UploadFileOptionFiles[]
  /**
   * 文件类型，image/video/audio，仅支付宝小程序，且必填。
   * - image: 图像
   * - video: 视频
   * - audio: 音频
   */
  fileType?: 'image' | 'video' | 'audio'
  /**
   * 要上传的文件对象。\t仅H5（2.6.15+）支持
   */
  file?: File
  /**
   * 要上传文件资源的路径
   */
  filePath?: string
  /**
   * 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
   */
  name?: string
  /**
   * HTTP 请求中其他额外的 form data
   */
  formData?: {
   [key: string]: any
  }
})
```

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

### Theme Color Utility Classes

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/atomic-css.md

SCSS utility classes for text and background colors, mapping to Sard Uniapp's CSS variables for primary, secondary, success, info, warning, and danger themes.

```scss
.text-primary {
  color: var(--sar-primary) !important;
}

.text-secondary {
  color: var(--sar-secondary) !important;
}

.text-success {
  color: var(--sar-success) !important;
}

.text-info {
  color: var(--sar-info) !important;
}

.text-warning {
  color: var(--sar-warning) !important;
}

.text-danger {
  color: var(--sar-danger) !important;
}

.bg-primary {
  background-color: var(--sar-primary) !important;
}

.bg-secondary {
  background-color: var(--sar-secondary) !important;
}

.bg-success {
  background-color: var(--sar-success) !important;
}

.bg-info {
  background-color: var(--sar-info) !important;
}

.bg-warning {
  background-color: var(--sar-warning) !important;
}

.bg-danger {
  background-color: var(--sar-danger) !important;
}

// ...
```

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

### Generic Request Factory Function

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/request.md

Demonstrates how to create a generic `Request` factory function that handles adding tokens, error status codes, error messages, and retries. This function can be used to create pre-configured request instances.

```APIDOC
## Generic Request Factory Function

This factory function `createRequest` allows for the creation of `Request` instances with default configurations and custom interceptors for request and response handling.

### Function Signature

`createRequest(defaultConfig: RequestConfig): Request`

### Request Interceptor

- Adds an `Authorization` header with a Bearer token if available from the user store.

### Response Interceptor

- Handles HTTP status codes, showing a toast for codes outside the 2xx range.
- Processes custom response codes, displaying an error message if `code` is not 200.
- Returns the `data` from the response if successful.
- Implements retry logic for failed requests based on `extra.retryCount` and `extra.retryDelay`.
- Shows a toast with the error message for request failures.

### Example Usage

```ts
// @/utils/request.ts
import { Request, type RequestConfig } from 'sard-uniapp'
import { useUserStore } from '@/stores/user'

const errToastDuration = 5000

function createRequest(defaultConfig: RequestConfig) {
  const request = new Request(defaultConfig)

  // Request interceptor
  request.interceptors.request.use((config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.header.Authorization = 'Bearer ' + userStore.token
    }
    return config
  })

  // Response interceptor
  request.interceptors.response.use(
    (response) => {
      if (response.statusCode < 200 || response.statusCode >= 300) {
        uni.showToast({
          title: 'Error: statusCode ' + response.statusCode,
          icon: 'none',
          duration: errToastDuration,
        })
        return Promise.reject(response.errMsg)
      }
      const { code, data, message = 'error' } = response.data || {}
      if (code !== 200) {
        uni.showToast({
          title: message,
          icon: 'none',
          duration: errToastDuration,
        })
        return Promise.reject(message)
      }
      return data
    },
    async ({ config, errMsg }) => {
      const extra = config.extra
      if (extra.retryCount && --extra.retryCount > 0) {
        return new Promise((resolve) => setTimeout(resolve, extra.retryDelay || 1000)).then(() => request.request(config))
      }
      uni.showToast({
        title: errMsg,
        icon: 'none',
        duration: errToastDuration,
      })
      return Promise.reject(errMsg)
    },
  )

  return request
}
```
```

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

### Global Theme Customization with CSS Variables

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/guide/theme.md

Apply global theme changes by importing sard-uniapp's stylesheets and overriding CSS variables like `--sar-primary` within the `page` and `.sar-portal` selectors in your `App.vue` file.

```html
<style lang="scss">
  @import 'sard-uniapp/index.scss';
  @import 'sard-uniapp/dark.scss';

  page,
  .sar-portal {
    --sar-primary: red;
  }
</style>
```

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

### Popup Component API

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/popup.md

This section details the properties and slots available for the Popup component.

```APIDOC
## Popup Component API

### PopupProps

| Property | Description | Type | Default |
|---|---|---|---|
| `root-class` | Component root element class name | `string` | - |
| `root-style` | Component root element style | `StyleValue` | - |
| `visible` (v-model) | Whether the popup is visible | `boolean` | `false` |
| `duration` | Animation duration for showing/hiding, in ms | `number` | `300` |
| `effect` | Show/hide effect | `'slide-top' | 'slide-right' | 'slide-bottom' | 'slide-left' | 'zoom' | 'fade'` | `'fade'` |
| `overlay` | Whether to display the overlay | `boolean` | `true` |
| `overlay-class` | Class name added to the overlay | `string` | - |
| `overlay-style` | Style added to the overlay | `string` | - |
| `background` | Overlay background color | `string` | - |
| `transparent` | Transparent overlay | `boolean` | `false` |
| `overlay-closable` (1.22+) | Whether to close on overlay click | `boolean` | `true` |
| `keep-render` (1.24.3+) | Always keep the component rendered, even when hidden | `boolean` | `false` |
| `lock-scroll` (1.25.5+) | Whether to prevent page scrolling when the popup is shown | `boolean` | `true` |
| `back-press` (1.25.7+) | Intercept back button press when popup is shown (`close`: close popup, `back`: go back a page (only in mini-programs)) | `'close' | 'back'` | `'close'` |

### PopupSlots

| Slot | Description | Props |
|---|---|---|
| `default` | Custom default content | - |
```

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

### Basic CascaderPopout Usage

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/cascader-popout.md

Use v-model for two-way binding of the current value and v-model:visible to control the popup's visibility.

```vue
<template>
  <CascaderPopout v-model="value" v-model:visible="visible" :options="options" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref([])
const visible = ref(false)
const options = [
  {
    label: '选项1',
    value: '1',
    children: [
      {
        label: '选项1-1',
        value: '1-1',
      },
    ],
  },
]
</script>

```

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

### Select Option Keys Interface

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/select.md

Defines the structure for custom field mapping in the `options` prop of the Select component.

```typescript
interface OptionKeys {
  label?: string
  value?: string
  children?: string
}
```

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

### Provide and Inject Locale Data

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/guide/i18n.md

The `useLocaleProvide` hook sets up default language packs and injects locale information globally. It requires the app instance, a map of languages, and the default locale key.

```ts
// main.ts

import zhCN from 'sard-uniapp/components/locale/lang/zh-CN'
import enUS from 'sard-uniapp/components/locale/lang/en-US'

const app = createSSRApp(App)

useLocaleProvide(
  app,
  {
    zhCN,
    enUS,
  },
  'zhCN',
)
```

```js
// main.ts
import zhCN from 'sard-uniapp/components/locale/lang/zh-CN'
import enUS from 'sard-uniapp/components/locale/lang/en-US'
const app = createSSRApp(App)
useLocaleProvide(
  app,
  {
    zhCN,
    enUS,
  },
  'zhCN',
)
```

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

### Border Color Utility Classes

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/atomic-css.md

SCSS utility classes for setting border colors, including transparent, inherit, white, black, and theme-specific colors like base, primary, secondary, etc., referencing Sard Uniapp's CSS variables.

```scss
.border-current {
  border-color: currentColor !important;
}

.border-transparent {
  border-color: transparent !important;
}

.border-inherit {
  border-color: inherit !important;
}

.border-white {
  border-color: white !important;
}

.border-black {
  border-color: black !important;
}

.border-base {
  border-color: var(--sar-border-color) !important;
}

.border-primary {
  border-color: var(--sar-primary) !important;
}

.border-secondary {
  border-color: var(--sar-secondary) !important;
}

.border-success {
  border-color: var(--sar-success) !important;
}

.border-info {
  border-color: var(--sar-info) !important;
}

.border-warning {
  border-color: var(--sar-warning) !important;
}

.border-danger {
  border-color: var(--sar-danger) !important;
}
```

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

### PickerPopout Emits

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/picker-popout.md

Events emitted by the PickerPopout component.

```APIDOC
## PickerPopoutEmits

| Event                               | Description                                  | Type                     |
| ----------------------------------- | -------------------------------------------- | ------------------------ |
| update:model-value                  | Triggered when the picker input value changes | `(value: any) => void`   |
| change                              | Triggered when the picker input value changes | `(value: any) => void`   |
| update:visible                      | Triggered when the popup is shown/hidden     | `(visible: boolean) => void` |
| confirm <sup>1.22.1+</sup>          | Triggered when the confirm button is clicked | `() => void`             |
| visible-hook <sup>1.22.1+</sup>     | Triggered when the transition hook state changes | `(name: TransitionHookName) => void` |
| before-enter <sup>1.22.1+</sup>     | Triggered before the enter transition starts | `() => void`             |
| enter <sup>1.22.1+</sup>            | Triggered when the enter transition starts   | `() => void`             |
| after-enter <sup>1.22.1+</sup>      | Triggered when the enter transition ends     | `() => void`             |
| enter-cancelled <sup>1.22.1+</sup>  | Triggered when the enter transition is cancelled | `() => void`             |
| before-leave <sup>1.22.1+</sup>     | Triggered before the leave transition starts | `() => void`             |
| leave <sup>1.22.1+</sup>            | Triggered when the leave transition starts   | `() => void`             |
| after-leave <sup>1.22.1+</sup>      | Triggered when the leave transition ends     | `() => void`             |
| leave-cancelled <sup>1.22.1+</sup>  | Triggered when the leave transition is cancelled | `() => void`             |
```

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

### Import ScrollList Component

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/scroll-list.md

Import the ScrollList component from the sard-uniapp library. This is the initial step to use the component in your project.

```javascript
import ScrollList from 'sard-uniapp/components/scroll-list/scroll-list.vue'
```

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

### Border Radius Utility Classes

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/atomic-css.md

SCSS utility classes for applying border radius, mapping to Sard Uniapp's CSS variables for various sizes like xs, sm, default, lg, xl, and full.

```scss
.rounded-xs {
  border-radius: var(--sar-rounded-xs) !important;
}

.rounded-sm {
  border-radius: var(--sar-rounded-sm) !important;
}

.rounded {
  border-radius: var(--sar-rounded) !important;
}

.rounded-lg {
  border-radius: var(--sar-rounded-lg) !important;
}

.rounded-xl {
  border-radius: var(--sar-rounded-xl) !important;
}

.rounded-full {
  border-radius: var(--sar-rounded-full) !important;
}

// ...
```

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

### Imperative Popup Display

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/popup.md

Use the `popup` method to display a popup after setting up a `sar-popup-agent`. This method allows for programmatic control over popup visibility.

```vue
<<< @demo/popup/demo/Imperative.vue
```

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

### Font Weight Utility Classes

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/utilities/atomic-css.md

SCSS utility classes for setting font weight, mapping to Sard Uniapp's CSS variables for bold, normal, and light weights.

```scss
.font-bold {
  font-weight: var(--sar-font-bold) !important;
}

.font-normal {
  font-weight: var(--sar-font-normal) !important;
}

.font-light {
  font-weight: var(--sar-font-light) !important;
}
```

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

### CalendarInput Emits

Source: https://github.com/sutras/sard-uniapp/blob/main/packages/docs/components/calendar-input.md

Emits available for the CalendarInput component, inheriting from CalendarPopoutEmits.

```APIDOC
## CalendarInputEmits

Inherits [`CalendarPopoutEmits`](./calendar-popout#CalendarPopoutEmits)
```