@itfin/components 1.4.12 → 1.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.4.12",
+  "version": "1.4.14",
   "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/_dark-theme.scss

@@ -60,7 +60,7 @@ body[data-theme="dark"] {
 
   .dropdown-menu {
     --bs-dropdown-link-color: #{$dark-link-color};
-    --bs-dropdown-link-hover-color: #1e2125;
-    --bs-dropdown-link-hover-bg: #{$dark-link-color};
+    --bs-dropdown-link-hover-bg: rgba(var(--bs-primary-rgb), .15);
+    --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), .5);
   }
 }

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/assets/scss/components/_select.scss

@@ -29,8 +29,8 @@
         color: $dark-body-color;
 
         &.active, &:active {
-          background-color: $dark-primary;
-          color: $dark-body-bg;
+          background-color: var(--bs-dropdown-link-active-bg);
+          color: var(--bs-dropdown-link-color);
         }
       }
     }

package/src/components/button/Button.vue

@@ -17,7 +17,6 @@ class itfButton extends Vue {
   @Prop(Boolean) large;
   @Prop(Boolean) icon;
   @Prop(Boolean) block;
-  @Prop(Boolean) squircle;
   @Prop(String) loadingText;
   @Prop(String) color;
   @Prop(Boolean) disabled;
@@ -28,7 +27,7 @@ class itfButton extends Vue {
 
   render (createElement, { data, slots, children, props }) {
     const {
-      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, squircle, default: defaultStyle,
+      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, default: defaultStyle,
       class: classNames
     } = props;
     const component = to ? 'nuxt-link' : (props.href ? 'a' : 'button');
@@ -48,7 +47,6 @@ class itfButton extends Vue {
         'btn-default': defaultStyle,
         'btn-basic': !primary && !secondary && !color && !defaultStyle,
         'btn-secondary': secondary,
-        'btn-squircle': squircle,
         'btn-sm': small,
         'btn-lg': large,
         // 'px-3': small && !icon,

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/datepicker/PeriodPicker.vue

@@ -24,7 +24,7 @@
 <script>
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
 import tippy from 'tippy.js';
-import itfPeriodPickerInline from "@/components/datepicker/PeriodPickerInline.vue";
+import itfPeriodPickerInline from "./PeriodPickerInline.vue";
 import {DateTime} from "luxon";
 import ITFSettings from '../../ITFSettings';
 

package/src/components/datepicker/PeriodPickerInline.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="row mb-3">
       <div class="col">
-        <itf-button @click="setYear(prevYear)">
+        <itf-button icon @click="setYear(prevYear)">
           <itf-icon name="chevron_left" />
         </itf-button>
       </div>
@@ -22,7 +22,7 @@
         </itf-button>
       </div>
       <div class="col text-end">
-        <itf-button @click="setYear(nextYear)">
+        <itf-button icon @click="setYear(nextYear)">
           <itf-icon name="chevron_right" />
         </itf-button>
       </div>

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/filter/FilterBadge.vue

@@ -31,7 +31,6 @@
       </template>
       <template v-else-if="type === 'timeframe'">
         <itf-period-picker-inline
-          style="margin: -.5rem"
           :value="value.value"
           value-format="yyyy-MM-dd"
           @input="onFilterChange({ value: $event })"
@@ -84,6 +83,10 @@
   --filter-badge__padding-y: .5rem;
   --filter-badge__padding-x: .75rem;
 }
+body[data-theme="dark"] {
+  --filter-badge__default-border-color: #FFFFFF1A;
+  --filter-badge__selected-color: #efd877;
+}
 .filter-pill {
   align-items: center;
   font-size: 14px;
@@ -114,7 +117,7 @@
   }
 }
 .filter-pill__label {
-  color: var(--filter-badge__default-color);
+  //color: var(--filter-badge__default-color);
   padding: var(--filter-badge__padding-y) 0 var(--filter-badge__padding-y) var(--filter-badge__padding-x);
   max-width: 330px;
   text-overflow: ellipsis;
@@ -139,7 +142,7 @@
   padding: 0 calc(var(--filter-badge__padding-x) / 2) 0 calc(var(--filter-badge__padding-x) / 4);
 
   svg {
-    color: var(--filter-badge__default-color);
+    //color: var(--filter-badge__default-color);
   }
   &.filter-pill__icon-invalid svg {
     color: var(--filter-badge__invalid-color);

package/src/components/filter/FilterFacetsList.vue

@@ -23,9 +23,9 @@
     <div v-for="(val, n) of mappedValues" :key="n" class="dropdown-item px-2" :class="{'active': val.isSelected}" @click="onFilterClick(val)">
       <span class="facet-name text-dark d-flex align-items-center">
         <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
-        <div class="w-100 text-truncate">{{ val.label }}</div>
+        <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
       </span>
-      <span v-if="val.count" class="facet-stat text-muted">
+      <span v-if="val.count" class="facet-stat">
         {{ val.count }}
         <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
       </span>
@@ -60,7 +60,7 @@
   justify-content: space-between;
   position: relative;
   box-sizing: border-box;
-  height: 1.75rem;
+  min-height: 1.75rem;
   width: 100%;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -76,16 +76,17 @@
   margin: 1px 0;
   &.active {
     .facet-bar-progress {
-      background-color: var(--bs-blue);
+      background-color: var(--bs-primary);
     }
   }
   .facet-name {
     min-width: 0;
     text-align: left;
+    line-height: 100%;
     white-space: nowrap;
 
     .itf-checkbox {
-      min-height: auto;
+      min-height: 1.25rem;
     }
   }
   .facet-stat {
@@ -104,7 +105,7 @@
     width: var(--bar-width);
     min-width: 5px;
     height: 10px;
-    background-color: rgba(var(--bs-blue-rgb), 50%);
+    background-color: rgba(var(--bs-primary-rgb), 50%);
     transition: width 0.3s ease 0s;
   }
 }

package/src/components/filter/FilterPanel.vue

@@ -153,7 +153,7 @@ class FilterPanel extends Vue {
   isFilterExpanded = false;
   observer = null;
 
-  periodFilters = ['period', 'period-selector'];
+  periodFilters = ['period', 'timeframe'];
   visibleItems = new Set();
 
   toggleExpandFilter() {

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/table/table2.scss

@@ -23,6 +23,8 @@
   --itf-table-summary-text: var(--bs-tertiary-color);
   --itf-table-table-border-radius: 1rem;
   --itf-table-header-height: 2.25rem;
+  --itf-table-divider-bg: #F7F8FA;
+  --itf-table-divider-border: rgba(238, 238, 238, 1);
 
   --group-title-height: 40px;
   --table-row-height: none;
@@ -43,6 +45,9 @@ body[data-theme="dark"] {
   --itf-table-selected-bg: #011534;
   --itf-table-active-bg: #022e72;
   --itf-table-summary-text: #82909d80;
+  --itf-table-border-base-color: var(--itf-table-header-bg);
+  --itf-table-divider-bg: #0f0f0f;
+  --itf-table-divider-border: rgb(100, 100, 100, .1);
 }
 .itf-table2 {
   font-size: var(--itf-table-content-font-size, var(--itf-table-font-size));
@@ -435,11 +440,11 @@ body[data-theme="dark"] {
   }
 
   &__row-divider {
-    background-color: #F7F8FA;
+    background-color: var(--itf-table-divider-bg);
     height: 5px;
     padding: 0;
-    border-top: 1px solid rgba(238, 238, 238, 1);
-    border-bottom: 1px solid rgba(238, 238, 238, 1);
+    border-top: 1px solid var(--itf-table-divider-border);
+    border-bottom: 1px solid var(--itf-table-divider-border);
   }
   //&:hover, &.permanent-editable-border {
   //  .table-view-item-value.editable {

package/src/components/view/View.vue

@@ -2,16 +2,16 @@
 
   <div v-loading="loading || loadingData" class="flex-grow-1 w-100 d-flex flex-column">
     <itf-filter-panel
-      :search-placeholder="searchPlaceholder"
-      :search="currentTab !== 'list'"
-      :show-filter="currentTab !== 'list'"
-      class="py-2 px-3"
-      :static-filters="filters"
-      :endpoint="filtersEndpoint"
-      :panel="panel"
-      v-model="filter"
-      @input="onFilterSet"
-      @set-table-schema="setTableSchema"
+        :search-placeholder="searchPlaceholder"
+        :search="currentTab !== 'list'"
+        :show-filter="currentTab !== 'list'"
+        class="py-2 px-3"
+        :static-filters="filters"
+        :endpoint="filtersEndpoint"
+        :panel="panel"
+        v-model="filter"
+        @input="onFilterSet"
+        @set-table-schema="setTableSchema"
     >
       <template #after-filter-btn>
         <itf-dropdown v-if="$refs.table && tableSchema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
@@ -42,11 +42,12 @@
         </itf-dropdown>
 
         <itf-segmented-control
-          v-if="tabs.length"
-          class="small"
-          v-model="currentTab"
-          item-key="value"
-          :items="tabs"
+            v-if="tabs.length > 1"
+            class="small"
+            :value="currentTab"
+            item-key="value"
+            :items="tabs"
+            @input="updateTabs"
         >
           <template #item="{ item }">
             <div class="d-flex align-items-center">
@@ -65,28 +66,28 @@
       <div class="flex-grow-1 px-3 d-flex flex-column">
         <div class="position-relative flex-grow-1">
           <itf-table
-            ref="table"
-            style="--shadow-area-width: 0px;"
-            absolute
-            striped
-            clickable
-            column-sorting
-            column-resizing
-            :indicator-type="indicatorType"
-            class="permanent-checkboxes"
-            :state-name="stateName"
-            id-property="id"
-            :sort-as-string="sortAsString"
-            :rows="items"
-            :schema="tableSchema"
-            :sorting="sorting"
-            :active="activeIds"
-            :no-select-all="noSelectAll"
-            :show-actions="showActions"
-            :indicator-width="indicatorWidth"
-            v-model="selectedIds"
-            @row-click="$emit('open', $event)"
-            @update:sorting="updateSorting($event)"
+              ref="table"
+              style="--shadow-area-width: 0px;"
+              absolute
+              striped
+              clickable
+              column-sorting
+              column-resizing
+              :indicator-type="indicatorType"
+              class="permanent-checkboxes"
+              :state-name="stateName"
+              id-property="id"
+              :sort-as-string="sortAsString"
+              :rows="items"
+              :schema="tableSchema"
+              :sorting="sorting"
+              :active="activeIds"
+              :no-select-all="noSelectAll"
+              :show-actions="showActions"
+              :indicator-width="indicatorWidth"
+              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 || {}"/>
@@ -100,15 +101,15 @@
     </slot>
 
     <itf-pagination
-      class="my-2 px-3"
-      v-if="showPagination"
-      show-size
-      :size="size"
-      :items="items"
-      :pages="countPages"
-      :value="page"
-      @input="updatePage($event)"
-      @per-page="updateSizePerPage($event)"
+        class="my-2 px-3"
+        v-if="showPagination"
+        show-size
+        :size="size"
+        :items="items"
+        :pages="countPages"
+        :value="page"
+        @input="updatePage($event)"
+        @per-page="updateSizePerPage($event)"
     >
       <template #center>
         <slot name="pagination-center" />
@@ -118,7 +119,7 @@
 
 </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,10 +149,7 @@ 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;
@@ -219,7 +216,6 @@ class itfView extends Vue {
   }
 
   get tableSchema() {
-    // return this.tableColumns || this.schema;
     if (this.tableColumns) {
       return {
         properties: this.tableColumns
@@ -232,13 +228,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() {