@itfin/components 1.2.102 → 1.2.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.102",
+  "version": "1.2.103",
   "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/{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" />-->