@ni/nimble-components 18.4.0 → 18.5.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/dist/all-components-bundle.js +138 -10
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +882 -823
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/banner/index.js +5 -1
- package/dist/esm/banner/index.js.map +1 -1
- package/dist/esm/banner/types.d.ts +8 -0
- package/dist/esm/table/components/cell/index.d.ts +6 -0
- package/dist/esm/table/components/cell/index.js +19 -1
- package/dist/esm/table/components/cell/index.js.map +1 -1
- package/dist/esm/table/components/cell/styles.js +7 -0
- package/dist/esm/table/components/cell/styles.js.map +1 -1
- package/dist/esm/table/components/cell/template.js +19 -1
- package/dist/esm/table/components/cell/template.js.map +1 -1
- package/dist/esm/table/components/row/index.d.ts +6 -0
- package/dist/esm/table/components/row/index.js +24 -0
- package/dist/esm/table/components/row/index.js.map +1 -1
- package/dist/esm/table/components/row/styles.js +13 -0
- package/dist/esm/table/components/row/styles.js.map +1 -1
- package/dist/esm/table/components/row/template.js +12 -1
- package/dist/esm/table/components/row/template.js.map +1 -1
- package/dist/esm/table/index.d.ts +11 -1
- package/dist/esm/table/index.js +24 -0
- package/dist/esm/table/index.js.map +1 -1
- package/dist/esm/table/models/virtualizer.js +4 -6
- package/dist/esm/table/models/virtualizer.js.map +1 -1
- package/dist/esm/table/styles.js +2 -3
- package/dist/esm/table/styles.js.map +1 -1
- package/dist/esm/table/template.js +11 -1
- package/dist/esm/table/template.js.map +1 -1
- package/dist/esm/table/types.d.ts +6 -0
- package/dist/esm/table-column/base/index.d.ts +3 -1
- package/dist/esm/table-column/base/index.js +6 -0
- package/dist/esm/table-column/base/index.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/banner/index.js
CHANGED
|
@@ -39,7 +39,11 @@ export class Banner extends FoundationElement {
|
|
|
39
39
|
* @internal
|
|
40
40
|
*/
|
|
41
41
|
openChanged() {
|
|
42
|
-
|
|
42
|
+
const eventDetail = {
|
|
43
|
+
newState: this.open,
|
|
44
|
+
oldState: !this.open
|
|
45
|
+
};
|
|
46
|
+
this.$emit('toggle', eventDetail);
|
|
43
47
|
}
|
|
44
48
|
/**
|
|
45
49
|
* @internal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/banner/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EACX,6BAA6B,EAC7B,YAAY,EACZ,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/banner/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EACX,6BAA6B,EAC7B,YAAY,EACZ,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAA2B,MAAM,SAAS,CAAC;AAQlE;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,iBAAiB;IAA7C;;QACI;;;;WAIG;QAEI,SAAI,GAAG,KAAK,CAAC;QAEpB;;;;WAIG;QAEI,aAAQ,GAAmB,cAAc,CAAC,OAAO,CAAC;QAEzD;;;;WAIG;QAEI,gBAAW,GAAG,KAAK,CAAC;QAE3B;;;;WAIG;QAEI,mBAAc,GAAG,KAAK,CAAC;IA2BlC,CAAC;IAjBG;;OAEG;IACI,WAAW;QACd,MAAM,WAAW,GAA4B;YACzC,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI;SACvB,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IACtC,CAAC;IAED;;OAEG;IACI,aAAa;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACtB,CAAC;CACJ;AAnDG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACN;AAQpB;IADC,IAAI,EAAE;wCACkD;AAQzD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAQ3B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CAC1B;AAQ9B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;kDACT;AAuBvC,WAAW,CAAC,MAAM,EAAE,6BAA6B,CAAC,CAAC;AAEnD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;IAChC,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
|
|
@@ -9,3 +9,11 @@ export declare const BannerSeverity: {
|
|
|
9
9
|
readonly information: "information";
|
|
10
10
|
};
|
|
11
11
|
export declare type BannerSeverity = (typeof BannerSeverity)[keyof typeof BannerSeverity];
|
|
12
|
+
/**
|
|
13
|
+
* The type of the detail associated with the `toggle`
|
|
14
|
+
* event on the banner.
|
|
15
|
+
*/
|
|
16
|
+
export interface BannerToggleEventDetail {
|
|
17
|
+
newState: boolean;
|
|
18
|
+
oldState: boolean;
|
|
19
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ElementStyles, ViewTemplate } from '@microsoft/fast-element';
|
|
2
2
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
3
|
+
import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
|
|
3
4
|
import type { TableCellRecord, TableCellState } from '../../types';
|
|
4
5
|
declare global {
|
|
5
6
|
interface HTMLElementTagNameMap {
|
|
@@ -14,6 +15,9 @@ export declare class TableCell<TCellRecord extends TableCellRecord = TableCellRe
|
|
|
14
15
|
cellState?: TableCellState<TCellRecord>;
|
|
15
16
|
cellTemplate?: ViewTemplate;
|
|
16
17
|
cellStyles?: ElementStyles;
|
|
18
|
+
hasActionMenu: boolean;
|
|
19
|
+
menuOpen: boolean;
|
|
20
|
+
actionMenuLabel?: string;
|
|
17
21
|
/**
|
|
18
22
|
* @internal
|
|
19
23
|
*/
|
|
@@ -21,6 +25,8 @@ export declare class TableCell<TCellRecord extends TableCellRecord = TableCellRe
|
|
|
21
25
|
private customCellView?;
|
|
22
26
|
connectedCallback(): void;
|
|
23
27
|
disconnectedCallback(): void;
|
|
28
|
+
onActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;
|
|
29
|
+
onActionMenuToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;
|
|
24
30
|
protected cellStateChanged(): void;
|
|
25
31
|
protected cellTemplateChanged(): void;
|
|
26
32
|
protected cellStylesChanged(prev?: ElementStyles, next?: ElementStyles): void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { defaultExecutionContext, observable } from '@microsoft/fast-element';
|
|
2
|
+
import { attr, defaultExecutionContext, observable } from '@microsoft/fast-element';
|
|
3
3
|
import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
|
|
4
4
|
import { styles } from './styles';
|
|
5
5
|
import { template } from './template';
|
|
@@ -10,6 +10,8 @@ import { template } from './template';
|
|
|
10
10
|
export class TableCell extends FoundationElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
|
+
this.hasActionMenu = false;
|
|
14
|
+
this.menuOpen = false;
|
|
13
15
|
this.customCellView = undefined;
|
|
14
16
|
}
|
|
15
17
|
connectedCallback() {
|
|
@@ -23,6 +25,13 @@ export class TableCell extends FoundationElement {
|
|
|
23
25
|
this.customCellView = undefined;
|
|
24
26
|
}
|
|
25
27
|
}
|
|
28
|
+
onActionMenuBeforeToggle(event) {
|
|
29
|
+
this.$emit('cell-action-menu-beforetoggle', event.detail);
|
|
30
|
+
}
|
|
31
|
+
onActionMenuToggle(event) {
|
|
32
|
+
this.menuOpen = event.detail.newState;
|
|
33
|
+
this.$emit('cell-action-menu-toggle', event.detail);
|
|
34
|
+
}
|
|
26
35
|
cellStateChanged() {
|
|
27
36
|
this.customCellView?.bind(this.cellState, defaultExecutionContext);
|
|
28
37
|
}
|
|
@@ -49,6 +58,15 @@ __decorate([
|
|
|
49
58
|
__decorate([
|
|
50
59
|
observable
|
|
51
60
|
], TableCell.prototype, "cellStyles", void 0);
|
|
61
|
+
__decorate([
|
|
62
|
+
attr({ attribute: 'has-action-menu', mode: 'boolean' })
|
|
63
|
+
], TableCell.prototype, "hasActionMenu", void 0);
|
|
64
|
+
__decorate([
|
|
65
|
+
attr({ attribute: 'menu-open', mode: 'boolean' })
|
|
66
|
+
], TableCell.prototype, "menuOpen", void 0);
|
|
67
|
+
__decorate([
|
|
68
|
+
attr({ attribute: 'action-menu-label' })
|
|
69
|
+
], TableCell.prototype, "actionMenuLabel", void 0);
|
|
52
70
|
const nimbleTableCell = TableCell.compose({
|
|
53
71
|
baseName: 'table-cell',
|
|
54
72
|
template,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,uBAAuB,EAGvB,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EACJ,uBAAuB,EAGvB,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAaW,kBAAa,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;QAUhB,mBAAc,GAAc,SAAS,CAAC;IAyDlD,CAAC;IAvDmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAC3C,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,oBAAoB,CAC5B,CAAC;IACN,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;SACnC;IACL,CAAC;IAEM,wBAAwB,CAC3B,KAA+C;QAE/C,IAAI,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAEM,kBAAkB,CACrB,KAA+C;QAE/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,uBAAuB,CAAC,CAAC;IACvE,CAAC;IAES,mBAAmB;QACzB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAC3C,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,oBAAoB,CAC5B,CAAC;SACL;IACL,CAAC;IAES,iBAAiB,CACvB,IAAoB,EACpB,IAAoB;QAEpB,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;SACxC;IACL,CAAC;CACJ;AA/EG;IADC,UAAU;4CACoC;AAG/C;IADC,UAAU;+CACwB;AAGnC;IADC,UAAU;6CACuB;AAGlC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC3B;AAG7B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAGxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;kDACT;AAkEpC,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}
|
|
@@ -8,6 +8,9 @@ export const styles = css `
|
|
|
8
8
|
padding: 0px calc(${standardPadding} / 2);
|
|
9
9
|
align-self: center;
|
|
10
10
|
height: 100%;
|
|
11
|
+
grid-template-columns: 1fr auto;
|
|
12
|
+
/* A default value that will be overridden by the row */
|
|
13
|
+
--ni-private-table-cell-action-menu-display: block;
|
|
11
14
|
}
|
|
12
15
|
|
|
13
16
|
.cell-content-container {
|
|
@@ -15,5 +18,9 @@ export const styles = css `
|
|
|
15
18
|
display: flex;
|
|
16
19
|
align-items: center;
|
|
17
20
|
}
|
|
21
|
+
|
|
22
|
+
.action-menu {
|
|
23
|
+
display: var(--ni-private-table-cell-action-menu-display);
|
|
24
|
+
}
|
|
18
25
|
`;
|
|
19
26
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;4BAGO,eAAe
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;4BAGO,eAAe;;;;;;;;;;;;;;;;;CAiB1C,CAAC"}
|
|
@@ -1,8 +1,26 @@
|
|
|
1
|
-
import { html, ref } from '@microsoft/fast-element';
|
|
1
|
+
import { html, ref, when } from '@microsoft/fast-element';
|
|
2
|
+
import { DesignSystem } from '@microsoft/fast-foundation';
|
|
3
|
+
import { IconThreeDotsLine } from '../../../icons/three-dots-line';
|
|
4
|
+
import { MenuButton } from '../../../menu-button';
|
|
5
|
+
import { ButtonAppearance } from '../../../menu-button/types';
|
|
2
6
|
// prettier-ignore
|
|
3
7
|
export const template = html `
|
|
4
8
|
<template role="cell">
|
|
5
9
|
<div ${ref('cellContentContainer')} class="cell-content-container"></div>
|
|
10
|
+
|
|
11
|
+
${when(x => x.hasActionMenu, html `
|
|
12
|
+
<${DesignSystem.tagFor(MenuButton)}
|
|
13
|
+
content-hidden
|
|
14
|
+
appearance="${ButtonAppearance.ghost}"
|
|
15
|
+
@beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
|
|
16
|
+
@toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
|
|
17
|
+
class="action-menu"
|
|
18
|
+
>
|
|
19
|
+
<${DesignSystem.tagFor(IconThreeDotsLine)} slot="start"></${DesignSystem.tagFor(IconThreeDotsLine)}>
|
|
20
|
+
${x => x.actionMenuLabel}
|
|
21
|
+
<slot name="cellActionMenu" slot="menu"></slot>
|
|
22
|
+
</${DesignSystem.tagFor(MenuButton)}>
|
|
23
|
+
`)}
|
|
6
24
|
</template>
|
|
7
25
|
`;
|
|
8
26
|
//# sourceMappingURL=template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EACH,gBAAgB,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;;eAExB,GAAG,CAAC,sBAAsB,CAAC;;UAEhC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAW;eACrC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC;;8BAEhB,gBAAgB,CAAC,KAAK;iCACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAiD,CAAC;2BAC/F,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAiD,CAAC;;;mBAG3F,YAAY,CAAC,MAAM,CAAC,iBAAiB,CAAC,mBAAmB,YAAY,CAAC,MAAM,CAAC,iBAAiB,CAAC;kBAChG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;gBAExB,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC;SACtC,CAAC;;CAET,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
2
|
import type { TableCellState, TableDataRecord } from '../../types';
|
|
3
3
|
import type { TableColumn } from '../../../table-column/base';
|
|
4
|
+
import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
|
|
4
5
|
declare global {
|
|
5
6
|
interface HTMLElementTagNameMap {
|
|
6
7
|
'nimble-table-row': TableRow;
|
|
@@ -18,6 +19,11 @@ export declare class TableRow<TDataRecord extends TableDataRecord = TableDataRec
|
|
|
18
19
|
recordId?: string;
|
|
19
20
|
dataRecord?: TDataRecord;
|
|
20
21
|
columns: TableColumn[];
|
|
22
|
+
currentActionMenuColumn?: TableColumn;
|
|
23
|
+
menuOpen: boolean;
|
|
21
24
|
get columnStates(): ColumnState[];
|
|
25
|
+
onCellActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>, column: TableColumn): void;
|
|
26
|
+
onCellActionMenuToggle(event: CustomEvent<MenuButtonToggleEventDetail>, column: TableColumn): void;
|
|
27
|
+
private emitToggleEvent;
|
|
22
28
|
private hasValidFieldNames;
|
|
23
29
|
}
|
|
@@ -11,6 +11,7 @@ export class TableRow extends FoundationElement {
|
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
13
|
this.columns = [];
|
|
14
|
+
this.menuOpen = false;
|
|
14
15
|
}
|
|
15
16
|
get columnStates() {
|
|
16
17
|
return this.columns.map(column => {
|
|
@@ -34,6 +35,23 @@ export class TableRow extends FoundationElement {
|
|
|
34
35
|
return { column, cellState };
|
|
35
36
|
});
|
|
36
37
|
}
|
|
38
|
+
onCellActionMenuBeforeToggle(event, column) {
|
|
39
|
+
this.currentActionMenuColumn = column;
|
|
40
|
+
this.emitToggleEvent('row-action-menu-beforetoggle', event.detail, column);
|
|
41
|
+
}
|
|
42
|
+
onCellActionMenuToggle(event, column) {
|
|
43
|
+
this.menuOpen = event.detail.newState;
|
|
44
|
+
this.emitToggleEvent('row-action-menu-toggle', event.detail, column);
|
|
45
|
+
}
|
|
46
|
+
emitToggleEvent(eventType, menuButtonEventDetail, column) {
|
|
47
|
+
const detail = {
|
|
48
|
+
newState: menuButtonEventDetail.newState,
|
|
49
|
+
oldState: menuButtonEventDetail.oldState,
|
|
50
|
+
recordIds: [this.recordId],
|
|
51
|
+
columnId: column.columnId
|
|
52
|
+
};
|
|
53
|
+
this.$emit(eventType, detail);
|
|
54
|
+
}
|
|
37
55
|
hasValidFieldNames(keys) {
|
|
38
56
|
return keys.every(key => key !== undefined);
|
|
39
57
|
}
|
|
@@ -47,6 +65,12 @@ __decorate([
|
|
|
47
65
|
__decorate([
|
|
48
66
|
observable
|
|
49
67
|
], TableRow.prototype, "columns", void 0);
|
|
68
|
+
__decorate([
|
|
69
|
+
observable
|
|
70
|
+
], TableRow.prototype, "currentActionMenuColumn", void 0);
|
|
71
|
+
__decorate([
|
|
72
|
+
attr({ attribute: 'menu-open', mode: 'boolean' })
|
|
73
|
+
], TableRow.prototype, "menuOpen", void 0);
|
|
50
74
|
__decorate([
|
|
51
75
|
volatile
|
|
52
76
|
], TableRow.prototype, "columnStates", null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -10,5 +10,18 @@ export const styles = css `
|
|
|
10
10
|
grid-auto-flow: column;
|
|
11
11
|
grid-auto-columns: 1fr;
|
|
12
12
|
}
|
|
13
|
+
|
|
14
|
+
nimble-table-cell {
|
|
15
|
+
--ni-private-table-cell-action-menu-display: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
nimble-table-cell[menu-open] {
|
|
19
|
+
--ni-private-table-cell-action-menu-display: block;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:host(.hover) nimble-table-cell,
|
|
23
|
+
:host(:hover) nimble-table-cell {
|
|
24
|
+
--ni-private-table-cell-action-menu-display: block;
|
|
25
|
+
}
|
|
13
26
|
`;
|
|
14
27
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;+BACA,WAAW,WAAW,mBAAmB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;+BACA,WAAW,WAAW,mBAAmB;;;;;;;;;;;;;;;;;CAiBvE,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { html, repeat } from '@microsoft/fast-element';
|
|
1
|
+
import { html, repeat, when } from '@microsoft/fast-element';
|
|
2
2
|
import { DesignSystem } from '@microsoft/fast-foundation';
|
|
3
3
|
import { TableCell } from '../cell';
|
|
4
4
|
// prettier-ignore
|
|
@@ -10,7 +10,18 @@ export const template = html `
|
|
|
10
10
|
:cellTemplate="${x => x.column.cellTemplate}"
|
|
11
11
|
:cellStyles="${x => x.column.cellStyles}"
|
|
12
12
|
:cellState="${x => x.cellState}"
|
|
13
|
+
?has-action-menu="${x => !!x.column.actionMenuSlot}"
|
|
14
|
+
action-menu-label="${x => x.column.actionMenuLabel}"
|
|
15
|
+
@cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
|
|
16
|
+
@cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x.column)}"
|
|
13
17
|
>
|
|
18
|
+
|
|
19
|
+
${when((x, c) => (c.parent.currentActionMenuColumn === x.column) && x.column.actionMenuSlot, html `
|
|
20
|
+
<slot
|
|
21
|
+
name="${x => `row-action-menu-${x.column.actionMenuSlot}`}"
|
|
22
|
+
slot="cellActionMenu"
|
|
23
|
+
></slot>
|
|
24
|
+
`)}
|
|
14
25
|
</${DesignSystem.tagFor(TableCell)}>
|
|
15
26
|
`)}
|
|
16
27
|
</template>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/row/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/row/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;UAE5B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI,CAAuB;eAClD,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;;iCAEZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY;+BAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU;8BACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;oCACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc;qCAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe;kDAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAAC,KAAiD,EAAE,CAAC,CAAC,MAAM,CAAC;4CACpH,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAiD,EAAE,CAAC,CAAC,MAAM,CAAC;;;kBAGlI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAE,CAAC,CAAC,MAAmB,CAAC,uBAAuB,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,IAAI,CAAuB;;gCAEtH,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,cAAe,EAAE;;;iBAGjE,CAAC;gBACF,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;SACrC,CAAC;;CAET,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
2
|
import { TableColumn } from '../table-column/base';
|
|
3
|
-
import type { TableRecord, TableRowState, TableValidity } from './types';
|
|
3
|
+
import type { TableActionMenuToggleEventDetail, TableRecord, TableRowState, TableValidity } from './types';
|
|
4
4
|
import { Virtualizer } from './models/virtualizer';
|
|
5
5
|
declare global {
|
|
6
6
|
interface HTMLElementTagNameMap {
|
|
@@ -24,6 +24,14 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
|
|
|
24
24
|
* @internal
|
|
25
25
|
*/
|
|
26
26
|
readonly childItems: Element[];
|
|
27
|
+
/**
|
|
28
|
+
* @internal
|
|
29
|
+
*/
|
|
30
|
+
actionMenuSlots: string[];
|
|
31
|
+
/**
|
|
32
|
+
* @internal
|
|
33
|
+
*/
|
|
34
|
+
openActionMenuRecordId?: string;
|
|
27
35
|
/**
|
|
28
36
|
* @internal
|
|
29
37
|
*/
|
|
@@ -54,6 +62,8 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
|
|
|
54
62
|
* is the string name of the property that changed on that column.
|
|
55
63
|
*/
|
|
56
64
|
handleChange(source: unknown, args: unknown): void;
|
|
65
|
+
onRowActionMenuBeforeToggle(event: CustomEvent<TableActionMenuToggleEventDetail>): void;
|
|
66
|
+
onRowActionMenuToggle(event: CustomEvent<TableActionMenuToggleEventDetail>): void;
|
|
57
67
|
protected childItemsChanged(): void;
|
|
58
68
|
protected idFieldNameChanged(_prev: string | undefined, _next: string | undefined): void;
|
|
59
69
|
protected columnsChanged(_prev: TableColumn[] | undefined, _next: TableColumn[]): void;
|
package/dist/esm/table/index.js
CHANGED
|
@@ -25,6 +25,10 @@ export class Table extends FoundationElement {
|
|
|
25
25
|
* @internal
|
|
26
26
|
*/
|
|
27
27
|
this.childItems = [];
|
|
28
|
+
/**
|
|
29
|
+
* @internal
|
|
30
|
+
*/
|
|
31
|
+
this.actionMenuSlots = [];
|
|
28
32
|
/**
|
|
29
33
|
* @internal
|
|
30
34
|
*/
|
|
@@ -90,6 +94,13 @@ export class Table extends FoundationElement {
|
|
|
90
94
|
}
|
|
91
95
|
}
|
|
92
96
|
}
|
|
97
|
+
onRowActionMenuBeforeToggle(event) {
|
|
98
|
+
this.openActionMenuRecordId = event.detail.recordIds[0];
|
|
99
|
+
this.$emit('action-menu-beforetoggle', event.detail);
|
|
100
|
+
}
|
|
101
|
+
onRowActionMenuToggle(event) {
|
|
102
|
+
this.$emit('action-menu-toggle', event.detail);
|
|
103
|
+
}
|
|
93
104
|
childItemsChanged() {
|
|
94
105
|
void this.updateColumnsFromChildItems();
|
|
95
106
|
}
|
|
@@ -103,6 +114,13 @@ export class Table extends FoundationElement {
|
|
|
103
114
|
return;
|
|
104
115
|
}
|
|
105
116
|
this.validateAndObserveColumns();
|
|
117
|
+
const slots = new Set();
|
|
118
|
+
for (const column of this.columns) {
|
|
119
|
+
if (column.actionMenuSlot) {
|
|
120
|
+
slots.add(column.actionMenuSlot);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
this.actionMenuSlots = Array.from(slots);
|
|
106
124
|
}
|
|
107
125
|
removeColumnObservers() {
|
|
108
126
|
this.columnNotifiers.forEach(notifier => {
|
|
@@ -191,6 +209,12 @@ __decorate([
|
|
|
191
209
|
__decorate([
|
|
192
210
|
observable
|
|
193
211
|
], Table.prototype, "childItems", void 0);
|
|
212
|
+
__decorate([
|
|
213
|
+
observable
|
|
214
|
+
], Table.prototype, "actionMenuSlots", void 0);
|
|
215
|
+
__decorate([
|
|
216
|
+
observable
|
|
217
|
+
], Table.prototype, "openActionMenuRecordId", void 0);
|
|
194
218
|
__decorate([
|
|
195
219
|
observable
|
|
196
220
|
], Table.prototype, "canRenderRows", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EACJ,UAAU,EACV,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAKH,WAAW,IAAI,mBAAmB,EAClC,eAAe,IAAI,uBAAuB,EAE7C,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { observable } from '@microsoft/fast-element';
|
|
3
3
|
import { Virtualizer as TanStackVirtualizer, elementScroll, observeElementOffset, observeElementRect } from '@tanstack/virtual-core';
|
|
4
|
-
import { controlHeight } from '../../theme-provider/design-tokens';
|
|
4
|
+
import { borderWidth, controlHeight } from '../../theme-provider/design-tokens';
|
|
5
5
|
/**
|
|
6
6
|
* Helper class for the nimble-table for row virtualization.
|
|
7
7
|
*
|
|
@@ -48,7 +48,8 @@ export class Virtualizer {
|
|
|
48
48
|
this.handleVirtualizerChange();
|
|
49
49
|
}
|
|
50
50
|
createVirtualizerOptions() {
|
|
51
|
-
const rowHeight = parseFloat(controlHeight.getValueFor(this.table))
|
|
51
|
+
const rowHeight = parseFloat(controlHeight.getValueFor(this.table))
|
|
52
|
+
+ 2 * parseFloat(borderWidth.getValueFor(this.table));
|
|
52
53
|
return {
|
|
53
54
|
count: this.table.tableData.length,
|
|
54
55
|
getScrollElement: () => {
|
|
@@ -75,10 +76,7 @@ export class Virtualizer {
|
|
|
75
76
|
let rowContainerYOffset = 0;
|
|
76
77
|
if (this.visibleItems.length > 0) {
|
|
77
78
|
const firstItem = this.visibleItems[0];
|
|
78
|
-
|
|
79
|
-
if (lastItem.end < this.allRowsHeight) {
|
|
80
|
-
rowContainerYOffset = firstItem.start - virtualizer.scrollOffset;
|
|
81
|
-
}
|
|
79
|
+
rowContainerYOffset = firstItem.start;
|
|
82
80
|
}
|
|
83
81
|
this.rowContainerYOffset = rowContainerYOffset;
|
|
84
82
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../../../src/table/models/virtualizer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,WAAW,IAAI,mBAAmB,EAElC,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAErB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"virtualizer.js","sourceRoot":"","sources":["../../../../src/table/models/virtualizer.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/table/styles.js
CHANGED
|
@@ -36,9 +36,7 @@ export const styles = css `
|
|
|
36
36
|
|
|
37
37
|
.table-row-container {
|
|
38
38
|
width: 100%;
|
|
39
|
-
position:
|
|
40
|
-
overflow: hidden;
|
|
41
|
-
top: 0px;
|
|
39
|
+
position: relative;
|
|
42
40
|
}
|
|
43
41
|
|
|
44
42
|
.header-container {
|
|
@@ -60,6 +58,7 @@ export const styles = css `
|
|
|
60
58
|
.row {
|
|
61
59
|
background: ${applicationBackgroundColor};
|
|
62
60
|
position: relative;
|
|
61
|
+
box-sizing: border-box;
|
|
63
62
|
}
|
|
64
63
|
|
|
65
64
|
.row::before {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,cAAc,EACjB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;gBAUL,QAAQ;iBACP,aAAa
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,cAAc,EACjB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;gBAUL,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA8BR,0BAA0B;;;;;;;;;sBAS1B,0BAA0B;;;;;;;;;;;;;;sBAc1B,cAAc;;CAEnC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;;8BAMmB,cAAc;;;;;8BAKd,cAAc;;;;8BAId,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC"}
|
|
@@ -18,7 +18,7 @@ export const template = html `
|
|
|
18
18
|
</div>
|
|
19
19
|
<div class="table-viewport" ${ref('viewport')}>
|
|
20
20
|
<div class="table-scroll" style="height: ${x => x.virtualizer.allRowsHeight}px;"></div>
|
|
21
|
-
<div class="table-row-container" role="rowgroup" style="
|
|
21
|
+
<div class="table-row-container" role="rowgroup" style="top: ${x => `${x.virtualizer.rowContainerYOffset}px;`}">
|
|
22
22
|
${when(x => x.columns.length > 0 && x.canRenderRows, html `
|
|
23
23
|
${repeat(x => x.virtualizer.visibleItems, html `
|
|
24
24
|
<${DesignSystem.tagFor(TableRow)}
|
|
@@ -26,8 +26,18 @@ export const template = html `
|
|
|
26
26
|
record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
|
|
27
27
|
:dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
|
|
28
28
|
:columns="${(_, c) => c.parent.columns}"
|
|
29
|
+
@row-action-menu-beforetoggle="${(_, c) => c.parent.onRowActionMenuBeforeToggle(c.event)}"
|
|
30
|
+
@row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
|
|
29
31
|
style="height: ${x => x.size}px;"
|
|
30
32
|
>
|
|
33
|
+
${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
|
|
34
|
+
${repeat((_, c) => c.parent.actionMenuSlots, html `
|
|
35
|
+
<slot
|
|
36
|
+
name="${x => x}"
|
|
37
|
+
slot="${x => `row-action-menu-${x}`}">
|
|
38
|
+
</slot>
|
|
39
|
+
`)}
|
|
40
|
+
`)}
|
|
31
41
|
</${DesignSystem.tagFor(TableRow)}>
|
|
32
42
|
`)}
|
|
33
43
|
`)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,MAAM,EACN,IAAI,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,MAAM,EACN,IAAI,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAI5C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAO;6BACN,QAAQ,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;;;;sBAI/D,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAa;2BACnC,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;0CACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;4BACzB,YAAY,CAAC,MAAM,CAAC,WAAW,CAAC;qBACvC,CAAC;yEACmD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,0BAA0B;;;0CAG5E,GAAG,CAAC,UAAU,CAAC;2DACE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,aAAa;+EACZ,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,mBAAmB,KAAK;sBACvG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAO;0BAC1D,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,EAAE,IAAI,CAAoB;+BAC3D,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;;6CAEf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;+CACvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM;4CAChD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO;iEACL,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,CAAC,KAAsD,CAAC;2DAC9G,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAsD,CAAC;iDAC5G,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;8BAE9B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAE,CAAC,CAAC,MAAgB,CAAC,sBAAsB,KAAM,CAAC,CAAC,MAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,IAAI,CAAoB;kCAC9H,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAE,CAAC,CAAC,MAAgB,CAAC,eAAe,EAAE,IAAI,CAAe;;gDAE3D,CAAC,CAAC,EAAE,CAAC,CAAC;gDACN,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,EAAE;;iCAE1C,CAAC;6BACL,CAAC;gCACE,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;yBACpC,CAAC;qBACL,CAAC;;;;;CAKrB,CAAC"}
|
|
@@ -43,3 +43,9 @@ export interface TableRowState<TData extends TableRecord = TableRecord> {
|
|
|
43
43
|
record: TData;
|
|
44
44
|
id: string;
|
|
45
45
|
}
|
|
46
|
+
export interface TableActionMenuToggleEventDetail {
|
|
47
|
+
newState: boolean;
|
|
48
|
+
oldState: boolean;
|
|
49
|
+
recordIds: string[];
|
|
50
|
+
columnId?: string;
|
|
51
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ElementStyles, ViewTemplate } from '@microsoft/fast-element';
|
|
1
|
+
import type { ElementStyles, ViewTemplate } from '@microsoft/fast-element';
|
|
2
2
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
3
3
|
import type { TableCellRecord, TableCellState, TableFieldName } from '../../table/types';
|
|
4
4
|
/**
|
|
@@ -6,6 +6,8 @@ import type { TableCellRecord, TableCellState, TableFieldName } from '../../tabl
|
|
|
6
6
|
*/
|
|
7
7
|
export declare abstract class TableColumn<TCellRecord extends TableCellRecord = TableCellRecord, TColumnConfig = unknown> extends FoundationElement {
|
|
8
8
|
columnId?: string;
|
|
9
|
+
actionMenuSlot?: string;
|
|
10
|
+
actionMenuLabel?: string;
|
|
9
11
|
/**
|
|
10
12
|
* The template to use to render the cell content for the column
|
|
11
13
|
*/
|
|
@@ -14,4 +14,10 @@ export class TableColumn extends FoundationElement {
|
|
|
14
14
|
__decorate([
|
|
15
15
|
attr({ attribute: 'column-id' })
|
|
16
16
|
], TableColumn.prototype, "columnId", void 0);
|
|
17
|
+
__decorate([
|
|
18
|
+
attr({ attribute: 'action-menu-slot' })
|
|
19
|
+
], TableColumn.prototype, "actionMenuSlot", void 0);
|
|
20
|
+
__decorate([
|
|
21
|
+
attr({ attribute: 'action-menu-label' })
|
|
22
|
+
], TableColumn.prototype, "actionMenuLabel", void 0);
|
|
17
23
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/base/index.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table-column/base/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAOzD;;GAEG;AACH,MAAM,OAAgB,WAGpB,SAAQ,iBAAiB;IA2BP,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC7D,CAAC;CAaJ;AA1CG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CACR;AAGzB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;mDACT;AAG/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;oDACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "18.
|
|
3
|
+
"version": "18.5.0",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
|