@ozdao/martyrs 0.2.487 → 0.2.488

package/src/components/Feed/Feed.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="search || date || (sort && !sort.hideButton)" style="transform: scale(1);" class="mn-b-thin z-index-10 pos-relative flex-nowrap flex gap-thin">
+  <div v-if="search || date || (sort && !sort.hideButton)" style="transform: scale(1);" class="mn-b-thin pos-relative flex-nowrap flex gap-thin">
 
     <BlockSearch 
       v-if="search"
@@ -9,12 +9,12 @@
       :autofocus="search.autofocus"
     />
 
-    <FiltersBar
+   <!--  <FiltersBar
       v-if="filter"
       v-model="filter.selected"
       :filters="filterConfig"
       :class="filter.class || 'mobile-only'"
-    />
+    /> -->
 
     <Dropdown 
       v-if="date"
@@ -172,7 +172,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 
 import SkeletonEvent from '@martyrs/src/modules/icons/skeletons/SkeletonEvent.vue'
 
@@ -201,20 +201,33 @@ const filter = defineModel('filter')
 const date = defineModel('date')
 const items = defineModel('items')
 
+// Внутреннее хранилище для случая, когда v-model:items не передан
+const internalItems = ref([])
+
+// Элегантное решение через computed
+const itemsList = computed({
+  get: () => items.value ?? internalItems.value,
+  set: (val) => {
+    if (items.value !== undefined) {
+      items.value = val
+    } else {
+      internalItems.value = val
+    }
+  }
+})
+
 const filterConfig = computed(() => {
   if (!filter.value?.options) return []
   
-  // Преобразуем старый формат в новый
   return filter.value.options.map(opt => ({
     key: opt.value,
     title: opt.title,
-    type: 'options', // или другой тип в зависимости от данных
+    type: 'options',
     options: opt.options || [],
     defaultValue: null
   }))
 })
 
-
 // Пропсы
 const props = defineProps({
   showLoadMore: {
@@ -283,7 +296,6 @@ const props = defineProps({
   },
 });
   
-const itemsList = shallowRef(items.value || []);
 const hasMoreItems = ref(false);
 
 let isLoading = ref(true);
@@ -294,10 +306,8 @@ let currentSkip = ref(props.options.skip ? props.options.skip : 0);
 let currentLimit = ref(props.options.limit ? props.options.limit : 10);
 
 let currentSearch = ref('');
-// Флаг для определения поискового запроса
 let isSearching = ref(false);
 
-// Счетчик для отслеживания актуальности запросов
 let requestId = 0;
 
 function debounce(fn, delay) {
@@ -309,7 +319,6 @@ function debounce(fn, delay) {
 }
 
 const debouncedSearch = debounce((value) => {
-  // Устанавливаем флаг поиска
   isSearching.value = true;
   currentSearch.value = value;
   currentSkip.value = 0;
@@ -321,7 +330,6 @@ function updateSearch(search) {
   debouncedSearch(search);
 }
 
-// Вспомогательная функция для удаления null/undefined значений
 const removeNullValues = (obj) => {
   return Object.fromEntries(
     Object.entries(obj).filter(([_, value]) => value != null)
@@ -335,13 +343,11 @@ const loadMoreItems = async () => {
   
   isLoadingExtra.value = true;
   
-  // Увеличиваем счетчик запросов
   const currentRequestId = ++requestId;
 
   currentSkip.value += currentLimit.value;
   
   try {
-    // Собираем все параметры в один объект
     const allParams = {
       skip: currentSkip.value,
       limit: currentLimit.value,
@@ -353,12 +359,10 @@ const loadMoreItems = async () => {
       ...props.options
     };
 
-    // Фильтруем null/undefined значения для всего объекта
     const params = removeNullValues(allParams);
 
     const data = await props.store.read(params);
 
-    // Проверяем, актуален ли еще этот запрос
     if (currentRequestId !== requestId) {
       return;
     }
@@ -371,14 +375,12 @@ const loadMoreItems = async () => {
       hasMoreItems.value = true;
     }
 
+    // Элегантное обновление через computed setter
     itemsList.value = [...itemsList.value, ...data];
     
-    if (items.value) items.value = itemsList.value;
-    
   } catch (error) {
     console.error('Load more error:', error);
   } finally {
-    // Устанавливаем isLoadingExtra только для актуального запроса
     if (currentRequestId === requestId) {
       isLoadingExtra.value = false;
     }
@@ -388,17 +390,14 @@ const loadMoreItems = async () => {
 const fetchItems = async () => {
   isLoading.value = true;
   
-  // Увеличиваем счетчик при каждом новом запросе
   const currentRequestId = ++requestId;
   
-  // Очищаем список только при поиске
   if (isSearching.value) {
     itemsList.value = [];
-    isSearching.value = false; // Сбрасываем флаг после использования
+    isSearching.value = false;
   }
   
   try {
-    // Собираем все параметры в один объект
     const allParams = {
       skip: currentSkip.value,
       limit: currentLimit.value,
@@ -410,14 +409,11 @@ const fetchItems = async () => {
       ...props.options
     };
 
-    // Фильтруем null/undefined значения для всего объекта
     const params = removeNullValues(allParams);
 
     const data = await props.store.read(params);
 
-    // Проверяем, актуален ли еще этот запрос
     if (currentRequestId !== requestId) {
-      // Если нет - игнорируем результат
       return;
     }
 
@@ -429,13 +425,12 @@ const fetchItems = async () => {
       hasMoreItems.value = true;
     }
 
+    // Элегантное обновление через computed setter
     itemsList.value = data;
-    if (items.value) items.value = itemsList.value;
     
   } catch (error) {
     console.error('Fetch error:', error);
   } finally {
-    // Устанавливаем isLoading только для актуального запроса
     if (currentRequestId === requestId) {
       isLoading.value = false;
     }
@@ -483,7 +478,7 @@ onUnmounted(() => {
 </script>
 
 <style>
-.feed-move, /* apply transition to moving elements */
+.feed-move,
 .feed-enter-active,
 .feed-leave-active {
   transition: all 0.5s ease;
@@ -495,8 +490,6 @@ onUnmounted(() => {
   transform: translateY(30px);
 }
 
-/* ensure leaving items are taken out of layout flow so that moving
-   animations can be calculated correctly. */
 .feed-leave-active {
   position: absolute;
 }

package/src/components/Field/Field.vue

@@ -1,9 +1,7 @@
 <script setup>
 import { ref, onMounted, nextTick, watch } from 'vue'
 import IconShow from '@martyrs/src/modules/icons/actions/IconShow.vue';
-
 const emit = defineEmits(['update:field', 'focus', 'blur']);
-
 const props = defineProps({
   label: null,
   symbol: null,
@@ -14,20 +12,18 @@ const props = defineProps({
   validation: false,
   disabled: null,
   tabindex: -1,
-  autofocus: false
+  autofocus: false,
+  icon: null // Добавлен пропс для иконки
 });
-
 if (props.value) {
   emit('update:field', props.value)
 }
-
 const textarea = ref(null);
 const input = ref(null);
 const showPassword = ref(false);
 
 function resize() {
   if (!textarea.value) {
-    textarea.value.style.height = '';
     return;
   }
   const el = textarea.value;
@@ -39,7 +35,6 @@ function resize() {
     el.style.height = '';
   }
 }
-
 function focus() {
   if (props.autofocus) {
     if (props.type === 'textarea' && textarea.value) {
@@ -49,27 +44,22 @@ function focus() {
     }
   }
 }
-
 watch(() => props.field, () => {
   if (props.type === 'textarea') {
     nextTick(resize);
   }
 });
-
 watch(() => props.autofocus, (newVal) => {
   if (newVal) {
     nextTick(focus);
   }
 });
-
 onMounted(() => {
   nextTick(focus);
   nextTick(resize);
 });
-
 const text = ref(props.field);
 </script>
-
 <template>
   <div
     :class="[
@@ -78,6 +68,11 @@ const text = ref(props.field);
     ]"
     class="field-wrapper flex-center flex-nowrap flex"
   >
+    <!-- Слот для иконки -->
+    <slot name="icon" v-if="$slots.icon" />
+    <!-- Или компонент иконки через пропс -->
+    <component :is="icon" v-else-if="icon" class="i-medium t-transp mn-r-thin" />
+    
     <div
       v-if="label"
       class="t-transp mn-r-small"
@@ -137,39 +132,22 @@ const text = ref(props.field);
     </div>
   </transition>
 </template>
-
-<style>
+<style scoped>
 input,
 textarea,
 span {
-  line-height: 1;
   color: inherit;
+  line-height: 1;
 }
-
 textarea {
   resize: none;
   overflow: hidden; 
-  line-height: 1rem;
   height: 1rem;
 }
-
 input[type="date"]::-webkit-calendar-picker-indicator,
 input[type="time"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
   opacity: 1;
   color: inherit;
 }
-
-.field-wrapper {
-  transition: border-width .2s, box-shadow .2s ease;
-}
-
-.field-wrapper:hover {
-  box-shadow: inset 0 0 0 1px rgba(var(--dark), 0.2), 0 0 6px 2px rgba(var(--dark), 0.1);
-}
-
-.field-wrapper:focus-within {
-  box-shadow: inset 0 0 0 1px rgba(var(--second), 1), 0 0 6px 2px rgba(var(--second), 0.1);
-}
-
 </style>

package/src/components/FieldBig/FieldBig.vue

@@ -1,22 +1,21 @@
 <template>
-  <div class="pd-thin radius-extra flex-nowrap flex">
-    <Field
-      v-model:field="inputField"
-      @update:field="updateInput"
-      :placeholder="typing ? '' : placeholder"
-      @input="handleInput"
-      @focus="handleFocus"
-      @blur="checkInput"
-      class="w-100 p-medium t-regular uppercase pd-small"
-    />
-    <button
-      @click="emitAction" 
-      class="t-nowrap t-medium radius-big uppercase cursor-pointer flex flex-v-center pd-r-small pd-l-small w-max hover-bg-fifth t-semi transition-linear transition-timing-1 t-black bg-main" 
-    >
-      <span v-if="action" class="desktop-only mn-r-thin">{{action}}</span>
-      <IconArrow class="i-medium"/>
-    </button>
-  </div>
+  <Field
+    v-model:field="inputField"
+    @update:field="updateInput"
+    :placeholder="typing ? '' : placeholder"
+    @input="handleInput"
+    @focus="handleFocus"
+    @blur="checkInput"
+    class="pd-thin radius-extra flex-nowrap flex  w-100 p-medium t-regular uppercase pd-small"
+  >
+        <button
+    @click="emitAction" 
+    class="t-nowrap t-medium radius-big uppercase cursor-pointer flex flex-v-center pd-thin w-max hover-bg-fifth t-semi transition-linear transition-timing-1 t-black bg-main" 
+  >
+    <span v-if="action" class="desktop-only mn-r-thin">{{action}}</span>
+    <IconArrow class="i-medium"/>
+  </button>
+</Field>
 </template>
 
 <script setup="props">

package/src/components/Loader/Loader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="circular-loader" :class="{ 'circular-loader-centered': centered }">
+  <div class="circular-loader pos-relative z-index-1 w-100 h-100 w-max-2r h-max-2r" :class="{ 'circular-loader-centered': centered }">
     <svg viewBox="25 25 50 50">
       <circle class="circular-loader-fill" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10" />
       <circle class="circular-loader-circle" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10" />
@@ -29,13 +29,6 @@ export default {
 </script>
 
 <style>
-.circular-loader {
-  position: relative;
-  z-index: 50;
-  height: 2rem;
-  width: 2rem;
-}
-
 .circular-loader-centered {
   top: calc(50% - 1rem);
   left: calc(50% - 1rem);

package/src/components/Menu/MenuItem.vue

@@ -56,7 +56,7 @@
                 h(
                   'span',
                   {
-                    class: ['p-big', 't-medium', 'mn-r-auto']
+                    class: ['p-semi', 't-medium', 'mn-r-auto']
                   },
                   textSlot
                 )

package/src/components/Select/Select.vue

@@ -1,6 +1,8 @@
 <template>
   <!-- Input Wrapper -->
   <div 
+    ref="fieldWrapper"
+    tabindex="0"
     @click.stop="toggleMenu"  
     v-click-outside="clickedOutside" 
     :class="$attrs.class" 
@@ -13,25 +15,21 @@
     <span>
       {{ optionsSelected ? (optionsSelected.name || optionsSelected[props.value] || optionsSelected) : placeholder  }}
     </span>
-
     <!-- Dropdown menu -->
     <transition mode="out-in" name="TransitionTranslateY">
       <ul 
         v-show="showMenu" 
-        :class="$attrs.class"
-        class="bs-black pos-absolute pos-t-100 pos-l-0 z-index-5 w-100 mn-t-thin"
+        class="bs-black pos-absolute pos-t-100 pos-l-0 z-index-5 pd-small radius-small bg-white mn-t-thin w-100"
         style="min-width: max-content;"
       >
-        <li @click.stop="selectOption(option)" v-for="option in optionsListed" class="text-box-trim">
+        <li @click.stop="selectOption(option)" v-for="option in optionsListed" class="radius-thin hover-bg-light pd-thin text-box-trim">
           <span v-if="option" class="w-100">
-
             {{ option.name || option[props.value] || option }}
           </span>
         </li>
       </ul>
     </transition>
   </div>
-
   <!-- Validation -->
   <transition mode="out-in" name="fade">
     <div v-if="validation" class="mn-t-thin invalid-feedback">
@@ -39,20 +37,15 @@
     </div>
   </transition>
 </template>
-
 <script setup>
-import { ref, computed, watch } from 'vue'
-
+import { ref, computed, watch, nextTick } from 'vue'
 import clickOutside from '../FieldPhone/click-outside.js';
-
 let vClickOutside = clickOutside
-
 const emit = defineEmits([
   'update:select', 
   'focus', 
   'blur'
 ])
-
 const props = defineProps({
   label: String,
   placeholder: { type: String, default: 'Please select an item' },
@@ -62,50 +55,48 @@ const props = defineProps({
   options: { type: Array, default: () => [] },
   validation: Boolean,
 })
-
 const showMenu = ref(false)
-
+const fieldWrapper = ref(null)
 const optionsSelected = ref(
   props.property 
   ? findObjectByValue(props.select, props.property, props.options) 
   : props.select
 )
-
 const optionsListed = computed(() => {
   return props.select 
   ? props.options.filter(option => option !== props.select) 
   : props.options
 })
-
 watch(() => props.select, (newSelect) => {
   optionsSelected.value = 
   props.property 
   ? findObjectByValue(props.select, props.property, props.options) 
   : props.select;
 });
-
-const toggleMenu = () => {
+const toggleMenu = async () => {
   showMenu.value = !showMenu.value
-
-  emit(showMenu.value ? 'focus' : 'blur')
+  
+  if (showMenu.value) {
+    await nextTick()
+    fieldWrapper.value?.focus()
+    emit('focus')
+  } else {
+    emit('blur')
+  }
 }
-
 function clickedOutside () {
   showMenu.value = false
 }
-
 const selectOption = option => {
   optionsSelected.value = option
   
   toggleMenu()
-
   if (props.property) {  
     emit('update:select', optionsSelected.value[props.property])
   } else {
     emit('update:select', optionsSelected.value)
   }
 }
-
 function findObjectByValue (value, property, objects) {
   for (const object of objects) {
     if (object[property] === value || object === value) {
@@ -115,13 +106,14 @@ function findObjectByValue (value, property, objects) {
   return null;
 }
 </script>
-
 <style lang="scss" scoped>
   li {
     list-style-type: none;
   }
-
   ul li {
     line-height: 2;
   }
-</style>
+  .field-wrapper:focus {
+    outline: none;
+  }
+</style>

package/src/components/Status/Snack.vue

@@ -23,10 +23,12 @@
 <script setup>
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+
 import IconInfo from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
+import IconSuccess from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
+import IconAlert from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
+
 import IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue'
-import IconSuccess from '@martyrs/src/modules/icons/navigation/IconSuccess.vue'
-import IconAlert from '@martyrs/src/modules/icons/navigation/IconAlert.vue'
 
 const { t, te } = useI18n({ useScope: 'global' })
 

package/src/components/Tab/Tab.vue

@@ -8,7 +8,7 @@
       :style="isSelected(index, tab) ? 'background: rgb(var(--main)) !important' : ''"
       :class="[
         isSelected(index, tab) ? 'bg-main' : '',
-        tabClass ? tabClass : 'pd-small pd-r-medium pd-l-medium w-max pd-small radius-small'
+        replaceClasses('pd-small pd-r-medium pd-l-medium w-max pd-small radius-small', classTab)
       ]"
     >
       {{tab.name || tab.label}}
@@ -23,7 +23,7 @@ const emit = defineEmits(['update:selected', 'tab-click']);
 
 const props = defineProps({
   tabs: Array,
-  tabClass: String,
+  classTab: String,
   selected: [String, Number],
   modelValue: [String, Number],
   callback: Function

package/src/components/UploadImageMultiple/UploadImageMultiple.vue

@@ -12,18 +12,14 @@
           class="w-100 mn-b-thin h-100"
           fill="rgb(var(--main))"
         />
-
         <span v-if="options.showText || options.showTitle" class="mn-t-medium  mn-b-medium d-block h3 t-black">{{ text.title }}</span>
         <span v-if="options.showText" class="mn-b-small t-transp d-block ">{{ text.subtitle }}</span>
         <span  v-if="options.showText"class="mn-b-small uppercase p-small t-medium d-block">or</span>
-
         <button  v-if="options.showText" class="cursor-pointer mn-b-small br-2px br-main br-solid radius-extra pd-l-thin pd-r-thin  t-main">Browse Files</button>
-
         <span  v-if="options.showText" class="uppercase p-small t-medium d-block ">Maximum size: 2MB</span>
       </div>
       <Loader v-else class="pos-absolute"/>
     </transition>
-
     <input type="file" ref="fileInput" @change="onFileChange" multiple style="display: none"/>
   </div>
 </template>
@@ -31,10 +27,10 @@
 <script setup>
 import { ref, watch } from 'vue';
 import axios from 'axios';
-
 import Loader from '@martyrs/src/components/Loader/Loader.vue';
 import PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'
 import IconUpload from '@martyrs/src/modules/icons/navigation/IconUpload.vue'
+import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
 
 const images = ref([]);
 const loading = ref(false);
@@ -71,30 +67,29 @@ function onComponentClick() {
 
 async function onFileChange(e) {
   loading.value = true;
-
   let files = e.target.files;
   let formData = new FormData();
-
+  
   for (const file of files) {
     formData.append("file", file);
   }
-
-
+  
   try {
     const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true }); 
-
     let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData, {
       headers: {
         "Content-Type": "multipart/form-data"
       }
     });
+    
     response.data.forEach(file => {
-      images.value.push(file.filepath); // push each file path to the images array
+      images.value.push(file.filepath);
     });
+    
     emit('update:images', images.value);
-    loading.value = false;
   } catch (error) {
-    console.error(error);
+    globals.setError(error);
+  } finally {
     loading.value = false;
   }
 }
@@ -107,4 +102,4 @@ function onDrop(e) {
     }
   });
 }
-</script>
+</script>

package/src/main.js

@@ -42,6 +42,7 @@ import {
   Upload,
   UploadImage,
   UploadImageMultiple,
+  Media
 } from './components';
 
 export default {
@@ -133,4 +134,5 @@ export {
   Upload,
   UploadImage,
   UploadImageMultiple,
+  Media
 };