@vscode-elements/elements 1.14.0 → 1.14.1-pre.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/custom-elements.json +445 -34
- package/dist/bundled.js +217 -104
- package/dist/includes/VscElement.d.ts.map +1 -1
- package/dist/includes/VscElement.js +1 -1
- package/dist/includes/VscElement.js.map +1 -1
- package/dist/includes/form-button-widget/LabelledCheckboxOrRadio.d.ts.map +1 -1
- package/dist/includes/uniqueId.d.ts.map +1 -1
- package/dist/includes/vscode-select/helpers.d.ts.map +1 -1
- package/dist/includes/vscode-select/styles.d.ts.map +1 -1
- package/dist/includes/vscode-select/styles.js +18 -0
- package/dist/includes/vscode-select/styles.js.map +1 -1
- package/dist/includes/vscode-select/vscode-select-base.d.ts +6 -1
- package/dist/includes/vscode-select/vscode-select-base.d.ts.map +1 -1
- package/dist/includes/vscode-select/vscode-select-base.js +94 -36
- package/dist/includes/vscode-select/vscode-select-base.js.map +1 -1
- package/dist/main.d.ts +2 -0
- package/dist/main.d.ts.map +1 -1
- package/dist/main.js +2 -0
- package/dist/main.js.map +1 -1
- package/dist/vscode-checkbox/vscode-checkbox.d.ts +0 -2
- package/dist/vscode-checkbox/vscode-checkbox.d.ts.map +1 -1
- package/dist/vscode-checkbox/vscode-checkbox.js +0 -5
- package/dist/vscode-checkbox/vscode-checkbox.js.map +1 -1
- package/dist/vscode-radio/vscode-radio.d.ts.map +1 -1
- package/dist/vscode-single-select/vscode-single-select.d.ts.map +1 -1
- package/dist/vscode-single-select/vscode-single-select.js +33 -23
- package/dist/vscode-single-select/vscode-single-select.js.map +1 -1
- package/dist/vscode-split-layout/vscode-split-layout.d.ts.map +1 -1
- package/dist/vscode-table/helpers.d.ts.map +1 -1
- package/dist/vscode-table/vscode-table.d.ts +1 -0
- package/dist/vscode-table/vscode-table.d.ts.map +1 -1
- package/dist/vscode-table/vscode-table.js +18 -14
- package/dist/vscode-table/vscode-table.js.map +1 -1
- package/dist/vscode-toolbar-button/index.d.ts +2 -0
- package/dist/vscode-toolbar-button/index.d.ts.map +1 -0
- package/dist/vscode-toolbar-button/index.js +2 -0
- package/dist/vscode-toolbar-button/index.js.map +1 -0
- package/dist/vscode-toolbar-button/vscode-toolbar-button.d.ts +26 -0
- package/dist/vscode-toolbar-button/vscode-toolbar-button.d.ts.map +1 -0
- package/dist/vscode-toolbar-button/vscode-toolbar-button.js +83 -0
- package/dist/vscode-toolbar-button/vscode-toolbar-button.js.map +1 -0
- package/dist/vscode-toolbar-button/vscode-toolbar-button.styles.d.ts +4 -0
- package/dist/vscode-toolbar-button/vscode-toolbar-button.styles.d.ts.map +1 -0
- package/dist/vscode-toolbar-button/vscode-toolbar-button.styles.js +77 -0
- package/dist/vscode-toolbar-button/vscode-toolbar-button.styles.js.map +1 -0
- package/dist/vscode-toolbar-container/index.d.ts +2 -0
- package/dist/vscode-toolbar-container/index.d.ts.map +1 -0
- package/dist/vscode-toolbar-container/index.js +2 -0
- package/dist/vscode-toolbar-container/index.js.map +1 -0
- package/dist/vscode-toolbar-container/vscode-toolbar-container.d.ts +17 -0
- package/dist/vscode-toolbar-container/vscode-toolbar-container.d.ts.map +1 -0
- package/dist/vscode-toolbar-container/vscode-toolbar-container.js +25 -0
- package/dist/vscode-toolbar-container/vscode-toolbar-container.js.map +1 -0
- package/dist/vscode-toolbar-container/vscode-toolbar-container.styles.d.ts +4 -0
- package/dist/vscode-toolbar-container/vscode-toolbar-container.styles.d.ts.map +1 -0
- package/dist/vscode-toolbar-container/vscode-toolbar-container.styles.js +14 -0
- package/dist/vscode-toolbar-container/vscode-toolbar-container.styles.js.map +1 -0
- package/package.json +12 -18
- package/vscode.html-custom-data.json +19 -0
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import { VscElement } from '../includes/VscElement.js';
|
|
3
|
+
import '../vscode-icon/vscode-icon.js';
|
|
4
|
+
/**
|
|
5
|
+
* Toolbar button
|
|
6
|
+
*
|
|
7
|
+
* @tag vscode-toolbar-button
|
|
8
|
+
*/
|
|
9
|
+
export declare class VscodeToolbarButton extends VscElement {
|
|
10
|
+
static styles: import("lit").CSSResultGroup;
|
|
11
|
+
icon: string;
|
|
12
|
+
label: string | undefined;
|
|
13
|
+
toggleable: boolean;
|
|
14
|
+
checked: boolean;
|
|
15
|
+
private _isSlotEmpty;
|
|
16
|
+
private _assignedNodes;
|
|
17
|
+
private _handleSlotChange;
|
|
18
|
+
private _handleButtonClick;
|
|
19
|
+
render(): TemplateResult;
|
|
20
|
+
}
|
|
21
|
+
declare global {
|
|
22
|
+
interface HTMLElementTagNameMap {
|
|
23
|
+
'vscode-toolbar-button': VscodeToolbarButton;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=vscode-toolbar-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vscode-toolbar-button.d.ts","sourceRoot":"","sources":["../../src/vscode-toolbar-button/vscode-toolbar-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAC,MAAM,KAAK,CAAC;AAElD,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,+BAA+B,CAAC;AAKvC;;;;GAIG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,+BAAU;IAGhC,IAAI,SAAM;IAGV,KAAK,EAAE,MAAM,GAAG,SAAS,CAAa;IAGtC,UAAU,UAAS;IAGnB,OAAO,UAAS;IAGhB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,cAAc,CAAmB;IAEzC,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAUjB,MAAM,IAAI,cAAc;CAsBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, nothing } from 'lit';
|
|
8
|
+
import { property, queryAssignedNodes, state } from 'lit/decorators.js';
|
|
9
|
+
import { customElement, VscElement } from '../includes/VscElement.js';
|
|
10
|
+
import '../vscode-icon/vscode-icon.js';
|
|
11
|
+
import styles from './vscode-toolbar-button.styles.js';
|
|
12
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
13
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
14
|
+
/**
|
|
15
|
+
* Toolbar button
|
|
16
|
+
*
|
|
17
|
+
* @tag vscode-toolbar-button
|
|
18
|
+
*/
|
|
19
|
+
let VscodeToolbarButton = class VscodeToolbarButton extends VscElement {
|
|
20
|
+
constructor() {
|
|
21
|
+
super(...arguments);
|
|
22
|
+
this.icon = '';
|
|
23
|
+
this.label = undefined;
|
|
24
|
+
this.toggleable = false;
|
|
25
|
+
this.checked = false;
|
|
26
|
+
this._isSlotEmpty = true;
|
|
27
|
+
}
|
|
28
|
+
_handleSlotChange() {
|
|
29
|
+
this._isSlotEmpty = !((this._assignedNodes?.length ?? 0) > 0);
|
|
30
|
+
}
|
|
31
|
+
_handleButtonClick() {
|
|
32
|
+
if (!this.toggleable) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
this.checked = !this.checked;
|
|
36
|
+
this.dispatchEvent(new Event('change'));
|
|
37
|
+
}
|
|
38
|
+
render() {
|
|
39
|
+
const checked = this.checked ? 'true' : 'false';
|
|
40
|
+
return html `
|
|
41
|
+
<button
|
|
42
|
+
type="button"
|
|
43
|
+
aria-label=${ifDefined(this.label)}
|
|
44
|
+
role=${ifDefined(this.toggleable ? 'switch' : undefined)}
|
|
45
|
+
aria-checked=${ifDefined(this.toggleable ? checked : undefined)}
|
|
46
|
+
class=${classMap({ checked: this.toggleable && this.checked })}
|
|
47
|
+
@click=${this._handleButtonClick}
|
|
48
|
+
>
|
|
49
|
+
${this.icon
|
|
50
|
+
? html `<vscode-icon name=${this.icon}></vscode-icon>`
|
|
51
|
+
: nothing}
|
|
52
|
+
<slot
|
|
53
|
+
@slotchange=${this._handleSlotChange}
|
|
54
|
+
class=${classMap({ empty: this._isSlotEmpty, textOnly: !this.icon })}
|
|
55
|
+
></slot>
|
|
56
|
+
</button>
|
|
57
|
+
`;
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
VscodeToolbarButton.styles = styles;
|
|
61
|
+
__decorate([
|
|
62
|
+
property({ reflect: true })
|
|
63
|
+
], VscodeToolbarButton.prototype, "icon", void 0);
|
|
64
|
+
__decorate([
|
|
65
|
+
property()
|
|
66
|
+
], VscodeToolbarButton.prototype, "label", void 0);
|
|
67
|
+
__decorate([
|
|
68
|
+
property({ type: Boolean, reflect: true })
|
|
69
|
+
], VscodeToolbarButton.prototype, "toggleable", void 0);
|
|
70
|
+
__decorate([
|
|
71
|
+
property({ type: Boolean, reflect: true })
|
|
72
|
+
], VscodeToolbarButton.prototype, "checked", void 0);
|
|
73
|
+
__decorate([
|
|
74
|
+
state()
|
|
75
|
+
], VscodeToolbarButton.prototype, "_isSlotEmpty", void 0);
|
|
76
|
+
__decorate([
|
|
77
|
+
queryAssignedNodes()
|
|
78
|
+
], VscodeToolbarButton.prototype, "_assignedNodes", void 0);
|
|
79
|
+
VscodeToolbarButton = __decorate([
|
|
80
|
+
customElement('vscode-toolbar-button')
|
|
81
|
+
], VscodeToolbarButton);
|
|
82
|
+
export { VscodeToolbarButton };
|
|
83
|
+
//# sourceMappingURL=vscode-toolbar-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vscode-toolbar-button.js","sourceRoot":"","sources":["../../src/vscode-toolbar-button/vscode-toolbar-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,+BAA+B,CAAC;AACvC,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAEvD;;;;GAIG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAIL,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAuB,SAAS,CAAC;QAGtC,eAAU,GAAG,KAAK,CAAC;QAGnB,YAAO,GAAG,KAAK,CAAC;QAGR,iBAAY,GAAG,IAAI,CAAC;IAyC9B,CAAC;IApCS,iBAAiB;QACvB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAChE,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAE7B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAEhD,OAAO,IAAI,CAAA;;;qBAGM,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;eAC3B,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;uBACzC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;gBACvD,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,EAAC,CAAC;iBACnD,IAAI,CAAC,kBAAkB;;UAE9B,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,IAAI,iBAAiB;YACrD,CAAC,CAAC,OAAO;;wBAEK,IAAI,CAAC,iBAAiB;kBAC5B,QAAQ,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,EAAC,CAAC;;;KAGvE,CAAC;IACJ,CAAC;;AAvDe,0BAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDAChB;AAGV;IADC,QAAQ,EAAE;kDAC2B;AAGtC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uDACtB;AAGnB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDACzB;AAGR;IADP,KAAK,EAAE;yDACoB;AAGpB;IADP,kBAAkB,EAAE;2DACoB;AAnB9B,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAyD/B","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property, queryAssignedNodes, state} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport '../vscode-icon/vscode-icon.js';\nimport styles from './vscode-toolbar-button.styles.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/**\n * Toolbar button\n *\n * @tag vscode-toolbar-button\n */\n@customElement('vscode-toolbar-button')\nexport class VscodeToolbarButton extends VscElement {\n static override styles = styles;\n\n @property({reflect: true})\n icon = '';\n\n @property()\n label: string | undefined = undefined;\n\n @property({type: Boolean, reflect: true})\n toggleable = false;\n\n @property({type: Boolean, reflect: true})\n checked = false;\n\n @state()\n private _isSlotEmpty = true;\n\n @queryAssignedNodes()\n private _assignedNodes!: NodeList | null;\n\n private _handleSlotChange() {\n this._isSlotEmpty = !((this._assignedNodes?.length ?? 0) > 0);\n }\n\n private _handleButtonClick() {\n if (!this.toggleable) {\n return;\n }\n\n this.checked = !this.checked;\n\n this.dispatchEvent(new Event('change'));\n }\n\n override render(): TemplateResult {\n const checked = this.checked ? 'true' : 'false';\n\n return html`\n <button\n type=\"button\"\n aria-label=${ifDefined(this.label)}\n role=${ifDefined(this.toggleable ? 'switch' : undefined)}\n aria-checked=${ifDefined(this.toggleable ? checked : undefined)}\n class=${classMap({checked: this.toggleable && this.checked})}\n @click=${this._handleButtonClick}\n >\n ${this.icon\n ? html`<vscode-icon name=${this.icon}></vscode-icon>`\n : nothing}\n <slot\n @slotchange=${this._handleSlotChange}\n class=${classMap({empty: this._isSlotEmpty, textOnly: !this.icon})}\n ></slot>\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-toolbar-button': VscodeToolbarButton;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vscode-toolbar-button.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-toolbar-button/vscode-toolbar-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cAwEb,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
import defaultStyles from '../includes/default.styles.js';
|
|
3
|
+
const styles = [
|
|
4
|
+
defaultStyles,
|
|
5
|
+
css `
|
|
6
|
+
:host {
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
button {
|
|
11
|
+
align-items: center;
|
|
12
|
+
background-color: transparent;
|
|
13
|
+
border: 0;
|
|
14
|
+
border-radius: 5px;
|
|
15
|
+
color: var(--vscode-foreground, #cccccc);
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
display: flex;
|
|
18
|
+
outline-offset: -1px;
|
|
19
|
+
outline-width: 1px;
|
|
20
|
+
padding: 0;
|
|
21
|
+
user-select: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
button:focus-visible {
|
|
25
|
+
outline-color: var(--vscode-focusBorder, #0078d4);
|
|
26
|
+
outline-style: solid;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
button:hover {
|
|
30
|
+
background-color: var(
|
|
31
|
+
--vscode-toolbar-hoverBackground,
|
|
32
|
+
rgba(90, 93, 94, 0.31)
|
|
33
|
+
);
|
|
34
|
+
outline-style: dashed;
|
|
35
|
+
outline-color: var(--vscode-toolbar-hoverOutline, transparent);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
button:active {
|
|
39
|
+
background-color: var(
|
|
40
|
+
--vscode-toolbar-activeBackground,
|
|
41
|
+
rgba(99, 102, 103, 0.31)
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
button.checked {
|
|
46
|
+
background-color: var(
|
|
47
|
+
--vscode-inputOption-activeBackground,
|
|
48
|
+
rgba(36, 137, 219, 0.51)
|
|
49
|
+
);
|
|
50
|
+
outline-color: var(--vscode-inputOption-activeBorder, #2488db);
|
|
51
|
+
outline-style: solid;
|
|
52
|
+
color: var(--vscode-inputOption-activeForeground, #ffffff);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
button.checked vscode-icon {
|
|
56
|
+
color: var(--vscode-inputOption-activeForeground, #ffffff);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
vscode-icon {
|
|
60
|
+
display: block;
|
|
61
|
+
padding: 3px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
slot:not(.empty) {
|
|
65
|
+
align-items: center;
|
|
66
|
+
display: flex;
|
|
67
|
+
height: 22px;
|
|
68
|
+
padding: 0 5px 0 2px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
slot.textOnly:not(.empty) {
|
|
72
|
+
padding: 0 5px;
|
|
73
|
+
}
|
|
74
|
+
`,
|
|
75
|
+
];
|
|
76
|
+
export default styles;
|
|
77
|
+
//# sourceMappingURL=vscode-toolbar-button.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vscode-toolbar-button.styles.js","sourceRoot":"","sources":["../../src/vscode-toolbar-button/vscode-toolbar-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n defaultStyles,\n css`\n :host {\n display: inline-flex;\n }\n\n button {\n align-items: center;\n background-color: transparent;\n border: 0;\n border-radius: 5px;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n outline-offset: -1px;\n outline-width: 1px;\n padding: 0;\n user-select: none;\n }\n\n button:focus-visible {\n outline-color: var(--vscode-focusBorder, #0078d4);\n outline-style: solid;\n }\n\n button:hover {\n background-color: var(\n --vscode-toolbar-hoverBackground,\n rgba(90, 93, 94, 0.31)\n );\n outline-style: dashed;\n outline-color: var(--vscode-toolbar-hoverOutline, transparent);\n }\n\n button:active {\n background-color: var(\n --vscode-toolbar-activeBackground,\n rgba(99, 102, 103, 0.31)\n );\n }\n\n button.checked {\n background-color: var(\n --vscode-inputOption-activeBackground,\n rgba(36, 137, 219, 0.51)\n );\n outline-color: var(--vscode-inputOption-activeBorder, #2488db);\n outline-style: solid;\n color: var(--vscode-inputOption-activeForeground, #ffffff);\n }\n\n button.checked vscode-icon {\n color: var(--vscode-inputOption-activeForeground, #ffffff);\n }\n\n vscode-icon {\n display: block;\n padding: 3px;\n }\n\n slot:not(.empty) {\n align-items: center;\n display: flex;\n height: 22px;\n padding: 0 5px 0 2px;\n }\n\n slot.textOnly:not(.empty) {\n padding: 0 5px;\n }\n `,\n];\n\nexport default styles;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vscode-toolbar-container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,+BAA+B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/vscode-toolbar-container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,sBAAsB,EAAC,MAAM,+BAA+B,CAAC","sourcesContent":["export {VscodeToolbarContainer} from './vscode-toolbar-container.js';\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import { VscElement } from '../includes/VscElement.js';
|
|
3
|
+
/**
|
|
4
|
+
* Toolbar container
|
|
5
|
+
*
|
|
6
|
+
* @tag vscode-toolbar-container
|
|
7
|
+
*/
|
|
8
|
+
export declare class VscodeToolbarContainer extends VscElement {
|
|
9
|
+
static styles: import("lit").CSSResultGroup;
|
|
10
|
+
render(): TemplateResult;
|
|
11
|
+
}
|
|
12
|
+
declare global {
|
|
13
|
+
interface HTMLElementTagNameMap {
|
|
14
|
+
'vscode-toolbar-container': VscodeToolbarContainer;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=vscode-toolbar-container.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vscode-toolbar-container.d.ts","sourceRoot":"","sources":["../../src/vscode-toolbar-container/vscode-toolbar-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAC,MAAM,KAAK,CAAC;AACzC,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGpE;;;;GAIG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD,OAAgB,MAAM,+BAAU;IAEvB,MAAM,IAAI,cAAc;CAGlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,sBAAsB,CAAC;KACpD;CACF"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html } from 'lit';
|
|
8
|
+
import { customElement, VscElement } from '../includes/VscElement.js';
|
|
9
|
+
import styles from './vscode-toolbar-container.styles.js';
|
|
10
|
+
/**
|
|
11
|
+
* Toolbar container
|
|
12
|
+
*
|
|
13
|
+
* @tag vscode-toolbar-container
|
|
14
|
+
*/
|
|
15
|
+
let VscodeToolbarContainer = class VscodeToolbarContainer extends VscElement {
|
|
16
|
+
render() {
|
|
17
|
+
return html ` <slot></slot> `;
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
VscodeToolbarContainer.styles = styles;
|
|
21
|
+
VscodeToolbarContainer = __decorate([
|
|
22
|
+
customElement('vscode-toolbar-container')
|
|
23
|
+
], VscodeToolbarContainer);
|
|
24
|
+
export { VscodeToolbarContainer };
|
|
25
|
+
//# sourceMappingURL=vscode-toolbar-container.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vscode-toolbar-container.js","sourceRoot":"","sources":["../../src/vscode-toolbar-container/vscode-toolbar-container.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,MAAM,MAAM,sCAAsC,CAAC;AAE1D;;;;GAIG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAG3C,MAAM;QACb,OAAO,IAAI,CAAA,iBAAiB,CAAC;IAC/B,CAAC;;AAJe,6BAAM,GAAG,MAAM,AAAT,CAAU;AADrB,sBAAsB;IADlC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,sBAAsB,CAMlC","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-toolbar-container.styles.js';\n\n/**\n * Toolbar container\n *\n * @tag vscode-toolbar-container\n */\n@customElement('vscode-toolbar-container')\nexport class VscodeToolbarContainer extends VscElement {\n static override styles = styles;\n\n override render(): TemplateResult {\n return html` <slot></slot> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-toolbar-container': VscodeToolbarContainer;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vscode-toolbar-container.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-toolbar-container/vscode-toolbar-container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cASb,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
import defaultStyles from '../includes/default.styles.js';
|
|
3
|
+
const styles = [
|
|
4
|
+
defaultStyles,
|
|
5
|
+
css `
|
|
6
|
+
:host {
|
|
7
|
+
gap: 4px;
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
}
|
|
11
|
+
`,
|
|
12
|
+
];
|
|
13
|
+
export default styles;
|
|
14
|
+
//# sourceMappingURL=vscode-toolbar-container.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vscode-toolbar-container.styles.js","sourceRoot":"","sources":["../../src/vscode-toolbar-container/vscode-toolbar-container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;GAMF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n defaultStyles,\n css`\n :host {\n gap: 4px;\n display: flex;\n align-items: center;\n }\n `,\n];\n\nexport default styles;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vscode-elements/elements",
|
|
3
|
-
"version": "1.14.
|
|
3
|
+
"version": "1.14.1-pre.1",
|
|
4
4
|
"description": "Webcomponents for creating Visual Studio Code extensions",
|
|
5
5
|
"main": "dist/main.js",
|
|
6
6
|
"module": "dist/main.js",
|
|
@@ -24,10 +24,10 @@
|
|
|
24
24
|
"prettier:fix": "prettier . --write",
|
|
25
25
|
"analyze": "wireit",
|
|
26
26
|
"serve": "wireit",
|
|
27
|
-
"start": "
|
|
27
|
+
"start": "concurrently --raw \"tsc --watch --preserveWatchOutput\" \"wds --watch\"",
|
|
28
28
|
"test": "wireit",
|
|
29
29
|
"test:coverage": "wireit",
|
|
30
|
-
"test:watch": "wtr --watch",
|
|
30
|
+
"test:watch": "concurrently --raw \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
|
|
31
31
|
"checksize": "npm run build && cat dist/bundled.js | gzip -9 | wc -c",
|
|
32
32
|
"icons": "node scripts/generateIconList.js",
|
|
33
33
|
"vscode-data": "wireit"
|
|
@@ -76,13 +76,6 @@
|
|
|
76
76
|
"command": "wds --watch",
|
|
77
77
|
"service": true
|
|
78
78
|
},
|
|
79
|
-
"start": {
|
|
80
|
-
"command": "wds --watch",
|
|
81
|
-
"dependencies": [
|
|
82
|
-
"build:watch"
|
|
83
|
-
],
|
|
84
|
-
"service": true
|
|
85
|
-
},
|
|
86
79
|
"test": {
|
|
87
80
|
"command": "wtr",
|
|
88
81
|
"dependencies": [
|
|
@@ -143,17 +136,17 @@
|
|
|
143
136
|
"@bendera/wds-plugin-directory-index": "^0.4.0",
|
|
144
137
|
"@custom-elements-manifest/analyzer": "^0.10.4",
|
|
145
138
|
"@eslint/eslintrc": "^3.3.0",
|
|
146
|
-
"@eslint/js": "^9.
|
|
139
|
+
"@eslint/js": "^9.22.0",
|
|
147
140
|
"@esm-bundle/chai": "^4.3.4-fix.0",
|
|
148
141
|
"@open-wc/testing": "^4.0.0",
|
|
149
142
|
"@rollup/plugin-node-resolve": "^16.0.0",
|
|
150
143
|
"@rollup/plugin-replace": "^6.0.2",
|
|
151
144
|
"@rollup/plugin-terser": "^0.4.4",
|
|
152
|
-
"@types/chai": "
|
|
145
|
+
"@types/chai": "4.3.20",
|
|
153
146
|
"@types/mocha": "^10.0.10",
|
|
154
|
-
"@types/node": "^22.13.
|
|
155
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
156
|
-
"@typescript-eslint/parser": "^8.
|
|
147
|
+
"@types/node": "^22.13.10",
|
|
148
|
+
"@typescript-eslint/eslint-plugin": "^8.26.0",
|
|
149
|
+
"@typescript-eslint/parser": "^8.26.0",
|
|
157
150
|
"@vscode-elements/webview-playground": "^1.6.0",
|
|
158
151
|
"@vscode/codicons": "^0.0.36",
|
|
159
152
|
"@web/dev-server": "^0.4.6",
|
|
@@ -166,21 +159,22 @@
|
|
|
166
159
|
"@web/test-runner-playwright": "^0.11.0",
|
|
167
160
|
"@webcomponents/webcomponentsjs": "^2.8.0",
|
|
168
161
|
"chokidar": "^4.0.3",
|
|
162
|
+
"concurrently": "^9.1.2",
|
|
169
163
|
"custom-element-vs-code-integration": "^1.5.0",
|
|
170
164
|
"deepmerge": "^4.3.1",
|
|
171
165
|
"dotenv": "^16.4.7",
|
|
172
166
|
"eslint-plugin-lit": "^1.15.0",
|
|
173
167
|
"eslint-plugin-wc": "^2.2.1",
|
|
174
168
|
"mocha": "^11.1.0",
|
|
175
|
-
"prettier": "^3.5.
|
|
169
|
+
"prettier": "^3.5.3",
|
|
176
170
|
"rimraf": "^6.0.1",
|
|
177
|
-
"rollup": "^4.
|
|
171
|
+
"rollup": "^4.35.0",
|
|
178
172
|
"rollup-plugin-filesize": "^10.0.0",
|
|
179
173
|
"rollup-plugin-visualizer": "^5.14.0",
|
|
180
174
|
"semver": "^7.7.1",
|
|
181
175
|
"sinon": "^19.0.2",
|
|
182
176
|
"ts-lit-plugin": "^2.0.2",
|
|
183
|
-
"typescript": "^5.
|
|
177
|
+
"typescript": "^5.8.2",
|
|
184
178
|
"wireit": "^0.14.11"
|
|
185
179
|
}
|
|
186
180
|
}
|
|
@@ -268,6 +268,7 @@
|
|
|
268
268
|
{ "name": "required", "values": [] },
|
|
269
269
|
{ "name": "value", "values": [{ "name": "string[]" }] },
|
|
270
270
|
{ "name": "options", "values": [{ "name": "Option[]" }] },
|
|
271
|
+
{ "name": "creatable", "values": [] },
|
|
271
272
|
{
|
|
272
273
|
"name": "combobox",
|
|
273
274
|
"description": "Options can be filtered by typing into a text input field.",
|
|
@@ -393,6 +394,7 @@
|
|
|
393
394
|
{ "name": "value", "values": [] },
|
|
394
395
|
{ "name": "required", "values": [] },
|
|
395
396
|
{ "name": "options", "values": [{ "name": "Option[]" }] },
|
|
397
|
+
{ "name": "creatable", "values": [] },
|
|
396
398
|
{
|
|
397
399
|
"name": "combobox",
|
|
398
400
|
"description": "Options can be filtered by typing into a text input field.",
|
|
@@ -662,6 +664,23 @@
|
|
|
662
664
|
],
|
|
663
665
|
"references": []
|
|
664
666
|
},
|
|
667
|
+
{
|
|
668
|
+
"name": "vscode-toolbar-button",
|
|
669
|
+
"description": "Toolbar button\n---\n\n\n### **Events:**\n - **change**",
|
|
670
|
+
"attributes": [
|
|
671
|
+
{ "name": "icon", "values": [] },
|
|
672
|
+
{ "name": "label", "values": [] },
|
|
673
|
+
{ "name": "toggleable", "values": [] },
|
|
674
|
+
{ "name": "checked", "values": [] }
|
|
675
|
+
],
|
|
676
|
+
"references": []
|
|
677
|
+
},
|
|
678
|
+
{
|
|
679
|
+
"name": "vscode-toolbar-container",
|
|
680
|
+
"description": "Toolbar container\n---\n",
|
|
681
|
+
"attributes": [],
|
|
682
|
+
"references": []
|
|
683
|
+
},
|
|
665
684
|
{
|
|
666
685
|
"name": "vscode-tree",
|
|
667
686
|
"description": "\n---\n\n\n### **Events:**\n - **vsc-run-action** - Dispatched when an action icon is clicked.\n- **vsc-select** - Dispatched when an item is selected.\n- **vsc-tree-select** - Dispatched when an item is selected.\n- **vsc-tree-action** - Dispatched when an action icon is clicked.\n\n### **Methods:**\n - **closeAll(): _void_** - Closes all opened tree items recursively.\n- **deselectAll()** - Deselects all selected items.\n- **getItemByPath(path: _number[]_): __** - Returns a reference to a TreeItem object by path.\n\n### **CSS Properties:**\n - **--vscode-focusBorder** - undefined _(default: undefined)_\n- **--vscode-font-family** - undefined _(default: undefined)_\n- **--vscode-font-size** - undefined _(default: undefined)_\n- **--vscode-font-weight** - undefined _(default: undefined)_\n- **--vscode-list-hoverForeground** - undefined _(default: undefined)_\n- **--vscode-list-hoverBackground** - undefined _(default: undefined)_\n- **--vscode-list-inactiveSelectionBackground** - undefined _(default: undefined)_\n- **--vscode-list-inactiveSelectionForeground** - undefined _(default: undefined)_\n- **--vscode-list-activeSelectionBackground** - undefined _(default: undefined)_\n- **--vscode-list-activeSelectionForeground** - undefined _(default: undefined)_\n- **--vscode-list-inactiveSelectionIconForeground** - undefined _(default: undefined)_\n- **--vscode-list-inactiveFocusBackground** - undefined _(default: undefined)_\n- **--vscode-list-inactiveFocusOutline** - undefined _(default: undefined)_\n- **--vscode-list-focusOutline** - undefined _(default: undefined)_\n- **--vscode-tree-inactiveIndentGuidesStroke** - undefined _(default: undefined)_\n- **--vscode-tree-indentGuidesStroke** - undefined _(default: undefined)_\n\n### **CSS Parts:**\n - **text-content** - undefined\n- **description** - undefined\n- **counter-badge-decoration** - undefined\n- **filled-circle-decoration** - undefined\n- **caption-decoration** - undefined\n- **decorations** - Container of decorations",
|