Skip to content

Chore/lint tasks #315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bendera merged 4 commits into from
Feb 10, 2025
Merged

Chore/lint tasks #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c98a37f
Fix unclosed tags
bendera Feb 10, 2025
0db00d3
Set eol to LF
bendera Feb 10, 2025
94ad584
Prettier fix
bendera Feb 10, 2025
bd08164
Eslint fix
bendera Feb 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .prettierrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@
"singleQuote": true,
"bracketSpacing": false,
"arrowParens": "always",
"endOfLine": "lf",
"plugins": ["@awmottaz/prettier-plugin-void-html"]
}
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions dev/vscode-button/fallback-styles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode Elements</title>
<link
rel="stylesheet"
href="/node_modules/@vscode/codicons/dist/codicon.css"
id="vscode-codicon-stylesheet"
/>
>
<script type="module" src="/dist/main.js"></script>
<script>
const logEvents = (selector, eventType) => {
Expand All @@ -19,7 +19,7 @@
</script>
</head>

<body style="background-color: #1f1f1f;">
<body style="background-color: #1f1f1f">
<main>
<p><vscode-button>Button</vscode-button></p>
<p><vscode-button secondary>Secondary</vscode-button></p>
Expand Down
232 changes: 139 additions & 93 deletions dev/vscode-collapsible.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,101 +1,147 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VSCode Webview Elements demo page</title>
<link
rel="stylesheet"
href="../node_modules/@vscode/codicons/dist/codicon.css"
id="vscode-codicon-stylesheet"
>
<script
type="module"
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
></script>
<script type="module" src="../dist/vscode-icon/index.js"></script>
<script type="module" src="../dist/vscode-badge/index.js"></script>
<script type="module" src="../dist/vscode-collapsible/index.js"></script>
<script type="module" src="../dist/vscode-single-select/index.js"></script>
<script type="module" src="../dist/vscode-option/index.js"></script>
</head>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>VSCode Webview Elements demo page</title>
<link rel="stylesheet" href="../node_modules/@vscode/codicons/dist/codicon.css" id="vscode-codicon-stylesheet" />
<script type="module" src="/node_modules/@vscode-elements/webview-playground/dist/index.js"></script>
<script type="module" src="../dist/vscode-icon/index.js"></script>
<script type="module" src="../dist/vscode-badge/index.js"></script>
<script type="module" src="../dist/vscode-collapsible/index.js"></script>
<script type="module" src="../dist/vscode-single-select/index.js"></script>
<script type="module" src="../dist/vscode-option/index.js"></script>
</head>

<body class="vscode-light">
<div class="story">
<h2 class="story-title">Basic example</h2>
<div class="story-content">
<style>
.collapsible1::part(body) {
overflow: visible;
}
</style>
<vscode-demo>
<vscode-collapsible title="Lorem" description="Ipsum Dolor sit" open class="collapsible1">
<vscode-icon name="account" action-icon title="Account" tabindex="0" slot="actions"></vscode-icon>
<vscode-icon name="git-compare" action-icon title="Git compare" tabindex="0" slot="actions"></vscode-icon>
<vscode-icon name="add" action-icon title="Add" tabindex="0" slot="actions"></vscode-icon>
<vscode-badge slot="decorators" variant="counter">9</vscode-badge>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<vscode-single-select position="above">
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
</vscode-single-select>
<p>lorem ipsum dolor sit</p>
</vscode-collapsible>
<vscode-collapsible title="Ipsum">
<div slot="actions">
<vscode-icon name="account" action-icon title="Account" tabindex="0"></vscode-icon>
<vscode-icon name="add" action-icon title="Add" tabindex="0"></vscode-icon>
<vscode-icon name="git-compare" action-icon title="Git compare" tabindex="0"></vscode-icon>
</div>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
</vscode-collapsible>
<vscode-collapsible title="Dolor"></vscode-collapsible>
</vscode-demo>
<script type="module">
const icons = document.querySelectorAll('vscode-icon[action-icon]');

icons.forEach((i) => {
i.addEventListener('click', (event) => {
event.stopPropagation();
<body class="vscode-light">
<div class="story">
<h2 class="story-title">Basic example</h2>
<div class="story-content">
<style>
.collapsible1::part(body) {
overflow: visible;
}
</style>
<vscode-demo>
<vscode-collapsible
title="Lorem"
description="Ipsum Dolor sit"
open
class="collapsible1"
>
<vscode-icon
name="account"
action-icon
title="Account"
tabindex="0"
slot="actions"
></vscode-icon>
<vscode-icon
name="git-compare"
action-icon
title="Git compare"
tabindex="0"
slot="actions"
></vscode-icon>
<vscode-icon
name="add"
action-icon
title="Add"
tabindex="0"
slot="actions"
></vscode-icon>
<vscode-badge slot="decorators" variant="counter">9</vscode-badge>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<vscode-single-select position="above">
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
<vscode-option>Lorem Ipsum</vscode-option>
</vscode-single-select>
<p>lorem ipsum dolor sit</p>
</vscode-collapsible>
<vscode-collapsible title="Ipsum">
<div slot="actions">
<vscode-icon
name="account"
action-icon
title="Account"
tabindex="0"
></vscode-icon>
<vscode-icon
name="add"
action-icon
title="Add"
tabindex="0"
></vscode-icon>
<vscode-icon
name="git-compare"
action-icon
title="Git compare"
tabindex="0"
></vscode-icon>
</div>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
<p>lorem ipsum dolor sit</p>
</vscode-collapsible>
<vscode-collapsible title="Dolor"></vscode-collapsible>
</vscode-demo>
<script type="module">
const icons = document.querySelectorAll('vscode-icon[action-icon]');

console.log(event);
});
icons.forEach((i) => {
i.addEventListener('click', (event) => {
event.stopPropagation();

i.addEventListener('keydown', (event) => {
event.stopPropagation();
console.log(event);
});

if (event.key === 'Enter') {
console.log(event);
}
});
});
i.addEventListener('keydown', (event) => {
event.stopPropagation();

collapsible.addEventListener('vsc-collapsible-toggle', (e) => { console.log(e.detail) });
</script>
</main>
</body>
if (event.key === 'Enter') {
console.log(event);
}
});
});

collapsible.addEventListener('vsc-collapsible-toggle', (e) => {
console.log(e.detail);
});
</script>
</div>
</div>
</body>
</html>
6 changes: 5 additions & 1 deletion src/includes/form-button-widget/FormButtonWidgetBase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')) {
Expand Down
5 changes: 4 additions & 1 deletion src/includes/style-property-map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('--')) {
Expand Down
4 changes: 2 additions & 2 deletions src/includes/vscode-select/vscode-select-base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -581,7 +581,7 @@ export class VscodeSelectBase extends VscElement {
});

return html`
<div class="${classes}">
<div class=${classes}>
${this.position === 'above' ? this._renderDescription() : nothing}
${this._renderOptions()} ${this._renderDropdownControls()}
${this.position === 'below' ? this._renderDescription() : nothing}
Expand All @@ -591,7 +591,7 @@ export class VscodeSelectBase extends VscElement {

override render(): TemplateResult {
return html`
<slot class="main-slot" @slotchange="${this._onSlotChange}"></slot>
<slot class="main-slot" @slotchange=${this._onSlotChange}></slot>
${this.combobox ? this._renderComboboxFace() : this._renderSelectFace()}
${this.open ? this._renderDropdown() : nothing}
`;
Expand Down
2 changes: 1 addition & 1 deletion src/vscode-button/vscode-button.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down