@umbraco-ui/uui-pagination 1.0.0-alpha.0 → 1.0.0-rc.2
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 +1 -1
- package/lib/index.js +13 -5
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# uui-pagination
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@umbraco-ui/uui-pagination)
|
|
4
4
|
|
|
5
5
|
Umbraco style pagination component. By implementing a resizeObserver it changes the number of visible buttons to fit the width of the container it sits in. Check this out in the [Storybook](https://uui.umbraco.com/?path=/story/uui-pagination--aaa-overview). Uses `<uui-button></uui-button>` and `<uui-button-group></uui-button-group>`.
|
|
6
6
|
|
package/lib/index.js
CHANGED
|
@@ -63,9 +63,12 @@ let UUIPaginationElement = class extends LitElement {
|
|
|
63
63
|
}
|
|
64
64
|
_calculateRange() {
|
|
65
65
|
const containerWidth = this.offsetWidth;
|
|
66
|
-
const navButtonsWidth = Array.from(this._navButtons).reduce(
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
const navButtonsWidth = Array.from(this._navButtons).reduce(
|
|
67
|
+
(totalWidth, button) => {
|
|
68
|
+
return totalWidth + button.getBoundingClientRect().width;
|
|
69
|
+
},
|
|
70
|
+
0
|
|
71
|
+
);
|
|
69
72
|
const rangeBaseWidth = containerWidth - navButtonsWidth;
|
|
70
73
|
const range = rangeBaseWidth / PAGE_BUTTON_MAX_WIDTH / 2;
|
|
71
74
|
this._range = Math.max(1, Math.floor(range));
|
|
@@ -74,7 +77,10 @@ let UUIPaginationElement = class extends LitElement {
|
|
|
74
77
|
_generateVisiblePages(current) {
|
|
75
78
|
const start = current < this._range ? 1 : current < this.total - this._range ? current - this._range : this.total - this._range * 2;
|
|
76
79
|
const stop = current <= this._range ? this._range * 2 + 1 : current < this.total - this._range ? current + this._range : this.total;
|
|
77
|
-
const pages = arrayOfNumbers(
|
|
80
|
+
const pages = arrayOfNumbers(
|
|
81
|
+
limit(start, 1, this.total),
|
|
82
|
+
limit(stop, 1, this.total)
|
|
83
|
+
);
|
|
78
84
|
return pages;
|
|
79
85
|
}
|
|
80
86
|
get current() {
|
|
@@ -194,7 +200,9 @@ let UUIPaginationElement = class extends LitElement {
|
|
|
194
200
|
render() {
|
|
195
201
|
return html`<uui-button-group role="list" id="pages">
|
|
196
202
|
${this.renderNavigationLeft()}
|
|
197
|
-
${this._visiblePages.map(
|
|
203
|
+
${this._visiblePages.map(
|
|
204
|
+
(page) => this.renderPage(page)
|
|
205
|
+
)}
|
|
198
206
|
${this.renderNavigationRight()}
|
|
199
207
|
</uui-button-group>
|
|
200
208
|
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umbraco-ui/uui-pagination",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Umbraco",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"custom-elements.json"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@umbraco-ui/uui-base": "1.0.0-
|
|
34
|
-
"@umbraco-ui/uui-button": "1.0.0-
|
|
35
|
-
"@umbraco-ui/uui-button-group": "1.0.0-
|
|
33
|
+
"@umbraco-ui/uui-base": "1.0.0-rc.2",
|
|
34
|
+
"@umbraco-ui/uui-button": "1.0.0-rc.2",
|
|
35
|
+
"@umbraco-ui/uui-button-group": "1.0.0-rc.2"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"homepage": "https://uui.umbraco.com/?path=/story/uui-pagination",
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "436dd8d9fff81481feb88f06b461167c98dac91a"
|
|
47
47
|
}
|