WEB COMPONENTS

35 framework-free components 35 个框架无关组件

No React. No Vue. No Angular. Pure custom elements that embed in any host — the portal, the designer, or a plain HTML page. Built for metadata-driven document and dictionary workspaces. 不依赖 React、Vue 或 Angular。纯自定义元素,可嵌入任意宿主——门户、设计器或普通 HTML 页面。专为元数据驱动的单据与字典工作台而生。

⚡

Zero framework coupling零框架耦合

Every element registers with customElements.define() and works with a <script> tag. No build step required to consume them. 每个元素均通过 customElements.define() 注册,一个 <script> 标签即可使用,无需构建步骤。

🔗

Master-slave coordination主从协调

CmxMasterSlave orchestrates any combination of grids, forms, trees, and tabs over a shared CmxDataSet — selection, load, save, changeset all handled centrally. CmxMasterSlave 协调任意组合的表格、表单、树和标签页——基于共享 CmxDataSet,选中、装载、回存、变更集集中处理。

🧱

Column model single source列模型单一事实源

CmxColumnModel drives grid columns, form fields, and filter bars from one definition. Change the model; every consumer follows. CmxColumnModel 用同一份定义驱动表格列、表单字段和过滤栏。修改模型,所有消费者自动跟随。

COMPONENT FAMILIES组件族群

Grouped by responsibility按职责分组

📋
Grids & Tables表格与网格

cmx-revo-grid cmx-tabulator cmx-ignite-grid cmx-spreadsheet cmx-spreadjs-sheet cmx-megasheet cmx-pager

High-performance virtual grids (RevoGrid, Tabulator, Ignite), spreadsheet engines for report design, and a built-in pager — all bound via CmxDataSet. 高性能虚拟表格(RevoGrid、Tabulator、Ignite)、报表设计电子表格引擎,以及内置分页器——均通过 CmxDataSet 绑定。

📝
Forms & Inputs表单与输入

cmx-form cmx-ui cmx-text-input cmx-number-input cmx-date-input cmx-datetime-input cmx-combo-box cmx-ignite-input cmx-ignite-combo cmx-filter-bar

A complete form layer — text, number, date, combo, and filter inputs — driven by CmxColumnModel field definitions with inline validation. 完整表单层——文本、数字、日期、组合框和过滤输入——由 CmxColumnModel 字段定义驱动,支持行内校验。

📚
Dictionary & Document字典与单据

cmx-dict-select cmx-web-treeview cmx-desc-list cmx-desc-item cmx-embed-page cmx-ignite-list

Dictionary selector with tree-search, hierarchical tree view, description list for doc detail panels, embedded page frame, and Ignite list integration. 带树形检索的字典选择器、层级树视图、单据详情面板描述列表、嵌入式页面框架及 Ignite 列表集成。

🧮
Formula & Master-Slave公式与主从

cmx-fx-editor cmx-master-slave-config cmx-ignite-gauge

cmx-fx-editor — a full formula bar with function wizard, syntax highlighting (CodeMirror), and live validation. cmx-master-slave-config provides visual configuration of master-slave layouts. Ignite gauge for KPI dials. cmx-fx-editor——完整公式栏,含函数向导、语法高亮(CodeMirror)与实时校验。cmx-master-slave-config 提供主从布局可视化配置。Ignite gauge 用于 KPI 仪表盘。

🪟
Layout & Panels布局与面板

cmx-split-pane cmx-panel cmx-view-tabs cmx-toolbar cmx-floating-dialog cmx-empty-state

Resizable split panes, collapsible panels, tab groups, a configurable toolbar, draggable floating dialogs, and a composable empty-state slot — the skeleton of any four-zone workspace. 可拖拽分割面板、折叠面板、标签组、可配置工具栏、可拖拽浮动对话框和可组合空状态插槽——任意四区工作台的骨架。

📊
Status & KPI状态与 KPI

cmx-kpi-card cmx-status-tag

Metric cards with trend indicators and configurable number formatting. Semantic status badges for document and workflow states — approved, pending, rejected — with accessible contrast. 带趋势指示和可配置数字格式的指标卡片。单据与流程状态的语义状态徽章——已审批、待处理、已拒绝——并符合无障碍对比度要求。

LIBRARY LAYER库层

The engine under the elements自定义元素背后的引擎

The src/lib/ directory holds the pure-JS coordination layer — no DOM, no custom elements, consumable from any context. src/lib/ 目录存放纯 JS 协调层——无 DOM、无自定义元素,可在任意上下文中使用。

CmxMasterSlave
Central coordinator for master-detail layouts. Manages selection, loading, saving, and the incremental changeset across any number of bound child components. 主从布局的中央协调器。管理任意数量绑定子组件的选中、装载、回存和增量变更集。
CmxDataSet
Observable row store with change tracking. Grids and forms read rows from it; the master-slave coordinator writes changesets back to the API through it. 可观测的行存储,带变更追踪。表格和表单从中读取行数据;主从协调器通过它将变更集写回 API。
CmxColumnModel
Single column definition consumed by grids, forms, and filter bars. Carries field type, label, width, validation, formatter, and renderer — swap once, every consumer updates. 被表格、表单和过滤栏共同消费的单一列定义。携带字段类型、标签、宽度、校验、格式化器和渲染器——修改一次,所有消费者自动更新。
CmxMetaModel
Runtime metadata resolver. Converts a server-sent definition JSON — DOC, DCT, FLC, RPT — into CmxColumnModel instances and page-model bindings with zero bespoke code per document type. 运行时元数据解析器。将服务端发来的定义 JSON(DOC、DCT、FLC、RPT)转换为 CmxColumnModel 实例和页面模型绑定,每种单据类型均无需专属代码。
CmxDictCache / CmxDictDataSource
Client-side dictionary cache and data source adapter. Supplies option lists to cmx-dict-select and dictionary field types with automatic invalidation. 客户端字典缓存与数据源适配器。向 cmx-dict-select 和字典字段类型提供选项列表,并自动失效。
QUICK START快速上手

Consume from the monorepo在 monorepo 中引用

Import a component引入组件

// registers <cmx-revo-grid>
import 'cmx-data-comp/components/cmx-revo-grid.js'

// use the coordination layer
import { CmxMasterSlave } from
  'cmx-data-comp/lib/cmx-master-slave.js'

Run the tests运行测试

npm test -w cmx-data-comp
# ~616 Vitest unit tests
# covers: DataSet, ColumnModel,
#   MasterSlave, MetaModel, FieldSchema…

See the spreadsheet suite探索电子表格套件

Three engines — TypeScript front-end, Rust headless back-end, and a headless-Excel CLI/HTTP shell. 三引擎——TypeScript 前端、Rust 无头后端,以及无头 Excel CLI/HTTP 壳。