@itfin/components 1.2.98 → 1.2.100

package/package.json

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

package/src/assets/scss/_dark-theme.scss

@@ -44,6 +44,9 @@ body[data-theme="dark"] {
     &:hover, &:active, &:focus {
       color: $dark-body-color;
     }
+    &.btn-secondary {
+      //color: #000;
+    }
   }
   .modal-backdrop {
     background-color: #000;

package/src/assets/scss/_variables.scss

@@ -57,7 +57,7 @@ $popover-border-width: 2px;
 // dropdown
 
 // Dark theme
-$dark-body-bg: #2e3136;
+$dark-body-bg: #232529;// #2e3136;
 $dark-border-color: #4a4a4a;
 $dark-body-color: #ddd;
 $dark-input-bg: #383b41;

package/src/components/app/ToastContainer.vue

@@ -2,7 +2,7 @@
   <transition name="itf-toast-fade" mode="in-out">
     <div
       v-show="show"
-      class="itf-toast-wrapper"
+      class="itf-toast-wrapper d-print-none"
       :style="{ width }"
       :class="wrapperClassName"
     >

package/src/components/app/ToastMessage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-toast-message toast" :class="{'show': visible, [typeClass]: true}" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="itf-toast-message toast d-print-none" :class="{'show': visible, [typeClass]: true}" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header" v-if="title || $slots.title" :class="{[typeClass]: true}">
       <template v-if="iconImg || $slots.icon">
         <img v-if="iconImg" :src="iconImg" class="rounded me-2" />

package/src/components/editable/EditButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="itf-editable-button">
+    <slot></slot>
+    <itf-button secondary icon small class="itf-editable-button__button" @click="$emit('click')">
+      <itf-icon name="pen" />
+    </itf-button>
+  </div>
+</template>
+<style lang="scss" scoped>
+.itf-editable-button {
+  position: relative;
+
+  &__button {
+    position: absolute !important;
+    right: 0;
+    top: 0;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+  &:hover &__button {
+    transition: opacity 0.2s ease-in-out;
+    opacity: 1;
+  }
+}
+</style>
+<script>
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfButton,
+  }
+})
+class EditButton extends Vue {
+}
+</script>

package/src/components/kanban/Board.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="itf-board">
+
+    <div ref="container" class="itf-board-titles">
+      <div v-for="(column, index) of columns"
+           :data-column="index"
+           @mouseover="columnHighlight(index, 'enter')"
+           @mouseout="columnHighlight(index, 'leave')"
+           :key="index" class="itf-board-column itf-board-column__title p-2">
+        <div accept-group="board-columns"
+             class="itf-board-header-space"
+             @enter="columnHighlight(index, 'enter', 'drop')"
+             @leave="columnHighlight(index, 'leave', 'drop')"
+             v-dropzone="{ payload: { index, column } }">
+          <div class="itf-board-header-dropzone"></div>
+        </div>
+        <itf-edit-button
+          accept-group="board-columns"
+          @enter="columnHighlight(index, 'enter')"
+          @leave="columnHighlight(index, 'leave')"
+          v-dropzone="{ payload: { index, column } }"
+          class="d-flex align-items-center">
+          <div
+            group="board-columns"
+            @drop="reorderColumns"
+            v-draggable="{ handle: true, payload: { index, column }, mirror: { yAxis:false } }"
+            class="flex-grow-1 d-flex align-items-center itf-board-column__header justify-content-between">
+              <div><slot name="header" :column="column">{{ column[columnNameKey] }}</slot></div>
+              <div class="text-muted me-1"><slot name="header-addon" :column="column">{{ (groupedItems[column.Id] || []).length }}</slot></div>
+          </div>
+        </itf-edit-button>
+        <div v-if="index === columns.length - 1"
+             @enter="columnHighlightLast('enter', 'drop')"
+             @leave="columnHighlightLast('leave', 'drop')"
+             accept-group="board-columns"
+             class="itf-board-header-space right"
+             v-dropzone="{ payload:{ last: true } }">
+          <div class="itf-board-header-dropzone"></div>
+        </div>
+      </div>
+      <div class="align-items-end d-flex pb-1">
+        <slot name="add-column">
+          <itf-button icon small>
+            <itf-icon name="plus" />
+          </itf-button>
+        </slot>
+      </div>
+    </div>
+
+    <div class="itf-board-columns flex-grow-1">
+      <div v-for="(column, index) of columns"
+           :key="`column-${index}`"
+           :data-column="index"
+           class="itf-board-column px-2 pb-2 pt-2" :class="{'empty': !groupedItems[column.Id]}">
+        <slot name="column" :column="column" :index="index" :items="groupedItems[column.Id] || []"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import './styles.scss';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+import loading from '../../directives/loading';
+import itfForm from '../form/Form';
+import itfEditButton from '../editable/EditButton.vue';
+import createDraggable from '../sortable/draggable';
+
+const { Node, ...draggableDirectives } = createDraggable();
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfEditButton,
+    itfForm,
+    itfButton
+  },
+  directives: {
+    ...draggableDirectives,
+    loading
+  },
+  provide() {
+    return { board: this }; // do not use Provide from vue-property-decorator
+  }
+})
+class Board extends Vue {
+  @Prop(Array) columns;
+  @Prop(Array) items;
+  @Prop(Array) columnOrders;
+  @Prop({ type: Function, default: (item) => item.Status?.Id }) groupFunc;
+  @Prop({ type: Function, default: (item, value) => { item.Status = value; } }) updateFunc;
+  @Prop({ type: String, default: 'Name' }) columnNameKey;
+  @Prop(Boolean) columnSorting;
+
+  beforeDestroy() {
+    if (this.columnSorting) {
+      Node.removeContainer(this.$refs.container);
+    }
+  }
+
+  mounted() {
+    if (this.columnSorting) {
+      Node.addContainer(this.$refs.container);
+    }
+  }
+
+  get groupedItems() {
+    const grouped = {};
+    for (const column of this.columns) {
+      grouped[column.Id] = this.orderItemsInColumn(column);
+    }
+    return grouped;
+  }
+
+  orderItemsInColumn(column) {
+    const columnOrdering = this.columnOrders.find((c) => c.Id === column.Id) || { ItemIds: [] };
+    let items = this.items.filter((item) => column.Id === this.groupFunc(item));
+    items = items.sort((a, b) => {
+      const aIndex = columnOrdering.ItemIds.findIndex((c) => c === a.Id);
+      const bIndex = columnOrdering.ItemIds.findIndex((c) => c === b.Id);
+      if (aIndex === -1 && bIndex === -1) {
+        return 0;
+      }
+      if (aIndex === -1) {
+        return 1;
+      }
+      if (bIndex === -1) {
+        return -1;
+      }
+      return aIndex - bIndex;
+    });
+    return items;
+  }
+
+  columnHighlight(index, state, className = 'over') {
+    Array.from(this.$el.querySelectorAll(`[data-column="${index}"]`)).forEach(t=>{
+      state === 'enter' ? t.classList.add(className) : t.classList.remove(className)
+    });
+  }
+  columnHighlightLast(state, className = 'over') {
+    Array.from(this.$el.querySelectorAll(`[data-column="${this.columns.length - 1}"]`)).forEach(t=>{
+      if (state === "enter") {
+        t.classList.add(className);
+        t.classList.add('right');
+      } else {
+        t.classList.remove(className);
+        t.classList.remove('right');
+      }
+    });
+  }
+
+  reorderColumns({ detail }) {
+    const { index: fromIndex } = detail.draggablePayload;
+    const { index: toIndex, last } = detail.dropzonePayload;
+    const newValue = [...this.columns];
+    const [removed] = newValue.splice(fromIndex, 1);
+
+    if (last) {
+      newValue.push(removed);
+    } else {
+      newValue.splice((fromIndex < toIndex) ? toIndex - 1 : toIndex, 0, removed);
+    }
+    this.$emit('update:columns', newValue);
+    if (last) {
+      this.columnHighlightLast('leave');
+      this.columnHighlightLast('leave', 'drop');
+    } else {
+      this.columnHighlight(toIndex, 'leave');
+      this.columnHighlight(toIndex, 'leave', 'drop');
+    }
+    // for (const dropdown of this.$refs.dropdown) {
+    //   dropdown.hide();
+    // }
+  }
+
+  reorderCards({ detail }) {
+    const { item, column: fromColumn } = detail.draggablePayload;
+    const { index: toIndex, last, column } = detail.dropzonePayload;
+
+    const items = [...this.items];
+    const itemIndex = items.findIndex(t => t === item);
+
+    const newItem = { ...items[itemIndex] };
+    this.updateFunc(newItem, column);
+
+    items[itemIndex] = newItem;
+
+    const newOrders = [...this.columnOrders];
+
+    let sorting = newOrders.find((c) => c.Id === column.Id);
+    if (!sorting) {
+      sorting = { Id: column.Id, ItemIds: [] };
+      newOrders.push(sorting)
+    }
+    let fromSorting = newOrders.find((c) => c.Id === fromColumn.Id);
+    if (!fromSorting) {
+      fromSorting = { Id: fromColumn.Id, ItemIds: [] };
+      newOrders.push(fromSorting)
+    }
+    // update from
+    fromSorting.ItemIds = this.groupedItems[fromColumn.Id].map((i) => i.Id).filter((t) => t !== newItem.Id);
+
+    // update to
+    const columnItems = [...this.groupedItems[column.Id]];
+    let placeIndex = last ? columnItems.length : toIndex;
+    if (typeof placeIndex === 'undefined') { // ідекса може не бути, якщо на колонку переносять, тоді в кінець
+      placeIndex = columnItems.length;
+    }
+    const itemsInColumn = columnItems.map((t) => t.Id).filter((t) => t !== newItem.Id);
+    itemsInColumn.splice(placeIndex, 0, newItem.Id);
+
+    sorting.ItemIds = itemsInColumn;
+
+    this.$emit('update:item', [item, column]);
+    this.$emit('update:items', items);
+
+    this.$emit('update:columnOrders', newOrders);
+  }
+}
+</script>

package/src/components/kanban/BoardCard.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="itf-board-card shadow-sm">
+    <slot name="header"></slot>
+
+    <div class="itf-board-card-inner d-flex">
+      <div class="flex-grow-1">
+        <slot>{{text}}</slot>
+      </div>
+      <div>
+        <itf-button icon small>
+          <itf-icon name="menu_horizontal" />
+        </itf-button>
+      </div>
+    </div>
+
+    <slot name="footer"></slot>
+  </div>
+</template>
+<script>
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+import loading from '../../directives/loading';
+import itfForm from '../form/Form';
+import itfEditButton from '../editable/EditButton';
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfForm,
+    itfEditButton,
+    itfButton
+  },
+  directives: {
+    loading
+  }
+})
+class BoardColumn extends Vue {
+  @Prop() text;
+}
+</script>

package/src/components/kanban/BoardCardTimer.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="itf-board-card-timer px-1 py-1">
+    <div class="d-flex justify-content-between">
+      <div class="d-flex align-items-center ps-2">
+        <itf-icon name="clock" :size="16" class="me-1" />
+        <slot>{{text}}</slot>
+      </div>
+      <div>
+        <itf-button icon small>
+          <itf-icon name="pause" />
+        </itf-button>
+      </div>
+    </div>
+  </div>
+</template>
+<style>
+.itf-board-card-timer {
+  background: var(--bs-primary);
+  color: #fff;
+
+  .btn {
+    color: #fff;
+  }
+}
+</style>
+<script>
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button.vue';
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfButton
+  }
+})
+class BoardCardTimer extends Vue {
+  @Prop() text;
+}
+</script>

package/src/components/kanban/BoardColumn.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="itf-board-column-wrapper">
+    <itf-button v-if="showAddButton" block small class="text-muted">
+      <itf-icon name="plus" />
+
+      Add entry
+    </itf-button>
+
+    <div class="itf-board-cards-wrapper" ref="container">
+      <template v-if="!items.length">
+        <slot name="empty"></slot>
+      </template>
+      <template v-else>
+        <div v-for="(item, index) of items" :key="index" :data-card="index">
+          <div accept-group="board-cards"
+               class="itf-board-card-space"
+               @enter="cardHighlight(index, 'enter', 'drop')"
+               @leave="cardHighlight(index, 'leave', 'drop')"
+               v-dropzone="{ payload: { index, item, column } }">
+            <div class="itf-board-header-dropzone"></div>
+          </div>
+          <div group="board-cards"
+               @drop="board.reorderCards"
+               v-draggable="{ handle: true, payload: { index, item, column }, mirror: { xAxis: true, yAxis: true } }">
+            <slot name="item" :item="item" :index="index"></slot>
+          </div>
+        </div>
+      </template>
+      <div @enter="cardHighlightLast('enter', 'drop')"
+           @leave="cardHighlightLast('leave', 'drop')"
+           accept-group="board-cards"
+           class="itf-board-card-space bottom"
+           v-dropzone="{ payload:{ last: true, column } }">
+        <div class="itf-board-header-dropzone"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Component, Prop, Vue, Inject } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+import loading from '../../directives/loading';
+import itfForm from '../form/Form';
+import itfEditButton from '../editable/EditButton';
+import createDraggable from '../sortable/draggable';
+
+const { Node, ...draggableDirectives } = createDraggable({
+  mirror: {
+    yAxis: true,
+    xAxis: true,
+    constrainDimensions: true
+  },
+  scrollable: {
+    speed: 20,
+    sensitivity: 80
+  }
+});
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfForm,
+    itfEditButton,
+    itfButton
+  },
+  directives: {
+    ...draggableDirectives,
+    loading
+  }
+})
+class BoardColumn extends Vue {
+  @Inject({ default: null }) board;
+
+  @Prop() title;
+  @Prop() column;
+  @Prop(Array) items;
+  @Prop(Boolean) showAddButton;
+  @Prop(Boolean) cardSorting;
+
+  beforeDestroy() {
+    if (this.cardSorting) {
+      Node.removeContainer(this.$refs.container);
+    }
+  }
+
+  mounted() {
+    if (this.cardSorting) {
+      Node.addContainer(this.$refs.container);
+    }
+  }
+
+  cardHighlight(index, state, className = 'over') {
+    this.isHaveHighlight = state === 'enter';
+    Array.from(this.$el.querySelectorAll(`[data-card="${index}"]`)).forEach(t=>{
+      state === 'enter' ? t.classList.add(className) : t.classList.remove(className)
+    });
+  }
+  cardHighlightLast(state, className = 'over') {
+    Array.from(this.$el.querySelectorAll(`[data-card="${this.items.length - 1}"]`)).forEach(t=>{
+      if (state === "enter") {
+        t.classList.add(className);
+        t.classList.add('bottom');
+      } else {
+        t.classList.remove(className);
+        t.classList.remove('bottom');
+      }
+    });
+  }
+}
+</script>

package/src/components/kanban/index.stories.js

@@ -0,0 +1,75 @@
+import { storiesOf } from '@storybook/vue';
+import itfApp from '../app/App.vue';
+import itfIcon from '../icon/Icon.vue';
+import itfButton from '../button/Button.vue';
+import itfBoard from './Board.vue';
+import itfBoardColumn from './BoardColumn.vue';
+import itfBoardCard from './BoardCard.vue';
+import itfBoardCardTimer from './BoardCardTimer.vue';
+
+storiesOf('Common', module)
+  .add('Kanban board', () => ({
+    components: {
+      itfIcon,
+      itfBoard,
+      itfBoardColumn,
+      itfBoardCard,
+      itfBoardCardTimer
+    },
+    data() {
+      // document.body.setAttribute('data-theme', 'dark')
+      return {
+        columnOrders: [],
+        columns: [
+          { Id: 1, Name: '➡️ Todo' },
+          { Id: 2, Name: '⚙️ In progress' },
+          { Id: 3, Name: '✅ Done' },
+        ],
+        tasks: [
+          { Id: 1, Name: 'Test', Status: { Id: 1 } },
+          { Id: 2, Name: 'Test 2', Status: { Id: 1 } },
+          { Id: 3, Name: 'Test 3', Status: { Id: 2 } },
+          { Id: 4, Name: 'Test 4', Status: { Id: 3 } },
+        ]
+      }
+    },
+    methods: {
+      onItemUpdate([item, status]) {
+        console.info('onItemUpdate', item, status);
+      }
+    },
+    template: `<div>
+      <p></p>
+
+      <h2>Usage</h2>
+
+      <pre></pre>
+
+      <h3>Example</h3>
+
+      <div style="height: 90vh; display: flex; width: 100%">
+        <itf-board class="flex-grow-1" :columns.sync="columns" :column-orders.sync="columnOrders" :items.sync="tasks" column-sorting @update:item="onItemUpdate">
+          <template #column="{ column, items }">
+            <itf-board-column :column="column" :items="items" card-sorting @update:columns="columns = $event">
+              <template #item="{ item }">
+                <itf-board-card :text="item.Name">
+                  <template #header>
+<!--                    <itf-board-card-timer text="01:20:00"></itf-board-card-timer>-->
+                  </template>
+                  <template #footer>
+                    <!--div class="d-flex p-2">
+                      <div>
+                        <itf-icon name="clock" />
+                        1h 20m
+                      </div>
+                    </div-->
+<!--                    <itf-board-card-timer text="01:20:00"></itf-board-card-timer>-->
+                  </template>
+                </itf-board-card>
+              </template>
+            </itf-board-column>
+          </template>
+        </itf-board>
+      </div>
+    </div>`,
+  }))

package/src/components/kanban/styles.scss

@@ -0,0 +1,269 @@
+:root {
+  --itf-board-column-hover-color: rgba(0, 0, 0, .05);
+  --itf-board-column-width: 300px;
+  --itf-board-placeholder-color: #47BEFF;
+  --itf-board-placeholder-border-color: #0567eb;
+  --itf-board-placeholder-bg-color: #ebeffe;
+  --itf-board-card-bg-color: #fff;
+}
+
+[data-theme="dark"] {
+  --itf-board-column-hover-color: #494646;
+  --itf-board-placeholder-color: #FFCC00;
+  --itf-board-placeholder-border-color: #FFCC00;
+  --itf-board-placeholder-bg-color: #383b41;
+  --itf-board-card-bg-color: #313337;
+
+  .itf-board {
+    --bs-border-color: #424448;
+  }
+}
+
+.itf-board {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+
+  .draggable-mirror {
+    z-index: 100000001;
+    min-width: var(--itf-board-column-width);
+    padding: 1rem;
+    background-color: var(--itf-board-column-hover-color);
+    border-radius: var(--bs-border-radius);
+  }
+
+  .draggable-mirror {
+    opacity: .5;
+  }
+
+  .draggable-source--is-dragging {
+    z-index: 100;
+    position: absolute;
+  }
+
+  .draggable-container--over .itf-board-header-space,
+  .draggable-container--over .itf-board-card-space {
+    display: block;
+  }
+
+  .draggable-container--over .draggable--over .itf-board-header-space,
+  .draggable-container--over .draggable--over .itf-board-card-space, {
+    background: var(--itf-board-placeholder-color);
+  }
+
+  .draggable-container--is-dragging .itf-editable-button .itf-editable-button__button {
+    opacity: 0 !important;
+  }
+
+  .itf-board-header-space {
+    height: 100%;
+    position: absolute;
+    left: 0;
+    display: none;
+    background: transparent;
+    z-index: 100;
+    width: 4px;
+    top: 0;
+    border-radius: 10px;
+    margin-left: -2px;
+
+    &.right {
+      left: auto;
+      right: -2px;
+      top: 0;
+    }
+
+    &.active {
+      display: block;
+
+      &.over {
+        background: var(--itf-board-placeholder-color);
+      }
+    }
+
+    .draggable-container--over & {
+      display: block;
+    }
+
+    .draggable-container--over .draggable--over & {
+      background: var(--itf-board-placeholder-color);
+    }
+
+    .itf-board-header-dropzone {
+      position: absolute;
+      height: 100px;
+      top: 0;
+      right: -50px;
+      bottom: 0;
+      left: -50px;
+    }
+  }
+}
+
+.itf-board-titles,
+.itf-board-columns {
+  display: flex;
+  flex-wrap: nowrap;
+
+  .itf-board-column {
+    position: relative;
+    width: var(--itf-board-column-width);
+    min-width: var(--itf-board-column-width);
+    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
+
+    &__title {
+      cursor: move;
+      border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
+
+      .itf-board-column__header {
+        min-height: 1.5rem;
+      }
+
+      .itf-editable-button__button {
+        top: -3px;
+        right: -3px;
+      }
+    }
+
+    &.over {
+      background-color: var(--itf-board-column-hover-color);
+    }
+
+    &.drop:not(.itf-board-column__title) {
+      &:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        background: var(--itf-board-placeholder-color);
+        z-index: 100;
+        width: 4px;
+        top: -10px;
+        bottom: 0;
+        border-radius: 10px;
+        margin-left: -2px;
+      }
+
+      &.right:after {
+        left: auto;
+        right: -2px;
+      }
+    }
+  }
+}
+
+.itf-board-titles {
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
+.itf-board-columns {
+  max-height: 100%;
+
+  .itf-board-column {
+    display: flex;
+  }
+  .itf-board-card-space {
+    display: none;
+    background: transparent;
+    height: 0px;
+    position: relative;
+
+    &:after {
+      content: '';
+      position: absolute;
+      height: 5px;
+      left: 5px;
+      right: 5px;
+      z-index: 100;
+      border-radius: 10px;
+      top: -8px;
+    }
+
+    .itf-board-header-dropzone {
+      position: relative;
+      right: 0;
+      top: -50px;
+      left: 0;
+      bottom: -50px;
+      height: 100px;
+    }
+    &.bottom {
+      top: auto;
+      position: relative;
+    }
+
+    &.active {
+      display: block;
+
+      &.over:after {
+        background: var(--itf-board-placeholder-color);
+      }
+    }
+
+    .draggable-container--over & {
+      display: block;
+    }
+
+    .draggable-container--over .draggable--over & {
+      background: var(--itf-board-placeholder-color);
+    }
+  }
+}
+
+.itf-board-card {
+  background-color: var(--itf-board-card-bg-color);
+  border-radius: var(--bs-border-radius);
+  border: 1px solid var(--bs-border-color);
+  margin-bottom: .75rem;
+  overflow: hidden;
+  user-select: none;
+
+  .itf-board-card-inner {
+    padding: .5rem;
+    font-size: .875rem;
+    word-wrap: break-word;
+    -webkit-line-clamp: unset;
+    overflow-x: unset;
+    word-break: break-word;
+  }
+}
+
+.itf-board-column-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  flex-grow: 1;
+}
+
+.itf-board-cards-wrapper {
+  overflow: auto;
+  flex-grow: 1;
+  padding-right: .25rem;
+  padding-top: .5rem;
+
+  .draggable-source--is-dragging {
+    position: relative !important;
+    .itf-board-card {
+      background-color: var(--bs-border-color);
+
+      & > div {
+        opacity: 0;
+      }
+    }
+  }
+
+  .draggable-mirror {
+    padding: 0;
+    opacity: .8;
+    background: transparent;
+    min-width: auto;
+    .itf-board-card {
+      transform: rotate(-2deg);
+      border: 2px solid var(--itf-board-placeholder-border-color);
+      background: var(--itf-board-placeholder-bg-color);
+    }
+  }
+
+  & > div {
+    position: relative;
+  }
+}

package/src/components/sortable/draggable.js

@@ -0,0 +1,165 @@
+import { Draggable } from '@shopify/draggable';
+import DraggableEvent from './event';
+
+const DRAGGABLE_CLASS = 'draggable-item'
+const DRAG_HANDLE_CLASS = 'drag-handle'
+const SORTABLE_ATTRIBUTES = ['drag-ignore-handle', 'scrollable'];
+
+const DEFAULT_OPTIONS = {
+  draggableClass: DRAGGABLE_CLASS,
+  dragHandleClass: DRAG_HANDLE_CLASS,
+  delay: 200,
+  tresholdDistance: 2,
+  draggable: `.${DRAGGABLE_CLASS}`,
+  handle: `.${DRAG_HANDLE_CLASS}`,
+  ignoreHandleClassList: SORTABLE_ATTRIBUTES,
+  mirror: {
+    yAxis: false,
+    constrainDimensions: true
+  },
+  scrollable: {
+    speed: 20,
+    sensitivity: 80
+  }
+};
+
+export default
+function createDraggable(options = {}) {
+  const draggableNode = new Draggable([], Object.assign({}, DEFAULT_OPTIONS, options));
+
+  return {
+    Node: draggableNode,
+    dragHandle: {
+      inserted(el) {
+        if (el.getAttribute('drag-disabled') !== "true") {
+          el.classList.add(DRAG_HANDLE_CLASS);
+        } else {
+          el.classList.remove(DRAG_HANDLE_CLASS);
+        }
+      },
+      update(el) {
+        if (el.getAttribute('drag-disabled') !== "true") {
+          el.classList.add(DRAG_HANDLE_CLASS);
+        } else {
+          el.classList.remove(DRAG_HANDLE_CLASS);
+        }
+      }
+    },
+    dropzone: {
+      inserted(el, {value}) {
+        el.over = false;
+        el.dropzonePayload = value.payload;
+        el.dropCondition = value.condition;
+
+        el.dropzoneDragMove = event => {
+          if (el.initialized) {
+            return;
+          }
+          el.initialized = true;
+          if (el.getAttribute("accept-group").split(",").includes(event.group)) {
+            el.classList.add('active');
+            draggableNode.on('drag:move', el.onDragMoveReal);
+            el.event = event
+          }
+        };
+
+        el.onDragMoveReal = event => {
+          const { target } = event.sensorEvent;
+          if (target === el || el.contains(target)) {
+            el.over === false && (!el.dropCondition || el.dropCondition({
+              dropzonePayload: el.dropzonePayload,
+              draggablePayload: el.event.data.draggablePayload
+            })) && (el.dispatchEvent(new Event("enter")), el.classList.add("over"), el.over = !0)
+          } else {
+            el.over === !0 && (el.dispatchEvent(new Event("leave")), el.classList.remove("over"), el.over = !1);
+          }
+        };
+
+        el.onDragStop = (event) => {
+          if (draggableNode.off('drag:move', el.onDragMoveReal),
+            el.classList.remove("active"),
+            el.initialized = false,
+            !el.over) {
+            return;
+          }
+          el.classList.remove("over");
+          el.over = false;
+          const detail = {
+            ...el.event.data,
+            dropzonePayload: el.dropzonePayload,
+            newComponent: el
+          };
+          el.dispatchEvent(new CustomEvent('receive', { detail }));
+          el.event.sourceComponent.dispatchEvent(new CustomEvent('drop', { detail }));
+        };
+
+        draggableNode.on("vue:drag:move", el.dropzoneDragMove).on("drag:stop", el.onDragStop);
+        if (draggableNode.dragging) {
+          el.dropzoneDragMove(draggableNode.lastEvent)
+        }
+      },
+      update(el, {value}) {
+        el.dropzonePayload = value.payload
+      },
+      unbind(el) {
+        draggableNode.off("vue:drag:move", el.dropzoneDragMove).off("drag:stop", el.onDragStop).off("drag:move", el.onDragMoveReal)
+      }
+    },
+    draggable: {
+      inserted(el, {value}) {
+        el.currentDraggablePayload = value?.payload;
+        el.classList.add(draggableNode.options.draggableClass);
+        value?.handle && el.classList.add(draggableNode.options.dragHandleClass);
+        value?.mirror && (el.dataset.draggableMirror = JSON.stringify(value.mirror));
+
+        el.onDragStart = event => {
+          if (draggableNode.options.ignoreHandleClassList.some(M => event.sensorEvent.target.classList.contains(M))) {
+            event.cancel();
+            return
+          }
+          if (el === event.originalEvent.target.closest("." + draggableNode.options.draggableClass)) {
+            if (event.originalEvent.target.tagName === "INPUT") {
+              event.cancel();
+              return
+            }
+            el.draggablePayload = el.currentDraggablePayload;
+            draggableNode.on("drag:move", el.dragMove);
+            draggableNode.on("drag:stop", el.dragStop);
+            el.dispatchEvent(new Event("drag-start"));
+          }
+        };
+
+        el.dragMove = () => {
+          const event = new DraggableEvent({
+            draggablePayload: el.draggablePayload,
+            sourceComponent: el,
+            group: el.getAttribute("group")
+          });
+          draggableNode.trigger(event);
+          draggableNode.lastEvent = event;
+        };
+
+        el.dragStop = () => {
+          draggableNode.off("drag:move", el.dragMove);
+          draggableNode.off("drag:stop", el.dragStop);
+        }
+        draggableNode.on("drag:start", el.onDragStart);
+      },
+      update(el, { value }) {
+        el.classList.add(draggableNode.options.draggableClass);
+        el.currentDraggablePayload = value?.payload;
+        value?.mirror && (el.dataset.draggableMirror = JSON.stringify(value.mirror));
+        if (value?.handle) {
+          el.classList.add(draggableNode.options.dragHandleClass);
+        } else {
+          el.classList.remove(draggableNode.options.dragHandleClass);
+        }
+      },
+      unbind(el) {
+        draggableNode.off("drag:start", el.onDragStart);
+        draggableNode.off("drag:move", el.dragMove);
+        draggableNode.off("drag:stop", el.dragStop);
+      }
+    }
+  };
+}

package/src/components/table/TableGroup.vue

@@ -27,7 +27,7 @@
             <div class="table-row-template d-flex align-items-stretch"
                  style="height: var(--group-title-height)">
               <div class="shadow-area"></div>
-              <div class="header-wrapper" v-drag-handle>
+              <div class="header-wrapper">
                 <div class="header-content position-sticky d-flex align-items-center">
                   <a href="" class="collapse-arrow" @click.prevent="toggleGroup">
                     <itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'"/>

package/src/components/table/TableHeader.vue

@@ -233,15 +233,20 @@
 import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
-import { Draggable } from './draggable';
+import createDraggable from '../sortable/draggable';
 import itfDropdown from '../dropdown/Dropdown.vue';
 
+const { Node, ...draggableDirectives } = createDraggable();
+
 export default @Component({
   name: 'itfTableHeader',
   components: {
     itfDropdown,
     itfButton,
     itfIcon
+  },
+  directives: {
+    ...draggableDirectives
   }
 })
 class itfTable extends Vue {
@@ -336,13 +341,13 @@ class itfTable extends Vue {
 
   beforeDestroy() {
     if (this.columnSorting) {
-      Draggable.removeContainer(this.$refs.container);
+      Node.removeContainer(this.$refs.container);
     }
   }
 
   mounted() {
     if (this.columnSorting) {
-      Draggable.addContainer(this.$refs.container);
+      Node.addContainer(this.$refs.container);
     }
     if (this.columnResizing) {
       this.initResizing();

package/src/components/table/draggable.js

@@ -1,161 +0,0 @@
-import Vue from 'vue';
-import { Draggable } from '@shopify/draggable';
-import DraggableEvent from './event';
-
-const DRAGGABLE_CLASS = 'draggable-item'
-const DRAG_HANDLE_CLASS = 'drag-handle'
-const SORTABLE_ATTRIBUTES = ['drag-ignore-handle', 'scrollable'];
-
-const draggableNode = new Draggable([], {
-  draggableClass: DRAGGABLE_CLASS,
-  dragHandleClass: DRAG_HANDLE_CLASS,
-  delay: 200,
-  tresholdDistance: 2,
-  draggable: `.${DRAGGABLE_CLASS}`,
-  handle: `.${DRAG_HANDLE_CLASS}`,
-  ignoreHandleClassList: SORTABLE_ATTRIBUTES,
-  mirror: {
-    yAxis: false,
-    constrainDimensions: !0
-  },
-  scrollable: {
-    speed: 20,
-    sensitivity: 80
-  }
-});
-
-export {draggableNode as Draggable};
-
-Vue.directive('DragHandle', {
-  inserted(el) {
-    if (el.getAttribute("drag-disabled") !== "true") {
-      el.classList.add(DRAG_HANDLE_CLASS);
-    } else {
-      el.classList.remove(DRAG_HANDLE_CLASS);
-    }
-  },
-  update(el) {
-    if (el.getAttribute("drag-disabled") !== "true") {
-      el.classList.add(DRAG_HANDLE_CLASS);
-    } else {
-      el.classList.remove(DRAG_HANDLE_CLASS);
-    }
-  }
-});
-
-Vue.directive("dropzone", {
-  inserted(el, {value}) {
-    // console.log('dropzone');
-    el.over = false;
-    el.dropzonePayload = value.payload;
-    el.dropCondition = value.condition;
-
-    el.dropzoneDragMove = event => {
-      // console.log('dropzone event', event);
-      el.initialized || (el.initialized = !0,
-      el.getAttribute("accept-group").split(",").includes(event.group) && (el.classList.add("active"),
-        draggableNode.on("drag:move", el.onDragMoveReal),
-        el.event = event))
-    };
-
-    el.onDragMoveReal = event => {
-      const { target } = event.sensorEvent;
-      if (target === el || el.contains(target)) {
-        el.over === false && (!el.dropCondition || el.dropCondition({
-          dropzonePayload: el.dropzonePayload,
-          draggablePayload: el.event.data.draggablePayload
-        })) && (el.dispatchEvent(new Event("enter")), el.classList.add("over"), el.over = !0)
-      } else {
-        el.over === !0 && (el.dispatchEvent(new Event("leave")), el.classList.remove("over"), el.over = !1);
-      }
-    };
-
-    el.onDragStop = (event) => {
-      if (draggableNode.off("drag:move", el.onDragMoveReal),
-        el.classList.remove("active"),
-        el.initialized = false,
-        !el.over) {
-        return;
-      }
-      el.classList.remove("over");
-      el.over = false;
-      const detail = {
-        ...el.event.data,
-        // dropzonePayload: p()(el.dropzonePayload),
-        dropzonePayload: el.dropzonePayload,
-        newComponent: el
-      };
-      el.dispatchEvent(new CustomEvent("receive", {detail}));
-      el.event.sourceComponent.dispatchEvent(new CustomEvent("drop", {detail}));
-    };
-
-    draggableNode.on("vue:drag:move", el.dropzoneDragMove).on("drag:stop", el.onDragStop),
-    draggableNode.dragging && el.dropzoneDragMove(draggableNode.lastEvent)
-  },
-  update(el, {value}) {
-    el.dropzonePayload = value.payload
-  },
-  unbind(el) {
-    draggableNode.off("vue:drag:move", el.dropzoneDragMove).off("drag:stop", el.onDragStop).off("drag:move", el.onDragMoveReal)
-  }
-});
-
-Vue.directive("draggable", {
-  inserted(el, {value}) {
-    // console.log('directive - draggable');
-    el.currentDraggablePayload = value?.payload;
-    el.classList.add(draggableNode.options.draggableClass);
-    value?.handle && el.classList.add(draggableNode.options.dragHandleClass);
-    value?.mirror && (el.dataset.draggableMirror = JSON.stringify(value.mirror));
-
-    el.onDragStart = event => {
-      // console.log('drag start', el.currentDraggablePayload)
-      if (draggableNode.options.ignoreHandleClassList.some(M => event.sensorEvent.target.classList.contains(M))) {
-        event.cancel();
-        return
-      }
-      if (el === event.originalEvent.target.closest("." + draggableNode.options.draggableClass)) {
-        if (event.originalEvent.target.tagName === "INPUT") {
-          event.cancel();
-          return
-        }
-        el.draggablePayload = el.currentDraggablePayload;
-        draggableNode.on("drag:move", el.dragMove);
-        draggableNode.on("drag:stop", el.dragStop);
-        el.dispatchEvent(new Event("drag-start"));
-      }
-    };
-
-    el.dragMove = () => {
-      // console.log('onDragMove')
-      const D = new DraggableEvent({
-        draggablePayload: el.draggablePayload,
-        sourceComponent: el,
-        group: el.getAttribute("group")
-      });
-      draggableNode.trigger(D);
-      draggableNode.lastEvent = D;
-    };
-
-    el.dragStop = () => {
-      draggableNode.off("drag:move", el.dragMove);
-      draggableNode.off("drag:stop", el.dragStop);
-    }
-    draggableNode.on("drag:start", el.onDragStart);
-  },
-  update(el, { value }) {
-    el.classList.add(draggableNode.options.draggableClass);
-    el.currentDraggablePayload = value?.payload;
-    value?.mirror && (el.dataset.draggableMirror = JSON.stringify(value.mirror));
-    if (value?.handle) {
-      el.classList.add(draggableNode.options.dragHandleClass);
-    } else {
-      el.classList.remove(draggableNode.options.dragHandleClass);
-    }
-  },
-  unbind(el) {
-    draggableNode.off("drag:start", el.onDragStart);
-    draggableNode.off("drag:move", el.dragMove);
-    draggableNode.off("drag:stop", el.dragStop);
-  }
-})