@ozdao/martyrs 0.2.541 → 0.2.543

package/src/components/Marquee/Marquee.vue

@@ -69,6 +69,7 @@ const loopInterval = ref(null)
 const resizeObserver = ref(null)
 const checkInterval = ref(null)
 const resizeTimeout = ref(null)
+const previousSize = ref({ width: 0, height: 0 })
 
 const widthMin = ref('100%')
 const widthContainer = ref(0)
@@ -152,11 +153,22 @@ const checkForClone = async () => {
       resizeObserver.value.disconnect()
     }
     
-    resizeObserver.value = new ResizeObserver(() => {
-      clearTimeout(resizeTimeout.value)
-      resizeTimeout.value = setTimeout(() => {
-        calculateClones()
-      }, 150)
+    resizeObserver.value = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      const newWidth = entry.contentRect.width
+      const newHeight = entry.contentRect.height
+      
+      // Only recalculate if size changed significantly (more than 1px)
+      const widthChanged = Math.abs(newWidth - previousSize.value.width) > 1
+      const heightChanged = Math.abs(newHeight - previousSize.value.height) > 1
+      
+      if (widthChanged || heightChanged) {
+        previousSize.value = { width: newWidth, height: newHeight }
+        clearTimeout(resizeTimeout.value)
+        resizeTimeout.value = setTimeout(() => {
+          calculateClones()
+        }, 300)
+      }
     })
     
     resizeObserver.value.observe(marqueeOverlayContainer.value)
@@ -188,7 +200,7 @@ const getCurrentStyle = computed(() => {
     '--pauseOnHover': `${props.pauseOnHover ? 'paused' : 'running'}`,
     '--pauseOnClick': `${props.pauseOnClick ? 'paused' : 'running'}`,
     '--pauseAnimation': `${(props.vertical && verticalAnimationPause.value) || props.pause ? 'paused' : 'running'}`,
-    '--gradient-color': `rgba(${props.gradientColor}, 1), rgba(${props.gradientColor}, 0)`,
+    '--gradient-color': props.gradientColor,
     '--gradient-length': `${gradientLength.value}`,
     '--min-width': `${widthMin.value}`,
     '--min-height': `${heightMin.value}`,
@@ -258,9 +270,9 @@ watch(
   (newVal, oldVal) => {
     if (newVal !== oldVal) {
       if (newVal) {
-        emits('onResume')
-      } else {
         emits('onPause')
+      } else {
+        emits('onResume')
       }
     }
   }
@@ -271,20 +283,19 @@ watch(
 .vue3-marquee {
   display: flex !important;
   position: relative;
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
 
   .marquee {
     flex: 0 0 auto;
     min-width: var(--min-width);
     min-height: var(--min-height);
     z-index: 1;
-    will-change: transform;
-    transform: translateZ(0);
-    backface-visibility: hidden;
 
     animation: var(--orientation) var(--duration) linear var(--delay) var(--loops);
     animation-play-state: var(--pauseAnimation);
     animation-direction: var(--direction);
-    contain: layout style paint;
   }
 
   .overlay {
@@ -325,7 +336,7 @@ watch(
     }
 
     .overlay::before,.overlay::after {
-      background: linear-gradient(to right, var(--gradient-color));
+      background: linear-gradient(to right, var(--gradient-color), transparent);
       height: 100%;
       width: var(--gradient-length);
     }
@@ -351,7 +362,7 @@ watch(
     }
 
     .overlay::before, .overlay::after {
-      background: linear-gradient(to bottom, var(--gradient-color));
+      background: linear-gradient(to bottom, var(--gradient-color), transparent);
       height: var(--gradient-length);
       width: 100%;
     }

package/src/components/Tab/Tab.vue

@@ -18,7 +18,9 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
+import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';
 
+const { replaceClasses } = useGlobalMixins();
 const emit = defineEmits(['update:selected', 'tab-click']);
 
 const props = defineProps({

package/src/components/UploadImage/UploadImage.vue

@@ -1,40 +1,116 @@
 <template>
-  <div 
-    @click="onComponentClick"
-    @drop="onDrop"
-    @dragover.prevent
-    class="image-upload-area flex-v-center flex-h-center flex">
+  <div class="upload-image-wrapper flex-v-center flex-nowrap flex gap-small" :class="{'with-text': text}">
+    <div 
+      @click="onComponentClick"
+      @drop="onDrop"
+      @dragover.prevent
+      class="pos-relative radius-small br-solid br-1px br-black-transp-10 h-100 aspect-1x1 flex-v-center flex-h-center flex cursor-pointer"
+    >
       <img loading="lazy" 
-        v-if="imageUrl || photo" 
-        :src="(FILE_SERVER_URL || '') + (imageUrl || photo)"
+        v-if="imageUrl || photo || previewUrl" 
+        :src="previewUrl || (FILE_SERVER_URL || '') + (imageUrl || photo)"
         alt="Uploaded image" 
-        class="w-100 h-100 object-fit-cover"
-        />
+        class="pos-absolute  radius-small o-hidden z-index-1 w-100 h-100 object-fit-cover"
+      />
       
-      <div v-else class="flex-v-center flex-h-center flex w-100 h-100 bg-second" >
-        <svg class="i-medium" width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path  fill="rgb(var(--white))" d="M21.2784 37.2973C18.8466 34.6628 18.8466 30.6098 21.2784 27.9753L47.2179 2.03584C48.6364 0.81993 50.2577 0.211974 51.8789 0.211974C53.5001 0.211974 55.1213 0.81993 56.5399 2.03584L82.4793 27.9753C84.9111 30.6098 84.9111 34.6628 82.4793 37.2973C79.8448 39.7291 75.7918 39.7291 73.1573 37.2973L58.3637 22.301V71.5454C58.3637 75.1932 55.5266 78.0303 51.8789 78.0303C48.2311 78.0303 45.394 75.1932 45.394 71.5454V22.301L30.6004 37.2973C27.966 39.7291 23.9129 39.7291 21.2784 37.2973ZM97.2729 71.5454C100.921 71.5454 103.758 74.3825 103.758 78.0303V97.4849C103.758 101.133 100.921 103.97 97.2729 103.97H6.48486C2.83713 103.97 0 101.133 0 97.4849V78.0303C0 74.3825 2.83713 71.5454 6.48486 71.5454H38.9092C38.9092 78.6382 44.7861 84.5151 51.8789 84.5151C58.9717 84.5151 64.8486 78.6382 64.8486 71.5454H97.2729ZM87.5456 92.6212C90.1801 92.6212 92.4092 90.392 92.4092 87.7576C92.4092 85.1231 90.1801 82.8939 87.5456 82.8939C84.9111 82.8939 82.682 85.1231 82.682 87.7576C82.682 90.392 84.9111 92.6212 87.5456 92.6212Z"/>
-        </svg>
+      <div v-else class="flex-v-center pos-relative z-index-2 flex-h-center flex w-100 h-100 radius-small  bg-second" >
+        <IconUpload class="i-medium upload-icon" fill="rgb(var(--white))" />
+      </div>
+      
+      <!-- Hover controls -->
+      <div class="z-index-2 pos-relative  hover-controls pos-absolute w-100 h-100 flex-v-center flex-h-center flex">
+        <div v-if="!imageUrl && !photo && !previewUrl" class="hover-upload-icon">
+          <IconUpload class="i-medium" fill="rgb(var(--white))" />
+        </div>
+        <div v-else class="hover-buttons flex gap-small">
+          <button @click.stop="onComponentClick" class="hover-button radius-small pd-thin bg-main t-white br-none cursor-pointer">
+            <IconUpload class="i-semi" fill="rgb(var(--white))" />
+          </button>
+          <button @click.stop="deleteImage" class="hover-button radius-small pd-thin bg-danger t-white br-none cursor-pointer">
+            <IconDelete class="i-semi" fill="rgb(var(--white))" />
+          </button>
+        </div>
+      </div>
+      
+      <!-- Loading overlay -->
+      <div v-if="loading" class="z-index-2 loading-overlay pos-absolute w-100 h-100 flex-v-center flex-h-center flex">
+        <Loader :centered="false" />
       </div>
       
       <input type="file" name="file" ref="fileInput" @change="onFileChange" style="display: none"/>
+    </div>
+    
+    <!-- Text block -->
+    <div v-if="text" class="upload-text-block  flex flex-column">
+      <span class="mn-b-small t-medium">{{ textConfig.title }}</span>
+      <span class="mn-b-medium t-transp">{{ textConfig.subtitle }}</span>
+      <div v-if="!imageUrl && !photo && !previewUrl">
+        <button @click="onComponentClick" class="button button-small w-max bg-main t-black cursor-pointer">
+          {{ textConfig.buttonText }}
+        </button>
+      </div>
+      <div v-else class="flex gap-thin">
+        <button @click="onComponentClick" class="button button-small w-max bg-second t-white cursor-pointer">
+          Upload 
+        </button>
+        <button @click="deleteImage" class="button button-small w-max bg-red t-white cursor-pointer">
+          Delete
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import axios from 'axios';
+import Loader from '@martyrs/src/components/Loader/Loader.vue';
+import IconUpload from '@martyrs/src/modules/icons/navigation/IconUpload.vue';
+import IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';
 
 const imageUrl = ref(null);
 const fileInput = ref(null);
+const previewUrl = ref(null);
+const loading = ref(false);
 
-const props = defineProps([
-  'uploadPath', // only necessary prop
-  'photo' // new prop for holding the image url
-]);
+const props = defineProps({
+  uploadPath: {
+    type: String,
+    required: true
+  },
+  photo: {
+    type: String,
+    default: null
+  },
+  text: {
+    type: [Object, Boolean],
+    default: null
+  }
+});
 
 const emit = defineEmits(['update:photo', 'error']);
 
+// Text configuration with defaults
+const textConfig = computed(() => {
+  const defaults = {
+    title: 'Upload Image',
+    subtitle: 'Drag & drop your image here or click button. Supported: JPG, PNG, GIF. Max size: 2MB',
+    buttonText: 'Choose Image'
+  };
+  
+  if (props.text === true) {
+    return defaults;
+  } else if (typeof props.text === 'object' && props.text !== null) {
+    return {
+      title: props.text.title || defaults.title,
+      subtitle: props.text.subtitle || defaults.subtitle,
+      buttonText: props.text.buttonText || defaults.buttonText
+    };
+  }
+  
+  return defaults;
+});
+
 watch(props, ({photo}) => {
   if(photo) imageUrl.value = photo;
 });
@@ -50,10 +126,19 @@ async function onFileChange(e) {
     return;
   }
   
+  // Create preview from file
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    previewUrl.value = e.target.result;
+  };
+  reader.readAsDataURL(file);
+  
   let formData = new FormData();
   formData.append("file", file);
 
   console.log("Sending file:", file.name); // Логируем имя файла перед отправкой
+  
+  loading.value = true;
 
   try {
     const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true }); 
@@ -61,10 +146,14 @@ async function onFileChange(e) {
     let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData);
     console.log("Upload response:", response); // Логируем ответ сервера
     imageUrl.value = response.data[0].filepath;
+    previewUrl.value = null; // Clear preview after successful upload
     emit('update:photo', imageUrl.value);
   } catch (error) {
     emit('error', error);
     console.error("Upload error:", error); // Логируем ошибку
+    previewUrl.value = null; // Clear preview on error
+  } finally {
+    loading.value = false;
   }
 }
 
@@ -77,4 +166,89 @@ function onDrop(e) {
     }
   });
 }
+
+function deleteImage() {
+  imageUrl.value = null;
+  previewUrl.value = null;
+  emit('update:photo', null);
+  // Reset file input
+  if (fileInput.value) {
+    fileInput.value.value = '';
+  }
+}
 </script>
+
+<style scoped>
+.image-upload-area {
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.image-upload-area:hover {
+  opacity: 0.95;
+}
+
+/* Hover controls */
+.hover-controls {
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.7);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.image-upload-area:hover .hover-controls {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.hover-upload-icon {
+  animation: pulse 1.5s infinite;
+}
+
+.hover-button {
+  transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.hover-button:hover {
+  transform: scale(1.1);
+}
+
+.hover-button:active {
+  transform: scale(0.95);
+}
+
+/* Loading overlay */
+.loading-overlay {
+  top: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 10;
+}
+
+/* Animations */
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Upload icon in empty state */
+.upload-icon {
+  transition: transform 0.3s ease;
+}
+
+.image-upload-area:hover .upload-icon {
+  transform: scale(1.1);
+}
+</style>

package/src/modules/community/components/blocks/CardBlogpost.vue

@@ -14,7 +14,7 @@
     	:creator="blogpost.creator"
     	:date="blogpost.createdAt"
     	:actions="user && user === blogpost.creator.target._id ? [
-        { to: { name: 'Edit BlogPost', params: {url: blogpost.url } }, label: 'Edit' }
+        { to: `/community/posts/${blogpost.url}/edit`, label: 'Edit' }
        ]: null"
 		/>
 
@@ -30,12 +30,7 @@
 				 	:text="blogpost.name || ''" 
 				 	:maxLen="80" 
 				 	class="h3 d-block"
-				 	@click="router.push({
-						name: 'BlogPost', 
-						params: { 
-							url: blogpost.url 
-						}
-					})"
+				 	@click="router.push(`/community/posts/${blogpost.url}`)"
 				/>
 
 				<div 

package/src/modules/community/components/blocks/FooterBlogpost.vue

@@ -1,11 +1,6 @@
 <template>
   <footer class="t-semi br-top-dark flex-nowrap flex-nojustify flex">
-    <router-link :to="{
-      name: 'BlogPost', 
-      params: { 
-        url: blogpost.url 
-      }
-    }" 
+    <router-link :to="`/community/posts/${blogpost.url}`" 
     class="font-second cursor-pointer hover-bg-white pd-l-thin pd-r-thin radius-big">
       👁️ {{blogpost.views}}
     </router-link>
@@ -18,13 +13,7 @@
         👍 {{reactionsCount }}
       </div>
     </div>
-    <router-link :to="{
-      name: 'BlogPost', 
-      hash: '#comments',
-      params: { 
-        url: blogpost.url 
-      }
-    }" 
+    <router-link :to="`/community/posts/${blogpost.url}#comments`" 
     class="font-second cursor-pointer hover-bg-white pd-l-thin pd-r-thin radius-big">
       💬 {{ blogpost.numberOfComments }}
     </router-link>

package/src/modules/community/components/pages/CreateBlogPost.vue

@@ -130,7 +130,6 @@ import Textarea from '@martyrs/src/modules/constructor/components/elements/Texta
 import Constructor from '@martyrs/src/modules/constructor/components/sections/Constructor.vue';
 
 import Popup from '@martyrs/src/components/Popup/Popup.vue'
-import FieldTags from '@martyrs/src/components/FieldTags/FieldTags.vue'
 import BlockTags from '@martyrs/src/components/FieldTags/BlockTags.vue'
 import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
 import Field from '@martyrs/src/components/Field/Field.vue'

package/src/modules/globals/TASK.MD

@@ -1 +1,105 @@
-TASK.MD
+# Проблема с отображением лоадера при загрузке модулей
+
+## Описание проблемы
+При переходе на роут, который требует загрузки нового модуля:
+1. После клика на ссылку UI полностью блокируется
+2. Начинается загрузка модуля (2-3 секунды)
+3. Лоадер показывается только ПОСЛЕ загрузки модуля на мгновение
+4. Затем происходит переход на новый роут
+
+**Ожидаемое поведение:** Лоадер должен показываться СРАЗУ после клика, до начала загрузки модулей.
+
+## Технические детали
+
+### Архитектура загрузки модулей
+- **Файл:** `globals.app.js:89-119`
+- Модули загружаются динамически в `router.beforeEach` guard
+- Модули регистрируют роуты через `router.addRoute()` после загрузки
+- После загрузки возвращается `to.fullPath` для повторной навигации
+
+### Условие показа лоадера
+- **Файл:** `Client.vue:16`
+- Условие: `v-if="!page || globals.state.loading"`
+- `page` - ref на текущий компонент страницы
+- `globals.state.loading` - глобальный флаг загрузки
+
+## Корень проблемы
+Vue Router `beforeEach` guard блокирует все обновления DOM до своего завершения:
+- Guards выполняются синхронно и блокируют навигацию
+- Vue не может обновить DOM пока `beforeEach` не завершится
+- Даже установка `globals.state.loading = true` не приводит к рендерингу
+
+**Подтверждение из документации Vue Router:**
+> "Guards may be resolved asynchronously, and the navigation is considered pending before all hooks have been resolved"
+
+**GitHub issue vuejs/vue #9200:**
+> "Vue.nextTick doesn't seem to cover browser re-render"
+
+## Что пробовали и не сработало
+
+### 1. nextTick после установки loading флага
+```javascript
+store.globals.state.loading = true;
+await nextTick();
+```
+**Результат:** Не работает, т.к. nextTick работает с микротасками, которые выполняются ДО отрисовки браузером
+
+### 2. requestAnimationFrame
+```javascript
+store.globals.state.loading = true;
+await new Promise(resolve => requestAnimationFrame(resolve));
+```
+**Результат:** Не работает, beforeEach все равно блокирует рендеринг
+
+### 3. setTimeout с return false
+```javascript
+setTimeout(async () => {
+  // загрузка модулей
+  router.push(to.fullPath);
+}, 0);
+return false;
+```
+**Результат:** Приводит к 404, т.к. роуты еще не зарегистрированы
+
+### 4. Watch на route.path в Client.vue
+```javascript
+watch(() => route.path, () => {
+  page.value = null;
+});
+```
+**Результат:** Не работает, т.к. route.path меняется только ПОСЛЕ завершения beforeEach
+
+### 5. Свой beforeEach в Client.vue
+```javascript
+router.beforeEach((to, from) => {
+  page.value = null;
+});
+```
+**Результат:** Не работает, все beforeEach выполняются синхронно и блокируют рендеринг
+
+### 6. Создание DOM элемента напрямую
+```javascript
+const loader = document.createElement('div');
+document.body.appendChild(loader);
+```
+**Результат:** Работает, но это хак, обходящий Vue реактивность
+
+## Ограничения
+1. **Нельзя загружать модули после навигации** - модули регистрируют роуты, без них будет 404
+2. **Нельзя загружать модули вне beforeEach** - нужно гарантировать загрузку ДО навигации
+3. **return to.fullPath необходим** - для повторной навигации с новыми роутами
+
+## Возможные решения
+
+### 1. Использовать HTML лоадер (не Vue компонент)
+Добавить лоадер прямо в index.html, показывать/скрывать через классы
+
+### 2. Изменить архитектуру загрузки
+- Предзагружать все возможные роуты
+- Использовать другой подход к динамической регистрации
+
+### 3. Использовать Web Workers
+Загружать модули в воркере, но это потребует полного рефакторинга
+
+## Вывод
+Проблема фундаментальная: Vue Router beforeEach блокирует рендеринг, а мы обязаны загружать модули именно там из-за динамической регистрации роутов. Единственное рабочее решение - создавать лоадер в обход Vue (прямой DOM манипуляцией).

package/src/modules/globals/views/plugins/alert.plugin.js

@@ -60,6 +60,7 @@ export default {
       const container = document.createElement('div');
       document.body.appendChild(container);
       const vnode = h(AlertDialog, { alertState, handleAction, closeAlert });
+      vnode.appContext = app._context;
       render(vnode, container);
     }
   },

package/src/modules/products/components/blocks/CardCategory.vue

@@ -5,6 +5,7 @@
       <h4 class="my-handle word-break t-truncate w-100 w-max-100 mn-r-auto">{{category.name}}</h4>
 
       <router-link
+       v-if="access"
        :to="{
           name: 'Category Edit', 
           params: { 
@@ -27,6 +28,7 @@
       </router-link>
 
       <button
+        v-if="access"
         @click="deleteCategory(category)"
         class="
           i-semi
@@ -68,6 +70,10 @@ import IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue'
 
 const props = defineProps({
   category: Object,
+  access: {
+    type: Boolean,
+    default: false
+  }
 });
 
 const emits = defineEmits(['delete']);

package/src/modules/products/components/pages/Categories.vue

@@ -55,6 +55,7 @@
         >
           <CardCategory 
             :category="item" 
+            :access="hasAccess(route.params._id, 'products', 'edit', auth.state.accesses, auth.state.access.roles)"
             @delete="deleteCategory" 
           />
         </Tree>
@@ -69,10 +70,12 @@
 
   import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
   import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'; 
-  import * as categories from '@martyrs/src/modules/products/store/categories.js'; 
+  import * as categories from '@martyrs/src/modules/products/store/categories.js';
+  import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js'; 
 
   const route = useRoute();
   const router = useRouter();
+  const { hasAccess } = useGlobalMixins();
 
   import Button from "@martyrs/src/components/Button/Button.vue";
   import Block from '@martyrs/src/components/Block/Block.vue';