@itfin/components 2.0.1 → 2.0.3

package/src/components/icon/new-icons/scissors.svg

@@ -0,0 +1,3 @@
+<svg style="transform: rotate(-90deg);" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="-1 -1 19 19">
+  <path d="M3.5 3.5c-.614-.884-.074-1.962.858-2.5L8 7.226 11.642 1c.932.538 1.472 1.616.858 2.5L8.81 8.61l1.556 2.661a2.5 2.5 0 1 1-.794.637L8 9.73l-1.572 2.177a2.5 2.5 0 1 1-.794-.637L7.19 8.61zm2.5 10a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m7 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>
+</svg>

package/src/components/modal/DeleteConfirmModal.vue

@@ -27,7 +27,6 @@
             @click="$emit('cancel')"
           >
             <span v-html="$t('components.popover.noKeepIt')"></span>
-            <kbd>Esc</kbd>
           </button>
           <button
             type="button"
@@ -36,7 +35,6 @@
             @click="onConfirm"
           >
             <span v-html="$t('components.popover.yesDelete')"></span>
-            <kbd>↵</kbd>
           </button>
         </div>
       </div>

package/src/components/modal/ItemEditor.vue

@@ -43,15 +43,13 @@
 
         <itf-button
           v-if="!readonly"
-          squircle
           data-test="item-editor-cancel"
           :disabled="loading"
-          secondary
+          default
           class="me-2"
           @click="$emit('input', false)"
         >
           <span class="me-1">{{ $t('components.modal.cancel') }}</span>
-          <kbd>Esc</kbd>
         </itf-button>
 
         <slot
@@ -60,14 +58,12 @@
         >
           <itf-button
             primary
-            squircle
             data-test="item-editor-save"
             :disabled="loading"
             :loading="loading"
             @click="submitSaveItem()"
           >
             <span class="me-1">{{ saveBtnCaption }}</span>
-            <kbd>Shift + ↵</kbd>
           </itf-button>
         </slot>
       </slot>

package/src/components/panels/Panel.vue

@@ -14,7 +14,7 @@
       <slot name="header">
         <div>
           <slot name="title">
-            <div class="b-panel__title ps-1 fw-bold h5" v-text="title"></div>
+            <div class="b-panel__title ps-1 fw-bold h2" v-text="title"></div>
           </slot>
         </div>
         <div class="d-flex gap-1">

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/table/TableGroup.vue

@@ -17,10 +17,10 @@
               <div class="shadow-area"></div>
               <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="toggleGroup">
                 <a class="header-content position-sticky d-flex align-items-center">
-                  <span class="collapse-arrow">
+                  <itf-button squircle icon small secondary class="collapse-arrow">
                     <itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'"/>
-                  </span>
-                  <span class="d-flex align-items-center line-overflow group-header-value"
+                  </itf-button>
+                  <span class="d-flex align-items-center line-overflow group-header-value text-primary"
                         data-test="group-value-group-label-value">
                     <slot name="group-title" :rows="rows" :title="title">{{ title }}</slot>
                   </span>
@@ -230,7 +230,7 @@
       border-radius: 0;
     }
     &:hover {
-      background: var(--itf-table-hover-bg);
+      //background: var(--itf-table-hover-bg); // видно, що група не на всю ширину коли є нижній скролінг
     }
   }
 
@@ -239,7 +239,7 @@
   }
   .header-content:not(.draggable-mirror *) {
     left: var(--shadow-area-width);
-    padding-left: 0.75rem;
+    //padding-left: 0.75rem;
     padding-right: 0.75rem;
     gap: 1rem;
     align-items: center;
@@ -284,9 +284,20 @@
   }
 
   .sticky-group {
+    top: 0px;
     position: sticky;
-    top: 0;
     z-index: 10;
+
+    & > .draggable-item {
+      margin-bottom: 8px;
+    }
+    .collapse-arrow {
+      padding: 0;
+
+      &:after {
+        display: none;
+      }
+    }
   }
   .table-summary {
     .shadow-area {

package/src/components/table/TableHeader.vue

@@ -143,43 +143,6 @@
         </div>
       </template>
       <div class="table-view-item-value extra flex-grow-1"></div>
-      <itf-dropdown v-if="showAddColumn && visibleHeader" ref="newDd" text append-to-context shadow autoclose="outside" class="table-header-add-column table-view-item-actions" data-test="table-header-add-column">
-          <template #button>
-            <itf-button icon small><span class="nom-gear"></span></itf-button>
-          </template>
-
-          <itf-sortable :value="sortedColumns" @input="onSortColumns">
-            <template v-for="(column, k) in sortedColumns">
-              <div :key="`column${k}`" class="d-flex align-items-center justify-content-between" :class="{'px-2 py-1': column.visible !== false}">
-                <template v-if="column.visible !== false">
-                  <div class="d-flex justify-content-between flex-grow-1">
-                    <div>
-                      <span class="nom-grip-vertical"></span>
-                      <span v-if="column.icon" :class="column.icon"></span>
-                      {{getTitle(column.title)}}
-                    </div>
-                    <span v-if="column.pinned" class="nom-pin-fill"></span>
-                  </div>
-                  <a sortable-skip href="" class="text-decoration-none" @click.prevent="hideColumn(k)">
-                    <span class="nom-trash"></span>
-                  </a>
-                </template>
-              </div>
-            </template>
-          </itf-sortable>
-
-          <div v-if="invisibleColumns.length">
-            <div class="dropdown-header">{{$t('components.table.addColumn')}}</div>
-            <template v-for="(column, k) in invisibleColumns">
-              <a href="" @click.prevent="addColumn(column)" :key="`inv-column${k}`" class="dropdown-item d-flex align-items-center justify-content-between px-2 py-1">
-                <div>
-                  <span class="nom-plus"></span>
-                  {{getTitle(column.title)}}
-                </div>
-              </a>
-            </template>
-          </div>
-        </itf-dropdown>
 
       <div class="boundary top"></div>
       <div class="boundary right"></div>
@@ -220,7 +183,7 @@ class itfTableHeader extends Vue {
   @Inject() tableEl;
 
   @PropSync('columns', { type: Array, default: () => ([]) }) sortedColumns;
-  @PropSync('sorting', { type: Object, default: () => ({}) }) _sorting;
+  @PropSync('sorting') _sorting;
   @Prop({ type: Array, default: () => ([]) }) rows;
   @Prop({ type: Array, default: () => ([]) }) selectedIds;
   @Prop({ type: Object, default: () => ({}) }) schema;

package/src/components/table/TableRows.vue

@@ -57,18 +57,18 @@
                 <slot :name="`column.${column.property}`" :toggle="() => $emit('toggle', item)" :level="level" :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 && (!editableProperty || item[editableProperty])">
                     <slot :name="`edit.${column.type}`" :level="level" :toggle="() => $emit('toggle', item)" :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)" />
-                      <itf-text-field class="w-100" v-if="column.type === 'number'" type="number" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-text-field class="w-100 h-100" v-if="column.type === 'text'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                      <itf-text-field class="w-100 h-100" v-if="column.type === 'number'" type="number" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
                       <itf-hours-field
-                        class="w-100"
+                        class="w-100 h-100"
                         placeholder="00h 00m"
                         v-else-if="column.type === 'time'"
                         :hours="getValue(item, column)"
                         @update:hours="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>
+                      <itf-textarea class="w-100 h-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 h-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 h-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 class="h-100 align-items-center d-flex w-100">

package/src/components/table/table2.scss

@@ -1,7 +1,7 @@
 :root {
   --itf-primary: #1A4A97;
   --itf-table-header-font-size: 12px;
-  --itf-table-content-font-size: 14px;
+  --itf-table-content-font-size: 16px;
   --itf-table-selected-bg: #f9fafc;
   --itf-table-active-bg: #1A4A971A;
   --itf-table-alt-bg: #F9FAFB;
@@ -48,11 +48,20 @@ body[data-theme="dark"] {
   font-size: var(--itf-table-content-font-size, var(--itf-table-font-size));
   position: relative;
 
+  .itf-cell-center {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
   .scrollable {
     -webkit-overflow-scrolling: touch;
     overflow: hidden scroll;
     height: 100%;
   }
+  .scroller {
+    margin-bottom: .5rem;
+  }
   .scrollable-x {
     overflow-x: scroll;
     padding-right: 4px;
@@ -194,10 +203,10 @@ body[data-theme="dark"] {
         content: "";
         position: absolute;
         display: block;
-        height: 20px;
+        height: 12px;
         left: 0;
         right: 0;
-        top: -20px;
+        top: -12px;
         z-index: 4;
         background: var(--itf-table-bg);
       }
@@ -398,13 +407,13 @@ body[data-theme="dark"] {
     }
   }
 
-  &:hover, &.permanent-editable-border {
-    .table-view-item-value.editable {
-      .form-control {
-        border: 1px solid var(--itf-table-input-border-color);
-      }
-    }
-  }
+  //&:hover, &.permanent-editable-border {
+  //  .table-view-item-value.editable {
+  //    .form-control {
+  //      border: 1px solid var(--itf-table-input-border-color);
+  //    }
+  //  }
+  //}
   .table-view-item-value-content {
     position: relative;
     z-index: 2;
@@ -427,16 +436,16 @@ body[data-theme="dark"] {
     &.editable {
       padding: 2px;
 
-      .form-control {
-        border-radius: 0;
-        border: 1px solid transparent;
-        background-color: transparent;
-        box-shadow: none;
-
-        &:focus {
-          border-color: var(--itf-table-input-focus-border-color);
-        }
-      }
+      //.form-control {
+      //  border-radius: 0;
+      //  border: 1px solid transparent;
+      //  background-color: transparent;
+      //  box-shadow: none;
+      //
+      //  &:focus {
+      //    border-color: var(--itf-table-input-focus-border-color);
+      //  }
+      //}
     }
 
     &.highlight-drop-column {

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

@@ -1,26 +1,24 @@
 <template>
   <div class="itf-money-field ph-no-capture" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
-    <div class="h-100" :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
-      <span class="itf-money-field__prepend" v-if="!noCurrencySign">{{ selectedCurrencySymbol }}</span>
+    <div class="input-group h-100" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
+      <span class="input-group-text pe-1" v-if="!noCurrencySign">{{ selectedCurrencySymbol }}</span>
       <i-mask-component
         ref="input"
         v-bind="mask"
-        class="form-control h-100"
+        class="form-control"
         :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
         @input="setValue"
         :value="maskedValue"
         :unmask="false"
         :disabled="disabled"
       />
-    </div>
-
-    <div v-if="currencySelect" class="itf-money-field__currency">
-      <span>{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled && currenciesList.length > 1" name="chevron_down" /></span>
-      <select v-if="!disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
+      <span v-if="currencySelect" class="input-group-text ps-1">{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled && currenciesList.length > 1" name="chevron_down" /></span>
+      <select v-if="currencySelect && !disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
         <option v-for="currency in currenciesList" :key="currency.Id" :value="currency.Id" :selected="currencyId === currency.Id">
           {{ currency.Symbol }}, {{ currency.Code }} - {{ currency.Title }}
         </option>
       </select>
+      <slot name="postfix"></slot>
     </div>
   </div>
 </template>
@@ -28,50 +26,9 @@
 .itf-money-field {
   position: relative;
 
-  input {
-    padding-left: var(--itf-money-field-padding-left, 1.5rem);
-
-    &.is-invalid, &.is-valid {
-      padding-right: 4rem;
-    }
-  }
-  &.currency-select {
-    input {
-      padding-right: 3rem;
-    }
-    &.currency-arrow {
-      input {
-        padding-right: 4.5rem;
-      }
-    }
-  }
-
-  &__prepend {
-    position: absolute;
-    left: .75rem;
-    top: .5rem;
-    bottom: .5rem;
-    display: flex;
-    align-items: center;
-  }
-  &__currency {
-    position: absolute;
-    right: .75rem;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    .is-invalid &, .is-valid & {
-      right: 1.75rem;
-    }
-
-    select {
-      position: absolute;
-      height: 100%;
-      right: 0;
-      opacity: 0;
-      left: 0;
-    }
+  .form-control {
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 </style>

package/src/components/view/View.vue

@@ -1,17 +1,16 @@
 <template>
 
-  <div v-loading="loading" class="flex-grow-1 w-100 d-flex flex-column">
-    {{filter}}
+  <div v-loading="loading || loadingData" class="flex-grow-1 w-100 d-flex flex-column">
     <itf-filter-panel
       search-placeholder="Search by text"
       search
       class="py-2 px-3"
-      :static-filters="filters"
+      :endpoint="filtersEndpoint"
       v-model="filter"
-      @input="$emit('load')"
+      @input="loadData"
     >
       <template #after-filter-btn>
-        <itf-dropdown v-if="$refs.table" shadow :button-options="{ default: true, icon: true }" autoclose="outside">
+        <itf-dropdown v-if="$refs.table && schema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
           <template #button>
             <itf-icon new name="table-view" />
           </template>
@@ -21,7 +20,7 @@
           <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">
             <div class="d-flex align-items-center gap-1">
               <itf-icon v-if="property.icon" :size="24" new :name="property.icon" />
-              {{property.title.en_US}}
+              {{getTitle(property.title)}}
             </div>
 
             <itf-icon v-if="$refs.table.getColumnVisibility(property.property)" new :size="24" name="eye-open" />
@@ -47,10 +46,18 @@
           style="--shadow-area-width: 0px;"
           absolute
           striped
+          clickable
           column-sorting
           column-resizing
+          class="permanent-checkboxes"
+          id-property="id"
           :rows="items"
           :schema="schema"
+          :sorting="sorting"
+          :active="activeIds"
+          v-model="selectedIds"
+          @row-click="$emit('open', $event)"
+          @update:sorting="updateSorting($event)"
         >
           <template v-for="(_, name) in $slots" #[name]="slotData">
             <slot :name="name" v-bind="slotData || {}"/>
@@ -69,7 +76,8 @@
       :items="items"
       :pages="countPages"
       :value="page"
-      @input="$emit('update:page', $event)"
+      @input="updatePage($event)"
+      @per-page="updateSizePerPage($event)"
     >
       <template #center>
         <slot name="pagination-center" />
@@ -79,14 +87,14 @@
 
 </template>
 <script>
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
 import loading from '../../directives/loading';
 import itfTable from '../table/Table2.vue';
 import itfFilterPanel from '../filter/FilterPanel.vue';
 import itfPagination from '../pagination/Pagination2.vue';
-import itfTableBody from "@/components/table/TableBody.vue";
-import itfIcon from "@/components/icon/Icon.vue";
-import itfDropdown from "@/components/dropdown/Dropdown.vue";
+import itfTableBody from "../table/TableBody.vue";
+import itfIcon from "../icon/Icon.vue";
+import itfDropdown from "../dropdown/Dropdown.vue";
 
 export default @Component({
   name: 'itfView',
@@ -102,18 +110,91 @@ export default @Component({
   }
 })
 class itfView extends Vue {
+  @Inject({ default: null }) panelList;
+
   @Prop({ type: Boolean }) loading;
-  @Prop({ type: Array, required: true }) items;
   @Prop({ type: Array }) filters;
   @Prop({ type: Object, required: true }) schema;
-  @Prop({ default: 20 }) size;
-  @Prop({ default: 100 }) total;
-  @Prop({ default: 1 }) page;
+  // @Prop({ default: 20 }) size;
+  // @Prop({ default: 1 }) page;
+  @Prop(String) defaultSorting;
+  @Prop(String) endpoint;
+  @Prop(String) filtersEndpoint;
+  @Prop(String) itemsKey;
+  @Prop(String) panelKey;
 
+  page = 1;
+  total = 0;
+  size = 20;
+  sorting = 'id';
+  items = [];
   filter = {};
+  loadingData = false;
+  activeIds = [];
+  selectedIds = [];
+
+  created() {
+    this.sorting = this.defaultSorting;
+  }
+
+  mounted() {
+    if (this.panelList && this.panelList.panelsStack && this.panelList.panelsStack.length && this.panelKey) {
+      const updateIds = () => {
+        this.activeIds = this.panelList.panelsStack.filter(p => p.type === this.panelKey).map(p => p.payload.id);
+      };
+      this.panelList.panelsStack[0].on('panels.changed', updateIds);
+      updateIds();
+    }
+  }
+
+  async loadData() {
+    if (!this.endpoint) {
+      return;
+    }
+    this.$emit('load', this.filter);
+    this.loadingData = true;
+    await this.$try(async () => {
+      const res = await this.$axios.$get(this.endpoint, {
+        params: {
+          ...this.filter,
+          page: this.page,
+          size: this.size,
+          sort: this.sorting
+        }
+      });
+      this.items = res[this.itemsKey];
+      this.page = res.meta.page;
+      this.total = res.meta.total;
+      this.size = res.meta.size;
+    });
+    this.loadingData = false;
+    this.$emit('loaded', this.filter);
+  }
+
+  getTitle(title) {
+    if (typeof title === 'string') {
+      return title;
+    }
+    return title[this.locale] || title['en_US'];
+  }
 
   get countPages() {
     return Math.ceil(this.total / this.size);
   }
+
+  updateSorting (val) {
+    this.sorting = val;
+    this.loadData();
+  }
+
+  updatePage (val) {
+    this.page = val;
+    this.loadData();
+  }
+
+  updateSizePerPage (val) {
+    this.size = val;
+    this.loadData();
+  }
 }
 </script>