@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

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();
+  });
+});

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

@@ -2,34 +2,55 @@
   <div
     class="wt-textarea"
     :class="{
+      'wt-textarea--disabled': disabled,
+      'wt-textarea--invalid': invalid,
     }"
   >
-    <wt-label :for="name">
+    <wt-label
+      :for="name"
+      :disabled="disabled"
+      :invalid="invalid"
+      v-bind="labelProps"
+    >
       <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
+      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
     </wt-label>
     <div class="wt-textarea__wrapper">
       <textarea
         :id="name"
+        ref="wt-textarea"
         class="wt-textarea__textarea"
         :value="value"
         :placeholder="placeholder || label"
-        @input="$emit('input', $event.target.value)"
+        :disabled="disabled"
+        v-on="listeners"
       ></textarea>
-      <wt-icon-btn
-        class="wt-textarea__reset-icon-btn"
-        :class="{ 'hidden': !value }"
-        icon="remove-rounded"
-        size="sm"
-        @click.native="$emit('input', '')"
-      ></wt-icon-btn>
+      <div class="wt-textarea__after-wrapper" ref="after-wrapper">
+        <slot name="after-input"></slot>
+        <wt-icon-btn
+          class="wt-textarea__reset-icon-btn"
+          :class="{ 'hidden': !value }"
+          icon="close--filled"
+          size="sm"
+          :disabled="disabled"
+          @click="$emit('input', '')"
+        ></wt-icon-btn>
+      </div>
     </div>
+    <wt-input-info
+      v-if="isValidation"
+      :invalid="invalid"
+    >{{ validationText }}
+    </wt-input-info>
   </div>
 </template>
 
 <script>
+  import validationMixin from '../../../mixins/validationMixin/validationMixin';
+
   export default {
     name: 'wt-textarea',
+    mixins: [validationMixin],
     props: {
       /**
        * Current textarea value (`v-model`)
@@ -51,6 +72,14 @@
       placeholder: {
         type: String,
       },
+      /**
+       * Native textarea disabled attribute
+       */
+      disabled: {
+        type: Boolean,
+        default: false,
+        description: 'Native textarea disabled attribute',
+      },
       /**
        * textarea name
        */
@@ -58,18 +87,50 @@
         type: String,
         default: '',
       },
-    },
-
-    data: () => ({
-    }),
-
-    mounted() {
+      chatMode: {
+        type: Boolean,
+        default: false,
+      },
+      labelProps: {
+        type: Object,
+        description: 'Object with props, passed down to wt-label as props',
+      },
     },
 
     computed: {
+      listeners() {
+        return {
+          ...this.$listeners,
+          input: (event) => this.$emit('input', event.target.value),
+          keypress: (event) => this.handleKeypress(event),
+        };
+      },
+
+      requiredLabel() {
+        return this.required ? `${this.label}*` : this.label;
+      },
     },
 
     methods: {
+      handleKeypress(event) {
+        if (!this.chatMode) return;
+        if (event.key === 'Enter' && !event.shiftKey) {
+          this.$emit('enter');
+          event.preventDefault();
+        }
+      },
+
+      updateInputPaddings() {
+        // cant test this thing cause vue test utils doesnt render elements width :/
+        const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
+        const inputEl = this.$refs['wt-textarea'];
+        const defaultInputPadding = getComputedStyle(document.documentElement)
+          .getPropertyValue('--textarea-padding');
+        inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
+      },
+    },
+    mounted() {
+      this.updateInputPaddings();
     },
   };
 </script>
@@ -77,6 +138,10 @@
 <style lang="scss" scoped>
   .wt-textarea {
     cursor: text;
+
+    &--disabled {
+      pointer-events: none;
+    }
   }
 
   .wt-textarea__wrapper {
@@ -84,28 +149,21 @@
   }
 
   .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-
     .wt-textarea:hover &,
     .wt-textarea:focus-within & {
       color: var(--form-label--hover-color);
     }
-  }
 
-  .wt-textarea__reset-icon-btn {
-    position: absolute;
-    top: var(--input-icon-margin);
-    right: var(--input-icon-margin);
-
-    .wt-textarea:not(:focus-within) & {
-      opacity: 0;
-      pointer-events: none;
+    .wt-textarea--invalid:hover &,
+    .wt-textarea--invalid:focus-within & {
+      color: var(--label--invalid-color);
     }
   }
 
   .wt-textarea__textarea {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
+    @extend %wt-scrollbar;
+    @include wt-placeholder;
 
     display: block;
     width: 100%;
@@ -119,23 +177,39 @@
     transition: var(--transition);
     resize: none;
 
-    &::placeholder {
-      color: var(--form-placeholder-color)
-    }
-
-    .wt-textarea:hover &,
     &:focus {
+      @include wt-placeholder('focus');
+
       border-color: var(--form-border--hover-color);
+    }
+
+    .wt-textarea--disabled & {
+      @include wt-placeholder('disabled');
+
+      background: var(--form-border--disabled-color);
+      border-color: var(--form-border--disabled-color);
+    }
 
-      &::placeholder {
-        color: var(--form-placeholder--hover-color)
-      }
+    .wt-textarea--invalid &,
+    .wt-textarea--invalid:hover & {
+      border-color: var(--false-color);
+      outline: none; // prevent outline overlapping false color
     }
   }
 
   /* make icons black */
-  .wt-textarea:hover ::v-deep .wt-icon__icon,
-  .wt-textarea:focus-within ::v-deep .wt-icon__icon {
-    fill: var(--icon--hover-color);
+  .wt-textarea:hover ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon,
+  .wt-textarea:focus-within ::v-deep .wt-icon-btn:not(.wt-textarea__reset-icon-btn) .wt-icon__icon {
+    fill: var(--icon-color--hover);
+  }
+
+  .wt-textarea__after-wrapper {
+    display: flex;
+    gap: var(--input-after-wrapper-gap);
+    align-items: center;
+    position: absolute;
+    top: var(--input-icon-margin);
+    right: var(--input-icon-margin);
+    pointer-events: auto; // override --disabled p-events none
   }
 </style>

package/src/components/molecules/wt-time-input/__tests__/WtTimeInput.spec.js

@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTimeInput from '../wt-time-input.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+
+describe('WtTimeInput', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTimeInput, {
+      stubs: {
+        WtLabel,
+      },
+    });
+    expect(wrapper.classes('wt-time-input')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = shallowMount(WtTimeInput, {
+      stubs: {
+        WtLabel,
+      },
+      propsData: { label },
+    });
+    expect(wrapper.find('.wt-label').text()).toBe(label);
+  });
+});

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

@@ -4,9 +4,17 @@
     :class="{
       'wt-time-input--outline': outline,
       'wt-time-input--disabled': disabled,
+      'wt-time-input--invalid': invalid,
     }"
   >
-    <wt-label :for="name" :outline="outline" :disabled="disabled">
+    <wt-label
+      v-if="hasLabel"
+      :for="name"
+      :outline="outline"
+      :disabled="disabled"
+      :invalid="invalid"
+      v-bind="labelProps"
+    >
       <!-- @slot Custom input label -->
       <slot name="label" v-bind="{ label }">{{ label }}</slot>
     </wt-label>
@@ -19,21 +27,29 @@
         :max="maxValue"
         :disabled="disabled"
         type="number"
-        @input="$emit('input', $event.target.value)"
+        v-on="listeners"
       >
     </div>
+    <wt-input-info
+      v-if="showInfo"
+      :invalid="invalid"
+    >{{ validationText }}
+    </wt-input-info>
   </div>
 </template>
 
 <script>
+import validationMixin from '../../../mixins/validationMixin/validationMixin';
+
   export default {
     name: 'wt-time-input',
+    mixins: [validationMixin],
     props: {
       /**
        * Current input value (`v-model`)
        */
       value: {
-        type: [String, Number],
+        type: Number,
         default: 0,
       },
       /**
@@ -77,6 +93,30 @@
         type: Boolean,
         default: false,
       },
+
+      labelProps: {
+        type: Object,
+        description: 'Object with props, passed down to wt-label as props',
+      },
+
+      hideInputInfo: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      hasLabel() {
+        return !!(this.label || this.$slots.label);
+      },
+      listeners() {
+        return {
+          ...this.$listeners,
+          input: (event) => this.$emit('input', event.target.value),
+        };
+      },
+      showInfo() {
+        return this.isValidation && !this.hideInputInfo;
+      },
     },
   };
 </script>
@@ -97,17 +137,20 @@
 
   .wt-label {
     text-align: center;
-    margin-bottom: var(--label-margin);
-    cursor: text;
 
     .wt-time-input:hover &,
     .wt-time-input:focus-within & {
       color: var(--form-label--hover-color);
     }
+
+    .wt-time-input--invalid:hover &,
+    .wt-time-input--invalid:focus-within & {
+      color: var(--label--invalid-color);
+    }
   }
 
   .wt-time-input__input {
-    @extend %typo-body-lg;
+    @extend %typo-body-1;
 
     display: block;
     width: 100%;
@@ -137,5 +180,11 @@
       background: var(--form-border--disabled-color);
       border-color: var(--form-border--disabled-color);
     }
+
+    .wt-time-input--invalid &,
+    .wt-time-input--invalid:hover & {
+      border-color: var(--false-color);
+      outline: none; // prevent outline overlapping false color
+    }
   }
 </style>

package/src/components/molecules/wt-timepicker/__tests__/WtTimepicker.spec.js

@@ -0,0 +1,60 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTimepicker from '../wt-timepicker.vue';
+import WtTimeInput from '../../wt-time-input/wt-time-input.vue';
+
+describe('WtTimepicker', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTimepicker, {
+      stubs: {
+        WtTimeInput: true,
+      },
+    });
+    expect(wrapper.classes('wt-timepicker')).toBe(true);
+  });
+
+  it('renders only specified by format time inputs', () => {
+    const wrapper = shallowMount(WtTimepicker, {
+      stubs: {
+        WtTimeInput,
+      },
+      propsData: { format: 'mm' },
+    });
+    expect(wrapper.findAllComponents(WtTimeInput).length).toBe(1);
+  });
+
+  it('Correctly converts value from MIN time-input to output', () => {
+    const value = 0;
+    const wrapper = shallowMount(WtTimepicker, {
+      stubs: {
+        WtTimeInput,
+      },
+      propsData: { value },
+    });
+    wrapper.findAllComponents(WtTimeInput).at(0).vm.$emit('input', 21);
+    expect(wrapper.emitted().input[0]).toEqual([21 * 60 * 60]);
+  });
+
+  it('Correctly converts value from HOUR time-input to output', () => {
+    const value = 0;
+    const wrapper = shallowMount(WtTimepicker, {
+      stubs: {
+        WtTimeInput,
+      },
+      propsData: { value },
+    });
+    wrapper.findAllComponents(WtTimeInput).at(1).vm.$emit('input', 21);
+    expect(wrapper.emitted().input[0]).toEqual([21 * 60]);
+  });
+
+  it('Correctly converts value from SEC time-input to output', () => {
+    const value = 0;
+    const wrapper = shallowMount(WtTimepicker, {
+      stubs: {
+        WtTimeInput,
+      },
+      propsData: { value },
+    });
+    wrapper.findAllComponents(WtTimeInput).at(2).vm.$emit('input', 21);
+    expect(wrapper.emitted().input[0]).toEqual([21]);
+  });
+});