@itfin/components 1.4.13 → 1.4.15

package/package.json

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

package/src/ITFSettings.js

@@ -1,9 +1,3 @@
-if (typeof CSS !== 'undefined' && 'paintWorklet' in CSS) {
-  CSS.paintWorklet.addModule(
-    "https://www.unpkg.com/css-houdini-squircle@0.1.3/squircle.min.js"
-  );
-}
-
 class ITFSettings {
   options = {
     firstDayOfWeek: 'Monday',

package/src/assets/scss/components/_button.scss

@@ -45,22 +45,6 @@
   }
 }
 
-@supports (-webkit-mask-image:paint(id)) or (-webkit-mask-image:paint(id)) or (mask-image:paint(id)) or (-webkit-mask-image:paint(id)) {
-  button.itf-button.btn.btn-squircle {
-    -webkit-mask-image: paint(squircle);
-    --squircle-smooth: 0.6;
-    --squircle-radius: 10px;
-    --squircle-outline: 0px;
-    --squircle-corners: top-left top-right bottom-left bottom-right;
-  }
-  .itf-button.btn-squircle.btn:not(.dropdown-toggle):focus:after {
-    -webkit-mask-image: paint(squircle);
-    --squircle-smooth: 0.6;
-    --squircle-radius: 10px;
-    --squircle-outline: 3px;
-    --squircle-corners: top-left top-right bottom-left bottom-right;
-  }
-}
 .itf-button.btn {
   display: inline-flex;
   align-items: center;
@@ -71,9 +55,6 @@
   &:focus {
     -webkit-mask-image: none!important;
   }
-  &.btn-squircle:focus:after {
-    border-color: rgb(103, 146, 244);
-  }
   &:not(.dropdown-toggle):focus:after {
     border: 3px solid #6792f4;
     border-radius: .5rem;

package/src/components/button/NativeButton.js

@@ -7,7 +7,6 @@ const CSS_CLASSES = {
   small: ['btn-sm'],
   block: ['itf-button__block'],
   labeled: ['labeled'],
-  squircle: ['btn-squircle'],
   icon: ['btn-icon'],
   loading: ['loading'],
   spinner: ['itf-spinner'],
@@ -36,9 +35,6 @@ class Button extends HTMLElement {
     if (this.hasAttribute('labeled')) {
       styles.push(CSS_CLASSES.labeled);
     }
-    if (this.hasAttribute('squircle')) {
-      styles.push(CSS_CLASSES.squircle);
-    }
     if (this.hasAttribute('icon')) {
       styles.push(CSS_CLASSES.icon);
     }

package/src/components/button/index.stories.js

@@ -66,7 +66,7 @@ storiesOf('Common', module)
 
         <h3>Standart button</h3>
 
-        <itf-button squircle primary>Primary button</itf-button>
+        <itf-button primary>Primary button</itf-button>
         <itf-button secondary>Secondary button</itf-button>
         <itf-button>Basic button</itf-button>
         <itf-button icon>
@@ -92,7 +92,7 @@ storiesOf('Common', module)
 
         <h3>Large button</h3>
 
-        <itf-button squircle large primary>Primary button</itf-button>
+        <itf-button large primary>Primary button</itf-button>
         <itf-button large secondary>Secondary button</itf-button>
         <itf-button large>Basic button</itf-button>
         <itf-button large icon>

package/src/components/customize/PropertiesPopupMenu.vue

@@ -27,7 +27,7 @@
   </div>
 </template>
 <script>
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { Vue, Component, Prop } from 'vue-property-decorator';
 import itfTextField from '../text-field/TextField.vue';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';

package/src/components/dropdown/Dropdown.vue

@@ -1,5 +1,5 @@
 <script>
-import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
+import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button';
 import itfDropdownMenu from './DropdownMenu';
 

package/src/components/dropdown/DropdownMenu.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
+import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 
 let globalModalIndex = 0; // base modal z-index
 

package/src/components/editable/EditButton.vue

@@ -24,7 +24,7 @@
 }
 </style>
 <script>
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
 

package/src/components/kanban/BoardCard.vue

@@ -19,7 +19,7 @@
   </div>
 </template>
 <script>
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
 import loading from '../../directives/loading';

package/src/components/kanban/BoardCardTimer.vue

@@ -24,7 +24,7 @@
 }
 </style>
 <script>
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button.vue';
 

package/src/components/panels/PanelItemEdit.vue

@@ -9,10 +9,10 @@
       <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')">
+          <itf-button v-tooltip.delay="'Hot key: Esc'" secondary :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">
+          <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary :loading="loading" :disabled="loading" @click="onSaveClick">
             <span>{{ $t('components.modal.save') }}</span>
           </itf-button>
         </div>

package/src/components/table/TableGroup.vue

@@ -17,7 +17,7 @@
               <div class="shadow-area"></div>
               <div class="header-wrapper" :class="{'header-additional-column': showAddColumn}" @click.prevent="toggleGroup">
                 <a class="header-content position-sticky d-flex align-items-center">
-                  <itf-button squircle icon small secondary class="collapse-arrow">
+                  <itf-button icon small secondary class="collapse-arrow">
                     <itf-icon :name="isShowTable ? 'chevron_down' : 'chevron_right'"/>
                   </itf-button>
                   <span class="d-flex align-items-center line-overflow group-header-value text-primary"

package/src/components/view/View.vue

@@ -42,11 +42,12 @@
         </itf-dropdown>
 
         <itf-segmented-control
-          v-if="tabs.length"
+          v-if="tabs.length > 1"
           class="small"
-          v-model="currentTab"
+          :value="currentTab"
           item-key="value"
           :items="tabs"
+          @input="updateTabs"
         >
           <template #item="{ item }">
             <div class="d-flex align-items-center">
@@ -111,14 +112,14 @@
       @per-page="updateSizePerPage($event)"
     >
       <template #center>
-        <slot name="pagination-center" />
+        <slot name="pagination-center" :totals="totals" />
       </template>
     </itf-pagination>
   </div>
 
 </template>
 <script>
-import { Vue, ModelSync, Component, Prop, Inject } from 'vue-property-decorator';
+import {Vue, ModelSync, Component, Prop, Inject, PropSync, Watch} from 'vue-property-decorator';
 import loading from '../../directives/loading';
 import itfTable from '../table/Table2.vue';
 import itfFilterPanel from '../filter/FilterPanel.vue';
@@ -132,8 +133,7 @@ export default @Component({
   name: 'itfView',
   components: {
     itfSegmentedControl,
-    itfDropdown,
-    itfIcon,
+    itfDropdown, itfIcon,
     itfPagination,
     itfFilterPanel,
     itfTableBody,
@@ -149,14 +149,12 @@ class itfView extends Vue {
 
   @Prop({ type: Boolean }) loading;
   @Prop({ type: Array }) filters;
-  // @Prop({ type: Object, required: true }) schema;
   @Prop({ type: Object }) schema;
-  // @Prop({ default: 20 }) size;
-  // @Prop({ default: 1 }) page;
   @Prop(String) defaultSorting;
   @Prop(String) endpoint;
   @Prop(String) filtersEndpoint;
   @Prop(String) itemsKey;
+  @Prop({ type: String, default: 'totals' }) totalsKey;
   @Prop(String) panelKey;
   @Prop(String) stateName;
   @Prop({ type: String, default: 'checkbox' }) indicatorType;
@@ -185,6 +183,7 @@ class itfView extends Vue {
   activeIds = [];
   tableColumns = undefined;
   _currentTab = null;
+  totals = null;
 
   @Watch('selectedIds', { deep: true, immediate: true })
   updateSelectedIds() {
@@ -219,7 +218,6 @@ class itfView extends Vue {
   }
 
   get tableSchema() {
-    // return this.tableColumns || this.schema;
     if (this.tableColumns) {
       return {
         properties: this.tableColumns
@@ -232,13 +230,12 @@ class itfView extends Vue {
   }
 
   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;
+    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;
   }
 
   mounted() {
@@ -280,6 +277,7 @@ class itfView extends Vue {
         this.size = Number(headers['x-size'] ?? 20);
       } else {
         this.items = data[this.itemsKey];
+        this.totals = data[this.totalsKey];
         this.page = data.meta.page;
         this.total = data.meta.total;
         this.size = data.meta.size;