@itfin/components 1.3.93 → 1.3.95

package/package.json

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

package/src/components/popover/NoticePopout.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="notice p-2" ref="notice">
+    <slot></slot>
+  </div>
+</template>
+<style scoped lang="scss">
+.notice {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  max-width: 740px;
+  z-index: 10;
+  opacity: 0;
+  transition: all 0.3s ease;
+  transform: translateX(-50%) translateY(100%) translateZ(0px);
+  background: var(--bs-body-bg);
+  box-shadow: 0 2px 10px 0 hsl(0 calc(1 * 0%) 0% /.1);
+  overflow: hidden;
+  border-radius: 5px;
+  pointer-events: none;
+
+  &.show {
+    opacity: 1;
+    pointer-events: all;
+    transform: translate3d(-50%, 0%, 0px);
+  }
+}
+</style>
+<script>
+import { Vue, Prop, Watch, Component } from 'vue-property-decorator';
+
+export default @Component({
+  components: {
+  }
+})
+class NoticePopout extends Vue {
+  @Prop(Boolean) visible;
+
+  @Watch('visible')
+  toggle(show = true) {
+    if (show) {
+      this.$refs.notice.classList.add('show');
+    } else {
+      this.$refs.notice.classList.remove('show');
+    }
+  }
+}
+</script>

package/src/components/table/Table2.vue

@@ -1,11 +1,20 @@
 <template>
 
-  <div class="itf-table2 scrollable scrollable-x" :class="{
+  <div class="itf-table2" :class="{
     'table-striped': striped,
     'table-absolute': absolute,
     'table-clickable': clickable,
     'permanent-checkboxes': selectedIds.length
   }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px` }">
+    <itf-notice-popout :visible="showGroupOperations" class="rounded-pill bg-dark text-light">
+      <div class="d-flex gap-3 px-3 align-items-center">
+        <div><strong>{{selectedIds.length}}</strong> selected</div>
+        <div>
+          <slot name="group-operations"></slot>
+        </div>
+      </div>
+    </itf-notice-popout>
+    <div class="scrollable scrollable-x">
     <itf-checkbox-group v-model="selectedIds">
       <template v-for="(group, index) in groups">
         <div class="table-view-body">
@@ -58,6 +67,7 @@
         </div>
       </template>
     </itf-checkbox-group>
+    </div>
   </div>
 
 </template>
@@ -68,6 +78,7 @@ import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableGroup from './TableGroup.vue';
 import itfTableHeader from './TableHeader.vue';
+import itfNoticePopout from '../popover/NoticePopout.vue';
 import './table2.scss';
 
 export default @Component({
@@ -80,7 +91,8 @@ export default @Component({
     itfTableHeader,
     itfButton,
     itfIcon,
-    itfTableGroup
+    itfTableGroup,
+    itfNoticePopout
   }
 })
 class itfTable2 extends Vue {
@@ -123,6 +135,10 @@ class itfTable2 extends Vue {
     columns: []
   };
 
+  get showGroupOperations() {
+    return !!this.$slots['group-operations'] && this.selectedIds.length > 0;
+  }
+
   getTableState() {
     const list = this.schema?.properties || [];
     let state = this.stateName ? JSON.parse(localStorage.getItem(this.stateKey) || 'null') : null;
@@ -163,6 +179,7 @@ class itfTable2 extends Vue {
   }
 
   mounted() {
+    console.info(this.$scopedSlots)
     this.onSchemaUpdate();
   }
 

package/src/components/table/TableBody.vue

@@ -114,6 +114,7 @@
     }
 
     .on-hover {
+      opacity: 1;
       display: block;
     }
   }

package/src/components/table/TableGroup.vue

@@ -38,6 +38,7 @@
             :column-sorting="columnSorting"
             :show-add-column="showAddColumn"
             :show-actions="showActions"
+            :id-property="idProperty"
             :rows="rows"
             :schema="schema"
             :editable="editable"

package/src/components/table/TableHeader.vue

@@ -174,6 +174,7 @@ class itfTableHeader extends Vue {
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
+  @Prop() idProperty;
   @Prop() indicatorType;
 
   @Watch('selectedIds')
@@ -211,7 +212,7 @@ class itfTableHeader extends Vue {
 
   set selectAll(val) {
     if (val) {
-      this.$emit('update:selectedIds', this.rows.map(r => r.Id));
+      this.$emit('update:selectedIds', this.rows.map(r => r[this.idProperty]));
     } else {
       this.$emit('update:selectedIds', []);
     }

package/src/components/table/TableRows.vue

@@ -21,7 +21,7 @@
             </div>
           </div>
           <div v-if="indicatorType !== 'none'" class="indicator sticky">
-            <div class="fill table-view-row-count" :class="{'on-rest': !noSelectAll}">
+            <div class="fill table-view-row-count" :class="{'on-rest': indicatorType !== 'checkbox'}">
               <span v-if="indicatorType === 'order'">{{ (n + 1) }}</span>
               <span v-else-if="indicatorType === 'property'">{{ item[idProperty] }}</span>
               <a href="" @click.prevent.stop="$emit('toggle', item)" v-else-if="indicatorType === 'toggle'">
@@ -41,7 +41,7 @@
                 </template>
               </a>
             </div>
-            <div v-if="!noSelectAll" class="fill on-hover">
+            <div class="fill" :class="{'on-hover': indicatorType !== 'checkbox'}">
               <itf-checkbox :value="item[idProperty]" />
             </div>
           </div>

package/src/components/table/table2.scss

@@ -42,11 +42,12 @@ body[data-theme="dark"] {
 .itf-table2 {
   font-size: var(--itf-table-font-size);
 
-  &.scrollable {
+  .scrollable {
     -webkit-overflow-scrolling: touch;
     overflow: hidden scroll;
+    height: 100%;
   }
-  &.scrollable-x {
+  .scrollable-x {
     overflow-x: scroll;
     padding-right: 4px;
   }
@@ -365,4 +366,19 @@ body[data-theme="dark"] {
       bottom: 0;
     }
   }
+
+  .table-group-operations {
+    background: red;
+    position: absolute;
+    bottom: 1rem;
+    left: 1rem;
+    right: 1rem;
+    height: 2rem;
+    transform: rotateX(90deg);
+    transition: transform 0.3s;
+
+    &.visible {
+      transform: rotateX(0deg);
+    }
+  }
 }