@itfin/components 1.2.11 → 1.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.11",
+  "version": "1.2.14",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/app/ToastMessage.vue

@@ -7,7 +7,8 @@
       </template>
       <strong class="me-auto" @click="collapsed = !collapsed">
         <slot name="title">
-          {{ title }}
+          <span v-if="supportHtml" v-html="title"></span>
+          <span v-else>{{ title }}</span>
         </slot>
       </strong>
 <!--        <small>11 mins ago</small>-->

package/src/components/avatar/Avatar.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="itf-avatar">
-    <svg role="none" :style="{ height: `${size}px`, width: `${size}px` }"
+    <div v-if="icon" class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2">
+      <slot></slot>
+    </div>
+    <svg v-else role="none" :style="{ height: `${size}px`, width: `${size}px` }"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
       <mask :id="`itemphotomask${_uid}`">
@@ -15,7 +18,7 @@
                v-bind="{'xlink:href': src}"></image>
         <text  v-else dominant-baseline="central"
                :x="halfSize" :y="halfSize" :font-size="size / 2"
-              font-weight="bold" text-anchor="middle">{{ letters }}</text>
+               font-weight="bold" text-anchor="middle">{{ letters }}</text>
         <circle class="shadow" :cx="halfSize" :cy="halfSize" :r="halfSize"></circle>
       </g>
     </svg>
@@ -49,6 +52,18 @@
     border-radius: 50%;
     background-color: var(--positive);
   }
+
+  .feature-icon {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 0.5rem;
+    overflow: hidden;
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
 }
 </style>
 <script>
@@ -66,6 +81,8 @@ class itfAvatar extends Vue {
 
   @Prop({ type: Boolean }) statusBadge;
 
+  @Prop({ type: Boolean }) icon;
+
   isImageLoaded = false;
 
   mounted() {

package/src/components/datepicker/DatePickerInline.vue

@@ -33,7 +33,7 @@
     display: inline-block !important;
   }
 
-  @media (prefers-color-scheme: notdark) {
+  [data-theme="dark"] & {
     .btn-outline-primary {
       &.active {
         color: $dark-body-bg;

package/src/components/datepicker/DateRangePicker.vue

@@ -99,7 +99,7 @@
   .form-control.focused, .form-control.focused input.form-control {
     background-color: $input-focus-border-color;
   }
-  @media (prefers-color-scheme: notdark) {
+  [data-theme="dark"] & {
     &__dropdown {
       box-shadow: 0 0 0 2px $dark-input-focus-border;
     }

package/src/components/datepicker/DateRangePickerInline.vue

@@ -29,7 +29,7 @@
 .itf-datepicker-inline {
   display: inline-flex;
 
-  @media (prefers-color-scheme: notdark) {
+  [data-theme="dark"] & {
     .btn-outline-primary {
       &.active {
         color: $dark-body-bg;

package/src/components/datepicker/MonthPicker.vue

@@ -57,7 +57,7 @@
       box-shadow: $input-btn-focus-box-shadow;
     }
 
-    @media (prefers-color-scheme: notdark) {
+    [data-theme="dark"] & {
       background-color: $dark-body-bg;
       border-color: $dark-border-color;
       box-shadow: 0 0 0 2px $dark-input-focus-border;

package/src/components/datepicker/PeriodPicker.vue

@@ -157,7 +157,7 @@
       box-shadow: $input-btn-focus-box-shadow;
     }
 
-    @media (prefers-color-scheme: notdark) {
+    [data-theme="dark"] & {
       background-color: $dark-body-bg;
       border-color: $dark-border-color;
       box-shadow: 0 0 0 2px $dark-input-focus-border;

package/src/components/overlay/SensitiveOverlay.vue

@@ -61,7 +61,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(255, 255, 255);
+    background-color: rgb(255, 255, 255);
     transition: opacity .25s;
 
     @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
@@ -71,6 +71,15 @@
     }
   }
 }
+[data-theme="dark"] {
+  .itf-sensitive-overlay__cover {
+    background-color: rgb(46, 49, 54);
+
+    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+      background-color: rgba(46, 49, 54, 0.5);
+    }
+  }
+}
 </style>
 <script>
 import { Vue, Prop, Component } from 'vue-property-decorator';

package/src/components/pdf-viewer/PdfViewerSpa.vue

@@ -1336,7 +1336,7 @@ html {
   }
 }
 
-@media (prefers-color-scheme: notdark) {
+@media (prefers-color-scheme: dark) {
   html {
     content: "dark";
   }

package/src/components/popover/Popover.vue

@@ -26,7 +26,7 @@
   display: inline-block;
 }
 
-@media (prefers-color-scheme: notdark) {
+[data-theme="dark"] {
   .itf-popover {
     .border-right {
       border-color: $dark-border-color;

package/src/components/select/AirSelect.vue

@@ -245,6 +245,7 @@ class itfAirSelect extends Vue {
 </script>
 
 <style lang="scss" scoped>
+@import '../../assets/scss/variables';
 .select {
   position: relative;
   border-radius: 4px;
@@ -325,6 +326,11 @@ class itfAirSelect extends Vue {
     margin-right: 2px;
   }
 }
+
+[data-theme="dark"] .select.normal {
+  border-color: $dark-input-focus-border-color;
+  background: $dark-input-focus-border-color;
+}
 .select.normal {
   width: 100%;
   padding-left: 0.5rem;

package/src/components/select/Dropdown.vue

@@ -140,7 +140,6 @@ class itfDropdown extends Vue {
     const optionLabelToCreate = $active.getAttribute(
       'data-create-option-label',
     );
-    console.info($active, optionValueToSelect);
     if (optionValueToSelect) {
       this.selectOptionValue(optionValueToSelect);
     } else if (optionLabelToCreate) {
@@ -218,6 +217,7 @@ class itfDropdown extends Vue {
 </script>
 
 <style scoped lang="scss">
+@import '../../assets/scss/variables';
 .dropdown {
   z-index: 101;
   position: absolute;
@@ -230,6 +230,16 @@ class itfDropdown extends Vue {
   width: 100%;
 }
 
+[data-theme="dark"] .dropdown {
+  background: $dark-input-focus-border-color;
+
+  .option {
+    &.select-option-is-active {
+      background: $dark-border-color;
+    }
+  }
+}
+
 .dropdownInput {
   padding: 10px 14px 8px;
   width: 100%;

package/src/helpers/validators.js

@@ -8,7 +8,7 @@ const LINKED_IN_REGEXP = /(http(s)?:\/\/)?([\w]+\.)?linkedin\.com\/(pub|in|profi
 const SPECIAL_CHARS_REGEXP = /^[\w_\-+~,/\\:'"().&*|[\]?# ]+$/i;
 const GREETINGS_REGEXP = /\b(dr|mr|mister|mrs|ms|miss|sir|hello|hi)\b/i;
 const PHONE_REGEXP = /(\+?\(?\+?[0-9]{1,3}\)?[-. ]+([0-9]{2,4})[-. ]?([0-9]{3,5}))|\+?[0-9]{7,}/gi;
-const DOUBLE_REGEXP = /^-?\d{0,11}(\.\d{0,2}){0,1}$/;
+const DOUBLE_REGEXP = /^-?\d{0,11}(\.\d{0,4}){0,1}$/;
 const EMAIL_REGEXP = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;
 const EMAIL_LIST_REGEXP = /^(\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]{2,4}\s*?,?\s*?)+$/g;
 const HEX_REGEXP = /[0-9A-Fa-f]{6}/;