@webitel/ui-sdk 0.9.52 → 0.9.56

package/package.json

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

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

@@ -227,6 +227,7 @@ export default {
 
   methods: {
     handleSearchChange(search) {
+      if (!this.isApiMode) return;
       this.isLoading = true;
       this.searchParams.page = 1;
       this.searchParams.search = search;

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

@@ -2,11 +2,20 @@
   <aside class="wt-player">
     <audio
       id="wt-player__player"
+      ref="audio"
       :src="src"
       :autoplay="autoplay"
       controls
       v-on="listeners"
     ></audio>
+
+    <!-- The "wt-icon-btn" component is append in to "audio" element by "setCloseIcon" method-->
+    <wt-icon-btn
+      class="wt-player__close-icon"
+      ref="close-icon"
+      icon="close"
+      @click="$emit('close')"
+    ></wt-icon-btn>
   </aside>
 </template>
 
@@ -33,6 +42,7 @@ export default {
   data: () => ({
     player: null,
   }),
+
   watch: {
     src() {
       this.setupDownload();
@@ -41,9 +51,11 @@ export default {
       this.setupDownload();
     },
   },
+
   mounted() {
     this.setupPlayer();
   },
+
   computed: {
     listeners() {
       return {
@@ -51,6 +63,7 @@ export default {
       };
     },
   },
+
   methods: {
     setupPlayer() {
       const baseURL = this.$baseURL || process.env.BASE_URL;
@@ -68,6 +81,7 @@ export default {
           active: this.loop,
         },
       });
+      this.appendCloseIcon();
     },
     setupDownload() {
       if (!this.download) this.setupPlayer();
@@ -77,6 +91,13 @@ export default {
         this.player.download = this.download(this.src);
       }
     },
+    appendCloseIcon() {
+      const plyrControls = this.$refs.audio.plyr?.elements?.controls;
+      const closeIcon = this.$refs['close-icon'].$el;
+      if (plyrControls) {
+        plyrControls.append(closeIcon);
+      }
+    },
   },
 };
 </script>
@@ -84,18 +105,20 @@ export default {
 <style lang="scss">
 @import "~plyr/src/sass/plyr.scss";
 
-:root {
-  --plyr-color-main: var(--main-accent-color);
-  --plyr-audio-control-color: var(--icon-primary-color);
-  // --plyr-control-toggle-checked-background: var(--main-primary-color);
-}
-
 .wt-player {
   @extend %typo-body-md;
   position: sticky;
   bottom: 60px;
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius);
+
+  .plyr {
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+  }
+
+  &__close-icon {
+    transform: translate(var(--player-close-icon-transform-translate-x),
+      var(--player-close-icon-transform-translate-y));
+  }
 
   .plyr__control:hover, {
     background: var(--main-option-hover-color);

package/src/components/organisms/wt-table-column-select/wt-table-column-select.vue

@@ -69,11 +69,10 @@ export default {
   }),
 
   watch: {
-    headers: {
+    isColumnSelectPopup: {
       handler() {
         this.fillHeadersDraft();
       },
-      immediate: true,
     },
   },
   computed: {

package/src/css/components/_components.scss

@@ -38,3 +38,4 @@
 @import "organisms/wt-status-select/variables";
 @import "organisms/wt-table/variables";
 @import "organisms/wt-table-actions/variables";
+@import "organisms/wt-player/variables";

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

@@ -11,10 +11,10 @@
   --datepicker-width: calc(
           7 * var(--datepicker-cell-size)
           + 2 * var(--datepicker-calendar-padding)
-          + 2px
+          + 8px
           + 7 * 2 * var(--datepicker-cell-margin)); // 7 cells * 2 sides
 
   --datepicker-selected-cell-text-color: var(--main-primary-color);
   --datepicker-selected-cell-bg-color: var(--main-accent-color);
   --datepicker-cell--hover-color: #F9F9F9;
-}
+}

package/src/css/components/molecules/wt-datepicker/datepicker-calendar.scss

@@ -53,7 +53,9 @@
     @extend %typo-body-lg;
     width: var(--datepicker-cell-size);
     height: var(--datepicker-cell-size);
+    margin: 1px;
     padding: 0;
+    border: none;
     line-height: var(--datepicker-cell-size);
     transition: var(--transition);
 
@@ -66,7 +68,6 @@
 
     &.day {
       border-radius: var(--border-radius);
-      margin: 1px;
 
       &.selected {
         @extend %typo-strong-lg;

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

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

package/src/locale/ru/ru.js

@@ -74,7 +74,7 @@ export default {
       name: 'Supervisor Workspace',
       sections: {
         [SupervisorSections.QUEUES]: 'Очереди',
-        [SupervisorSections.AGENTS]: 'Агенты',
+        [SupervisorSections.AGENTS]: 'Операторы',
         [SupervisorSections.ACTIVE_CALLS]: 'Активные звонки',
       },
     },

package/src/locale/ua/ua.js

@@ -74,7 +74,7 @@ export default {
       name: 'Supervisor Workspace',
       sections: {
         [SupervisorSections.QUEUES]: 'Черги',
-        [SupervisorSections.AGENTS]: 'Агенти',
+        [SupervisorSections.AGENTS]: 'Оператори',
         [SupervisorSections.ACTIVE_CALLS]: 'Активні дзвінки',
       },
     },