@htmlbricks/hb-table 0.66.26 → 0.67.0

package/README.md

@@ -5,9 +5,9 @@
 
 ### What it does
 
-Bootstrap-striped data table driven by JSON `headers` and `rows` (`_id` required): column sort, header search (text, enum, date range), formatted values (nested keys, datetime via dayjs), copy-to-clipboard, row highlight and `selectrow` clicks. Global `actions` and per-row `_actions` can open confirm or schema dialogs (`hb-dialog` / `hb-dialogform`). Optional multi-select with `selectactions`, `add_item` slot, and `hb-paginate` for page size, sort sync, and server-style `externalfilter` / `total` workflows.
+Bulma-styled data table driven by JSON `headers` and `rows` (`_id` required): column sort, header search (text, enum, date range), formatted values (nested keys, datetime via dayjs), copy-to-clipboard, row highlight and `selectrow` clicks. Global `actions` and per-row `_actions` can open confirm or schema dialogs (`hb-dialog` / `hb-dialogform`). Optional multi-select with `selectactions`, `add_item` slot, and `hb-paginate` for page size, sort sync, and server-style `externalfilter` / `total` workflows.
 
-While **`is_loading`** is enabled, the tbody shows Bootstrap **placeholder** skeleton rows (count follows **`size`**, capped at 100), and **`hb-paginate`** is not rendered: an **inline pagination skeleton** (same shape as the real paginate bar) is shown in the table toolbar instead. i18n via `i18nlang`.
+While **`is_loading`** is enabled, the tbody shows **Bulma skeleton** rows (`skeleton-lines`, **`checkbox.is-skeleton`**, **`button.is-skeleton`**; count follows **`size`**, capped at 100). **`hb-paginate`** stays mounted but is hidden; a single **`skeleton-block`** covers the pagination area so **`page` / `pages`** stay in sync. Optional on the host: **`--hb-table-sk-pagination-height`**, **`--hb-table-sk-pagination-min-width`** (default `min(28rem, 100%)`), **`--hb-table-sk-pagination-offset-inline-end`** (extra end margin while loading, nudges skeleton inward; default `0.65rem`). i18n via `i18nlang`.
 
 ### Custom element
 
@@ -33,7 +33,7 @@ While **`is_loading`** is enabled, the tbody shows Bootstrap **placeholder** ske
 - `disable_paginate_sort` (optional): boolean string.
 - `sort_strict_direction` (optional): boolean string.
 - `sort_direction` (optional): string — current sort direction.
-- **`is_loading` (optional):** boolean string (`"yes"` / `"true"`) or boolean in frameworks — loading placeholders in the tbody (row count = `size`) and an inline pagination skeleton instead of **`hb-paginate`**.
+- **`is_loading` (optional):** boolean string (`"yes"` / `"true"`) or boolean in frameworks — Bulma skeleton rows in the tbody (row count = `size`) and one **`skeleton-block`** over hidden **`hb-paginate`**.
 
 ### Actions (`actions` and `_actions`)
 
@@ -101,8 +101,9 @@ Set **`add_item`** to `"yes"` / `"true"` (or boolean `true` in frameworks) to sh
 
 - **Slots:** `add-button-content` (Add button body), `buttons-container` (extra toolbar content).
 - **CSS parts:** `table`, `table-actions`, `selected-row`, `common-row`.
+- **Toolbar:** multi-select **settings** (gear) button has **`margin-inline-start`** from **`--hb-table-toolbar-settings-margin-inline-start`** (default `--bulma-block-spacing`) so it sits slightly right of the toolbar start.
 - **i18n:** Italian and English in docs metadata; set `i18nlang` accordingly.
-- **`hb-paginate`:** embedded when pagination is enabled and **`is_loading`** is off; while loading, only the **inline pagination skeleton** is shown (no `hb-paginate` instance, so **`pageChange`**, **`changePageSize`**, and **`changeSort`** do not fire until loading ends).
+- **`hb-paginate`:** embedded when pagination is enabled; while **`is_loading`**, it stays in the DOM (hidden) under the skeleton overlay so props stay aligned — user interaction is blocked until loading ends.
 - **Pagination while loading:** `is_loading` does not recalculate `page` / `pages` by itself. With **client-side** pagination, if you clear `rows` during a refresh, the `$effect` that derives `pages` from row count does not run on an empty list, so **`pages` can stay at the previous value** until new rows arrive — keep `page`, `pages`, and `total` aligned with your API if needed.
 - See `extra/docs.ts` for Storybook-style examples.