svelte-common 5.2.2 → 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 +37 -30
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.2",
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
@@ -93,24 +93,6 @@ export class Pagination {
93
93
  }
94
94
  }
95
95
 
96
- /**
97
- * @deprecated
98
- */
99
- *items() {
100
- const n = this.page - 1;
101
-
102
- const data = Array.isArray(this.data)
103
- ? this.#data
104
- : [...this.#data.values()];
105
-
106
- for (const item of data.slice(
107
- n * this.itemsPerPage,
108
- (n + 1) * this.itemsPerPage
109
- )) {
110
- yield item;
111
- }
112
- }
113
-
114
96
  /**
115
97
  * @see @link https://getbootstrap.com/docs/4.0/components/pagination
116
98
  * @see @link https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination
@@ -121,6 +103,7 @@ export class Pagination {
121
103
 
122
104
  this.subscribe(pg => {
123
105
  const items = [];
106
+ const np = this.numberOfPages;
124
107
 
125
108
  const add = (innerText, targetPage, label) => {
126
109
  const a = document.createElement("a");
@@ -130,7 +113,7 @@ export class Pagination {
130
113
  }
131
114
  a.innerText = innerText;
132
115
 
133
- if (targetPage < 1 || targetPage > this.numberOfPages) {
116
+ if (targetPage < 1 || targetPage > np) {
134
117
  a.disabled = true;
135
118
  } else {
136
119
  if (targetPage === this.page) {
@@ -147,20 +130,12 @@ export class Pagination {
147
130
  add("<<", 1, "First Page");
148
131
  add("<", this.page - 1, "Previous Page");
149
132
 
150
- for (let n = 1; n < this.numberOfPages; n++) {
151
- if (
152
- this.numberOfPages > 10 &&
153
- (n <= 3 ||
154
- n > this.numberOfPages - 3 ||
155
- n % 10 === 0 ||
156
- (n < this.page + 3 && n > this.page - 3))
157
- ) {
158
- add(String(n), n);
159
- }
133
+ for (const n of navigationItems(np, this.page)) {
134
+ add(String(n), n);
160
135
  }
161
136
 
162
137
  add(">", this.page + 1, "Next Page");
163
- add(">>", this.numberOfPages, "Last Page");
138
+ add(">>", np, "Last Page");
164
139
 
165
140
  nav.replaceChildren(...items);
166
141
  });
@@ -174,3 +149,35 @@ export function pageNavigation(elem, pg) {
174
149
 
175
150
  // TODO destroy
176
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
+ }