@x-coins/ui

Business UI components for Vue 3 applications. The package wraps Ant Design Vue with project-level table, form, and pop conventions.

Detailed API reference: ../../docs/api-reference.md. CRUD agent workflow: ../../docs/skills/coins-crud-page/SKILL.md.

Public Entry

Import from the package root:

import {
  createModalPop,
  defineColumns,
  defineSchema,
  ProTable,
  SchemaForm,
  SearchForm,
  useProTable,
  useSchemaForm,
} from '@x-coins/ui'

Form APIs

• SchemaForm: renders configuration-driven forms from FormSchema.
• SearchForm: compact query form built on SchemaForm; emits search with query plus pagination.
• defineSchema<T>(): type helper for schema declarations.
• useSchemaForm<T>(): exposes validate, setFieldsValue, resetFields, and other form instance helpers.

Common field components include input, textarea, input-number, select, tree-select, switch, checkbox, checkbox-group, and radio-group.

Use form-level state for whole-form behavior:

<SchemaForm
  v-model:model="model"
  :schema="schema"
  :loading="detailLoading"
/>

loading shows a spin indicator and disables the form. Use field-level disabled only for business-specific exceptions.

Table APIs

• ProTable: wraps Ant Design Vue Table with toolbar, column settings, row actions, selection, pagination, tree rows, and slots.
• defineColumns<T>(): type helper for column declarations.
• useProTable<T, Q>(): centralizes loading, request sequencing, pagination, search, reload, and table change state.

Use actions for row operations and named slots for custom cells:

<ProTable :columns="columns" :data-source="dataSource" :actions="actions">
  <template #status="{ record }">
    {{ record.status }}
  </template>
</ProTable>

Pop APIs

• createModalPop: opens a lazy-loaded component in a modal container.
• Pop content can expose submit(); the modal confirm button calls it and resolves the returned promise on success.
• Pass business data through params, and call props.handle.confirm() after successful submit.

CRUD Convention

For admin pages, prefer SearchForm + useProTable + ProTable for lists and SchemaForm + createModalPop for create/edit forms. Edit and detail pop components should fetch by id before filling the form.