svelte-common 5.2.1 → 5.3.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/README.md +23 -179
  2. package/package.json +3 -3
  3. package/src/pagination.mjs +47 -37
package/README.md CHANGED
@@ -10,23 +10,8 @@
10
10
  [![Known Vulnerabilities](https://snyk.io/test/github/arlac77/svelte-common/badge.svg)](https://snyk.io/test/github/arlac77/svelte-common)
11
11
  [![Coverage Status](https://coveralls.io/repos/arlac77/svelte-common/badge.svg)](https://coveralls.io/github/arlac77/svelte-common)
12
12
  [![Tested with TestCafe](https://img.shields.io/badge/tested%20with-TestCafe-2fa4cf.svg)](https://github.com/DevExpress/testcafe)
13
-
14
- # svelte-common
15
-
16
- common components utils used in svelte apps
17
-
18
- # usage
19
-
20
- Check out the code in the [example](/example) folder,
21
- or the [live example](https://arlac77.github.io/components/svelte-common/example/index.html).
22
-
23
- # API
24
-
25
- <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
26
-
27
- ### Table of Contents
28
-
29
- * [AttributeDefinition](#attributedefinition)
13
+ [![Tested with TestCafe](https://img.shields.io/badge/tested%20with-TestCafe-2fa4cf.svg)](https://github.com/DevExpress/testcafe)# svelte-commoncommon components utils used in svelte apps# usageCheck out the code in the [example](/example) folder,
14
+ or the [live example](https://arlac77.github.io/components/svelte-common/example/index.html).# API<!-- Generated by documentation.js. Update this documentation by updating the source code. -->### Table of Contents* [AttributeDefinition](#attributedefinition)
30
15
  * [Properties](#properties)
31
16
  * [tokens](#tokens)
32
17
  * [Parameters](#parameters)
@@ -43,6 +28,7 @@ or the [live example](https://arlac77.github.io/components/svelte-common/example
43
28
  * [page](#page)
44
29
  * [Parameters](#parameters-6)
45
30
  * [page](#page-1)
31
+ * [items](#items)
46
32
  * [pageNavigationElement](#pagenavigationelement)
47
33
  * [initializeServiceWorker](#initializeserviceworker)
48
34
  * [Parameters](#parameters-7)
@@ -53,15 +39,7 @@ or the [live example](https://arlac77.github.io/components/svelte-common/example
53
39
  * [sorter](#sorter)
54
40
  * [Parameters](#parameters-10)
55
41
  * [keyPrefixStore](#keyprefixstore)
56
- * [Parameters](#parameters-11)
57
-
58
- ## AttributeDefinition
59
-
60
- Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
61
-
62
- ### Properties
63
-
64
- * `type` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**&#x20;
42
+ * [Parameters](#parameters-11)## AttributeDefinitionType: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)### Properties* `type` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**&#x20;
65
43
  * `writable` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)**&#x20;
66
44
  * `private` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** should the value be shown
67
45
  * `depends` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** name of an attribute we depend on
@@ -70,160 +48,26 @@ Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
70
48
  * `default` **any?** the default value
71
49
  * `set` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** set the value
72
50
  * `get` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** get the value can be used to calculate default values
73
- * `env` **([Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)> | [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))?** environment variable use to provide the value
74
-
75
- ## tokens
76
-
77
- Split property path into tokens
78
-
79
- ### Parameters
80
-
81
- * `string` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**&#x20;
82
-
83
- ## setAttribute
84
-
85
- Set Object attribute.
86
- The name may be a property path like 'a.b.c'.
87
-
88
- ### Parameters
89
-
90
- * `object` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)**&#x20;
51
+ * `env` **([Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)> | [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))?** environment variable use to provide the value## tokensSplit property path into tokens### Parameters* `string` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**&#x20;## setAttributeSet Object attribute.
52
+ The name may be a property path like 'a.b.c'.### Parameters* `object` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)**&#x20;
91
53
  * `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**&#x20;
92
- * `value` **any**&#x20;
93
-
94
- ## getAttribute
95
-
96
- Deliver attribute value.
97
- The name may be a property path like 'a.b.c'.
98
-
99
- ### Parameters
100
-
101
- * `object` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)**&#x20;
102
- * `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**&#x20;
103
-
104
- Returns **any** value associated with the given property name
105
-
106
- ## getAttributeAndOperator
107
-
108
- Deliver attribute value and operator.
109
- The name may be a property path like 'a.b.c <='.
110
-
111
- ### Parameters
112
-
113
- * `object` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)**&#x20;
54
+ * `value` **any**&#x20;## getAttributeDeliver attribute value.
55
+ The name may be a property path like 'a.b.c'.### Parameters* `object` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)**&#x20;
56
+ * `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**&#x20;Returns **any** value associated with the given property name## getAttributeAndOperatorDeliver attribute value and operator.
57
+ The name may be a property path like 'a.b.c <='.### Parameters* `object` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)**&#x20;
114
58
  * `expression` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**&#x20;
115
- * `getters` (optional, default `{}`)
116
-
117
- Returns **\[any, [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)]** value associated with the given property name
118
-
119
- ## filter
120
-
121
- Generate filter function.
122
-
123
- ### Parameters
124
-
125
- * `filterBy` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?**&#x20;
126
- * `getters` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?**&#x20;
127
-
128
- Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)**&#x20;
129
-
130
- ## Pagination
131
-
132
- Pagination support store.
133
- Pages go from 1 ... numberOfPages
134
-
135
- ### Parameters
136
-
137
- * `data` &#x20;
138
- * `itemsPerPage` (optional, default `10`)
139
-
140
- ### page
141
-
142
- Set current page
143
-
144
- #### Parameters
145
-
146
- * `n` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**&#x20;
147
-
148
- ### page
149
-
150
- Returns **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** current page
151
-
152
- ### pageNavigationElement
153
-
154
- * **See**: @link <https://getbootstrap.com/docs/4.0/components/pagination>
155
- * **See**: @link <https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination>
156
-
157
- ## initializeServiceWorker
158
-
159
- Create a store holding a service worker
160
-
161
- ### Parameters
162
-
163
- * `script` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The URL of the service worker script
164
- * `options` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** An object containing registration options
165
-
166
- Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** store holding the service worker
167
-
168
- ## toggleOrderBy
169
-
170
- Deliver next value in the order by cycle.
171
- SORT\_NONE -> SORT\_ASCENDING -> SORT\_DESCENDING -> SORT\_NONE ...
172
-
173
- ### Parameters
174
-
175
- * `orderBy` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**&#x20;
176
-
177
- Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** new order either SORT\_NONE, SORT\_ASCENDING or SORT\_DESCENDING
178
-
179
- ## sortable
180
-
181
- Add sortable toggle button to a th node.
182
- Synchronizes store value with the nodes "aria-sort" attribute.
183
-
184
- ### Parameters
185
-
186
- * `th` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** the header node
187
- * `store` **WritableStore** keep in sync with sorting properties
188
-
189
- ## sorter
190
-
191
- Generate a sort function for a given sort-by set.
192
-
193
- ### Parameters
194
-
195
- * `sortBy` **([Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) | [undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined))?**&#x20;
196
- * `getters` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?**&#x20;
197
-
198
- Returns **([Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function) | [undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined))** sorter
199
-
200
- ## keyPrefixStore
201
-
202
- Create a derived store where all the object keys are prefixed.
203
-
204
- { a: 1, b: 2 } -> { foo_a: 1 foo_b: 2 } // prefix: foo_
205
-
206
- ### Parameters
207
-
208
- * `store` **WriteableStore** we derive from
209
- * `prefix` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** for each key
210
-
211
- Returns **WriteableStore**&#x20;
212
-
213
- # install
214
-
215
- With [npm](http://npmjs.org) do:
216
-
217
- ```shell
59
+ * `getters` (optional, default `{}`)Returns **\[any, [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)]** value associated with the given property name## filterGenerate filter function.### Parameters* `filterBy` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?**&#x20;
60
+ * `getters` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?**&#x20;Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** ## PaginationPagination support store.
61
+ Pages go from 1 ... numberOfPages### Parameters* `data` &#x20;
62
+ * `itemsPerPage` (optional, default `20`)### pageSet current page#### Parameters* `n` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**&#x20;### pageReturns **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** current page### items**Meta*** **deprecated**: This is deprecated.### pageNavigationElement* **See**: @link <https://getbootstrap.com/docs/4.0/components/pagination>
63
+ * **See**: @link <https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination>## initializeServiceWorkerCreate a store holding a service worker### Parameters* `script` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The URL of the service worker script
64
+ * `options` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** An object containing registration optionsReturns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** store holding the service worker## toggleOrderByDeliver next value in the order by cycle.
65
+ SORT\_NONE -> SORT\_ASCENDING -> SORT\_DESCENDING -> SORT\_NONE ...### Parameters* `orderBy` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**&#x20;Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** new order either SORT\_NONE, SORT\_ASCENDING or SORT\_DESCENDING## sortableAdd sortable toggle button to a th node.
66
+ Synchronizes store value with the nodes "aria-sort" attribute.### Parameters* `th` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** the header node
67
+ * `store` **WritableStore** keep in sync with sorting properties## sorterGenerate a sort function for a given sort-by set.### Parameters* `sortBy` **([Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) | [undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined))?**&#x20;
68
+ * `getters` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?**&#x20;Returns **([Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function) | [undefined](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined))** sorter## keyPrefixStoreCreate a derived store where all the object keys are prefixed. { a: 1, b: 2 } -> { foo_a: 1 foo_b: 2 } // prefix: foo_### Parameters* `store` **WriteableStore** we derive from
69
+ * `prefix` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** for each keyReturns **WriteableStore** # installWith [npm](http://npmjs.org) do:```shell
218
70
  npm install svelte-common
219
- ```
220
-
221
- or with [yarn](https://yarnpkg.com)
222
-
223
- ```shell
71
+ ```or with [yarn](https://yarnpkg.com)```shell
224
72
  yarn add svelte-common
225
- ```
226
-
227
- # license
228
-
229
- BSD-2-Clause
73
+ ```# licenseBSD-2-Clause
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte-common",
3
- "version": "5.2.1",
3
+ "version": "5.3.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -53,9 +53,9 @@
53
53
  "semantic-release": "^21.0.7",
54
54
  "stylelint": "^15.10.1",
55
55
  "stylelint-config-standard": "^34.0.0",
56
- "svelte": "^4.0.4",
56
+ "svelte": "^4.0.5",
57
57
  "testcafe": "^3.0.1",
58
- "vite": "^4.4.0"
58
+ "vite": "^4.4.2"
59
59
  },
60
60
  "optionalDependencies": {
61
61
  "mf-hosting-cloudflare": "^1.0.5",
package/src/pagination.mjs CHANGED
@@ -32,8 +32,6 @@ export class Pagination {
32
32
  this.#subscriptions.forEach(subscription => subscription(this));
33
33
  }
34
34
 
35
-
36
-
37
35
  get itemsPerPage() {
38
36
  return this.#itemsPerPage;
39
37
  }
@@ -72,7 +70,7 @@ export class Pagination {
72
70
  get numberOfPages() {
73
71
  return Math.ceil(
74
72
  (Array.isArray(this.#data) ? this.#data.length : this.#data.size) /
75
- this.itemsPerPage
73
+ this.itemsPerPage
76
74
  );
77
75
  }
78
76
 
@@ -81,25 +79,7 @@ export class Pagination {
81
79
  }
82
80
 
83
81
  *[Symbol.iterator]() {
84
- const n = this.page - 1;
85
-
86
- const data = Array.isArray(this.data)
87
- ? this.#data
88
- : [...this.#data.values()];
89
-
90
- for (const item of data.slice(
91
- n * this.itemsPerPage,
92
- (n + 1) * this.itemsPerPage
93
- )) {
94
- yield item;
95
- }
96
- }
97
-
98
- /**
99
- * @deprecated
100
- */
101
- *items() {
102
- const n = this.page - 1;
82
+ const n = this.page - 1;
103
83
 
104
84
  const data = Array.isArray(this.data)
105
85
  ? this.#data
@@ -123,6 +103,7 @@ export class Pagination {
123
103
 
124
104
  this.subscribe(pg => {
125
105
  const items = [];
106
+ const np = this.numberOfPages;
126
107
 
127
108
  const add = (innerText, targetPage, label) => {
128
109
  const a = document.createElement("a");
@@ -131,12 +112,17 @@ export class Pagination {
131
112
  a.setAttribute("aria-label", label);
132
113
  }
133
114
  a.innerText = innerText;
134
- if (targetPage === this.page) {
115
+
116
+ if (targetPage < 1 || targetPage > np) {
135
117
  a.disabled = true;
136
- a.classList.add("active");
137
- a.setAttribute("aria-current", "page");
138
118
  } else {
139
- a.onclick = () => (this.page = targetPage);
119
+ if (targetPage === this.page) {
120
+ a.disabled = true;
121
+ a.classList.add("active");
122
+ a.setAttribute("aria-current", "page");
123
+ } else {
124
+ a.onclick = () => (this.page = targetPage);
125
+ }
140
126
  }
141
127
  items.push(a);
142
128
  };
@@ -144,20 +130,12 @@ export class Pagination {
144
130
  add("<<", 1, "First Page");
145
131
  add("<", this.page - 1, "Previous Page");
146
132
 
147
- for (let n = 1; n < this.numberOfPages; n++) {
148
- if (
149
- this.numberOfPages > 10 &&
150
- (n <= 3 ||
151
- n > this.numberOfPages - 3 ||
152
- n % 10 === 0 ||
153
- (n < this.page + 3 && n > this.page - 3))
154
- ) {
155
- add(String(n), n);
156
- }
133
+ for (const n of navigationItems(np, this.page)) {
134
+ add(String(n), n);
157
135
  }
158
136
 
159
137
  add(">", this.page + 1, "Next Page");
160
- add(">>", this.numberOfPages, "Last Page");
138
+ add(">>", np, "Last Page");
161
139
 
162
140
  nav.replaceChildren(...items);
163
141
  });
@@ -171,3 +149,35 @@ export function pageNavigation(elem, pg) {
171
149
 
172
150
  // TODO destroy
173
151
  }
152
+
153
+ /**
154
+ * Generade actual sequence of page numbers to navigate to
155
+ * @param {number} nunmberOfPages
156
+ * @param {number} currentPage
157
+ * @return {Iterator<number>}
158
+ */
159
+ export function* navigationItems(nunmberOfPages, currentPage) {
160
+ const pageJumps = [
161
+ { maxPages: 10, side: 1, edge: 2 },
162
+ { maxPages: 100, side: 1, edge: 2, step: 10 },
163
+ { maxPages: 1000, side: 1, edge: 2, step: 100 },
164
+ { maxPages: 10000000, side: 1, edge: 2, step: 10000 }
165
+ ];
166
+
167
+ for (const j of pageJumps) {
168
+ if (nunmberOfPages <= j.maxPages) {
169
+ for (let n = 1; n <= nunmberOfPages; n++) {
170
+ if (
171
+ n <= j.edge ||
172
+ n > nunmberOfPages - j.edge ||
173
+ n % j.step === 0 ||
174
+ (n < currentPage + j.side && n > currentPage - j.side)
175
+ ) {
176
+ yield n;
177
+ }
178
+ }
179
+ break;
180
+ }
181
+ }
182
+
183
+ }