@webitel/ui-sdk 0.9.31 → 0.9.35

package/package.json

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

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

@@ -8,10 +8,11 @@
       v-for="(option, index) in options"
       :key="index"
     >
+<!--      <a> click.prevent prevents redirect to # -->
       <a
         class="wt-context-menu__option"
         href="#"
-        @click="$emit('click', { option, index })"
+        @click.prevent="$emit('click', { option, index })"
         >
         {{ option.text || option }}
       </a>
@@ -40,6 +41,7 @@ export default {
 .wt-context-menu {
   @extend %typo-body-sm;
   min-width: var(--context-menu-min-width);
+  max-width: var(--context-menu-max-width);
   background-color: var(--context-menu-background-color);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);

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

@@ -22,7 +22,6 @@
         :class="{'wt-button-select__select-arrow--active': isOpened}"
         v-bind="$attrs"
         icon="arrow-down"
-        size="sm"
       ></wt-icon>
     </wt-button>
 
@@ -42,7 +41,7 @@ export default {
   }),
   methods: {
     selectOption({ option, index }) {
-      this.$emit('click:option', { option, index });
+      this.$emit('click:option', option, index);
       this.isOpened = false;
     },
     away() {
@@ -60,7 +59,7 @@ export default {
 
   .wt-context-menu {
     position: absolute;
-    top: 100%;
+    top: calc(100% + 1px);
     left: 0;
   }
 }

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

@@ -1,8 +1,10 @@
 .wt-context-menu {
+  --context-menu-min-width : 160px;
+  --context-menu-max-width : 300px;
+
   --context-menu-option-color--hover: var(--secondary-color);
 
   --context-menu-background-color: var(--main-color);
 
   --context-menu-option-padding: var(--spacing--sm);
-  --context-menu-min-width : 150px;
 }

package/src/css/components/molecules/wt-button-select/_variables.scss

@@ -4,7 +4,7 @@
   Reduce 1px from "spacing--md" for align a difference between arrow size in "wt-button-select__select"
   and line-height of text in "wt-button-select__button"
   */
-  --button-select-icon-button-padding: calc(var(--spacing--md) - 1px);
+  --button-select-icon-button-padding: calc(var(--spacing--sm) - 1px);
 
   --button-select-buttons-gap: 1px;
 

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

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

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

@@ -45,10 +45,26 @@ describe('Enum filter mixin', () => {
   });
 
   it('Sets empty array value if $route query is empty', async () => {
-    const wrapper = shallowMount(Component, {
+    shallowMount(Component, {
       localVue,
       router,
     });
     expect(setValue).not.toHaveBeenCalled();
   });
+
+  it('Attaches locales to options, if they have "locale" key', async () => {
+    const options = [{
+      locale: 'jest.locale',
+    }];
+    const expectedOptions = [{
+      locale: options[0].locale,
+      name: options[0].locale,
+    }];
+    const wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      data: () => ({ options }),
+    });
+    expect(wrapper.vm.localizedOptions).toEqual(expectedOptions);
+  });
 });

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

@@ -4,7 +4,7 @@ export default {
   mixins: [baseFilterMixin],
   computed: {
     options() {
-      return this.filterSchema.options;
+      return this.filterSchema?.options;
     },
     locale() {
       return this.filterSchema?.locale;
@@ -18,6 +18,13 @@ export default {
     closeOnSelect() {
       return this.filterSchema?.storedProp;
     },
+    localizedOptions() {
+      const optsHaveLocale = this.options.length && this.options[0].locale; // just check 1st el
+      if (optsHaveLocale) {
+        return this.options.map((opt) => ({ ...opt, name: this.$t(opt.locale) }));
+      }
+      return this.options;
+    },
   },
   methods: {
     restoreValue(value) {