pgwidgets-js 0.3.4__tar.gz → 0.3.6__tar.gz

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: pgwidgets-js
-Version: 0.3.4
+Version: 0.3.6
 Summary: pgwidgets JavaScript widget library — static assets for use with Python servers
 Author: PGWidgets Developers
 License: BSD-3-Clause

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/docs/WhatsNew.rst

@@ -4,6 +4,47 @@ What's New
 Recent changes — since ``v0.3.3``
 ---------------------------------
 
+TableView: spreadsheet-style cell cursor and editing
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+``TableView`` gained a current-cell cursor navigated with the arrow keys
+and Tab.  ``set_editable(tf)`` makes every text column editable in one
+call.  With editing on, typing a printable character starts an edit
+pre-filled with that character (replacing the cell), Enter or F2 edits
+the existing contents, and Delete/Backspace clears the cell.  While
+editing, the arrow keys commit and move in that direction (Excel-style),
+Tab commits and moves right, Enter commits and moves down, and Esc
+cancels.
+
+TableView/TreeView: header font and more compact tables
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+New ``set_header_font(family, size, weight, style)`` sets the
+column-header font.  Headers are now non-bold by default for a more
+compact table (pass a bold weight to embolden), and
+``set_optimal_column_widths`` only reserves sort-indicator padding on
+sortable columns, so unsorted/non-sortable columns pack more tightly.
+
+Menu icons: ``icon_only`` and top-level menubar icons
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+``MenuAction`` already accepted ``icon_url`` / ``iconsize``; it now also
+takes ``icon_only``, which shows just the icon (keeping the text as an
+accessible tooltip) and falls back to the text label when no icon is set.
+``MenuBar.add_menu(menu, name, options)`` gained an optional ``options``
+argument so top-level menubar entries can carry an icon
+(``icon_url`` / ``iconsize`` / ``icon_only``) too.  Icon creation now uses a
+truthy guard (matching ``ToolBarAction``) so an unset icon arriving as
+``null``/``undefined``/``''`` no longer renders a broken image.
+
+RadioButton: robust ``group`` handling
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+``RadioButton`` now uses a truthy check for the ``group`` option, so an
+unset group arriving as ``null``/``undefined``/``''`` (varies by backend,
+e.g. ``to_js(None)`` under Pyodide) reliably starts a new group instead of
+risking a crash on ``undefined.group``.
+
 TextSource: text no longer clipped when scrolling long files
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/docs/widgets/menus.rst

@@ -25,8 +25,11 @@ Horizontal menu bar, typically placed at the top of a window.
 
    * - Method
      - Description
-   * - ``add_menu(menu, name)``
-     - Add a Menu with a display name.
+   * - ``add_menu(menu, name, options)``
+     - Add a Menu with a display name.  ``options`` (optional) may include
+       ``icon_url`` / ``iconsize`` / ``icon_only`` to show an icon on the
+       top-level entry (``icon_only`` shows just the icon and keeps the name
+       as a tooltip).
    * - ``add_name(name)``
      - Add a menu by name (creates and returns a new Menu).
    * - ``get_menu(name)``
@@ -88,7 +91,7 @@ MenuAction
 
 A single action item inside a Menu.
 
-**Constructor:** ``new Widgets.MenuAction({text, icon_url, iconsize, checkable, name})``
+**Constructor:** ``new Widgets.MenuAction({text, icon_url, iconsize, checkable, name, icon_only})``
 
 **Options:**
 
@@ -97,6 +100,8 @@ A single action item inside a Menu.
 - ``iconsize`` -- icon size in pixels
 - ``checkable`` -- whether the action has a check state
 - ``name`` -- internal name
+- ``icon_only`` -- when an icon is set, show only the icon (the text is kept
+  as an accessible tooltip; falls back to the text if no icon is set)
 
 **Methods:**
 

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgwidgets",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "A native JavaScript widget library with Qt/GTK-style layout and controls",
   "type": "module",
   "main": "Widgets.js",

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/pgwidgets_js/defs.py

@@ -667,7 +667,7 @@ WIDGETS = {
             "clear": [],
             "set_length": ["numchars"],
         },
-        "callbacks": ["activated"],
+        "callbacks": ["activated", "modified"],
     },
 
     "SpinBox": {
@@ -767,6 +767,8 @@ WIDGETS = {
                     "sortable", "allow_text_selection"],
         "methods": {
             "set_columns": ["columns"],
+            "set_editable": ["tf"],
+            "set_header_font": ["family", "size", "weight", "style"],
             "set_tree": ["tree"],
             "add_tree": ["tree", "parent"],
             "update_tree": ["tree"],
@@ -774,6 +776,7 @@ WIDGETS = {
             "add_item": ["parent", "key", "values"],
             "remove_item": ["path"],
             "remove_items": ["paths"],
+            "delete_tree": ["tree", "prune_empty"],
             "clear": [],
             "expand_all": [],
             "collapse_all": [],
@@ -828,7 +831,7 @@ WIDGETS = {
         },
         "callbacks": ["activated", "selected", "expanded", "collapsed",
                       "sorted", "cell_edited", "scrolled",
-                      "cell_selected", "cell_action",
+                      "cell_selected", "cell_action", "changed",
                       "copy", "cut", "paste"],
     },
 
@@ -840,6 +843,8 @@ WIDGETS = {
                     "sortable", "allow_text_selection"],
         "methods": {
             "set_columns": ["columns"],
+            "set_editable": ["tf"],
+            "set_header_font": ["family", "size", "weight", "style"],
             "set_rows": ["rows"],
             "set_data": ["data"],
             "clear": [],
@@ -1009,7 +1014,7 @@ WIDGETS = {
         "args": [],
         "options": [],
         "methods": {
-            "add_menu": ["menu", "name"],
+            "add_menu": ["menu", "name", "options"],
             "add_name": ["name"],
             "get_menu": ["name"],
         },
@@ -1034,7 +1039,8 @@ WIDGETS = {
     "MenuAction": {
         "base": "widget",
         "args": [],
-        "options": ["text", "icon_url", "iconsize", "checkable", "name"],
+        "options": ["text", "icon_url", "iconsize", "checkable", "name",
+                    "icon_only"],
         "methods": {
             "set_text": ["text"],
             "get_text": [],

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/pgwidgets_js/static/css/Menu.css

@@ -16,11 +16,20 @@
 }
 
 .menubar-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
     padding: 4px 10px;
     cursor: pointer;
     white-space: nowrap;
 }
 
+.menubar-item-icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+}
+
 .menubar-item:hover,
 .menubar-item.active {
     background-color: #cde;

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/pgwidgets_js/static/css/TreeView.css

@@ -48,7 +48,9 @@
 .treeview-header-cell {
     position: relative;
     padding: 4px 6px;
-    font-weight: 600;
+    /* non-bold by default (compact, matching the qt backend); use
+       set_header_font() to opt into a bold/other header font */
+    font-weight: normal;
     overflow: hidden;
     white-space: nowrap;
     border-right: 1px solid #ddd;
@@ -90,7 +92,13 @@
     flex-shrink: 0;
     font-size: 10px;
     color: #555;
-    margin-right: 6px;
+}
+
+/* Only reserve the gap when a sort arrow is actually shown, so unsorted
+   headers don't carry extra right-side space and stay aligned with the
+   body cells. */
+.treeview-sort-indicator:not(:empty) {
+    margin-left: 6px;
 }
 
 .treeview-resize-handle {
@@ -253,6 +261,13 @@
     color: white;
 }
 
+/* Current-cell cursor (TableView spreadsheet-style navigation). Drawn as
+   an inset outline so it reads on top of selection/row backgrounds. */
+.treeview-cell-cursor {
+    outline: 2px solid #4a90e2;
+    outline-offset: -2px;
+}
+
 /* ── Inline cell editor ─────────────────────────────── */
 
 .treeview-cell-editable {

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/pgwidgets_js/static/modules/ComboBox.js

@@ -74,7 +74,16 @@ class ComboBox extends Widget {
             if (e.key === 'Enter') {
                 e.preventDefault();
                 this._hideDropdown();
-                this.make_callback('activated', this.get_index(), this.get_text());
+                let idx = this.get_index();
+                if (idx < 0 && this._editable) {
+                    // Commit a new typed value (mirrors the Qt/Gtk
+                    // backends) so the reported index is valid and
+                    // consistent with get_text().
+                    this.append_text(this._input.value);
+                    idx = this._items.length - 1;
+                    this._selectedIdx = idx;
+                }
+                this.make_callback('activated', idx, this.get_text());
             } else if (e.key === 'ArrowDown') {
                 e.preventDefault();
                 if (this._dropdown.style.display === 'none') {
@@ -89,6 +98,10 @@ class ComboBox extends Widget {
         if (this._editable) {
             this._input.addEventListener('input', () => {
                 this._showDropdown(this._input.value);
+                // Report the live text so the server-side get_text() stays
+                // current without waiting for Enter/selection.  Does not
+                // fire 'activated' -- typing must not count as activation.
+                this.make_callback('modified', this._input.value);
             });
         }
 
@@ -114,6 +127,8 @@ class ComboBox extends Widget {
         });
 
         this.enable_callback('activated');
+        // 'modified' reports live entry text as the user types (editable)
+        this.enable_callback('modified');
     }
 
     /**

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/pgwidgets_js/static/modules/MenuAction.js

@@ -17,6 +17,9 @@ class MenuAction extends Widget {
      * @param {number[]|null} [options.iconsize=null] - Icon size as [width, height] in pixels.
      * @param {boolean} [options.checkable=false] - Whether the action has a checkbox.
      * @param {string|null} [options.name=null] - Alias for text.
+     * @param {boolean} [options.icon_only=false] - If true, show only the icon
+     *   (when one is set), keeping the text as the accessible tooltip and as
+     *   the fallback when no icon is present.
      * @param {HTMLElement} [options.element=null] - Optional pre-existing DOM element to use.
      */
     constructor(options = {}) {
@@ -29,6 +32,8 @@ class MenuAction extends Widget {
 
         this.checkable = this.get_option(options, 'checkable', false);
         this.checked = false;
+        this.icon_only = this.get_option(options, 'icon_only', false);
+        this._has_icon = false;
 
         // checkbox indicator (hidden unless checkable)
         this._check = document.createElement('span');
@@ -44,7 +49,11 @@ class MenuAction extends Widget {
 
         let icon_url = this.get_option(options, 'icon_url', null);
         let iconsize = this.get_option(options, 'iconsize', null);
-        if (icon_url !== null) {
+        // Truthy check (not ``!== null``): an unset icon may arrive as null
+        // (JSON/websocket backend), undefined (to_js(None) in the pyodide
+        // backend) or ''.  Only create the icon for a real URL, otherwise an
+        // empty ``<img src="undefined">`` shows as a broken-image dot.
+        if (icon_url) {
             this.set_icon(icon_url, iconsize);
         }
 
@@ -61,6 +70,8 @@ class MenuAction extends Widget {
             this.set_text(text);
         }
 
+        this._applyIconOnly();
+
         // click handler
         this.element.addEventListener('click', (e) => {
             this._activate();
@@ -94,6 +105,7 @@ class MenuAction extends Widget {
      */
     set_text(text) {
         this._label.textContent = text;
+        this._applyIconOnly();
     }
 
     /**
@@ -112,10 +124,32 @@ class MenuAction extends Widget {
     set_icon(url, iconsize = null) {
         this._icon.src = url;
         this._icon.style.display = '';
-        if (iconsize !== null) {
+        this._has_icon = true;
+        if (iconsize) {
             this._icon.style.width = iconsize[0] + 'px';
             this._icon.style.height = iconsize[1] + 'px';
         }
+        this._applyIconOnly();
+    }
+
+    /**
+     * Applies the icon_only display preference: when icon_only is set and an
+     * icon is present, hide the text label (keeping it as a tooltip for
+     * accessibility); otherwise show the label.  Safe to call before the
+     * label element exists (during construction).
+     * @private
+     */
+    _applyIconOnly() {
+        if (!this._label) return;
+        if (this.icon_only && this._has_icon) {
+            this._label.style.display = 'none';
+            if (this._label.textContent) {
+                this.element.title = this._label.textContent;
+            }
+        } else {
+            this._label.style.display = '';
+            this.element.removeAttribute('title');
+        }
     }
 
     /**

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/pgwidgets_js/static/modules/MenuBar.js

@@ -55,11 +55,42 @@ class MenuBar extends ContainerWidget {
      * Adds a Menu widget to the bar under the given name.
      * @param {Menu} menu - The Menu widget to associate.
      * @param {string} name - The label displayed on the menu bar.
+     * @param {Object} [options] - Optional settings.
+     * @param {string|null} [options.icon_url=null] - URL of an icon image.
+     * @param {number[]|null} [options.iconsize=null] - Icon size [w, h] in px.
+     * @param {boolean} [options.icon_only=false] - Show only the icon (when
+     *   set), keeping the name as an accessible tooltip; falls back to the
+     *   text label when no icon is present.
      */
-    add_menu(menu, name) {
+    add_menu(menu, name, options = {}) {
         let button = document.createElement('div');
         button.className = 'menubar-item';
-        button.textContent = name;
+
+        let icon_url = this.get_option(options, 'icon_url', null);
+        let iconsize = this.get_option(options, 'iconsize', null);
+        let icon_only = this.get_option(options, 'icon_only', false);
+
+        // Truthy check (see ToolBarAction/MenuAction): an unset icon may
+        // arrive as null/undefined/'' depending on the backend.
+        if (icon_url) {
+            let img = document.createElement('img');
+            img.className = 'menubar-item-icon';
+            img.src = icon_url;
+            if (iconsize) {
+                img.style.width = iconsize[0] + 'px';
+                img.style.height = iconsize[1] + 'px';
+            }
+            button.appendChild(img);
+        }
+        if (icon_url && icon_only) {
+            // icon only: keep the name as an accessible tooltip
+            button.title = name;
+        } else {
+            let label = document.createElement('span');
+            label.className = 'menubar-item-label';
+            label.textContent = name;
+            button.appendChild(label);
+        }
 
         let container = document.createElement('div');
         container.className = 'menubar-item-container';

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/pgwidgets_js/static/modules/RadioButton.js

@@ -40,8 +40,11 @@ class RadioButton extends Widget {
         this.element.appendChild(this.label);
 
         // group management
+        // Truthy check (not ``!== null``): an unset group may arrive as null
+        // (JSON/websocket backend), undefined (to_js(None) in the pyodide
+        // backend) or '' -- treat any of those as "start a new group".
         let groupOwner = this.get_option(options, 'group', null);
-        if (groupOwner !== null) {
+        if (groupOwner) {
             // join existing group
             this.group = groupOwner.group;
             this.group.push(this);

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/pgwidgets_js/static/modules/TableView.js

@@ -26,6 +26,10 @@ class TableView extends TreeView {
         super(merged);
         this.element.classList.add('tableview-widget');
 
+        // A TableView drives a spreadsheet-style current-cell cursor: the
+        // arrow/Tab keys move a highlighted cell and editable columns accept
+        // type / Delete / Enter editing.  Pass cell_cursor: false to opt out.
+        this._cellCursor = this.get_option(options, 'cell_cursor', true);
     }
 
     /**

{pgwidgets_js-0.3.4 → pgwidgets_js-0.3.6}/pgwidgets_js/static/modules/ToolBarAction.js

@@ -150,7 +150,7 @@ class ToolBarAction extends Widget {
             this.element.insertBefore(this._icon, this.element.firstChild);
         }
         this._icon.src = url;
-        if (iconsize !== null) {
+        if (iconsize) {
             this._icon.style.width = iconsize[0] + 'px';
             this._icon.style.height = iconsize[1] + 'px';
         }