@viliha/vui-ui 1.1.4 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -57,6 +57,53 @@ export function Example() {
|
|
|
57
57
|
}
|
|
58
58
|
```
|
|
59
59
|
|
|
60
|
+
### Datatables & forms
|
|
61
|
+
|
|
62
|
+
`RecordView` is a complete admin datatable from a single `fields` array —
|
|
63
|
+
editable cells, sorting, filtering, pagination, row actions, bulk actions,
|
|
64
|
+
CSV / JSON / Excel / PDF import & export, and a buffered **Add / Edit / View**
|
|
65
|
+
form (slide-over or full-page). Required fields render a `*`, alignment and
|
|
66
|
+
colors come from the tokens — you never style a field by hand.
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
|
|
70
|
+
|
|
71
|
+
const fields: RecordField<Customer>[] = [
|
|
72
|
+
{ key: "name", label: "Name", required: true, hideInTable: true },
|
|
73
|
+
{ key: "email", label: "Email", copyable: true },
|
|
74
|
+
{ key: "country", label: "Country" },
|
|
75
|
+
];
|
|
76
|
+
|
|
77
|
+
<RecordView
|
|
78
|
+
title="Customers"
|
|
79
|
+
singular="Customer"
|
|
80
|
+
fields={fields}
|
|
81
|
+
initialData={rows}
|
|
82
|
+
getPrimary={(r) => ({ title: r.name, initials: r.name.slice(0, 2) })}
|
|
83
|
+
makeEmptyRow={() => ({ id: Date.now(), name: "", email: "", country: "" })}
|
|
84
|
+
/>;
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
The same `fields` also drive `RecordForm` — the Add/Edit/View screen — and its
|
|
88
|
+
Info panel (from `formDescription` + per-field `description`). See the
|
|
89
|
+
[Data table docs](https://vui.viliha.com/docs/data-table).
|
|
90
|
+
|
|
91
|
+
## Patterns
|
|
92
|
+
|
|
93
|
+
The reference app composes these primitives into the conventions documented at
|
|
94
|
+
[vui.viliha.com/docs/layout](https://vui.viliha.com/docs/layout):
|
|
95
|
+
|
|
96
|
+
- **Five page types** — data table, record form (Add / Edit / View), dashboard,
|
|
97
|
+
settings, and kanban board.
|
|
98
|
+
- **Command palette** — Quick actions (`⌘K`, navigate pages) and Global search
|
|
99
|
+
(`⌘⌥K`, find records), both built on the exported `CommandPalette`.
|
|
100
|
+
- **Breadcrumbs** — the exported `Breadcrumbs` component fed a route-derived
|
|
101
|
+
trail.
|
|
102
|
+
|
|
103
|
+
Copy them from the
|
|
104
|
+
[backoffice demo](https://github.com/myviliha/vui-starter/tree/main/apps/backoffice)
|
|
105
|
+
and adapt.
|
|
106
|
+
|
|
60
107
|
## Building with an AI agent
|
|
61
108
|
|
|
62
109
|
This package ships an **AI-agent usage guide** at
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viliha/vui-ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.5",
|
|
4
4
|
"description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Suman Bonakurthi",
|