@vonage/vivid 3.1.2 → 3.2.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 +45 -73
- package/custom-elements.json +149 -0
- package/data-grid/index.js +5 -59
- package/index.js +3 -0
- package/lib/components.d.ts +2 -0
- package/lib/tree-item/definition.d.ts +3 -0
- package/lib/tree-item/index.d.ts +1 -0
- package/lib/tree-item/tree-item.d.ts +7 -0
- package/lib/tree-item/tree-item.template.d.ts +4 -0
- package/lib/tree-view/definition.d.ts +3 -0
- package/lib/tree-view/index.d.ts +1 -0
- package/lib/tree-view/tree-view.d.ts +3 -0
- package/lib/tree-view/tree-view.template.d.ts +2 -0
- package/package.json +1 -1
- package/shared/children.js +59 -0
- package/shared/definition.js +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition13.js +1 -1
- package/shared/definition14.js +1 -1
- package/shared/definition16.js +1 -1
- package/shared/definition17.js +1 -1
- package/shared/definition19.js +1 -1
- package/shared/definition2.js +1 -1
- package/shared/definition20.js +1 -1
- package/shared/definition21.js +1 -1
- package/shared/definition22.js +1 -1
- package/shared/definition23.js +1 -1
- package/shared/definition25.js +1 -1
- package/shared/definition27.js +1 -1
- package/shared/definition29.js +1 -1
- package/shared/definition30.js +1 -1
- package/shared/definition31.js +1 -1
- package/shared/definition32.js +1 -1
- package/shared/definition33.js +1 -1
- package/shared/definition34.js +1 -1
- package/shared/definition35.js +1 -1
- package/shared/definition36.js +1 -1
- package/shared/definition37.js +1 -1
- package/shared/definition38.js +1 -1
- package/shared/definition4.js +1 -1
- package/shared/definition40.js +1 -1
- package/shared/definition41.js +1 -1
- package/shared/definition43.js +1 -1
- package/shared/definition44.js +1 -1
- package/shared/definition46.js +1 -1
- package/shared/definition47.js +123 -0
- package/shared/definition48.js +451 -0
- package/shared/definition5.js +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +1 -1
- package/shared/definition9.js +1 -1
- package/shared/dom.js +13 -1
- package/shared/form-elements.js +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +2 -2
- package/shared/text-field.js +1 -1
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/tree-item/index.js +91 -0
- package/tree-view/index.js +11 -0
- package/vivid.api.json +210 -0
package/README.md
CHANGED
|
@@ -10,10 +10,10 @@ Essential UI **web components** for building modern web applications, bound to p
|
|
|
10
10
|
To integrate Vivid components into your project, run:
|
|
11
11
|
|
|
12
12
|
```bash
|
|
13
|
-
npm install @vonage/vivid
|
|
13
|
+
npm install @vonage/vivid
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
### Usage
|
|
17
17
|
|
|
18
18
|
Import components in your project via [side effect imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only):
|
|
19
19
|
|
|
@@ -27,17 +27,13 @@ And include in HTML:
|
|
|
27
27
|
<vwc-button label="Click me"></vwc-button>
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
For a full list of components and API, explore the [components docs](https://vivid.deno.dev
|
|
30
|
+
For a full list of components and API, explore the [components docs](https://vivid.deno.dev) 📚.
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
## Prerequisite
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
Tokens should not affect the look of the application rather just provide a common set of identities (such as colors, typography, spacing etc') to be used by the components to look as intended.
|
|
37
|
-
|
|
38
|
-
As the task of loading css is not trivial, and may vary from project to project, this library does not provide any way to load the css. It is up to the author to load the css in the most appropriate manner for their project.
|
|
34
|
+
### Tokens
|
|
39
35
|
|
|
40
|
-
To **include the tokens**, its css files must be loaded into the project from the `node_modules/@vonage/vivid/styles/tokens` folder
|
|
36
|
+
To **include the tokens**, its css files must be loaded into the project from the `node_modules/@vonage/vivid/styles/tokens` folder.
|
|
41
37
|
|
|
42
38
|
Tokens folder contains the following files:
|
|
43
39
|
|
|
@@ -47,67 +43,70 @@ Tokens folder contains the following files:
|
|
|
47
43
|
|
|
48
44
|
Only one theme is required to be loaded.
|
|
49
45
|
|
|
50
|
-
|
|
46
|
+
#### About tokens
|
|
51
47
|
|
|
52
|
-
Vivid
|
|
53
|
-
Learn how to load fonts into your application [with google-fonts](https://fonts.google.com/knowledge/using_type/using_web_fonts_from_a_font_delivery_service#loading-web-fonts)
|
|
48
|
+
The Vivid components library rely on a set of **design tokens** (in the form of css custom properties).
|
|
54
49
|
|
|
55
|
-
|
|
56
|
-
Vonage teams may review guidelines at the [Spezia webfont kit](https://github.com/Vonage/spezia-webfont-kit).
|
|
50
|
+
Tokens should not affect the look of the application rather just provide a common set of identities (such as colors, typography, spacing etc') to be used by the components to look as intended.
|
|
57
51
|
|
|
58
|
-
|
|
59
|
-
This is to allow the author to choose the most appropriate way to load the font files based on their project.
|
|
52
|
+
As the task of loading css is not trivial, and may vary from project to project, this library does not provide any way to load the css. It is up to the author to load the css in the most appropriate manner for their project.
|
|
60
53
|
|
|
61
|
-
###
|
|
54
|
+
### Setting Vivid class
|
|
62
55
|
|
|
63
|
-
|
|
56
|
+
The Vivid tokens require a `vvd-root` class selector to be present on a wrapping element (advisably the `:root`) for it to apply its css custom properties to.
|
|
64
57
|
|
|
65
|
-
|
|
58
|
+
💡 The [:root](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) CSS pseudo-class matches the root element of a tree representing the document
|
|
66
59
|
|
|
67
|
-
|
|
60
|
+
```html
|
|
61
|
+
<html class="vvd-root">...</html>
|
|
62
|
+
```
|
|
68
63
|
|
|
69
|
-
|
|
64
|
+
You can also add it to any wrapping element if you would like to scope the styles to only a certain part of your application.
|
|
70
65
|
|
|
71
|
-
|
|
66
|
+
### Fonts (Prerequisite)
|
|
72
67
|
|
|
73
|
-
|
|
68
|
+
Vivid uses `Montserrat` and `Roboto Mono` Google fonts.
|
|
69
|
+
Learn how to load fonts into your application [with google-fonts](https://fonts.google.com/knowledge/using_type/using_web_fonts_from_a_font_delivery_service#loading-web-fonts)
|
|
74
70
|
|
|
75
|
-
|
|
71
|
+
#### Vonage authors
|
|
76
72
|
|
|
77
|
-
|
|
73
|
+
Unless explicitly stated otherwise, *Vonage* products should use the brand specified font families by `Spezia`.
|
|
74
|
+
Vonage teams may review guidelines at the [Spezia webfont kit](https://github.com/Vonage/spezia-webfont-kit).
|
|
78
75
|
|
|
79
|
-
|
|
80
|
-
@forward 'node_modules/@vonage/vivid/styles/[path to file].css';
|
|
81
|
-
```
|
|
76
|
+
💡 For more information check out [Vonage Authors](/getting-started/vonage-authors)
|
|
82
77
|
|
|
83
78
|
## Advanced Usage
|
|
84
79
|
|
|
85
|
-
|
|
80
|
+
For further information on **core application styles** & **scoped elements** check out [advanced usage](/getting-started/advanced)
|
|
86
81
|
|
|
87
|
-
|
|
82
|
+
## CDN - Quickstart
|
|
88
83
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
To work around this limitation, Vivid provides a way for authors' to scope each custom element namespace by passing an argument to the `prefix` parameter when registering each custom element.
|
|
84
|
+
Global content delivery networks can help quickly integrate content within html pages, fetching content from an URL, skipping local builds entirely.
|
|
85
|
+
Such practice is often used when working on POCs or reproduction environments.
|
|
86
|
+
Tools like [UNPKG](https://unpkg.com), [jsDeliver](https://www.jsdelivr.com), [Skypack](https://www.skypack.dev) etc' are bound to deliver any content registered in the npm registry.
|
|
93
87
|
|
|
94
|
-
The following
|
|
88
|
+
The following snippet fully renders a Vivid button component
|
|
95
89
|
|
|
96
|
-
```
|
|
97
|
-
import
|
|
90
|
+
```html
|
|
91
|
+
<!-- import Montserrat & Roboto-Mono fonts -->
|
|
92
|
+
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
93
|
+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
98
94
|
|
|
99
|
-
|
|
100
|
-
|
|
95
|
+
<!-- import light theme style tokens -->
|
|
96
|
+
<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@3.x/styles/tokens/theme-light.css">
|
|
101
97
|
|
|
102
|
-
|
|
98
|
+
<!-- import Vivid button component -->
|
|
99
|
+
<script type="module" src="https://unpkg.com/@vonage/vivid@3.x/button/index.js"></script>
|
|
103
100
|
|
|
104
|
-
|
|
105
|
-
<
|
|
101
|
+
<!-- Part of the app (or a whole app) that contains vivid components -->
|
|
102
|
+
<div class="vvd-root">
|
|
103
|
+
<vwc-button label="Click me" appearance="filled" connotation="cta"></vwc-button>
|
|
104
|
+
</div>
|
|
106
105
|
```
|
|
107
106
|
|
|
108
|
-
|
|
107
|
+
## Support Matrix
|
|
109
108
|
|
|
110
|
-
|
|
109
|
+
This library is supported on 2 recent versions of major browsers (Chrome, Firefox, Safari, Edge).
|
|
111
110
|
|
|
112
111
|
## Support
|
|
113
112
|
|
|
@@ -123,8 +122,6 @@ For any questions, please open a [bug report](https://github.com/Vonage/vivid-3/
|
|
|
123
122
|
|
|
124
123
|
- See the [open issues](https://github.com/vonage/vivid-3/issues) for a full list of proposed features (and known issues).
|
|
125
124
|
|
|
126
|
-
We publish a *next* release on every successful merge to main, so you never need to wait for a new stable version to make use of any updates.
|
|
127
|
-
|
|
128
125
|
## Contributing
|
|
129
126
|
|
|
130
127
|
Please read [CONTRIBUTING.md](https://github.com/Vonage/vivid-3/blob/main/.github/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
|
|
@@ -147,33 +144,8 @@ This project is licensed under the Apache 2.0 License - see the [LICENSE.md](htt
|
|
|
147
144
|
- Inspiration
|
|
148
145
|
- etc -->
|
|
149
146
|
|
|
150
|
-
## Built With
|
|
147
|
+
## Built With ♡ And
|
|
151
148
|
|
|
152
149
|
- [Fast](https://www.fast.design) - to extend element classes and compile code to native web components
|
|
153
150
|
- [Typescript](https://www.typescriptlang.org) - for ergonomic and type-safe code
|
|
154
151
|
- [Sass](https://sass-lang.com) - for styles authoring extensibility and consistency
|
|
155
|
-
|
|
156
|
-
## Quickstart
|
|
157
|
-
|
|
158
|
-
Global content delivery networks can help quickly integrate content within html pages, fetching content from an URL, skipping local builds entirely.
|
|
159
|
-
Such practice is often used when working on POCs or reproduction environments.
|
|
160
|
-
Tools like [UNPKG](https://unpkg.com), [jsDeliver](https://www.jsdelivr.com), [Skypack](https://www.skypack.dev) etc' are bound to deliver any content registered in the npm registry.
|
|
161
|
-
|
|
162
|
-
The following snippet fully renders a Vivid button component
|
|
163
|
-
|
|
164
|
-
```html
|
|
165
|
-
<!-- import Montserrat & Roboto-Mono fonts -->
|
|
166
|
-
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
167
|
-
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
168
|
-
|
|
169
|
-
<!-- import light theme style tokens -->
|
|
170
|
-
<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@3.x/styles/tokens/theme-light.css">
|
|
171
|
-
|
|
172
|
-
<!-- import Vivid button component -->
|
|
173
|
-
<script type="module" src="https://unpkg.com/@vonage/vivid@3.x/button/index.js"></script>
|
|
174
|
-
|
|
175
|
-
<!-- Part of the app (or a whole app) that contains vivid components -->
|
|
176
|
-
<div class="vvd-root">
|
|
177
|
-
<vwc-button label="Click me" appearance="filled" connotation="cta"></vwc-button>
|
|
178
|
-
</div>
|
|
179
|
-
```
|
package/custom-elements.json
CHANGED
|
@@ -6201,6 +6201,155 @@
|
|
|
6201
6201
|
}
|
|
6202
6202
|
}
|
|
6203
6203
|
]
|
|
6204
|
+
},
|
|
6205
|
+
{
|
|
6206
|
+
"kind": "javascript-module",
|
|
6207
|
+
"path": "libs/components/src/lib/tree-item/definition.ts",
|
|
6208
|
+
"declarations": [
|
|
6209
|
+
{
|
|
6210
|
+
"kind": "variable",
|
|
6211
|
+
"name": "treeItemDefinition"
|
|
6212
|
+
},
|
|
6213
|
+
{
|
|
6214
|
+
"kind": "variable",
|
|
6215
|
+
"name": "registerTreeItem",
|
|
6216
|
+
"description": "Registers the tree-item element with the design system.",
|
|
6217
|
+
"parameters": [
|
|
6218
|
+
{
|
|
6219
|
+
"description": "the prefix to use for the component name",
|
|
6220
|
+
"name": "prefix"
|
|
6221
|
+
}
|
|
6222
|
+
]
|
|
6223
|
+
}
|
|
6224
|
+
],
|
|
6225
|
+
"exports": [
|
|
6226
|
+
{
|
|
6227
|
+
"kind": "js",
|
|
6228
|
+
"name": "treeItemDefinition",
|
|
6229
|
+
"declaration": {
|
|
6230
|
+
"name": "treeItemDefinition",
|
|
6231
|
+
"module": "libs/components/src/lib/tree-item/definition.ts"
|
|
6232
|
+
}
|
|
6233
|
+
},
|
|
6234
|
+
{
|
|
6235
|
+
"kind": "js",
|
|
6236
|
+
"name": "registerTreeItem",
|
|
6237
|
+
"declaration": {
|
|
6238
|
+
"name": "registerTreeItem",
|
|
6239
|
+
"module": "libs/components/src/lib/tree-item/definition.ts"
|
|
6240
|
+
}
|
|
6241
|
+
}
|
|
6242
|
+
]
|
|
6243
|
+
},
|
|
6244
|
+
{
|
|
6245
|
+
"kind": "javascript-module",
|
|
6246
|
+
"path": "libs/components/src/lib/tree-item/tree-item.ts",
|
|
6247
|
+
"declarations": [
|
|
6248
|
+
{
|
|
6249
|
+
"kind": "class",
|
|
6250
|
+
"description": "Base class for tree-item",
|
|
6251
|
+
"name": "TreeItem",
|
|
6252
|
+
"members": [
|
|
6253
|
+
{
|
|
6254
|
+
"kind": "field",
|
|
6255
|
+
"name": "text",
|
|
6256
|
+
"type": {
|
|
6257
|
+
"text": "string | undefined"
|
|
6258
|
+
},
|
|
6259
|
+
"description": "Indicates the text's text.",
|
|
6260
|
+
"privacy": "public"
|
|
6261
|
+
}
|
|
6262
|
+
],
|
|
6263
|
+
"attributes": [
|
|
6264
|
+
{
|
|
6265
|
+
"name": "text",
|
|
6266
|
+
"type": {
|
|
6267
|
+
"text": "string | undefined"
|
|
6268
|
+
},
|
|
6269
|
+
"description": "Indicates the text's text.",
|
|
6270
|
+
"fieldName": "text"
|
|
6271
|
+
}
|
|
6272
|
+
],
|
|
6273
|
+
"superclass": {
|
|
6274
|
+
"name": "FastTreeItem",
|
|
6275
|
+
"package": "@microsoft/fast-foundation"
|
|
6276
|
+
}
|
|
6277
|
+
}
|
|
6278
|
+
],
|
|
6279
|
+
"exports": [
|
|
6280
|
+
{
|
|
6281
|
+
"kind": "js",
|
|
6282
|
+
"name": "TreeItem",
|
|
6283
|
+
"declaration": {
|
|
6284
|
+
"name": "TreeItem",
|
|
6285
|
+
"module": "libs/components/src/lib/tree-item/tree-item.ts"
|
|
6286
|
+
}
|
|
6287
|
+
}
|
|
6288
|
+
]
|
|
6289
|
+
},
|
|
6290
|
+
{
|
|
6291
|
+
"kind": "javascript-module",
|
|
6292
|
+
"path": "libs/components/src/lib/tree-view/definition.ts",
|
|
6293
|
+
"declarations": [
|
|
6294
|
+
{
|
|
6295
|
+
"kind": "variable",
|
|
6296
|
+
"name": "treeViewDefinition"
|
|
6297
|
+
},
|
|
6298
|
+
{
|
|
6299
|
+
"kind": "variable",
|
|
6300
|
+
"name": "registerTreeView",
|
|
6301
|
+
"description": "Registers the tree-view element with the design system.",
|
|
6302
|
+
"parameters": [
|
|
6303
|
+
{
|
|
6304
|
+
"description": "the prefix to use for the component name",
|
|
6305
|
+
"name": "prefix"
|
|
6306
|
+
}
|
|
6307
|
+
]
|
|
6308
|
+
}
|
|
6309
|
+
],
|
|
6310
|
+
"exports": [
|
|
6311
|
+
{
|
|
6312
|
+
"kind": "js",
|
|
6313
|
+
"name": "treeViewDefinition",
|
|
6314
|
+
"declaration": {
|
|
6315
|
+
"name": "treeViewDefinition",
|
|
6316
|
+
"module": "libs/components/src/lib/tree-view/definition.ts"
|
|
6317
|
+
}
|
|
6318
|
+
},
|
|
6319
|
+
{
|
|
6320
|
+
"kind": "js",
|
|
6321
|
+
"name": "registerTreeView",
|
|
6322
|
+
"declaration": {
|
|
6323
|
+
"name": "registerTreeView",
|
|
6324
|
+
"module": "libs/components/src/lib/tree-view/definition.ts"
|
|
6325
|
+
}
|
|
6326
|
+
}
|
|
6327
|
+
]
|
|
6328
|
+
},
|
|
6329
|
+
{
|
|
6330
|
+
"kind": "javascript-module",
|
|
6331
|
+
"path": "libs/components/src/lib/tree-view/tree-view.ts",
|
|
6332
|
+
"declarations": [
|
|
6333
|
+
{
|
|
6334
|
+
"kind": "class",
|
|
6335
|
+
"description": "Base class for Tree View",
|
|
6336
|
+
"name": "TreeView",
|
|
6337
|
+
"superclass": {
|
|
6338
|
+
"name": "FastTreeView",
|
|
6339
|
+
"package": "@microsoft/fast-foundation"
|
|
6340
|
+
}
|
|
6341
|
+
}
|
|
6342
|
+
],
|
|
6343
|
+
"exports": [
|
|
6344
|
+
{
|
|
6345
|
+
"kind": "js",
|
|
6346
|
+
"name": "TreeView",
|
|
6347
|
+
"declaration": {
|
|
6348
|
+
"name": "TreeView",
|
|
6349
|
+
"module": "libs/components/src/lib/tree-view/tree-view.ts"
|
|
6350
|
+
}
|
|
6351
|
+
}
|
|
6352
|
+
]
|
|
6204
6353
|
}
|
|
6205
6354
|
]
|
|
6206
6355
|
}
|
package/data-grid/index.js
CHANGED
|
@@ -1,65 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, o as observable, W as DOM, h as html, r as registerFactory } from '../shared/index.js';
|
|
2
2
|
import { k as keyEnd, a as keyHome, h as keyArrowRight, i as keyArrowLeft, j as keyPageDown, l as keyPageUp, b as keyArrowDown, c as keyArrowUp, f as keyEscape, m as keyFunction2, d as keyEnter } from '../shared/key-codes.js';
|
|
3
3
|
import { R as RepeatDirective } from '../shared/repeat.js';
|
|
4
|
-
import {
|
|
4
|
+
import { e as elements, s as slotted } from '../shared/slotted.js';
|
|
5
|
+
import { c as children } from '../shared/children.js';
|
|
5
6
|
import { f as focusTemplateFactory } from '../shared/focus2.js';
|
|
6
7
|
import '../shared/focus.js';
|
|
7
8
|
|
|
8
|
-
/**
|
|
9
|
-
* The runtime behavior for child node observation.
|
|
10
|
-
* @public
|
|
11
|
-
*/
|
|
12
|
-
class ChildrenBehavior extends NodeObservationBehavior {
|
|
13
|
-
/**
|
|
14
|
-
* Creates an instance of ChildrenBehavior.
|
|
15
|
-
* @param target - The element target to observe children on.
|
|
16
|
-
* @param options - The options to use when observing the element children.
|
|
17
|
-
*/
|
|
18
|
-
constructor(target, options) {
|
|
19
|
-
super(target, options);
|
|
20
|
-
this.observer = null;
|
|
21
|
-
options.childList = true;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Begins observation of the nodes.
|
|
25
|
-
*/
|
|
26
|
-
observe() {
|
|
27
|
-
if (this.observer === null) {
|
|
28
|
-
this.observer = new MutationObserver(this.handleEvent.bind(this));
|
|
29
|
-
}
|
|
30
|
-
this.observer.observe(this.target, this.options);
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Disconnects observation of the nodes.
|
|
34
|
-
*/
|
|
35
|
-
disconnect() {
|
|
36
|
-
this.observer.disconnect();
|
|
37
|
-
}
|
|
38
|
-
/**
|
|
39
|
-
* Retrieves the nodes that should be assigned to the target.
|
|
40
|
-
*/
|
|
41
|
-
getNodes() {
|
|
42
|
-
if ("subtree" in this.options) {
|
|
43
|
-
return Array.from(this.target.querySelectorAll(this.options.selector));
|
|
44
|
-
}
|
|
45
|
-
return Array.from(this.target.childNodes);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
/**
|
|
49
|
-
* A directive that observes the `childNodes` of an element and updates a property
|
|
50
|
-
* whenever they change.
|
|
51
|
-
* @param propertyOrOptions - The options used to configure child node observation.
|
|
52
|
-
* @public
|
|
53
|
-
*/
|
|
54
|
-
function children(propertyOrOptions) {
|
|
55
|
-
if (typeof propertyOrOptions === "string") {
|
|
56
|
-
propertyOrOptions = {
|
|
57
|
-
property: propertyOrOptions,
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
return new AttachedBehaviorHTMLDirective("fast-children", ChildrenBehavior, propertyOrOptions);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
9
|
/**
|
|
64
10
|
* This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events
|
|
65
11
|
* and should include all non-deprecated and non-experimental Standard events
|
|
@@ -961,9 +907,9 @@ __decorate([
|
|
|
961
907
|
|
|
962
908
|
var css_248z$2 = ":host {\n position: relative;\n display: block;\n}\n\n:host([generate-header=sticky]) {\n max-height: var(--data-grid-max-height, 200px);\n overflow-y: auto;\n}";
|
|
963
909
|
|
|
964
|
-
var css_248z$1 = "/**\n * Do not edit directly\n * Generated on
|
|
910
|
+
var css_248z$1 = "/**\n * Do not edit directly\n * Generated on Sun, 19 Feb 2023 11:52:38 GMT\n */\n:host {\n display: grid;\n width: 100%;\n box-sizing: border-box;\n color: var(--vvd-color-canvas-text);\n}\n\n:host([row-type=sticky-header]) {\n position: sticky;\n z-index: 999;\n top: 0;\n background: var(--vvd-color-canvas);\n}";
|
|
965
911
|
|
|
966
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
912
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 19 Feb 2023 11:52:38 GMT\n */\n:host {\n position: relative;\n display: flex;\n overflow: hidden;\n box-sizing: border-box;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--vvd-color-neutral-100);\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base);\n outline: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host([cell-type=columnheader]) {\n border-color: currentColor;\n font: var(--vvd-typography-base-bold);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n#focus-wrapper:not(.active) > .focus-indicator {\n display: none;\n}";
|
|
967
913
|
|
|
968
914
|
class DataGrid extends DataGrid$1 {}
|
|
969
915
|
|
package/index.js
CHANGED
|
@@ -43,6 +43,8 @@ export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries }
|
|
|
43
43
|
export { r as registerTabs, t as tabsDefinition, a as tabsRegistries } from './shared/definition43.js';
|
|
44
44
|
export { r as registerTab, a as tabDefinition, t as tabRegistries } from './shared/definition41.js';
|
|
45
45
|
export { r as registerTabPanel, a as tabPanelDefinition, t as tabPanelRegistries } from './shared/definition42.js';
|
|
46
|
+
export { r as registerTreeView, t as treeViewDefinition, a as treeViewRegistries } from './shared/definition48.js';
|
|
47
|
+
export { r as registerTreeItem, t as treeItemDefinition, a as treeItemRegistries } from './shared/definition47.js';
|
|
46
48
|
export { a7 as designSystem, r as registerFactory } from './shared/index.js';
|
|
47
49
|
import './shared/key-codes.js';
|
|
48
50
|
import './shared/numbers.js';
|
|
@@ -84,3 +86,4 @@ import './shared/es.regexp.to-string.js';
|
|
|
84
86
|
import './shared/base-progress.js';
|
|
85
87
|
import './shared/radio.js';
|
|
86
88
|
import './shared/aria2.js';
|
|
89
|
+
import './shared/children.js';
|
package/lib/components.d.ts
CHANGED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
|
|
2
|
+
export declare const treeItemDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
|
|
3
|
+
export declare const registerTreeItem: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
|
|
2
|
+
import type { TreeItem } from './tree-item';
|
|
3
|
+
export declare const expandCollapseButton: (context: ElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;
|
|
4
|
+
export declare const TreeItemTemplate: (context: ElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
|
|
2
|
+
export declare const treeViewDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
|
|
3
|
+
export declare const registerTreeView: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { A as AttachedBehaviorHTMLDirective } from './index.js';
|
|
2
|
+
import { N as NodeObservationBehavior } from './slotted.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* The runtime behavior for child node observation.
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
class ChildrenBehavior extends NodeObservationBehavior {
|
|
9
|
+
/**
|
|
10
|
+
* Creates an instance of ChildrenBehavior.
|
|
11
|
+
* @param target - The element target to observe children on.
|
|
12
|
+
* @param options - The options to use when observing the element children.
|
|
13
|
+
*/
|
|
14
|
+
constructor(target, options) {
|
|
15
|
+
super(target, options);
|
|
16
|
+
this.observer = null;
|
|
17
|
+
options.childList = true;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Begins observation of the nodes.
|
|
21
|
+
*/
|
|
22
|
+
observe() {
|
|
23
|
+
if (this.observer === null) {
|
|
24
|
+
this.observer = new MutationObserver(this.handleEvent.bind(this));
|
|
25
|
+
}
|
|
26
|
+
this.observer.observe(this.target, this.options);
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Disconnects observation of the nodes.
|
|
30
|
+
*/
|
|
31
|
+
disconnect() {
|
|
32
|
+
this.observer.disconnect();
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Retrieves the nodes that should be assigned to the target.
|
|
36
|
+
*/
|
|
37
|
+
getNodes() {
|
|
38
|
+
if ("subtree" in this.options) {
|
|
39
|
+
return Array.from(this.target.querySelectorAll(this.options.selector));
|
|
40
|
+
}
|
|
41
|
+
return Array.from(this.target.childNodes);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* A directive that observes the `childNodes` of an element and updates a property
|
|
46
|
+
* whenever they change.
|
|
47
|
+
* @param propertyOrOptions - The options used to configure child node observation.
|
|
48
|
+
* @public
|
|
49
|
+
*/
|
|
50
|
+
function children(propertyOrOptions) {
|
|
51
|
+
if (typeof propertyOrOptions === "string") {
|
|
52
|
+
propertyOrOptions = {
|
|
53
|
+
property: propertyOrOptions,
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
return new AttachedBehaviorHTMLDirective("fast-children", ChildrenBehavior, propertyOrOptions);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export { children as c };
|
package/shared/definition.js
CHANGED
|
@@ -186,7 +186,7 @@ __decorate([
|
|
|
186
186
|
observable
|
|
187
187
|
], Accordion$1.prototype, "accordionItems", void 0);
|
|
188
188
|
|
|
189
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
189
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 19 Feb 2023 11:52:38 GMT\n */\n.base {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
|
|
190
190
|
|
|
191
191
|
class Accordion extends Accordion$1 {
|
|
192
192
|
constructor() {
|
package/shared/definition11.js
CHANGED
|
@@ -7,7 +7,7 @@ import { I as Icon } from './icon.js';
|
|
|
7
7
|
import { w as when } from './when.js';
|
|
8
8
|
import { c as classNames } from './class-names.js';
|
|
9
9
|
|
|
10
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
10
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 19 Feb 2023 11:52:38 GMT\n */\n.base {\n display: flex;\n align-items: center;\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base);\n}\n.base .separator {\n margin: 0 16px;\n color: var(--vvd-color-neutral-600);\n font-size: 12px;\n}\n\n.control {\n position: relative;\n font: inherit;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control:any-link {\n color: var(--vvd-color-cta-600);\n text-decoration: none;\n}\n.control:any-link:hover {\n text-decoration: underline;\n}\n\n.focus-indicator {\n --focus-inset: -4px -8px;\n --focus-stroke-gap-color: transparent;\n border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
|
|
11
11
|
|
|
12
12
|
class BreadcrumbItem extends BreadcrumbItem$1 {
|
|
13
13
|
constructor() {
|
package/shared/definition12.js
CHANGED
|
@@ -506,7 +506,7 @@ _curry1(function isEmpty(x) {
|
|
|
506
506
|
|
|
507
507
|
var isEmpty$1 = isEmpty;
|
|
508
508
|
|
|
509
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
509
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 19 Feb 2023 11:52:38 GMT\n */\nol {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n[role=grid i] {\n position: relative;\n z-index: 0;\n display: grid;\n margin: auto;\n grid-template-areas: \". column-headers\" \"row-headers calendar\";\n grid-template-columns: min-content auto;\n inline-size: max(100%, 500px);\n min-inline-size: 880px;\n}\n\n.row-headers {\n display: grid;\n grid-area: row-headers;\n grid-template-rows: repeat(24, 1fr);\n margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n font: var(--vvd-typography-base-condensed);\n font-size: small;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.calendar-row {\n display: contents;\n}\n\n.calendar-grid-presentation {\n display: grid;\n overflow: hidden;\n background: var(--vvd-color-surface-2dp);\n border-radius: 6px;\n counter-reset: listing;\n filter: var(--vvd-shadow-surface-2dp);\n gap: 1px;\n grid-area: calendar;\n grid-auto-flow: column;\n grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n display: contents;\n}\n.hours > [role=listitem i] {\n position: relative;\n grid-column: 1/8;\n grid-row: var(--row);\n min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n position: absolute;\n border-block-end: var(--vvd-color-neutral-100) 1px solid;\n content: \"\";\n inline-size: 100%;\n margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n --row: 24;\n}\n\n[role=gridcell i] {\n display: grid;\n gap: 1px;\n grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n position: absolute;\n z-index: -1;\n background-color: var(--vvd-color-information-400);\n content: \"\";\n}\n@supports (inset: 0) {\n [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n inset: 0;\n }\n}\n@supports not (inset: 0) {\n [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n outline: none;\n}\n[role=gridcell i]:not(:focus-visible)::before,\n[role=columnheader i]:not(:focus-visible)::before,\n[role=columnheader i] [role=button i]:not(:focus-visible)::before {\n display: none;\n}\n\n.columns {\n display: contents;\n}\n.columns > [role=gridcell i] {\n position: relative;\n grid-column: var(--column);\n grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n position: absolute;\n block-size: 100%;\n border-inline-end: var(--vvd-color-neutral-100) 1px solid;\n content: \"\";\n margin-inline-start: -1px;\n}\n\n.column-headers {\n display: grid;\n grid-area: column-headers;\n grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n display: grid;\n align-items: baseline;\n margin: 0;\n font: var(--vvd-typography-heading-4);\n grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n font: inherit;\n inline-size: min-content;\n}\n@supports (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n inset-inline-start: 0;\n }\n}\n@supports not (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n left: 0;\n }\n}\n.column-headers [role=columnheader i] h2 > small {\n font: var(--vvd-typography-base-condensed);\n text-transform: uppercase;\n}";
|
|
510
510
|
|
|
511
511
|
const ARROW_UP = 'ArrowUp';
|
|
512
512
|
const ARROW_RIGHT = 'ArrowRight';
|