@webitel/ui-sdk 0.1.7 → 0.1.8-vue3

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

@@ -0,0 +1,182 @@
+<template>
+  <div
+    class="wt-switcher"
+    :class="{
+      'wt-switcher--off': !value,
+      'wt-switcher--on': value,
+      'wt-switcher--disabled': disabled,
+    }"
+  >
+    <wt-label
+      class="wt-switcher__wrapper"
+      :class="{'wt-switcher__wrapper--label-left': labelLeft}"
+      v-bind="labelProps"
+    >
+      <input
+        class="wt-switcher__input"
+        type="checkbox"
+        :checked="value"
+        :disabled="disabled"
+        @change="inputHandler"
+      >
+      <span class="wt-switcher__checkmark"></span>
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label, value, disabled }">
+        <div v-if="label" class="wt-switcher__label">{{ label }}</div>
+      </slot>
+    </wt-label>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'wt-switcher',
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      labelLeft: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      labelProps: {
+        type: Object,
+        description: 'Object with props, passed down to wt-label as props',
+      },
+    },
+    model: {
+      prop: 'value',
+      event: 'change',
+    },
+    methods: {
+      inputHandler() {
+        this.$emit('change', !this.value);
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-switcher {
+    @include width-fit-content;
+    position: relative;
+    box-sizing: border-box;
+
+    .wt-label {
+      cursor: pointer;
+    }
+  }
+
+  .wt-switcher__wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+
+    &.wt-switcher__wrapper--label-left {
+      flex-direction: row-reverse;
+    }
+  }
+
+  .wt-switcher__label {
+    margin-left: var(--switcher-icon-margin);
+    transition: var(--transition);
+
+    .wt-switcher__wrapper--label-left & {
+      margin-left: 0;
+      margin-right: var(--switcher-icon-margin);
+    }
+    .wt-switcher:hover & {
+      color: var(--form-label--hover-color);
+    }
+  }
+
+  .wt-switcher__input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .wt-switcher__checkmark {
+    position: relative;
+    display: block;
+    flex: 0 0 var(--switcher-width);
+    width: var(--switcher-width);
+    height: var(--switcher-height);
+    border-radius: var(--switcher-border-radius);
+    transition: var(--transition);
+
+    &:before {
+      content: '';
+      position: absolute;
+      bottom: var(--switcher-cicle-margin);
+      left: var(--switcher-cicle-margin);
+      height: var(--switcher-cicle-size);
+      width: var(--switcher-cicle-size);
+      background: var(--switcher-circle-bg-color);
+      border-radius: 50%;
+      transition: var(--transition);
+    }
+  }
+
+  .wt-switcher--off {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--off);
+    }
+
+    &:hover {
+      .wt-switcher__checkmark {
+        background: var(--switcher-bg-color--off--hover);
+      }
+    }
+
+    &.wt-switcher--disabled {
+      .wt-switcher__checkmark {
+        background: var(--switcher-bg-color--off--disabled);
+      }
+    }
+  }
+
+  .wt-switcher--on {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--on);
+
+      /* Show the indicator (dot/circle) when checked */
+      &:before {
+        transform: translateX(var(--switcher-cicle-translateX));
+      }
+    }
+
+    &:hover {
+      .wt-switcher__checkmark {
+        background: var(--switcher-bg-color--on--hover);
+      }
+    }
+
+    &.wt-switcher--disabled {
+      .wt-switcher__checkmark {
+        background: var(--switcher-bg-color--on--disabled);
+      }
+    }
+  }
+
+  .wt-switcher--disabled {
+    pointer-events: none;
+
+    .wt-switcher__label {
+      color: var(--form-label--disabled-color);
+    }
+  }
+</style>

package/src/components/molecules/wt-tabs/__tests__/WtTabs.spec.js

@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTabs from '../wt-tabs.vue';
+
+const tabs = [{ value: 'tab1', text: 'default' }];
+describe('WtTabs', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTabs);
+    expect(wrapper.classes('wt-tabs')).toBe(true);
+  });
+
+  it('component emits change at tab click', () => {
+    const wrapper = shallowMount(WtTabs, {
+      propsData: { tabs },
+    });
+    wrapper.find('.wt-tab').trigger('click');
+    expect(wrapper.emitted().change.pop()).toEqual([tabs[0]]);
+  });
+
+  it('renders tab default content', () => {
+    const wrapper = shallowMount(WtTabs, {
+      propsData: { tabs },
+    });
+    expect(wrapper.find('.wt-tab').text()).toBe(tabs[0].text);
+  });
+
+  it('renders tab custom content via default slot', () => {
+    const custom = 'custom name';
+    const wrapper = shallowMount(WtTabs, {
+      propsData: { tabs },
+      slots: {
+        tab1: custom,
+      },
+    });
+    expect(wrapper.find('.wt-tab').text()).toBe(custom);
+  });
+});

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

@@ -0,0 +1,117 @@
+<template>
+  <nav class="wt-tabs">
+    <button
+      v-for="(tab) in tabs"
+      :key="tab.value"
+      :class="{
+        'wt-tab--highlight': tab.value === current.value
+      }"
+      :value="tab.text"
+      class="wt-tab"
+      type="button"
+      @click="open(tab)"
+    >
+      <slot :name="tab.value" v-bind="{ tab, current }">
+        <span style="display: block;">{{ tab.text }}</span>
+      </slot>
+    </button>
+
+    <div class="wt-tabs__underline">
+      <div
+        :style="{
+          width: `${activeLineWidth}px`,
+          transform: `translateX(${activeLineOffset}px)`
+        }"
+        class="wt-tab__underline--highlight"
+      ></div>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'wt-tabs',
+  props: {
+    current: {
+      type: Object,
+      default: () => ({}),
+    },
+    tabs: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  model: {
+    prop: 'current',
+    event: 'change',
+  },
+
+  data: () => ({
+    activeLineWidth: 0,
+    activeLineOffset: 0,
+  }),
+
+  methods: {
+    open(value) {
+      this.$emit('change', value);
+      this.moveActiveLine(value);
+    },
+
+    moveActiveLine(newValue) {
+      if (!this.current) return;
+      if (!this.$refs || !this.$refs[newValue] || !this.$refs[newValue][0]) return;
+      const element = this.$refs[newValue][0];
+      this.activeLineWidth = element.clientWidth;
+      this.activeLineOffset = element.offsetLeft;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-tabs {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--tab-gap);
+}
+
+.wt-tab {
+  @extend %typo-body-1;
+  position: relative;
+  z-index: var(--tab-z-index);
+  display: inline-block;
+  padding-bottom: var(--tab-padding);
+  cursor: pointer;
+  transition: var(--transition);
+  color: var(--tab-color);
+  border: none;
+  border-bottom: var(--tab-border);
+  border-bottom-color: transparent;
+  outline: none;
+  background: transparent;
+
+  &:hover,
+  &:focus, {
+    color: var(--tab--hover-color);
+    border-bottom-color: var(--tab--active-border-color);
+  }
+
+  &.wt-tab--highlight {
+    color: var(--tab--active-color);
+    border-bottom-color: var(--tab--active-border-color);
+  }
+
+  //// disables bold font resize on hover
+  &:after {
+    display: block;
+    visibility: hidden;
+    overflow: hidden;
+    height: 0;
+    content: attr(value);
+    font-weight: bold;
+  }
+}
+
+</style>

package/src/components/molecules/wt-tags-input/__tests__/WtTagsInput.spec.js

@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTagsInput from '../wt-tags-input.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+
+describe('WtTagsInput', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTagsInput);
+    expect(wrapper.classes('wt-tags-input')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtTagsInput, {
+      stubs: { WtLabel },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-label').text()).toBe(label);
+  });
+
+  it('by default emits "input" event at native "tag" event', () => {
+    const tag = '123';
+    const wrapper = shallowMount(WtTagsInput, {
+      propsData: {
+        value: [],
+      },
+    });
+    wrapper.findComponent({ name: 'vue-multiselect' }).vm.$emit('tag', tag);
+    expect(wrapper.emitted().input[0][0]).toEqual([tag]);
+  });
+
+  it('in manual mode doesnt emit "input" event at native "tag" event', () => {
+    const tag = '123';
+    const wrapper = shallowMount(WtTagsInput, {
+      propsData: {
+        value: [],
+        manualTagging: true,
+      },
+    });
+    wrapper.findComponent({ name: 'vue-multiselect' }).vm.$emit('tag', tag);
+    expect(wrapper.emitted().input).toBeFalsy();
+  });
+});

package/src/components/molecules/wt-tags-input/wt-tags-input.vue

@@ -0,0 +1,215 @@
+<template>
+  <div
+    :class="{
+      'wt-tags-input--disabled': disabled,
+      'wt-tags-input--invalid': invalid,
+      'wt-tags-input--loading': isLoading,
+    }"
+    class="wt-tags-input"
+  >
+    <wt-label
+      v-if="hasLabel"
+      :disabled="disabled"
+      :invalid="invalid"
+      class="wt-tags-input__label"
+      v-bind="labelProps"
+    >
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
+    </wt-label>
+
+    <vue-multiselect
+      ref="vue-multiselect"
+      :close-on-select="false"
+      :disabled="disabled"
+      :internal-search="!searchMethod"
+      :label="trackBy ? optionLabel : null"
+      :loading="false"
+      :options="selectOptions"
+      :placeholder="placeholder || label"
+      :taggable="taggable"
+      :track-by="trackBy"
+      :model-value="selectValue"
+      class="wt-tags-input__select"
+      multiple
+      v-bind="$attrs"
+      v-on="listeners"
+    >
+
+      <!--      Slot that is used for all selected options (tags)-->
+      <template v-slot:tag="{ option, remove }">
+        <wt-chip class="multiselect__custom-tag">
+          {{ getTagOptionLabel({ option, optionLabel }) }}
+          <wt-icon-btn
+            icon="close--filled"
+            size="sm"
+            @click="remove(option)"
+          ></wt-icon-btn>
+        </wt-chip>
+      </template>
+
+      <!--      Slot for custom option template -->
+      <template v-slot:option="{ option }">
+        <slot name="option" v-bind="{ option, optionLabel }">
+          {{ getTagOptionLabel({ 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"
+          color="active"
+          icon="arrow-down"
+          @mousedown.native.prevent.stop="toggle"
+        ></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" v-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 '../wt-select/mixins/multiselectMixin';
+
+export default {
+  name: 'wt-tags-input',
+  mixins: [multiselectMixin],
+  props: {
+    value: {
+      type: Array,
+    },
+    trackBy: {
+      type: String,
+      default: null,
+    },
+    taggable: {
+      type: Boolean,
+      default: false,
+    },
+    manualTagging: {
+      type: Boolean,
+      default: false,
+      description: `
+      False: "tag" method automatically pushes { optionLabel | "name", trackBy } object to value
+      array and $emits "input" event.
+
+      True: "tag" method only $emits "tag" event. Tag addition is responsibility of client side.
+    `,
+    },
+  },
+  data: () => ({
+    defaultOptionLabel: 'label',
+  }),
+  methods: {
+    tag(searchQuery, id) {
+      this.$emit('tag', searchQuery, id);
+
+      const tag = this.trackBy ? {
+        [this.optionLabel || 'name']: searchQuery,
+        [this.trackBy]: id || searchQuery,
+      } : searchQuery;
+
+      const isTagExist = (newTag) => {
+        if (typeof newTag === 'string') {
+          return this.options.some((elem) => elem === newTag);
+        }
+        return this.options.some((elem) => elem[this.trackBy] === newTag[this.trackBy]);
+      }
+
+      if (isTagExist(tag)) return;
+
+      this.options.unshift(tag);
+      if (!this.manualTagging) {
+        const value = [...this.value, tag];
+        this.input(value);
+      }
+    },
+    getTagOptionLabel({ optionLabel, option }) {
+      /*
+      Multiselect creates new tags with "label" property by default, so we need to handle
+      it as well
+       */
+      const label = this.getOptionLabel({ optionLabel, option });
+      return typeof label === 'object' ? option.label : label;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../../css/components/molecules/wt-select/multiselect';
+
+.wt-tags-input {
+  width: 100%;
+}
+
+.wt-tags-input:hover,
+.wt-tags-input:focus-within {
+  .wt-label {
+    color: var(--form-label--hover-color);
+  }
+}
+
+.wt-tags-input--invalid,
+.wt-tags-input--invalid:hover,
+.wt-tags-input--invalid:focus-within, {
+  .wt-label {
+    color: var(--false-color);
+  }
+}
+
+.wt-tags-input--disabled {
+  .wt-tags-input__tags-input {
+    width: 100%;
+    max-width: 100%; // reset default
+  }
+}
+
+.wt-tags-input .multiselect ::v-deep {
+  .multiselect__tags {
+    padding-bottom: 0;
+    padding-right: calc(
+      var(--input-padding)
+      + var(--icon-md-size)
+      + var(--select-caret-right-pos)
+    );
+
+    .multiselect__tags-wrap {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .multiselect__custom-tag {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      max-width: 100%;
+      margin: 0 var(--spacing-xs) calc(var(--spacing-xs) - 1px) 0; // border bottom
+      word-break: break-all;
+      gap: var(--spacing-xs);
+    }
+  }
+
+  .multiselect__input {
+    margin-bottom: calc(var(--spacing-xs) - 1px); // border
+  }
+}
+</style>

package/src/components/molecules/wt-textarea/__tests__/WtTextarea.spec.js

@@ -0,0 +1,46 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTextarea from '../wt-textarea.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+
+describe('WtTextarea', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTextarea, {
+      stubs: {
+        WtLabel,
+      },
+    });
+    expect(wrapper.classes('wt-textarea')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtTextarea, {
+      stubs: {
+        WtLabel,
+      },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-label').text()).toBe(label);
+  });
+
+  it('emits "Enter" event if chat-mode prop is passed', () => {
+    const wrapper = shallowMount(WtTextarea, {
+      stubs: {
+        WtLabel,
+      },
+      propsData: { chatMode: true },
+    });
+    wrapper.find('.wt-textarea__textarea').trigger('keypress', { key: 'Enter' });
+    expect(wrapper.emitted().enter).toBeTruthy();
+  });
+
+  it('do not emit "Enter" event if chat-mode prop is not passed', () => {
+    const wrapper = shallowMount(WtTextarea, {
+      stubs: {
+        WtLabel,
+      },
+    });
+    wrapper.find('.wt-textarea__textarea').trigger('keypress', { key: 'Enter' });
+    expect(wrapper.emitted().enter).toBeFalsy();
+  });
+});