@webitel/ui-sdk 2.0.3 → 2.0.4-1

package/package.json

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

package/src/components/atoms/wt-context-menu/__tests__/WtContextMenu.spec.js

@@ -2,42 +2,8 @@ import { shallowMount } from '@vue/test-utils';
 import WtContextMenu from '../wt-context-menu.vue';
 
 describe('WtContextMenu', () => {
-  const options = ['1', '2'];
-
   it('renders a component', () => {
-    const wrapper = shallowMount(WtContextMenu);
+    const wrapper = shallowMount(WtContextMenu, { propsData: { options: [] } });
     expect(wrapper.classes('wt-context-menu')).toBe(true);
   });
-
-  it('component is visible by default', () => {
-    const wrapper = shallowMount(WtContextMenu);
-    expect(wrapper.classes()).not.toContain('wt-context-menu--hidden');
-  });
-
-  it('component is invisible, if "visible" prop = false', () => {
-    const wrapper = shallowMount(WtContextMenu, {
-      propsData: { visible: false },
-    });
-    // Here we don't use "isVsisble()" because we hide our elements with "opacity: 0"
-    expect(wrapper.classes('wt-context-menu--hidden')).toBe(true);
-  });
-
-  it('correctly display the options length', () => {
-    const wrapper = shallowMount(WtContextMenu, {
-      propsData: { options },
-    });
-    expect(wrapper.findAll('.wt-context-menu__option').length).toBe(options.length);
-  });
-
-  it('should raise click event, and emit { option, index } when clicked', () => {
-    const emittingArgs = { option: '1', index: 0 };
-    const wrapper = shallowMount(WtContextMenu, {
-      propsData: { options },
-    });
-
-    wrapper.find('.wt-context-menu__option').trigger('click');
-    expect(wrapper.emitted().click).toBeTruthy();
-
-    expect(wrapper.emitted('click')[0][0]).toEqual(emittingArgs);
-  });
 });

package/src/components/atoms/wt-context-menu/wt-context-menu.vue

@@ -1,23 +1,30 @@
 <template>
-  <ul
+  <v-dropdown
     class="wt-context-menu"
-    :class="{'wt-context-menu--hidden': !visible}"
+    :shown="visible"
+    :triggers="['click', 'touch']"
+    placement="bottom-end"
   >
-    <li
-      class="wt-context-menu__option-wrapper"
-      v-for="(option, index) in options"
-      :key="index"
-    >
-<!--      <a> click.prevent prevents redirect to # -->
-      <a
-        class="wt-context-menu__option"
-        href="#"
-        @click.prevent="$emit('click', { option, index })"
+    <slot name="activator"></slot>
+    <template #popper>
+      <ul class="wt-context-menu__menu">
+        <li
+          class="wt-context-menu__option-wrapper"
+          v-for="(option, index) in options"
+          :key="index"
         >
-        {{ option.text || option }}
-      </a>
-    </li>
-  </ul>
+          <!--      <a> click.prevent prevents redirect to # -->
+          <a
+            class="wt-context-menu__option"
+            href="#"
+            @click.prevent="$emit('click', { option, index })"
+          >
+            {{ option.text || option }}
+          </a>
+        </li>
+      </ul>
+    </template>
+  </v-dropdown>
 </template>
 
 <script>
@@ -39,6 +46,10 @@ export default {
 
 <style lang="scss" scoped>
 .wt-context-menu {
+  line-height: 0;
+}
+
+.wt-context-menu__menu {
   @extend %typo-body-2;
   min-width: var(--context-menu-min-width);
   max-width: var(--context-menu-max-width);
@@ -47,11 +58,6 @@ export default {
   box-shadow: var(--box-shadow);
   transition: var(--transition);
   z-index: 1;
-
-  &--hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
 }
 
 .wt-context-menu__option-wrapper {

package/src/components/molecules/wt-button-select/__tests__/WtButtonSelect.spec.js

@@ -1,6 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtSelectButton from '../wt-button-select.vue';
-import WtContextMenu from '../../../atoms/wt-context-menu/wt-context-menu.vue';
 
 describe('WtSelectButton', () => {
   it('renders a component', () => {
@@ -18,41 +17,8 @@ describe('WtSelectButton', () => {
     expect(wrapper.find('.wt-button-select__button').text()).toBe(content);
   });
 
-  it('context-menu is invisible at start', () => {
-    const wrapper = shallowMount(WtSelectButton, {
-      stubs: { WtContextMenu },
-    });
-    expect(wrapper.findComponent(WtContextMenu).classes('wt-context-menu--hidden')).toBe(true);
-  });
-
-  it('toggles isOpened, if select-btn is clicked', async () => {
-    const wrapper = shallowMount(WtSelectButton, {
-      stubs: { WtContextMenu },
-    });
-    wrapper.find('.wt-button-select__select-btn').vm.$emit('click');
-    await wrapper.vm.$nextTick();
-    expect(wrapper.findComponent(WtContextMenu).element.classList[1]).toBe(undefined);
-
-    wrapper.find('.wt-button-select__select-btn').vm.$emit('click');
-    await wrapper.vm.$nextTick();
-    expect(wrapper.findComponent(WtContextMenu).element.classList[1]).toBe('wt-context-menu--hidden');
-  });
-
-  it('hides context-menu on its click event', async () => {
-    const isOpened = true;
-    const options = ['1', '2'];
-    const wrapper = shallowMount(WtSelectButton, {
-      stubs: { WtContextMenu },
-      data: () => ({ isOpened }),
-      propsData: { options },
-    });
-    wrapper.findComponent({ name: 'WtContextMenu' }).vm.$emit('click', { option: '1' });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.findComponent({ name: 'WtContextMenu' }).classes()).toContain('wt-context-menu--hidden');
-  });
-
   it('should rotate the arrow', () => {
-    const wrapper = shallowMount(WtSelectButton, {
+    const wrapper = mount(WtSelectButton, {
       data: () => ({
         isOpened: true,
       }),

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

@@ -12,26 +12,28 @@
       <slot></slot>
     </wt-button>
 
-    <wt-button
-      class="wt-button-select__select-btn"
-      v-bind="$attrs"
-      :disabled="disabled"
-      :loading="false"
-      @click="isOpened = !isOpened"
-    >
-      <wt-icon
-        class="wt-button-select__select-arrow"
-        :class="{'wt-button-select__select-arrow--active': isOpened}"
-        icon="arrow-down"
-        :disabled="disabled"
-      ></wt-icon>
-    </wt-button>
-
     <wt-context-menu
-      :visible="isOpened"
       :options="options"
+      :visible="isOpened"
       @click="selectOption"
-    ></wt-context-menu>
+    >
+      <template v-slot:activator>
+        <wt-button
+          class="wt-button-select__select-btn"
+          v-bind="$attrs"
+          :disabled="disabled"
+          :loading="false"
+          @click="isOpened = !isOpened"
+        >
+          <wt-icon
+            class="wt-button-select__select-arrow"
+            :class="{'wt-button-select__select-arrow--active': isOpened}"
+            icon="arrow-down"
+            :disabled="disabled"
+          ></wt-icon>
+        </wt-button>
+      </template>
+    </wt-context-menu>
   </div>
 </template>
 
@@ -69,12 +71,6 @@ export default {
   display: inline-flex;
   align-items: center;
   gap: var(--button-select-buttons-gap);
-
-  .wt-context-menu {
-    position: absolute;
-    top: calc(100% + 1px);
-    left: 0;
-  }
 }
 
 .wt-button-select__button {

package/src/css/components/atoms/wt-context-menu/_variables.scss

@@ -1,4 +1,4 @@
-.wt-context-menu {
+:root {
   --context-menu-min-width : 160px;
   --context-menu-max-width : 300px;
 

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-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')
+    .mockImplementation(setValueMock);
+    shallowMount(FilterFromTo, mountOptions);
+    expect(setValueMock).toHaveBeenNthCalledWith(1, {
+      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')
+    .mockImplementation(setValueMock);
+    shallowMount(FilterFromTo, mountOptions);
+    expect(setValueMock).toHaveBeenNthCalledWith(2, {
+      filter: filterQuery,
+      value: { to: value, from: undefined },
+    });
+  });
+});

package/src/modules/QueryFilters/components/abstract-api-filter.vue

@@ -1,7 +1,7 @@
 <template>
   <wt-select
     :value="filterSchema.value"
-    :label="$t(filterSchema.locale.label)"
+    :label="label"
     :track-by="filterSchema.storedProp"
     :multiple="filterSchema.multiple"
     :search-method="search"

package/src/modules/QueryFilters/components/abstract-enum-filter.vue

@@ -2,7 +2,7 @@
   <wt-select
     :value="value"
     :options="localizedOptions"
-    :label="$t(filterSchema.locale.label)"
+    :label="label"
     :track-by="filterSchema.storedProp"
     :multiple="filterSchema.multiple"
     v-bind="$attrs"

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

@@ -0,0 +1,136 @@
+<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 };
+      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 {
+  &: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>

package/src/modules/QueryFilters/mixins/apiFilterMixin.js

@@ -15,6 +15,11 @@ export default {
     closeOnSelect() {
       return this.filterSchema?.storedProp;
     },
+    label() {
+      return Array.isArray(this.locale.label)
+        ? this.$tc(...this.locale.label)
+        : this.$t(this.locale.label);
+    },
   },
   methods: {
     async restoreValue(id) {

package/src/modules/QueryFilters/mixins/enumFilterMixin.js

@@ -18,6 +18,11 @@ export default {
     closeOnSelect() {
       return this.filterSchema?.storedProp;
     },
+    label() {
+      return Array.isArray(this.locale.label)
+        ? this.$tc(...this.locale.label)
+        : this.$t(this.locale.label);
+    },
     localizedOptions() {
       const optsHaveLocale = this.options.length && this.options[0].locale; // just check 1st el
       if (optsHaveLocale) {