@vscode-elements/elements 2.0.0-pre.1 → 2.0.0-pre.3

package/dist/vscode-tree/vscode-tree.d.ts

@@ -1,164 +1,117 @@
-import { TemplateResult } from 'lit';
-import { VscElement } from '../includes/VscElement.js';
-import '../vscode-badge/index.js';
-import '../vscode-icon/index.js';
-export type VscTreeActionEvent = CustomEvent<{
-    actionId: string;
-    item: TreeItem | null;
-    value: string;
-}>;
+import { PropertyValues, TemplateResult } from 'lit';
+import { VscElement } from '../includes/VscElement';
+import type { VscodeTreeItem } from '../vscode-tree-item';
 export type VscTreeSelectEvent = CustomEvent<{
-    icons: {
-        branch?: string;
-        open?: string;
-        leaf?: string;
-    };
-    itemType: 'branch' | 'leaf';
-    label: string;
-    open: boolean;
-    value: string;
-    path: string;
+    selectedItems: VscodeTreeItem[];
 }>;
-export interface TreeItemIconConfig {
-    branch?: string;
-    open?: string;
-    leaf?: string;
-}
-/** Action icon configuration. */
-export interface TreeItemAction {
-    /** A unique name that identifies the clicked action item. */
-    actionId: string;
-    /** A Codicon name. */
-    icon: string;
-    /** Text description of the action. */
-    tooltip?: string;
-}
-/**
- * The decoration is additional content on the right side of the tree item. It can be a short text,
- * a counter, or a small, filled circle. A color can be defined for the different states. If
- * multiple states are applied to the item, the color with higher precedence will be used. The color
- * precedence from higher to lower is selected, focused, hover, normal. Colors will not be applied
- * to the counter badge.
- */
-export interface TreeItemDecoration {
-    /** Text content of the decoration. If the appearance is `filled-circle`, it will be ignored. */
-    content?: string;
-    /** Appearance of the decoration. */
-    appearance?: 'text' | 'counter-badge' | 'filled-circle';
-    /**
-     * When is decoration visible?
-     * - `active`: visible when the tree item is focused, selected or hovered
-     * - `normal`: visible when there is not any interaction on the tree item
-     * - `always`: always visible
-     */
-    visibleWhen?: 'active' | 'normal' | 'always';
-    /** A valid CSS property value to define a default color. */
-    color?: string;
-    /** A valid CSS property value to define the color for the mouse over state. */
-    hoverColor?: string;
-    /** A valid CSS property value to define the color for the focused state. */
-    focusedColor?: string;
-    /** A valid CSS property value to define the color for the selected state. */
-    selectedColor?: string;
-}
-export interface TreeItem {
-    label: string;
-    description?: string;
-    tooltip?: string;
-    subItems?: TreeItem[];
-    actions?: TreeItemAction[];
-    open?: boolean;
-    selected?: boolean;
-    focused?: boolean;
-    hasSelectedItem?: boolean;
-    hasFocusedItem?: boolean;
-    icons?: TreeItemIconConfig | boolean;
-    iconUrls?: TreeItemIconConfig;
-    value?: string;
-    path?: number[];
-    decorations?: TreeItemDecoration[];
-}
+export declare const ExpandMode: {
+    readonly singleClick: "singleClick";
+    readonly doubleClick: "doubleClick";
+};
+export type ExpandMode = (typeof ExpandMode)[keyof typeof ExpandMode];
+export declare const IndentGuides: {
+    readonly none: "none";
+    readonly onHover: "onHover";
+    readonly always: "always";
+};
+export type IndentGuideDisplay = (typeof IndentGuides)[keyof typeof IndentGuides];
 /**
  * @tag vscode-tree
- *
- * @fires vsc-select Dispatched when an item is selected.
- * @fires {VscTreeSelectEvent} vsc-tree-select Dispatched when an item is selected.
- * @fires vsc-run-action Dispatched when an action icon is clicked.
- * @fires {VscTreeActionEvent} vsc-tree-action Dispatched when an action icon is clicked.
- *
- * @cssprop --vscode-focusBorder
- * @cssprop --vscode-font-family
- * @cssprop --vscode-font-size
- * @cssprop --vscode-font-weight
- * @cssprop --vscode-list-hoverForeground
- * @cssprop --vscode-list-hoverBackground
- * @cssprop --vscode-list-inactiveSelectionBackground
- * @cssprop --vscode-list-inactiveSelectionForeground
- * @cssprop --vscode-list-activeSelectionBackground
- * @cssprop --vscode-list-activeSelectionForeground
- * @cssprop --vscode-list-inactiveSelectionIconForeground
- * @cssprop --vscode-list-inactiveFocusBackground
- * @cssprop --vscode-list-inactiveFocusOutline
- * @cssprop --vscode-list-focusOutline
- * @cssprop --vscode-tree-inactiveIndentGuidesStroke
- * @cssprop --vscode-tree-indentGuidesStroke
- *
- * @csspart text-content
- * @csspart description
- * @csspart counter-badge-decoration
- * @csspart filled-circle-decoration
- * @csspart caption-decoration
- * @csspart decorations Container of decorations
  */
 export declare class VscodeTree extends VscElement {
     static styles: import("lit").CSSResultGroup;
-    set data(val: TreeItem[]);
-    get data(): TreeItem[];
-    indent: number;
-    arrows: boolean;
-    multiline: boolean;
-    tabindex: number;
-    indentGuides: boolean;
-    private _data;
-    private _selectedItem;
-    private _focusedItem;
-    private _selectedBranch;
-    private _focusedBranch;
     /**
-     * Closes all opened tree items recursively.
+     * Although arrows are always visible in the Tree component by default in VSCode, some icon sets
+     * (e.g., Material Icon Theme) allow disabling them in the file explorer view. This flag makes it
+     * possible to mimic that behavior.
+     *
+     * @type {boolean}
+     * @default false
      */
-    closeAll(): void;
+    hideArrows: boolean;
     /**
-     * Deselects all selected items.
+     * Controls how tree folders are expanded when clicked. This property is designed to use
+     * the `workbench.tree.expandMode` setting.
+     *
+     * Valid options are available as constants.
+     *
+     * ```javascript
+     * import {ExpandMode} from '@vscode-elements/elements/dist/vscode-tree/vscode-tree.js';
+     *
+     * document.querySelector('vscode-tree').expandMode = ExpandMode.singleClick;
+     * ```
+     *
+     * @type {'singleClick' | 'doubleClick'}
+     * @default 'singleClick'
      */
-    deselectAll(): void;
+    expandMode: ExpandMode;
     /**
-     * Returns a reference to a TreeItem object by path.
-     * @param path
-     * @returns
+     * Controls the indentation in pixels. This property is designed to use the
+     * `workbench.tree.indent` setting.
+     *
+     * @type {number}
+     * @default 8
      */
-    getItemByPath(path: number[]): TreeItem | null;
+    indent: number;
+    /**
+     * Controls whether the tree should render indent guides. This property is
+     * designed to use the `workbench.tree.renderIndentGuides` setting.
+     *
+     * Valid options are available as constants.
+     *
+     * ```javascript
+     * import {IndentGuides} from '@vscode-elements/elements/dist/vscode-tree/vscode-tree.js';
+     *
+     * document.querySelector('vscode-tree').expandMode = IndentGuides.onHover;
+     * ```
+     *
+     * @type {'none' | 'onHover' | 'always'}
+     * @default 'onHover'
+     */
+    indentGuides: IndentGuideDisplay;
+    /**
+     * Allows selecting multiple items.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    multiSelect: boolean;
+    private _treeContextState;
+    private _configContext;
+    private _assignedTreeItems;
+    constructor();
     connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _getItemByPath;
-    private _handleActionClick;
-    private _renderIconVariant;
-    private _renderIcon;
-    private _renderArrow;
-    private _renderActions;
-    private _renderDecorations;
-    private _renderTreeItem;
-    private _renderTree;
-    private _selectItem;
-    private _focusItem;
-    private _closeSubTreeRecursively;
-    private _deselectItemsRecursively;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /**
+     * Expands all folders.
+     */
+    expandAll(): void;
+    /**
+     * Collapses all folders.
+     */
+    collapseAll(): void;
+    /**
+     * @internal
+     * Updates `hasBranchItem` property in the context state in order to removing
+     * extra padding before the leaf elements, if it is required.
+     */
+    updateHasBranchItemFlag(): void;
     private _emitSelectEvent;
+    private _highlightIndentGuideOfItem;
+    private _highlightIndentGuides;
+    private _updateConfigContext;
+    private _focusItem;
     private _focusPrevItem;
     private _focusNextItem;
-    private _handleClick;
+    private _handleArrowRightPress;
+    private _handleArrowLeftPress;
+    private _handleArrowDownPress;
+    private _handleArrowUpPress;
+    private _handleEnterPress;
+    private _handleShiftPress;
     private _handleComponentKeyDown;
-    private _handleComponentKeyDownBound;
+    private _handleComponentKeyUp;
+    private _handleSlotChange;
     render(): TemplateResult;
 }
 declare global {
@@ -167,7 +120,6 @@ declare global {
     }
     interface GlobalEventHandlersEventMap {
         'vsc-tree-select': VscTreeSelectEvent;
-        'vsc-tree-action': VscTreeActionEvent;
     }
 }
 //# sourceMappingURL=vscode-tree.d.ts.map

package/dist/vscode-tree/vscode-tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-tree.d.ts","sourceRoot":"","sources":["../../src/vscode-tree/vscode-tree.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"vscode-tree.d.ts","sourceRoot":"","sources":["../../src/vscode-tree/vscode-tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAE,cAAc,EAAO,MAAM,KAAK,CAAC;AAOzD,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAexD,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC;IAAC,aAAa,EAAE,cAAc,EAAE,CAAA;CAAC,CAAC,CAAC;AAEhF,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAEtE,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAC5B,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AA4BnD;;GAEG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,+BAAU;IAIhC;;;;;;;OAOG;IAEH,UAAU,EAAE,OAAO,CAAuB;IAE1C;;;;;;;;;;;;;;OAcG;IAEH,UAAU,EAAE,UAAU,CAAuB;IAE7C;;;;;;OAMG;IAEH,MAAM,EAAE,MAAM,CAAkB;IAEhC;;;;;;;;;;;;;;OAcG;IAOH,YAAY,EAAE,kBAAkB,CAAgC;IAEhE;;;;;OAKG;IAEH,WAAW,EAAE,OAAO,CAAwB;IAO5C,OAAO,CAAC,iBAAiB,CAiBvB;IAGF,OAAO,CAAC,cAAc,CAMpB;IAGF,OAAO,CAAC,kBAAkB,CAAoB;;IAarC,iBAAiB,IAAI,IAAI;cAMf,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAY5E;;OAEG;IACH,SAAS;IAUT;;OAEG;IACH,WAAW;IAUX;;;;OAIG;IACH,uBAAuB;IASvB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,2BAA2B;IAcnC,OAAO,CAAC,sBAAsB;IAmB9B,OAAO,CAAC,oBAAoB;IAwB5B,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,qBAAqB;IA4B7B,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,uBAAuB,CA8B7B;IAEF,OAAO,CAAC,qBAAqB,CAI3B;IAEF,OAAO,CAAC,iBAAiB,CAevB;IAIO,MAAM,IAAI,cAAc;CAKlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;IAED,UAAU,2BAA2B;QACnC,iBAAiB,EAAE,kBAAkB,CAAC;KACvC;CACF"}