blixify-ui-web-mcp 0.1.30 → 0.1.32
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/lib/components/data/dataTemplate/README.md +1 -0
- package/lib/components/display/flexTable/README.md +1 -0
- package/lib/components/display/flexTable/flexTable.stories.tsx +57 -0
- package/lib/components/input/uploadInput/README.md +2 -1
- package/lib/components/input/uploadInput/uploadInput.stories.tsx +2 -2
- package/package.json +1 -1
|
@@ -988,6 +988,7 @@ Which field types can be edited from the list table, and how. Types not listed u
|
|
|
988
988
|
| `hideNewTabs` | `boolean` | Hides the new-tab creation button |
|
|
989
989
|
| `splitView` | `boolean` | Renders a split list/detail layout in read mode |
|
|
990
990
|
| `listObjectTableView` | `boolean` | Shows list objects in table view during read and update |
|
|
991
|
+
| `listFlexFixedRows` | `boolean` | With `listFlexTable`, the rows are a fixed set — the user edits cells but cannot add or delete rows |
|
|
991
992
|
| `disableMulti` | `boolean` | Disables multi-row selection |
|
|
992
993
|
| `disableSelectFullData` | `{ table?: boolean; list?: boolean }` | Disables "select all pages" for table and/or list views |
|
|
993
994
|
| `disabledOnEnter` | `boolean` | Prevents Enter key from submitting forms |
|
|
@@ -100,6 +100,7 @@ const columns: DataStructure[] = [
|
|
|
100
100
|
| `showGrandTotal` | `boolean` | `false` | Show a grand total row summing all numeric columns across all categories |
|
|
101
101
|
| `hideCategory` | `boolean` | `false` | Hide category grouping and render a flat list of rows |
|
|
102
102
|
| `maxRows` | `number` | — | Maximum rows allowed per category. The add-row button is hidden once the limit is reached |
|
|
103
|
+
| `fixedRows` | `boolean` | `false` | The rows are a fixed set — hides every add-row and delete-row control; editable cells stay editable |
|
|
103
104
|
| `defaultTitleTemplate` | `string` | — | Default title string pre-filled when a new row is added |
|
|
104
105
|
| `flexMathQueries` | `FlexMathQuery[]` | — | Validation rules evaluated on form submit. See FlexMathQuery below |
|
|
105
106
|
| `darkMode` | `boolean` | `false` | Enable dark mode styling |
|
|
@@ -269,10 +269,51 @@ const flexMathQueries: FlexMathQuery[] = [
|
|
|
269
269
|
},
|
|
270
270
|
];
|
|
271
271
|
|
|
272
|
+
// ─── Fixed rows test data ────────────────────────────────────────────────────
|
|
273
|
+
// A checklist whose rows come from elsewhere — the user only marks each line.
|
|
274
|
+
const fixedRowColumns: DataStructure[] = [
|
|
275
|
+
{ id: "itemName", name: "Item", type: "string", disabled: true },
|
|
276
|
+
{ id: "quantity", name: "Qty", type: "number", disabled: true },
|
|
277
|
+
{
|
|
278
|
+
id: "received",
|
|
279
|
+
name: "Received",
|
|
280
|
+
type: "list",
|
|
281
|
+
listSelection: ["Yes", "No"],
|
|
282
|
+
},
|
|
283
|
+
];
|
|
284
|
+
|
|
285
|
+
const fixedRowData: FlexTableItem[] = [
|
|
286
|
+
{
|
|
287
|
+
id: "line-1",
|
|
288
|
+
title: "",
|
|
289
|
+
category: "Order Lines",
|
|
290
|
+
itemName: "Mounting Rail 3M",
|
|
291
|
+
quantity: 12,
|
|
292
|
+
received: "No",
|
|
293
|
+
},
|
|
294
|
+
{
|
|
295
|
+
id: "line-2",
|
|
296
|
+
title: "",
|
|
297
|
+
category: "Order Lines",
|
|
298
|
+
itemName: "End Clamp",
|
|
299
|
+
quantity: 24,
|
|
300
|
+
received: "No",
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
id: "line-3",
|
|
304
|
+
title: "",
|
|
305
|
+
category: "Order Lines",
|
|
306
|
+
itemName: "Junction Box",
|
|
307
|
+
quantity: 1,
|
|
308
|
+
received: "No",
|
|
309
|
+
},
|
|
310
|
+
];
|
|
311
|
+
|
|
272
312
|
export const FlexTable = () => {
|
|
273
313
|
const [data, setData] = useState<FlexTableItem[]>(sampleData);
|
|
274
314
|
const [viewOnlyData] = useState<FlexTableItem[]>(sampleData);
|
|
275
315
|
const [mediaData, setMediaData] = useState<FlexTableItem[]>(sampleMediaData);
|
|
316
|
+
const [fixedData, setFixedData] = useState<FlexTableItem[]>(fixedRowData);
|
|
276
317
|
|
|
277
318
|
const formRef = useRef<any>(null);
|
|
278
319
|
const tableRef = useRef<any>(null);
|
|
@@ -295,6 +336,22 @@ export const FlexTable = () => {
|
|
|
295
336
|
</div>
|
|
296
337
|
</StorySection>
|
|
297
338
|
|
|
339
|
+
<StorySection
|
|
340
|
+
title="Fixed Rows"
|
|
341
|
+
description="fixedRows=true keeps the row set as given — no add-row, no delete-row, no Actions column — while editable cells stay editable. Item and Qty are disabled columns; Received is a Yes/No list. Through DataTemplate this is listFlexFixedRows on a listFlexTable listObject."
|
|
342
|
+
>
|
|
343
|
+
<div className="w-full">
|
|
344
|
+
<FlexTableImpl
|
|
345
|
+
label="Order Lines"
|
|
346
|
+
data={fixedData}
|
|
347
|
+
columns={fixedRowColumns}
|
|
348
|
+
fixedRows={true}
|
|
349
|
+
showTotal={false}
|
|
350
|
+
onChangeData={setFixedData}
|
|
351
|
+
/>
|
|
352
|
+
</div>
|
|
353
|
+
</StorySection>
|
|
354
|
+
|
|
298
355
|
<StorySection
|
|
299
356
|
title="With Grand Total"
|
|
300
357
|
description="showGrandTotal=true adds a grand total row summing all numeric columns across all categories."
|
|
@@ -120,7 +120,7 @@ Used for `type="multi"`. Manage three arrays to track state across save/delete o
|
|
|
120
120
|
| `showModal` | `boolean` | `false` | Opens a Camera / Gallery modal instead of a direct file picker |
|
|
121
121
|
| `confirmOnRemove` | `boolean` | `false` | Shows a confirmation modal before removing a file (multi mode) |
|
|
122
122
|
| `noDuplicateFileName` | `boolean` | `false` | Rejects files whose name already exists in `data` or `upload` (multi mode) |
|
|
123
|
-
| `compress` | `{ maxFileSize?: number; fileQuality?: number }` | — | Compresses images before upload. `maxFileSize` in MB, `fileQuality` 0–1. PNG files cannot be compressed and will error if they exceed `maxFileSize`. |
|
|
123
|
+
| `compress` | `{ maxFileSize?: number; fileQuality?: number; maxDimension?: number }` | — | Compresses images before upload. `maxFileSize` in MB, `fileQuality` 0–1. `maxDimension` is the longest edge in px an image is scaled down to first (default 2560). PNG files cannot be compressed and will error if they exceed `maxFileSize`. |
|
|
124
124
|
| `darkMode` | `boolean` | `false` | Applies dark colour scheme |
|
|
125
125
|
| `mobileView` | `boolean` | `false` | Renders a compact inline layout for mobile (label left, upload button right) |
|
|
126
126
|
| `className` | `tailwind class` | — | Class applied to the outer container |
|
|
@@ -132,3 +132,4 @@ Used for `type="multi"`. Manage three arrays to track state across save/delete o
|
|
|
132
132
|
- HEIC/HEIF files are automatically converted to JPEG before upload.
|
|
133
133
|
- Drag-and-drop is disabled when `capture` or `showModal` is set.
|
|
134
134
|
- `compress` only applies to image formats (JPG, JPEG, GIF, BMP, TIFF, HEIC, HEIF). PNG files are not compressible — if a PNG exceeds `compress.maxFileSize` an error is shown.
|
|
135
|
+
- When `compress` is set, images larger than `compress.maxDimension` (default 2560px on the longest edge) are scaled down before encoding. A full-resolution 24–48MP phone photo needs ~100–200MB of canvas, and several processed together can exceed the iOS WebView memory limit, which kills and reloads the WebView.
|
|
@@ -121,7 +121,7 @@ export const UploadInput = () => {
|
|
|
121
121
|
showModal
|
|
122
122
|
accept="image/*"
|
|
123
123
|
files={chooserFiles}
|
|
124
|
-
onChange={(
|
|
124
|
+
onChange={handleMultiChange(setChooserFiles)}
|
|
125
125
|
/>
|
|
126
126
|
</div>
|
|
127
127
|
</StorySection>
|
|
@@ -140,7 +140,7 @@ export const UploadInput = () => {
|
|
|
140
140
|
mobileView
|
|
141
141
|
accept="image/*,video/*"
|
|
142
142
|
files={chooserMobileFiles}
|
|
143
|
-
onChange={(
|
|
143
|
+
onChange={handleMultiChange(setChooserMobileFiles)}
|
|
144
144
|
/>
|
|
145
145
|
</div>
|
|
146
146
|
</StorySection>
|