@webitel/ui-sdk 23.12.112 → 23.12.114

package/package.json

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

package/src/components/wt-app-header/wt-app-navigator.vue

@@ -38,8 +38,8 @@
             >
               <img
                 :alt="`${app.name}-pic`"
-                class="wt-app-navigator__card__img"
                 :src="app.img"
+                class="wt-app-navigator__card__img"
               >
               <p
                 class="wt-app-navigator__card__title"
@@ -64,12 +64,12 @@ import AgentDark from './assets/agent-dark.svg';
 import AgentLight from './assets/agent-light.svg';
 import AnalyticsDark from './assets/analytics-dark.svg';
 import AnalyticsLight from './assets/analytics-light.svg';
+import AuditDark from './assets/audit-dark.svg';
+import AuditLight from './assets/audit-light.svg';
 import CrmDark from './assets/crm-dark.svg';
 import CrmLight from './assets/crm-light.svg';
 import HistoryDark from './assets/history-dark.svg';
 import HistoryLight from './assets/history-light.svg';
-import AuditDark from './assets/audit-dark.svg';
-import AuditLight from './assets/audit-light.svg';
 import SupervisorDark from './assets/supervisor-dark.svg';
 import SupervisorLight from './assets/supervisor-light.svg';
 
@@ -120,14 +120,24 @@ const props = defineProps({
 
 const isOpened = ref(false);
 
-const formattedApps = computed(() => props.apps.reduce((apps, app) => ({
+const order = [
+  WebitelApplications.AGENT,
+  WebitelApplications.SUPERVISOR,
+  WebitelApplications.HISTORY,
+  WebitelApplications.ADMIN,
+  WebitelApplications.ANALYTICS,
+  WebitelApplications.AUDIT,
+  WebitelApplications.CRM,
+];
+
+const formattedApps = computed(() => props.apps.reduce((apps, app) => ([
   ...apps,
-  [app.name]: {
+  {
     ...app,
     img: props.darkMode ? pics[app.name].dark : pics[app.name].light,
     currentApp: props.currentApp === app.name,
   },
-}), {}));
+]), []).sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)));
 
 function close() {
   isOpened.value = false;
@@ -189,14 +199,14 @@ function close() {
 
 // a tag
 .wt-app-navigator__card__link {
-  box-sizing: border-box;
   display: inline-flex;
   flex-direction: column;
   justify-content: space-between;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
-  cursor: pointer;
   padding: var(--wt-app-navigator-item-padding);
+  cursor: pointer;
 }
 
 // img inside a

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

@@ -10,6 +10,7 @@
   --table-row-padding: var(--spacing-xs);
 
   --wt-table-head-border-color: var(--grey-lighten-1);
+  --wt-table-head-background-color: var(--content-wrapper-color);
   --wt-table-primary-color: var(--content-wrapper-color);
   --wt-table-zebra-color: var(--dp-18-surface-color);
 }

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

@@ -247,7 +247,7 @@ export default {
   border: var(--table-head-border);
   border-color: var(--wt-table-head-border-color);
   border-radius: var(--border-radius);
-  background: transparent;
+  background: var(--wt-table-head-background-color);
 }
 
 .wt-table__th,