@webitel/ui-sdk 24.2.8 → 24.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.2.8",
+  "version": "24.2.10",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/components/wt-avatar/_variables.scss

@@ -13,6 +13,7 @@
   --dnd-color: var(--warning-color);
   --busy-color: var(--error-color);
   --offline-color: var(--disabled-color);
+  --pause-color: var(--warning-color);
 
   --wt-avatar-text-color: var(--white);
 

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

@@ -6,7 +6,7 @@
     <wt-badge
       v-if="badge"
       :color-variable="badgeColorVar"
-      :icon-badge="isDnd ? 'dnd' : null"
+      :icon-badge="isBadge ? props.status : null"
     />
     <div
       v-if="isLetterAvatar"
@@ -84,7 +84,14 @@ const avatarLettersBackground = computed(() => {
 
 const imgSrc = computed(() => props.src || defaultAvatar);
 
-const isDnd = computed(() => props.status === AbstractUserStatus.DND);
+const isBadge = computed(() => {
+  const eligibleStatuses = [
+    AbstractUserStatus.DND,
+    AbstractUserStatus.ONLINE,
+    AbstractUserStatus.PAUSE
+  ];
+  return eligibleStatuses.includes(props.status);
+});
 
 const badgeColorVar = computed(() => {
   switch (props.status) {
@@ -96,6 +103,10 @@ const badgeColorVar = computed(() => {
       return 'busy-color';
     case AbstractUserStatus.OFFLINE:
       return 'offline-color';
+    case AbstractUserStatus.ONLINE:
+      return 'online-color';
+    case AbstractUserStatus.PAUSE:
+      return 'pause-color';
     default:
       return 'offline-color';
   }

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

@@ -8,6 +8,9 @@
 
 <script>
 import BadgeDnd from '../../assets/icons/badge-dnd.svg';
+import BadgeOnline from '../../assets/icons/badge-online.svg';
+import BadgePause from '../../assets/icons/badge-pause.svg';
+import AbstractUserStatus from '../../enums/AbstractUserStatus/AbstractUserStatus.enum';
 
 export default {
   name: 'WtBadge',
@@ -28,8 +31,12 @@ export default {
   computed: {
     showIconBadge() {
       switch (this.iconBadge) {
-        case 'dnd':
+        case AbstractUserStatus.DND:
           return BadgeDnd;
+        case AbstractUserStatus.ONLINE:
+          return BadgeOnline;
+        case AbstractUserStatus.PAUSE:
+          return BadgePause;
         default:
           return null;
       }

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

@@ -90,7 +90,7 @@
           :disabled="disabled"
           class="multiselect__select multiselect__custom-value-arrow"
           icon="call-merge-filled"
-          @mousedown.prevent.stop="handleCustomValue(toggle)"
+          @click="handleCustomValue(toggle)"
         />
         <!--    To view a list of possible values, click on this icon  -->
         <!-- @mousedown.native.prevent.stop="toggle": https://github.com/shentao/vue-multiselect/issues/1204#issuecomment-615114727 -->

package/src/enums/AbstractUserStatus/AbstractUserStatus.enum.js

@@ -1,8 +1,10 @@
 const AbstractUserStatus = Object.freeze({
-                                           ACTIVE: 'active',
-                                           DND: 'dnd',
-                                           BUSY: 'busy',
-                                           OFFLINE: 'offline',
-                                         });
+  ACTIVE: 'active',
+  DND: 'dnd',
+  BUSY: 'busy',
+  OFFLINE: 'offline',
+  ONLINE: 'online',
+  PAUSE: 'pause',
+});
 
 export default AbstractUserStatus;