silentium-components 0.0.1 → 0.0.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/CHANGELOG.md +13 -0
- package/docs/assets/css/base.css +5 -0
- package/docs/assets/css/custom.css +72 -0
- package/docs/assets/img/logo.svg +1522 -0
- package/docs/assets/js/index.mjs +7 -5
- package/docs/build.sh +9 -8
- package/docs/favicon.ico +0 -0
- package/docs/index-dev.html +87 -215
- package/docs/index.html +87 -215
- package/docs/pages/behaviors/dirty.html +15 -0
- package/docs/pages/behaviors/loading.html +24 -0
- package/docs/pages/behaviors.html +12 -0
- package/docs/pages/index.html +5 -0
- package/docs/routes.json +1 -1
- package/docs/template.html +87 -215
- package/eslint.config.mjs +9 -0
- package/package.json +2 -2
- package/src/behaviors/Dirty.test.ts +4 -3
- package/src/behaviors/Dirty.ts +10 -2
- package/src/behaviors/Loading.test.ts +15 -0
- package/src/behaviors/Loading.ts +34 -0
package/docs/template.html
CHANGED
|
@@ -1,233 +1,105 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="ru">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<link
|
|
21
|
-
rel="apple-touch-icon"
|
|
22
|
-
sizes="57x57"
|
|
23
|
-
href="./assets/favicon/apple-icon-57x57.png"
|
|
24
|
-
/>
|
|
25
|
-
<link
|
|
26
|
-
rel="apple-touch-icon"
|
|
27
|
-
sizes="60x60"
|
|
28
|
-
href="./assets/favicon/apple-icon-60x60.png"
|
|
29
|
-
/>
|
|
30
|
-
<link
|
|
31
|
-
rel="apple-touch-icon"
|
|
32
|
-
sizes="72x72"
|
|
33
|
-
href="./assets/favicon/apple-icon-72x72.png"
|
|
34
|
-
/>
|
|
35
|
-
<link
|
|
36
|
-
rel="apple-touch-icon"
|
|
37
|
-
sizes="76x76"
|
|
38
|
-
href="./assets/favicon/apple-icon-76x76.png"
|
|
39
|
-
/>
|
|
40
|
-
<link
|
|
41
|
-
rel="apple-touch-icon"
|
|
42
|
-
sizes="114x114"
|
|
43
|
-
href="./assets/favicon/apple-icon-114x114.png"
|
|
44
|
-
/>
|
|
45
|
-
<link
|
|
46
|
-
rel="apple-touch-icon"
|
|
47
|
-
sizes="120x120"
|
|
48
|
-
href="./assets/favicon/apple-icon-120x120.png"
|
|
49
|
-
/>
|
|
50
|
-
<link
|
|
51
|
-
rel="apple-touch-icon"
|
|
52
|
-
sizes="144x144"
|
|
53
|
-
href="./assets/favicon/apple-icon-144x144.png"
|
|
54
|
-
/>
|
|
55
|
-
<link
|
|
56
|
-
rel="apple-touch-icon"
|
|
57
|
-
sizes="152x152"
|
|
58
|
-
href="./assets/favicon/apple-icon-152x152.png"
|
|
59
|
-
/>
|
|
60
|
-
<link
|
|
61
|
-
rel="apple-touch-icon"
|
|
62
|
-
sizes="180x180"
|
|
63
|
-
href="./assets/favicon/apple-icon-180x180.png"
|
|
64
|
-
/>
|
|
65
|
-
<link
|
|
66
|
-
rel="icon"
|
|
67
|
-
type="image/png"
|
|
68
|
-
sizes="192x192"
|
|
69
|
-
href="./assets/favicon/android-icon-192x192.png"
|
|
70
|
-
/>
|
|
71
|
-
<link
|
|
72
|
-
rel="icon"
|
|
73
|
-
type="image/png"
|
|
74
|
-
sizes="32x32"
|
|
75
|
-
href="./assets/favicon/favicon-32x32.png"
|
|
76
|
-
/>
|
|
77
|
-
<link
|
|
78
|
-
rel="icon"
|
|
79
|
-
type="image/png"
|
|
80
|
-
sizes="96x96"
|
|
81
|
-
href="./assets/favicon/favicon-96x96.png"
|
|
82
|
-
/>
|
|
83
|
-
<link
|
|
84
|
-
rel="icon"
|
|
85
|
-
type="image/png"
|
|
86
|
-
sizes="16x16"
|
|
87
|
-
href="./assets/favicon/favicon-16x16.png"
|
|
88
|
-
/>
|
|
89
|
-
<meta
|
|
90
|
-
name="msapplication-TileColor"
|
|
91
|
-
content="#ffffff"
|
|
92
|
-
/>
|
|
93
|
-
<meta
|
|
94
|
-
name="msapplication-TileImage"
|
|
95
|
-
content="./assets/favicon/ms-icon-144x144.png"
|
|
96
|
-
/>
|
|
97
|
-
<meta
|
|
98
|
-
name="theme-color"
|
|
99
|
-
content="#ffffff"
|
|
100
|
-
/>
|
|
101
|
-
<link
|
|
102
|
-
rel="stylesheet"
|
|
103
|
-
href="./assets/css/base.css"
|
|
104
|
-
/>
|
|
105
|
-
<script type="importmap">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport"
|
|
7
|
+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
|
|
8
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
9
|
+
<title>Идет загрузка...</title>
|
|
10
|
+
<link rel="stylesheet"
|
|
11
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" />
|
|
12
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
13
|
+
<script
|
|
14
|
+
src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.9.0/highlightjs-line-numbers.min.js"></script>
|
|
15
|
+
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
|
|
16
|
+
<meta name="msapplication-TileColor" content="#ffffff" />
|
|
17
|
+
<meta name="theme-color" content="#ffffff" />
|
|
18
|
+
<link rel="stylesheet" href="./assets/css/base.css" />
|
|
19
|
+
<script type="importmap">
|
|
106
20
|
{
|
|
107
21
|
"imports": {
|
|
108
|
-
"
|
|
109
|
-
"
|
|
110
|
-
"
|
|
22
|
+
"silentium": "TPL_SILENTIUM_OOP",
|
|
23
|
+
"silentium-web-api": "TPL_SILENTIUM_WEB_API",
|
|
24
|
+
"silentium-components": "TPL_SILENTIUM_COMPONENTS"
|
|
111
25
|
}
|
|
112
26
|
}
|
|
113
27
|
</script>
|
|
114
|
-
|
|
28
|
+
</head>
|
|
115
29
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<a href="/" class="text-xl flex items-center active">
|
|
126
|
-
Patron Components
|
|
30
|
+
<body class="flex flex-col h-full global-body body-loading">
|
|
31
|
+
<div class="style-link" data-style="TPL_SILENTIUM_DESIGN"></div>
|
|
32
|
+
<header class="text-gray-600 body-font">
|
|
33
|
+
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center menu">
|
|
34
|
+
<div class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
|
|
35
|
+
<a href="/" class="ml-3 text-xl flex gap-2 items-center active">
|
|
36
|
+
|
|
37
|
+
<img src="./assets/img/logo.svg" width="40" height="44" />
|
|
38
|
+
Silentium Components
|
|
127
39
|
</a>
|
|
128
|
-
</div>
|
|
129
|
-
<nav
|
|
130
|
-
class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center"
|
|
131
|
-
>
|
|
132
|
-
</nav>
|
|
133
|
-
<button
|
|
134
|
-
onclick="location.href='https://github.com/kosukhin/patron'"
|
|
135
|
-
class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0"
|
|
136
|
-
>
|
|
137
|
-
<img
|
|
138
|
-
src="./assets/img/github_16.jpg"
|
|
139
|
-
width="16"
|
|
140
|
-
height="16"
|
|
141
|
-
/>
|
|
142
|
-
GitHub
|
|
143
|
-
<svg
|
|
144
|
-
fill="none"
|
|
145
|
-
stroke="currentColor"
|
|
146
|
-
stroke-linecap="round"
|
|
147
|
-
stroke-linejoin="round"
|
|
148
|
-
stroke-width="2"
|
|
149
|
-
class="w-4 h-4 ml-1"
|
|
150
|
-
viewBox="0 0 24 24"
|
|
151
|
-
>
|
|
152
|
-
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
|
153
|
-
</svg>
|
|
154
|
-
</button>
|
|
155
40
|
</div>
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
41
|
+
<nav
|
|
42
|
+
class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center">
|
|
43
|
+
</nav>
|
|
44
|
+
<button onclick="location.href='https://github.com/kosukhin/patron'"
|
|
45
|
+
class="inline-flex gap-1 items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
|
|
46
|
+
<img src="./assets/img/github_16.jpg" width="16" height="16" />
|
|
47
|
+
GitHub
|
|
48
|
+
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
49
|
+
class="w-4 h-4 ml-1" viewBox="0 0 24 24">
|
|
50
|
+
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
|
51
|
+
</svg>
|
|
52
|
+
</button>
|
|
53
|
+
</div>
|
|
54
|
+
</header>
|
|
55
|
+
<article class="container mx-auto p-5">
|
|
56
|
+
<div class="loader">
|
|
57
|
+
<div class="w-full flex justify-center">
|
|
58
|
+
<div
|
|
59
|
+
class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-indigo-500 motion-reduce:animate-[spin_1.5s_linear_infinite]"
|
|
60
|
+
role="status">
|
|
61
|
+
<span
|
|
62
|
+
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Loading...</span>
|
|
169
63
|
</div>
|
|
170
64
|
</div>
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
href="https://kosukhin.github.io/patron-web-api.site/"
|
|
191
|
-
target="_blank"
|
|
192
|
-
>Patron-WEB-API</a
|
|
193
|
-
>
|
|
194
|
-
</div>
|
|
195
|
-
<div class="flex gap-1 items-center">
|
|
196
|
-
<a
|
|
197
|
-
href="https://kosukhin.github.io/patron-web-api.site/"
|
|
198
|
-
target="_blank"
|
|
199
|
-
>Patron Редактор схем</a
|
|
200
|
-
>
|
|
201
|
-
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="page-area"></div>
|
|
67
|
+
</article>
|
|
68
|
+
<footer class="text-gray-600 body-font mt-auto">
|
|
69
|
+
<div class="border-t border-gray-200">
|
|
70
|
+
<div class="container px-5 py-8 flex flex-wrap gap-6 mx-auto">
|
|
71
|
+
<div>
|
|
72
|
+
<h6 class="mb-4 flex font-semibold uppercase md:justify-start">
|
|
73
|
+
Библиотеки
|
|
74
|
+
</h6>
|
|
75
|
+
<div class="flex flex-col gap-2 menu">
|
|
76
|
+
<div class="flex gap-1 items-center">
|
|
77
|
+
<a href="https://kosukhin.github.io/patron/#/" target="_blank">Silentium</a>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="flex gap-1 items-center">
|
|
80
|
+
<a href="https://kosukhin.github.io/patron-web-api.site/" target="_blank">Silentium-WEB-API</a>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="flex gap-1 items-center">
|
|
83
|
+
<a href="https://kosukhin.github.io/patron-web-api.site/" target="_blank">Silentium Редактор схем</a>
|
|
202
84
|
</div>
|
|
203
85
|
</div>
|
|
204
86
|
</div>
|
|
205
87
|
</div>
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
>
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
>@patron-oop</a
|
|
218
|
-
>
|
|
219
|
-
</p>
|
|
220
|
-
<span
|
|
221
|
-
class="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-500 text-sm"
|
|
222
|
-
>
|
|
223
|
-
patron components
|
|
224
|
-
</span>
|
|
225
|
-
</div>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="bg-gray-100">
|
|
90
|
+
<div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
|
|
91
|
+
<p class="text-gray-500 text-sm">
|
|
92
|
+
© 2025 Patron —
|
|
93
|
+
<a href="https://github.com/kosukhin/patron" class="text-gray-600 ml-1" target="_blank"
|
|
94
|
+
rel="noopener noreferrer">@silentium</a>
|
|
95
|
+
</p>
|
|
96
|
+
<span class="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-500 text-sm">
|
|
97
|
+
|
|
98
|
+
</span>
|
|
226
99
|
</div>
|
|
227
|
-
</
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
</body>
|
|
100
|
+
</div>
|
|
101
|
+
</footer>
|
|
102
|
+
<script src="./assets/js/index.mjs" type="module"></script>
|
|
103
|
+
</body>
|
|
104
|
+
|
|
233
105
|
</html>
|
package/eslint.config.mjs
CHANGED
|
@@ -27,6 +27,12 @@ export default [
|
|
|
27
27
|
rules: {
|
|
28
28
|
"@typescript-eslint/no-explicit-any": ["off"],
|
|
29
29
|
"prettier.bracketSpacing": ["off"],
|
|
30
|
+
"@typescript-eslint/explicit-member-accessibility": [
|
|
31
|
+
"error",
|
|
32
|
+
{
|
|
33
|
+
accessibility: "explicit",
|
|
34
|
+
},
|
|
35
|
+
],
|
|
30
36
|
},
|
|
31
37
|
},
|
|
32
38
|
{
|
|
@@ -36,6 +42,9 @@ export default [
|
|
|
36
42
|
|
|
37
43
|
languageOptions: {
|
|
38
44
|
parser: tsParser,
|
|
45
|
+
globals: {
|
|
46
|
+
window: "readonly",
|
|
47
|
+
},
|
|
39
48
|
},
|
|
40
49
|
},
|
|
41
50
|
eslintPluginPrettierRecommended,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "silentium-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/silentium-components.js",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
}
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"silentium": "^0.0.
|
|
60
|
+
"silentium": "^0.0.7",
|
|
61
61
|
"silentium-web-api": "^0.0.1"
|
|
62
62
|
}
|
|
63
63
|
}
|
|
@@ -2,7 +2,7 @@ import { GuestSync, SourceWithPool } from "silentium";
|
|
|
2
2
|
import { Dirty } from "../behaviors/Dirty";
|
|
3
3
|
import { expect, test } from "vitest";
|
|
4
4
|
|
|
5
|
-
test("
|
|
5
|
+
test("Dirty.test", () => {
|
|
6
6
|
const form = new SourceWithPool({
|
|
7
7
|
name: "one",
|
|
8
8
|
surname: "two",
|
|
@@ -13,8 +13,9 @@ test("GroupActiveClass.test", () => {
|
|
|
13
13
|
surname: "two",
|
|
14
14
|
});
|
|
15
15
|
|
|
16
|
-
const g = new GuestSync(
|
|
16
|
+
const g = new GuestSync();
|
|
17
17
|
dirtyForm.value(g);
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
// only changed fields
|
|
20
|
+
expect(g.value()).toStrictEqual({ name: "new" });
|
|
20
21
|
});
|
package/src/behaviors/Dirty.ts
CHANGED
|
@@ -12,6 +12,10 @@ import {
|
|
|
12
12
|
value,
|
|
13
13
|
} from "silentium";
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* Takes source and remember it first value
|
|
17
|
+
* returns new record, what will contain only fields what was changed
|
|
18
|
+
*/
|
|
15
19
|
export class Dirty<T extends object>
|
|
16
20
|
implements SourceObjectType<Partial<T>>, GuestObjectType<T>
|
|
17
21
|
{
|
|
@@ -40,16 +44,20 @@ export class Dirty<T extends object>
|
|
|
40
44
|
public value(guest: GuestType<Partial<T>>): unknown {
|
|
41
45
|
this.all.value(
|
|
42
46
|
new GuestCast(guest, ({ comparing, base }) => {
|
|
47
|
+
if (!comparing) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
|
|
43
51
|
give(
|
|
44
52
|
Object.fromEntries(
|
|
45
|
-
Object.entries(
|
|
53
|
+
Object.entries(comparing).filter(([key, value]) => {
|
|
46
54
|
if (this.alwaysKeep.includes(key)) {
|
|
47
55
|
return true;
|
|
48
56
|
}
|
|
49
57
|
if (this.excludeKeys.includes(key)) {
|
|
50
58
|
return false;
|
|
51
59
|
}
|
|
52
|
-
return value !== (
|
|
60
|
+
return value !== (base as any)[key];
|
|
53
61
|
}),
|
|
54
62
|
) as T,
|
|
55
63
|
guest,
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { SourceSync, SourceWithPool } from "silentium";
|
|
2
|
+
import { expect, test } from "vitest";
|
|
3
|
+
import { Loading } from "../behaviors/Loading";
|
|
4
|
+
|
|
5
|
+
test("Loading.test", () => {
|
|
6
|
+
const loadingStartSource = new SourceWithPool();
|
|
7
|
+
const loadingFinishSource = new SourceWithPool();
|
|
8
|
+
const loading = new SourceSync(
|
|
9
|
+
new Loading(loadingStartSource, loadingFinishSource),
|
|
10
|
+
);
|
|
11
|
+
loadingStartSource.give({});
|
|
12
|
+
expect(loading.syncValue()).toBe(true);
|
|
13
|
+
loadingFinishSource.give({});
|
|
14
|
+
expect(loading.syncValue()).toBe(false);
|
|
15
|
+
});
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import {
|
|
2
|
+
GuestCast,
|
|
3
|
+
GuestType,
|
|
4
|
+
SourceObjectType,
|
|
5
|
+
SourceType,
|
|
6
|
+
SourceWithPool,
|
|
7
|
+
value,
|
|
8
|
+
} from "silentium";
|
|
9
|
+
|
|
10
|
+
export class Loading implements SourceObjectType<boolean> {
|
|
11
|
+
private loadingSource = new SourceWithPool<boolean>();
|
|
12
|
+
|
|
13
|
+
public constructor(
|
|
14
|
+
private loadingStartSource: SourceType<unknown>,
|
|
15
|
+
private loadingFinishSource: SourceType<unknown>,
|
|
16
|
+
) {}
|
|
17
|
+
|
|
18
|
+
public value(guest: GuestType<boolean>) {
|
|
19
|
+
value(
|
|
20
|
+
this.loadingStartSource,
|
|
21
|
+
new GuestCast(guest, () => {
|
|
22
|
+
this.loadingSource.give(true);
|
|
23
|
+
}),
|
|
24
|
+
);
|
|
25
|
+
value(
|
|
26
|
+
this.loadingFinishSource,
|
|
27
|
+
new GuestCast(guest, () => {
|
|
28
|
+
this.loadingSource.give(false);
|
|
29
|
+
}),
|
|
30
|
+
);
|
|
31
|
+
this.loadingSource.value(guest);
|
|
32
|
+
return this;
|
|
33
|
+
}
|
|
34
|
+
}
|