@qaecy/cue-ui 0.0.20 → 0.0.22
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/419.js +1 -1
- package/README.md +271 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,6 +5,277 @@ Drop them into any HTML page — no build step required.
|
|
|
5
5
|
|
|
6
6
|
## Components
|
|
7
7
|
|
|
8
|
+
| Custom element | Description |
|
|
9
|
+
| ------------------------------- | --------------------------------------------------------------------------------- |
|
|
10
|
+
| `<cue-logo>` | Animated QAECY logo |
|
|
11
|
+
| `<cue-document-viewer>` | Document viewer with Cue SDK integration (PDF, BIM, CAD, images, spreadsheets, …) |
|
|
12
|
+
| `<cue-document-list>` | Lazy document list that fetches metadata from the Cue SDK |
|
|
13
|
+
| `<cue-id-builder>` | Interactive IFC/SPARQL ID builder |
|
|
14
|
+
| `<cue-block-project-documents>` | Project documents content block |
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## CDN quickstart
|
|
19
|
+
|
|
20
|
+
The library ships as a **single script** that lazy-loads only the components you request — no `npm install` needed.
|
|
21
|
+
|
|
22
|
+
```html
|
|
23
|
+
<!doctype html>
|
|
24
|
+
<html lang="en">
|
|
25
|
+
<head>
|
|
26
|
+
<meta charset="utf-8" />
|
|
27
|
+
<title>My Cue App</title>
|
|
28
|
+
<!-- Component styles (menu, cards, typography, …) -->
|
|
29
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/styles.css" />
|
|
30
|
+
<style>
|
|
31
|
+
body {
|
|
32
|
+
margin: 0;
|
|
33
|
+
height: 100vh;
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-direction: column;
|
|
36
|
+
}
|
|
37
|
+
cue-logo {
|
|
38
|
+
width: 160px;
|
|
39
|
+
padding: 1rem;
|
|
40
|
+
}
|
|
41
|
+
cue-document-viewer {
|
|
42
|
+
flex: 1;
|
|
43
|
+
}
|
|
44
|
+
</style>
|
|
45
|
+
</head>
|
|
46
|
+
<body>
|
|
47
|
+
<!-- Static elements are detected automatically -->
|
|
48
|
+
<cue-logo size="m"></cue-logo>
|
|
49
|
+
|
|
50
|
+
<!-- Document viewer (populated via JS below) -->
|
|
51
|
+
<div id="viewer-host" style="flex:1; display:contents;"></div>
|
|
52
|
+
|
|
53
|
+
<!--
|
|
54
|
+
Single loader script. Angular boots once; only the requested
|
|
55
|
+
components are downloaded as separate lazy chunks.
|
|
56
|
+
|
|
57
|
+
List components in data-components that will be created dynamically
|
|
58
|
+
(not present in the HTML at load time). Statically placed tags are
|
|
59
|
+
detected automatically.
|
|
60
|
+
-->
|
|
61
|
+
<script
|
|
62
|
+
src="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/index.js"
|
|
63
|
+
type="module"
|
|
64
|
+
data-components="cue-document-viewer"
|
|
65
|
+
></script>
|
|
66
|
+
|
|
67
|
+
<!-- Cue SDK + app logic -->
|
|
68
|
+
<script type="module">
|
|
69
|
+
import { Cue } from 'https://cdn.jsdelivr.net/npm/@qaecy/cue-sdk/dist/index.esm.js';
|
|
70
|
+
|
|
71
|
+
const cue = new Cue();
|
|
72
|
+
await cue.auth.signIn('google');
|
|
73
|
+
|
|
74
|
+
await customElements.whenDefined('cue-document-viewer');
|
|
75
|
+
|
|
76
|
+
const viewer = document.createElement('cue-document-viewer');
|
|
77
|
+
// Set as JS properties, not HTML attributes
|
|
78
|
+
viewer.cue = cue;
|
|
79
|
+
viewer.uuid = 'your-document-uuid';
|
|
80
|
+
viewer.projectId = 'your-project-id';
|
|
81
|
+
|
|
82
|
+
document.getElementById('viewer-host').appendChild(viewer);
|
|
83
|
+
</script>
|
|
84
|
+
</body>
|
|
85
|
+
</html>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Installing via npm
|
|
89
|
+
|
|
90
|
+
```bash
|
|
91
|
+
npm install @qaecy/cue-ui
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
```js
|
|
95
|
+
// Import the loader — registers the smart loader that boots Angular once
|
|
96
|
+
import '@qaecy/cue-ui';
|
|
97
|
+
|
|
98
|
+
// Optionally import styles
|
|
99
|
+
import '@qaecy/cue-ui/styles';
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## `<cue-logo>`
|
|
105
|
+
|
|
106
|
+
Renders the animated QAECY logo. Adapts automatically to light/dark mode.
|
|
107
|
+
|
|
108
|
+
| Property / attribute | Type | Default | Description |
|
|
109
|
+
| -------------------- | ------------------- | ------- | -------------------------------- |
|
|
110
|
+
| `size` | `'s' \| 'm' \| 'l'` | `'m'` | Size preset |
|
|
111
|
+
| `active` | `boolean` | `true` | Triggers the draw animation once |
|
|
112
|
+
| `continuous` | `boolean` | `false` | Loops the draw animation |
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<!-- Static logo — detected automatically -->
|
|
116
|
+
<cue-logo size="l"></cue-logo>
|
|
117
|
+
|
|
118
|
+
<!-- Continuously looping -->
|
|
119
|
+
<cue-logo continuous></cue-logo>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
> **Loader** — add `cue-logo` to `data-components` if you create it dynamically. Statically placed tags are detected automatically. See [CDN quickstart](#cdn-quickstart).
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
## `<cue-document-viewer>`
|
|
127
|
+
|
|
128
|
+
Fetches and renders a Cue document. Automatically picks the best viewer based on file type. Requires an authenticated `Cue` SDK instance.
|
|
129
|
+
|
|
130
|
+
| Property | Type | Required | Description |
|
|
131
|
+
| ----------- | -------------------- | -------- | ------------------------------------------------------------------------------------ |
|
|
132
|
+
| `cue` | `Cue` (SDK instance) | ✅ | Authenticated Cue SDK instance. **Set as a JS property**, not an HTML attribute. |
|
|
133
|
+
| `uuid` | `string` | ✅ | Document UUID. Append `?page=N` to open at a specific page, e.g. `'abc-123?page=5'`. |
|
|
134
|
+
| `projectId` | `string` | ✅ | Cue project (space) ID the document belongs to. |
|
|
135
|
+
|
|
136
|
+
Language is managed globally by the SDK via `cue.api.language` / `cue.api.setLanguage(lang)`.
|
|
137
|
+
Document metadata caching is managed by the SDK; the component reuses SDK-owned per-project state automatically.
|
|
138
|
+
|
|
139
|
+
Supported file types: PDF, IFC/BIM, DXF/CAD, images (PNG, JPG, SVG, …), Markdown, plain text, CSV/XLSX spreadsheets.
|
|
140
|
+
|
|
141
|
+
> **Loader** — add `cue-document-viewer` to `data-components` if you create it dynamically. See [CDN quickstart](#cdn-quickstart).
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
## `<cue-document-list>`
|
|
146
|
+
|
|
147
|
+
Renders a lazy-loaded document table. Pass a `projectId`, `uuids`, and `sdkState`; the component requests metadata and categories internally.
|
|
148
|
+
|
|
149
|
+
| Property | Type | Required | Description |
|
|
150
|
+
| -------------------------------- | --------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------- |
|
|
151
|
+
| `projectId` | `string` | ✅ | Cue project (space) ID. |
|
|
152
|
+
| `uuids` | `string[]` | ✅ | Document UUIDs to display. |
|
|
153
|
+
| `sdkState` | `{ cue?; view?; documents?; language?; availableContentCategories? }` | ✅ | SDK context. Provide at least one of `cue`, `view`, or `documents`. |
|
|
154
|
+
| `simple` | `boolean` | ❌ | Renders a compact list + paginator instead of ag-grid/flip/settings. Default: `false`. |
|
|
155
|
+
| `pageSize` | `number` | ❌ | Host-controlled page size. Default: `10`. |
|
|
156
|
+
| `prefetchPages` | `number` | ❌ | Lazy-load buffer size multiplier (`pageSize × prefetchPages`). Default: `3`. |
|
|
157
|
+
| `showOpenInDocumentViewerAction` | `boolean` | ❌ | Shows "Open in document viewer" menu item. Default: `false`. |
|
|
158
|
+
| `showOpenInFileManagerAction` | `boolean` | ❌ | Shows "Open in file manager" menu item. Default: `false`. |
|
|
159
|
+
| `customMenuItems` | `Array<{ label; icon?; action }>` | ❌ | Custom context-menu entries appended after the standard menu items. |
|
|
160
|
+
|
|
161
|
+
Set `simple = true` for a narrow sidebar-style document list (no ag-grid, no column settings, no flip card).
|
|
162
|
+
|
|
163
|
+
```js
|
|
164
|
+
const list = document.querySelector('cue-document-list');
|
|
165
|
+
|
|
166
|
+
list.customMenuItems = [
|
|
167
|
+
{
|
|
168
|
+
label: 'Copy UUID',
|
|
169
|
+
icon: 'copy',
|
|
170
|
+
action: (document) => {
|
|
171
|
+
navigator.clipboard.writeText(document.id);
|
|
172
|
+
},
|
|
173
|
+
},
|
|
174
|
+
];
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
> **Loader** — add `cue-document-list` to `data-components` if you create it dynamically. See [CDN quickstart](#cdn-quickstart).
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## Dependency: `@qaecy/cue-sdk`
|
|
182
|
+
|
|
183
|
+
The `cue-document-viewer` and `cue-document-list` components require an authenticated [`Cue`](https://www.npmjs.com/package/@qaecy/cue-sdk) instance. The SDK handles authentication and all data fetching — the components never make direct network calls.
|
|
184
|
+
|
|
185
|
+
```js
|
|
186
|
+
import { Cue } from 'https://cdn.jsdelivr.net/npm/@qaecy/cue-sdk/dist/index.esm.js';
|
|
187
|
+
|
|
188
|
+
const cue = new Cue();
|
|
189
|
+
await cue.auth.signIn('google'); // or 'microsoft', 'email', etc.
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
---
|
|
193
|
+
|
|
194
|
+
## Theming
|
|
195
|
+
|
|
196
|
+
All visual properties are driven by CSS custom properties defined on `:root`. Because the components do **not** use Shadow DOM, you can override any variable from your own stylesheet — no `::part()` or `::slotted()` selectors needed.
|
|
197
|
+
|
|
198
|
+
### Colors
|
|
199
|
+
|
|
200
|
+
```css
|
|
201
|
+
:root {
|
|
202
|
+
/* Brand palette */
|
|
203
|
+
--cue-color-blue: #2859e1;
|
|
204
|
+
--cue-color-green: #e2f552; /* accent */
|
|
205
|
+
|
|
206
|
+
/* Semantic color keys — override these to retheme without touching raw values */
|
|
207
|
+
--cue-primary: var(--cue-color-blue);
|
|
208
|
+
--cue-primaryContrast: #ffffff;
|
|
209
|
+
|
|
210
|
+
--cue-accent: var(--cue-color-green);
|
|
211
|
+
--cue-accentContrast: #121c2b;
|
|
212
|
+
|
|
213
|
+
--cue-main-background: #f5f6f9;
|
|
214
|
+
--cue-main-foreground: #121c2b;
|
|
215
|
+
|
|
216
|
+
--cue-border-color: #d9d9d9;
|
|
217
|
+
}
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
Apply a dark theme by adding the `dark` class to `<body>`:
|
|
221
|
+
|
|
222
|
+
```css
|
|
223
|
+
body.dark {
|
|
224
|
+
--cue-main-background: #121c2b;
|
|
225
|
+
--cue-main-foreground: #ffffff;
|
|
226
|
+
--cue-default: #0e1827;
|
|
227
|
+
--cue-defaultContrast: #f5f6f9;
|
|
228
|
+
--cue-border-color: #404955;
|
|
229
|
+
}
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
### Typography
|
|
233
|
+
|
|
234
|
+
```css
|
|
235
|
+
:root {
|
|
236
|
+
--cue-font-family: 'Inter', sans-serif; /* swap out Poppins */
|
|
237
|
+
|
|
238
|
+
--cue-font-weight-regular: 400;
|
|
239
|
+
--cue-font-weight-medium: 500;
|
|
240
|
+
--cue-font-weight-semibold: 600;
|
|
241
|
+
}
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
> The default font is **Poppins**, loaded via the bundled stylesheet. If you override `--cue-font-family`, load your chosen font yourself (e.g. via Google Fonts).
|
|
245
|
+
|
|
246
|
+
### Spacing & element sizes
|
|
247
|
+
|
|
248
|
+
```css
|
|
249
|
+
:root {
|
|
250
|
+
/* Gap / padding scale */
|
|
251
|
+
--cue-dim-gap-xs: 0.25rem;
|
|
252
|
+
--cue-dim-gap-s: 0.5rem;
|
|
253
|
+
--cue-dim-gap-m: 1rem;
|
|
254
|
+
--cue-dim-gap-l: 1.875rem;
|
|
255
|
+
|
|
256
|
+
/* Interactive element heights */
|
|
257
|
+
--cue-dim-elem-s: 2rem; /* small buttons, inputs */
|
|
258
|
+
--cue-dim-elem-m: 2.75rem; /* default */
|
|
259
|
+
--cue-dim-elem-l: 3.5rem; /* large */
|
|
260
|
+
}
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
### Minimal brand override example
|
|
264
|
+
|
|
265
|
+
```html
|
|
266
|
+
<style>
|
|
267
|
+
:root {
|
|
268
|
+
--cue-primary: #7c3aed; /* violet */
|
|
269
|
+
--cue-primaryContrast: #ffffff;
|
|
270
|
+
--cue-accent: #f59e0b; /* amber */
|
|
271
|
+
--cue-accentContrast: #1c1917;
|
|
272
|
+
--cue-font-family: 'Inter', sans-serif;
|
|
273
|
+
}
|
|
274
|
+
</style>
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
## Components
|
|
278
|
+
|
|
8
279
|
| Custom element | Import path | Description |
|
|
9
280
|
| ----------------------- | ------------------------------- | --------------------------------------------------------------------------------- |
|
|
10
281
|
| `<cue-card>` | `@qaecy/cue-ui/card` | Reusable card container with variants, padding, and optional shadow |
|