@webitel/ui-sdk 24.12.48 → 24.12.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.48",
+  "version": "24.12.51",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -129,7 +129,7 @@
     "plyr": "3.7.8",
     "query-string": "^9.1.1",
     "sortablejs": "^1.15.3",
-    "vue-i18n": "^9.14.1",
+    "vue-i18n": "^11.0.1",
     "vue-multiselect": "^3.1.0",
     "vue-observe-visibility": "^2.0.0-alpha.1",
     "vue-router": "^4.4.5",
@@ -180,7 +180,7 @@
     "@rollup/rollup-linux-x64-gnu": "4.9.5"
   },
   "engines": {
-    "npm": "10.9.0",
-    "node": "v22.12.0"
+    "npm": "10",
+    "node": "v22"
   }
 }

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

@@ -1,16 +1,26 @@
 <template>
-  <aside
-    :class="{ 'wt-badge--outside': outside }"
-    :style="{ background: `var(--${colorVariable})` }"
+  <div
+    :class="{
+      'wt-badge--outside': outside,
+      'wt-badge--compat-mode': !hasSlot,
+    }"
     class="wt-badge"
   >
-    <img
-      v-if="iconBadgePic"
-      :alt="iconBadge"
-      :src="iconBadgePic"
-      class="wt-badge__pic"
-    />
-  </aside>
+    <span
+      v-show="!hidden"
+      :style="{ background: `var(--${colorVariable})` }"
+      class="wt-badge-indicator"
+    >
+      <img
+        v-if="iconBadgePic"
+        :alt="iconBadge"
+        :src="iconBadgePic"
+        class="wt-badge-indicator__pic"
+      />
+    </span>
+
+    <slot />
+  </div>
 </template>
 
 <script>
@@ -34,6 +44,10 @@ export default {
     iconBadge: {
       type: String,
     },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     iconBadgePic() {
@@ -48,6 +62,13 @@ export default {
           return null;
       }
     },
+    /*
+     compatibility with old usage, when wt-badge was just placed in a wrapper,
+     being a sibling of the badged content, not wrapping badged content itself
+     */
+    hasSlot() {
+      return !!this.$slots.default;
+    },
   },
 };
 </script>
@@ -58,21 +79,32 @@ export default {
 
 <style lang="scss" scoped>
 .wt-badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: var(--wt-badge-size);
-  height: var(--wt-badge-size);
-  border-radius: 50%;
+  position: relative;
 
-  &--outside {
-    transform: translate(100%, -100%);
+  &:not(.wt-badge--compat-mode) {
+    width: fit-content;
+    height: fit-content;
   }
 
-  &__pic {
+  .wt-badge-indicator {
     position: absolute;
+    top: 0;
+    right: 0;
     width: var(--wt-badge-size);
     height: var(--wt-badge-size);
+    border-radius: 50%;
+
+    &__pic {
+      position: absolute;
+      width: var(--wt-badge-size);
+      height: var(--wt-badge-size);
+    }
+  }
+
+  &--outside {
+    .wt-badge-indicator {
+      transform: translate(100%, -100%);
+    }
   }
 }
 </style>

package/src/components/wt-icon-action/iconMappings.js

@@ -0,0 +1,14 @@
+import { IconAction } from '../../enums/index.js';
+
+export const WtIconActionIconMappings = Object.freeze({
+  [IconAction.ADD]: 'plus',
+  [IconAction.DELETE]: 'bucket',
+  [IconAction.DOWNLOAD]: 'download',
+  [IconAction.EDIT]: 'edit',
+  [IconAction.HISTORY]: 'history',
+  [IconAction.REFRESH]: 'refresh',
+  [IconAction.EXPAND]: 'expand',
+  [IconAction.COLLAPSE]: 'collapse',
+  [IconAction.FILTERS]: 'filter',
+  [IconAction.COLUMNS]: 'column-select',
+});

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

@@ -14,8 +14,9 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { IActionData } from './IActionData.js';
+
 import IconAction from '../../enums/IconAction/IconAction.enum.js';
+import { WtIconActionIconMappings } from './iconMappings.js';
 
 const props = defineProps({
   /**
@@ -45,16 +46,19 @@ const emit = defineEmits(['click']);
 const { t } = useI18n();
 
 const iconAction = computed(() => {
-  const data = IActionData[props.action];
+  const icon = WtIconActionIconMappings[props.action];
 
-  if (!data) {
+  if (!icon) {
     console.error(
       `Unknown action for wt-icon-action component: ${props.action}`,
     );
     return { icon: 'edit', hint: props.action };
   }
 
-  return data;
+  return {
+    icon,
+    hint: `webitelUI.iconAction.hints.${props.action}`,
+  };
 });
 </script>
 

package/src/locale/en/en.js

@@ -5,7 +5,9 @@ import {
   ChannelType,
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
+
 import ChatGatewayProvider from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import { IconAction } from '../../enums/index.js';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections from '../../enums/WebitelApplications/AuditorSections.enum.js';
@@ -18,6 +20,9 @@ import { snakeToCamel } from '../../scripts/caseConverters.js';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    download: 'Download',
+    history: 'History',
+    filter: ({ plural }) => plural(['Filter', 'Filters']),
     total: 'Total',
     ok: 'Ok',
     save: 'Save',
@@ -349,11 +354,18 @@ export default {
       breakOut: 'Break Out',
     },
     iconAction: {
-      deleteActionHint: 'Delete',
-      editActionHint: 'Edit',
-      addActionHint: 'Add',
-      historyActionHint: 'History',
-      downloadActionHint: 'Download',
+      hints: {
+        [IconAction.DELETE]: ({ linked }) => linked('reusable.delete'),
+        [IconAction.EDIT]: ({ linked }) => linked('reusable.edit'),
+        [IconAction.ADD]: ({ linked }) => linked('reusable.add'),
+        [IconAction.HISTORY]: ({ linked }) => linked('reusable.history'),
+        [IconAction.DOWNLOAD]: ({ linked }) => linked('reusable.download'),
+        [IconAction.FILTERS]: ({ linked }) => linked('reusable.filter'),
+        [IconAction.COLUMNS]: 'Select columns',
+        [IconAction.REFRESH]: ({ linked }) => linked('reusable.refresh'),
+        [IconAction.EXPAND]: ({ linked }) => linked('reusable.expand'),
+        [IconAction.COLLAPSE]: ({ linked }) => linked('reusable.collapse'),
+      },
     },
     errorPages: {
       goBack: 'Go back',

package/src/locale/ru/ru.js

@@ -5,7 +5,9 @@ import {
   ChannelType,
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
+
 import ChatGatewayProvider from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import { IconAction } from '../../enums/index.js';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections from '../../enums/WebitelApplications/AuditorSections.enum.js';
@@ -18,6 +20,9 @@ import { snakeToCamel } from '../../scripts/caseConverters.js';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    download: 'Скачать',
+    history: 'История',
+    filter: 'Фильтр | Фильтры',
     total: 'Всего',
     ok: 'Ок',
     save: 'Сохранить',
@@ -347,11 +352,18 @@ export default {
       breakOut: 'Принудительный перерыв',
     },
     iconAction: {
-      deleteActionHint: 'Удалить',
-      editActionHint: 'Редактировать',
-      addActionHint: 'Добавить',
-      historyActionHint: 'История',
-      downloadActionHint: 'Скачать',
+      hints: {
+        [IconAction.DELETE]: ({ linked }) => linked('reusable.delete'),
+        [IconAction.EDIT]: ({ linked }) => linked('reusable.edit'),
+        [IconAction.ADD]: ({ linked }) => linked('reusable.add'),
+        [IconAction.HISTORY]: ({ linked }) => linked('reusable.history'),
+        [IconAction.DOWNLOAD]: ({ linked }) => linked('reusable.download'),
+        [IconAction.FILTERS]: ({ linked }) => linked('reusable.filter', 2),
+        [IconAction.COLUMNS]: 'Добавить колонки',
+        [IconAction.REFRESH]: ({ linked }) => linked('reusable.refresh'),
+        [IconAction.EXPAND]: ({ linked }) => linked('reusable.expand'),
+        [IconAction.COLLAPSE]: ({ linked }) => linked('reusable.collapse'),
+      },
     },
     errorPages: {
       goBack: 'Вернуться назад',

package/src/locale/ua/ua.js

@@ -5,7 +5,9 @@ import {
   ChannelType,
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
+
 import ChatGatewayProvider from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import { IconAction } from '../../enums/index.js';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections from '../../enums/WebitelApplications/AuditorSections.enum.js';
@@ -18,6 +20,9 @@ import { snakeToCamel } from '../../scripts/caseConverters.js';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    download: 'Завантажити',
+    history: 'Історія',
+    filter: 'Фільтр | Фільтри',
     total: 'Всього',
     ok: 'Ок',
     save: 'Зберегти',
@@ -347,11 +352,18 @@ export default {
       breakOut: 'Примусова перерва',
     },
     iconAction: {
-      deleteActionHint: 'Видалити',
-      editActionHint: 'Редагувати',
-      addActionHint: 'Додати',
-      historyActionHint: 'Історія',
-      downloadActionHint: 'Скачати',
+      hints: {
+        [IconAction.DELETE]: ({ linked }) => linked('reusable.delete'),
+        [IconAction.EDIT]: ({ linked }) => linked('reusable.edit'),
+        [IconAction.ADD]: ({ linked }) => linked('reusable.add'),
+        [IconAction.HISTORY]: ({ linked }) => linked('reusable.history'),
+        [IconAction.DOWNLOAD]: ({ linked }) => linked('reusable.download'),
+        [IconAction.FILTERS]: ({ linked }) => linked('reusable.filter', 2),
+        [IconAction.COLUMNS]: 'Додати колонки',
+        [IconAction.REFRESH]: ({ linked }) => linked('reusable.refresh'),
+        [IconAction.EXPAND]: ({ linked }) => linked('reusable.expand'),
+        [IconAction.COLLAPSE]: ({ linked }) => linked('reusable.collapse'),
+      },
     },
     errorPages: {
       goBack: 'Повернутись назад',

package/src/components/wt-icon-action/IActionData.js

@@ -1,46 +0,0 @@
-import IconAction from '../../enums/IconAction/IconAction.enum.js';
-
-const IActionData = Object.freeze({
-  [IconAction.ADD]: {
-    value: IconAction.ADD,
-    icon: 'plus',
-    hint: 'webitelUI.iconAction.addActionHint',
-  },
-  [IconAction.DELETE]: {
-    value: IconAction.DELETE,
-    icon: 'bucket',
-    hint: 'webitelUI.iconAction.deleteActionHint',
-  },
-  [IconAction.DOWNLOAD]: {
-    value: IconAction.DOWNLOAD,
-    icon: 'download',
-    hint: 'webitelUI.iconAction.downloadActionHint',
-  },
-  [IconAction.EDIT]: {
-    value: IconAction.EDIT,
-    icon: 'edit',
-    hint: 'webitelUI.iconAction.editActionHint',
-  },
-  [IconAction.HISTORY]: {
-    value: IconAction.HISTORY,
-    icon: 'history',
-    hint: 'webitelUI.iconAction.historyActionHint',
-  },
-  [IconAction.REFRESH]: {
-    value: IconAction.REFRESH,
-    icon: 'refresh',
-    hint: 'reusable.refresh',
-  },
-  [IconAction.EXPAND]: {
-    value: IconAction.EXPAND,
-    icon: 'expand',
-    hint: 'reusable.expand',
-  },
-  [IconAction.COLLAPSE]: {
-    value: IconAction.COLLAPSE,
-    icon: 'collapse',
-    hint: 'reusable.collapse',
-  },
-});
-
-export { IActionData };