@webitel/ui-sdk 0.1.2 → 0.1.3-vite

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/wt-search-bar/__tests__/WtSearchBar.spec.js

@@ -0,0 +1,44 @@
+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', () => {
+    const wrapper = shallowMount(WtSearchBar, {
+      stubs: {
+        WtIcon: true,
+        WtIconBtn: true,
+      },
+    });
+    expect(wrapper.classes('wt-search-bar')).toBe(true);
+  });
+
+  it('debounces search event when debounce prop is true', async () => {
+    const props = {
+      value: '',
+      debounce: true,
+      debounceDelay: 100,
+    };
+    const wrapper = shallowMount(WtSearchBar, {
+      stubs: {
+        WtIcon: true,
+        WtIconBtn: true,
+      },
+      props,
+    });
+    props.value = 'val';
+    wrapper.setProps(props);
+    expect(wrapper.emitted().search).toBeFalsy();
+    await setTimeout(() => {
+      expect(wrapper.emitted().search[0].length).toBe(1);
+    }, 1000);
+  });
+});

package/src/components/wt-search-bar/_variables.scss

@@ -0,0 +1,8 @@
+
+:root {
+  --search-bar-padding:
+    var(--input-padding)
+    calc(var(--input-padding) + var(--icon-sm-size) + var(--spacing-xs))
+    var(--input-padding)
+    calc(var(--input-padding) + var(--icon-md-size) + var(--spacing-xs));
+}

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/wt-select/__tests__/WtSelect.spec.js

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

package/src/components/wt-select/_multiselect.scss

@@ -0,0 +1,198 @@
+@import '~vue-multiselect/dist/vue3-multiselect.css';
+
+.multiselect ::v-deep {
+  cursor: pointer;
+  position: relative;
+
+  .multiselect__select {
+    position: absolute;
+    top: var(--select-icon-top-pos);
+    right: var(--select-caret-right-pos);
+    padding: 0; // reset default
+    transition: var(--transition);
+    width: fit-content; // reset default
+    height: fit-content; // reset default
+
+    &:before {
+      display: none; // reset default
+    }
+  }
+
+  .multiselect__limit {
+    position: absolute;
+    top: var(--select-chip-top-pos);
+  }
+
+  .multiselect__clear {
+    position: absolute;
+    z-index: 1;
+    top: var(--select-icon-top-pos);
+  }
+
+
+  .multiselect__tags {
+    padding: calc(var(--spacing-xs) - 1px); // borders
+    color: var(--form-input-color);
+    border: var(--select-tags-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+  }
+
+
+  .multiselect__input,
+  .multiselect__single,
+  .multiselect__placeholder {
+    @extend %typo-body-1;
+    @include wt-placeholder;
+    background: transparent;
+    padding: 0; // reset default
+    margin: 0; // reset default
+  }
+
+  .multiselect__input:focus {
+    @include wt-placeholder('focus');
+  }
+
+  .multiselect__custom-tag,
+  .multiselect__single-label {
+    color: var(--form-input-color);
+  }
+
+  .multiselect__placeholder {
+    @extend %wt-placeholder;
+    overflow: hidden;
+    max-width: 100%;
+    display: block;
+
+    // text overflow 3 dots
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .multiselect__content-wrapper {
+    @extend %wt-distant-scrollbar;
+    transition: var(--transition);
+    border: var(--select-tags-border);
+    border-color: var(--form-border-color);
+    border-radius: var(--border-radius);
+  }
+
+  .multiselect__option {
+    @extend %typo-body-1;
+    padding: var(--select-options-padding);
+
+    &:after {
+      display: none;
+    }
+
+
+    &--highlight {
+      color: var(--form-input-color);
+      //background: var(--select-option--hover-color);
+      background: none;
+    }
+
+
+    &--selected {
+      font-weight: normal;
+      background: var(--select-option--active-color)
+    }
+  }
+}
+
+.multiselect--active ::v-deep {
+  .multiselect__select .wt-icon__icon {
+    fill: var(--icon-color--hover);
+  }
+
+  .multiselect__tags {
+    border-color: var(--form-border--active-color);
+
+    .multiselect__placeholder {
+      @extend %wt-placeholder--focus;
+    }
+  }
+
+}
+
+.wt-select:hover,
+.wt-tags-input:hover {
+  .multiselect ::v-deep {
+    .multiselect__tags {
+      border-color: var(--form-border--hover-color);
+    }
+
+    .multiselect__select,
+    .multiselect__clear {
+      .wt-icon__icon {
+        fill: var(--icon-color--hover);
+      }
+    }
+  }
+}
+
+.wt-select--loading,
+.wt-tags-input--loading {
+  ::v-deep {
+    .multiselect__content-wrapper {
+      overflow-y: hidden;
+    }
+
+    .multiselect__loading-wrapper {
+      position: sticky;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 300px; // max dropdown panel height
+      backdrop-filter: blur(4px);
+    }
+  }
+}
+
+
+.wt-select.wt-select--invalid,
+.wt-tags-input.wt-tags-input--invalid {
+  .multiselect ::v-deep {
+    .multiselect__tags {
+      border-color: var(--false-color);
+      outline: none; // prevent outline overlapping false color
+    }
+  }
+}
+
+.wt-select--disabled,
+.wt-tags-input--disabled {
+  pointer-events: none;
+
+  .multiselect--disabled {
+    opacity: 1;
+    background: none;
+  }
+
+  .multiselect__select {
+    background: transparent; // reset default
+  }
+
+  .multiselect__arrow-caret ::v-deep .wt-icon__icon,
+  .multiselect__clear ::v-deep .wt-icon__icon {
+    fill: var(--icon-color-disabled);
+  }
+
+  .multiselect {
+    ::v-deep {
+      .multiselect__tags {
+        border-color: var(--form-border--disabled-color);
+        background: var(--form-border--disabled-color);
+
+        .multiselect__placeholder {
+          @extend %wt-placeholder--disabled;
+          //color: var(--form-placeholder--disabled-color);
+        }
+      }
+    }
+  }
+}

package/src/components/wt-select/_variables.scss

@@ -0,0 +1,14 @@
+
+:root {
+  --select-icon-top-pos: var(--spacing-xs);
+  --select-chip-top-pos: var(--spacing-xs);
+
+  --select-caret-right-pos: var(--input-padding);
+
+  --select-tags-border: var(--input-border);  // right pos = 10px spacing + clear icon size + clear offset
+
+  --select-options-padding: var(--input-padding);
+
+  --select-option--hover-color: var(--accent-secondary-color);
+  --select-option--active-color: var(--accent-secondary-color);
+}

package/src/components/wt-select/mixins/__tests__/multiselectMixin.spec.js

@@ -0,0 +1,32 @@
+import { shallowMount } from '@vue/test-utils';
+import MultiselectMixin from '../multiselectMixin';
+
+const Component = {
+  mixins: [MultiselectMixin],
+  render() {},
+};
+
+describe('MultiselectMixin', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(Component);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('Correctly computes internal search options', () => {
+    const options = ['1', '2'];
+    const wrapper = shallowMount(Component, {
+      props: { 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, {
+      props: { options, searchMethod: () => ({ items: searchOptions }) },
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.selectOptions).toEqual(searchOptions);
+  });
+});