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.

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.

It'd be nice if the vscode-inputbox component could support maxlength property.

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!

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.

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

vsc-select event is is still working and vsc-tree-select is just returning null.

Is it possible to unselect a tree item?

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:

1. Downloaded only codicon css and import in my React Component likie import './styles/codeicon.css', but it doesnt work
2. Installed codeicon from npm https://www.npmjs.com/package/@vscode/codicons, imported codeicon css from dist library, ut it doesnt work
   When i try to use this code (from @vscode/codicons examples)
   <div class="icon"><i class="codicon codicon-arrow-left"></i></div>
   icons works, but it doesnt with your package

Do you have any example of how to use vscode-icon with react?

my settings rn:

1. global.d.ts
   `import { Children, DOMAttributes } from 'react';
   import {
   VscodeBadge,
   VscodeButton,
   VscodeCheckbox,
   VscodeCheckboxGroup,
   VscodeCollapsible,
   VscodeContextMenu,
   VscodeContextMenuItem,
   VscodeFormContainer,
   VscodeFormGroup,
   VscodeFormHelper,
   VscodeIcon,
   VscodeLabel,
   VscodeMultiSelect,
   VscodeOption,
   VscodeRadio,
   VscodeRadioGroup,
   VscodeScrollable,
   VscodeSingleSelect,
   VscodeSplitLayout,
   VscodeTabHeader,
   VscodeTable,
   VscodeTableBody,
   VscodeTableCell,
   VscodeTableHeader,
   VscodeTableHeaderCell,
   VscodeTableRow,
   VscodeTabPanel,
   VscodeTabs,
   VscodeTextarea,
   VscodeTextfield,
   VscodeTree,
   } from '@bendera/vscode-webview-elements';

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">

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>

Currently, the dropdown panel of the Select component always shows below the element. Let be configurable with the following values:

• Default: dropdown shows below the element by default. If the element is close to the bottom edge, the dropdown shows above the element.
• Above: Always shows above the element
• Below: Always show below the element

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.

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.

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.

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.

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

How can I add checkbox to tree item labels and other menu action?
How to add click action on item click

Is it possible to add a tooltip in the tree item? Similar to:

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

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.

• The issue occured when I used a 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.

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?

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.

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!

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 Inputfields.

Thanks for your great work!

Is it possible to add an item description as VSCode tree?

(you can see the description in grey)