@coopenomics/desktop 2025.7.1 → 2025.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coopenomics/desktop",
-  "version": "2025.7.1",
+  "version": "2025.7.3",
   "description": "A Desktop Project",
   "productName": "Desktop App",
   "author": "Alex Ant <dacom.dark.sun@gmail.com>",
@@ -24,8 +24,8 @@
     "start": "node -r ./alias-resolver.js dist/ssr/index.js"
   },
   "dependencies": {
-    "@coopenomics/controller": "2025.7.1",
-    "@coopenomics/sdk": "2025.7.1",
+    "@coopenomics/controller": "2025.7.3",
+    "@coopenomics/sdk": "2025.7.3",
     "@dicebear/collection": "^9.0.1",
     "@dicebear/core": "^9.0.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -50,7 +50,7 @@
     "@wharfkit/wallet-plugin-privatekey": "^1.1.0",
     "axios": "^1.2.1",
     "compression": "^1.7.4",
-    "cooptypes": "2025.7.1",
+    "cooptypes": "2025.7.3",
     "dompurify": "^3.1.7",
     "dotenv": "^16.4.5",
     "email-regex": "^5.0.0",
@@ -103,5 +103,5 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   },
-  "gitHead": "ac8836628eb82672b481dbf86050918f41bf24ca"
+  "gitHead": "3bf3c7987336453bf1a5fc0260b8f5b09c230506"
 }

package/src/app/layouts/default.vue

@@ -16,9 +16,7 @@ q-layout(view='lHh LpR fff')
 
   q-page-container
     q-page
-      .absolute-full.flex.flex-center.bg-white.z-top(
-        v-if='desktop.isWorkspaceChanging'
-      )
+      .absolute-full.flex.flex-center.z-top(v-if='desktop.isWorkspaceChanging')
         Loader
 
       router-view(v-else)

package/src/pages/Cooperative/ListOfDocuments/ListOfDocumentsPage.vue

@@ -1,24 +1,23 @@
 <template lang="pug">
 q-page.padding
   ListOfDocumentsWidget(
-    :username="coopname"
-    :filter="{}"
-    :showFilter="true"
-    :initialDocumentType="typeForToggle"
+    :username='coopname',
+    :filter='{}',
+    :showFilter='false',
+    :initialDocumentType='typeForToggle'
   )
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useSystemStore } from 'src/entities/System/model'
-import { ListOfDocumentsWidget } from 'src/widgets/Cooperative/Documents/ListOfDocuments/ui'
-import type { DocumentType } from 'src/entities/Document/model/types'
+import { ref, computed } from 'vue';
+import { useSystemStore } from 'src/entities/System/model';
+import { ListOfDocumentsWidget } from 'src/widgets/Cooperative/Documents/ListOfDocuments/ui';
+import type { DocumentType } from 'src/entities/Document/model/types';
 
 // Получаем системную информацию
-const { info } = useSystemStore()
-const coopname = computed(() => info.coopname)
+const { info } = useSystemStore();
+const coopname = computed(() => info.coopname);
 
 // Переменная для отслеживания типа в интерфейсе
-const typeForToggle = ref<DocumentType>('newsubmitted')
-
+const typeForToggle = ref<DocumentType>('newresolved');
 </script>

package/src/shared/ui/BaseDocument/BaseDocument.vue

@@ -172,7 +172,6 @@ const shadowStyles = computed(
   }
 
   th {
-    background-color: #f4f4f4;
     width: 30% !important;
     max-width: 30% !important;
     word-break: break-word !important;
@@ -219,7 +218,6 @@ const shadowStyles = computed(
   }
 
    th {
-    background-color: #f4f4f4;
     width: 30% !important;
     max-width: 30% !important;
     word-break: break-word !important;

package/src/shared/ui/CardStyles/index.scss

@@ -4,10 +4,12 @@
   width: 100%;
   border: 1px solid rgba(0, 0, 0, 0.08);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  background-color: var(--q-surface);
 
   .q-dark & {
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    background-color: rgba(255, 255, 255, 0.05);
   }
 }
 
@@ -20,7 +22,7 @@
 
   .q-dark & {
     background-color: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.15);
   }
 
   &:last-child {
@@ -38,7 +40,7 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
     .q-dark & {
-      background-color: rgba(255, 255, 255, 0.08);
+      background-color: rgba(255, 255, 255, 0.1);
     }
   }
 }
@@ -48,10 +50,12 @@
   border-radius: 16px;
   border: 1px solid rgba(0, 0, 0, 0.08);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  background-color: var(--q-surface);
 
   .q-dark & {
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    background-color: rgba(255, 255, 255, 0.05);
   }
 
   .page-header {
@@ -82,10 +86,12 @@
   border-radius: 16px;
   border: 1px solid rgba(0, 0, 0, 0.08);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  background-color: var(--q-surface);
 
   .q-dark & {
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    background-color: rgba(255, 255, 255, 0.05);
   }
 
   .section-header {
@@ -114,7 +120,7 @@
 
       .q-dark & {
         background-color: rgba(255, 255, 255, 0.05);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.15);
       }
 
       &:last-child {
@@ -127,7 +133,7 @@
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
         .q-dark & {
-          background-color: rgba(255, 255, 255, 0.08);
+          background-color: rgba(255, 255, 255, 0.1);
         }
       }
 

package/src/shared/ui/MeetCompactCard/ui/MeetCompactCard.vue

@@ -54,12 +54,19 @@ const meetStatus = useMeetStatus(props.meet);
   cursor: pointer;
   transition: all 0.3s ease;
 
+  // Дополнительная стилизация для темной темы
+  .q-dark & {
+    background-color: rgba(255, 255, 255, 0.07) !important;
+    border: 1px solid rgba(255, 255, 255, 0.25) !important;
+  }
+
   &:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 
     .q-dark & {
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+      background-color: rgba(255, 255, 255, 0.1) !important;
     }
 
     .balance-card {

package/src/shared/ui/ShadowHtml/ShadowHtml.vue

@@ -4,23 +4,15 @@ div(ref='shadowHost')
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue';
 
-console.log('ShadowHtml: component script setup starts');
-
 const props = defineProps({
   html: { type: String, required: true },
   styles: { type: String, required: false, default: '' },
 });
 
-console.log('ShadowHtml initial props:', {
-  html_length: props.html.length,
-  styles_length: props.styles.length,
-});
-
 const shadowHost = ref<HTMLDivElement | null>(null);
 let shadowRoot: ShadowRoot | null = null;
 function renderToShadow() {
   if (shadowRoot) {
-    console.log('ShadowHtml: rendering content to shadow root');
     shadowRoot.innerHTML =
       (props.styles ? `<style>${props.styles}</style>` : '') + props.html;
   } else {
@@ -30,7 +22,6 @@ function renderToShadow() {
   }
 }
 onMounted(() => {
-  console.log('ShadowHtml: onMounted hook triggered.');
   if (shadowHost.value) {
     if (!shadowRoot) {
       console.log('ShadowHtml: shadowHost found, attaching shadow DOM.');
@@ -50,6 +41,4 @@ watch(
     renderToShadow();
   },
 );
-
-console.log('ShadowHtml: component script setup ends');
 </script>

package/src/shared/ui/UserDataForm/OrganizationDataForm/OrganizationDataForm.vue

@@ -1,130 +1,228 @@
 <template lang="pug">
-div(v-if="userData.organization_data").q-gutter-sm.q-mt-md
+.q-gutter-sm.q-mt-md(v-if='userData.organization_data')
+  q-select.q-mb-md(
+    v-model='userData.organization_data.type',
+    label='Выберите тип организации',
+    standout='bg-teal text-white',
+    :options='[ { label: "Потребительский Кооператив", value: Zeus.OrganizationType.COOP }, { label: "Производственный Кооператив", value: Zeus.OrganizationType.PRODCOOP }, { label: "ООО", value: Zeus.OrganizationType.OOO }, ]',
+    emit-value,
+    map-options
+  )
+
+  q-input(
+    v-model='userData.organization_data.short_name',
+    standout='bg-teal text-white',
+    hint='ПК Ромашка',
+    label='Краткое наименование организации',
+    :rules='[(val) => notEmpty(val)]',
+    autocomplete='off'
+  )
+  q-input(
+    v-model='userData.organization_data.full_name',
+    standout='bg-teal text-white',
+    hint='Потребительский Кооператив \'Ромашка\'',
+    label='Полное наименование организации',
+    :rules='[(val) => notEmpty(val)]',
+    autocomplete='off'
+  )
+  q-input(
+    v-model='userData.organization_data.represented_by.last_name',
+    standout='bg-teal text-white',
+    label='Фамилия представителя',
+    hint='',
+    :rules='[(val) => notEmpty(val), (val) => validatePersonalName(val)]',
+    autocomplete='off'
+  )
+  q-input(
+    v-model='userData.organization_data.represented_by.first_name',
+    standout='bg-teal text-white',
+    label='Имя представителя',
+    hint='',
+    :rules='[(val) => notEmpty(val), (val) => validatePersonalName(val)]',
+    autocomplete='off'
+  )
+  q-input(
+    v-model='userData.organization_data.represented_by.middle_name',
+    standout='bg-teal text-white',
+    label='Отчество представителя',
+    hint='',
+    :rules='[(val) => validatePersonalName(val)]',
+    autocomplete='off'
+  )
+
+  q-input(
+    v-model='userData.organization_data.represented_by.based_on',
+    standout='bg-teal text-white',
+    label='Представитель действует на основании',
+    hint='решения общего собрания №102 от 01.01.2025 г',
+    :rules='[(val) => notEmpty(val)]',
+    autocomplete='off'
+  )
+  q-input(
+    v-model='userData.organization_data.represented_by.position',
+    standout='bg-teal text-white',
+    label='Должность представителя',
+    hint='председатель совета',
+    :rules='[(val) => notEmpty(val)]',
+    autocomplete='off'
+  )
+
+  q-input(
+    v-model='userData.organization_data.phone',
+    standout='bg-teal text-white',
+    label='Номер телефона представителя',
+    mask='+7 (###) ###-##-##',
+    fill-mask,
+    hint='',
+    :rules='[(val) => notEmpty(val), (val) => notEmptyPhone(val)]',
+    autocomplete='off'
+  )
+
   q-select(
-    v-model="userData.organization_data.type"
-    label="Выберите тип организации"
-    standout="bg-teal text-white"
-    :options="[{ label: 'Потребительский Кооператив', value: 'coop' }, { label: 'Производственный Кооператив', value: 'prodcoop' }, { label: 'ООО', value: 'ooo' }]"
-    emit-value
-    map-options).q-mb-md
-    
-  q-input(v-model="userData.organization_data.short_name" standout="bg-teal text-white" hint="ПК Ромашка" label="Краткое наименование организации" :rules="[val => notEmpty(val)]" autocomplete="off")
-  q-input(v-model="userData.organization_data.full_name" standout="bg-teal text-white" hint="Потребительский Кооператив 'Ромашка'" label="Полное наименование организации" :rules="[val => notEmpty(val)]" autocomplete="off")
-  q-input(v-model="userData.organization_data.represented_by.last_name" standout="bg-teal text-white" label="Фамилия представителя" hint="" :rules="[val => notEmpty(val), val => validatePersonalName(val)]" autocomplete="off")
-  q-input(v-model="userData.organization_data.represented_by.first_name" standout="bg-teal text-white" label="Имя представителя" hint="" :rules="[val => notEmpty(val), val => validatePersonalName(val)]" autocomplete="off")
-  q-input(v-model="userData.organization_data.represented_by.middle_name" standout="bg-teal text-white" label="Отчество представителя" hint="" :rules="[val => validatePersonalName(val)]" autocomplete="off")
-
-  q-input(v-model="userData.organization_data.represented_by.based_on" standout="bg-teal text-white" label="Представитель действует на основании" hint="решения общего собрания №102 от 01.01.2025 г" :rules="[val => notEmpty(val)]" autocomplete="off")
-  q-input(v-model="userData.organization_data.represented_by.position" standout="bg-teal text-white" label="Должность представителя" hint="председатель совета" :rules="[val => notEmpty(val)]" autocomplete="off")
-
-  q-input(v-model="userData.organization_data.phone" standout="bg-teal text-white" label="Номер телефона представителя"  mask="+7 (###) ###-##-##" fill-mask  hint="" :rules="[val => notEmpty(val), val => notEmptyPhone(val)]" autocomplete="off")
-
-  q-select(v-model="userData.organization_data.country" standout="bg-teal text-white" map-options emit-value option-label="label" option-value="value" label="Страна" :options="[{ label: 'Россия', value: 'Russia' }]" :rules="[val => notEmpty(val)]" autocomplete="off")
-  q-input(v-model="userData.organization_data.city" standout="bg-teal text-white" label="Город" hint="" :rules="[val => notEmpty(val)]" autocomplete="off")
-  q-input(v-model="userData.organization_data.full_address" standout="bg-teal text-white" hint="" label="Юридический адрес регистрации" :rules="[val => notEmpty(val)]" autocomplete="off")
-  q-input(v-model="userData.organization_data.fact_address" standout="bg-teal text-white" hint="" label="Фактический адрес" :rules="[val => notEmpty(val)]" autocomplete="off")
+    v-model='userData.organization_data.country',
+    standout='bg-teal text-white',
+    map-options,
+    emit-value,
+    option-label='label',
+    option-value='value',
+    label='Страна',
+    :options='[{ label: "Россия", value: "Russia" }]',
+    :rules='[(val) => notEmpty(val)]',
+    autocomplete='off'
+  )
+  q-input(
+    v-model='userData.organization_data.city',
+    standout='bg-teal text-white',
+    label='Город',
+    hint='',
+    :rules='[(val) => notEmpty(val)]',
+    autocomplete='off'
+  )
+  q-input(
+    v-model='userData.organization_data.full_address',
+    standout='bg-teal text-white',
+    hint='',
+    label='Юридический адрес регистрации',
+    :rules='[(val) => notEmpty(val)]',
+    autocomplete='off'
+  )
+  q-input(
+    v-model='userData.organization_data.fact_address',
+    standout='bg-teal text-white',
+    hint='',
+    label='Фактический адрес',
+    :rules='[(val) => notEmpty(val)]',
+    autocomplete='off'
+  )
     template(v-slot:append)
-      q-btn(dense size="sm" color="teal" @click="userData.organization_data.fact_address = userData.organization_data.full_address") совпадает
+      q-btn(
+        dense,
+        size='sm',
+        color='teal',
+        @click='userData.organization_data.fact_address = userData.organization_data.full_address'
+      ) совпадает
 
   q-input(
-    v-model="userData.organization_data.details.inn"
-    standout="bg-teal text-white"
-    mask="############"
-    label="ИНН организации"
-    hint="10 или 12 цифр"
-    :rules="[val => notEmpty(val), val => (val.length === 10 || val.length === 12) || 'ИНН должен содержать 10 или 12 цифр']"
-    autocomplete="off"
+    v-model='userData.organization_data.details.inn',
+    standout='bg-teal text-white',
+    mask='############',
+    label='ИНН организации',
+    hint='10 или 12 цифр',
+    :rules='[(val) => notEmpty(val), (val) => val.length === 10 || val.length === 12 || "ИНН должен содержать 10 или 12 цифр"]',
+    autocomplete='off'
   )
 
   q-input(
-    v-model="userData.organization_data.details.ogrn"
-    standout="bg-teal text-white"
-    mask="###############"
-    label="ОГРН организации"
-    hint="13 или 15 цифр"
-    :rules="[val => notEmpty(val), val => (val.length === 13 || val.length === 15) || 'ОГРН должен содержать 13 или 15 цифр']"
-    autocomplete="off"
+    v-model='userData.organization_data.details.ogrn',
+    standout='bg-teal text-white',
+    mask='###############',
+    label='ОГРН организации',
+    hint='13 или 15 цифр',
+    :rules='[(val) => notEmpty(val), (val) => val.length === 13 || val.length === 15 || "ОГРН должен содержать 13 или 15 цифр"]',
+    autocomplete='off'
   )
 
   q-input(
-    v-model="userData.organization_data.details.kpp"
-    standout="bg-teal text-white"
-    mask="#########"
-    label="КПП организации"
-    hint="9 цифр"
-    :rules="[val => notEmpty(val), val => val.length === 9 || 'КПП должен содержать 9 цифр']"
-    autocomplete="off"
+    v-model='userData.organization_data.details.kpp',
+    standout='bg-teal text-white',
+    mask='#########',
+    label='КПП организации',
+    hint='9 цифр',
+    :rules='[(val) => notEmpty(val), (val) => val.length === 9 || "КПП должен содержать 9 цифр"]',
+    autocomplete='off'
   )
 
-
   q-input(
-    v-model="userData.organization_data.bank_account.bank_name"
-    standout="bg-teal text-white"
-    label="Наименование банка"
-    hint="ПАО Сбербанк"
-    :rules="[val => notEmpty(val)]"
-    autocomplete="off"
+    v-model='userData.organization_data.bank_account.bank_name',
+    standout='bg-teal text-white',
+    label='Наименование банка',
+    hint='ПАО Сбербанк',
+    :rules='[(val) => notEmpty(val)]',
+    autocomplete='off'
   )
 
   q-input(
-    v-model="userData.organization_data.bank_account.details.corr"
-    standout="bg-teal text-white"
-    mask="####################"
-    label="Корреспондентский счет"
-    hint="20 цифр"
-    :rules="[val => notEmpty(val), val => val.length === 20 || 'Корреспондентский счет должен содержать 20 цифр']"
-    autocomplete="off"
+    v-model='userData.organization_data.bank_account.details.corr',
+    standout='bg-teal text-white',
+    mask='####################',
+    label='Корреспондентский счет',
+    hint='20 цифр',
+    :rules='[(val) => notEmpty(val), (val) => val.length === 20 || "Корреспондентский счет должен содержать 20 цифр"]',
+    autocomplete='off'
   )
   q-input(
-    v-model="userData.organization_data.bank_account.details.bik"
-    standout="bg-teal text-white"
-    mask="#########"
-    label="БИК"
-    hint="9 цифр"
-    :rules="[val => notEmpty(val), val => val.length === 9 || 'БИК должен содержать 9 цифр']"
-    autocomplete="off"
+    v-model='userData.organization_data.bank_account.details.bik',
+    standout='bg-teal text-white',
+    mask='#########',
+    label='БИК',
+    hint='9 цифр',
+    :rules='[(val) => notEmpty(val), (val) => val.length === 9 || "БИК должен содержать 9 цифр"]',
+    autocomplete='off'
   )
 
   q-input(
-    v-model="userData.organization_data.bank_account.details.kpp"
-    standout="bg-teal text-white"
-    mask="#########"
-    label="КПП (банка)"
-    hint="9 цифр"
-    :rules="[val => notEmpty(val), val => val.length === 9 || 'КПП должен содержать 9 цифр']"
-    autocomplete="off"
+    v-model='userData.organization_data.bank_account.details.kpp',
+    standout='bg-teal text-white',
+    mask='#########',
+    label='КПП (банка)',
+    hint='9 цифр',
+    :rules='[(val) => notEmpty(val), (val) => val.length === 9 || "КПП должен содержать 9 цифр"]',
+    autocomplete='off'
   )
 
   q-input(
-    v-model="userData.organization_data.bank_account.account_number"
-    standout="bg-teal text-white"
-    mask="####################"
-    label="Номер счета"
-    hint="20 цифр"
-    :rules="[val => notEmpty(val), val => val.length === 20 || 'Номер счета должен содержать 20 цифр']"
-    autocomplete="off"
+    v-model='userData.organization_data.bank_account.account_number',
+    standout='bg-teal text-white',
+    mask='####################',
+    label='Номер счета',
+    hint='20 цифр',
+    :rules='[(val) => notEmpty(val), (val) => val.length === 20 || "Номер счета должен содержать 20 цифр"]',
+    autocomplete='off'
   )
 
   q-select(
-    v-model="userData.organization_data.bank_account.currency"
-    label="Валюта счёта"
-    standout="bg-teal text-white"
-    :options="[{ label: 'RUB', value: 'RUB' }]"
-    emit-value
-    :rules="[val => notEmpty(val)]"
+    v-model='userData.organization_data.bank_account.currency',
+    label='Валюта счёта',
+    standout='bg-teal text-white',
+    :options='[{ label: "RUB", value: "RUB" }]',
+    emit-value,
+    :rules='[(val) => notEmpty(val)]',
     map-options
   )
-
 </template>
 
 <script setup lang="ts">
-import { validatePersonalName, notEmpty, notEmptyPhone } from 'src/shared/lib/utils';
+import {
+  validatePersonalName,
+  notEmpty,
+  notEmptyPhone,
+} from 'src/shared/lib/utils';
 
 import type { IUserData } from 'src/shared/lib/types/user/IUserData';
 import { ref } from 'vue';
+import { Zeus } from '@coopenomics/sdk';
 
 const props = defineProps<{ userData: IUserData }>();
 
-const userData = ref<IUserData>(props.userData)
-
+const userData = ref<IUserData>(props.userData);
 </script>

package/src/widgets/Desktop/SecondLevelMenuList/SecondLevelMenuList.vue

@@ -1,23 +1,24 @@
 <template lang="pug">
 div
-  q-list.second-menu(v-if='filteredRoutes')
-    q-item(
-      v-for='route in filteredRoutes',
-      :key='route.name',
-      clickable,
-      v-ripple,
-      :active='isActive(route)',
-      active-class='bg-gradient-dark text-white',
-      @click='navigate(route)'
-    )
-      q-item-section
-        q-item-label.no-select
-          span {{ route.meta.title }}
-      //- q-icon(
-      //-   v-if="route.meta.roles && !route.meta.roles.includes('user') && route.meta.roles.length > 0"
-      //-   name="fa-solid fa-lock-open"
-      //-   :color="context.userRole === 'member' ? 'orange' : 'teal'"
-      //- )
+  transition(
+    mode='out-in',
+    enter-active-class='menu-enter-active',
+    leave-active-class='menu-leave-active'
+  )
+    q-list.second-menu(v-if='filteredRoutes.length > 0', :key='menuKey')
+      q-item.menu-item(
+        v-for='(route, index) in filteredRoutes',
+        :key='route.name',
+        clickable,
+        v-ripple,
+        :active='isActive(route)',
+        active-class='bg-gradient-dark text-white',
+        @click='navigate(route)',
+        :style='{ "animation-delay": `${index * 60}ms` }'
+      )
+        q-item-section
+          q-item-label.no-select
+            span {{ route.meta.title }}
 </template>
 
 <script lang="ts" setup>
@@ -95,10 +96,59 @@ const navigate = (routeToNavigate: IRoute) => {
     params: { coopname: info.coopname },
   });
 };
+
+// Ключ для принудительного перерендера при смене маршрутов
+const menuKey = computed(() => {
+  return filteredRoutes.value.map((route) => route.name).join('-');
+});
 </script>
 
 <style>
 .second-menu .q-item-label {
   font-size: 12px !important;
 }
+
+/* Анимации для входа и выхода всего меню */
+.menu-enter-active {
+  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.menu-leave-active {
+  transition: all 0.15s cubic-bezier(0.55, 0.06, 0.68, 0.19);
+}
+
+.menu-enter-active .menu-item {
+  animation: slideInDown 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+}
+
+.menu-leave-active .menu-item {
+  animation: slideOutUp 0.2s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
+}
+
+/* Анимации для отдельных элементов */
+@keyframes slideInDown {
+  0% {
+    transform: translateY(-30px) scale(0.95);
+    opacity: 0;
+  }
+  60% {
+    transform: translateY(5px) scale(1.02);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOutUp {
+  0% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-25px) scale(0.9);
+    opacity: 0;
+  }
+}
 </style>

package/src/widgets/Desktop/WorkspaceMenu/WorkspaceMenu.vue

@@ -8,7 +8,9 @@ div
     swipeable,
     control-type='flat',
     control-color='grey',
-    height='100px'
+    height='100px',
+    transition-prev='flip-left',
+    transition-next='flip-right'
   )
     q-carousel-slide.flex.flex-center(
       v-for='(item, index) in menuWorkspaces',