@qaecy/cue-ui 0.0.1
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 +254 -0
- package/document-viewer/130.js +1 -0
- package/document-viewer/160.js +1 -0
- package/document-viewer/241.js +1 -0
- package/document-viewer/266.js +1 -0
- package/document-viewer/315.js +1 -0
- package/document-viewer/344.js +1 -0
- package/document-viewer/376.js +1 -0
- package/document-viewer/3rdpartylicenses.txt +2153 -0
- package/document-viewer/523.js +1 -0
- package/document-viewer/560.js +1 -0
- package/document-viewer/734.js +1 -0
- package/document-viewer/829.js +1 -0
- package/document-viewer/83.js +1 -0
- package/document-viewer/843.js +1 -0
- package/document-viewer/888.js +1 -0
- package/document-viewer/common.js +1 -0
- package/document-viewer/index.html +54 -0
- package/document-viewer/main.js +1 -0
- package/document-viewer/polyfills.js +1 -0
- package/document-viewer/poppins-latin-400-normal.woff +0 -0
- package/document-viewer/poppins-latin-400-normal.woff2 +0 -0
- package/document-viewer/poppins-latin-ext-400-normal.woff +0 -0
- package/document-viewer/poppins-latin-ext-400-normal.woff2 +0 -0
- package/document-viewer/runtime.js +1 -0
- package/document-viewer/styles.css +1 -0
- package/id-builder/3rdpartylicenses.txt +505 -0
- package/id-builder/index.html +13 -0
- package/id-builder/main.js +1 -0
- package/id-builder/polyfills.js +1 -0
- package/id-builder/poppins-latin-400-normal.woff +0 -0
- package/id-builder/poppins-latin-400-normal.woff2 +0 -0
- package/id-builder/poppins-latin-ext-400-normal.woff +0 -0
- package/id-builder/poppins-latin-ext-400-normal.woff2 +0 -0
- package/id-builder/runtime.js +1 -0
- package/id-builder/styles.css +1 -0
- package/logo/3rdpartylicenses.txt +346 -0
- package/logo/index.html +13 -0
- package/logo/main.js +1 -0
- package/logo/polyfills.js +1 -0
- package/logo/runtime.js +1 -0
- package/package.json +35 -0
- package/project-documents/3rdpartylicenses.txt +830 -0
- package/project-documents/index.html +88 -0
- package/project-documents/main.js +1 -0
- package/project-documents/polyfills.js +1 -0
- package/project-documents/poppins-latin-400-normal.woff +0 -0
- package/project-documents/poppins-latin-400-normal.woff2 +0 -0
- package/project-documents/poppins-latin-ext-400-normal.woff +0 -0
- package/project-documents/poppins-latin-ext-400-normal.woff2 +0 -0
- package/project-documents/runtime.js +1 -0
- package/project-documents/styles.css +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
# @qaecy/cue-ui
|
|
2
|
+
|
|
3
|
+
Framework-agnostic web components for the [QAECY Cue platform](https://qaecy.com).
|
|
4
|
+
Drop them into any HTML page — no build step required.
|
|
5
|
+
|
|
6
|
+
## Components
|
|
7
|
+
|
|
8
|
+
| Custom element | Import path | Description |
|
|
9
|
+
| ----------------------- | ------------------------------- | --------------------------------------------------------------------------------- |
|
|
10
|
+
| `<cue-logo>` | `@qaecy/cue-ui/logo` | Animated QAECY logo |
|
|
11
|
+
| `<cue-document-viewer>` | `@qaecy/cue-ui/document-viewer` | Document viewer with Cue SDK integration (PDF, BIM, CAD, images, spreadsheets, …) |
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## CDN quickstart
|
|
16
|
+
|
|
17
|
+
Both components and the Cue SDK are available on [jsDelivr](https://www.jsdelivr.com/) — no `npm install` needed.
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<!doctype html>
|
|
21
|
+
<html lang="en">
|
|
22
|
+
<head>
|
|
23
|
+
<meta charset="utf-8" />
|
|
24
|
+
<title>My Cue App</title>
|
|
25
|
+
<style>
|
|
26
|
+
body {
|
|
27
|
+
margin: 0;
|
|
28
|
+
height: 100vh;
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
}
|
|
32
|
+
cue-logo {
|
|
33
|
+
width: 160px;
|
|
34
|
+
padding: 1rem;
|
|
35
|
+
}
|
|
36
|
+
cue-document-viewer {
|
|
37
|
+
flex: 1;
|
|
38
|
+
}
|
|
39
|
+
</style>
|
|
40
|
+
</head>
|
|
41
|
+
<body>
|
|
42
|
+
<!-- Logo -->
|
|
43
|
+
<cue-logo size="m"></cue-logo>
|
|
44
|
+
|
|
45
|
+
<!-- Document viewer (populated via JS below) -->
|
|
46
|
+
<div id="viewer-host" style="flex:1; display:contents;"></div>
|
|
47
|
+
|
|
48
|
+
<!-- 1. Zone.js (Angular runtime requirement) -->
|
|
49
|
+
<script src="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/document-viewer/polyfills.js"></script>
|
|
50
|
+
|
|
51
|
+
<!-- 2. Cue SDK -->
|
|
52
|
+
<script type="module">
|
|
53
|
+
import { Cue } from 'https://cdn.jsdelivr.net/npm/@qaecy/cue-sdk/dist/index.esm.js';
|
|
54
|
+
|
|
55
|
+
// 3. Authenticate
|
|
56
|
+
const cue = new Cue();
|
|
57
|
+
await cue.auth.signIn('google');
|
|
58
|
+
|
|
59
|
+
// 4. Mount the logo web component
|
|
60
|
+
const logoPolyfills = document.createElement('script');
|
|
61
|
+
logoPolyfills.src = 'https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/logo/polyfills.js';
|
|
62
|
+
document.head.appendChild(logoPolyfills);
|
|
63
|
+
|
|
64
|
+
const logoScript = document.createElement('script');
|
|
65
|
+
logoScript.src = 'https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/logo/main.js';
|
|
66
|
+
document.head.appendChild(logoScript);
|
|
67
|
+
|
|
68
|
+
// 5. Mount the document viewer
|
|
69
|
+
const dvScript = document.createElement('script');
|
|
70
|
+
dvScript.src = 'https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/document-viewer/main.js';
|
|
71
|
+
dvScript.onload = () => {
|
|
72
|
+
customElements.whenDefined('cue-document-viewer').then(() => {
|
|
73
|
+
const viewer = document.createElement('cue-document-viewer');
|
|
74
|
+
|
|
75
|
+
// Required: authenticated SDK instance (must be set as a property, not an attribute)
|
|
76
|
+
viewer.cue = cue;
|
|
77
|
+
viewer.uuid = 'your-document-uuid'; // or 'uuid?page=3' to open at a page
|
|
78
|
+
viewer.projectId = 'your-project-id';
|
|
79
|
+
viewer.language = 'en'; // optional, default 'en'
|
|
80
|
+
|
|
81
|
+
document.getElementById('viewer-host').appendChild(viewer);
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
document.body.appendChild(dvScript);
|
|
85
|
+
</script>
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## `<cue-logo>`
|
|
93
|
+
|
|
94
|
+
Renders the animated QAECY logo. Adapts automatically to light/dark mode.
|
|
95
|
+
|
|
96
|
+
| Property / attribute | Type | Default | Description |
|
|
97
|
+
| -------------------- | ------------------- | ------- | -------------------------------- |
|
|
98
|
+
| `size` | `'s' \| 'm' \| 'l'` | `'m'` | Size preset |
|
|
99
|
+
| `active` | `boolean` | `false` | Triggers the draw animation once |
|
|
100
|
+
| `continuous` | `boolean` | `false` | Loops the draw animation |
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<!-- Static logo -->
|
|
104
|
+
<cue-logo size="l"></cue-logo>
|
|
105
|
+
|
|
106
|
+
<!-- Animated on load -->
|
|
107
|
+
<cue-logo size="m" active></cue-logo>
|
|
108
|
+
|
|
109
|
+
<!-- Continuously looping -->
|
|
110
|
+
<cue-logo continuous></cue-logo>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
> **Script tags needed**
|
|
114
|
+
>
|
|
115
|
+
> ```html
|
|
116
|
+
> <script src="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/logo/polyfills.js"></script>
|
|
117
|
+
> <script src="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/logo/main.js"></script>
|
|
118
|
+
> ```
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
## `<cue-document-viewer>`
|
|
123
|
+
|
|
124
|
+
Fetches and renders a Cue document. Automatically picks the best viewer based on the file type. Requires an authenticated `Cue` SDK instance.
|
|
125
|
+
|
|
126
|
+
| Property | Type | Required | Description |
|
|
127
|
+
| ----------- | -------------------- | -------- | ------------------------------------------------------------------------------------ |
|
|
128
|
+
| `cue` | `Cue` (SDK instance) | ✅ | Authenticated Cue SDK instance. **Set as a JS property**, not an HTML attribute. |
|
|
129
|
+
| `uuid` | `string` | ✅ | Document UUID. Append `?page=N` to open at a specific page, e.g. `'abc-123?page=5'`. |
|
|
130
|
+
| `projectId` | `string` | ✅ | Cue project (space) ID the document belongs to. |
|
|
131
|
+
| `language` | `string` | — | BCP-47 language code for label resolution. Defaults to `'en'`. |
|
|
132
|
+
|
|
133
|
+
Supported file types: PDF, IFC/BIM, DXF/CAD, images (PNG, JPG, SVG, …), Markdown, plain text, CSV/XLSX spreadsheets.
|
|
134
|
+
|
|
135
|
+
> **Script tags needed**
|
|
136
|
+
>
|
|
137
|
+
> ```html
|
|
138
|
+
> <script src="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/document-viewer/polyfills.js"></script>
|
|
139
|
+
> <script src="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/document-viewer/main.js"></script>
|
|
140
|
+
> <link
|
|
141
|
+
> rel="stylesheet"
|
|
142
|
+
> href="https://cdn.jsdelivr.net/npm/@qaecy/cue-ui/document-viewer/styles.css"
|
|
143
|
+
> />
|
|
144
|
+
> ```
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
## Dependency: `@qaecy/cue-sdk`
|
|
149
|
+
|
|
150
|
+
The `cue-document-viewer` component requires an authenticated [`Cue`](https://www.npmjs.com/package/@qaecy/cue-sdk) instance. The SDK handles authentication and all data fetching — the component itself never makes direct network calls.
|
|
151
|
+
|
|
152
|
+
```js
|
|
153
|
+
import { Cue } from 'https://cdn.jsdelivr.net/npm/@qaecy/cue-sdk/dist/index.esm.js';
|
|
154
|
+
|
|
155
|
+
const cue = new Cue();
|
|
156
|
+
await cue.auth.signIn('google'); // or 'microsoft', 'email', etc.
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
When using npm:
|
|
160
|
+
|
|
161
|
+
```bash
|
|
162
|
+
npm install @qaecy/cue-sdk @qaecy/cue-ui
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
```js
|
|
166
|
+
import { Cue } from '@qaecy/cue-sdk';
|
|
167
|
+
import '@qaecy/cue-ui/document-viewer';
|
|
168
|
+
import '@qaecy/cue-ui/logo';
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
---
|
|
172
|
+
|
|
173
|
+
## Theming
|
|
174
|
+
|
|
175
|
+
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.
|
|
176
|
+
|
|
177
|
+
### Colors
|
|
178
|
+
|
|
179
|
+
```css
|
|
180
|
+
:root {
|
|
181
|
+
/* Brand palette */
|
|
182
|
+
--cue-color-blue: #2859e1;
|
|
183
|
+
--cue-color-green: #e2f552; /* accent */
|
|
184
|
+
|
|
185
|
+
/* Semantic color keys — override these to retheme without touching raw values */
|
|
186
|
+
--cue-primary: var(--cue-color-blue);
|
|
187
|
+
--cue-primaryContrast: #ffffff;
|
|
188
|
+
|
|
189
|
+
--cue-accent: var(--cue-color-green);
|
|
190
|
+
--cue-accentContrast: #121c2b;
|
|
191
|
+
|
|
192
|
+
--cue-main-background: #f5f6f9;
|
|
193
|
+
--cue-main-foreground: #121c2b;
|
|
194
|
+
|
|
195
|
+
--cue-border-color: #d9d9d9;
|
|
196
|
+
}
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
Apply a dark theme by adding the `dark` class to `<body>` (or any ancestor element):
|
|
200
|
+
|
|
201
|
+
```css
|
|
202
|
+
body.dark {
|
|
203
|
+
--cue-main-background: #121c2b;
|
|
204
|
+
--cue-main-foreground: #ffffff;
|
|
205
|
+
--cue-default: #0e1827;
|
|
206
|
+
--cue-defaultContrast: #f5f6f9;
|
|
207
|
+
--cue-border-color: #404955;
|
|
208
|
+
}
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
### Typography
|
|
212
|
+
|
|
213
|
+
```css
|
|
214
|
+
:root {
|
|
215
|
+
--cue-font-family: 'Inter', sans-serif; /* swap out Poppins */
|
|
216
|
+
|
|
217
|
+
--cue-font-weight-regular: 400;
|
|
218
|
+
--cue-font-weight-medium: 500;
|
|
219
|
+
--cue-font-weight-semibold: 600;
|
|
220
|
+
}
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
> 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).
|
|
224
|
+
|
|
225
|
+
### Spacing & element sizes
|
|
226
|
+
|
|
227
|
+
```css
|
|
228
|
+
:root {
|
|
229
|
+
/* Gap / padding scale */
|
|
230
|
+
--cue-dim-gap-xs: 0.25rem;
|
|
231
|
+
--cue-dim-gap-s: 0.5rem;
|
|
232
|
+
--cue-dim-gap-m: 1rem;
|
|
233
|
+
--cue-dim-gap-l: 1.875rem;
|
|
234
|
+
|
|
235
|
+
/* Interactive element heights */
|
|
236
|
+
--cue-dim-elem-s: 2rem; /* small buttons, inputs */
|
|
237
|
+
--cue-dim-elem-m: 2.75rem; /* default */
|
|
238
|
+
--cue-dim-elem-l: 3.5rem; /* large */
|
|
239
|
+
}
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
### Minimal brand override example
|
|
243
|
+
|
|
244
|
+
```html
|
|
245
|
+
<style>
|
|
246
|
+
:root {
|
|
247
|
+
--cue-primary: #7c3aed; /* violet */
|
|
248
|
+
--cue-primaryContrast: #ffffff;
|
|
249
|
+
--cue-accent: #f59e0b; /* amber */
|
|
250
|
+
--cue-accentContrast: #1c1917;
|
|
251
|
+
--cue-font-family: 'Inter', sans-serif;
|
|
252
|
+
}
|
|
253
|
+
</style>
|
|
254
|
+
```
|