@itfin/components 1.5.1 → 1.5.3

package/src/components/panels/PanelItemEdit.vue

@@ -1,23 +1,34 @@
 <template>
-  <div v-loading="loading" class="px-3 pt-2 h-100 d-flex flex-column itf-append-context">
+  <div
+    v-loading="loading"
+    @dragover.prevent="onDragOver"
+    @dragleave="onDragLeave"
+    @drop.prevent="onDrop"
+    :class="{ 'is-drag-over': isDragOver }"
+    class="px-3 pt-2 h-100 d-flex flex-column itf-append-context">
     <itf-form
       ref="editForm"
-      class="d-flex flex-column justify-content-between flex-grow-1"
+      class="d-flex flex-column justify-content-between flex-grow-1 b-append-context__form"
       @keydown.native.shift.enter.stop.prevent="onSaveClick"
       @keydown.native.esc.stop.prevent="$emit('cancel')"
     >
       <slot></slot>
       <div class="py-3 justify-content-end d-flex align-items-center sticky-container">
-        <div v-if="!hideFooter">
-          <itf-button v-tooltip.delay="'Hot key: Esc'" secondary squircle :loading="loading" :disabled="loading" @click="$emit('cancel')">
-            <span>{{ cancelBtnText }}</span>
-          </itf-button>
-          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
-            <span>{{ saveBtnText }}</span>
-          </itf-button>
-        </div>
+        <slot name="footer">
+          <div v-if="!hideFooter">
+            <itf-button v-tooltip.delay="'Hot key: Esc'" secondary squircle :loading="loading" :disabled="loading" @click="$emit('cancel')">
+              <span>{{ cancelBtnText }}</span>
+            </itf-button>
+            <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
+              <span>{{ saveBtnText }}</span>
+            </itf-button>
+          </div>
+        </slot>
       </div>
     </itf-form>
+    <div class="b-drag-overlay">
+      <span>{{ $t('components.dropzoneText') }}</span>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -28,6 +39,37 @@
   z-index: 999;
   background-color: var(--bs-body-bg);
 }
+.is-drag-over .b-append-context__form {
+  pointer-events: none;
+  user-select: none;
+  filter: blur(2px);
+}
+.b-drag-overlay {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  user-select: none;
+  z-index: 1000;
+
+  .is-drag-over & {
+    margin: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    border: 3px dashed var(--bs-border-color);
+    background-color: rgba(255, 255, 255, 0.6);
+  }
+  span {
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: var(--bs-secondary-color);
+  }
+}
 </style>
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
@@ -35,6 +77,7 @@ import tooltip from '../../directives/tooltip';
 import loading from '../../directives/loading';
 import itfForm from '../form/Form.vue';
 import itfButton from '../button/Button.vue';
+import debounce from 'lodash/debounce';
 
 @Component({
   components: {
@@ -51,14 +94,52 @@ import itfButton from '../button/Button.vue';
 export default class PanelItemEdit extends Vue {
   @Prop(Boolean) loading;
   @Prop(Boolean) hideFooter;
+  @Prop(Boolean) dropzone;
+  @Prop() droptarget;
   @Prop({ type: String, default: function() { return this.$t('components.modal.save') } }) saveBtnText;
   @Prop({ type: String, default: function() { return this.$t('components.modal.cancel') } }) cancelBtnText;
 
+  isDragOver = false;
+  handleDragLeaveDebounced = null;
+
+  created() {
+    this.handleDragLeaveDebounced = debounce(() => {
+      this.isDragOver = false;
+    }, 200);
+  }
+
   onSaveClick() {
     if (this.$refs.editForm && !this.$refs.editForm.doValidation()) {
       return;
     }
     this.$emit('save');
   }
+
+  onDragOver(e) {
+    if (!this.dropzone) {
+      return;
+    }
+    this.isDragOver = true;
+
+    // якщо знову зайшли — відміняємо leave
+    this.handleDragLeaveDebounced.cancel();
+  }
+
+  onDragLeave(e) {
+    if (!this.dropzone) {
+      return;
+    }
+    this.handleDragLeaveDebounced();
+  }
+
+  onDrop(e) {
+    if (!this.dropzone) {
+      return;
+    }
+    this.isDragOver = false;
+    if (this.droptarget) {
+      this.droptarget.onFileChange(e)
+    }
+  }
 }
 </script>

package/src/components/panels/PanelList.vue

@@ -16,6 +16,7 @@
           :title="panel.title"
           :nocard="panel.nocard"
           :icon="panel.icon"
+          :css-class="panel.cssClass"
           :payload="panel.payload"
           :expandable="panelsStack.length > 1"
           :isFullSize="isFullSize"
@@ -150,6 +151,17 @@ $double-an-time: $an-time * 2;
   }
 }
 
+@media (max-width: 768px) {
+  @keyframes slidein {
+    0% {
+      max-width: 100%;
+    }
+    100% {
+      max-width: 100%;
+    }
+  }
+}
+
 .b-panel {
   transition: min-width $an-time linear, flex-grow $an-time linear;
 
@@ -166,10 +178,10 @@ $double-an-time: $an-time * 2;
 //}
 </style>
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import Panel from './Panel';
 import itfIcon from '../icon/Icon.vue';
-import Panel from './Panel.vue';
-import {hashToStack, stackToHash} from "@itfin/components/src/components/panels/helpers";
+import {hashToStack, stackToHash} from "./helpers";
 import {emitGlobalEvent, setRootPanelList} from "@itfin/components/src/components/panels";
 
 interface VisualOptions {
@@ -184,6 +196,7 @@ export interface IPanel {
   type: string;
   payload: any;
   nocard?: boolean;
+  cssClass?: string;
   isCollapsed: boolean;
   isExpanded: boolean;
   isCloseable: boolean;
@@ -222,7 +235,6 @@ export default class PanelList extends Vue {
   @Prop() panels: Record<string, Component>;
   @Prop({ default: () => {} }) searchPanel: (type: string) => boolean;
   @Prop({ type: String, default: 'path' }) routeType: string;
-  @Prop({ type: String, default: '' }) routePrefix: string;
 
   panelsStack:IPanel[] = [];
 
@@ -313,6 +325,7 @@ export default class PanelList extends Vue {
     const newPanel:any = {
       id: this.nextId++,
       nocard: panel.nocard,
+      cssClass: panel.cssClass,
       title: panel.caption(this.$t.bind(this), payload),
       icon: panel.icon ? panel.icon(this.$t.bind(this), payload) : null,
       components: {
@@ -504,7 +517,7 @@ export default class PanelList extends Vue {
   }
 
   setPanelHash() {
-    const hash = stackToHash(this.panelsStack, this.routePrefix).replace(/^#/, '');
+    const hash = stackToHash(this.panelsStack, this.routeType === 'path').replace(/^#/, '');
     if (this.routeType === 'path') {
       this.$router.push({ path: `${hash}` });
     } else {
@@ -516,7 +529,7 @@ export default class PanelList extends Vue {
   async parsePanelHash() {
     const hash = this.routeType === 'path' ? location.pathname : location.hash;
     if (hash) {
-      const panels = hashToStack(hash, this.routePrefix);
+      const panels = hashToStack(hash, this.routeType === 'path');
       const newStack = [];
       this.panelsStack = [];
       for (const panelIndex in panels) {

package/src/components/table/Table2.vue

@@ -7,7 +7,7 @@
     'permanent-checkboxes': selectedIds.length
   }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px`, '--shadow-area-width': `${shadowWidth}px` }">
     <itf-notice-popout :visible="showGroupOperations" class="rounded-3 bg-black text-white">
-      <div class="d-flex gap-2 ps-2 align-items-center small itf-table2_mass-operations">
+      <div class="d-flex gap-2 ps-3 align-items-center small itf-table2_mass-operations">
         <slot name="group-operations-count">
           <div>{{$tc('components.table.selectedItems', selectedIds.length, { n: selectedIds.length })}}</div>
           <div class="opacity-50">•</div>
@@ -19,64 +19,66 @@
       </div>
     </itf-notice-popout>
     <div class="scrollable scrollable-x">
-      <itf-checkbox-group v-model="selectedIds" class="d-flex flex-column" style="min-width: 100%; width: max-content">
-        <template v-for="(group, index) in groups">
-          <div class="table-view-body">
-            <itf-table-group
-              :key="index"
-              @update="$emit('update', { ...$event, group, groupIndex: index })"
-              @row-click="$emit('row-click', $event)"
-              :id-property="idProperty"
-              :columns="columns"
-              @update:columns="onColumnsUpdate"
-              :rows="group.rows"
-              :title="group.name"
-              :selected-ids.sync="selectedIds"
-              :add-new-rows="addNewRows"
-              :shadow-width="shadowWidth"
-              :column-sorting="columnSorting"
-              :column-resizing="columnResizing"
-              :show-grouping="showGrouping"
-              :show-summary="showSummary"
-              :show-add-column="showAddColumn"
-              :show-actions="showActions"
-              :show-header="!noHeader"
-              :schema="schema"
-              :editable="editable"
-              :no-column-menu="noColumnMenu"
-              :no-select-all="noSelectAll"
-              :currencies="currencies"
-              :currency="currency"
-              :subrows-property="subrowsProperty"
-              :divider-property="dividerProperty"
-              :indicator-type="indicatorType"
-              :expanded-all="expandedAll"
-              :indicatorWidth="indicatorWidth"
-              :striped="striped"
-              :expanded-ids="expandedIds"
-              :css-property="cssProperty"
-              :sticky-header="stickyHeader"
-              :editable-property="editableProperty"
-              :sorting.sync="_sorting"
-              :active="active"
-              :new-label="newLabel"
-              :collapsed-group-ids="collapsedGroupIds"
-              @update:expanded-ids="$emit('update:expanded-ids', $event)"
-              @update:collapsed-group-ids="$emit('update:collapsed-group-ids', $event)"
-              @new="$emit('new', $event)"
-              @filter="$emit('filter', $event)"
-              @add-column="$emit('add-column', $event)"
-            >
-              <template v-for="(_, name) in $slots" #[name]="slotData">
-                <slot :name="name" v-bind="slotData || {}" />
-              </template>
-              <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-                <slot :name="name" v-bind="slotData || {}" />
-              </template>
-            </itf-table-group>
-          </div>
-        </template>
-      </itf-checkbox-group>
+    <itf-checkbox-group v-model="selectedIds">
+      <template v-for="(group, index) in groups">
+        <div class="table-view-body">
+          <itf-table-group
+            :key="index"
+            @update="$emit('update', { ...$event, group, groupIndex: index })"
+            @row-click="$emit('row-click', $event)"
+            :id-property="idProperty"
+            :columns="columns"
+            @update:columns="onColumnsUpdate"
+            :rows="group.rows"
+            :title="group.name"
+            :selected-ids.sync="selectedIds"
+            :add-new-rows="addNewRows"
+            :column-sorting="columnSorting"
+            :column-resizing="columnResizing"
+            :show-grouping="showGrouping"
+            :show-summary="showSummary"
+            :show-add-column="showAddColumn"
+            :show-actions="showActions"
+            :show-header="!noHeader"
+            :schema="schema"
+            :editable="editable"
+            :no-column-menu="noColumnMenu"
+            :no-select-all="noSelectAll"
+            :currencies="currencies"
+            :currency="currency"
+            :subrows-property="subrowsProperty"
+            :async-subrows-property="asyncSubrowsProperty"
+            :divider-property="dividerProperty"
+            :indicator-type="indicatorType"
+            :expanded-all="expandedAll"
+            :indicatorWidth="indicatorWidth"
+            :striped="striped"
+            :expanded-ids="expandedIds"
+            :css-property="cssProperty"
+            :sticky-header="stickyHeader"
+            :editable-property="editableProperty"
+            :sorting.sync="_sorting"
+            :active="active"
+            :sort-as-string="sortAsString"
+            :new-label="newLabel"
+            :collapsed-group-ids="collapsedGroupIds"
+            @loadChildren="$emit('loadChildren', $event)"
+            @update:expanded-ids="$emit('update:expanded-ids', $event)"
+            @update:collapsed-group-ids="$emit('update:collapsed-group-ids', $event)"
+            @new="$emit('new', $event)"
+            @filter="$emit('filter', $event)"
+            @add-column="$emit('add-column', $event)"
+          >
+            <template v-for="(_, name) in $slots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}" />
+            </template>
+            <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData || {}" />
+            </template>
+          </itf-table-group>
+        </div>
+      </template>
+    </itf-checkbox-group>
     </div>
   </div>
 
@@ -107,11 +109,13 @@ export default @Component({
 })
 class itfTable2 extends Vue {
   // @Prop({ required: true, type: Array }) columns;
+  @Prop(Boolean) sortAsString;
   @Prop({ required: true, type: Array }) rows;
   @Prop({ type: String, default: null }) groupBy;
   @Prop({ type: String, default: null }) idProperty;
   @Prop({ type: String, default: null }) cssProperty;
   @Prop({ type: String, default: null }) subrowsProperty;
+  @Prop({ type: String, default: null }) asyncSubrowsProperty;
   @Prop({ type: String, default: null }) dividerProperty;
   @Prop({ type: String, default: null }) editableProperty;
   @Prop({ default: null }) active;
@@ -249,7 +253,8 @@ class itfTable2 extends Vue {
   @Watch('selectedIds')
   onSelectedIdsUpdate(selectedIds) {
     this.state.selectedIds = selectedIds;
-    this.saveTableState();
+    // метод saveTableState не зберігає selectedIds в localStorage, не впевнений що він тут треба
+    // this.saveTableState();
   }
 
   onColumnsUpdate(columns) {

package/src/components/table/TableBody.vue

@@ -23,6 +23,7 @@
       :columns="columns"
       :id-property="idProperty"
       :subrows-property="subrowsProperty"
+      :async-subrows-property="asyncSubrowsProperty"
       :divider-property="dividerProperty"
       :show-add-column="showAddColumn"
       :show-actions="showActions"
@@ -145,6 +146,7 @@ class itfTableBody extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
@@ -165,6 +167,10 @@ class itfTableBody extends Vue {
     this.$emit('update:expanded-ids', this.expandedIds.includes(item[this.idProperty])
       ? this.expandedIds.filter((id) => id !== item[this.idProperty])
       : [...this.expandedIds, item[this.idProperty]]);
+
+    if (this.asyncSubrowsProperty && item[this.asyncSubrowsProperty] && item[this.asyncSubrowsProperty]) {
+      this.$emit('loadChildren', item);
+    }
   }
 }
 </script>

package/src/components/table/TableGroup.vue

@@ -17,7 +17,7 @@
               <div class="shadow-area"></div>
               <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="() => toggleGroup(!isShowTable)">
                 <a class="header-content position-sticky d-flex align-items-center">
-                  <itf-button squircle icon small secondary class="collapse-arrow">
+                  <itf-button icon small secondary class="collapse-arrow">
                     <itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'"/>
                   </itf-button>
                   <span class="d-flex align-items-center line-overflow group-header-value text-primary"
@@ -39,6 +39,7 @@
             :show-add-column="showAddColumn"
             :show-actions="showActions"
             :id-property="idProperty"
+            :sort-as-string="sortAsString"
             :rows="rows"
             :schema="schema"
             :editable="editable"
@@ -68,11 +69,13 @@
             @row-click="$emit('row-click', $event)"
             :id-property="idProperty"
             :subrows-property="subrowsProperty"
+            :async-subrows-property="asyncSubrowsProperty"
             :divider-property="dividerProperty"
             :rows="rows"
             :editable="editable"
             :currency="currency"
             :currencies="currencies"
+            :sort-as-string="sortAsString"
             :columns="visibleColumns"
             :no-select-all="noSelectAll"
             :selected-ids="selectedIds"
@@ -85,6 +88,7 @@
             :css-property="cssProperty"
             :editable-property="editableProperty"
             :active="active"
+            @loadChildren="$emit('loadChildren', $event)"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
           >
             <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -98,11 +102,11 @@
 
         <!-- Лінія додати нову -->
         <div v-if="isShowTable && addNewRows"
-             class="d-flex align-items-stretch">
+             class="table-row-template table-row-template__new-row d-flex align-items-stretch">
           <div class="shadow-area"></div>
           <a href="" @click.prevent="$emit('new', title)" data-test="table-add-new-item"
              class="d-flex align-items-center flex-grow-1 table-add-new-item text-decoration-none">
-            <span class="d-sticky d-flex align-items-center py-2 px-2">
+            <span class="d-sticky d-flex align-items-center py-1 px-2 small">
               <itf-icon name="plus"/>
               <span>{{ newLabel }}</span>
             </span>
@@ -271,6 +275,9 @@
     min-height: var(--table-small-row-size);
   }
 
+  .table-row-template.table-row-template__new-row {
+    min-height: 2rem;
+  }
   .table-add-new-item {
     margin-top: -12px;
     border-bottom: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
@@ -285,7 +292,7 @@
     }
 
     & > span {
-      left: var(--shadow-area-width);
+      left: calc(var(--shadow-area-width) + 4px);
       position: sticky;
       padding-left: var(--shadow-area-width);
       //border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
@@ -372,6 +379,7 @@ class itfTableGroup extends Vue {
   @Prop() title;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() asyncSubrowsProperty;
   @Prop() dividerProperty;
   @Prop() currency;
   @Prop() currencies;
@@ -391,6 +399,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
   @Prop(Boolean) stickyHeader;
+  @Prop(Boolean) sortAsString;
   @Prop() indicatorWidth;
   @Prop() shadowWidth;
   @Prop() cssProperty;