From c98a37f603b546f60cd0728b48fe7205d5f35523 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 10 Feb 2025 20:51:30 +0100 Subject: [PATCH 1/4] Fix unclosed tags --- dev/vscode-collapsible.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dev/vscode-collapsible.html b/dev/vscode-collapsible.html index 88e187d99..4cbbd0886 100644 --- a/dev/vscode-collapsible.html +++ b/dev/vscode-collapsible.html @@ -95,7 +95,8 @@

Basic example

collapsible.addEventListener('vsc-collapsible-toggle', (e) => { console.log(e.detail) }); - + + From 0db00d3e3980568755738e88cc962f99bd01f6a4 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 10 Feb 2025 21:11:55 +0100 Subject: [PATCH 2/4] Set eol to LF --- .prettierrc.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.prettierrc.json b/.prettierrc.json index 08b7cd7f4..fce6e0653 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -4,5 +4,6 @@ "singleQuote": true, "bracketSpacing": false, "arrowParens": "always", + "endOfLine": "lf", "plugins": ["@awmottaz/prettier-plugin-void-html"] } From 94ad584ab3c3c64336da201bb596ad4c5c16935a Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 10 Feb 2025 21:16:02 +0100 Subject: [PATCH 3/4] Prettier fix --- CHANGELOG.md | 2 +- dev/vscode-button/fallback-styles.html | 8 +- dev/vscode-collapsible.html | 231 +++++++++++------- .../FormButtonWidgetBase.ts | 6 +- src/includes/style-property-map.ts | 5 +- src/vscode-button/vscode-button.styles.ts | 2 +- 6 files changed, 153 insertions(+), 101 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 41106bb5b..cfe883732 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - **Badge**: Added `tab-header-counter` variant. - Added fallback styles from **Badge** and **Button**. - These components still look proper even if the theme variables provided by VSCode are not present. + These components still look proper even if the theme variables provided by VSCode are not present. In such cases, the components appear with the default theme (Dark Modern). ## [1.12.0] - 2025-02-06 diff --git a/dev/vscode-button/fallback-styles.html b/dev/vscode-button/fallback-styles.html index 0c599c171..6faadabd6 100644 --- a/dev/vscode-button/fallback-styles.html +++ b/dev/vscode-button/fallback-styles.html @@ -1,14 +1,14 @@ - - + + VSCode Elements + > - +

Button

Secondary

diff --git a/dev/vscode-collapsible.html b/dev/vscode-collapsible.html index 4cbbd0886..1318bdc81 100644 --- a/dev/vscode-collapsible.html +++ b/dev/vscode-collapsible.html @@ -1,102 +1,147 @@ - + + + + + + VSCode Webview Elements demo page + + + + + + + + - - - - - VSCode Webview Elements demo page - - - - - - - - - - -
-

Basic example

-
- - - - - - - 9 -

lorem ipsum dolor sit

-

lorem ipsum dolor sit

-

lorem ipsum dolor sit

-

lorem ipsum dolor sit

-

lorem ipsum dolor sit

-

lorem ipsum dolor sit

-

lorem ipsum dolor sit

- - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - Lorem Ipsum - -

lorem ipsum dolor sit

- - -
- - - -
-

lorem ipsum dolor sit

-

lorem ipsum dolor sit

-

lorem ipsum dolor sit

-

lorem ipsum dolor sit

-

lorem ipsum dolor sit

-

lorem ipsum dolor sit

-

lorem ipsum dolor sit

- - - - + collapsible.addEventListener('vsc-collapsible-toggle', (e) => { + console.log(e.detail); + }); + +
- - - + diff --git a/src/includes/form-button-widget/FormButtonWidgetBase.ts b/src/includes/form-button-widget/FormButtonWidgetBase.ts index faae3f633..232795ded 100644 --- a/src/includes/form-button-widget/FormButtonWidgetBase.ts +++ b/src/includes/form-button-widget/FormButtonWidgetBase.ts @@ -21,7 +21,11 @@ export class FormButtonWidgetBase extends VscElement { this.removeEventListener('blur', this._handleBlur); } - override attributeChangedCallback(name: string, oldVal: string, newVal: string): void { + override attributeChangedCallback( + name: string, + oldVal: string, + newVal: string + ): void { super.attributeChangedCallback(name, oldVal, newVal); if (name === 'disabled' && this.hasAttribute('disabled')) { diff --git a/src/includes/style-property-map.ts b/src/includes/style-property-map.ts index f1146b4d8..74ab9cc75 100644 --- a/src/includes/style-property-map.ts +++ b/src/includes/style-property-map.ts @@ -14,7 +14,10 @@ class StylePropertyMap extends Directive { } } - override update(part: PropertyPart, [styleProps]: [{[key: string]: string}]): unknown { + override update( + part: PropertyPart, + [styleProps]: [{[key: string]: string}] + ): unknown { Object.entries(styleProps).forEach(([key, val]) => { if (this._prevProperties[key] !== val) { if (key.startsWith('--')) { diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts index 5136f45e7..9706f11f0 100644 --- a/src/vscode-button/vscode-button.styles.ts +++ b/src/vscode-button/vscode-button.styles.ts @@ -72,7 +72,7 @@ const styles: CSSResultGroup = [ } :host([disabled]:focus) { - background-color: var(--vscode-button-background,#0078d4); + background-color: var(--vscode-button-background, #0078d4); outline: 0; } From bd08164ff94af79e6a5e05d6cc5cbb2a664972ae Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 10 Feb 2025 21:16:40 +0100 Subject: [PATCH 4/4] Eslint fix --- src/includes/vscode-select/vscode-select-base.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/includes/vscode-select/vscode-select-base.ts b/src/includes/vscode-select/vscode-select-base.ts index c8bf51e1f..5a15d79ac 100644 --- a/src/includes/vscode-select/vscode-select-base.ts +++ b/src/includes/vscode-select/vscode-select-base.ts @@ -581,7 +581,7 @@ export class VscodeSelectBase extends VscElement { }); return html` -
+
${this.position === 'above' ? this._renderDescription() : nothing} ${this._renderOptions()} ${this._renderDropdownControls()} ${this.position === 'below' ? this._renderDescription() : nothing} @@ -591,7 +591,7 @@ export class VscodeSelectBase extends VscElement { override render(): TemplateResult { return html` - + ${this.combobox ? this._renderComboboxFace() : this._renderSelectFace()} ${this.open ? this._renderDropdown() : nothing} `;