@itfin/components 2.0.8 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itfin/components",
3
- "version": "2.0.8",
3
+ "version": "2.0.9",
4
4
  "author": "Vitalii Savchuk <esvit666@gmail.com>",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -16,15 +16,15 @@
16
16
  <itf-icon new name="filter" />
17
17
  <span v-if="activeFiltersCount" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
18
18
  {{activeFiltersCount}}
19
- <span class="visually-hidden">unread messages</span>
19
+ <span class="visually-hidden">active filters</span>
20
20
  </span>
21
21
  </itf-button>
22
22
  <slot name="after-filter-btn"></slot>
23
23
  </div>
24
24
  </div>
25
- <div v-if="showFilters" class="d-flex gap-2 flex-wrap">
25
+ <div v-if="showFilters" class="d-flex gap-2 flex-nowrap">
26
26
  <filter-badge
27
- v-for="(facet, n) in filters"
27
+ v-for="(facet, n) in visibleFilters"
28
28
  :key="n"
29
29
  v-model="filter[facet.name]"
30
30
  :is-default="filter[facet.name].isDefault"
@@ -90,6 +90,7 @@ class FilterPanel extends Vue {
90
90
  @Prop({ type: String }) endpoint;
91
91
  @Prop() panel;
92
92
  @Prop(Boolean) search;
93
+ @Prop(Boolean) mini;
93
94
  @Prop({ type: String, default: function() { return this.$t('components.filter.search'); } }) searchPlaceholder;
94
95
 
95
96
  filter = {};
@@ -98,6 +99,17 @@ class FilterPanel extends Vue {
98
99
  loading = false;
99
100
  showFilters = true;
100
101
 
102
+ get visibleFilters() {
103
+ if (this.mini) {
104
+ return this.filters.slice(0, 2);
105
+ }
106
+ return this.filters;
107
+ }
108
+
109
+ get resetFilters() {
110
+ return this.filters.filter(f => !this.visibleFilters.find(vf => vf.name === f.name));
111
+ }
112
+
101
113
  async mounted() {
102
114
  this.filters = this.staticFilters ?? [];
103
115
  if (this.endpoint) {
@@ -0,0 +1,4 @@
1
+ <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <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"/>
3
+ </svg>
4
+ </template>