Feat/user styles transitions [WTEL-5305][WTEL-5306]

package.json

@@ -20,7 +20,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.10.49",
+    "@webitel/ui-sdk": "^24.10.56",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",

src/modules/_shared/object-wrap/the-object-wrap.vue

@@ -5,25 +5,17 @@
       <app-header />
       <div class="object-content-wrap">
         <router-view v-slot="{ Component }">
-          <transition-slide
-            :offset="{
-              enter: ['-50%', 0],
-              leave: [0, 0]
-            }"
-            duration="200"
-            mode="out-in"
-            appear
-          >
+          <wt-route-transition>
             <component :is="Component" />
-          </transition-slide>
+          </wt-route-transition>
         </router-view>
       </div>
     </section>
   </main>
 </template>
 
 <script setup>
-import { TransitionSlide } from '@morev/vue-transitions';
+import WtRouteTransition from '@webitel/ui-sdk/src/components/on-demand/wt-route-transition/wt-route-transition.vue';
 import AppHeader from '../../_reusable/app-header/components/app-header.vue';
 </script>
 

src/modules/directory/modules/users/components/opened-user-devices.vue

@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.devices.devices', 2) }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :disabled="disableUserInput"
         :label="t('objects.directory.users.defaultDevice')"

src/modules/directory/modules/users/components/opened-user-general.vue

@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.generalInfo') }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-input
         :disabled="disableUserInput"
         :label="t('objects.name')"

src/modules/directory/modules/users/components/opened-user-license.vue

@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.license.license', 1) }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"

src/modules/directory/modules/users/components/opened-user-roles.vue

@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.permissions.permissionsRole') }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"

src/modules/directory/modules/users/components/opened-user-variables.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.users.variables') }}
       </h3>
       <wt-icon-action
@@ -10,7 +10,7 @@
         @click="addVariable"
       />
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <div class="variables">
         <div
           v-for="(variable, key) in itemInstance.variables"

src/modules/directory/modules/users/components/opened-user.vue

@@ -1,5 +1,6 @@
 <template>
   <wt-page-wrapper
+    class="opened-card"
     :actions-panel="!!currentTab.filters"
   >
     <template #header>
@@ -23,7 +24,7 @@
 
     <template #main>
       <form
-        class="main-container"
+        class="opened-card-form"
         @submit.prevent="save"
       >
         <wt-tabs
@@ -33,6 +34,7 @@
         />
         <router-view v-slot="{ Component }">
           <component
+            class="opened-card-tabs__tab"
             :is="Component"
             :namespace="cardNamespace"
             :v="v$"

src/modules/directory/modules/users/components/the-users.vue

@@ -1,7 +1,7 @@
 <template>
   <wt-page-wrapper
+    class="table-page users"
     :actions-panel="false"
-    class="users"
   >
     <template #header>
       <wt-page-header
@@ -23,12 +23,12 @@
         @close="closeDelete"
       />
 
-      <section class="main-section__wrapper">
-        <header class="content-header">
-          <h3 class="content-title">
+      <section class="table-section">
+        <header class="table-title">
+          <h3 class="table-title__title">
             {{ t('objects.directory.users.allUsers') }}
           </h3>
-          <div class="content-header__actions-wrap">
+          <div class="table-title__actions-wrap">
             <filter-search
               :namespace="filtersNamespace"
               name="search"
@@ -65,20 +65,8 @@
           class="dummy-wrapper"
         />
         <div class="table-wrapper">
-          <div
-            style="display:contents;"
-            v-if="dataList.length && !isLoading"
-          >
-          <transition-slide
-            :offset="{
-              enter: ['-5%', 0],
-              leave: [0, 0]
-            }"
-            duration="200"
-            mode="out-in"
-            appear
-          >
-          <wt-table
+          <wt-table-transition v-if="dataList.length && !isLoading">
+            <wt-table
             :selected="selected"
             :data="dataList"
             :grid-actions="hasEditAccess || hasDeleteAccess"
@@ -87,53 +75,52 @@
             @update:selected="setSelected"
             @sort="sort"
           >
-            <template #name="{ item }">
-              <adm-item-link
-                :id="item.id"
-                :route-name="RouteNames.USERS"
-              >
-                {{ item.name }}
-              </adm-item-link>
-            </template>
-            <template #status="{ item }">
-              <user-status :presence="item.presence" />
-            </template>
-            <template #username="{ item }">
-              {{ item.username }}
-            </template>
-            <template #extensions="{ item }">
-              {{ item.extension }}
-            </template>
-            <template #DnD="{ item }">
-              <wt-switcher
-                :disabled="!hasEditAccess"
-                :value="getDND(item.presence)"
-                @change="setDND({item, value: $event})"
-              />
-            </template>
-            <template #actions="{ item }">
-              <adm-item-link
-                v-if="hasEditAccess"
-                :id="item.id"
-                :route-name="RouteNames.USERS">
-
+              <template #name="{ item }">
+                <adm-item-link
+                  :id="item.id"
+                  :route-name="RouteNames.USERS"
+                >
+                  {{ item.name }}
+                </adm-item-link>
+              </template>
+              <template #status="{ item }">
+                <user-status :presence="item.presence" />
+              </template>
+              <template #username="{ item }">
+                {{ item.username }}
+              </template>
+              <template #extensions="{ item }">
+                {{ item.extension }}
+              </template>
+              <template #DnD="{ item }">
+                <wt-switcher
+                  :disabled="!hasEditAccess"
+                  :value="getDND(item.presence)"
+                  @change="setDND({item, value: $event})"
+                />
+              </template>
+              <template #actions="{ item }">
+                <adm-item-link
+                  v-if="hasEditAccess"
+                  :id="item.id"
+                  :route-name="RouteNames.USERS">
+
+                  <wt-icon-action
+                    action="edit"
+                  />
+                </adm-item-link>
                 <wt-icon-action
-                  action="edit"
+                  v-if="hasDeleteAccess"
+                  action="delete"
+                  class="table-action"
+                  @click="askDeleteConfirmation({
+                    deleted: [item],
+                    callback: () => deleteData(item),
+                  })"
                 />
-              </adm-item-link>
-              <wt-icon-action
-                v-if="hasDeleteAccess"
-                action="delete"
-                class="table-action"
-                @click="askDeleteConfirmation({
-                  deleted: [item],
-                  callback: () => deleteData(item),
-                })"
-              />
-            </template>
-          </wt-table>
-          </transition-slide>
-          </div>
+              </template>
+            </wt-table>
+          </wt-table-transition>
           <filter-pagination
             :namespace="filtersNamespace"
             :next="isNext"
@@ -148,6 +135,7 @@
 import { TransitionSlide } from '@morev/vue-transitions';
 import DeleteConfirmationPopup from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+import WtTableTransition from '@webitel/ui-sdk/src/components/on-demand/wt-table-transition/wt-table-transition.vue';
 import FilterPagination from '@webitel/ui-sdk/src/modules/Filters/components/filter-pagination.vue';
 import FilterSearch from '@webitel/ui-sdk/src/modules/Filters/components/filter-search.vue';
 import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';