vgapp 1.1.7 → 1.1.8

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 (57) hide show
  1. package/CHANGELOG.md +11 -11
  2. package/README.md +48 -48
  3. package/app/langs/en/buttons.json +17 -17
  4. package/app/langs/en/messages.json +36 -36
  5. package/app/langs/ru/buttons.json +17 -17
  6. package/app/langs/ru/messages.json +36 -36
  7. package/app/modules/vgfilepreview/js/i18n.js +56 -56
  8. package/app/modules/vgfilepreview/js/renderers/image-modal.js +145 -145
  9. package/app/modules/vgfilepreview/js/renderers/image.js +92 -92
  10. package/app/modules/vgfilepreview/js/renderers/index.js +19 -19
  11. package/app/modules/vgfilepreview/js/renderers/office-modal.js +168 -168
  12. package/app/modules/vgfilepreview/js/renderers/office.js +79 -79
  13. package/app/modules/vgfilepreview/js/renderers/pdf-modal.js +260 -260
  14. package/app/modules/vgfilepreview/js/renderers/pdf.js +76 -76
  15. package/app/modules/vgfilepreview/js/renderers/playlist.js +71 -71
  16. package/app/modules/vgfilepreview/js/renderers/text-modal.js +343 -343
  17. package/app/modules/vgfilepreview/js/renderers/text.js +83 -83
  18. package/app/modules/vgfilepreview/js/renderers/video-modal.js +272 -272
  19. package/app/modules/vgfilepreview/js/renderers/video.js +80 -80
  20. package/app/modules/vgfilepreview/js/renderers/zip-modal.js +522 -522
  21. package/app/modules/vgfilepreview/js/renderers/zip.js +89 -89
  22. package/app/modules/vgfilepreview/js/vgfilepreview.js +7 -7
  23. package/app/modules/vgfilepreview/readme.md +68 -68
  24. package/app/modules/vgfilepreview/scss/_variables.scss +113 -113
  25. package/app/modules/vgfilepreview/scss/vgfilepreview.scss +464 -464
  26. package/app/modules/vgfiles/js/base.js +26 -26
  27. package/app/modules/vgfiles/js/droppable.js +260 -260
  28. package/app/modules/vgfiles/js/render.js +153 -153
  29. package/app/modules/vgfiles/js/vgfiles.js +41 -41
  30. package/app/modules/vgfiles/readme.md +123 -123
  31. package/app/modules/vgfiles/scss/_variables.scss +18 -18
  32. package/app/modules/vgfiles/scss/vgfiles.scss +148 -148
  33. package/app/modules/vgmodal/js/vgmodal.drag.js +332 -332
  34. package/app/modules/vgmodal/js/vgmodal.js +33 -33
  35. package/app/modules/vgmodal/js/vgmodal.resize.js +435 -435
  36. package/app/modules/vgnav/js/vgnav.js +135 -135
  37. package/app/modules/vgnav/readme.md +67 -67
  38. package/app/modules/vgnestable/README.md +307 -307
  39. package/app/modules/vgnestable/scss/_variables.scss +60 -60
  40. package/app/modules/vgnestable/scss/vgnestable.scss +163 -163
  41. package/app/modules/vgrollup/js/vgrollup.js +14 -9
  42. package/app/modules/vgselect/js/vgselect.js +39 -39
  43. package/app/modules/vgselect/scss/vgselect.scss +22 -22
  44. package/app/modules/vgspy/readme.md +28 -28
  45. package/app/modules/vgtoast/js/vgtoast.js +121 -76
  46. package/app/modules/vgtoast/readme.md +12 -1
  47. package/app/modules/vgtoast/scss/vgtoast.scss +42 -1
  48. package/app/utils/js/components/audio-metadata.js +240 -240
  49. package/app/utils/js/components/file-icon.js +109 -109
  50. package/app/utils/js/components/file-preview.js +304 -304
  51. package/app/utils/js/components/sanitize.js +150 -150
  52. package/app/utils/js/components/video-metadata.js +140 -140
  53. package/build/vgapp.css +1 -1
  54. package/build/vgapp.css.map +1 -1
  55. package/build/vgapp.js.map +1 -1
  56. package/index.scss +9 -9
  57. package/package.json +1 -1
@@ -70,27 +70,27 @@ $files-map: (
70
70
  info-radius: 4px,
71
71
  info-list-max-height: 360px,
72
72
 
73
- info-gap: 8px,
74
- info-padding: 8px,
75
- info-border-bottom-color: var(--vg-secondary-bg),
76
- info-hover-bg: rgba(var(--vg-secondary-bg-rgb), .4),
77
- info-audio-progress-track: rgba(var(--vg-secondary-bg-rgb), .3),
78
- info-audio-progress-fill: #000,
79
- info-audio-progress-opacity: .33,
80
- info-audio-row-min-height: 64px,
81
- info-audio-image-size: 48px,
82
-
83
- info-image-radius: 4px,
73
+ info-gap: 8px,
74
+ info-padding: 8px,
75
+ info-border-bottom-color: var(--vg-secondary-bg),
76
+ info-hover-bg: rgba(var(--vg-secondary-bg-rgb), .4),
77
+ info-audio-progress-track: rgba(var(--vg-secondary-bg-rgb), .3),
78
+ info-audio-progress-fill: #000,
79
+ info-audio-progress-opacity: .33,
80
+ info-audio-row-min-height: 64px,
81
+ info-audio-image-size: 48px,
82
+
83
+ info-image-radius: 4px,
84
84
  info-iteration-font-size: 16px,
85
85
  info-name-font-size: 16px,
86
86
  info-size-font-size: 14px,
87
87
 
88
- info-remove-icon-size: 16px,
89
- info-row-remove-size: 22px,
90
- info-row-remove-icon-size: 10px,
91
- info-failing-actions-gap: 6px,
92
- info-failing-actions-margin-start: 8px,
93
- drop-failing-actions-gap: 6px,
88
+ info-remove-icon-size: 16px,
89
+ info-row-remove-size: 22px,
90
+ info-row-remove-icon-size: 10px,
91
+ info-failing-actions-gap: 6px,
92
+ info-failing-actions-margin-start: 8px,
93
+ drop-failing-actions-gap: 6px,
94
94
 
95
95
  // legacy (оставлено для совместимости со старым API темы)
96
96
  info-mb: 10px,
@@ -112,4 +112,4 @@ $files-map: (
112
112
  info-list-span-me: 6px,
113
113
  info-list-button-fs: 12px,
114
114
  info-list-button-color: #999999,
115
- );
115
+ );
@@ -261,15 +261,15 @@
261
261
  }
262
262
  }
263
263
 
264
- .file {
265
- --vg-button-color: var(--vg-secondary);
266
- display: flex;
267
- align-items: center;
268
- gap: var(--vg-files-info-gap);
269
- padding: var(--vg-files-info-padding);
270
- border-bottom: 1px solid var(--vg-files-info-border-bottom-color);
271
- transition: all .2s ease-in-out;
272
- position: relative;
264
+ .file {
265
+ --vg-button-color: var(--vg-secondary);
266
+ display: flex;
267
+ align-items: center;
268
+ gap: var(--vg-files-info-gap);
269
+ padding: var(--vg-files-info-padding);
270
+ border-bottom: 1px solid var(--vg-files-info-border-bottom-color);
271
+ transition: all .2s ease-in-out;
272
+ position: relative;
273
273
 
274
274
  @include vgfiles-sortable();
275
275
  @include vgfiles-state();
@@ -278,45 +278,45 @@
278
278
  border-bottom: none;
279
279
  }
280
280
 
281
- &:hover {
282
- background-color: var(--vg-files-info-hover-bg);
283
- }
284
-
285
- &[data-vg-filepreview-renderer="audio"] {
286
- --vg-filepreview-audio-inline-progress: 0%;
287
- position: relative;
288
- overflow: hidden;
289
- isolation: isolate;
290
- min-height: var(--vg-files-info-audio-row-min-height);
291
- background-color: var(--vg-files-info-audio-progress-track);
292
-
293
- &::before {
294
- content: '';
295
- position: absolute;
296
- inset: 0 auto 0 0;
297
- width: var(--vg-filepreview-audio-inline-progress);
298
- background: var(--vg-files-info-audio-progress-fill);
299
- opacity: var(--vg-files-info-audio-progress-opacity);
300
- pointer-events: none;
301
- z-index: 0;
302
- transition: width .12s linear;
303
- }
304
-
305
- > * {
306
- position: relative;
307
- z-index: 1;
308
- }
309
-
310
- .file-image {
311
- flex: 0 0 var(--vg-files-info-audio-image-size);
312
- width: var(--vg-files-info-audio-image-size);
313
- height: var(--vg-files-info-audio-image-size);
314
- }
315
- }
316
-
317
- > * {
318
- transition: all .2s ease-in-out;
319
- }
281
+ &:hover {
282
+ background-color: var(--vg-files-info-hover-bg);
283
+ }
284
+
285
+ &[data-vg-filepreview-renderer="audio"] {
286
+ --vg-filepreview-audio-inline-progress: 0%;
287
+ position: relative;
288
+ overflow: hidden;
289
+ isolation: isolate;
290
+ min-height: var(--vg-files-info-audio-row-min-height);
291
+ background-color: var(--vg-files-info-audio-progress-track);
292
+
293
+ &::before {
294
+ content: '';
295
+ position: absolute;
296
+ inset: 0 auto 0 0;
297
+ width: var(--vg-filepreview-audio-inline-progress);
298
+ background: var(--vg-files-info-audio-progress-fill);
299
+ opacity: var(--vg-files-info-audio-progress-opacity);
300
+ pointer-events: none;
301
+ z-index: 0;
302
+ transition: width .12s linear;
303
+ }
304
+
305
+ > * {
306
+ position: relative;
307
+ z-index: 1;
308
+ }
309
+
310
+ .file-image {
311
+ flex: 0 0 var(--vg-files-info-audio-image-size);
312
+ width: var(--vg-files-info-audio-image-size);
313
+ height: var(--vg-files-info-audio-image-size);
314
+ }
315
+ }
316
+
317
+ > * {
318
+ transition: all .2s ease-in-out;
319
+ }
320
320
 
321
321
  &-image {
322
322
  flex: 0 0 var(--vg-files-image-width);
@@ -362,63 +362,63 @@
362
362
  display: none;
363
363
  }
364
364
 
365
- .name {
366
- display: block;
367
- overflow: hidden;
368
- text-overflow: ellipsis;
369
- white-space: nowrap;
370
- font-size: var(--vg-files-info-name-font-size);
371
-
372
- &.vg-filepreview-audio-inline {
373
- display: inline-flex;
374
- gap: var(--vg-filepreview-audio-inline-gap);
375
- align-items: center;
376
- }
377
-
378
- &.is-preview-action {
379
- cursor: pointer;
380
- }
381
- }
382
-
383
- .size {
384
- color: var(--vg-secondary);
385
- font-size: var(--vg-files-info-size-font-size);
386
- white-space: nowrap;
387
- margin-left: auto;
388
- }
389
-
390
- .download {
391
- margin-left: 8px;
392
-
393
- .vg-filepreview-download-trigger {
394
- padding: 0;
395
- background: transparent;
396
- color: var(--vg-secondary);
397
- border-radius: 0;
398
- font-size: var(--vg-files-info-size-font-size);
399
- font-weight: 500;
400
- gap: 4px;
401
-
402
- &:hover {
403
- color: var(--vg-body-color);
404
- }
405
-
406
- &__icon svg {
407
- width: 14px;
408
- height: 14px;
409
- }
410
-
411
- &__text {
412
- display: none;
413
- }
414
- }
415
- }
416
- }
417
-
418
- &-remove {
419
- flex: 0 0 var(--vg-files-remove-width);
420
- width: var(--vg-files-remove-width);
421
- margin-left: auto;
365
+ .name {
366
+ display: block;
367
+ overflow: hidden;
368
+ text-overflow: ellipsis;
369
+ white-space: nowrap;
370
+ font-size: var(--vg-files-info-name-font-size);
371
+
372
+ &.vg-filepreview-audio-inline {
373
+ display: inline-flex;
374
+ gap: var(--vg-filepreview-audio-inline-gap);
375
+ align-items: center;
376
+ }
377
+
378
+ &.is-preview-action {
379
+ cursor: pointer;
380
+ }
381
+ }
382
+
383
+ .size {
384
+ color: var(--vg-secondary);
385
+ font-size: var(--vg-files-info-size-font-size);
386
+ white-space: nowrap;
387
+ margin-left: auto;
388
+ }
389
+
390
+ .download {
391
+ margin-left: 8px;
392
+
393
+ .vg-filepreview-download-trigger {
394
+ padding: 0;
395
+ background: transparent;
396
+ color: var(--vg-secondary);
397
+ border-radius: 0;
398
+ font-size: var(--vg-files-info-size-font-size);
399
+ font-weight: 500;
400
+ gap: 4px;
401
+
402
+ &:hover {
403
+ color: var(--vg-body-color);
404
+ }
405
+
406
+ &__icon svg {
407
+ width: 14px;
408
+ height: 14px;
409
+ }
410
+
411
+ &__text {
412
+ display: none;
413
+ }
414
+ }
415
+ }
416
+ }
417
+
418
+ &-remove {
419
+ flex: 0 0 var(--vg-files-remove-width);
420
+ width: var(--vg-files-remove-width);
421
+ margin-left: auto;
422
422
 
423
423
  button {
424
424
  width: var(--vg-files-remove-width);
@@ -451,21 +451,21 @@
451
451
  fill: var(--vg-button-color);
452
452
  }
453
453
  }
454
- }
455
- }
456
- }
457
-
458
- &.failing {
459
- .file-remove {
460
- flex: 0 0 auto;
461
- width: auto;
462
- }
463
- }
464
-
465
- &:not(.with-image) {
466
- .file-info {
467
- .iteration {
468
- display: block;
454
+ }
455
+ }
456
+ }
457
+
458
+ &.failing {
459
+ .file-remove {
460
+ flex: 0 0 auto;
461
+ width: auto;
462
+ }
463
+ }
464
+
465
+ &:not(.with-image) {
466
+ .file-info {
467
+ .iteration {
468
+ display: block;
469
469
  }
470
470
  }
471
471
  }
@@ -512,26 +512,26 @@
512
512
  }
513
513
  }
514
514
  }
515
- }
516
- }
517
- }
518
- }
519
-
520
- .file-failing-actions {
521
- display: inline-flex;
522
- align-items: center;
523
- gap: var(--vg-files-info-failing-actions-gap);
524
- }
525
-
526
- &-info--list {
527
- .file.failing {
528
- .file-remove {
529
- margin-left: var(--vg-files-info-failing-actions-margin-start);
530
- }
531
- }
532
- }
533
-
534
- &-drop {
515
+ }
516
+ }
517
+ }
518
+ }
519
+
520
+ .file-failing-actions {
521
+ display: inline-flex;
522
+ align-items: center;
523
+ gap: var(--vg-files-info-failing-actions-gap);
524
+ }
525
+
526
+ &-info--list {
527
+ .file.failing {
528
+ .file-remove {
529
+ margin-left: var(--vg-files-info-failing-actions-margin-start);
530
+ }
531
+ }
532
+ }
533
+
534
+ &-drop {
535
535
  background-color: var(--vg-files-drop-bg);
536
536
  border: var(--vg-files-drop-border-width) var(--vg-files-drop-border-style) var(--vg-files-drop-border-color);
537
537
  cursor: pointer;
@@ -711,14 +711,14 @@
711
711
  flex-direction: column;
712
712
  gap: 8px;
713
713
 
714
- .file-remove {
715
- .file-failing-actions {
716
- gap: var(--vg-files-drop-failing-actions-gap);
717
- }
718
-
719
- button {
720
- background: var(--vg-body-bg);
721
- color: var(--vg-body-color);
714
+ .file-remove {
715
+ .file-failing-actions {
716
+ gap: var(--vg-files-drop-failing-actions-gap);
717
+ }
718
+
719
+ button {
720
+ background: var(--vg-body-bg);
721
+ color: var(--vg-body-color);
722
722
  border: none;
723
723
  cursor: pointer;
724
724
  outline: none;