@webitel/ui-sdk 2.0.1-0 → 2.0.3-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.0.1-0",
+  "version": "2.0.3-1",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/molecules/wt-select/wt-select.vue

@@ -1,18 +1,18 @@
 <template>
   <div
-    class="wt-select"
     :class="{
       'wt-select--disabled': disabled,
       'wt-select--invalid': invalid,
       'wt-select--clearable': clearable,
       'wt-select--loading': isLoading,
     }"
+    class="wt-select"
   >
     <wt-label
-      class="wt-select__label"
       v-if="hasLabel"
       :disabled="disabled"
       :invalid="invalid"
+      class="wt-select__label"
       v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
@@ -20,19 +20,19 @@
     </wt-label>
     <vue-multiselect
       ref="vue-multiselect"
-      class="wt-select__select"
-      v-bind="$attrs"
-      :value="selectValue"
-      :options="selectOptions"
-      :placeholder="placeholder || label"
-      :limit="1"
+      :allow-empty="allowEmpty"
+      :disabled="disabled"
+      :internal-search="!searchMethod"
       :label="optionLabel"
-      :track-by="trackBy"
+      :limit="1"
       :limit-text="(count) => `+${count}`"
       :loading="false"
-      :internal-search="!searchMethod"
-      :disabled="disabled"
-      :allow-empty="allowEmpty"
+      :options="selectOptions"
+      :placeholder="placeholder || label"
+      :track-by="trackBy"
+      :value="selectValue"
+      class="wt-select__select"
+      v-bind="$attrs"
       v-on="listeners"
     >
 
@@ -47,7 +47,7 @@
       <template slot="singleLabel" slot-scope="{ option }">
         <slot name="singleLabel" v-bind="{ option, optionLabel }">
           <span class="multiselect__single-label">
-            {{ $te(option.locale) ? $t(option.locale) : (option[optionLabel] || option) }}
+            {{ getOptionLabel({ option, optionLabel }) }}
           </span>
         </slot>
       </template>
@@ -56,7 +56,7 @@
       <template slot="option" slot-scope="{ option }">
         <slot name="option" v-bind="{ option, optionLabel }">
           <span>
-            {{ $te(option.locale) ? $t(option.locale) : (option[optionLabel] || option) }}
+            {{ getOptionLabel({ option, optionLabel }) }}
           </span>
         </slot>
       </template>
@@ -65,9 +65,9 @@
       <template slot="caret" slot-scope="{ toggle }">
         <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->
         <wt-icon-btn
+          :disabled="disabled"
           class="wt-select__arrow-caret"
           icon="arrow-down"
-          :disabled="disabled"
           @mousedown.native.prevent.stop="toggle"
         ></wt-icon-btn>
       </template>
@@ -76,21 +76,21 @@
       <template slot="clear" slot-scope="{}">
         <wt-icon-btn
           v-if="clearable"
-          class="wt-select__clear"
           :class="{ 'hidden': !isValue }"
           :disabled="disabled"
+          class="wt-select__clear"
           icon="close"
           @click="clearValue"
         ></wt-icon-btn>
       </template>
 
       <template slot="beforeList">
-        <div class="wt-select__loading-wrapper" v-show="isLoading">
+        <div v-show="isLoading" class="wt-select__loading-wrapper">
           <wt-loader size="sm"></wt-loader>
         </div>
       </template>
 
-      <template slot="afterList" v-if="showIntersectionObserver">
+      <template v-if="showIntersectionObserver" slot="afterList">
         <div v-observe-visibility="handleAfterListIntersect"></div>
       </template>
     </vue-multiselect>
@@ -105,9 +105,9 @@
 <script>
 import VueMultiselect from 'vue-multiselect';
 import { ObserveVisibility } from 'vue-observe-visibility';
-import isEmpty from '../../../scripts/isEmpty';
-import debounce from '../../../scripts/debounce';
 import validationMixin from '../../../mixins/validationMixin/validationMixin';
+import debounce from '../../../scripts/debounce';
+import isEmpty from '../../../scripts/isEmpty';
 
 export default {
   name: 'wt-select',
@@ -225,6 +225,13 @@ export default {
   },
 
   methods: {
+    getOptionLabel({ option, optionLabel }) {
+      if (option.locale) {
+        if (Array.isArray(option.locale)) return this.$tc(...option.locale);
+        return this.$t(option.locale);
+      }
+      return option[optionLabel] || option;
+    },
     handleSearchChange(search) {
       if (!this.isApiMode) return;
       this.isLoading = true;
@@ -294,28 +301,28 @@ export default {
 
   .wt-select__arrow-caret {
     position: absolute;
+    z-index: var(--select-caret-z-index);
     top: var(--select-caret-top-pos);
     right: var(--select-caret-right-pos);
-    transform: rotate(0);
     transition: var(--transition);
-    z-index: var(--select-caret-z-index);
+    transform: rotate(0);
   }
 
   ::v-deep .wt-select__clear {
     position: absolute;
+    z-index: var(--select-clear-z-index);
     top: var(--select-clear-top-pos);
     right: var(--select-clear-right-pos);
-    transform: rotate(0);
     transition: var(--transition);
-    z-index: var(--select-clear-z-index);
+    transform: rotate(0);
   }
 
   ::v-deep {
     .multiselect__tags {
       display: flex;
       align-items: center;
-      min-height: var(--select-tags-min-height); // reset original 20px style
       box-sizing: border-box;
+      min-height: var(--select-tags-min-height); // reset original 20px style
       padding: var(--select-tags-padding);
       color: var(--form-input-color);
       border: var(--select-tags-border);
@@ -327,8 +334,8 @@ export default {
         @extend %typo-body-1;
         @include wt-placeholder;
         min-height: var(--select-input-min-height); // reset original 20px style
-        padding: 0;
         margin: 0;
+        padding: 0;
         background: transparent;
       }
 
@@ -340,34 +347,34 @@ export default {
         @extend %typo-body-1;
         @extend .wt-chip;
         position: absolute;
+        z-index: var(--select-chip-z-index);
         right: var(--select-chip-right-pos);
         min-height: var(--select-input-min-height); // reset original 20px style
         margin: 0;
         font-weight: normal;
-        z-index: var(--select-chip-z-index);
 
         /* these before-after elements are fixing issue when chip is visually overflown by
         selected option name (yep, chip has z-index, but its background has 0.3 opacity)*/
         &:before {
-          content: '';
           position: absolute;
+          z-index: -2; // below chip itself
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
-          z-index: -2; // below chip itself
+          content: '';
           background: var(--main-color);
         }
 
         &:after {
           @extend .wt-chip;
-          content: '';
           position: absolute;
+          z-index: -1; // below chip itself
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
-          z-index: -1; // below chip itself
+          content: '';
 
         }
       }
@@ -378,33 +385,33 @@ export default {
 
       .multiselect__custom-tag, .multiselect__single-label {
         @extend %typo-body-1;
-        color: var(--form-input-color);
+        display: block;
 
         // text overflow 3 dots
-        display: block;
-        white-space: nowrap;
         overflow: hidden;
+        white-space: nowrap;
         text-overflow: ellipsis;
+        color: var(--form-input-color);
       }
 
       .multiselect__placeholder {
         @extend %wt-placeholder;
-        padding: 0;
+        overflow: hidden;
         margin: 0;
 
         // text overflow 3 dots
+        padding: 0;
         white-space: nowrap;
-        overflow: hidden;
         text-overflow: ellipsis;
       }
     }
 
     .multiselect__content-wrapper {
       @extend %wt-distant-scrollbar;
+      transition: var(--transition);
       border: var(--select-tags-border);
       border-color: var(--form-border-color);
       border-radius: var(--border-radius);
-      transition: var(--transition);
 
       .multiselect__option {
         @extend %typo-body-1;
@@ -435,15 +442,15 @@ export default {
 
     .wt-select__loading-wrapper {
       position: sticky;
-      width: 100%;
-      height: 300px; // max dropdown panel height
+      z-index: 1;
       top: 0;
       left: 0;
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 100%;
+      height: 300px; // max dropdown panel height
       backdrop-filter: blur(4px);
-      z-index: 1;
     }
   }
 
@@ -513,8 +520,8 @@ export default {
   pointer-events: none;
 
   .multiselect--disabled {
-    background: none;
     opacity: 1;
+    background: none;
   }
 
   .wt-select__arrow-caret ::v-deep .wt-icon__icon,
@@ -525,8 +532,8 @@ export default {
   .multiselect {
     ::v-deep {
       .multiselect__tags {
-        background: var(--form-border--disabled-color);
         border-color: var(--form-border--disabled-color);
+        background: var(--form-border--disabled-color);
 
         .multiselect__placeholder {
           @extend %wt-placeholder--disabled;

package/src/locale/en/en.js

@@ -33,6 +33,8 @@ export default {
       ru: 'Русский',
       ua: 'Українська',
     },
+    from: 'From',
+    to: 'To',
   },
   // date-related texts
   date: {

package/src/locale/ru/ru.js

@@ -33,6 +33,8 @@ export default {
       ru: 'Русский',
       ua: 'Українська',
     },
+    from: 'От',
+    to: 'До',
   },
   // date-related texts
   date: {

package/src/locale/ua/ua.js

@@ -33,6 +33,8 @@ export default {
       ru: 'Русский',
       ua: 'Українська',
     },
+    from: 'Від',
+    to: 'До',
   },
   // date-related texts
   date: {

package/src/modules/QueryFilters/components/__tests__/filter-datetime.spec.js

@@ -0,0 +1,49 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import DatetimeFilter from '../filter-datetime.vue';
+import BaseFilterSchema from '../../classes/BaseFilterSchema';
+import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('DatetimeFilter Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new BaseFilterSchema();
+  const store = new Vuex.Store({
+    modules: {
+      [namespace]: {
+        namespaced: true,
+        state: {
+          [filterQuery]: filterSchema,
+        },
+      },
+    },
+  });
+
+  const mountOptions = {
+    localVue,
+    store,
+    router,
+    propsData: {
+      namespace,
+      filterQuery,
+    },
+  };
+  it('renders a component', () => {
+    const wrapper = shallowMount(DatetimeFilter, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('initial restoreValue() triggers setValue() method', async () => {
+    const value = Date.now();
+    await router.replace({ query: { [filterQuery]: value } });
+    const setValueMock = jest.fn();
+    jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
+    shallowMount(DatetimeFilter, mountOptions);
+    expect(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value });
+  });
+});

package/src/modules/QueryFilters/components/__tests__/filter-from-to.spec.js

@@ -0,0 +1,65 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+import BaseFilterSchema from '../../classes/BaseFilterSchema';
+import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
+import FilterFromTo from '../filter-from-to.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('FilterFromTo Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new BaseFilterSchema();
+  const store = new Vuex.Store({
+    modules: {
+      [namespace]: {
+        namespaced: true,
+        state: {
+          [filterQuery]: filterSchema,
+        },
+      },
+    },
+  });
+
+  const mountOptions = {
+    localVue,
+    store,
+    router,
+    propsData: {
+      namespace,
+      filterQuery,
+    },
+  };
+  it('renders a component', () => {
+    const wrapper = shallowMount(FilterFromTo, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('initial restoreValue() triggers setValue() method: From case', async () => {
+    const value = 10;
+    await router.replace({ query: { [`${filterQuery}From`]: value } });
+    const setValueMock = jest.fn();
+    jest.spyOn(baseFilterMixin.methods, 'setValue')
+    .mockImplementationOnce(setValueMock);
+    shallowMount(FilterFromTo, mountOptions);
+    expect(setValueMock).toHaveBeenCalledWith({
+      filter: filterQuery,
+      value: { to: undefined, from: value },
+    });
+  });
+  // it('initial restoreValue() triggers setValue() method: To case', async () => {
+  //   const value = 10;
+  //   await router.replace({ query: { [`${filterQuery}To`]: value } });
+  //   const setValueMock = jest.fn();
+  //   jest.spyOn(baseFilterMixin.methods, 'setValue')
+  //   .mockImplementationOnce(setValueMock);
+  //   shallowMount(FilterFromTo, mountOptions);
+  //   expect(setValueMock).toHaveBeenCalledWith({
+  //     filter: filterQuery,
+  //     value: { to: value, from: 0 },
+  //   });
+  // });
+});

package/src/modules/QueryFilters/components/filter-datetime.vue

@@ -0,0 +1,39 @@
+<template>
+  <wt-datetimepicker
+    :value="filterSchema.value"
+    :label="label"
+    @change="handleChange"
+  ></wt-datetimepicker>
+</template>
+
+<script>
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-from',
+  mixins: [baseFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+    },
+  },
+
+  methods: {
+    handleChange(value) {
+      this.setValue({ filter: this.filterQuery, value });
+      this.setValueToQuery({ filterQuery: this.filterQuery, value });
+    },
+    restoreValue(value) {
+      this.setValue({ filter: this.filterQuery, value: +value });
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/modules/QueryFilters/components/filter-from-to.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="filter-from-to">
+    <wt-label>{{ label }}</wt-label>
+    <div class="filter-from-to__inputs-wrapper">
+      <div class="filter-from-to__input-wrapper">
+        <wt-label
+          class="filter-from-to__input-label"
+          for="filter-from-to-from"
+        >{{ $t('reusable.from') }}
+        </wt-label>
+        <wt-input
+          class="filter-from-to-input"
+          name="filter-from-to-from"
+          :value="filterSchema.value.from"
+          type="number"
+          :number-min="0"
+          @input="setFrom"
+        ></wt-input>
+      </div>
+      <div class="filter-from-to__input-wrapper">
+        <wt-label
+          class="filter-from-to__input-label"
+          for="filter-from-to-to"
+        >{{ $t('reusable.to') }}
+        </wt-label>
+        <wt-input
+          class="filter-from-to-input"
+          name="filter-from-to-to"
+          :value="filterSchema.value.to"
+          type="number"
+          :number-min="0"
+          @input="setTo"
+        ></wt-input>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import debounce from '../../../scripts/debounce';
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-from-to',
+  mixins: [baseFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+    },
+  },
+  methods: {
+    restore() {
+      this.restoreFrom();
+      this.restoreTo();
+    },
+
+    restoreFrom() {
+      const from = 0;
+      const queryValue = this.$route.query[`${this.filterQuery}From`];
+      // this.value.from = +queryValue || from;
+      const value = { from: +queryValue || from, to: this.value.to };
+      this.setValue({ filter: this.filterQuery, value });
+    },
+
+    restoreTo() {
+      const to = null;
+      const queryValue = this.$route.query[`${this.filterQuery}To`];
+      // this.value.to = +queryValue || to;
+      const value = { from: this.value.from, to: +queryValue || to };
+      console.info(value);
+      this.setValue({ filter: this.filterQuery, value });
+    },
+
+    setFrom(value) {
+      this.setValueToQuery({
+        filterQuery: `${this.filterQuery}From`,
+        value,
+      });
+      this.restoreFrom();
+    },
+
+    setTo(value) {
+      this.setValueToQuery({
+        filterQuery: `${this.filterQuery}To`,
+        value,
+      });
+      this.restoreTo();
+    },
+  },
+
+  created() {
+    this.setFrom = debounce(this.setFrom);
+    this.setTo = debounce(this.setTo);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.filter-from-to {
+
+  & > .wt-label {
+    margin-bottom: 10px;
+  }
+
+  &:hover > .wt-label {
+    color: var(--form-label--hover-color);
+  }
+
+  &:focus-within > .wt-label {
+    color: var(--form-label--active-color);
+  }
+}
+
+.filter-from-to__inputs-wrapper,
+.filter-from-to__input-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.filter-from-to__input-label {
+  @extend %typo-subtitle-1;
+  margin-right: 5px;
+}
+
+.filter-from-to__input-wrapper {
+  &:focus-within .wt-label {
+    color: var(--form-label--active-color)
+  }
+
+  .filter-from-to-input {
+    width: 70px;
+  }
+
+  &:first-child {
+    margin-right: 10px;
+  }
+}
+</style>