@itfin/components 1.3.86 → 1.3.87

package/package.json

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

package/src/assets/scss/components/_button.scss

@@ -72,7 +72,6 @@
     -webkit-mask-image: none!important;
   }
   &.btn-squircle:focus:after {
-    background: rgb(103, 146, 244);
     border-color: rgb(103, 146, 244);
   }
   &:not(.dropdown-toggle):focus:after {

package/src/assets/scss/components/_range.scss

@@ -0,0 +1,276 @@
+.vue-range-slider.slider-component {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.vue-range-slider.slider-component .slider {
+  position: relative;
+  display: block;
+  border-radius: 15px;
+  background-color: #ccc;
+}
+.vue-range-slider.slider-component .slider::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+.vue-range-slider.slider-component .slider .slider-dot {
+  position: absolute;
+  border-radius: 50%;
+  background-color: #fff;
+  -webkit-box-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,0.32);
+  box-shadow: 0.5px 0.5px 2px 1px rgba(0,0,0,0.32);
+  -webkit-transition: all 0s;
+  transition: all 0s;
+  will-change: transform;
+  cursor: pointer;
+  z-index: 5;
+}
+.vue-range-slider.slider-component .slider .slider-dot.slider-dot-focus {
+  -webkit-box-shadow: 0 0 2px 1px #3498db;
+  box-shadow: 0 0 2px 1px #3498db;
+}
+.vue-range-slider.slider-component .slider .slider-dot.slider-dot-dragging {
+  z-index: 5;
+}
+.vue-range-slider.slider-component .slider .slider-dot.slider-dot-disabled {
+  z-index: 4;
+}
+.vue-range-slider.slider-component .slider .slider-dot.slider-hover:hover .slider-tooltip-wrap {
+  display: block;
+}
+.vue-range-slider.slider-component .slider .slider-dot.slider-always .slider-tooltip-wrap {
+  display: block !important;
+}
+.vue-range-slider.slider-component .slider .slider-process {
+  position: absolute;
+  border-radius: 15px;
+  background-color: var(--bs-primary);
+  z-index: 1;
+}
+.vue-range-slider.slider-component .slider .slider-process.slider-process-draggable {
+  cursor: pointer;
+  z-index: 3;
+}
+.vue-range-slider.slider-component .slider .slider-input {
+  position: absolute;
+  overflow: hidden;
+  height: 1px;
+  width: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+.vue-range-slider.slider-component .slider .slider-piecewise {
+  position: absolute;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  left: 0;
+  top: 0;
+  height: 100%;
+  list-style: none;
+}
+.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+}
+.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item:first-child .piecewise-dot,
+.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item:last-child .piecewise-dot {
+  visibility: hidden;
+}
+.vue-range-slider.slider-component .slider .slider-piecewise .piecewise-item .piecewise-dot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  background-color: rgba(0,0,0,0.16);
+  border-radius: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.vue-range-slider.slider-component.slider-horizontal .slider-dot {
+  left: 0;
+}
+.vue-range-slider.slider-component.slider-horizontal .slider-process {
+  width: 0;
+  height: 100%;
+  top: 0;
+  left: 0;
+  will-change: width;
+}
+.vue-range-slider.slider-component.slider-vertical .slider-dot {
+  bottom: 0;
+}
+.vue-range-slider.slider-component.slider-vertical .slider-process {
+  width: 100%;
+  height: 0;
+  bottom: 0;
+  left: 0;
+  will-change: height;
+}
+.vue-range-slider.slider-component.slider-horizontal-reverse .slider-dot {
+  right: 0;
+}
+.vue-range-slider.slider-component.slider-horizontal-reverse .slider-process {
+  width: 0;
+  height: 100%;
+  top: 0;
+  right: 0;
+}
+.vue-range-slider.slider-component.slider-vertical-reverse .slider-dot {
+  top: 0;
+}
+.vue-range-slider.slider-component.slider-vertical-reverse .slider-process {
+  width: 100%;
+  height: 0;
+  top: 0;
+  left: 0;
+}
+.vue-range-slider.slider-component.slider-horizontal .slider-piecewise .piecewise-item .piecewise-label,
+.vue-range-slider.slider-component.slider-horizontal-reverse .slider-piecewise .piecewise-item .piecewise-label {
+  position: absolute;
+  display: inline-block;
+  top: 100%;
+  left: 50%;
+  white-space: nowrap;
+  font-size: 12px;
+  color: #333;
+  -webkit-transform: translate(-50%, 8px);
+  transform: translate(-50%, 8px);
+  visibility: visible;
+}
+.vue-range-slider.slider-component.slider-vertical .slider-piecewise .piecewise-item .piecewise-label,
+.vue-range-slider.slider-component.slider-vertical-reverse .slider-piecewise .piecewise-item .piecewise-label {
+  position: absolute;
+  display: inline-block;
+  top: 50%;
+  left: 100%;
+  white-space: nowrap;
+  font-size: 12px;
+  color: #333;
+  -webkit-transform: translate(8px, -50%);
+  transform: translate(8px, -50%);
+  visibility: visible;
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap {
+  display: none;
+  position: absolute;
+  z-index: 9;
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap.merged-tooltip {
+  display: block;
+  visibility: hidden;
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-top {
+  top: -9px;
+  left: 50%;
+  -webkit-transform: translate(-50%, -100%);
+  transform: translate(-50%, -100%);
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-top .slider-tooltip::before {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-top-color: inherit;
+  -webkit-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-bottom {
+  bottom: -9px;
+  left: 50%;
+  -webkit-transform: translate(-50%, 100%);
+  transform: translate(-50%, 100%);
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-bottom .slider-tooltip::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-bottom-color: inherit;
+  -webkit-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-left {
+  top: 50%;
+  left: -9px;
+  -webkit-transform: translate(-100%, -50%);
+  transform: translate(-100%, -50%);
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-left .slider-tooltip::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: -10px;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-left-color: inherit;
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-right {
+  top: 50%;
+  right: -9px;
+  -webkit-transform: translate(100%, -50%);
+  transform: translate(100%, -50%);
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap.slider-tooltip-right .slider-tooltip::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -10px;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-right-color: inherit;
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap.merged-tooltip {
+  display: block;
+  visibility: hidden;
+}
+.vue-range-slider.slider-component .slider-tooltip-wrap .slider-tooltip {
+  display: block;
+  font-size: 14px;
+  white-space: nowrap;
+  padding: 2px 5px;
+  min-width: 20px;
+  text-align: center;
+  color: #fff;
+  border-radius: 5px;
+  border: 1px solid var(--bs-primary);
+  background-color: var(--bs-primary);
+}
+.vue-range-slider.slider-component.slider-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.vue-range-slider.slider-component.slider-disabled .slider-dot {
+  cursor: not-allowed;
+}
+.vue-range-slider.slider-component.slider-has-label {
+  margin-bottom: 15px;
+}
+
+/*# sourceMappingURL=vue-range-slider.css.map */

package/src/assets/scss/main.scss

@@ -22,6 +22,7 @@
 @import './components/tabs';
 @import './components/text-field';
 @import './components/tree-view';
+@import './components/range';
 @import './components/wizard';
 @import './directives/loading';
 @import './directives/tooltip';

package/src/components/filter/FilterAmountRange.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="py-2" @mousemove="onRefresh" @mouseup="onUpdateValue">
+    <div class="px-1">
+      <div v-if="histogram" class="histogram px-3">
+        <div v-for="(item, n) in histogramPerc" :key="n" :style="`--bar-height: ${item}px`"></div>
+      </div>
+
+      <itf-range
+        ref="range"
+        :value="value"
+        :width="260"
+        @input="onChange"
+        :min="min"
+        :max="max"
+        :stop-propagation="false"
+        :use-keyboard="false"
+        :tooltip="false"
+        :tooltip-merge="false"
+      />
+
+      <div v-if="internalValue" class="d-flex justify-content-between gap-5">
+        <itf-text-field small type="number" :value="internalValue[0]" @input="onChange([$event, internalValue[1]], true)" />
+        <itf-text-field small type="number" :value="internalValue[1]" @input="onChange([internalValue[0], $event], true)" />
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.histogram {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  gap: .25rem;
+
+  & > div {
+    background: var(--bs-primary);
+    flex-grow: 1;
+    height: var(--bar-height);
+  }
+}
+</style>
+<script>
+import throttle from 'lodash/throttle';
+import { Vue, Prop, Model, Component } from 'vue-property-decorator';
+import itfTextField from '@itfin/components/src/components/text-field/TextField.vue';
+import itfRange from '@itfin/components/src/components/range/Range.vue';
+
+export default @Component({
+  name: 'FilterAmountRange',
+  components: {
+    itfTextField,
+    itfRange
+  }
+})
+class FilterAmountRange extends Vue {
+  @Model('input') value;
+  @Prop() min;
+  @Prop() max;
+  @Prop() histogram;
+
+  isRefreshed = false;
+  internalValue = null;
+
+  mounted() {
+    this.internalValue = this.value;
+  }
+
+  get histogramPerc() {
+    const max = Math.max(...this.histogram);
+    return this.histogram.map(item => Math.round(item / max * 100));
+  }
+
+  onRefresh() {
+    if (this.isRefreshed) {
+      return;
+    }
+    this.isRefreshed = true;
+    this.$refs.range.refresh();
+  }
+
+  onChange(val, isSet = false) {
+    this.isRefreshed = false;
+    this.internalValue = val;
+    if (isSet) {
+      this.onUpdateValue();
+    }
+  }
+
+  onUpdateValue() {
+    this.$emit('input', this.internalValue);
+  }
+}
+</script>

package/src/components/filter/FilterBadge.vue

@@ -0,0 +1,182 @@
+<template>
+  <itf-dropdown text ref="dropdown" autoclose="outside">
+    <template #button>
+      <div class="filter-pill" :class="{'filter-not-default-pill': !isDefault && !isInvalid, 'filter-invalid-pill': isInvalid}">
+        <div class="filter-pill__label" :class="{'filter-pill__not-default-value': !isDefault && !isInvalid, 'filter-pill__default-value': isDefault, 'filter-pill__label-invalid': isInvalid}">
+          <itf-icon v-if="icon" :size="18" :name="icon" />
+          {{ text }}
+        </div>
+        <div @click.stop.prevent="resetValue" v-if="!isDefault" class="filter-pill__icon" :class="{'filter-pill__icon-not-default-value': !isDefault && !isInvalid, 'filter-pill__icon-invalid': isInvalid}">
+          <svg width="8" height="8" viewBox="0 0 8 8" fill="#788195" xmlns="http://www.w3.org/2000/svg"><path d="M8 0.94L7.06 0L4 3.06L0.94 0L0 0.94L3.06 4L0 7.06L0.94 8L4 4.94L7.06 8L8 7.06L4.94 4L8 0.94Z" fill="inherit"></path></svg>
+        </div>
+      </div>
+    </template>
+
+    <div>
+      <template v-if="type === 'list'">
+        <a
+          v-for="(item, n) in options.items"
+          href=""
+          @click.prevent="onFilterChange(item)"
+          class="dropdown-item"
+          :class="{'active': item.value === (value && value.value)}"
+          :key="n">{{item.text}}</a>
+      </template>
+      <template v-else-if="type === 'period'">
+        <itf-date-range-picker-inline
+          :value="value.value"
+          @input="onFilterChange({ value: $event })"
+        />
+      </template>
+      <template v-else-if="type === 'date'">
+        <itf-date-picker-inline
+          :value="value.value"
+          @input="onFilterChange({ value: $event })"
+        />
+      </template>
+      <div class="px-2" v-else-if="type === 'facets-list'" style="width: 300px;">
+        <filter-facets-list
+          :title="options.title"
+          :value="value.value"
+          :items="options.items"
+          :total="options.total"
+          :multiple="options.multiple"
+          @input="onFilterChange({ value: $event })"
+        />
+      </div>
+      <div class="px-2" v-else-if="type === 'amount'" style="width: 300px;">
+        <filter-amount-range
+          :value="value.value"
+          :histogram="options.histogram"
+          :min="options.min"
+          :max="options.max"
+          @input="onFilterChange({ value: $event })"
+        />
+      </div>
+    </div>
+  </itf-dropdown>
+</template>
+<style lang="scss">
+:root {
+  --filter-badge__default-color: #475266;
+  --filter-badge__default-bg-color: #4752661A;
+  --filter-badge__default-bg-color-hover: #47526642;
+
+  --filter-badge__invalid-color: #D83C31;
+  --filter-badge__invalid-bg-color: #D83C311A;
+  --filter-badge__invalid-bg-color-hover: #D83C3142;
+
+  --filter-badge__selected-color: #2f51fe; // #0d935b;
+  --filter-badge__selected-bg-color: #2f51fe1a; // #0d935b1A;
+  --filter-badge__selected-bg-color-hover: #2f51fe42; // #0d935b42;
+  --filter-badge__padding-x: 6px; // 10px;
+  --filter-badge__padding-y: 12px;// 18px;
+}
+.filter-pill {
+  align-items: center;
+  border-radius: 21px;
+  font-size: 14px;
+  line-height: 100%;
+  background-color: var(--filter-badge__default-bg-color);
+  display: flex;
+  min-height: 2rem;
+  transition: 0.1s;
+
+  &:hover {
+    background-color: var(--filter-badge__default-bg-color-hover);
+    cursor: pointer;
+  }
+  &.filter-not-default-pill {
+    background-color: var(--filter-badge__selected-bg-color);
+    outline: 1px solid var(--filter-badge__selected-color);
+  }
+  &.filter-invalid-pill {
+    background-color: var(--filter-badge__invalid-bg-color);
+  }
+  &.filter-pill__default-value {
+    padding: var(--filter-badge__padding-x) var(--filter-badge__padding-y);
+  }
+}
+.filter-pill__label {
+  color: var(--filter-badge__default-color);
+  padding: var(--filter-badge__padding-x) 0 var(--filter-badge__padding-x) var(--filter-badge__padding-y);
+  max-width: 330px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: flex;
+  gap: .25rem;
+  align-items: center;
+
+  &.filter-pill__default-value {
+    padding: var(--filter-badge__padding-x) var(--filter-badge__padding-y);
+  }
+  &.filter-pill__not-default-value {
+    color: var(--filter-badge__selected-color);
+  }
+  &.filter-pill__label-invalid {
+    color: var(--filter-badge__invalid-color);
+  }
+}
+
+.filter-pill__icon {
+  padding: var(--filter-badge__padding-x) calc(var(--filter-badge__padding-x) * 2) var(--filter-badge__padding-x) var(--filter-badge__padding-x);
+  margin-top: -2px;
+
+  svg {
+    fill: var(--filter-badge__default-color);
+  }
+  &.filter-pill__icon-invalid svg {
+    fill: var(--filter-badge__invalid-color);
+  }
+  &.filter-pill__icon-not-default-value svg {
+    fill: var(--filter-badge__selected-color);
+  }
+}
+</style>
+<script>
+import { Vue, Model, Prop, Component } from 'vue-property-decorator';
+import itfIcon from '@itfin/components/src/components/icon/Icon';
+import itfButton from '@itfin/components/src/components/button/Button';
+import itfDropdown from '@itfin/components/src/components/dropdown/Dropdown.vue';
+import itfDatePickerInline from '@itfin/components/src/components/datepicker/DatePickerInline.vue';
+import itfDateRangePickerInline from '@itfin/components/src/components/datepicker/DateRangePickerInline.vue';
+import itfTextField from '@itfin/components/src/components/text-field/TextField.vue';
+import FilterFacetsList from './FilterFacetsList';
+import FilterAmountRange from './FilterAmountRange.vue';
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfButton,
+    itfDropdown,
+    itfDatePickerInline,
+    itfDateRangePickerInline,
+    itfTextField,
+    FilterFacetsList,
+    FilterAmountRange
+  }
+})
+class FilterBadge extends Vue {
+  @Model('input') value;
+  @Prop(Boolean) isDefault;
+  @Prop(Boolean) isInvalid;
+  @Prop() text;
+  @Prop() type;
+  @Prop() icon;
+  @Prop() options;
+
+  resetValue() {
+    this.onFilterChange({ ...this.options.defaultValue });
+    this.$refs.dropdown.hide();
+  }
+
+  onFilterChange(value) {
+    this.$emit('input', value);
+    this.$emit('change', value);
+    if (!['facets-list', 'amount'].includes(this.type)) {
+      this.$refs.dropdown.hide();
+    }
+  }
+}
+</script>