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

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

@@ -8,18 +8,22 @@
     class="wt-input"
   >
     <wt-label
+      v-bind="labelProps"
       v-if="hasLabel"
       :disabled="disabled"
       :for="name"
       :invalid="invalid"
       :outline="outline"
-      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>
     <div class="wt-input__wrapper">
       <input
+        v-bind="$attrs"
         :id="name"
         ref="wt-input"
         :class="{
@@ -30,9 +34,10 @@
         :min="numberMin"
         :placeholder="placeholder || label"
         :type="inputType"
-        :value="value"
+        :value="inputValue"
         class="wt-input__input"
-        v-on="listeners"
+        @input="inputHandler"
+        @keyup="$emit('keyup', $event)"
       >
       <div
         ref="after-wrapper"
@@ -42,17 +47,17 @@
           name="after-input"
         ></slot>
         <slot
-          v-if="isPassword"
-          name="show-password"
           v-bind="{
           isPasswordVisible,
           switchVisibilityPassword,
         }"
+          v-if="isPassword"
+          name="show-password"
         >
           <wt-icon-btn
             :icon="showPasswordIcon"
             class="wt-input__password-button"
-            @click.native="switchVisibilityPassword"
+            @click="switchVisibilityPassword"
           ></wt-icon-btn>
         </slot>
       </div>
@@ -66,18 +71,24 @@
 </template>
 
 <script>
-import validationMixin from '../../../mixins/validationMixin/validationMixin';
+import validationMixin from '../../mixins/validationMixin/validationMixin';
 
+/*
+* IMPORTANT: WT-INPUT SHOULD SUPPORT VUE 3 AND VUE 2 V-MODEL INTERFACES SO THAT THERE'S
+* TWO PROPS: VALUE AND MODELVALUE, AND 2 EVENTS: @UPDATE:MODELVALUE AND @INPUT
+* */
 export default {
   name: 'wt-input',
   mixins: [validationMixin],
   props: {
+    value: {
+      type: [String, Number],
+    },
     /**
-     * Current input value (`v-model`)
+     * Current input modelValue (`v-model`)
      */
-    value: {
+    modelValue: {
       type: [String, Number],
-      default: '',
     },
     /**
      * Form input label
@@ -154,8 +165,13 @@ export default {
       type: Object,
       description: 'Object with props, passed down to wt-label as props',
     },
-  },
 
+    preventTrim: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue', 'input', 'keyup'],
   data: () => ({
     inputType: '',
     isPasswordVisible: false,
@@ -184,6 +200,10 @@ export default {
   },
 
   computed: {
+    inputValue() {
+      return this.value !== undefined ? this.value : this.modelValue;
+    },
+
     hasLabel() {
       return !!(this.label || this.$slots.label);
     },
@@ -199,17 +219,12 @@ export default {
     showPasswordIcon() {
       return this.isPasswordVisible ? 'eye--closed' : 'eye--opened';
     },
-
-    listeners() {
-      return {
-        ...this.$listeners,
-        input: this.inputHandler,
-      };
-    },
   },
   methods: {
     inputHandler(event) {
-      this.$emit('input', event.target.value.trim());
+      const value = this.preventTrim ? event.target.value : event.target.value.trim();
+      this.$emit('update:modelValue', value);
+      this.$emit('input', value);
     },
 
     switchVisibilityPassword() {
@@ -233,7 +248,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-input {
   cursor: text;
 

package/src/{css/components/atoms → components}/wt-input-info/_variables.scss

@@ -1,7 +1,7 @@
 
 :root {
-  --input-info-min-height: 12px;
+  --input-info-min-height: var(--spacing-sm);
   --input-info-margin: 5px;
   --input-info-color: var(--form-label-color);
   --input-info--invalid-color: var(--false-color);
-}
+}

package/src/components/wt-input-info/wt-input-info.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="wt-input-info"
+    :class="{
+      'wt-input-info--invalid': invalid,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-input-info',
+  props: {
+    invalid: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-input-info {
+  @extend %typo-caption;
+  margin-top: var(--input-info-margin);
+  color: var(--input-info-color);
+  min-height: var(--input-info-min-height);
+
+  &--invalid {
+    color: var(--input-info--invalid-color);
+  }
+}
+</style>

package/src/components/wt-item-link/__tests__/WtItemLink.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtItemLink from '../wt-item-link.vue';
+
+describe('WtItemLink', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtItemLink);
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/components/wt-item-link/wt-item-link.vue

@@ -0,0 +1,57 @@
+<template>
+  <router-link
+    :target="target"
+    :to="to"
+    :class="{ 'wt-item-link--disabled': disabled }"
+    class="wt-item-link"
+  >
+    <slot></slot>
+  </router-link>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  link: {
+    type: [String, Object],
+    default: '',
+  },
+  target: {
+    type: String,
+    default: '_self',
+  },
+  routeName: {
+    type: String,
+  },
+  id: {
+    type: [String, Number],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const to = computed(() => props.link || {
+    name: `${props.routeName}-edit`,
+    params: { id: props.id },
+  });
+</script>
+
+<style lang="scss" scoped>
+.wt-item-link {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: var(--transition);
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &--disabled {
+    pointer-events: none;
+  }
+}
+</style>

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

@@ -43,7 +43,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-label {
   @extend %typo-body-1;
 

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

@@ -28,14 +28,19 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-load-bar {
   position: relative;
   box-sizing: border-box;
   width: 100%;
   padding: var(--load-bar-padding);
   line-height: 0;
-  border: 1px solid var(--accent-color);
+  border: 1px solid var(--primary-color);
   border-radius: var(--border-radius);
 }
 
@@ -44,7 +49,7 @@ export default {
   height: var(--load-bar-height);
   transition: var(--transition);
   border-radius: var(--load-bar-border-radius);
-  background: var(--accent-color);
+  background: var(--primary-color);
   will-change: width;
 }
 </style>

package/src/{css/components/atoms → components}/wt-loader/_variables.scss

@@ -3,6 +3,6 @@
   --loader-size: 44px;
   --loader-dot-size: 6px;
   --loader-path-color: var(--contrast-color);
-  --loader-dot-color: var(--accent-color);
+  --loader-dot-color: var(--primary-color);
   --loader-animation-duration: 3s;
-}
+}

package/src/components/{atoms/wt-loader → wt-loader}/wt-loader.vue

@@ -7,26 +7,31 @@
 import WtLoaderSm from './_internals/wt-loader--sm.vue';
 import WtLoaderMd from './_internals/wt-loader--md.vue';
 
-  export default {
-    name: 'wt-loader',
-    components: {
-      WtLoaderSm,
-      WtLoaderMd,
+export default {
+  name: 'wt-loader',
+  components: {
+    WtLoaderSm,
+    WtLoaderMd,
+  },
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      description: '["sm", "md"]',
     },
-    props: {
-      size: {
-        type: String,
-        default: 'md',
-        description: '["sm", "md"]',
-      },
-      color: {
-        type: String,
-        default: 'contrast',
-        description: '["main", "contrast"]',
-      },
+    color: {
+      type: String,
+      default: 'contrast',
+      description: '["main", "contrast"]',
     },
-  };
+  },
+};
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 </style>

package/src/components/{organisms/wt-navigation-bar → wt-navigation-bar}/__tests__/WtNavigationBar.spec.js

@@ -1,5 +1,5 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount, mount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import WtNavigationBar from '../wt-navigation-bar.vue';
 
 const nav = [
@@ -13,9 +13,10 @@ const nav = [
   },
 ];
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
 
 describe('WtNavigationBar', () => {
   it('renders a component', () => {
@@ -25,19 +26,21 @@ describe('WtNavigationBar', () => {
 
   it('renders navigation links', () => {
     const wrapper = shallowMount(WtNavigationBar, {
-      localVue,
-      router,
-      propsData: { nav },
+      global: {
+        plugins: [router],
+      },
+      props: { nav },
     });
     const navLinksLen = nav.filter((nav) => !nav.subNav).length;
     expect(wrapper.findAll('.wt-navigation-bar__nav-item-link').length).toBe(navLinksLen);
   });
 
   it('renders navigation expansions with subNav inside it', async () => {
-    const wrapper = shallowMount(WtNavigationBar, {
-      localVue,
-      router,
-      propsData: { nav },
+    const wrapper = mount(WtNavigationBar, {
+      global: {
+        plugins: [router],
+      },
+      props: { nav },
     });
     wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
     await wrapper.vm.$nextTick();
@@ -51,14 +54,15 @@ describe('WtNavigationBar', () => {
   });
 
   it('correctly computes subNav nested routes', async () => {
-    const wrapper = shallowMount(WtNavigationBar, {
-      localVue,
-      router,
-      propsData: { nav },
+    const wrapper = mount(WtNavigationBar, {
+      global: {
+        plugins: [router],
+      },
+      props: { nav },
     });
-    wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
+    await wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('.wt-navigation-bar__nav-item-link--subnav').attributes('to'))
+    expect(wrapper.findComponent('.wt-navigation-bar__nav-item-link--subnav').attributes('href'))
       .toBe('/2/3');
   });
 });

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

@@ -14,31 +14,37 @@
             v-if="currentApp === 'admin'"
             alt="admin"
             class="wt-navigation-bar__app-pic"
-            src="../../../assets/components/organisms/wt-navigation-bar/logo-admin-app.svg"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-admin-app.svg"
           >
           <img
             v-if="currentApp === 'agent'"
             alt="agent"
             class="wt-navigation-bar__app-pic"
-            src="../../../assets/components/organisms/wt-navigation-bar/logo-agent-app.svg"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-agent-app.svg"
           >
           <img
             v-if="currentApp === 'audit'"
             alt="audit"
             class="wt-navigation-bar__app-pic"
-            src="../../../assets/components/organisms/wt-navigation-bar/logo-audit-app.svg"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-audit-app.svg"
           >
           <img
             v-if="currentApp === 'history'"
             alt="history"
             class="wt-navigation-bar__app-pic"
-            src="../../../assets/components/organisms/wt-navigation-bar/logo-history-app.svg"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-history-app.svg"
           >
           <img
             v-if="currentApp === 'supervisor'"
             alt="supervisor"
             class="wt-navigation-bar__app-pic"
-            src="../../../assets/components/organisms/wt-navigation-bar/logo-supervisor-app.svg"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-supervisor-app.svg"
+          >
+          <img
+            v-if="currentApp === 'crm'"
+            alt="crm"
+            class="wt-navigation-bar__app-pic"
+            src="../../assets/components/organisms/wt-navigation-bar/logo-crm-app.svg"
           >
           <wt-icon-btn
             class="wt-navigation-bar__nav-close"
@@ -59,7 +65,7 @@
                   :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === navItem.value}"
                   :to="navItem.route"
                   class="wt-navigation-bar__nav-item-link"
-                  @click.native="close"
+                  @click="close"
                 > {{ navItem.name || navItem.value }}
                 </router-link>
               </div>
@@ -93,7 +99,7 @@
                         :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === subNavItem.value}"
                         :to="nestedRoute(subNavItem, navItem)"
                         class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
-                        @click.native="close"
+                        @click="close"
                       >{{ subNavItem.name || subNavItem.value }}
                       </router-link>
                     </div>
@@ -109,7 +115,7 @@
 </template>
 
 <script>
-import ExpandTransition from '../../transitions/wt-expand-transition.vue';
+import ExpandTransition from '../transitions/wt-expand-transition.vue';
 
 export default {
   name: 'wt-navigation-bar',
@@ -133,14 +139,14 @@ export default {
     currentNav() {
       const path = this.$route.fullPath;
       const currentNav = this.nav
-                             .reduce((flatNav, currentNavItem) => {
-                               if (currentNavItem.subNav) return flatNav.concat(currentNavItem.subNav);
-                               return [...flatNav, currentNavItem];
-                             }, [])
-                             .find((navItem) => path.includes(navItem.route));
+      .reduce((flatNav, currentNavItem) => {
+        if (currentNavItem.subNav) return flatNav.concat(currentNavItem.subNav);
+        return [...flatNav, currentNavItem];
+      }, [])
+      .find((navItem) => path.includes(navItem.route));
       const currentExpansion = this.nav
-                                   .filter((nav) => nav.subNav)
-                                   .find((nav) => nav.subNav.indexOf(currentNav) !== -1);
+      .filter((nav) => nav.subNav)
+      .find((nav) => nav.subNav.indexOf(currentNav) !== -1);
       return {
         nav: currentNav?.value,
         expansion: currentExpansion?.value,
@@ -164,7 +170,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
+
 .wt-navigation-bar__menu-btn {
   display: block;
   width: fit-content;
@@ -242,7 +253,7 @@ export default {
     transition: var(--transition);
     opacity: 0;
     border-radius: var(--border-radius);
-    background: var(--accent-color);
+    background: var(--primary-color);
   }
 
   .wt-navigation-bar__expansion-arrow {

package/src/components/{molecules/wt-notification → wt-notification}/__tests__/WtNotification.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import WtNotification from '../wt-notification.vue';
-import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
+import WtIcon from '../../wt-icon/wt-icon.vue';
 
 describe('WtNotification', () => {
   it('renders a component', () => {

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

@@ -0,0 +1,86 @@
+<template>
+  <article
+    class="wt-notification"
+    @click="$emit('close')"
+  >
+    <wt-icon
+      class="wt-notification__icon"
+      :icon="notificationIcon"
+      :color="notificationIconColor"
+    ></wt-icon>
+
+    <p class="wt-notification__text">
+      <slot></slot>
+    </p>
+  </article>
+</template>
+
+<script>
+
+export default {
+  name: 'wt-notification',
+  props: {
+    type: {
+      type: String,
+      default: 'info',
+    },
+  },
+  computed: {
+    notificationIcon() {
+      switch (this.type) {
+        case 'info':
+          return 'done';
+        case 'error':
+          return 'attention';
+        default:
+          return '';
+      }
+    },
+    notificationIconColor() {
+      switch (this.type) {
+        case 'info':
+          return 'success';
+        case 'error':
+          return 'danger';
+        default:
+          return '';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-notification {
+  @extend %typo-body-1;
+  @include width-fit-content;
+
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  min-width: var(--notification-min-width);
+  max-width: var(--notification-max-width);
+  padding: var(--notification-padding);
+  color: var(--notification-text-color);
+  background: var(--notification-bg-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--elevation-1);
+  cursor: pointer;
+}
+
+.wt-notification__icon {
+  flex: 0 0 var(--icon-md-size);
+  margin-right: var(--notification-icon-margin);
+}
+
+.wt-notification__text {
+  flex-grow: 1;
+  align-self: center;
+  margin: 0;
+}
+</style>