bfg-common 1.3.370 → 1.3.372

package/assets/scss/common/normalize.scss

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 html.dark-theme body {
-  * {
+  *:not(svg, path, rect, line, defs, g, clipPath) {
     color: #e9ecef;
   }
   .main-container {
@@ -280,7 +280,8 @@ b {
       }
     }
     &.tooltip-top-right {
-      &.error {}
+      &.error {
+      }
     }
   }
 }

package/components/atoms/TheIcon.vue

@@ -1154,113 +1154,113 @@
     <svg
       width="96"
       height="124"
-      viewBox="0 0 80 80"
+      viewBox="0 0 72 72"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       class="icon icon__obj-network"
     >
       <path
-        d="M12.8115 23.0334L24.3166 33.1416M16.857 62.5358L25.4406 53.1241M57.5138 59.5045L46.0002 51.2818M53.4531 17.947L43.2439 31.1827"
+        d="M8.81152 19.0334L20.3166 29.1416M12.857 58.5358L21.4406 49.1241M53.5138 55.5045L42.0002 47.2818M49.4531 13.947L39.2439 27.1827"
         stroke="#008FD6"
         stroke-width="2.5"
         stroke-linecap="round"
       />
       <path
-        d="M47.3445 35.9314C48.8869 38.8323 49.3173 42.0281 48.7851 45.0304C48.052 49.1658 45.4924 52.934 41.4967 55.0585C38.3037 56.7563 34.7533 57.1068 31.497 56.3092C27.7201 55.384 24.3389 52.9143 22.3696 49.2108C18.7027 42.3142 21.3208 33.7507 28.2174 30.0837C30.9895 28.6098 34.031 28.1513 36.9155 28.5779C41.2071 29.2127 45.1514 31.807 47.3445 35.9314Z"
-        fill="url(#paint0_linear_600_11192)"
+        d="M43.3445 31.9314C44.8869 34.8323 45.3173 38.0281 44.7851 41.0304C44.052 45.1658 41.4924 48.934 37.4967 51.0585C34.3037 52.7563 30.7533 53.1068 27.497 52.3092C23.7201 51.384 20.3389 48.9143 18.3696 45.2108C14.7027 38.3142 17.3208 29.7507 24.2174 26.0837C26.9895 24.6098 30.031 24.1513 32.9155 24.5779C37.2071 25.2127 41.1514 27.807 43.3445 31.9314Z"
+        fill="url(#paint0_linear_600_11204)"
       />
       <path
-        d="M47.3445 35.9314C48.8869 38.8323 49.3173 42.0281 48.7851 45.0304C48.052 49.1658 45.4924 52.934 41.4967 55.0585C38.3037 56.7563 34.7533 57.1068 31.497 56.3092C27.7201 55.384 24.3389 52.9143 22.3696 49.2108C18.7027 42.3142 21.3208 33.7507 28.2174 30.0837C30.9895 28.6098 34.031 28.1513 36.9155 28.5779C41.2071 29.2127 45.1514 31.807 47.3445 35.9314Z"
+        d="M43.3445 31.9314C44.8869 34.8323 45.3173 38.0281 44.7851 41.0304C44.052 45.1658 41.4924 48.934 37.4967 51.0585C34.3037 52.7563 30.7533 53.1068 27.497 52.3092C23.7201 51.384 20.3389 48.9143 18.3696 45.2108C14.7027 38.3142 17.3208 29.7507 24.2174 26.0837C26.9895 24.6098 30.031 24.1513 32.9155 24.5779C37.2071 25.2127 41.1514 27.807 43.3445 31.9314Z"
         fill="white"
         fill-opacity="0.08"
       />
       <path
-        d="M19.4286 68.2858C19.4286 72.5463 15.9748 76.0001 11.7143 76.0001C7.4538 76.0001 4 72.5463 4 68.2858C4 64.0253 7.4538 60.5715 11.7143 60.5715C13.6901 60.5715 15.4923 61.3143 16.8571 62.5358C18.4354 63.9484 19.4286 66.0011 19.4286 68.2858Z"
-        fill="url(#paint1_linear_600_11192)"
+        d="M16 64C16 68.4183 12.4183 72 8 72C3.58172 72 0 68.4183 0 64C0 59.5817 3.58172 56 8 56C10.0489 56 11.918 56.7703 13.3333 58.037C14.97 59.5019 16 61.6307 16 64Z"
+        fill="url(#paint1_linear_600_11204)"
       />
       <path
-        d="M19.4286 68.2858C19.4286 72.5463 15.9748 76.0001 11.7143 76.0001C7.4538 76.0001 4 72.5463 4 68.2858C4 64.0253 7.4538 60.5715 11.7143 60.5715C13.6901 60.5715 15.4923 61.3143 16.8571 62.5358C18.4354 63.9484 19.4286 66.0011 19.4286 68.2858Z"
+        d="M16 64C16 68.4183 12.4183 72 8 72C3.58172 72 0 68.4183 0 64C0 59.5817 3.58172 56 8 56C10.0489 56 11.918 56.7703 13.3333 58.037C14.97 59.5019 16 61.6307 16 64Z"
         fill="white"
         fill-opacity="0.2"
       />
       <path
-        d="M14.2857 19.4285C14.2857 22.2688 11.9832 24.5714 9.14286 24.5714C6.30254 24.5714 4 22.2688 4 19.4285C4 16.5882 6.30254 14.2856 9.14286 14.2856C11.9832 14.2856 14.2857 16.5882 14.2857 19.4285Z"
-        fill="url(#paint2_linear_600_11192)"
+        d="M11 15.5C11 18.5376 8.53757 21 5.5 21C2.46243 21 0 18.5376 0 15.5C0 12.4624 2.46243 10 5.5 10C8.53757 10 11 12.4624 11 15.5Z"
+        fill="url(#paint2_linear_600_11204)"
       />
       <path
-        d="M14.2857 19.4285C14.2857 22.2688 11.9832 24.5714 9.14286 24.5714C6.30254 24.5714 4 22.2688 4 19.4285C4 16.5882 6.30254 14.2856 9.14286 14.2856C11.9832 14.2856 14.2857 16.5882 14.2857 19.4285Z"
+        d="M11 15.5C11 18.5376 8.53757 21 5.5 21C2.46243 21 0 18.5376 0 15.5C0 12.4624 2.46243 10 5.5 10C8.53757 10 11 12.4624 11 15.5Z"
         fill="white"
         fill-opacity="0.16"
       />
       <path
-        d="M65.7142 11.7143C65.7142 15.9748 62.2604 19.4286 57.9999 19.4286C56.2998 19.4286 54.7282 18.8786 53.4532 17.9469C51.533 16.5437 50.2856 14.2747 50.2856 11.7143C50.2856 7.4538 53.7394 4 57.9999 4C62.2604 4 65.7142 7.4538 65.7142 11.7143Z"
-        fill="url(#paint3_linear_600_11192)"
+        d="M62 8C62 12.4183 58.4183 16 54 16C52.2369 16 50.6071 15.4297 49.2849 14.4635C47.2936 13.0083 46 10.6552 46 8C46 3.58172 49.5817 0 54 0C58.4183 0 62 3.58172 62 8Z"
+        fill="url(#paint3_linear_600_11204)"
       />
       <path
-        d="M65.7142 11.7143C65.7142 15.9748 62.2604 19.4286 57.9999 19.4286C56.2998 19.4286 54.7282 18.8786 53.4532 17.9469C51.533 16.5437 50.2856 14.2747 50.2856 11.7143C50.2856 7.4538 53.7394 4 57.9999 4C62.2604 4 65.7142 7.4538 65.7142 11.7143Z"
+        d="M62 8C62 12.4183 58.4183 16 54 16C52.2369 16 50.6071 15.4297 49.2849 14.4635C47.2936 13.0083 46 10.6552 46 8C46 3.58172 49.5817 0 54 0C58.4183 0 62 3.58172 62 8Z"
         fill="white"
         fill-opacity="0.24"
       />
       <path
-        d="M76.0001 65.7142C76.0001 71.3948 71.3951 75.9999 65.7144 75.9999C60.0338 75.9999 55.4287 71.3948 55.4287 65.7142C55.4287 63.3814 56.2053 61.2299 57.5141 59.5043C59.3923 57.0279 62.3666 55.4285 65.7144 55.4285C71.3951 55.4285 76.0001 60.0335 76.0001 65.7142Z"
-        fill="url(#paint4_linear_600_11192)"
+        d="M72 61.5C72 67.299 67.299 72 61.5 72C55.701 72 51 67.299 51 61.5C51 59.1186 51.7928 56.9223 53.1288 55.1608C55.0462 52.6328 58.0824 51 61.5 51C67.299 51 72 55.701 72 61.5Z"
+        fill="url(#paint4_linear_600_11204)"
       />
       <path
-        d="M76.0001 65.7142C76.0001 71.3948 71.3951 75.9999 65.7144 75.9999C60.0338 75.9999 55.4287 71.3948 55.4287 65.7142C55.4287 63.3814 56.2053 61.2299 57.5141 59.5043C59.3923 57.0279 62.3666 55.4285 65.7144 55.4285C71.3951 55.4285 76.0001 60.0335 76.0001 65.7142Z"
+        d="M72 61.5C72 67.299 67.299 72 61.5 72C55.701 72 51 67.299 51 61.5C51 59.1186 51.7928 56.9223 53.1288 55.1608C55.0462 52.6328 58.0824 51 61.5 51C67.299 51 72 55.701 72 61.5Z"
         fill="white"
         fill-opacity="0.16"
       />
       <defs>
         <linearGradient
-          id="paint0_linear_600_11192"
-          x1="53.9841"
-          y1="48.4189"
-          x2="42.3577"
-          y2="61.1125"
+          id="paint0_linear_600_11204"
+          x1="49.9841"
+          y1="44.4189"
+          x2="38.3577"
+          y2="57.1125"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#26B7FF" />
           <stop offset="1" stop-color="#0085C7" />
         </linearGradient>
         <linearGradient
-          id="paint1_linear_600_11192"
-          x1="19.3418"
-          y1="101.072"
-          x2="4.80736"
-          y2="101.39"
+          id="paint1_linear_600_11204"
+          x1="15.91"
+          y1="98"
+          x2="0.83726"
+          y2="98.3302"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#26B7FF" />
           <stop offset="1" stop-color="#0085C7" />
         </linearGradient>
         <linearGradient
-          id="paint2_linear_600_11192"
-          x1="14.2278"
-          y1="41.2856"
-          x2="4.53824"
-          y2="41.4979"
+          id="paint2_linear_600_11204"
+          x1="10.9381"
+          y1="38.875"
+          x2="0.575616"
+          y2="39.102"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#26B7FF" />
           <stop offset="1" stop-color="#0085C7" />
         </linearGradient>
         <linearGradient
-          id="paint3_linear_600_11192"
-          x1="65.6274"
-          y1="44.5"
-          x2="51.093"
-          y2="44.8184"
+          id="paint3_linear_600_11204"
+          x1="61.91"
+          y1="42"
+          x2="46.8373"
+          y2="42.3302"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#26B7FF" />
           <stop offset="1" stop-color="#0085C7" />
         </linearGradient>
         <linearGradient
-          id="paint4_linear_600_11192"
-          x1="75.8844"
-          y1="109.428"
-          x2="56.5052"
-          y2="109.853"
+          id="paint4_linear_600_11204"
+          x1="71.8818"
+          y1="106.125"
+          x2="52.0989"
+          y2="106.558"
           gradientUnits="userSpaceOnUse"
         >
           <stop stop-color="#26B7FF" />

package/components/atoms/TheIcon2.vue

@@ -1125,12 +1125,199 @@
       </g>
     </svg>
   </template>
+  <template v-else-if="props.name === 'host'">
+    <svg
+      :width="props.width"
+      :height="props.height"
+      viewBox="0 0 24 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="host-icon"
+    >
+      <path
+        d="M5.25 3.25H2.5C1.94772 3.25 1.5 3.69772 1.5 4.25V15.75C1.5 16.3023 1.94772 16.75 2.5 16.75H5.25"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M18.75 3.25H21.5C22.0523 3.25 22.5 3.69772 22.5 4.25V15.75C22.5 16.3023 22.0523 16.75 21.5 16.75H18.75"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <rect
+        x="7.5"
+        y="1"
+        width="9"
+        height="18"
+        rx="1"
+        stroke="currentColor"
+        stroke-width="1.2"
+      />
+      <circle cx="12" cy="14.5" r="1.5" stroke="currentColor" />
+      <path
+        d="M18.75 13.75C19.3713 13.75 19.875 13.2463 19.875 12.625C19.875 12.0037 19.3713 11.5 18.75 11.5"
+        stroke="currentColor"
+        stroke-linecap="round"
+      />
+      <path
+        d="M5.25 13.75C4.62868 13.75 4.125 13.2463 4.125 12.625C4.125 12.0037 4.62868 11.5 5.25 11.5"
+        stroke="currentColor"
+        stroke-linecap="round"
+      />
+      <path d="M10.5 4H13.5" stroke="currentColor" stroke-linecap="round" />
+      <path d="M10.5 7H13.5" stroke="currentColor" stroke-linecap="round" />
+      <path d="M4.125 6.25H5.25" stroke="currentColor" stroke-linecap="round" />
+      <path
+        d="M18.75 6.25H19.875"
+        stroke="currentColor"
+        stroke-linecap="round"
+      />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'vm'">
+    <svg
+      :width="props.width"
+      :height="props.height"
+      viewBox="0 0 24 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="vm-icon"
+    >
+      <path
+        d="M12.0537 12.5V18.0381C12.0537 18.3239 12.2062 18.588 12.4537 18.7309L16.8499 21.2691C17.0974 21.412 17.4023 21.412 17.6499 21.2691L22.046 18.7309C22.2935 18.588 22.446 18.3239 22.446 18.0381V12.9619C22.446 12.6761 22.2935 12.412 22.046 12.2691L17.6499 9.73094C17.4023 9.58803 17.0974 9.58803 16.8499 9.73094L12.0537 12.5ZM12.0537 12.5L17.2499 15.5M17.2499 15.5V21.3184M17.2499 15.5L22.3299 12.567"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6.75572 20.75V15.875M1.77427 12.624L6.57026 15.3929V15.3929C6.68503 15.4592 6.82642 15.4592 6.94118 15.3929L11.795 12.5906M1.55957 12.9619V18.0381C1.55957 18.3239 1.71205 18.588 1.95957 18.7309L6.35572 21.2691C6.60324 21.412 6.9082 21.412 7.15572 21.2691L11.5519 18.7309C11.7994 18.588 11.9519 18.3239 11.9519 18.0381V12.9619C11.9519 12.6761 11.7994 12.412 11.5519 12.2691L7.15572 9.73094C6.9082 9.58803 6.60324 9.58803 6.35572 9.73094L1.95957 12.2691C1.71205 12.412 1.55957 12.6761 1.55957 12.9619Z"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.0555 12.5L16.8517 9.73094C17.0992 9.58803 17.2517 9.32393 17.2517 9.03812V3.96188C17.2517 3.67607 17.0992 3.41197 16.8517 3.26906L12.4555 0.73094C12.208 0.588034 11.903 0.588034 11.6555 0.73094L7.25937 3.26906C7.01185 3.41197 6.85938 3.67607 6.85938 3.96188V9.03812C6.85938 9.32393 7.01185 9.58803 7.25938 9.73094L12.0555 12.5ZM12.0555 12.5V6.5M12.0555 6.5L7.01004 3.58699M12.0555 6.5L17.083 3.5974"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'datastore'">
+    <svg
+      :width="props.width"
+      :height="props.height"
+      viewBox="0 0 20 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="datastore-icon"
+    >
+      <path
+        d="M19 3.75C19 4.99264 14.9706 6 10 6C5.02944 6 1 4.99264 1 3.75M19 3.75C19 2.50736 14.9706 1.5 10 1.5C5.02944 1.5 1 2.50736 1 3.75M19 3.75V20.25C19 21.4926 14.9706 22.5 10 22.5C5.02944 22.5 1 21.4926 1 20.25V3.75M19 9.25488C19 10.4975 14.9706 11.5049 10 11.5049C5.02944 11.5049 1 10.4975 1 9.25488M19 14.7598C19 16.0024 14.9706 17.0098 10 17.0098C5.02944 17.0098 1 16.0024 1 14.7598"
+        stroke="currentColor"
+        stroke-width="1.2"
+      />
+      <path
+        d="M4 8.17529H4.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M4 13.6802H4.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M4 19.1997H4.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M7 8.625H7.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M7 14.1299H7.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M7 19.6348H7.001"
+        stroke="currentColor"
+        stroke-width="1.2"
+        stroke-linecap="round"
+      />
+    </svg>
+  </template>
+  <template v-else-if="props.name === 'network'">
+    <svg
+      :width="props.width"
+      :height="props.height"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_2062_7683)">
+        <path
+          d="M14.625 12.75C14.625 13.7083 14.2983 14.5902 13.7501 15.2905C12.995 16.2551 11.8199 16.875 10.5 16.875C9.44523 16.875 8.48292 16.4791 7.75355 15.8278C6.90759 15.0724 6.375 13.9734 6.375 12.75C6.375 10.4718 8.22183 8.625 10.5 8.625C11.4157 8.625 12.2618 8.92339 12.9462 9.42824C13.9645 10.1794 14.625 11.3876 14.625 12.75Z"
+          stroke="currentColor"
+          stroke-width="1.2"
+        />
+        <path
+          d="M22.5 19.5C22.5 21.1569 21.1569 22.5 19.5 22.5C17.8431 22.5 16.5 21.1569 16.5 19.5C16.5 18.8196 16.7265 18.1921 17.1082 17.6888C17.6561 16.9665 18.5236 16.5 19.5 16.5C21.1569 16.5 22.5 17.8431 22.5 19.5Z"
+          stroke="currentColor"
+          stroke-width="1.2"
+        />
+        <path
+          d="M4.5 6C4.5 6.82843 3.82843 7.5 3 7.5C2.17157 7.5 1.5 6.82843 1.5 6C1.5 5.17157 2.17157 4.5 3 4.5C3.82843 4.5 4.5 5.17157 4.5 6Z"
+          stroke="currentColor"
+          stroke-width="1.2"
+        />
+        <path
+          d="M19.5 3.75C19.5 4.99264 18.4926 6 17.25 6C16.7541 6 16.2957 5.8396 15.9239 5.56785C15.3638 5.15859 15 4.49678 15 3.75C15 2.50736 16.0074 1.5 17.25 1.5C18.4926 1.5 19.5 2.50736 19.5 3.75Z"
+          stroke="currentColor"
+          stroke-width="1.2"
+        />
+        <path
+          d="M6 20.25C6 21.4926 4.99264 22.5 3.75 22.5C2.50736 22.5 1.5 21.4926 1.5 20.25C1.5 19.0074 2.50736 18 3.75 18C4.32627 18 4.85193 18.2166 5.25 18.5729C5.71031 18.9849 6 19.5836 6 20.25Z"
+          stroke="currentColor"
+          stroke-width="1.2"
+        />
+        <path
+          d="M4.07031 7.05141L7.42597 9.99961M5.25024 18.5729L7.7538 15.8278M17.1085 17.6888L13.7503 15.2905M15.9241 5.56787L12.9464 9.42826"
+          stroke="currentColor"
+          stroke-width="1.2"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2062_7683">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  </template>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
-  name: string | undefined
-}>()
+const props = withDefaults(
+  defineProps<{
+    name: string
+    width?: string
+    height?: string
+  }>(),
+  {
+    width: '24',
+    height: '24',
+  }
+)
 </script>
 
 <style scoped lang="scss"></style>

package/components/atoms/collapse/CollapseNavItem.vue

@@ -16,8 +16,12 @@
           },
         ]"
       >
+        <atoms-the-icon2
+          v-if="props.item.iconName"
+          :name="props.item.iconName"
+        />
         <span
-          v-if="props.item.iconClassName"
+          v-else-if="props.item.iconClassName"
           :class="['icon', props.item.iconClassName]"
         ></span>
         <span v-else>{{ props.item.text }}</span>
@@ -51,8 +55,9 @@
       ]"
       @click="change(props.item.value)"
     >
+      <atoms-the-icon2 v-if="props.item.iconName" :name="props.item.iconName" />
       <span
-        v-if="props.item.iconClassName"
+        v-else-if="props.item.iconClassName"
         :class="['icon', props.item.iconClassName]"
       ></span>
       <span v-else>{{ props.item.text }}</span>
@@ -61,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
 
 const props = defineProps<{
   item: UI_I_CollapseNavItem
@@ -84,6 +89,21 @@ const onSelectFiles = (event: Event): void => {
 }
 </script>
 
+<style>
+:root {
+  --collapse-nav-item-link-color: #4d5d69;
+  --collapse-nav-item-link-hover-color: #182531;
+  --collapse-nav-item-active-link-color: #008fd6;
+  --collapse-nav-item-active-link-hover-color: #0081c1;
+}
+:root.dark-theme {
+  --collapse-nav-item-link-color: #e9eaec;
+  --collapse-nav-item-link-hover-color: #ffffff;
+  --collapse-nav-item-active-link-color: #2ba2de;
+  --collapse-nav-item-active-link-hover-color: #0081c1;
+}
+</style>
+
 <style scoped lang="scss">
 @import '~/assets/scss/common/mixins.scss';
 %hover-effect {
@@ -103,15 +123,19 @@ const onSelectFiles = (event: Event): void => {
 .nav {
   .router-link-active .nav-link:not(.nav-link.disabled) {
     @extend %border-effect;
-    color: var(--nav-link-active-color);
+    color: var(--collapse-nav-item-active-link-color);
   }
   &-link {
-    color: var(--nav-link-color);
+    color: var(--collapse-nav-item-link-color);
     &.active {
-      color: var(--nav-link-active-color);
+      color: var(--collapse-nav-item-active-link-color);
+
+      &:hover {
+        color: var(--collapse-nav-item-active-link-hover-color);
+      }
     }
     &:hover:not(&.active) {
-      color: var(--nav-link-hover-color);
+      color: var(--collapse-nav-item-link-hover-color);
     }
     :is(&.active, &:hover) {
       @extend %border-effect;

package/components/atoms/collapse/lib/models/interfaces.ts

@@ -7,4 +7,5 @@ export interface UI_I_CollapseNavItem {
   separate?: boolean
   uploaded?: boolean
   testId?: string
+  iconName?: string
 }

package/components/atoms/loader/Loader.vue

@@ -1,30 +1,30 @@
-<template>
-  <div class="loader"><div :data-id="props.testId" class="spinner"></div></div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  testId: string
-}>()
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins';
-.loader {
-  position: absolute;
-  @include flex($just: center, $align: center);
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--table-spinner-bg-color);
-  z-index: 590;
-
-  .spinner {
-    width: 40px;
-    height: 40px;
-    min-width: 40px;
-    min-height: 40px;
-  }
-}
-</style>
+<template>
+  <div class="loader"><div :data-id="props.testId" class="spinner"></div></div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  testId: string
+}>()
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins';
+.loader {
+  position: absolute;
+  @include flex($just: center, $align: center);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--table-spinner-bg-color);
+  z-index: 590;
+
+  .spinner {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
+  }
+}
+</style>

package/components/atoms/loader/PreLoader.vue

@@ -1,38 +1,38 @@
-<template>
-  <div id="loading-container" :hidden="!props.show">
-    <div :data-id="props.testId" class="spinner spinner-inverse">
-      {{ localization.loading }}...
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  show: boolean
-  testId: string
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style scoped lang="scss">
-#loading-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #fff;
-  z-index: 99999;
-
-  .spinner {
-    opacity: 0.5;
-    white-space: nowrap;
-  }
-}
-</style>
+<template>
+  <div id="loading-container" :hidden="!props.show">
+    <div :data-id="props.testId" class="spinner spinner-inverse">
+      {{ localization.loading }}...
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  show: boolean
+  testId: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+#loading-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  z-index: 99999;
+
+  .spinner {
+    opacity: 0.5;
+    white-space: nowrap;
+  }
+}
+</style>