@itfin/components 2.0.7 → 2.0.9

package/package.json

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

package/src/assets/scss/_css_variables.scss

@@ -9,11 +9,6 @@ $color-outcome: #DC5C2E;
   --color-outcome: #{$color-outcome};
   --color-primary: #{$primary};
   --body-bg: #{$body-bg};
-
-  .modal-backdrop {
-    --bs-backdrop-bg: #{$body-bg};
-    --bs-backdrop-opacity: 0.75;
-  }
 }
 
 [data-theme="dark"] {

package/src/assets/scss/_variables.scss

@@ -11,7 +11,8 @@ $h4-font-size:                $headings-font-size-base * 1.25;
 $h5-font-size:                $headings-font-size-base * 1.125;
 $h6-font-size:                $headings-font-size-base;
 
-$zindex-toaster:                    1071 !default;
+$border-width:                1px;
+$zindex-toaster:              1071 !default;
 
 $border-radius: .5rem;
 $border-radius-sm: .375rem;
@@ -46,12 +47,13 @@ $input-focus-border: #F2F4F7;//rgb(11 49 79 / 25%);
 $form-check-input-border: 1px solid rgba(#000, .08);
 $form-switch-focus-color: tint-color($primary, 50%);
 
-$modal-backdrop-bg: #999;
-$modal-backdrop-opacity: .25;
-$modal-content-border-radius: 0;
+$modal-backdrop-bg: #222;
+$modal-backdrop-opacity: .5;
+$modal-content-border-width: 0;
+$modal-footer-border-color: 0;
 
 // popover
-$popover-border-width: 2px;
+$popover-border-width: 1px;
 
 // dropdown
 

package/src/components/button/Button.vue

@@ -48,7 +48,7 @@ class itfButton extends Vue {
         'btn-default': defaultStyle,
         'btn-basic': !primary && !secondary && !color && !defaultStyle,
         'btn-secondary': secondary,
-        'btn-squircle': squircle,
+        // 'btn-squircle': squircle,
         'btn-sm': small,
         'btn-lg': large,
         // 'px-3': small && !icon,

package/src/components/filter/FilterPanel.vue

@@ -16,15 +16,15 @@
           <itf-icon new name="filter" />
           <span v-if="activeFiltersCount" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
             {{activeFiltersCount}}
-            <span class="visually-hidden">unread messages</span>
+            <span class="visually-hidden">active filters</span>
           </span>
         </itf-button>
         <slot name="after-filter-btn"></slot>
       </div>
     </div>
-    <div v-if="showFilters" class="d-flex gap-2 flex-wrap">
+    <div v-if="showFilters" class="d-flex gap-2 flex-nowrap">
       <filter-badge
-        v-for="(facet, n) in filters"
+        v-for="(facet, n) in visibleFilters"
         :key="n"
         v-model="filter[facet.name]"
         :is-default="filter[facet.name].isDefault"
@@ -90,6 +90,7 @@ class FilterPanel extends Vue {
   @Prop({ type: String }) endpoint;
   @Prop() panel;
   @Prop(Boolean) search;
+  @Prop(Boolean) mini;
   @Prop({ type: String, default: function() { return this.$t('components.filter.search'); } }) searchPlaceholder;
 
   filter = {};
@@ -98,6 +99,17 @@ class FilterPanel extends Vue {
   loading = false;
   showFilters = true;
 
+  get visibleFilters() {
+    if (this.mini) {
+      return this.filters.slice(0, 2);
+    }
+    return this.filters;
+  }
+
+  get resetFilters() {
+    return this.filters.filter(f => !this.visibleFilters.find(vf => vf.name === f.name));
+  }
+
   async mounted() {
     this.filters = this.staticFilters ?? [];
     if (this.endpoint) {

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

@@ -0,0 +1,6 @@
+<template><svg width="16" height="16" viewBox="4 4 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8461 13.8066C9.51242 12.9683 7.88973 13.5198 6.33372 14.1816L5 11.0711C5.02223 11.0711 5.06669 11.0491 5.08892 11.027C6.55601 10.4093 10.3571 8.79892 13.5136 11.5785C13.6247 11.6668 13.7136 11.755 13.8248 11.8653C14.9585 11.4461 16.2255 11.3138 17.6037 11.6006C20.1155 12.108 21.8938 14.0272 22.6273 16.6083C23.3387 19.1452 23.0497 22.366 21.6048 25.9397L18.4484 24.6823C19.6932 21.5718 19.8043 19.1452 19.3375 17.5127C18.8929 15.9244 17.9593 15.1302 16.9146 14.9096C16.5367 14.8434 16.181 14.8214 15.8031 14.8655C16.5589 16.6965 16.7812 18.704 16.5811 20.4247C16.4255 21.8807 15.9365 23.3808 15.0251 24.4617C14.0248 25.6309 12.5133 26.2927 10.7572 25.8736C8.68996 25.3882 7.75636 23.7337 7.53407 22.0792C7.33401 20.4909 7.75636 18.704 8.4899 17.1156C9.02339 15.9685 9.82362 14.7772 10.8461 13.7845V13.8066ZM12.8245 16.6303C12.3577 17.1818 11.9354 17.8216 11.5797 18.5716C11.024 19.7629 10.8239 20.91 10.9128 21.6821C11.0017 22.388 11.2463 22.5425 11.513 22.6086C11.8909 22.6969 12.1354 22.6086 12.4022 22.2998C12.7356 21.9027 13.069 21.1527 13.1802 20.0717C13.3135 18.9466 13.1802 17.7333 12.8023 16.6303H12.8245Z" fill="currentColor"/>
+  <path d="M20.6582 5.7567C20.7911 5.4625 21.2089 5.4625 21.3418 5.7567L21.5835 6.29203C21.809 6.79121 22.2088 7.19101 22.708 7.41646L23.2433 7.65824C23.5375 7.79111 23.5375 8.20889 23.2433 8.34176L22.708 8.58354C22.2088 8.80899 21.809 9.20879 21.5835 9.70797L21.3418 10.2433C21.2089 10.5375 20.7911 10.5375 20.6582 10.2433L20.4165 9.70797C20.191 9.20879 19.7912 8.80899 19.292 8.58354L18.7567 8.34176C18.4625 8.20889 18.4625 7.79111 18.7567 7.65824L19.292 7.41646C19.7912 7.19101 20.191 6.79121 20.4165 6.29203L20.6582 5.7567Z" fill="currentColor"/>
+  <path d="M24.7722 11.5045C24.8607 11.3083 25.1393 11.3083 25.2278 11.5045L25.389 11.8614C25.5393 12.1941 25.8059 12.4607 26.1386 12.611L26.4955 12.7722C26.6917 12.8607 26.6917 13.1393 26.4955 13.2278L26.1386 13.389C25.8059 13.5393 25.5393 13.8059 25.389 14.1386L25.2278 14.4955C25.1393 14.6917 24.8607 14.6917 24.7722 14.4955L24.611 14.1386C24.4607 13.8059 24.1941 13.5393 23.8614 13.389L23.5045 13.2278C23.3083 13.1393 23.3083 12.8607 23.5045 12.7722L23.8614 12.611C24.1941 12.4607 24.4607 12.1941 24.611 11.8614L24.7722 11.5045Z" fill="currentColor"/>
+</svg>
+</template>

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

@@ -0,0 +1,7 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19 10V5.3C19 5.13431 18.8657 5 18.7 5H14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 14V18.7C5 18.8657 5.13431 19 5.3 19H10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5.5 18.5L9.5 14.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14.5 9.5L18.5 5.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

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

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.08422 11.626C4.97192 11.8628 4.97193 12.1375 5.08423 12.3743C6.303 14.9438 8.94045 16.7231 11.9977 16.7231C15.055 16.7231 17.6925 14.9437 18.9112 12.3741C19.0235 12.1373 19.0235 11.8625 18.9112 11.6258C17.6924 9.0562 15.055 7.27698 11.9978 7.27698C8.94046 7.27698 6.30294 9.05631 5.08422 11.626ZM15 12C15 13.6569 13.6569 15 12 15C10.3432 15 9.00003 13.6569 9.00003 12C9.00003 10.3432 10.3432 9.00002 12 9.00002C12.3075 9.00002 12.6042 9.04627 12.8834 9.1322C12.3625 9.36738 12 9.89137 12 10.5C12 11.3284 12.6716 12 13.5 12C14.1087 12 14.6327 11.6375 14.8678 11.1166C14.9538 11.3959 15 11.6926 15 12Z" fill="currentColor"/>
+</svg>
+</template>

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

@@ -0,0 +1,5 @@
+<template><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+</svg>
+</template>

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

@@ -0,0 +1,5 @@
+<template><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-closed" viewBox="0 0 16 16">
+  <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3zm1 13h8V2H4z"/>
+  <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0"/>
+</svg>
+</template>

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

@@ -0,0 +1,4 @@
+<template><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+  <path d="M8.932.727c-.243-.97-1.62-.97-1.864 0l-.071.286a.96.96 0 0 1-1.622.434l-.205-.211c-.695-.719-1.888-.03-1.613.931l.08.284a.96.96 0 0 1-1.186 1.187l-.284-.081c-.96-.275-1.65.918-.931 1.613l.211.205a.96.96 0 0 1-.434 1.622l-.286.071c-.97.243-.97 1.62 0 1.864l.286.071a.96.96 0 0 1 .434 1.622l-.211.205c-.719.695-.03 1.888.931 1.613l.284-.08a.96.96 0 0 1 1.187 1.187l-.081.283c-.275.96.918 1.65 1.613.931l.205-.211a.96.96 0 0 1 1.622.434l.071.286c.243.97 1.62.97 1.864 0l.071-.286a.96.96 0 0 1 1.622-.434l.205.211c.695.719 1.888.03 1.613-.931l-.08-.284a.96.96 0 0 1 1.187-1.187l.283.081c.96.275 1.65-.918.931-1.613l-.211-.205a.96.96 0 0 1 .434-1.622l.286-.071c.97-.243.97-1.62 0-1.864l-.286-.071a.96.96 0 0 1-.434-1.622l.211-.205c.719-.695.03-1.888-.931-1.613l-.284.08a.96.96 0 0 1-1.187-1.186l.081-.284c.275-.96-.918-1.65-1.613-.931l-.205.211a.96.96 0 0 1-1.622-.434zM8 12.997a4.998 4.998 0 1 1 0-9.995 4.998 4.998 0 0 1 0 9.996z"/>
+</svg>
+</template>