@itfin/components 1.2.102 → 1.2.104

package/package.json

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

package/src/components/customize/PropertiesEditMenu.vue

@@ -29,7 +29,7 @@
         </li>
       </ul>
     </div>
-    <div v-if="value.Type === 'multiselect'" sortable-skip>
+    <div v-if="value.Type === 'multiselect'">
       <div class="d-flex justify-content-between pe-2">
         <h6 class="dropdown-header">{{ $t('components.customize.options') }}</h6>
         <div v-if="value.Options && value.Options.length">
@@ -56,15 +56,16 @@
       </div>
 
       <sortable
+        require-sortable-attribute
         :value="value.Options"
         @input="setParam({ Options: $event })"
         axis="y"
-        require-sortable-attribute
+        :read-only="false"
         auto-scroll="window"
       >
-        <div v-for="option of value.Options" class="dropdown-item d-flex justify-content-between" sortable>
+        <div v-for="option of value.Options" class="dropdown-item d-flex justify-content-between">
           <div>
-            <itf-icon class="dragHandle" name="drag_vertical" />
+            <itf-icon sortable class="dragHandle" name="drag_vertical" />
             <span>{{ option.Name }}</span>
           </div>
           <span class="text-muted">></span>
@@ -91,12 +92,14 @@ import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
 import Sortable from '../sortable/Sortable';
 import itfIconPopover from '../popover/IconPopover.vue';
-import {INLINE_TYPES} from './constants';
-import itfDeleteConfirmModal from "../modal/DeleteConfirmModal.vue";
-import PropertyItem from "./PropertyItem.vue";
+import { INLINE_TYPES } from './constants';
+import itfDeleteConfirmModal from '../modal/DeleteConfirmModal.vue';
+import PropertyItem from './PropertyItem.vue';
+import PropertiesPopupMenu from "@/components/customize/PropertiesPopupMenu.vue";
 
 export default @Component({
   components: {
+    PropertiesPopupMenu,
     PropertyItem,
     itfDeleteConfirmModal,
     itfButton,

package/src/components/customize/PropertiesList.vue

@@ -80,7 +80,7 @@ import itfButton from '../button/Button';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfLabel from '../form/Label.vue';
 import itfTextField from '../text-field/TextField.vue';
-import Sortable from '../sortable/Sortable';
+import Sortable from '../sortable/Sortable.vue';
 import PropertyItem from './PropertyItem';
 import { INLINE_TYPES } from './constants';
 

package/src/components/customize/PropertyItem.vue

@@ -17,7 +17,6 @@
         </template>
         <properties-edit-menu
           v-if="isEditMode"
-          sortable-skip
           :value="field"
           :loading="loading"
           @input="onChange($event)"
@@ -26,7 +25,6 @@
         />
         <properties-popup-menu
           v-else
-          sortable-skip
           :field="field"
           :loading="loading"
           @edit="isEditMode = true"
@@ -119,7 +117,7 @@ import itfButton from '../button/Button';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfLabel from '../form/Label.vue';
 import itfTextField from '../text-field/TextField.vue';
-import Sortable from '../sortable/Sortable';
+import Sortable from '../sortable/sortable-shopify';
 import PropertiesPopupMenu from './PropertiesPopupMenu.vue';
 import PropertiesEditMenu from './PropertiesEditMenu.vue';
 import PropertyInlineEdit from './PropertyInlineEdit.vue';

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

@@ -1,5 +1,7 @@
 import { storiesOf } from '@storybook/vue';
+import itfPropertyItem from './PropertyItem.vue';
 import itfPropertiesList from './PropertiesList.vue';
+import itfPropertiesEditMenu from './PropertiesEditMenu.vue';
 import itfForm from '../form/Form.vue';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
@@ -14,7 +16,9 @@ storiesOf('Common', module)
       itfForm,
       itfButton,
       itfLabel,
-      itfPropertiesList
+      itfPropertiesList,
+      itfPropertiesEditMenu,
+      itfPropertyItem
     },
     data() {
       return {
@@ -32,7 +36,12 @@ storiesOf('Common', module)
         ],
         value: {
           test1: 'test1'
-        }
+        },
+        field: {
+          Type: 'text',
+          Name: 'Test'
+        },
+        fieldValue: 'text'
       }
     },
     methods: {
@@ -62,6 +71,17 @@ storiesOf('Common', module)
 
         <itf-properties-list lock-fields editable :fields.sync="list" v-model="value"></itf-properties-list>
 
+        {{field}}
+        <itf-property-item
+          editable
+          :field.sync="field"
+          :value="fieldValue"
+        />
+
+        <itf-properties-edit-menu
+          v-model="field"
+        />
+
       </itf-app>
     </div>`,
   }));

package/src/components/kanban/Board.vue

@@ -2,7 +2,7 @@
   <div class="itf-board">
 
     <div ref="container" class="itf-board-titles">
-      <div v-for="(column, index) of columns"
+      <div v-for="(column, index) of orderColumnsInBoard"
            :data-column="index"
            @mouseover="columnHighlight(index, 'enter')"
            @mouseout="columnHighlight(index, 'leave')"
@@ -18,6 +18,7 @@
           accept-group="board-columns"
           @enter="columnHighlight(index, 'enter')"
           @leave="columnHighlight(index, 'leave')"
+          @click="$emit('update:columnSettings', column)"
           v-dropzone="{ payload: { index, column } }"
           class="d-flex align-items-center">
           <div
@@ -25,8 +26,8 @@
             @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><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"
@@ -39,7 +40,7 @@
         </div>
       </div>
       <div class="align-items-end d-flex pb-1">
-        <slot name="add-column">
+        <slot name="add-column" @click="$emit('addColumn')">
           <itf-button icon small>
             <itf-icon name="plus" />
           </itf-button>
@@ -48,7 +49,7 @@
     </div>
 
     <div class="itf-board-columns flex-grow-1">
-      <div v-for="(column, index) of columns"
+      <div v-for="(column, index) of orderColumnsInBoard"
            :key="`column-${index}`"
            :data-column="index"
            class="itf-board-column px-2 pb-2 pt-2" :class="{'empty': !groupedItems[column.Id]}">
@@ -66,6 +67,7 @@ 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();
 
@@ -87,6 +89,7 @@ export default @Component({
 class Board extends Vue {
   @Prop(Array) columns;
   @Prop(Array) items;
+  @Prop(Array) boardColumnsOrder
   @Prop(Array) columnOrders;
   @Prop({ type: Function, default: (item) => item.Status?.Id }) groupFunc;
   @Prop({ type: Function, default: (item, value) => { item.Status = value; } }) updateFunc;
@@ -100,6 +103,7 @@ class Board extends Vue {
   }
 
   mounted() {
+    this.itemStatusChanged = debounce(this.emitItemStatusChanged, 10);
     if (this.columnSorting) {
       Node.addContainer(this.$refs.container);
     }
@@ -113,12 +117,21 @@ class Board extends Vue {
     return grouped;
   }
 
+  get orderColumnsInBoard() {
+    return this.sortByOrdering(this.columns, this.boardColumnsOrder || []);
+  }
+
   orderItemsInColumn(column) {
-    const columnOrdering = this.columnOrders.find((c) => c.Id === column.Id) || { ItemIds: [] };
+    const columnOrdering = (this.columnOrders.find((c) => c.Id === column.Id) || { ItemIds: [] }).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);
+    return this.sortByOrdering(items, columnOrdering);
+  }
+
+  sortByOrdering (arr, ordering) {
+    const arrCopy = arr.slice();
+    return arrCopy.sort((a, b) => {
+      const aIndex = ordering.findIndex((id) => id === a.Id);
+      const bIndex = ordering.findIndex((id) => id === b.Id);
       if (aIndex === -1 && bIndex === -1) {
         return 0;
       }
@@ -130,7 +143,6 @@ class Board extends Vue {
       }
       return aIndex - bIndex;
     });
-    return items;
   }
 
   columnHighlight(index, state, className = 'over') {
@@ -153,7 +165,7 @@ class Board extends Vue {
   reorderColumns({ detail }) {
     const { index: fromIndex } = detail.draggablePayload;
     const { index: toIndex, last } = detail.dropzonePayload;
-    const newValue = [...this.columns];
+    const newValue = [...this.orderColumnsInBoard];
     const [removed] = newValue.splice(fromIndex, 1);
 
     if (last) {
@@ -186,36 +198,41 @@ class Board extends Vue {
 
     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);
+    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);
+    });
+  }
 
-    sorting.ItemIds = itemsInColumn;
+  emitItemStatusChanged(item, column, items, updateOrder) {
+    updateOrder();
 
     this.$emit('update:item', [item, column]);
     this.$emit('update:items', items);
-
-    this.$emit('update:columnOrders', newOrders);
   }
 }
 </script>

package/src/components/kanban/BoardCard.vue

@@ -2,8 +2,8 @@
   <div class="itf-board-card shadow-sm">
     <slot name="header"></slot>
 
-    <div class="itf-board-card-inner d-flex">
-      <div class="flex-grow-1">
+    <div class="itf-board-card-inner d-flex" @click="$emit('click')">
+      <div class="flex-grow-1 itf-board-card-inner-content">
         <slot>{{text}}</slot>
       </div>
       <div>
@@ -13,7 +13,9 @@
       </div>
     </div>
 
-    <slot name="footer"></slot>
+    <div class="itf-board-card-footer d-flex">
+      <slot name="footer"></slot>
+    </div>
   </div>
 </template>
 <script>

package/src/components/kanban/styles.scss

@@ -1,10 +1,11 @@
 :root {
-  --itf-board-column-hover-color: rgba(0, 0, 0, .05);
+  --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;
+  --itf-board-card-border-color: #ccc;
 }
 
 [data-theme="dark"] {
@@ -13,10 +14,7 @@
   --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-card-border-color: #424448;
 }
 
 .itf-board {
@@ -108,7 +106,6 @@
   .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 {
@@ -152,7 +149,7 @@
 }
 
 .itf-board-titles {
-  border-bottom: 1px solid var(--bs-border-color);
+  border-bottom: 1px solid var(--itf-board-card-border-color);
 }
 
 .itf-board-columns {
@@ -212,18 +209,27 @@
 .itf-board-card {
   background-color: var(--itf-board-card-bg-color);
   border-radius: var(--bs-border-radius);
-  border: 1px solid var(--bs-border-color);
+  border: 1px solid var(--itf-board-card-border-color);
   margin-bottom: .75rem;
   overflow: hidden;
   user-select: none;
+  padding: .5rem;
 
   .itf-board-card-inner {
-    padding: .5rem;
     font-size: .875rem;
     word-wrap: break-word;
     -webkit-line-clamp: unset;
-    overflow-x: unset;
+    overflow: hidden;
     word-break: break-word;
+
+    .itf-board-card-inner-content {
+      padding-right: 0.2rem;
+      overflow-x: hidden;
+    }
+  }
+
+  .itf-board-card-footer {
+    overflow-x: hidden;
   }
 }
 
@@ -232,6 +238,7 @@
   flex-direction: column;
   max-height: 100%;
   flex-grow: 1;
+  max-width: 100%;
 }
 
 .itf-board-cards-wrapper {
@@ -243,7 +250,7 @@
   .draggable-source--is-dragging {
     position: relative !important;
     .itf-board-card {
-      background-color: var(--bs-border-color);
+      background-color: var(--itf-board-card-border-color);
 
       & > div {
         opacity: 0;

package/src/components/{table/Sortable._js → sortable/sortable-shopify.js}

@@ -3,22 +3,6 @@ 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
@@ -70,7 +54,7 @@ function c(A, H, tt) {
 }
 
 export
-const Sortable = {
+const SortableShopify = {
   name: 'Sortable',
   render: function() {
     return this._self._c(this.tag, {
@@ -284,5 +268,20 @@ const Sortable = {
   }
 };
 
-
-Vue.component("Sortable", Sortable)
+export default {
+  Sortable: SortableShopify,
+  SortableItem: {
+    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))
+    }
+  }
+};

package/src/components/table/Table2.vue

@@ -42,11 +42,11 @@
   }
 
   -webkit-overflow-scrolling: touch;
-  //overflow: hidden auto;
-  //
-  //&.scrollable-x {
-  //  overflow-x: auto;
-  //}
+  overflow: hidden auto;
+
+  &.scrollable-x {
+    overflow-x: auto;
+  }
 }
 .last-sticky-column:after {
   content: '';
@@ -93,7 +93,7 @@ class itfTable2 extends Vue {
   get groups() {
     const { groupBy, rows } = this;
     if (!groupBy) {
-      return [];
+      return this.rows ? [{ name: '', rows: this.rows }] : []
     }
     const groups = rows.reduce((acc, row) => {
       const group = row[groupBy];

package/src/components/table/TableGroup.vue

@@ -2,9 +2,9 @@
 
   <div class="itf-table-group table-small-row">
     <!-- Тут показується лінія при драг н дропі -->
-    <div accept-group="tablegroups" class="preline">
+    <!--div accept-group="tablegroups" class="preline">
       <div class="line"></div>
-    </div>
+    </div-->
 
     <div data-test="table-group-wrapper" class="table-group-wrapper flex-grow-1 w-100 d-block"
          :style="`--row-count: ${isShowTable ? rows.length : 0}`">
@@ -22,7 +22,7 @@
             @add-column="$emit('add-column', $event)"
           />
 
-          <div group="tablegroups" class="draggable-item"
+          <div v-if="title" group="tablegroups" class="draggable-item"
                data-draggable-mirror="{&quot;xAxis&quot;:false}">
             <div class="table-row-template d-flex align-items-stretch"
                  style="height: var(--group-title-height)">

package/src/components/table/TableHeader.vue

@@ -28,7 +28,7 @@
                @drop="reorderColumns"
                v-drag-handle
                v-draggable="{ handle: true, payload: { index: n, item: column }, mirror: {yAxis:false} }">
-            <itf-dropdown text append-to-body shadow ref="dropdown" class="w-100">
+            <itf-dropdown text append-to-body shadow ref="dropdown" class="w-100" disabled>
               <template #button>
                 <span :title="column.text">
 <!--                  <itf-icon name="type_select" :size="16" />-->