@itfin/components 1.3.84 → 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/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>

package/src/components/filter/constants.js

@@ -1,20 +0,0 @@
-
-
-export function getOperatorsByType(type) {
-  const operations = [
-    {
-      type: 'string',
-      operators: [
-        { 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: '∃' }
-      ]
-    }
-  ];
-
-  return operations.find((operation) => operation.type === type).operators;
-}