@ozdao/martyrs 0.2.477 → 0.2.479

package/src/components/Feed/Feed.vue

@@ -1,6 +1,5 @@
 <template>
-
-  <div v-if="search || date || (sort && !sort.hideButton)" class="mn-b-thin flex-nowrap flex gap-thin">
+  <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">
 
     <BlockSearch 
       v-if="search"
@@ -10,12 +9,31 @@
       :autofocus="search.autofocus"
     />
 
+    <Dropdown 
+      v-if="date"
+      :label="{
+        component: ButtonDate,
+        props: { date: date }
+      }" 
+      :class="date.class || 'bg-light'"
+      class="flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-medium"
+      :align="search ? 'right' : 'left'"
+    >
+
+      <Calendar
+        v-model:date="date"
+        :locale="$i18n.locale"
+        :allowRange="true"
+        class="radius-medium w-100 o-hidden bg-light"
+      />
+    </Dropdown> 
+
     <template
       v-if="filter"
     >
       <div 
         :class="filter.class || 'bg-light'"
-        class="flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100"
+        class="flex-center flex pd-thin bg-light radius-medium aspect-1x1 h-100"
       >
         <IconFilter @click="() => filter.active = !filter.active" class="w-1r h-auto"/>
       </div>
@@ -26,7 +44,7 @@
         @toggle="() => filter.active = false"
         class="z-index-10 pos-fixed pos-r-0"
         :class="{
-          'pos-t-4r':  filter.active,
+          'pos-t-0':  filter.active,
           'pos-t-100': !filter.active
         }"
       >
@@ -34,30 +52,11 @@
           v-model:filter="filter"
           :options="filter.options"
           @click_filter="() => { filter.active = false } "
-          class="h-100 w-100 pd-small pd-b-5r bg-light"
+          class="h-max w-100 pd-small pd-b-5r bg-light"
         />
       </BottomSheet>  
     </template>
 
-    <Dropdown 
-      v-if="date"
-      :label="{
-        component: ButtonDate,
-        props: { date: date }
-      }" 
-      :class="date.class || 'bg-light'"
-      class="flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big"
-      :align="search ? 'right' : 'left'"
-    >
-
-      <Calendar
-        v-model:date="date"
-        :locale="$i18n.locale"
-        :allowRange="true"
-        class="radius-semi w-100 o-hidden bg-light"
-      />
-    </Dropdown> 
-
     <Dropdown 
       v-if="sort && !sort.hideButton"
       :label="{
@@ -66,7 +65,7 @@
         class: 'w-1r'
       }" 
       :class="sort.class || 'bg-light'"
-      class="radius-extra aspect-1x1 h-100"
+      class="radius-medium aspect-1x1 h-100"
       :align="search ? 'right' : 'left'"
     >
 
@@ -74,15 +73,36 @@
         v-model:param="sort.param"
         v-model:order="sort.order"
         :options="sort.options"
-        class="h-100 pd-small radius-semi t-white bg-black"
+        class="h-100 pd-small radius-medium t-white bg-black"
       />
     </Dropdown> 
+
+    <!-- Actions -->
+    <template
+      v-if="actions.length"
+    >
+      <template v-for="action in actions" :key="action.key">
+        <div 
+        :class="action.class || 'bg-light'"
+        class="flex-center flex pd-thin bg-light radius-medium aspect-1x1 h-100"
+      >
+        <component
+          :is="action.component"
+          @click="action.handler"
+          class="w-1r h-auto"
+        >
+        </component>
+
+      </div>
+      </template>
+    </template>
   </div>
 
   <TransitionGroup 
     v-if="isLoading"
     tag="ul" 
     name="scaleTransition" 
+    class="pos-relative z-index-1"
    :class="$attrs.class"
   >
     <Skeleton
@@ -92,14 +112,14 @@
       :horizontal="skeleton.horizontal"
       :loading="skeleton.apply_to_slot"
       :key="'skeleton-' + i"
-      class="radius-medium o-hidden d-block"
+      class="radius-medium flex-child-default o-hidden d-block"
     />
     <Loader v-if="isLoading && skeleton?.hide"/>
   </TransitionGroup>
 
   <TransitionGroup 
     tag="ul" 
-    v-if="!isLoading && itemsList.length < 1"
+    v-else-if="itemsList.length < 1"
     name="feed"
   >
     <EmptyState
@@ -113,12 +133,12 @@
    </TransitionGroup>
 
   <TransitionGroup 
+    v-else
     tag="ul" 
     name="feed"
     :class="$attrs.class"
   >
     <slot
-      v-if="!isLoading && itemsList.length > 0"
       :items="itemsList"
     >
     </slot>
@@ -135,7 +155,6 @@
   <div v-else key="sentinel" ref="sentinel" class="sentinel"></div> 
 
   <div
-
     v-if="isLoadingExtra"
     class="col-w-100 w-100 pos-relative"
   >
@@ -196,6 +215,10 @@ const props = defineProps({
       },
     }),
   },
+  actions: {
+    type: Array,
+    default: () => []
+  },
   skeleton: {
     type: Object,
     default: () => ({
@@ -248,6 +271,11 @@ 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) {
   let timeoutId = null;
@@ -258,6 +286,8 @@ function debounce(fn, delay) {
 }
 
 const debouncedSearch = debounce((value) => {
+  // Устанавливаем флаг поиска
+  isSearching.value = true;
   currentSearch.value = value;
   currentSkip.value = 0;
   currentLimit.value = 10;
@@ -268,22 +298,47 @@ function updateSearch(search) {
   debouncedSearch(search);
 }
 
+// Вспомогательная функция для удаления null/undefined значений
+const removeNullValues = (obj) => {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([_, value]) => value != null)
+  );
+};
+
 const loadMoreItems = async () => {
-  isLoadingExtra.value = true
+  if (!hasMoreItems.value || isLoadingExtra.value) {
+    return;
+  }
+  
+  isLoadingExtra.value = true;
+  
+  // Увеличиваем счетчик запросов
+  const currentRequestId = ++requestId;
 
-  if (hasMoreItems.value) {
-    currentSkip.value += currentLimit.value;
-    
-    const data = await props.store.read({
+  currentSkip.value += currentLimit.value;
+  
+  try {
+    // Собираем все параметры в один объект
+    const allParams = {
       skip: currentSkip.value,
       limit: currentLimit.value,
       search: currentSearch.value,
-      dateStart: date.value ? date.value.start : null,
-      dateEnd: date.value ? date.value.end : null,
-      sortParam: sort.value ? sort.value.param : null,
-      sortOrder: sort.value ? sort.value.order : null,
+      dateStart: date.value?.start,
+      dateEnd: date.value?.end,
+      sortParam: sort.value?.param,
+      sortOrder: sort.value?.order,
       ...props.options
-    });
+    };
+
+    // Фильтруем null/undefined значения для всего объекта
+    const params = removeNullValues(allParams);
+
+    const data = await props.store.read(params);
+
+    // Проверяем, актуален ли еще этот запрос
+    if (currentRequestId !== requestId) {
+      return;
+    }
 
     if (data.length === 0) {
       hasMoreItems.value = false;
@@ -296,36 +351,74 @@ const loadMoreItems = async () => {
     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;
+    }
   }
-
-  isLoadingExtra.value = false
 };
 
 const fetchItems = async () => {
   isLoading.value = true;
-  const data = await props.store.read({
-    skip: currentSkip.value,
-    limit: currentLimit.value,
-    dateStart: date.value ? date.value.start : null,
-    dateEnd: date.value ? date.value.end : null,
-    sortParam: sort.value ? sort.value.param : null,
-    sortOrder: sort.value ? sort.value.order : null,
-    search: currentSearch.value,
-    ...props.options
-  });
-
-  if (data.length === 0) {
-    hasMoreItems.value = false;
-  } else if (data.length < currentLimit.value) {
-    hasMoreItems.value = false;
-  } else {
-    hasMoreItems.value = true;
+  
+  // Увеличиваем счетчик при каждом новом запросе
+  const currentRequestId = ++requestId;
+  
+  // Очищаем список только при поиске
+  if (isSearching.value) {
+    itemsList.value = [];
+    isSearching.value = false; // Сбрасываем флаг после использования
   }
+  
+  try {
+    // Собираем все параметры в один объект
+    const allParams = {
+      skip: currentSkip.value,
+      limit: currentLimit.value,
+      search: currentSearch.value,
+      dateStart: date.value?.start,
+      dateEnd: date.value?.end,
+      sortParam: sort.value?.param,
+      sortOrder: sort.value?.order,
+      ...props.options
+    };
+
+    // Фильтруем null/undefined значения для всего объекта
+    const params = removeNullValues(allParams);
+
+    const data = await props.store.read(params);
+
+    // Проверяем, актуален ли еще этот запрос
+    if (currentRequestId !== requestId) {
+      // Если нет - игнорируем результат
+      return;
+    }
 
-  itemsList.value = data;
-  if (items.value) items.value = itemsList.value;
-  isLoading.value = false;
+    if (data.length === 0) {
+      hasMoreItems.value = false;
+    } else if (data.length < currentLimit.value) {
+      hasMoreItems.value = false;
+    } else {
+      hasMoreItems.value = true;
+    }
+
+    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;
+    }
+  }
 };
+
 watch(
   [() => props.external, () => date.value, () => ({...sort.value}), () => ({...props.options})],
   ([newExternal, newDate, newSort, newOptions], [oldExternal, oldDate, oldSort, oldOptions]) => {
@@ -342,6 +435,7 @@ watch(
   },
   { deep: true }
 );
+
 let observer = null
 
 onMounted(async () => {
@@ -365,7 +459,6 @@ onUnmounted(() => {
 });
 </script>
 
-
 <style>
 .feed-move, /* apply transition to moving elements */
 .feed-enter-active,

package/src/components/Field/Field.vue

@@ -1,74 +1,76 @@
 <script setup>
-  import { ref, computed, onUpdated, onMounted, nextTick, watch } from 'vue'
+import { ref, onMounted, nextTick, watch } from 'vue'
+const emit = defineEmits(['update:field', 'focus', 'blur']);
+const props = defineProps({
+  label: null,
+  symbol: null,
+  type: 'text',
+  placeholder: 'Enter something here',
+  field: null,
+  value: null,
+  validation: false,
+  disabled: null,
+  tabindex: -1,
+  autofocus: false
+});
+if (props.value) {
+  emit('update:field', props.value)
+}
+const textarea = ref(null);
+const input = ref(null);
+
+function resize() {
+  if (!textarea.value) {
+    textarea.value.style.height = '';
+    return;
+  }
   
-  const emit = defineEmits(['update:field', 'focus', 'blur']);
-  const props = defineProps({
-    label: null,
-    symbol: null,
-    type: 'text',
-    placeholder: 'Enter something here',
-    field: null,
-    value: null,
-    validation: false,
-    disabled: null,
-    tabindex: -1,
-    autofocus: false
-  });
+  const el = textarea.value;
   
-  if (props.value) {
-    emit('update:field', props.value)
-  }
+  // Сначала сбрасываем высоту для правильного расчета scrollHeight
+  el.style.height = '';
   
-  const textarea = ref(null);
-  const input = ref(null);
+  const scrollHeight = el.scrollHeight;
   
-  function resize() {
-    if (textarea.value) textarea.value.style.height = "1rem";
-    if (textarea.value) textarea.value.style.height = textarea.value?.scrollHeight + "px";
+  // Теперь устанавливаем высоту на основе scrollHeight
+  if (scrollHeight > 33) {
+    el.style.height = scrollHeight + 'px';
+  } else {
+    el.style.height = '';
   }
-  
-  function focus() {
-    if (props.autofocus) {
-      if (props.type === 'textarea' && textarea.value) {
-        textarea.value.focus();
-      } else if (input.value) {
-        input.value.focus();
-      }
+}
+
+
+function focus() {
+  if (props.autofocus) {
+    if (props.type === 'textarea' && textarea.value) {
+      textarea.value.focus();
+    } else if (input.value) {
+      input.value.focus();
     }
   }
-  
-  // Отслеживаем изменение пропса autofocus
-  watch(() => props.autofocus, (newVal) => {
-    if (newVal) {
-      nextTick(() => {
-        focus();
-      });
-    }
-  });
-  
-  onUpdated(() => {
-    if (props.type === 'textarea') {
-      resize();
-    }
-    // Проверяем автофокус при обновлении компонента
-    nextTick(() => {
-      focus();
-    });
-  });
-  
-  onMounted(() => {
-    if (props.type === 'textarea') {
-      resize();
-    }
-    // Устанавливаем фокус при монтировании компонента
-    nextTick(() => {
-      focus();
-    });
-  });
-  
-  const text = ref(props.field);
-</script>
+}
 
+// Следим за изменениями поля
+watch(() => props.field, () => {
+  if (props.type === 'textarea') {
+    nextTick(resize);
+  }
+});
+
+// Autofocus
+watch(() => props.autofocus, (newVal) => {
+  if (newVal) {
+    nextTick(focus);
+  }
+});
+
+onMounted(() => {
+  nextTick(focus);
+});
+
+const text = ref(props.field);
+</script>
 <template>
   <div 
     :class="[
@@ -87,7 +89,6 @@
         {{label}}
       </span>
     </div>
-
     <div class="w-100">
       <input 
         v-if="type !== 'textarea'"
@@ -102,7 +103,6 @@
         :tabindex="tabindex"
         :disabled="disabled"
         :autofocus="autofocus"
-
       />
       <textarea 
         v-else
@@ -111,16 +111,13 @@
         @focus="event => emit('focus', event)"
         @blur="event => emit('blur', event)"
         class="w-100"
-        style="resize: vertical;"
         :value="field"
         :placeholder="placeholder"
         :tabindex="tabindex"
-         :disabled="disabled"
+        :disabled="disabled"
       />
     </div> 
-
     <slot></slot>
-
     <div 
       v-if="symbol" 
       class="t-transp mn-l-small"
@@ -130,7 +127,6 @@
       </span>
     </div>
   </div>
-
   <!-- Validation -->
   <transition name="fade">
     <div v-if="validation" class="mn-t-thin mn-b-thin mn-b-thin invalid-feedback">
@@ -138,10 +134,21 @@
     </div>
   </transition>
 </template>
-
-<style lang="scss" scoped>
-  input, textarea, span {
-    line-height: 1;
-    color: inherit;
-  }
+<style scoped>
+input, textarea, span {
+  line-height: 1;
+  color: inherit;
+}
+textarea {
+  resize: none;
+  overflow: hidden;
+  height: 1rem; 
+  line-height: 1rem;
+}
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator {
+  filter: invert(1); /* Это инвертирует иконку, подходит при светлом фоне */
+  opacity: 1;
+  color: inherit;
+}
 </style>

package/src/components/FieldPhone/FieldPhone.vue

@@ -97,8 +97,8 @@
   import { ref, reactive, watch, computed, onMounted, nextTick } from 'vue';
   import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
-  import clickOutside from './click-outside';
-  import allCountries from './all-countries';
+  import clickOutside from './click-outside.js';
+  import allCountries from './all-countries.js';
 
   let vClickOutside = clickOutside