ux4g-components-web 1.0.0 → 1.1.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 +75 -0
- package/dist/runtime/bootstrap.cjs +16 -0
- package/dist/runtime/bootstrap.d.ts +1 -0
- package/dist/runtime/bootstrap.mjs +14 -0
- package/dist/runtime/index.cjs +1115 -0
- package/dist/runtime/index.d.ts +17 -0
- package/dist/runtime/index.mjs +1112 -0
- package/package.json +22 -3
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# ux4g-components-web
|
|
2
|
+
|
|
3
|
+
The CSS system, design tokens, utilities, and shared Class_Builder types for the UX4G Design System.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install ux4g-components-web
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### CSS Bundle
|
|
14
|
+
|
|
15
|
+
Import the full CSS bundle in your application entry point:
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
// JavaScript/TypeScript
|
|
19
|
+
import 'ux4g-components-web/styles.css';
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```html
|
|
23
|
+
<!-- HTML -->
|
|
24
|
+
<link rel="stylesheet" href="node_modules/ux4g-components-web/styles/ux4g.css" />
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
/* CSS */
|
|
29
|
+
@import 'ux4g-components-web/styles.css';
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
The bundle includes:
|
|
33
|
+
- Design tokens (CSS custom properties)
|
|
34
|
+
- Semantic layer (semantic aliases)
|
|
35
|
+
- All 27 utility modules
|
|
36
|
+
- Approved component CSS
|
|
37
|
+
- Layout utilities
|
|
38
|
+
- Cascade fixes
|
|
39
|
+
|
|
40
|
+
### Shared Types (Class_Builders)
|
|
41
|
+
|
|
42
|
+
Framework wrapper packages import Class_Builder functions from this package:
|
|
43
|
+
|
|
44
|
+
```ts
|
|
45
|
+
import { buildButtonClasses, ButtonVariant, ButtonSize } from 'ux4g-components-web/types';
|
|
46
|
+
|
|
47
|
+
const classes = buildButtonClasses('primary', 'md', false, false);
|
|
48
|
+
// → "ux4g-btn-primary ux4g-btn-md"
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Utility Classes
|
|
52
|
+
|
|
53
|
+
Use utility classes directly in HTML — no wrapper component needed:
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<div class="ux4g-d-flex ux4g-gap-4 ux4g-p-m ux4g-bg-primary-soft ux4g-radius-md">
|
|
57
|
+
<span class="ux4g-body-m-default ux4g-text-neutral-primary">Content</span>
|
|
58
|
+
</div>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## What's Included
|
|
62
|
+
|
|
63
|
+
| Export | Description |
|
|
64
|
+
|--------|-------------|
|
|
65
|
+
| `ux4g-components-web/styles.css` | Pre-built CSS bundle (~7MB, fonts embedded as base64) |
|
|
66
|
+
| `ux4g-components-web/types` | Class_Builder functions and TypeScript types |
|
|
67
|
+
|
|
68
|
+
## Related Packages
|
|
69
|
+
|
|
70
|
+
- [`ux4g-components-react`](https://www.npmjs.com/package/ux4g-components-react) — React wrapper components
|
|
71
|
+
- [`ux4g-components-angular`](https://www.npmjs.com/package/ux4g-components-angular) — Angular wrapper components
|
|
72
|
+
|
|
73
|
+
## License
|
|
74
|
+
|
|
75
|
+
MIT
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* UX4G Runtime Auto-Bootstrap
|
|
7
|
+
*
|
|
8
|
+
* Side-effect-only module that triggers runtime initialization on import.
|
|
9
|
+
* Framework packages use this as:
|
|
10
|
+
* import 'ux4g-components-web/runtime/bootstrap';
|
|
11
|
+
*
|
|
12
|
+
* Safe to import multiple times — initRuntime() uses a singleton guard
|
|
13
|
+
* (window.__UX4G_RUNTIME_INITIALIZED__) to ensure initialization happens
|
|
14
|
+
* exactly once.
|
|
15
|
+
*/
|
|
16
|
+
index.initRuntime();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { initRuntime } from './index';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* UX4G Runtime Auto-Bootstrap
|
|
5
|
+
*
|
|
6
|
+
* Side-effect-only module that triggers runtime initialization on import.
|
|
7
|
+
* Framework packages use this as:
|
|
8
|
+
* import 'ux4g-components-web/runtime/bootstrap';
|
|
9
|
+
*
|
|
10
|
+
* Safe to import multiple times — initRuntime() uses a singleton guard
|
|
11
|
+
* (window.__UX4G_RUNTIME_INITIALIZED__) to ensure initialization happens
|
|
12
|
+
* exactly once.
|
|
13
|
+
*/
|
|
14
|
+
initRuntime();
|