@webitel/ui-sdk 0.1.2 → 0.1.3-vite

package/src/components/wt-status-select/wt-status-select.vue

@@ -0,0 +1,134 @@
+<template>
+  <wt-select
+    class="wt-status-select"
+    :value="selectedOption"
+    :options="availableOptions"
+    track-by="value"
+    :clearable="false"
+    :searchable="false"
+    @input="inputHandler"
+  >
+    <template v-slot:singleLabel="{ option }">
+      <wt-indicator
+        :color="option.color"
+        :text="duration"
+      ></wt-indicator>
+    </template>
+    <template v-slot:option="{ option }">
+      <wt-indicator
+        :color="option.color"
+        :text="option.text"
+      ></wt-indicator>
+    </template>
+  </wt-select>
+</template>
+
+<script>
+import AgentStatus from '../../enums/AgentStatus/AgentStatus.enum';
+import convertDuration from '../../scripts/convertDuration';
+import StatusOptions from './_internals/StatusOptions.lookup';
+
+export default {
+  name: 'wt-status-select',
+  props: {
+    status: {
+      type: String,
+      default: AgentStatus.OFFLINE,
+    },
+    statusDuration: {
+      type: [String, Number],
+      default: 0,
+    },
+    options: {
+      type: Array,
+    },
+    // size: {
+    //   type: String,
+    //   default: 'md',
+    //   options: ['sm', 'md'],
+    // },
+  },
+  model: {
+    prop: 'status',
+    event: 'change',
+  },
+  computed: {
+    selectedOption() {
+      return this.statusOptions.find((option) => option.value === this.status);
+    },
+    statusOptions() {
+      return this.options ? this.options
+        : StatusOptions.map((opt) => ({
+          ...opt,
+          text: this.$t(opt.locale),
+        }));
+    },
+    availableOptions() {
+     return this.statusOptions.reduce((options, opt) => {
+       // PAUSE option is always passed
+       if ((this.status === opt.value && opt.value !== AgentStatus.PAUSE)
+       || opt.value === AgentStatus.BREAK_OUT) { // skip breakout option
+         return options;
+       }
+       return [...options, opt];
+     }, []);
+    },
+    duration() {
+      /* The check commented below limits the display of time in the status to 8 characters.
+      Accordingly, if the agent is in the status of 100 hours (100: 00: 00),
+      then this time will be displayed as NaN:NaN:NaN */
+
+      // if (typeof this.statusDuration === 'string' && this.statusDuration.length === 8) return this.statusDuration;
+      if (typeof this.statusDuration === 'string') return this.statusDuration;
+      if (this.statusDuration !== undefined) {
+        return convertDuration(this.statusDuration);
+      }
+      return this.selectedOption.text;
+    },
+  },
+  methods: {
+    inputHandler(value) {
+      this.$emit('change', value.value);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+.wt-status-select.wt-select {
+  box-shadow: var(--elevation-5);
+
+  :deep(.multiselect) {
+    min-height: 0;
+
+    .multiselect__tags {
+      min-height: 0;
+      padding: var(--status-select-padding);
+      border: none;
+    }
+
+    .multiselect__select {
+      top: 0;
+      right: 0;
+    }
+
+    .multiselect__content-wrapper {
+      border: none;
+
+      .multiselect__option {
+        min-height: 0;
+        padding: 0;
+        color: var(--status-select-option-color);
+      }
+
+      .multiselect__option--highlight {
+        background: var(--status-select-bg--hover-color);
+      }
+    }
+  }
+}
+</style>

package/src/components/wt-stepper/__tests__/WtStepper.spec.vue.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils';
+import WtStepper from '../wt-stepper.vue';
+
+describe('WtStepper', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtStepper, {
+      props: {
+        steps: [
+          {
+            name: 'step 1',
+            description: 'description',
+          },
+        ],
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="wt-stepper">
+    <div class="wt-stepper-header">
+      <div
+        class="wt-stepper-steps"
+      >
+        <div
+          class="wt-stepper-steps__wrapper"
+          v-for="({name, completed}, idx) in stepWithCompleted"
+        >
+          <div
+            v-if="idx !== 0"
+            class="wt-stepper-steps__divider"
+            :class="{ 'wt-stepper-steps__divider--completed': completed }"
+          ></div>
+          <wt-chip
+            class="wt-stepper-steps__item"
+            :color="!completed && 'secondary'"
+          >{{ name }}
+          </wt-chip>
+        </div>
+      </div>
+    </div>
+
+    <slot name="description">
+      <p class="wt-stepper-description">{{ description }}</p>
+    </slot>
+
+    <slot name="main"></slot>
+
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  steps: {
+    type: Object,
+  },
+  activeStep: {
+    type: Number,
+    default: 1,
+  },
+});
+
+const description = computed(() => props.steps[props.activeStep - 1].description);
+
+const stepWithCompleted = computed(() => props.steps.map((item, idx) => ({
+    ...item,
+    completed: props.activeStep > idx,
+  })));
+</script>
+
+<style lang="scss" scoped>
+.wt-stepper {
+  width: 100%;
+}
+
+.wt-stepper-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+.wt-stepper-steps {
+  display: flex;
+  align-items: center;
+
+  &__wrapper {
+    display: contents;
+  }
+
+  &__divider {
+    flex: 1 1 auto;
+    height: 1px;
+    background: var(--secondary-color);
+
+    &--completed {
+      background-color: var(--chip-bg-color);
+    }
+  }
+}
+
+.wt-stepper-description {
+  margin-bottom: var(--spacing-lg);
+  text-align: center;
+}
+</style>

package/src/components/wt-switcher/__tests__/WtSwitcher.spec.js

@@ -0,0 +1,31 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import WtSwitcher from '../wt-switcher.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+
+describe('WtSwitcher', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSwitcher, {
+      stubs: { WtLabel },
+    });
+    expect(wrapper.classes('wt-switcher')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = mount(WtSwitcher, {
+      stubs: { WtLabel },
+      props: { label },
+    });
+    expect(wrapper.find('.wt-switcher__label').text()).toBe(label);
+  });
+
+  it('toggles passed value at click', () => {
+    const value = true;
+    const wrapper = mount(WtSwitcher, {
+      stubs: { WtLabel },
+      props: { value },
+    });
+    wrapper.find('.wt-switcher__input').trigger('change');
+    expect(wrapper.emitted().change[0]).toEqual([!value]);
+  });
+});

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

@@ -0,0 +1,17 @@
+
+:root {
+  --switcher-icon-margin: var(--spacing-xs);
+  --switcher-width: 40px;
+  --switcher-height: 22px;
+  --switcher-cicle-size: 14px;
+  --switcher-cicle-margin: 4px;
+  --switcher-cicle-translateX: 17px;
+  --switcher-bg-color--off: hsla(var(--_icon-color), var(--_opacity--default));
+  --switcher-bg-color--on: hsla(var(--_accent-color), var(--_opacity--default));
+  --switcher-bg-color--off--hover: hsla(var(--_icon-color), var(--_opacity--hover));
+  --switcher-bg-color--on--hover: hsla(var(--_accent-color), var(--_opacity--hover));
+  --switcher-bg-color--off--disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
+  --switcher-bg-color--on--disabled: hsla(var(--_accent-color), var(--_opacity--disabled));
+  --switcher-circle-bg-color: var(--main-color);
+  --switcher-border-radius: 24px;
+}

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

@@ -0,0 +1,191 @@
+<template>
+  <div
+    class="wt-switcher"
+    :class="{
+      'wt-switcher--off': !value,
+      'wt-switcher--on': value,
+      'wt-switcher--disabled': disabled,
+    }"
+  >
+    <wt-label
+      v-bind="labelProps"
+      class="wt-switcher__wrapper"
+      :class="{'wt-switcher__wrapper--label-left': labelLeft}"
+    >
+      <input
+        class="wt-switcher__input"
+        type="checkbox"
+        :checked="value"
+        :disabled="disabled"
+        @change="inputHandler"
+      >
+      <span class="wt-switcher__checkmark"></span>
+      <!-- @slot Custom input label -->
+      <slot
+        v-bind="{ label, value, disabled }"
+        name="label"
+      >
+        <div v-if="label" class="wt-switcher__label">{{ label }}</div>
+      </slot>
+    </wt-label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-switcher',
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelLeft: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  methods: {
+    inputHandler() {
+      this.$emit('change', !this.value);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-switcher {
+  @include width-fit-content;
+  position: relative;
+  box-sizing: border-box;
+
+  .wt-label {
+    cursor: pointer;
+  }
+}
+
+.wt-switcher__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+
+  &.wt-switcher__wrapper--label-left {
+    flex-direction: row-reverse;
+  }
+}
+
+.wt-switcher__label {
+  margin-left: var(--switcher-icon-margin);
+  transition: var(--transition);
+
+  .wt-switcher__wrapper--label-left & {
+    margin-left: 0;
+    margin-right: var(--switcher-icon-margin);
+  }
+
+  .wt-switcher:hover & {
+    color: var(--form-label--hover-color);
+  }
+}
+
+.wt-switcher__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.wt-switcher__checkmark {
+  position: relative;
+  display: block;
+  flex: 0 0 var(--switcher-width);
+  width: var(--switcher-width);
+  height: var(--switcher-height);
+  border-radius: var(--switcher-border-radius);
+  transition: var(--transition);
+
+  &:before {
+    content: '';
+    position: absolute;
+    bottom: var(--switcher-cicle-margin);
+    left: var(--switcher-cicle-margin);
+    height: var(--switcher-cicle-size);
+    width: var(--switcher-cicle-size);
+    background: var(--switcher-circle-bg-color);
+    border-radius: 50%;
+    transition: var(--transition);
+  }
+}
+
+.wt-switcher--off {
+  .wt-switcher__checkmark {
+    background: var(--switcher-bg-color--off);
+  }
+
+  &:hover {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--off--hover);
+    }
+  }
+
+  &.wt-switcher--disabled {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--off--disabled);
+    }
+  }
+}
+
+.wt-switcher--on {
+  .wt-switcher__checkmark {
+    background: var(--switcher-bg-color--on);
+
+    /* Show the indicator (dot/circle) when checked */
+    &:before {
+      transform: translateX(var(--switcher-cicle-translateX));
+    }
+  }
+
+  &:hover {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--on--hover);
+    }
+  }
+
+  &.wt-switcher--disabled {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--on--disabled);
+    }
+  }
+}
+
+.wt-switcher--disabled {
+  pointer-events: none;
+
+  .wt-switcher__label {
+    color: var(--form-label--disabled-color);
+  }
+}
+</style>

package/src/components/wt-table/__tests__/WtTable.spec.js

@@ -0,0 +1,134 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import WtTable from '../wt-table.vue';
+import WtCheckbox from '../../wt-checkbox/wt-checkbox.vue';
+
+const headers = [
+  {
+    text: 'heading 1',
+    value: 'h1',
+    sort: null,
+  },
+  {
+    text: 'heading2',
+    value: 'h2',
+  },
+  {
+    text: 'heading 3',
+    value: 'h3',
+  },
+];
+const data = [
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  },
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  },
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  },
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  }];
+
+describe('WtTable', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTable);
+    expect(wrapper.classes('wt-table')).toBe(true);
+  });
+
+  it('renders table data rows', () => {
+    const wrapper = shallowMount(WtTable, {
+      props: {
+        headers,
+        data,
+      },
+    });
+    expect(wrapper.findAll('.wt-table__tr__body').length).toBe(data.length);
+  });
+
+  it('renders table headers', () => {
+    const wrapper = shallowMount(WtTable, {
+      props: {
+        headers,
+        data,
+        selectable: false,
+        gridActions: false,
+      },
+    });
+    expect(wrapper.findAll('.wt-table__tr__head th').length).toBe(headers.length);
+  });
+
+  it('do not renders table footer by default', () => {
+    const wrapper = shallowMount(WtTable, {
+      props: {
+        headers,
+        data,
+      },
+    });
+    expect(wrapper.find('.wt-table__foot').exists()).toBe(false);
+  });
+
+  it('renders table footer if footer slot is passed', () => {
+    const wrapper = shallowMount(WtTable, {
+      props: {
+        headers,
+        data,
+      },
+      slots: {
+        'data-footer': '',
+      },
+    });
+    expect(wrapper.find('.wt-table__foot').isVisible()).toBe(true);
+  });
+
+  it('emits sort event at header click when sortable is true', () => {
+    const wrapper = shallowMount(WtTable, {
+      props: {
+        headers,
+        data,
+        sortable: true,
+      },
+    });
+    wrapper.find('.wt-table__th--sortable').trigger('click');
+    expect(wrapper.emitted().sort.pop()).toBeTruthy();
+  });
+
+  it('draws sort arrow, if a column is sorted', () => {
+    headers[0].sort = 'asc';
+    const wrapper = shallowMount(WtTable, {
+      props: {
+        headers,
+        data,
+        sortable: true,
+      },
+    });
+    expect(wrapper
+      .find('.wt-table__th--sortable .wt-table__th__sort-arrow')
+      .exists()).toBe(true);
+  });
+
+  it('selects all rows at header checkbox click', async () => {
+    const wrapper = mount(WtTable, {
+      props: {
+        headers,
+        data,
+        selectable: true,
+      },
+    });
+    wrapper.findComponent(WtCheckbox).vm.$emit('change');
+    expect(data.every((item) => item._isSelected)).toBe(true);
+  });
+});

package/src/components/wt-table/_internals/getSortOrder.js

@@ -0,0 +1,12 @@
+const getNextSortOrder = (sort) => {
+  switch (sort) {
+    case 'asc':
+      return 'desc';
+    case 'desc':
+      return null;
+    default:
+      return 'asc';
+  }
+};
+
+export default getNextSortOrder;

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

@@ -0,0 +1,16 @@
+
+:root {
+  --table-col-min-width: 140px;
+
+  --table-head-sort-arrow-margin: var(--spacing-xs);
+  --table-head-border: 1px solid;
+  --table-head-border-color: var(--secondary-color);
+
+  --table-min-height: 24px; // 24px icon size or body-1 lh
+  --table-column-gap: var(--spacing-xs);
+  --table-row-padding: var(--spacing-xs);
+
+  --table-primary-color: var(--main-color);
+  --table--hover-color: var(--accent-secondary-color);
+  --table-secondary-color: var(--secondary-color-50); // zebra
+}