@starasia/pagination 2.0.0 → 3.0.0

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.
Files changed (3) hide show
  1. package/dist/pagination.es.js +60 -60
  2. package/dist/pagination.umd.js +16 -16
  3. package/package.json +6 -6
package/dist/pagination.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs as b, jsx as r } from "react/jsx-runtime";
1
+ import { jsxs as b, jsx as s } from "react/jsx-runtime";
2
2
  import { useMemo as u } from "react";
3
3
  const y = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
4
4
 
@@ -13,12 +13,12 @@ const y = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
13
13
  --sa-pagination-radius: var(--sa-radii-base, 0.25rem);
14
14
  }
15
15
 
16
- .starasia-pagination-container {
16
+ .sa-pagination-container {
17
17
  display: flex;
18
18
  list-style-type: none;
19
19
  }
20
20
 
21
- .starasia-pagination-item {
21
+ .sa-pagination-item {
22
22
  padding: var(--sa-spacing-xs, 4px)
23
23
  var(--sa-spacing-sm, 8px);
24
24
  text-align: center;
@@ -35,35 +35,35 @@ const y = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
35
35
  font-family: "Montserrat";
36
36
  }
37
37
 
38
- .starasia-pagination-item.starasia-pagination-item-responsive {
38
+ .sa-pagination-item.sa-pagination-item-responsive {
39
39
  margin: auto 0;
40
40
  font-size: var(--sa-font-size-sm, 12px);
41
41
  padding: var(--sa-spacing-xs, 4px)
42
42
  var(--sa-spacing-sm, 8px);
43
43
  }
44
44
 
45
- .starasia-pagination-item.starasia-pagination-dots:hover {
45
+ .sa-pagination-item.sa-pagination-dots:hover {
46
46
  background-color: transparent;
47
47
  cursor: default;
48
48
  }
49
49
 
50
- .starasia-pagination-item:hover {
50
+ .sa-pagination-item:hover {
51
51
  background-color: var(--sa-pagination-bg-hover);
52
52
  cursor: pointer;
53
53
  }
54
54
 
55
- .starasia-pagination-item.starasia-pagination-selected {
55
+ .sa-pagination-item.sa-pagination-selected {
56
56
  background-color: var(--sa-pagination-bg-selected);
57
57
  color: var(--sa-pagination-color-selected) !important;
58
58
  font-weight: var(--sa-font-weight-medium, 400);
59
59
  }
60
60
 
61
- .starasia-pagination-selected {
61
+ .sa-pagination-selected {
62
62
  background-color: var(--sa-pagination-bg-active) !important;
63
63
  border-radius: 8px !important;
64
64
  }
65
65
 
66
- .starasia-pagination-arrow::before {
66
+ .sa-pagination-arrow::before {
67
67
  position: relative;
68
68
  /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
69
69
  content: "";
@@ -77,122 +77,122 @@ const y = `@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght
77
77
  var(--sa-pagination-text);
78
78
  }
79
79
 
80
- .starasia-pagination-arrow.starasia-pagination-left {
80
+ .sa-pagination-arrow.sa-pagination-left {
81
81
  transform: rotate(-135deg) translateX(-25%);
82
82
  }
83
83
 
84
- .starasia-pagination-arrow.starasia-pagination-right {
84
+ .sa-pagination-arrow.sa-pagination-right {
85
85
  transform: rotate(45deg);
86
86
  }
87
87
 
88
- .starasia-pagination-item.starasia-pagination-disabled {
88
+ .sa-pagination-item.sa-pagination-disabled {
89
89
  pointer-events: none;
90
90
  }
91
91
 
92
- .starasia-pagination-item.starasia-pagination-disabled
93
- .starasia-pagination-arrow::before {
92
+ .sa-pagination-item.sa-pagination-disabled
93
+ .sa-pagination-arrow::before {
94
94
  border-right: var(--sa-border, 1px) solid
95
95
  var(--sa-pagination-divider);
96
96
  border-top: var(--sa-border, 1px) solid
97
97
  var(--sa-pagination-divider);
98
98
  }
99
- .starasia-pagination-item.starasia-pagination-disabled:hover {
99
+ .sa-pagination-item.sa-pagination-disabled:hover {
100
100
  background-color: transparent;
101
101
  cursor: default;
102
102
  }
103
- `, d = "...", f = (t, n) => {
104
- let o = n - t + 1;
105
- return Array.from({ length: o }, (i, a) => a + t);
103
+ `, d = "...", f = (t, a) => {
104
+ let e = a - t + 1;
105
+ return Array.from({ length: e }, (i, n) => n + t);
106
106
  }, w = ({
107
107
  totalCount: t,
108
108
  // pageSize,
109
- siblingCount: n = 1,
110
- currentPage: o
109
+ siblingCount: a = 1,
110
+ currentPage: e
111
111
  }) => u(() => {
112
- const a = t;
113
- if (n + 5 >= a)
114
- return f(1, a);
115
- const c = Math.max(o - n, 1), m = Math.min(
116
- o + n,
117
- a
118
- ), p = c > 2, s = m < a - 2, l = 1, x = a;
119
- if (!p && s) {
120
- let g = 3 + 2 * n;
121
- return [...f(1, g), d, a];
112
+ const n = t;
113
+ if (a + 5 >= n)
114
+ return f(1, n);
115
+ const c = Math.max(e - a, 1), m = Math.min(
116
+ e + a,
117
+ n
118
+ ), p = c > 2, o = m < n - 2, l = 1, x = n;
119
+ if (!p && o) {
120
+ let g = 3 + 2 * a;
121
+ return [...f(1, g), d, n];
122
122
  }
123
- if (p && !s) {
124
- let g = 3 + 2 * n, v = f(
125
- a - g + 1,
126
- a
123
+ if (p && !o) {
124
+ let g = 3 + 2 * a, v = f(
125
+ n - g + 1,
126
+ n
127
127
  );
128
128
  return [l, d, ...v];
129
129
  }
130
- if (p && s) {
130
+ if (p && o) {
131
131
  let g = f(c, m);
132
132
  return [l, d, ...g, d, x];
133
133
  }
134
- }, [t, n, o]), h = "starasia-pagination-styles", k = (t) => {
134
+ }, [t, a, e]), h = "sa-pagination-styles", k = (t) => {
135
135
  if (!document.getElementById(h)) {
136
- const n = document.createElement("style");
137
- n.id = h, n.textContent = t, document.head.appendChild(n);
136
+ const a = document.createElement("style");
137
+ a.id = h, a.textContent = t, document.head.appendChild(a);
138
138
  }
139
139
  };
140
140
  k(y);
141
141
  const R = ({
142
142
  onPageChange: t,
143
- totalCount: n,
144
- siblingCount: o = 1,
143
+ totalCount: a,
144
+ siblingCount: e = 1,
145
145
  currentPage: i,
146
- size: a = "md"
146
+ size: n = "md"
147
147
  }) => {
148
- const e = w({
148
+ const r = w({
149
149
  currentPage: i,
150
- totalCount: n,
151
- siblingCount: o
150
+ totalCount: a,
151
+ siblingCount: e
152
152
  // pageSize
153
153
  });
154
- if (i === 0 || e.length < 2)
154
+ if (i === 0 || r.length < 2)
155
155
  return null;
156
156
  const c = () => {
157
157
  t(i + 1);
158
158
  }, m = () => {
159
159
  t(i - 1);
160
160
  };
161
- let p = e[e.length - 1];
162
- return /* @__PURE__ */ b("ul", { className: "starasia-pagination-container", style: { padding: 0 }, children: [
163
- /* @__PURE__ */ r(
161
+ let p = r[r.length - 1];
162
+ return /* @__PURE__ */ b("ul", { className: "sa-pagination-container", style: { padding: 0 }, children: [
163
+ /* @__PURE__ */ s(
164
164
  "li",
165
165
  {
166
- className: `starasia-pagination-item ${i === 1 ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
166
+ className: `sa-pagination-item ${i === 1 ? "sa-pagination-disabled" : null} ${n === "sm" ? "sa-pagination-item-responsive" : ""}`,
167
167
  onClick: m,
168
- children: /* @__PURE__ */ r("div", { className: "starasia-pagination-arrow starasia-pagination-left" })
168
+ children: /* @__PURE__ */ s("div", { className: "sa-pagination-arrow sa-pagination-left" })
169
169
  }
170
170
  ),
171
- e.map((s, l) => s === d ? /* @__PURE__ */ r(
171
+ r.map((o, l) => o === d ? /* @__PURE__ */ s(
172
172
  "li",
173
173
  {
174
- className: `starasia-pagination-item starasia-pagination-dots ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
174
+ className: `sa-pagination-item sa-pagination-dots ${n === "sm" ? "sa-pagination-item-responsive" : ""}`,
175
175
  children: "…"
176
176
  },
177
177
  l
178
- ) : /* @__PURE__ */ r(
178
+ ) : /* @__PURE__ */ s(
179
179
  "li",
180
180
  {
181
- className: `starasia-pagination-item ${s === i ? "starasia-pagination-selected" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
182
- onClick: () => t(Number(s)),
183
- children: s
181
+ className: `sa-pagination-item ${o === i ? "sa-pagination-selected" : null} ${n === "sm" ? "sa-pagination-item-responsive" : ""}`,
182
+ onClick: () => t(Number(o)),
183
+ children: o
184
184
  },
185
185
  l
186
186
  )),
187
- /* @__PURE__ */ r(
187
+ /* @__PURE__ */ s(
188
188
  "li",
189
189
  {
190
- className: `starasia-pagination-item ${i === p ? "starasia-pagination-disabled" : null} ${a === "sm" ? "starasia-pagination-item-responsive" : ""}`,
190
+ className: `sa-pagination-item ${i === p ? "sa-pagination-disabled" : null} ${n === "sm" ? "sa-pagination-item-responsive" : ""}`,
191
191
  onClick: c,
192
- children: /* @__PURE__ */ r(
192
+ children: /* @__PURE__ */ s(
193
193
  "div",
194
194
  {
195
- className: "starasia-pagination-arrow starasia-pagination-right"
195
+ className: "sa-pagination-arrow sa-pagination-right"
196
196
  }
197
197
  )
198
198
  }
package/dist/pagination.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.Pagination={},e.jsxRuntime,e.React))})(this,function(e,t,x){"use strict";const b=`@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
1
+ (function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o.Pagination={},o.jsxRuntime,o.React))})(this,function(o,t,x){"use strict";const b=`@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
2
2
 
3
3
  :root {
4
4
  --sa-pagination-text: var(--sa-color-gray-700, #6b6e76);
@@ -11,12 +11,12 @@
11
11
  --sa-pagination-radius: var(--sa-radii-base, 0.25rem);
12
12
  }
13
13
 
14
- .starasia-pagination-container {
14
+ .sa-pagination-container {
15
15
  display: flex;
16
16
  list-style-type: none;
17
17
  }
18
18
 
19
- .starasia-pagination-item {
19
+ .sa-pagination-item {
20
20
  padding: var(--sa-spacing-xs, 4px)
21
21
  var(--sa-spacing-sm, 8px);
22
22
  text-align: center;
@@ -33,35 +33,35 @@
33
33
  font-family: "Montserrat";
34
34
  }
35
35
 
36
- .starasia-pagination-item.starasia-pagination-item-responsive {
36
+ .sa-pagination-item.sa-pagination-item-responsive {
37
37
  margin: auto 0;
38
38
  font-size: var(--sa-font-size-sm, 12px);
39
39
  padding: var(--sa-spacing-xs, 4px)
40
40
  var(--sa-spacing-sm, 8px);
41
41
  }
42
42
 
43
- .starasia-pagination-item.starasia-pagination-dots:hover {
43
+ .sa-pagination-item.sa-pagination-dots:hover {
44
44
  background-color: transparent;
45
45
  cursor: default;
46
46
  }
47
47
 
48
- .starasia-pagination-item:hover {
48
+ .sa-pagination-item:hover {
49
49
  background-color: var(--sa-pagination-bg-hover);
50
50
  cursor: pointer;
51
51
  }
52
52
 
53
- .starasia-pagination-item.starasia-pagination-selected {
53
+ .sa-pagination-item.sa-pagination-selected {
54
54
  background-color: var(--sa-pagination-bg-selected);
55
55
  color: var(--sa-pagination-color-selected) !important;
56
56
  font-weight: var(--sa-font-weight-medium, 400);
57
57
  }
58
58
 
59
- .starasia-pagination-selected {
59
+ .sa-pagination-selected {
60
60
  background-color: var(--sa-pagination-bg-active) !important;
61
61
  border-radius: 8px !important;
62
62
  }
63
63
 
64
- .starasia-pagination-arrow::before {
64
+ .sa-pagination-arrow::before {
65
65
  position: relative;
66
66
  /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
67
67
  content: "";
@@ -75,27 +75,27 @@
75
75
  var(--sa-pagination-text);
76
76
  }
77
77
 
78
- .starasia-pagination-arrow.starasia-pagination-left {
78
+ .sa-pagination-arrow.sa-pagination-left {
79
79
  transform: rotate(-135deg) translateX(-25%);
80
80
  }
81
81
 
82
- .starasia-pagination-arrow.starasia-pagination-right {
82
+ .sa-pagination-arrow.sa-pagination-right {
83
83
  transform: rotate(45deg);
84
84
  }
85
85
 
86
- .starasia-pagination-item.starasia-pagination-disabled {
86
+ .sa-pagination-item.sa-pagination-disabled {
87
87
  pointer-events: none;
88
88
  }
89
89
 
90
- .starasia-pagination-item.starasia-pagination-disabled
91
- .starasia-pagination-arrow::before {
90
+ .sa-pagination-item.sa-pagination-disabled
91
+ .sa-pagination-arrow::before {
92
92
  border-right: var(--sa-border, 1px) solid
93
93
  var(--sa-pagination-divider);
94
94
  border-top: var(--sa-border, 1px) solid
95
95
  var(--sa-pagination-divider);
96
96
  }
97
- .starasia-pagination-item.starasia-pagination-disabled:hover {
97
+ .sa-pagination-item.sa-pagination-disabled:hover {
98
98
  background-color: transparent;
99
99
  cursor: default;
100
100
  }
101
- `,p="...",m=(i,n)=>{let r=n-i+1;return Array.from({length:r},(s,a)=>a+i)},y=({totalCount:i,siblingCount:n=1,currentPage:r})=>x.useMemo(()=>{const a=i;if(n+5>=a)return m(1,a);const f=Math.max(r-n,1),v=Math.min(r+n,a),d=f>2,o=v<a-2,g=1,k=a;if(!d&&o){let c=3+2*n;return[...m(1,c),p,a]}if(d&&!o){let c=3+2*n,u=m(a-c+1,a);return[g,p,...u]}if(d&&o){let c=m(f,v);return[g,p,...c,p,k]}},[i,n,r]),h="starasia-pagination-styles";(i=>{if(!document.getElementById(h)){const n=document.createElement("style");n.id=h,n.textContent=i,document.head.appendChild(n)}})(b);const w=({onPageChange:i,totalCount:n,siblingCount:r=1,currentPage:s,size:a="md"})=>{const l=y({currentPage:s,totalCount:n,siblingCount:r});if(s===0||l.length<2)return null;const f=()=>{i(s+1)},v=()=>{i(s-1)};let d=l[l.length-1];return t.jsxs("ul",{className:"starasia-pagination-container",style:{padding:0},children:[t.jsx("li",{className:`starasia-pagination-item ${s===1?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:v,children:t.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-left"})}),l.map((o,g)=>o===p?t.jsx("li",{className:`starasia-pagination-item starasia-pagination-dots ${a==="sm"?"starasia-pagination-item-responsive":""}`,children:"…"},g):t.jsx("li",{className:`starasia-pagination-item ${o===s?"starasia-pagination-selected":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:()=>i(Number(o)),children:o},g)),t.jsx("li",{className:`starasia-pagination-item ${s===d?"starasia-pagination-disabled":null} ${a==="sm"?"starasia-pagination-item-responsive":""}`,onClick:f,children:t.jsx("div",{className:"starasia-pagination-arrow starasia-pagination-right"})})]})};e.Pagination=w,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
101
+ `,p="...",m=(i,a)=>{let r=a-i+1;return Array.from({length:r},(e,n)=>n+i)},y=({totalCount:i,siblingCount:a=1,currentPage:r})=>x.useMemo(()=>{const n=i;if(a+5>=n)return m(1,n);const f=Math.max(r-a,1),v=Math.min(r+a,n),d=f>2,s=v<n-2,g=1,k=n;if(!d&&s){let c=3+2*a;return[...m(1,c),p,n]}if(d&&!s){let c=3+2*a,u=m(n-c+1,n);return[g,p,...u]}if(d&&s){let c=m(f,v);return[g,p,...c,p,k]}},[i,a,r]),h="sa-pagination-styles";(i=>{if(!document.getElementById(h)){const a=document.createElement("style");a.id=h,a.textContent=i,document.head.appendChild(a)}})(b);const w=({onPageChange:i,totalCount:a,siblingCount:r=1,currentPage:e,size:n="md"})=>{const l=y({currentPage:e,totalCount:a,siblingCount:r});if(e===0||l.length<2)return null;const f=()=>{i(e+1)},v=()=>{i(e-1)};let d=l[l.length-1];return t.jsxs("ul",{className:"sa-pagination-container",style:{padding:0},children:[t.jsx("li",{className:`sa-pagination-item ${e===1?"sa-pagination-disabled":null} ${n==="sm"?"sa-pagination-item-responsive":""}`,onClick:v,children:t.jsx("div",{className:"sa-pagination-arrow sa-pagination-left"})}),l.map((s,g)=>s===p?t.jsx("li",{className:`sa-pagination-item sa-pagination-dots ${n==="sm"?"sa-pagination-item-responsive":""}`,children:"…"},g):t.jsx("li",{className:`sa-pagination-item ${s===e?"sa-pagination-selected":null} ${n==="sm"?"sa-pagination-item-responsive":""}`,onClick:()=>i(Number(s)),children:s},g)),t.jsx("li",{className:`sa-pagination-item ${e===d?"sa-pagination-disabled":null} ${n==="sm"?"sa-pagination-item-responsive":""}`,onClick:f,children:t.jsx("div",{className:"sa-pagination-arrow sa-pagination-right"})})]})};o.Pagination=w,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/pagination",
3
- "version": "2.0.0",
3
+ "version": "3.0.0",
4
4
  "description": "pagination component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/pagination.umd.js",
@@ -12,10 +12,6 @@
12
12
  "dist/*.map",
13
13
  "dist/*.css"
14
14
  ],
15
- "scripts": {
16
- "dev": "vite --config vite.config.ts --port 3000",
17
- "build": "vite build --config vite.config.ts"
18
- },
19
15
  "keywords": [],
20
16
  "license": "ISC",
21
17
  "type": "module",
@@ -37,5 +33,9 @@
37
33
  "react-dom": "^18.2.0",
38
34
  "@types/react": "^18.2.55",
39
35
  "@types/react-dom": "^18.2.19"
36
+ },
37
+ "scripts": {
38
+ "dev": "vite --config vite.config.ts --port 3000",
39
+ "build": "vite build --config vite.config.ts"
40
40
  }
41
- }
41
+ }