@itfin/components 1.3.99 → 1.4.0

package/src/components/panels/Panel.vue

@@ -10,20 +10,23 @@
         <div class="b-panel__expand_text" v-text="title"></div>
       </a>
     </div>
-    <div v-if="!nocard" v-show="!collapsed" class="b-panel-header px-3 pt-3">
+    <div v-if="!nocard" v-show="!collapsed" class="b-panel-header px-3 pt-3 pb-2">
       <slot name="header">
-        <div>
+        <div class="d-flex gap-3 align-items-center">
+          <itf-button v-if="closeable" icon default class="d-md-none" @click="closePanel">
+            <itf-icon name="chevron_left" />
+          </itf-button>
           <slot name="title">
-            <div class="b-panel__title ps-1 fw-bold h5" v-text="title"></div>
+            <div class="b-panel__title fw-bold mb-0 h2" v-text="title"></div>
           </slot>
         </div>
         <div class="d-flex gap-1">
           <slot name="buttons"></slot>
-          <itf-button v-if="expandable" icon small class="b-panel__expand_button" @click="fullsizePanel">
-            <itf-icon name="expand" />
+          <itf-button v-if="expandable" icon default class="b-panel__expand_button d-none d-md-block" @click="fullsizePanel">
+            <itf-icon new name="expand" />
           </itf-button>
-          <itf-button v-if="closeable" icon small class="b-panel__expand_button" @click="closePanel">
-            <itf-icon name="cross" />
+          <itf-button v-if="closeable" icon default class="b-panel__expand_button" @click="closePanel">
+            <itf-icon new name="close" />
           </itf-button>
         </div>
       </slot>
@@ -51,6 +54,18 @@
   background: var(--b-panel-bg);
   box-shadow: var(--b-panel-box-shadow);
 
+  @media (max-width: 768px) {
+    margin: 0;
+    height: 100%;
+    min-width: 0 !important;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
   &__collapsed {
     flex-basis: 38px;
     flex-grow: 0;
@@ -140,6 +155,7 @@ class Panel extends Vue {
   @Prop() title;
   @Prop() icon;
   @Prop() payload;
+  @Prop() panel;
   @Prop(Boolean) collapsed;
   @Prop(Boolean) closeable;
   @Prop(Boolean) expandable;

package/src/components/panels/PanelItemEdit.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-loading="loading" class="px-3 pt-2 h-100">
+    <itf-form
+      ref="editForm"
+      class="d-flex flex-column justify-content-between h-100"
+      @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>{{ $t('components.modal.cancel') }}</span>
+          </itf-button>
+          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
+            <span>{{ $t('components.modal.save') }}</span>
+          </itf-button>
+        </div>
+      </div>
+    </itf-form>
+  </div>
+</template>
+<style lang="scss" scoped>
+.sticky-container {
+  position: sticky;
+  top: auto;
+  bottom: 0;
+  z-index: 999;
+  background-color: var(--bs-body-bg);
+}
+</style>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import tooltip from '../../directives/tooltip';
+import loading from '../../directives/loading';
+import itfForm from '../form/Form.vue';
+import itfButton from '../button/Button.vue';
+
+@Component({
+  components: {
+    itfForm,
+    itfButton
+  },
+  directives: {
+    tooltip,
+    loading
+  },
+  filters: {
+  }
+})
+export default class PanelItemEdit extends Vue {
+  @Prop(Boolean) loading;
+  @Prop(Boolean) hideFooter;
+
+  onSaveClick() {
+    if (this.$refs.editForm && !this.$refs.editForm.doValidation()) {
+      return;
+    }
+    this.$emit('save');
+  }
+}
+</script>

package/src/components/panels/PanelLink.vue

@@ -1,9 +1,10 @@
 <template>
-  <a :href="link" :target="target" v-on="on"><slot></slot></a>
+  <a :href="link" :target="target" v-on="on" :class="{[activeClass]: isActive}"><slot></slot></a>
 </template>
 <script lang="ts">
 import { Vue, Component, Inject, Prop } from 'vue-property-decorator';
 import { IPanel } from './PanelList.vue';
+import {stackToHash} from "@itfin/components/src/components/panels/helpers";
 
 @Component({
   components: {
@@ -17,9 +18,12 @@ export default class PanelLink extends Vue {
   @Inject({ default: null }) panelList;
   @Inject({ default: null }) currentPanel;
 
+  @Prop(Boolean) global: boolean;
   @Prop(String) panel: string;
   @Prop() payload: payload;
   @Prop() target: string;
+  @Prop() list;
+  @Prop({ type: String, default: 'active' }) activeClass: string;
   @Prop(Boolean) append: boolean;
 
   get on() {
@@ -30,25 +34,41 @@ export default class PanelLink extends Vue {
     return handlers;
   }
 
+  get activeList() {
+    return this.list ?? this.panelList;
+  }
+
+  get isActive() {
+    if (!this.activeList) {
+      return false;
+    }
+    let stack = this.activeList.getCurrentStack();
+    return stack.find(s => s.type === this.panel);
+  }
+
   get link() {
-    let stack = this.panelList.getCurrentStack();
+    let stack = this.activeList?.getCurrentStack() ?? [];
     if (!this.append) {
-      stack = stack.splice(0, this.currentPanel.index + 1);
+      stack = stack.splice(0, this.currentPanel?.index + 1);
     }
-    const hash = this.panelList.getLink([
+    const hash = stackToHash([
       ...stack,
       {
         type: this.panel,
         payload: this.payload || {}
       }
     ]);
-    return `#${hash}`;
+    return hash;
   }
 
   onClick(e) {
+    console.info(this.activeList);
+    if (!this.activeList) {
+      return;
+    }
     e.preventDefault();
     e.stopPropagation();
-    this.panelList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel.index + 1);
+    this.activeList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel?.index + 1);
   }
 }
 </script>

package/src/components/panels/PanelList.vue

@@ -11,6 +11,7 @@
         <panel
           :key="n"
           :index="n"
+          :panel="panel"
           :title="panel.title"
           :nocard="panel.nocard"
           :icon="panel.icon"
@@ -129,25 +130,37 @@ $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;
 
   > div {
-    transition: opacity $an-time linear;
+    //transition: opacity $an-time linear;
   }
 }
 
-.slide-enter-active > div {
-  opacity: 0;
-}
-
-.opacity-null > div {
-  opacity: 0 !important;
-}
+//.slide-enter-active > div {
+//  opacity: 0;
+//}
+//
+//.opacity-null > div {
+//  opacity: 0 !important;
+//}
 </style>
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import Panel from './Panel.vue';
+import {hashToStack, stackToHash} from "@itfin/components/src/components/panels/helpers";
 
 interface VisualOptions {
   title: string;
@@ -177,6 +190,7 @@ export interface IPanel {
   getPayload: () => any;
   setPayload: (value: any) => void;
   __events: Record<string, ((event: string, ...args: any[]) => any)[]>;
+  permanentExpanded: boolean;
 }
 
 @Component({
@@ -199,7 +213,6 @@ export default class PanelList extends Vue {
 
   nextId:number = 0;
 
-
   created() {
     if (this.firstPanel) {
       this.internalOpenPanel(this.firstPanel.type, this.firstPanel.payload);
@@ -291,6 +304,7 @@ export default class PanelList extends Vue {
       this.$nextTick(() => { // щоб панелі змінювались при редагуванні
         const n = newStack.length;
         newPanel.isAnimate = isAnimation;
+        newPanel.permanentExpanded = !!this.panels[type].permanentExpanded;
         newPanel.emit = (event, ...args) => this.emitEvent(event, ...args);
         newPanel.open = (type, payload) => this.openPanel(type, payload, n + 1);
         newPanel.close = () => this.closePanel(newPanel);
@@ -362,7 +376,7 @@ export default class PanelList extends Vue {
       openPanel.isCollapsed = false;
     }
     const openPanelIndex = this.panelsStack.findIndex(p => p === openPanel);
-    if (openPanelIndex > 0) {
+    if (openPanelIndex > 0 && !openPanel?.permanentExpanded) {
       this.panelsStack[openPanelIndex - 1].isCollapsed = false;
     }
     this.ensureOnlyTwoOpenPanels(openPanel.id);
@@ -388,30 +402,17 @@ export default class PanelList extends Vue {
     return [...this.panelsStack];
   }
 
-  getLink(stack: IPanel[]) {
-    return stack.map(panel => {
-      return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
-    }).join('&');
-  }
-
   setPanelHash() {
-    const hash = this.getLink(this.panelsStack);
+    const hash = stackToHash(this.panelsStack).replace(/^#/, '');
     this.$router.push({ hash });
   }
 
   async parsePanelHash() {
     const {hash} = location;
     if (hash) {
-      const panels = hash.slice(1).split('&').map(item => {
-        const [type, payload] = item.split('=');
-        const isCollapsed = !item.includes('!');
-        return {
-          type: type.replace('!', ''),
-          isCollapsed,
-          payload: JSON.parse(decodeURIComponent(payload))
-        };
-      });
+      const panels = hashToStack(hash);
       const newStack = [];
+      this.panelsStack = [];
       for (const panelIndex in panels) {
         const panel = panels[panelIndex];
         if (this.panelsStack[panelIndex] && this.panelsStack[panelIndex].type === panel.type) {

package/src/components/panels/helpers.spec.ts

@@ -0,0 +1,27 @@
+import {stackToHash, hashToStack} from "./helpers";
+
+describe('panel helpers', () => {
+  test('stackToHash', () => {
+    const stack = [
+      { type: 'a', payload: { a: 1 }, isCollapsed: false },
+      { type: 'b', payload: { b: 2 }, isCollapsed: true },
+      { type: 'c', payload: { c: 3 }, isCollapsed: false }
+    ];
+    expect(stackToHash(stack)).toBe('a!={"a":1}&b={"b":2}&c!={"c":3}');
+  });
+  test('hashToStack', () => {
+    const stack = [
+      { type: 'a', payload: { a: 1 }, isCollapsed: false },
+      { type: 'b', payload: { b: 2 }, isCollapsed: true },
+      { type: 'c', payload: { c: 3 }, isCollapsed: false }
+    ];
+    expect(hashToStack('a!={"a":1}&b={"b":2}&c!={"c":3}')).toEqual(stack);
+    expect(hashToStack('a!={"a')).toEqual([
+      {
+        "isCollapsed": false,
+        "payload": {},
+        "type": "a"
+      }
+    ]);
+  });
+});

package/src/components/panels/helpers.ts

@@ -0,0 +1,37 @@
+export interface IPanel {
+  type: string;
+  payload?: any;
+  isCollapsed?: boolean;
+}
+
+export function stackToHash(stack: IPanel[]) {
+  const hash = stack.map(panel => {
+    return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
+  }).join('&');
+  return `#${hash}`;
+}
+
+
+export function hashToStack(hash: string|undefined): IPanel[] {
+  let stack:IPanel[] = [];
+  if (hash) {
+    const str = hash.replace(/^#/, '');
+
+    stack = str.split('&').map(item => {
+      const [type, payload] = item.split('=');
+      const isCollapsed = !type.includes('!');
+      let payloadObj:any = {};
+      try {
+        payloadObj = JSON.parse(decodeURIComponent(payload));
+      } catch (e) {
+        // ignore
+      }
+      return {
+        type: type.replace('!', ''),
+        isCollapsed,
+        payload: payloadObj
+      };
+    });
+  }
+  return stack;
+}

package/src/components/popover/NoticePopout.vue

@@ -5,7 +5,7 @@
 </template>
 <style scoped lang="scss">
 .notice {
-  position: absolute;
+  position: fixed;
   bottom: 10px;
   left: 50%;
   max-width: 740px;

package/src/components/select/Select.vue

@@ -632,7 +632,7 @@ export default {
       default(dropdownList, component, { width, top, left }) {
         dropdownList.style.top = top
         dropdownList.style.left = left
-        dropdownList.style.minWidth = width
+        dropdownList.style.minWidth = width;
         dropdownList.style.width = 'max-content';
       },
     },

package/src/components/sortable/draggable.js

@@ -7,13 +7,14 @@ const SORTABLE_ATTRIBUTES = ['drag-ignore-handle', 'scrollable'];
 
 const DEFAULT_OPTIONS = {
   draggableClass: DRAGGABLE_CLASS,
-  dragHandleClass: DRAG_HANDLE_CLASS,
+  // dragHandleClass: DRAG_HANDLE_CLASS,
   delay: 200,
   tresholdDistance: 2,
   draggable: `.${DRAGGABLE_CLASS}`,
   handle: `.${DRAG_HANDLE_CLASS}`,
   ignoreHandleClassList: SORTABLE_ATTRIBUTES,
   mirror: {
+    // appendTo: '.itf-table2 .itf-table2__header',
     yAxis: false,
     constrainDimensions: true
   },

package/src/components/table/Table2.vue

@@ -5,10 +5,12 @@
     'table-absolute': absolute,
     'table-clickable': clickable,
     'permanent-checkboxes': selectedIds.length
-  }" :style="{ '--indicator-area-width': `${indicatorType === 'none' ? 1 : indicatorWidth}px` }">
-    <itf-notice-popout :visible="showGroupOperations" class="rounded-pill bg-dark text-light">
-      <div class="d-flex gap-3 px-3 align-items-center">
-        <div><strong>{{selectedIds.length}}</strong> selected</div>
+  }" :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-3 align-items-center small itf-table2_mass-operations">
+        <div>{{$tc('components.table.selectedItems', selectedIds.length, { n: selectedIds.length })}}</div>
+        <div class="opacity-50">•</div>
+        <a href="" class="me-3 opacity-50 text-white text-decoration-none" @click.stop.prevent="selectedIds = []">{{$t('components.table.cancelSelected')}}</a>
         <div>
           <slot name="group-operations"></slot>
         </div>
@@ -29,6 +31,7 @@
             :title="group.name"
             :selected-ids.sync="selectedIds"
             :add-new-rows="addNewRows"
+            :shadow-width="shadowWidth"
             :column-sorting="columnSorting"
             :column-resizing="columnResizing"
             :show-grouping="showGrouping"
@@ -43,6 +46,7 @@
             :currencies="currencies"
             :currency="currency"
             :subrows-property="subrowsProperty"
+            :divider-property="dividerProperty"
             :indicator-type="indicatorType"
             :expanded-all="expandedAll"
             :indicatorWidth="indicatorWidth"
@@ -53,9 +57,9 @@
             :editable-property="editableProperty"
             :sorting.sync="_sorting"
             :active="active"
-            :sort-as-string="sortAsString"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
             @new="$emit('new', $event)"
+            @filter="$emit('filter', $event)"
             @add-column="$emit('add-column', $event)"
           >
             <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -103,9 +107,11 @@ class itfTable2 extends Vue {
   @Prop({ type: String, default: null }) idProperty;
   @Prop({ type: String, default: null }) cssProperty;
   @Prop({ type: String, default: null }) subrowsProperty;
+  @Prop({ type: String, default: null }) dividerProperty;
   @Prop({ type: String, default: null }) editableProperty;
   @Prop({ default: null }) active;
   @Prop({ default: 45 }) indicatorWidth;
+  @Prop({ default: 0 }) shadowWidth;
   @Prop({ type: String, default: null, validator: (val) => ['order', 'checkbox', 'toggle', 'property', 'none'].includes(val) }) indicatorType;
   @Prop({ type: String, default: null }) stateName; // save state to storage
   @Prop({ type: Object, default: () => ({}) }) schema;
@@ -114,7 +120,6 @@ class itfTable2 extends Vue {
   @Prop({ type: Array, default: () => [] }) expandedIds;
   @Prop() currency;
   @Prop() currencies;
-  @Prop(Boolean) sortAsString;
   @Prop(Boolean) stickyHeader;
   @Prop(Boolean) addNewRows;
   @Prop(Boolean) columnSorting;
@@ -138,7 +143,29 @@ class itfTable2 extends Vue {
   };
 
   get showGroupOperations() {
-    return !!this.$slots['group-operations'] && this.selectedIds.length > 0;
+    return !!(this.$slots['group-operations'] || this.$scopedSlots['group-operations']) && this.selectedIds.length > 0;
+  }
+
+  resetSettings() {
+    const list = this.schema?.properties || [];
+    this.state = {
+      selectedIds: [],
+      columns: [...list]
+    };
+    this.saveTableState();
+    this.onSchemaUpdate();
+  }
+
+  getColumnVisibility(property) {
+    return this.state.columns.find(i => i.property === property)?.visible ?? true;
+  }
+
+  toggleVisibility(property) {
+    const column = this.state.columns.find(i => i.property === property);
+    if (column) {
+      column.visible = !column.visible;
+    }
+    this.onColumnsUpdate(this.columns);
   }
 
   getTableState() {
@@ -153,6 +180,7 @@ class itfTable2 extends Vue {
     state.selectedIds = [];
     for (const column of list) {
       const stateColumnIndex = state.columns.findIndex(i => i.property === column.property);
+      column.visible = (typeof column.visible === 'undefined') ? true : !!column.visible;
       if (stateColumnIndex === -1) {
         state.columns.push(column);
       } else {
@@ -181,7 +209,6 @@ class itfTable2 extends Vue {
   }
 
   mounted() {
-    console.info(this.$scopedSlots)
     this.onSchemaUpdate();
   }
 

package/src/components/table/TableBody.vue

@@ -7,6 +7,7 @@
       :columns="columns"
       :id-property="idProperty"
       :subrows-property="subrowsProperty"
+      :divider-property="dividerProperty"
       :show-add-column="showAddColumn"
       :show-actions="showActions"
       :no-select-all="noSelectAll"
@@ -69,7 +70,7 @@
 
 .scroller > .table-view-item:last-child {
   .table-item-inner, .indicator {
-    border-bottom: 1px solid var(--itf-table-border-color);
+    border-bottom: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
   }
 }
 
@@ -91,31 +92,21 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--itf-table-min-width);
+  min-width: 1rem;//var(--itf-table-min-width);
 }
 
 .table-row-template, .table-view-header-value {
   .form-check {
+    font-size: 16px;
     padding: 0;
     margin-bottom: 0;
+    display: flex;
+    align-items: center;
 
     .form-check-input {
-      margin-left: 0;
-    }
-  }
-}
-.table-row-template {
-  .on-hover {
-    display: none;
-  }
-  &:hover, .permanent-checkboxes & {
-    .on-rest {
-      display: none;
-    }
-
-    .on-hover {
-      opacity: 1;
-      display: block;
+      --bs-form-check-bg: #fff;
+      margin: 0;
+      border: 1px solid #0000001A;
     }
   }
 }
@@ -153,6 +144,7 @@ class itfTableBody extends Vue {
   @Prop() rows;
   @Prop() idProperty;
   @Prop() subrowsProperty;
+  @Prop() dividerProperty;
   @Prop() active;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) showActions;