@vscode-elements/elements 1.6.2 → 1.6.3-pre.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/custom-elements.json +195 -37
- package/dist/bundled.js +45 -12
- 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/vscode-select/styles.d.ts.map +1 -1
- package/dist/includes/vscode-select/styles.js +12 -0
- package/dist/includes/vscode-select/styles.js.map +1 -1
- package/dist/includes/vscode-select/vscode-select-base.d.ts +4 -0
- package/dist/includes/vscode-select/vscode-select-base.d.ts.map +1 -1
- package/dist/includes/vscode-select/vscode-select-base.js +9 -1
- package/dist/includes/vscode-select/vscode-select-base.js.map +1 -1
- package/dist/vscode-button/vscode-button.d.ts +16 -0
- package/dist/vscode-button/vscode-button.d.ts.map +1 -1
- package/dist/vscode-button/vscode-button.js +33 -1
- package/dist/vscode-button/vscode-button.js.map +1 -1
- package/dist/vscode-button/vscode-button.styles.d.ts.map +1 -1
- package/dist/vscode-button/vscode-button.styles.js +17 -2
- package/dist/vscode-button/vscode-button.styles.js.map +1 -1
- package/dist/vscode-collapsible/vscode-collapsible.d.ts +2 -0
- package/dist/vscode-collapsible/vscode-collapsible.d.ts.map +1 -1
- package/dist/vscode-collapsible/vscode-collapsible.js +4 -4
- package/dist/vscode-collapsible/vscode-collapsible.js.map +1 -1
- package/package.json +2 -2
- package/vscode.css-custom-data.json +4 -0
- package/vscode.html-custom-data.json +33 -3
|
@@ -34,10 +34,26 @@ export declare class VscodeButton extends VscElement {
|
|
|
34
34
|
* A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label
|
|
35
35
|
*/
|
|
36
36
|
icon: string;
|
|
37
|
+
/**
|
|
38
|
+
* Spin property for the icon
|
|
39
|
+
*/
|
|
40
|
+
iconSpin?: boolean | undefined;
|
|
41
|
+
/**
|
|
42
|
+
* Duration property for the icon
|
|
43
|
+
*/
|
|
44
|
+
iconSpinDuration?: number;
|
|
37
45
|
/**
|
|
38
46
|
* A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label
|
|
39
47
|
*/
|
|
40
48
|
iconAfter: string;
|
|
49
|
+
/**
|
|
50
|
+
* Spin property for the after icon
|
|
51
|
+
*/
|
|
52
|
+
iconAfterSpin: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Duration property for the after icon
|
|
55
|
+
*/
|
|
56
|
+
iconAfterSpinDuration?: number;
|
|
41
57
|
focused: boolean;
|
|
42
58
|
name: string | undefined;
|
|
43
59
|
type: 'submit' | 'reset' | 'button';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-button.d.ts","sourceRoot":"","sources":["../../src/vscode-button/vscode-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,gBAAgB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"vscode-button.d.ts","sourceRoot":"","sources":["../../src/vscode-button/vscode-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,gBAAgB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,yBAAyB,CAAC;AAIjC;;;;;;;;;;;;;;GAcG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,+BAAU;IAEvB,gBAAgB;IAChB,MAAM,CAAC,cAAc,UAAQ;IAG7B,SAAS,UAAS;IAElB,gBAAgB;IAEhB,QAAQ,SAAK;IAEb;;OAEG;IAEH,SAAS,UAAS;IAElB,gBAAgB;IAEhB,IAAI,SAAY;IAGhB,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,QAAQ,CAAC,sBAAS;IAElB;;OAEG;IAEH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAMH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,OAAO,UAAS;IAGhB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAY;IAG/C,KAAK,SAAM;IAEX,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAmB;IAErC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;;IASD,iBAAiB,IAAI,IAAI;IAkBzB,oBAAoB,IAAI,IAAI;IAM5B,MAAM,CAEJ,iBAAiB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GACnE,IAAI;IAiBP,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,MAAM,IAAI,cAAc;CAmCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
|
|
@@ -10,6 +10,7 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
10
10
|
import { VscElement } from '../includes/VscElement.js';
|
|
11
11
|
import '../vscode-icon/index.js';
|
|
12
12
|
import styles from './vscode-button.styles.js';
|
|
13
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
13
14
|
/**
|
|
14
15
|
* @fires vsc-click Dispatched only when button is not in disabled state.
|
|
15
16
|
*
|
|
@@ -45,10 +46,18 @@ let VscodeButton = class VscodeButton extends VscElement {
|
|
|
45
46
|
* A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label
|
|
46
47
|
*/
|
|
47
48
|
this.icon = '';
|
|
49
|
+
/**
|
|
50
|
+
* Spin property for the icon
|
|
51
|
+
*/
|
|
52
|
+
this.iconSpin = false;
|
|
48
53
|
/**
|
|
49
54
|
* A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label
|
|
50
55
|
*/
|
|
51
56
|
this.iconAfter = '';
|
|
57
|
+
/**
|
|
58
|
+
* Spin property for the after icon
|
|
59
|
+
*/
|
|
60
|
+
this.iconAfterSpin = false;
|
|
52
61
|
this.focused = false;
|
|
53
62
|
this.name = undefined;
|
|
54
63
|
this.type = 'button';
|
|
@@ -142,11 +151,18 @@ let VscodeButton = class VscodeButton extends VscElement {
|
|
|
142
151
|
'has-icon-after': hasIconAfter,
|
|
143
152
|
};
|
|
144
153
|
const iconElem = hasIcon
|
|
145
|
-
? html `<vscode-icon
|
|
154
|
+
? html `<vscode-icon
|
|
155
|
+
name="${this.icon}"
|
|
156
|
+
?spin="${this.iconSpin}"
|
|
157
|
+
spin-duration="${ifDefined(this.iconSpinDuration)}"
|
|
158
|
+
class="icon"
|
|
159
|
+
></vscode-icon>`
|
|
146
160
|
: nothing;
|
|
147
161
|
const iconAfterElem = hasIconAfter
|
|
148
162
|
? html `<vscode-icon
|
|
149
163
|
name="${this.iconAfter}"
|
|
164
|
+
?spin="${this.iconAfterSpin}"
|
|
165
|
+
spin-duration="${ifDefined(this.iconAfterSpinDuration)}"
|
|
150
166
|
class="icon-after"
|
|
151
167
|
></vscode-icon>`
|
|
152
168
|
: nothing;
|
|
@@ -180,9 +196,25 @@ __decorate([
|
|
|
180
196
|
__decorate([
|
|
181
197
|
property()
|
|
182
198
|
], VscodeButton.prototype, "icon", void 0);
|
|
199
|
+
__decorate([
|
|
200
|
+
property({ type: Boolean, reflect: true, attribute: 'icon-spin' })
|
|
201
|
+
], VscodeButton.prototype, "iconSpin", void 0);
|
|
202
|
+
__decorate([
|
|
203
|
+
property({ type: Number, reflect: true, attribute: 'icon-spin-duration' })
|
|
204
|
+
], VscodeButton.prototype, "iconSpinDuration", void 0);
|
|
183
205
|
__decorate([
|
|
184
206
|
property({ attribute: 'icon-after' })
|
|
185
207
|
], VscodeButton.prototype, "iconAfter", void 0);
|
|
208
|
+
__decorate([
|
|
209
|
+
property({ type: Boolean, reflect: true, attribute: 'icon-after-spin' })
|
|
210
|
+
], VscodeButton.prototype, "iconAfterSpin", void 0);
|
|
211
|
+
__decorate([
|
|
212
|
+
property({
|
|
213
|
+
type: Number,
|
|
214
|
+
reflect: true,
|
|
215
|
+
attribute: 'icon-after-spin-duration',
|
|
216
|
+
})
|
|
217
|
+
], VscodeButton.prototype, "iconAfterSpinDuration", void 0);
|
|
186
218
|
__decorate([
|
|
187
219
|
property({ type: Boolean, reflect: true })
|
|
188
220
|
], VscodeButton.prototype, "focused", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-button.js","sourceRoot":"","sources":["../../src/vscode-button/vscode-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, nothing, PropertyValueMap, TemplateResult} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport '../vscode-icon/index.js';\nimport styles from './vscode-button.styles.js';\n\n/**\n * @fires vsc-click Dispatched only when button is not in disabled state.\n *\n * @cssprop --vscode-button-background\n * @cssprop --vscode-button-foreground\n * @cssprop [--vscode-button-border=var(--vscode-button-background)]\n * @cssprop --vscode-button-hoverBackground\n * @cssprop --vscode-font-family\n * @cssprop --vscode-font-size\n * @cssprop --vscode-font-weight\n * @cssprop --vscode-button-secondaryForeground\n * @cssprop --vscode-button-secondaryBackground\n * @cssprop --vscode-button-secondaryHoverBackground\n * @cssprop --vscode-focusBorder\n */\n@customElement('vscode-button')\nexport class VscodeButton extends VscElement {\n static styles = styles;\n\n /** @internal */\n static formAssociated = true;\n\n @property({type: Boolean, reflect: true})\n autofocus = false;\n\n /** @internal */\n @property({type: Number, reflect: true})\n tabIndex = 0;\n\n /**\n * Button has a less prominent style.\n */\n @property({type: Boolean, reflect: true})\n secondary = false;\n\n /** @internal */\n @property({reflect: true})\n role = 'button';\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n /**\n * A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label\n */\n @property()\n icon = '';\n\n /**\n * A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label\n */\n @property({attribute: 'icon-after'})\n iconAfter = '';\n\n @property({type: Boolean, reflect: true})\n focused = false;\n\n @property({type: String, reflect: true})\n name: string | undefined = undefined;\n\n @property({reflect: true})\n type: 'submit' | 'reset' | 'button' = 'button';\n\n @property()\n value = '';\n\n private _prevTabindex = 0;\n private _internals: ElementInternals;\n\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n constructor() {\n super();\n this.addEventListener('keydown', this._handleKeyDown.bind(this));\n this.addEventListener('click', this._handleClick.bind(this));\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n if (this.autofocus) {\n if (this.tabIndex < 0) {\n this.tabIndex = 0;\n }\n\n this.updateComplete.then(() => {\n this.focus();\n this.requestUpdate();\n });\n }\n\n this.addEventListener('focus', this._handleFocus);\n this.addEventListener('blur', this._handleBlur);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('focus', this._handleFocus);\n this.removeEventListener('blur', this._handleBlur);\n }\n\n update(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.update(changedProperties);\n\n if (changedProperties.has('value')) {\n this._internals.setFormValue(this.value);\n }\n\n if (changedProperties.has('disabled')) {\n if (this.disabled) {\n this._prevTabindex = this.tabIndex;\n this.tabIndex = -1;\n } else {\n this.tabIndex = this._prevTabindex;\n }\n }\n }\n\n private _executeAction() {\n if (this.type === 'submit' && this._internals.form) {\n this._internals.form.requestSubmit();\n }\n\n if (this.type === 'reset' && this._internals.form) {\n this._internals.form.reset();\n }\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (\n (event.key === 'Enter' || event.key === ' ') &&\n !this.hasAttribute('disabled')\n ) {\n /**\n * @deprecated\n * Please use the standard `click` event.\n */\n this.dispatchEvent(\n new CustomEvent<{\n originalEvent: MouseEvent;\n }>('vsc-click', {\n detail: {\n originalEvent: new MouseEvent('click'),\n },\n })\n );\n\n this._executeAction();\n }\n }\n\n private _handleClick(event: MouseEvent) {\n if (!this.hasAttribute('disabled')) {\n this.dispatchEvent(\n new CustomEvent<{\n originalEvent: MouseEvent;\n }>('vsc-click', {\n detail: {\n originalEvent: event,\n },\n })\n );\n\n this._executeAction();\n }\n }\n\n private _handleFocus = () => {\n this.focused = true;\n };\n\n private _handleBlur = () => {\n this.focused = false;\n };\n\n render(): TemplateResult {\n const hasIcon = this.icon !== '';\n const hasIconAfter = this.iconAfter !== '';\n const wrapperClasses = {\n wrapper: true,\n 'has-icon-before': hasIcon,\n 'has-icon-after': hasIconAfter,\n };\n\n const iconElem = hasIcon\n ? html`<vscode-icon name=\"${this.icon}\" class=\"icon\"></vscode-icon>`\n : nothing;\n\n const iconAfterElem = hasIconAfter\n ? html`<vscode-icon\n name=\"${this.iconAfter}\"\n class=\"icon-after\"\n ></vscode-icon>`\n : nothing;\n\n return html`\n <span class=\"${classMap(wrapperClasses)}\">\n ${iconElem}\n <slot></slot>\n ${iconAfterElem}\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-button': VscodeButton;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"vscode-button.js","sourceRoot":"","sources":["../../src/vscode-button/vscode-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, nothing, PropertyValueMap, TemplateResult} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport '../vscode-icon/index.js';\nimport styles from './vscode-button.styles.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/**\n * @fires vsc-click Dispatched only when button is not in disabled state.\n *\n * @cssprop --vscode-button-background\n * @cssprop --vscode-button-foreground\n * @cssprop [--vscode-button-border=var(--vscode-button-background)]\n * @cssprop --vscode-button-hoverBackground\n * @cssprop --vscode-font-family\n * @cssprop --vscode-font-size\n * @cssprop --vscode-font-weight\n * @cssprop --vscode-button-secondaryForeground\n * @cssprop --vscode-button-secondaryBackground\n * @cssprop --vscode-button-secondaryHoverBackground\n * @cssprop --vscode-focusBorder\n */\n@customElement('vscode-button')\nexport class VscodeButton extends VscElement {\n static styles = styles;\n\n /** @internal */\n static formAssociated = true;\n\n @property({type: Boolean, reflect: true})\n autofocus = false;\n\n /** @internal */\n @property({type: Number, reflect: true})\n tabIndex = 0;\n\n /**\n * Button has a less prominent style.\n */\n @property({type: Boolean, reflect: true})\n secondary = false;\n\n /** @internal */\n @property({reflect: true})\n role = 'button';\n\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n /**\n * A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label\n */\n @property()\n icon = '';\n\n /**\n * Spin property for the icon\n */\n @property({type: Boolean, reflect: true, attribute: 'icon-spin'})\n iconSpin? = false;\n\n /**\n * Duration property for the icon\n */\n @property({type: Number, reflect: true, attribute: 'icon-spin-duration'})\n iconSpinDuration?: number;\n\n /**\n * A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label\n */\n @property({attribute: 'icon-after'})\n iconAfter = '';\n\n /**\n * Spin property for the after icon\n */\n @property({type: Boolean, reflect: true, attribute: 'icon-after-spin'})\n iconAfterSpin = false;\n\n /**\n * Duration property for the after icon\n */\n @property({\n type: Number,\n reflect: true,\n attribute: 'icon-after-spin-duration',\n })\n iconAfterSpinDuration?: number;\n\n @property({type: Boolean, reflect: true})\n focused = false;\n\n @property({type: String, reflect: true})\n name: string | undefined = undefined;\n\n @property({reflect: true})\n type: 'submit' | 'reset' | 'button' = 'button';\n\n @property()\n value = '';\n\n private _prevTabindex = 0;\n private _internals: ElementInternals;\n\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n constructor() {\n super();\n this.addEventListener('keydown', this._handleKeyDown.bind(this));\n this.addEventListener('click', this._handleClick.bind(this));\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n if (this.autofocus) {\n if (this.tabIndex < 0) {\n this.tabIndex = 0;\n }\n\n this.updateComplete.then(() => {\n this.focus();\n this.requestUpdate();\n });\n }\n\n this.addEventListener('focus', this._handleFocus);\n this.addEventListener('blur', this._handleBlur);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('focus', this._handleFocus);\n this.removeEventListener('blur', this._handleBlur);\n }\n\n update(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.update(changedProperties);\n\n if (changedProperties.has('value')) {\n this._internals.setFormValue(this.value);\n }\n\n if (changedProperties.has('disabled')) {\n if (this.disabled) {\n this._prevTabindex = this.tabIndex;\n this.tabIndex = -1;\n } else {\n this.tabIndex = this._prevTabindex;\n }\n }\n }\n\n private _executeAction() {\n if (this.type === 'submit' && this._internals.form) {\n this._internals.form.requestSubmit();\n }\n\n if (this.type === 'reset' && this._internals.form) {\n this._internals.form.reset();\n }\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (\n (event.key === 'Enter' || event.key === ' ') &&\n !this.hasAttribute('disabled')\n ) {\n /**\n * @deprecated\n * Please use the standard `click` event.\n */\n this.dispatchEvent(\n new CustomEvent<{\n originalEvent: MouseEvent;\n }>('vsc-click', {\n detail: {\n originalEvent: new MouseEvent('click'),\n },\n })\n );\n\n this._executeAction();\n }\n }\n\n private _handleClick(event: MouseEvent) {\n if (!this.hasAttribute('disabled')) {\n this.dispatchEvent(\n new CustomEvent<{\n originalEvent: MouseEvent;\n }>('vsc-click', {\n detail: {\n originalEvent: event,\n },\n })\n );\n\n this._executeAction();\n }\n }\n\n private _handleFocus = () => {\n this.focused = true;\n };\n\n private _handleBlur = () => {\n this.focused = false;\n };\n\n render(): TemplateResult {\n const hasIcon = this.icon !== '';\n const hasIconAfter = this.iconAfter !== '';\n const wrapperClasses = {\n wrapper: true,\n 'has-icon-before': hasIcon,\n 'has-icon-after': hasIconAfter,\n };\n\n const iconElem = hasIcon\n ? html`<vscode-icon\n name=\"${this.icon}\"\n ?spin=\"${this.iconSpin}\"\n spin-duration=\"${ifDefined(this.iconSpinDuration)}\"\n class=\"icon\"\n ></vscode-icon>`\n : nothing;\n\n const iconAfterElem = hasIconAfter\n ? html`<vscode-icon\n name=\"${this.iconAfter}\"\n ?spin=\"${this.iconAfterSpin}\"\n spin-duration=\"${ifDefined(this.iconAfterSpinDuration)}\"\n class=\"icon-after\"\n ></vscode-icon>`\n : nothing;\n\n return html`\n <span class=\"${classMap(wrapperClasses)}\">\n ${iconElem}\n <slot></slot>\n ${iconAfterElem}\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-button': VscodeButton;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-button.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-button/vscode-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"vscode-button.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-button/vscode-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cAmHb,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -4,7 +4,6 @@ const styles = [
|
|
|
4
4
|
defaultStyles,
|
|
5
5
|
css `
|
|
6
6
|
:host {
|
|
7
|
-
align-items: center;
|
|
8
7
|
background-color: var(--vscode-button-background);
|
|
9
8
|
border-color: var(--vscode-button-border, var(--vscode-button-background));
|
|
10
9
|
border-style: solid;
|
|
@@ -75,6 +74,20 @@ const styles = [
|
|
|
75
74
|
background-color: var(--vscode-button-secondaryBackground);
|
|
76
75
|
}
|
|
77
76
|
|
|
77
|
+
::slotted(*) {
|
|
78
|
+
display: inline-block;
|
|
79
|
+
margin-left: 4px;
|
|
80
|
+
margin-right: 4px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
::slotted(*:first-child) {
|
|
84
|
+
margin-left: 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
::slotted(vscode-icon) {
|
|
88
|
+
color: inherit;
|
|
89
|
+
}
|
|
90
|
+
|
|
78
91
|
.wrapper {
|
|
79
92
|
align-items: center;
|
|
80
93
|
box-sizing: border-box;
|
|
@@ -85,7 +98,9 @@ const styles = [
|
|
|
85
98
|
}
|
|
86
99
|
|
|
87
100
|
slot {
|
|
88
|
-
|
|
101
|
+
align-items: center;
|
|
102
|
+
display: flex;
|
|
103
|
+
height: 100%;
|
|
89
104
|
}
|
|
90
105
|
|
|
91
106
|
.icon {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-button.styles.js","sourceRoot":"","sources":["../../src/vscode-button/vscode-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
|
|
1
|
+
{"version":3,"file":"vscode-button.styles.js","sourceRoot":"","sources":["../../src/vscode-button/vscode-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgHF;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 background-color: var(--vscode-button-background);\n border-color: var(--vscode-button-border, var(--vscode-button-background));\n border-style: solid;\n border-radius: 2px;\n border-width: 1px;\n color: var(--vscode-button-foreground);\n cursor: pointer;\n display: inline-block;\n font-family: var(--vscode-font-family);\n font-size: var(--vscode-font-size);\n font-weight: var(--vscode-font-weight);\n line-height: 22px;\n overflow: hidden;\n padding: 1px 13px;\n user-select: none;\n white-space: nowrap;\n }\n\n :host([secondary]) {\n color: var(--vscode-button-secondaryForeground);\n background-color: var(--vscode-button-secondaryBackground);\n border-color: var(--vscode-button-border, var(--vscode-button-secondaryBackground));\n }\n\n :host([disabled]) {\n cursor: default;\n opacity: 0.4;\n pointer-events: none;\n }\n\n :host(:hover) {\n background-color: var(--vscode-button-hoverBackground);\n }\n\n :host([disabled]:hover) {\n background-color: var(--vscode-button-background);\n }\n\n :host([secondary]:hover) {\n background-color: var(--vscode-button-secondaryHoverBackground);\n }\n\n :host([secondary][disabled]:hover) {\n background-color: var(--vscode-button-secondaryBackground);\n }\n\n :host(:focus),\n :host(:active) {\n outline: none;\n }\n\n :host(:focus) {\n background-color: var(--vscode-button-hoverBackground);\n outline: 1px solid var(--vscode-focusBorder);\n outline-offset: 2px;\n }\n\n :host([disabled]:focus) {\n background-color: var(--vscode-button-background);\n outline: 0;\n }\n\n :host([secondary]:focus) {\n background-color: var(--vscode-button-secondaryHoverBackground);\n }\n\n :host([secondary][disabled]:focus) {\n background-color: var(--vscode-button-secondaryBackground);\n }\n\n ::slotted(*) {\n display: inline-block;\n margin-left: 4px;\n margin-right: 4px;\n }\n\n ::slotted(*:first-child) {\n margin-left: 0;\n }\n\n ::slotted(vscode-icon) {\n color: inherit;\n }\n\n .wrapper {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n position: relative;\n width: 100%;\n }\n\n slot {\n align-items: center;\n display: flex;\n height: 100%;\n }\n\n .icon {\n color: inherit;\n display: block;\n margin-right: 3px;\n }\n\n .icon-after {\n color: inherit;\n display: block;\n margin-left: 3px;\n }\n `,\n];\n\nexport default styles;\n"]}
|
|
@@ -11,6 +11,8 @@ import { VscElement } from '../includes/VscElement.js';
|
|
|
11
11
|
* @cssprop --vscode-sideBarSectionHeader-background - Header background
|
|
12
12
|
* @cssprop --vscode-icon-foreground - Arrow icon color
|
|
13
13
|
* @cssprop --vscode-sideBarTitle-foreground - Header font color
|
|
14
|
+
*
|
|
15
|
+
* @csspart body - Container for the toggleable content of the component. The container's overflow content is hidden by default. This can serve as an escape hatch to modify this feature.
|
|
14
16
|
*/
|
|
15
17
|
export declare class VscodeCollapsible extends VscElement {
|
|
16
18
|
static styles: import("lit").CSSResultGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-collapsible.d.ts","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAC,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGrD
|
|
1
|
+
{"version":3,"file":"vscode-collapsible.d.ts","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAC,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGrD;;;;;;;;;;;;;GAaG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,+BAAU;IAEvB,6BAA6B;IAE7B,KAAK,SAAM;IAEX,uDAAuD;IAEvD,WAAW,SAAM;IAGjB,IAAI,UAAS;IAEb,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAMxB,MAAM,IAAI,cAAc;CA4CzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF"}
|
|
@@ -20,6 +20,8 @@ import styles from './vscode-collapsible.styles.js';
|
|
|
20
20
|
* @cssprop --vscode-sideBarSectionHeader-background - Header background
|
|
21
21
|
* @cssprop --vscode-icon-foreground - Arrow icon color
|
|
22
22
|
* @cssprop --vscode-sideBarTitle-foreground - Header font color
|
|
23
|
+
*
|
|
24
|
+
* @csspart body - Container for the toggleable content of the component. The container's overflow content is hidden by default. This can serve as an escape hatch to modify this feature.
|
|
23
25
|
*/
|
|
24
26
|
let VscodeCollapsible = class VscodeCollapsible extends VscElement {
|
|
25
27
|
constructor() {
|
|
@@ -73,10 +75,8 @@ let VscodeCollapsible = class VscodeCollapsible extends VscElement {
|
|
|
73
75
|
<div class="decorations"><slot name="decorations"></slot></div>
|
|
74
76
|
</div>
|
|
75
77
|
</div>
|
|
76
|
-
<div class="collapsible-body">
|
|
77
|
-
<
|
|
78
|
-
<slot></slot>
|
|
79
|
-
</div>
|
|
78
|
+
<div class="collapsible-body" part="body">
|
|
79
|
+
<slot></slot>
|
|
80
80
|
</div>
|
|
81
81
|
</div>
|
|
82
82
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-collapsible.js","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD
|
|
1
|
+
{"version":3,"file":"vscode-collapsible.js","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAGL,6BAA6B;QAE7B,UAAK,GAAG,EAAE,CAAC;QAEX,uDAAuD;QAEvD,gBAAW,GAAG,EAAE,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;IAwDf,CAAC;IAtDS,cAAc;QACpB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;IAEO,gBAAgB,CAAC,KAAoB;QAC3C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;QAE/D,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;;;;;;;;;WAaV,CAAC;QAER,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW;YACxC,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,WAAW,SAAS;YAC5D,CAAC,CAAC,OAAO,CAAC;QAEZ,OAAO,IAAI,CAAA;oBACK,OAAO;;;;mBAIR,IAAI,CAAC,KAAK;oBACT,IAAI,CAAC,cAAc;sBACjB,IAAI,CAAC,gBAAgB;;YAE/B,IAAI;8BACc,IAAI,CAAC,KAAK,GAAG,iBAAiB;;;;;;;;;;KAUvD,CAAC;IACJ,CAAC;;AAlEM,wBAAM,GAAG,MAAM,AAAT,CAAU;AAIvB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;gDACd;AAIX;IADC,QAAQ,EAAE;sDACM;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CAC5B;AAZF,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAoE7B","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-collapsible.styles.js';\n\n/**\n * @slot - Main content.\n * @slot actions - You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open.\n * @slot decorations - The elements placed in the decorations slot are always visible.\n *\n * @cssprop --vscode-sideBar-background - Background color\n * @cssprop --vscode-focusBorder - Focus border color\n * @cssprop --vscode-font-family - Header font family\n * @cssprop --vscode-sideBarSectionHeader-background - Header background\n * @cssprop --vscode-icon-foreground - Arrow icon color\n * @cssprop --vscode-sideBarTitle-foreground - Header font color\n *\n * @csspart body - Container for the toggleable content of the component. The container's overflow content is hidden by default. This can serve as an escape hatch to modify this feature.\n */\n@customElement('vscode-collapsible')\nexport class VscodeCollapsible extends VscElement {\n static styles = styles;\n\n /** Component heading text */\n @property({type: String})\n title = '';\n\n /** Less prominent text than the title in the header */\n @property()\n description = '';\n\n @property({type: Boolean, reflect: true})\n open = false;\n\n private _onHeaderClick() {\n this.open = !this.open;\n }\n\n private _onHeaderKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.open = !this.open;\n }\n }\n\n render(): TemplateResult {\n const classes = classMap({collapsible: true, open: this.open});\n\n const icon = html`<svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n class=\"header-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z\"\n />\n </svg>`;\n\n const descriptionMarkup = this.description\n ? html`<span class=\"description\">${this.description}</span>`\n : nothing;\n\n return html`\n <div class=\"${classes}\">\n <div\n class=\"collapsible-header\"\n tabindex=\"0\"\n title=\"${this.title}\"\n @click=\"${this._onHeaderClick}\"\n @keydown=\"${this._onHeaderKeyDown}\"\n >\n ${icon}\n <h3 class=\"title\">${this.title}${descriptionMarkup}</h3>\n <div class=\"header-slots\">\n <div class=\"actions\"><slot name=\"actions\"></slot></div>\n <div class=\"decorations\"><slot name=\"decorations\"></slot></div>\n </div>\n </div>\n <div class=\"collapsible-body\" part=\"body\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-collapsible': VscodeCollapsible;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vscode-elements/elements",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.3-pre.0",
|
|
4
4
|
"description": "Webcomponents for creating Visual Studio Code extensions",
|
|
5
5
|
"main": "dist/main.js",
|
|
6
6
|
"module": "dist/main.js",
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
"@types/node": "^22.6.1",
|
|
154
154
|
"@typescript-eslint/eslint-plugin": "^8.7.0",
|
|
155
155
|
"@typescript-eslint/parser": "^8.7.0",
|
|
156
|
-
"@vscode-elements/webview-playground": "^1.1.
|
|
156
|
+
"@vscode-elements/webview-playground": "^1.1.2",
|
|
157
157
|
"@vscode/codicons": "^0.0.36",
|
|
158
158
|
"@web/dev-server": "^0.4.6",
|
|
159
159
|
"@web/dev-server-esbuild": "^1.0.2",
|
|
@@ -276,6 +276,10 @@
|
|
|
276
276
|
{ "name": "--vscode-tree-indentGuidesStroke", "values": [] }
|
|
277
277
|
],
|
|
278
278
|
"pseudoElements": [
|
|
279
|
+
{
|
|
280
|
+
"name": "::part(body)",
|
|
281
|
+
"description": "Container for the toggleable content of the component. The container's overflow content is hidden by default. This can serve as an escape hatch to modify this feature."
|
|
282
|
+
},
|
|
279
283
|
{ "name": "::part(text-content)" },
|
|
280
284
|
{ "name": "::part(description)" },
|
|
281
285
|
{ "name": "::part(counter-badge-decoration)" },
|
|
@@ -33,11 +33,31 @@
|
|
|
33
33
|
"description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) before the label",
|
|
34
34
|
"values": []
|
|
35
35
|
},
|
|
36
|
+
{
|
|
37
|
+
"name": "icon-spin",
|
|
38
|
+
"description": "Spin property for the icon",
|
|
39
|
+
"values": []
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "icon-spin-duration",
|
|
43
|
+
"description": "Duration property for the icon",
|
|
44
|
+
"values": []
|
|
45
|
+
},
|
|
36
46
|
{
|
|
37
47
|
"name": "icon-after",
|
|
38
48
|
"description": "A [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) after the label",
|
|
39
49
|
"values": []
|
|
40
50
|
},
|
|
51
|
+
{
|
|
52
|
+
"name": "icon-after-spin",
|
|
53
|
+
"description": "Spin property for the after icon",
|
|
54
|
+
"values": []
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"name": "icon-after-spin-duration",
|
|
58
|
+
"description": "Duration property for the after icon",
|
|
59
|
+
"values": []
|
|
60
|
+
},
|
|
41
61
|
{ "name": "focused", "values": [] },
|
|
42
62
|
{ "name": "name", "values": [] },
|
|
43
63
|
{
|
|
@@ -95,7 +115,7 @@
|
|
|
95
115
|
},
|
|
96
116
|
{
|
|
97
117
|
"name": "vscode-collapsible",
|
|
98
|
-
"description": "\n---\n\n\n### **Slots:**\n - _default_ - Main content.\n- **actions** - You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open.\n- **decorations** - The elements placed in the decorations slot are always visible.\n\n### **CSS Properties:**\n - **--vscode-sideBar-background** - Background color _(default: undefined)_\n- **--vscode-focusBorder** - Focus border color _(default: undefined)_\n- **--vscode-font-family** - Header font family _(default: undefined)_\n- **--vscode-sideBarSectionHeader-background** - Header background _(default: undefined)_\n- **--vscode-icon-foreground** - Arrow icon color _(default: undefined)_\n- **--vscode-sideBarTitle-foreground** - Header font color _(default: undefined)_",
|
|
118
|
+
"description": "\n---\n\n\n### **Slots:**\n - _default_ - Main content.\n- **actions** - You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open.\n- **decorations** - The elements placed in the decorations slot are always visible.\n\n### **CSS Properties:**\n - **--vscode-sideBar-background** - Background color _(default: undefined)_\n- **--vscode-focusBorder** - Focus border color _(default: undefined)_\n- **--vscode-font-family** - Header font family _(default: undefined)_\n- **--vscode-sideBarSectionHeader-background** - Header background _(default: undefined)_\n- **--vscode-icon-foreground** - Arrow icon color _(default: undefined)_\n- **--vscode-sideBarTitle-foreground** - Header font color _(default: undefined)_\n\n### **CSS Parts:**\n - **body** - Container for the toggleable content of the component. The container's overflow content is hidden by default. This can serve as an escape hatch to modify this feature.",
|
|
99
119
|
"attributes": [
|
|
100
120
|
{
|
|
101
121
|
"name": "title",
|
|
@@ -243,7 +263,12 @@
|
|
|
243
263
|
{ "name": "startsWithPerTerm" }
|
|
244
264
|
]
|
|
245
265
|
},
|
|
246
|
-
{ "name": "focused", "values": [] }
|
|
266
|
+
{ "name": "focused", "values": [] },
|
|
267
|
+
{
|
|
268
|
+
"name": "position",
|
|
269
|
+
"description": "Position of the options list when visible.",
|
|
270
|
+
"values": [{ "name": "above" }, { "name": "below" }]
|
|
271
|
+
}
|
|
247
272
|
],
|
|
248
273
|
"references": []
|
|
249
274
|
},
|
|
@@ -346,7 +371,12 @@
|
|
|
346
371
|
{ "name": "startsWithPerTerm" }
|
|
347
372
|
]
|
|
348
373
|
},
|
|
349
|
-
{ "name": "focused", "values": [] }
|
|
374
|
+
{ "name": "focused", "values": [] },
|
|
375
|
+
{
|
|
376
|
+
"name": "position",
|
|
377
|
+
"description": "Position of the options list when visible.",
|
|
378
|
+
"values": [{ "name": "above" }, { "name": "below" }]
|
|
379
|
+
}
|
|
350
380
|
],
|
|
351
381
|
"references": []
|
|
352
382
|
},
|