@webitel/ui-sdk 2.0.3-3 → 2.0.4-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.0.3-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/modules/QueryFilters/components/__tests__/filter-from-to.spec.js

@@ -43,23 +43,23 @@ describe('FilterFromTo Filter', () => {
     await router.replace({ query: { [`${filterQuery}From`]: value } });
     const setValueMock = jest.fn();
     jest.spyOn(baseFilterMixin.methods, 'setValue')
-    .mockImplementationOnce(setValueMock);
+    .mockImplementation(setValueMock);
     shallowMount(FilterFromTo, mountOptions);
-    expect(setValueMock).toHaveBeenCalledWith({
+    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')
-  //   .mockImplementationOnce(setValueMock);
-  //   shallowMount(FilterFromTo, mountOptions);
-  //   expect(setValueMock).toHaveBeenCalledWith({
-  //     filter: filterQuery,
-  //     value: { to: value, from: 0 },
-  //   });
-  // });
+  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/filter-from-to.vue

@@ -71,7 +71,6 @@ export default {
       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 });
     },