@itfin/components 1.3.84 → 1.3.86

package/package.json

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

package/src/assets/scss/_variables.scss

@@ -26,11 +26,11 @@ $success: #10834e;
 $warning: #cda277;
 $danger: #cb4839;
 
-$primary: #0B314F;
-$link-color: #0B314F;
+$primary: #0B314F !default;
+$link-color: #0B314F !default;
 $input-btn-focus-width: .125rem;
 
-$input-bg: #f3f3f3;
+$input-bg: #f3f3f3 !default;
 $input-border-color: rgba(#000, .08);
 $input-border-radius: 10px;
 $input-font-size: 0.875rem;

package/src/assets/scss/components/_toaster.scss

@@ -10,9 +10,9 @@
   padding: 15px;
 
   .toast-body {
-    word-break: break-all;
+    word-break: break-word;
   }
-  
+
   &.is-top-left,
   &.is-top-center,
   &.is-top-right {
@@ -95,7 +95,7 @@
     margin-top: -45px;
   }
 }
-
-.itf-toast-message {
+.itf-toast-message.toast {
+  --bs-toast-max-width: 400px;
   z-index: $zindex-toaster;
 }

package/src/components/app/message.js

@@ -1,8 +1,5 @@
-import Vue from 'vue';
 import ToastContainer from './ToastContainer.vue';
 
-const MessageConstructor = Vue.extend(ToastContainer);
-
 const instances = [];
 let count = 1;
 const containers = {};
@@ -39,9 +36,10 @@ const Message = function (options) {
     Message.close(id, userOnClose);
   };
   const parent = document.getElementById('itf-app');
-  const instance = new MessageConstructor({
-    parent: parent ? parent.__vue__ : null,
-    el: document.createElement('div'),
+
+  const instance = new ToastContainer({
+    parent: $nuxt.$el.__vue__,
+    el: document.createElement('itf-toast-container'),
     data: options
   });
 

package/src/components/filter/FacetFilter.vue

@@ -0,0 +1,138 @@
+<template>
+  <itf-form class="facets-panel" :class="{ horizontal }">
+    <div v-for="(item, n) of filters" :key="n" class="mb-3">
+      <template v-if="item.facet && ((facets[item.facet] && !horizontal) || horizontal)">
+        <div><strong>{{ item.label }}</strong></div>
+        <div class="facets-container">
+          <div v-if="horizontal" class="facets-search">
+            <input type="text" :placeholder="$t('search')" :value="query[item.facet]" @input="(e) => setQuery(e, item.facet)">
+          </div>
+          <div v-if="facets[item.facet]" class="facets-container__scroll">
+            <facet-item
+              :query="query[item.facet]"
+              :facet="facets[item.facet]"
+              :item="item"
+              :value="filter"
+              :show-all="horizontal"
+              @input="setFilterValue"
+            />
+          </div>
+        </div>
+      </template>
+      <filter-item
+        v-else-if="!item.facet"
+        :type="item.type"
+        :filter="item"
+        :value="filter"
+        :prepend-icon="item.id && item.id.includes('custom_') ? null : 'search'"
+        :labels="labels"
+        :loading-labels="loadingLabels"
+        @input="setFilterValue"
+      />
+    </div>
+
+    <div v-for="(facet, n) of customFields" :key="`cf_${n}`" class="mb-3">
+      <div><strong>{{ facet.Name }}</strong></div>
+      <div class="facets-container">
+        <facet-item
+          :facet="facet"
+          :item="{ id: facet.Id, title: facet.Name }"
+          :value="filter"
+          :show-all="horizontal"
+          @input="setFilterValue"
+        />
+      </div>
+    </div>
+  </itf-form>
+</template>
+<style lang="scss" scoped>
+.facets-panel {
+  &.horizontal {
+    display: grid;
+    grid-template-columns: repeat(7, clamp(150px, 13.75%, 15%));
+    grid-gap: .5rem;
+
+    .facets-container {
+      border: 1px solid var(--bs-border-color);
+      max-height: 100%;
+      min-height: 90%;
+
+      .facets-search {
+        border-bottom: 1px solid var(--bs-border-color);
+
+        input {
+          padding: .5rem;
+          border: 0;
+          width: 100%;
+        }
+      }
+      &::v-deep .facet-bar {
+        display: none;
+      }
+      &__scroll {
+        max-height: 200px;
+        overflow: auto;
+      }
+    }
+  }
+}
+</style>
+<script>
+import { Vue, Prop, Model, Component } from 'vue-property-decorator';
+import itfButton from '@itfin/components/src/components/button/Button';
+import itfForm from '@itfin/components/src/components/form/Form';
+import FilterItem from './FilterItem.vue';
+import FacetItem from './FacetItem.vue';
+
+export default @Component({
+  name: 'FacetFilters',
+  components: {
+    itfForm,
+    itfButton,
+    FilterItem,
+    FacetItem
+  }
+})
+class FacetFilters extends Vue {
+  @Model('input') value;
+  @Prop(String) type;
+  @Prop() filter;
+  @Prop() labels;
+  @Prop() loadingLabels;
+  @Prop() facets;
+  @Prop(Boolean) horizontal;
+  @Prop(Array) filters;
+
+  query = {};
+
+  setQuery(e, facet) {
+    this.query = {
+      ...this.query,
+      [facet]: e.target.value
+    };
+  }
+
+  get customFields() {
+    if (!this.facets) {
+      return [];
+    }
+    const fields = [];
+    for (const key in this.facets) {
+      const item = this.facets[key];
+      if (item.IsCustomField) {
+        fields.push({
+          ...item,
+          Id: key
+        });
+      }
+    }
+    return fields;
+  }
+
+  setFilterValue (newFilter = {}) {
+    const filter = { ...newFilter };
+
+    this.$emit('update:filter', filter);
+  }
+}
+</script>

package/src/components/filter/FacetItem.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <button v-for="(val, n) of mappedValues" :key="n" class="facet-item" :class="{'active': val.isSelected}" @click="onFilterClick(val)">
+      <span class="facet-name text-dark">{{ val.Text }}</span>
+      <span class="facet-stat text-muted">
+        {{ val.Count }}
+        <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
+      </span>
+    </button>
+
+    <itf-button v-if="hasMore" small block @click="toggleMore">
+      <span v-if="showMore">{{ $t('common.hideMore', { count: facet.Values.length }) }}</span>
+      <span v-else>{{ $t('common.showMore', { count: facet.Values.length }) }}</span>
+    </itf-button>
+  </div>
+</template>
+<style lang="scss" scoped>
+.facet-item {
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  position: relative;
+  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;
+  white-space: normal;
+  user-select: none;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-image: initial;
+  transition: none 0s ease 0s;
+  &.active {
+    background-color: rgba(var(--bs-primary-rgb), 25%);
+  }
+  &:hover, &:focus, &.active {
+    border-color: var(--bs-primary);
+  }
+  .facet-name {
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .facet-stat {
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    margin-left: 0.25rem;
+  }
+  .facet-bar {
+    display: inline-block;
+    margin-left: 0.5rem;
+    width: 60px;
+  }
+  .facet-bar-progress {
+    display: block;
+    width: var(--bar-width);
+    min-width: 5px;
+    height: 10px;
+    background-color: rgb(197, 205, 223);
+    transition: width 0.3s ease 0s;
+  }
+}
+</style>
+<script>
+import { Vue, Prop, Model, Component } from 'vue-property-decorator';
+import itfButton from '@itfin/components/src/components/button/Button';
+import { DateTime } from 'luxon';
+
+export default @Component({
+  name: 'FacetItem',
+  components: {
+    itfButton
+  }
+})
+class FacetItem extends Vue {
+  @Model('input') value;
+  @Prop() facet;
+  @Prop() item;
+  @Prop() query;
+  @Prop(Boolean) showAll;
+
+  showMore = false;
+
+  toggleMore() {
+    this.showMore = !this.showMore;
+  }
+
+  get hasMore() {
+    if (this.showAll) {
+      return false;
+    }
+    return this.facet.Values.length > 5;
+  }
+
+  get mappedValues() {
+    const { id, items = [], multiple } = this.item || {};
+    let list = this.facet.Values.map(val => {
+      const item = items.find(i => `${i.value}` === `${val.Value}`);
+      const isSelected = multiple
+        ? Array.isArray(this.value[id]) && this.value[id].map(String).includes(`${val.Value}`)
+        : `${this.value[id]}` === `${val.Value}`;
+
+      if (item) {
+        // якщо знайдено item, ЗАТРЕ Text в val і замінить його на item.title
+        return { ...val, Text: item.title, isSelected };
+      }
+      return { ...val, isSelected };
+    });
+
+    list = list.map(val => val.Text ? { ...val, Text: this.getFormattedItemTitle(val.Text) } : val);
+
+    if (this.query) {
+      list = list.filter((val) => val.Text.toLowerCase().includes(this.query.toLowerCase()));
+    }
+    if (!this.showMore && !this.showAll) {
+      return list.slice(0, 5);
+    }
+    return list;
+  }
+
+  getFormattedItemTitle(title) {
+    return this.isValueDateInStandartFormat(title) ? DateTime.fromFormat(title, 'yyyy-MM-dd', { zone: 'utc' }).toFormat('MM/dd/yyyy') : title;
+  }
+
+  isValueDateInStandartFormat(value) {
+    return typeof value === 'string' ? DateTime.fromFormat(value, 'yyyy-MM-dd', { zone: 'utc' }).isValid : false;
+  }
+
+  getPercent(item) {
+    return this.facet.Total ? Math.round((item.Count / this.facet.Total) * 100) : 0;
+  }
+
+  onFilterClick(val) {
+    const newVal = { ...this.value };
+    if (this.item.multiple) {
+      newVal[this.item.id] = [...Array.isArray(newVal[this.item.id]) ? newVal[this.item.id] : []].map((s) => s.toString());
+      if (newVal[this.item.id].includes(`${val.Value}`)) {
+        newVal[this.item.id].splice(newVal[this.item.id].indexOf(`${val.Value}`), 1);
+      } else {
+        newVal[this.item.id].push(`${val.Value}`);
+      }
+    } else if (`${newVal[this.item.id]}` === `${val.Value}`) {
+      newVal[this.item.id] = null;
+    } else {
+      newVal[this.item.id] = val.Value;
+    }
+    this.$emit('input', newVal);
+  }
+}
+</script>

package/src/components/filter/FilterItem.vue

@@ -0,0 +1,423 @@
+<template>
+  <div>
+    <template v-if="type === 'string'">
+      <itf-text-field
+        delay-input="300"
+        :prepend-icon="prependIcon"
+        :clearable="filterClearable"
+        :placeholder="filter.label"
+        :value="plainValue"
+        @input="updateValue(filter.id, $event)"
+      />
+    </template>
+    <template v-if="type === 'range'">
+      <div class="row">
+        <div class="col">
+          <itf-text-field
+            delay-input="300"
+            clearable
+            :placeholder="`${filter.label} (${$t('from')})`"
+            :value="value[filter.fields[0]]"
+            @input="updateValue(filter.fields[0], $event)"
+          />
+        </div>
+        <div class="col">
+          <itf-text-field
+            delay-input="300"
+            clearable
+            :placeholder="`(${$t('to')})`"
+            :value="value[filter.fields[1]]"
+            @input="updateValue(filter.fields[1], $event)"
+          />
+        </div>
+      </div>
+    </template>
+    <template v-else-if="type === 'list'">
+      <itf-select
+        :options="filter.items"
+        :clearable="filterClearable"
+        :reduce="(item) => item.value"
+        :get-option-label="(item) => item.title"
+        :selectable="(filter.selectable || (() => true))"
+        :value="plainValue"
+        :placeholder="filter.label"
+        :disabled="filter.disable"
+        @input="updateValue(filter.id, $event)"
+      >
+        <template #option="{ option }">
+          <div>
+            <span v-if="option.icon">{{ option.icon }}</span>
+            {{ option.title }}
+          </div>
+        </template>
+        <template #selected-option="{ option }">
+          <div>
+            <span v-if="option.icon">{{ option.icon }}</span>
+            {{ option.title }}
+          </div>
+        </template>
+      </itf-select>
+    </template>
+    <template v-else-if="type === 'tree'">
+      <itf-select
+        multiple
+        :clearable="filterClearable"
+        :placeholder="filter.label"
+        :value="plainValue"
+        :options="filter.items"
+        :reduce="(item) => item.id"
+        :selectable="(item) => !(item.type && item.type === 'group')"
+        @input="updateValue(filter.id, $event)"
+      >
+        <template #selected-option="{ option }">
+          <div v-if="option && option.label" class="d-flex align-items-center">
+            <div>
+              {{ option.label }}
+            </div>
+          </div>
+        </template>
+        <template #option="{ option }">
+          <div v-if="option" class="d-flex align-items-start">
+            <div :style="{ 'padding-left': `${option.type && option.type === 'group' ? 0 : 20}px` }">
+              {{ option.label }}
+            </div>
+          </div>
+        </template>
+      </itf-select>
+    </template>
+    <template v-else-if="type === 'project' && hasProjectsAccess">
+      <project-selector
+        :placeholder="filter.label"
+        :rules="[]"
+        :clearable="filterClearable"
+        :value="{ Id: plainValue }"
+        @input="updateValue(filter.id, $event && $event.Id)"
+      />
+    </template>
+    <template v-else-if="type === 'cashflowLine'">
+      <cashflow-line-selector
+        class="mb-3"
+        :value="{ Id: plainValue }"
+        :rules="[]"
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        @input="updateValue(filter.id, $event && $event.Id)"
+      />
+    </template>
+    <template v-else-if="(type === 'client' || type === 'counterparty') && isAllowClients">
+      <client-selector
+        :type="type === 'counterparty' ? 'vendors' : null"
+        :placeholder="filter.label"
+        :rules="[]"
+        :clearable="filterClearable"
+        :value="{ Id: plainValue }"
+        @input="updateValue(filter.id, $event && $event.Id)"
+      />
+    </template>
+    <template v-else-if="(type === 'counterparty2') && isAllowClients">
+      <counterparty-selector
+        :placeholder="filter.label"
+        :rules="[]"
+        :clearable="filterClearable"
+        :value="{ Id: plainValue }"
+        @input="updateValue(filter.id, $event && $event.Id)"
+      />
+    </template>
+    <template v-else-if="type === 'employee' && isCanSeeEmployees">
+      <employee-selector
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        :value="{ Id: plainValue }"
+        @input="updateValue(filter.id, $event && $event.Id)"
+      />
+    </template>
+    <template v-else-if="type === 'businessUnit'">
+      <business-unit-selector
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        :value="{ Id: plainValue }"
+        @input="updateValue(filter.id, $event && $event.Id)"
+      />
+    </template>
+    <template v-else-if="type === 'currency'">
+      <currency-selector
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        :value="{ Id: plainValue }"
+        @input="updateValue(filter.id, $event && $event.Id)"
+      />
+    </template>
+    <template v-else-if="type === 'office'">
+      <office-selector
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        :value="{ Id: plainValue }"
+        @input="updateValue(filter.id, $event && $event.Id)"
+      />
+    </template>
+    <template v-else-if="type === 'account'">
+      <account-selector
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        :value="{ Id: plainValue }"
+        @input="updateValue(filter.id, $event && $event.Id)"
+      />
+    </template>
+    <template v-else-if="type === 'vacancy'">
+      <vacancy-selector
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        :value="{ Id: plainValue }"
+        @input="updateValue(filter.id, $event && $event.Id)"
+      />
+    </template>
+    <template v-else-if="type === 'country'">
+      <country-selector
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        :value="plainValue ? { Name: plainValue } : null"
+        @input="updateValue(filter.id, $event && $event.Name)"
+      />
+    </template>
+    <template v-else-if="type === 'profile' && isProfileAvailable">
+      <profile-selector
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        :value="{ Id: plainValue }"
+        @input="updateValue(filter.id, $event && $event.Id)"
+      />
+    </template>
+    <template v-else-if="type === 'skills'">
+      <other-skills-selector
+        :taggable="false"
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        :value="plainValue"
+        @input="updateValue(filter.id, $event)"
+      />
+    </template>
+    <template v-else-if="type === 'label'">
+      <itf-select
+        :loading="loadingLabels"
+        :value="plainValue"
+        :placeholder="filter.label"
+        :options="prepareLabels"
+        multiple
+        :reduce="(item) => item.Id"
+        :get-option-label="(item) => item.LabelText"
+        @input="updateValue(filter.id, $event)"
+      >
+        <div v-if="filter.conditions" slot="list-header" class="px-2 pb-2">
+          <itf-segmented-control
+            class="text-uppercase segmented-control"
+            :value="value[filter.conditions] || 'and'"
+            :items="[{Id: 'and', Name: $t('and')}, {Id: 'or', Name: $t('or')}, {Id: 'not', Name: $t('not')}]"
+            @input="updateValue(filter.conditions, $event)"
+          />
+        </div>
+      </itf-select>
+    </template>
+    <template v-else-if="type === 'button'">
+      <itf-button block secondary :to="{ name: filter.to }">
+        {{ filter.label }}
+      </itf-button>
+    </template>
+    <template v-else-if="type === 'switch'">
+      <itf-checkbox
+        switch
+        :label="filter.label"
+        :value="plainValue"
+        @input="updateValue(filter.id, $event)"
+      />
+    </template>
+    <template v-else-if="type === 'date'">
+      <itf-date-range-picker
+        placement="bottom-end"
+        :value="dateRangeValue"
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        :disabled="filter.disable"
+        value-format="yyyy-MM-dd"
+        @input="updateDateValue($event, filter.fields)"
+      />
+    </template>
+    <template v-else-if="type === 'team'">
+      <team-selector
+        :clearable="filterClearable"
+        :value="{ Id: plainValue }"
+        @input="updateValue(filter.id, ($event && $event.Id) || null)"
+      />
+    </template>
+    <div v-else-if="type === 'dates'" class="d-flex gap-1">
+      <div>
+        <itf-date-picker
+          placement="bottom-end"
+          :value="dateRangeValue[0]"
+          :placeholder="`${filter.label} (From)`"
+          :clearable="filterClearable"
+          value-format="yyyy-MM-dd"
+          @input="updateDateValue([$event, dateRangeValue[1]], filter.fields)"
+        />
+      </div>
+      <div>
+        <itf-date-picker
+          placement="bottom-end"
+          :value="dateRangeValue[1]"
+          :placeholder="`${filter.label} (To)`"
+          :clearable="filterClearable"
+          value-format="yyyy-MM-dd"
+          @input="updateDateValue([dateRangeValue[0], $event], filter.fields)"
+        />
+      </div>
+    </div>
+    <template v-else-if="type === 'date-period'">
+      <itf-period-picker
+        placement="bottom-end"
+        :value="dateRangeValue"
+        value-format="yyyy-MM-dd"
+        :placeholder="filter.label"
+        :clearable="filterClearable"
+        @input="updateDateValue($event, filter.fields)"
+      />
+    </template>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+    z-index: 3 !important;
+  }
+  </style>
+<script>
+import { Component, Model, Prop, Vue } from 'vue-property-decorator';
+import itfButton from '@itfin/components/src/components/button/Button';
+import itfTextField from '@itfin/components/src/components/text-field/TextField';
+import itfSelect from '@itfin/components/src/components/select/Select';
+import itfDateRangePicker from '@itfin/components/src/components/datepicker/DateRangePicker';
+import itfDatePicker from '@itfin/components/src/components/datepicker/DatePicker';
+import itfPeriodPicker from '@itfin/components/src/components/datepicker/PeriodPicker';
+import itfCheckbox from '@itfin/components/src/components/checkbox/Checkbox';
+import itfSegmentedControl from '@itfin/components/src/components/segmented-control/SegmentedControl';
+import ProfileSelector from '~/components/Common/Selectors/ProfileSelector';
+import ClientSelector from '~/components/Common/Selectors/ClientSelector';
+import CurrencySelector from '~/components/Common/Selectors/CurrencySelector.vue';
+import BusinessUnitSelector from '~/components/Common/Selectors/BusinessUnitSelector.vue';
+import ProjectSelector from '~/components/Common/Selectors/ProjectSelector';
+import EmployeeSelector from '~/components/Common/Selectors/EmployeeSelector';
+import CounterpartySelector from '~/components/Common/Selectors/CounterpartySelector.vue';
+import OfficeSelector from '~/components/Common/Selectors/OfficeSelector';
+import OtherSkillsSelector from '~/components/Skills/OtherSkillsSelector';
+import AccountSelector from '~/components/Common/Selectors/AccountSelector';
+import VacancySelector from '~/components/Common/Selectors/VacancySelector';
+import CountrySelector from '~/components/Common/Selectors/CountrySelector.vue';
+import TeamSelector from '~/components/Common/Selectors/TeamSelector.vue';
+import CashflowLineSelector from '~/components/Common/Selectors/CashflowLineSelector.vue';
+
+import {
+  CLIENTS_VIEW_CLIENTS,
+  CLIENTS_VIEW_OWN_CLIENTS,
+  EMPLOYEES_LIST,
+  PROFILES_CAN_CHANGE_PROFILES,
+  PROFILES_SEE_PROFILES,
+  PROJECTS_LIST
+} from '~/scopes';
+
+export default @Component({
+  name: 'FilterItem',
+  components: {
+    BusinessUnitSelector,
+    CurrencySelector,
+    itfButton,
+    itfSelect,
+    itfCheckbox,
+    itfTextField,
+    itfSegmentedControl,
+    itfDatePicker,
+    itfDateRangePicker,
+    itfPeriodPicker,
+    ProjectSelector,
+    ProfileSelector,
+    ClientSelector,
+    OfficeSelector,
+    EmployeeSelector,
+    AccountSelector,
+    VacancySelector,
+    OtherSkillsSelector,
+    CountrySelector,
+    TeamSelector,
+    CounterpartySelector,
+    CashflowLineSelector,
+  }
+})
+class FilterItem extends Vue {
+  @Model('input') value;
+  @Prop(String) type;
+  @Prop() filter;
+  @Prop() labels;
+  @Prop() loadingLabels;
+  @Prop() prependIcon;
+
+  get isCanSeeEmployees () {
+    return this.$scope(EMPLOYEES_LIST);
+  }
+
+  get isProfileAvailable () {
+    return this.$scope(PROFILES_CAN_CHANGE_PROFILES, PROFILES_SEE_PROFILES);
+  }
+
+  get isAllowClients () {
+    return this.$scope(CLIENTS_VIEW_CLIENTS, CLIENTS_VIEW_OWN_CLIENTS);
+  }
+
+  get hasProjectsAccess() {
+    return this.$scope(PROJECTS_LIST);
+  }
+
+  get plainValue () {
+    return this.value[this.filter.id];
+  }
+
+  get dateRangeValue () {
+    return this.isCustomFilter
+      ? [
+        this.value[this.filter.id] && this.value[this.filter.id].from,
+        this.value[this.filter.id] && this.value[this.filter.id].to
+      ]
+      : [
+        this.value[(this.filter.fields || {})[0] || 'from'],
+        this.value[(this.filter.fields || {})[1] || 'to']
+      ];
+  }
+
+  get prepareLabels () {
+    return this.labels.map(label => ({ ...label, Color: `#${label.Color}` }));
+  }
+
+  get filterClearable () {
+    return typeof this.filter.clearable !== 'undefined' ? this.filter.clearable : true;
+  }
+
+  get isCustomFilter () {
+    return this.filter.id.toLowerCase().includes('customfield_');
+  }
+
+  updateValue (key, value, fields = {}) {
+    const filter = { ...this.value };
+    filter[key] = value;
+    this.$emit('input', filter);
+  }
+
+  updateDateValue (value, fields = {}) {
+    const filter = { ...this.value };
+
+    if (this.isCustomFilter) {
+      const key = this.filter.id;
+      filter[key] = value[0] && value[1] ? { from: value[0], to: value[1] } : null;
+    } else {
+      filter[fields[0] || 'from'] = value[0];
+      filter[fields[1] || 'to'] = value[1];
+    }
+
+    this.$emit('input', filter);
+  }
+}
+</script>

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

@@ -1,12 +1,10 @@
 import { storiesOf } from '@storybook/vue';
+import FiltersList from './FiltersList.vue';
 
 storiesOf('Common', module)
   .add('Filter', () => ({
     components: {
-      itfRule,
-      itfRuleGroup,
-      itfFilterBadge,
-      itfFilterControl
+      FiltersList
     },
     data() {
       return {
@@ -78,22 +76,9 @@ storiesOf('Common', module)
   </pre>
 
 
-      <itf-filter-control url-sync v-model="filter" :filters="filterFields">
-        <template #dropdown-item="{ item }">
-          {{item.text}}
-        </template>
-        <template #item="{ item }">
-          {{item}}
-        </template>
-        <template #item="{ item }">
-          {{item}}
-        </template>
-      </itf-filter-control>
+      <filters-list />
 
       {{filter}}
 
-      <h2>Example</h2>
-
-      <itf-rule-group :options="options" first />
     </div>`,
   }));