@webitel/ui-sdk 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/molecules/wt-datepicker/wt-datepicker.vue

@@ -1,36 +1,32 @@
 <template>
   <div
-    class="wt-datepicker"
     :class="{
       'wt-datepicker--disabled': disabled,
     }"
+    class="wt-datepicker"
   >
-    <wt-label :disabled="disabled" v-bind="labelProps">
+    <wt-label v-bind="labelProps" :disabled="disabled">
       <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
+      <slot v-bind="{ label }" name="label">{{ label }}</slot>
     </wt-label>
     <vue-datepicker
-      class="wt-datepicker__datepicker"
-      :value="+value"
-      :format="format"
-      :maximum-view="maximumView"
-      :disabled="disabled"
-      :disabled-dates="disabledDates"
+      v-bind="{ ...$attrs, ...$props }"
       :placeholder="label || placeholder"
-      :lang="lang"
+      :value="+value"
+      class="wt-datepicker__datepicker"
       monday-first
       @input="$emit('change', $event.getTime())"
     >
       <template slot="afterDateInput">
         <wt-icon
+          :color="disabled ? 'disabled' : 'default'"
           class="wt-datepicker__calendar-icon"
           icon="calendar"
-          :color="disabled ? 'disabled' : 'default'"
         ></wt-icon>
         <wt-icon
+          :color="disabled ? 'disabled' : 'default'"
           class="wt-datepicker__arrow-icon"
           icon="arrow-down"
-          :color="disabled ? 'disabled' : 'default'"
         ></wt-icon>
       </template>
       <template slot="beforeCalendarHeader">
@@ -48,159 +44,160 @@
 </template>
 
 <script>
-  import VueDatepicker from 'vuejs-datepicker';
-
-  export default {
-    name: 'wt-datepicker',
-    components: {
-      VueDatepicker,
+import VueDatepicker from 'vuejs-datepicker';
+
+export default {
+  name: 'wt-datepicker',
+  components: {
+    VueDatepicker,
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      default: 'Date.now()',
+    },
+    /**
+     * label above calendar input
+     */
+    label: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    format: {
+      type: [String, Function],
+    },
+    maximumView: {
+      type: String,
+      default: 'day',
     },
-    props: {
-      value: {
-        type: [String, Number],
-        default: 'Date.now()',
-      },
-      /**
-       * label above calendar input
-       */
-      label: {
-        type: String,
-        default: '',
-      },
-      placeholder: {
-        type: String,
-        default: '',
-      },
-      format: {
-        type: [String, Function],
-      },
-      maximumView: {
-        type: String,
-        default: 'day',
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      disabledDates: {
-        type: Object,
-      },
-      lang: {
-        type: String,
-        default: 'en',
-      },
-      labelProps: {
-        type: Object,
-        description: 'Object with props, passed down to wt-label as props',
-      },
+    disabled: {
+      type: Boolean,
+      default: false,
     },
-    model: {
-      prop: 'value',
-      event: 'change',
+    disabledDates: {
+      type: Object,
     },
-  };
+    lang: {
+      type: String,
+      default: 'en',
+    },
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .wt-datepicker__calendar-icon {
-    position: absolute;
-    top: var(--spacing-xs);
-    left: var(--input-padding);
-    pointer-events: none;
+.wt-datepicker__calendar-icon {
+  position: absolute;
+  top: var(--spacing-xs);
+  left: var(--input-padding);
+  pointer-events: none;
+}
+
+.wt-datepicker__arrow-icon {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--input-padding);
+  pointer-events: none;
+}
+
+.wt-datepicker__month-arrow {
+  position: absolute;
+  top: var(--spacing-xs);
+  pointer-events: none;
+
+  &--right {
+    right: var(--spacing-xs);
   }
 
-  .wt-datepicker__arrow-icon {
-    position: absolute;
-    top: var(--spacing-xs);
-    right: var(--input-padding);
-    pointer-events: none;
+  &--left {
+    left: var(--spacing-xs);
   }
-
-  .wt-datepicker__month-arrow{
-    position: absolute;
-    top: var(--spacing-xs);
-    pointer-events: none;
-
-    &--right {
-      right: var(--spacing-xs);
+}
+
+::v-deep .vdp-datepicker {
+  min-width: var(--datepicker-width);
+
+  // preview input
+  > div:first-child {
+    position: relative;
+
+    input {
+      @extend %typo-body-1;
+      @include wt-placeholder;
+      box-sizing: border-box;
+      width: 100%;
+      padding: var(--datepicker-padding);
+      border: var(--datepicker-border);
+      border-color: var(--form-border-color);
+      border-radius: var(--border-radius);
+
+      &:focus {
+        @include wt-placeholder('focus');
+      }
     }
 
-    &--left {
-      left: var(--spacing-xs);
+    .vdp-datepicker__calendar-button {
+      display: none;
     }
   }
 
+  @import '../../../css/components/molecules/wt-datepicker/datepicker-calendar';
+}
+
+.wt-datepicker:hover,
+.wt-datepicker:focus-within {
+  .wt-label {
+    color: var(--form-label--hover-color);
+  }
+
   ::v-deep .vdp-datepicker {
     min-width: var(--datepicker-width);
 
     // preview input
     > div:first-child {
-      position: relative;
 
       input {
-        @extend %typo-body-1;
-        @include wt-placeholder;
-        box-sizing: border-box;
-        width: 100%;
-        padding: var(--datepicker-padding);
-        border: var(--datepicker-border);
-        border-color: var(--form-border-color);
-        border-radius: var(--border-radius);
-
-        &:focus {
-          @include wt-placeholder('focus');
-        }
-      }
-
-      .vdp-datepicker__calendar-button {
-        display: none;
-      }
-    }
-    @import '../../../css/components/molecules/wt-datepicker/datepicker-calendar';
-  }
-
-  .wt-datepicker:hover,
-  .wt-datepicker:focus-within {
-    .wt-label {
-      color: var(--form-label--hover-color);
-    }
-
-    ::v-deep .vdp-datepicker {
-      min-width: var(--datepicker-width);
-
-      // preview input
-      > div:first-child {
-
-        input {
-          border-color: var(--form-border--hover-color);
-        }
+        border-color: var(--form-border--hover-color);
       }
     }
   }
+}
 
-  .wt-datepicker:focus-within {
-    ::v-deep .vdp-datepicker {
-      // arrow down icon
-      .vdp-datepicker__calendar-button:before {
-        transform: rotate(180deg);
-      }
+.wt-datepicker:focus-within {
+  ::v-deep .vdp-datepicker {
+    // arrow down icon
+    .vdp-datepicker__calendar-button:before {
+      transform: rotate(180deg);
     }
   }
+}
 
-  .wt-datepicker--disabled {
-    pointer-events: none;
+.wt-datepicker--disabled {
+  pointer-events: none;
 
-    ::v-deep .vdp-datepicker {
-      min-width: var(--datepicker-width);
+  ::v-deep .vdp-datepicker {
+    min-width: var(--datepicker-width);
 
-      // preview input
-      > div:first-child {
+    // preview input
+    > div:first-child {
 
-        input {
-          background: var(--form-border--disabled-color);
-          border-color: var(--form-border--disabled-color);
-        }
+      input {
+        border-color: var(--form-border--disabled-color);
+        background: var(--form-border--disabled-color);
       }
     }
   }
+}
 </style>

package/src/components/molecules/wt-datetimepicker/wt-datetimepicker.vue

@@ -42,15 +42,24 @@
         </span>
       </div>
       <div class="wt-datetimepicker__form-wrapper">
-        <datepicker
+<!--        <datepicker-->
+<!--          class="wt-datetimepicker__datepicker"-->
+<!--          :value="draft"-->
+<!--          :maximum-view="'day'"-->
+<!--          :disabled-dates="disabledDates"-->
+<!--          monday-first-->
+<!--          inline-->
+<!--          @input="setDraft($event.getTime())"-->
+<!--        ></datepicker>-->
+        <wt-datepicker
           class="wt-datetimepicker__datepicker"
           :value="draft"
           :maximum-view="'day'"
           :disabled-dates="disabledDates"
           monday-first
           inline
-          @input="setDraft($event.getTime())"
-        ></datepicker>
+          @change="setDraft"
+        ></wt-datepicker>
         <wt-timepicker
           class="wt-datetimepicker__timepicker"
           v-model="draft"
@@ -71,12 +80,12 @@
 </template>
 
 <script>
-  import Datepicker from 'vuejs-datepicker';
+  // import Datepicker from 'vuejs-datepicker';
 
   export default {
     name: 'wt-datetimepicker',
     components: {
-      Datepicker,
+      // Datepicker,
     },
 
     props: {
@@ -226,18 +235,15 @@
     display: flex;
     flex-direction: column;
 
-    .wt-datetimepicker__datepicker {
-      input {
+    .wt-datetimepicker__datepicker ::v-deep {
+      .wt-datepicker__calendar-icon,
+      .wt-datepicker__arrow-icon {
         display: none;
       }
-
-      ::v-deep {
-        @import '../../../css/components/molecules/wt-datepicker/datepicker-calendar';
-
-        .vdp-datepicker__calendar {
-          margin: auto;
-          border: none;
-        }
+      .vdp-datepicker__calendar {
+        padding: 0;
+        border-color: transparent;
+        box-shadow: none;
       }
     }
 
@@ -266,11 +272,6 @@
     .wt-datetimepicker__preview__input {
       border-color: var(--form-border--hover-color);
     }
-
-    .wt-datetimepicker__calendar-icon ::v-deep .wt-icon__icon,
-    .wt-datetimepicker__arrow-icon ::v-deep .wt-icon__icon {
-      fill: var(--icon-color--hover);
-    }
   }
 
   .wt-datetimepicker:focus-within,
@@ -286,11 +287,6 @@
     .wt-datetimepicker__arrow-icon {
       transform: translateY(-50%) rotate(180deg);
     }
-
-    .wt-datetimepicker__calendar-icon ::v-deep .wt-icon__icon,
-    .wt-datetimepicker__arrow-icon ::v-deep .wt-icon__icon {
-      fill: var(--icon-color-active);
-    }
   }
 
   .wt-datetimepicker--disabled {
@@ -300,10 +296,5 @@
       border-color: var(--form-border--disabled-color);
       background: var(--form-border--disabled-color);
     }
-
-    .wt-datetimepicker__calendar-icon ::v-deep .wt-icon__icon,
-    .wt-datetimepicker__arrow-icon ::v-deep .wt-icon__icon {
-      fill: var(--icon-color-disabled);
-    }
   }
 </style>

package/src/components/organisms/wt-error-page/wt-error-page.vue

@@ -79,7 +79,7 @@ export default {
 
   &__wrapper {
     text-align: center;
-    color: var(--text-contrast-color);
+    //color: var(--text-contrast-color);
   }
 
   &__img {

package/src/components/organisms/wt-navigation-bar/wt-navigation-bar.vue

@@ -1,44 +1,64 @@
 <template>
-  <aside class="wt-navigation-bar" v-clickaway="close">
+  <aside v-clickaway="close" class="wt-navigation-bar">
     <wt-icon-btn
+      :class="{'active': isOpened}"
       class="wt-navigation-bar__menu-btn"
       icon="menu"
-      :class="{'active': isOpened}"
       @click="isOpened = !isOpened"
     ></wt-icon-btn>
     <transition name="fade">
-      <nav class="wt-navigation-bar__nav" v-show="isOpened">
+      <nav v-show="isOpened" class="wt-navigation-bar__nav">
         <header class="wt-navigation-bar__nav-header">
           <!--        vue cli build target lib cant handle dynamic require :( -->
-          <img v-if="currentApp === 'admin'"
-               src="../../../assets/components/organisms/wt-navigation-bar/logo-admin-app.svg" alt="admin">
-          <img v-if="currentApp === 'agent'"
-               src="../../../assets/components/organisms/wt-navigation-bar/logo-agent-app.svg" alt="agent">
-          <img v-if="currentApp === 'audit'"
-               src="../../../assets/components/organisms/wt-navigation-bar/logo-audit-app.svg" alt="audit">
-          <img v-if="currentApp === 'history'"
-               src="../../../assets/components/organisms/wt-navigation-bar/logo-history-app.svg" alt="history">
-          <img v-if="currentApp === 'supervisor'"
-               src="../../../assets/components/organisms/wt-navigation-bar/logo-supervisor-app.svg" alt="supervisor">
+          <img
+            v-if="currentApp === 'admin'"
+            alt="admin"
+            class="wt-navigation-bar__app-pic"
+            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"
+          >
+          <img
+            v-if="currentApp === 'audit'"
+            alt="audit"
+            class="wt-navigation-bar__app-pic"
+            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"
+          >
+          <img
+            v-if="currentApp === 'supervisor'"
+            alt="supervisor"
+            class="wt-navigation-bar__app-pic"
+            src="../../../assets/components/organisms/wt-navigation-bar/logo-supervisor-app.svg"
+          >
           <wt-icon-btn
             class="wt-navigation-bar__nav-close"
             icon="close"
             @click="isOpened = false"
           ></wt-icon-btn>
         </header>
-        <wt-divider/>
+        <wt-divider />
         <ul class="wt-navigation-bar__nav-list">
           <li
             v-for="(navItem, key) of nav"
-            class="wt-navigation-bar__nav-item"
             :key="key"
+            class="wt-navigation-bar__nav-item"
           >
             <div v-if="!navItem.subNav">
               <div class="wt-navigation-bar__nav-item-wrapper">
                 <router-link
-                  class="wt-navigation-bar__nav-item-link"
                   :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"
                 > {{ navItem.name || navItem.value }}
                 </router-link>
@@ -46,33 +66,33 @@
             </div>
             <div v-else>
               <button
-                class="wt-navigation-bar__nav-expansion"
                 :class="{
                   'wt-navigation-bar__nav-expansion--expanded': isExpanded(navItem),
                   'wt-navigation-bar__nav-expansion--active': currentNav.expansion === navItem.value,
                 }"
+                class="wt-navigation-bar__nav-expansion"
                 type="button"
                 @click="expand(navItem)"
               >
                 <span class="wt-navigation-bar__nav-expansion-name">{{ navItem.name || navItem.value }}</span>
                 <wt-icon
                   class="wt-navigation-bar__expansion-arrow"
-                  icon="arrow-right"
                   color="active"
+                  icon="arrow-right"
                 ></wt-icon>
               </button>
               <expand-transition>
                 <ul v-if="isExpanded(navItem)">
                   <li
                     v-for="(subNavItem, subNavKey) of navItem.subNav"
-                    class="wt-navigation-bar__nav-item"
                     :key="subNavKey"
+                    class="wt-navigation-bar__nav-item"
                   >
                     <div class="wt-navigation-bar__nav-item-wrapper">
                       <router-link
-                        class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
                         :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"
                       >{{ subNavItem.name || subNavItem.value }}
                       </router-link>
@@ -113,14 +133,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,
@@ -154,21 +174,21 @@ export default {
 .wt-navigation-bar__nav {
   @extend %wt-scrollbar;
   position: fixed;
+  z-index: var(--navigation-bar-z-index);
   top: 0;
   bottom: 0;
   left: 0;
+  overflow: auto;
   width: var(--navigation-bar-width);
   padding: var(--navigation-bar-padding);
-  overflow: auto;
-  z-index: var(--navigation-bar-z-index);
   border-radius: var(--border-radius);
-  box-shadow: var(--elevation-10);
   background: var(--navigation-bar-bg-color);
+  box-shadow: var(--elevation-10);
 
   // expand animation optimization
   * {
-    will-change: height;
     transform: translateZ(0);
+    will-change: height;
     backface-visibility: hidden;
     perspective: 1000px;
   }
@@ -176,11 +196,16 @@ export default {
 
 .wt-navigation-bar__nav-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   padding: var(--navigation-bar-header-padding);
 }
 
+.wt-navigation-bar__app-pic {
+  width: var(--navigation-bar-app-pic-width);
+  height: var(--navigation-bar-app-pic-height);
+}
+
 .wt-navigation-bar__nav-item-link {
   @extend %typo-body-1;
   display: block;
@@ -201,23 +226,23 @@ export default {
   @extend %typo-subtitle-1;
   position: relative;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
   padding: var(--navigation-bar-link-padding);
   outline: none;
 
   &:before {
-    opacity: 0;
-    content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     width: var(--navigation-bar-active-expansion-flag-width);
+    content: '';
+    transition: var(--transition);
+    opacity: 0;
     border-radius: var(--border-radius);
     background: var(--accent-color);
-    transition: var(--transition);
   }
 
   .wt-navigation-bar__expansion-arrow {