open-index/open-npm huggingface dataset:
npm package: @hybridh5/c-ui-vue
Description: A Vue 3 UI component library with dark/light theme support
Latest version: 0.1.1

# @hybridh5/c-ui-vue

基于 Vue 3 的组件库，支持统一主题（`dark` / `light`）和尺寸（`sm` / `md` / `lg`）。

## 安装

```bash
npm i @hybridh5/c-ui-vue vue
```

可选依赖：

- 使用 `CDatePicker` 时建议安装 `dayjs`

```bash
npm i dayjs
```

组件内部使用了 Font Awesome 图标类名（如 `fas fa-times-circle`），请在应用中引入图标样式：

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
```

## 快速开始

### 全局注册

```ts
import { createApp } from 'vue'
import App from './App.vue'
import CUI from '@hybridh5/c-ui-vue'
import '@hybridh5/c-ui-vue/dist/c-ui.css'

createApp(App).use(CUI).mount('#app')
```

### 按需引入

```ts
import {
	CConfigProvider,
	CButton,
	CInput,
	CSelect,
	type CSelectOption
} from '@hybridh5/c-ui-vue'
import '@hybridh5/c-ui-vue/dist/c-ui.css'
```

说明：

- 无论全局注册还是按需引入，都需要在应用入口仅引入一次 `@hybridh5/c-ui-vue/dist/c-ui.css`。
- 组件使用到的 Font Awesome 类需要由业务侧自行提供样式文件。

```vue
<template>
	<c-config-provider theme="light" size="md">
		<c-button variant="primary">提交</c-button>
		<c-input v-model="keyword" clearable placeholder="请输入关键词" />
		<c-select v-model="status" :options="options" />
	</c-config-provider>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CSelectOption } from '@hybridh5/c-ui-vue'

const keyword = ref('')
const status = ref<string | number | boolean | null>('all')
const options: CSelectOption[] = [
	{ label: '全部', value: 'all' },
	{ label: '进行中', value: 'doing' },
	{ label: '已完成', value: 'done' }
]
</script>
```

## 配置与注入

- `CConfigProvider`：推荐业务侧使用，统一向子组件提供 `theme` / `size`。
- `useConfig`：在自定义组件中读取当前配置。

```ts
import { useConfig } from '@hybridh5/c-ui-vue'

const config = useConfig()
```

## 组件导出

当前包导出以下组件：

- `CButton`
- `CBadge`
- `CCheckbox`
- `CConfigProvider`
- `CDatePicker`
- `CEmpty`
- `CInput`
- `CNumberInput`
- `CPagination`
- `CSelect`
- `CTable`
- `CTag`
- `CTooltip`

类型与工具导出：

- `CSelectOption`
- `CTableColumn` / `CTableAction` / `CTableRow`
- `CUIConfig`
- `useConfig`

## 常见事件约定

- 输入类组件支持 `v-model`（`modelValue` + `update:modelValue`）。
- 同时保留 `change` 事件用于变更通知。
- 建议优先用 `v-model` 作为状态来源，`change` 作为副作用触发点。

## 本地开发

在 monorepo 根目录执行：

```bash
npm run build -w @hybridh5/c-ui-vue
```

如需全仓验证：

```bash
npm run build
```

## License

MIT