@itfin/components 2.0.14 → 2.0.16

package/package.json

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

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

@@ -151,6 +151,10 @@
     &.active, &:hover, &.show {
       border: 1px solid #1A4A974D;
       color: #1A4A97;
+
+      .itf-icon {
+        color: #1A4A97;
+      }
     }
   }
 }

package/src/assets/scss/main.scss

@@ -91,8 +91,8 @@ body .form-check-input:checked[type=checkbox] {
 body .form-check-input:indeterminate[type=checkbox] {
   box-shadow: 0px 2px 3px 0px #00000026;
 }
-.text-muted {
-  color: #666770;
+body .text-muted {
+  color: #7A818E !important;
 }
 body .form-control {
   &:focus {

package/src/components/filter/FilterBadge.vue

@@ -1,5 +1,5 @@
 <template>
-  <itf-dropdown text ref="dropdown" autoclose="outside" shadow class="h-100">
+  <itf-dropdown text ref="dropdown" autoclose="outside" shadow class="h-100" append-to-context>
     <template #button>
       <div class="filter-pill rounded" :class="{'filter-not-default-pill': !isDefault && !isInvalid, 'filter-invalid-pill': isInvalid}">
         <div class="filter-pill__label" :class="{'filter-pill__not-default-value': !isDefault && !isInvalid, 'filter-pill__default-value': isDefault, 'filter-pill__label-invalid': isInvalid}">

package/src/components/filter/FilterPanel.vue

@@ -24,7 +24,7 @@
         <slot name="after-filter-btn"></slot>
       </div>
     </div>
-    <div v-if="showFilters" class="d-flex gap-2 flex-nowrap">
+    <div v-if="showFilters" class="d-flex gap-2 flex-nowrap filters-row">
       <filter-badge
         v-for="(facet, n) in visibleFilters"
         :key="n"
@@ -61,6 +61,15 @@
       color: #8E97A5;
     }
   }
+
+  .filters-row {
+    @media (max-width: 768px) {
+      overflow: auto;
+      width: 100%;
+      padding: 2px;
+      margin: -2px;
+    }
+  }
 }
 </style>
 <script>

package/src/components/modal/DeleteConfirmModal.vue

@@ -15,8 +15,8 @@
       <div slot="content" class="modal-content rounded-3 shadow itf-append-context">
         <div class="modal-body p-4 text-center">
           <slot>
-            <h5 class="mb-0">{{$t('components.popover.confirmDelete')}}</h5>
-            <p class="mb-0">{{$t('components.popover.areYouSureToDeleteThis')}}</p>
+            <h5 class="mb-0">{{ title }}</h5>
+            <p class="mb-0">{{ message }}</p>
           </slot>
         </div>
         <div class="modal-footer flex-nowrap p-0">
@@ -26,7 +26,7 @@
             data-bs-dismiss="modal"
             @click="$emit('cancel')"
           >
-            <span v-html="$t('components.popover.noKeepIt')"></span>
+            <span v-html="cancelCaption"></span>
           </button>
           <button
             type="button"
@@ -34,7 +34,7 @@
             :class="confirmClass"
             @click="onConfirm"
           >
-            <span v-html="$t('components.popover.yesDelete')"></span>
+            <span v-html="deleteCaption"></span>
           </button>
         </div>
       </div>
@@ -59,8 +59,10 @@ class itfDeleteConfirmModal extends Vue {
   @Prop(Boolean) loading;
   @Prop({ type: Boolean, default: false }) disabled;
   @Prop({ type: String, default: 'text-danger' }) confirmClass;
-  @Prop({ type: String, default () { return this.$t('noKeepIt'); } }) cancelCaption;
-  @Prop({ type: String, default () { return this.$t('yesDelete'); } }) deleteCaption;
+  @Prop({ type: String, default () { return this.$t('components.popover.noKeepIt'); } }) cancelCaption;
+  @Prop({ type: String, default () { return this.$t('components.popover.yesDelete'); } }) deleteCaption;
+  @Prop({ type: String, default () { return this.$t('components.popover.confirmDelete'); } }) title;
+  @Prop({ type: String, default () { return this.$t('components.popover.areYouSureToDeleteThis'); } }) message;
 
   isModalShown = false;
 

package/src/components/panels/Panel.vue

@@ -12,12 +12,12 @@
     </div>
     <div v-if="!nocard" v-show="!collapsed" class="b-panel-header px-3 pt-3 pb-2">
       <slot name="header">
-        <div class="d-flex gap-3 align-items-center">
+        <div class="d-flex gap-3 align-items-center text-truncate">
           <itf-button v-if="closeable" icon default class="d-md-none" @click="closePanel">
             <itf-icon name="chevron_left" />
           </itf-button>
           <slot name="title">
-            <div class="b-panel__title fw-bold mb-0 h2" v-text="title"></div>
+            <div class="b-panel__title fw-bold mb-0 h2 text-truncate" v-text="title"></div>
           </slot>
         </div>
         <div class="d-flex gap-1">

package/src/components/segmented-control/SegmentedControl.vue

@@ -4,14 +4,14 @@
       <span v-if="!isUndefined" ref="slider" class="selection" :class="{'elevation-1': !disabled}"></span>
 
       <div class="option" v-for="(item, n) in itemsWithNames" :key="n">
-        <label>
+        <label v-tooltip="tooltipCallback(item)" :key="n">
           <slot name="itemMarkup" :item="item" />
           <input
             ref="input"
             type="radio"
             :name="name"
             :value="n"
-            v-tooltip="tooltipCallback(item)"
+            :disabled="disabled"
             :checked="isChecked(item)"
             @change="onItemChanged(item)" />
           <span>
@@ -24,6 +24,7 @@
       <itf-select
         :value="value"
         @input="$emit('input', $event)"
+        :disabled="disabled"
         :options="itemsWithNames"
         :reduce="(item) => item[itemKey]"
         :get-option-label="(item) => item[itemText]"
@@ -127,6 +128,9 @@ class itfSegmentedControl extends Vue {
   }
 
   onItemChanged (item) {
+    if (this.disabled) {
+      return;
+    }
     this.$emit('input', this.returnObject ? item : item[this.itemKey]);
   }
 }

package/src/components/table/table2.scss

@@ -103,10 +103,19 @@ body[data-theme="dark"] {
     padding-left: 5px;
     display: flex;
     align-items: center;
+
+    @media (max-width: 768px) {
+      position: relative;
+      opacity: 1;
+    }
   }
   .on-hover {
     opacity: 0;
     pointer-events: none;
+
+    @media (max-width: 768px) {
+      opacity: 1;
+    }
   }
   .table-row-template:hover .on-hover {
     opacity: 1;

package/src/components/text-field/MoneyField.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="itf-money-field ph-no-capture" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
-    <div :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
+    <div class="h-100" :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
       <span class="itf-money-field__prepend" v-if="!noCurrencySign">{{ selectedCurrencySymbol }}</span>
       <i-mask-component
         ref="input"

package/src/components/icon/components/nomi-export.vue

@@ -1,4 +0,0 @@
-<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4 5V8C11.4 8.88366 12.1163 9.6 13 9.6H16V15.7372L15.8527 15.5899C15.2279 14.9651 14.2148 14.9651 13.59 15.5899C12.9651 16.2148 12.9651 17.2278 13.59 17.8527L14.7373 19H7C6.44772 19 6 18.5523 6 18V6C6 5.44772 6.44772 5 7 5H11.4ZM12.6 5.6V8C12.6 8.22091 12.7791 8.4 13 8.4H15.4L12.6 5.6ZM18.1456 20.1456C18.0881 20.2031 18.0218 20.2465 17.951 20.2758C17.8803 20.3051 17.8027 20.3213 17.7213 20.3213C17.6401 20.323 17.4416 20.2901 17.2971 20.1456L14.2971 17.1456C14.0627 16.9113 14.0627 16.5314 14.2971 16.297C14.5314 16.0627 14.9113 16.0627 15.1456 16.297L17.1213 18.2728V13.7213C17.1213 13.3899 17.39 13.1213 17.7213 13.1213C18.0527 13.1213 18.3213 13.3899 18.3213 13.7213V18.2728L20.2971 16.297C20.5314 16.0627 20.9113 16.0627 21.1456 16.297C21.3799 16.5314 21.3799 16.9113 21.1456 17.1456L18.1456 20.1456Z" fill="currentColor"/>
-</svg>
-</template>

package/src/components/icon/components/nomi-lock.vue

@@ -1,4 +0,0 @@
-<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.3999C13.9882 4.3999 15.6 6.01168 15.6 7.9999V10.0489C16.033 10.1018 16.3329 10.2114 16.5607 10.4392C17 10.8786 17 11.5857 17 12.9999V14.9999C17 16.4141 17 17.1212 16.5607 17.5606C16.1213 17.9999 15.4142 17.9999 14 17.9999H10C8.58579 17.9999 7.87868 17.9999 7.43934 17.5606C7 17.1212 7 16.4141 7 14.9999V12.9999C7 11.5857 7 10.8786 7.43934 10.4392C7.66715 10.2114 7.96695 10.1018 8.4 10.0489L8.4 7.9999C8.4 6.01168 10.0118 4.3999 12 4.3999ZM14.4 7.9999V10.0003C14.2733 9.99991 14.1401 9.99991 14 9.99991H10C9.85987 9.99991 9.72668 9.99991 9.6 10.0003L9.6 7.9999C9.6 6.67442 10.6745 5.5999 12 5.5999C13.3255 5.5999 14.4 6.67442 14.4 7.9999ZM12.6 12.9999C12.6 12.6685 12.3314 12.3999 12 12.3999C11.6686 12.3999 11.4 12.6685 11.4 12.9999V14.9999C11.4 15.3313 11.6686 15.5999 12 15.5999C12.3314 15.5999 12.6 15.3313 12.6 14.9999V12.9999Z" fill="currentColor"/>
-</svg>
-</template>