@htmlbricks/hb-paginate 0.66.27 → 0.67.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -19
- package/main.iife.js +64 -44
- package/main.iife.js.map +1 -1
- package/manifest.json +38 -47
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,37 +1,86 @@
|
|
|
1
|
-
|
|
1
|
+
# hb-paginate
|
|
2
2
|
|
|
3
|
-
**Category:** utilities
|
|
4
|
-
**Tags:** utilities, navigation
|
|
3
|
+
**Category:** utilities · **Tags:** utilities, navigation
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
## Description
|
|
7
6
|
|
|
8
|
-
Pagination
|
|
7
|
+
Pagination controls (first / previous / numbered pages / next / last), optional “showing X–Y of total” text, optional page-size via **`hb-input-number`** or **`hb-input-select`**, and optional sort field + direction with i18n. Dispatches `pageChange`, `changePageSize`, and `changeSort`.
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
## Styling (Bulma)
|
|
10
|
+
|
|
11
|
+
The component bundles **Bulma 1.x** in the shadow root: **`form/shared`**, **`form/select`** (sort dropdown), and **`form/pagination`**, with theme defaults on `:host` (`--bulma-hb-def-*`). Set public **`--bulma-*`** on `body` or `:root` so they inherit onto the host and match the rest of the app. Relevant tokens include pagination, controls, text, and borders — see [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/).
|
|
12
|
+
|
|
13
|
+
**Shadow markup (simplified):**
|
|
14
|
+
|
|
15
|
+
- **`div.hb-paginate`** — single horizontal row: optional info/size block + **`nav.pagination`**.
|
|
16
|
+
- **`div.paginate-bar`** — rendered only when range text and/or page-size UI is needed (avoids extra flex gap when only pagination is shown).
|
|
17
|
+
- **`ul.pagination-list`** / **`button.pagination-link`** — Bulma pagination; list uses **`gap`** instead of doubled per-link horizontal margins.
|
|
18
|
+
- Sort UI: **`div.select.is-small`** + native **`select`**, and a direction **`button.pagination-link`**.
|
|
19
|
+
|
|
20
|
+
**Host-level overrides (optional):**
|
|
21
|
+
|
|
22
|
+
| Variable | Purpose |
|
|
23
|
+
|----------|---------|
|
|
24
|
+
| `--hb-paginate-height` | Fixed host height (default: `--bulma-control-height`, fallback `2.5rem`). |
|
|
25
|
+
| `--hb-paginate-bar-padding-inline-start` | Left inset for the info/size bar (default: `--bulma-pagination-item-padding-left`, fallback `0.5em`). |
|
|
26
|
+
| `--hb-paginate-list-gap` | Horizontal gap between pagination list items (default: half of `--bulma-pagination-item-margin`). |
|
|
27
|
+
|
|
28
|
+
## Custom element
|
|
11
29
|
|
|
12
30
|
`hb-paginate`
|
|
13
31
|
|
|
14
|
-
|
|
32
|
+
## Attributes (snake_case; string values in HTML)
|
|
15
33
|
|
|
16
34
|
- `id`, `style` (optional): strings.
|
|
17
|
-
- `page
|
|
18
|
-
- `info` (optional): JSON string — `total`, `size`, `page_size_type` (`number`
|
|
19
|
-
- `i18nlang` (optional):
|
|
35
|
+
- `page`, `pages` (required): current page index and total pages, as strings.
|
|
36
|
+
- `info` (optional): JSON string — `total`, `size`, `page_size_type` (`"number"` \| `"select"`), `page_size_options`, `sort_fields`, `sort_by`, `sort_direction`, `sort_disabled`, `sort_direction_disabled`, `sort_strict_direction`, `sort_default_value`, `sort_default_label`.
|
|
37
|
+
- `i18nlang` (optional): e.g. `en`, `it`.
|
|
20
38
|
|
|
21
|
-
|
|
39
|
+
## Events
|
|
22
40
|
|
|
23
|
-
- `pageChange`: `{ page: number; pages: number }
|
|
24
|
-
- `changePageSize`: `{ page_size: number }
|
|
25
|
-
- `changeSort`: `{ sort_by: string; sort_direction: string }
|
|
41
|
+
- `pageChange`: `{ page: number; pages: number }`
|
|
42
|
+
- `changePageSize`: `{ page_size: number }`
|
|
43
|
+
- `changeSort`: `{ sort_by: string; sort_direction: string }`
|
|
26
44
|
|
|
27
|
-
|
|
45
|
+
## Usage notes
|
|
28
46
|
|
|
29
|
-
- **CSS variables:** `--bs-primary` (and other Bootstrap theme vars as in `extra/docs.ts`).
|
|
30
47
|
- **i18n:** Italian and English in metadata; set `i18nlang` accordingly.
|
|
31
|
-
- **`hb-table`:** while the table is in **`is_loading
|
|
32
|
-
-
|
|
48
|
+
- **`hb-table`:** while the table is in **`is_loading`**, **`hb-paginate`** remains mounted but hidden; an inline Bulma skeleton overlay mimics the bar. Use **`hb-paginate`** directly when you embed it outside the table.
|
|
49
|
+
- **Combined examples** (sort + page size): see `extra/docs.ts`.
|
|
50
|
+
|
|
51
|
+
## Types
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
export type Component = {
|
|
55
|
+
id?: string;
|
|
56
|
+
style?: string;
|
|
57
|
+
pages: number;
|
|
58
|
+
page: number;
|
|
59
|
+
info?: {
|
|
60
|
+
total?: number;
|
|
61
|
+
size?: number;
|
|
62
|
+
page_size_type?: "number" | "select";
|
|
63
|
+
page_size_options?: string;
|
|
64
|
+
sort_fields?: { value: string; label?: string }[];
|
|
65
|
+
sort_by?: string;
|
|
66
|
+
sort_direction?: "asc" | "desc" | "default";
|
|
67
|
+
sort_disabled?: boolean;
|
|
68
|
+
sort_direction_disabled?: boolean;
|
|
69
|
+
sort_strict_direction?: boolean;
|
|
70
|
+
sort_default_value?: string;
|
|
71
|
+
sort_default_label?: string;
|
|
72
|
+
};
|
|
73
|
+
i18nlang?: string;
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export type Events = {
|
|
77
|
+
pageChange: { page: number; pages: number };
|
|
78
|
+
changePageSize: { page_size: number };
|
|
79
|
+
changeSort: { sort_by: string; sort_direction: string };
|
|
80
|
+
};
|
|
81
|
+
```
|
|
33
82
|
|
|
34
|
-
|
|
83
|
+
## Minimal HTML example
|
|
35
84
|
|
|
36
85
|
```html
|
|
37
86
|
<hb-paginate page="0" pages="5" i18nlang="en"></hb-paginate>
|