svelte-common 5.2.2 → 6.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/README.md +23 -179
  2. package/package.json +5 -5
  3. package/src/pagination.mjs +47 -33
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": "6.0.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -49,17 +49,17 @@
49
49
  "c8": "^8.0.0",
50
50
  "documentation": "^14.0.2",
51
51
  "mf-styling": "^2.0.1",
52
- "npm-pkgbuild": "^11.8.12",
52
+ "npm-pkgbuild": "^11.8.14",
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",
62
- "mf-hosting-frontend": "^1.9.5"
62
+ "mf-hosting-frontend": "^1.10.0"
63
63
  },
64
64
  "repository": {
65
65
  "type": "git",
package/src/pagination.mjs CHANGED
@@ -1,18 +1,23 @@
1
1
  /**
2
2
  * Pagination support store.
3
3
  * Pages go from 1 ... numberOfPages
4
+ * @param {Map|Array|Store} data
5
+ * @param {Object} options
6
+ * @param {number} [options.itemsPerPage]
4
7
  */
5
8
  export class Pagination {
6
9
  #subscriptions = new Set();
7
10
  #data;
8
11
  #unsubscribeData;
9
12
 
10
- #itemsPerPage = 1;
13
+ #itemsPerPage = 20;
11
14
  #page = 1;
12
15
 
13
- constructor(data, itemsPerPage = 20) {
16
+ constructor(data, options) {
14
17
  this.data = data;
15
- this.itemsPerPage = itemsPerPage;
18
+ if (options.itemsPerPage) {
19
+ this.itemsPerPage = options.itemsPerPage;
20
+ }
16
21
  }
17
22
 
18
23
  set data(data) {
@@ -93,24 +98,6 @@ export class Pagination {
93
98
  }
94
99
  }
95
100
 
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
101
  /**
115
102
  * @see @link https://getbootstrap.com/docs/4.0/components/pagination
116
103
  * @see @link https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination
@@ -121,6 +108,7 @@ export class Pagination {
121
108
 
122
109
  this.subscribe(pg => {
123
110
  const items = [];
111
+ const np = this.numberOfPages;
124
112
 
125
113
  const add = (innerText, targetPage, label) => {
126
114
  const a = document.createElement("a");
@@ -130,7 +118,7 @@ export class Pagination {
130
118
  }
131
119
  a.innerText = innerText;
132
120
 
133
- if (targetPage < 1 || targetPage > this.numberOfPages) {
121
+ if (targetPage < 1 || targetPage > np) {
134
122
  a.disabled = true;
135
123
  } else {
136
124
  if (targetPage === this.page) {
@@ -147,20 +135,12 @@ export class Pagination {
147
135
  add("<<", 1, "First Page");
148
136
  add("<", this.page - 1, "Previous Page");
149
137
 
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
- }
138
+ for (const n of navigationItems(np, this.page)) {
139
+ add(String(n), n);
160
140
  }
161
141
 
162
142
  add(">", this.page + 1, "Next Page");
163
- add(">>", this.numberOfPages, "Last Page");
143
+ add(">>", np, "Last Page");
164
144
 
165
145
  nav.replaceChildren(...items);
166
146
  });
@@ -174,3 +154,37 @@ export function pageNavigation(elem, pg) {
174
154
 
175
155
  // TODO destroy
176
156
  }
157
+
158
+ /**
159
+ * Generade actual sequence of page numbers to navigate to
160
+ * @param {number} nunmberOfPages
161
+ * @param {number} currentPage
162
+ * @return {Iterator<number>}
163
+ */
164
+ export function* navigationItems(nunmberOfPages, currentPage) {
165
+ const pageJumps = [
166
+ { maxPages: 10, side: 1, edge: 2 },
167
+ { maxPages: 100, side: 1, edge: 2, step: 10 },
168
+ { maxPages: 1000, side: 1, edge: 2, step: 100 },
169
+ { maxPages: 10000, side: 1, edge: 2, step: 1000 },
170
+ { maxPages: 100000, side: 1, edge: 2, step: 10000 },
171
+ { maxPages: 1000000, side: 1, edge: 2, step: 100000 },
172
+ { maxPages: 10000000, side: 1, edge: 2, step: 1000000 }
173
+ ];
174
+
175
+ for (const j of pageJumps) {
176
+ if (nunmberOfPages <= j.maxPages) {
177
+ for (let n = 1; n <= nunmberOfPages; n++) {
178
+ if (
179
+ n <= j.edge ||
180
+ n > nunmberOfPages - j.edge ||
181
+ n % j.step === 0 ||
182
+ (n < currentPage + j.side && n > currentPage - j.side)
183
+ ) {
184
+ yield n;
185
+ }
186
+ }
187
+ break;
188
+ }
189
+ }
190
+ }