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.
Files changed (21) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/docs/assets/css/base.css +5 -0
  3. package/docs/assets/css/custom.css +72 -0
  4. package/docs/assets/img/logo.svg +1522 -0
  5. package/docs/assets/js/index.mjs +7 -5
  6. package/docs/build.sh +9 -8
  7. package/docs/favicon.ico +0 -0
  8. package/docs/index-dev.html +87 -215
  9. package/docs/index.html +87 -215
  10. package/docs/pages/behaviors/dirty.html +15 -0
  11. package/docs/pages/behaviors/loading.html +24 -0
  12. package/docs/pages/behaviors.html +12 -0
  13. package/docs/pages/index.html +5 -0
  14. package/docs/routes.json +1 -1
  15. package/docs/template.html +87 -215
  16. package/eslint.config.mjs +9 -0
  17. package/package.json +2 -2
  18. package/src/behaviors/Dirty.test.ts +4 -3
  19. package/src/behaviors/Dirty.ts +10 -2
  20. package/src/behaviors/Loading.test.ts +15 -0
  21. package/src/behaviors/Loading.ts +34 -0
package/docs/index.html CHANGED
@@ -1,233 +1,105 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="ru">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta
6
- name="viewport"
7
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
8
- />
9
- <meta
10
- http-equiv="X-UA-Compatible"
11
- content="ie=edge"
12
- />
13
- <title>Идет загрузка...</title>
14
- <link
15
- rel="stylesheet"
16
- href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
17
- />
18
- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
19
- <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.9.0/highlightjs-line-numbers.min.js"></script>
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
- "patron-oop": "https://cdn.jsdelivr.net/npm/patron-oop@1.46.0/dist/patron.min.mjs",
109
- "patron-web-api": "https://cdn.jsdelivr.net/npm/patron-web-api@1.16.0/dist/patron-web-api.min.mjs",
110
- "patron-components": "https://cdn.jsdelivr.net/npm/patron-oop-components@1.20.0/dist/patron-components.min.mjs"
22
+ "silentium": "https://cdn.jsdelivr.net/npm/silentium@0.0.2/dist/silentium.min.mjs",
23
+ "silentium-web-api": "https://cdn.jsdelivr.net/npm/silentium-web-api@0.0.1/dist/silentium-web-api.min.mjs",
24
+ "silentium-components": "https://cdn.jsdelivr.net/npm/silentium-components@0.0.1/dist/silentium-components.min.mjs"
111
25
  }
112
26
  }
113
27
  </script>
114
- </head>
28
+ </head>
115
29
 
116
- <body class="flex flex-col h-full global-body body-loading">
117
- <div class="style-link" data-style="https://raw.githubusercontent.com/kosukhin/patorn-design-system/refs/heads/main/custom.css"></div>
118
- <header class="text-gray-600 body-font">
119
- <div
120
- class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center menu"
121
- >
122
- <div
123
- class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"
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="https://raw.githubusercontent.com/silentium-lab/silentium/refs/heads/main/docs/assets/css/custom.css"></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
- </header>
157
- <article class="container mx-auto p-5">
158
- <div class="loader">
159
- <div class="w-full flex justify-center">
160
- <div
161
- 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]"
162
- role="status"
163
- >
164
- <span
165
- class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
166
- >Loading...</span
167
- >
168
- </div>
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
- <div class="page-area"></div>
172
- </article>
173
- <footer class="text-gray-600 body-font mt-auto">
174
- <div class="border-t border-gray-200">
175
- <div class="container px-5 py-8 flex flex-wrap gap-6 mx-auto">
176
- <div>
177
- <h6 class="mb-4 flex font-semibold uppercase md:justify-start">
178
- Библиотеки
179
- </h6>
180
- <div class="flex flex-col gap-2 menu">
181
- <div class="flex gap-1 items-center">
182
- <a
183
- href="https://kosukhin.github.io/patron/#/"
184
- target="_blank"
185
- >Patron</a
186
- >
187
- </div>
188
- <div class="flex gap-1 items-center">
189
- <a
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
- <div class="bg-gray-100">
207
- <div
208
- class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row"
209
- >
210
- <p class="text-gray-500 text-sm">
211
- © 2025 Patron —
212
- <a
213
- href="https://github.com/kosukhin/patron"
214
- class="text-gray-600 ml-1"
215
- target="_blank"
216
- rel="noopener noreferrer"
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
- </footer>
228
- <script
229
- src="./assets/js/index.mjs"
230
- type="module"
231
- ></script>
232
- </body>
100
+ </div>
101
+ </footer>
102
+ <script src="./assets/js/index.mjs" type="module"></script>
103
+ </body>
104
+
233
105
  </html>
package/docs/pages/behaviors/dirty.html ADDED
@@ -0,0 +1,15 @@
1
+ <a href="https://github.com/silentium-lab/silentium-components/blob/main/src/behaviors/Dirty.ts" target="_blank"
2
+ class="text-regular 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 mb-4">
3
+ <img src="./assets/img/github_16.jpg" width="16" height="16" />
4
+ Dirty на GitHub
5
+ </a>
6
+ <h2 class="font-medium title-font text-gray-900 text-lg mb-2">
7
+ <span> Dirty </span>
8
+ </h2>
9
+
10
+
11
+ <p class="text-gray-600 text-lg mb-4">
12
+ Позволяет на основе имеющегося источника передающего структуру данных
13
+ создать новый источник, который вернет структуру данных
14
+ где окажутся только измененные поля.
15
+ </p>
package/docs/pages/behaviors/loading.html ADDED
@@ -0,0 +1,24 @@
1
+ <a href="https://github.com/silentium-lab/silentium-components/blob/main/src/behaviors/Loading.ts" target="_blank"
2
+ class="text-regular 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 mb-4">
3
+ <img src="./assets/img/github_16.jpg" width="16" height="16" />
4
+ Loading на GitHub
5
+ </a>
6
+ <h2 class="font-medium title-font text-gray-900 text-lg mb-2">
7
+ <span> Loading </span>
8
+ </h2>
9
+
10
+ <p class="text-gray-600 text-lg mb-4">
11
+ Позволяет представить поведение источника который сообщает о том, что
12
+ какая-то работа выполнена. Класс Loading построен на двух источниках,
13
+ первый источник начинает процесс загрузки, второй завершает.
14
+ </p>
15
+
16
+ <p class="text-gray-600 text-lg mb-4">
17
+ Чтобы лучше понять почему Loading класс именно так устроен представим, что
18
+ Нам нужно сделать запрос через FetchAPI у нас есть клиент,
19
+ который является источником результата запроса к АПИ и этот
20
+ клиент имеет зависимость от источника с запросом. Следовательно
21
+ когда в источнике с запросом появляется запрос - это сигнал того
22
+ что загрузка начата Loading переключается в true, когда Fetch Клиент
23
+ получит результат - загрузка завершена, loading переключается в false.
24
+ </p>
package/docs/pages/behaviors.html ADDED
@@ -0,0 +1,12 @@
1
+ <div class="grid grid-3 gap-3">
2
+ <div class="card">
3
+ <div class="card-title bottom-2">Dirty</div>
4
+ <div class="card-content bottom-1">Построить структуру с измененными полями</div>
5
+ <a class="dynamic-navigation top-auto link" href="/behaviors/dirty">Посмотреть</a>
6
+ </div>
7
+ <div class="card">
8
+ <div class="card-title bottom-2">Loading</div>
9
+ <div class="card-content bottom-1">Отслеживание начала и завершения процессов</div>
10
+ <a class="dynamic-navigation top-auto link" href="/behaviors/loading">Посмотреть</a>
11
+ </div>
12
+ </div>
package/docs/pages/index.html CHANGED
@@ -4,4 +4,9 @@
4
4
  <div class="card-content bottom-1">Управление историей переходов в браузере</div>
5
5
  <a class="dynamic-navigation top-auto link" href="/navigation">Посмотреть</a>
6
6
  </div>
7
+ <div class="card">
8
+ <div class="card-title bottom-2">Behaviors</div>
9
+ <div class="card-content bottom-1">Коллекция готовых поведений общего назначения</div>
10
+ <a class="dynamic-navigation top-auto link" href="/behaviors">Посмотреть</a>
11
+ </div>
7
12
  </div>
package/docs/routes.json CHANGED
@@ -1 +1 @@
1
-
1
+ ["pages/404.html","pages/index.html","pages/behaviors.html","pages/navigation.html","pages/navigation/navigation.html","pages/navigation/router.html","pages/behaviors/loading.html","pages/behaviors/dirty.html\n"]