@itfin/components 1.3.42 → 1.3.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.42",
+  "version": "1.3.44",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -38,6 +38,7 @@
     "@popperjs/core": "^2.11.8",
     "@shopify/draggable": "^1.0.0-beta.8",
     "@vue/composition-api": "^1.7.1",
+    "@vue/vue2-jest": "^27.0.0",
     "@vue/web-component-wrapper": "^1.3.0",
     "air-datepicker": "^3.3.5",
     "bootstrap": "^5.3.x",
@@ -56,7 +57,6 @@
     "vue-virtual-scroller": "^1.1.2"
   },
   "devDependencies": {
-    "@vue/cli-service": "^5.0.1",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-syntax-numeric-separator": "^7.10.4",
@@ -67,6 +67,7 @@
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "^5.0.1",
     "@vue/eslint-config-airbnb": "^7.0.0",
     "@vue/test-utils": "^1.1.1",
     "babel-eslint": "^10.1.0",

package/src/components/filter/ConditionGroup.vue

@@ -0,0 +1,196 @@
+<template>
+
+  <div class="b-condition-group-input w-100 pt-1 pb-2 px-2">
+    <div class="d-flex align-items-start">
+      <div v-if="value.conditions.length > 1" class="condition-group-type">
+        <itf-select
+          :value="value.link"
+          :reduce="(item) => item.value"
+          :options="[{ label: 'AND', value: 'and' }, { label: 'OR', value: 'or' }]"
+          @input="onLinkUpdate"
+        />
+      </div>
+      <div class="flex-1 pt-1">
+        <div v-for="(filter, n) in value.conditions" :key="n" :class="{'tree-node': value.conditions.length > 1}">
+          <div class="d-flex align-items-start">
+            <div class="flex-grow-1 py-2 me-2">
+              <itf-condition-group
+                v-if="filter.link"
+                :level="level + 1"
+                class="rounded"
+                :value="filter"
+                @input="onFilterUpdate(n, $event)"
+                :class="{'bg-group1': level === 0, 'bg-group2': level === 1}"
+              />
+              <filter-input
+                v-else
+                :value="filter"
+                @input="onFilterUpdate(n, $event)"
+              />
+            </div>
+            <div class="pt-2 mt-1">
+              <itf-button small icon @click="removeField(n)">
+                <itf-icon name="trash" />
+              </itf-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <itf-button small secondary @click="addCondition">
+      <itf-icon name="plus" />
+      Add condition
+    </itf-button>
+    <itf-button v-if="level < maxDepth" small secondary @click="addConditionGroup">
+      <itf-icon name="plus" />
+      Add group
+    </itf-button>
+  </div>
+
+</template>
+<style>
+.b-condition-group-input {
+  --b-filterGroupBorder: rgba(0,0,0,.05);
+  --b-filterGroup1Bg: #f9fafb;
+  --b-filterGroup2Bg: #f1f2f4;
+
+  [data-theme="dark"] & {
+    --b-filterGroup1Bg: #303436;
+    --b-filterGroup2Bg: #3a3e41;
+    --b-filterGroupBorder: hsla(0,0%,100%,.03);
+  }
+}
+.bg-group1 {
+  background: var(--b-filterGroup1Bg);
+  border: 1px solid var(--b-filterGroupBorder);
+}
+.bg-group2 {
+  background: var(--b-filterGroup2Bg);
+  border: 1px solid var(--b-filterGroupBorder);
+}
+.condition-group-type {
+  width: 85px;
+  z-index: 10;
+  margin-right: 1rem;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+  position: relative;
+}
+.flex-1 {
+  flex: 1 1 0%;
+}
+.tree-node {
+  --h-line-position: 1.5rem;
+  --line-color: #D2D5DF;
+  --line-width: 1px;
+  --line-radius: 10px;
+  --line-connection-position: -3.5rem;
+  --node-space: .5rem;
+  margin-bottom: var(--node-space);
+  position: relative;
+
+  &:first-child:before {
+    border-left: solid var(--line-width) var(--line-color);
+    top: var(--h-line-position);
+    height: calc(100% - var(--h-line-position) + var(--node-space));
+    width: var(--line-radius);
+  }
+  &:before {
+    display: inline-block;
+    border-left: solid var(--line-width) var(--line-color);
+    content: "";
+    height: calc(100% + var(--node-space));
+    position: absolute;
+    left: var(--line-connection-position);
+  }
+  &:first-child:after {
+    height: var(--line-radius);
+  }
+  &:after {
+    display: inline-block;
+    border-top: solid var(--line-width) var(--line-color);
+    content: "";
+    width: calc(var(--line-connection-position)* -1);
+    position: absolute;
+    top: var(--h-line-position);
+    left: var(--line-connection-position);
+  }
+  &:last-child:before {
+    border-color: var(--line-color);
+    top: 0%;
+    height: var(--h-line-position);
+    width: var(--line-radius);
+    border-bottom-left-radius: var(--line-radius);
+  }
+  &:last-child:after {
+    border-top: none;
+    border-bottom: solid var(--line-width) var(--line-color);
+    border-left: solid var(--line-width) var(--line-color);
+    height: var(--line-radius);
+    border-bottom-left-radius: var(--line-radius);
+    top: calc(var(--h-line-position) - var(--line-radius));
+  }
+}
+</style>
+<script>
+import { Component, Prop, Model, Vue, Watch } from 'vue-property-decorator';
+import itfButton from '@itfin/components/src/components/button/Button.vue';
+import itfTextField from '@itfin/components/src/components/text-field/TextField.vue';
+import itfDropdown from '@itfin/components/src/components/dropdown/Dropdown.vue';
+import itfSelect from '@itfin/components/src/components/select/Select.vue';
+import itfIcon from '@itfin/components/src/components/icon/Icon.vue';
+import FilterInput from '~/components/Panels/FilterInput.vue';
+
+export default @Component({
+  name: 'itfConditionGroup',
+  components: {
+    itfTextField,
+    itfSelect,
+    itfDropdown,
+    itfButton,
+    itfIcon,
+    FilterInput
+  }
+})
+class ConditionGroup extends Vue {
+  @Model('input', { default: () => ({ link: 'and', conditions: [] }) }) value;
+  @Prop({ default: 0 }) level;
+  @Prop({ default: 1 }) maxDepth;
+
+  onLinkUpdate(link) {
+    this.$emit('input', { ...this.value, link });
+  }
+
+  onFilterUpdate(index, filter) {
+    this.applyValue((conditions) => {
+      conditions[index] = filter;
+    });
+  }
+
+  applyValue(func) {
+    const newValue = { ...this.value, conditions: [...this.value.conditions] };
+    func(newValue.conditions);
+    this.$emit('input', newValue);
+  }
+
+  addCondition() {
+    this.applyValue((conditions) => {
+      conditions.push({ operator: 'is', values: [] });
+    });
+  }
+
+  addConditionGroup() {
+    this.applyValue((conditions) => {
+      conditions.push({ link: 'and', conditions: [] });
+    });
+    // this.filters.push({ type: 'group' });
+  }
+
+  removeField(index) {
+    this.applyValue((conditions) => {
+      conditions.splice(index, 1);
+    });
+  }
+}
+</script>

package/src/components/filter/FilterInput.vue

@@ -0,0 +1,64 @@
+<template>
+
+  <div class="d-flex">
+    <div class="w-25">
+      <itf-select :options="fields" />
+    </div>
+    <div class="w-25 px-1">
+      <itf-select
+        :reduce="(item) => item.id"
+        :get-option-label="(item) => item.title"
+        :options="conditions"
+      >
+        <template #selected-option="{ option }">
+          <span class="sign-box"> {{option.title}}</span>
+        </template>
+        <template #option="{ option }">
+          {{option.title}}
+        </template>
+      </itf-select>
+    </div>
+    <div class="w-50">
+      <itf-text-field />
+    </div>
+  </div>
+
+</template>
+<style>
+</style>
+<script>
+import { Component, Prop, Model, Vue, Watch } from 'vue-property-decorator';
+import itfButton from '@itfin/components/src/components/button/Button.vue';
+import itfTextField from '@itfin/components/src/components/text-field/TextField.vue';
+import itfSelect from '@itfin/components/src/components/select/Select.vue';
+import itfDropdown from '@itfin/components/src/components/dropdown/Dropdown.vue';
+import itfIcon from '@itfin/components/src/components/icon/Icon.vue';
+
+const conditions = [
+  { id: 'eq', title: 'equal', sign: '=' },
+  { id: 'notEq', title: 'not equal', sign: '≠' },
+  { id: 'contains', title: 'contains', sign: '∋' },
+  { id: 'noContains', title: 'not contains', sign: '∌' },
+  { id: 'startsWith', title: 'starts with', sign: 'A…' },
+  { id: 'endsWith', title: 'ends with', sign: '…Z' },
+  // { id: 'exists', title: 'exists', sign: '∃' }
+];
+
+export default @Component({
+  name: 'itfFilterInput',
+  components: {
+    itfTextField,
+    itfSelect,
+    itfDropdown,
+    itfButton,
+    itfIcon
+  }
+})
+class FilterInput extends Vue {
+  @Prop() fields;
+
+  get conditions() {
+    return conditions;
+  }
+}
+</script>

package/src/components/panels/Panel.vue

@@ -0,0 +1,153 @@
+<template>
+  <div tabindex="-1" class="b-panel" :class="{'b-panel__collapsed': collapsed, 'b-panel__active': !collapsed}">
+    <div v-if="collapsed" class="b-panel__expand">
+      <itf-button v-if="closeable" icon small class="b-panel__expand_button" @click="closePanel">
+        <itf-icon name="cross" />
+      </itf-button>
+      <a href="" class="b-panel__expand_text_container" @click.stop.prevent="expandPanel">
+        <itf-icon v-if="icon" :name="icon" class="mt-2" />
+
+        <div class="b-panel__expand_text" v-text="title"></div>
+      </a>
+    </div>
+    <div v-show="!collapsed" class="b-panel-header">
+      <div>
+        <slot name="title">
+          <div class="b-panel__title" v-text="title"></div>
+        </slot>
+      </div>
+      <div>
+        <slot name="buttons"></slot>
+        <itf-button v-if="expandable" icon small class="b-panel__expand_button" @click="fullsizePanel">
+          <itf-icon name="expand" />
+        </itf-button>
+        <itf-button v-if="closeable" icon small class="b-panel__expand_button" @click="closePanel">
+          <itf-icon name="cross" />
+        </itf-button>
+      </div>
+    </div>
+    <div v-show="!collapsed" class="b-panel-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.b-panel {
+  --b-panel-bg: var(--bs-body-bg);
+  --b-panel-color: var(--bs-body-color);
+  --b-panel-box-shadow: 0px 2px 6px 0px rgba(21,23,25,.05);
+
+  margin-left: 8px;
+
+  display: flex;
+  flex-direction: column;
+  border-radius: 6px;
+  margin-bottom: 8px;
+  margin-right: 8px;
+  margin-top: 8px;
+  z-index: 0;
+  background: var(--b-panel-bg);
+  box-shadow: var(--b-panel-box-shadow);
+
+  &__collapsed {
+    flex-basis: 38px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    min-width: 38px;
+    overflow: hidden;
+    position: relative;
+  }
+  &__active {
+    overflow-y: hidden;
+
+    flex-basis: 0;
+    flex-grow: 3;
+    flex-shrink: 0;
+    min-width: 490px;
+  }
+  &__expand {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+    padding-top: 2px;
+  }
+  &__expand_text_container {
+    text-decoration: none;
+    align-items: center;
+    justify-content: start;
+    display: flex;
+    flex-basis: 0;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 0;
+    min-height: 0;
+  }
+  &__expand_text {
+    min-height: 0;
+    padding-bottom: 12px;
+    padding-top: 12px;
+    writing-mode: vertical-lr;
+  }
+}
+.b-panel-body {
+  overflow: auto;
+  position: relative;
+  z-index: 0;
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.b-panel-header {
+  align-items: center;
+  background: var(--b-panel-bg);
+  color: var(--b-panel-color);
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  min-height: 45px;
+  min-width: 0;
+  padding: 8px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+</style>
+<script>
+import { Vue, Prop, Component } from 'vue-property-decorator';
+import itfIcon from '@itfin/components/src/components/icon/Icon';
+import itfButton from '@itfin/components/src/components/button/Button.vue';
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfButton
+  },
+  directives: {
+  },
+  filters: {
+  }
+})
+class Panel extends Vue {
+  @Prop() title;
+  @Prop() icon;
+  @Prop() payload;
+  @Prop(Boolean) collapsed;
+  @Prop(Boolean) closeable;
+  @Prop(Boolean) expandable;
+
+  expandPanel() {
+    this.$emit('expand');
+  }
+
+  fullsizePanel() {
+    this.$emit('fullsize');
+  }
+
+  closePanel() {
+    this.$emit('close');
+  }
+}
+</script>

package/src/components/panels/PanelList.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="b-panel-list-container">
+    <div class="b-panel-list">
+      <template v-for="(panel, n) of panelsStack">
+        <panel
+          :key="n"
+          :title="panel.title"
+          :icon="panel.icon"
+          :payload="panel.payload"
+          :expandable="panelsStack.length > 1"
+          :collapsed="panel.isCollapsed"
+          :closeable="panel.isCloseable"
+          @expand="expandPanel(panel)"
+          @fullsize="fullsizePanel(panel)"
+          @close="closePanel(panel)"
+        >
+          <slot
+            :name="panel.type"
+            :panel="panel"
+            :payload="panel.payload"
+            :multiple="isOpenMultiple"
+            :open="(title, icon, type, payload) => openPanel(title, icon, type, payload, n + 1)"
+            :close="() => closePanel(panel)"
+            :expand="() => expandPanel(panel)"
+            :fullsize="() => fullsizePanel(panel)">
+          </slot>
+          <template v-if="$scopedSlots[`${panel.type}.title`]" #title>
+            <slot
+              :name="`${panel.type}.title`"
+              :panel="panel"
+              :payload="panel.payload"
+              :multiple="isOpenMultiple"
+              :open="(title, icon, type, payload) => openPanel(title, icon, type, payload, n + 1)"
+              :close="() => closePanel(panel)"
+              :expand="() => expandPanel(panel)"
+              :fullsize="() => fullsizePanel(panel)">
+            </slot>
+          </template>
+          <template v-if="$scopedSlots[`${panel.type}.buttons`]" #buttons>
+            <slot
+              :name="`${panel.type}.buttons`"
+              :panel="panel"
+              :payload="panel.payload"
+              :multiple="isOpenMultiple"
+              :open="(title, icon, type, payload) => openPanel(title, icon, type, payload, n + 1)"
+              :close="() => closePanel(panel)"
+              :expand="() => expandPanel(panel)"
+              :fullsize="() => fullsizePanel(panel)">
+            </slot>
+          </template>
+        </panel>
+      </template>
+    </div>
+  </div>
+</template>
+<style>
+.b-panel-list-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  flex-grow: 1;
+}
+.b-panel-list {
+  align-items: stretch;
+  //background: var(--bs-body-bg);
+  bottom: 0;
+  display: flex;
+  height: 100%;
+  left: 0;
+  overflow-x: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+</style>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import Panel from '~/components/Panels/Panel.vue';
+
+interface IPanel {
+  id: number;
+  title: string;
+  icon: string;
+  type: string;
+  payload: any;
+  isCollapsed: boolean;
+  isCloseable: boolean;
+}
+
+@Component({
+  components: {
+    Panel
+  },
+  directives: {
+  },
+  filters: {
+  }
+})
+export default class PanelList extends Vue {
+  @Prop() firstPanel: IPanel;
+
+  panelsStack:IPanel[] = [];
+
+  nextId:number = 0;
+
+  created() {
+    if (this.firstPanel) {
+      this.openPanel(this.firstPanel.title, this.firstPanel.icon, this.firstPanel.type, this.firstPanel.payload);
+    }
+  }
+
+  get isOpenMultiple() {
+    return this.panelsStack.filter(p => !p.isCollapsed).length > 1;
+  }
+
+  expandPanel(panel: IPanel) {
+    const newStack = [...this.panelsStack];
+    const index = newStack.findIndex(p => p.id === panel.id);
+    newStack[index].isCollapsed = false;
+    this.panelsStack = newStack;
+    this.ensureOnlyTwoOpenPanels(panel.id);
+  }
+
+  ensureOnlyTwoOpenPanels(keepOpenId: number) {
+    const newStack = [...this.panelsStack];
+    const openPanels = newStack.filter((panel) => !panel.isCollapsed);
+    if (openPanels.length > 1) {
+      const keepOpenIds = [keepOpenId];
+      const [panel1, panel2] = openPanels.filter((panel) => panel.id !== keepOpenId);
+      const indexKeep = newStack.findIndex(p => p.id === keepOpenId);
+      const index1 = newStack.findIndex(p => p === panel1);
+      const index2 = panel2 && newStack.findIndex(p => p === panel2);
+      if (index1 - 1 === indexKeep || index1 + 1 === indexKeep) {
+        keepOpenIds.push(panel1.id);
+      }
+      if (panel2 && (index2 - 1 === indexKeep || index2 + 1 === indexKeep)) {
+        keepOpenIds.push(panel2.id);
+      }
+      if (keepOpenIds.length === 1) {
+        if (newStack.length - 1 === indexKeep) {
+          keepOpenIds.push(newStack[indexKeep - 1].id);
+        } else {
+          keepOpenIds.push(newStack[indexKeep + 1].id);
+        }
+      }
+      for (const panel of newStack) {
+        panel.isCollapsed = !keepOpenIds.includes(panel.id);
+      }
+    }
+    this.panelsStack = newStack;
+  }
+
+  openPanel(title: string, icon: string, type: string, payload: any, openIndex?: number) {
+    const newPanel:IPanel = {
+      id: this.nextId++,
+      title,
+      icon,
+      type,
+      payload,
+      isCollapsed: false,
+      isCloseable: true
+    };
+    if (!this.panelsStack.length) {
+      newPanel.isCloseable = false;
+    }
+    let newStack = [...this.panelsStack];
+    if (openIndex) {
+      newStack = newStack.slice(0, openIndex);
+    }
+    newStack.push(newPanel);
+    this.panelsStack = newStack;
+    this.ensureOnlyTwoOpenPanels(newPanel.id);
+  }
+
+  closePanel(panel: IPanel) {
+    this.panelsStack = this.panelsStack.filter(p => p !== panel);
+    let openPanel = this.panelsStack.find(p => !p.isCollapsed);
+    if (!openPanel) {
+      openPanel = this.panelsStack[this.panelsStack.length - 1];
+      openPanel.isCollapsed = false;
+    }
+    const openPanelIndex = this.panelsStack.findIndex(p => p === openPanel);
+    if (openPanelIndex > 0) {
+      this.panelsStack[openPanelIndex - 1].isCollapsed = false;
+    }
+    this.ensureOnlyTwoOpenPanels(openPanel.id);
+  }
+
+  fullsizePanel(panel: IPanel) {
+    const newStack = [...this.panelsStack];
+    for (const p of newStack) {
+      p.isCollapsed = p !== panel;
+    }
+    this.panelsStack = newStack;
+  }
+}
+</script>

package/src/components/table/Table2.vue

@@ -132,6 +132,11 @@ class itfTable2 extends Vue {
   }
 
   mounted() {
+    this.onSchemaUpdate();
+  }
+
+  @Watch('schema')
+  onSchemaUpdate() {
     this.state = this.getTableState();
     this.selectedIds = this.state.selectedIds;
   }

package/src/components/table/TableBody.vue

@@ -30,7 +30,7 @@
             <itf-checkbox :value="item[idProperty]" />
           </div>
         </div>
-        <div accept-group="items" class="table-item-inner">
+        <div accept-group="items" class="table-item-inner" @click="$emit('row-click', item)">
           <template v-for="(column, k) in visibleAttributes">
             <div
               v-if="column.visible !== false"
@@ -38,7 +38,7 @@
               :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
               :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !(column.editable && editable), 'editable': column.editable && editable}"
               class="table-view-item-value d-flex h-100">
-              <slot :name="`column.${column.property}`" :item="item" :column="column">
+              <slot :name="`column.${column.property}`" :editable="column.editable && editable" :item="item" :column="column" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)">
                 <template v-if="column.editable && editable">
                   <slot :name="`edit.${column.type}`" :update="(val) => updateValue(item, val, n, column)" :value="getValue(item, column)" :item="item" :column="column">
                     <itf-text-field class="w-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
@@ -49,11 +49,12 @@
                       :hours="getValue(item, column)"
                       @update:hours="updateValue(item, $event, n, column)"
                     />
-                    <itf-textarea class="w-100" :rows="2" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                    <itf-textarea class="w-100" :rows="1" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
                     <itf-money-field class="w-100" currency-disabled :currency="currency" :currencies="currencies" v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                    <itf-select class="w-100" v-else-if="column.type === 'select'" :reduce="(item) => item.value" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" :options="column.options"></itf-select>
                   </slot>
                 </template>
-                <div v-else>
+                <div v-else class="h-100 align-items-center d-flex w-100">
                   <slot :name="`format.${column.type}`" :value="getValue(item, column)" :update="(value) => updateValue(item, value, n, column)" :item="item" :column="column">
                     {{getValue(item, column)}}
                   </slot>
@@ -76,15 +77,21 @@
         <div class="shadow-area"></div>
         <div class="indicator sticky"></div>
         <div class="table-item-inner">
-          <div class="table-view-item-value w-100 align-items-center p-3">
+          <div class="table-view-item-value w-100 align-items-center p-3 no-results">
             {{$t('components.table.noResults')}}
           </div>
+          <div class="boundary right"></div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <style lang="scss">
+.no-results {
+  text-align: center;
+  margin-left: -22px;
+  justify-content: center;
+}
 .table-row-template {
   display: flex;
   height: 100%;
@@ -97,6 +104,12 @@
   flex-direction: row;
 }
 
+.scroller > .table-view-item:last-child {
+  .table-item-inner, .indicator {
+    border-bottom: 1px solid var(--itf-table-border-color);
+  }
+}
+
 .table-item-inner .extra {
   flex-grow: 1;
   border-color: var(--bs-border-color);
@@ -203,6 +216,7 @@ import itfTextField from '../text-field/TextField.vue';
 import itfMoneyField from '../text-field/MoneyField.vue';
 import itfTextarea from '../text-field/Textarea.vue';
 import itfHoursField from '../text-field/HoursField.vue';
+import itfSelect from '../select/Select.vue';
 // import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 export default @Component({
@@ -213,6 +227,7 @@ export default @Component({
     itfHoursField,
     itfTextarea,
     itfTextField,
+    itfSelect,
     // RecycleScroller
   }
 })
@@ -242,7 +257,7 @@ class itfTableBody extends Vue {
   updateValue(item, value, index, column) {
     const newItem = { ...item };
     set(newItem, column.property, value);
-    this.$emit('update', { index, item, value: newItem });
+    this.$emit('update', { index, item, value: newItem, column });
   }
 }
 </script>

package/src/components/table/TableGroup.vue

@@ -105,7 +105,9 @@
                     </span>
                     <span v-else>
                       <span class="summary-text text-uppercase pe-2">{{getCalculateMethodTitle(column.calculate)}}</span>
-                      <span>{{getCalculateMethodValue(column.calculate, column)}}</span>
+                      <slot :name="`summary.${column.property}`" :value="getCalculateMethodValue(column.calculate, column)" :raw="!column.calculate.includes('count') && !column.calculate.includes('percent')">
+                        <span>{{getCalculateMethodValue(column.calculate, column)}}</span>
+                      </slot>
                     </span>
                   </span>
                 </template>
@@ -290,7 +292,7 @@
 import get from 'lodash/get';
 import sortBy from 'lodash/sortBy';
 import uniq from "lodash/uniq";
-import round from "lodash/round";
+import { round } from "../../helpers/formatters";
 import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfButton from '../button/Button.vue';
@@ -350,6 +352,7 @@ class itfTableGroup extends Vue {
       item.lastPinned = index === pinned.length - 1;
       return item
     });
+    console.info(list);
     return list;
   }
 

package/src/helpers/formatters.js

@@ -14,11 +14,11 @@ export function parseHours (str, { hoursInDay } = { hoursInDay: 8 }) {
     return isNegative * Math.round(parseFloat(source.replace(',', '.')) * MINUTES_IN_HOUR * SECONDS_IN_MINUTE);
   }
 
-  const match = source.match(/^((\d+)d)?\s*((\d+)h)?\s*((\d+)m)?$/);
+  const match = source.match(/^((\d+)d)?\s*((\d+)h)?\s*((\d+)m)?\s*((\d+)s)?$/);
   if (!match) {
     return false;
   }
-  const [,, days,, hours,, minutes] = match;
+  const [,, days,, hours,, minutes,,secs] = match;
 
   let seconds = 0;
   if (days) {
@@ -30,6 +30,9 @@ export function parseHours (str, { hoursInDay } = { hoursInDay: 8 }) {
   if (minutes) {
     seconds += Number(minutes) * SECONDS_IN_MINUTE;
   }
+  if (secs) {
+    seconds += Number(secs);
+  }
   return isNegative * seconds;
 }
 

package/src/helpers/formatters.spec.js

@@ -0,0 +1,17 @@
+import {
+  parseHours
+} from './formatters';
+
+describe('Formatters', () => {
+  const $t = (str) => str;
+
+  test('parseHours', () => {
+    expect(parseHours('10s')).toEqual(10);
+    expect(parseHours('12h')).toEqual(12 * 60 * 60);
+    expect(parseHours('10m')).toEqual(10 * 60);
+    expect(parseHours('12h 10m')).toEqual(12 * 60 * 60 + 10 * 60);
+    expect(parseHours('12h 10s')).toEqual(12 * 60 * 60 + 10);
+    expect(parseHours('12h 10m 10s')).toEqual(12 * 60 * 60 + 10 * 60 + 10);
+    expect(parseHours('1d 12h 10m 10s')).toEqual(8 * 60 * 60 + 12 * 60 * 60 + 10 * 60 + 10);
+  });
+});

package/src/components/filter/FilterBadge.vue

@@ -1,78 +0,0 @@
-<template>
-
-
-  <span class="b-filter-badge border rounded d-inline-flex ps-3 pe-1 gap-1 align-items-center">
-    Status
-
-    <itf-select
-      class="mx-2"
-      v-model="operator"
-      simple
-      :reduce="(item) => item.id"
-      :get-option-label="(item) => item.title"
-      :options="operators"
-    >
-      <template #selected-option="{ option }">
-        <span class="sign-box"> {{option.sign || option.title}}</span>
-      </template>
-      <template #option="{ option }">
-        <span class="sign-box" v-if="option.sign"> {{option.sign}}</span>
-        {{option.title}}
-      </template>
-      <template #open-indicator><div></div></template>
-    </itf-select>
-
-    <div>
-      <itf-select
-        simple
-        multiple
-        :get-option-label="(item) => item.title"
-        :options="[{ title:'text' }, { title:'text2' }]"
-      >
-      </itf-select>
-    </div>
-
-    <itf-button icon>
-      <itf-icon name="close" />
-    </itf-button>
-  </span>
-
-</template>
-<style>
-.b-filter-badge {
-  padding: 1px;
-
-  .sign-box {
-    height: 24px;
-    text-align: center;
-    line-height: 22px;
-    width: 24px;
-    border-radius: 0.25rem;
-    background-color: var(--bs-tertiary-bg);
-  }
-}
-</style>
-<script>
-import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
-import {getOperatorsByType} from "./constants";
-import itfButton from '../button/Button.vue';
-import itfSelect from '../select/Select.vue';
-import itfIcon from '../icon/Icon.vue';
-
-
-export default @Component({
-  name: 'itfFilterBadge',
-  components: {
-    itfButton,
-    itfSelect,
-    itfIcon
-  }
-})
-class itfFilterBadge extends Vue {
-  @Prop({ type: String, required: true }) type;
-
-  get operators() {
-    return getOperatorsByType(this.type);
-  }
-}
-</script>

package/src/components/filter/FilterControl.vue

@@ -1,105 +0,0 @@
-<template>
-
-
-  <div class="d-flex align-items-center">
-    <itf-text-field
-      style="width: 250px;"
-      prepend-icon="search"
-      placeholder="Search"
-      @change="onQueryChanged"
-    />
-
-    <itf-dropdown class="ms-3" :button-options="{ secondary: true }">
-      <template #button>
-        <itf-icon name="flip_view" class="me-1" />
-        Group
-      </template>
-
-      <div v-for="(filter, n) of filters" :key="n" class="dropdown-item">
-        <slot name="dropdown-item" :item="filter">{{filter.text}}</slot>
-      </div>
-    </itf-dropdown>
-
-    <template v-if="filters && filters.length">
-      <itf-dropdown class="mx-3" :button-options="{ secondary: true }">
-        <template #button>
-          <itf-icon name="filter" class="me-1" />
-          Filter
-        </template>
-
-        <div v-for="(filter, n) of filters" :key="n" class="dropdown-item">
-          <slot name="dropdown-item" :item="filter">{{filter.text}}</slot>
-        </div>
-      </itf-dropdown>
-
-      <div class="flex-grow-1">
-        <itf-filter-badge type="string" />
-      </div>
-    </template>
-  </div>
-
-</template>
-<style>
-</style>
-<script>
-import { Component, Prop, Model, Vue, Watch } from 'vue-property-decorator';
-import itfButton from '../button/Button.vue';
-import itfTextField from '../text-field/TextField.vue';
-import itfDropdown from '../dropdown/Dropdown.vue';
-import itfIcon from '../icon/Icon.vue';
-import itfFilterBadge from './FilterBadge.vue';
-
-export default @Component({
-  name: 'itfFilterControl',
-  components: {
-    itfFilterBadge,
-    itfTextField,
-    itfDropdown,
-    itfButton,
-    itfIcon
-  }
-})
-class itfFilterControl extends Vue {
-  @Model('input') value;
-  @Prop({ type: String, default: 'query' }) queryField;
-  @Prop({ type: Array, default: () => ([]) }) filters;
-  @Prop(Boolean) urlSync;
-
-  mounted() {
-    if (this.urlSync) {
-      if (window.itfinUrlWatcher) {
-        throw new Error('urlSync component already exists');
-      }
-      window.itfinUrlWatcher = this;
-    }
-  }
-
-  @Watch('$route')
-  onRouteChange() {
-    const newValue = { ...(this.value || {}) };
-    const query = this.$route.query;
-    if (query) {
-      Object.keys(query).forEach((key) => {
-        newValue[key] = query[key];
-      });
-    }
-    this.$emit('input', newValue);
-  }
-
-  beforeDestroy() {
-    if (this.urlSync) {
-      window.itfinUrlWatcher = null;
-    }
-  }
-
-  onQueryChanged(value) {
-    const newValue = { ...(this.value || {}) };
-    newValue[this.queryField] = value;
-    if (this.urlSync) {
-      this.$router.push({ ...this.$route, query: newValue });
-    } else {
-      this.$emit('input', newValue);
-    }
-  }
-}
-</script>

package/src/components/filter/Rule.vue

@@ -1,129 +0,0 @@
-<template>
-  <div class="form-group and-or-rule d-flex">
-    <div class="col-3">
-      <select class="form-control input-sm" v-model="key">
-        <option v-for="option in options.keys" :value="option.id">
-          {{option.name}}
-        </option>
-      </select>
-    </div>
-
-    <div style="width: 150px" class="px-2">
-      <select class="form-control input-sm input-filter" v-model="operator">
-        <option v-for="option in operators" :value="option.id">
-          {{option.title}}
-        </option>
-      </select>
-    </div>
-
-    <div class="col-3">
-      <input type="text" class="form-control input-sm" v-model="value" placeholder="">
-    </div>
-    <div class="col-3">
-      <itf-button small @click.prevent="deleteSelf()">
-        <itf-icon name="close" />
-      </itf-button>
-    </div>
-  </div>
-</template>
-<style>
-.input-filter {
-  background: var(--bs-primary-bg-subtle);
-}
-.and-or-rule {
-  position: relative;
-  margin-left: 15px !important;
-  padding-left: 0;
-}
-
-.and-or-rule:before,
-.and-or-rule:after {
-  content: '';
-  position: absolute;
-  left: -1px;
-  width: 16px;
-  height: calc(50% + 15px);
-  border-color: #c0c5e2;
-  border-style: solid;
-}
-
-.and-or-rule:before {
-  top: -15px;
-  border-width: 0 0 2px 2px;
-}
-
-.and-or-rule:after {
-  top: 50%;
-  border-width: 0 0 0 2px;
-}
-
-.and-or-rule:last-child:after {
-  border: none;
-}
-</style>
-<script>
-import { Component, Prop, Watch, Vue } from "vue-property-decorator";
-import itfButton from '../button/Button.vue';
-import itfIcon from '../icon/Icon.vue';
-
-const operations = [
-  {
-    type: 'string',
-    operators: [
-      { id: 'eq', title: 'equal' },
-      { id: 'notEq', title: 'not equal' },
-      { id: 'contains', title: 'contains' },
-      { id: 'noContains', title: 'not contains' },
-      { id: 'startsWith', title: 'starts with' },
-      { id: 'endsWith', title: 'ends with' }
-    ]
-  }
-];
-
-export default @Component({
-  name: 'itfRule',
-  components: { itfButton, itfIcon }
-})
-class itfRule extends Vue {
-  @Prop() options;
-  @Prop() type;
-
-  key = -99;
-
-  operator = -99;
-
-  value = '';
-
-  get operators() {
-    return operations.find(op => op.type === this.type)?.operators || [];
-  }
-
-  @Watch('options.keys.options')
-  onOptionUpdated() {
-    this.key = -99;
-  }
-
-  @Watch('options.conditions.options')
-  onOption2Updated() {
-    this.condition = -99;
-  }
-
-  deleteSelf () {
-    this.$emit('delete-rule');
-  }
-
-  queryFormStatus () {
-    return {
-      'key': this.key,
-      'operator': this.operator,
-      'value': this.value
-    }
-  }
-
-  fillRuleStatus (data) {
-    this.key = data.key;
-    this.operator = data.operator;
-    this.value = data.value;
-  }
-}
-</script>

package/src/components/filter/RuleGroup.vue

@@ -1,205 +0,0 @@
-<template>
-  <div>
-    <itf-dropdown>
-      <template #button>
-        <itf-icon name="filter" />
-        Filter
-      </template>
-
-      <div class="dropdown-item" @click="addGroup">Add group</div>
-      <div class="dropdown-item" @click="addRule">Add condition</div>
-    </itf-dropdown>
-    <div class="form-group and-or-top col-12">
-      <div class="col-5" style="padding: 0">
-        <button class="btn btn-xs btn-purple-outline btn-radius"
-                :class=" isAnd ? 'btn-purple-outline-focus' : '' " @click.prevent="clickAnd">
-          &nbsp;And&nbsp;
-        </button>
-        <button class="btn btn-xs btn-purple-outline btn-radius"
-                :class=" !isAnd ? 'btn-purple-outline-focus' : '' " @click.prevent="clickOr">
-          &nbsp;Or&nbsp;
-        </button>
-      </div>
-
-      <div class="col-7 btn-and-or">
-        <itf-button v-if="!first" class="btn btn-xs btn-purple pull-right" @click.prevent="deleteSelf()">
-          <i class="fa fa-fw fa-close"></i>
-        </itf-button>
-      </div>
-    </div>
-
-    <rule
-        v-for="(rule, index) in rules"
-        ref="rules"
-        :options="options"
-        :key="rule"
-        type="string"
-        @delete-rule="deleteRule(index)">
-    </rule>
-
-    <itf-rule-group
-        class="and-or-offset col-11"
-        v-for="(group, index) in groups" ref="groups"
-        :options="options" :key="group" @delete-group="deleteGroup(index)">
-    </itf-rule-group>
-
-  </div>
-</template>
-<style>
-.and-or-template {
-  position: relative;
-  margin-bottom: 20px;
-}
-
-.and-or-template:before,
-.and-or-template:after {
-  content: '';
-  position: absolute;
-  left: -17px;
-  width: 16px;
-  height: calc(50% + 18px);
-  border-color: #c0c5e2;
-  border-style: solid;
-}
-
-.and-or-template:before {
-  top: -18px;
-  border-width: 0 0 2px 2px;
-}
-
-.and-or-template:after {
-  top: 50%;
-  border-width: 0 0 0 2px;
-}
-
-.and-or-first:before,
-.and-or-first:after,
-.and-or-template:last-child:after {
-  border: none;
-}
-
-.and-or-top,
-.btn-and-or {
-  padding: 0;
-}
-
-.btn-and-or button {
-  margin-left: 4px;
-}
-
-.and-or-offset {
-  margin-left: 30px;
-}
-</style>
-<script>
-import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
-import itfButton from '../button/Button.vue';
-import itfIcon from '../icon/Icon.vue';
-import itfDropdown from '../dropdown/Dropdown.vue';
-import Rule from './Rule'
-
-export default @Component({
-  name: 'itfRuleGroup',
-  components: {
-    itfIcon,
-    itfButton,
-    itfDropdown,
-    Rule
-  }
-})
-class itfRule extends Vue {
-  @Prop({ type: Object, required: true }) options;
-  @Prop({ type: Boolean, default: false }) first;
-
-  isAnd = true;
-  groups = [];
-  rules = [];
-
-  created () {
-    this.addRule();
-  }
-
-  clickAnd () {
-    this.isAnd = true;
-  }
-
-  clickOr () {
-    this.isAnd = false;
-  }
-
-  addRule () {
-    var id = this.generateId();
-    this.rules.push(id);
-  }
-
-  addGroup () {
-    var id = this.generateId();
-    this.groups.push(id);
-  }
-
-  deleteSelf () {
-    this.$emit('delete-group');
-  }
-
-  deleteRule (index) {
-    this.rules.splice(index, 1);
-  }
-
-  deleteGroup (index) {
-    this.groups.splice(index, 1);
-  }
-
-  queryFormStatus () {
-    var query = {};
-    var rules = this.$refs.rules || {};
-    var groups = this.$refs.groups || {};
-    var i, j;
-
-    query['condition'] = this.isAnd ? 'AND' : 'OR';
-    query['rules'] = [];
-    for(i = 0; i < rules.length; i++){
-      query.rules.push(rules[i].queryFormStatus ());
-    }
-    for(j = 0; j < groups.length; j++){
-      query.rules[query.rules.length] = groups[j].queryFormStatus();
-    }
-    return query;
-  }
-
-  fillFormStatus (data) {
-    var i, len;
-    var group = this;
-    group.rules = [];
-    group.groups = [];
-    if(data){
-      group.isAnd = /and/i.test(data.condition);
-      len = data.rules.length;
-      for(i = 0; i < len; i++){
-        if(data.rules[i].condition){
-          group.groups.push(group.generateId());
-          (function (i, index) {
-            group.$nextTick(function () {
-              group.$refs.groups[index].fillFormStatus(data.rules[i]);
-            });
-          })(i, group.groups.length - 1);
-        }
-        else {
-          group.rules.push(group.generateId());
-          (function (i, index) {
-            group.$nextTick(function () {
-              group.$refs.rules[index].fillRuleStatus(data.rules[i]);
-            });
-          })(i, group.rules.length - 1);
-        }
-      }
-    }
-  }
-
-  generateId () {
-    return 'xxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-      return v.toString(16);
-    });
-  }
-}
-</script>