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

package/src/components/{organisms/wt-status-select → wt-status-select}/_internals/StatusOptions.lookup.js

@@ -1,4 +1,4 @@
-import AgentStatus from '../../../../enums/AgentStatus/AgentStatus.enum';
+import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum';
 
 export default [
   {

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

@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum';
-import convertDuration from '../../../scripts/convertDuration';
+import AgentStatus from '../../enums/AgentStatus/AgentStatus.enum';
+import convertDuration from '../../scripts/convertDuration';
 import StatusOptions from './_internals/StatusOptions.lookup';
 
 export default {
@@ -94,36 +94,40 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
-.wt-status-select.wt-select ::v-deep {
+.wt-status-select.wt-select {
   box-shadow: var(--elevation-5);
 
-  .multiselect {
+  :deep(.multiselect) {
     min-height: 0;
-  }
 
-  .multiselect__tags {
-    min-height: 0;
-    padding: var(--status-select-padding);
-    border: none;
-  }
+    .multiselect__tags {
+      min-height: 0;
+      padding: var(--status-select-padding);
+      border: none;
+    }
 
-  .multiselect__select {
-    top: 0;
-    right: 0;
-  }
+    .multiselect__select {
+      top: 0;
+      right: 0;
+    }
 
-  .multiselect__content-wrapper {
-    border: none;
+    .multiselect__content-wrapper {
+      border: none;
 
-    .multiselect__option {
-      min-height: 0;
-      padding: 0;
-      color: var(--status-select-option-color);
-    }
+      .multiselect__option {
+        min-height: 0;
+        padding: 0;
+        color: var(--status-select-option-color);
+      }
 
-    .multiselect__option--highlight {
-      background: var(--status-select-bg--hover-color);
+      .multiselect__option--highlight {
+        background: var(--status-select-bg--hover-color);
+      }
     }
   }
 }

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/{molecules/wt-switcher → wt-switcher}/__tests__/WtSwitcher.spec.js

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

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/{organisms/wt-table → wt-table}/__tests__/WtTable.spec.js

@@ -1,6 +1,6 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtTable from '../wt-table.vue';
-import WtCheckbox from '../../../molecules/wt-checkbox/wt-checkbox.vue';
+import WtCheckbox from '../../wt-checkbox/wt-checkbox.vue';
 
 const headers = [
   {
@@ -51,7 +51,7 @@ describe('WtTable', () => {
 
   it('renders table data rows', () => {
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
       },
@@ -61,7 +61,7 @@ describe('WtTable', () => {
 
   it('renders table headers', () => {
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
         selectable: false,
@@ -73,7 +73,7 @@ describe('WtTable', () => {
 
   it('do not renders table footer by default', () => {
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
       },
@@ -83,11 +83,11 @@ describe('WtTable', () => {
 
   it('renders table footer if footer slot is passed', () => {
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
       },
-      scopedSlots: {
+      slots: {
         'data-footer': '',
       },
     });
@@ -96,7 +96,7 @@ describe('WtTable', () => {
 
   it('emits sort event at header click when sortable is true', () => {
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
         sortable: true,
@@ -109,7 +109,7 @@ describe('WtTable', () => {
   it('draws sort arrow, if a column is sorted', () => {
     headers[0].sort = 'asc';
     const wrapper = shallowMount(WtTable, {
-      propsData: {
+      props: {
         headers,
         data,
         sortable: true,
@@ -121,8 +121,8 @@ describe('WtTable', () => {
   });
 
   it('selects all rows at header checkbox click', async () => {
-    const wrapper = shallowMount(WtTable, {
-      propsData: {
+    const wrapper = mount(WtTable, {
+      props: {
         headers,
         data,
         selectable: true,

package/src/components/{organisms/wt-table → wt-table}/wt-table.vue

@@ -49,7 +49,8 @@
       >
         <td v-if="selectable" class="wt-table__td wt-table__td--checkbox">
           <wt-checkbox
-            v-model="row._isSelected"
+            :selected="row._isSelected"
+            @change="row._isSelected = !row._isSelected"
           ></wt-checkbox>
         </td>
 
@@ -123,7 +124,16 @@ export default {
 
     dataHeaders() {
       return this.headers
-                 .filter((header) => header.show === undefined || header.show);
+      .filter((header) => header.show === undefined || header.show)
+      .map((header) => {
+        if (!header.text && header.locale) {
+          return {
+            ...header,
+            text: typeof header.locale === 'string' ? this.$t(header.locale) : this.$t(...header.locale),
+          };
+        }
+        return header;
+      });
     },
 
     columnsStyle() {
@@ -140,7 +150,7 @@ export default {
     },
 
     isTableFooter() {
-      return Object.keys(this.$scopedSlots).some((slotName) => slotName.includes('-footer'));
+      return Object.keys(this.$slots).some((slotName) => slotName.includes('-footer'));
     },
   },
 
@@ -166,7 +176,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-table {
   overflow: auto;
 }
@@ -179,6 +194,7 @@ export default {
 .wt-table__head {
   display: block;
   box-sizing: border-box;
+  background: var(--table-primary-color);
   border: var(--table-head-border);
   border-color: var(--table-head-border-color);
   border-radius: var(--border-radius);
@@ -217,6 +233,7 @@ export default {
     display: flex;
     align-items: flex-start;
     justify-content: flex-end;
+    gap: var(--spacing-xs);
   }
 }
 

package/src/components/{organisms/wt-table-actions → wt-table-actions}/wt-table-actions.vue

@@ -95,7 +95,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-table-actions {
   display: flex;
   align-items: center;

package/src/components/{organisms/wt-table-column-select → wt-table-column-select}/__tests__/WtTableColumnSelect.spec.js

@@ -4,7 +4,7 @@ import WtTableColumnSelect from '../wt-table-column-select.vue';
 describe('WtTableColumnSelect', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtTableColumnSelect, {
-      propsData: {
+      props: {
         headers: [],
       },
     });
@@ -12,7 +12,7 @@ describe('WtTableColumnSelect', () => {
   });
   it('column select popup is invisible by default', () => {
     const wrapper = shallowMount(WtTableColumnSelect, {
-      propsData: {
+      props: {
         headers: [],
       },
     });
@@ -20,7 +20,7 @@ describe('WtTableColumnSelect', () => {
   });
   it('column select popup is opening by icon-btn click', async () => {
     const wrapper = mount(WtTableColumnSelect, {
-      propsData: {
+      props: {
         headers: [],
       },
     });