@itfin/components 1.3.65 → 1.3.66

package/package.json

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

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

@@ -14,12 +14,13 @@ $dark-tooltip-color: #7b52eb;
   --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: 0.875rem;
 }
 
 .tippy-box[data-theme~=itfin] {
   color: var(--itf-tooltip-color);
   background-color: var(--itf-tooltip-bg-color);
-  font-size: 12px;
+  font-size: var(--itf-tooltip-font-size);
   border-radius: 5px;
   box-shadow: var(--itf-tooltip-shadow);
   padding: 5px;

package/src/components/panels/Panel.vue

@@ -140,6 +140,7 @@ class Panel extends Vue {
   @Prop(Boolean) collapsed;
   @Prop(Boolean) closeable;
   @Prop(Boolean) expandable;
+  @Prop(Boolean) animate;
 
   expandPanel() {
     this.$emit('expand');

package/src/components/panels/PanelList.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="b-panel-list-container">
-    <div class="b-panel-list">
+    <transition-group
+      name="slide"
+      tag="div"
+      class="b-panel-list"
+      @before-enter="addAnimateClass"
+      @before-leave="beforeLeave"
+    >
       <template v-for="(panel, n) of panelsStack">
         <panel
           :key="n"
@@ -10,6 +16,7 @@
           :expandable="panelsStack.length > 1"
           :collapsed="panel.isCollapsed"
           :closeable="panel.isCloseable"
+          :animate="panel.isAnimate"
           @expand="expandPanel(panel)"
           @fullsize="fullsizePanel(panel)"
           @close="closePanel(panel)"
@@ -66,10 +73,10 @@
           </template>
         </panel>
       </template>
-    </div>
+    </transition-group>
   </div>
 </template>
-<style>
+<style lang="scss">
 .b-panel-list-container {
   width: 100%;
   height: 100%;
@@ -88,6 +95,45 @@
   right: 0;
   top: 0;
 }
+
+$an-time: .1s;
+$double-an-time: $an-time * 2;
+
+.animate.slide-enter-active {
+  min-width: 0 !important;
+  /* подвоюємо час, для коректної швидкості анімації, у випадку якщо max-width застосовуємо тільки на половину */
+  animation: $double-an-time linear slidein forwards;
+}
+.animate.slide-leave-active {
+  min-width: 0 !important;
+  /* подвоюємо час, для коректної швидкості анімації, у випадку якщо max-width застосовуємо тільки на половину */
+  animation: $double-an-time linear slidein reverse;
+}
+
+@keyframes slidein {
+  0% {
+    max-width: 0;
+  }
+  100% {
+    max-width: 100%;
+  }
+}
+
+.b-panel {
+  transition: min-width $an-time linear, flex-grow $an-time linear;
+
+  > div {
+    transition: opacity $an-time linear;
+  }
+}
+
+.slide-enter-active > div {
+  opacity: 0;
+}
+
+.opacity-null > div {
+  opacity: 0 !important;
+}
 </style>
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
@@ -137,6 +183,7 @@ export default class PanelList extends Vue {
 
   nextId:number = 0;
 
+
   created() {
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
@@ -211,13 +258,16 @@ export default class PanelList extends Vue {
       newPanel.isCloseable = false;
     }
     let newStack = [...this.panelsStack];
+    let isAnimation = true;
     if (openIndex) {
+      isAnimation = newStack.length === openIndex;
       newStack = newStack.slice(0, openIndex);
     }
     this.panelsStack = newStack;
     return new Promise(res => {
       this.$nextTick(() => { // щоб панелі змінювались при редагуванні
         const n = newStack.length;
+        newPanel.isAnimate = isAnimation;
         newPanel.emit = (event, ...args) => this.emitEvent(event, ...args);
         newPanel.open = (type, payload) => this.openPanel(type, payload, n + 1);
         newPanel.close = () => this.closePanel(newPanel);
@@ -332,5 +382,16 @@ export default class PanelList extends Vue {
       this.panelsStack = this.panelsStack.slice(0, 1);
     }
   }
+
+  beforeLeave (element) {
+    element.classList.add('opacity-null');
+    this.addAnimateClass(element);
+  }
+
+  addAnimateClass(element) {
+    if (element.__vue__.$options.propsData.animate) {
+      element.classList.add('animate');
+    }
+  }
 }
 </script>

package/src/components/table/Table2.vue

@@ -1,6 +1,11 @@
 <template>
 
-  <div class="itf-table2 scrollable scrollable-x" :class="{'table-striped': striped, 'table-absolute': absolute, 'permanent-checkboxes': selectedIds.length}" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px` }">
+  <div class="itf-table2 scrollable scrollable-x" :class="{
+    'table-striped': striped,
+    'table-absolute': absolute,
+    'table-clickable': clickable,
+    'permanent-checkboxes': selectedIds.length
+  }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px` }">
     <itf-checkbox-group v-model="selectedIds">
       <template v-for="(group, index) in groups">
         <div class="table-view-body">
@@ -103,6 +108,7 @@ class itfTable2 extends Vue {
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
   @Prop(Boolean) absolute;
+  @Prop(Boolean) clickable;
 
   state = {
     selectedIds: [],

package/src/components/table/table2.scss

@@ -57,6 +57,11 @@ body[data-theme="dark"] {
       --itf-table2-row-bg: var(--itf-table-alt-bg);
     }
   }
+  &.table-clickable {
+    .table-view-item {
+      cursor: pointer;
+    }
+  }
 
   &__header {
     background-color: var(--itf-table-header-bg);