blixify-ui-web-mcp 0.1.67 → 0.1.69
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.
|
@@ -242,6 +242,31 @@ export const NewGrid = () => {
|
|
|
242
242
|
</div>
|
|
243
243
|
</StorySection>
|
|
244
244
|
|
|
245
|
+
<StorySection
|
|
246
|
+
title="NewGrid — Grouped sections"
|
|
247
|
+
description="groups splits the cards into collapsible sections, in the order given, each headed by its title, colour and record count."
|
|
248
|
+
>
|
|
249
|
+
<NewGridImpl
|
|
250
|
+
data={data.slice(0, 6)}
|
|
251
|
+
hidePagination
|
|
252
|
+
groups={[
|
|
253
|
+
{
|
|
254
|
+
id: "Promotions",
|
|
255
|
+
title: "Promotions",
|
|
256
|
+
colour: "orange",
|
|
257
|
+
rowIds: ["2", "3", "4"],
|
|
258
|
+
},
|
|
259
|
+
{
|
|
260
|
+
id: "Regular",
|
|
261
|
+
title: "Regular",
|
|
262
|
+
colour: "blue",
|
|
263
|
+
rowIds: ["1", "5"],
|
|
264
|
+
},
|
|
265
|
+
{ id: "__empty", title: "No Value", rowIds: ["6"] },
|
|
266
|
+
]}
|
|
267
|
+
/>
|
|
268
|
+
</StorySection>
|
|
269
|
+
|
|
245
270
|
<StorySection
|
|
246
271
|
title="Comparing with the legacy Grid"
|
|
247
272
|
description="Open Display/Grid in another tab — same sample data renders. NewGridItem is exactly GridClass — drop-in data swap."
|
|
@@ -259,6 +259,34 @@ export const NewList = () => (
|
|
|
259
259
|
/>
|
|
260
260
|
</StorySection>
|
|
261
261
|
|
|
262
|
+
<StorySection
|
|
263
|
+
title="NewList — Grouped sections"
|
|
264
|
+
description="groups splits the rows into collapsible sections, in the order given, each headed by its title, colour and record count."
|
|
265
|
+
>
|
|
266
|
+
<NewListImpl
|
|
267
|
+
list={baseLists}
|
|
268
|
+
hidePagination
|
|
269
|
+
groups={[
|
|
270
|
+
{
|
|
271
|
+
id: "Active",
|
|
272
|
+
title: "Active",
|
|
273
|
+
colour: "green",
|
|
274
|
+
rowIds: baseLists
|
|
275
|
+
.filter((_, index) => index % 2 === 0)
|
|
276
|
+
.map((each) => each.id),
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
id: "Archived",
|
|
280
|
+
title: "Archived",
|
|
281
|
+
colour: "dark",
|
|
282
|
+
rowIds: baseLists
|
|
283
|
+
.filter((_, index) => index % 2 === 1)
|
|
284
|
+
.map((each) => each.id),
|
|
285
|
+
},
|
|
286
|
+
]}
|
|
287
|
+
/>
|
|
288
|
+
</StorySection>
|
|
289
|
+
|
|
262
290
|
<StorySection
|
|
263
291
|
title="Comparing with the legacy List"
|
|
264
292
|
description="Open Display/List in another tab — same sample data renders. NewListItem is exactly ListClass — drop-in data swap. NewListImpl renders the same shape with modernised card styling, optional sticky section headers, and sticky search slot."
|
|
@@ -70,6 +70,7 @@ const ref = useRef(null);
|
|
|
70
70
|
| `minDate` | `Date` | — | Earliest selectable date |
|
|
71
71
|
| `maxDate` | `Date` | — | Latest selectable date |
|
|
72
72
|
| `range` | `boolean` | `false` | Renders two pickers for a start/end date range |
|
|
73
|
+
| `freeRangeEnds` | `boolean` | `false` | Range mode: neither end's calendar is limited by the other end; the owner keeps them in order |
|
|
73
74
|
| `showTime` | `boolean` | `false` | Adds a time selector alongside the calendar |
|
|
74
75
|
| `hideDate` | `boolean` | `false` | Shows only the time picker (hides the calendar) |
|
|
75
76
|
| `timeInterval` | `number` | `5` | Minute step for the time picker |
|