vscode-elements / elements Goto Github PK
View Code? Open in Web Editor NEWWeb component library for developing Visual Studio Code extensions
Home Page: https://vscode-elements.github.io
License: MIT License
Web component library for developing Visual Studio Code extensions
Home Page: https://vscode-elements.github.io
License: MIT License
Is there a way to programmatically update the selected option of a single-select (not in Combobox mode)?
I tried setting value
and selectedIndex
, however this does not update _labelText
, therefore the label is not updated
I could change the slotted elements (as this would result in _onSlotChange
being called), however I think this is more a hack than a solution
Hey, no issue as such, but more of a thank you.
I have been struggling to make UI for my extension for such a long time. It was hard to support different themes... but your library just works!
Here's a simple login form I made using it (and am about to ship it).
Also, to make it easy for my extension to add more UI I made a simple class (see the docs here) so I never have to write any HTML again.
Again - thanks for the excellent work.
The documentation mentions type IconType = 'themeicon' | 'image'
, but it doesn't explain how to use it. I would be interested in how to use the icon theme that the user has selected (file and folder icons: Minimal, Seti, and themes that come with plugins), to display the same file trees. It would be nice to see these explanations in the updated documentation.
It'd be nice if the vscode-inputbox
component could support maxlength
property.
I'm having problems to see the icons:
import "@vscode-elements/elements/dist/vscode-tree";
const tree = <any>document.getElementById("scope-tree");
const icons = {
branch: 'folder',
leaf: 'file',
open: 'folder-opened',
};
const data = [
{
icons,
label: 'node_modules',
value: 'black hole',
subItems: [
{
icons,
label: '.bin',
subItems: [
{ icons, label: '_mocha_' },
{ icons, label: '_mocha.cmd_' },
{ icons, label: '_mocha.ps1_' },
{ icons, label: 'acorn' },
{ icons, label: 'acorn.cmd' },
{ icons, label: 'acorn.ps1' },
],
},
{
icons,
label: '@11ty',
open: true,
subItems: [
{ icons, label: 'lorem.js' },
{ icons, label: 'ipsum.js' },
{ icons, label: 'dolor.js' },
],
},
{ icons, label: '.DS_Store' },
],
},
{
icons,
label: 'scripts',
subItems: [
{ icons, label: 'build.js' },
{ icons, label: 'start.js' },
],
},
{ icons, label: '.editorconfig', selected: true },
{ icons, label: '2021-01-18T22_10_20_535Z-debug.log' },
];
tree.data = data;
tree.addEventListener('vsc-select', (event) => {
console.log(event.detail);
});
In the HTML
<vscode-tree id="scope-tree" arrows></vscode-tree>
I was developing a form using the vscode-form-container
, but when I tried to access the data of the form I just get a portion. The input areas declared using vscode-textfield
do not show up, but those declared using vscode-inputbox
do appear in the form data.
Hello! I found a problem while browsering RadioGroup
webpage. When I repeatedly click on the Radio
of the RadioGroup
component, it will be unchecked, and clicking again will not be selected.
I tried using the Radio
component alone, it works correctly, so I suspect there is a problem with the logic of the RadioGroup
component.
Thank you for your hard work and excellent package!
Thanks for offering this great package!
It would be nice if the library could expose types for the vsc-change
event based on given element. Let me know if this makes sense and I could look into adding it.
Is it possible to unselect a tree item?
checked
attribute with a vscode-radio. When you check other vscode-radio
components inside the vscode-radio-group
, the one that has checked
attribute doesn't get unchecked until you unckeck it manually.Hey, we're working on some new custom forms for vscode-ibmi and was wondering if it would be possible to add invalid
to SingleSelect
, similar to how it works for Inputfield
s.
Thanks for your great work!
First off, awesome work & thank you for 0.3!
I am trying to build some new UI using your tree view, but mostly as a clickable list.
I have it working really well - except the icons do not show up!
Here is a screenshot of what I have:
Here is how I am building my array:
{
icons: {
leaf: `plus`
},
label: `New Action`,
value: `-1`
},
...allActions.map((action, index) => ({
icons: {
leaf: `debug-start`
},
label: `${action.name} (${action.type}: ${action.extensions.join(`, `)})`,
value: String(index)
}))
I can see from the developer tools.. it looks correct:
<span class="codicon codicon-debug-start" style="animation-duration: 1.5s; font-size: 16px; height: 16px; width: 16px;"></span>
Wondering if you had any pointers? Thanks!
Good day! Thank you for your webkit, it is really powerfull!
I tried to use vscode icon in my react webview project, but it doesnt work :(
What I already tried to do:
<div class="icon"><i class="codicon codicon-arrow-left"></i></div>
Do you have any example of how to use vscode-icon with react?
my settings rn:
type CustomElement = Partial<T & DOMAttributes & { children: Children }>;
declare global {
namespace React.JSX {
interface IntrinsicElements {
['vscode-badge']: CustomElement;
['vscode-button']: CustomElement;
['vscode-checkbox']: CustomElement;
['vscode-checkbox-group']: CustomElement;
['vscode-collapsible']: CustomElement;
['vscode-context-menu']: CustomElement;
['vscode-context-menu-item']: CustomElement;
['vscode-form-container']: CustomElement;
['vscode-form-group']: CustomElement;
['vscode-form-helper']: CustomElement;
['vscode-icon']: CustomElement;
['vscode-label']: CustomElement;
['vscode-multi-select']: CustomElement;
['vscode-option']: CustomElement;
['vscode-radio']: CustomElement;
['vscode-radio-group']: CustomElement;
['vscode-scrollable']: CustomElement;
['vscode-single-select']: CustomElement;
['vscode-split-layout']: CustomElement;
['vscode-tab-header']: CustomElement;
['vscode-tab-panel']: CustomElement;
['vscode-table']: CustomElement;
['vscode-table-body']: CustomElement;
['vscode-table-cell']: CustomElement;
['vscode-table-header']: CustomElement;
['vscode-table-header-cell']: CustomElement;
['vscode-table-row']: CustomElement;
['vscode-tabs']: CustomElement;
['vscode-textarea']: CustomElement;
['vscode-textfield']: CustomElement;
['vscode-tree']: CustomElement;
}
}
}
`
how i use it
import '@bendera/vscode-webview-elements/dist/vscode-button/index.js';
<vscode-button icon="play" secondary className="flex flex-row justify-end gap-1">
How can I add checkbox to tree item labels and other menu action?
How to add click action on item click
vsc-select event is is still working and vsc-tree-select is just returning null.
First of all: this is so awesome! Thank you for making it. I'm far from new to extension development, but am essentially a beginner when it comes to web dev. I was about to just clone and tinker with it/figure out what I don't know, but I thought this might help you out...
I imagine a large demographic for the project will be people like me, who are looking for premade components because of that lack of experience, though they might get spooked.
It might help adoption (and me!) if the docs are a little more approachable. :)
If you're like me, but the opposite, you might not know what's unapproachable about it. Let me know.
Hi!
We are using the old input box like so:
<vscode-inputbox type="file" id="thefile" name="fileselect"></vscode-inputbox>
which allows users to select a file.
I see in the docs that we should be switching to Textfield
, but it doesn't look like it supports type=file
.
Any suggestions on what we could do for this?
Firstly, great components!!
I found a small issue with the tab's.
If you have other elements inside the header, eg:
I think the reason is due to the target element not having the dataset.index value (as it's the div not header element) as per the code here: https://github.com/bendera/vscode-webview-elements/blob/master/src/vscode-tabs.ts#L57
The :host-context
pseudo selector is used in many places. Since it is not supported by Safari and Safari is the only available browser engine on Mac, it should find another solution.
Looking at ways to add validation to the various form elements.. Wondering if you have come up with anything ?
Best I have got so far, is using https://www.npmjs.com/package/lite-form#examples but haven't gone to the lengths yet of styling the inputs on error states etc. so before I started going down that path wanted to check if you had recommendations for a better approach.
Right now when we using vscode-checkbox, it only has checked or not status.
That will be great if there is the indeterminate attr, then it will have more chances to use this elem.
I'm using vscode-tree component, the file tree rendered normally, but the icons didnt show even thought i set icons to the tree data;
the elements are like this
and i have already set csp like
fontSrc: webview.cspSource,
styleSrc: webview.cspSource,
the vscode-icon is normally shown when using https://github.com/microsoft/vscode-webview-ui-toolkit ,but not with this
Tried using px as in the example columns='["100px", "auto"]'
but that did not work at all. After looking the code I saw it also accepts percentages and using that works fine.
Currently, the dropdown panel of the Select component always shows below the element. Let be configurable with the following values:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.