@qaecy/cue-ui 0.0.39 → 0.0.40
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/347.js +1 -1
- package/614.js +1 -1
- package/695.js +1 -1
- package/7.js +1 -1
- package/{957.js → 981.js} +1 -1
- package/README.md +29 -19
- package/index.js +1 -1
- package/main.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -373,19 +373,22 @@ Two charts are available and can be shown together or individually:
|
|
|
373
373
|
- **suffix** — documents grouped by MIME category (PDF, CAD, BIM, …). Click a category to drill down to individual file extensions.
|
|
374
374
|
- **content-category** — documents grouped by their semantic content category. Builds a nested tree when category metadata is available.
|
|
375
375
|
|
|
376
|
-
| Property
|
|
377
|
-
|
|
|
378
|
-
| `projectId`
|
|
379
|
-
| `sdkState`
|
|
380
|
-
| `mode`
|
|
381
|
-
| `stackCharts`
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
|
388
|
-
|
|
|
376
|
+
| Property | Type | Required | Description |
|
|
377
|
+
| ------------------------ | --------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
378
|
+
| `projectId` | `string` | ✅ | Cue project (space) ID. Required when passing `cue` in `sdkState`. |
|
|
379
|
+
| `sdkState` | `{ cue?; view?; documents?; language?; availableContentCategories? }` | ✅ | SDK context. Provide at least one of `cue`, `view`, or `documents`. |
|
|
380
|
+
| `mode` | `'both' \| 'suffix' \| 'content-category'` | ❌ | Which chart(s) to show. Default: `'both'`. |
|
|
381
|
+
| `stackCharts` | `boolean` | ❌ | Stack charts vertically instead of side-by-side (only relevant when `mode='both'`). Default: `false`. |
|
|
382
|
+
| `chartHeight` | `number` | ❌ | Height in pixels of each chart. Default: `400`. |
|
|
383
|
+
| `showDocumentListButton` | `boolean` | ❌ | When `true`, a button appears after the user makes a selection. Clicking it emits `showInDocumentList`. Default: `false`. |
|
|
384
|
+
|
|
385
|
+
The component emits three events:
|
|
386
|
+
|
|
387
|
+
| Event | Payload | Description |
|
|
388
|
+
| -------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
|
389
|
+
| `selected` | `{ filterBy; values: string[]; label: string }` | Fires when the user clicks a chart segment. |
|
|
390
|
+
| `selectionCleared` | `{ chart: 'suffix' \| 'content-category' }` | Fires when the canvas background is clicked, clearing the selection. |
|
|
391
|
+
| `showInDocumentList` | `{ filterBy; values: string[]; label: string }` | Fires when the "List documents…" button is clicked (requires `showDocumentListButton = true`). |
|
|
389
392
|
|
|
390
393
|
`filterBy` is `'suffix'` (resolved dot-extensions, e.g. `['.pdf', '.xlsx']`) or `'content-category'` (category IRIs). Pass `values` directly to `<cue-document-list>`'s `suffixes` or the `requestDocumentsByFilter` handler of your own document list.
|
|
391
394
|
|
|
@@ -401,24 +404,31 @@ charts.sdkState = { cue }; // component creates its own CueProjectView internall
|
|
|
401
404
|
// Optional
|
|
402
405
|
charts.mode = 'both'; // 'both' | 'suffix' | 'content-category'
|
|
403
406
|
charts.stackCharts = false; // true = column layout
|
|
407
|
+
charts.showDocumentListButton = true; // show button after a selection is made
|
|
404
408
|
|
|
405
409
|
// React to segment clicks
|
|
406
410
|
charts.addEventListener('selected', (e) => {
|
|
407
411
|
const { filterBy, values, label } = e.detail;
|
|
408
412
|
console.log(`Selected "${label}" (${filterBy}):`, values);
|
|
413
|
+
});
|
|
409
414
|
|
|
410
|
-
|
|
415
|
+
charts.addEventListener('selectionCleared', () => {
|
|
416
|
+
console.log('Selection cleared');
|
|
417
|
+
});
|
|
418
|
+
|
|
419
|
+
// Fired when the user clicks the "List documents…" button
|
|
420
|
+
charts.addEventListener('showInDocumentList', (e) => {
|
|
421
|
+
const { filterBy, values } = e.detail;
|
|
411
422
|
const list = document.querySelector('cue-document-list');
|
|
412
423
|
if (filterBy === 'suffix') {
|
|
413
424
|
list.suffixes = values;
|
|
425
|
+
list.contentCategories = undefined;
|
|
426
|
+
} else {
|
|
427
|
+
list.contentCategories = values;
|
|
428
|
+
list.suffixes = undefined;
|
|
414
429
|
}
|
|
415
430
|
});
|
|
416
431
|
|
|
417
|
-
charts.addEventListener('selectionCleared', () => {
|
|
418
|
-
const list = document.querySelector('cue-document-list');
|
|
419
|
-
list.suffixes = undefined;
|
|
420
|
-
});
|
|
421
|
-
|
|
422
432
|
document.getElementById('charts-host').appendChild(charts);
|
|
423
433
|
```
|
|
424
434
|
|