@websolutespa/payload-plugin-bowl 0.4.0 → 1.0.1

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 CHANGED
@@ -1,5 +1,18 @@
1
1
  # @websolutespa/payload-plugin-bowl
2
2
 
3
+ ## 1.0.1
4
+
5
+ ### Minor Changes
6
+
7
+ - Added: CategoryTree.
8
+ - Fixing: sass.
9
+
10
+ ## 0.5.0
11
+
12
+ ### Minor Changes
13
+
14
+ - Modified routes, added redirects.
15
+
3
16
  ## 0.4.0
4
17
 
5
18
  ### Minor Changes
package/dist/index.css CHANGED
@@ -1,3 +1,568 @@
1
+ /* src/components/Category/CategoryList.scss */
2
+ .category-list__actions {
3
+ position: sticky;
4
+ top: 0;
5
+ display: flex;
6
+ align-items: center;
7
+ justify-content: flex-end;
8
+ column-gap: 10px;
9
+ padding: 10px;
10
+ z-index: 30;
11
+ border-bottom: 1px solid var(--theme-elevation-100);
12
+ background: var(--theme-elevation-0);
13
+ }
14
+ .category-list__actions .btn {
15
+ margin: 0;
16
+ padding: 1px 6px;
17
+ }
18
+ .category-list .eyebrow {
19
+ top: 48px;
20
+ }
21
+
22
+ /* src/components/DataTree/DataTree.scss */
23
+ :root {
24
+ --rct-item-height: 32px;
25
+ --rct-item-margin: 2px;
26
+ --rct-item-padding: 6px 0px;
27
+ --rct-item-gap: 0px;
28
+ --rct-item-border-radius: 2px;
29
+ --rct-title-container-gap: 2px;
30
+ --rct-bar-offset: 6px;
31
+ --rct-bar-width: 2px;
32
+ --rct-arrow-size: 10px;
33
+ --rct-arrow-container-size: 16px;
34
+ --rct-arrow-padding: 6px;
35
+ --rct-search-width: 120px;
36
+ --rct-search-height: 16px;
37
+ --rct-search-padding: 20px;
38
+ --rct-search-text-offset: calc(var(--rct-search-padding) * 2 + 16px);
39
+ --rct-search-container-width: calc(var(--rct-search-width) + var(--rct-search-text-offset) + var(--rct-search-padding) + 2px);
40
+ --rct-cursor: pointer;
41
+ }
42
+ :root {
43
+ --rct-color-arrow: #373a3f;
44
+ --rct-color-bar-bg: #0366d6;
45
+ --rct-color-drag-between-line-bg: #0366d6;
46
+ --rct-color-focustree-item-active-bg: #e4e6eb;
47
+ --rct-color-focustree-item-active-text: #4f4f4f;
48
+ --rct-color-focustree-item-draggingover-bg: #ebf0f4;
49
+ --rct-color-focustree-item-draggingover-color: inherit;
50
+ --rct-color-focustree-item-focused-border: #0366d6;
51
+ --rct-color-focustree-item-hover-bg: #f0f2f5;
52
+ --rct-color-focustree-item-hover-text: inherit;
53
+ --rct-color-focustree-item-selected-bg: #f0f2f5;
54
+ --rct-color-focustree-item-selected-text: inherit;
55
+ --rct-color-nonfocustree-item-focused-border: #dbdbdb;
56
+ --rct-color-nonfocustree-item-selected-bg: #e8eaed;
57
+ --rct-color-nonfocustree-item-selected-text: inherit;
58
+ --rct-color-renaming-input-submitbutton-bg-active: #095fc1;
59
+ --rct-color-renaming-input-submitbutton-bg-hover: #0366d6;
60
+ --rct-color-renaming-input-submitbutton-bg: inherit;
61
+ --rct-color-renaming-input-submitbutton-text-active: #ffffff;
62
+ --rct-color-renaming-input-submitbutton-text-hover: #ffffff;
63
+ --rct-color-renaming-input-submitbutton-text: inherit;
64
+ --rct-color-search-border-bottom: #0366d6;
65
+ --rct-color-search-border: #b4b7bd;
66
+ --rct-color-search-highlight-bg: #acccf1;
67
+ --rct-color-tree-bg: transparent;
68
+ --rct-color-tree-focus-outline: transparent;
69
+ --rct-focus-outline: #000000;
70
+ --rct-search-bg: #f8f9fa;
71
+ --rct-search-text: #000000;
72
+ }
73
+ html[data-theme=dark],
74
+ .rct-dark {
75
+ --rct-color-arrow: #ffffff;
76
+ --rct-color-bar-bg: var(--color-success-400);
77
+ --rct-color-drag-between-line-bg: var(--color-success-400);
78
+ --rct-color-focustree-item-focused-border: var(--color-success-400);
79
+ --rct-color-focustree-item-active-bg: #313131;
80
+ --rct-color-focustree-item-active-text: #ffffff;
81
+ --rct-color-focustree-item-draggingover-bg: #313131;
82
+ --rct-color-focustree-item-draggingover-color: #ffffff;
83
+ --rct-color-focustree-item-hover-bg: #373737;
84
+ --rct-color-focustree-item-hover-text: #ffffff;
85
+ --rct-color-focustree-item-selected-bg: #373737;
86
+ --rct-color-focustree-item-selected-text: #ffffff;
87
+ --rct-color-search-border-bottom: var(--color-success-400);
88
+ --rct-color-search-border: #4f4f4f;
89
+ --rct-color-search-highlight-bg: #2f5381;
90
+ --rct-focus-outline: #ffffff;
91
+ --rct-search-bg: #373737;
92
+ --rct-search-text: #ffffff;
93
+ }
94
+ .rct-tree-root {
95
+ font-family: sans-serif;
96
+ background-color: var(--rct-color-tree-bg);
97
+ padding: 4px 0;
98
+ font-size: 16px;
99
+ }
100
+ .rct-tree-root-focus {
101
+ outline: 1px solid var(--rct-color-tree-focus-outline);
102
+ }
103
+ .rct-tree-root.rct-tree-root-focus .rct-tree-item-title-container-selected {
104
+ background-color: var(--rct-color-focustree-item-selected-bg);
105
+ color: var(--rct-color-focustree-item-selected-text);
106
+ }
107
+ .rct-tree-root.rct-tree-root-focus .rct-tree-item-title-container-focused {
108
+ outline: none;
109
+ border-color: var(--rct-color-focustree-item-focused-border);
110
+ }
111
+ .rct-tree-root:not(.rct-tree-root-focus) .rct-tree-item-title-container-selected {
112
+ background-color: var(--rct-color-nonfocustree-item-selected-bg);
113
+ color: var(--rct-color-nonfocustree-item-selected-text);
114
+ }
115
+ .rct-tree-root:not(.rct-tree-root-focus) .rct-tree-item-title-container-focused {
116
+ outline: none;
117
+ border-color: var(--rct-color-nonfocustree-item-focused-border);
118
+ }
119
+ .rct-tree-items-container {
120
+ margin: 0;
121
+ padding: 0;
122
+ box-shadow: 0 -1px 0 var(--theme-elevation-100);
123
+ }
124
+ .rct-tree-item {
125
+ }
126
+ .rct-tree-item-li {
127
+ list-style-type: none;
128
+ padding: 0;
129
+ margin: 0;
130
+ box-shadow: 0 1px 0 var(--theme-elevation-100);
131
+ }
132
+ .rct-tree-item-li .btn {
133
+ margin: 0;
134
+ padding: 0;
135
+ flex: 0 0 60px;
136
+ }
137
+ .rct-tree-item-li .btn__label {
138
+ display: flex;
139
+ justify-content: center;
140
+ align-items: center;
141
+ width: auto;
142
+ gap: 0.3em;
143
+ }
144
+ .rct-tree-item-li .btn__label svg {
145
+ flex: 0 0 1.5em;
146
+ fill: currentColor;
147
+ }
148
+ .rct-tree-item-title-container {
149
+ display: flex;
150
+ align-items: center;
151
+ column-gap: var(--rct-title-container-gap);
152
+ background-color: unset !important;
153
+ }
154
+ .rct-tree-item-title-container-dragging-over {
155
+ background-color: var(--rct-color-focustree-item-draggingover-bg);
156
+ color: var(--rct-color-focustree-item-draggingover-color);
157
+ outline: 1px solid var(--color-success-400);
158
+ }
159
+ .rct-tree-item-title-container-dragging-over .rct-tree-item-button {
160
+ background-color: var(--rct-color-focustree-item-draggingover-bg);
161
+ color: var(--rct-color-focustree-item-draggingover-color);
162
+ }
163
+ .rct-tree-item-title-container-selected .rct-tree-item-button::before {
164
+ content: "";
165
+ position: absolute;
166
+ top: calc(var(--rct-bar-offset) + var(var(--rct-item-margin)));
167
+ left: calc(-0.5 * var(--rct-bar-width));
168
+ height: calc(var(--rct-item-height) - 2 * var(--rct-bar-offset));
169
+ width: var(--rct-bar-width);
170
+ background-color: var(--rct-color-bar-bg);
171
+ border-radius: 1px;
172
+ }
173
+ .rct-tree-item-arrow {
174
+ position: absolute;
175
+ z-index: 1;
176
+ margin-left: 4px;
177
+ width: var(--rct-arrow-container-size);
178
+ height: var(--rct-arrow-container-size);
179
+ display: flex;
180
+ justify-content: center;
181
+ align-content: center;
182
+ border-radius: var(--rct-item-border-radius);
183
+ cursor: var(--rct-cursor);
184
+ }
185
+ .rct-tree-item-arrow svg {
186
+ width: var(--rct-arrow-size);
187
+ }
188
+ .rct-tree-item-arrow.rct-tree-item-arrow-isFolder:hover {
189
+ background-color: var(--rct-color-focustree-item-hover-bg);
190
+ color: var(--rct-color-focustree-item-hover-text);
191
+ }
192
+ .rct-tree-item-arrow-path {
193
+ fill: var(--rct-color-arrow);
194
+ }
195
+ .rct-tree-item-button {
196
+ flex-grow: 1;
197
+ box-sizing: border-box;
198
+ position: relative;
199
+ display: flex;
200
+ align-items: center;
201
+ width: 100%;
202
+ height: var(--rct-item-height);
203
+ padding: var(--rct-item-padding);
204
+ padding-left: calc(var(--rct-arrow-container-size) + var(--rct-arrow-padding));
205
+ border: none;
206
+ border-radius: var(--rct-item-border-radius);
207
+ background-color: transparent;
208
+ font-family: inherit;
209
+ font-size: inherit;
210
+ text-align: left;
211
+ color: inherit;
212
+ outline: none;
213
+ transition: color 100ms ease-out, background-color 100ms ease-out;
214
+ cursor: var(--rct-cursor);
215
+ }
216
+ .rct-tree-item-button:focus-visible {
217
+ outline: 2px solid var(--rct-focus-outline);
218
+ }
219
+ .rct-tree-item-button:hover {
220
+ background-color: var(--rct-color-focustree-item-hover-bg);
221
+ color: var(--rct-color-focustree-item-hover-text);
222
+ }
223
+ .rct-tree-item-button:active {
224
+ background-color: var(--rct-color-focustree-item-active-bg);
225
+ color: var(--rct-color-focustree-item-active-text);
226
+ }
227
+ .rct-tree-item-button-search-match {
228
+ font-style: italic;
229
+ }
230
+ .rct-tree-item-search-highlight {
231
+ background-color: var(--rct-color-search-highlight-bg);
232
+ }
233
+ .rct-tree-item-renaming-form {
234
+ flex-grow: 1;
235
+ display: flex;
236
+ }
237
+ .rct-tree-item-renaming-input {
238
+ flex-grow: 1;
239
+ background-color: inherit;
240
+ border: none;
241
+ color: inherit;
242
+ outline: none;
243
+ }
244
+ .rct-tree-item-renaming-submit-button {
245
+ border: none;
246
+ background-color: var(--rct-color-renaming-input-submitbutton-bg);
247
+ border-radius: var(--rct-item-border-radius);
248
+ color: var(--rct-color-renaming-input-submitbutton-text);
249
+ cursor: pointer;
250
+ visibility: hidden;
251
+ }
252
+ .rct-tree-item-renaming-submit-button:hover {
253
+ background-color: var(--rct-color-renaming-input-submitbutton-bg-hover);
254
+ color: var(--rct-color-renaming-input-submitbutton-text-hover);
255
+ }
256
+ .rct-tree-item-renaming-submit-button:active {
257
+ background-color: var(--rct-color-renaming-input-submitbutton-bg-active);
258
+ color: var(--rct-color-renaming-input-submitbutton-text-active);
259
+ }
260
+ .rct-tree-drag-between-line {
261
+ position: absolute;
262
+ right: 0;
263
+ top: -2px;
264
+ height: 3px;
265
+ border-radius: 99px;
266
+ background-color: var(--rct-color-drag-between-line-bg);
267
+ }
268
+ .rct-tree-drag-between-line-top {
269
+ top: 0px;
270
+ }
271
+ .rct-tree-drag-between-line-bottom {
272
+ top: -4px;
273
+ }
274
+ .rct-tree-search-input-container {
275
+ position: absolute;
276
+ top: 0;
277
+ right: 0;
278
+ width: var(--rct-search-container-width);
279
+ }
280
+ .rct-tree-search-input {
281
+ width: var(--rct-search-width);
282
+ height: var(--rct-search-height);
283
+ padding: var(--rct-search-padding);
284
+ padding-left: var(--rct-search-text-offset);
285
+ margin: 0;
286
+ border: 1px solid var(--rct-color-search-border);
287
+ border-bottom: 2px solid var(--rct-color-search-border-bottom);
288
+ border-radius: var(--rct-item-border-radius);
289
+ background-color: var(--rct-search-bg);
290
+ color: var(--rct-search-text);
291
+ }
292
+ .rct-tree-search-input:focus {
293
+ outline: none;
294
+ }
295
+ .rct-tree-input-icon {
296
+ content: url(data:image/svg+xml,%3Csvg%20stroke%3D%22currentColor%22%20fill%3D%22currentColor%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2016%2016%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
297
+ position: fixed;
298
+ transform: translateY(var(--rct-search-padding)) translateX(var(--rct-search-padding));
299
+ z-index: 1;
300
+ }
301
+ .rct-dark .rct-tree-input-icon {
302
+ content: url(data:image/svg+xml,%3Csvg%20stroke%3D%22%23ffffff%22%20fill%3D%22%23ffffff%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2016%2016%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.742%2010.344a6.5%206.5%200%201%200-1.397%201.398h-.001c.03.04.062.078.098.115l3.85%203.85a1%201%200%200%200%201.415-1.414l-3.85-3.85a1.007%201.007%200%200%200-.115-.1zM12%206.5a5.5%205.5%200%201%201-11%200%205.5%205.5%200%200%201%2011%200z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
303
+ }
304
+
305
+ /* src/components/ImportExport/ImportExportList.scss */
306
+ .import-export-list {
307
+ padding-top: 0.4807692308rem;
308
+ padding-bottom: 0.4807692308rem;
309
+ color: var(--theme-elevation-400);
310
+ transform: translateY(-1.9230769231rem);
311
+ }
312
+ .import-export-list__actions {
313
+ display: flex;
314
+ justify-content: flex-end;
315
+ align-items: center;
316
+ column-gap: 10px;
317
+ margin-top: -3.8461538462rem;
318
+ margin-bottom: 3.8461538462rem;
319
+ }
320
+ .import-export-list__actions .btn {
321
+ margin: 0;
322
+ }
323
+ .import-export-list__actions svg {
324
+ fill: currentColor;
325
+ }
326
+ .import-export-list__modal:before,
327
+ .import-export-list__modal:after {
328
+ content: " ";
329
+ position: absolute;
330
+ top: 0;
331
+ right: 0;
332
+ bottom: 0;
333
+ left: 0;
334
+ pointer-events: none;
335
+ }
336
+ .import-export-list__modal:before {
337
+ background: var(--theme-bg);
338
+ opacity: 0.85;
339
+ }
340
+ .import-export-list__modal:after {
341
+ backdrop-filter: blur(5px);
342
+ }
343
+ .import-export-list__modal .template-minimal {
344
+ display: flex;
345
+ width: 100%;
346
+ justify-content: center;
347
+ align-items: center;
348
+ padding: 1.9230769231rem;
349
+ margin-left: auto;
350
+ margin-right: auto;
351
+ min-height: 100%;
352
+ min-height: 100vh;
353
+ z-index: 1;
354
+ position: relative;
355
+ }
356
+
357
+ /* src/components/ImportExport/ImportModal.scss */
358
+ .import-modal__header {
359
+ width: 100%;
360
+ display: flex;
361
+ justify-content: space-between;
362
+ margin: 0 0 0.6rem 0;
363
+ }
364
+ .import-modal__header h3 {
365
+ display: flex;
366
+ gap: 0.5em;
367
+ margin: 0;
368
+ }
369
+ .import-modal__header h3 svg {
370
+ width: 1em;
371
+ height: 1em;
372
+ fill: currentColor;
373
+ }
374
+ .import-modal__main .rich-text__editor {
375
+ overflow-x: hidden;
376
+ overflow-y: auto;
377
+ max-height: max(160px, 100vh - 650px);
378
+ }
379
+ .import-modal__foot {
380
+ display: flex;
381
+ gap: 2rem;
382
+ }
383
+ .import-modal__foot > .btn,
384
+ .import-modal__foot > .form-submit {
385
+ flex: 1 1 calc(50% - 1rem);
386
+ }
387
+ .import-modal__foot > .btn > .btn,
388
+ .import-modal__foot > .form-submit > .btn {
389
+ width: 100%;
390
+ }
391
+ .import-modal__dropzone {
392
+ text-align: center;
393
+ padding: 20px;
394
+ border: 3px #2f2f2f dashed;
395
+ width: 100%;
396
+ height: 150px;
397
+ display: flex;
398
+ justify-content: center;
399
+ align-items: center;
400
+ line-height: 1;
401
+ cursor: pointer;
402
+ }
403
+ .import-modal__logs {
404
+ display: flex;
405
+ flex-direction: column;
406
+ row-gap: 5px;
407
+ list-style: none;
408
+ padding: 0;
409
+ margin: 1em 0 0 0;
410
+ line-height: 1.4;
411
+ padding: 1rem;
412
+ border: 2px solid #2f2f2f;
413
+ border-radius: 8px;
414
+ max-height: 150px;
415
+ overflow-y: auto;
416
+ }
417
+ .import-modal__log {
418
+ padding: 0;
419
+ }
420
+ .import-modal__log--duplicate {
421
+ color: red;
422
+ }
423
+ .import-modal__log--invalid {
424
+ color: red;
425
+ }
426
+ .import-modal__log--required {
427
+ color: red;
428
+ }
429
+ .import-modal__log--unexpected {
430
+ color: orange;
431
+ }
432
+ .import-modal__log--optional {
433
+ color: grey;
434
+ }
435
+
436
+ /* src/components/Category/CategoryTree.scss */
437
+ .category-tree__actions {
438
+ flex-grow: 1;
439
+ position: sticky;
440
+ top: 0;
441
+ display: flex;
442
+ align-items: center;
443
+ justify-content: flex-end;
444
+ column-gap: 10px;
445
+ padding: 10px;
446
+ }
447
+ .category-tree__actions .btn {
448
+ margin: 0;
449
+ }
450
+ .category-tree__foot {
451
+ display: flex;
452
+ gap: 2rem;
453
+ }
454
+ .category-tree__foot > .btn,
455
+ .category-tree__foot > .form-submit {
456
+ flex: 1 1 calc(50% - 1rem);
457
+ }
458
+ .category-tree__foot > .btn > .btn,
459
+ .category-tree__foot > .form-submit > .btn {
460
+ width: 100%;
461
+ }
462
+ .category-edit__modal:before,
463
+ .category-edit__modal:after {
464
+ content: " ";
465
+ position: absolute;
466
+ top: 0;
467
+ right: 0;
468
+ bottom: 0;
469
+ left: 0;
470
+ pointer-events: none;
471
+ }
472
+ .category-edit__modal:before {
473
+ background: var(--theme-bg);
474
+ opacity: 0.85;
475
+ }
476
+ .category-edit__modal:after {
477
+ backdrop-filter: blur(5px);
478
+ }
479
+ .category-edit__modal .template-minimal {
480
+ display: flex;
481
+ width: 100%;
482
+ justify-content: center;
483
+ align-items: center;
484
+ padding: 1.9230769231rem;
485
+ margin-left: auto;
486
+ margin-right: auto;
487
+ min-height: 100%;
488
+ min-height: 100vh;
489
+ z-index: 1;
490
+ position: relative;
491
+ }
492
+ .category-edit__modal .template-minimal__wrap {
493
+ display: flex;
494
+ flex-direction: column;
495
+ justify-content: center;
496
+ }
497
+ .category-edit__modal .collection-edit {
498
+ display: flex;
499
+ flex-direction: column;
500
+ justify-content: center;
501
+ align-items: center;
502
+ width: 100%;
503
+ padding: 0;
504
+ margin: 0;
505
+ min-height: 0;
506
+ height: auto;
507
+ }
508
+ .category-edit__modal .collection-edit__edit {
509
+ padding: 0;
510
+ margin: 0;
511
+ }
512
+ .category-edit__modal .collection-edit__main {
513
+ width: 100%;
514
+ }
515
+ .category-edit__modal .collection-edit__form {
516
+ width: 100%;
517
+ height: auto;
518
+ }
519
+ .category-edit__header {
520
+ width: 100%;
521
+ display: flex;
522
+ justify-content: space-between;
523
+ margin: 0 0 0.6rem 0;
524
+ }
525
+ .category-edit__header h3 {
526
+ display: flex;
527
+ gap: 0.5em;
528
+ margin: 0;
529
+ }
530
+ .category-edit__header h3 svg {
531
+ width: 1em;
532
+ height: 1em;
533
+ fill: currentColor;
534
+ }
535
+ .category-edit__main .rich-text__editor {
536
+ overflow-x: hidden;
537
+ overflow-y: auto;
538
+ max-height: max(160px, 100vh - 650px);
539
+ }
540
+ .category-edit__reference {
541
+ color: var(--theme-elevation-400);
542
+ }
543
+ .category-edit__preview {
544
+ margin: 0 0 0.6rem 0;
545
+ padding: 1em;
546
+ max-height: 150px;
547
+ overflow-x: hidden;
548
+ overflow-y: auto;
549
+ border: 2px solid var(--theme-elevation-150);
550
+ border-radius: 4px;
551
+ color: var(--theme-elevation-400);
552
+ }
553
+ .category-edit__foot {
554
+ display: flex;
555
+ gap: 2rem;
556
+ }
557
+ .category-edit__foot > .btn,
558
+ .category-edit__foot > .form-submit {
559
+ flex: 1 1 calc(50% - 1rem);
560
+ }
561
+ .category-edit__foot > .btn > .btn,
562
+ .category-edit__foot > .form-submit > .btn {
563
+ width: 100%;
564
+ }
565
+
1
566
  /* src/fields/color-picker/styles.scss */
2
567
  .add-color.btn {
3
568
  margin: 0;