@e280/sly 0.0.0-5 → 0.0.0-6

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 (14) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/s/demo/demo.css +4 -1
  4. package/s/demo/views/loaders.ts +16 -3
  5. package/s/features/op/loaders/parts/anims.ts +170 -34
  6. package/x/demo/demo.bundle.min.js +30 -17
  7. package/x/demo/demo.bundle.min.js.map +3 -3
  8. package/x/demo/demo.css +4 -1
  9. package/x/demo/views/loaders.js +16 -3
  10. package/x/demo/views/loaders.js.map +1 -1
  11. package/x/features/op/loaders/parts/anims.d.ts +13 -3
  12. package/x/features/op/loaders/parts/anims.js +159 -33
  13. package/x/features/op/loaders/parts/anims.js.map +1 -1
  14. package/x/index.html +6 -3
package/README.md CHANGED
@@ -42,7 +42,7 @@ sly views are wired to automatically rerender whenever they're using any state s
42
42
 
43
43
  return html`
44
44
  <p>count ${count()}</p>
45
- <button @click="${() => { count.value++ }}"></button>
45
+ <button @click="${() => { count.value++ }}">+</button>
46
46
  `
47
47
  })
48
48
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@e280/sly",
3
- "version": "0.0.0-5",
3
+ "version": "0.0.0-6",
4
4
  "description": "web shadow views",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/s/demo/demo.css CHANGED
@@ -5,7 +5,7 @@
5
5
  :root {
6
6
  --prime: #1eff00;
7
7
  --accent: #387d42;
8
- --pill: #12763959;
8
+ --pill: #1276391a;
9
9
  --bg: #0e2316;
10
10
  --link: cyan;
11
11
  }
@@ -52,6 +52,7 @@
52
52
 
53
53
  @layer page {
54
54
  :root {
55
+ height: 100%;
55
56
  font-size: 21px;
56
57
  font-family: sans-serif;
57
58
 
@@ -68,9 +69,11 @@
68
69
 
69
70
  body {
70
71
  width: 100%;
72
+ min-height: 100%;
71
73
  max-width: 32em;
72
74
  margin: auto;
73
75
  padding: 1em;
76
+ padding-bottom: 6em;
74
77
 
75
78
  display: flex;
76
79
  flex-direction: column;
package/s/demo/views/loaders.ts CHANGED
@@ -44,15 +44,28 @@ div {
44
44
 
45
45
  display: flex;
46
46
  flex-direction: column;
47
+ justify-content: center;
47
48
  align-items: center;
48
- gap: 0.4em;
49
+ text-align: center;
49
50
 
51
+ gap: 0.4em;
50
52
  padding: 0.2em 0.5em;
51
53
  background: var(--pill);
52
54
  border-radius: 0.5em;
53
55
 
54
- span:nth-child(1) { font-size: 0.6em; }
55
- span:nth-child(2) { font-size: 1.2em; }
56
+ span:nth-child(1) {
57
+ font-size: 0.6em;
58
+ }
59
+
60
+ span:nth-child(2) {
61
+ display: flex;
62
+ justify-content: center;
63
+ align-items: center;
64
+
65
+ font-size: 1.2em;
66
+ min-width: 7em;
67
+ min-height: 2.5em;
68
+ }
56
69
  }
57
70
  `
58
71
 
package/s/features/op/loaders/parts/anims.ts CHANGED
@@ -2,16 +2,18 @@
2
2
  import {makeAsciiAnim} from "./ascii-anim.js"
3
3
  import {Content} from "../../../views/types.js"
4
4
 
5
- const hz = 20
5
+ const fast = 20
6
+ const mid = 10
7
+ const slow = 4
6
8
 
7
- export const spinner = makeAsciiAnim(hz, [
9
+ export const spinner = makeAsciiAnim(fast, [
8
10
  "|",
9
11
  "/",
10
12
  "-",
11
13
  "\\",
12
14
  ])
13
15
 
14
- export const braille = makeAsciiAnim(hz, [
16
+ export const braille = makeAsciiAnim(fast, [
15
17
  "⠈",
16
18
  "⠐",
17
19
  "⠠",
@@ -22,18 +24,7 @@ export const braille = makeAsciiAnim(hz, [
22
24
  "⠁",
23
25
  ])
24
26
 
25
- export const arrow = makeAsciiAnim(hz, [
26
- "←",
27
- "↖",
28
- "↑",
29
- "↗",
30
- "→",
31
- "↘",
32
- "↓",
33
- "↙",
34
- ])
35
-
36
- export const arrow2 = makeAsciiAnim(hz, [
27
+ export const arrow = makeAsciiAnim(fast, [
37
28
  "⬆️",
38
29
  "↗️",
39
30
  "➡️",
@@ -44,7 +35,7 @@ export const arrow2 = makeAsciiAnim(hz, [
44
35
  "↖️",
45
36
  ])
46
37
 
47
- export const bar = makeAsciiAnim(hz, [
38
+ export const bar = makeAsciiAnim(fast, [
48
39
  "▰▱▱▱▱",
49
40
  "▰▱▱▱▱",
50
41
  "▱▰▱▱▱",
@@ -57,7 +48,7 @@ export const bar = makeAsciiAnim(hz, [
57
48
  "▱▰▱▱▱",
58
49
  ])
59
50
 
60
- export const bar2 = makeAsciiAnim(hz, [
51
+ export const bar2 = makeAsciiAnim(fast, [
61
52
  "▱▱▰▱▱",
62
53
  "▱▱▱▰▱",
63
54
  "▱▱▱▰▰",
@@ -80,7 +71,7 @@ export const bar2 = makeAsciiAnim(hz, [
80
71
  "▱▰▱▱▱",
81
72
  ])
82
73
 
83
- export const bar3 = makeAsciiAnim(hz, [
74
+ export const bar3 = makeAsciiAnim(fast, [
84
75
  "▰▱▱▱▱",
85
76
  "▰▱▱▱▱",
86
77
  "▰▰▱▱▱",
@@ -97,7 +88,8 @@ export const bar3 = makeAsciiAnim(hz, [
97
88
  "▰▰▱▱▱",
98
89
  ])
99
90
 
100
- export const bar4 = makeAsciiAnim(hz, [
91
+ export const bar4 = makeAsciiAnim(fast, [
92
+ "▱▱▱▱▱",
101
93
  "▱▱▱▱▱",
102
94
  "▰▱▱▱▱",
103
95
  "▰▰▱▱▱",
@@ -111,14 +103,57 @@ export const bar4 = makeAsciiAnim(hz, [
111
103
  "▱▱▱▱▰",
112
104
  ])
113
105
 
114
- export const pie = makeAsciiAnim(hz, [
106
+ export const block = makeAsciiAnim(fast, [
107
+ "▁▁▁▁▁",
108
+ "▁▁▁▁▁",
109
+ "█▁▁▁▁",
110
+ "██▁▁▁",
111
+ "███▁▁",
112
+ "████▁",
113
+ "█████",
114
+ "█████",
115
+ "▁████",
116
+ "▁▁███",
117
+ "▁▁▁██",
118
+ "▁▁▁▁█",
119
+ ])
120
+
121
+ export const block2 = makeAsciiAnim(fast, [
122
+ "█▁▁▁▁",
123
+ "█▁▁▁▁",
124
+ "██▁▁▁",
125
+ "███▁▁",
126
+ "████▁",
127
+ "█████",
128
+ "█████",
129
+ "▁████",
130
+ "▁▁███",
131
+ "▁▁▁██",
132
+ "▁▁▁▁█",
133
+ "▁▁▁▁█",
134
+ "▁▁▁██",
135
+ "▁▁███",
136
+ "▁████",
137
+ "█████",
138
+ "█████",
139
+ "████▁",
140
+ "███▁▁",
141
+ "██▁▁▁",
142
+ ])
143
+
144
+ export const runner = makeAsciiAnim(slow, [
145
+ "🚶",
146
+ "🏃",
147
+ ])
148
+
149
+ export const pie = makeAsciiAnim(mid, [
115
150
  "◷",
116
151
  "◶",
117
152
  "◵",
118
153
  "◴",
119
154
  ])
120
155
 
121
- export const cylon = makeAsciiAnim(hz, [
156
+ export const cylon = makeAsciiAnim(fast, [
122
157
  "=----",
123
158
  "-=---",
124
159
  "--=--",
@@ -131,7 +166,7 @@ export const cylon = makeAsciiAnim(hz, [
131
166
  "=----",
132
167
  ])
133
168
 
134
- export const slider = makeAsciiAnim(hz, [
169
+ export const slider = makeAsciiAnim(fast, [
135
170
  "o----",
136
171
  "-o---",
137
172
  "--o--",
@@ -144,7 +179,72 @@ export const slider = makeAsciiAnim(hz, [
144
179
  "o----",
145
180
  ])
146
181
 
147
- export const scrubber = makeAsciiAnim(hz, [
182
+ export const brackets = makeAsciiAnim(mid, [
183
+ "[ ]",
184
+ "[ ]",
185
+ "[= ]",
186
+ "[== ]",
187
+ "[===]",
188
+ "[ ==]",
189
+ "[ =]",
190
+ ])
191
+
192
+ export const brackets2 = makeAsciiAnim(mid, [
193
+ "[ ]",
194
+ "[ ]",
195
+ "[= ]",
196
+ "[== ]",
197
+ "[===]",
198
+ "[ ==]",
199
+ "[ =]",
200
+ "[ ]",
201
+ "[ ]",
202
+ "[ =]",
203
+ "[ ==]",
204
+ "[===]",
205
+ "[== ]",
206
+ "[= ]",
207
+ ])
208
+
209
+ export const dots = makeAsciiAnim(mid, [
210
+ " ",
211
+ " ",
212
+ ". ",
213
+ ".. ",
214
+ "...",
215
+ " ..",
216
+ " .",
217
+ ])
218
+
219
+ export const dots2 = makeAsciiAnim(fast, [
220
+ ". ",
221
+ ". ",
222
+ ".. ",
223
+ "...",
224
+ " ..",
225
+ " .",
226
+ " .",
227
+ " ..",
228
+ "...",
229
+ ".. ",
230
+ ])
231
+
232
+ export const wave = makeAsciiAnim(fast, [
233
+ ".....",
234
+ ".....",
235
+ ":....",
236
+ "::...",
237
+ ":::..",
238
+ "::::.",
239
+ ":::::",
240
+ ":::::",
241
+ ".::::",
242
+ "..:::",
243
+ "...::",
244
+ "....:",
245
+ ])
246
+
247
+ export const wavescrub = makeAsciiAnim(fast, [
148
248
  ":....",
149
249
  ":....",
150
250
  "::...",
@@ -159,7 +259,7 @@ export const scrubber = makeAsciiAnim(hz, [
159
259
  "::...",
160
260
  ])
161
261
 
162
- export const pulse = makeAsciiAnim(hz, [
262
+ export const wavepulse = makeAsciiAnim(fast, [
163
263
  ".....",
164
264
  ".....",
165
265
  "..:..",
@@ -171,7 +271,28 @@ export const pulse = makeAsciiAnim(hz, [
171
271
  ":...:",
172
272
  ])
173
273
 
174
- export const bin = makeAsciiAnim(hz, [
274
+ export const wavepulse2 = makeAsciiAnim(fast, [
275
+ ".....",
276
+ ".....",
277
+ "..:..",
278
+ ".:::.",
279
+ ".:::.",
280
+ ":::::",
281
+ ":::::",
282
+ "::.::",
283
+ ":...:",
284
+ ".....",
285
+ ".....",
286
+ ":...:",
287
+ "::.::",
288
+ ":::::",
289
+ ":::::",
290
+ ".:::.",
291
+ ".:::.",
292
+ "..:..",
293
+ ])
294
+
295
+ export const bin = makeAsciiAnim(fast, [
175
296
  "000",
176
297
  "100",
177
298
  "110",
@@ -180,7 +301,7 @@ export const bin = makeAsciiAnim(hz, [
180
301
  "001",
181
302
  ])
182
303
 
183
- export const binary = makeAsciiAnim(hz, [
304
+ export const binary = makeAsciiAnim(fast, [
184
305
  "11111",
185
306
  "01111",
186
307
  "00111",
@@ -194,7 +315,7 @@ export const binary = makeAsciiAnim(hz, [
194
315
  "11110",
195
316
  ])
196
317
 
197
- export const binary2 = makeAsciiAnim(hz, [
318
+ export const binary2 = makeAsciiAnim(fast, [
198
319
  "11111",
199
320
  "01111",
200
321
  "10111",
@@ -209,7 +330,22 @@ export const binary2 = makeAsciiAnim(hz, [
209
330
  "01111",
210
331
  ])
211
332
 
212
- export const clock = makeAsciiAnim(hz, [
333
+ export const pulseblue = makeAsciiAnim(slow, [
334
+ "🔹",
335
+ "🔵",
336
+ ])
337
+
338
+ export const kiss = makeAsciiAnim(mid, [
339
+ "🙂",
340
+ "🙂",
341
+ "😗",
342
+ "😙",
343
+ "😘",
344
+ "😘",
345
+ "😙",
346
+ ])
347
+
348
+ export const clock = makeAsciiAnim(fast, [
213
349
  "🕐",
214
350
  "🕑",
215
351
  "🕒",
@@ -224,7 +360,7 @@ export const clock = makeAsciiAnim(hz, [
224
360
  "🕛",
225
361
  ])
226
362
 
227
- export const fistbump = makeAsciiAnim(hz, [
363
+ export const fistbump = makeAsciiAnim(fast, [
228
364
  "🤜 🤛",
229
365
  "🤜 🤛",
230
366
  "🤜 🤛",
@@ -237,23 +373,23 @@ export const fistbump = makeAsciiAnim(hz, [
237
373
  "🤜 ✨ 🤛",
238
374
  ])
239
375
 
240
- export const earth = makeAsciiAnim(4, [
376
+ export const earth = makeAsciiAnim(slow, [
241
377
  "🌎",
242
378
  "🌏",
243
379
  "🌍",
244
380
  ])
245
381
 
246
- export const lock = makeAsciiAnim(4, [
382
+ export const lock = makeAsciiAnim(slow, [
247
383
  "🔓",
248
384
  "🔒",
249
385
  ])
250
386
 
251
- export const bright = makeAsciiAnim(4, [
387
+ export const bright = makeAsciiAnim(slow, [
252
388
  "🔅",
253
389
  "🔆",
254
390
  ])
255
391
 
256
- export const speaker = makeAsciiAnim(4, [
392
+ export const speaker = makeAsciiAnim(slow, [
257
393
  "🔈",
258
394
  "🔈",
259
395
  "🔉",
@@ -262,7 +398,7 @@ export const speaker = makeAsciiAnim(4, [
262
398
  "🔉",
263
399
  ])
264
400
 
265
- export const moon = makeAsciiAnim(10, [
401
+ export const moon = makeAsciiAnim(mid, [
266
402
  "🌑",
267
403
  "🌑",
268
404
  "🌑",