From b02c27c4771d10516771ba7a385f397617bcb98b Mon Sep 17 00:00:00 2001 From: Alexander Heimbuch Date: Wed, 26 Nov 2025 16:57:44 +0100 Subject: [PATCH] feat: add action icon to vscode-option --- .../combobox-mode/combobox.html | 3 ++ .../select-mode/with-action.html | 41 +++++++++++++++++++ .../vscode-select/OptionListController.ts | 2 + src/includes/vscode-select/styles.ts | 14 +++++-- src/includes/vscode-select/types.ts | 1 + .../vscode-select/vscode-select-base.ts | 29 ++++++++++++- src/vscode-option/vscode-option.ts | 3 ++ 7 files changed, 89 insertions(+), 4 deletions(-) create mode 100644 dev/vscode-single-select/select-mode/with-action.html diff --git a/dev/vscode-single-select/combobox-mode/combobox.html b/dev/vscode-single-select/combobox-mode/combobox.html index 1841d46af..41840e4a0 100644 --- a/dev/vscode-single-select/combobox-mode/combobox.html +++ b/dev/vscode-single-select/combobox-mode/combobox.html @@ -36,6 +36,9 @@ sl.addEventListener('change', () => { console.log(sl.value); }); + sl.addEventListener('action', (event) => { + console.log(event); + }) diff --git a/dev/vscode-single-select/select-mode/with-action.html b/dev/vscode-single-select/select-mode/with-action.html new file mode 100644 index 000000000..4e4f44030 --- /dev/null +++ b/dev/vscode-single-select/select-mode/with-action.html @@ -0,0 +1,41 @@ + + + + + + VSCode Elements + + + + + + +
+ + + Lorem + Ipsum + Dolor + + + + +
+ + diff --git a/src/includes/vscode-select/OptionListController.ts b/src/includes/vscode-select/OptionListController.ts index 9887c1db2..8a894a47c 100644 --- a/src/includes/vscode-select/OptionListController.ts +++ b/src/includes/vscode-select/OptionListController.ts @@ -196,6 +196,7 @@ export class OptionListController implements ReactiveController { filteredIndex: index, ranges: [], visible: true, + action: op.action }; }); @@ -233,6 +234,7 @@ export class OptionListController implements ReactiveController { value: value ?? '', visible, ranges, + action: option.action }); if (visible) { diff --git a/src/includes/vscode-select/styles.ts b/src/includes/vscode-select/styles.ts index aac691639..2bad81245 100644 --- a/src/includes/vscode-select/styles.ts +++ b/src/includes/vscode-select/styles.ts @@ -231,9 +231,6 @@ export default [ .option.single-select { display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } .option.multi-select { @@ -413,5 +410,16 @@ export default [ :host([position='above']) .description { border-width: 0 0 1px; } + + .option .label { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .option.with-action { + display: flex; + } `, ]; diff --git a/src/includes/vscode-select/types.ts b/src/includes/vscode-select/types.ts index e25a5dff5..b421bfea5 100644 --- a/src/includes/vscode-select/types.ts +++ b/src/includes/vscode-select/types.ts @@ -4,6 +4,7 @@ export interface Option { description?: string; selected?: boolean; disabled?: boolean; + action: { icon: string; title?: string; type: string; } | undefined; } export interface InternalOption extends Required