@lumino/widgets - npm Package Compare versions

Comparing version 1.22.0 to 1.23.0

package.json

 {
   "name": "@lumino/widgets",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Lumino Widgets",
@@ -102,3 +102,3 @@ "homepage": "https://github.com/jupyterlab/lumino",
   "styleModule": "style/index.js",
-  "gitHead": "cbb8cfd804b647ff7a150799353b27c2dc17f373"
+  "gitHead": "729bc8142f064849fe49eb862b7ce799764f66cc"
 }

src/dockpanel.ts

@@ -80,2 +80,5 @@ // Copyright (c) Jupyter Development Team.
     }
+    if (options.addButtonEnabled !== undefined) {
+      this._addButtonEnabled = options.addButtonEnabled;
+    }
 
@@ -134,2 +137,10 @@ // Toggle the CSS mode attribute.
   /**
+   * A signal emitted when the add button on a tab bar is clicked.
+   *
+   */
+  get addRequested(): ISignal<this, TabBar<Widget>> {
+    return this._addRequested;
+  }
+
+  /**
    * The overlay used by the dock panel.
@@ -212,4 +223,4 @@ */
   }
-  
 
+
   /**
@@ -238,2 +249,17 @@ * Enable / Disable draggable / movable tabs.
   /**
+   * Whether the add buttons for each tab bar are enabled.
+   */
+  get addButtonEnabled(): boolean {
+    return this._addButtonEnabled;
+  }
+
+  /**
+   * Set whether the add buttons for each tab bar are enabled.
+   */
+  set addButtonEnabled(value: boolean) {
+    this._addButtonEnabled = value;
+    each(this.tabBars(), tabbar => { tabbar.addButtonEnabled = value; });
+  }
+
+  /**
    * Whether the dock panel is empty.
@@ -899,2 +925,3 @@ */
     tabBar.allowDeselect = false;
+    tabBar.addButtonEnabled = this._addButtonEnabled;
     tabBar.removeBehavior = 'select-previous-tab';
@@ -909,2 +936,3 @@ tabBar.insertBehavior = 'select-tab-if-needed';
     tabBar.tabActivateRequested.connect(this._onTabActivateRequested, this);
+    tabBar.addRequested.connect(this._onTabAddRequested, this);
 
@@ -956,2 +984,9 @@ // Return the initialized tab bar.
   /**
+   * Handle the `addRequested` signal from a tab bar.
+   */
+  private _onTabAddRequested(sender: TabBar<Widget>): void {
+    this._addRequested.emit(sender);
+  }
+
+  /**
    * Handle the `tabActivateRequested` signal from a tab bar.
@@ -1026,4 +1061,8 @@ */
   private _tabsConstrained: boolean = false;
+  private _addButtonEnabled: boolean = false;
   private _pressData: Private.IPressData | null = null;
   private _layoutModified = new Signal<this, void>(this);
+
+  private _addRequested = new Signal<this, TabBar<Widget>>(this);
+
 }
@@ -1085,6 +1124,13 @@
      * Constrain tabs to this dock panel
-     * 
+     *
      * The default is `'false'`.
      */
     tabsConstrained?: boolean;
+
+    /**
+     * Enable add buttons in each of the dock panel's tab bars.
+     *
+     * The default is `'false'`.
+     */
+    addButtonEnabled?: boolean;
   }
@@ -1091,0 +1137,0 @@

src/tabbar.ts

@@ -73,2 +73,3 @@ // Copyright (c) Jupyter Development Team.
     this.allowDeselect = options.allowDeselect || false;
+    this.addButtonEnabled = options.addButtonEnabled || false;
     this.insertBehavior = options.insertBehavior || 'select-tab-if-needed';
@@ -132,2 +133,9 @@ this.name = options.name || '';
   /**
+   * A signal emitted when the tab bar add button is clicked.
+   */
+  get addRequested(): ISignal<this, void> {
+    return this._addRequested;
+  }
+
+  /**
    * A signal emitted when a tab close icon is clicked.
@@ -325,2 +333,26 @@ *
   /**
+   * Whether the add button is enabled.
+   */
+  get addButtonEnabled(): boolean {
+    return this._addButtonEnabled;
+  }
+
+  /**
+   * Set whether the add button is enabled.
+   */
+  set addButtonEnabled(value: boolean) {
+    // Do nothing if the value does not change.
+    if (this._addButtonEnabled === value) {
+      return;
+    }
+
+    this._addButtonEnabled = value;
+    if (value) {
+      this.addButtonNode.classList.remove('lm-mod-hidden');
+    } else {
+      this.addButtonNode.classList.add('lm-mod-hidden');
+    }
+  }
+
+  /**
    * A read-only array of the titles in the tab bar.
@@ -344,3 +376,16 @@ */
 
+
   /**
+   * The tab bar add button node.
+   *
+   * #### Notes
+   * This is the node which holds the add button.
+   *
+   * Modifying this node directly can lead to undefined behavior.
+   */
+  get addButtonNode(): HTMLDivElement {
+    return this.node.getElementsByClassName('lm-TabBar-addButton')[0] as HTMLDivElement;
+  }
+
+  /**
    * Add a tab to the end of the tab bar.
@@ -692,2 +737,6 @@ *
 
+    // Check if the add button was clicked.
+    let addButtonClicked = this.addButtonEnabled &&
+      this.addButtonNode.contains(event.target as HTMLElement);
+
     // Lookup the tab nodes.
@@ -701,4 +750,4 @@ let tabs = this.contentNode.children;
 
-    // Do nothing if the press is not on a tab.
-    if (index === -1) {
+    // Do nothing if the press is not on a tab or the add button.
+    if (index === -1 && !addButtonClicked) {
       return;
@@ -732,4 +781,4 @@ }
 
-    // Do nothing else if the middle button is clicked.
-    if (event.button === 1) {
+    // Do nothing else if the middle button or add button is clicked.
+    if (event.button === 1 || addButtonClicked) {
       return;
@@ -875,2 +924,10 @@ }
 
+      // Handle clicking the add button.
+      let addButtonClicked = this.addButtonEnabled &&
+        this.addButtonNode.contains(event.target as HTMLElement);
+      if (addButtonClicked) {
+        this._addRequested.emit(undefined);
+        return;
+      }
+
       // Lookup the tab nodes.
@@ -1154,4 +1211,6 @@ let tabs = this.contentNode.children;
   private _dragData: Private.IDragData | null = null;
+  private _addButtonEnabled: boolean = false;
   private _tabMoved = new Signal<this, TabBar.ITabMovedArgs<T>>(this);
   private _currentChanged = new Signal<this, TabBar.ICurrentChangedArgs<T>>(this);
+  private _addRequested = new Signal<this, void>(this);
   private _tabCloseRequested = new Signal<this, TabBar.ITabCloseRequestedArgs<T>>(this);
@@ -1276,2 +1335,9 @@ private _tabDetachRequested = new Signal<this, TabBar.ITabDetachRequestedArgs<T>>(this);
     /**
+     * Whether the add button is enabled.
+     *
+     * The default is `false`.
+     */
+    addButtonEnabled?: boolean;
+
+    /**
      * The selection behavior when inserting a tab.
@@ -1482,9 +1548,18 @@ *
       let aria = this.createTabARIA(data);
-      return (
-        h.li({ id, key, className, title, style, dataset, ...aria },
-          this.renderIcon(data),
-          this.renderLabel(data),
-          this.renderCloseIcon(data)
-        )
-      );
+      if (data.title.closable) {
+        return (
+          h.li({ id, key, className, title, style, dataset, ...aria },
+            this.renderIcon(data),
+            this.renderLabel(data),
+            this.renderCloseIcon(data)
+          )
+        );
+      } else {
+        return (
+          h.li({ id, key, className, title, style, dataset, ...aria },
+            this.renderIcon(data),
+            this.renderLabel(data),
+          )
+        );
+      }
     }
@@ -1654,2 +1729,9 @@
   const defaultRenderer = new Renderer();
+
+  /**
+   * A selector which matches the add button node in the tab bar.
+   */
+  export
+  const addButtonSelector = '.lm-TabBar-addButton';
+
 }
@@ -1798,2 +1880,6 @@
     node.appendChild(content);
+
+    let add = document.createElement('div');
+    add.className = 'lm-TabBar-addButton lm-mod-hidden';
+    node.appendChild(add);
     return node;
@@ -1800,0 +1886,0 @@ }

src/tabpanel.ts

@@ -79,2 +79,3 @@ // Copyright (c) Jupyter Development Team.
     this.tabBar.tabActivateRequested.connect(this._onTabActivateRequested, this);
+    this.tabBar.addRequested.connect(this._onTabAddRequested, this);
 
@@ -185,2 +186,18 @@ // Connect the stacked panel signal handlers.
   /**
+   * Get the whether the add button is enabled.
+   *
+   */
+  get addButtonEnabled(): boolean {
+    return this.tabBar.addButtonEnabled;
+  }
+
+  /**
+   * Set the whether the add button is enabled.
+   *
+   */
+  set addButtonEnabled(value: boolean) {
+    this.tabBar.addButtonEnabled = value;
+  }
+
+  /**
    * Get the tab placement for the tab panel.
@@ -223,2 +240,10 @@ *
   /**
+   * A signal emitted when the add button on a tab bar is clicked.
+   *
+   */
+  get addRequested(): ISignal<this, TabBar<Widget>> {
+    return this._addRequested;
+  }
+
+  /**
    * The tab bar used by the tab panel.
@@ -321,2 +346,9 @@ *
   /**
+   * Handle the `tabAddRequested` signal from the tab bar.
+   */
+  private _onTabAddRequested(sender: TabBar<Widget>, args: void): void {
+    this._addRequested.emit(sender);
+  }
+
+  /**
    * Handle the `tabActivateRequested` signal from the tab bar.
@@ -353,2 +385,5 @@ */
   private _currentChanged = new Signal<this, TabPanel.ICurrentChangedArgs>(this);
+
+  private _addRequested = new Signal<this, TabBar<Widget>>(this);
+
 }
@@ -401,2 +436,9 @@
     /**
+     * Whether the button to add new tabs is enabled.
+     *
+     * The default is `false`.
+     */
+    addButtonEnabled?: boolean;
+
+    /**
      * The placement of the tab bar relative to the content.
@@ -403,0 +445,0 @@ *

types/dockpanel.d.ts

@@ -34,2 +34,7 @@ import { IIterator } from '@lumino/algorithm';
     /**
+     * A signal emitted when the add button on a tab bar is clicked.
+     *
+     */
+    readonly addRequested: ISignal<this, TabBar<Widget>>;
+    /**
      * The overlay used by the dock panel.
@@ -76,2 +81,9 @@ */
     /**
+     * Whether the add buttons for each tab bar are enabled.
+     */
+    /**
+    * Set whether the add buttons for each tab bar are enabled.
+    */
+    addButtonEnabled: boolean;
+    /**
      * Whether the dock panel is empty.
@@ -262,2 +274,6 @@ */
     /**
+     * Handle the `addRequested` signal from a tab bar.
+     */
+    private _onTabAddRequested;
+    /**
      * Handle the `tabActivateRequested` signal from a tab bar.
@@ -280,4 +296,6 @@ */
     private _tabsConstrained;
+    private _addButtonEnabled;
     private _pressData;
     private _layoutModified;
+    private _addRequested;
 }
@@ -333,2 +351,8 @@ /**
         tabsConstrained?: boolean;
+        /**
+         * Enable add buttons in each of the dock panel's tab bars.
+         *
+         * The default is `'false'`.
+         */
+        addButtonEnabled?: boolean;
     }
@@ -335,0 +359,0 @@ /**

types/tabbar.d.ts

@@ -57,2 +57,6 @@ import { Message } from '@lumino/messaging';
     /**
+     * A signal emitted when the tab bar add button is clicked.
+     */
+    readonly addRequested: ISignal<this, void>;
+    /**
      * A signal emitted when a tab close icon is clicked.
@@ -159,2 +163,9 @@ *
     /**
+     * Whether the add button is enabled.
+     */
+    /**
+    * Set whether the add button is enabled.
+    */
+    addButtonEnabled: boolean;
+    /**
      * A read-only array of the titles in the tab bar.
@@ -173,2 +184,11 @@ */
     /**
+     * The tab bar add button node.
+     *
+     * #### Notes
+     * This is the node which holds the add button.
+     *
+     * Modifying this node directly can lead to undefined behavior.
+     */
+    readonly addButtonNode: HTMLDivElement;
+    /**
      * Add a tab to the end of the tab bar.
@@ -311,4 +331,6 @@ *
     private _dragData;
+    private _addButtonEnabled;
     private _tabMoved;
     private _currentChanged;
+    private _addRequested;
     private _tabCloseRequested;
@@ -409,2 +431,8 @@ private _tabDetachRequested;
         /**
+         * Whether the add button is enabled.
+         *
+         * The default is `false`.
+         */
+        addButtonEnabled?: boolean;
+        /**
          * The selection behavior when inserting a tab.
@@ -658,3 +686,7 @@ *
     const defaultRenderer: Renderer;
+    /**
+     * A selector which matches the add button node in the tab bar.
+     */
+    const addButtonSelector = ".lm-TabBar-addButton";
 }
 //# sourceMappingURL=tabbar.d.ts.map

types/tabpanel.d.ts

@@ -75,2 +75,11 @@ import { ISignal } from '@lumino/signaling';
     /**
+     * Get the whether the add button is enabled.
+     *
+     */
+    /**
+    * Set the whether the add button is enabled.
+    *
+    */
+    addButtonEnabled: boolean;
+    /**
      * Get the tab placement for the tab panel.
@@ -89,2 +98,7 @@ *
     /**
+     * A signal emitted when the add button on a tab bar is clicked.
+     *
+     */
+    readonly addRequested: ISignal<this, TabBar<Widget>>;
+    /**
      * The tab bar used by the tab panel.
@@ -136,2 +150,6 @@ *
     /**
+     * Handle the `tabAddRequested` signal from the tab bar.
+     */
+    private _onTabAddRequested;
+    /**
      * Handle the `tabActivateRequested` signal from the tab bar.
@@ -154,2 +172,3 @@ */
     private _currentChanged;
+    private _addRequested;
 }
@@ -191,2 +210,8 @@ /**
         /**
+         * Whether the button to add new tabs is enabled.
+         *
+         * The default is `false`.
+         */
+        addButtonEnabled?: boolean;
+        /**
          * The placement of the tab bar relative to the content.
@@ -193,0 +218,0 @@ *

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4467730

increased by0.96%

Lines of code

55321

increased by1.02%

No dependency changes