@webitel/ui-sdk 0.1.3-vue3 → 0.1.4-vite

package/src/components/wt-table-column-select/wt-table-column-select.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="wt-table-column-select">
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          icon="column-select"
+          @click="openPopup"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableColumnSelect.title') }}
+    </wt-tooltip>
+    <wt-popup
+      v-if="isColumnSelectPopup"
+      class="wt-table-column-select__popup"
+      @close="close"
+    >
+      <template v-slot:title>
+        {{ $t('webitelUI.tableColumnSelect.title') }}
+      </template>
+      <template v-slot:main>
+        <div class="wt-table-column-select__popup-list-wrap">
+          <ul
+            class="wt-table-column-select__popup-list"
+            :class="{
+            'wt-table-column-select__popup-list--md':
+            changeableDraft.length > 10 && changeableDraft.length <= 20,
+            'wt-table-column-select__popup-list--lg':
+            changeableDraft.length > 20
+            }"
+          >
+            <li
+              v-for="(column, key) of changeableDraft"
+              :key="key"
+              class="wt-table-column-select__popup-item"
+              @click.capture.prevent="column.show = !column.show"
+            >
+              <wt-checkbox
+                v-model="column.show"
+                :label="shownColLabel(column)"
+              ></wt-checkbox>
+            </li>
+          </ul>
+        </div>
+      </template>
+      <template v-slot:actions>
+        <wt-button
+          @click="setShownColumns"
+        >{{ $t('reusable.add') }}
+        </wt-button>
+        <wt-button
+          color="secondary"
+          @click="close"
+        >{{ $t('reusable.cancel') }}
+        </wt-button>
+      </template>
+    </wt-popup>
+  </div>
+</template>
+
+<script>
+import deepCopy from 'deep-copy';
+
+export default {
+  name: 'wt-table-column-select',
+  props: {
+    headers: {
+      type: Array,
+      required: true,
+      description: 'Each header should have following schema: { value: String, show: Boolean, text: String }',
+    },
+    staticHeaders: {
+      type: Array,
+      default: () => [],
+      description: 'Header values to exclude from selection',
+    },
+  },
+
+  model: {
+    prop: 'headers',
+    event: 'change',
+  },
+
+  data: () => ({
+    draft: [], // headers draft
+    isColumnSelectPopup: false,
+  }),
+
+  watch: {
+    isColumnSelectPopup: {
+      handler() {
+        this.fillHeadersDraft();
+      },
+    },
+  },
+  computed: {
+    changeableDraft() {
+      return this.draft.filter((header) => !this.staticHeaders.includes(header.value)).sort((a, b) => {
+        return this.shownColLabel(a).localeCompare(this.shownColLabel(b));
+        // sorting headers for alphabet just in popup
+      });
+    },
+  },
+  methods: {
+    shownColLabel({ text, locale }) {
+      if (!text && locale) {
+        return typeof locale === 'string' ? this.$t(locale) : this.$t(...locale);
+      }
+      return text;
+    },
+    openPopup() {
+      this.isColumnSelectPopup = true;
+    },
+    close() {
+      this.isColumnSelectPopup = false;
+    },
+    fillHeadersDraft() {
+      this.draft = deepCopy(this.headers);
+    },
+    setShownColumns() {
+      this.$emit('change', this.draft);
+      this.close();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$list-height: 400px;
+$list-width-sm: calc(500px - var(--spacing-xl)); // all popup width - (paddings + overflow-padding)
+$list-width-md: calc(800px - var(--spacing-xl)); // all popup width - (paddings + overflow-padding)
+
+.wt-table-column-select {
+  line-height: 0; // prevent 24x28 icon height :/
+}
+.wt-table-column-select {
+  &__heading {
+    text-align: center;
+  }
+
+  &__popup-list-wrap {
+    max-height: $list-height;
+  }
+
+  &__popup-list {
+    @extend %wt-scrollbar;
+    max-height: $list-height;
+    width: $list-width-sm;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    overflow-x: hidden;
+
+    // for 10-30 items
+    &--md {
+      width: $list-width-md;
+      display: block;
+      column-count: 2;
+    }
+
+    // for 30+ items
+    &--lg {
+      width: $list-width-md;
+      max-height: none;
+      display: block;
+      column-count: 3;
+      overflow-y: auto;
+    }
+  }
+
+  &__popup-item {
+    display: flex;
+    align-items: center;
+    margin-right: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+  }
+}
+
+</style>

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

@@ -10,7 +10,7 @@ describe('WtTabs', () => {
 
   it('component emits change at tab click', () => {
     const wrapper = shallowMount(WtTabs, {
-      propsData: { tabs },
+      props: { tabs },
     });
     wrapper.find('.wt-tab').trigger('click');
     expect(wrapper.emitted().change.pop()).toEqual([tabs[0]]);
@@ -18,7 +18,7 @@ describe('WtTabs', () => {
 
   it('renders tab default content', () => {
     const wrapper = shallowMount(WtTabs, {
-      propsData: { tabs },
+      props: { tabs },
     });
     expect(wrapper.find('.wt-tab').text()).toBe(tabs[0].text);
   });
@@ -26,7 +26,7 @@ describe('WtTabs', () => {
   it('renders tab custom content via default slot', () => {
     const custom = 'custom name';
     const wrapper = shallowMount(WtTabs, {
-      propsData: { tabs },
+      props: { tabs },
       slots: {
         tab1: custom,
       },

package/src/{css/components/molecules → components}/wt-tabs/_variables.scss

@@ -9,6 +9,6 @@
   --tab--hover-color: var(--text-primary-color);
   --tab--active-color: var(--text-primary-color);
   --tab-border: 4px solid;
-  --tab--active-border-color: var(--accent-color);
+  --tab--active-border-color: var(--primary-color);
   --tab-z-index: 1;
 }

package/src/components/{molecules/wt-tabs → wt-tabs}/wt-tabs.vue

@@ -11,7 +11,10 @@
       type="button"
       @click="open(tab)"
     >
-      <slot :name="tab.value" v-bind="{ tab, current }">
+      <slot
+        v-bind="{ tab, current }"
+        :name="tab.value"
+      >
         <span style="display: block;">{{ tab.text }}</span>
       </slot>
     </button>
@@ -69,7 +72,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-tabs {
   position: relative;
   display: flex;

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

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtTagsInput from '../wt-tags-input.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 
@@ -10,17 +10,17 @@ describe('WtTagsInput', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtTagsInput, {
+    const wrapper = mount(WtTagsInput, {
       stubs: { WtLabel },
-      propsData: { label },
+      props: { 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: {
+    const wrapper = mount(WtTagsInput, {
+      props: {
         value: [],
       },
     });
@@ -30,8 +30,8 @@ describe('WtTagsInput', () => {
 
   it('in manual mode doesnt emit "input" event at native "tag" event', () => {
     const tag = '123';
-    const wrapper = shallowMount(WtTagsInput, {
-      propsData: {
+    const wrapper = mount(WtTagsInput, {
+      props: {
         value: [],
         manualTagging: true,
       },

package/src/components/{molecules/wt-tags-input → wt-tags-input}/wt-tags-input.vue

@@ -8,22 +8,26 @@
     class="wt-tags-input"
   >
     <wt-label
+      v-bind="labelProps"
       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>
+      <slot
+        v-bind="{ label }"
+        name="label"
+      >{{ requiredLabel }}</slot>
     </wt-label>
 
     <vue-multiselect
+      v-bind="$attrs"
       ref="vue-multiselect"
       :close-on-select="false"
       :disabled="disabled"
       :internal-search="!searchMethod"
-      :label="trackBy ? optionLabel : null"
+      :label="selectOptionLabel"
       :loading="false"
       :options="selectOptions"
       :placeholder="placeholder || label"
@@ -32,7 +36,6 @@
       :model-value="selectValue"
       class="wt-tags-input__select"
       multiple
-      v-bind="$attrs"
       v-on="listeners"
     >
 
@@ -50,7 +53,10 @@
 
       <!--      Slot for custom option template -->
       <template v-slot:option="{ option }">
-        <slot name="option" v-bind="{ option, optionLabel }">
+        <slot
+          v-bind="{ option, optionLabel }"
+          name="option"
+        >
           {{ getTagOptionLabel({ option, optionLabel }) }}
         </slot>
       </template>
@@ -63,7 +69,7 @@
           class="multiselect__select"
           color="active"
           icon="arrow-down"
-          @mousedown.native.prevent.stop="toggle"
+          @mousedown.prevent.stop="toggle"
         ></wt-icon-btn>
       </template>
 
@@ -115,6 +121,7 @@ export default {
     `,
     },
   },
+  emits: ['input', 'tag', 'search-change', 'closed'],
   data: () => ({
     defaultOptionLabel: 'label',
   }),
@@ -154,8 +161,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
-@import '../../../css/components/molecules/wt-select/multiselect';
+@import '../wt-select/multiselect.scss';
 
 .wt-tags-input {
   width: 100%;

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

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtTextarea from '../wt-textarea.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 
@@ -14,11 +14,11 @@ describe('WtTextarea', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtTextarea, {
+    const wrapper = mount(WtTextarea, {
       stubs: {
         WtLabel,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });
@@ -28,7 +28,7 @@ describe('WtTextarea', () => {
       stubs: {
         WtLabel,
       },
-      propsData: { chatMode: true },
+      props: { chatMode: true },
     });
     wrapper.find('.wt-textarea__textarea').trigger('keypress', { key: 'Enter' });
     expect(wrapper.emitted().enter).toBeTruthy();

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

@@ -0,0 +1,223 @@
+<template>
+  <div
+    class="wt-textarea"
+    :class="{
+      'wt-textarea--disabled': disabled,
+      'wt-textarea--invalid': invalid,
+    }"
+  >
+    <wt-label
+      v-bind="labelProps"
+      :for="name"
+      :disabled="disabled"
+      :invalid="invalid"
+    >
+      <!-- @slot Custom input label -->
+      <slot
+        v-bind="{ label }"
+        name="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',
+    },
+  },
+  emits: ['input', 'enter'],
+  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">
+@import './variables.scss';
+</style>
+
+<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 → wt-time-input}/__tests__/WtTimeInput.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtTimeInput from '../wt-time-input.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 
@@ -14,11 +14,11 @@ describe('WtTimeInput', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtTimeInput, {
+    const wrapper = mount(WtTimeInput, {
       stubs: {
         WtLabel,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });