@hx-cd/ui

Vue 3 component library built on Element Plus. Provides higher-order components for CRUD tables, forms, trees, cascaders, and handler/action patterns.

Installation

pnpm add @hx-cd/ui

Components

CRUD Table

<template>
  <CrudTable :columns="columns" :query="queryFn" />
</template>

Features: column filtering, pagination, skeleton loading.

Composables: useActions, useColumns, useLayerForm, useNotify, usePolling, useQuery, useService, useTable.

Form System

<template>
  <BaseForm :fields="fields" v-model="formData" />
</template>

Components: BaseForm, BaseFormItem, BaseFormGroup, BaseFormDetail.

Field components (20+): input, select, checkbox, radio, date-picker, time-picker, cascader, autocomplete, transfer, upload with image preview, tree-select, tree-checkbox, virtualized-select, icons, editor, tag-input, color-picker, input-number, input-unit, input-list, custom.

Floating-layer forms: dialog form, drawer form.

Element Table

Extended table component with column items, sortable headers, and hooks for actions, context, data, inline forms, selection, table logic, and utilities.

Easy Tree

<template>
  <EasyTree :data="treeData" />
</template>

Components: EasyTree, EasyTreeNode.

Virtual Cascader

Virtualized cascader select with panel, menu, and node components.

Handlers

Action handler components: Btn.vue, Handlers.vue.

Other

• LoadingSpinner component
• useDelayRender hook
• use-dialog hook

Build

pnpm build    # Vite → ESM + CJS + UMD + CSS
pnpm dev      # Vite dev server

Dependencies

• Runtime: @vueuse/core, lodash-es, uuid, vue-virtual-scroller
• Peer: element-plus, @element-plus/icons-vue, vue

Tests

pnpm test           # Unit tests (Vitest + Vue Test Utils)
pnpm test:e2e       # E2E tests (Playwright)

License

MIT