@itfin/components 1.2.97 → 1.2.99

package/src/components/sortable/event.js

@@ -0,0 +1,57 @@
+const CANCELED = Symbol("canceled");
+
+export
+class CancelableEvent {
+  static type = "event";
+
+  static cancelable = false;
+
+  constructor(f) {
+    this[CANCELED] = false,
+      this.data = f
+  }
+
+  get type() {
+    return this.constructor.type
+  }
+
+  get cancelable() {
+    return this.constructor.cancelable
+  }
+
+  cancel() {
+    this[CANCELED] = true
+  }
+
+  canceled() {
+    return !!this[CANCELED]
+  }
+
+  clone(f) {
+    return new this.constructor({
+      ...this.data,
+      ...f
+    })
+  }
+}
+
+export default
+class DraggableEvent extends CancelableEvent {
+  static type = "vue:drag:move";
+
+  get sourceComponent() {
+    return this.data.sourceComponent
+  }
+
+  get group() {
+    return this.data.group
+  }
+
+  get item() {
+    return this.data.item
+  }
+
+  get draggablePayload() {
+    return this.data.draggablePayload
+  }
+}

package/src/components/table/Sortable._js

@@ -0,0 +1,288 @@
+import Vue from 'vue';
+import { Draggable } from './draggable'
+import DraggableEvent from './event'
+
+
+Vue.directive("sortable-item", {
+  inserted(el, { value }) {
+    el.sortableItemPayload = value?.payload;
+    el.classList.add(draggableNode.options.draggableClass);
+    el.getAttribute("with-handle") && el.classList.add(draggableNode.options.dragHandleClass);
+    value?.mirror && (el.dataset.draggableMirror = JSON.stringify(value.mirror));
+  },
+  update(el, {value}) {
+    el.sortableItemPayload = value?.payload;
+    el.classList.add(draggableNode.options.draggableClass);
+    el.getAttribute("with-handle") && el.classList.add(draggableNode.options.dragHandleClass);
+    value?.mirror && (el.dataset.draggableMirror = JSON.stringify(value.mirror))
+  }
+});
+
+
+const SORT_TAG = "sort";
+function someFunc({ source, over, overContainer, children }) {
+  const isDelete = !children.length
+    , isInContainer = source.parentNode !== overContainer
+    , Q = over && !isInContainer;
+  if (isDelete) {
+    return moveToContainer(source, overContainer)
+  }
+  return Q ? $(source, over) : isInContainer ? insertBefore(source, over, overContainer) : null
+}
+
+function moveToContainer(el, newContainer) {
+  const oldContainer = el.parentNode;
+  newContainer.appendChild(el);
+  return {
+    oldContainer,
+    newContainer
+  };
+}
+function $(el, container) {
+  console.info('$')
+  const tt = indexOf(el)
+    , ot = indexOf(container);
+  if (tt < ot) {
+    el.parentNode.insertBefore(el, container.nextElementSibling);
+  } else {
+    el.parentNode.insertBefore(el, container);
+  }
+  return {
+    oldContainer: el.parentNode,
+    newContainer: el.parentNode
+  };
+}
+function indexOf(A) {
+  return Array.prototype.indexOf.call(A.parentNode.children, A)
+}
+function insertBefore(A, H, tt) {
+  console.info('insertBefore')
+  const ot = A.parentNode;
+  return H ? H.parentNode.insertBefore(A, H) : tt.appendChild(A),
+    {
+      oldContainer: ot,
+      newContainer: A.parentNode
+    }
+}
+function c(A, H, tt) {
+  const ot = [...A.slice(0, H), ...A.slice(H + 1, A.length)];
+  return [...ot.slice(0, tt), A[H], ...ot.slice(tt, ot.length)]
+}
+
+export
+const Sortable = {
+  name: 'Sortable',
+  render: function() {
+    return this._self._c(this.tag, {
+      ref: "sortable",
+      tag: "component"
+    }, [this._t("default", null, {
+      items: this.value
+    })], 2)
+  },
+  props: {
+    value: {
+      default: ()=>[],
+      type: Array
+    },
+    group: {
+      type: String,
+      default: "defaultGroup"
+    },
+    tag: {
+      type: String,
+      default: "div"
+    }
+  },
+  mounted() {
+    Draggable.addContainer(this.$refs.sortable);
+    this.$refs.sortable.dataset.group = this.group;
+    this.handler = event=>{
+      const H = [...this.value];
+      H.splice(event.detail.newIndex, 0, event.detail.item),
+        this.$emit("input", H),
+        this.$emit("receive", {
+          ...event.detail,
+          newItems: H
+        })
+    };
+
+    this.$refs.sortable.addEventListener(SORT_TAG, this.handler);
+    Draggable.on("drag:start", this.onDragStart);
+  },
+  beforeDestroy() {
+    this.$refs.sortable.removeEventListener(SORT_TAG, this.handler)
+  },
+  destroyed() {
+    Draggable.removeContainer(this.$refs.sortable),
+      Draggable.off("drag:start", this.onDragStart),
+      this.destroyMirror()
+  },
+  methods: {
+    stopListening() {
+      Draggable
+        .off("drag:move", this.dragMove)
+        .off("drag:over:container", this.onDragOverContainer)
+        .off("drag:out:container", this.onDragOutContainer)
+        .off("drag:over", this.onDragOver)
+        .off("drag:stop", this.onDragStop)
+        .off("mirror:created", this.createMirror)
+        .off("mirror:destroy", this.destroyMirror);
+      this.destroyMirror();
+    },
+    createMirror(el) {
+      console.info(el, this.dragging)
+      if (this.dragging && this.$scopedSlots.mirror) {
+        const H = this.$scopedSlots.mirror({
+          item: this.source.item
+        });
+        const tt = Vue.ZP.extend({
+          parent: this,
+          render() {
+            return H
+          }
+        });
+        const Y = new tt().$mount();
+        this.mirrorComponent = Y;
+        el.mirror.innerHTML = "";
+        el.mirror.appendChild(Y.$el);
+      }
+    },
+    destroyMirror() {
+      if (this.mirrorComponent) {
+        this.mirrorComponent.$destroy();
+        this.mirrorComponent = null;
+      }
+    },
+    getDraggableElementsForContainer(el) {
+      return [...el.children].filter(item => item !== Draggable.originalSource && item !== Draggable.mirror)
+    },
+    index(el) {
+      return this.getDraggableElementsForContainer(el.parentNode).indexOf(el)
+    },
+    onDragStart(event) {
+      if (event.originalEvent.target.tagName === "INPUT") {
+        event.cancel();
+        return
+      }
+      if (event.sourceContainer !== this.$refs.sortable) {
+        return;
+      }
+      Draggable
+        .on("drag:move", this.dragMove)
+        .on("drag:over:container", this.onDragOverContainer)
+        .on("drag:out:container", this.onDragOutContainer)
+        .on("drag:over", this.onDragOver)
+        .on("drag:stop", this.onDragStop)
+        .on("mirror:created", this.createMirror)
+        .on("mirror:destroy", this.destroyMirror);
+      const oldIndex = this.index(event.source);
+      this.$emit("start");
+      this.oldIndex = oldIndex;
+      this.source = {
+        oldIndex,
+        item: this.value[oldIndex]
+      };
+    },
+    dragMove(el) {
+      Draggable.trigger(new DraggableEvent({
+        ...el.data,
+        sourceComponent: this.$refs.sortable,
+        group: this.group,
+        draggablePayload: {
+          item: this.value[this.oldIndex],
+          ...el.originalSource.sortableItemPayload
+        }
+      }))
+    },
+    onDragOverContainer(event) {
+      const {source, over, overContainer} = event;
+      if (overContainer.dataset.group !== this.group) {
+        return;
+      }
+      const children = this.getDraggableElementsForContainer(overContainer);
+      this.destinationContainer = overContainer;
+
+      console.info('onDragOverContainer', overContainer, children)
+      someFunc({
+        source,
+        over,
+        overContainer,
+        children
+      });
+    },
+    onDragOutContainer(el) {
+      this.destinationContainer = null;
+      const overContainer = this.$refs.sortable
+        , children = this.getDraggableElementsForContainer(overContainer)
+        , over = children[this.source.oldIndex];
+      someFunc({
+        source: el.source,
+        over,
+        overContainer,
+        children
+      })
+    },
+    onDragOver(A) {
+      const { source, over, overContainer } = A;
+      if (overContainer.dataset.group !== this.group || over === A.originalSource || over === source) {
+        return;
+      }
+      const Y = this.getDraggableElementsForContainer(overContainer);
+      if (Y.includes(over)) {
+        someFunc({
+          source: source,
+          over: over,
+          overContainer: overContainer,
+          children: Y
+        });
+      }
+    },
+    onDragStop(item) {
+      this.stopListening();
+      if (!this.destinationContainer || this.destinationContainer.dataset.group !== this.group) {
+        return;
+      }
+      const { source } = this;
+      source.newIndex = this.index(item.source);
+      source.sortableItemPayload = { ...item.originalSource.sortableItemPayload };
+      console.info(item.source, item.originalSource)
+      item.originalSource.parentNode.insertBefore(item.source, item.originalSource);
+      if (item.sourceContainer === this.destinationContainer) {
+        this.onSortItems(source);
+      } else {
+        this.onRemoveItem(source);
+        this.onReceiveItem(source, this.destinationContainer);
+      }
+      this.$emit("stop");
+    },
+    onSortItems(item) {
+      if (item.oldIndex === item.newIndex) {
+        return;
+      }
+      const newItems = c(this.value, item.oldIndex, item.newIndex);
+      this.$emit("input", newItems);
+      this.$emit("move", {
+        newItems,
+        ...item
+      });
+    },
+    onReceiveItem(el, H) {
+      H.dispatchEvent(new CustomEvent(SORT_TAG,{
+        detail: {
+          item: el.item,
+          newIndex: el.newIndex,
+          oldIndex: el.oldIndex,
+          sortableItemPayload: el.sortableItemPayload
+        }
+      }))
+    },
+    onRemoveItem(el) {
+      const H = this.value.filter(tt=>tt !== el.item);
+      this.$emit("input", H)
+    }
+  }
+};
+
+
+Vue.component("Sortable", Sortable)

package/src/components/table/Table2.vue

@@ -1,40 +1,78 @@
 <template>
 
   <div class="scrollable scrollable-x big-scrollbar">
-    <itf-table-group
-      :columns="columns"
-      :rows="rows"
-      :add-new-rows="addNewRows"
-    >
-      <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-table-group>
+    <template v-for="(group, index) in groups">
+      <div class="table-view-body">
+        <itf-table-group
+          :key="index"
+          :style="`--table-row-height: ${rowHeight}px`"
+          :columns="columns"
+          @update:columns="onColumnsUpdate"
+          :rows="group.rows"
+          :title="group.name"
+          :add-new-rows="addNewRows"
+          :column-sorting="columnSorting"
+          :column-resizing="columnResizing"
+          :show-grouping="showGrouping"
+          :show-summary="showSummary"
+          :show-add-column="showAddColumn"
+          :row-height="rowHeight"
+          :show-header="index === 0"
+          @add-column="$emit('add-column', $event)"
+        >
+          <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-table-group>
+      </div>
+    </template>
   </div>
 
 </template>
 <style lang="scss">
-//.scrollable {
-//  -webkit-overflow-scrolling: touch;
-//  overflow: hidden auto;
-//
-//  &.scrollable-x {
-//    overflow-x: auto;
-//  }
-//}
+.scrollable {
+  --itf-table-hover-bg: #f2f2f2;
+  --table-min-width: 45px;
+
+  body[data-theme="dark"] & {
+    --itf-table-hover-bg: #393b41;
+  }
+
+  -webkit-overflow-scrolling: touch;
+  //overflow: hidden auto;
+  //
+  //&.scrollable-x {
+  //  overflow-x: auto;
+  //}
+}
+.last-sticky-column:after {
+  content: '';
+  background: linear-gradient(to right,#dfe0e2,rgba(255,0,0,0));
+  height: 100%;
+  width: 6px;
+  position: absolute;
+  bottom: 0;
+  right: -7px;
+
+  body[data-theme="dark"] & {
+    background: linear-gradient(to right, #707070,rgba(255,0,0,0));
+  }
+}
 </style>
 <script>
 import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableGroup from './TableGroup.vue';
+import itfTableHeader from './TableHeader.vue';
 
 export default @Component({
   name: 'itfTable2',
   components: {
+    itfTableHeader,
     itfButton,
     itfIcon,
     itfTableGroup
@@ -43,6 +81,33 @@ export default @Component({
 class itfTable2 extends Vue {
   @Prop({ required: true, type: Array }) columns;
   @Prop({ required: true, type: Array }) rows;
+  @Prop({ type: Number, default: 40 }) rowHeight;
+  @Prop({ type: String, default: null }) groupBy;
   @Prop(Boolean) addNewRows;
+  @Prop(Boolean) columnSorting;
+  @Prop(Boolean) columnResizing;
+  @Prop(Boolean) showAddColumn;
+  @Prop(Boolean) showGrouping;
+  @Prop(Boolean) showSummary;
+
+  get groups() {
+    const { groupBy, rows } = this;
+    if (!groupBy) {
+      return [];
+    }
+    const groups = rows.reduce((acc, row) => {
+      const group = row[groupBy];
+      if (!acc[group]) {
+        acc[group] = [];
+      }
+      acc[group].push(row);
+      return acc;
+    }, {});
+    return Object.entries(groups).map(([name, rows]) => ({ name, rows }));
+  }
+
+  onColumnsUpdate(columns) {
+    this.$emit('update:columns', columns);
+  }
 }
 </script>

package/src/components/table/TableBody.vue

@@ -4,7 +4,7 @@
     class="scroller"
     page-mode
     :items="rows"
-    :item-size="36"
+    :item-size="rowHeight"
     key-field="Id"
     v-slot="{ item }"
     direction="vertical"
@@ -22,7 +22,7 @@
             </a>
           </div>
         </div>
-        <div class="indicator sticky tw-border-gray dark:tw-border-gray-invert tw-border-r tw-bg-white dark:tw-bg-white-invert tw-border-b ">
+        <div class="indicator sticky">
           <div class="fill on-rest table-view-row-count">
             <span>{{ item.Id }}</span>
           </div>
@@ -37,17 +37,23 @@
             </div>
           </div>
         </div>
-        <div accept-group="items" class="hbox table-item-inner">
-          <div v-for="(column, n) in columns" :data-column="n" :style="`width: ${column.width}px`" class="table-view-item-value d-flex position-relative h-100 align-items-stretch px-2">
-            <slot :name="`column.${column.name}`" :item="item" :column="column">
-              <template v-if="editTypes[column.Type]">
-                <property-inline-edit :value="item[column.field]" :field="column" editable focused />
-              </template>
-              <div v-else v-text="item.Name" />
-            </slot>
-          </div>
-
-          <div class="table-view-item-value extra"></div>
+        <div accept-group="items" class="table-item-inner">
+          <template v-for="(column, n) in visibleAttributes">
+            <div
+              v-if="column.visible !== false"
+              :data-column="n"
+              :style="`width: ${column.width}px; left: ${column.left}px;`"
+              :class="{'sticky': column.pinned, 'last-sticky-column': n === lastPinnedIndex}"
+              class="table-view-item-value d-flex h-100 align-items-stretch px-2">
+              <slot :name="`column.${column.name}`" :item="item" :column="column">
+                <template v-if="editTypes[column.Type]">
+                  <property-inline-edit :value="item[column.field]" :field="column" editable focused />
+                </template>
+                <div v-else v-text="item.Name" />
+              </slot>
+            </div>
+          </template>
+          <div v-if="showAddColumn" class="table-view-item-value extra bg-light"></div>
           <div class="boundary top"></div>
           <div class="boundary right"></div>
           <div class="boundary bottom"></div>
@@ -63,7 +69,6 @@
   height: 100%;
   align-items: stretch;
 }
-
 .table-item-inner {
   height: 100%;
   flex-grow: 1;
@@ -74,24 +79,49 @@
 
 .table-view-item-value {
   text-overflow: ellipsis;
-  background-color: rgb(255 255 255 / 1);
-  border-right: 1px solid rgb(238 238 238 / 1);
-  border-bottom: 1px solid rgb(238 238 238 / 1);
+  background-color: var(--bs-body-bg);
+  border-right: 1px solid var(--bs-border-color);
+  border-bottom: 1px solid var(--bs-border-color);
   align-items: stretch;
   height: 100%;
   display: flex;
   position: relative;
   line-height: 35px;
-
+  min-width: var(--table-min-width);
+
+  &.highlight-drop-column {
+    position: relative;
+
+    &:after {
+      content: "";
+      height: 100%;
+      z-index: 100;
+      width: 2px;
+      background: #47beff;
+      margin-left: -1px;
+      position: absolute;
+      left: 0;
+    }
+    &.right:after {
+      left: auto;
+      right: 0;
+    }
+  }
   &:hover {
-    background-color: rgb(250 251 252 / 1);
+    background-color: var(--itf-table-hover-bg);
+  }
+
+  &.sticky {
+    z-index: 4;
+    position: -webkit-sticky;
+    position: sticky;
   }
 }
 
 .table-item-inner .extra {
   height: 100%;
   flex-grow: 1;
-  border-color: rgb(238 238 238 / 1);
+  border-color: var(--bs-border-color);
 }
 
 .indicator {
@@ -101,12 +131,13 @@
   z-index: 4;
   position: -webkit-sticky;
   position: sticky;
-  background-color: rgb(255 255 255 / 1);
-  border-right: 1px solid rgb(238 238 238 / 1);
-  border-bottom: 1px solid rgb(238 238 238 / 1);
+  background-color: var(--bs-body-bg);
+  border-right: 1px solid var(--bs-border-color);
+  border-bottom: 1px solid var(--bs-border-color);
   display: flex;
   align-items: center;
   justify-content: center;
+  min-width: var(--table-min-width);
 }
 
 .table-item-inner .boundary {
@@ -141,7 +172,7 @@
   bottom: 0;
 }
 .table-small-row .table-view-item {
-  height: 36px;
+  height: var(--table-row-height);
 }
 .vue-recycle-scroller {
   position: relative;
@@ -164,8 +195,9 @@
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import { RecycleScroller } from 'vue-virtual-scroller'
+import sortBy from 'lodash/sortBy';
 import PropertyInlineEdit from '../customize/PropertyInlineEdit.vue';
-import { INLINE_TYPES } from '@/components/customize/constants';
+import { INLINE_TYPES } from '../customize/constants';
 
 export default @Component({
   name: 'itfTableBody',
@@ -177,9 +209,19 @@ export default @Component({
 class itfTableBody extends Vue {
   @Prop() columns;
   @Prop() rows;
+  @Prop(Boolean) showAddColumn;
+  @Prop({ type: Number, default: 40 }) rowHeight;
 
   editTypes = {};
 
+  get visibleAttributes() {
+    return this.columns;
+  }
+
+  get lastPinnedIndex() {
+    return this.columns.findIndex((column) => column.lastPinned);
+  }
+
   mounted() {
     for (const { Type } of INLINE_TYPES) {
       this.editTypes[Type] = true;