@tuidom/elements 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,28 @@
+# @tuidom/elements
+
+Widgets for [TUIDom](https://github.com/tuidom/tuidom): boxes, flex containers,
+text, buttons, inputs, lists (virtualized), trees, menus, quick pick,
+scrollbars, editor tabs, workbench shell, embedded-terminal view.
+
+> ⚠️ Experimental — the API is unstable, deep imports expose internals on purpose.
+
+```sh
+npm install @tuidom/core @tuidom/elements @tuidom/terminal-backend
+```
+
+```ts
+import { TuiApplication } from "@tuidom/core/dom/tuiApplication";
+import { BodyElement } from "@tuidom/elements/body/bodyElement";
+import { BoxElement } from "@tuidom/elements/layout/boxElement";
+import { NodeTerminalBackend } from "@tuidom/terminal-backend/nodeTerminalBackend";
+
+const app = new TuiApplication(new NodeTerminalBackend());
+const body = new BodyElement();
+body.title = "hello";
+body.setContent(new BoxElement());
+app.root = body;
+app.run();
+```
+
+Full guide (incl. an overview table of all elements):
+<https://github.com/tuidom/tuidom/blob/main/GUIDE.md>

package/dist/editorgroup/editorTabItemElement.d.ts

@@ -11,6 +11,8 @@ export declare class EditorTabItemElement extends TUIElement {
     private hovered;
     onActivate: (() => void) | null;
     onClose: (() => void) | null;
+    /** Правый клик по вкладке — якорь в экранных координатах курсора. */
+    onContextMenu: ((screenX: number, screenY: number) => void) | null;
     constructor(label: string, icon: string, iconColor: number, options?: {
         modified?: boolean;
         readOnly?: boolean;

package/dist/editorgroup/editorTabItemElement.js

@@ -18,6 +18,8 @@ export class EditorTabItemElement extends TUIElement {
     hovered = false;
     onActivate = null;
     onClose = null;
+    /** Правый клик по вкладке — якорь в экранных координатах курсора. */
+    onContextMenu = null;
     constructor(label, icon, iconColor, options) {
         super();
         this.label = label;
@@ -29,6 +31,12 @@ export class EditorTabItemElement extends TUIElement {
         this.paddingRight = options?.paddingRight ?? 1;
         this.addEventListener("click", (event) => {
             const mouseEvent = event;
+            // Активируют и закрывают вкладку только левая и средняя кнопки: правый
+            // клик обязан лишь открыть контекстное меню, не трогая ни активную
+            // вкладку, ни крестик (VS Code так же). Гард — как у остальных
+            // виджетов пакета (treeViewElement, listViewElement, quickPickElement).
+            if (mouseEvent.button !== "left" && mouseEvent.button !== "middle")
+                return;
             // Middle click closes the tab regardless of where it lands (VSCode behaviour).
             if (mouseEvent.button === "middle") {
                 this.onClose?.();
@@ -42,6 +50,12 @@ export class EditorTabItemElement extends TUIElement {
                 this.onActivate?.();
             }
         });
+        // Ядро синтезирует "contextmenu" из правого клика (contextMenuEventSource);
+        // вкладка только сигналит наружу — меню собирает приложение.
+        this.addEventListener("contextmenu", (event) => {
+            const contextMenuEvent = event;
+            this.onContextMenu?.(contextMenuEvent.screenX, contextMenuEvent.screenY);
+        });
         this.addEventListener("mouseenter", () => {
             if (this.hovered)
                 return;

package/dist/editorgroup/editorTabStripElement.d.ts

@@ -16,6 +16,12 @@ export declare class EditorTabStripElement extends TUIElement {
     private activeIndexValue;
     onTabActivate: ((index: number) => void) | null;
     onTabClose: ((index: number) => void) | null;
+    /**
+     * Правый клик по вкладке: индекс вкладки под курсором и якорь меню в
+     * экранных координатах. Виджет только сигналит — меню собирает приложение
+     * (как {@link TreeViewElement.onContextMenu}).
+     */
+    onTabContextMenu: ((index: number, screenX: number, screenY: number) => void) | null;
     constructor();
     get activeIndex(): number;
     set activeIndex(value: number);

package/dist/editorgroup/editorTabStripElement.js

@@ -11,6 +11,12 @@ export class EditorTabStripElement extends TUIElement {
     activeIndexValue = -1;
     onTabActivate = null;
     onTabClose = null;
+    /**
+     * Правый клик по вкладке: индекс вкладки под курсором и якорь меню в
+     * экранных координатах. Виджет только сигналит — меню собирает приложение
+     * (как {@link TreeViewElement.onContextMenu}).
+     */
+    onTabContextMenu = null;
     constructor() {
         super();
         this.hflex = new HFlexElement();
@@ -72,6 +78,7 @@ export class EditorTabStripElement extends TUIElement {
                 const index = i;
                 item.onActivate = () => this.onTabActivate?.(index);
                 item.onClose = () => this.onTabClose?.(index);
+                item.onContextMenu = (screenX, screenY) => this.onTabContextMenu?.(index, screenX, screenY);
             }
             newItems.push(item);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tuidom/elements",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "type": "module",
     "description": "Experimental terminal UI DOM — widgets: lists, trees, menus, inputs, quick pick. API is unstable.",
     "license": "MIT",
@@ -28,6 +28,6 @@
         "./*": "./dist/*.js"
     },
     "dependencies": {
-        "@tuidom/core": "0.1.0"
+        "@tuidom/core": "0.2.0"
     }
 }