### TnCountTo: Animated Number Counter

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

Animates a number from a start value to an end value. Supports decimal places, thousands separators, and custom durations. Use for displaying dynamic numerical data.

```vue
<template>
  <!-- 基础用法 -->
  <TnCountTo :start="0" :end="99999" :duration="2000" />

  <!-- 金额展示（带千分位和小数） -->
  <TnCountTo
    :start="0"
    :end="1234567.89"
    :decimals="2"
    thousands-separator=","
    decimal-separator="."
    :duration="2500"
    text-color="tn-red"
    font-size="60rpx"
    @end="onCountEnd"
  />
</template>

<script setup lang="ts">
const onCountEnd = () => console.log('数字动画结束')
</script>
```

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

### TnButton - Button Component

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

TnButton is a versatile button component supporting various types, shapes, sizes, and features like debouncing, loading states, and WeChat open capabilities. Colors starting with 'tn' utilize TuniaoUI's built-in color system.

```APIDOC
## TnButton - Button Component

### Description
Supports various types, shapes, and sizes of buttons, with built-in features like debouncing, loading states, and WeChat open capabilities. Color properties starting with `tn` use the Tuniao built-in color system.

### Usage Examples

**Basic Usage**
```vue
<template>
  <TnButton type="primary" @click="handleClick">Primary Button</TnButton>
</template>
<script setup lang="ts">
const handleClick = () => console.log('Clicked')
</script>
```

**Plain/Text Buttons**
```vue
<template>
  <TnButton type="success" plain>Plain Button</TnButton>
  <TnButton type="warning" text>Text Button</TnButton>
</template>
```

**With Icon, Shadow, Bold Border**
```vue
<template>
  <TnButton type="danger" icon="delete" shadow shadow-color="tn-red" border-bold>
    Delete
  </TnButton>
</template>
```

**Loading State + Debounce**
```vue
<template>
  <TnButton :loading="submitting" debounce @click="submit">Submit</TnButton>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const submitting = ref(false)
const submit = async () => {
  submitting.value = true
  await doRequest()
  submitting.value = false
}
</script>
```

**Custom Size and Color**
```vue
<template>
  <TnButton width="300" height="80" bg-color="tn-blue" text-color="#fff">
    Custom
  </TnButton>
</template>
```

**WeChat Mini Program Get Phone Number**
```vue
<template>
  <TnButton open-type="getPhoneNumber" @getphonenumber="onGetPhone">
    Get Phone Number
  </TnButton>
</template>
<script setup lang="ts">
const onGetPhone = (e: any) => {
  console.log('Encrypted phone number data:', e.detail)
}
</script>
```

**Form Submit Button**
```vue
<template>
  <TnButton form-type="submit" type="primary">Submit Form</TnButton>
</template>
```

### Props
- **type** (string) - Button type (e.g., 'primary', 'success', 'danger')
- **plain** (boolean) - Whether the button is plain
- **text** (boolean) - Whether the button is a text button
- **icon** (string) - Icon name to display on the button
- **shadow** (boolean) - Whether to apply a shadow
- **shadow-color** (string) - Color of the shadow
- **border-bold** (boolean) - Whether the border is bold
- **loading** (boolean) - Whether the button is in a loading state
- **debounce** (boolean | number) - Enables debouncing for click events
- **width** (string | number) - Custom width of the button
- **height** (string | number) - Custom height of the button
- **bg-color** (string) - Custom background color
- **text-color** (string) - Custom text color
- **open-type** (string) - WeChat open type (e.g., 'getPhoneNumber')
- **form-type** (string) - Form type ('submit', 'reset')

### Events
- **@click** - Emitted when the button is clicked.
- **@getphonenumber** - Emitted when the WeChat `getPhoneNumber` event is triggered.

```

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

### useUniAppSystemRectInfo — 系统信息 Hook

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

获取设备导航栏高度、状态栏高度、胶囊按钮位置及屏幕尺寸等系统信息，并自动适配小程序、APP 和 H5 的差异。用于需要根据设备信息进行布局调整的场景。

```typescript
import { useUniAppSystemRectInfo } from '@tuniao/tnui-vue3-uniapp'

// 在 setup 中使用
const { navBarInfo, navBarBoundingInfo, systemScreenInfo, getSystemRectInfo } = 
  useUniAppSystemRectInfo()

// navBarInfo.height        - 导航栏总高度（包含状态栏）
// navBarInfo.statusHeight  - 状态栏高度
// navBarBoundingInfo.width  - 右上角胶囊宽度
// navBarBoundingInfo.left   - 胶囊左边距（可据此计算标题区域宽度）
// systemScreenInfo.width    - 屏幕宽度
// systemScreenInfo.operationHeight - 可用内容区域高度

console.log('导航栏高度：', navBarInfo.height)
console.log('状态栏高度：', navBarInfo.statusHeight)
console.log('可用内容高度：', systemScreenInfo.operationHeight)

// 刷新系统信息
getSystemRectInfo()
```

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

### useUniAppSystemRectInfo

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

Retrieves system information such as navigation bar height, status bar height, capsule button position, and screen dimensions, automatically adapting to differences between Mini Program, APP, and H5 environments.

```APIDOC
## useUniAppSystemRectInfo — System Information Hook

### Description
Fetches essential system UI metrics like navigation bar height, status bar height, and screen dimensions, ensuring cross-platform compatibility.

### Usage

```typescript
import { useUniAppSystemRectInfo } from '@tuniao/tnui-vue3-uniapp'

// In setup function
const { navBarInfo, navBarBoundingInfo, systemScreenInfo, getSystemRectInfo } = useUniAppSystemRectInfo()

// navBarInfo.height        - Total navigation bar height (including status bar)
// navBarInfo.statusHeight  - Status bar height
// navBarBoundingInfo.width  - Width of the top-right capsule button
// navBarBoundingInfo.left   - Left margin of the capsule button (can be used to calculate title area width)
// systemScreenInfo.width    - Screen width
// systemScreenInfo.operationHeight - Usable content area height

console.log('Navigation bar height:', navBarInfo.height)
console.log('Status bar height:', navBarInfo.statusHeight)
console.log('Usable content height:', systemScreenInfo.operationHeight)

// Refresh system information
getSystemRectInfo()
```
```

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

### TnButton - Basic Usage and Variants

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

Demonstrates various TnButton types including primary, success (plain), warning (text), danger with icon and shadow, loading state, custom dimensions, and WeChat Mini Program open capabilities.

```vue
<template>
  <!-- 基础用法 -->
  <TnButton type="primary" @click="handleClick">主要按钮</TnButton>

  <!-- 朴素/文本按钮 -->
  <TnButton type="success" plain>朴素按钮</TnButton>
  <TnButton type="warning" text>文本按钮</TnButton>

  <!-- 带图标、阴影、加粗边框 -->
  <TnButton type="danger" icon="delete" shadow shadow-color="tn-red" border-bold>
    删除
  </TnButton>

  <!-- 加载状态 + 防抖 -->
  <TnButton :loading="submitting" debounce @click="submit">提交</TnButton>

  <!-- 自定义尺寸与颜色 -->
  <TnButton width="300" height="80" bg-color="tn-blue" text-color="#fff">
    自定义
  </TnButton>

  <!-- 微信小程序获取手机号 -->
  <TnButton
    open-type="getPhoneNumber"
    @getphonenumber="onGetPhone"
  >
    获取手机号
  </TnButton>

  <!-- 表单提交按钮 -->
  <TnButton form-type="submit" type="primary">提交表单</TnButton>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const submitting = ref(false)

const handleClick = () => console.log('点击')
const submit = async () => {
  submitting.value = true
  await doRequest()
  submitting.value = false
}
const onGetPhone = (e: any) => {
  console.log('手机号加密数据：', e.detail)
}
</script>
```

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

### TnModal: Command-Line Modal Dialog

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

TnModal allows for command-line invocation of modal dialogs using the `TnModalInstance` ref. It supports asynchronous callback interception for closing the modal. The `show` method accepts configuration options for title, content, button texts, styles, and callback functions for confirm and cancel actions.

```vue
<template>
  <TnModal ref="modalRef" />
  <TnButton @click="showModal">打开对话框</TnButton>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TnModalInstance } from '@tuniao/tnui-vue3-uniapp'

const modalRef = ref<TnModalInstance>()

const showModal = () => {
  modalRef.value?.show({
    title: '操作确认',
    content: '确定要删除该条数据吗？此操作不可撤销。',
    confirmText: '确认删除',
    cancelText: '取消',
    confirmStyle: { bgColor: '#f56c6c', color: '#fff' },
    confirm: async () => {
      await deleteItem()
      uni.showToast({ title: '删除成功' })
      return true  // 返回 false 可阻止关闭
    },
    cancel: () => {
      console.log('用户取消')
    },
  })
}
const deleteItem = () => new Promise((res) => setTimeout(res, 500))
</script>
```

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

### useNamespace — BEM 类名生成工具

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

用于生成符合 BEM 规范的类名，支持块、元素、修饰符以及 CSS 变量的生成。适用于内部组件开发。

```typescript
import { useNamespace } from '@tuniao/tnui-vue3-uniapp'

const ns = useNamespace('button')

// Block:        'tn-button'
console.log(ns.b())

// Block + suffix: 'tn-button-group'
console.log(ns.b('group'))

// Element:      'tn-button__icon'
console.log(ns.e('icon'))

// Modifier:     'tn-button--disabled'
console.log(ns.m('disabled'))

// Element + Modifier: 'tn-button__icon--active'
console.log(ns.em('icon', 'active'))

// 状态类: 'is-loading'
console.log(ns.is('loading', true))     // 'is-loading'
console.log(ns.is('loading', false))    // ''

// CSS 变量对象
const cssVars = ns.cssVarBlock({ 'bg-color': '#fff', 'text-color': '#333' })
// { '--tn-button-bg-color': '#fff', '--tn-button-text-color': '#333' }

// CSS 变量名
console.log(ns.cssVarBlockName('bg-color'))  // '--tn-button-bg-color'
```

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

### useToggle — 布尔值切换 Hook

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

提供一个简单的布尔状态切换工具，返回一个响应式状态和一个用于切换该状态的函数。适用于需要简单开关功能的场景。

```typescript
import { useToggle } from '@tuniao/tnui-vue3-uniapp'

// 在 setup 中使用
const [isVisible, toggleVisible] = useToggle(false)
const [isExpanded, toggleExpanded] = useToggle(true)

// 切换状态
toggleVisible()     // false -> true
toggleVisible()     // true -> false

// 在模板中绑定
// <view v-show="isVisible">内容</view>
// <TnButton @click="toggleVisible">切换显示</TnButton>
```

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

### TnForm - Form Validation with TnInput

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

Demonstrates TnForm and TnFormItem for form validation using async-validator. Includes username, phone, and remark fields with validation rules and methods for submission and reset.

```vue
<template>
  <TnForm
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="right"
    label-width="160rpx"
    @validate="onValidate"
  >
    <TnFormItem label="用户名" prop="username">
      <TnInput v-model="formData.username" placeholder="请输入用户名" />
    </TnFormItem>

    <TnFormItem label="手机号" prop="phone">
      <TnInput v-model="formData.phone" type="number" placeholder="请输入手机号" />
    </TnFormItem>

    <TnFormItem label="备注" prop="remark">
      <TnInput v-model="formData.remark" type="textarea" placeholder="选填" />
    </TnFormItem>

    <TnButton type="primary" form-type="submit" @click="handleSubmit">提交</TnButton>
    <TnButton type="default" @click="handleReset">重置</TnButton>
  </TnForm>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { TnFormInstance } from '@tuniao/tnui-vue3-uniapp'

const formRef = ref<TnFormInstance>()
const formData = reactive({ username: '', phone: '', remark: '' })
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1\d{10}$/, message: '手机号格式不正确', trigger: 'blur' },
  ],
}

const handleSubmit = async () => {
  try {
    const valid = await formRef.value?.validate()
    if (valid) console.log('校验通过', formData)
  } catch (e) {
    console.log('校验失败', e)
  }
}
const handleReset = () => formRef.value?.resetFields()
const onValidate = (prop: string, isValid: boolean, message: string) => {
  if (!isValid) console.warn(`字段 ${prop} 校验失败：${message}`)
}
</script>
```

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

### TnInput - Various Input Field Types

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

Showcases different TnInput configurations including text, password, digit, textarea with auto-height and word limit, underline style with search icon, and a select mode.

```vue
<template>
  <!-- 普通文本输入 -->
  <TnInput v-model="username" placeholder="请输入用户名" clearable />

  <!-- 密码输入（可切换显示/隐藏） -->
  <TnInput v-model="password" type="password" placeholder="请输入密码" />

  <!-- 数字输入，限制最大长度 -->
  <TnInput v-model="amount" type="digit" :maxlength="10" placeholder="金额" />

  <!-- textarea 模式，自动高度 + 字数统计 -->
  <TnInput
    v-model="content"
    type="textarea"
    :maxlength="200"
    show-word-limit
    word-limit-color="tn-gray"
    :auto-height="true"
    placeholder="请输入内容"
  />

  <!-- 下划线样式 + 右图标 -->
  <TnInput
    v-model="search"
    underline
    right-icon="search"
    confirm-type="search"
    @confirm="handleSearch"
  />

  <!-- select 模式（点击触发自定义选择器） -->
  <TnInput
    v-model="selected"
    type="select"
    placeholder="请选择"
    @click="openPicker"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const username = ref('')
const password = ref('')
const amount = ref('')
const content = ref('')
const search = ref('')
const selected = ref('')

const handleSearch = (val: string) => console.log('搜索：', val)
const openPicker = () => console.log('打开选择器')
</script>
```

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

### useNamespace

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

A BEM class name generation tool used internally for component development. It generates class names conforming to the `tn-block__element--modifier` specification and can also generate CSS variable names.

```APIDOC
## useNamespace — BEM Class Name Generation Tool

### Description
Generates BEM-compliant class names (`tn-block__element--modifier`) and CSS variable names for internal component development.

### Usage

```typescript
import { useNamespace } from '@tuniao/tnui-vue3-uniapp'

const ns = useNamespace('button')

// Block: 'tn-button'
console.log(ns.b())

// Block + suffix: 'tn-button-group'
console.log(ns.b('group'))

// Element: 'tn-button__icon'
console.log(ns.e('icon'))

// Modifier: 'tn-button--disabled'
console.log(ns.m('disabled'))

// Element + Modifier: 'tn-button__icon--active'
console.log(ns.em('icon', 'active'))

// State class: 'is-loading'
console.log(ns.is('loading', true))     // 'is-loading'
console.log(ns.is('loading', false))    // ''

// CSS variable object
const cssVars = ns.cssVarBlock({ 'bg-color': '#fff', 'text-color': '#333' })
// { '--tn-button-bg-color': '#fff', '--tn-button-text-color': '#333' }

// CSS variable name
console.log(ns.cssVarBlockName('bg-color'))  // '--tn-button-bg-color'
```
```

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

### useLongPress — 长按事件 Hook

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

为元素提供长按持续触发能力，常用于数字步进器等需要持续操作的场景。需要配合 touch 事件在模板中使用。

```typescript
import { ref } from 'vue'
import { useLongPress } from '@tuniao/tnui-vue3-uniapp'

// 在 setup 中使用
const count = ref(0)
const longPressEnabled = ref(true)

// 回调函数 + 是否启用长按 + 触发间隔(ms)
const { handleLongPressEvent, clearLongPressTimer } = useLongPress(
  () => { count.value++ },
  longPressEnabled,
  200  // 每200ms触发一次
)

// 模板用法：
// <button
//   @touchstart="handleLongPressEvent"
//   @touchend="clearLongPressTimer"
//   @touchcancel="clearLongPressTimer"
// >
//   长按增加
// </button>
```

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

### useToggle

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

A simple hook for toggling boolean states. It returns a reactive state variable and a function to toggle its value.

```APIDOC
## useToggle — Boolean Toggle Hook

### Description
Provides a simple way to manage and toggle boolean states within your Vue components.

### Usage

```typescript
import { useToggle } from '@tuniao/tnui-vue3-uniapp'

// In setup function
const [isVisible, toggleVisible] = useToggle(false)
const [isExpanded, toggleExpanded] = useToggle(true)

// Toggle state
toggleVisible()     // false -> true
toggleVisible()     // true -> false

// Bind in template
// <view v-show="isVisible">Content</view>
// <TnButton @click="toggleVisible">Toggle Visibility</TnButton>
```
```

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

### TnImageUpload: Image Upload Component

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

Handles multi-image uploads with progress display, custom logic, and lifecycle hooks. Configure upload URL, limits, size, headers, and callbacks.

```vue
<template>
  <TnImageUpload
    v-model="uploadedUrls"
    :limit="6"
    :max-size="5 * 1024 * 1024"
    action="https://api.example.com/upload"
    :header="{ Authorization: token }"
    :form-data="{ folder: 'avatar' }"
    :auto-upload="true"
    show-upload-progress
    :before-upload="beforeUpload"
    :before-remove="beforeRemove"
    :custom-upload-callback="parseResponse"
    @success="onUploadSuccess"
    @fail="onUploadFail"
    @remove="onRemove"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type {
  ImageUploadFile,
  ImageUploadListItem,
} from '@tuniao/tnui-vue3-uniapp'

const token = ref('Bearer xxx')
const uploadedUrls = ref<string[]>([])

// 上传前校验（返回 false 取消上传）
const beforeUpload = (file: ImageUploadFile): boolean => {
  if (file.size > 5 * 1024 * 1024) {
    uni.showToast({ title: '图片不能超过 5MB', icon: 'none' })
    return false
  }
  return true
}

// 删除前确认
const beforeRemove = (): Promise<boolean> =>
  new Promise((resolve) => {
    uni.showModal({
      title: '确认删除？',
      success: (res) => resolve(res.confirm),
    })
  })

// 自定义解析服务器响应，返回最终图片 URL
const parseResponse = (
  data: UniApp.UploadFileSuccessCallbackResult
): string => {
  const res = JSON.parse(data.data)
  return res.data.url
}

const onUploadSuccess = (file: ImageUploadListItem) =>
  console.log('上传成功，URL：', file.url)
const onUploadFail = (error: Error, file: ImageUploadListItem) =>
  console.error('上传失败：', error, file)
const onRemove = (url: string) => console.log('已删除：', url)
</script>
```

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

### TnForm / TnFormItem - Form Components

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

TnForm and TnFormItem provide form validation capabilities powered by `async-validator`. They support various trigger methods and allow control over the validation process via instance methods.

```APIDOC
## TnForm / TnFormItem - Form Components

### Description
Form validation components based on `async-validator`. Supports multiple trigger methods and allows control over the validation process via instance methods (`validate`, `resetFields`, `clearValidate`).

### Usage Example

```vue
<template>
  <TnForm
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="right"
    label-width="160rpx"
    @validate="onValidate"
  >
    <TnFormItem label="Username" prop="username">
      <TnInput v-model="formData.username" placeholder="Enter username" />
    </TnFormItem>

    <TnFormItem label="Phone" prop="phone">
      <TnInput v-model="formData.phone" type="number" placeholder="Enter phone number" />
    </TnFormItem>

    <TnFormItem label="Remark" prop="remark">
      <TnInput v-model="formData.remark" type="textarea" placeholder="Optional" />
    </TnFormItem>

    <TnButton type="primary" form-type="submit" @click="handleSubmit">Submit</TnButton>
    <TnButton type="default" @click="handleReset">Reset</TnButton>
  </TnForm>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { TnFormInstance } from '@tuniao/tnui-vue3-uniapp'

const formRef = ref<TnFormInstance>()
const formData = reactive({
  username: '',
  phone: '',
  remark: ''
})
const rules = {
  username: [{ required: true, message: 'Please enter username', trigger: 'blur' }],
  phone: [
    { required: true, message: 'Please enter phone number', trigger: 'blur' },
    { pattern: /^1\d{10}$/, message: 'Invalid phone number format', trigger: 'blur' },
  ],
}

const handleSubmit = async () => {
  try {
    const valid = await formRef.value?.validate()
    if (valid) console.log('Validation passed', formData)
  } catch (e) {
    console.log('Validation failed', e)
  }
}
const handleReset = () => formRef.value?.resetFields()
const onValidate = (prop: string, isValid: boolean, message: string) => {
  if (!isValid) console.warn(`Field ${prop} validation failed: ${message}`)
}
</script>
```

### TnForm Props
- **ref** (TnFormInstance) - Reference to the form instance.
- **model** (object) - Data model for the form.
- **rules** (object) - Validation rules for the form fields.
- **label-position** (string) - Position of labels ('left', 'right', 'top').
- **label-width** (string | number) - Width of the labels.

### TnFormItem Props
- **label** (string) - Label text for the form item.
- **prop** (string) - The field name in the `model` to validate.

### TnForm Instance Methods
- **validate()**: Validates all fields or a specific field. Returns a Promise resolving to `true` if valid, or rejecting with validation errors.
- **resetFields()**: Resets all form fields to their initial values.
- **clearValidate()**: Clears all validation status and error messages.

### Events
- **@validate** - Emitted when a field's validation status changes. Provides `prop`, `isValid`, and `message`.

```

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

### TnPicker - Picker Component

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

A picker component that slides up from the bottom. It supports single-column, multi-column, and cascade data modes, and allows customization of label, value, and children field names.

```APIDOC
## TnPicker - Picker Component

### Description
Bottom-sliding wheel selector. Supports single-column, multi-column, and cascade data modes. Allows customization of label/value/children field names.

### Props
- `v-model` (any): Bound value.
- `open` (boolean): Controls the visibility of the picker.
- `data` (Array): The data source for the picker.
- `label-key` (string): The key for the display label in data items.
- `value-key` (string): The key for the value in data items.
- `children-key` (string): The key for nested data in cascade mode.

### Events
- `@confirm` (val: any, item: any): Emitted when the confirm button is pressed.
- `@cancel`: Emitted when the cancel button is pressed.
- `@change` (val: any[], index: number, item: any): Emitted when a column's value changes (for multi-column/cascade).

### Usage Example (Single Column)
```vue
<template>
  <TnPicker
    v-model="singleVal"
    :open="showSinglePicker"
    :data="cityList"
    label-key="name"
    value-key="code"
    @confirm="onSingleConfirm"
    @cancel="() => (showSinglePicker = false)"
  />
  <TnInput
    v-model="displayText"
    type="select"
    placeholder="Select City"
    @click="showSinglePicker = true"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const singleVal = ref('')
const displayText = ref('')
const showSinglePicker = ref(false)

const cityList = [
  { name: 'Beijing', code: 'BJ' },
  { name: 'Shanghai', code: 'SH' },
  { name: 'Guangzhou', code: 'GZ' },
]

const onSingleConfirm = (val: string, item: any) => {
  displayText.value = item.name
  singleVal.value = val
  showSinglePicker.value = false
}
</script>
```

### Usage Example (Cascade)
```vue
<template>
  <TnPicker
    v-model="cascadeVal"
    :open="showCascade"
    :data="regionData"
    label-key="label"
    value-key="value"
    children-key="children"
    @confirm="onCascadeConfirm"
    @change="onCascadeChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const cascadeVal = ref<string[]>([])
const showCascade = ref(false)

// Assume regionData is defined elsewhere
const regionData = [
  {
    label: 'Province A',
    value: 'A',
    children: [
      { label: 'City A1', value: 'A1' },
      { label: 'City A2', value: 'A2' },
    ],
  },
  {
    label: 'Province B',
    value: 'B',
    children: [
      { label: 'City B1', value: 'B1' },
    ],
  },
]

const onCascadeConfirm = (val: string[], items: any[]) => {
  console.log('Cascade selected values:', val, 'Selected items:', items)
  showCascade.value = false
}
const onCascadeChange = (val: string[], index: number, item: any) => {
  console.log(`Column ${index} changed to:`, item)
}
</script>
```
```

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

### useLongPress

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

Provides long press continuous triggering capability for elements, commonly used in scenarios requiring continuous operation like digital steppers.

```APIDOC
## useLongPress — Long Press Event Hook

### Description
Enables elements to trigger an action repeatedly while being long-pressed, useful for interactive controls.

### Usage

```typescript
import { ref } from 'vue'
import { useLongPress } from '@tuniao/tnui-vue3-uniapp'

// In setup function
const count = ref(0)
const longPressEnabled = ref(true)

// Callback function + enable flag + trigger interval (ms)
const { handleLongPressEvent, clearLongPressTimer } = useLongPress(
  () => { count.value++ },
  longPressEnabled,
  200  // Trigger every 200ms
)

// Template usage:
// <button
//   @touchstart="handleLongPressEvent"
//   @touchend="clearLongPressTimer"
//   @touchcancel="clearLongPressTimer"
// >
//   Long Press to Increment
// </button>
```
```

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

### TnSwiper for Image Carousels

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

Configures a responsive image carousel with autoplay, loop, custom indicators, and margin effects. Supports custom item content via slots.

```vue
<template>
  <TnSwiper
    v-model="currentIndex"
    :data="bannerList"
    width="750rpx"
    height="400rpx"
    :autoplay="true"
    :interval="4000"
    :loop="true"
    indicator
    indicator-type="dot"
    indicator-position="center-bottom"
    indicator-active-bg-color="tn-blue"
    previous-margin="20rpx"
    next-margin="20rpx"
    @change="onSwiperChange"
    @item-click="onItemClick"
  >
    <!-- 自定义每个 item 的内容 -->
    <template #default="{ item, index }">
      <image :src="item.imageUrl" style="width:100%;height:100%;" mode="aspectFill" />
    </template>
  </TnSwiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const currentIndex = ref(0)
const bannerList = ref([
  { imageUrl: 'https://example.com/banner1.jpg', link: '/pages/detail/1' },
  { imageUrl: 'https://example.com/banner2.jpg', link: '/pages/detail/2' },
  { imageUrl: 'https://example.com/banner3.jpg', link: '/pages/detail/3' },
])

const onSwiperChange = (index: number) => console.log('当前轮播索引：', index)
const onItemClick = (index: number) => {
  uni.navigateTo({ url: bannerList.value[index].link })
}
</script>
```

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

### TnInput - Input Component

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

TnInput is a multi-functional input component supporting text, number, password, textarea, and custom select modes. It includes features like a clear button, character count, underline border, and form validation integration.

```APIDOC
## TnInput - Input Component

### Description
Multi-functional input field supporting text, number, password, textarea, and custom select modes. It includes a clear button, character count, underline border, and form validation linkage.

### Usage Examples

**Normal Text Input**
```vue
<template>
  <TnInput v-model="username" placeholder="Enter username" clearable />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const username = ref('')
</script>
```

**Password Input (Toggle Visibility)**
```vue
<template>
  <TnInput v-model="password" type="password" placeholder="Enter password" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const password = ref('')
</script>
```

**Number Input, Max Length Limit**
```vue
<template>
  <TnInput v-model="amount" type="digit" :maxlength="10" placeholder="Amount" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const amount = ref('')
</script>
```

**Textarea Mode (Auto Height + Character Count)**
```vue
<template>
  <TnInput
    v-model="content"
    type="textarea"
    :maxlength="200"
    show-word-limit
    word-limit-color="tn-gray"
    :auto-height="true"
    placeholder="Enter content"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const content = ref('')
</script>
```

**Underline Style + Right Icon**
```vue
<template>
  <TnInput
    v-model="search"
    underline
    right-icon="search"
    confirm-type="search"
    @confirm="handleSearch"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const search = ref('')
const handleSearch = (val: string) => console.log('Search:', val)
</script>
```

**Select Mode (Click to Trigger Custom Selector)**
```vue
<template>
  <TnInput
    v-model="selected"
    type="select"
    placeholder="Please select"
    @click="openPicker"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const selected = ref('')
const openPicker = () => console.log('Open picker')
</script>
```

### Props
- **v-model** (string) - Binding value
- **type** (string) - Input type ('text', 'password', 'number', 'digit', 'textarea', 'select')
- **placeholder** (string) - Placeholder text
- **clearable** (boolean) - Whether to show a clear button
- **maxlength** (number) - Maximum input length
- **show-word-limit** (boolean) - Whether to show word limit
- **word-limit-color** (string) - Color of the word limit text
- **auto-height** (boolean) - Whether the textarea has auto height
- **underline** (boolean) - Whether to use underline style
- **right-icon** (string) - Icon name to display on the right
- **confirm-type** (string) - Type of keyboard confirmation button

### Events
- **@confirm** - Emitted when the confirm button is pressed.
- **@click** - Emitted when the input is clicked (especially for 'select' type).

```

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

### TnPopup: Versatile Popup Layer Component

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

TnPopup is a versatile popup component that can appear from the top, bottom, left, right, or center. It supports a mask layer, close button, rounded corners, and bottom safe area. Use the `v-model` to control visibility and event handlers like `open`, `close`, and `overlay-click` for interaction.

```vue
<template>
  <TnButton @click="showPopup = true">打开弹框</TnButton>

  <!-- 底部弹出 -->
  <TnPopup
    v-model="showPopup"
    open-direction="bottom"
    height="400rpx"
    :radius="20"
    close-btn
    close-btn-position="right-top"
    safe-area-inset-bottom
    @open="onOpen"
    @close="onClose"
    @overlay-click="onOverlayClick"
  >
    <view style="padding: 30rpx;">
      <text>底部弹出内容区域</text>
    </view>
  </TnPopup>

  <!-- 居中弹框 -->
  <TnPopup v-model="showCenter" open-direction="center" width="600rpx">
    <view style="padding: 40rpx; text-align: center;">
      <text>居中弹框内容</text>
      <TnButton @click="showCenter = false">关闭</TnButton>
    </view>
  </TnPopup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const showPopup = ref(false)
const showCenter = ref(false)
const onOpen = () => console.log('弹框打开')
const onClose = () => console.log('弹框关闭')
const onOverlayClick = () => console.log('点击遮罩')
</script>
```

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

### TnCountDown: Countdown Timer

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

A countdown timer component supporting day, hour, minute, and second display. Allows switching between Chinese and English separators and offers instance methods for control.

```vue
<template>
  <TnCountDown
    ref="countDownRef"
    :time="7200"
    :auto-start="false"
    show-day
    separator-mode="cn"
    border
    border-color="tn-blue"
    text-color="tn-blue"
    @start="onStart"
    @end="onEnd"
  />

  <TnButton @click="countDownRef?.start()">开始</TnButton>
  <TnButton @click="countDownRef?.pause()">暂停</TnButton>
  <TnButton @click="countDownRef?.reset()">重置</TnButton>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TnCountDownInstance } from '@tuniao/tnui-vue3-uniapp'

const countDownRef = ref<TnCountDownInstance>()
const onStart = () => console.log('倒计时开始')
const onEnd = () => uni.showToast({ title: '倒计时结束！' })
</script>
```

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

### TnSwiper - Swiper Component

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

A full-featured swiper component that supports automatic playback, looping, indicators (line, dot, number), and adjacent item display with margins.

```APIDOC
## TnSwiper - Swiper Component

### Description
Full-featured swiper component. Supports automatic playback, looping, indicators (line/dot/number), and displaying adjacent items with previous/next margins.

### Props
- `v-model` (number): Current swiper index.
- `data` (Array): Array of banner data.
- `width` (string): Width of the swiper.
- `height` (string): Height of the swiper.
- `autoplay` (boolean): Enable automatic playback.
- `interval` (number): Automatic playback interval in milliseconds.
- `loop` (boolean): Enable infinite loop.
- `indicator` (boolean): Show pagination indicators.
- `indicator-type` (string): Type of indicator ('line', 'dot', 'number').
- `indicator-position` (string): Position of the indicator ('center-bottom', etc.).
- `indicator-active-bg-color` (string): Background color of the active indicator.
- `previous-margin` (string): Margin on the previous side to show adjacent item.
- `next-margin` (string): Margin on the next side to show adjacent item.

### Events
- `@change` (index: number): Emitted when the current swiper index changes.
- `@item-click` (index: number): Emitted when a swiper item is clicked.

### Usage Example
```vue
<template>
  <TnSwiper
    v-model="currentIndex"
    :data="bannerList"
    width="750rpx"
    height="400rpx"
    :autoplay="true"
    :interval="4000"
    :loop="true"
    indicator
    indicator-type="dot"
    indicator-position="center-bottom"
    indicator-active-bg-color="tn-blue"
    previous-margin="20rpx"
    next-margin="20rpx"
    @change="onSwiperChange"
    @item-click="onItemClick"
  >
    <!-- Custom content for each item -->
    <template #default="{ item, index }">
      <image :src="item.imageUrl" style="width:100%;height:100%;" mode="aspectFill" />
    </template>
  </TnSwiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const currentIndex = ref(0)
const bannerList = ref([
  { imageUrl: 'https://example.com/banner1.jpg', link: '/pages/detail/1' },
  { imageUrl: 'https://example.com/banner2.jpg', link: '/pages/detail/2' },
  { imageUrl: 'https://example.com/banner3.jpg', link: '/pages/detail/3' },
])

const onSwiperChange = (index: number) => console.log('Current swiper index:', index)
const onItemClick = (index: number) => {
  uni.navigateTo({ url: bannerList.value[index].link })
}
</script>
```
```

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

### TnNotify - Message Notification (Imperative Call)

Source: https://context7.com/chinabugotech/tuniaoui-rc-vue3-uniapp/llms.txt

Displays temporary notifications at the top, center, or bottom of the screen. These notifications automatically close after a specified duration. The `show` method of `TnNotifyInstance` is used to trigger these notifications.

```APIDOC
## TnNotify - Message Notification (Imperative Call)

### Description
Page top/bottom/center display of light prompt notifications, triggered by the `show` method of `TnNotifyInstance`, with automatic timed closure.

### Method Signature
`TnNotifyInstance.show(options: {
  msg: string,
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'error',
  position?: 'top' | 'center' | 'bottom',
  duration?: number,
  bgColor?: string
}): void`

### Usage Example
```vue
<template>
  <TnNotify ref="notifyRef" :offset-top="navbarHeight" />
  <TnButton @click="triggerNotify">Show Notification</TnButton>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TnNotifyInstance } from '@tuniao/tnui-vue3-uniapp'

const notifyRef = ref<TnNotifyInstance>()
const navbarHeight = ref(0)

const triggerNotify = () => {
  notifyRef.value?.show({
    msg: 'Operation successful, data updated!',
    type: 'success',
    position: 'top',
    duration: 3000,
  })
}

// Error Notification Example
const showError = () => {
  notifyRef.value?.show({
    msg: 'Network request failed, please try again later',
    type: 'danger',
    position: 'top',
    bgColor: '#ff4444',
  })
}
</script>
```
```