@itfin/components 1.1.0 → 1.2.3

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@itfin/components",
-  "version": "1.1.0",
-  "main": "dist/itfin-components.umd.js",
-  "unpkg": "dist/itfin-components.common.js",
+  "version": "1.2.3",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
-  "license": "ISC",
   "scripts": {
-    "dev": "start-storybook",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --target lib --name ITFComponents src/main.js",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
-    "build:storybook": "build-storybook -c .storybook -o .out"
+    "build:storybook": "build-storybook -c .storybook -o .out",
+    "dev": "start-storybook",
+    "storybook:build": "vue-cli-service storybook:build -c config/storybook",
+    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
   },
+  "main": "dist/itfin-components.umd.js",
+  "unpkg": "dist/itfin-components.common.js",
   "files": [
     "dist",
     "src/"
@@ -39,10 +40,11 @@
     "vue2-daterange-picker": "^0.6.1"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^6.3.8",
-    "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addon-viewport": "^6.3.8",
-    "@storybook/vue": "^6.3.8",
+    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+    "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+    "@storybook/addon-docs": "=6.3.8",
+    "@storybook/addon-viewport": "=6.3.8",
+    "@storybook/vue": "=6.3.8",
     "@vue/cli-plugin-babel": "^4.5.8",
     "@vue/cli-plugin-eslint": "^4.5.8",
     "@vue/cli-plugin-unit-jest": "^4.5.8",
@@ -53,9 +55,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-vue": "^7.1.0",
     "fibers": "^5.0.0",
-    "find-in-files": "^0.5.0",
     "marked": "^1.2.3",
-    "ncp": "^2.0.0",
     "sass": "^1.29.0",
     "sass-loader": "^10.0.5",
     "vue-class-component": "^7.2.6",
@@ -93,5 +93,6 @@
   ],
   "jest": {
     "preset": "@vue/cli-plugin-unit-jest"
-  }
+  },
+  "license": "ISC"
 }

package/src/ITFSettings.js

@@ -1,10 +1,18 @@
 class ITFSettings {
   options = {
     firstDayOfWeek: 'Monday',
+    defaultLocale: 'en_US',
     defaultDisplayDateFormat: 'MM/dd/yyyy',
     // defaultDisplayDateFormat: 'dd.MM.yyyy',
   };
 
+  get supportLanguages() {
+    return [
+      { locale: 'en_US', name: 'English', dateFormat: 'MM/dd/yyyy' },
+      { locale: 'uk_UA', name: 'Українська (Ukrainian)', dateFormat: 'dd.MM.yyyy' },
+    ];
+  }
+
   get firstDayOfWeek() {
     return this.options.firstDayOfWeek;
   }

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

@@ -1,5 +1,5 @@
-@media (prefers-color-scheme: notdark) {
-  body {
+@media (prefers-color-scheme: dark) {
+  .support-dark body {
     background-color: $dark-body-bg !important;
     color: $dark-body-color !important;
 

package/src/assets/scss/_variables.scss

@@ -72,6 +72,7 @@ $pagination-border-width: 0;
 // 3. Include remainder of required Bootstrap stylesheets
 @import "~bootstrap/scss/variables.scss";
 @import "~bootstrap/scss/mixins.scss";
+@import "~bootstrap/scss/maps.scss";
 @import "~bootstrap/scss/utilities.scss";
 
 $custom-colors: (

package/src/assets/scss/components/_search-input.scss

@@ -40,8 +40,9 @@ $font-size: 1em;
 
 .vs__search::placeholder {
   color: mix($body-color, $body-bg, 50%);
-
-  @media (prefers-color-scheme: notdark) {
+}
+@media (prefers-color-scheme: dark) {
+  .support-dark .vs__search::placeholder {
     color: mix($dark-body-color, $dark-body-bg, 50%);
   }
 }

package/src/assets/scss/components/_selected.scss

@@ -20,8 +20,9 @@
   &.badge {
     padding: 0.1875rem 0.5rem;
   }
-
-  @media (prefers-color-scheme: notdark) {
+}
+@media (prefers-color-scheme: dark) {
+  .support-dark .vs--multiple .vs__selected {
     background-color: #221;
     color: $dark-body-color;
   }

package/src/assets/scss/directives/loading.scss

@@ -2,6 +2,21 @@
 
 :root {
   --loader-color: #1967d2;
+  --itf-spinner-border-color: rgba(97, 97, 97, 0.29);
+  --itf-spinner-main-color: rgb(100, 100, 100);
+  --itf-spinner-white-border-color: rgba(158, 158, 158, 0.29);
+  --itf-spinner-white-main-color: rgb(155, 155, 155);
+  --itf-loading-bg-color: rgba(255, 255, 255, .4);
+}
+
+@media (prefers-color-scheme: dark) {
+  .support-dark {
+    --itf-spinner-border-color: rgba(158, 158, 158, 0.29);
+    --itf-spinner-main-color: rgb(155, 155, 155);
+    --itf-spinner-white-border-color: rgba(97, 97, 97, 0.29);
+    --itf-spinner-white-main-color: rgb(100, 100, 100);
+    --itf-loading-bg-color: rgba($dark-body-bg, .75);
+  }
 }
 
 .itf-spinner {
@@ -17,19 +32,15 @@
   height: 1.5rem;
   border-width: 2px;
   border-style: solid;
-  border-color: rgba(97, 97, 97, 0.29);
-  border-top-color: rgb(100, 100, 100);
+  border-color: var(--itf-spinner-border-color);
+  border-top-color: var(--itf-spinner-main-color);
   -webkit-animation: spinner 0.7s linear infinite;
   animation: spinner 0.7s linear infinite;
   mix-blend-mode: difference;
 
   &.itf-spinner__white {
-    border-color: rgba(158, 158, 158, 0.29);
-    border-top-color: rgb(155, 155, 155);
-  }
-  @media (prefers-color-scheme: notdark) {
-    border-color: rgba(158, 158, 158, 0.29);
-    border-top-color: rgb(155, 155, 155);
+    border-color: var(--itf-spinner-white-border-color);
+    border-top-color: var(--itf-spinner-white-main-color);
   }
 }
 
@@ -42,7 +53,7 @@
     cursor: progress;
     pointer-events: all;
     position: absolute;
-    background-color: rgba(255, 255, 255, .4);
+    background-color: var(--itf-loading-bg-color);
     top: 0;
     left: 0;
     right: 0;
@@ -51,10 +62,6 @@
     color: var(--loader-color);
     backdrop-filter: blur(5px);
 
-    @media (prefers-color-scheme: notdark) {
-      background-color: rgba($dark-body-bg, .75);
-    }
-
     &-message {
       text-align: center;
       position: absolute;

package/src/assets/scss/directives/tooltip.scss

@@ -3,21 +3,29 @@
 $tooltip-color: #fff9ae;
 $dark-tooltip-color: #7b52eb;
 
+:root {
+  --itf-tooltip-shadow: 0 0 20px 4px rgba(154, 161, 177, .15), 0 4px 80px -8px rgba(36, 40, 47, .25), 0 4px 4px -2px rgba(91, 94, 105, .15);
+  --itf-tooltip-color: $body-color;
+  --itf-tooltip-bg-color: $tooltip-color;
+}
+
+@media (prefers-color-scheme: dark) {
+  .support-dark {
+    --itf-tooltip-shadow: 0 0 20px 4px rgba(87, 78, 101, 0.15), 0 4px 80px -8px rgba(211, 208, 219, 0.25), 0 4px 4px -2px rgba(156, 150, 164, 0.15);
+    --itf-tooltip-color: $dark-body-color;
+    --itf-tooltip-bg-color: $dark-tooltip-color;
+  }
+}
+
 .tippy-box[data-theme~=itfin] {
-  color: $body-color;
-  background-color: $tooltip-color;
+  color: var(--itf-tooltip-color);
+  background-color: var(--itf-tooltip-bg-color);
   font-size: 12px;
   border-radius: 5px;
-  box-shadow: 0 0 20px 4px rgba(154, 161, 177, .15), 0 4px 80px -8px rgba(36, 40, 47, .25), 0 4px 4px -2px rgba(91, 94, 105, .15);
+  box-shadow: var(--itf-tooltip-shadow);
   padding: 5px;
   cursor: default;
 
-  @media (prefers-color-scheme: notdark) {
-    background-color: $dark-tooltip-color;
-    color: $dark-body-color;
-    box-shadow: 0 0 20px 4px rgba(87, 78, 101, 0.15), 0 4px 80px -8px rgba(211, 208, 219, 0.25), 0 4px 4px -2px rgba(156, 150, 164, 0.15);
-  }
-
   &[data-placement^=top] > .tippy-arrow:before {
     border-top-color: $tooltip-color
   }

package/src/assets/scss/main.scss

@@ -2,7 +2,6 @@
 @import './fonts.scss';
 @import './dark-theme.scss';
 @import './scrollbar';
-@import '~bootstrap/scss/spinners.scss';
 
 .color-project-tnm {
   color: $project-tnm;
@@ -23,12 +22,14 @@
 }
 
 
-@media (prefers-color-scheme: notdark) {
-  a {
-    color: $dark-btn-primary-color;
+@media (prefers-color-scheme: dark) {
+  .support-dark {
+    a {
+      color: $dark-btn-primary-color;
 
-    &:hover {
-      color: darken($dark-btn-primary-color, 10%);
+      &:hover {
+        color: darken($dark-btn-primary-color, 10%);
+      }
     }
   }
 }

package/src/components/app/message.js

@@ -32,9 +32,9 @@ const Message = function (options) {
   options.onClose = function () {
     Message.close(id, userOnClose);
   };
-
+  const parent = document.getElementById('itf-app');
   const instance = new MessageConstructor({
-    parent: document.getElementById('itf-app').__vue__,
+    parent: parent ? parent.__vue__ : null,
     el: document.createElement('div'),
     data: options
   });

package/src/components/avatar/index.stories.js

@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/vue';
-import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
 import itfAvatar from './Avatar.vue';
 
 storiesOf('Common', module)
@@ -10,16 +9,16 @@ storiesOf('Common', module)
     },
     props: {
       src: {
-        default: text('Url', 'https://img.freepik.com/free-vector/cartoon-monster-face-avatar-halloween-monster_6996-1164.jpg?size=338&ext=jpg'),
+        default: 'https://img.freepik.com/free-vector/cartoon-monster-face-avatar-halloween-monster_6996-1164.jpg?size=338&ext=jpg',
       },
       letters: {
-        default: text('Letter when no image', 'AA'),
+        default: 'AA',
       },
       size: {
-        default: number('Photo size', 64)
+        default: 64
       },
       statusBadge: {
-        default: boolean('Show status badge', false)
+        default: false
       },
     },
     template: `<div>

package/src/components/button/Button.vue

@@ -1,6 +1,52 @@
 <style lang="scss">
 @import '../../assets/scss/main';
-//@import '~bootstrap/scss/buttons';
+
+:root {
+  --itf-button-basic-bg-color: rgba(9, 30, 66, 0.08);
+}
+
+@media (prefers-color-scheme: dark) {
+  .support-dark {
+    --itf-button-basic-bg-color: rgba(246, 225, 189, 0.08);
+
+    .itf-button.btn {
+      &.btn-secondary {
+        &, &.disabled {
+          background-color: $dark-btn-secondary-color;
+          border-color: $dark-btn-secondary-color;
+        }
+
+        &:active, &:focus {
+          background-color: lighten($dark-btn-secondary-color, 5%);
+          border-color: lighten($dark-btn-secondary-color, 5%);
+        }
+        &:hover {
+          background-color: lighten($dark-btn-secondary-color, 10%);
+          border-color: lighten($dark-btn-secondary-color, 10%);
+        }
+      }
+      &.btn-primary {
+        &, &.disabled {
+          background-color: $dark-btn-primary-color;
+          border-color: $dark-btn-primary-color;
+          color: $body-color;
+        }
+
+        &:active, &:focus {
+          color: $body-color;
+          background-color: darken($dark-btn-primary-color, 5%);
+          border-color: darken($dark-btn-primary-color, 5%);
+          box-shadow: 0 0 0 0.125rem mix($dark-btn-primary-color, $dark-body-bg, 50%);
+        }
+        &:hover {
+          color: $body-color;
+          background-color: darken($dark-btn-primary-color, 10%);
+          border-color: darken($dark-btn-primary-color, 10%);
+        }
+      }
+    }
+  }
+}
 
 .itf-button.btn {
   display: inline-flex;
@@ -42,11 +88,7 @@
   }
   &.btn-basic {
     &:hover, &.active {
-      background-color: rgba(9, 30, 66, 0.08);
-
-      @media (prefers-color-scheme: notdark) {
-        background-color: rgba(246, 225, 189, 0.08);
-      }
+      background-color: var(--itf-button-basic-bg-color);
     }
   }
   &.btn-icon {
@@ -68,43 +110,6 @@
       }
     }
   }
-
-  @media (prefers-color-scheme: notdark) {
-    &.btn-secondary {
-      &, &.disabled {
-        background-color: $dark-btn-secondary-color;
-        border-color: $dark-btn-secondary-color;
-      }
-
-      &:active, &:focus {
-        background-color: lighten($dark-btn-secondary-color, 5%);
-        border-color: lighten($dark-btn-secondary-color, 5%);
-      }
-      &:hover {
-        background-color: lighten($dark-btn-secondary-color, 10%);
-        border-color: lighten($dark-btn-secondary-color, 10%);
-      }
-    }
-    &.btn-primary {
-      &, &.disabled {
-        background-color: $dark-btn-primary-color;
-        border-color: $dark-btn-primary-color;
-        color: $body-color;
-      }
-
-      &:active, &:focus {
-        color: $body-color;
-        background-color: darken($dark-btn-primary-color, 5%);
-        border-color: darken($dark-btn-primary-color, 5%);
-        box-shadow: 0 0 0 0.125rem mix($dark-btn-primary-color, $dark-body-bg, 50%);
-      }
-      &:hover {
-        color: $body-color;
-        background-color: darken($dark-btn-primary-color, 10%);
-        border-color: darken($dark-btn-primary-color, 10%);
-      }
-    }
-  }
 }
 </style>
 <!---template>

package/src/components/datepicker/DatePicker.vue

@@ -54,6 +54,16 @@
 @import '../../assets/scss/directives/tooltip';
 @import '../../assets/scss/input-addon';
 
+@media (prefers-color-scheme: dark) {
+  .support-dark .itf-datepicker {
+    &__dropdown {
+      background-color: $dark-body-bg;
+      border-color: $dark-border-color;
+      box-shadow: 0 0 0 2px $dark-input-focus-border;
+    }
+  }
+}
+
 .itf-datepicker {
   &.with-addon .addon-end {
     pointer-events: all;
@@ -75,12 +85,6 @@
       // Avoid using mixin so we can pass custom focus shadow properly
       box-shadow: $input-btn-focus-box-shadow;
     }
-
-    @media (prefers-color-scheme: notdark) {
-      background-color: $dark-body-bg;
-      border-color: $dark-border-color;
-      box-shadow: 0 0 0 2px $dark-input-focus-border;
-    }
   }
 }
 </style>

package/src/components/datepicker/datepicker.scss

@@ -1,7 +1,29 @@
 @import '../../assets/scss/variables';
-/* -------------------------------------------------
-    Datepicker vars
-   ------------------------------------------------- */
+
+
+
+@media (prefers-color-scheme: dark) {
+  .support-dark .air-datepicker {
+    --adp-background-color: #{$dark-body-bg};
+    --adp-color-current-date: #{$dark-primary};
+    --adp-cell-background-color-selected: #{$dark-primary};
+    --adp-cell-background-color-selected-hover: #{lighten($dark-primary, 10%)};
+    --adp-day-name-color: #bfbfbf;
+    --adp-color: #dedede;
+    --adp-color-other-month: #4a4a4a;
+    --adp-cell-background-color-in-range: #{$dark-input-focus-border-color};
+    --adp-background-color-hover: #{darken($dark-primary, 25%)};
+    --adp-border-color-inner: #{lighten($dark-body-bg, 25%)};
+
+    --adp-background-color-selected-other-month-focused: #{$dark-primary};
+    --adp-background-color-selected-other-month: #{lighten($dark-primary, 10%)};
+
+    .air-datepicker-cell.-selected-, .air-datepicker-cell.-selected-.-current- {
+      color: $dark-body-bg;
+    }
+  }
+}
+
 .air-datepicker {
   --adp-width: 246px; // Day cell width will be equal to 34px
   --adp-z-index: 100;
@@ -39,26 +61,6 @@
   //--adp-border-color-inline: #d7d7d7;
   --adp-border-color-inline: transparent;
 
-  @media (prefers-color-scheme: notdark) {
-    --adp-background-color: #{$dark-body-bg};
-    --adp-color-current-date: #{$dark-primary};
-    --adp-cell-background-color-selected: #{$dark-primary};
-    --adp-cell-background-color-selected-hover: #{lighten($dark-primary, 10%)};
-    --adp-day-name-color: #bfbfbf;
-    --adp-color: #dedede;
-    --adp-color-other-month: #4a4a4a;
-    --adp-cell-background-color-in-range: #{$dark-input-focus-border-color};
-    --adp-background-color-hover: #{darken($dark-primary, 25%)};
-    --adp-border-color-inner: #{lighten($dark-body-bg, 25%)};
-
-    --adp-background-color-selected-other-month-focused: #{$dark-primary};
-    --adp-background-color-selected-other-month: #{lighten($dark-primary, 10%)};
-
-    .air-datepicker-cell.-selected-, .air-datepicker-cell.-selected-.-current- {
-      color: $dark-body-bg;
-    }
-  }
-
   --adp-nav-height: 32px;
   --adp-nav-arrow-color: var(--adp-color-secondary);
   --adp-nav-color-secondary: var(--adp-color-secondary);

package/src/components/icon/components/backward10.vue

@@ -0,0 +1,10 @@
+<template><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M26,18A10,10,0,1,1,16,8h4v5l6-6L20,1V6H16A12,12,0,1,0,28,18Z" transform="translate(32 0) scale(-1,1)"/>
+  <path
+    fill="currentColor"
+    d="M19.63,22.13a2.84,2.84,0,0,1-1.28-.27,2.44,2.44,0,0,1-.89-.77,3.57,3.57,0,0,1-.52-1.25,7.69,7.69,0,0,1-.17-1.68,7.83,7.83,0,0,1,.17-1.68,3.65,3.65,0,0,1,.52-1.25,2.44,2.44,0,0,1,.89-.77,2.84,2.84,0,0,1,1.28-.27,2.44,2.44,0,0,1,2.16,1,5.23,5.23,0,0,1,.7,2.93,5.23,5.23,0,0,1-.7,2.93A2.44,2.44,0,0,1,19.63,22.13Zm0-1.22a1.07,1.07,0,0,0,1-.55A3.38,3.38,0,0,0,21,18.85V17.47a3.31,3.31,0,0,0-.29-1.5,1.23,1.23,0,0,0-2.06,0,3.31,3.31,0,0,0-.29,1.5v1.38a3.38,3.38,0,0,0,.29,1.51A1.06,1.06,0,0,0,19.63,20.91Z"
+    transform="translate(0 0)"
+  />
+  <path fill="currentColor" d="M10.63,22V20.82h2V15.63l-1.86,1-.55-1.06,2.32-1.3H14v6.5h1.78V22Z" transform="translate(0 0)"/>
+</svg>
+</template>

package/src/components/icon/components/forward10.vue

@@ -0,0 +1,9 @@
+<template><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M26,18A10,10,0,1,1,16,8h4v5l6-6L20,1V6H16A12,12,0,1,0,28,18Z" transform="translate(0 0)"/>
+  <path
+    fill="currentColor"
+    d="M19.63,22.13a2.84,2.84,0,0,1-1.28-.27,2.44,2.44,0,0,1-.89-.77,3.57,3.57,0,0,1-.52-1.25,7.69,7.69,0,0,1-.17-1.68,7.83,7.83,0,0,1,.17-1.68,3.65,3.65,0,0,1,.52-1.25,2.44,2.44,0,0,1,.89-.77,2.84,2.84,0,0,1,1.28-.27,2.44,2.44,0,0,1,2.16,1,5.23,5.23,0,0,1,.7,2.93,5.23,5.23,0,0,1-.7,2.93A2.44,2.44,0,0,1,19.63,22.13Zm0-1.22a1.07,1.07,0,0,0,1-.55A3.38,3.38,0,0,0,21,18.85V17.47a3.31,3.31,0,0,0-.29-1.5,1.23,1.23,0,0,0-2.06,0,3.31,3.31,0,0,0-.29,1.5v1.38a3.38,3.38,0,0,0,.29,1.51A1.06,1.06,0,0,0,19.63,20.91Z"
+    transform="translate(0 0)"/>
+  <path fill="currentColor" d="M10.63,22V20.82h2V15.63l-1.86,1-.55-1.06,2.32-1.3H14v6.5h1.78V22Z" transform="translate(0 0)"/>
+</svg>
+</template>

package/src/components/icon/components/pause.vue

@@ -0,0 +1,10 @@
+<template><svg height="762" viewBox="0 0 762 762" width="762" xmlns="http://www.w3.org/2000/svg">
+  <g fill="currentColor" fill-rule="evenodd" stroke="none" transform="translate(125 125)">
+    <path
+      d="M224,435.8V76.1c0-6.7-5.4-12.1-12.2-12.1h-71.6c-6.8,0-12.2,5.4-12.2,12.1v359.7c0,6.7,5.4,12.2,12.2,12.2h71.6   C218.6,448,224,442.6,224,435.8z"/>
+
+    <path
+      d="M371.8,64h-71.6c-6.7,0-12.2,5.4-12.2,12.1v359.7c0,6.7,5.4,12.2,12.2,12.2h71.6c6.7,0,12.2-5.4,12.2-12.2V76.1   C384,69.4,378.6,64,371.8,64z"/>
+  </g>
+</svg>
+</template>

package/src/components/icon/components/play.vue

@@ -0,0 +1,7 @@
+<template><svg height="21" viewBox="5.5 5 11 11" width="21" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+     transform="translate(2 5)">
+    <path d="m7.5 7.5 3-2-3-2z" fill="currentColor"/>
+  </g>
+</svg>
+</template>

package/src/components/modal/Modal.vue

@@ -120,7 +120,7 @@ class itfModal extends Vue {
       this.$el.parentNode.removeChild(this.$el);
       document.body.appendChild(this.$el); // should append only to body
     }
-    const { default: Modal } = await import('bootstrap/js/src/modal.js');
+    const { default: Modal } = await import('bootstrap/js/src/modal');
     this.modalEl = new Modal(this.$el, { backdrop: 'static' });
     this.onVisibleChanged(this.value);
     this.bindEvents();

package/src/components/pagination/Pagination.vue

@@ -27,7 +27,6 @@
 </template>
 <style lang="scss">
 @import '../../assets/scss/variables';
-@import '~bootstrap/scss/pagination';
 
 .itf-pagination.pagination {
   padding-left: 0;

package/src/components/pdf-viewer/pdfjs-dist/cmaps/CNS2-V.bcmap

@@ -1,3 +1,3 @@
-�RCopyright 1990-2009 Adobe Systems Incorporated.
+�RCopyright 1990-2009 Adobe Systems Incorporated.
 All rights reserved.
-See ./LICENSE�CNS2-H
+See ./LICENSE�CNS2-H

package/src/components/pdf-viewer/pdfjs-dist/cmaps/ETenms-B5-H.bcmap

@@ -1,3 +1,3 @@
-�RCopyright 1990-2009 Adobe Systems Incorporated.
+�RCopyright 1990-2009 Adobe Systems Incorporated.
 All rights reserved.
-See ./LICENSE�	ETen-B5-H`
 ^

+See ./LICENSE�	ETen-B5-H`
 ^

package/src/components/pdf-viewer/styles/_colors.scss

@@ -35,8 +35,8 @@
   --pdf-button-hover-bg-color: #{mix($primary, $body-bg, 50%)};
 }
 
-@media (prefers-color-scheme: notdark) {
-  .pdf-app {
+@media (prefers-color-scheme: dark) {
+  .support-dark .pdf-app {
     --pdf-app-background-color: #{$pdf-app-background-color-light};
     --pdf-sidebar-content-color: #{$pdf-sidebar-content-color-light};
     --pdf-toolbar-sidebar-color: #{$pdf-toolbar-sidebar-color-light};

package/src/components/popover/Popover.vue

@@ -11,8 +11,6 @@
 </template>
 <style lang="scss">
 @import '../../assets/scss/variables';
-@import '~bootstrap/scss/popover';
-@import '~bootstrap/scss/transitions';
 
 .itf-popover {
   display: none;
@@ -47,7 +45,9 @@
 }
 </style>
 <script>
-import { Vue, Component, Prop, Watch, PropSync, Inject } from 'vue-property-decorator';
+import {
+  Vue, Component, Prop, Watch, PropSync,
+} from 'vue-property-decorator';
 
 let globalModalIndex = 0; // base modal z-index
 
@@ -58,14 +58,18 @@ export default @Component({
 })
 class itfPopover extends Vue {
   @PropSync('visible') value;
+
   @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
+
   @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
+
   @Prop({ type: String, default: '' }) customClass;
 
   modalId = '';
+
   modalEl = null;
 
-  beforeDestroy () {
+  beforeDestroy() {
     this.hide();
   }
 
@@ -91,7 +95,7 @@ class itfPopover extends Vue {
       return;
     }
     const el = this.$refs.popover;
-    const { default: Popover } = await import('bootstrap/js/src/popover.js');
+    const { default: Popover } = await import('bootstrap/js/src/popover');
 
     const context = this.$el.closest('.itf-append-context') || document.body;
     this.modalEl = new Popover(this.$el, {

package/src/components/select/Dropdown.vue

@@ -55,7 +55,7 @@ export default @Component({
   name: 'itfDropdown',
   components: {}
 })
-class itfSegmentedControl extends Vue {
+class itfDropdown extends Vue {
   @Prop({ type: Number, default: undefined }) dropdownWidth;
   @Prop({ type: [Array, String, Number], default: undefined }) value;
   @Prop({ type: Boolean }) isValueEmpty;