@itfin/components 2.0.65 → 2.0.67

package/package.json

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

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

@@ -74,17 +74,17 @@
   &.btn-squircle:focus:after {
     border-color: rgb(103, 146, 244);
   }
-  &:not(.dropdown-toggle):focus:after {
-    border: 3px solid #6792f4;
-    border-radius: .5rem;
-    content: '';
-    position: absolute;
-    top: -3px;
-    left: -3px;
-    right: -3px;
-    bottom: -3px;
-    outline: none;
-  }
+  // &:not(.dropdown-toggle):focus:after {
+  //   border: 3px solid #6792f4;
+  //   border-radius: .5rem;
+  //   content: '';
+  //   position: absolute;
+  //   top: -3px;
+  //   left: -3px;
+  //   right: -3px;
+  //   bottom: -3px;
+  //   outline: none;
+  // }
   &.itf-button__block {
     display: block;
     width: 100%;
@@ -141,21 +141,39 @@
   }
 
   &.btn-default {
-    border: 1px solid #0000001A;
-    color: #222;
+    --bs-btn-color: #22222B;
+    --bs-btn-border-color: #e5e5e5;
+    --bs-btn-hover-color: var(--bs-btn-color);
+    --bs-btn-hover-border-color: var(--bs-btn-border-color);
+    --bs-btn-active-color: var(--bs-btn-color);
+    --bs-btn-active-border-color: var(--bs-btn-border-color);
+    --bs-btn-disabled-color: var(--bs-btn-color);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
 
     .itf-icon {
-      color: #8E97A5;
+      color: var(--bs-btn-color);
     }
 
-    &.active, &:hover, &.show {
-      border: 1px solid #1A4A974D;
-      color: #1A4A97;
-
+    &:hover {
+      background-color: var(--bs-btn-border-color);
+      .itf-icon {
+        color: var(--bs-btn-hover-color);
+      }
+    }
+    &:active, &:focus {
+      background-color: color-mix(in srgb, black 5%, var(--bs-btn-border-color));
       .itf-icon {
-        color: #1A4A97;
+        color: var(--bs-btn-active-color);
       }
     }
+
+    &.btn-white {
+      --bs-btn-color: #ffffff;
+      --bs-btn-border-color: rgba(255, 255, 255, 0.5);
+      --bs-btn-hover-color: #22222b;
+      --bs-btn-active-color: #22222b;
+    }
   }
 
   &.btn-secondary {
@@ -215,30 +233,4 @@
       border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
     }
   }
-
-  &.btn-outline-secondary {
-    --bs-btn-color: #22222B;
-    --bs-btn-border-color: #e5e5e5;
-    --bs-btn-hover-color: var(--bs-btn-color);
-    --bs-btn-hover-border-color: var(--bs-btn-border-color);
-    --bs-btn-active-color: var(--bs-btn-color);
-    --bs-btn-active-border-color: var(--bs-btn-border-color);
-    --bs-btn-disabled-color: var(--bs-btn-color);
-    --bs-btn-disabled-bg: transparent;
-    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
-
-    &:hover {
-      background-color: var(--bs-btn-border-color);
-    }
-    &:active, &:focus {
-      background-color: color-mix(in srgb, black 5%, var(--bs-btn-border-color));
-    }
-
-    &.btn-outline-secondary--light {
-      --bs-btn-color: #ffffff;
-      --bs-btn-border-color: rgba(255, 255, 255, 0.5);
-      --bs-btn-hover-color: #22222b;
-      --bs-btn-active-color: #22222b;
-    }
-  }
 }

package/src/assets/scss/components/_segmeneted-control.scss

@@ -1,7 +1,7 @@
 @import '../variables';
 
 .itf-segmeneted-control {
-  --itf-segmeneted-control--background: #{$input-bg};
+  --itf-segmeneted-control--background: #f5f6f8;
   --itf-segmeneted-control--border-radius: #{$border-radius};
   // --itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
   --itf-segmeneted-control--shadow: none;
@@ -12,7 +12,7 @@
   background: var(--itf-segmeneted-control--background);
   border-radius: var(--itf-segmeneted-control--border-radius);
   margin: 0;
-  padding: 3px;
+  padding: 4px;
   border: none;
   outline: none;
   display: inline-grid;
@@ -149,11 +149,11 @@
     }
   }
   .selection {
-    background: rgba(255, 255, 255, 1);
-    border: .5px solid rgba(0, 0, 0, 0.04);
+    background: var(--itf-segmeneted-control--selection-bg);
+    // border: .5px solid rgba(0, 0, 0, 0.04);
     box-shadow: var(--itf-segmeneted-control--shadow);
     /*box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);*/
-    border-radius: calc(var(--itf-segmeneted-control--border-radius) - 2px);
+    border-radius: var(--itf-segmeneted-control--border-radius);
     grid-column: 1;
     grid-row: 1;
     //z-index: 2;

package/src/components/button/Button.vue

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

package/src/components/filter/FilterPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-filter-panel d-flex flex-column align-items-start" :class="{'gap-3': !filtersOnly}">
+  <div class="itf-filter-panel d-flex flex-column align-items-start" :class="{'gap-3': !filtersOnly, 'd-none': !visible}">
     <div v-if="!filtersOnly" class="d-flex gap-2 justify-content-between w-100">
       <slot name="search">
         <div>
@@ -143,6 +143,7 @@ class FilterPanel extends Vue {
   @Prop({ type: Boolean, default: true }) showFilter;
   @Prop({ type: Boolean, default: false }) filtersOnly;
   @Prop(Boolean) mini;
+  @Prop({ type: Boolean, default: true }) visible;
   @Prop({ type: String, default: function() { return this.$t('components.filter.search'); } }) searchPlaceholder;
 
   filter = {};

package/src/components/view/View.vue

@@ -4,6 +4,8 @@
     <itf-filter-panel
       :search-placeholder="searchPlaceholder"
       search
+      :visible="!noFilters"
+      :filters-only="filtersOnly"
       ref="filters"
       :mini="panel.isMultiple()"
       class="py-2 px-3"
@@ -121,6 +123,8 @@ class itfView extends Vue {
   @ModelSync('value', 'input') selectedIds;
 
   @Prop({ type: Boolean }) loading;
+  @Prop({ type: Boolean }) filtersOnly;
+  @Prop({ type: Boolean }) noFilters;
   @Prop({ type: Array }) filters;
   @Prop({ type: Object, required: true }) schema;
   // @Prop({ default: 20 }) size;
@@ -134,6 +138,7 @@ class itfView extends Vue {
   @Prop({ type: String, default: 'checkbox' }) indicatorType;
   @Prop({ type: String, default () { return this.$t('components.table.search'); } }) searchPlaceholder;
   @Prop() panel;
+  @Prop() hardFilter; // встановлює жорсткий фільтр, наприклад, треба завжди показувати лише по контрагенту
   @Prop(Boolean) showActions;
 
   page = 1;
@@ -177,7 +182,7 @@ class itfView extends Vue {
       const res = await this.$axios.$get(this.endpoint, {
         preventRaceCondition: true,
         params: {
-          ...this.filter,
+          ...Object.assign(this.filter ?? {}, this.hardFilter ?? {}),
           page: this.page,
           size: this.size,
           sort: this.sorting