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"] } 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 88e187d99..1318bdc81 100644 --- a/dev/vscode-collapsible.html +++ b/dev/vscode-collapsible.html @@ -1,101 +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

- - - - -
- + if (event.key === 'Enter') { + console.log(event); + } + }); + }); + 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/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} `; 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; }