@vscode-elements/elements 1.14.1-pre.1 → 1.14.1-pre.2
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 +584 -425
- package/dist/bundled.js +234 -248
- 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 +30 -12
- package/dist/includes/vscode-select/styles.js.map +1 -1
- package/dist/includes/vscode-select/vscode-select-base.d.ts +6 -2
- package/dist/includes/vscode-select/vscode-select-base.d.ts.map +1 -1
- package/dist/includes/vscode-select/vscode-select-base.js +168 -50
- package/dist/includes/vscode-select/vscode-select-base.js.map +1 -1
- package/dist/vscode-multi-select/vscode-multi-select.d.ts +8 -3
- package/dist/vscode-multi-select/vscode-multi-select.d.ts.map +1 -1
- package/dist/vscode-multi-select/vscode-multi-select.js +86 -124
- package/dist/vscode-multi-select/vscode-multi-select.js.map +1 -1
- package/dist/vscode-single-select/vscode-single-select.d.ts +9 -4
- package/dist/vscode-single-select/vscode-single-select.d.ts.map +1 -1
- package/dist/vscode-single-select/vscode-single-select.js +21 -73
- package/dist/vscode-single-select/vscode-single-select.js.map +1 -1
- package/package.json +2 -1
- package/vscode.css-custom-data.json +7 -7
- package/vscode.html-custom-data.json +13 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VscElement.js","sourceRoot":"","sources":["../../src/includes/VscElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAE/B,MAAM,OAAO,GAAG,cAAc,CAAC;AAC/B,MAAM,UAAU,GAAG,2CAA2C,CAAC;AAE/D,MAAM,OAAO,UAAW,SAAQ,UAAU;IACxC,8BAA8B;IAC9B,IAAI,OAAO;QACT,OAAO,OAAO,CAAC;IACjB,CAAC;CACF;AASD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAE,EAAE;IAC/C,OAAO,CAAC,aAAiC,EAAE,EAAE;QAC3C,MAAM,kBAAkB,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEvD,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACxB,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,aAAyC,CAAC,CAAC;YAC1E,OAAO;QACT,CAAC;QAED,IAAI,UAAU,IAAI,MAAM,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3C,MAAM,cAAc,GAAI,EAAiB,EAAE,OAAO,CAAC;QACnD,IAAI,OAAO,GAAG,EAAE,CAAC;QAEjB,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CACV,OAAO,EACP,mEAAmE,CACpE,CAAC;YACF,OAAO;gBACL,mEAAmE,CAAC;QACxE,CAAC;aAAM,IAAI,cAAc,KAAK,OAAO,EAAE,CAAC;YACtC,OAAO;gBACL,mEAAmE,CAAC;YACtE,OAAO,IAAI,oBAAoB,OAAO,8BAA8B,cAAc,IAAI,CAAC;QACzF,CAAC;aAAM,CAAC;YACN,OAAO;gBACL,gEAAgE,CAAC;QACrE,CAAC;QAED,OAAO,CAAC,IAAI,CACV,qBAAqB,OAAO,IAAI,OAAO,0CAA0C,UAAU,UAAU,CACtG,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {LitElement} from 'lit';\n\nconst VERSION = '1.14.1-pre.
|
|
1
|
+
{"version":3,"file":"VscElement.js","sourceRoot":"","sources":["../../src/includes/VscElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAE/B,MAAM,OAAO,GAAG,cAAc,CAAC;AAC/B,MAAM,UAAU,GAAG,2CAA2C,CAAC;AAE/D,MAAM,OAAO,UAAW,SAAQ,UAAU;IACxC,8BAA8B;IAC9B,IAAI,OAAO;QACT,OAAO,OAAO,CAAC;IACjB,CAAC;CACF;AASD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAe,EAAE,EAAE;IAC/C,OAAO,CAAC,aAAiC,EAAE,EAAE;QAC3C,MAAM,kBAAkB,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEvD,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACxB,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,aAAyC,CAAC,CAAC;YAC1E,OAAO;QACT,CAAC;QAED,IAAI,UAAU,IAAI,MAAM,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3C,MAAM,cAAc,GAAI,EAAiB,EAAE,OAAO,CAAC;QACnD,IAAI,OAAO,GAAG,EAAE,CAAC;QAEjB,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CACV,OAAO,EACP,mEAAmE,CACpE,CAAC;YACF,OAAO;gBACL,mEAAmE,CAAC;QACxE,CAAC;aAAM,IAAI,cAAc,KAAK,OAAO,EAAE,CAAC;YACtC,OAAO;gBACL,mEAAmE,CAAC;YACtE,OAAO,IAAI,oBAAoB,OAAO,8BAA8B,cAAc,IAAI,CAAC;QACzF,CAAC;aAAM,CAAC;YACN,OAAO;gBACL,gEAAgE,CAAC;QACrE,CAAC;QAED,OAAO,CAAC,IAAI,CACV,qBAAqB,OAAO,IAAI,OAAO,0CAA0C,UAAU,UAAU,CACtG,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {LitElement} from 'lit';\n\nconst VERSION = '1.14.1-pre.2';\nconst CONFIG_KEY = '__vscodeElements_disableRegistryWarning__';\n\nexport class VscElement extends LitElement {\n /** VSCode Elements version */\n get version(): string {\n return VERSION;\n }\n}\n\ntype CustomElementClass = Omit<typeof HTMLElement, 'new'>;\n\nexport type Constructor<T> = {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n new (...args: any[]): T;\n};\n\n/**\n * Own implementation of Lit's customElement decorator.\n */\nexport const customElement = (tagName: string) => {\n return (classOrTarget: CustomElementClass) => {\n const customElementClass = customElements.get(tagName);\n\n if (!customElementClass) {\n customElements.define(tagName, classOrTarget as CustomElementConstructor);\n return;\n }\n\n if (CONFIG_KEY in window) {\n return;\n }\n\n const el = document.createElement(tagName);\n const anotherVersion = (el as VscElement)?.version;\n let message = '';\n\n if (!anotherVersion) {\n console.warn(\n tagName,\n 'is already registered by an unknown custom element handler class.'\n );\n message +=\n 'is already registered by an unknown custom element handler class.';\n } else if (anotherVersion !== VERSION) {\n message +=\n 'is already registered by a different version of VSCode Elements. ';\n message += `This version is \"${VERSION}\", while the other one is \"${anotherVersion}\".`;\n } else {\n message +=\n 'is already registered by the same version of VSCode Elements. ';\n }\n\n console.warn(\n `[VSCode Elements] ${tagName} ${message}\\nTo suppress this warning, set window.${CONFIG_KEY} to true`\n );\n };\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/includes/vscode-select/styles.ts"],"names":[],"mappings":";AAGA,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/includes/vscode-select/styles.ts"],"names":[],"mappings":";AAGA,wBAyXE"}
|
|
@@ -183,19 +183,22 @@ export default [
|
|
|
183
183
|
|
|
184
184
|
.option {
|
|
185
185
|
align-items: center;
|
|
186
|
+
box-sizing: border-box;
|
|
186
187
|
color: var(--vscode-foreground, #cccccc);
|
|
187
188
|
cursor: pointer;
|
|
188
189
|
display: flex;
|
|
189
190
|
font-family: var(--vscode-font-family, sans-serif);
|
|
190
191
|
font-size: var(--vscode-font-size, 13px);
|
|
191
192
|
font-weight: var(--vscode-font-weight, normal);
|
|
193
|
+
height: 22px;
|
|
192
194
|
line-height: 18px;
|
|
193
195
|
min-height: calc(var(--vscode-font-size) * 1.3);
|
|
194
196
|
padding: 1px 3px;
|
|
195
197
|
user-select: none;
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
198
|
+
outline-color: transparent;
|
|
199
|
+
outline-offset: -1px;
|
|
200
|
+
outline-style: solid;
|
|
201
|
+
outline-width: 1px;
|
|
199
202
|
}
|
|
200
203
|
|
|
201
204
|
.option b {
|
|
@@ -215,8 +218,9 @@ export default [
|
|
|
215
218
|
.option:hover,
|
|
216
219
|
:host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])
|
|
217
220
|
.option:hover {
|
|
218
|
-
|
|
219
|
-
|
|
221
|
+
outline-style: dotted;
|
|
222
|
+
outline-color: var(--vscode-list-focusOutline, #0078d4);
|
|
223
|
+
outline-width: 1px;
|
|
220
224
|
}
|
|
221
225
|
|
|
222
226
|
.option.disabled {
|
|
@@ -228,9 +232,9 @@ export default [
|
|
|
228
232
|
.option.active:hover {
|
|
229
233
|
background-color: var(--vscode-list-activeSelectionBackground, #04395e);
|
|
230
234
|
color: var(--vscode-list-activeSelectionForeground, #ffffff);
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
235
|
+
outline-color: var(--vscode-list-activeSelectionBackground, #04395e);
|
|
236
|
+
outline-style: solid;
|
|
237
|
+
outline-width: 1px;
|
|
234
238
|
}
|
|
235
239
|
|
|
236
240
|
.no-options {
|
|
@@ -251,12 +255,26 @@ export default [
|
|
|
251
255
|
user-select: none;
|
|
252
256
|
}
|
|
253
257
|
|
|
258
|
+
.placeholder {
|
|
259
|
+
overflow: hidden;
|
|
260
|
+
text-overflow: ellipsis;
|
|
261
|
+
white-space: nowrap;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.placeholder span {
|
|
265
|
+
font-weight: bold;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.placeholder:not(.disabled):hover {
|
|
269
|
+
color: var(--vscode-list-activeSelectionForeground, #ffffff);
|
|
270
|
+
}
|
|
271
|
+
|
|
254
272
|
:host-context(body[data-vscode-theme-kind='vscode-high-contrast'])
|
|
255
273
|
.option.active,
|
|
256
274
|
:host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])
|
|
257
275
|
.option.active:hover {
|
|
258
|
-
|
|
259
|
-
|
|
276
|
+
outline-color: var(--vscode-list-focusOutline, #0078d4);
|
|
277
|
+
outline-style: dashed;
|
|
260
278
|
}
|
|
261
279
|
|
|
262
280
|
.option-label {
|
|
@@ -267,13 +285,13 @@ export default [
|
|
|
267
285
|
|
|
268
286
|
.dropdown.multiple .option.selected {
|
|
269
287
|
background-color: var(--vscode-list-hoverBackground, #2a2d2e);
|
|
270
|
-
|
|
288
|
+
outline-color: var(--vscode-list-hoverBackground, #2a2d2e);
|
|
271
289
|
}
|
|
272
290
|
|
|
273
291
|
.dropdown.multiple .option.selected.active {
|
|
274
292
|
background-color: var(--vscode-list-activeSelectionBackground, #04395e);
|
|
275
293
|
color: var(--vscode-list-activeSelectionForeground, #ffffff);
|
|
276
|
-
|
|
294
|
+
outline-color: var(--vscode-list-activeSelectionBackground, #04395e);
|
|
277
295
|
}
|
|
278
296
|
|
|
279
297
|
.checkbox-icon {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/includes/vscode-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAEjD,eAAe;IACb,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoWF;CACF,CAAC","sourcesContent":["import {css} from 'lit';\nimport defaultStyles from '../default.styles.js';\n\nexport default [\n defaultStyles,\n css`\n :host {\n display: inline-block;\n max-width: 100%;\n outline: none;\n position: relative;\n width: 320px;\n }\n\n .main-slot {\n display: none;\n }\n\n .select-face,\n .combobox-face {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-radius: 2px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-settings-dropdownForeground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n position: relative;\n user-select: none;\n width: 100%;\n }\n\n :host([invalid]) .select-face,\n :host(:invalid) .select-face,\n :host([invalid]) .combobox-face,\n :host(:invalid) .combobox-face {\n background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);\n border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n }\n\n .select-face {\n cursor: pointer;\n display: block;\n padding: 3px 4px;\n }\n\n .select-face .text {\n display: block;\n height: 18px;\n overflow: hidden;\n }\n\n .select-face.multiselect {\n padding: 0;\n }\n\n .select-face-badge {\n background-color: var(--vscode-badge-background, #616161);\n border-radius: 2px;\n color: var(--vscode-badge-foreground, #f8f8f8);\n display: inline-block;\n flex-shrink: 0;\n font-size: 11px;\n line-height: 16px;\n margin: 2px;\n padding: 2px 3px;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n .select-face-badge.no-item {\n background-color: transparent;\n color: inherit;\n }\n\n .combobox-face {\n display: flex;\n }\n\n :host(:focus) .select-face,\n :host(:focus) .combobox-face,\n :host([focused]) .select-face,\n :host([focused]) .combobox-face {\n border-color: var(--vscode-focusBorder, #0078d4);\n outline: none;\n }\n\n .combobox-input {\n background-color: transparent;\n box-sizing: border-box;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n display: block;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n line-height: 16px;\n padding: 4px;\n width: 100%;\n }\n\n .combobox-input:focus {\n outline: none;\n }\n\n .combobox-button {\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n flex-shrink: 0;\n height: 24px;\n margin: 0;\n padding: 0;\n width: 30px;\n }\n\n .combobox-button:focus,\n .combobox-button:hover {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n }\n\n .combobox-button:focus {\n outline: 0;\n }\n\n .icon {\n color: var(--vscode-foreground, #cccccc);\n display: block;\n height: 14px;\n pointer-events: none;\n position: absolute;\n right: 8px;\n top: 5px;\n width: 14px;\n }\n\n .icon svg {\n color: var(--vscode-foreground, #cccccc);\n height: 100%;\n width: 100%;\n }\n\n .dropdown {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownListBorder, #454545);\n border-radius: 0 0 3px 3px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n left: 0;\n padding-bottom: 2px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: var(--dropdown-z-index, 2);\n }\n\n :host([position='above']) .dropdown {\n border-radius: 3px 3px 0 0;\n bottom: 26px;\n padding-bottom: 0;\n padding-top: 2px;\n top: auto;\n }\n\n :host(:focus) .dropdown,\n :host([focused]) .dropdown {\n border-color: var(--vscode-focusBorder, #0078d4);\n }\n\n .options {\n box-sizing: border-box;\n cursor: pointer;\n list-style: none;\n margin: 0;\n max-height: 222px;\n overflow: auto;\n padding: 1px;\n }\n\n .option {\n align-items: center;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n padding: 1px 3px;\n user-select: none;\n border-width: 1px;\n border-style: solid;\n border-color: transparent;\n }\n\n .option b {\n color: var(--vscode-list-highlightForeground, #2aaaff);\n }\n\n .option.active b {\n color: var(--vscode-list-focusHighlightForeground, #2aaaff);\n }\n\n .option:not(.disabled):hover {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n color: var(--vscode-list-hoverForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option:hover,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option:hover {\n border-style: dotted;\n border-color: var(--vscode-list-focusOutline, #0078d4);\n }\n\n .option.disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n .option.active,\n .option.active:hover {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n border-color: var(--vscode-list-activeSelectionBackground, #04395e);\n border-style: solid;\n border-width: 1px;\n }\n\n .no-options {\n align-items: center;\n border-color: transparent;\n border-style: solid;\n border-width: 1px;\n color: var(--vscode-foreground, #cccccc);\n cursor: default;\n display: flex;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n opacity: 0.85;\n padding: 1px 3px;\n user-select: none;\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option.active,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option.active:hover {\n border-color: var(--vscode-list-focusOutline, #0078d4);\n border-style: dashed;\n }\n\n .option-label {\n display: block;\n pointer-events: none;\n width: 100%;\n }\n\n .dropdown.multiple .option.selected {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n border-color: var(--vscode-list-hoverBackground, #2a2d2e);\n }\n\n .dropdown.multiple .option.selected.active {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n border-color: var(--vscode-list-activeSelectionBackground, #04395e);\n }\n\n .checkbox-icon {\n background-color: var(--vscode-settings-checkboxBackground, #313131);\n border: 1px solid currentColor;\n border-radius: 2px;\n box-sizing: border-box;\n height: 14px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n width: 14px;\n }\n\n .checkbox-icon.checked:before,\n .checkbox-icon.checked:after {\n content: '';\n display: block;\n height: 5px;\n position: absolute;\n transform: rotate(-45deg);\n width: 10px;\n }\n\n .checkbox-icon.checked:before {\n background-color: var(--vscode-foreground, #cccccc);\n left: 1px;\n top: 2.5px;\n }\n\n .checkbox-icon.checked:after {\n background-color: var(--vscode-settings-checkboxBackground, #313131);\n left: 1px;\n top: -0.5px;\n }\n\n .dropdown-controls {\n display: flex;\n justify-content: flex-end;\n padding: 4px;\n }\n\n .dropdown-controls :not(:last-child) {\n margin-right: 4px;\n }\n\n .action-icon {\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n }\n\n .action-icon:focus {\n outline: none;\n }\n\n .action-icon:focus-visible {\n outline: 1px solid var(--vscode-focusBorder, #0078d4);\n outline-offset: -1px;\n }\n\n .description {\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-style: solid;\n border-width: 1px 0 0;\n color: var(--vscode-foreground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 1.3;\n padding: 6px 4px;\n word-wrap: break-word;\n }\n\n :host([position='above']) .description {\n border-width: 0 0 1px;\n }\n `,\n];\n"]}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/includes/vscode-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAEjD,eAAe;IACb,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsXF;CACF,CAAC","sourcesContent":["import {css} from 'lit';\nimport defaultStyles from '../default.styles.js';\n\nexport default [\n defaultStyles,\n css`\n :host {\n display: inline-block;\n max-width: 100%;\n outline: none;\n position: relative;\n width: 320px;\n }\n\n .main-slot {\n display: none;\n }\n\n .select-face,\n .combobox-face {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-radius: 2px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-settings-dropdownForeground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n position: relative;\n user-select: none;\n width: 100%;\n }\n\n :host([invalid]) .select-face,\n :host(:invalid) .select-face,\n :host([invalid]) .combobox-face,\n :host(:invalid) .combobox-face {\n background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);\n border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n }\n\n .select-face {\n cursor: pointer;\n display: block;\n padding: 3px 4px;\n }\n\n .select-face .text {\n display: block;\n height: 18px;\n overflow: hidden;\n }\n\n .select-face.multiselect {\n padding: 0;\n }\n\n .select-face-badge {\n background-color: var(--vscode-badge-background, #616161);\n border-radius: 2px;\n color: var(--vscode-badge-foreground, #f8f8f8);\n display: inline-block;\n flex-shrink: 0;\n font-size: 11px;\n line-height: 16px;\n margin: 2px;\n padding: 2px 3px;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n .select-face-badge.no-item {\n background-color: transparent;\n color: inherit;\n }\n\n .combobox-face {\n display: flex;\n }\n\n :host(:focus) .select-face,\n :host(:focus) .combobox-face,\n :host([focused]) .select-face,\n :host([focused]) .combobox-face {\n border-color: var(--vscode-focusBorder, #0078d4);\n outline: none;\n }\n\n .combobox-input {\n background-color: transparent;\n box-sizing: border-box;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n display: block;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n line-height: 16px;\n padding: 4px;\n width: 100%;\n }\n\n .combobox-input:focus {\n outline: none;\n }\n\n .combobox-button {\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n flex-shrink: 0;\n height: 24px;\n margin: 0;\n padding: 0;\n width: 30px;\n }\n\n .combobox-button:focus,\n .combobox-button:hover {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n }\n\n .combobox-button:focus {\n outline: 0;\n }\n\n .icon {\n color: var(--vscode-foreground, #cccccc);\n display: block;\n height: 14px;\n pointer-events: none;\n position: absolute;\n right: 8px;\n top: 5px;\n width: 14px;\n }\n\n .icon svg {\n color: var(--vscode-foreground, #cccccc);\n height: 100%;\n width: 100%;\n }\n\n .dropdown {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownListBorder, #454545);\n border-radius: 0 0 3px 3px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n left: 0;\n padding-bottom: 2px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: var(--dropdown-z-index, 2);\n }\n\n :host([position='above']) .dropdown {\n border-radius: 3px 3px 0 0;\n bottom: 26px;\n padding-bottom: 0;\n padding-top: 2px;\n top: auto;\n }\n\n :host(:focus) .dropdown,\n :host([focused]) .dropdown {\n border-color: var(--vscode-focusBorder, #0078d4);\n }\n\n .options {\n box-sizing: border-box;\n cursor: pointer;\n list-style: none;\n margin: 0;\n max-height: 222px;\n overflow: auto;\n padding: 1px;\n }\n\n .option {\n align-items: center;\n box-sizing: border-box;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n height: 22px;\n line-height: 18px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n padding: 1px 3px;\n user-select: none;\n outline-color: transparent;\n outline-offset: -1px;\n outline-style: solid;\n outline-width: 1px;\n }\n\n .option b {\n color: var(--vscode-list-highlightForeground, #2aaaff);\n }\n\n .option.active b {\n color: var(--vscode-list-focusHighlightForeground, #2aaaff);\n }\n\n .option:not(.disabled):hover {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n color: var(--vscode-list-hoverForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option:hover,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option:hover {\n outline-style: dotted;\n outline-color: var(--vscode-list-focusOutline, #0078d4);\n outline-width: 1px;\n }\n\n .option.disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n .option.active,\n .option.active:hover {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n outline-color: var(--vscode-list-activeSelectionBackground, #04395e);\n outline-style: solid;\n outline-width: 1px;\n }\n\n .no-options {\n align-items: center;\n border-color: transparent;\n border-style: solid;\n border-width: 1px;\n color: var(--vscode-foreground, #cccccc);\n cursor: default;\n display: flex;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n opacity: 0.85;\n padding: 1px 3px;\n user-select: none;\n }\n\n .placeholder {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .placeholder span {\n font-weight: bold;\n }\n\n .placeholder:not(.disabled):hover {\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option.active,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option.active:hover {\n outline-color: var(--vscode-list-focusOutline, #0078d4);\n outline-style: dashed;\n }\n\n .option-label {\n display: block;\n pointer-events: none;\n width: 100%;\n }\n\n .dropdown.multiple .option.selected {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n outline-color: var(--vscode-list-hoverBackground, #2a2d2e);\n }\n\n .dropdown.multiple .option.selected.active {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n outline-color: var(--vscode-list-activeSelectionBackground, #04395e);\n }\n\n .checkbox-icon {\n background-color: var(--vscode-settings-checkboxBackground, #313131);\n border: 1px solid currentColor;\n border-radius: 2px;\n box-sizing: border-box;\n height: 14px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n width: 14px;\n }\n\n .checkbox-icon.checked:before,\n .checkbox-icon.checked:after {\n content: '';\n display: block;\n height: 5px;\n position: absolute;\n transform: rotate(-45deg);\n width: 10px;\n }\n\n .checkbox-icon.checked:before {\n background-color: var(--vscode-foreground, #cccccc);\n left: 1px;\n top: 2.5px;\n }\n\n .checkbox-icon.checked:after {\n background-color: var(--vscode-settings-checkboxBackground, #313131);\n left: 1px;\n top: -0.5px;\n }\n\n .dropdown-controls {\n display: flex;\n justify-content: flex-end;\n padding: 4px;\n }\n\n .dropdown-controls :not(:last-child) {\n margin-right: 4px;\n }\n\n .action-icon {\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n }\n\n .action-icon:focus {\n outline: none;\n }\n\n .action-icon:focus-visible {\n outline: 1px solid var(--vscode-focusBorder, #0078d4);\n outline-offset: -1px;\n }\n\n .description {\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-style: solid;\n border-width: 1px 0 0;\n color: var(--vscode-foreground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 1.3;\n padding: 6px 4px;\n word-wrap: break-word;\n }\n\n :host([position='above']) .description {\n border-width: 0 0 1px;\n }\n `,\n];\n"]}
|
|
@@ -86,10 +86,12 @@ export declare class VscodeSelectBase extends VscElement {
|
|
|
86
86
|
private _disabled;
|
|
87
87
|
private _originalTabIndex;
|
|
88
88
|
protected get _currentOptions(): InternalOption[];
|
|
89
|
+
protected get _isSuggestedOptionVisible(): boolean;
|
|
89
90
|
protected _setStateFromSlottedElements(): void;
|
|
90
91
|
protected _toggleDropdown(visible: boolean): Promise<void>;
|
|
91
92
|
protected _createSuggestedOption(): number;
|
|
92
93
|
protected _dispatchChangeEvent(): void;
|
|
94
|
+
protected _createAndSelectSuggestedOption(): Promise<void>;
|
|
93
95
|
protected _onFaceClick(): void;
|
|
94
96
|
private _onClickOutside;
|
|
95
97
|
private _onMouseMove;
|
|
@@ -98,7 +100,7 @@ export declare class VscodeSelectBase extends VscElement {
|
|
|
98
100
|
protected _onComboboxButtonKeyDown(ev: KeyboardEvent): void;
|
|
99
101
|
protected _onOptionMouseOver(ev: MouseEvent): void;
|
|
100
102
|
protected _onPlaceholderOptionMouseOut(): void;
|
|
101
|
-
protected _onEnterKeyDown(): void;
|
|
103
|
+
protected _onEnterKeyDown(ev: KeyboardEvent): void;
|
|
102
104
|
private _onSpaceKeyDown;
|
|
103
105
|
private _scrollActiveElementToTop;
|
|
104
106
|
private _adjustOptionListScrollPos;
|
|
@@ -111,10 +113,12 @@ export declare class VscodeSelectBase extends VscElement {
|
|
|
111
113
|
protected _onComboboxInputFocus(ev: FocusEvent): void;
|
|
112
114
|
protected _onComboboxInputInput(ev: InputEvent): void;
|
|
113
115
|
protected _onComboboxInputClick(): void;
|
|
116
|
+
protected _onOptionClick(_ev: MouseEvent): void;
|
|
114
117
|
protected _renderOptions(): TemplateResult | TemplateResult[];
|
|
115
|
-
protected _renderPlaceholderOption(): TemplateResult<1> | typeof nothing;
|
|
118
|
+
protected _renderPlaceholderOption(isListEmpty: boolean): TemplateResult<1> | typeof nothing;
|
|
116
119
|
private _renderDescription;
|
|
117
120
|
protected _renderSelectFace(): TemplateResult;
|
|
121
|
+
private _renderMultiSelectLabel;
|
|
118
122
|
protected _renderComboboxFace(): TemplateResult;
|
|
119
123
|
protected _renderDropdownControls(): TemplateResult;
|
|
120
124
|
private _renderDropdown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vscode-select-base.d.ts","sourceRoot":"","sources":["../../../src/includes/vscode-select/vscode-select-base.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"vscode-select-base.d.ts","sourceRoot":"","sources":["../../../src/includes/vscode-select/vscode-select-base.ts"],"names":[],"mappings":"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"}
|
|
@@ -4,16 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import { html, nothing } from 'lit';
|
|
7
|
+
import { html, render, nothing } from 'lit';
|
|
8
8
|
import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
|
|
9
9
|
import { classMap } from 'lit/directives/class-map.js';
|
|
10
|
+
import { repeat } from 'lit/directives/repeat.js';
|
|
10
11
|
import '../../vscode-button/index.js';
|
|
11
12
|
import '../../vscode-option/index.js';
|
|
12
|
-
import { filterOptionsByPattern } from './helpers.js';
|
|
13
|
+
import { filterOptionsByPattern, highlightRanges } from './helpers.js';
|
|
13
14
|
import { VscElement } from '../VscElement.js';
|
|
15
|
+
import { chevronDownIcon } from './template-elements.js';
|
|
14
16
|
const VISIBLE_OPTS = 10;
|
|
15
17
|
const OPT_HEIGHT = 22;
|
|
16
|
-
const LIST_HEIGHT = VISIBLE_OPTS + OPT_HEIGHT + 2;
|
|
17
18
|
/**
|
|
18
19
|
* @cssprop --dropdown-z-index - workaround for dropdown z-index issues
|
|
19
20
|
*/
|
|
@@ -148,7 +149,7 @@ export class VscodeSelectBase extends VscElement {
|
|
|
148
149
|
event.preventDefault();
|
|
149
150
|
}
|
|
150
151
|
if (event.key === 'Enter') {
|
|
151
|
-
this._onEnterKeyDown();
|
|
152
|
+
this._onEnterKeyDown(event);
|
|
152
153
|
}
|
|
153
154
|
if (event.key === ' ') {
|
|
154
155
|
this._onSpaceKeyDown();
|
|
@@ -196,6 +197,11 @@ export class VscodeSelectBase extends VscElement {
|
|
|
196
197
|
get _currentOptions() {
|
|
197
198
|
return this.combobox ? this._filteredOptions : this._options;
|
|
198
199
|
}
|
|
200
|
+
get _isSuggestedOptionVisible() {
|
|
201
|
+
const filterPatternExistsAsOption = typeof this._valueOptionIndexMap[this._filterPattern] !== 'undefined';
|
|
202
|
+
const filtered = this._filterPattern.length > 0;
|
|
203
|
+
return this.combobox && !filterPatternExistsAsOption && filtered;
|
|
204
|
+
}
|
|
199
205
|
_setStateFromSlottedElements() {
|
|
200
206
|
const options = [];
|
|
201
207
|
let nextIndex = 0;
|
|
@@ -254,16 +260,12 @@ export class VscodeSelectBase extends VscElement {
|
|
|
254
260
|
}
|
|
255
261
|
}
|
|
256
262
|
_createSuggestedOption() {
|
|
257
|
-
const
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
selected: true,
|
|
264
|
-
disabled: false,
|
|
265
|
-
});
|
|
266
|
-
return nextIndex;
|
|
263
|
+
const nextSelectedIndex = this._options.length;
|
|
264
|
+
const op = document.createElement('vscode-option');
|
|
265
|
+
op.value = this._filterPattern;
|
|
266
|
+
render(this._filterPattern, op);
|
|
267
|
+
this.appendChild(op);
|
|
268
|
+
return nextSelectedIndex;
|
|
267
269
|
}
|
|
268
270
|
_dispatchChangeEvent() {
|
|
269
271
|
if (!this._multiple) {
|
|
@@ -287,6 +289,7 @@ export class VscodeSelectBase extends VscElement {
|
|
|
287
289
|
this.dispatchEvent(new Event('change'));
|
|
288
290
|
this.dispatchEvent(new Event('input'));
|
|
289
291
|
}
|
|
292
|
+
async _createAndSelectSuggestedOption() { }
|
|
290
293
|
_onFaceClick() {
|
|
291
294
|
this._toggleDropdown(!this.open);
|
|
292
295
|
if (this._multiple) {
|
|
@@ -316,15 +319,29 @@ export class VscodeSelectBase extends VscElement {
|
|
|
316
319
|
if (!el.matches('.option')) {
|
|
317
320
|
return;
|
|
318
321
|
}
|
|
319
|
-
if (
|
|
322
|
+
if (el.matches('.placeholder')) {
|
|
320
323
|
this._isPlaceholderOptionActive = true;
|
|
324
|
+
this._activeIndex = -1;
|
|
325
|
+
}
|
|
326
|
+
else {
|
|
327
|
+
this._isPlaceholderOptionActive = false;
|
|
328
|
+
this._activeIndex = Number(this.combobox ? el.dataset.filteredIndex : el.dataset.index);
|
|
321
329
|
}
|
|
322
|
-
this._activeIndex = Number(this.combobox ? el.dataset.filteredIndex : el.dataset.index);
|
|
323
330
|
}
|
|
324
331
|
_onPlaceholderOptionMouseOut() {
|
|
325
332
|
this._isPlaceholderOptionActive = false;
|
|
326
333
|
}
|
|
327
|
-
_onEnterKeyDown() {
|
|
334
|
+
_onEnterKeyDown(ev) {
|
|
335
|
+
const clickedOnAcceptButton = ev?.composedPath
|
|
336
|
+
? ev
|
|
337
|
+
.composedPath()
|
|
338
|
+
.find((el) => el.matches
|
|
339
|
+
? el.matches('vscode-button.button-accept')
|
|
340
|
+
: false)
|
|
341
|
+
: false;
|
|
342
|
+
if (clickedOnAcceptButton) {
|
|
343
|
+
return;
|
|
344
|
+
}
|
|
328
345
|
const list = this.combobox ? this._filteredOptions : this._options;
|
|
329
346
|
const showDropdownNext = !this.open;
|
|
330
347
|
this._toggleDropdown(showDropdownNext);
|
|
@@ -341,10 +358,7 @@ export class VscodeSelectBase extends VscElement {
|
|
|
341
358
|
}
|
|
342
359
|
if (this.combobox) {
|
|
343
360
|
if (this._isPlaceholderOptionActive) {
|
|
344
|
-
|
|
345
|
-
this._selectedIndex = nextSelectedIndex;
|
|
346
|
-
this._dispatchChangeEvent();
|
|
347
|
-
this._isPlaceholderOptionActive = false;
|
|
361
|
+
this._createAndSelectSuggestedOption();
|
|
348
362
|
}
|
|
349
363
|
else {
|
|
350
364
|
if (!this._multiple && !showDropdownNext) {
|
|
@@ -371,65 +385,88 @@ export class VscodeSelectBase extends VscElement {
|
|
|
371
385
|
}
|
|
372
386
|
if (this.open && this._multiple && this._activeIndex > -1) {
|
|
373
387
|
const opts = this.combobox ? this._filteredOptions : this._options;
|
|
374
|
-
const
|
|
375
|
-
|
|
376
|
-
this.
|
|
377
|
-
opts.forEach(({ index
|
|
388
|
+
const selectedOption = opts[this._activeIndex];
|
|
389
|
+
const nextSelectedIndexes = [];
|
|
390
|
+
this._options[selectedOption.index].selected = !selectedOption.selected;
|
|
391
|
+
opts.forEach(({ index }) => {
|
|
392
|
+
const { selected } = this._options[index];
|
|
378
393
|
if (selected) {
|
|
379
|
-
|
|
394
|
+
nextSelectedIndexes.push(index);
|
|
380
395
|
}
|
|
381
396
|
});
|
|
397
|
+
this._selectedIndexes = nextSelectedIndexes;
|
|
382
398
|
}
|
|
383
399
|
}
|
|
384
400
|
_scrollActiveElementToTop() {
|
|
385
401
|
this._listElement.scrollTop = Math.floor(this._activeIndex * OPT_HEIGHT);
|
|
386
402
|
}
|
|
387
|
-
async _adjustOptionListScrollPos(direction) {
|
|
388
|
-
|
|
403
|
+
async _adjustOptionListScrollPos(direction, optionIndex) {
|
|
404
|
+
let numOpts = this.combobox
|
|
389
405
|
? this._filteredOptions.length
|
|
390
406
|
: this._options.length;
|
|
407
|
+
const suggestedOptionVisible = this._isSuggestedOptionVisible;
|
|
408
|
+
if (suggestedOptionVisible) {
|
|
409
|
+
numOpts += 1;
|
|
410
|
+
}
|
|
391
411
|
if (numOpts <= VISIBLE_OPTS) {
|
|
392
412
|
return;
|
|
393
413
|
}
|
|
394
414
|
this._isHoverForbidden = true;
|
|
395
415
|
window.addEventListener('mousemove', this._onMouseMove);
|
|
396
|
-
if (!this._listElement) {
|
|
397
|
-
await this.updateComplete;
|
|
398
|
-
}
|
|
399
416
|
const ulScrollTop = this._listElement.scrollTop;
|
|
400
|
-
const liPosY =
|
|
417
|
+
const liPosY = optionIndex * OPT_HEIGHT;
|
|
418
|
+
const fullyVisible = liPosY >= ulScrollTop &&
|
|
419
|
+
liPosY <= ulScrollTop + VISIBLE_OPTS * OPT_HEIGHT - OPT_HEIGHT;
|
|
401
420
|
if (direction === 'down') {
|
|
402
|
-
if (
|
|
421
|
+
if (!fullyVisible) {
|
|
403
422
|
this._listElement.scrollTop =
|
|
404
|
-
|
|
423
|
+
optionIndex * OPT_HEIGHT - (VISIBLE_OPTS - 1) * OPT_HEIGHT;
|
|
405
424
|
}
|
|
406
425
|
}
|
|
407
426
|
if (direction === 'up') {
|
|
408
|
-
if (
|
|
409
|
-
this.
|
|
427
|
+
if (!fullyVisible) {
|
|
428
|
+
this._listElement.scrollTop = Math.floor(this._activeIndex * OPT_HEIGHT);
|
|
410
429
|
}
|
|
411
430
|
}
|
|
412
431
|
}
|
|
413
432
|
_onArrowUpKeyDown() {
|
|
414
433
|
if (this.open) {
|
|
415
|
-
if (this._activeIndex <= 0) {
|
|
434
|
+
if (this._activeIndex <= 0 && !(this.combobox && this.creatable)) {
|
|
416
435
|
return;
|
|
417
436
|
}
|
|
418
|
-
this.
|
|
419
|
-
|
|
437
|
+
if (this._isPlaceholderOptionActive) {
|
|
438
|
+
const optionIndex = this._currentOptions.length - 1;
|
|
439
|
+
this._activeIndex = optionIndex;
|
|
440
|
+
this._isPlaceholderOptionActive = false;
|
|
441
|
+
}
|
|
442
|
+
else {
|
|
443
|
+
const optionIndex = Math.max(this._activeIndex - 1, 0);
|
|
444
|
+
this._activeIndex = optionIndex;
|
|
445
|
+
this._adjustOptionListScrollPos('up', optionIndex);
|
|
446
|
+
}
|
|
420
447
|
}
|
|
421
448
|
}
|
|
422
449
|
_onArrowDownKeyDown() {
|
|
450
|
+
let numOpts = this.combobox
|
|
451
|
+
? this._filteredOptions.length
|
|
452
|
+
: this._options.length;
|
|
453
|
+
const suggestedOptionVisible = this._isSuggestedOptionVisible;
|
|
454
|
+
if (suggestedOptionVisible) {
|
|
455
|
+
numOpts += 1;
|
|
456
|
+
}
|
|
423
457
|
if (this.open) {
|
|
424
|
-
if (this.
|
|
425
|
-
this._isPlaceholderOptionActive = true;
|
|
458
|
+
if (this._isPlaceholderOptionActive && this._activeIndex === -1) {
|
|
426
459
|
return;
|
|
427
460
|
}
|
|
428
|
-
if (this._activeIndex
|
|
429
|
-
|
|
461
|
+
if (suggestedOptionVisible && this._activeIndex === numOpts - 2) {
|
|
462
|
+
this._isPlaceholderOptionActive = true;
|
|
463
|
+
this._adjustOptionListScrollPos('down', numOpts - 1);
|
|
464
|
+
this._activeIndex = -1;
|
|
465
|
+
}
|
|
466
|
+
else if (this._activeIndex < numOpts - 1) {
|
|
467
|
+
this._activeIndex += 1;
|
|
468
|
+
this._adjustOptionListScrollPos('down', this._activeIndex);
|
|
430
469
|
}
|
|
431
|
-
this._activeIndex += 1;
|
|
432
|
-
this._adjustOptionListScrollPos('down');
|
|
433
470
|
}
|
|
434
471
|
}
|
|
435
472
|
_onSlotChange() {
|
|
@@ -447,14 +484,56 @@ export class VscodeSelectBase extends VscElement {
|
|
|
447
484
|
_onComboboxInputClick() {
|
|
448
485
|
this._toggleDropdown(true);
|
|
449
486
|
}
|
|
487
|
+
_onOptionClick(_ev) {
|
|
488
|
+
return;
|
|
489
|
+
}
|
|
450
490
|
_renderOptions() {
|
|
451
|
-
|
|
491
|
+
const list = this.combobox ? this._filteredOptions : this._options;
|
|
492
|
+
return html `
|
|
493
|
+
<ul
|
|
494
|
+
class="options"
|
|
495
|
+
@click=${this._onOptionClick}
|
|
496
|
+
@mouseover=${this._onOptionMouseOver}
|
|
497
|
+
>
|
|
498
|
+
${repeat(list, (op) => op.index, (op, index) => {
|
|
499
|
+
const optionClasses = {
|
|
500
|
+
active: index === this._activeIndex && !op.disabled,
|
|
501
|
+
disabled: op.disabled,
|
|
502
|
+
option: true,
|
|
503
|
+
selected: op.selected,
|
|
504
|
+
};
|
|
505
|
+
const checkboxClasses = {
|
|
506
|
+
'checkbox-icon': true,
|
|
507
|
+
checked: op.selected,
|
|
508
|
+
};
|
|
509
|
+
const labelText = (op.ranges?.length ?? 0 > 0)
|
|
510
|
+
? highlightRanges(op.label, op.ranges ?? [])
|
|
511
|
+
: op.label;
|
|
512
|
+
return html `
|
|
513
|
+
<li
|
|
514
|
+
class=${classMap(optionClasses)}
|
|
515
|
+
data-index=${op.index}
|
|
516
|
+
data-filtered-index=${index}
|
|
517
|
+
>
|
|
518
|
+
${this._multiple
|
|
519
|
+
? html `<span class=${classMap(checkboxClasses)}></span
|
|
520
|
+
><span class="option-label">${labelText}</span>`
|
|
521
|
+
: labelText}
|
|
522
|
+
</li>
|
|
523
|
+
`;
|
|
524
|
+
})}
|
|
525
|
+
${this._renderPlaceholderOption(list.length < 1)}
|
|
526
|
+
</ul>
|
|
527
|
+
`;
|
|
452
528
|
}
|
|
453
|
-
_renderPlaceholderOption() {
|
|
529
|
+
_renderPlaceholderOption(isListEmpty) {
|
|
454
530
|
if (!this.combobox) {
|
|
455
531
|
return nothing;
|
|
456
532
|
}
|
|
457
|
-
if (this.
|
|
533
|
+
if (this._valueOptionIndexMap[this._filterPattern]) {
|
|
534
|
+
return nothing;
|
|
535
|
+
}
|
|
536
|
+
if (this.creatable && this._filterPattern.length > 0) {
|
|
458
537
|
return html `<li
|
|
459
538
|
class=${classMap({
|
|
460
539
|
option: true,
|
|
@@ -467,7 +546,9 @@ export class VscodeSelectBase extends VscElement {
|
|
|
467
546
|
</li>`;
|
|
468
547
|
}
|
|
469
548
|
else {
|
|
470
|
-
return
|
|
549
|
+
return isListEmpty
|
|
550
|
+
? html `<li class="no-options">No options</li>`
|
|
551
|
+
: nothing;
|
|
471
552
|
}
|
|
472
553
|
}
|
|
473
554
|
_renderDescription() {
|
|
@@ -482,8 +563,45 @@ export class VscodeSelectBase extends VscElement {
|
|
|
482
563
|
_renderSelectFace() {
|
|
483
564
|
return html `${nothing}`;
|
|
484
565
|
}
|
|
566
|
+
_renderMultiSelectLabel() {
|
|
567
|
+
switch (this._selectedIndexes.length) {
|
|
568
|
+
case 0:
|
|
569
|
+
return html `<span class="select-face-badge no-item"
|
|
570
|
+
>No items selected</span
|
|
571
|
+
>`;
|
|
572
|
+
case 1:
|
|
573
|
+
return html `<span class="select-face-badge">1 item selected</span>`;
|
|
574
|
+
default:
|
|
575
|
+
return html `<span class="select-face-badge"
|
|
576
|
+
>${this._selectedIndexes.length} items selected</span
|
|
577
|
+
>`;
|
|
578
|
+
}
|
|
579
|
+
}
|
|
485
580
|
_renderComboboxFace() {
|
|
486
|
-
|
|
581
|
+
const inputVal = this._selectedIndex > -1 ? this._options[this._selectedIndex]?.label : '';
|
|
582
|
+
return html `
|
|
583
|
+
<div class="combobox-face face">
|
|
584
|
+
${this._multiple ? this._renderMultiSelectLabel() : nothing}
|
|
585
|
+
<input
|
|
586
|
+
class="combobox-input"
|
|
587
|
+
spellcheck="false"
|
|
588
|
+
type="text"
|
|
589
|
+
autocomplete="off"
|
|
590
|
+
.value=${inputVal}
|
|
591
|
+
@focus=${this._onComboboxInputFocus}
|
|
592
|
+
@input=${this._onComboboxInputInput}
|
|
593
|
+
@click=${this._onComboboxInputClick}
|
|
594
|
+
>
|
|
595
|
+
<button
|
|
596
|
+
class="combobox-button"
|
|
597
|
+
type="button"
|
|
598
|
+
@click=${this._onComboboxButtonClick}
|
|
599
|
+
@keydown=${this._onComboboxButtonKeyDown}
|
|
600
|
+
>
|
|
601
|
+
${chevronDownIcon}
|
|
602
|
+
</button>
|
|
603
|
+
</div>
|
|
604
|
+
`;
|
|
487
605
|
}
|
|
488
606
|
_renderDropdownControls() {
|
|
489
607
|
return html `${nothing}`;
|