Features

• 🧩 12+ components — Button, Input, Select, Form, Table, Dialog, Toast, Radio, Checkbox and more
• 📦 Tree-shakable — Import only what you need, or register all at once
• 🎨 Customizable themes — Less design tokens for easy styling
• 🚀 TypeScript — Full type inference for props, emits, and slots
• ✅ Tested — Component coverage with Vitest + Vue Test Utils

Installation

npm install vue3-ui-xk

Usage

Full Registration

import { createApp } from 'vue'
import Vue3UI from 'vue3-ui-xk'
import 'vue3-ui-xk/dist/style.css'

const app = createApp(App)
app.use(Vue3UI)
app.mount('#app')

On-Demand (Tree-Shaking)

import { RButton, RInput, RTable } from 'vue3-ui-xk'
import 'vue3-ui-xk/dist/style.css'

Custom Subset

import { createInstaller, RButton, RInput } from 'vue3-ui-xk'
import 'vue3-ui-xk/dist/style.css'

app.use(createInstaller([RButton, RInput]))

Components

Button

Action triggers with multiple style variants and loading state.

| Prop | Type | Default | |------|------|---------| | type | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'default' | 'default' | | size | 'sm' \| 'base' \| 'lg' | 'base' | | disabled | boolean | false | | loading | boolean | false | | round | boolean | false | | circle | boolean | false | | plain | boolean | false | | nativeType | 'button' \| 'submit' \| 'reset' | 'button' |

Slots: default (label), icon

<RButton type="primary" @click="handleClick">Submit</RButton>
<RButton type="danger" size="sm" :loading="isLoading">Delete</RButton>

Input

Text input with prefix/suffix, clearable, and password visibility toggle.

| Prop | Type | Default | |------|------|---------| | modelValue | string | '' | | type | 'text' \| 'password' \| ... | 'text' | | size | 'sm' \| 'base' \| 'lg' | 'base' | | placeholder | string | '' | | disabled | boolean | false | | readonly | boolean | false | | clearable | boolean | false | | showPassword | boolean | false | | maxlength | number | — | | prefixIcon | string | '' | | suffixIcon | string | '' |

Events: update:modelValue, input, focus, blur, clear, enter

<RInput v-model="search" placeholder="Search..." clearable @enter="onSearch" />

Select

Dropdown selector with single, multiple, and filterable modes.

| Prop | Type | Default | |------|------|---------| | modelValue | string \| number \| (string \| number)[] | '' | | options | SelectOption[] | [] | | size | 'sm' \| 'base' \| 'lg' | 'base' | | placeholder | string | '请选择' | | disabled | boolean | false | | clearable | boolean | false | | multiple | boolean | false | | filterable | boolean | false |

<RSelect v-model="selected" :options="options" filterable />
<RSelect v-model="tags" :options="options" multiple />

Radio & RadioGroup

Single selection from a group of options.

Radio props: modelValue, value, disabled, name
RadioGroup props: modelValue, disabled, name

<RRadioGroup v-model="gender">
  <RRadio :value="1">Male</RRadio>
  <RRadio :value="2">Female</RRadio>
</RRadioGroup>

Checkbox & CheckboxGroup

Multi-selection, standalone toggle, and indeterminate state.

Checkbox props: modelValue, value, disabled, indeterminate, name
CheckboxGroup props: modelValue, disabled

<RCheckbox v-model="agreed">I agree</RCheckbox>

<RCheckboxGroup v-model="hobbies">
  <RCheckbox value="reading">Reading</RCheckbox>
  <RCheckbox value="music">Music</RCheckbox>
</RCheckboxGroup>

Form & FormItem

Form validation with built-in rules and custom validators.

Form props: model, rules, labelWidth, inline, disabled
FormItem props: prop, label, required

Rules: required, min, max, pattern, validator

<RForm :model="formData" :rules="rules" label-width="100px" @submit="onSubmit">
  <RFormItem prop="name" label="Name">
    <RInput v-model="formData.name" />
  </RFormItem>
  <RButton type="primary" native-type="submit">Submit</RButton>
</RForm>

Table

Data table with sorting, stripes, and custom cell rendering.

| Prop | Type | Default | |------|------|---------| | data | Record<string, unknown>[] | [] | | columns | TableColumn[] | [] | | rowKey | string | 'id' | | border | boolean | false | | stripe | boolean | false | | hover | boolean | false | | loading | boolean | false | | emptyText | string | '暂无数据' |

Events: row-click, sort-change
Scoped slot: { row, column, index } for custom cell content.

<RTable :data="users" :columns="columns" stripe hover @row-click="handleRow">
  <template #default="{ row }">
    <RButton size="sm" @click="edit(row)">Edit</RButton>
  </template>
</RTable>

Dialog

Modal dialog with teleport, animations, and configurable footer.

| Prop | Type | Default | |------|------|---------| | modelValue | boolean | false | | title | string | '' | | width | string | '480px' | | closable | boolean | true | | maskClosable | boolean | true | | showConfirm | boolean | true | | showCancel | boolean | true | | confirmText | string | '确定' | | cancelText | string | '取消' | | loading | boolean | false | | zIndex | number | 2000 |

<RDialog v-model="visible" title="Confirm" @confirm="onConfirm">
  <p>Are you sure?</p>
</RDialog>

Toast

Lightweight notification with auto-dismiss and type variants.

| Prop | Type | Default | |------|------|---------| | defaultDuration | number | 3000 | | maxCount | number | 5 |

Methods: info(msg), success(msg), warning(msg), danger(msg), add(options), remove(id)

<RToast ref="toastRef" />

<script setup>
const toast = ref(null)
toast.value.success('Operation successful!')
toast.value.danger('Something went wrong')
</script>

Development

npm run dev            # Start dev server
npm run build          # Build library (Vite + types)
npm test               # Run tests
npm run test:watch     # Watch mode
npm run docs:dev       # Start VitePress docs

License

MIT