@itfin/components 1.2.97 → 1.2.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.97",
+  "version": "1.2.99",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -26,21 +26,22 @@
     "@vue/cli-service": "^5.0.1",
     "@vue/composition-api": "^1.7.1",
     "air-datepicker": "^3.3.5",
-    "bootstrap": "=5.2.3",
-    "core-js": "^3.31.1",
+    "bootstrap": "^5.2.3",
+    "core-js": "^3.7.0",
     "debug": "^4.2.0",
     "intersection-observer": "^0.12.2",
     "lodash": "^4.17.20",
     "luxon": "^3.3.0",
-    "pdfjs-dist": "^3.8.162",
+    "pdfjs-dist": "^2.10.377",
     "tippy.js": "^6.3.2",
+    "vue": "^2.6.12",
     "vue-imask": "^6.6.3",
     "vue-property-decorator": "^9.1.2",
     "vue-swatches": "^2.1.1",
     "vue-virtual-scroller": "^1.1.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.22.9",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-syntax-numeric-separator": "^7.10.4",
     "@storybook/addon-docs": "=6.3.8",
@@ -52,15 +53,14 @@
     "@vue/eslint-config-airbnb": "^7.0.0",
     "@vue/test-utils": "^1.1.1",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.45.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint": "^8.30.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.15.1",
+    "eslint-plugin-vue": "^9.9.0",
     "fibers": "^5.0.0",
     "marked": "^4.2.5",
     "sass": "^1.29.0",
     "sass-loader": "^10.0.5",
-    "vue": "^2.6.12",
     "vue-class-component": "^7.2.6",
     "vue-eslint-parser": "^9.1.0",
     "vue-template-compiler": "=2.6.14"

package/src/assets/scss/_css_variables.scss

@@ -9,10 +9,21 @@ $color-outcome: #b91e1e;
   --color-outcome: #{$color-outcome};
   --color-primary: #{$primary};
   --body-bg: #{$body-bg};
+
+  .modal-backdrop {
+    --bs-backdrop-bg: #{$body-bg};
+    --bs-backdrop-opacity: 0.75;
+  }
 }
 
 [data-theme="dark"] {
   --color-primary: #{$dark-primary};
   --body-bg: #{$dark-body-bg};
+  --bs-backdrop-bg: #{$dark-body-bg};
   --color-primary-hover: #{darken($dark-primary, 10%)};
+
+  .modal-backdrop {
+    --bs-backdrop-opacity: 0.5;
+    --bs-backdrop-bg: #{$dark-body-bg};
+  }
 }

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/datepicker/DatePicker.vue

@@ -21,6 +21,7 @@
       :unmask="false"
       :lazy="!focused"
       :placeholder="placeholder"
+      :disabled="disabled"
     />
 
     <div class="addon-end" v-if="clearable && value">
@@ -85,6 +86,7 @@ class itfDatePicker extends Vue {
   @Prop({ type: String, default: 'bottom-start' }) placement;
   @Prop({ type:  [String, Date], default: '' }) minDate;
   @Prop(Boolean) clearable;
+  @Prop(Boolean) disabled;
 
   focused = false;
 
@@ -117,6 +119,9 @@ class itfDatePicker extends Vue {
   }
 
   mounted() {
+    if (this.disabled) {
+      return;
+    }
     // якщо в модалці, то контекст модалки, якщо ні, то аплікейшена
     const context = this.$el.closest('.itf-append-context') || document.body;
     this.tooltip = tippy(this.$refs.input.$el, {
@@ -183,10 +188,16 @@ class itfDatePicker extends Vue {
   }
 
   onFocus() {
+    if (this.disabled) {
+      return;
+    }
     this.focused = true;
   }
 
   onBlur(e) {
+    if (this.disabled) {
+      return;
+    }
     this.focused = false;
     this.updateValue(e.target.value, !!e.target.value);
   }

package/src/components/datepicker/DateRangePicker.vue

@@ -19,6 +19,7 @@
         :mask="Date"
         :pattern="dateFormat"
         :blocks="blocks"
+        :disabled="disabled"
         :format="format"
         :parse="parse"
         :unmask="false"
@@ -105,6 +106,7 @@ class itfDateRangePicker extends Vue {
   @Prop({ type: String, default: 'bottom-start' }) placement;
   @Prop({ type: [String, Date], default: '' }) minDate;
   @Prop({ type: [String, Date], default: ''}) maxDate;
+  @Prop(Boolean) disabled;
 
   focused = false;
 

package/src/components/dropdown/Dropdown.vue

@@ -3,7 +3,7 @@
   <div class="itf-dropdown" :class="`drop${placement}`">
     <div v-if="disabled"><slot name="button">{{label}}</slot></div>
     <itf-button
-      v-else
+      v-else-if="!text"
       :class="{ 'dropdown-toggle': toggle }"
       v-bind="buttonOptions"
       ref="toggle"
@@ -13,6 +13,9 @@
     >
       <slot name="button">{{label}}</slot>
     </itf-button>
+    <div v-else :class="{ 'dropdown-toggle': toggle }" ref="toggle" :id="modalId" data-bs-toggle="dropdown" aria-expanded="false">
+      <slot name="button">{{label}}</slot>
+    </div>
     <div
       class="itf-dropdown__menu dropdown-menu"
       :class="{'dropdown-menu-end': right, 'shadow': shadow}"
@@ -44,6 +47,8 @@ class itfDropdown extends Vue {
   @Prop({ type: Boolean }) toggle;
   @Prop({ type: Boolean }) shadow;
   @Prop({ type: Boolean }) disabled;
+  @Prop({ type: Boolean }) text;
+  @Prop({ type: Boolean }) appendToBody;
   @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
   @Prop({ type: Object, default: () => ({}) }) buttonOptions;
 
@@ -80,6 +85,12 @@ class itfDropdown extends Vue {
       reference: 'toggle',
       autoClose: this.autoclose
     });
+    let context = document.body;
+    if (this.appendToBody && this.$refs.dropdown instanceof Node && this.$refs.dropdown.parentNode) {
+      this.$refs.dropdown.parentNode.removeChild(this.$refs.dropdown);
+      context.appendChild(this.$refs.dropdown); // should append only to body
+    }
+
     this.$el.addEventListener('shown.bs.dropdown', () => {
       setTimeout(() => {
         this.$emit('open');

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/editable/EditableElement.vue

@@ -0,0 +1,112 @@
+<template>
+
+  <div>
+    <div ref="element">
+      <slot name="activator" :open="open">
+        <div @click.prevent.stop="open">
+          <slot :open="open" :hide="hide">
+          </slot>
+        </div>
+      </slot>
+    </div>
+  </div>
+
+</template>
+<style lang="scss">
+.itf-editable-element {
+  z-index: 1060;
+  position: fixed;
+}
+</style>
+<script>
+import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+import FocusTrap from "bootstrap/js/src/util/focustrap";
+
+export default @Component({
+  name: 'itfEditableElement',
+  components: {
+    itfButton,
+    itfIcon,
+  }
+})
+class itfEditableElement extends Vue {
+  _backdrop = null;
+  _context = null;
+  _focusTrap = null;
+  _elContainer = null;
+  _tempContainer = null;
+
+  isOpen = false;
+
+  async mounted() {
+    this._context = this.$el.closest('.itf-append-context:not(.modal-content)') || document.body;
+
+    const { default: Backdrop } = await import('../modal/backdrop');
+    this._backdrop = new Backdrop({
+      rootElement: this._context,
+      isVisible: true,
+      isAnimated: true,
+      clickCallback: () => {
+        this.hide();
+      }
+    });
+    this._focusTrap = new FocusTrap({
+      trapElement: this.$el
+    });
+  }
+
+  open() {
+    if (this.isOpen) {
+      return;
+    }
+    this.isOpen = true;
+
+    this.$emit('open');
+    this._backdrop.show();
+    this._focusTrap.activate();
+
+    this._tempContainer = document.createElement('div');
+    this.applyPosition(this._tempContainer, this.$refs.element)
+    this._tempContainer.classList.add('itf-editable-element');
+    this.$el.removeChild(this.$refs.element);
+    this._tempContainer.appendChild(this.$refs.element);
+    this._context.appendChild(this._tempContainer);
+  }
+
+  applyPosition(container, el) {
+    const box = el.getBoundingClientRect();
+    const left = box.left + document.body.scrollLeft;
+    const top = box.top + document.body.scrollTop;
+    container.style.left = `${left}px`;
+    container.style.top = `${top}px`;
+    container.style.width = `${box.width}px`;
+    container.style.height = `${box.height}px`;
+    this.$el.style.width = `${box.width}px`;
+    this.$el.style.height = `${box.height}px`;
+  }
+
+  hide() {
+    if (!this.isOpen) {
+      return;
+    }
+    this._focusTrap.deactivate();
+    this._backdrop.hide(() => {
+      this._tempContainer.removeChild(this.$refs.element);
+      this.$el.appendChild(this.$refs.element);
+      this._context.removeChild(this._tempContainer); // remove the temporary div
+
+      this.$el.style.width = null;
+      this.$el.style.height = null;
+      this.isOpen = false;
+      this.$emit('hide');
+    });
+  }
+
+  beforeDestroy() {
+    this._backdrop.dispose();
+    this._focusTrap.deactivate();
+  }
+}
+</script>

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

@@ -0,0 +1,53 @@
+import { storiesOf } from '@storybook/vue';
+import itfButton from '../button/Button.vue';
+import itfEditableElement from './EditableElement.vue';
+
+storiesOf('Common', module)
+  .add('Editable element', () => ({
+    components: {
+      itfButton,
+      itfEditableElement
+    },
+    data() {
+      return {}
+    },
+    template: `<div>
+      <p>You need wrap whole application with this tag</p>
+
+      <h2>Usage</h2>
+
+<pre>
+  &lt;itf-table
+    :columns="columns"
+    :rows="list"
+  >
+    &lt;template #column.Employee="&#123; item }">&lt;/template>
+  &lt;/itf-table>
+</pre>
+
+      <h3>Example</h3>
+
+      <itf-editable-element>
+        <template v-slot="{ hide }">
+
+        <div class="card" style="width: 300px">
+          <div class="card-body">
+            asdadas
+
+            <a href="#" @click="hide">Close</a>
+          </div>
+        </div>
+        </template>
+      </itf-editable-element>
+
+      <!--itf-table
+        :columns="columns"
+        :rows="list"
+      >
+        <template #column.Employee="{ item }">
+          {{item.Employee}}
+        </template>
+      </itf-table-->
+
+    </div>`,
+  }));

package/src/components/kanban/Board.vue

@@ -0,0 +1,230 @@
+<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';
+import { debounce } from '../../helpers/debounce';
+
+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() {
+    this.itemStatusChanged = debounce(this.emitItemStatusChanged, 10);
+    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;
+
+    this.lastUpdatedIndex = typeof this.lastUpdatedIndex === 'undefined' ? toIndex : this.lastUpdatedIndex; // запамятовуємо індекс, бо виклики може бути два, коли колонка і карточка обробляє
+    this.itemStatusChanged(items[itemIndex], column, items, () => {
+      const toIndex = this.lastUpdatedIndex; // беремо індекс з пам'яті, бо викликів може бути два, але індекс тільки в картці, якщо нема, то це колонка
+      this.lastUpdatedIndex = undefined; // обнуляємо, щоб при наступному перетягувані вже не брало його
+      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 items = [...this.groupedItems[column.Id]];
+      let placeIndex = last ? items.length : toIndex;
+      if (typeof placeIndex === 'undefined') { // ідекса може не бути, якщо на колонку переносять, тоді в кінець
+        placeIndex = items.length;
+      }
+      const itemsInColumn = items.map((t) => t.Id).filter((t) => t !== newItem.Id);
+      itemsInColumn.splice(placeIndex, 0, newItem.Id);
+
+      sorting.ItemIds = itemsInColumn;
+      this.$emit('update:columnOrders', newOrders);
+    });
+  }
+
+  emitItemStatusChanged(item, column, items, updateOrder) {
+    updateOrder();
+
+    this.$emit('update:item', [item, column]);
+    this.$emit('update:items', items);
+  }
+}
+</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>