@itfin/components 1.3.86 → 1.3.87

package/src/components/range/utils.js

@@ -0,0 +1,74 @@
+// Unsharp text [#166](https://github.com/NightCatSama/vue-slider-component/issues/166)
+export const roundToDPR = (function () {
+  const r = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1
+  return value => Math.round(value * r) / r
+})()
+
+export const isMobile = (() => {
+  const userAgentInfo = navigator.userAgent.toLowerCase()
+  const agents = ["Android", "iPhone",
+    "SymbianOS", "Windows Phone",
+    "iPad", "iPod"]
+  let flag = false
+  for (let v = 0; v < agents.length; v++) {
+    if (userAgentInfo.indexOf(agents[v].toLowerCase()) > 0) {
+      flag = true
+      break
+    }
+  }
+  return flag
+})()
+
+export function isArray(input) {
+  if (Array.prototype.isArray) {
+    return Array.isArray(input)
+  }
+  return input instanceof Array || Object.prototype.toString.call(input) === '[object Array]'
+}
+
+export function isDiff(a, b) {
+  if (Object.prototype.toString.call(a) !== Object.prototype.toString.call(b)) {
+    return true
+  } else if (isArray(a) && a.length === b.length) {
+    return a.some((v, i) => v !== b[i])
+  }
+  return a !== b
+}
+
+let elementStyle = document.createElement('div').style
+let vendor = (() => {
+  let transformNames = {
+    webkit: 'webkitTransform',
+    Moz: 'MozTransform',
+    O: 'OTransform',
+    ms: 'msTransform',
+    standard: 'transform'
+  }
+  for (let key in transformNames) {
+    if (elementStyle[transformNames[key]] !== undefined) {
+      return key
+    }
+  }
+  return false
+})()
+
+export function prefixStyle(style) {
+  if (vendor === false) {
+    return false
+  }
+  if (vendor === 'standard') {
+    if (style === 'transitionEnd') {
+      return 'transitionend'
+    }
+    return style
+  }
+  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
+}
+
+export function addEvent(el, type, fn, capture) {
+  el.addEventListener(type, fn, {passive: false, capture: !!capture})
+}
+
+export function removeEvent(el, type, fn, capture) {
+  el.removeEventListener(type, fn, {passive: false, capture: !!capture})
+}

package/src/components/text-field/TextField.vue

@@ -11,7 +11,7 @@
       ref="input"
       autocomplete="off"
       :placeholder="placeholder"
-      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
+      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess(), 'form-control-sm': small }"
       class="itf-text-field__input form-control"
       :type="type"
       :value="value"
@@ -67,6 +67,7 @@ class itfTextField extends Vue {
   @Prop(Boolean) clearable;
   @Prop(Boolean) disabled;
   @Prop(Boolean) readonly;
+  @Prop(Boolean) small;
   @Prop({ type: String, default: 'text' }) type;
   @Prop({ type: [Number, String], default: 0 }) delayInput;
 

package/src/locales/en.js

@@ -125,5 +125,15 @@ module.exports = {
     itemsPerPage: 'Items per page',
     previous: 'Previous',
     next: 'Next'
+  },
+  filter: {
+    search: 'Search',
+    deselectAll: 'Deselect all',
+    selectAll: 'Select all',
+    showSelected: 'Show selected',
+    showAll: 'Show all',
+    noResults: 'No results',
+    showMore: 'show all ({count})',
+    hideMore: 'hide',
   }
 };

package/src/locales/uk.js

@@ -125,5 +125,15 @@ module.exports = {
     calculateCountNotEmpty: 'Кількість не порожніх',
     calculatePercentEmpty: 'Відсоток порожніх',
     calculatePercentNotEmpty: 'Відсоток не порожніх',
+  },
+  filter: {
+    search: 'Пошук',
+    deselectAll: 'Скасувати вибір',
+    selectAll: 'Вибрати все',
+    showSelected: 'Показати вибрані',
+    showAll: 'Показати все',
+    noResults: 'Немає результатів',
+    showMore: 'показати всі ({count})',
+    hideMore: 'сховати',
   }
 };

package/src/components/filter/ConditionGroup.vue

@@ -1,196 +0,0 @@
-<template>
-
-  <div class="b-condition-group-input w-100 pt-1 pb-2 px-2">
-    <div class="d-flex align-items-start">
-      <div v-if="value.conditions.length > 1" class="condition-group-type">
-        <itf-select
-          :value="value.link"
-          :reduce="(item) => item.value"
-          :options="[{ label: 'AND', value: 'and' }, { label: 'OR', value: 'or' }]"
-          @input="onLinkUpdate"
-        />
-      </div>
-      <div class="flex-1 pt-1">
-        <div v-for="(filter, n) in value.conditions" :key="n" :class="{'tree-node': value.conditions.length > 1}">
-          <div class="d-flex align-items-start">
-            <div class="flex-grow-1 py-2 me-2">
-              <itf-condition-group
-                v-if="filter.link"
-                :level="level + 1"
-                class="rounded"
-                :value="filter"
-                @input="onFilterUpdate(n, $event)"
-                :class="{'bg-group1': level === 0, 'bg-group2': level === 1}"
-              />
-              <filter-input
-                v-else
-                :value="filter"
-                @input="onFilterUpdate(n, $event)"
-              />
-            </div>
-            <div class="pt-2 mt-1">
-              <itf-button small icon @click="removeField(n)">
-                <itf-icon name="trash" />
-              </itf-button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <itf-button small secondary @click="addCondition">
-      <itf-icon name="plus" />
-      Add condition
-    </itf-button>
-    <itf-button v-if="level < maxDepth" small secondary @click="addConditionGroup">
-      <itf-icon name="plus" />
-      Add group
-    </itf-button>
-  </div>
-
-</template>
-<style>
-.b-condition-group-input {
-  --b-filterGroupBorder: rgba(0,0,0,.05);
-  --b-filterGroup1Bg: #f9fafb;
-  --b-filterGroup2Bg: #f1f2f4;
-
-  [data-theme="dark"] & {
-    --b-filterGroup1Bg: #303436;
-    --b-filterGroup2Bg: #3a3e41;
-    --b-filterGroupBorder: hsla(0,0%,100%,.03);
-  }
-}
-.bg-group1 {
-  background: var(--b-filterGroup1Bg);
-  border: 1px solid var(--b-filterGroupBorder);
-}
-.bg-group2 {
-  background: var(--b-filterGroup2Bg);
-  border: 1px solid var(--b-filterGroupBorder);
-}
-.condition-group-type {
-  width: 85px;
-  z-index: 10;
-  margin-right: 1rem;
-  margin-top: .5rem;
-  margin-bottom: .5rem;
-  position: relative;
-}
-.flex-1 {
-  flex: 1 1 0%;
-}
-.tree-node {
-  --h-line-position: 1.5rem;
-  --line-color: #D2D5DF;
-  --line-width: 1px;
-  --line-radius: 10px;
-  --line-connection-position: -3.5rem;
-  --node-space: .5rem;
-  margin-bottom: var(--node-space);
-  position: relative;
-
-  &:first-child:before {
-    border-left: solid var(--line-width) var(--line-color);
-    top: var(--h-line-position);
-    height: calc(100% - var(--h-line-position) + var(--node-space));
-    width: var(--line-radius);
-  }
-  &:before {
-    display: inline-block;
-    border-left: solid var(--line-width) var(--line-color);
-    content: "";
-    height: calc(100% + var(--node-space));
-    position: absolute;
-    left: var(--line-connection-position);
-  }
-  &:first-child:after {
-    height: var(--line-radius);
-  }
-  &:after {
-    display: inline-block;
-    border-top: solid var(--line-width) var(--line-color);
-    content: "";
-    width: calc(var(--line-connection-position)* -1);
-    position: absolute;
-    top: var(--h-line-position);
-    left: var(--line-connection-position);
-  }
-  &:last-child:before {
-    border-color: var(--line-color);
-    top: 0%;
-    height: var(--h-line-position);
-    width: var(--line-radius);
-    border-bottom-left-radius: var(--line-radius);
-  }
-  &:last-child:after {
-    border-top: none;
-    border-bottom: solid var(--line-width) var(--line-color);
-    border-left: solid var(--line-width) var(--line-color);
-    height: var(--line-radius);
-    border-bottom-left-radius: var(--line-radius);
-    top: calc(var(--h-line-position) - var(--line-radius));
-  }
-}
-</style>
-<script>
-import { Component, Prop, Model, Vue, Watch } from 'vue-property-decorator';
-import itfButton from '@itfin/components/src/components/button/Button.vue';
-import itfTextField from '@itfin/components/src/components/text-field/TextField.vue';
-import itfDropdown from '@itfin/components/src/components/dropdown/Dropdown.vue';
-import itfSelect from '@itfin/components/src/components/select/Select.vue';
-import itfIcon from '@itfin/components/src/components/icon/Icon.vue';
-import FilterInput from '~/components/Panels/FilterInput.vue';
-
-export default @Component({
-  name: 'itfConditionGroup',
-  components: {
-    itfTextField,
-    itfSelect,
-    itfDropdown,
-    itfButton,
-    itfIcon,
-    FilterInput
-  }
-})
-class ConditionGroup extends Vue {
-  @Model('input', { default: () => ({ link: 'and', conditions: [] }) }) value;
-  @Prop({ default: 0 }) level;
-  @Prop({ default: 1 }) maxDepth;
-
-  onLinkUpdate(link) {
-    this.$emit('input', { ...this.value, link });
-  }
-
-  onFilterUpdate(index, filter) {
-    this.applyValue((conditions) => {
-      conditions[index] = filter;
-    });
-  }
-
-  applyValue(func) {
-    const newValue = { ...this.value, conditions: [...this.value.conditions] };
-    func(newValue.conditions);
-    this.$emit('input', newValue);
-  }
-
-  addCondition() {
-    this.applyValue((conditions) => {
-      conditions.push({ operator: 'is', values: [] });
-    });
-  }
-
-  addConditionGroup() {
-    this.applyValue((conditions) => {
-      conditions.push({ link: 'and', conditions: [] });
-    });
-    // this.filters.push({ type: 'group' });
-  }
-
-  removeField(index) {
-    this.applyValue((conditions) => {
-      conditions.splice(index, 1);
-    });
-  }
-}
-</script>

package/src/components/filter/FacetFilter.vue

@@ -1,138 +0,0 @@
-<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

@@ -1,162 +0,0 @@
-<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/FilterInput.vue

@@ -1,64 +0,0 @@
-<template>
-
-  <div class="d-flex">
-    <div class="w-25">
-      <itf-select :options="fields" />
-    </div>
-    <div class="w-25 px-1">
-      <itf-select
-        :reduce="(item) => item.id"
-        :get-option-label="(item) => item.title"
-        :options="conditions"
-      >
-        <template #selected-option="{ option }">
-          <span class="sign-box"> {{option.title}}</span>
-        </template>
-        <template #option="{ option }">
-          {{option.title}}
-        </template>
-      </itf-select>
-    </div>
-    <div class="w-50">
-      <itf-text-field />
-    </div>
-  </div>
-
-</template>
-<style>
-</style>
-<script>
-import { Component, Prop, Model, Vue, Watch } from 'vue-property-decorator';
-import itfButton from '@itfin/components/src/components/button/Button.vue';
-import itfTextField from '@itfin/components/src/components/text-field/TextField.vue';
-import itfSelect from '@itfin/components/src/components/select/Select.vue';
-import itfDropdown from '@itfin/components/src/components/dropdown/Dropdown.vue';
-import itfIcon from '@itfin/components/src/components/icon/Icon.vue';
-
-const conditions = [
-  { id: 'eq', title: 'equal', sign: '=' },
-  { id: 'notEq', title: 'not equal', sign: '≠' },
-  { id: 'contains', title: 'contains', sign: '∋' },
-  { id: 'noContains', title: 'not contains', sign: '∌' },
-  { id: 'startsWith', title: 'starts with', sign: 'A…' },
-  { id: 'endsWith', title: 'ends with', sign: '…Z' },
-  // { id: 'exists', title: 'exists', sign: '∃' }
-];
-
-export default @Component({
-  name: 'itfFilterInput',
-  components: {
-    itfTextField,
-    itfSelect,
-    itfDropdown,
-    itfButton,
-    itfIcon
-  }
-})
-class FilterInput extends Vue {
-  @Prop() fields;
-
-  get conditions() {
-    return conditions;
-  }
-}
-</script>