@webitel/ui-sdk 2.0.32-2 → 2.1.0-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.0.32-2",
+  "version": "2.1.0-1",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -25,7 +25,6 @@
     "src/store/*"
   ],
   "dependencies": {
-    "@johmun/vue-tags-input": "^2.1.0",
     "core-js": "^3.6.5",
     "csv-stringify": "^5.5.3",
     "deep-copy": "^1.4.2",

package/src/components/molecules/wt-label/mixins/labelUsageMixin.js

@@ -0,0 +1,21 @@
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+  },
+  computed: {
+    hasLabel() {
+      return !!(this.label || this.$slots.label);
+    },
+
+    requiredLabel() {
+      return this.required ? `${this.label}*` : this.label;
+    },
+  },
+};

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

@@ -24,30 +24,4 @@ describe('WtSelect', () => {
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });
-
-  it('Correctly computes internal search options', () => {
-    const options = ['1', '2'];
-    const wrapper = shallowMount(WtSelect, {
-      stubs: {
-        WtLabel,
-        WtIcon: true,
-      },
-      propsData: { options },
-    });
-    expect(wrapper.vm.selectOptions).toBe(options);
-  });
-
-  it('Correctly computes internal search options', async () => {
-    const options = ['1', '2'];
-    const searchOptions = ['1'];
-    const wrapper = shallowMount(WtSelect, {
-      stubs: {
-        WtLabel,
-        WtIcon: true,
-      },
-      propsData: { options, searchMethod: () => ({ items: searchOptions }) },
-    });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.selectOptions).toBe(searchOptions);
-  });
 });

package/src/components/molecules/wt-select/mixins/__tests__/multiselectMixin.spec.js

@@ -0,0 +1,32 @@
+import { shallowMount } from '@vue/test-utils';
+import MultiselectMixin from '../multiselectMixin';
+
+const Component = {
+  mixins: [MultiselectMixin],
+  render() {},
+};
+
+describe('MultiselectMixin', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(Component);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('Correctly computes internal search options', () => {
+    const options = ['1', '2'];
+    const wrapper = shallowMount(Component, {
+      propsData: { options },
+    });
+    expect(wrapper.vm.selectOptions).toBe(options);
+  });
+
+  it('Correctly computes internal search options: search case', async () => {
+    const options = ['1', '2'];
+    const searchOptions = ['1'];
+    const wrapper = shallowMount(Component, {
+      propsData: { options, searchMethod: () => ({ items: searchOptions }) },
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.selectOptions).toBe(searchOptions);
+  });
+});

package/src/components/molecules/wt-select/mixins/multiselectMixin.js

@@ -0,0 +1,147 @@
+import VueMultiselect from 'vue-multiselect';
+import { ObserveVisibility } from 'vue-observe-visibility';
+import validationMixin
+  from '../../../../mixins/validationMixin/validationMixin';
+import debounce from '../../../../scripts/debounce';
+import isEmpty from '../../../../scripts/isEmpty';
+import labelUsageMixin from '../../wt-label/mixins/labelUsageMixin';
+
+export default {
+  mixins: [validationMixin, labelUsageMixin],
+  directives: { ObserveVisibility },
+  components: {
+    VueMultiselect,
+  },
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+
+    placeholder: {
+      type: String,
+      default: '',
+    },
+
+    trackBy: {
+      type: String,
+      default: 'id',
+    },
+
+    optionLabel: {
+      type: String,
+    },
+
+    searchMethod: {
+      type: Function,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    required: {
+      type: Boolean,
+      default: false,
+    },
+
+    allowEmpty: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    apiOptions: [],
+    isLoading: false,
+
+    searchParams: {
+      search: '',
+      page: 1,
+    },
+    searchHasNext: true,
+  }),
+  computed: {
+    isApiMode() {
+      return !!this.searchMethod;
+    },
+    showIntersectionObserver() {
+      return this.isApiMode && !this.isLoading && this.apiOptions.length;
+    },
+    selectValue() {
+      // vue-multiselect doesn't show placeholder if value is empty object
+      return this.isValue ? this.value : '';
+    },
+
+    selectOptions() {
+      return this.isApiMode ? this.apiOptions : this.options;
+    },
+
+    isValue() {
+      return !isEmpty(this.value);
+    },
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: this.input,
+        close: this.close,
+        tag: this.tag,
+        'search-change': (search) => {
+          this.$emit('search-change', search);
+          this.handleSearchChange(search);
+        },
+      };
+    },
+  },
+
+  methods: {
+    getOptionLabel({ option, optionLabel }) {
+      const defaultOptionLabel = 'name';
+
+      if (optionLabel) return option[optionLabel];
+      if (option.locale) {
+        if (Array.isArray(option.locale)) return this.$tc(...option.locale);
+        return this.$t(option.locale);
+      }
+      return option[defaultOptionLabel] || option;
+    },
+    handleSearchChange(search) {
+      if (!this.isApiMode) return;
+      this.isLoading = true;
+      this.searchParams.page = 1;
+      this.searchParams.search = search;
+      this.fetchOptions();
+    },
+
+    handleAfterListIntersect(isVisible) {
+      if (isVisible && this.searchHasNext) {
+        this.isLoading = true;
+        this.searchParams.page += 1;
+        this.fetchOptions();
+      }
+    },
+
+    async fetchOptions({ search, page } = this.searchParams) {
+      if (!this.isApiMode) return;
+      const { items, next } = await this.searchMethod({ search, page });
+      this.apiOptions = this.searchParams.page === 1 ? items : this.apiOptions.concat(items);
+      this.searchHasNext = next;
+      this.isLoading = false;
+    },
+
+    input(value) {
+      this.$emit('input', value);
+    },
+
+    close() {
+      this.$emit('closed');
+    },
+
+    tag() {},
+  },
+
+  created() {
+    this.fetchOptions();
+    this.fetchOptions = debounce(this.fetchOptions, 500);
+  },
+};