@webitel/ui-sdk 24.12.1 → 24.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.1",
+  "version": "24.12.3",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -104,62 +104,61 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^1.0.1",
-    "@morev/vue-transitions": "^3.0.2",
+    "@floating-ui/vue": "^1.1.5",
+    "@morev/vue-transitions": "^3.0.5",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuepic/vue-datepicker": "^4.4.0",
-    "@vueuse/components": "^10.7.2",
+    "@vuepic/vue-datepicker": "^10.0.0",
+    "@vueuse/components": "^11.2.0",
     "autosize": "^6.0.1",
-    "axios": "^1.7.1",
+    "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "csv-stringify": "^5.5.3",
     "deep-copy": "^1.4.2",
-    "deep-equal": "^2.0.3",
+    "deep-equal": "^2.2.3",
     "deepmerge": "^4.3.1",
     "file-saver-es": "^2.0.5",
     "flat": "^6.0.1",
     "is-valid-domain": "^0.1.6",
-    "jszip": "^3.5.0",
+    "jszip": "^3.10.1",
     "jszip-utils": "^0.1.0",
     "lodash": "^4.17.21",
     "mitt": "3.0.1",
     "path-browserify": "^1.0.1",
-    "plyr": "3.6.3",
-    "query-string": "^8.1.0",
-    "sortablejs": "^1.15.0",
-    "vue-i18n": "^9.2.2",
-    "vue-multiselect": "^3.0.0-beta.3",
+    "plyr": "3.7.8",
+    "query-string": "^9.1.1",
+    "sortablejs": "^1.15.3",
+    "vue-i18n": "^9.14.1",
+    "vue-multiselect": "^3.1.0",
     "vue-observe-visibility": "^2.0.0-alpha.1",
-    "vue-router": "^4.1.6",
-    "webitel-sdk": "^24.08.08",
+    "vue-router": "^4.4.5",
+    "webitel-sdk": "^24.8.8",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@vitejs/plugin-vue": "5.1.5",
-    "@vitest/coverage-v8": "^2.1.4",
-    "@vue/compat": "^3.5.12",
-    "@vue/compiler-sfc": "^3.5.12",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitest/coverage-v8": "^2.1.5",
+    "@vue/compat": "^3.5.13",
+    "@vue/compiler-sfc": "^3.5.13",
     "@vue/test-utils": "^2.4.6",
     "globby": "^14.0.2",
-    "happy-dom": "^15.11.0",
+    "happy-dom": "^15.11.6",
     "markdown-it": "^14.1.0",
     "markdown-table": "^3.0.4",
     "path": "^0.12.7",
-    "postcss": "^8.4.48",
+    "postcss": "^8.4.49",
     "postcss-prefix-selector": "^2.1.0",
     "prismjs": "^1.29.0",
-    "sass": "^1.80.6",
-    "tslib": "^2.8.1",
+    "sass": "^1.81.0",
     "vite": "^5.4.11",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-static-copy": "^2.1.0",
     "vite-plugin-svg-sprite": "^0.5.2",
     "vite-plugin-vue-docgen": "^0.3.4",
     "vitepress": "1.5.0",
-    "vitest": "^2.1.4",
-    "vue": "^3.5.12",
+    "vitest": "^2.1.5",
+    "vue": "^3.5.13",
     "vuex": "^4.1.0"
   },
   "optionalDependencies": {

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

@@ -147,7 +147,7 @@ export default {
 }
 
 .wt-checkbox:hover {
-  :deep .wt-icon__icon {
+  :deep(.wt-icon__icon) {
     fill: var(--icon-active-color);
   }
 }

package/src/components/wt-icon-btn/wt-icon-btn.vue

@@ -38,7 +38,7 @@ const emit = defineEmits(['click', 'mousedown']);
   width: fit-content;
   line-height: 0;
 
-  &:hover .wt-icon--color-default :deep .wt-icon__icon {
+  &:hover .wt-icon--color-default :deep(.wt-icon__icon) {
     fill: var(--icon-btn-hover-color);
   }
 

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

@@ -200,72 +200,70 @@ export default {
     }
   }
 
-  :deep {
-    .plyr {
+    :deep(.plyr) {
       max-width: 100%; // prevents <video> container overflow
       border-radius: var(--border-radius);
       box-shadow: var(--elevation-10);
-    }
-
-    .plyr__controls > .plyr__control,
-    .plyr__controls > .plyr__controls__item > .plyr__control {
-      padding: var(--plyr-controls-icon-padding);
-    }
-
-    .plyr__controls > .plyr__control > svg,
-    .plyr__controls > .plyr__controls__item > .plyr__control > svg {
-      width: var(--plyr-controls-icon-size);
-      height: var(--plyr-controls-icon-size);
-    }
-
-    .plyr__control--overlaid svg {
-      left: 0; // reset plyr style for video "play" button icon
-    }
-
-    .plyr__progress__buffer {
-      background: var(--wt-player-audio-progress-background);
-    }
-
-    .plyr__progress input,
-    .plyr__volume input {
-      cursor: pointer;
-
-      &::-webkit-slider-thumb {
-        transition: var(--transition);
-        border: var(--wt-slider-border);
-        border-radius: var(--wt-slider-pointer-radius);
-        background: var(--wt-slider-pointer-background-color);
-        -webkit-appearance: none;
-      }
 
-      &::-webkit-slider-runnable-track {
-        -webkit-appearance: none;
+      .plyr__controls > .plyr__control,
+      .plyr__controls > .plyr__controls__item > .plyr__control {
+        padding: var(--plyr-controls-icon-padding);
       }
 
-      &::-moz-range-thumb {
-        width: var(--wt-slider-pointer-size);
-        height: var(--wt-slider-pointer-size);
-        transition: var(--transition);
-        border: var(--wt-slider-border);
-        border-color: var(--wt-slider-pointer-border-color);
-        border-radius: var(--wt-slider-pointer-radius);
-        background: var(--wt-slider-pointer-background-color);
-        -moz-appearance: none;
+      .plyr__controls > .plyr__control > svg,
+      .plyr__controls > .plyr__controls__item > .plyr__control > svg {
+        width: var(--plyr-controls-icon-size);
+        height: var(--plyr-controls-icon-size);
       }
 
-      &::-moz-range-track {
-        -moz-appearance: none;
+      .plyr__control--overlaid svg {
+        left: 0; // reset plyr style for video "play" button icon
       }
 
-      &::-ms-thumb {
-        appearance: none;
+      .plyr__progress__buffer {
+        background: var(--wt-player-audio-progress-background);
       }
 
-      &::-ms-track {
-        appearance: none;
+      .plyr__progress input,
+      .plyr__volume input {
+        cursor: pointer;
+
+        &::-webkit-slider-thumb {
+          transition: var(--transition);
+          border: var(--wt-slider-border);
+          border-radius: var(--wt-slider-pointer-radius);
+          background: var(--wt-slider-pointer-background-color);
+          -webkit-appearance: none;
+        }
+
+        &::-webkit-slider-runnable-track {
+          -webkit-appearance: none;
+        }
+
+        &::-moz-range-thumb {
+          width: var(--wt-slider-pointer-size);
+          height: var(--wt-slider-pointer-size);
+          transition: var(--transition);
+          border: var(--wt-slider-border);
+          border-color: var(--wt-slider-pointer-border-color);
+          border-radius: var(--wt-slider-pointer-radius);
+          background: var(--wt-slider-pointer-background-color);
+          -moz-appearance: none;
+        }
+
+        &::-moz-range-track {
+          -moz-appearance: none;
+        }
+
+        &::-ms-thumb {
+          appearance: none;
+        }
+
+        &::-ms-track {
+          appearance: none;
+        }
       }
     }
   }
-}
 
 </style>

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

@@ -131,13 +131,13 @@ export default {
 }
 
 .wt-radio:hover {
-  :deep .wt-icon__icon {
+  :deep(.wt-icon__icon) {
     fill: var(--icon-btn-hover-color);
   }
 }
 
 .wt-radio--active {
-  :deep .wt-icon__icon {
+  :deep(.wt-icon__icon) {
     fill: var(--icon-active-color);
   }
 }
@@ -145,7 +145,7 @@ export default {
 .wt-radio--disabled {
   pointer-events: none;
 
-  :deep .wt-icon__icon {
+  :deep(.wt-icon__icon) {
     fill: var(--icon-disabled-color);
   }
 }

package/src/components/wt-select/_multiselect.scss

@@ -1,6 +1,6 @@
 @import '../../../src/css/main.scss';
 
-.multiselect :deep {
+:deep(.multiselect) {
   position: relative;
   cursor: pointer;
 
@@ -106,7 +106,7 @@
   }
 }
 
-.multiselect--active :deep {
+:deep(.multiselect--active) {
   .multiselect__select.multiselect__arrow .wt-icon__icon {
     fill: var(--icon-active-color);
   }
@@ -118,7 +118,7 @@
 
 .wt-select--loading,
 .wt-tags-input--loading {
-  :deep {
+  :deep(.multiselect) {
     .multiselect__content-wrapper {
       overflow-y: hidden;
     }
@@ -141,7 +141,7 @@
 
 .wt-select.wt-select--invalid,
 .wt-tags-input.wt-tags-input--invalid {
-  .multiselect :deep {
+  :deep(.multiselect) {
     .multiselect__tags {
       border-color: var(--wt-text-field-input-border-error-color);
       outline: none; // prevent outline overlapping false color
@@ -172,8 +172,7 @@
     background: transparent; // reset default
   }
 
-  .multiselect {
-    :deep {
+  :deep(.multiselect) {
       .multiselect__tags {
         border-color: var(--wt-text-field-input-border-disabled-color);
         background: var(--wt-text-field-input-background-disabled-color);
@@ -184,13 +183,13 @@
         }
       }
     }
-  }
 }
 
+
 // override .wt-select colors on chips
 .wt-tags-input,
 .wt-tags-input--invalid {
-  .multiselect :deep {
+  :deep(.multiselect) {
     .multiselect__tags {
       .multiselect__custom-tag,
       .multiselect__single-label {

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

@@ -285,7 +285,7 @@ export default {
   min-width: 0;
 }
 
-.multiselect :deep {
+:deep(.multiselect) {
   .multiselect__custom-tag,
   .multiselect__single-label {
     // text overflow 3 dots
@@ -297,7 +297,7 @@ export default {
   }
 }
 
-.multiselect--active :deep {
+:deep(.multiselect--active) {
   .multiselect__tags-wrap,
   .multiselect__strong {
     display: none;
@@ -309,7 +309,7 @@ export default {
 // default case
 .wt-select {
   // all is fine
-  .multiselect :deep {
+  :deep(.multiselect) {
     .multiselect__tags {
       padding: var(--input-padding) calc(
         var(--input-padding)
@@ -322,7 +322,7 @@ export default {
 
 // only chip
 .wt-select.wt-select--multiple:not(.wt-select--clearable) {
-  .multiselect :deep {
+  :deep(.multiselect) {
     $multiselect-limit-right-pos: calc(
       var(--select-caret-right-pos)// caret offet from border
       + var(--icon-md-size)// caret size
@@ -345,7 +345,7 @@ export default {
 
 // only clearable
 .wt-select.wt-select--clearable:not(.wt-select--multiple) {
-  .multiselect :deep {
+  :deep(.multiselect) {
     $multiselect-clear-right-pos: calc(
       var(--select-caret-right-pos)// caret offset from border
       + var(--icon-md-size)// caret size
@@ -368,7 +368,7 @@ export default {
 
 // clearable and chip
 .wt-select.wt-select--multiple.wt-select--clearable {
-  .multiselect :deep {
+  :deep(.multiselect) {
     $multiselect-clear-right-pos: calc(
       var(--select-caret-right-pos)// caret offet from border
       + var(--icon-md-size)// caret size

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

@@ -354,7 +354,7 @@ export default {
   &--sortable {
     cursor: pointer;
 
-    &:hover :deep .wt-icon__icon {
+    &:hover :deep(.wt-icon__icon) {
       fill: var(--icon-active-color);
     }
   }

package/src/components/wt-tags-input/wt-tags-input.vue

@@ -192,7 +192,7 @@ export default {
 }
 
 // paddings recalc
-.wt-tags-input .multiselect :deep {
+.wt-tags-input :deep(.multiselect) {
   .multiselect__tags {
     padding-right: calc(
       var(--input-padding)

package/src/composables/useCard/useCardTabs.js

@@ -6,7 +6,7 @@ export const useCardTabs = (tabs) => {
   const route = useRoute();
 
   const currentTab = computed(() => {
-    return tabs.find(({ pathName }) => route.name === pathName) || tabs[0];
+    return tabs?.value.find(({ pathName }) => route.name === pathName) || tabs?.value[0];
   });
 
   function changeTab(tab) {

package/src/composables/useValidate/useValidate.js

@@ -5,6 +5,6 @@ export const useValidate = (schema, data) => {
 
   return {
     v$,
-    invalid: v$.$invalid,
+    invalid: v$.value?.$invalid,
   };
 }

package/src/scripts/convertDurationWithMinutes.js

@@ -0,0 +1,13 @@
+const convertDurationWithMinutes = (duration) => {
+  if (!duration) return '00:00';
+
+  let hour = `${Math.floor(duration / 60)}`;
+  let min = `${Math.floor(duration % 60)}`;
+
+  if (hour.length === 1) hour = `0${hour}`;
+  if (min.length === 1) min = `0${min}`;
+
+  return `${hour}:${min}`;
+};
+
+export default convertDurationWithMinutes;