@itfin/components 1.2.97 → 1.2.99

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,116 @@
+<template>
+  <div class="itf-board-column-wrapper">
+    <itf-button block small class="text-muted">
+      <itf-icon name="plus" />
+
+      Add entry
+    </itf-button>
+
+    <div class="itf-board-cards-wrapper"
+         ref="container"
+         accept-group="board-cards"
+         @enter="cardHighlight(0, 'enter', 'drop')"
+         @leave="cardHighlight(0, 'leave', 'drop')"
+         v-dropzone="{ payload: { column } }"
+    >
+      <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) 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,266 @@
+:root {
+  --itf-board-column-hover-color: #f5f9fe;
+  --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;
+
+  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);
+    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);
+      }
+    }
+  };
+}