@webitel/ui-sdk 24.10.64 → 24.10.66

package/src/assets/icons/sprite/variable-select.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 5.00352C8 4.4258 7.93106 3.36238 7.07714 2.62073C6.29738 1.9435 5.30612 1.99776 5.20758 2.00316L5.2 2.00352H4.8L4.79243 2.00316C4.69388 1.99776 3.70263 1.9435 2.92287 2.62073C2.06894 3.36237 2 4.4258 2 5.00352V19.0035C2 19.5812 2.06894 20.6447 2.92286 21.3863C3.70262 22.0635 4.69388 22.0093 4.79242 22.0039L4.8 22.0035H5.2L5.20757 22.0039C5.30612 22.0093 6.29738 22.0635 7.07714 21.3863C7.93106 20.6447 8 19.5812 8 19.0035L8 17.0034C8 16.4511 7.55228 16.0034 7 16.0034C6.44771 16.0034 6 16.4511 6 17.0034L6 19.0035C6 19.0309 5.99973 19.0576 5.99919 19.0835C5.98018 19.998 5.62964 20.0035 5.2 20.0035H4.8C4.37036 20.0035 4.01982 19.998 4.00081 19.0835C4.00027 19.0576 4 19.0309 4 19.0035V5.00352C4 4.9761 4.00027 4.94944 4.00081 4.92351C4.01982 4.00909 4.37036 4.00352 4.8 4.00352H5.2C5.62964 4.00352 5.98018 4.00909 5.99919 4.92351C5.99973 4.94944 6 4.9761 6 5.00352V7.00342C6 7.5557 6.44772 8.00342 7 8.00342C7.55229 8.00342 8 7.5557 8 7.00342L8 5.00352Z"/>
+    <path d="M9 18.0034C9 17.4511 9.44772 17.0034 10 17.0034C10.5523 17.0034 11 17.4511 11 18.0034V19.0035C11 19.0309 11.0003 19.0576 11.0008 19.0835C11.0198 19.998 11.3704 20.0035 11.8 20.0035H12.2C12.6296 20.0035 12.9802 19.998 12.9992 19.0835C12.9997 19.0576 13 19.0309 13 19.0035V18.0034C13 17.4511 13.4477 17.0034 14 17.0034C14.5523 17.0034 15 17.4511 15 18.0034V19.0035C15 19.5812 14.9311 20.6447 14.0771 21.3863C13.2974 22.0635 12.3061 22.0093 12.2076 22.0039L12.2 22.0035H11.8L11.7924 22.0039C11.6939 22.0093 10.7026 22.0635 9.92286 21.3863C9.06894 20.6447 9 19.5812 9 19.0035V18.0034Z"/>
+    <path d="M13 6.00342C13 6.5557 13.4477 7.00342 14 7.00342C14.5523 7.00342 15 6.5557 15 6.00342V5.00352C15 4.4258 14.9311 3.36238 14.0771 2.62073C13.2974 1.9435 12.3061 1.99776 12.2076 2.00316L12.2 2.00352H11.8L11.7924 2.00316C11.6939 1.99776 10.7026 1.9435 9.92287 2.62073C9.06894 3.36237 9 4.4258 9 5.00352V6.00342C9 6.5557 9.44772 7.00342 10 7.00342C10.5523 7.00342 11 6.5557 11 6.00342V5.00352C11 4.9761 11.0003 4.94944 11.0008 4.92351C11.0198 4.00909 11.3704 4.00352 11.8 4.00352H12.2C12.6296 4.00352 12.9802 4.00909 12.9992 4.92351C12.9997 4.94944 13 4.9761 13 5.00352V6.00342Z"/>
+    <path d="M16 17.0034C16 16.4511 16.4477 16.0034 17 16.0034C17.5523 16.0034 18 16.4511 18 17.0034V19.0035C18 19.0309 18.0003 19.0576 18.0008 19.0835C18.0198 19.998 18.3704 20.0035 18.8 20.0035H19.2C19.6296 20.0035 19.9802 19.998 19.9992 19.0835C19.9995 19.0679 19.9997 19.052 19.9999 19.0359L20 19.0035V5.00352C20 4.9761 19.9997 4.94944 19.9992 4.92351C19.9802 4.00909 19.6296 4.00352 19.2 4.00352H18.8C18.3704 4.00352 18.0198 4.00909 18.0008 4.92351C18.0003 4.94944 18 4.9761 18 5.00352V7.00342C18 7.5557 17.5523 8.00342 17 8.00342C16.4477 8.00342 16 7.5557 16 7.00342V5.00352C16 4.4258 16.0689 3.36237 16.9229 2.62073C17.7026 1.9435 18.6939 1.99776 18.7924 2.00316L18.8 2.00352H19.2L19.2076 2.00316C19.3061 1.99776 20.2974 1.9435 21.0771 2.62073C21.9311 3.36238 22 4.4258 22 5.00352L22 19.0035C22 19.5812 21.9311 20.6447 21.0771 21.3863C20.2974 22.0635 19.3061 22.0093 19.2076 22.0039L19.2 22.0035H18.8L18.7924 22.0039C18.6939 22.0093 17.7026 22.0635 16.9229 21.3863C16.0689 20.6447 16 19.5812 16 19.0035V17.0034Z"/>
+    <path d="M8.70744 10.7071C9.09797 10.3166 9.09797 9.68342 8.70744 9.29289C8.31692 8.90237 7.68375 8.90237 7.29323 9.29289L6.00034 10.5858C5.21929 11.3668 5.21929 12.6332 6.00034 13.4142L7.29323 14.7071C7.68375 15.0976 8.31692 15.0976 8.70744 14.7071C9.09797 14.3166 9.09797 13.6834 8.70744 13.2929L7.41455 12L8.70744 10.7071Z"/>
+    <path d="M15.293 9.29289C14.9025 9.68342 14.9025 10.3166 15.293 10.7071L16.5859 12L15.293 13.2929C14.9025 13.6834 14.9025 14.3166 15.293 14.7071C15.6836 15.0976 16.3167 15.0976 16.7073 14.7071L18.0002 13.4142C18.7812 12.6332 18.7812 11.3668 18.0002 10.5858L16.7073 9.29289C16.3167 8.90237 15.6836 8.90237 15.293 9.29289Z"/>
+    <path d="M11.0002 13C10.448 13 10.0002 13.4477 10.0002 14C10.0002 14.5523 10.448 15 11.0002 15H13.0002C13.5525 15 14.0002 14.5523 14.0002 14C14.0002 13.4477 13.5525 13 13.0002 13H11.0002Z"/>
+</svg>

package/src/assets/icons/sprite/versions.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H14.1716C14.702 2 15.2107 2.21071 15.5858 2.58579L21.4142 8.41421C21.7893 8.78929 22 9.29799 22 9.82843V14C22 15.1046 21.1046 16 20 16H11C9.89543 16 9 15.1046 9 14V4C9 2.89543 9.89543 2 11 2ZM16 5.82843L18.1716 8H17C16.4477 8 16 7.55228 16 7V5.82843ZM11 4H14V7C14 8.65685 15.3431 10 17 10H20V14H11V4Z" />
+<path d="M10 17C8.89543 17 8 16.1046 8 15V6C8 5.44772 7.55228 5 7 5C6.44772 5 6 5.44772 6 6V17C6 18.1046 6.89543 19 8 19H18C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17H10Z" />
+<path d="M7 20C5.89543 20 5 19.1046 5 18V9C5 8.44772 4.55228 8 4 8C3.44772 8 3 8.44772 3 9V20C3 21.1046 3.89543 22 5 22H15C15.5523 22 16 21.5523 16 21C16 20.4477 15.5523 20 15 20H7Z" />
+</svg>

package/src/assets/icons/sprite/video-cam-off.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M17.6943 12L20 10.3127V13.6873L17.6943 12ZM15.3846 15.5C15.3846 15.5658 15.378 15.6283 15.3661 15.6875C15.2792 16.1163 14.8665 16.5 14.3077 16.5H5.07692C4.43412 16.5 4 16.0049 4 15.5V8.5C4 7.99515 4.43412 7.5 5.07692 7.5L14.3077 7.5C14.8665 7.5 15.2792 7.88373 15.3661 8.31254C15.378 8.37173 15.3846 8.43417 15.3846 8.5V15.5ZM17.3846 9.74834V8.5C17.3846 8.30001 17.3645 8.10458 17.3263 7.91554C17.2917 7.7448 17.2422 7.57926 17.1793 7.42026C16.7347 6.29691 15.6166 5.5 14.3077 5.5L5.07692 5.5C3.37759 5.5 2 6.84315 2 8.5V15.5C2 17.1569 3.37759 18.5 5.07692 18.5H14.3077C15.6166 18.5 16.7347 17.7031 17.1793 16.5797C17.2422 16.4207 17.2917 16.2552 17.3263 16.0845C17.3645 15.8954 17.3846 15.7 17.3846 15.5V14.2517L20.3587 16.4281C21.0348 16.9228 22 16.4525 22 15.6283V8.37172C22 7.54751 21.0348 7.07718 20.3587 7.57194L17.3846 9.74834Z"/>
+    <path d="M8.5119 9.77455L9.63371 10.8931L10.7555 9.77455C11.0992 9.4319 11.6563 9.4319 12 9.77455C12.3437 10.1172 12.3437 10.6728 12 11.0154L10.8742 12.1379L11.9987 13.2591C12.3423 13.6018 12.3423 14.1573 11.9987 14.5C11.655 14.8427 11.0979 14.8427 10.7542 14.5L9.63371 13.3827L8.5132 14.5C8.16955 14.8427 7.61239 14.8427 7.26874 14.5C6.92508 14.1573 6.92508 13.6018 7.26874 13.2591L8.39322 12.1379L7.26743 11.0154C6.92378 10.6728 6.92378 10.1172 7.26743 9.77455C7.61108 9.4319 8.16825 9.4319 8.5119 9.77455Z"
+          fill="#E63E1A"/>
+</svg>

package/src/assets/icons/sprite/video-cam.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M17.6943 12L20 10.3127V13.6873L17.6943 12ZM15.3846 15.5C15.3846 15.5658 15.378 15.6283 15.3661 15.6875C15.2792 16.1163 14.8665 16.5 14.3077 16.5H5.07692C4.43412 16.5 4 16.0049 4 15.5V8.5C4 7.99515 4.43412 7.5 5.07692 7.5L14.3077 7.5C14.8665 7.5 15.2792 7.88373 15.3661 8.31254C15.378 8.37173 15.3846 8.43417 15.3846 8.5V15.5ZM17.3846 9.74834V8.5C17.3846 8.30001 17.3645 8.10458 17.3263 7.91554C17.2917 7.7448 17.2422 7.57926 17.1793 7.42026C16.7347 6.29691 15.6166 5.5 14.3077 5.5L5.07692 5.5C3.37759 5.5 2 6.84315 2 8.5V15.5C2 17.1569 3.37759 18.5 5.07692 18.5H14.3077C15.6166 18.5 16.7347 17.7031 17.1793 16.5797C17.2422 16.4207 17.2917 16.2552 17.3263 16.0845C17.3645 15.8954 17.3846 15.7 17.3846 15.5V14.2517L20.3587 16.4281C21.0348 16.9228 22 16.4525 22 15.6283V8.37172C22 7.54751 21.0348 7.07718 20.3587 7.57194L17.3846 9.74834Z"/>
+</svg>

package/src/assets/icons/sprite/zoom-in.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M17 11C17 14.3137 14.3137 17 11 17C7.68629 17 5 14.3137 5 11C5 7.68629 7.68629 5 11 5C14.3137 5 17 7.68629 17 11ZM15.9056 17.3199C14.551 18.3729 12.8487 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11C19 12.8487 18.3729 14.551 17.3199 15.9056L20.6569 19.2426C21.0474 19.6332 21.0474 20.2663 20.6569 20.6569C20.2663 21.0474 19.6332 21.0474 19.2426 20.6569L15.9056 17.3199ZM11 8C11.5523 8 12 8.44772 12 9V10H13C13.5523 10 14 10.4477 14 11C14 11.5523 13.5523 12 13 12H12V13C12 13.5523 11.5523 14 11 14C10.4477 14 10 13.5523 10 13V12H9C8.44772 12 8 11.5523 8 11C8 10.4477 8.44772 10 9 10H10V9C10 8.44772 10.4477 8 11 8Z"/>
+</svg>

package/src/assets/icons/sprite/zoom-out.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13 12C13.5523 12 14 11.5523 14 11C14 10.4477 13.5523 10 13 10H9C8.44772 10 8 10.4477 8 11C8 11.5523 8.44772 12 9 12H13Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M11 19C12.8487 19 14.551 18.3729 15.9056 17.3199L19.2426 20.6569C19.6332 21.0474 20.2663 21.0474 20.6569 20.6569C21.0474 20.2663 21.0474 19.6332 20.6569 19.2426L17.3199 15.9056C18.3729 14.551 19 12.8487 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19ZM11 17C14.3137 17 17 14.3137 17 11C17 7.68629 14.3137 5 11 5C7.68629 5 5 7.68629 5 11C5 14.3137 7.68629 17 11 17Z"/>
+</svg>

package/src/components/wt-notifications-bar/__tests__/WtNotificationsBar.spec.js

@@ -15,7 +15,7 @@ describe('WtNotificationsBar', () => {
     const wrapper = shallowMount(WtNotificationsBar, {
       global: { provide: { $eventBus: eventBus } },
     });
-    wrapper.vm.$eventBus.$emit('notification', {
+     eventBus.$emit('notification', {
       type: 'error',
       text: 'error',
     });
@@ -27,7 +27,7 @@ describe('WtNotificationsBar', () => {
     const wrapper = shallowMount(WtNotificationsBar, {
       global: { provide: { $eventBus: eventBus } },
     });
-    wrapper.vm.$eventBus.$emit('notification', {
+    eventBus.$emit('notification', {
       type: 'error',
       text: 'error',
     });
@@ -42,7 +42,7 @@ describe('WtNotificationsBar', () => {
       global: { provide: { $eventBus: eventBus } },
       data: () => ({ notificationDuration: 100 }),
     });
-    wrapper.vm.$eventBus.$emit('notification', {
+    eventBus.$emit('notification', {
       type: 'error',
       text: 'error',
     });

package/src/components/wt-notifications-bar/wt-notifications-bar.vue

@@ -17,22 +17,29 @@
 </template>
 
 <script>
+import defaultEventBus from '../../scripts/eventBus.js';
+import { _wtUiLog as loggr } from '../../scripts/logger.js';
+
 export default {
   name: 'WtNotificationsBar',
   inject: ['$eventBus'],
   data: () => ({
     notificationDuration: 4000,
     notifications: [],
+
+    eventBus: defaultEventBus,
   }),
   created() {
-    try {
-      this.$eventBus.$on('notification', this.showNotification);
-    } catch (err) {
-      console.error('wt-notifications-bar cannot work without globally registered eventBus', err);
+    if (this.$eventBus) {
+      this.eventBus = this.$eventBus;
+    } else {
+      loggr.warn({ entity: 'component', module: 'wt-notification-bar' })('no globally provided $eventBus found, using default webitel-ui eventBus');
     }
+
+    this.eventBus.$on('notification', this.showNotification);
   },
   unmounted() {
-    this.$eventBus.$off('notification', this.showNotification);
+    this.eventBus.$off('notification', this.showNotification);
   },
   methods: {
     showNotification(notification) {

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

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import Plyr from 'plyr';
+// import Plyr from 'plyr'; // breaks vitepress build, https://webitel.atlassian.net/browse/WTEL-5425?focusedCommentId=639144
 import 'plyr/src/sass/plyr.scss';
 import createPlyrURL from './scripts/createPlyrURL.js';
 
@@ -132,6 +132,8 @@ export default {
         : defaultControls;
 
       if (this.download) controls.push('download');
+
+      const Plyr = (await import('plyr')).default; // https://webitel.atlassian.net/browse/WTEL-5425?focusedCommentId=639144
       this.player = new Plyr(this.$refs.player, {
         // this.player = new Plyr('.wt-player__player', {
         autoplay: this.autoplay,

package/src/install.js

@@ -0,0 +1,24 @@
+import 'vue-multiselect/dist/vue-multiselect.css';
+import './css/main.scss';
+import generateInstance from './api/axios/generateInstance.js';
+import Components from './components/index.js'; // init all components
+import Directives from './directives/index.js'; // init all directives
+import './css/styleguide/fonts/_fonts.scss';
+import './assets/icons/sprite/index.js';
+
+export default {
+  install(app, { eventBus, router, globals = {} }) {
+    Object.keys(Directives).forEach((name) => {
+      app.directive(name, Directives[name]);
+    });
+    Object.keys(Components).forEach((name) => {
+      app.component(name, Components[name]);
+    });
+    Object.keys(globals).forEach((globalKey) => {
+      app.provide(globalKey, globals[globalKey]);
+    });
+    app.provide('$eventBus', eventBus);
+    if (router) app.use(router);
+  },
+  generateInstance,
+};

package/src/scripts/index.js

@@ -7,6 +7,7 @@ import prettifyTime from './prettifyTime.js';
 import preventHiddenPageCallsDecorator
   from './preventHiddenPageCallsDecorator.js';
 import saveAsJSON from './saveAsJSON.js';
+import { wtlog } from './logger.js';
 import {
   sortToQueryAdapter,
   queryToSortAdapter,
@@ -46,6 +47,7 @@ export {
   eventBus,
   isEmpty,
   convertDuration,
+  wtlog,
 
   // compareSize.js
   compareSize,

package/src/scripts/logger.js

@@ -0,0 +1,38 @@
+import isObject from 'lodash/isObject.js';
+
+const validateConfig = (config) => {
+  return isObject(config) && (config.entity || config.module);
+};
+
+const logger =
+  (globalApp) =>
+    (type) =>
+      (...params) => {
+    if (validateConfig(params[0])) {
+      const config = params[0];
+
+      const { app = globalApp, entity = '', module = '' } = config;
+      const timestamp = new Date();
+      const path = window?.location?.href || 'non-browser env';
+
+      return (...msgs) => {
+          const prependix = `@webitel/${app}:${entity}:${module}:`;
+
+          const appendix = `[${timestamp}][${path}]`;
+
+        return console[type](prependix, ...msgs, appendix);
+      };
+    }
+
+    return console[type](...params);
+  };
+
+export const wtlog = (app) => ({
+  info: logger(app)('info'),
+  warn: logger(app)('warn'),
+  error: logger(app)('error'),
+  log: logger(app)('log'),
+});
+
+// only for ui-sdk usage
+export const _wtUiLog = wtlog('ui-sdk');