@webitel/ui-sdk 1.0.5 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.5",
+  "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/molecules/wt-input/wt-input.vue

@@ -306,6 +306,7 @@ export default {
     top: 50%;
     right: var(--input-icon-margin);
     transform: translateY(-50%);
+    pointer-events: auto; // override --disabled p-events none
 
     .wt-input__password-button {
       .wt-input--disabled & ::v-deep .wt-icon__icon {

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

@@ -131,6 +131,7 @@ export default {
 
   .wt-popup__main {
     overflow: visible;
+    padding-right: 0;
   }
 }
 </style>

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

@@ -70,6 +70,10 @@
     @include width-fit-content;
     position: relative;
     box-sizing: border-box;
+
+    .wt-label {
+      cursor: pointer;
+    }
   }
 
   .wt-switcher__wrapper {

package/src/components/organisms/wt-app-header/wt-app-navigator.vue

@@ -203,7 +203,7 @@ export default {
   transition: var(--transition);
   border-radius: var(--border-radius);
   background: var(--wt-app-header-content-bg-color);
-  box-shadow: var(--elevation-1);
+  box-shadow: var(--elevation-10);
 }
 
 .wt-app-navigator__nav-title {

package/src/components/organisms/wt-app-header/wt-header-actions.vue

@@ -26,7 +26,7 @@
               target="_blank"
               @click="close"
             >
-              <wt-icon icon="docs" size="sm"></wt-icon>
+              <wt-icon icon="docs"></wt-icon>
               <span>{{ $t('webitelUI.headerActions.docs') }}</span>
             </a>
           </li>
@@ -35,7 +35,7 @@
               class="wt-header-actions__action__link"
               @click.prevent="settings"
             >
-              <wt-icon icon="settings" size="sm"></wt-icon>
+              <wt-icon icon="settings"></wt-icon>
               <span>{{ $t('webitelUI.headerActions.settings') }}</span>
             </a>
           </li>
@@ -44,7 +44,7 @@
               class="wt-header-actions__action__link"
               @click.prevent="logout"
             >
-              <wt-icon color="danger" icon="logout" size="sm"></wt-icon>
+              <wt-icon color="danger" icon="logout"></wt-icon>
               <span>{{ $t('webitelUI.headerActions.logout') }}</span>
             </a>
           </li>
@@ -137,7 +137,7 @@ export default {
   transition: var(--transition);
   border-radius: var(--border-radius);
   background: var(--wt-app-header-content-bg-color);
-  box-shadow: var(--elevation-1);
+  box-shadow: var(--elevation-10);
 }
 
 .wt-header-actions__name {

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 {