npm package: @funcho/ui
Description: @funcho ui library
Latest version: 1.1.29

# @funcho/ui

Vue 3 组件库，基于 Vue 3 + TypeScript 构建的现代化组件库。

## 特性

- 🚀 基于 Vue 3 + TypeScript 构建
- 📦 支持按需引入
- 💪 使用 Monorepo + pnpm 工作区管理
- 📝 完整的类型定义
- 🔧 完善的开发工具链

## 安装

```bash
npm install @funcho/ui @funcho/icons-vue vue3-ace-editor ace-builds @wangeditor/editor @wangeditor/editor-for-vue

yarn add @funcho/ui @funcho/icons-vue vue3-ace-editor ace-builds @wangeditor/editor @wangeditor/editor-for-vue

pnpm add @funcho/ui @funcho/icons-vue vue3-ace-editor ace-builds @wangeditor/editor @wangeditor/editor-for-vue
```

## 快速开始

### 全局引入

```ts
// main.ts
import { createApp } from 'vue';
import App from './App.vue';

import funchoUI from '@funcho/ui';
import '@funcho/ui/style.css';

const app = createApp(App);
app.use(funchoUI);
app.mount('#app');
```

## 使用示例

```vue
<template>
  <FcButton @click="open = true">弹窗</FcButton>
  <FcButton type="primary">按钮</FcButton>
  <FcButton type="success">按钮</FcButton>
  <FcButton type="warning">按钮</FcButton>
  <FcButton type="danger">按钮</FcButton>
  <FcButton type="info">按钮</FcButton>
  <FcDialog v-model="open">
    <div>弹窗测试2222</div>
  </FcDialog>
</template>

<script setup lang="ts">
import { FcButton, FcDialog } from '@funcho/ui';
import { ref } from 'vue';
const open = ref(false);
</script>
```

## 组件列表

| 序号 | 原子组件名称 |
| :---: | :--- |
| 1 | `FcAutocomplete` |
| 2 | `FcAvatar` |
| 3 | `FcAvatarGroup` |
| 4 | `FcBadge` |
| 5 | `FcBooleanSwitch` |
| 6 | `FcBreadcrumb` |
| 7 | `FcBreadcrumbItem` |
| 8 | `FcButton` |
| 9 | `FcBzDatePicker` |
| 10 | `FcCard` |
| 11 | `FcCascader` |
| 12 | `FcCascaderCheck` |
| 13 | `FcCascaderEnd` |
| 14 | `FcCascaderMultiple` |
| 15 | `FcCascaderPanel` |
| 16 | `FcCheckbox` |
| 17 | `FcCheckboxButton` |
| 18 | `FcCheckboxGroup` |
| 19 | `FcCodeEditor` |
| 20 | `FcCodeEditorInput` |
| 21 | `FcCollapse` |
| 22 | `FcCollapseItem` |
| 23 | `FcConfigProvider` |
| 24 | `FcConfirmSwitch` |
| 25 | `FcContextMenu` |
| 26 | `FcDangerButton` |
| 27 | `FcDatePicker` |
| 28 | `FcDatePickerPanel` |
| 29 | `FcDatePickerRanger` |
| 30 | `FcDateTimePicker` |
| 31 | `FcDateTimePickerRanger` |
| 32 | `FcDecimalInputNumber` |
| 33 | `FcDecimalNoLimitSizeInputNum` |
| 34 | `FcDescriptions` |
| 35 | `FcDescriptionsItem` |
| 36 | `FcDialog` |
| 37 | `FcDivider` |
| 38 | `FcDrawer` |
| 39 | `FcDropdown` |
| 40 | `FcDropdownItem` |
| 41 | `FcDropdownMenu` |
| 42 | `FcEmpty` |
| 43 | `FcForm` |
| 44 | `FcFormItem` |
| 45 | `FcIcon` |
| 46 | `FcIconComponent` |
| 47 | `FcImage` |
| 48 | `FcImageViewer` |
| 49 | `FcInput` |
| 50 | `FcInputEmail` |
| 51 | `FcInputEngNum` |
| 52 | `FcInputMobile` |
| 53 | `FcInputNumber` |
| 54 | `FcInputNumStr` |
| 55 | `FcInputPassword` |
| 56 | `FcInputTag` |
| 57 | `FcInputTextarea` |
| 58 | `FcIntegerInputNum` |
| 59 | `FcLink` |
| 60 | `FcLinkButton` |
| 61 | `FcMenu` |
| 62 | `FcMenuItem` |
| 63 | `FcMenuItemGroup` |
| 64 | `FcMessage` |
| 65 | `FcMessageBox` |
| 66 | `FcNoLimitSizeInputNum` |
| 67 | `FcNotification` |
| 68 | `FcOption` |
| 69 | `FcPagination` |
| 70 | `FcPopconfirm` |
| 71 | `FcPopover` |
| 72 | `FcProgress` |
| 73 | `FcRadio` |
| 74 | `FcRadioButton` |
| 75 | `FcRadioGroup` |
| 76 | `FcResult` |
| 77 | `FcRichEditor` |
| 78 | `FcRichEditorInput` |
| 79 | `FcScrollbar` |
| 80 | `FcSelect` |
| 81 | `FcSelectAllowCreateSelect` |
| 82 | `FcSelectMultiple` |
| 83 | `FcSelectV2` |
| 84 | `FcSingleRadio` |
| 85 | `FcSplitter` |
| 86 | `FcSplitterPanel` |
| 87 | `FcStep` |
| 88 | `FcSteps` |
| 89 | `FcSubMenu` |
| 90 | `FcSwitch` |
| 91 | `FcTable` |
| 92 | `FcTableColumn` |
| 93 | `FcTableV2` |
| 94 | `FcTabPane` |
| 95 | `FcTabs` |
| 96 | `FcTag` |
| 97 | `FcText` |
| 98 | `FcTimePicker` |
| 99 | `FcTimeSelect` |
| 100 | `FcTimeSelectMultiple` |
| 101 | `FcTooltip` |
| 102 | `FcTree` |
| 103 | `FcTreeSelect` |
| 104 | `FcUpload` |
| 105 | `FcLovText` |

| 序号 | 组件名称 |
| :---: | :--- |
| 1 | `FcDataTable` |
| 2 | `FcProForm` |
| 3 | `FcSidebarMainLayout` |
| 4 | `FcProTreeCheckFilter` |
| 5 | `FcProTreeTransfer` |
| 6 | `FcProEditFormCard` |
| 7 | `FcProFormDialog` |
| 8 | `FcProQueryForm` |