@itfin/components 1.4.0 → 1.4.1

package/package.json

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

package/src/components/filter/FilterPanel.vue

@@ -128,8 +128,9 @@ class FilterPanel extends Vue {
     if (this.endpoint) {
       this.loading = true;
       await this.$try(async () => {
-        const {filters} = await this.$axios.$get(this.endpoint);
+        const {filters, tableSchema} = await this.$axios.$get(this.endpoint);
         this.filters = filters;
+        this.$emit('set-table-schema', tableSchema);
         this.loadFiltersValue();
       });
       this.loading = false;
@@ -253,7 +254,7 @@ class FilterPanel extends Vue {
       if (value.value && value.value.length > 1) {
         value.label = `${value.label} та ще ${value.value.length - 1}`;
       }
-      value.isDefault = facet.options.defaultValue ? JSON.stringify(value.value) === JSON.stringify(facet.options.defaultValue.value) : false;
+      value.isDefault = facet.options.defaultValue && value.value.length === 1 ? JSON.stringify(value.value[0]) === JSON.stringify(facet.options.defaultValue.value) : false;
     } else if (facet.type === 'amount') {
       if (value.value === null || (Array.isArray(value.value) && value.value.every(v => v === null))) {
         value.value = facet.options.defaultValue.value;

package/src/components/icon/components/nomi-export.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4 5V8C11.4 8.88366 12.1163 9.6 13 9.6H16V15.7372L15.8527 15.5899C15.2279 14.9651 14.2148 14.9651 13.59 15.5899C12.9651 16.2148 12.9651 17.2278 13.59 17.8527L14.7373 19H7C6.44772 19 6 18.5523 6 18V6C6 5.44772 6.44772 5 7 5H11.4ZM12.6 5.6V8C12.6 8.22091 12.7791 8.4 13 8.4H15.4L12.6 5.6ZM18.1456 20.1456C18.0881 20.2031 18.0218 20.2465 17.951 20.2758C17.8803 20.3051 17.8027 20.3213 17.7213 20.3213C17.6401 20.323 17.4416 20.2901 17.2971 20.1456L14.2971 17.1456C14.0627 16.9113 14.0627 16.5314 14.2971 16.297C14.5314 16.0627 14.9113 16.0627 15.1456 16.297L17.1213 18.2728V13.7213C17.1213 13.3899 17.39 13.1213 17.7213 13.1213C18.0527 13.1213 18.3213 13.3899 18.3213 13.7213V18.2728L20.2971 16.297C20.5314 16.0627 20.9113 16.0627 21.1456 16.297C21.3799 16.5314 21.3799 16.9113 21.1456 17.1456L18.1456 20.1456Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-lock.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.3999C13.9882 4.3999 15.6 6.01168 15.6 7.9999V10.0489C16.033 10.1018 16.3329 10.2114 16.5607 10.4392C17 10.8786 17 11.5857 17 12.9999V14.9999C17 16.4141 17 17.1212 16.5607 17.5606C16.1213 17.9999 15.4142 17.9999 14 17.9999H10C8.58579 17.9999 7.87868 17.9999 7.43934 17.5606C7 17.1212 7 16.4141 7 14.9999V12.9999C7 11.5857 7 10.8786 7.43934 10.4392C7.66715 10.2114 7.96695 10.1018 8.4 10.0489L8.4 7.9999C8.4 6.01168 10.0118 4.3999 12 4.3999ZM14.4 7.9999V10.0003C14.2733 9.99991 14.1401 9.99991 14 9.99991H10C9.85987 9.99991 9.72668 9.99991 9.6 10.0003L9.6 7.9999C9.6 6.67442 10.6745 5.5999 12 5.5999C13.3255 5.5999 14.4 6.67442 14.4 7.9999ZM12.6 12.9999C12.6 12.6685 12.3314 12.3999 12 12.3999C11.6686 12.3999 11.4 12.6685 11.4 12.9999V14.9999C11.4 15.3313 11.6686 15.5999 12 15.5999C12.3314 15.5999 12.6 15.3313 12.6 14.9999V12.9999Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/table/Table2.vue

@@ -56,6 +56,7 @@
             :sticky-header="stickyHeader"
             :editable-property="editableProperty"
             :sorting.sync="_sorting"
+            :sort-as-string="sortAsString"
             :active="active"
             @update:expanded-ids="$emit('update:expanded-ids', $event)"
             @new="$emit('new', $event)"
@@ -102,6 +103,7 @@ 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;

package/src/components/table/TableGroup.vue

@@ -39,6 +39,7 @@
             :show-add-column="showAddColumn"
             :show-actions="showActions"
             :id-property="idProperty"
+            :sort-as-string="sortAsString"
             :rows="rows"
             :schema="schema"
             :editable="editable"
@@ -66,6 +67,7 @@
             :editable="editable"
             :currency="currency"
             :currencies="currencies"
+            :sort-as-string="sortAsString"
             :columns="visibleColumns"
             :no-select-all="noSelectAll"
             :selected-ids="selectedIds"
@@ -378,6 +380,7 @@ class itfTableGroup extends Vue {
   @Prop(Boolean) expandedAll;
   @Prop(Boolean) striped;
   @Prop(Boolean) stickyHeader;
+  @Prop(Boolean) sortAsString;
   @Prop() indicatorWidth;
   @Prop() shadowWidth;
   @Prop() cssProperty;

package/src/components/table/TableHeader.vue

@@ -194,6 +194,7 @@ class itfTableHeader extends Vue {
   @Prop(Boolean) noColumnMenu;
   @Prop(Boolean) noSelectAll;
   @Prop(Boolean) editable;
+  @Prop(Boolean) sortAsString;
   @Prop() idProperty;
   @Prop() indicatorType;
 
@@ -411,8 +412,10 @@ class itfTableHeader extends Vue {
   }
 
   sortBy(column, order) {
-    let sort = order === 'desc' ? `-${column.property}` : column.property;
-    console.info(sort);
+    let sort = { [column.property]: order };
+    if (this.sortAsString) {
+      sort = order === 'desc' ? `-${column.property}` : column.property;
+    }
     this.$emit('update:sorting', sort);
   }
 }

package/src/components/table/table2.scss

@@ -7,7 +7,7 @@
   --itf-table-alt-bg: #F9FAFB;
   --itf-table-alt-selected-bg: #eff1f3;
   --itf-table-header-bg: #f5f7f8;
-  --itf-table-header-color: #8E97A5;
+  --itf-table-header-color: #575b63;
   --itf-table-mirror-bg: #F2F4F7;
   --itf-table-border-color: transparent; //var(--itf-table-header-bg);
   --itf-table-header-border-color: #8E97A533;

package/src/components/text-field/TextField.vue

@@ -1,9 +1,9 @@
 <template>
 
-  <div class="itf-text-field input-group form-control p-0" :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }">
+  <div class="itf-text-field input-group" :class="{ 'with-addon addon-start': prependIcon, 'with-addon addon-end': clearable }">
     <slot name="addon">
-      <div class="input-group-text" v-if="prependIcon">
-        <itf-icon :size="small ? 18 : 20" :name="prependIcon"/>
+      <div class="addon" v-if="prependIcon">
+        <itf-icon :name="prependIcon"/>
       </div>
     </slot>
 
@@ -11,7 +11,7 @@
       ref="input"
       autocomplete="off"
       :placeholder="placeholder"
-      :class="{ 'form-control-sm': small }"
+      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess(), 'form-control-sm': small }"
       class="itf-text-field__input form-control"
       :type="type"
       :value="value"
@@ -24,13 +24,12 @@
       @blur="$emit('blur', $event)"
       @focus="$emit('focus', $event)"
       @change="$emit('change', $event.target.value)"
-      :maxlength="maxlength"
       :min="min"
       :max="max"
       :step="step"
     />
 
-    <template v-if="clearable && value">
+    <div class="addon-end" v-if="clearable && value">
       <slot name="clear">
         <itf-button
           icon
@@ -40,7 +39,7 @@
           <itf-icon name="close" />
         </itf-button>
       </slot>
-    </template>
+    </div>
   </div>
 
 </template>
@@ -65,13 +64,10 @@ class itfTextField extends Vue {
   @Prop() step;
   @Prop() min;
   @Prop() max;
-  @Prop() maxlength;
   @Prop(Boolean) clearable;
   @Prop(Boolean) disabled;
   @Prop(Boolean) readonly;
   @Prop(Boolean) small;
-  @Prop(Boolean) invalid;
-  @Prop(Boolean) valid;
   @Prop({ type: String, default: 'text' }) type;
   @Prop({ type: [Number, String], default: 0 }) delayInput;
 
@@ -82,11 +78,11 @@ class itfTextField extends Vue {
   }
 
   isInvalid() {
-    return typeof this.invalid !== 'undefined' ? this.invalid : (this.itemLabel && this.itemLabel.isHasError());
+    return this.itemLabel && this.itemLabel.isHasError();
   }
 
   isSuccess() {
-    return typeof this.valid !== 'undefined' ? this.valid : (this.itemLabel && this.itemLabel.isHasSuccess());
+    return this.itemLabel && this.itemLabel.isHasSuccess();
   }
 
   insertTextToCurrentPosition(text) {

package/src/components/view/View.vue

@@ -4,22 +4,22 @@
     <itf-filter-panel
       :search-placeholder="searchPlaceholder"
       search
-      :mini="panel.isMultiple()"
       class="py-2 px-3"
       :endpoint="filtersEndpoint"
       :panel="panel"
       v-model="filter"
       @input="onFilterSet"
+      @set-table-schema="setTableSchema"
     >
       <template #after-filter-btn>
-        <itf-dropdown v-if="$refs.table && schema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
+        <itf-dropdown v-if="$refs.table && tableSchema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
           <template #button>
             <itf-icon new name="table-view" />
           </template>
           <div class="dropdown-header">
             {{ $t('components.table.columns') }}
           </div>
-          <a v-for="(property, n) of schema.properties" :key="n" href="" @click.stop.prevent="$refs.table.toggleVisibility(property.property)" class="dropdown-item justify-content-between d-flex gap-3">
+          <a v-for="(property, n) of tableSchema.properties" :key="n" href="" @click.stop.prevent="$refs.table.toggleVisibility(property.property)" class="dropdown-item justify-content-between d-flex gap-3">
             <div class="d-flex align-items-center gap-1">
               <itf-icon v-if="property.icon" :size="24" new :name="property.icon" />
               {{getTitle(property.title)}}
@@ -56,7 +56,7 @@
           :state-name="stateName"
           id-property="id"
           :rows="items"
-          :schema="schema"
+          :schema="tableSchema"
           :sorting="sorting"
           :active="activeIds"
           :show-actions="showActions"
@@ -120,7 +120,8 @@ class itfView extends Vue {
 
   @Prop({ type: Boolean }) loading;
   @Prop({ type: Array }) filters;
-  @Prop({ type: Object, required: true }) schema;
+  // @Prop({ type: Object, required: true }) schema;
+  @Prop({ type: Object }) schema;
   // @Prop({ default: 20 }) size;
   // @Prop({ default: 1 }) page;
   @Prop(String) defaultSorting;
@@ -141,14 +142,30 @@ class itfView extends Vue {
   filter = {};
   loadingData = false;
   activeIds = [];
+  tableColumns = [];
 
-  created() {
-    const defaultSize = localStorage.getItem('sizePerPage') ?? 20;
+  get tableSchema() {
+    console.log(123, this.tableColumns, this.schema)
+    // return this.tableColumns || this.schema;
+    if (this.tableColumns) {
+      return {
+        properties: this.tableColumns
+      }
+    } else if (this.schema) {
+      return this.schema
+    } else {
+      return {}
+    }
+  }
 
-    const { page, size, sorting } = this.panel.getPayload() ?? {};
-    this.page = page ?? 1;
-    this.size = size ?? defaultSize;
-    this.sorting = sorting ?? this.defaultSorting;
+  created() {
+    // const defaultSize = localStorage.getItem('sizePerPage') ?? 20;
+    //
+    // const { page, size, sorting } = this.panel.getPayload() ?? {};
+    // this.page = page ?? 1;
+    // this.size = size ?? defaultSize;
+    // this.sorting = sorting ?? this.defaultSorting;
+    this.sorting = this.defaultSorting;
   }
 
   mounted() {
@@ -218,27 +235,31 @@ class itfView extends Vue {
   }
 
   setPanelPayload(payload) {
-    this.panel.setPayload(assignWithoutUndefined(this.panel.getPayload(), payload));
-
-    function assignWithoutUndefined(...sources) {
-      const target = {};
-      sources.forEach(source => {
-        if (source && typeof source === 'object') {
-          Object.entries(source).forEach(([key, value]) => {
-            if (value !== undefined) {
-              target[key] = value;
-            }
-          });
-        }
-      });
-      return target;
-    }
+    // this.panel.setPayload(assignWithoutUndefined(this.panel.getPayload(), payload));
+    //
+    // function assignWithoutUndefined(...sources) {
+    //   const target = {};
+    //   sources.forEach(source => {
+    //     if (source && typeof source === 'object') {
+    //       Object.entries(source).forEach(([key, value]) => {
+    //         if (value !== undefined) {
+    //           target[key] = value;
+    //         }
+    //       });
+    //     }
+    //   });
+    //   return target;
+    // }
   }
 
   onFilterSet(filter) {
     this.page = 1;
-    this.setPanelPayload({ ...filter, page: 1 });
+    // this.setPanelPayload({ ...filter, page: 1 });
     this.loadData();
   }
+
+  setTableSchema(tableSchema) {
+    this.tableColumns = tableSchema;
+  }
 }
 </script>

package/src/components/table/TableRow.vue

@@ -1,221 +0,0 @@
-<template>
-
-  <div
-    class="table-row-template flex items-stretch" view-settings="[object Object]">
-    <div accept-group="items" class="table-view-body-space"
-    ></div>
-    <div class="bg-light dark:bg-light-invert shadow-area">
-      <div class="toggler-wrapper"><!----></div>
-      <div class="handle-wrapper hover-only"><a
-        href="" class="context-menu-toggle table-item-options-menu"
-      >
-        <div class="v-popper--has-tooltip drag-handle"><i
-          data-test="table-item-options"
-          class="ic-drag"></i>
-        </div> <!----></a></div>
-    </div>
-    <div class="indicator">
-      <div class="fill on-rest table-view-row-count"><span
-      >1</span></div>
-      <div class="fill on-hover"><a
-        href=""
-        data-test="table-item-expand"><i
-        class="ic-expand"></i></a>
-        <div class="top"><a
-          data-test="table-row-generator" href=""><i
-          class="ic-plus"></i></a>
-        </div>
-        <div class=""><a
-          data-test="table-row-generator"
-          href=""><i
-          class="ic-plus"></i></a></div>
-      </div>
-    </div>
-    <div accept-group="items" class="hbox table-item-inner">
-      <div data-column="0" class="sticky last-sticky-column"
-           style="width: 240px; left: 83px;">
-        <div
-          class="table-view-item-value flex relative h-full border-b border-r border-gray bg-white dark:bg-white-invert dark:border-gray-invert hover:bg-light dark:hover:bg-gray-invert items-stretch"
-        >
-          <div
-            class="flex-auto flex gap-2 items-start p-3 show-hidden-hover overflow-hidden">
-            <a href=""
-               class="context-menu-toggle h-full line-overflow cursor-pointer flex-auto"><span>
-                Jun 30th
-            </span> <!----></a> <!---->
-            <div class="flex items-center justify-end hover-show"><a href="" tabindex="0"
-                                                                     class="text-sm p-2 ic-exit"></a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div data-column="1" class="" style="width: 400px;">
-        <div
-          class="table-view-item-value flex relative h-full border-b border-r border-gray bg-white dark:bg-white-invert dark:border-gray-invert hover:bg-light dark:hover:bg-gray-invert items-stretch"
-        ><textarea
-          data-test="table-text-value" rows="2" type="text"
-          wrap="hard"
-          class="h-full px-3 input-inline text-value w-full hide-scrollbar !leading-[35px] whitespace-nowrap"></textarea>
-        </div>
-      </div>
-      <div data-column="2" class="" style="width: 240px;">
-        <div
-          class="table-view-item-value flex relative h-full border-b border-r border-gray bg-white dark:bg-white-invert dark:border-gray-invert hover:bg-light dark:hover:bg-gray-invert items-stretch"
-        >
-          <div
-            class="flex-auto flex gap-2 items-start p-3 show-hidden-hover overflow-hidden">
-            <a href=""
-               class="context-menu-toggle h-full line-overflow cursor-pointer flex-auto"><span>
-                Jul 13th
-            </span> <!----></a> <!---->
-            <div class="flex items-center justify-end hover-show"><a href="" tabindex="0"
-                                                                     class="text-sm p-2 ic-exit"></a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div data-column="3" class="" style="width: 120px;">
-        <div
-          class="table-view-item-value flex relative h-full border-b border-r border-gray bg-white dark:bg-white-invert dark:border-gray-invert hover:bg-light dark:hover:bg-gray-invert items-stretch"
-        ><a href=""
-            class="context-menu-toggle table-value-label flex flex-auto p-3 w-full"><span
-          class="table-value-label-selected w-full h-full vbox"><span
-          class="flex gap-2 hide-scrollbar overflow-auto"><span
-          title="Upcoming"
-          class="label-value"
-          style="--label-color: #A7E6FF; --label-text: #4C4E69;">
-    Upcoming
-          <!----></span></span></span> <!----></a></div>
-      </div>
-      <div
-        class="extra border-b border-r border-gray dark:border-gray-invert"></div>
-      <div class="boundary top"></div>
-      <div class="boundary right"></div>
-      <div class="boundary bottom"></div>
-      <div class="boundary left"></div> <!----></div>
-  </div>
-
-</template>
-<script>
-import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
-import itfButton from '../button/Button.vue';
-import itfIcon from '../icon/Icon.vue';
-
-export default @Component({
-  name: 'itfTable',
-  components: {
-    itfButton,
-    itfIcon,
-  }
-})
-class itfTable extends Vue {
-  @PropSync('sorting', { type: Object, default: () => ({}) }) sortedColumns;
-  @Prop({ required: true, type: Array }) columns;
-  @Prop({ required: true, type: Array }) rows;
-  @Prop({ default: false, type: Boolean }) stickyHeader;
-  @Prop({ default: false, type: Boolean }) stickyColumn;
-  @Prop({ default: false, type: Boolean }) stickyLastColumn;
-  @Prop({ default: false, type: Boolean }) loading;
-  @Prop({ default: false, type: Boolean }) striped;
-  @Prop({ default: false, type: Boolean }) hoverable;
-  @Prop({ default: false, type: Boolean }) small;
-
-  sortDirection = 'asc';
-  scrolledX = false;
-  scrolledEnd = false;
-  scrolledY = false;
-  stickyObserver = null;
-
-  scrollFunc = null;
-
-  mounted() {
-    if (this.$refs.scrollContainer && this.$refs.scrollContainer2) {
-      this.scrollFunc = initSyncScroll(this.$refs.scrollContainer, this.$refs.scrollContainer2, (isEnd) => {
-        this.scrolledX = true;
-        this.scrolledEnd = isEnd;
-      }, () => {
-        this.scrolledX = false;
-      });
-    } else {
-      setTimeout(() => {
-        this.scrollFunc = initSyncScroll(this.$refs.scrollContainer, this.$refs.scrollContainer2, (isEnd) => {
-          this.scrolledX = true;
-          this.scrolledEnd = isEnd;
-        }, () => {
-          this.scrolledX = false;
-        });
-      }, 1000);
-    }
-
-    if (this.$refs.stickyHeader) {
-      this.stickyObserver = new IntersectionObserver(([e]) => {
-        return this.scrolledY = e.intersectionRatio < 1;
-      }, {
-        rootMargin: `-${this.$refs.stickyHeader.offsetHeight + 5}px 0px 0px 0px`,
-        threshold: [1]
-      });
-      this.stickyObserver.observe(this.$refs.stickyHeader);
-    }
-    function initSyncScroll(el1, el2, stuck, unstuck) {
-      function isScrolledEnd(el) {
-        return el.scrollWidth === el.getBoundingClientRect().width // якщо контейнер менший ширини екрану
-          || el.scrollLeft === el.scrollWidth - el.getBoundingClientRect().width; // якщо контейнер більший ширини екрану
-      }
-
-      function func1() {
-        el2.scrollLeft = el1.scrollLeft;
-        if (el1.scrollLeft > 0) {
-          stuck(isScrolledEnd(el1));
-        } else {
-          unstuck();
-        }
-      }
-
-      function func2() {
-        el1.scrollLeft = el2.scrollLeft;
-        if (el2.scrollLeft > 0) {
-          stuck(isScrolledEnd(el2));
-        } else {
-          unstuck();
-        }
-      }
-
-      if (isScrolledEnd(el1)) {
-        stuck(true);
-        unstuck();
-      }
-
-      el1.addEventListener('scroll', func1);
-      el2.addEventListener('scroll', func2);
-
-      return [func1, func2];
-    }
-  }
-
-  beforeDestroy() {
-    if (this.scrollFunc) {
-      const [func1, func2] = this.scrollFunc;
-      this.$refs.scrollContainer.removeEventListener('scroll', func1);
-      this.$refs.scrollContainer2.removeEventListener('scroll', func2);
-    }
-  }
-
-  get columnsGridStyle() {
-    return this.columns.map((column) => {
-      if (column.min) {
-        return `minmax(${column.min}px, ${column.max ? `${column.max}px` : 'auto'})`;
-      }
-      return `${column.fraction || 1}fr`;
-    }).join(' ');
-  }
-
-  sortBy(column, index) {
-    if (!column.sortable) {
-      return;
-    }
-    const { name } = this.columns[index];
-    const direction = this.sortedColumns[name] === 'asc' ? 'desc' : 'asc';
-    this.sortedColumns = { [name]: direction };
-  }
-}
-</script>