@itfin/components 2.0.16 → 2.0.18

package/package.json

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

package/src/components/datepicker/DateGranularityPicker.vue

@@ -129,7 +129,7 @@ class itfDateGranularityPicker extends Vue {
   @Prop({ type: [String, Date], default: ''}) maxDate;
   @Prop(Boolean) disabled;
 
-  granularity = 'yearly';
+  granularity = 'monthly';
 
   get granularities() {
     return [
@@ -137,6 +137,7 @@ class itfDateGranularityPicker extends Vue {
       { title: 'Quarterly', value: 'quarterly' },
       { title: 'Monthly', value: 'monthly' },
       { title: 'Weekly', value: 'weekly' },
+      { title: 'Daily', value: 'daily' },
       { title: 'Custom', value: 'manual' },
     ];
   }

package/src/components/datepicker/PeriodPicker.vue

@@ -11,85 +11,27 @@
       :placeholder="placeholder"
     />
     <div style="display: none">
-      <div ref="dropdown" class="itf-periodpicker__dropdown">
-        <div class="row mb-3">
-          <div class="col">
-            <itf-button @click="setYear(prevYear)">
-              <itf-icon name="chevron_left" />
-            </itf-button>
-          </div>
-          <div class="col">
-            <itf-button block @click="setYear(prevYear)">
-              {{prevYear}}
-            </itf-button>
-          </div>
-          <div class="col">
-            <itf-button color="outline-primary" block>
-              {{year}}
-            </itf-button>
-          </div>
-          <div class="col">
-            <itf-button block @click="setYear(nextYear)">
-              {{nextYear}}
-            </itf-button>
-          </div>
-          <div class="col text-end">
-            <itf-button @click="setYear(nextYear)">
-              <itf-icon name="chevron_right" />
-            </itf-button>
-          </div>
-        </div>
-
-        <itf-button block class="mb-3" :class="{'btn-whole': !isCurrentYear()}" :primary="isCurrentYear()" @click="onYearSelect(year)">
-          {{ $t('components.wholeYear') }}
-        </itf-button>
-
-        <div class="itf-periodpicker__quarters">
-          <div
-            v-for="quarter of quarters"
-            :key="quarter.Number"
-            class="itf-periodpicker__quarter"
-            :class="{ 'active': isOnlyQuarter(quarter.Number), 'active-inside': isCurrentQuarter(quarter.Number) }">
-            <div class="px-3 pt-2" @click="onQuarterSelect([quarter.Months[0], quarter.Months[2]])">
-              <small><b>QUARTER</b></small><br>
-              <span class="quarter-number">{{ quarter.Number }}</span>
-            </div>
-
-            <div class="itf-periodpicker__months">
-              <itf-button
-                class="itf-periodpicker__month px-1"
-                v-for="month of quarter.Months"
-                :key="month"
-                :primary="isCurrentMonth(month)"
-                @click="onMonthSelect(month)"
-              >
-                {{ month | formatMonth }}
-              </itf-button>
-            </div>
-          </div>
-        </div>
-      </div>
+      <itf-period-picker-inline
+        ref="dropdown"
+        class="itf-periodpicker__dropdown"
+        v-model="value"
+        :value-format="valueFormat"
+        @input="onInput"
+      />
     </div>
   </div>
 </template>
 <script>
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
-import { DateTime } from 'luxon';
 import tippy from 'tippy.js';
-import itfIcon from '../icon/Icon';
-import itfButton from '../button/Button';
+import itfPeriodPickerInline from "./PeriodPickerInline.vue";
+import {DateTime} from "luxon";
 import ITFSettings from '../../ITFSettings';
 
 export default @Component({
   name: 'itfPeriodPicker',
   components: {
-    itfIcon,
-    itfButton
-  },
-  filters: {
-    formatMonth(month) {
-      return DateTime.local().set({ month }).toFormat('MMM');
-    }
+    itfPeriodPickerInline
   }
 })
 class itfPeriodPicker extends Vue {
@@ -97,51 +39,12 @@ class itfPeriodPicker extends Vue {
 
   @Prop({ type: Array }) value;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
-  @Prop({ type: String }) displayFormat;
   @Prop({ type: String, default: 'bottom-start' }) placement;
-  @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
-  @Prop({ type: Boolean, default: false }) onlyCalendar;
   @Prop({ type: String, default: '' }) placeholder;
-
-  year = null;
+  @Prop({ type: String }) displayFormat;
 
   focused = false;
 
-  tooltip = null;
-
-  get quarters() {
-    return [
-      { Name: `${this.$t('components.quarter')} 1`, Months: [1, 2, 3], Number: 1 },
-      { Name: `${this.$t('components.quarter')} 2`, Months: [4, 5, 6], Number: 2 },
-      { Name: `${this.$t('components.quarter')} 3`, Months: [7, 8, 9], Number: 3 },
-      { Name: `${this.$t('components.quarter')} 4`, Months: [10, 11, 12], Number: 4 },
-    ];
-  }
-
-  get dateFormat() {
-    return this.displayFormat || ITFSettings.defaultDisplayDateFormat;
-  }
-
-  get nextYear() {
-    return this.year + 1;
-  }
-
-  get prevYear() {
-    return this.year - 1;
-  }
-
-  setYear(year) {
-    this.year = year;
-  }
-
-  isInvalid() {
-    return this.itemLabel && this.itemLabel.isHasError();
-  }
-
-  isSuccess() {
-    return this.itemLabel && this.itemLabel.isHasSuccess();
-  }
-
   mounted() {
     const context = this.$el.closest('.itf-append-context') || document.body;
     this.tooltip = tippy(this.$refs.input, {
@@ -149,30 +52,17 @@ class itfPeriodPicker extends Vue {
       interactiveDebounce: 75,
       animation: 'scale',
       arrow: true,
-      content: this.$refs.dropdown,
+      content: this.$refs.dropdown.$el,
       allowHTML: true,
       trigger: 'click',
       interactive: true,
       placement: this.placement,
       appendTo: context,
     });
-    this.year = (this.value && this.value[0]) ? this.valueAsLuxon[0].year : DateTime.local().year;
   }
 
-  get valueAsLuxon() {
-    if (!this.value || this.value.length < 2) {
-      return null;
-    }
-    if (this.valueFormat === 'ISO') {
-      return [
-        DateTime.fromISO(this.value[0]),
-        DateTime.fromISO(this.value[1]),
-      ];
-    }
-    return [
-      DateTime.fromFormat(this.value[0], this.valueFormat),
-      DateTime.fromFormat(this.value[1], this.valueFormat),
-    ];
+  get dateFormat() {
+    return this.displayFormat || ITFSettings.defaultDisplayDateFormat;
   }
 
   get displayText() {
@@ -183,12 +73,29 @@ class itfPeriodPicker extends Vue {
     if (!this.valueAsLuxon || this.valueAsLuxon.length < 2) {
       return [];
     }
+    console.info(this.valueAsLuxon);
     return [
       this.valueAsLuxon[0].toFormat(this.dateFormat),
       this.valueAsLuxon[1].toFormat(this.dateFormat)
     ];
   }
 
+  get valueAsLuxon() {
+    if (!this.value || this.value.length < 2) {
+      return null;
+    }
+    if (this.valueFormat === 'ISO') {
+      return [
+        DateTime.fromISO(this.value[0]),
+        DateTime.fromISO(this.value[1]),
+      ];
+    }
+    return [
+      DateTime.fromFormat(this.value[0], this.valueFormat),
+      DateTime.fromFormat(this.value[1], this.valueFormat),
+    ];
+  }
+
   onFocus() {
     this.focused = true;
   }
@@ -197,71 +104,21 @@ class itfPeriodPicker extends Vue {
     this.focused = false;
   }
 
-  selectInlineDate(date) {
-    this.$emit('input', date);
-    this.tooltip.hide();
-  }
-
-  isCurrentMonth(month) {
-    if (!this.valueAsLuxon) {
-      return false;
-    }
-    return Number(this.valueAsLuxon[0].toFormat('M')) === month && Number(this.valueAsLuxon[1].toFormat('M')) === month;
-  }
-
-  isOnlyQuarter(quarter) {
-    if (!this.valueAsLuxon) {
-      return false;
-    }
-    return this.isCurrentQuarter(quarter) && this.valueAsLuxon[0].month !== this.valueAsLuxon[1].month;
+  isInvalid() {
+    return this.itemLabel && this.itemLabel.isHasError();
   }
 
-  isCurrentQuarter(quarter) {
-    if (!this.valueAsLuxon) {
-      return false;
-    }
-    return this.valueAsLuxon[0].quarter === quarter && this.valueAsLuxon[1].quarter === quarter;
+  isSuccess() {
+    return this.itemLabel && this.itemLabel.isHasSuccess();
   }
 
-  isCurrentYear() {
-    if (!this.valueAsLuxon) {
-      return false;
-    }
-    return this.valueAsLuxon[0].hasSame(this.valueAsLuxon[0].startOf('year'), 'day')
-      && this.valueAsLuxon[1].hasSame(this.valueAsLuxon[0].endOf('year'), 'day');
+  selectInlineDate(date) {
+    this.$emit('input', date);
   }
 
-  updateValue(start, end) {
-    if (!start) {
-      this.$emit('input', []);
-      return;
-    }
-    this.$emit('input', [
-      (this.valueFormat === 'ISO') ? start.toISO() : start.toFormat(this.valueFormat),
-      (this.valueFormat === 'ISO') ? end.toISO() : end.toFormat(this.valueFormat),
-    ]);
+  onInput(val) {
+    this.$emit('input', val);
     this.tooltip.hide();
   }
-
-  onYearSelect(year) {
-    this.updateValue(
-      DateTime.local().set({ year }).startOf('year'),
-      DateTime.local().set({ year }).endOf('year'),
-    );
-  }
-
-  onMonthSelect(month) {
-    this.updateValue(
-      DateTime.local().set({ month, year: this.year }).startOf('month'),
-      DateTime.local().set({ month, year: this.year }).endOf('month'),
-    );
-  }
-
-  onQuarterSelect([startMonth, endMonth]) {
-    this.updateValue(
-      DateTime.local().set({ month: startMonth, year: this.year }).startOf('quarter'),
-      DateTime.local().set({ month: endMonth, year: this.year }).endOf('quarter'),
-    );
-  }
 }
 </script>

package/src/components/datepicker/PeriodPickerInline.vue

@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <div class="row mb-3">
+      <div class="col">
+        <itf-button icon @click="setYear(prevYear)">
+          <itf-icon name="chevron_left" />
+        </itf-button>
+      </div>
+      <div class="col">
+        <itf-button block @click="setYear(prevYear)">
+          {{prevYear}}
+        </itf-button>
+      </div>
+      <div class="col">
+        <itf-button color="outline-primary" block>
+          {{year}}
+        </itf-button>
+      </div>
+      <div class="col">
+        <itf-button block @click="setYear(nextYear)">
+          {{nextYear}}
+        </itf-button>
+      </div>
+      <div class="col text-end">
+        <itf-button icon @click="setYear(nextYear)">
+          <itf-icon name="chevron_right" />
+        </itf-button>
+      </div>
+    </div>
+
+    <itf-button block class="mb-3" :class="{'btn-whole': !isCurrentYear()}" :primary="isCurrentYear()" @click="onYearSelect(year)">
+      {{ $t('components.wholeYear') }}
+    </itf-button>
+
+    <div class="itf-periodpicker__quarters">
+      <div
+        v-for="quarter of quarters"
+        :key="quarter.Number"
+        class="itf-periodpicker__quarter"
+        :class="{ 'active': isOnlyQuarter(quarter.Number), 'active-inside': isCurrentQuarter(quarter.Number) }">
+        <div class="px-3 pt-2" @click="onQuarterSelect([quarter.Months[0], quarter.Months[2]])">
+          <small><b>{{ $t('components.quarter') }}</b></small><br>
+          <span class="quarter-number">{{ quarter.Number }}</span>
+        </div>
+
+        <div class="itf-periodpicker__months">
+          <itf-button
+            class="itf-periodpicker__month px-1"
+            v-for="month of quarter.Months"
+            :key="month"
+            :primary="isCurrentMonth(month)"
+            @click="onMonthSelect(month)"
+          >
+            {{ month | formatMonth }}
+          </itf-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { DateTime } from 'luxon';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+
+export default @Component({
+  name: 'itfPeriodPickerInline',
+  components: {
+    itfIcon,
+    itfButton
+  },
+  filters: {
+    formatMonth(month) {
+      return DateTime.local().set({ month }).toFormat('MMM');
+    }
+  }
+})
+class itfPeriodPickerInline extends Vue {
+  @Prop({ type: Array }) value;
+  @Prop({ type: String, default: 'ISO' }) valueFormat;
+
+  year = null;
+
+  get quarters() {
+    return [
+      { Name: `${this.$t('components.quarter')} 1`, Months: [1, 2, 3], Number: 1 },
+      { Name: `${this.$t('components.quarter')} 2`, Months: [4, 5, 6], Number: 2 },
+      { Name: `${this.$t('components.quarter')} 3`, Months: [7, 8, 9], Number: 3 },
+      { Name: `${this.$t('components.quarter')} 4`, Months: [10, 11, 12], Number: 4 },
+    ];
+  }
+
+  get nextYear() {
+    return this.year + 1;
+  }
+
+  get prevYear() {
+    return this.year - 1;
+  }
+
+  setYear(year) {
+    this.year = year;
+  }
+
+  mounted() {
+    this.year = (this.value && this.value[0]) ? this.valueAsLuxon[0].year : DateTime.local().year;
+  }
+
+  get valueAsLuxon() {
+    if (!this.value || this.value.length < 2) {
+      return null;
+    }
+    if (this.valueFormat === 'ISO') {
+      return [
+        DateTime.fromISO(this.value[0]),
+        DateTime.fromISO(this.value[1]),
+      ];
+    }
+    return [
+      DateTime.fromFormat(this.value[0], this.valueFormat),
+      DateTime.fromFormat(this.value[1], this.valueFormat),
+    ];
+  }
+
+  isCurrentMonth(month) {
+    if (!this.valueAsLuxon) {
+      return false;
+    }
+    return Number(this.valueAsLuxon[0].toFormat('M')) === month && Number(this.valueAsLuxon[1].toFormat('M')) === month;
+  }
+
+  isOnlyQuarter(quarter) {
+    if (!this.valueAsLuxon) {
+      return false;
+    }
+    return this.isCurrentQuarter(quarter) && this.valueAsLuxon[0].month !== this.valueAsLuxon[1].month;
+  }
+
+  isCurrentQuarter(quarter) {
+    if (!this.valueAsLuxon) {
+      return false;
+    }
+    return this.valueAsLuxon[0].quarter === quarter && this.valueAsLuxon[1].quarter === quarter;
+  }
+
+  isCurrentYear() {
+    if (!this.valueAsLuxon) {
+      return false;
+    }
+    return this.valueAsLuxon[0].hasSame(this.valueAsLuxon[0].startOf('year'), 'day')
+      && this.valueAsLuxon[1].hasSame(this.valueAsLuxon[0].endOf('year'), 'day');
+  }
+
+  updateValue(start, end) {
+    if (!start) {
+      this.$emit('input', []);
+      return;
+    }
+    this.$emit('input', [
+      (this.valueFormat === 'ISO') ? start.toISO() : start.toFormat(this.valueFormat),
+      (this.valueFormat === 'ISO') ? end.toISO() : end.toFormat(this.valueFormat),
+    ]);
+  }
+
+  onYearSelect(year) {
+    this.updateValue(
+      DateTime.local().set({ year }).startOf('year'),
+      DateTime.local().set({ year }).endOf('year'),
+    );
+  }
+
+  onMonthSelect(month) {
+    this.updateValue(
+      DateTime.local().set({ month, year: this.year }).startOf('month'),
+      DateTime.local().set({ month, year: this.year }).endOf('month'),
+    );
+  }
+
+  onQuarterSelect([startMonth, endMonth]) {
+    this.updateValue(
+      DateTime.local().set({ month: startMonth, year: this.year }).startOf('quarter'),
+      DateTime.local().set({ month: endMonth, year: this.year }).endOf('quarter'),
+    );
+  }
+}
+</script>

package/src/components/datepicker/index.stories.js

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/vue';
 import itfDatePicker from './DatePicker.vue';
 import itfMonthPicker from './MonthPicker.vue';
 import itfPeriodPicker from './PeriodPicker';
+import itfPeriodPickerInline from './PeriodPickerInline';
 import itfDatePickerInline from './DatePickerInline.vue';
 import itfDateRangePicker from './DateRangePicker.vue';
 import itfDateRangePickerInline from './DateRangePickerInline.vue';
@@ -13,6 +14,7 @@ storiesOf('Common', module)
       itfApp,
       itfDatePicker,
       itfPeriodPicker,
+      itfPeriodPickerInline,
       itfMonthPicker,
       itfDateRangePicker,
       itfDatePickerInline,
@@ -86,6 +88,8 @@ storiesOf('Common', module)
         <h2>Period</h2>
 
         <itf-period-picker :value="dateRange" v-model.lazy="dateRange"></itf-period-picker>
+
+        <itf-period-picker-inline :value="dateRange" v-model.lazy="dateRange"></itf-period-picker-inline>
       </itf-app>
     </div>`,
   }));

package/src/components/filter/FilterBadge.vue

@@ -12,7 +12,7 @@
       </div>
     </template>
 
-    <div>
+    <div class="px-2">
       <template v-if="type === 'list'">
         <a
           v-for="(item, n) in options.items"
@@ -29,6 +29,13 @@
           @input="onFilterChange({ value: $event })"
         />
       </template>
+      <template v-else-if="type === 'timeframe'">
+        <itf-period-picker-inline
+          :value="value.value"
+          value-format="yyyy-MM-dd"
+          @input="onFilterChange({ value: $event })"
+        />
+      </template>
       <template v-else-if="type === 'date'">
         <itf-date-picker-inline
           style="margin: -.5rem"
@@ -61,6 +68,7 @@
 <style lang="scss">
 :root {
   --filter-badge__default-color: #475266;
+  --filter-badge__icon-color: #A7AFBB;
   --filter-badge__default-border-color: #0000001A;
   --filter-badge__default-bg-color: transparent;
   --filter-badge__default-bg-color-hover: #1A4A970D;
@@ -75,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;
@@ -87,6 +99,7 @@
 
   .icon {
     margin: -2px;
+    color: var(--filter-badge__icon-color);
   }
   &:hover {
     background-color: var(--filter-badge__default-bg-color-hover);
@@ -95,16 +108,20 @@
   &.filter-not-default-pill {
     background-color: var(--filter-badge__selected-bg-color);
     outline: 1px solid var(--filter-badge__selected-color);
+
+    .icon { color: var(--filter-badge__selected-color) }
   }
   &.filter-invalid-pill {
     background-color: var(--filter-badge__invalid-bg-color);
+
+    .icon { color: var(--filter-badge__invalid-color) }
   }
   &.filter-pill__default-value {
     padding: var(--filter-badge__padding-y) var(--filter-badge__padding-x);
   }
 }
 .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;
@@ -129,7 +146,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);
@@ -146,6 +163,7 @@ import itfButton from '../button/Button';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfDatePickerInline from '../datepicker/DatePickerInline.vue';
 import itfDateRangePickerInline from '../datepicker/DateRangePickerInline.vue';
+import itfPeriodPickerInline from '../datepicker/PeriodPickerInline.vue'
 import itfTextField from '../text-field/TextField.vue';
 import FilterFacetsList from './FilterFacetsList';
 import FilterAmountRange from './FilterAmountRange.vue';
@@ -157,6 +175,7 @@ export default @Component({
     itfDropdown,
     itfDatePickerInline,
     itfDateRangePickerInline,
+    itfPeriodPickerInline,
     itfTextField,
     FilterFacetsList,
     FilterAmountRange

package/src/components/filter/FilterFacetsList.vue

@@ -19,16 +19,18 @@
         <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="dropdown-item" :class="{'active': val.isSelected}" @click="onFilterClick(val)">
+    <div class="facets-list">
+    <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 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>
     </div>
+    </div>
 
     <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>
@@ -43,7 +45,13 @@
   padding: 0 0.75rem .5rem;
   margin: 0 -.75rem .75rem;
 }
+.facets-list {
+  max-height: 50vh;
+  overflow: auto;
+}
 .dropdown-item {
+  --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), .25);
+
   cursor: pointer;
   display: inline-flex;
   -webkit-box-align: center;
@@ -52,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;
@@ -74,10 +82,11 @@
   .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 {