@webitel/ui-sdk 1.0.3 → 1.0.7

package/package.json

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

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

@@ -101,6 +101,10 @@
   .wt-checkbox {
     @include width-fit-content;
     box-sizing: border-box;
+
+    .wt-label {
+      cursor: pointer;
+    }
   }
 
   .wt-checkbox__wrapper {
@@ -108,7 +112,6 @@
     display: flex;
     align-items: center;
     user-select: none;
-    cursor: pointer;
 
     .wt-checkbox__checkmark {
       line-height: 0; // prevent icon height >> content
@@ -118,6 +121,7 @@
   .wt-checkbox__label {
     margin-left: var(--checkbox-icon-margin);
     transition: var(--transition);
+    cursor: pointer;
   }
 
   /* Hide the browser's default checkbox */

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

@@ -1,9 +1,11 @@
 <template>
-  <div class="wt-popup">
+  <div
+    class="wt-popup"
+    :class="{ 'wt-popup--overflow': overflow }"
+  >
     <div class="wt-popup__shadow"></div>
     <aside
       class="wt-popup__popup"
-      :class="{'wt-popup__popup--overflow': overflow}"
       :style="popupStyle"
     >
       <header class="wt-popup__header">
@@ -82,10 +84,6 @@ export default {
   border-radius: var(--border-radius);
   box-shadow: var(--elevation-10);
   z-index: 1;
-
-  &--overflow {
-    overflow: visible;
-  }
 }
 
 .wt-popup__header {
@@ -125,4 +123,15 @@ export default {
   gap: var(--popup-actions-padding);
   padding: var(--popup-actions-padding);
 }
+
+.wt-popup--overflow {
+  .wt-popup__popup {
+    overflow: visible;
+  }
+
+  .wt-popup__main {
+    overflow: visible;
+    padding-right: 0;
+  }
+}
 </style>

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

@@ -81,6 +81,10 @@
   .wt-radio {
     @include width-fit-content;
     box-sizing: border-box;
+
+    .wt-label {
+      cursor: pointer;
+    }
   }
 
   .wt-radio__wrapper {

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

@@ -183,6 +183,11 @@ export default {
   z-index: var(--wt-app-header-content-z-index);
   display: flex;
   align-items: center;
+
+  ::v-deep .wt-icon-btn__tooltip {
+    left: 50%;
+    transform: translateX(-100%);
+  }
 }
 
 // dropdown part
@@ -198,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>
@@ -117,6 +117,11 @@ export default {
   z-index: var(--wt-app-header-content-z-index);
   display: flex;
   align-items: center;
+
+  ::v-deep .wt-icon-btn__tooltip {
+    left: 50%;
+    transform: translateX(-100%);
+  }
 }
 
 .wt-header-actions__panel-wrapper {
@@ -132,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/css/components/atoms/wt-tooltip/_variables.scss

@@ -1,6 +1,6 @@
 
 :root {
-  --tooltip-padding: var(--spacing-3xs) var(--spacing-2xs);
+  --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);
   --tooltip-z-index: 100;
 
   --tooltip-light-text-color: var(--text-primary-color);

package/src/css/components/organisms/wt-app-header/_variables.scss

@@ -1,7 +1,7 @@
 
 :root {
-  --wt-app-header-min-height: 40px;
-  --wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
+  --wt-app-header-min-height: 56px;
+  --wt-app-header-padding: var(--spacing-sm);
 
   --wt-app-header-content-gap: var(--spacing-sm);
   --wt-app-header-content-panel-margin: var(--spacing-2xs);

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

@@ -7,8 +7,8 @@
   --table-head-border-color: var(--secondary-color);
 
   --table-min-height: 24px; // 24px icon size or body-1 lh
-  --table-column-gap: var(--spacing-sm);
-  --table-row-padding: var(--spacing-sm);
+  --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);

package/src/css/styleguide/colors/_colors.scss

@@ -67,16 +67,16 @@
   --disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));
 
   --true-color: hsla(var(--_positive-color), var(--_opacity--default));
-  --true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover)); // DEPRECATED
+  --true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));
 
   --false-color: hsla(var(--_negative-color), var(--_opacity--default));
-  --false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover)); // DEPRECATED
+  --false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));
 
   --hold-color: hsla(var(--_hold-color), var(--_opacity--default));
-  --hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover)); // DEPRECATED
+  --hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));
 
   --transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
-  --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover)); // DEPRECATED
+  --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));
 
   // SUBORDINATE COLORS
   --tag-bg-color: var(--accent-secondary-color);