@webitel/ui-sdk 0.1.13 → 0.1.100

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

@@ -0,0 +1,295 @@
+<template>
+  <div
+    class="wt-tags-input"
+    :class="{
+      'wt-tags-input--disabled': disabled,
+      'wt-tags-input--invalid': invalid,
+    }"
+  >
+    <wt-label
+      class="wt-tags-input__label"
+      v-if="hasLabel"
+      :disabled="disabled"
+      :invalid="invalid"
+      v-bind="labelProps"
+    >
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
+    </wt-label>
+
+    <vue-tags-input
+      class="wt-tags-input__tags-input"
+      v-model="input"
+      v-bind="{ ...$attrs, ...$props }"
+      :tags="tags"
+      :autocomplete-items="autocompleteOptions"
+      :placeholder="placeholder || label"
+      v-on="listeners"
+    >
+      <template slot="tag-actions" slot-scope="{ index, performDelete }">
+        <wt-icon-btn
+          icon="close--filled"
+          size="sm"
+          color="active"
+          @click="performDelete(index)"
+        ></wt-icon-btn>
+      </template>
+    </vue-tags-input>
+
+    <wt-input-info
+      v-if="isValidation"
+      :invalid="invalid"
+    >{{ validationText }}
+    </wt-input-info>
+  </div>
+</template>
+
+<script>
+import VueTagsInput from '@johmun/vue-tags-input';
+import validationMixin from '../../../mixins/validationMixin/validationMixin';
+
+export default {
+  name: 'wt-tags-input',
+  mixins: [validationMixin],
+  components: { VueTagsInput },
+  props: {
+    value: {
+      type: Array,
+    },
+
+    autocompleteItems: {
+      type: Array,
+      default: () => [],
+    },
+
+    label: {
+      type: String,
+      default: '',
+    },
+
+    placeholder: {
+      type: String,
+      default: '',
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    autocompleteMinLength: {
+      type: Number,
+      default: 0,
+    },
+
+    addOnlyFromAutocomplete: {
+      type: Boolean,
+      default: false,
+    },
+
+    autocompleteFilterDuplicates: {
+      type: Boolean,
+      default: true,
+    },
+
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+  },
+
+  data: () => ({
+    input: '',
+  }),
+
+  computed: {
+    hasLabel() {
+      return !!(this.label || this.$slots.label);
+    },
+
+    requiredLabel() {
+      return this.required ? `${this.label}*` : this.label;
+    },
+
+    tags() {
+      if (!this.value) return [];
+      return this.value.map((item) => ({ text: item.name || item.value, ...item }));
+    },
+
+    autocompleteOptions() {
+      return this.autocompleteItems
+        .map((item) => ({
+          text: typeof item === 'object' ? item.name || item.value : item,
+          ...item,
+        }))
+        .filter((item) => item.text?.includes(this.input));
+    },
+
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: this.searchTags,
+        'tags-changed': this.changeTags,
+      };
+    },
+  },
+
+  methods: {
+    searchTags(search) {
+      this.$emit('search', search);
+    },
+
+    changeTags(tags) {
+      this.$emit('input', tags);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-tags-input {
+  width: 100%;
+}
+
+.wt-label {
+  margin-bottom: var(--label-margin);
+  cursor: text;
+
+  .wt-tags-input:hover &,
+  .wt-tags-input:focus-within & {
+    color: var(--form-label--hover-color);
+  }
+}
+
+// increase specificity
+.wt-tags-input .wt-tags-input__tags-input {
+  width: 100%;
+  max-width: 100%; // reset default
+
+  ::v-deep {
+    .ti-input {
+      box-sizing: border-box;
+      min-height: var(--tags-input-min-height); // preserve height, if tags is empty
+      padding: 0; // reset default
+      border: var(--tags-input-border);
+      border-color: var(--tags-input-border-color);
+      border-radius: var(--border-radius);
+      transition: var(--transition);
+
+      .ti-tags {
+        display: flex;
+        align-items: center;
+        padding: var(--tags-input-padding);
+        margin: 0; // reset default
+        word-break: break-word; //break long word
+      }
+
+      .ti-new-tag-input-wrapper {
+        padding: 0; // reset default
+        margin: 0; // reset default
+      }
+
+      .ti-new-tag-input {
+        @extend %typo-body-lg;
+        border-radius: var(--border-radius);
+
+        &::placeholder {
+          @extend %typo-body-lg;
+          color: var(--form-placeholder-color);
+        }
+      }
+
+      .ti-tag {
+        @extend %typo-body-lg;
+        height: fit-content;
+        padding: var(--tags-input-padding);
+        margin: 0 var(--tags-input-tag-spacing-margin) var(--tags-input-tag-spacing-margin) 0;  // reset default
+        color: var(--tags-input-tag-text-color);
+        background: var(--tags-input-tag-bg-color);
+        border-radius: var(--tags-input-tag-border-radius);
+        transition: var(--transition);
+
+        .ti-actions {
+          margin-left: var(--tags-input-tag-actions-margin-left);
+        }
+        // pre-delete state after 1 backspace press
+        &.ti-deletion-mark {   // FIXME
+          color: var(--tags-input-tag-text-color--deletion);
+          background: var(--tags-input-tag-bg-color--deletion);
+
+          .wt-icon__icon {
+            fill: var(--tags-input-tag-text-color--deletion);
+          }
+        }
+      }
+    }
+
+    .ti-autocomplete {
+      @extend %wt-distant-scrollbar;
+      max-height: var(--tags-input-autocomplete-max-height);
+      border: var(--tags-input-autocomplete-border);
+      border-color: var(--tags-input-autocomplete-border-color);
+      border-radius: var(--border-radius);
+      transition: var(--transition);
+      overflow: auto;
+
+      .ti-item {
+        background: transparent; // reset default
+
+        & > div {
+          @extend %typo-body-lg;
+          padding: var(--tags-input-autocomplete-option-padding);
+          color: var(--tags-input-autocomplete-option--text-color);
+          transition: var(--transition);
+
+          &:hover {
+            color: var(--tags-input-option-text-color--hover);
+            background: var(--tags-input-option-bg-color--hover);
+          }
+        }
+      }
+    }
+  }
+}
+
+.wt-tags-input--invalid,
+.wt-tags-input--invalid:hover,
+.wt-tags-input--invalid:focus-within, {
+  .wt-label {
+    color: var(--false-color);
+  }
+
+  .wt-tags-input__tags-input {
+    ::v-deep {
+      .ti-input {
+        border-color: var(--false-color);
+      }
+    }
+  }
+}
+
+.wt-tags-input--disabled {
+  pointer-events: none;
+
+  .wt-tags-input__tags-input {
+    width: 100%;
+    max-width: 100%; // reset default
+
+    ::v-deep {
+      .ti-input {
+        border-color: transparent;
+
+        .ti-new-tag-input-wrapper {
+          display: none;
+        }
+
+        .ti-tag {
+          .ti-actions {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+</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

@@ -0,0 +1,185 @@
+<template>
+  <div
+    class="wt-textarea"
+    :class="{
+      'wt-textarea--disabled': disabled,
+      }"
+  >
+    <wt-label
+      :for="name"
+      :disabled="disabled"
+      v-bind="labelProps"
+    >
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label }">{{ label }}</slot>
+    </wt-label>
+    <div class="wt-textarea__wrapper">
+      <textarea
+        :id="name"
+        class="wt-textarea__textarea"
+        :value="value"
+        :placeholder="placeholder || label"
+        :disabled="disabled"
+        v-on="listeners"
+      ></textarea>
+      <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>
+</template>
+
+<script>
+  export default {
+    name: 'wt-textarea',
+    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),
+        };
+      },
+    },
+
+    methods: {
+      handleKeypress(event) {
+        if (!this.chatMode) return;
+        if (event.key === 'Enter' && !event.shiftKey) {
+          this.$emit('enter');
+          event.preventDefault();
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-textarea {
+    cursor: text;
+
+    &--disabled {
+      pointer-events: none;
+    }
+  }
+
+  .wt-textarea__wrapper {
+    position: relative;
+  }
+
+  .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__textarea {
+    @extend %typo-body-lg;
+
+    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;
+
+    &::placeholder {
+      color: var(--form-placeholder-color)
+    }
+
+    .wt-textarea:hover &,
+    &:focus {
+      border-color: var(--form-border--hover-color);
+
+      &::placeholder {
+        color: var(--form-placeholder--hover-color)
+      }
+    }
+
+    .wt-textarea--disabled & {
+      background: var(--form-border--disabled-color);
+      border-color: var(--form-border--disabled-color);
+
+      &::placeholder {
+        color: var(--form-placeholder--disabled-color);
+      }
+    }
+  }
+
+  /* make icons black */
+  .wt-textarea:hover ::v-deep .wt-icon__icon,
+  .wt-textarea:focus-within ::v-deep .wt-icon__icon {
+    fill: var(--icon-color--hover);
+  }
+</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);
+  });
+});