@itfin/components 2.0.1 → 2.0.3

package/package.json

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

package/src/assets/scss/_variables.scss

@@ -26,7 +26,8 @@ $success: #10834e;
 $warning: #cda277;
 $danger: #cb4839;
 
-$primary: #1A4A97 !default;
+$primary: #0B1315 !default;
+$secondary: #f2f2f2;
 $link-color: #1A4A97 !default;
 $input-btn-focus-width: .125rem;
 
@@ -49,8 +50,6 @@ $modal-backdrop-bg: #999;
 $modal-backdrop-opacity: .25;
 $modal-content-border-radius: 0;
 
-$secondary: #dfe1e6;
-
 // popover
 $popover-border-width: 2px;
 
@@ -88,6 +87,16 @@ $baseText: #1e1e1e;
 $gray5: #F0F0F1;
 $gray50: #787885;
 
+$theme-colors: (
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "blue":       $link-color
+);
+
 // згідно з дизайном
 $body-color: #22222B;
 $dropdown-border-radius: .75rem;
@@ -96,5 +105,7 @@ $dropdown-item-padding-x: .5rem;
 $dropdown-link-hover-bg: #F1F2F4;
 $border-color-translucent:    #00000014;
 $dropdown-header-color: #A5A5A9;
+$input-group-addon-bg: $input-bg;
 $form-check-input-checked-bg-color: #22222B;
 $form-check-input-indeterminate-bg-color: #22222B;
+$nav-link-color: $primary;

package/src/assets/scss/components/_datepicker.scss

@@ -114,7 +114,7 @@
   --adp-transition-ease: ease-out;
   --adp-transition-offset: 8px;
 
-  --adp-background-color: #{$body-bg};
+  --adp-background-color: transparent;
   --adp-background-color-hover: #f0f0f0;
   --adp-background-color-active: #eaeaea;
   --adp-background-color-in-range: rgba(92, 196, 239, .1);
@@ -123,7 +123,7 @@
   --adp-background-color-selected-other-month: #a2ddf6;
 
   --adp-color: #4a4a4a;
-  --adp-color-secondary: #9c9c9c;
+  --adp-color-secondary: #A5A5A9;
   --adp-accent-color: #4eb5e6;
   --adp-color-current-date: #{$primary};
   --adp-color-other-month: #dedede;
@@ -132,7 +132,7 @@
   --adp-color-other-month-hover: #c5c5c5;
 
   --adp-border-color: #dbdbdb;
-  --adp-border-color-inner: #efefef;
+  --adp-border-color-inner: #00000014;
   --adp-border-radius: 4px;
   //--adp-border-color-inline: #d7d7d7;
   --adp-border-color-inline: transparent;

package/src/assets/scss/components/_select.scss

@@ -58,9 +58,9 @@
     padding-bottom: 0.125rem;
   }
   &.vs--open .form-control {
-    box-shadow: 0 0 0 0.125rem $input-focus-border;
-    border-color: $body-bg;
-    background: $body-bg;
+    //box-shadow: 0 0 0 0.125rem $input-focus-border;
+    //border-color: $body-bg;
+    //background: $body-bg;
   }
   &__dropdown-menu {
     background-color: $body-bg;

package/src/assets/scss/components/_text-field.scss

@@ -40,10 +40,8 @@
     z-index: 10;
   }
   &__input {
-    .addon + & {
-      border-top-left-radius: $input-border-radius !important;
-      border-bottom-left-radius: $input-border-radius !important;
-    }
+    border: 0 none;
+    //background-color: transparent !important;
     resize: none;
   }
   &__autogrow &__input {

package/src/assets/scss/main.scss

@@ -84,13 +84,18 @@ kbd {
     color: var(--bs-body-color);
   }
 }
-.form-check-input:checked[type=checkbox] {
+body .form-check-input:checked[type=checkbox] {
   --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L3.5 6.5L1 4' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   box-shadow: 0px 2px 3px 0px #00000026;
 }
-.form-check-input:indeterminate[type=checkbox] {
+body .form-check-input:indeterminate[type=checkbox] {
   box-shadow: 0px 2px 3px 0px #00000026;
 }
 .text-muted {
   color: #666770;
 }
+body .form-control {
+  &:focus {
+    box-shadow: none !important;
+  }
+}

package/src/components/app/message.js

@@ -38,7 +38,7 @@ const Message = function (options) {
   const parent = document.getElementById('itf-app');
 
   const instance = new ToastContainer({
-    // parent: $nuxt.$el.__vue__,
+    parent: $nuxt.$el.__vue__,
     el: document.createElement('itf-toast-container'),
     data: options
   });

package/src/components/filter/FilterBadge.vue

@@ -24,12 +24,14 @@
       </template>
       <template v-else-if="type === 'period'">
         <itf-date-range-picker-inline
+          style="margin: -.5rem"
           :value="value.value"
           @input="onFilterChange({ value: $event })"
         />
       </template>
       <template v-else-if="type === 'date'">
         <itf-date-picker-inline
+          style="margin: -.5rem"
           :value="value.value"
           @input="onFilterChange({ value: $event })"
         />

package/src/components/filter/FilterFacetsList.vue

@@ -1,23 +1,25 @@
 <template>
   <div>
     <div class="px-1">
-      <div v-if="title" class="fw-bold mb-1">{{title}}</div>
+      <div class="facets-filter-header">
+        <div v-if="title">{{title}}</div>
+      </div>
 
       <itf-text-field small v-model="query" class="mb-2" :placeholder="$t('components.filter.search')" clearable />
 
-      <div v-if="mappedValues.length" class="d-flex justify-content-between small mb-2">
+      <div class="d-flex justify-content-between small mb-2">
         <a v-if="isSelectedAll" href="" @click.stop.prevent="onSelectAll(false)">{{$t('components.filter.deselectAll')}}</a>
         <a v-else href="" @click.stop.prevent="onSelectAll(true)">{{$t('components.filter.selectAll')}}</a>
 
         <span class="text-muted" v-if="!isHasSelected" href="" @click.stop.prevent="onShowSelected(true)">{{$t('components.filter.showSelected')}}</span>
         <a v-else-if="!isShowSelected" href="" @click.stop.prevent="onShowSelected(true)">{{$t('components.filter.showSelected')}}</a>
-        <a v-else href="" @click.stop.prevent="onShowSelected(false)">{{$t('components.filter.showSelected')}}</a>
+        <a v-else href="" @click.stop.prevent="onShowSelected(false)">{{$t('components.filter.showAll')}}</a>
       </div>
-      <div v-else>
+      <div v-if="!mappedValues.length">
         <div class="text-muted text-center py-4">{{ $t('components.filter.noResults') }}</div>
       </div>
     </div>
-    <div v-for="(val, n) of mappedValues" :key="n" class="facet-item" :class="{'active': val.isSelected}" @click="onFilterClick(val)">
+    <div v-for="(val, n) of mappedValues" :key="n" class="dropdown-item" :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>
@@ -28,15 +30,20 @@
       </span>
     </div>
 
-    <itf-button class="mt-1" v-if="hasMore" small block @click="toggleMore">
+    <itf-button default class="mt-1" v-if="hasMore" small block @click="toggleMore">
       <span v-if="showMore">{{ $t('components.filter.hideMore', { count: visibleList.length }) }}</span>
       <span v-else>{{ $t('components.filter.showMore', { count: visibleList.length }) }}</span>
     </itf-button>
   </div>
 </template>
 <style lang="scss" scoped>
-.facet-item {
-  background: transparent;
+.facets-filter-header {
+  border-bottom: 1px solid var(--bs-border-color-translucent);
+  color: #A5A5A9;
+  padding: 0 0.75rem .5rem;
+  margin: 0 -.75rem .75rem;
+}
+.dropdown-item {
   cursor: pointer;
   display: inline-flex;
   -webkit-box-align: center;
@@ -47,8 +54,6 @@
   box-sizing: border-box;
   height: 1.75rem;
   width: 100%;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
@@ -62,16 +67,12 @@
   transition: none 0s ease 0s;
   margin: 1px 0;
   &.active {
-    background-color: rgba(var(--bs-primary-rgb), 10%);
-
     .facet-bar-progress {
-      background-color: rgba(var(--bs-primary-rgb), 75%);
+      background-color: var(--bs-blue);
     }
   }
-  &:hover, &:focus, &.active {
-    border-color: var(--bs-primary);
-  }
   .facet-name {
+    min-width: 0;
     text-align: left;
     white-space: nowrap;
 
@@ -95,7 +96,7 @@
     width: var(--bar-width);
     min-width: 5px;
     height: 10px;
-    background-color: rgb(197, 205, 223);
+    background-color: rgba(var(--bs-blue-rgb), 50%);
     transition: width 0.3s ease 0s;
   }
 }
@@ -200,6 +201,9 @@ class FilterFacetsList extends Vue {
   }
 
   onShowSelected(isShow = false) {
+    if (!this.value.length && isShow) { // не показувати, якщо нічого не вибрано
+      return;
+    }
     this.isShowSelected = isShow;
   }
 }

package/src/components/icon/Icon.vue

@@ -13,7 +13,7 @@ export default @Component({
   }
 })
 class itfIcon extends Vue {
-  @Prop({ type: String, validator: (value) => !!icons[value] }) name;
+  @Prop({ type: String }) name;
   @Prop([Number, String]) size;
   @Prop(Boolean) new;
 

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

@@ -0,0 +1,4 @@
+<template><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 4.16675C10.4602 4.16675 10.8333 4.53984 10.8333 5.00008L10.8333 7.91675C10.8333 8.14687 11.0199 8.33341 11.25 8.33341H14.1667C14.6269 8.33341 15 8.70651 15 9.16675V9.91674C15 10.1469 14.8135 10.3334 14.5833 10.3334H5.41667C5.18655 10.3334 5 10.1469 5 9.91674V9.16675C5 8.70651 5.3731 8.33341 5.83333 8.33341H8.75C8.98012 8.33341 9.16667 8.14687 9.16667 7.91675V5.00008C9.16667 4.53984 9.53976 4.16675 10 4.16675ZM5.41667 11.3334C5.18655 11.3334 5 11.52 5 11.7501V15.3663C5 15.566 5.22254 15.6851 5.38868 15.5743L5.78775 15.3082C6.06767 15.1216 6.43233 15.1216 6.71225 15.3082L7.03775 15.5252C7.31767 15.7119 7.68233 15.7119 7.96225 15.5252L8.28775 15.3082C8.56767 15.1216 8.93233 15.1216 9.21225 15.3082L9.53775 15.5252C9.81767 15.7119 10.1823 15.7119 10.4623 15.5252L10.7877 15.3082C11.0677 15.1216 11.4323 15.1216 11.7123 15.3082L12.0377 15.5252C12.3177 15.7119 12.6823 15.7119 12.9623 15.5252L13.2877 15.3082C13.5677 15.1216 13.9323 15.1216 14.2122 15.3082L14.6113 15.5743C14.7775 15.6851 15 15.566 15 15.3663V11.7501C15 11.52 14.8135 11.3334 14.5833 11.3334H5.41667Z" fill="currentColor"/>
+</svg>
+</template>

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

@@ -0,0 +1,4 @@
+<template><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>
+</template>