@itfin/components 1.4.36 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.4.36",
+  "version": "1.5.0",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -20,36 +20,36 @@
     "libs/"
   ],
   "dependencies": {
-    "@calumk/editorjs-codecup": "^1.1.1",
+    "@calumk/editorjs-codecup": "^1.3.0",
     "@editorjs/attaches": "^1.3.0",
-    "@editorjs/code": "^2.9.0",
-    "@editorjs/delimiter": "^1.4.0",
-    "@editorjs/editorjs": "^2.29.0",
-    "@editorjs/embed": "^2.7.0",
-    "@editorjs/header": "^2.8.1",
-    "@editorjs/image": "^2.9.0",
-    "@editorjs/inline-code": "^1.5.0",
+    "@editorjs/code": "^2.9.3",
+    "@editorjs/delimiter": "^1.4.2",
+    "@editorjs/editorjs": "^2.30.8",
+    "@editorjs/embed": "^2.7.6",
+    "@editorjs/header": "^2.8.8",
+    "@editorjs/image": "^2.10.2",
+    "@editorjs/inline-code": "^1.5.2",
     "@editorjs/link": "^2.6.2",
     "@editorjs/marker": "^1.4.0",
-    "@editorjs/nested-list": "^1.4.2",
-    "@editorjs/quote": "^2.6.0",
-    "@editorjs/table": "^2.3.0",
+    "@editorjs/nested-list": "^1.4.3",
+    "@editorjs/quote": "^2.7.6",
+    "@editorjs/table": "^2.4.5",
     "@egjs/vue-flicking": "^4.10.4",
     "@mdi/js": "^7.2.96",
     "@popperjs/core": "^2.11.8",
     "@shopify/draggable": "^1.0.0-beta.8",
-    "@vue/composition-api": "^1.7.1",
+    "@vue/composition-api": "^1.7.2",
     "@vue/vue2-jest": "^27.0.0",
     "@vue/web-component-wrapper": "^1.3.0",
-    "bootstrap": "^5.3.x",
+    "bootstrap": "^5.3.6",
     "bpmn-js": "^17.0.2",
     "clipboard": "^2.0.11",
     "core-js": "^3.7.0",
     "intersection-observer": "^0.12.2",
+    "json5": "^2.2.3",
     "lodash": "^4.17.20",
     "luxon": "^3.3.0",
     "pdfjs-dist": "^2.10.377",
-    "storybook-dark-mode": "^3.0.3",
     "tippy.js": "^6.3.2",
     "vue-grid-layout": "^2.4.0",
     "vue-imask": "^6.6.3",
@@ -62,9 +62,6 @@
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-syntax-numeric-separator": "^7.10.4",
     "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
-    "@storybook/addon-docs": "=6.3.8",
-    "@storybook/addon-viewport": "=6.3.8",
-    "@storybook/vue": "=6.3.8",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-unit-jest": "^5.0.8",
@@ -76,7 +73,6 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.9.0",
-    "fibers": "^5.0.0",
     "marked": "^4.2.5",
     "postcss-cli": "^11.0.0",
     "sass": "^1.29.0",
@@ -84,6 +80,7 @@
     "vue": "^2.6.12",
     "vue-class-component": "^7.2.6",
     "vue-eslint-parser": "^9.1.0",
+    "vue-jest": "^3.0.7",
     "vue-template-compiler": "=2.6.14"
   },
   "eslintConfig": {
@@ -119,7 +116,7 @@
   "jest": {
     "preset": "@vue/cli-plugin-unit-jest",
     "testMatch": [
-      "**/src/**/*.spec.js"
+      "**/src/**/*.spec.(j|t)s"
     ],
     "testPathIgnorePatterns": [
       "dist/"

package/src/ITFSettings.js

@@ -1,3 +1,9 @@
+if (typeof CSS !== 'undefined' && 'paintWorklet' in CSS) {
+  CSS.paintWorklet.addModule(
+    "https://www.unpkg.com/css-houdini-squircle@0.1.3/squircle.min.js"
+  );
+}
+
 class ITFSettings {
   options = {
     firstDayOfWeek: 'Monday',

package/src/assets/scss/_css_variables.scss

@@ -1,19 +1,14 @@
 @import './variables.scss';
 @import './bootstrap.scss';
 
-$color-income: #0d935b;
-$color-outcome: #b91e1e;
+$color-income: #398241;
+$color-outcome: #C33737;
 
 :root {
   --color-income: #{$color-income};
   --color-outcome: #{$color-outcome};
   --color-primary: #{$primary};
   --body-bg: #{$body-bg};
-
-  .modal-backdrop {
-    --bs-backdrop-bg: #{$body-bg};
-    --bs-backdrop-opacity: 0.75;
-  }
 }
 
 [data-theme="dark"] {

package/src/assets/scss/_dark-theme.scss

@@ -9,16 +9,6 @@ body[data-theme="dark"] {
   --bs-link-color: #{$dark-link-color};
   --bs-link-hover-color: #{darken($dark-link-color, 10%)};
 
-  .color-project-tnm {
-    color: lighten($project-tnm, 50%);
-  }
-  .color-project-fixed {
-    color: $project-fixed;
-  }
-  .color-project-nonprofit {
-    color: $project-nonprofit;
-  }
-
   .form-control {
     background-color: $dark-input-bg;
     border-color: $dark-input-bg;
@@ -60,7 +50,7 @@ body[data-theme="dark"] {
 
   .dropdown-menu {
     --bs-dropdown-link-color: #{$dark-link-color};
-    --bs-dropdown-link-hover-bg: rgba(var(--bs-primary-rgb), .15);
-    --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), .5);
+    --bs-dropdown-link-hover-color: #1e2125;
+    --bs-dropdown-link-hover-bg: #{$dark-link-color};
   }
 }

package/src/assets/scss/_variables.scss

@@ -1,6 +1,6 @@
 // Include any default variable overrides here
-$font-family-base: 'Fira Sans', sans-serif;
-$headings-font-family: 'Fira Sans', sans-serif;
+$font-family-base: 'Recht', sans-serif;
+$headings-font-family: 'Recht', sans-serif;
 $font-family-monospace: "Fira Mono", "Courier New", monospace;
 
 $headings-font-size-base:     1rem;
@@ -11,7 +11,8 @@ $h4-font-size:                $headings-font-size-base * 1.25;
 $h5-font-size:                $headings-font-size-base * 1.125;
 $h6-font-size:                $headings-font-size-base;
 
-$zindex-toaster:                    1071 !default;
+$border-width:                1px;
+$zindex-toaster:              1071 !default;
 
 $border-radius: .5rem;
 $border-radius-sm: .375rem;
@@ -27,6 +28,7 @@ $warning: #cda277;
 $danger: #cb4839;
 
 $primary: #0B314F !default;
+$secondary: #dfe1e6;
 $link-color: #0B314F !default;
 $input-btn-focus-width: .125rem;
 
@@ -36,6 +38,7 @@ $input-border-radius: 10px;
 $input-font-size: 0.875rem;
 $input-font-family: "Fira Mono", "Courier New", monospace;
 
+$input-placeholder-color: #A7AFBB;
 $input-focus-bg: #fff;
 $input-focus-border-color: #fff;
 
@@ -45,14 +48,13 @@ $input-focus-border: rgb(11 49 79 / 25%);
 $form-check-input-border: 1px solid rgba(#000, .08);
 $form-switch-focus-color: tint-color($primary, 50%);
 
-$modal-backdrop-bg: #999;
-$modal-backdrop-opacity: .25;
-$modal-content-border-radius: 0;
-
-$secondary: #dfe1e6;
+$modal-backdrop-bg: #222;
+$modal-backdrop-opacity: .5;
+$modal-content-border-width: 0;
+$modal-footer-border-color: 0;
 
 // popover
-$popover-border-width: 2px;
+$popover-border-width: 1px;
 
 // dropdown
 
@@ -87,3 +89,26 @@ $primaryColor15: #DAE0E5;
 $baseText: #1e1e1e;
 $gray5: #F0F0F1;
 $gray50: #787885;
+
+//$theme-colors: (
+//  "primary":    $primary,
+//  "secondary":  $secondary,
+//  "success":    $success,
+//  "info":       $info,
+//  "warning":    $warning,
+//  "danger":     $danger,
+//  "blue":       $link-color
+//);
+
+// згідно з дизайном
+//$body-color: #22222B;
+//$dropdown-border-radius: .75rem;
+//$dropdown-padding-x: .5rem;
+//$dropdown-item-padding-x: .5rem;
+//$dropdown-link-hover-bg: #F1F2F4;
+//$border-color-translucent:    #00000014;
+//$dropdown-header-color: #A5A5A9;
+//$input-group-addon-bg: $input-bg;
+//$form-check-input-checked-bg-color: #22222B;
+//$form-check-input-indeterminate-bg-color: #22222B;
+//$nav-link-color: $primary;

package/src/assets/scss/components/_button.scss

@@ -45,6 +45,22 @@
   }
 }
 
+@supports (-webkit-mask-image:paint(id)) or (-webkit-mask-image:paint(id)) or (mask-image:paint(id)) or (-webkit-mask-image:paint(id)) {
+  button.itf-button.btn.btn-squircle {
+    -webkit-mask-image: paint(squircle);
+    --squircle-smooth: 0.6;
+    --squircle-radius: 10px;
+    --squircle-outline: 0px;
+    --squircle-corners: top-left top-right bottom-left bottom-right;
+  }
+  .itf-button.btn-squircle.btn:not(.dropdown-toggle):focus:after {
+    -webkit-mask-image: paint(squircle);
+    --squircle-smooth: 0.6;
+    --squircle-radius: 10px;
+    --squircle-outline: 3px;
+    --squircle-corners: top-left top-right bottom-left bottom-right;
+  }
+}
 .itf-button.btn {
   display: inline-flex;
   align-items: center;
@@ -55,17 +71,20 @@
   &:focus {
     -webkit-mask-image: none!important;
   }
-  &:not(.dropdown-toggle):focus:after {
-    border: 3px solid #6792f4;
-    border-radius: .5rem;
-    content: '';
-    position: absolute;
-    top: -3px;
-    left: -3px;
-    right: -3px;
-    bottom: -3px;
-    outline: none;
+  &.btn-squircle:focus:after {
+    border-color: rgb(103, 146, 244);
   }
+  // &:not(.dropdown-toggle):focus:after {
+  //   border: 3px solid #6792f4;
+  //   border-radius: .5rem;
+  //   content: '';
+  //   position: absolute;
+  //   top: -3px;
+  //   left: -3px;
+  //   right: -3px;
+  //   bottom: -3px;
+  //   outline: none;
+  // }
   &.itf-button__block {
     display: block;
     width: 100%;
@@ -120,4 +139,122 @@
       }
     }
   }
+
+  &.btn-default {
+    --bs-btn-color: #22222B;
+    --bs-btn-border-color: #e5e5e5;
+    --bs-btn-hover-color: #1A4A97;
+    --bs-btn-hover-border-color: rgba(26, 74, 151, 0.3);
+    --bs-btn-active-color: #1A4A97;
+    --bs-btn-active-border-color: #1A4A97;
+    --bs-btn-disabled-color: var(--bs-btn-color);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
+
+    .itf-icon {
+      color: #8E97A5;
+    }
+
+    &:hover {
+      .itf-icon {
+        color: var(--bs-btn-hover-color);
+      }
+    }
+    &:active, &:focus {
+      .itf-icon {
+        color: var(--bs-btn-active-color);
+      }
+    }
+
+    &.btn-white {
+      --bs-btn-color: #ffffff;
+      --bs-btn-bg: transparent;
+      --bs-btn-border-color: rgba(255, 255, 255, 0.5);
+      --bs-btn-hover-color: #22222b;
+      --bs-btn-hover-bg: rgba(255, 255, 255, 0.5);
+      --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5);
+      --bs-btn-active-color: #22222b;
+      --bs-btn-active-bg: color-mix(in srgb, black 10%, var(--bs-btn-hover-bg));
+      --bs-btn-active-border-color: rgba(255, 255, 255, 0.5);
+
+      .itf-icon {
+        color: var(--bs-btn-color);
+      }
+
+      &:hover {
+        background-color: var(--bs-btn-hover-bg);
+        border-color: var(--bs-btn-hover-border-color);
+
+        .itf-icon {
+          color: var(--bs-btn-hover-color);
+        }
+      }
+      &:active, &:focus {
+        background-color: var(--bs-btn-active-bg);
+        border-color: var(--bs-btn-active-border-color);
+
+        .itf-icon {
+          color: var(--bs-btn-active-color);
+        }
+      }
+    }
+  }
+
+  &.btn-secondary {
+    --bs-btn-bg: #f5f6f8;
+    --bs-btn-border-color: #f5f6f8;
+
+    &:hover {
+      background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+    }
+    &:active, &:focus {
+      background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+    }
+
+    &.btn-secondary--light {
+      --bs-btn-bg: #ffffff;
+      --bs-btn-border-color: #ffffff;
+    }
+  }
+
+  &.btn-primary {
+    &:hover {
+      background-color: color-mix(in srgb, white 10%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, white 10%, var(--bs-btn-bg));
+    }
+    &:active, &:focus {
+      background-color: color-mix(in srgb, white 20%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, white 20%, var(--bs-btn-bg));
+    }
+  }
+
+  &.btn-blue {
+    --bs-btn-bg: #1A4A97;
+    --bs-btn-border-color: #1A4A97;
+
+    &:hover {
+      background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+    }
+    &:active, &:focus {
+      background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+    }
+  }
+
+  &.btn-white {
+    --bs-btn-bg: #ffffff;
+    --bs-btn-border-color: #ffffff;
+
+    &:hover {
+      background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
+    }
+    &:active, &:focus {
+      background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+      border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
+    }
+  }
 }

package/src/assets/scss/components/_checkbox.scss

@@ -1,5 +1,14 @@
 @import '../variables';
 
+.itf-checkbox, .itf-radio {
+
+  .form-check-input {
+    --checkbox-border-color: #d0d4dc;
+    --bs-form-check-bg: #f5f6f8;
+    border-color: var(--checkbox-border-color);
+  }
+}
+
 .itf-checkbox {
   .form-check-input, .form-check-label {
     cursor: pointer;

package/src/assets/scss/components/_datepicker.scss

@@ -114,7 +114,7 @@
   --adp-transition-ease: ease-out;
   --adp-transition-offset: 8px;
 
-  --adp-background-color: #{$body-bg};
+  --adp-background-color: transparent;
   --adp-background-color-hover: #f0f0f0;
   --adp-background-color-active: #eaeaea;
   --adp-background-color-in-range: rgba(92, 196, 239, .1);
@@ -123,7 +123,7 @@
   --adp-background-color-selected-other-month: #a2ddf6;
 
   --adp-color: #4a4a4a;
-  --adp-color-secondary: #9c9c9c;
+  --adp-color-secondary: #A5A5A9;
   --adp-accent-color: #4eb5e6;
   --adp-color-current-date: #{$primary};
   --adp-color-other-month: #dedede;
@@ -132,7 +132,7 @@
   --adp-color-other-month-hover: #c5c5c5;
 
   --adp-border-color: #dbdbdb;
-  --adp-border-color-inner: #efefef;
+  --adp-border-color-inner: #00000014;
   --adp-border-radius: 4px;
   //--adp-border-color-inline: #d7d7d7;
   --adp-border-color-inline: transparent;

package/src/assets/scss/components/_pagination.scss

@@ -2,11 +2,14 @@
 
 .itf-pagination.pagination {
   padding-left: 0;
+  display: flex;
+  align-items: center;
+  gap: .5rem;
 
   .page-item {
-    margin-right: 3px;
     .page-link {
       border-radius: .5rem;
+      padding: .125rem .25rem
     }
 
     &.disabled .page-link {

package/src/assets/scss/components/_popover.scss

@@ -35,3 +35,25 @@
 .nopadding .popover-body {
   padding: 0;
 }
+
+.popover.onboarding-popover {
+  --bs-popover-max-width: 317px;
+  --bs-popover-bg: var(--primary);
+  --bs-popover-border-width: 0px;
+  --bs-popover-border-color: var(--primary);
+  --bs-border-radius-lg: 0.5rem;
+  --bs-popover-body-color: var(--white);
+  --bs-popover-body-padding-x: 0;
+  --bs-popover-body-padding-y: 0;
+  --bs-secondary-rgb: 255, 255, 255;
+
+  a {
+    --bs-link-color-rgb: 255, 255, 255;
+    --bs-link-hover-color-rgb: 255, 255, 255;
+    --bs-link-active-color-rgb: 255, 255, 255;
+  }
+
+  .border-secondary {
+    --bs-border-opacity: 0.5;
+  }
+}

package/src/assets/scss/components/_segmeneted-control.scss

@@ -1,15 +1,18 @@
 @import '../variables';
 
 .itf-segmeneted-control {
-  --itf-segmeneted-control--background: #{$input-bg};
+  --itf-segmeneted-control--background: #f5f6f8;
   --itf-segmeneted-control--border-radius: #{$border-radius};
-  --itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
+  // --itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
+  --itf-segmeneted-control--shadow: none;
+  --itf-segmeneted-control--selection-bg: rgba(26, 74, 151, 0.1);
+  --itf-segmeneted-control--text-active: #1A4A97;
 
   cursor: pointer;
   background: var(--itf-segmeneted-control--background);
-  border-radius: var(--itf-segmeneted-control--border-radius);
+  border-radius: $border-radius-lg;
   margin: 0;
-  padding: 2px;
+  padding: 4px;
   border: none;
   outline: none;
   display: inline-grid;
@@ -34,9 +37,11 @@
     }
   }
 
+  &.small .option label {
+    padding: 0.125rem 0.25rem;
+  }
   .option {
     position: relative;
-    cursor: pointer;
 
     &:hover input:not(:checked) + label span,
     &:active input:not(:checked) + label span,
@@ -76,6 +81,10 @@
       background: rgba(255, 255, 255, 0);
       color: rgba(0, 0, 0, 1);
 
+      &.disabled {
+        cursor: not-allowed;
+        color: rgba(0, 0, 0, .25);
+      }
       &::before,
       &::after {
         content: '';
@@ -129,6 +138,9 @@
       &:checked + label {
         cursor: default;
       }
+      &:checked + span {
+        color: var(--itf-segmeneted-control--text-active);
+      }
       &:checked + label::before,
       &:checked + label::after {
         background: var(--itf-segmeneted-control--background);
@@ -137,9 +149,8 @@
     }
   }
   .selection {
-    margin-right: 1px;
-    background: rgba(255, 255, 255, 1);
-    border: .5px solid rgba(0, 0, 0, 0.04);
+    background: var(--itf-segmeneted-control--selection-bg);
+    // border: .5px solid rgba(0, 0, 0, 0.04);
     box-shadow: var(--itf-segmeneted-control--shadow);
     /*box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);*/
     border-radius: var(--itf-segmeneted-control--border-radius);

package/src/assets/scss/components/_select.scss

@@ -29,8 +29,8 @@
         color: $dark-body-color;
 
         &.active, &:active {
-          background-color: var(--bs-dropdown-link-active-bg);
-          color: var(--bs-dropdown-link-color);
+          background-color: $dark-primary;
+          color: $dark-body-bg;
         }
       }
     }
@@ -41,7 +41,7 @@
   cursor: pointer;
 
   .form-control {
-    padding: 0.3125rem 0.75rem;
+    padding: 0.125rem 0.75rem;
 
     &.is-valid, &.is-invalid {
       background-image: none;
@@ -58,16 +58,14 @@
     padding-bottom: 0.125rem;
   }
   &.vs--open .form-control {
-    box-shadow: 0 0 0 0.125rem $input-focus-border;
-    border-color: $body-bg;
-    background: $body-bg;
+    //box-shadow: 0 0 0 0.125rem $input-focus-border;
+    //border-color: $body-bg;
+    //background: $body-bg;
   }
   &__dropdown-menu {
     background-color: $body-bg;
     //border: 2px solid $input-focus-border;
     border: 0 none;
-    padding-left: 0.125rem !important;
-    padding-right: 0.125rem !important;
     left: -2px;
     right: -2px;
     width: auto;

package/src/assets/scss/components/_text-field.scss

@@ -2,10 +2,10 @@
 
 .itf-text-field {
   &__input {
-    .addon + & {
-      border-top-left-radius: $input-border-radius !important;
-      border-bottom-left-radius: $input-border-radius !important;
-    }
+    min-height: 2rem;
+    border: 0 none;
+    background-color: transparent !important;
+
     -moz-appearance: textfield; // Hide Arrows From Input Number (Firefox)
 
     &::-webkit-outer-spin-button,  // Hide Arrows From Input Number (Chrome, Safari, Edge, Opera)
@@ -14,9 +14,27 @@
       margin: 0;
     }
   }
-  .addon-end {
-    pointer-events: all;
-    padding-right: 0.25rem;
+  .input-group-text {
+    --bs-border-width: 0;
+
+    background: transparent;
+
+    &.prepend {
+      padding: 0.375rem 0 0.375rem 0.75rem;
+    }
+    &.append {
+      padding-left: .325rem;
+    }
+  }
+  &.is-valid .input-group-text {
+    color: var(--bs-form-valid-border-color);
+  }
+  &.is-invalid .input-group-text {
+    color: var(--bs-form-invalid-border-color);
+  }
+  .was-validated &.form-control:valid, &.form-control.is-valid,
+  .was-validated &.form-control:invalid, &.form-control.is-invalid {
+    background-image: none;
   }
 }
 
@@ -30,10 +48,8 @@
     z-index: 10;
   }
   &__input {
-    .addon + & {
-      border-top-left-radius: $input-border-radius !important;
-      border-bottom-left-radius: $input-border-radius !important;
-    }
+    border: 0 none;
+    //background-color: transparent !important;
     resize: none;
   }
   &__autogrow &__input {

package/src/assets/scss/components/select/_dropdown-menu.scss

@@ -25,6 +25,7 @@ $max-height: $vs-dropdown-max-height;
   min-width: $min-width;
   text-align: left;
   list-style: none;
+  background-color: $bg-color;
 }
 
 .vs__no-options {

package/src/assets/scss/components/select/_dropdown-toggle.scss

@@ -42,7 +42,6 @@ $border-radius: $vs-border-radius;
   margin-right: -9px;
   align-items: center;
   padding: 1px 0 0;
-  min-width: 33px;
 
   .itf-button {
     margin: -0.25rem 0;