@webitel/ui-sdk 1.0.2 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "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

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

@@ -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 {

package/src/components/organisms/wt-player/wt-player.vue

@@ -121,18 +121,18 @@ export default {
   }
 
   .plyr__control:hover, {
-    background: var(--main-option-hover-color);
+    background: var(--accent-secondary-color);
     color: var(--text-primary-color);
   }
 
   //.plyr__control[role='menuitemradio']::before,
   //.plyr__control[role='menuitemradio']:hover::before {
-  //  border: 2px solid var(--main-secondary-color);
-  //  background: var(--main-primary-color);
+  //  border: 2px solid var(--secondary-color);
+  //  background: var(--main-color);
   //}
   //
   //.plyr__control[role='menuitemradio']::after {
-  //  background: var(--main-secondary-color);
+  //  background: var(--secondary-color);
   //}
 }
 

package/src/css/components/atoms/wt-chip/_variables.scss

@@ -2,6 +2,6 @@
 :root {
   --chip-padding: var(--spacing-2xs) var(--spacing-xs);
   --chip-border-radius: var(--spacing-lg);
-  --chip-bg-color: var(--main-secondary-accent-color);
-  --chip-bg-color--outline: var(--main-outline-color);
+  --chip-bg-color: var(--accent-secondary-color);
+  --chip-bg-color--outline: var(--secondary-color);
 }

package/src/css/components/atoms/wt-divider/_variables.scss

@@ -1,5 +1,5 @@
 
 :root {
   --divider-border: 1px solid;
-  --divider-border-color: var(--main-page-bg-color);
+  --divider-border-color: var(--page-bg-color);
 }

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

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

package/src/css/components/molecules/wt-tabs/_variables.scss

@@ -9,6 +9,6 @@
   --tab--hover-color: var(--text-primary-color);
   --tab--active-color: var(--text-primary-color);
   --tab-border: 4px solid;
-  --tab--active-border-color: var(--main-accent-color);
+  --tab--active-border-color: var(--accent-color);
   --tab-z-index: 1;
 }

package/src/css/components/molecules/wt-tags-input/_variables.scss

@@ -7,7 +7,7 @@
 
   --tags-input-tags-gap: var(--spacing-xs);
   --tags-input-tag-text-color: var(--text-primary-color);
-  --tags-input-tag-bg-color: var(--main-secondary-accent-color);
+  --tags-input-tag-bg-color: var(--accent-secondary-color);
   --tags-input-tag-actions-margin-left: var(--spacing-2xs);
 
   --tags-input-tag-text-color--deletion: var(--text-contrast-color);
@@ -19,6 +19,6 @@
   --tags-input-autocomplete-option-padding: var(--input-padding);
   --tags-input-autocomplete-option--text-color: var(--form-placeholder-color);
 
-  --tags-input-option-bg-color--hover: var(--main-secondary-accent-color);
+  --tags-input-option-bg-color--hover: var(--accent-secondary-color);
   --tags-input-option-text-color--hover: 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-player/_variables.scss

@@ -1,7 +1,7 @@
 .wt-player {
-  --plyr-color-main: var(--main-accent-color);
+  --plyr-color-main: var(--accent-color);
   --plyr-audio-control-color: var(--icon-primary-color);
-  // --plyr-control-toggle-checked-background: var(--main-primary-color);
+  // --plyr-control-toggle-checked-background: var(--main-color);
   --player-close-icon-transform-translate-x: var(--spacing-xs);
   // "-1 * var" for use the negative value of a variable
   --player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));

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

@@ -34,18 +34,13 @@
 
   // MAIN COLORS
   --accent-color: hsla(var(--_accent-color), 1);
-  --main-accent-color: var(--accent-color); // DEPRECATED
 
   --main-color: hsla(var(--_main-color), 1);
-  --main-primary-color: var(--main-color); // DEPRECATED
 
   --contrast-color: hsla(var(--_contrast-color), 1);
-  --main-primary-accent-color: var(--contrast-color); // DEPRECATED
 
   --secondary-color: hsla(var(--_secondary-color), 1);
   --secondary-color-50: hsla(var(--_secondary-color-50), 1);
-  --main-secondary-color: var(--secondary-color); // DEPRECATED
-  --main-outline-color: var(--secondary-color); // DEPRECATED
 
   // ICON COLORS
   --icon-color: hsla(var(--_icon-color), var(--_opacity--default));
@@ -65,29 +60,26 @@
 
   --page-bg-color: hsla(var(--_page-bg-color), 1);
   --header-color: hsla(var(--_header-color), 1);
-  --main-page-bg-color: var(--page-bg-color); // DEPRECATED
 
   --accent-secondary-color: hsla(var(--_accent-color), 0.3);
-  --main-secondary-accent-color: var(--accent-secondary-color); // DEPRECATED
-  --main-option-hover-color: var(--accent-secondary-color); // DEPRECATED
 
   // SEMANTIC COLORS
   --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(--main-secondary-accent-color);
+  --tag-bg-color: var(--accent-secondary-color);
 
   // FORM STATES OPACITY
   --form-opacity--default: var(--_opacity--default);