@konfuzio/document-validation-ui 0.1.54 → 0.1.55-dev.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.
Files changed (57) hide show
  1. package/dist/css/app.css +1 -1
  2. package/dist/index.html +1 -1
  3. package/dist/js/app.js +1 -1
  4. package/dist/js/app.js.map +1 -1
  5. package/dist/js/chunk-vendors.js +66 -23
  6. package/dist/js/chunk-vendors.js.map +1 -1
  7. package/jest.config.js +22 -2
  8. package/package.json +31 -37
  9. package/src/assets/scss/ann_set_table_options.scss +4 -4
  10. package/src/assets/scss/annotation_action_buttons.scss +7 -7
  11. package/src/assets/scss/annotation_details.scss +9 -9
  12. package/src/assets/scss/choose_label_set_modal.scss +5 -5
  13. package/src/assets/scss/document_action_bar.scss +3 -3
  14. package/src/assets/scss/document_annotations.scss +40 -40
  15. package/src/assets/scss/document_category.scss +8 -8
  16. package/src/assets/scss/document_dashboard.scss +1 -1
  17. package/src/assets/scss/document_edit.scss +29 -28
  18. package/src/assets/scss/document_error.scss +6 -6
  19. package/src/assets/scss/document_name.scss +6 -6
  20. package/src/assets/scss/document_page.scss +3 -3
  21. package/src/assets/scss/document_search_bar.scss +7 -7
  22. package/src/assets/scss/document_set_chooser.scss +2 -2
  23. package/src/assets/scss/document_thumbnails.scss +7 -7
  24. package/src/assets/scss/document_toolbar.scss +10 -10
  25. package/src/assets/scss/document_top_bar.scss +10 -10
  26. package/src/assets/scss/document_viewport_modal.scss +3 -3
  27. package/src/assets/scss/documents_list.scss +11 -12
  28. package/src/assets/scss/edit_page_thumbnail.scss +6 -6
  29. package/src/assets/scss/empty_state.scss +4 -4
  30. package/src/assets/scss/error_page.scss +2 -2
  31. package/src/assets/scss/extracting_data.scss +3 -3
  32. package/src/assets/scss/multi_ann_table_overlay.scss +3 -3
  33. package/src/assets/scss/multi_ann_table_popup.scss +1 -1
  34. package/src/assets/scss/new_annotation.scss +21 -14
  35. package/src/assets/scss/scrolling_document.scss +1 -1
  36. package/src/assets/scss/theme.scss +63 -52
  37. package/src/assets/scss/variables.scss +2 -0
  38. package/src/components/App.vue +75 -14
  39. package/src/components/DocumentAnnotations/AnnotationActionButtons.vue +2 -5
  40. package/src/components/DocumentAnnotations/AnnotationRow.vue +14 -2
  41. package/src/components/DocumentAnnotations/DocumentAnnotations.vue +19 -22
  42. package/src/components/DocumentDashboard.vue +11 -16
  43. package/src/components/DocumentEdit/EditPages.vue +48 -48
  44. package/src/components/DocumentPage/DocumentPage.vue +2 -2
  45. package/src/components/DocumentPage/EditAnnotation.vue +14 -12
  46. package/src/components/DocumentPage/NewAnnotation.vue +15 -14
  47. package/src/constants.js +1 -7
  48. package/src/i18n.js +2 -5
  49. package/src/locales/de.json +1 -1
  50. package/src/locales/en.json +1 -1
  51. package/src/locales/es.json +1 -1
  52. package/src/main.js +13 -16
  53. package/src/store/display.js +33 -22
  54. package/src/store/document.js +30 -15
  55. package/src/store/index.js +5 -8
  56. package/src/utils/utils.js +6 -0
  57. package/src/assets/scss/imports.scss +0 -1
@@ -1,4 +1,4 @@
1
- @import "./imports.scss";
1
+ @use "variables.scss";
2
2
 
3
3
  .empty-container {
4
4
  width: 100%;
@@ -6,7 +6,7 @@
6
6
  display: flex;
7
7
  flex-direction: column;
8
8
  justify-content: flex-start;
9
- font-family: $font-family;
9
+ font-family: variables.$font-family;
10
10
 
11
11
  svg {
12
12
  align-self: center;
@@ -17,7 +17,7 @@
17
17
 
18
18
  .title {
19
19
  font-size: 16px;
20
- color: $text;
20
+ color: variables.$text;
21
21
  font-weight: 500;
22
22
  text-align: center;
23
23
  margin: 0;
@@ -26,7 +26,7 @@
26
26
  .description {
27
27
  font-size: 14px;
28
28
  line-height: 20px;
29
- color: $text-lighter;
29
+ color: variables.$text-lighter;
30
30
  font-weight: 400;
31
31
  text-align: center;
32
32
  }
@@ -1,4 +1,4 @@
1
- @import "./imports.scss";
1
+ @use "variables.scss";
2
2
 
3
3
  .error-page {
4
4
  width: 100vw;
@@ -9,6 +9,6 @@
9
9
  flex-direction: column;
10
10
  gap: 16px;
11
11
  .error-icon {
12
- color: $red;
12
+ color: variables.$red;
13
13
  }
14
14
  }
@@ -1,4 +1,4 @@
1
- @import "./imports.scss";
1
+ @use "variables.scss";
2
2
 
3
3
  .data-extraction-container {
4
4
  display: flex;
@@ -22,14 +22,14 @@
22
22
  font-size: 16px;
23
23
  font-weight: 500;
24
24
  line-height: 24px;
25
- color: $text-color;
25
+ color: variables.$text-color;
26
26
  margin-bottom: 3px;
27
27
  }
28
28
 
29
29
  .description {
30
30
  font-size: 14px;
31
31
  line-height: 20px;
32
- color: $grey;
32
+ color: variables.$grey;
33
33
  }
34
34
  }
35
35
  }
@@ -1,4 +1,4 @@
1
- @import "./imports.scss";
1
+ @use "variables.scss";
2
2
 
3
3
  .multi-ann-table-overlay {
4
4
  position: absolute;
@@ -6,7 +6,7 @@
6
6
  height: fit-content;
7
7
  z-index: 40;
8
8
  width: 100%;
9
- background-color: $background;
9
+ background-color: variables.$background;
10
10
 
11
11
  .multi-ann-set-table {
12
12
  padding-bottom: 6px;
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  .delete-action {
28
- color: $red;
28
+ color: variables.$red;
29
29
  }
30
30
  }
31
31
 
@@ -1,4 +1,4 @@
1
- @import "./imports.scss";
1
+ @use "variables.scss";
2
2
 
3
3
  .multi-ann-table-popup {
4
4
  position: absolute;
@@ -1,8 +1,8 @@
1
- @import "./imports.scss";
1
+ @use "variables.scss";
2
2
 
3
3
  .annotation-popup {
4
4
  border-radius: 12px;
5
- background-color: $text-color;
5
+ background-color: variables.$text-color;
6
6
  display: flex;
7
7
  flex-direction: column;
8
8
  gap: 8px;
@@ -10,7 +10,7 @@
10
10
  width: 205px;
11
11
  height: 192px;
12
12
  z-index: 40;
13
- color: $white;
13
+ color: variables.$white;
14
14
  padding: 8px;
15
15
  cursor: default;
16
16
 
@@ -19,8 +19,8 @@
19
19
  }
20
20
 
21
21
  .popup-input {
22
- background-color: $text-color;
23
- color: $white;
22
+ background-color: variables.$text-color;
23
+ color: variables.$white;
24
24
  font-size: 14px;
25
25
  font-weight: 400;
26
26
  line-height: 20px;
@@ -28,13 +28,20 @@
28
28
  box-shadow: none;
29
29
  padding: 8px;
30
30
  border-radius: 12px;
31
- border: 1px solid $grey-low-opacity;
31
+ border: 1px solid variables.$grey-low-opacity;
32
32
  width: 100%;
33
33
  justify-content: space-between;
34
34
  position: relative;
35
35
  text-wrap: wrap;
36
36
  text-align: left;
37
37
 
38
+ > span {
39
+ white-space: nowrap;
40
+ width: 100%;
41
+ overflow: hidden;
42
+ margin-right: 24px;
43
+ }
44
+
38
45
  .caret-icon {
39
46
  position: absolute;
40
47
  right: 18px;
@@ -43,16 +50,16 @@
43
50
  }
44
51
 
45
52
  .not-selected {
46
- color: $grey-detail;
53
+ color: variables.$grey-detail;
47
54
  }
48
55
 
49
56
  .add-ann-set {
50
57
  &.has-border {
51
- border-top: 1px solid $grey-detail;
58
+ border-top: 1px solid variables.$grey-detail;
52
59
  }
53
60
 
54
61
  width: 100%;
55
- color: $primary !important;
62
+ color: variables.$primary !important;
56
63
  font-size: 14px;
57
64
  line-height: 24px;
58
65
  font-weight: 500;
@@ -68,11 +75,11 @@
68
75
 
69
76
  .annotation-dropdown {
70
77
  border-radius: 12px;
71
- border: 1px solid $grey-low-opacity !important;
78
+ border: 1px solid variables.$grey-low-opacity !important;
72
79
 
73
80
  .button.is-text {
74
81
  box-shadow: none !important;
75
- color: $white !important;
82
+ color: variables.$white !important;
76
83
  background-color: transparent !important;
77
84
  text-decoration: none;
78
85
  }
@@ -85,15 +92,15 @@
85
92
  gap: 2px;
86
93
 
87
94
  .button.is-text {
88
- color: $white !important;
95
+ color: variables.$white !important;
89
96
  text-decoration: none;
90
97
  }
91
98
 
92
99
  .cancel-button {
93
- color: $white;
100
+ color: variables.$white;
94
101
 
95
102
  &:hover {
96
- border: 1px solid $grey-low-opacity;
103
+ border: 1px solid variables.$grey-low-opacity;
97
104
  background: transparent;
98
105
  }
99
106
  }
@@ -1,4 +1,4 @@
1
- @import "./imports.scss";
1
+ @use "variables.scss";
2
2
 
3
3
  .scrolling-document {
4
4
  overflow: auto;
@@ -1,6 +1,8 @@
1
+ @use "variables";
2
+
1
3
  @use "sass:meta";
2
4
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
3
- @import "./imports.scss";
5
+ @include meta.load-css("variables.scss");
4
6
 
5
7
  :root {
6
8
  --konfuzio-green: #41af85;
@@ -30,8 +32,7 @@
30
32
  }
31
33
 
32
34
  .dv-ui-theme {
33
- @include meta.load-css("../../../node_modules/buefy/dist/buefy.css");
34
- font-family: $font-family;
35
+ font-family: variables.$font-family;
35
36
 
36
37
  -webkit-font-smoothing: antialiased;
37
38
  text-rendering: optimizeLegibility;
@@ -43,28 +44,28 @@
43
44
 
44
45
  h1 {
45
46
  font-size: 48px;
46
- color: $text-color;
47
+ color: variables.$text-color;
47
48
  }
48
49
  h2 {
49
50
  font-size: 24px;
50
- color: $text-color;
51
+ color: variables.$text-color;
51
52
  }
52
53
 
53
54
  a {
54
- color: $primary;
55
+ color: variables.$primary;
55
56
  }
56
57
 
57
58
  button {
58
59
  &.is-primary {
59
- background-color: $primary !important;
60
- color: $white !important;
60
+ background-color: variables.$primary !important;
61
+ color: variables.$white !important;
61
62
 
62
63
  &:hover:enabled {
63
- filter: $hover-style;
64
+ filter: variables.$hover-style;
64
65
  }
65
66
 
66
67
  &:disabled {
67
- background-color: $grey;
68
+ background-color: variables.$grey;
68
69
  }
69
70
  }
70
71
 
@@ -73,7 +74,7 @@
73
74
 
74
75
  &:focus {
75
76
  box-shadow: none;
76
- outline: 3px solid $grey-dark;
77
+ outline: 3px solid variables.$grey-dark;
77
78
  border: 2px solid;
78
79
  margin-right: 1px;
79
80
  }
@@ -84,7 +85,7 @@
84
85
  }
85
86
 
86
87
  &.edit-mode-btn[disabled] {
87
- border: 1px solid $detail;
88
+ border: 1px solid variables.$detail;
88
89
  }
89
90
 
90
91
  &[disabled] {
@@ -142,7 +143,7 @@
142
143
  .b-slider-thumb-wrapper {
143
144
  .tooltip-trigger {
144
145
  .b-slider-thumb {
145
- background-color: $grey-lightest;
146
+ background-color: variables.$grey-lightest;
146
147
  background-image: none;
147
148
  }
148
149
  }
@@ -161,7 +162,7 @@
161
162
  }
162
163
  .b-slider-track {
163
164
  cursor: col-resize;
164
- color: $white;
165
+ color: variables.$white;
165
166
  background: transparent !important;
166
167
  }
167
168
  .b-slider-fill {
@@ -194,10 +195,10 @@
194
195
 
195
196
  .carousel-arrow {
196
197
  .icon {
197
- color: $primary;
198
+ color: variables.$primary;
198
199
 
199
200
  &:hover {
200
- border: 1px solid $primary;
201
+ border: 1px solid variables.$primary;
201
202
  }
202
203
 
203
204
  svg {
@@ -216,8 +217,8 @@
216
217
  }
217
218
 
218
219
  .message-body {
219
- background-color: $error-background;
220
- color: $white;
220
+ background-color: variables.$error-background;
221
+ color: variables.$white;
221
222
  font-size: 14px;
222
223
  border: 0;
223
224
  border-radius: 0%;
@@ -320,22 +321,22 @@
320
321
  padding-right: 16px;
321
322
 
322
323
  &.is-active {
323
- background-color: $primary;
324
+ background-color: variables.$primary;
324
325
  }
325
326
 
326
327
  &.is-disabled {
327
- color: $grey-blue !important;
328
+ color: variables.$grey-blue !important;
328
329
  }
329
330
  }
330
331
 
331
332
  &.dropdown-menu-animation {
332
333
  a.navbar-item {
333
- color: $text-color;
334
+ color: variables.$text-color;
334
335
  font-size: 16px;
335
336
  line-height: 24px;
336
337
 
337
338
  &:hover {
338
- color: $primary;
339
+ color: variables.$primary;
339
340
  background: none;
340
341
  border: none;
341
342
  }
@@ -349,7 +350,7 @@
349
350
  .taginput-container {
350
351
  &.is-focused {
351
352
  box-shadow: none !important;
352
- border-color: $primary !important;
353
+ border-color: variables.$primary !important;
353
354
  }
354
355
 
355
356
  .tag {
@@ -360,7 +361,7 @@
360
361
  input {
361
362
  box-shadow: none !important;
362
363
  &:focus {
363
- border-color: $primary;
364
+ border-color: variables.$primary;
364
365
  }
365
366
  }
366
367
  .control.has-icons-left {
@@ -375,15 +376,15 @@
375
376
 
376
377
  .b-checkbox.checkbox {
377
378
  input[type="checkbox"] + .check {
378
- background-color: $white;
379
+ background-color: variables.$white;
379
380
  }
380
381
  &:hover input[type="checkbox"]:not(:disabled) + .check {
381
- border-color: $primary !important;
382
+ border-color: variables.$primary !important;
382
383
  }
383
384
 
384
385
  input[type="checkbox"]:checked + .check {
385
- border-color: $primary !important;
386
- background-color: $primary;
386
+ border-color: variables.$primary !important;
387
+ background-color: variables.$primary;
387
388
  }
388
389
  }
389
390
 
@@ -446,16 +447,16 @@
446
447
 
447
448
  &::before,
448
449
  &::after {
449
- background-color: $grey;
450
+ background-color: variables.$grey;
450
451
  }
451
452
 
452
453
  &:hover {
453
- background-color: $white;
454
+ background-color: variables.$white;
454
455
  }
455
456
  }
456
457
 
457
458
  .modal-card-body {
458
- background: $white;
459
+ background: variables.$white;
459
460
  border-radius: 16px 16px 0 0 !important;
460
461
  }
461
462
 
@@ -463,7 +464,7 @@
463
464
  display: flex;
464
465
  justify-content: center;
465
466
  border: none;
466
- background: $white;
467
+ background: variables.$white;
467
468
  border-radius: 0 0 16px 16px;
468
469
  }
469
470
  }
@@ -474,7 +475,7 @@
474
475
  }
475
476
 
476
477
  .modal-background {
477
- background-color: $full-black;
478
+ background-color: variables.$full-black;
478
479
  opacity: 0.5;
479
480
  }
480
481
 
@@ -496,7 +497,7 @@
496
497
  text-align: left;
497
498
  font-weight: 400;
498
499
  font-size: 14px;
499
- color: $grey-blue;
500
+ color: variables.$grey-blue;
500
501
  }
501
502
 
502
503
  .modal-card-foot {
@@ -547,7 +548,7 @@
547
548
 
548
549
  .notices {
549
550
  .snackbar {
550
- background-color: $text-color;
551
+ background-color: variables.$text-color;
551
552
  min-height: 40px;
552
553
 
553
554
  .text {
@@ -576,15 +577,15 @@
576
577
  align-items: center;
577
578
 
578
579
  .tooltip-content {
579
- background-color: $text-color !important;
580
+ background-color: variables.$text-color !important;
580
581
 
581
582
  a {
582
- color: $white;
583
+ color: variables.$white;
583
584
  text-decoration: underline;
584
585
  font-weight: 500;
585
586
  }
586
587
  &:before {
587
- border-bottom-color: $text-color !important;
588
+ border-bottom-color: variables.$text-color !important;
588
589
  }
589
590
  }
590
591
 
@@ -597,8 +598,8 @@
597
598
  &::before {
598
599
  left: 16px !important;
599
600
  right: auto !important;
600
- border-top-color: $text-color !important;
601
- border-bottom-color: $text-color !important;
601
+ border-top-color: variables.$text-color !important;
602
+ border-bottom-color: variables.$text-color !important;
602
603
  }
603
604
  }
604
605
  }
@@ -613,7 +614,7 @@
613
614
  &::before {
614
615
  right: 16px !important;
615
616
  left: auto !important;
616
- border-bottom-color: $text-color !important;
617
+ border-bottom-color: variables.$text-color !important;
617
618
  }
618
619
  }
619
620
 
@@ -649,12 +650,12 @@
649
650
  font-size: 14px;
650
651
  padding: 12px 12px;
651
652
  top: 45px;
652
- background-color: $text-color;
653
+ background-color: variables.$text-color;
653
654
  border-radius: 4px !important;
654
655
 
655
656
  &::before {
656
657
  top: 17px;
657
- border-left-color: $text-color !important;
658
+ border-left-color: variables.$text-color !important;
658
659
  }
659
660
  }
660
661
  }
@@ -664,7 +665,7 @@
664
665
 
665
666
  .tooltip-content {
666
667
  &::before {
667
- border-bottom-color: $text-color !important;
668
+ border-bottom-color: variables.$text-color !important;
668
669
  }
669
670
  }
670
671
  }
@@ -672,7 +673,7 @@
672
673
  &.top-aligned {
673
674
  .tooltip-content {
674
675
  &::before {
675
- border-top-color: $text-color !important;
676
+ border-top-color: variables.$text-color !important;
676
677
  }
677
678
  }
678
679
  }
@@ -740,7 +741,7 @@
740
741
 
741
742
  &.split-mode-caret {
742
743
  svg {
743
- color: $grey;
744
+ color: variables.$grey;
744
745
  }
745
746
  }
746
747
  }
@@ -750,7 +751,7 @@
750
751
  height: 10px;
751
752
 
752
753
  &.error-icon {
753
- color: $white;
754
+ color: variables.$white;
754
755
  padding-right: 20px;
755
756
  padding-left: 20px;
756
757
 
@@ -804,10 +805,10 @@
804
805
  &.dark-header {
805
806
  .table {
806
807
  thead {
807
- background-color: $black !important;
808
+ background-color: variables.$black !important;
808
809
  th {
809
810
  font-weight: 400;
810
- background-color: $black !important;
811
+ background-color: variables.$black !important;
811
812
  }
812
813
  }
813
814
  }
@@ -827,7 +828,7 @@
827
828
  }
828
829
  cursor: text;
829
830
  thead {
830
- background-color: $purple !important;
831
+ background-color: variables.$purple !important;
831
832
  th {
832
833
  font-weight: 500;
833
834
  font-size: 10px;
@@ -838,7 +839,7 @@
838
839
  margin: 0;
839
840
  }
840
841
  }
841
- background-color: $purple !important;
842
+ background-color: variables.$purple !important;
842
843
  color: white !important;
843
844
  vertical-align: middle;
844
845
  &[draggable="true"] {
@@ -880,7 +881,7 @@
880
881
  .switch {
881
882
  input[type="checkbox"] {
882
883
  &:checked + .check {
883
- background: $primary !important;
884
+ background: variables.$primary !important;
884
885
  box-shadow: none !important;
885
886
  }
886
887
 
@@ -901,4 +902,14 @@
901
902
  }
902
903
  }
903
904
  }
905
+ .splitpanes--vertical > .splitpanes__splitter {
906
+ background: variables.$grey-lighter-low-opacity;
907
+ }
908
+
909
+ .splitpanes--horizontal > .splitpanes__splitter {
910
+ background: variables.$grey-lighter-low-opacity;
911
+ }
912
+ & {
913
+ @include meta.load-css("../../../node_modules/buefy/dist/buefy.css");
914
+ }
904
915
  }
@@ -65,3 +65,5 @@ $black: $dark;
65
65
  $input-shadow: none;
66
66
  $top-bar-height: 56px;
67
67
  $component-border: 1px solid $detail;
68
+
69
+ $documents-list-height: 52px;