@webitel/ui-sdk 0.1.7 → 0.1.8-vue3

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

@@ -0,0 +1,215 @@
+<template>
+  <div
+    class="wt-textarea"
+    :class="{
+      'wt-textarea--disabled': disabled,
+      'wt-textarea--invalid': invalid,
+    }"
+  >
+    <wt-label
+      :for="name"
+      :disabled="disabled"
+      :invalid="invalid"
+      v-bind="labelProps"
+    >
+      <!-- @slot Custom input label -->
+      <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"
+        :disabled="disabled"
+        v-on="listeners"
+      ></textarea>
+      <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`)
+       */
+      value: {
+        type: String,
+        default: '',
+      },
+      /**
+       * textarea label
+       */
+      label: {
+        type: String,
+        default: '',
+      },
+      /**
+       * textarea placeholder
+       */
+      placeholder: {
+        type: String,
+      },
+      /**
+       * Native textarea disabled attribute
+       */
+      disabled: {
+        type: Boolean,
+        default: false,
+        description: 'Native textarea disabled attribute',
+      },
+      /**
+       * textarea name
+       */
+      name: {
+        type: String,
+        default: '',
+      },
+      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>
+
+<style lang="scss" scoped>
+  .wt-textarea {
+    cursor: text;
+
+    &--disabled {
+      pointer-events: none;
+    }
+  }
+
+  .wt-textarea__wrapper {
+    position: relative;
+  }
+
+  .wt-label {
+    .wt-textarea:hover &,
+    .wt-textarea:focus-within & {
+      color: var(--form-label--hover-color);
+    }
+
+    .wt-textarea--invalid:hover &,
+    .wt-textarea--invalid:focus-within & {
+      color: var(--label--invalid-color);
+    }
+  }
+
+  .wt-textarea__textarea {
+    @extend %typo-body-1;
+    @extend %wt-scrollbar;
+    @include wt-placeholder;
+
+    display: block;
+    width: 100%;
+    min-height: var(--textarea-min-height);
+    box-sizing: border-box;
+    padding: var(--textarea-padding);
+    color: var(--form-input-color);
+    border: var(--input-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+    transition: var(--transition);
+    resize: none;
+
+    &: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);
+    }
+
+    .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-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

@@ -0,0 +1,190 @@
+<template>
+  <div
+    class="wt-time-input"
+    :class="{
+      'wt-time-input--outline': outline,
+      'wt-time-input--disabled': disabled,
+      'wt-time-input--invalid': invalid,
+    }"
+  >
+    <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>
+    <div class="wt-time-input__wrapper">
+      <input
+        :id="name"
+        class="wt-time-input__input"
+        :value="value"
+        :min="0"
+        :max="maxValue"
+        :disabled="disabled"
+        type="number"
+        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: Number,
+        default: 0,
+      },
+      /**
+       * Form input label
+       */
+      label: {
+        type: String,
+        default: '',
+      },
+      /**
+       * Form input name
+       */
+      name: {
+        type: String,
+        default: '',
+      },
+      /**
+       * Time type: day, minute, second
+       */
+      maxValue: {
+        type: Number,
+      },
+      /**
+       * Native input required attribute
+       */
+      required: {
+        type: Boolean,
+        default: false,
+        description: 'Native input required attribute',
+      },
+      /**
+       * Native input disabled attribute
+       */
+      disabled: {
+        type: Boolean,
+        default: false,
+        description: 'Native input disabled attribute',
+      },
+
+      outline: {
+        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>
+
+<style lang="scss" scoped>
+  .wt-time-input {
+    display: inline-block;
+    cursor: text;
+
+    &--disabled {
+      pointer-events: none;
+    }
+  }
+
+  .wt-time-input__wrapper {
+    position: relative;
+  }
+
+  .wt-label {
+    text-align: center;
+
+    .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-1;
+
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--input-padding);
+    color: var(--form-input-color);
+    border: var(--input-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+    transition: var(--transition);
+
+    .wt-time-input:hover &,
+    &:focus {
+      border-color: var(--form-border--hover-color);
+    }
+
+    .wt-time-input--outline & {
+      border-color: var(--form-outline-border-color);
+    }
+
+    .wt-time-input--outline:hover &,
+    .wt-time-input--outline &:focus {
+      border-color: var(--form-outline-border--hover-color);
+    }
+
+    .wt-time-input--disabled & {
+      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]);
+  });
+});

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="wt-timepicker" :class="{'wt-timepicker--invalid': invalid}">
+    <wt-label
+      v-if="label"
+      :invalid="invalid"
+      v-bind="labelProps"
+    >
+      {{ `${label} (${format})` }}
+    </wt-label>
+    <div class="wt-timepicker__wrapper">
+      <wt-time-input
+        v-if="isHour"
+        v-model="hour"
+        :v="v"
+        :label="label ? null : $t('webitelUI.timepicker.hour') "
+        :maxValue="dateMode ? null : 23"
+        :disabled="disabled"
+        hide-input-info
+      ></wt-time-input>
+      <wt-time-input
+        v-if="isMin"
+        v-model="min"
+        :v="v"
+        :label="label ? null : $t('webitelUI.timepicker.min')"
+        :maxValue="59"
+        :disabled="disabled"
+        hide-input-info
+      ></wt-time-input>
+      <wt-time-input
+        v-if="isSec"
+        v-model="sec"
+        :v="v"
+        :label="label ? null :  $t('webitelUI.timepicker.sec')"
+        :maxValue="59"
+        :disabled="disabled"
+        hide-input-info
+      ></wt-time-input>
+    </div>
+    <wt-input-info
+      v-if="isValidation"
+      :invalid="invalid"
+    >{{ validationText }}
+    </wt-input-info>
+  </div>
+</template>
+
+<script>
+import validationMixin from '../../../mixins/validationMixin/validationMixin';
+
+const SEC_IN_HOUR = 60 * 60;
+const SEC_IN_MIN = 60;
+
+export default {
+  name: 'wt-timepicker',
+  mixins: [validationMixin],
+  props: {
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+    dateMode: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    format: {
+      type: String,
+      default: 'hh:mm:ss',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+  },
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+
+  computed: {
+    isHour() {
+      return this.format.includes('hh');
+    },
+    isMin() {
+      return this.format.includes('mm');
+    },
+    isSec() {
+      return this.format.includes('ss');
+    },
+    hour: {
+      get() {
+        return this.dateMode
+          ? new Date(+this.value).getHours()
+          : Math.floor(this.value / SEC_IN_HOUR);
+      },
+      set(value) {
+        const newValue = this.dateMode
+          ? new Date(this.value).setHours(value)
+          : this.value - this.hour * SEC_IN_HOUR + value * SEC_IN_HOUR;
+        this.$emit('input', newValue);
+      },
+    },
+    min: {
+      get() {
+        return this.dateMode
+          ? new Date(+this.value).getMinutes()
+          : Math.floor((this.value / SEC_IN_MIN) % 60);
+      },
+      set(value) {
+        const newValue = this.dateMode
+          ? new Date(this.value).setMinutes(value)
+          : this.value - this.min * SEC_IN_MIN + value * SEC_IN_MIN;
+        this.$emit('input', newValue);
+      },
+    },
+    sec: {
+      get() {
+        return this.dateMode
+          ? new Date(+this.value).getSeconds()
+          : Math.floor(this.value % 60);
+      },
+      set(value) {
+        const newValue = this.dateMode
+          ? new Date(this.value).setSeconds(value)
+          : this.value - this.sec + +value;
+        this.$emit('input', newValue);
+      },
+    },
+  },
+
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-timepicker {
+  display: flex;
+  flex-direction: column;
+}
+
+.wt-label {
+  .wt-timepicker:hover &,
+  .wt-timepicker:focus-within & {
+    color: var(--form-label--hover-color);
+  }
+
+  .wt-timepicker--invalid:hover &,
+  .wt-timepicker--invalid:focus-within & {
+    color: var(--label--invalid-color);
+  }
+}
+
+.wt-timepicker__wrapper {
+  display: flex;
+}
+
+.wt-time-input {
+  width: var(--timepicker-input-width);
+  margin-right: var(--timepicker-input-margin);
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+</style>

package/src/components/organisms/wt-app-header/__tests__/WtAppHeader.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils';
+import WtAppHeader from '../wt-app-header.vue';
+
+describe('WtAppHeader', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtAppHeader);
+    expect(wrapper.classes('wt-app-header')).toBe(true);
+  });
+
+  it('renders a app-header content via default slot', () => {
+    const content = 'app header content';
+    const wrapper = shallowMount(WtAppHeader, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-app-header').text()).toBe(content);
+  });
+});

package/src/components/organisms/wt-app-header/__tests__/WtAppNavigator.spec.js

@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils';
+import WebitelApplications from '../../../../enums/WebitelApplications/WebitelApplications.enum';
+import WtAppNavigator from '../wt-app-navigator.vue';
+
+const apps = [
+  { name: WebitelApplications.ADMIN, href: '' },
+  { name: WebitelApplications.HISTORY, href: '' },
+  { name: WebitelApplications.SUPERVISOR, href: '' },
+];
+describe('WtAppNavigator', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtAppNavigator);
+    expect(wrapper.classes('wt-app-navigator')).toBe(true);
+  });
+  it('renders specified app cards', () => {
+    const wrapper = shallowMount(WtAppNavigator, {
+      propsData: {
+        apps,
+      },
+    });
+    expect(wrapper.findAll('.wt-app-navigator__card').length).toBe(3);
+  });
+});