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

package/src/components/wt-rounded-action/Readme.md

@@ -0,0 +1,68 @@
+### Different colors
+
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action icon="call" disabled></wt-rounded-action>
+<wt-rounded-action icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Active (pressed) buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action active icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action active icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action active icon="call" disabled></wt-rounded-action>
+<wt-rounded-action active icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action active icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action active icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Wide buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action wide icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action wide rounded icon="call" color="secondary"></wt-rounded-action>
+</div>
+```
+
+### Rounded buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action rounded icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" disabled></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action rounded icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Small (sm) buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action size="sm" icon="call" color="primary"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="secondary"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" disabled></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="success"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="error"></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="transfer"></wt-rounded-action>
+</div>
+```
+
+### Loading-state buttons
+```vue
+<div class="example-wrapper" style="display: flex; gap: var(--spacing-xs);">
+<wt-rounded-action size="sm" icon="call" color="primary" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="secondary" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" disabled loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="success" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="error" loading></wt-rounded-action>
+<wt-rounded-action size="sm" icon="call" color="transfer" loading></wt-rounded-action>
+</div>
+```

package/src/components/{atoms/wt-rounded-action → wt-rounded-action}/__tests__/WtRoundedAction.spec.js

@@ -3,7 +3,7 @@ import WtRoundedAction from '../wt-rounded-action.vue';
 
 describe('WtRoundedAction', () => {
   it('renders a component', () => {
-    const wrapper = shallowMount(WtRoundedAction, { propsData: { icon: 'call' } });
+    const wrapper = shallowMount(WtRoundedAction, { props: { icon: 'call' } });
     expect(wrapper.classes('wt-rounded-action')).toBe(true);
   });
 });

package/src/components/wt-rounded-action/_variables.scss

@@ -0,0 +1,14 @@
+:root {
+  --rounded-action-border-size: 2px;
+  --rounded-action-padding: calc(var(--spacing-xs) - var(--rounded-action-border-size));
+
+  --rounded-action-rounded-border-radius: var(--border-radius--pill);
+
+  --rounded-action-bg-color: var(--dp-20-surface-color);
+  --rounded-action-bg-hover-color: var(--dp-22-surface-color);
+
+  --rounded-action-active-color: var(--dp-10-surface-color);
+}
+
+:root.theme--dark {
+}

package/src/components/wt-rounded-action/wt-rounded-action.vue

@@ -0,0 +1,139 @@
+<template>
+  <button
+    :class="[
+      `wt-rounded-action--size-${size}`,
+      { 'wt-rounded-action--active': active },
+      { 'wt-rounded-action--disabled': disabled },
+      { 'wt-rounded-action--rounded': rounded },
+      { 'wt-rounded-action--wide': wide },
+    ]"
+    type="button"
+    class="wt-rounded-action"
+    @click="emit('click', $event)"
+  >
+    <wt-loader
+      v-if="loading"
+      size="sm"
+      :color="loaderColor"
+    ></wt-loader>
+    <wt-icon
+      v-else
+      :color="iColor"
+      :icon="icon"
+      :size="size"
+    ></wt-icon>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  /**
+   * @values 'primary', 'secondary', 'success', 'error', 'transfer'
+   */
+  color: {
+    type: String,
+    options: ['primary', 'secondary', 'success', 'error', 'transfer'],
+    default: 'secondary',
+  },
+  /**
+   * @values 'sm', 'md'
+   */
+  size: {
+    type: String,
+    default: 'md',
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Stretches button to all available width
+   */
+  wide: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(['click']);
+
+const iColor = computed(() => {
+  if (props.disabled) return 'disabled';
+  switch (props.color) {
+    case 'secondary': return 'default';
+    default: return props.color;
+  }
+});
+const loaderColor = computed(() => {
+  // if (['success', 'transfer', 'error'].includes(props.color)) return 'main';
+  return 'contrast';
+});
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+.wt-rounded-action {
+  display: block;
+  width: fit-content;
+  line-height: 0;
+  padding: var(--rounded-action-padding);
+  border: var(--rounded-action-border-size) solid;
+  background: var(--rounded-action-bg-color);
+  border-color: var(--rounded-action-bg-color);
+  border-radius: var(--border-radius);
+  transition: var(--transition);
+
+  &:hover {
+    background: var(--rounded-action-bg-hover-color);
+    border-color: var(--rounded-action-bg-hover-color);
+  }
+
+  &--wide {
+    width: 100%;
+  }
+
+  &--rounded {
+    border-radius: var(--rounded-action-rounded-border-radius);
+  }
+
+  &--active {
+    border-color: var(--rounded-action-active-color);
+
+    &:hover {
+      border-color: var(--rounded-action-active-color);
+    }
+  }
+
+  &.wt-rounded-action--disabled {
+    pointer-events: none;
+  }
+
+  &--size {
+    &-sm {
+    }
+
+    &-md {
+    }
+  }
+}
+</style>

package/src/components/{molecules/wt-search-bar → wt-search-bar}/__tests__/WtSearchBar.spec.js

@@ -1,5 +1,14 @@
+import { ref } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import WtSearchBar from '../wt-search-bar.vue';
+import { useValidation } from '../../../mixins/validationMixin/useValidation';
+
+jest.mock('../../../mixins/validationMixin/useValidation');
+useValidation.mockImplementation(() => ({
+  isValidation: ref(false),
+  invalid: ref(false),
+  validationText: ref(''),
+}));
 
 describe('WtSearchBar', () => {
   it('renders a component', () => {

package/src/components/wt-search-bar/wt-search-bar.vue

@@ -0,0 +1,222 @@
+<template>
+  <div
+    :class="{
+      'wt-search-bar--outline': outline,
+      'wt-search-bar--invalid': invalid,
+    }"
+    class="wt-search-bar"
+  >
+    <div class="wt-search-bar__wrapper">
+      <div class="wt-search-bar__search-icon">
+        <slot
+          :invalid="invalid"
+          name="search-icon"
+        >
+          <wt-icon
+            :color="invalidColorProvider"
+            icon="search"
+          ></wt-icon>
+        </slot>
+      </div>
+      <input
+        :placeholder="placeholder || $t('webitelUI.searchBar.placeholder')"
+        :value="value"
+        class="wt-search-bar__input"
+        type="search"
+        @input="handleInput($event.target.value)"
+        @keyup="handleKeyup"
+      >
+      <div class="wt-search-bar__icon-controls">
+        <wt-icon-btn
+          :class="{ 'hidden': !value }"
+          class="wt-search-bar__reset-icon-btn"
+          icon="close"
+          :color="invalidColorProvider"
+          @click="handleInput('')"
+        ></wt-icon-btn>
+        <wt-hint
+          v-if="hint"
+          :iconColor="invalidColorProvider"
+        >{{ hint }}
+        </wt-hint>
+        <slot
+          :invalid="invalid"
+          name="additional-actions"
+        ></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, toRefs } from 'vue';
+import debounce from '../../scripts/debounce';
+import { useValidation } from '../../mixins/validationMixin/useValidation';
+
+const props = defineProps({
+  v: {
+    type: Object,
+  },
+  customValidators: {
+    type: Array,
+    default: () => [],
+  },
+  /**
+   * Current search-bar value (`v-model`)
+   */
+  value: {
+    type: String,
+    default: '',
+  },
+  /**
+   * search-bar placeholder
+   */
+  placeholder: {
+    type: String,
+  },
+  outline: {
+    type: Boolean,
+    default: false,
+  },
+  hint: {
+    type: String,
+    description: 'Adds hint icon + tooltip with text, passed as "hint" prop',
+  },
+});
+
+const emit = defineEmits([
+  'input',
+  'search',
+  'enter',
+]);
+
+const { v, customValidators } = toRefs(props);
+
+const { invalid } = useValidation({ v, customValidators });
+
+const invalidColorProvider = computed(() => {
+  return invalid.value ? 'danger' : null;
+});
+
+const search = debounce((value) => {
+  emit('search', value);
+}, 1000);
+
+function handleInput(value) {
+  emit('input', value);
+  search(value);
+}
+
+function handleKeyup(event) {
+  if (event.key === 'Enter') {
+    search(props.value);
+    event.preventDefault();
+  } else if (event.key === 'Esc') {
+    handleInput('');
+    event.preventDefault();
+  }
+}
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-search-bar {
+  cursor: text;
+
+  &.wt-search-bar--invalid {
+    .wt-search-bar__wrapper {
+      border-color: var(--false-color);
+      outline: none; // prevent outline overlapping false color
+    }
+    .wt-search-bar__input {
+      color: var(--false-color);
+    }
+  }
+
+  .wt-search-bar__wrapper {
+    border: var(--input-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+    display: flex;
+    padding: calc(var(--spacing-xs) - 1px) var(--spacing-xs);
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
+  .wt-search-bar__search-icon {
+    display: flex;
+  }
+
+  .wt-search-bar__reset-icon-btn {
+    .wt-search-bar:not(:focus-within) & {
+      pointer-events: none;
+      opacity: 0;
+    }
+  }
+
+  .wt-search-bar__input {
+    @extend %typo-body-1;
+    @include wt-placeholder;
+
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0;
+    transition: var(--transition);
+    color: var(--form-input-color);
+    border: none;
+    outline: none;
+
+    &:focus {
+      @include wt-placeholder('focus');
+      border-color: var(--form-border--hover-color);
+    }
+
+    .wt-search-bar--outline & {
+      border-color: var(--form-outline-border-color);
+    }
+
+    .wt-search-bar--outline:hover &,
+    .wt-search-bar--outline &:focus {
+      border-color: var(--form-outline-border--hover-color);
+    }
+  }
+
+  /* make icons black */
+  .wt-search-bar:hover ::v-deep .wt-icon__icon,
+  .wt-search-bar:focus-within ::v-deep .wt-icon__icon {
+    fill: var(--icon-color--hover);
+  }
+
+  /* clears the 'X' from Internet Explorer */
+  .wt-search-bar__input::-ms-clear {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  .wt-search-bar__input::-ms-reveal {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  /* clears the 'X' from Chrome */
+  .wt-search-bar__input::-webkit-search-decoration,
+  .wt-search-bar__input::-webkit-search-cancel-button,
+  .wt-search-bar__input::-webkit-search-results-button,
+  .wt-search-bar__input::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  .wt-search-bar__icon-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+}
+</style>

package/src/components/{molecules/wt-select → wt-select}/__tests__/WtSelect.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtSelect from '../wt-select.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 
@@ -15,12 +15,12 @@ describe('WtSelect', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtSelect, {
+    const wrapper = mount(WtSelect, {
       stubs: {
         WtLabel,
         WtIcon: true,
       },
-      propsData: { label },
+      props: { label },
     });
     expect(wrapper.find('.wt-label').text()).toBe(label);
   });

package/src/components/{molecules/wt-select → wt-select}/mixins/__tests__/multiselectMixin.spec.js

@@ -15,18 +15,18 @@ describe('MultiselectMixin', () => {
   it('Correctly computes internal search options', () => {
     const options = ['1', '2'];
     const wrapper = shallowMount(Component, {
-      propsData: { options },
+      props: { options },
     });
-    expect(wrapper.vm.selectOptions).toBe(options);
+    expect(wrapper.vm.selectOptions).toEqual(options);
   });
 
   it('Correctly computes internal search options: search case', async () => {
     const options = ['1', '2'];
     const searchOptions = ['1'];
     const wrapper = shallowMount(Component, {
-      propsData: { options, searchMethod: () => ({ items: searchOptions }) },
+      props: { options, searchMethod: () => ({ items: searchOptions }) },
     });
     await wrapper.vm.$nextTick();
-    expect(wrapper.vm.selectOptions).toBe(searchOptions);
+    expect(wrapper.vm.selectOptions).toEqual(searchOptions);
   });
 });

package/src/components/{molecules/wt-select → wt-select}/mixins/multiselectMixin.js

@@ -1,9 +1,9 @@
 import VueMultiselect from 'vue-multiselect';
 import { ObserveVisibility } from 'vue-observe-visibility';
 import validationMixin
-  from '../../../../mixins/validationMixin/validationMixin';
-import debounce from '../../../../scripts/debounce';
-import isEmpty from '../../../../scripts/isEmpty';
+  from '../../../mixins/validationMixin/validationMixin';
+import debounce from '../../../scripts/debounce';
+import isEmpty from '../../../scripts/isEmpty';
 import labelUsageMixin from '../../wt-label/mixins/labelUsageMixin';
 
 export default {
@@ -63,6 +63,11 @@ export default {
     searchHasNext: true,
   }),
   computed: {
+    selectOptionLabel() {
+      // trackBy === null means that options are not objects but primitives
+      if (this.trackBy === null) return null;
+      return this.optionLabel || this.defaultOptionLabel;
+    },
     isApiMode() {
       return !!this.searchMethod;
     },
@@ -99,7 +104,7 @@ export default {
     getOptionLabel({ option, optionLabel }) {
       if (optionLabel && option[optionLabel]) return option[optionLabel];
       if (option.locale) {
-        if (Array.isArray(option.locale)) return this.$tc(...option.locale);
+        if (Array.isArray(option.locale)) return this.$t(...option.locale);
         return this.$t(option.locale);
       }
       return option[this.defaultOptionLabel] || option;

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

@@ -10,21 +10,25 @@
     class="wt-select"
   >
     <wt-label
+      v-bind="labelProps"
       v-if="hasLabel"
       :disabled="disabled"
       :invalid="invalid"
       class="wt-select__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"
       :allow-empty="allowEmpty"
       :disabled="disabled"
       :internal-search="!searchMethod"
-      :label="trackBy ? optionLabel : null"
+      :label="selectOptionLabel"
       :limit="1"
       :loading="false"
       :multiple="multiple"
@@ -33,7 +37,6 @@
       :track-by="trackBy"
       :model-value="selectValue"
       class="wt-select__select"
-      v-bind="$attrs"
       @close="isOpened = false"
       @open="isOpened = true"
       v-on="listeners"
@@ -51,7 +54,10 @@
 
       <!--      Slot for custom label template for single select-->
       <template v-slot:singleLabel="{ option }">
-        <slot name="singleLabel" v-bind="{ option, optionLabel }">
+        <slot
+          v-bind="{ option, optionLabel }"
+          name="singleLabel"
+        >
           <span class="multiselect__single-label">
             {{ getOptionLabel({ option, optionLabel }) }}
           </span>
@@ -60,7 +66,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"
+        >
           {{ getOptionLabel({ option, optionLabel }) }}
         </slot>
       </template>
@@ -72,7 +81,7 @@
           :disabled="disabled"
           class="multiselect__select"
           icon="arrow-down"
-          @mousedown.native.prevent.stop="toggle"
+          @mousedown.prevent.stop="toggle"
         ></wt-icon-btn>
       </template>
 
@@ -94,7 +103,7 @@
         </div>
       </template>
 
-      <template v-if="showIntersectionObserver" slot="afterList">
+      <template v-if="showIntersectionObserver" v-slot:afterList>
         <div v-observe-visibility="handleAfterListIntersect"></div>
       </template>
     </vue-multiselect>
@@ -125,6 +134,7 @@ export default {
       default: true,
     },
   },
+  emits: ['reset', 'search-change', 'input', 'closed'],
   data: () => ({
     isOpened: false,
   }),
@@ -140,8 +150,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
-@import '../../../css/components/molecules/wt-select/multiselect';
+@import './multiselect.scss';
 
 .wt-select {
   width: 100%;

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

@@ -20,11 +20,11 @@ and swapping height/width of this component in order to have the correct output.
         'wt-slider--disabled': disabled,
         'wt-slider--vertical': vertical,
       }"
-    :style="{ height: verticalHeight }"
+    :style="{ height: vertical && verticalHeight }"
     class="wt-slider"
   >
     <div
-      :style="{ width: verticalHeight }"
+      :style="{ width: !vertical && verticalHeight }"
       class="wt-slider__wrapper"
     >
       <!-- The row above is needed in order to set correct component width when slider is vertical -->
@@ -80,7 +80,7 @@ export default {
   computed: {
     progressStyle() { // To achieve the correct color styling:
       const progressPercent = ((this.value - this.min) / (this.max - this.min)) * 100;
-      return `linear-gradient(to right, var(--accent-color) ${progressPercent}%, var(--secondary-color) 0%)`;
+      return `linear-gradient(to right, var(--primary-color) ${progressPercent}%, var(--secondary-color) 0%)`;
     },
     verticalHeight() { // in order to have correct parent height after slider rotation
       return this.vertical ? `${this.height}px` : '100%';
@@ -94,7 +94,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-slider__wrapper {
   display: flex;
   align-items: center;

package/src/components/{organisms/wt-status-select → wt-status-select}/__tests__/WtStatusSelect.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import WtStatusSelect from '../wt-status-select.vue';
-import WtSelect from '../../../molecules/wt-select/wt-select.vue';
+import WtSelect from '../../wt-select/wt-select.vue';
 
 describe('WtStatusSelect', () => {
   it('renders a component', () => {