### Quick Start CLI Commands

Source: https://wot-ui.cn/llms-full.txt

Basic commands to interact with the Wot UI CLI for listing components, getting information, and viewing documentation or demos.

```bash
wot list
wot info Button
wot demo Button basic
wot doc Button
wot token Button
wot changelog
```

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

### Basic File Upload and Selection with useUpload

Source: https://wot-ui.cn/llms-full.txt

Demonstrates how to use the useUpload hook to select files and initiate an upload. Includes setup, file selection, starting the upload with progress and success/error callbacks, and aborting the upload.

```typescript
import { useUpload } from '@/uni_modules/wot-ui'

const { startUpload, abort, chooseFile, UPLOAD_STATUS } = useUpload()

// 选择文件
const files = await chooseFile({
  accept: 'image',
  multiple: true,
  maxCount: 9
})

// 开始上传
const file = {
  url: 'file://temp/image.png',
  status: UPLOAD_STATUS.PENDING,
  percent: 0
}

startUpload(file, {
  action: 'https://upload-url',
  onSuccess(res) {
    console.log('上传成功', res)
  },
  onError(err) {
    console.log('上传失败', err) 
  },
  onProgress(progress) {
    console.log('上传进度', progress)
  }
})

// 中断上传
abort()
```

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

### Install Dependencies

Source: https://wot-ui.cn/guide/templates

Install all necessary project dependencies using pnpm.

```bash
pnpm install
```

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

### Install Wot UI Skills

Source: https://wot-ui.cn/guide/skills

Use the provided script to install the Wot UI skills. You can choose specific installation items based on your needs.

```sh
pnpx skills add wot-ui/open-wot
# or
npx skills add wot-ui/open-wot
```

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

### Install @uni-ku/root

Source: https://wot-ui.cn/component/config-provider

Install the root component package using npm, yarn, or pnpm.

```bash
npm i -D @uni-ku/root
```

```bash
yarn add -D @uni-ku/root
```

```bash
pnpm add -D @uni-ku/root
```

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

### Opacity Tokens Examples

Source: https://wot-ui.cn/llms-full.txt

Examples of applying opacity tokens. These tokens use the 'wot-opacity-' prefix.

```html
wot-opacity-disabled
wot-opacity-main
```

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

### Run Development Server

Source: https://wot-ui.cn/guide/templates

Start the development server to run the uni-app project.

```bash
pnpm dev
```

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

### Install UnoCSS and Wot UI Preset with npm

Source: https://wot-ui.cn/llms-full.txt

Install the necessary UnoCSS package and the Wot UI preset using npm.

```bash
npm i -D unocss
npm i @wot-ui/unocss-preset
```

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

### Basic Usage of useImagePreview

Source: https://wot-ui.cn/component/use-image-preview

Use this snippet to open an image preview. First, declare the `wd-image-preview` component in your template, then call `useImagePreview()` to get the `previewImage` function. This function takes an options object with an array of image URLs and a starting position.

```html
<wd-image-preview />
<wd-button @click="openPreview">预览图片</wd-button>
```

```typescript
import { useImagePreview } from '@/uni_modules/wot-ui' 

const { previewImage } = useImagePreview()

const openPreview = () => {
  previewImage({
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ],
    startPosition: 0
  })
}
```

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

### Install UnoCSS and Wot UI Preset with pnpm

Source: https://wot-ui.cn/llms-full.txt

Install the necessary UnoCSS package and the Wot UI preset using pnpm.

```bash
pnpm add -D unocss
pnpm add @wot-ui/unocss-preset
```

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

### Basic Rate Usage

Source: https://wot-ui.cn/llms-full.txt

Demonstrates the fundamental setup of the Rate component using v-model for score binding and num for the total score. Includes an example of handling score changes.

```html
<wd-rate v-model="value" @change="handleChange" />
```

```ts
const value = ref(5)

function handleChange({ value }: { value: number }) {
  console.log(value)
}
```

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

### Install Wot UI via npm

Source: https://wot-ui.cn/llms-full.txt

Install Wot UI using npm, yarn, or pnpm. This method requires additional configuration for component auto-import.

```bash
npm i @wot-ui/ui
```

```bash
yarn add @wot-ui/ui
```

```bash
pnpm add @wot-ui/ui
```

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

### Install vite-plugin-uni-components

Source: https://wot-ui.cn/guide/quick-use.html

Install the vite-plugin-uni-components package as a development dependency using npm, yarn, or pnpm.

```bash
npm i @uni-helper/vite-plugin-uni-components -D
```

```bash
yarn add @uni-helper/vite-plugin-uni-components -D
```

```bash
pnpm add @uni-helper/vite-plugin-uni-components -D
```

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

### Basic Input Setup

Source: https://wot-ui.cn/llms-full.txt

Set up a reactive reference for the input value and define the input handler function.

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

const value = ref('')

function handleInput(event) {
  console.log(event)
}
```

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

### Install Wot UI Skills

Source: https://wot-ui.cn/llms-full.txt

Installs Wot UI skills using npm or npx. Choose the appropriate command based on your package manager.

```shell
pnpx skills add wot-ui/open-wot
```

```shell
npx skills add wot-ui/open-wot
```

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

### Install UnoCSS and Wot UI Preset with yarn

Source: https://wot-ui.cn/llms-full.txt

Install the necessary UnoCSS package and the Wot UI preset using yarn.

```bash
yarn add -D unocss
yarn add @wot-ui/unocss-preset
```

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

### Padding Tokens Examples

Source: https://wot-ui.cn/llms-full.txt

Examples of applying padding tokens. These tokens use prefixes like 'wot-p-', 'wot-px-', 'wot-py-', 'wot-pt-', 'wot-pr-', 'wot-pb-', and 'wot-pl-'.

```html
wot-p-main
wot-px-tight
wot-pb-loose
```

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

### Font Weight Tokens Examples

Source: https://wot-ui.cn/llms-full.txt

Examples of applying font weight tokens. These tokens use the 'wot-font-' prefix.

```html
wot-font-medium
wot-font-semibold
```

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

### Install vite-plugin-uni-components with pnpm

Source: https://wot-ui.cn/llms-full.txt

Install the vite-plugin-uni-components package using pnpm. This plugin helps with automatic component import.

```bash
pnpm add @uni-helper/vite-plugin-uni-components -D
```

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

### Install vite-plugin-uni-components with yarn

Source: https://wot-ui.cn/llms-full.txt

Install the vite-plugin-uni-components package using yarn. This plugin helps with automatic component import.

```bash
yarn add @uni-helper/vite-plugin-uni-components -D
```

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

### Install vite-plugin-uni-components with npm

Source: https://wot-ui.cn/llms-full.txt

Install the vite-plugin-uni-components package using npm. This plugin helps with automatic component import.

```bash
npm i @uni-helper/vite-plugin-uni-components -D
```

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

### Base Tokens Examples (when enabled)

Source: https://wot-ui.cn/llms-full.txt

Examples of using base color tokens and transparent color tokens when 'baseTokens: true'. This includes background, text, and border applications.

```html
wot-bg-base-black
wot-text-blue-6
wot-border-opac-3_08
```

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

### MCP Server Client Configuration

Source: https://wot-ui.cn/llms-full.txt

Example configuration for an MCP-compatible client to connect to the Wot UI MCP Server.

```json
{
  "mcpServers": {
    "wot-ui": {
      "command": "wot",
      "args": ["mcp"]
    }
  }
}
```

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

### Install New Package with npm, yarn, or pnpm

Source: https://wot-ui.cn/llms-full.txt

Replace the old package 'wot-design-uni' with '@wot-ui/ui' using your preferred package manager.

```bash
npm remove wot-design-uni
npm i @wot-ui/ui
```

```bash
yarn remove wot-design-uni
yarn add @wot-ui/ui
```

```bash
pnpm remove wot-design-uni
pnpm add @wot-ui/ui
```

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

### Spacing Tokens Examples

Source: https://wot-ui.cn/llms-full.txt

Examples of applying margin and gap tokens. These tokens use prefixes like 'wot-m-', 'wot-mx-', 'wot-my-', 'wot-gap-', 'wot-gap-x-', and 'wot-gap-y-'.

```html
wot-m-main
wot-mt-tight
wot-gap-x-loose
```

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

### Basic Sidebar Usage

Source: https://wot-ui.cn/llms-full.txt

Demonstrates the fundamental setup of a sidebar with navigation items. Use `v-model` to control the active item.

```html
<wd-sidebar v-model="active">
  <wd-sidebar-item :value="0" label="标签名称" />
  <wd-sidebar-item :value="1" label="标签名称" />
  <wd-sidebar-item :value="2" label="标签名称" />
</wd-sidebar>
```

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

### Create Project with Wot Starter Template

Source: https://wot-ui.cn/guide/quick-use.html

Use pnpm and create-uni to quickly scaffold a new uni-app project with the Wot UI starter template.

```bash
pnpm create uni@latest -t wot-starter-v2 <你的项目名称>
```

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

### Create wot-starter Template

Source: https://wot-ui.cn/guide/templates

Use the create-uni command with the 'wot-starter-v2' template to quickly set up a new uni-app project integrated with Wot UI.

```bash
pnpm create uni <project-name> -t wot-starter-v2
```

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

### Create Project with create-uni and Wot Starter Template

Source: https://wot-ui.cn/llms-full.txt

Use create-uni to quickly scaffold a new uni-app project with the Wot UI starter template.

```bash
pnpm create uni@latest -t wot-starter-v2 <your project name>
```

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

### Basic Image Preview Setup

Source: https://wot-ui.cn/llms-full.txt

Declare the wd-image-preview component in your HTML and use the useImagePreview hook to open image previews programmatically. Import the hook from '@/uni_modules/wot-ui'.

```html
<wd-image-preview />
<wd-button @click="openPreview">预览图片</wd-button>
```

```typescript
import { useImagePreview } from '@/uni_modules/wot-ui'

const { previewImage } = useImagePreview()

const openPreview = () => {
  previewImage({
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ],
    startPosition: 0
  })
}
```

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

### Basic Usage of wd-video-preview

Source: https://wot-ui.cn/component/use-video-preview

Demonstrates the basic setup for using wd-video-preview. First, declare the component in your HTML, then use the useVideoPreview hook to open the preview programmatically.

```html
<wd-video-preview />
<wd-button @click="openPreview">预览视频</wd-button>
```

```typescript
import { useVideoPreview } from '@/uni_modules/wot-ui'

const { previewVideo } = useVideoPreview()

const openPreview = () => {
  previewVideo({
    url: 'https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4',
    poster: 'https://wot-ui.cn/assets/panda.jpg',
    title: '视频预览'
  })
}
```

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

### UseUploadOptions

Source: https://wot-ui.cn/llms-full.txt

Configuration options for the `startUpload` method.

```APIDOC
## UseUploadOptions

### Parameters
- **action** (string) - Required - The URL to upload the file to.
- **header** (Record<string, any>) - Optional - Custom request headers. Defaults to `{}`.
- **name** (string) - Optional - The key for the file in the form data. Defaults to `'file'`.
- **formData** (Record<string, any>) - Optional - Additional form data to send with the upload. Defaults to `{}`.
- **fileType** (string) - Optional - The type of file to upload. Accepts 'image', 'video', 'audio'. Defaults to `'image'`.
- **statusCode** (number | number[]) - Optional - The HTTP status code(s) considered successful. Defaults to `200`.
- **uploadMethod** (UploadMethod) - Optional - A custom function to handle the upload process.
- **onSuccess** (Function) - Optional - Callback function executed when the upload is successful.
- **onError** (Function) - Optional - Callback function executed when the upload fails.
- **onProgress** (Function) - Optional - Callback function executed during the upload progress.
```

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

### Install Zod Dependency

Source: https://wot-ui.cn/llms-full.txt

Zod is not included with the component library and must be installed separately.

```bash
npm i zod
```

```bash
yarn add zod
```

```bash
pnpm add zod
```

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

### startUpload

Source: https://wot-ui.cn/llms-full.txt

Initiates the file upload process for a given file item with specified options.

```APIDOC
## startUpload

### Description
Starts the upload of a file. This function takes a file item and upload options, returning a UniApp UploadTask.

### Method
`startUpload(file: UploadFileItem, options: UseUploadOptions): UniApp.UploadTask`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters for `options` (UseUploadOptions)
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **action** (string) - Required - The upload URL.
- **header** (Record<string, any>) - Optional - Request headers. Defaults to `{}`.
- **name** (string) - Optional - The key for the file in the form data. Defaults to `'file'`.
- **formData** (Record<string, any>) - Optional - Additional form data. Defaults to `{}`.
- **fileType** (string) - Optional - The type of file to upload ('image', 'video', 'audio'). Defaults to `'image'`.
- **statusCode** (number | number[]) - Optional - The HTTP status code(s) indicating a successful upload. Defaults to `200`.
- **uploadMethod** (UploadMethod) - Optional - A custom upload method.
- **onSuccess** (Function) - Optional - Callback function executed when the upload is successful.
- **onError** (Function) - Optional - Callback function executed when the upload fails.
- **onProgress** (Function) - Optional - Callback function executed during the upload progress.

### Request Example
```json
{
  "file": {
    "url": "file://temp/image.png",
    "status": "PENDING",
    "percent": 0
  },
  "options": {
    "action": "https://upload-url",
    "onSuccess": "(res) => console.log('上传成功', res)",
    "onError": "(err) => console.log('上传失败', err)",
    "onProgress": "(progress) => console.log('上传进度', progress)"
  }
}
```

### Response
#### Success Response (void)
Returns void. The result of the upload is handled by the `onSuccess` callback.

#### Response Example
None (handled by callbacks)
```

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

### Install Zod with pnpm

Source: https://wot-ui.cn/llms-full.txt

Install Zod using pnpm. This is a prerequisite for using Zod with the form component.

```bash
pnpm add zod
```

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

### Install Zod with yarn

Source: https://wot-ui.cn/llms-full.txt

Install Zod using yarn. This is a prerequisite for using Zod with the form component.

```bash
yarn add zod
```

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

### Install Zod with npm

Source: https://wot-ui.cn/llms-full.txt

Install Zod using npm. This is a prerequisite for using Zod with the form component.

```bash
npm install zod
```

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

### Stroke Tokens Examples

Source: https://wot-ui.cn/llms-full.txt

Examples of applying stroke tokens for borders. These tokens use the 'wot-border-stroke-' prefix.

```html
wot-border-stroke-main
wot-border-stroke-bold
```

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

### Steps with Custom Icons

Source: https://wot-ui.cn/llms-full.txt

Demonstrates how to customize the icons for each step using the `icon` prop. Various icon names can be provided to visually represent different stages.

```html
<wd-steps :active="1" align-center>
  <wd-step icon="settings" />
  <wd-step icon="list" />
  <wd-step icon="clock-circle" />
</wd-steps>
```

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

### Basic Overlay Usage

Source: https://wot-ui.cn/llms-full.txt

Demonstrates how to control the visibility of the overlay using the 'show' prop and close it by clicking on it.

```html
<wd-button type="primary" @click="show = true">显示遮罩层</wd-button>
<wd-overlay :show="show" @click="show = false" />
```

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

### Basic WD Search Usage

Source: https://wot-ui.cn/llms-full.txt

Demonstrates the fundamental setup of the WD Search component with v-model binding and event listeners for search, clear, cancel, and change actions.

```html
<wd-search v-model="value" @search="search" @clear="clear" @cancel="cancel" @change="change" />
```

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

### Border Radius Tokens Examples

Source: https://wot-ui.cn/llms-full.txt

Examples of applying border radius tokens. These tokens use the 'wot-rounded-' prefix.

```html
wot-rounded-md
wot-rounded-full
```

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

### Install Sass Dependency

Source: https://wot-ui.cn/guide/quick-use.html

Install Sass version 1.98.0 or higher as a development dependency using npm, yarn, or pnpm.

```bash
npm i sass@^1.98.0 -D
```

```bash
yarn add sass@^1.98.0 -D
```

```bash
pnpm add sass@^1.98.0 -D
```

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

### Create uni-app Project with Wot UI

Source: https://wot-ui.cn/guide/cli

Use this command to create a new uni-app project with TypeScript, Pinia state management, Wot UI components, and ESLint support.

```bash
pnpm create uni <你的项目名称> --ts -m pinia -u wot2 -e
```

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

### Color Tokens Examples

Source: https://wot-ui.cn/llms-full.txt

Examples of applying color tokens for text, background, and borders. These tokens are prefixed with 'wot-text-', 'wot-bg-', and 'wot-border-'.

```html
wot-text-primary
wot-bg-filled-oppo
wot-border-border-main
wot-bg-classify-purple-content
```

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

### Basic PickerView Data Setup

Source: https://wot-ui.cn/llms-full.txt

Sets up the data for a basic PickerView with string options. The 'value' ref holds the selected item, and 'columns' ref contains the available options.

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

const value = ref<string[]>(['选项1'])
const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5'])
```

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

### Steps with Titles and Descriptions

Source: https://wot-ui.cn/llms-full.txt

Configures Steps with titles and descriptions for each step, and includes a button to advance to the next step.

```html
<wd-steps :active="active" align-center>
  <wd-step title="步骤1" description="注册1个账号" />
  <wd-step title="步骤2" description="登录账号并绑定手机" />
  <wd-step title="步骤3" description="完善个人信息" />
</wd-steps>
<wd-button size="small" @click="nextStep">下一步</wd-button>
```

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

### Image Preview with Specified Start Position

Source: https://wot-ui.cn/component/image-preview

Configures the ImagePreview to start displaying from a specific image in the array using the 'startPosition' option. The index is zero-based.

```typescript
previewImage({
  images: ['url1', 'url2', 'url3'],
  startPosition: 1 // 从第二张图片开始预览
})
```

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

### Basic Usage

Source: https://wot-ui.cn/llms-full.txt

Demonstrates the basic implementation of the Curtain component, controlling its visibility with `v-model` and setting the image source, click link, and width.

```APIDOC
## Basic Usage

### Description

This example shows how to use the `wd-curtain` component. You can control its visibility using `v-model`. The `src` attribute specifies the image URL, `to` is the link to navigate to when the image is clicked, and `width` sets the image width, with height calculated proportionally.

### Method

N/A (Vue Component)

### Endpoint

N/A (Vue Component)

### Parameters

- **v-model** (boolean) - Required - Controls the visibility of the curtain.
- **src** (string) - Required - The URL of the curtain image. Must be a network address.
- **to** (string) - Optional - The link to navigate to when the image is clicked.
- **width** (number) - Optional - The width of the curtain image in pixels. Height is calculated proportionally.

### Request Example

```html
<wd-button @click="open = true">展示幕帘</wd-button>
<wd-curtain v-model="open" :src="img" :to="link" :width="280" />
```

### Response

N/A (Vue Component)
```

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

### Install Sass with pnpm

Source: https://wot-ui.cn/llms-full.txt

Install a compatible version of Sass as a development dependency using pnpm. Wot UI requires Sass version 1.78 or higher.

```bash
pnpm add sass@^1.98.0 -D
```

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

### Install Sass with yarn

Source: https://wot-ui.cn/llms-full.txt

Install a compatible version of Sass as a development dependency using yarn. Wot UI requires Sass version 1.78 or higher.

```bash
yarn add sass@^1.98.0 -D
```

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

### Basic Table Usage

Source: https://wot-ui.cn/llms-full.txt

Demonstrates how to set up a basic table with data and column definitions. Handles sorting and row click events.

```html
<wd-table :data="dataList" :height="400" @sort-method="handleSort" @row-click="handleRowClick">
  <wd-table-column prop="name" label="姓名" align="center" width="50%"></wd-table-column>
  <wd-table-column prop="grade" label="分数" align="center" width="50%"></wd-table-column>
</wd-table>
```

```typescript
import type { TableColumn } from '@/uni_modules/wot-ui/components/wd-table-column/types'
import { ref } from 'vue'

interface TableData {
  name: string
  school: string
  major: string
  gender: string
  graduation: string
  grade: number
  compare: string
  hobby: string
}

const dataList = ref<TableData[]>([
  {
    name: '关羽',
    school: '武汉市阳逻绿豆学院',
    major: '计算机科学与技术专业',
    gender: '男',
    graduation: '2022年1月12日',
    grade: 66,
    compare: '48%',
    hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
  },
  {
    name: '刘备',
    school: '武汉市阳逻编织学院',
    major: '计算机科学与技术专业',
    gender: '男',
    graduation: '2022年1月12日',
    grade: 68,
    compare: '21%',
    hobby: '我得孔明，如鱼得水也'
  }
])

function handleSort(column: TableColumn) {
  dataList.value = dataList.value.reverse()
}

function handleRowClick({ rowIndex }: { rowIndex: number }) {
  console.log(rowIndex)
}
```

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

### Install Sass with npm

Source: https://wot-ui.cn/llms-full.txt

Install a compatible version of Sass as a development dependency using npm. Wot UI requires Sass version 1.78 or higher.

```bash
npm i sass@^1.98.0 -D
```

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

### Toast Basic Usage

Source: https://wot-ui.cn/llms-full.txt

Demonstrates how to set up and use the Toast component for basic message display. It requires a `wd-toast` element as a mount point and uses `useToast()` for functional calls.

```APIDOC
## Toast Basic Usage

### Description
This section shows the basic setup for using the Toast component. You need to include a `<wd-toast />` element in your template and then use the `useToast()` hook to trigger toast messages.

### Method
`useToast().show(message: string)`

### Parameters
#### Request Body
- **message** (string) - The message to display in the toast.

### Request Example
```html
<wd-toast />
<wd-button @click="showToast">toast</wd-button>
```

```ts
import { useToast } from '@/uni_modules/wot-ui'

const toast = useToast()

function showToast() {
  toast.show('提示信息')
}
```

### Response
This method does not return a value.
```

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

### Set Week Start Day

Source: https://wot-ui.cn/llms-full.txt

Configures the starting day of the week for the calendar. Accepts a number where 0 is Sunday and 1 is Monday. Triggers `handleChange` on change.

```html
<wd-calendar-view :first-day-of-week="1" v-model="value" @change="handleChange" />
```

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

### Multiple VideoPreview Instances

Source: https://wot-ui.cn/llms-full.txt

Demonstrates how to manage multiple wd-video-preview instances on the same page using the 'selector' prop. Each instance can be controlled independently.

```html
<wd-button @click="openMain">打开主预览</wd-button>
<wd-button @click="openSub">打开次预览</wd-button>

<wd-video-preview />
<wd-video-preview selector="sub-preview" />
```

```ts
import { useVideoPreview } from '@/uni_modules/wot-ui/components/wd-video-preview'

const { previewVideo: openMainPreview } = useVideoPreview()
const { previewVideo: openSubPreview } = useVideoPreview('sub-preview')
```

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

### Install Zod for Form Validation

Source: https://wot-ui.cn/llms-full.txt

Install Zod using npm, yarn, or pnpm. This library is recommended for form validation but not included by default due to package size.

```bash
npm install zod
```

```bash
yarn add zod
```

```bash
pnpm add zod
```

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

### Migrate Sass Syntax from Old to New

Source: https://wot-ui.cn/llms-full.txt

Example demonstrating the migration of Sass syntax from older patterns like `@import` and `/` for division to newer patterns like `@use` and `math.div()`.

```scss
// 旧写法
@import './variables.scss';

.page {
  width: 100px / 2;
  color: $primary-color;
}
```

```scss
@use 'sass:math';
@use './variables.scss' as *;

.page {
  width: math.div(100px, 2);
  color: $primary-color;
}
```

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

### Basic Pagination Usage

Source: https://wot-ui.cn/llms-full.txt

Demonstrates the basic setup of the pagination component using v-model for the current page, total for the total number of items, and pageSize for items per page. The total number of pages is calculated automatically.

```html
<wd-pagination v-model="value" :total="190" @change="handleChange" />
```

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

### Typography Tokens Examples

Source: https://wot-ui.cn/llms-full.txt

Examples of applying typography tokens for titles, body text, and labels. These tokens use the 'wot-text-' prefix followed by the typography category and size.

```html
wot-text-body-main
wot-text-title-large
wot-text-label-large
```

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

### TypeScript: Adjust Import Path for npm Installation

Source: https://wot-ui.cn/guide/common-problems.html

When installing Wot-UI via npm, adjust import paths from '@/uni_modules/wot-ui' to '@wot-ui/ui' for methods and utility classes like `useDialog`.

```typescript
// useToast、useNotify等同理
import { useDialog } from '@/uni_modules/wot-ui'

替换为

import { useDialog } from '@wot-ui/ui'
```

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

### Importing and Applying Preset Themes

Source: https://wot-ui.cn/guide/custom-theme

Demonstrates how to import Wot UI's theme index and a custom SCSS theme file (`brand-a.scss`) in `App.vue`.

```scss
/* App.vue */
@use '@wot-ui/ui/styles/theme/index.scss' as *;
@use './theme/brand-a.scss' as *;
```

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

### Closable Tags

Source: https://wot-ui.cn/llms-full.txt

Provides an example of creating closable tags. Clicking the close button triggers a 'close' event. The example uses Vue's ref and event handling.

```html
<wd-tag v-for="(tag, index) in closableStrongTags" :key="index" :type="tag.type" closable @close="handleCloseStrongTag(index)">
  {{ tag.value }}
</wd-tag>
```

```ts
const closableStrongTags = ref([
  { type: 'default', value: '标签' },
  { type: 'primary', value: '常用' }
])

function handleCloseStrongTag(order: number) {
  closableStrongTags.value = closableStrongTags.value.filter((_, index) => index !== order)
}
```

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

### Configure WOT-UI with presetWot

Source: https://wot-ui.cn/llms-full.txt

Customize WOT-UI behavior by passing configuration options to the presetWot() function. This example shows setting a custom prefix, enabling preflight checks, and disabling base tokens.

```typescript
presetWot({
  prefix: 'wot',
  preflight: true,
  baseTokens: false,
})
```

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

### Clickable Avatar Example

Source: https://wot-ui.cn/llms-full.txt

Illustrates how to make an Avatar component clickable by listening to the 'click' event. This example shows both image and text avatars that trigger a toast message on click.

```html
<wd-avatar size="large" :src="avatarURL" @click="handleClick" />
<wd-avatar size="large" text="点我" bg-color="#1E90FF" @click="handleClick" />
```

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

### Handling Phone Number Authorization in Dialog

Source: https://wot-ui.cn/llms-full.txt

Provides an example of using 'confirmButtonProps' with 'openType: "getPhoneNumber"' to request user authorization for their phone number within a dialog. Includes an example of the 'onGetphonenumber' event.

```ts
import { useDialog } from '@/uni_modules/wot-ui'

const dialog = useDialog()

const openOpenTypeDialog = () => {
  dialog.confirm({
    title: '获取手机号',
    confirmButtonProps: {
      text: '授权获取',
      openType: 'getPhoneNumber',
      onGetphonenumber: (detail) => {
        console.log(detail)
      }
    }
  })
}
```

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

### Root Component Setup with ConfigProvider

Source: https://wot-ui.cn/component/config-provider

Set up the root component to handle global theme configuration using ConfigProvider and a custom composable `useTheme`.

```vue
<script setup lang="ts">
import { useTheme } from './composables/useTheme'

const { theme, themeVars } = useTheme({
  buttonPrimaryBgColor: '#07c160',
  buttonPrimaryColor: '#ffffff'
})
</script>

<template>
  <wd-config-provider :theme="theme" :theme-vars="themeVars">
    <KuRootView />
  </wd-config-provider>
</template>
```

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

### Page-Level Style Override (Scoped SCSS Example)

Source: https://wot-ui.cn/guide/custom-style

Example of overriding Wot UI component styles within a scoped style block using :deep(). This allows targeted styling of components within your page.

```scss
/* 页面样式（scoped） */
:deep(.wd-button) {
  color: red !important;
}
```