@konfuzio/document-validation-ui 0.1.59 → 0.2.0-dev.2

package/jest.config.js

@@ -1,5 +1,25 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest/presets/no-babel",
-  setupFiles: ["./tests/setup.js"],
+  moduleFileExtensions: [
+    "vue",
+    "js",
+    "mjs",
+    "cjs",
+    "jsx",
+    "ts",
+    "tsx",
+    "json",
+    "node",
+  ],
+  moduleNameMapper: {
+    "\\.(css|less)$": "<rootDir>/tests/mock/styleMock.js",
+  },
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
+  },
   transformIgnorePatterns: ["node_modules/(?!axios|keycloak-js)"],
+  transform: {
+    "^.+\\.[t|j]sx?$": "babel-jest",
+    "^.+\\.vue$": "@vue/vue3-jest",
+  },
 };

package/package.json

@@ -1,22 +1,18 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.59",
-  "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
+  "version": "0.2.0-dev.2",
+  "repository": "https://github.com/konfuzio-ai/document-validation-ui",
   "main": "dist/app.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --name DocumentValidationUi ./src/main.js",
-    "test:unit": "vue-cli-service test:unit",
+    "test:unit": "jest",
     "cypress:open": "cypress open",
     "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\"",
     "lint": "vue-cli-service lint",
     "format": "prettier .  --write",
     "prepublishOnly": "npm run build"
   },
-  "pre-commit": [
-    "test:unit",
-    "lint"
-  ],
   "files": [
     "dist/*",
     "src/*",
@@ -24,44 +20,42 @@
     "*.js"
   ],
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-solid-svg-icons": "^6.3.0",
-    "@fortawesome/vue-fontawesome": "^2.0.10",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
     "@sentry/tracing": "^6.19.4",
     "@sentry/vue": "^6.2.0",
-    "axios": "^1.7.4",
-    "bignumber.js": "^9.1.0",
-    "buefy": "^0.9.22",
-    "keycloak-js": "^26.0.6",
-    "konva": "^8.3.13",
-    "sass": "^1.56.0",
-    "sass-loader": "^13.1.0",
-    "vue": "^2.6.14",
-    "vue-i18n": "^8.27.1",
-    "vue-i18n-bridge": "^9.2.2",
-    "vue-konva": "^2.1.7",
-    "vue-observe-visibility": "^1.0.0",
-    "vue-split-panel": "^1.0.4",
-    "vue-template-compiler": "^2.6.10",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2"
+    "@vue/compat": "^3.5.13",
+    "axios": "^1.8.2",
+    "bignumber.js": "^9.1.2",
+    "buefy": "npm:@ntohq/buefy-next@^0.2.0",
+    "keycloak-js": "^25.0.6",
+    "konva": "^9.3.20",
+    "sass": "^1.85.0",
+    "sass-loader": "^16.0.5",
+    "splitpanes": "^3.1.8",
+    "vue": "^3.5.13",
+    "vue-i18n": "^10.0.5",
+    "vue-konva": "^3.2.0",
+    "vue3-observe-visibility": "^1.0.3",
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@4tw/cypress-drag-drop": "^2.2.5",
-    "@intlify/vue-i18n-loader": "^1.x",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@4tw/cypress-drag-drop": "^2.3.0",
+    "@babel/preset-env": "^7.26.9",
     "@vue/cli-service": "^5.0.8",
-    "@vue/test-utils": "^1.1.3",
-    "@vue/vue2-jest": "^27.0.0",
-    "babel-jest": "^27.0.6",
-    "cypress": "^13.2.0",
+    "@vue/compiler-sfc": "^3.1.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/vue3-jest": "^29.2.6",
+    "babel-jest": "^29.7.0",
+    "cypress": "^14.3.0",
     "dotenv": "^16.3.1",
-    "eslint": "^8.30.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-vue": "^9.8.0",
-    "jest": "^27.0.5",
-    "pre-commit": "^1.2.2",
+    "eslint-plugin-vue": "^9.32.0",
+    "jest": "^29.2.6",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "2.8.1"
   }
 }

package/src/assets/scss/ann_set_table_options.scss

@@ -1,9 +1,9 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 .ann-set-table-header {
   position: absolute;
-  background-color: $purple;
-  color: $white;
+  background-color: variables.$purple;
+  color: variables.$white;
   font-size: 14px;
   padding: 4px;
   z-index: 9;
@@ -20,7 +20,7 @@
     }
 
     .delete-action {
-      color: $red;
+      color: variables.$red;
     }
   }
 }

package/src/assets/scss/annotation_action_buttons.scss

@@ -1,9 +1,26 @@
-@import "./imports.scss";
+@use "variables.scss";
 .action-buttons {
   display: flex;
   align-items: center;
   gap: 6px;
 
+  .ann-nav-btns {
+    display: flex;
+    flex-direction: column;
+    color: variables.$grey-blue;
+    font-size: 14px;
+    text-align: center;
+    padding-right: 8px;
+
+    .button-icon {
+      width: 12px !important;
+      height: 12px !important;
+      &.is-link {
+        cursor: pointer !important;
+      }
+    }
+  }
+
   .button-action {
     padding: 0px;
     vertical-align: middle;
@@ -22,13 +39,13 @@
 
     &.is-button-text-ghost {
       height: 26px;
-      color: $grey-blue;
+      color: variables.$grey-blue;
       font-size: 14px;
       font-weight: 500;
 
       &:hover {
         text-decoration: none;
-        color: $text-color;
+        color: variables.$text-color;
       }
 
       &:focus {
@@ -44,6 +61,10 @@
         width: 16px;
         height: 16px;
       }
+      &.angle-icon {
+        width: 12px;
+        height: 12px;
+      }
     }
 
     .button-text {
@@ -54,20 +75,21 @@
   .accept-icon,
   .restore-icon,
   .accept-all-icon {
-    color: $green !important;
+    color: variables.$green !important;
   }
   .save-icon {
-    color: $primary;
+    color: variables.$primary;
   }
   .decline-icon {
-    color: $red;
+    color: variables.$red;
   }
   .cancel-icon,
   .search-icon,
   .missing-icon,
   .link-icon,
+  .angle-icon,
   .spinner-icon {
-    color: $grey-blue;
+    color: variables.$grey-blue;
   }
 
   .spinner-icon {

package/src/assets/scss/annotation_details.scss

@@ -1,4 +1,4 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 .annotation-details {
   .label-icon {
@@ -47,11 +47,11 @@
 
     .label-description {
       opacity: 0.7;
-      color: $white;
+      color: variables.$white;
       font-weight: 400;
       font-size: 12px;
       line-height: 18px;
-      border-bottom: 1px solid $low-opacity-white;
+      border-bottom: 1px solid variables.$low-opacity-white;
       padding-bottom: 8px;
       word-wrap: break-all;
       white-space: normal;
@@ -62,7 +62,7 @@
     }
 
     .confidence {
-      color: $white;
+      color: variables.$white;
       font-weight: 400;
       font-size: 12px;
       line-height: 18px;
@@ -71,19 +71,19 @@
       justify-content: space-between;
 
       &:not(.tooltip-in-public-view) {
-        border-bottom: 1px solid $low-opacity-white;
+        border-bottom: 1px solid variables.$low-opacity-white;
         padding-bottom: 8px;
       }
 
       .value {
-        color: $green;
+        color: variables.$green;
 
         &.yellow {
-          color: $yellow;
+          color: variables.$yellow;
         }
 
         &.red {
-          color: $red;
+          color: variables.$red;
         }
       }
     }
@@ -92,7 +92,7 @@
       font-weight: 400;
       font-size: 12px;
       line-height: 18px;
-      color: $white;
+      color: variables.$white;
 
       > div {
         display: flex;

package/src/assets/scss/choose_label_set_modal.scss

@@ -1,4 +1,4 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 .choose-label-set-modal {
   .content {
@@ -6,14 +6,14 @@
       font-weight: 500;
       font-size: 18px;
       line-height: 28px;
-      color: $grey-darker;
+      color: variables.$grey-darker;
     }
 
     p {
       font-weight: 400;
       font-size: 14px;
       line-height: 20px;
-      color: $text-strong;
+      color: variables.$text-strong;
     }
 
     .label-set-list {
@@ -29,7 +29,7 @@
     }
 
     .labels-list {
-      color: $grey-blue;
+      color: variables.$grey-blue;
       font-size: 14px;
       font-weight: 400;
       line-height: 20px;
@@ -40,7 +40,7 @@
       font-size: 12px;
       line-height: 18px;
       text-align: center;
-      color: $text-color;
+      color: variables.$text-color;
       margin-top: 8px;
     }
   }

package/src/assets/scss/document_action_bar.scss

@@ -1,4 +1,4 @@
-@import "./imports.scss";
+@use "variables.scss";
 .action-bar {
   position: absolute;
   width: fit-content;
@@ -9,7 +9,7 @@
   z-index: 100;
 
   .action-bar-elements {
-    background-color: $text-color;
+    background-color: variables.$text-color;
     height: 40px;
     width: fit-content;
     padding: 4px 4px 4px 12px;
@@ -28,7 +28,7 @@
     }
 
     .action-text {
-      color: $white;
+      color: variables.$white;
       font-size: 14px;
       font-weight: 400;
       line-height: 20px;

package/src/assets/scss/document_annotations.scss

@@ -1,8 +1,8 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 #document-annotations {
-  font-family: $font-family;
-  background-color: $background;
+  font-family: variables.$font-family;
+  background-color: variables.$background;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -21,7 +21,7 @@
       padding-right: 16px;
       padding-bottom: 8px;
       width: 100%;
-      box-shadow: 0px 1px 0px $grey-lightest;
+      box-shadow: 0px 1px 0px variables.$grey-lightest;
       display: flex;
       align-items: center;
 
@@ -82,14 +82,14 @@
           justify-content: space-between;
 
           &:hover {
-            background-color: $background;
+            background-color: variables.$background;
           }
 
           .label-set-name {
             font-weight: 600;
             font-size: 14px;
             line-height: 20px;
-            color: $text;
+            color: variables.$text;
             display: flex;
             align-items: center;
             gap: 8px;
@@ -114,7 +114,7 @@
             padding: 4px 8px;
             border-radius: 32px;
             margin-left: 14px;
-            background: $purple-low-opacity;
+            background: variables.$purple-low-opacity;
             display: flex;
             width: fit-content;
             align-items: center;
@@ -139,7 +139,7 @@
               flex-direction: row;
               justify-content: space-between;
               align-items: center;
-              border-bottom: 1px solid $grey-lightest;
+              border-bottom: 1px solid variables.$grey-lightest;
               min-height: 44px;
               cursor: pointer;
 
@@ -147,7 +147,7 @@
                 display: flex;
                 flex-direction: row;
                 padding-left: 16px;
-                color: $text-lighter;
+                color: variables.$text-lighter;
                 align-items: center;
 
                 icon {
@@ -170,22 +170,22 @@
                 .label-annotations-pending {
                   padding: 0px 8px;
                   border-radius: 20px;
-                  background: $grey-lighter-low-opacity;
-                  color: $text-lighter;
+                  background: variables.$grey-lighter-low-opacity;
+                  color: variables.$text-lighter;
                   margin-right: 4px;
                 }
 
                 .label-annotations-accepted {
                   padding: 0px 8px;
                   border-radius: 20px;
-                  background: $green-low-opacity;
-                  color: $green;
+                  background: variables.$green-low-opacity;
+                  color: variables.$green;
                 }
               }
             }
 
             .label-group-annotation-list {
-              background-color: $grey-hover;
+              background-color: variables.$grey-hover;
 
               .annotation-row {
                 padding-left: 16px;
@@ -193,7 +193,7 @@
             }
 
             .label-name {
-              color: $text-lighter;
+              color: variables.$text-lighter;
               word-break: break-word;
               font-size: 14px;
               line-height: 20px;
@@ -203,7 +203,7 @@
 
             .annotation-row {
               width: 100%;
-              border-bottom: 1px solid $grey-lightest;
+              border-bottom: 1px solid variables.$grey-lightest;
               transition: background-color 0.2s ease-out;
               align-items: center;
               height: 100%;
@@ -215,7 +215,7 @@
                 bottom: 0px;
                 left: 4px;
                 right: 16px;
-                padding: 0 20%;
+                margin: 0 20%;
                 display: flex;
                 align-items: center;
                 border-radius: 8px;
@@ -258,13 +258,13 @@
                     gap: 8px;
                     min-width: 216px;
                     text-align: left;
-                    border-bottom: 1px solid $low-opacity-white;
+                    border-bottom: 1px solid variables.$low-opacity-white;
                     padding-bottom: 8px;
                     word-wrap: break-all;
                     white-space: normal;
 
                     .translation-title {
-                      color: $white;
+                      color: variables.$white;
                       font-weight: 400;
                       font-size: 12px;
                       line-height: 18px;
@@ -275,7 +275,7 @@
                         font-weight: 500;
                         text-align: right;
                         &.no-translation {
-                          color: $red;
+                          color: variables.$red;
                           font-weight: 400;
                         }
                       }
@@ -286,7 +286,7 @@
                     line-height: 18px;
                     font-size: 12px;
                     opacity: 0.7;
-                    color: $white;
+                    color: variables.$white;
                     font-weight: 400;
                   }
                 }
@@ -334,7 +334,7 @@
                   }
 
                   .spinner {
-                    color: $grey;
+                    color: variables.$grey;
                   }
 
                   .annotation-items {
@@ -353,7 +353,7 @@
                   background-image: linear-gradient(
                     to right,
                     transparent,
-                    $grey-hover 20%
+                    variables.$grey-hover 20%
                   );
 
                   &.is-ann-editing {
@@ -364,7 +364,7 @@
 
                 .annotation-value {
                   display: inline-block;
-                  color: $text;
+                  color: variables.$text;
                   padding: 0;
                   border: none;
                   background-color: transparent;
@@ -377,16 +377,16 @@
                     outline: none;
                   }
 
-                  &.label-empty {
+                  .label-empty-clicked {
+                    user-select: auto;
+                    font-weight: 400;
+                    color: variables.$text-lighter;
+                  }
+
+                  .label-empty {
                     font-weight: 500;
                     font-size: 14px;
-                    color: $primary;
-
-                    &.clicked-ann {
-                      user-select: auto;
-                      font-weight: 400;
-                      color: $text-lighter;
-                    }
+                    color: variables.$primary;
                   }
                 }
               }
@@ -398,27 +398,27 @@
               }
 
               &:hover {
-                background-color: $grey-hover !important;
+                background-color: variables.$grey-hover !important;
               }
               &.selected {
-                background-color: $grey-lightest;
+                background-color: variables.$grey-lightest;
               }
 
               &.hovered-empty-labels {
-                background-color: $grey-lightest;
-                border-bottom-color: $grey-detail;
+                background-color: variables.$grey-lightest;
+                border-bottom-color: variables.$grey-detail;
               }
 
               &.hovered-pending-annotations {
                 position: relative;
-                border-bottom-color: $primary;
+                border-bottom-color: variables.$primary;
 
                 &:before {
                   display: block;
                   content: "";
                   width: 100%;
                   height: 100%;
-                  background: $primary;
+                  background: variables.$primary;
                   opacity: 0.1;
                   position: absolute;
                   top: 0;
@@ -427,21 +427,21 @@
               }
 
               &.editing {
-                background-color: $background;
-                border-bottom: 1px solid $primary;
+                background-color: variables.$background;
+                border-bottom: 1px solid variables.$primary;
               }
 
               .not-found-text {
-                color: $grey;
+                color: variables.$grey;
                 opacity: 0.3;
               }
 
               .saving-changes {
-                color: $grey;
+                color: variables.$grey;
               }
 
               .error-editing {
-                color: $red;
+                color: variables.$red;
                 animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
                 transform: translate3d(0, 0, 0);
               }
@@ -476,14 +476,14 @@
           display: flex;
           gap: 5px;
           padding-left: 28px;
-          color: $text-lighter;
+          color: variables.$text-lighter;
           font-size: 14px;
           line-height: 20px;
           min-height: 44px;
           align-items: center;
 
           a {
-            color: $white;
+            color: variables.$white;
             text-decoration: underline;
             font-weight: 500;
           }

package/src/assets/scss/document_category.scss

@@ -1,16 +1,16 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 .category-chooser {
   cursor: pointer;
   height: 100%;
 
   &.split-mode {
-    border: 1px solid $grey-outline;
+    border: 1px solid variables.$grey-outline;
     border-radius: 4px;
-    background-color: $white;
+    background-color: variables.$white;
 
     &:hover {
-      border-color: $grey-outline-dark;
+      border-color: variables.$grey-outline-dark;
       background-color: transparent;
     }
   }
@@ -21,7 +21,7 @@
 
   &:not(.split-mode) {
     .category-drop-down {
-      border-right: $component-border;
+      border-right: variables.$component-border;
     }
   }
   .category-drop-down {
@@ -53,7 +53,7 @@
 
       .category-title {
         font-size: 12px;
-        color: $grey;
+        color: variables.$grey;
       }
 
       .category-name {
@@ -71,12 +71,12 @@
         display: flex;
         align-items: center;
         justify-content: space-evenly;
-        border-right: $component-border;
+        border-right: variables.$component-border;
 
         .category-info {
           p {
             font-size: 12px;
-            color: $grey;
+            color: variables.$grey;
           }
         }
       }