@webitel/ui-sdk 0.1.7 → 0.1.8-vue3

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,146 @@
+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,
+    defaultOptionLabel: 'name',
+
+    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,
+        'update:model-value': this.input,
+        close: this.close,
+        tag: this.tag,
+        'search-change': (search) => {
+          this.$emit('search-change', search);
+          this.handleSearchChange(search);
+        },
+      };
+    },
+  },
+
+  methods: {
+    getOptionLabel({ option, optionLabel }) {
+      if (optionLabel && option[optionLabel]) return option[optionLabel];
+      if (option.locale) {
+        if (Array.isArray(option.locale)) return this.$tc(...option.locale);
+        return this.$t(option.locale);
+      }
+      return option[this.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);
+  },
+};

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

@@ -0,0 +1,274 @@
+<template>
+  <div
+    :class="{
+      'wt-select--disabled': disabled,
+      'wt-select--invalid': invalid,
+      'wt-select--multiple': multiple,
+      'wt-select--clearable': clearable,
+      'wt-select--loading': isLoading,
+    }"
+    class="wt-select"
+  >
+    <wt-label
+      v-if="hasLabel"
+      :disabled="disabled"
+      :invalid="invalid"
+      class="wt-select__label"
+      v-bind="labelProps"
+    >
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
+    </wt-label>
+    <vue-multiselect
+      ref="vue-multiselect"
+      :allow-empty="allowEmpty"
+      :disabled="disabled"
+      :internal-search="!searchMethod"
+      :label="trackBy ? optionLabel : null"
+      :limit="1"
+      :loading="false"
+      :multiple="multiple"
+      :options="selectOptions"
+      :placeholder="placeholder || label"
+      :track-by="trackBy"
+      :model-value="selectValue"
+      class="wt-select__select"
+      v-bind="$attrs"
+      @close="isOpened = false"
+      @open="isOpened = true"
+      v-on="listeners"
+    >
+      <template v-if="!isOpened" v-slot:limit>
+        <wt-chip class="multiselect__limit">+{{ value.length - 1 }}</wt-chip>
+      </template>
+
+      <!--      Slot that is used for all selected options (tags)-->
+      <template v-slot:tag="{ option }">
+        <span class="multiselect__custom-tag">
+            {{ getOptionLabel({ option, optionLabel }) }}
+        </span>
+      </template>
+
+      <!--      Slot for custom label template for single select-->
+      <template v-slot:singleLabel="{ option }">
+        <slot name="singleLabel" v-bind="{ option, optionLabel }">
+          <span class="multiselect__single-label">
+            {{ getOptionLabel({ option, optionLabel }) }}
+          </span>
+        </slot>
+      </template>
+
+      <!--      Slot for custom option template -->
+      <template v-slot:option="{ option }">
+        <slot name="option" v-bind="{ option, optionLabel }">
+          {{ getOptionLabel({ option, optionLabel }) }}
+        </slot>
+      </template>
+
+      <!--      Element for opening and closing the dropdown -->
+      <template v-slot:caret="{ toggle }">
+        <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->
+        <wt-icon-btn
+          :disabled="disabled"
+          class="multiselect__select"
+          icon="arrow-down"
+          @mousedown.native.prevent.stop="toggle"
+        ></wt-icon-btn>
+      </template>
+
+      <!--      Slot located before the tags -->
+      <template v-slot:clear="{}">
+        <wt-icon-btn
+          v-if="clearable"
+          :class="{ 'hidden': !isValue }"
+          :disabled="disabled"
+          class="multiselect__clear"
+          icon="close"
+          @click="clearValue"
+        ></wt-icon-btn>
+      </template>
+
+      <template v-slot:beforeList>
+        <div v-show="isLoading" class="multiselect__loading-wrapper">
+          <wt-loader size="sm"></wt-loader>
+        </div>
+      </template>
+
+      <template v-if="showIntersectionObserver" slot="afterList">
+        <div v-observe-visibility="handleAfterListIntersect"></div>
+      </template>
+    </vue-multiselect>
+    <wt-input-info
+      v-if="isValidation"
+      :invalid="invalid"
+    >{{ validationText }}
+    </wt-input-info>
+  </div>
+</template>
+
+<script>
+import multiselectMixin from './mixins/multiselectMixin';
+
+export default {
+  name: 'wt-select',
+  mixins: [multiselectMixin],
+  props: {
+    value: {},
+
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data: () => ({
+    isOpened: false,
+  }),
+  methods: {
+    clearValue() {
+      let value = '';
+      if (Array.isArray(this.value)) value = [];
+      else if (typeof this.value === 'object' && this.value !== null) value = {};
+      this.input(value);
+      this.$emit('reset', value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../../css/components/molecules/wt-select/multiselect';
+
+.wt-select {
+  width: 100%;
+  min-width: 0;
+}
+
+.wt-label {
+  .wt-select:hover &,
+  .wt-select:focus-within &, {
+    color: var(--form-label--hover-color);
+  }
+}
+
+.wt-select--invalid,
+.wt-select--invalid:hover {
+  .wt-label {
+    color: var(--false-color);
+  }
+}
+
+.multiselect ::v-deep {
+  .multiselect__custom-tag,
+  .multiselect__single-label {
+    // text overflow 3 dots
+    display: block;
+    overflow: hidden;
+    max-width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.multiselect--active ::v-deep {
+  .multiselect__tags-wrap,
+  .multiselect__strong {
+    display: none;
+  }
+}
+
+// right padding setup
+
+// default case
+.wt-select {
+  // all is fine
+  .multiselect ::v-deep {
+    .multiselect__tags {
+      padding: var(--input-padding) calc(
+        var(--input-padding)
+        + var(--icon-md-size)
+        + var(--select-caret-right-pos)
+      ) var(--input-padding) var(--input-padding);
+    }
+  }
+}
+
+// only chip
+.wt-select.wt-select--multiple:not(.wt-select--clearable) {
+  .multiselect ::v-deep {
+    $multiselect-limit-right-pos: calc(
+      var(--select-caret-right-pos) // caret offet from border
+      + var(--icon-md-size) // caret size
+      + var(--input-padding) // caret-to-chip offset
+    );
+    .multiselect__tags {
+      padding-right: calc(
+        $multiselect-limit-right-pos
+        + 50px // chip
+        + var(--input-padding) // chip-to-content offset
+      );
+    }
+    .multiselect__limit {
+      right: $multiselect-limit-right-pos;
+    }
+  }
+}
+
+// only clearable
+.wt-select.wt-select--clearable:not(.wt-select--multiple) {
+  .multiselect ::v-deep {
+    $multiselect-clear-right-pos: calc(
+      var(--select-caret-right-pos) // caret offet from border
+      + var(--icon-md-size) // caret size
+      + var(--input-padding) // caret-to-chip offset
+    );
+    .multiselect__tags {
+      padding-right: calc(
+        $multiselect-clear-right-pos
+        + var(--icon-md-size) // clear
+        + var(--input-padding) // clear-to-content offset
+      );
+    }
+
+    .multiselect__clear {
+      right: $multiselect-clear-right-pos;
+    }
+  }
+}
+
+.wt-select.wt-select--multiple.wt-select--clearable {
+  .multiselect ::v-deep {
+    $multiselect-clear-right-pos: calc(
+      var(--select-caret-right-pos)// caret offet from border
+      + var(--icon-md-size)// caret size
+      + var(--input-padding) // caret-to-chip offset
+    );
+
+    $multiselect-limit-right-pos: calc(
+      $multiselect-clear-right-pos// clear offet from border
+      + var(--icon-md-size)// clear size
+      + var(--input-padding) // cleat-to-chip offset
+    );
+
+    .multiselect__tags {
+      padding-right: calc(
+        $multiselect-limit-right-pos
+        + 50px// chip
+        + var(--input-padding) // chip-to-content offset
+      );
+    }
+
+    .multiselect__clear {
+      right: $multiselect-clear-right-pos;
+    }
+
+    .multiselect__limit {
+      right: $multiselect-limit-right-pos;
+    }
+  }
+}
+</style>

package/src/components/molecules/wt-slider/__tests__/WtSlider.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSlider from '../wt-slider.vue';
+
+describe('WtSlider', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSlider, {});
+    expect(wrapper.classes('wt-slider')).toBe(true);
+  });
+});

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

@@ -0,0 +1,174 @@
+<!-- We were trying to draw our own slider using <div> tags, but realizing all the limitations decided to use
+the native input of type 'range', styling it as per Webitel needs for every of the most popular web browsers.
+
+The biggest issue to solve was the vertical input. At the moment browsers do not support vertical input range having
+custom styling, so we are using css rotation.
+Dealing with rotation we realized rotated element is very hard to position correctly with no fixed height of the parent element.
+Considering the fact parent height is always relative to it's childs height, we are manipulating the child width/height on rotation.
+To achieve correct slider height we:
+ 1. Rotate slider by 90deg, so the width of slider becomes 'heigth' of the parent.
+ 2. Set the new slider width (which is now positioned from bottom to top) using fixed number of pixels, received with props.
+ 3. Set the container element height to 100% so it is always calculated correctly depending on it`s child dimensions.
+
+Until there are no possibility to style input range and position it vertically, we are rotating our slider with css
+and swapping height/width of this component in order to have the correct output.
+-->
+
+<template>
+  <div
+    :class="{
+        'wt-slider--disabled': disabled,
+        'wt-slider--vertical': vertical,
+      }"
+    :style="{ height: verticalHeight }"
+    class="wt-slider"
+  >
+    <div
+      :style="{ width: verticalHeight }"
+      class="wt-slider__wrapper"
+    >
+      <!-- The row above is needed in order to set correct component width when slider is vertical -->
+      <input
+        :disabled="disabled"
+        :max="max"
+        :min="min"
+        :step="step"
+        :style="{ background: progressStyle }"
+        :value="value"
+        class="wt-slider__slider"
+        type="range"
+        @input="inputHandler"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-slider',
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+    // Height of vertical slider (px):
+    height: {
+      type: Number,
+      default: 100,
+    },
+  },
+  computed: {
+    progressStyle() { // To achieve the correct color styling:
+      const progressPercent = ((this.value - this.min) / (this.max - this.min)) * 100;
+      return `linear-gradient(to right, var(--accent-color) ${progressPercent}%, var(--secondary-color) 0%)`;
+    },
+    verticalHeight() { // in order to have correct parent height after slider rotation
+      return this.vertical ? `${this.height}px` : '100%';
+    },
+  },
+  methods: {
+    inputHandler(event) {
+      this.$emit('input', +event.target.value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-slider__wrapper {
+  display: flex;
+  align-items: center;
+  width: var(--wt-slider-width);
+  height: var(--wt-slider-height);
+}
+
+.wt-slider__slider {
+  box-sizing: border-box;
+  width: var(--wt-slider-width);
+  height: var(--wt-slider-input-height);
+  margin: 0;
+  cursor: pointer;
+  border: var(--wt-slider-border);
+  border-radius: var(--border-radius);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  &::-webkit-slider-thumb {
+    width: var(--wt-slider-pointer-size);
+    height: var(--wt-slider-pointer-size);
+    border: var(--wt-slider-border);
+    border-radius: var(--wt-slider-pointer-radius);
+    background: var(--main-color);
+    -webkit-appearance: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+  }
+
+  &::-moz-range-thumb {
+    width: var(--wt-slider-pointer-size);
+    height: var(--wt-slider-pointer-size);
+    border: var(--wt-slider-border);
+    border-radius: var(--wt-slider-pointer-radius);
+    background: var(--main-color);
+    -moz-appearance: none;
+  }
+
+  &::-moz-range-track {
+    -moz-appearance: none;
+  }
+
+  &::-ms-thumb {
+    appearance: none;
+  }
+
+  &::-ms-track {
+    appearance: none;
+  }
+}
+
+.wt-slider--disabled {
+  .wt-slider__slider {
+    pointer-events: none;
+
+    &::-webkit-slider-thumb {
+      display: none;
+    }
+
+    &::-moz-range-thumb {
+      display: none;
+    }
+  }
+}
+
+.wt-slider--vertical {
+  width: var(--wt-slider-height);
+  transform: var(--wt-slider-vertical-container-translation);
+
+  .wt-slider__wrapper {
+    transform: var(--wt-slider-vertical-transform);
+    transform-origin: var(--wt-slider-vertical-transform-origin);
+  }
+}
+</style>

package/src/components/molecules/wt-switcher/__tests__/WtSwitcher.spec.js

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSwitcher from '../wt-switcher.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+
+describe('WtSwitcher', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSwitcher, {
+      stubs: { WtLabel },
+    });
+    expect(wrapper.classes('wt-switcher')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtSwitcher, {
+      stubs: { WtLabel },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-switcher__label').text()).toBe(label);
+  });
+
+  it('toggles passed value at click', () => {
+    const value = true;
+    const wrapper = shallowMount(WtSwitcher, {
+      stubs: { WtLabel },
+      propsData: { value },
+    });
+    wrapper.find('.wt-switcher__input').trigger('change');
+    expect(wrapper.emitted().change[0]).toEqual([!value]);
+  });
+});