@itfin/components 1.5.0 → 1.5.2

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

@@ -1,35 +1,30 @@
 @import '../variables';
 @import '../bootstrap';
 
-$tooltip-color: #22222B;
+$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: #FFF;
+  --itf-tooltip-color: #{$body-color};
   --itf-tooltip-bg-color: #{$tooltip-color};
-  --itf-tooltip-font-size: 14px;
 }
 
 [data-theme="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};
-  --itf-tooltip-font-size: 14px;
+  --itf-tooltip-font-size: 0.875rem;
 }
 
 .tippy-box[data-theme~=itfin] {
   color: var(--itf-tooltip-color);
   background-color: var(--itf-tooltip-bg-color);
   font-size: var(--itf-tooltip-font-size);
-  border-radius: 0.5rem;
+  border-radius: 5px;
   box-shadow: var(--itf-tooltip-shadow);
-  padding: .25rem .5rem;
+  padding: 5px;
   cursor: default;
-  a {
-    color: var(--itf-tooltip-color);
-    text-decoration: underline;
-  }
 
   &[data-placement^=top] > .tippy-arrow:before {
     border-top-color: var(--itf-tooltip-bg-color);

package/src/assets/scss/main.scss

@@ -60,51 +60,3 @@ kbd {
     color: var(--bs-primary-color) !important
   }
 }
-
-// згідно з дизайном
-.dropdown-header {
-  font-size: .75rem;
-  padding: .75rem .5rem .25rem;
-
-  &:first-child {
-    padding-top: .25rem;
-  }
-}
-//.dropdown-item {
-//  --bs-dropdown-link-active-bg: #F1F2F4;
-//  --bs-dropdown-link-active-color: var(--bs-body-color);
-//  &:not(:last-child) {
-//    margin-bottom: 1px;
-//  }
-//
-//  svg {
-//    color: #8E97A5;
-//  }
-//  &:hover svg {
-//    color: var(--bs-body-color);
-//  }
-//}
-body .form-check-input:checked[type=checkbox] {
-  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L3.5 6.5L1 4' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  box-shadow: 0px 2px 3px 0px #00000026;
-}
-body .form-check-input:indeterminate[type=checkbox] {
-  box-shadow: 0px 2px 3px 0px #00000026;
-}
-body .text-muted {
-  color: #7A818E !important;
-}
-body .form-control {
-  &:focus {
-    box-shadow: none !important;
-  }
-}
-
-@keyframes pulse-shadow {
-  0% { box-shadow: 0 0 0 0 rgba(26, 74, 151, 0) }
-  50% { box-shadow: 0 0 0 4px rgba(26, 74, 151, 0.15) }
-  100% { box-shadow: 0 0 0 0 rgba(26, 74, 151, 0) }
-}
-.pulsing {
-  animation: pulse-shadow 3s ease-in-out infinite;
-}

package/src/components/alert/AlertBanner.vue

@@ -1,16 +1,19 @@
 <template>
-  <div class="itf-alert-banner">
+  <div class="itf-alert-banner" :class="styleVariant">
     <div v-if="count" class="itf-alert-banner__counter px-2 bg-danger text-white fw-bold text-smaller text-decoration-none d-block rounded-pill">
       {{ count > 99 ? '99+' : count }}
     </div>
-    <div v-if="multiple" class="itf-alert-banner__panel itf-alert-banner__multiple rounded-3 border bg-muted-2"></div>
-    <div class="itf-alert-banner__panel px-3 rounded-3 border bg-muted-2 d-flex gap-3 align-items-start align-items-sm-center flex-sm-row flex-column">
+    <div v-if="$listeners.close" class="itf-alert-banner__close position-absolute text-muted cursor-pointer" @click="$emit('close')">
+      <itf-icon new name="close-alt" :size="20" />
+    </div>
+    <div v-if="multiple" class="itf-alert-banner__panel itf-alert-banner__multiple h-100 position-absolute rounded-3 border bg-muted-2"></div>
+    <div class="itf-alert-banner__panel h-100 rounded-3 border bg-muted-2 d-flex gap-2 gap-md-3 align-items-start align-items-md-center">
       <slot name="icon">
         <div v-if="icon" class="itf-alert-banner__icon rounded-2 bg-danger flex-shrink-0 d-flex align-items-center justify-content-center">
           <itf-icon new :name="icon" :size="24" class="text-white" />
         </div>
       </slot>
-      <div class="flex-grow-1">
+      <div class="itf-alert-banner__content flex-grow-1 d-flex flex-column">
         <div class="fw-bold"><slot name="title">{{title}}</slot></div>
         <div class="small text-muted"><slot></slot></div>
       </div>
@@ -24,33 +27,85 @@
   max-width: 420px;
 
   &__counter {
-    top: 0;
-    right: -4px;
+    top: -12px;
+    right: -12px;
     position: absolute;
-    z-index: 3;
-    padding-top: 0.375rem;
-    padding-bottom: 0.375rem;
-    min-width: 1.75rem;
+    z-index: 4;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    min-width: 24px;
     text-align: center;
+    @media (max-width: 768px) {
+      right: 0;
+    }
+  }
+  &__close {
+    top: 8px;
+    right: 8px;
+    z-index: 3;
+    @media (max-width: 768px) {
+      top: 12px;
+      right: 12px;
+    }
   }
   &__panel {
     position: relative;
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
-    top: 4px;
+    padding-left: 1rem;
+    padding-right: 1rem;
     z-index: 2;
+    @media (max-width: 768px) {
+      flex-direction: column;
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+    }
   }
   &__icon {
     width: 48px;
     height: 48px;
+    @media (max-width: 768px) {
+      width: 32px;
+      height: 32px;
+    }
+
+    ::v-deep .itf-icon {
+
+      svg {
+        @media (max-width: 768px) {
+          width: 16px!important;
+          height: 16px!important;
+        }
+      }
+    }
+  }
+  &__content {
+    @media (max-width: 768px) {
+      gap: 0.25rem;
+    }
   }
   &__multiple {
-    position: absolute;
-    top: 0;
+    top: -4px;
     right: -4px;
     z-index: 1;
-    height: 100%;
     width: 100%;
+    @media (max-width: 768px) {
+      width: calc(100% - 8px);
+      right: 4px;
+    }
+  }
+
+  &.mobile-content-row {
+
+    @media (max-width: 768px) {
+      .itf-alert-banner__panel {
+        flex-direction: row;
+        padding-right: 2.5rem;
+      }
+      .itf-alert-banner__content {
+        gap: 0;
+      }
+    }
   }
 }
 </style>
@@ -71,5 +126,6 @@ class AlertBanner extends Vue {
   @Prop(String) icon;
   @Prop() count;
   @Prop(Boolean) multiple;
+  @Prop({ type: String, default: '' }) styleVariant;
 }
 </script>

package/src/components/card/BentoGrid.vue

@@ -1,6 +1,7 @@
 <template>
   <grid-layout
     :layout="layout"
+    :responsive-layouts="responsiveLayouts"
     @update:layout="onUpdateLayout"
     class="itf-bento-grid"
     :col-num="4"
@@ -56,6 +57,7 @@ export default @Component({
 })
 class itfBentoGrid extends Vue {
   @Prop() layout;
+  @Prop() responsiveLayouts;
   @Prop() components;
   @Prop({ type: Boolean, default: true }) enabled;
 

package/src/components/checkbox/NestedCheckboxGroup.vue

@@ -0,0 +1,109 @@
+<template>
+
+  <div>
+    <div v-for="(item, n) in items" :key="n">
+      <slot name="item" :item="item" :isChecked="isChecked(item)" :onToggle="(isChecked) => onToggleOption(item, isChecked)" :isDisabled="disabled || isDisabled(item)">
+        <itf-checkbox
+          :value="isChecked(item)"
+          :label="item.name"
+          :disabled="disabled || isDisabled(item)"
+          @input="onToggleOption(item, $event)"
+        >
+          {{ item[itemKey] || item }}
+        </itf-checkbox>
+      </slot>
+
+      <div v-if="item[childrenKey] && item[childrenKey].length" class="ps-4 mb-2">
+        <itf-nested-checkbox-group
+          :value="value"
+          @input="$emit('input', $event)"
+          :items="item[childrenKey]"
+          :disabled="disabled || isDisabled(item)"
+          :item-key="itemKey"
+          :children-key="childrenKey"
+          :max="max"
+          :disabled-ids="disabledIds"
+        >
+          <template v-for="(_, name) in $slots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData || {}"/>
+          </template>
+          <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData || {}"/>
+          </template>
+        </itf-nested-checkbox-group>
+      </div>
+    </div>
+
+    <slot />
+  </div>
+
+</template>
+<script>
+  import { Vue, Component, Prop, Model } from 'vue-property-decorator';
+  import itfCheckbox from './Checkbox';
+  import itfTableRows from '@itfin/components/src/components/table/TableRows.vue';
+
+  export default @Component({
+    name: 'itfNestedCheckboxGroup',
+    components: {
+      itfTableRows,
+      itfCheckbox
+    },
+  })
+  class itfNestedCheckboxGroup extends Vue {
+    @Model('input', { type: Array, default: () => [] }) value;
+
+    @Prop(Array) items;
+    @Prop(Boolean) disabled;
+    @Prop({ type: Array, default: () => [] }) disabledIds;
+
+    @Prop({ type: String }) itemKey;
+    @Prop({ type: String, default: 'children' }) childrenKey;
+
+    @Prop(Number) max;
+
+    onToggleOption(value, isChecked) {
+      const arr = this.value ? [ ...this.value ] : [];
+      if (value[this.childrenKey] && value[this.childrenKey].length) {
+        for (const child of value[this.childrenKey]) {
+          const index = arr.findIndex(item => this.itemKey ? item[this.itemKey] === child[this.itemKey] : item === child);
+          if (index !== -1 && isChecked === false) {
+            arr.splice(index, 1);
+          } else if (isChecked === true) {
+            arr.push(child);
+          }
+        }
+        this.$emit('input', arr);
+        return;
+      }
+      const index = this.getCheckedIndex(value);
+      if (index !== -1 && isChecked === false) {
+        arr.splice(index, 1);
+      } else if (isChecked === true) {
+        arr.push(value);
+      }
+      this.$emit('input', arr);
+    }
+
+    getCheckedIndex(value) {
+      if (this.itemKey) {
+        return this.value && this.value.findIndex(item => item[this.itemKey] === value[this.itemKey]);
+      }
+      return this.value.indexOf(value);
+    }
+
+    isChecked(value) {
+      if (value[this.childrenKey] && value[this.childrenKey].length) {
+        return value[this.childrenKey].every(child => this.isChecked(child)) || this.getCheckedIndex(value) !== -1;
+      }
+      return this.getCheckedIndex(value) !== -1;
+    }
+
+    isDisabled(value) {
+      if (this.disabledIds.includes(value)) {
+        return true;
+      }
+      return this.getCheckedIndex(value) === -1 && (this.max !== 'undefined' && this.value.length >= this.max);
+    }
+  }
+</script>