@mtdt/observeops-ds-elements 0.1.0
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 +58 -0
- package/dist/observeops-elements.js +7982 -0
- package/dist/observeops-elements.umd.cjs +20 -0
- package/package.json +43 -0
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# @mtdt/observeops-ds-elements
|
|
2
|
+
|
|
3
|
+
The **real** ObserveOps design-system components as framework-agnostic **Web Components** (`obs-*` custom
|
|
4
|
+
elements). Use them in React, Vue, Svelte, Angular, or plain HTML — the output is the actual DS component, not a
|
|
5
|
+
reconstruction, so it looks and behaves like the product.
|
|
6
|
+
|
|
7
|
+
This is the build target the AI Operating Contract points at: **use these components, don't reconstruct them.**
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @mtdt/observeops-ds-elements @mtdt/observeops-ds-css
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Import once to register every `obs-*` element (registration runs on import), and load the token CSS so colours
|
|
16
|
+
theme correctly:
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
import '@mtdt/observeops-ds-elements' // registers obs-button, obs-tag, …
|
|
20
|
+
import '@mtdt/observeops-ds-css/dist/observeops-ds.css' // the DS tokens (light + dark)
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Then use them anywhere:
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<obs-button variant="primary">Save</obs-button>
|
|
27
|
+
<obs-input type="search" placeholder="Search…"></obs-input>
|
|
28
|
+
<obs-tag variant="tag-green">Active</obs-tag>
|
|
29
|
+
<obs-severity severity="critical" display-text></obs-severity>
|
|
30
|
+
<obs-radio as-button options="Low,Medium,High" value="Medium"></obs-radio>
|
|
31
|
+
<obs-switch checked></obs-switch>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Dark theme: set `data-theme="dark-theme"` on `<html>` (every token is theme-aware).
|
|
35
|
+
|
|
36
|
+
## The components (`obs-*`)
|
|
37
|
+
|
|
38
|
+
`obs-button` · `obs-input` · `obs-select` · `obs-switch` · `obs-checkbox` · `obs-radio` · `obs-link` · `obs-tag` ·
|
|
39
|
+
`obs-severity` · `obs-tags` · `obs-tooltip` · `obs-date-time-picker` · `obs-filters` · `obs-selected-pills` · plus
|
|
40
|
+
the `obs-layout-*` foundation elements.
|
|
41
|
+
|
|
42
|
+
**Props/variants:** every component's full API (props, variants, states, tokens, and the *decision-grade* usage
|
|
43
|
+
rules — which variant when) lives in the machine spec **`@mtdt/observeops-ds-spec`**, and via the MCP server
|
|
44
|
+
`@mtdt/observeops-ds-mcp` (`get_component`, `search_components`, …). Read the contract in
|
|
45
|
+
`@mtdt/observeops-ds-spec/AGENTS.md` before building.
|
|
46
|
+
|
|
47
|
+
## Events
|
|
48
|
+
|
|
49
|
+
Vue-emitted events deliver the value in `event.detail` as an **array** — unwrap it:
|
|
50
|
+
|
|
51
|
+
```js
|
|
52
|
+
el.addEventListener('change', e => { const value = Array.isArray(e.detail) ? e.detail[0] : e.detail })
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Verify your render
|
|
56
|
+
|
|
57
|
+
Check that what you built matches the DS (tokens · components · variants · layout) with the shipped conformance
|
|
58
|
+
checker: `node node_modules/@mtdt/observeops-ds-spec/conformance/ds-conformance.mjs <your-page.html>` (aim ≥ 90).
|