@konfuzio/document-validation-ui 0.1.1

package/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: "@vue/cli-plugin-unit-jest/presets/no-babel",
+  setupFiles: ["./tests/setup.js"],
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@konfuzio/document-validation-ui",
+  "version": "0.1.1",
+  "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build --name DocumentValidationUi ./src/main.js",
+    "test:unit": "vue-cli-service test:unit",
+    "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/*",
+    "*.json",
+    "*.js"
+  ],
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/vue-fontawesome": "^2.0.8",
+    "@sentry/tracing": "^6.19.4",
+    "@sentry/vue": "^6.2.0",
+    "axios": "^0.21.1",
+    "axios-extensions": "^3.1.6",
+    "bignumber.js": "^9.1.0",
+    "buefy": "^0.9.22",
+    "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-template-compiler": "^2.6.10",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@intlify/vue-i18n-loader": "^1.x",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/test-utils": "^1.1.3",
+    "@vue/vue2-jest": "^27.0.0",
+    "babel-jest": "^27.0.6",
+    "eslint": "^8.30.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-vue": "^9.8.0",
+    "jest": "^27.0.5",
+    "pre-commit": "^1.2.2",
+    "prettier": "2.8.1"
+  }
+}

package/src/api.js

@@ -0,0 +1,49 @@
+import axios from "axios";
+import {
+  cacheAdapterEnhancer
+} from 'axios-extensions';
+
+let HTTP, IMG_REQUEST, authToken;
+const DEFAULT_URL = "https://app.konfuzio.com";
+
+axios.defaults.xsrfCookieName = "csrftoken";
+axios.defaults.xsrfHeaderName = "X-CSRFToken";
+
+HTTP = axios.create({
+  baseURL: process.env.VUE_APP_API_URL || `${DEFAULT_URL}/api/v3/`
+});
+
+IMG_REQUEST = axios.create({
+  baseURL: process.env.VUE_APP_DOCUMENT_IMAGES_URL || `${DEFAULT_URL}`,
+  responseType: "blob",
+  adapter: cacheAdapterEnhancer(axios.defaults.adapter)
+});
+
+const setAuthToken = (token) => {
+  authToken = token;
+}
+
+const getInterceptorConfig = (config) => {
+  if (authToken) {
+    config.headers['Authorization'] = `Token ${authToken}`;
+  }
+  return config;
+}
+
+HTTP.interceptors.request.use(getInterceptorConfig,
+  error => {
+    return Promise.reject(error);
+  }
+);
+
+IMG_REQUEST.interceptors.request.use(getInterceptorConfig,
+  error => {
+    return Promise.reject(error);
+  }
+);
+
+export default {
+  HTTP,
+  IMG_REQUEST,
+  setAuthToken
+};

package/src/assets/images/AcceptedCheckMark.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      fill="#4bb543"
+      d="M18.71,7.21a1,1,0,0,0-1.42,0L9.84,14.67,6.71,11.53A1,1,0,1,0,5.29,13l3.84,3.84a1,1,0,0,0,1.42,0l8.16-8.16A1,1,0,0,0,18.71,7.21Z"
+    />
+  </svg>
+</template>

package/src/assets/images/AcceptedUser.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      fill="#4bb543"
+      d="M15.71,12.71a6,6,0,1,0-7.42,0,10,10,0,0,0-6.22,8.18,1,1,0,0,0,2,.22,8,8,0,0,1,15.9,0,1,1,0,0,0,1,.89h.11a1,1,0,0,0,.88-1.1A10,10,0,0,0,15.71,12.71ZM12,12a4,4,0,1,1,4-4A4,4,0,0,1,12,12Z"
+    />
+  </svg>
+</template>

package/src/assets/images/ActionIcon.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <svg
+      v-if="icon === 'arrows'"
+      width="19"
+      height="8"
+      viewBox="0 0 19 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.4979 1.64529C14.2376 1.38494 14.2376 0.962827 14.4979 0.702477C14.7583 0.442128 15.1804 0.442127 15.4408 0.702477L18.2692 3.5309C18.5295 3.79125 18.5295 4.21336 18.2692 4.47371L15.4408 7.30214C15.1804 7.56249 14.7583 7.56249 14.4979 7.30214C14.2376 7.04179 14.2376 6.61968 14.4979 6.35933L16.1883 4.66898H11.1981C10.8299 4.66898 10.5315 4.3705 10.5315 4.00231C10.5315 3.63412 10.8299 3.33564 11.1981 3.33564L16.1883 3.33564L14.4979 1.64529ZM7.42688 3.33564C7.79507 3.33564 8.09355 3.63412 8.09355 4.00231C8.09355 4.3705 7.79507 4.66898 7.42688 4.66898H2.4367L4.12705 6.35933C4.3874 6.61968 4.3874 7.04179 4.12705 7.30214C3.8667 7.56249 3.44459 7.56249 3.18424 7.30214L0.355815 4.47371C0.0954656 4.21336 0.0954652 3.79125 0.355815 3.5309L3.18424 0.702477C3.44459 0.442127 3.8667 0.442128 4.12705 0.702477C4.3874 0.962827 4.3874 1.38494 4.12705 1.64529L2.4367 3.33564L7.42688 3.33564Z"
+        fill="white"
+      />
+    </svg>
+
+    <svg
+      v-if="icon === 'grid'"
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0.332031 0.998698C0.332031 0.630508 0.630508 0.332031 0.998698 0.332031H5.66536C6.03355 0.332031 6.33203 0.630508 6.33203 0.998698V5.66536C6.33203 6.03355 6.03355 6.33203 5.66536 6.33203H0.998698C0.630508 6.33203 0.332031 6.03355 0.332031 5.66536V0.998698ZM1.66536 1.66536V4.9987H4.9987V1.66536H1.66536ZM7.66536 0.998698C7.66536 0.630508 7.96384 0.332031 8.33203 0.332031H12.9987C13.3669 0.332031 13.6654 0.630508 13.6654 0.998698V5.66536C13.6654 6.03355 13.3669 6.33203 12.9987 6.33203H8.33203C7.96384 6.33203 7.66536 6.03355 7.66536 5.66536V0.998698ZM8.9987 1.66536V4.9987H12.332V1.66536H8.9987ZM0.332031 8.33203C0.332031 7.96384 0.630508 7.66536 0.998698 7.66536H5.66536C6.03355 7.66536 6.33203 7.96384 6.33203 8.33203V12.9987C6.33203 13.3669 6.03355 13.6654 5.66536 13.6654H0.998698C0.630508 13.6654 0.332031 13.3669 0.332031 12.9987V8.33203ZM1.66536 8.9987V12.332H4.9987V8.9987H1.66536ZM7.66536 8.33203C7.66536 7.96384 7.96384 7.66536 8.33203 7.66536H12.9987C13.3669 7.66536 13.6654 7.96384 13.6654 8.33203V12.9987C13.6654 13.3669 13.3669 13.6654 12.9987 13.6654H8.33203C7.96384 13.6654 7.66536 13.3669 7.66536 12.9987V8.33203ZM8.9987 8.9987V12.332H12.332V8.9987H8.9987Z"
+        fill="white"
+      />
+    </svg>
+    <svg
+      width="6"
+      height="10"
+      viewBox="0 0 6 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.5 3.94922C1.30222 3.94922 1.10888 4.00787 0.94443 4.11775C0.779981 4.22763 0.651809 4.38381 0.576121 4.56654C0.500433 4.74926 0.48063 4.95033 0.519215 5.14431C0.5578 5.33829 0.653041 5.51647 0.792894 5.65633C0.932746 5.79618 1.11093 5.89142 1.30491 5.93C1.49889 5.96859 1.69996 5.94879 1.88268 5.8731C2.06541 5.79741 2.22159 5.66924 2.33147 5.50479C2.44135 5.34034 2.5 5.147 2.5 4.94922C2.5 4.684 2.39464 4.42965 2.20711 4.24211C2.01957 4.05458 1.76522 3.94922 1.5 3.94922ZM1.5 7.44922C1.30222 7.44922 1.10888 7.50787 0.94443 7.61775C0.779981 7.72763 0.651809 7.88381 0.576121 8.06654C0.500433 8.24926 0.48063 8.45033 0.519215 8.64431C0.5578 8.83829 0.653041 9.01647 0.792894 9.15633C0.932746 9.29618 1.11093 9.39142 1.30491 9.43C1.49889 9.46859 1.69996 9.44879 1.88268 9.3731C2.06541 9.29741 2.22159 9.16924 2.33147 9.00479C2.44135 8.84034 2.5 8.647 2.5 8.44922C2.5 8.184 2.39464 7.92965 2.20711 7.74211C2.01957 7.55458 1.76522 7.44922 1.5 7.44922ZM5 2.44922C5.19778 2.44922 5.39112 2.39057 5.55557 2.28069C5.72002 2.17081 5.84819 2.01463 5.92388 1.8319C5.99957 1.64918 6.01937 1.44811 5.98079 1.25413C5.9422 1.06015 5.84696 0.881965 5.70711 0.742112C5.56725 0.60226 5.38907 0.507019 5.19509 0.468434C5.00111 0.429849 4.80004 0.449652 4.61732 0.52534C4.43459 0.601027 4.27841 0.7292 4.16853 0.893649C4.05865 1.0581 4 1.25144 4 1.44922C4 1.71444 4.10536 1.96879 4.29289 2.15633C4.48043 2.34386 4.73478 2.44922 5 2.44922ZM1.5 0.449219C1.30222 0.449219 1.10888 0.507868 0.94443 0.61775C0.779981 0.727631 0.651809 0.88381 0.576121 1.06654C0.500433 1.24926 0.48063 1.45033 0.519215 1.64431C0.5578 1.83829 0.653041 2.01647 0.792894 2.15633C0.932746 2.29618 1.11093 2.39142 1.30491 2.43C1.49889 2.46859 1.69996 2.44879 1.88268 2.3731C2.06541 2.29741 2.22159 2.16924 2.33147 2.00479C2.44135 1.84034 2.5 1.647 2.5 1.44922C2.5 1.184 2.39464 0.929649 2.20711 0.742112C2.01957 0.554576 1.76522 0.449219 1.5 0.449219ZM5 7.44922C4.80222 7.44922 4.60888 7.50787 4.44443 7.61775C4.27998 7.72763 4.15181 7.88381 4.07612 8.06654C4.00043 8.24926 3.98063 8.45033 4.01922 8.64431C4.0578 8.83829 4.15304 9.01647 4.29289 9.15633C4.43275 9.29618 4.61093 9.39142 4.80491 9.43C4.99889 9.46859 5.19996 9.44879 5.38268 9.3731C5.56541 9.29741 5.72159 9.16924 5.83147 9.00479C5.94135 8.84034 6 8.647 6 8.44922C6 8.184 5.89464 7.92965 5.70711 7.74211C5.51957 7.55458 5.26522 7.44922 5 7.44922ZM5 3.94922C4.80222 3.94922 4.60888 4.00787 4.44443 4.11775C4.27998 4.22763 4.15181 4.38381 4.07612 4.56654C4.00043 4.74926 3.98063 4.95033 4.01922 5.14431C4.0578 5.33829 4.15304 5.51647 4.29289 5.65633C4.43275 5.79618 4.61093 5.89142 4.80491 5.93C4.99889 5.96859 5.19996 5.94879 5.38268 5.8731C5.56541 5.79741 5.72159 5.66924 5.83147 5.50479C5.94135 5.34034 6 5.147 6 4.94922C6 4.684 5.89464 4.42965 5.70711 4.24211C5.51957 4.05458 5.26522 3.94922 5 3.94922Z"
+        fill="white"
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ActionIcon",
+  props: {
+    icon: {
+      type: String,
+      default: null,
+      required: false,
+    },
+  },
+};
+</script>

package/src/assets/images/ArrowDownKey.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg
+    width="8"
+    height="6"
+    viewBox="0 0 8 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M4 0.5L0 5.5L8 5.5L4 0.5Z" fill="white" />
+  </svg>
+</template>

package/src/assets/images/ArrowUpKey.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg
+    width="8"
+    height="6"
+    viewBox="0 0 8 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M4 5.5L0 0.5L8 0.5L4 5.5Z" fill="white" />
+  </svg>
+</template>

package/src/assets/images/CategoryIconImg.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="22"
+    height="22"
+    viewBox="0 0 22 22"
+  >
+    <path
+      fill="#2B3545"
+      d="M20.47,7.37s0,0,0-.08l-.06-.15a.71.71,0,0,0-.07-.09.94.94,0,0,0-.09-.12l-.09-.07L20,6.78l-7.5-4.63a1,1,0,0,0-1.06,0L4,6.78l-.09.08-.09.07a.94.94,0,0,0-.09.12.71.71,0,0,0-.07.09l-.06.15s0,0,0,.08a1.15,1.15,0,0,0,0,.26v8.74a1,1,0,0,0,.47.85l7.5,4.63h0a.47.47,0,0,0,.15.06s.05,0,.08,0a.86.86,0,0,0,.52,0s.05,0,.08,0a.47.47,0,0,0,.15-.06h0L20,17.22a1,1,0,0,0,.47-.85V7.63A1.15,1.15,0,0,0,20.47,7.37ZM11,19.21l-5.5-3.4V9.43L11,12.82Zm1-8.12L6.4,7.63,12,4.18l5.6,3.45Zm6.5,4.72L13,19.21V12.82l5.5-3.39Z"
+    />
+  </svg>
+</template>

package/src/assets/images/CheckMark.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      fill="#dfe0e4"
+      d="M18.71,7.21a1,1,0,0,0-1.42,0L9.84,14.67,6.71,11.53A1,1,0,1,0,5.29,13l3.84,3.84a1,1,0,0,0,1.42,0l8.16-8.16A1,1,0,0,0,18.71,7.21Z"
+    />
+  </svg>
+</template>

package/src/assets/images/EditDocIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24"
+    width="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20.71,16.71l-2.42-2.42a1,1,0,0,0-1.42,0l-3.58,3.58a1,1,0,0,0-.29.71V21a1,1,0,0,0,1,1h2.42a1,1,0,0,0,.71-.29l3.58-3.58A1,1,0,0,0,20.71,16.71ZM16,20H15V19l2.58-2.58,1,1Zm-6,0H6a1,1,0,0,1-1-1V5A1,1,0,0,1,6,4h5V7a3,3,0,0,0,3,3h3v1a1,1,0,0,0,2,0V9s0,0,0-.06a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19.32.32,0,0,0-.09,0L12.06,2H6A3,3,0,0,0,3,5V19a3,3,0,0,0,3,3h4a1,1,0,0,0,0-2ZM13,5.41,15.59,8H14a1,1,0,0,1-1-1ZM8,14h6a1,1,0,0,0,0-2H8a1,1,0,0,0,0,2Zm0-4H9A1,1,0,0,0,9,8H8a1,1,0,0,0,0,2Zm2,6H8a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2Z"
+    />
+  </svg>
+</template>

package/src/assets/images/EmptyStateImg.vue

@@ -0,0 +1,129 @@
+<template>
+  <svg
+    width="122"
+    height="165"
+    viewBox="0 0 122 165"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="61"
+      cy="61"
+      r="61"
+      fill="#F7F7F7"
+    />
+    <g filter="url(#filter0_d_2720_20884)">
+      <rect
+        x="22"
+        y="29"
+        width="77.8605"
+        height="108"
+        rx="4"
+        fill="white"
+      />
+    </g>
+    <rect
+      opacity="0.7"
+      x="32.0449"
+      y="41.584"
+      width="18.8372"
+      height="6.27907"
+      rx="2"
+      stroke="#BFBFBF"
+      stroke-linecap="round"
+      stroke-dasharray="3 2"
+    />
+    <rect
+      opacity="0.7"
+      x="32.0449"
+      y="59.3965"
+      width="57.7674"
+      height="6.27907"
+      rx="2"
+      stroke="#BFBFBF"
+      stroke-linecap="round"
+      stroke-dasharray="3 2"
+    />
+    <rect
+      opacity="0.7"
+      x="32.0449"
+      y="71.2109"
+      width="57.7674"
+      height="6.27907"
+      rx="2"
+      stroke="#BFBFBF"
+      stroke-linecap="round"
+      stroke-dasharray="3 2"
+    />
+    <rect
+      opacity="0.7"
+      x="32.0449"
+      y="83.0254"
+      width="57.7674"
+      height="6.27907"
+      rx="2"
+      stroke="#BFBFBF"
+      stroke-linecap="round"
+      stroke-dasharray="3 2"
+    />
+    <rect
+      opacity="0.7"
+      x="32"
+      y="97"
+      width="58"
+      height="28"
+      rx="2"
+      stroke="#BFBFBF"
+      stroke-linecap="round"
+      stroke-dasharray="3 2"
+    />
+    <defs>
+      <filter
+        id="filter0_d_2720_20884"
+        x="2"
+        y="17"
+        width="117.86"
+        height="148"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood
+          flood-opacity="0"
+          result="BackgroundImageFix"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="8" />
+        <feGaussianBlur stdDeviation="10" />
+        <feComposite
+          in2="hardAlpha"
+          operator="out"
+        />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_2720_20884"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_2720_20884"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+</template>
+<script>
+export default {
+  name: "EmptyStateImg"
+};
+</script>

package/src/assets/images/ErrorIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    width="17"
+    height="16"
+    viewBox="0 0 17 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_5456_102710)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.02582 0.854884C7.32534 0.686248 7.66328 0.597656 8.00701 0.597656C8.35075 0.597656 8.68868 0.686248 8.98821 0.854884C9.28773 1.02352 9.53874 1.26651 9.71701 1.5604L9.71893 1.56357L15.3656 10.9902L15.371 10.9994C15.5456 11.3019 15.638 11.6447 15.639 11.994C15.64 12.3432 15.5495 12.6866 15.3766 12.99C15.2036 13.2934 14.9543 13.5462 14.6533 13.7233C14.3523 13.9004 14.0102 13.9956 13.661 13.9994L13.6537 13.9995L2.35302 13.9995C2.00382 13.9956 1.66171 13.9004 1.36073 13.7233C1.05974 13.5462 0.810381 13.2934 0.637445 12.99C0.46451 12.6866 0.37403 12.3432 0.375008 11.994C0.375986 11.6447 0.468387 11.3019 0.643019 10.9994L0.648434 10.9902L6.297 1.56039C6.47528 1.2665 6.72629 1.02352 7.02582 0.854884ZM8.00701 1.93099C7.89243 1.93099 7.77979 1.96052 7.67995 2.01673C7.58056 2.07269 7.49719 2.15321 7.43782 2.25058L1.79547 11.67C1.73869 11.7699 1.70866 11.8828 1.70834 11.9977C1.70801 12.1141 1.73817 12.2286 1.79582 12.3297C1.85346 12.4308 1.93658 12.5151 2.03691 12.5741C2.13636 12.6327 2.24928 12.6644 2.36461 12.6662H13.6494C13.7647 12.6644 13.8777 12.6327 13.9771 12.5741C14.0774 12.5151 14.1606 12.4308 14.2182 12.3297C14.2759 12.2286 14.306 12.1141 14.3057 11.9977C14.3054 11.8828 14.2753 11.7699 14.2186 11.6701L8.57701 2.2519C8.57675 2.25146 8.57648 2.25102 8.57621 2.25058C8.51683 2.15321 8.43347 2.07269 8.33408 2.01673C8.23424 1.96052 8.12159 1.93099 8.00701 1.93099ZM8.00701 4.66615C8.3752 4.66615 8.67368 4.96463 8.67368 5.33282V7.99949C8.67368 8.36768 8.3752 8.66615 8.00701 8.66615C7.63882 8.66615 7.34035 8.36768 7.34035 7.99949V5.33282C7.34035 4.96463 7.63882 4.66615 8.00701 4.66615ZM7.34035 10.6662C7.34035 10.298 7.63882 9.99949 8.00701 9.99949H8.01368C8.38187 9.99949 8.68035 10.298 8.68035 10.6662C8.68035 11.0343 8.38187 11.3328 8.01368 11.3328H8.00701C7.63882 11.3328 7.34035 11.0343 7.34035 10.6662Z"
+        fill="#E7423A"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5456_102710">
+        <rect
+          width="16"
+          height="16"
+          fill="white"
+          transform="translate(0.0078125)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

package/src/assets/images/EyeIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="#FFFFFF"
+      d="M21.92,11.6C19.9,6.91,16.1,4,12,4S4.1,6.91,2.08,11.6a1,1,0,0,0,0,.8C4.1,17.09,7.9,20,12,20s7.9-2.91,9.92-7.6A1,1,0,0,0,21.92,11.6ZM12,18c-3.17,0-6.17-2.29-7.9-6C5.83,8.29,8.83,6,12,6s6.17,2.29,7.9,6C18.17,15.71,15.17,18,12,18ZM12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"
+    />
+  </svg>
+</template>

package/src/assets/images/FileNameNotSavedImage.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.4269 13.1159H4.57073C2.7855 13.1159 1.33301 11.6578 1.33301 9.87627C1.33301 8.24972 2.53855 6.89697 4.10182 6.66927C4.39467 4.7806 6.03269 3.33398 7.99957 3.33398C9.96646 3.33398 11.6045 4.7806 11.8994 6.66927C13.4608 6.89698 14.6663 8.24989 14.6663 9.87627C14.6663 11.6578 13.214 13.1159 11.4267 13.1159H11.4269ZM4.57073 7.92446C3.49531 7.92446 2.62278 8.799 2.62278 9.87627C2.62278 10.9497 3.49531 11.8242 4.57073 11.8242H11.4269C12.5023 11.8242 13.3767 10.9497 13.3767 9.87627C13.3767 8.799 12.5022 7.92446 11.4269 7.92446H11.3006C10.9448 7.92446 10.6558 7.63749 10.6558 7.27762C10.6558 5.81567 9.46374 4.62359 7.9999 4.62359C6.53419 4.62359 5.34399 5.81567 5.34399 7.27762C5.34399 7.63733 5.05501 7.92446 4.69715 7.92446H4.57073Z"
+      fill="#858C9A"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.47098 2.86203C2.73133 2.60168 3.15344 2.60168 3.41379 2.86203L14.471 13.9192C14.7313 14.1796 14.7313 14.6017 14.471 14.862C14.2106 15.1224 13.7885 15.1224 13.5282 14.862L2.47098 3.80484C2.21063 3.54449 2.21063 3.12238 2.47098 2.86203Z"
+      fill="#858C9A"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.99957 2.39007C2.52027 1.86938 3.36449 1.86938 3.88519 2.39007L14.9424 13.4473C15.4631 13.968 15.4631 14.8122 14.9424 15.3329C14.4217 15.8536 13.5775 15.8536 13.0568 15.3329L1.99957 4.27569C1.47887 3.75499 1.47887 2.91077 1.99957 2.39007ZM3.41379 2.86148C3.15344 2.60113 2.73133 2.60113 2.47098 2.86148C2.21063 3.12183 2.21063 3.54394 2.47098 3.80429L13.5282 14.8615C13.7885 15.1218 14.2106 15.1218 14.471 14.8615C14.7313 14.6011 14.7313 14.179 14.471 13.9187L3.41379 2.86148Z"
+      fill="white"
+    />
+  </svg>
+</template>

package/src/assets/images/FileNameSavedImage.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="18"
+    height="13"
+    viewBox="0 0 18 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.2844 12.3934H4.71415C2.48261 12.3934 0.666992 10.5708 0.666992 8.34388C0.666992 6.31069 2.17392 4.61975 4.12801 4.33512C4.49407 1.97428 6.54159 0.166016 9.0002 0.166016C11.4588 0.166016 13.5063 1.97428 13.8749 4.33512C15.8267 4.61976 17.3337 6.3109 17.3337 8.34388C17.3337 10.5708 15.5182 12.3934 13.2842 12.3934H13.2844ZM4.71415 5.90411C3.36987 5.90411 2.27921 6.99729 2.27921 8.34388C2.27921 9.68564 3.36987 10.7788 4.71415 10.7788H13.2844C14.6286 10.7788 15.7216 9.68564 15.7216 8.34388C15.7216 6.99729 14.6284 5.90411 13.2844 5.90411H13.1265C12.6817 5.90411 12.3205 5.54539 12.3205 5.09557C12.3205 3.26812 10.8304 1.77802 9.00061 1.77802C7.16847 1.77802 5.68072 3.26812 5.68072 5.09557C5.68072 5.5452 5.3195 5.90411 4.87217 5.90411H4.71415Z"
+      fill="#858C9A"
+    />
+  </svg>
+</template>

package/src/assets/images/FitZoomIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.66683 9.99935C2.29864 9.99935 2.00016 9.70087 2.00016 9.33268C2.00016 8.96449 2.29864 8.66602 2.66683 8.66602H6.66683C7.03502 8.66602 7.3335 8.96449 7.3335 9.33268V13.3327C7.3335 13.7009 7.03502 13.9994 6.66683 13.9994C6.29864 13.9994 6.00016 13.7009 6.00016 13.3327V10.9422L2.47157 14.4708C2.21122 14.7311 1.78911 14.7311 1.52876 14.4708C1.26841 14.2104 1.26841 13.7883 1.52876 13.5279L5.05735 9.99935H2.66683Z"
+    />
+    <path
+      d="M13.3334 6.00065C13.7016 6.00065 14.0001 6.29913 14.0001 6.66732C14.0001 7.03551 13.7016 7.33398 13.3334 7.33398L9.33341 7.33398C8.96522 7.33398 8.66675 7.03551 8.66675 6.66732L8.66675 2.66732C8.66675 2.29913 8.96523 2.00065 9.33342 2.00065C9.7016 2.00065 10.0001 2.29913 10.0001 2.66732L10.0001 5.05784L13.5287 1.52925C13.789 1.2689 14.2111 1.2689 14.4715 1.52925C14.7318 1.78959 14.7318 2.21171 14.4715 2.47205L10.9429 6.00065L13.3334 6.00065Z"
+    />
+  </svg>
+</template>

package/src/assets/images/KeyboardIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="20"
+    height="12"
+    viewBox="0 0 20 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.30187 0.167969H15.6994C16.1387 0.167955 16.5177 0.167942 16.8298 0.193445C17.1593 0.220362 17.487 0.279792 17.8023 0.440454C18.2727 0.680138 18.6552 1.06259 18.8948 1.53299C19.0555 1.84831 19.1149 2.17599 19.1418 2.50545C19.1673 2.81759 19.1673 3.19655 19.1673 3.63583V8.36678C19.1673 8.80606 19.1673 9.18502 19.1418 9.49716C19.1149 9.82661 19.0555 10.1543 18.8948 10.4696C18.6552 10.94 18.2727 11.3225 17.8023 11.5622C17.487 11.7228 17.1593 11.7822 16.8298 11.8092C16.5177 11.8347 16.1387 11.8347 15.6994 11.8346H4.30188C3.86259 11.8347 3.48361 11.8347 3.17146 11.8092C2.84201 11.7822 2.51433 11.7228 2.19901 11.5622C1.7286 11.3225 1.34615 10.94 1.10647 10.4696C0.945808 10.1543 0.886378 9.82661 0.85946 9.49716C0.833957 9.18502 0.83397 8.80605 0.833985 8.36676V3.63585C0.83397 3.19656 0.833957 2.81759 0.85946 2.50545C0.886378 2.17599 0.945808 1.84831 1.10647 1.53299C1.34615 1.06259 1.7286 0.680137 2.19901 0.440454C2.51433 0.279792 2.84201 0.220362 3.17146 0.193445C3.48361 0.167942 3.86258 0.167955 4.30187 0.167969ZM3.30718 1.85458C3.0808 1.87307 2.99686 1.90447 2.95566 1.92546C2.79886 2.00536 2.67138 2.13284 2.59148 2.28964C2.57049 2.33085 2.53909 2.41478 2.52059 2.64117C2.5013 2.87728 2.50065 3.18751 2.50065 3.66797V8.33464C2.50065 8.8151 2.5013 9.12533 2.52059 9.36144C2.53909 9.58783 2.57049 9.67176 2.59148 9.71296C2.67138 9.86976 2.79886 9.99725 2.95566 10.0771C2.99686 10.0981 3.0808 10.1295 3.30718 10.148C3.5433 10.1673 3.85352 10.168 4.33399 10.168H15.6673C16.1478 10.168 16.458 10.1673 16.6941 10.148C16.9205 10.1295 17.0044 10.0981 17.0456 10.0771C17.2024 9.99725 17.3299 9.86977 17.4098 9.71296C17.4308 9.67176 17.4622 9.58783 17.4807 9.36144C17.5 9.12533 17.5007 8.8151 17.5007 8.33464V3.66797C17.5007 3.18751 17.5 2.87728 17.4807 2.64117C17.4622 2.41478 17.4308 2.33085 17.4098 2.28964C17.3299 2.13284 17.2024 2.00536 17.0456 1.92546C17.0044 1.90447 16.9205 1.87307 16.6941 1.85458C16.458 1.83528 16.1478 1.83464 15.6673 1.83464H4.33399C3.85352 1.83464 3.5433 1.83528 3.30718 1.85458ZM4.16732 4.33464C4.16732 3.8744 4.54042 3.5013 5.00065 3.5013H5.00899C5.46922 3.5013 5.84232 3.8744 5.84232 4.33464C5.84232 4.79487 5.46922 5.16797 5.00899 5.16797H5.00065C4.54042 5.16797 4.16732 4.79487 4.16732 4.33464ZM7.50065 4.33464C7.50065 3.8744 7.87375 3.5013 8.33399 3.5013H8.34232C8.80256 3.5013 9.17565 3.8744 9.17565 4.33464C9.17565 4.79487 8.80256 5.16797 8.34232 5.16797H8.33399C7.87375 5.16797 7.50065 4.79487 7.50065 4.33464ZM10.834 4.33464C10.834 3.8744 11.2071 3.5013 11.6673 3.5013H11.6757C12.1359 3.5013 12.509 3.8744 12.509 4.33464C12.509 4.79487 12.1359 5.16797 11.6757 5.16797H11.6673C11.2071 5.16797 10.834 4.79487 10.834 4.33464ZM14.1673 4.33464C14.1673 3.8744 14.5404 3.5013 15.0007 3.5013H15.009C15.4692 3.5013 15.8423 3.8744 15.8423 4.33464C15.8423 4.79487 15.4692 5.16797 15.009 5.16797H15.0007C14.5404 5.16797 14.1673 4.79487 14.1673 4.33464ZM5.00065 8.08464C5.00065 7.6244 5.37375 7.2513 5.83399 7.2513H14.1673C14.6276 7.2513 15.0007 7.6244 15.0007 8.08464C15.0007 8.54487 14.6276 8.91797 14.1673 8.91797H5.83399C5.37375 8.91797 5.00065 8.54487 5.00065 8.08464Z"
+      fill="#2B3545"
+    />
+  </svg>
+</template>

package/src/assets/images/MinusIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="11"
+    height="2"
+    viewBox="0 0 11 2"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.834635 1.66536C0.466446 1.66536 0.167969 1.36689 0.167969 0.998698C0.167969 0.630508 0.466445 0.332031 0.834635 0.332031H10.168C10.5362 0.332031 10.8346 0.630508 10.8346 0.998698C10.8346 1.36689 10.5362 1.66536 10.168 1.66536H0.834635Z"
+    />
+  </svg>
+</template>