@ozdao/martyrs 0.2.477 → 0.2.478

package/dist/martyrs/src/components/Feed/Feed.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Feed.vue.cjs","sources":["../../../../../src/components/Feed/Feed.vue"],"sourcesContent":["<template>\n\n  <div v-if=\"search || date || (sort && !sort.hideButton)\" class=\"mn-b-thin flex-nowrap flex gap-thin\">\n\n    <BlockSearch \n      v-if=\"search\"\n      :placeholder=\"search.placeholder || 'Search...'\"\n      :class=\"search.class || 'bg-light'\"\n      @search=\"updateSearch\"\n      :autofocus=\"search.autofocus\"\n    />\n\n    <template\n      v-if=\"filter\"\n    >\n      <div \n        :class=\"filter.class || 'bg-light'\"\n        class=\"flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100\"\n      >\n        <IconFilter @click=\"() => filter.active = !filter.active\" class=\"w-1r h-auto\"/>\n      </div>\n\n    \n      <BottomSheet\n        :show=\"filter.active\"\n        @toggle=\"() => filter.active = false\"\n        class=\"z-index-10 pos-fixed pos-r-0\"\n        :class=\"{\n          'pos-t-4r':  filter.active,\n          'pos-t-100': !filter.active\n        }\"\n      >\n        <BlockFilter\n          v-model:filter=\"filter\"\n          :options=\"filter.options\"\n          @click_filter=\"() => { filter.active = false } \"\n          class=\"h-100 w-100 pd-small pd-b-5r bg-light\"\n        />\n      </BottomSheet>  \n    </template>\n\n    <Dropdown \n      v-if=\"date\"\n      :label=\"{\n        component: ButtonDate,\n        props: { date: date }\n      }\" \n      :class=\"date.class || 'bg-light'\"\n      class=\"flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <Calendar\n        v-model:date=\"date\"\n        :locale=\"$i18n.locale\"\n        :allowRange=\"true\"\n        class=\"radius-semi w-100 o-hidden bg-light\"\n      />\n    </Dropdown> \n\n    <Dropdown \n      v-if=\"sort && !sort.hideButton\"\n      :label=\"{\n        component: ButtonSort,\n        props: { order: sort.order },\n        class: 'w-1r'\n      }\" \n      :class=\"sort.class || 'bg-light'\"\n      class=\"radius-extra aspect-1x1 h-100\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <BlockSorting\n        v-model:param=\"sort.param\"\n        v-model:order=\"sort.order\"\n        :options=\"sort.options\"\n        class=\"h-100 pd-small radius-semi t-white bg-black\"\n      />\n    </Dropdown> \n  </div>\n\n  <TransitionGroup \n    v-if=\"isLoading\"\n    tag=\"ul\" \n    name=\"scaleTransition\" \n   :class=\"$attrs.class\"\n  >\n    <Skeleton\n      v-if=\"isLoading && !skeleton?.hide\"\n      v-for=\"i in currentLimit\" \n      :structure=\"skeleton.structure\"\n      :horizontal=\"skeleton.horizontal\"\n      :loading=\"skeleton.apply_to_slot\"\n      :key=\"'skeleton-' + i\"\n      class=\"radius-medium o-hidden d-block\"\n    />\n    <Loader v-if=\"isLoading && skeleton?.hide\"/>\n  </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    v-if=\"!isLoading && itemsList.length < 1\"\n    name=\"feed\"\n  >\n    <EmptyState\n      v-if=\"!isLoading && itemsList.length < 1\"\n      :title=\"states.empty.title\"\n      :description=\"states.empty.description\"\n      :action=\"states.empty.action\"\n      :callback=\"states.empty.callback\"\n      class=\"pd-medium mn-b-thin bg-light radius-medium\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      v-if=\"!isLoading && itemsList.length > 0\"\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <button\n    v-if=\"showLoadMore && hasMoreItems && itemsList.length > 0 && !isLoadingExtra\"\n    @click=\"loadMoreItems\"\n    class=\"col-w-100 mn-t-thin w-100 t-black bg-main button\"\n  >\n    Load More\n  </button>\n\n  <div v-else key=\"sentinel\" ref=\"sentinel\" class=\"sentinel\"></div> \n\n  <div\n\n    v-if=\"isLoadingExtra\"\n    class=\"col-w-100 w-100 pos-relative\"\n  >\n    <Loader/>\n  </div>\n \n\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';\n\nimport SkeletonEvent from '@martyrs/src/modules/icons/skeletons/SkeletonEvent.vue'\n\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Skeleton from '@martyrs/src/components/Skeleton/Skeleton.vue';\nimport EmptyState from '@martyrs/src/components/EmptyState/EmptyState.vue';\nimport Dropdown from \"@martyrs/src/components/Dropdown/Dropdown.vue\";\nimport Calendar from '@martyrs/src/components/DatePicker/Calendar.vue'\nimport BottomSheet from '@martyrs/src/components/BottomSheet/BottomSheet.vue';\n\nimport BlockSearch from '@martyrs/src/modules/globals/views/components/blocks/BlockSearch.vue'\nimport BlockSorting  from '@martyrs/src/modules/globals/views/components/blocks/BlockSorting.vue'\nimport BlockFilter  from '@martyrs/src/modules/globals/views/components/blocks/BlockFilter.vue'\n\nimport ButtonSort  from '@martyrs/src/modules/globals/views/components/elements/ButtonSort.vue'\nimport ButtonDate  from '@martyrs/src/modules/globals/views/components/elements/ButtonDate.vue'\n\nimport IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue'\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'\n\nconst search = defineModel('search')\nconst sort = defineModel('sort')\nconst filter = defineModel('filter')\nconst date = defineModel('date')\nconst items = defineModel('items')\n\n// Пропсы\nconst props = defineProps({\n  showLoadMore: {\n    type: Boolean,\n    default: true\n  },\n  LoadMore: {\n    type: Boolean,\n    default: true\n  },\n  search: {\n    type: [Boolean, Object],\n    default: false\n  },\n  states: {\n    type: Object,\n    default: () => ({\n      empty: {\n        title: 'Nothing found',\n        description: 'Sorry, nothing found',\n      },\n    }),\n  },\n  skeleton: {\n    type: Object,\n    default: () => ({\n      hide: false,\n      horizontal: false,\n      structure: [\n        { block: 'text', size: 'medium' },\n        { block: 'text', size: 'large' },\n        { block: 'button', size: 'small' }\n      ]\n    }),\n   \n  },\n  store: {\n    type: Object,\n    default: () => ({\n      read: Function,\n      state: Object,\n    }),\n  },\n  external: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: () => ({\n      category: null,\n      limit: 10, \n      skip: 0 ,\n      owner:  null,\n      creator:  null,\n      customer:  null,\n      user:  null,\n      status: null,\n      period:  null,\n      contain:  null,\n    }),\n  },\n});\n  \nconst itemsList = shallowRef(items.value || []);\nconst hasMoreItems = ref(false);\n\nlet isLoading = ref(true);\nlet isLoadingExtra = ref(false);\nlet sentinel = ref(null)\n\nlet currentSkip = ref(props.options.skip ? props.options.skip : 0);\nlet currentLimit = ref(props.options.limit ? props.options.limit : 10);\n\nlet currentSearch = ref('');\n\nfunction debounce(fn, delay) {\n  let timeoutId = null;\n  return (...args) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => fn(...args), delay);\n  };\n}\n\nconst debouncedSearch = debounce((value) => {\n  currentSearch.value = value;\n  currentSkip.value = 0;\n  currentLimit.value = 10;\n  fetchItems();\n}, 500);\n\nfunction updateSearch(search) {\n  debouncedSearch(search);\n}\n\nconst loadMoreItems = async () => {\n  isLoadingExtra.value = true\n\n  if (hasMoreItems.value) {\n    currentSkip.value += currentLimit.value;\n    \n    const data = await props.store.read({\n      skip: currentSkip.value,\n      limit: currentLimit.value,\n      search: currentSearch.value,\n      dateStart: date.value ? date.value.start : null,\n      dateEnd: date.value ? date.value.end : null,\n      sortParam: sort.value ? sort.value.param : null,\n      sortOrder: sort.value ? sort.value.order : null,\n      ...props.options\n    });\n\n    if (data.length === 0) {\n      hasMoreItems.value = false;\n    } else if (data.length < currentLimit.value) {\n      hasMoreItems.value = false;\n    } else {\n      hasMoreItems.value = true;\n    }\n\n    itemsList.value = [...itemsList.value, ...data];\n    \n    if (items.value) items.value = itemsList.value;\n  }\n\n  isLoadingExtra.value = false\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  const data = await props.store.read({\n    skip: currentSkip.value,\n    limit: currentLimit.value,\n    dateStart: date.value ? date.value.start : null,\n    dateEnd: date.value ? date.value.end : null,\n    sortParam: sort.value ? sort.value.param : null,\n    sortOrder: sort.value ? sort.value.order : null,\n    search: currentSearch.value,\n    ...props.options\n  });\n\n  if (data.length === 0) {\n    hasMoreItems.value = false;\n  } else if (data.length < currentLimit.value) {\n    hasMoreItems.value = false;\n  } else {\n    hasMoreItems.value = true;\n  }\n\n  itemsList.value = data;\n  if (items.value) items.value = itemsList.value;\n  isLoading.value = false;\n};\nwatch(\n  [() => props.external, () => date.value, () => ({...sort.value}), () => ({...props.options})],\n  ([newExternal, newDate, newSort, newOptions], [oldExternal, oldDate, oldSort, oldOptions]) => {\n    if (\n      newExternal !== oldExternal ||\n      newDate !== oldDate ||\n      newSort?.order !== oldSort?.order ||\n      newSort?.param !== oldSort?.param ||\n      JSON.stringify(newOptions) !== JSON.stringify(oldOptions)\n    ) {\n      currentSkip.value = 0;\n      fetchItems();\n    }\n  },\n  { deep: true }\n);\nlet observer = null\n\nonMounted(async () => {\n  await fetchItems()\n\n  if (typeof window !== 'undefined' && !props.showLoadMore && props.LoadMore) {\n    observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting)) {\n        loadMoreItems()\n      }\n    })\n\n    if (sentinel.value) observer.observe(sentinel.value)\n  }\n});\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect();\n  }\n});\n</script>\n\n\n<style>\n.feed-move, /* apply transition to moving elements */\n.feed-enter-active,\n.feed-leave-active {\n  transition: all 0.5s ease;\n}\n\n.feed-enter-from,\n.feed-leave-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n/* ensure leaving items are taken out of layout flow so that moving\n   animations can be calculated correctly. */\n.feed-leave-active {\n  position: absolute;\n}\n</style>"],"names":["_useModel","shallowRef","ref","search","watch","onMounted","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"Feed.vue.cjs","sources":["../../../../../src/components/Feed/Feed.vue"],"sourcesContent":["<template>\n  <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\">\n\n    <BlockSearch \n      v-if=\"search\"\n      :placeholder=\"search.placeholder || 'Search...'\"\n      :class=\"search.class || 'bg-light'\"\n      @search=\"updateSearch\"\n      :autofocus=\"search.autofocus\"\n    />\n\n    <Dropdown \n      v-if=\"date\"\n      :label=\"{\n        component: ButtonDate,\n        props: { date: date }\n      }\" \n      :class=\"date.class || 'bg-light'\"\n      class=\"flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-medium\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <Calendar\n        v-model:date=\"date\"\n        :locale=\"$i18n.locale\"\n        :allowRange=\"true\"\n        class=\"radius-medium w-100 o-hidden bg-light\"\n      />\n    </Dropdown> \n\n    <template\n      v-if=\"filter\"\n    >\n      <div \n        :class=\"filter.class || 'bg-light'\"\n        class=\"flex-center flex pd-thin bg-light radius-medium aspect-1x1 h-100\"\n      >\n        <IconFilter @click=\"() => filter.active = !filter.active\" class=\"w-1r h-auto\"/>\n      </div>\n\n    \n      <BottomSheet\n        :show=\"filter.active\"\n        @toggle=\"() => filter.active = false\"\n        class=\"z-index-10 pos-fixed pos-r-0\"\n        :class=\"{\n          'pos-t-0':  filter.active,\n          'pos-t-100': !filter.active\n        }\"\n      >\n        <BlockFilter\n          v-model:filter=\"filter\"\n          :options=\"filter.options\"\n          @click_filter=\"() => { filter.active = false } \"\n          class=\"h-max w-100 pd-small pd-b-5r bg-light\"\n        />\n      </BottomSheet>  \n    </template>\n\n    <Dropdown \n      v-if=\"sort && !sort.hideButton\"\n      :label=\"{\n        component: ButtonSort,\n        props: { order: sort.order },\n        class: 'w-1r'\n      }\" \n      :class=\"sort.class || 'bg-light'\"\n      class=\"radius-medium aspect-1x1 h-100\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <BlockSorting\n        v-model:param=\"sort.param\"\n        v-model:order=\"sort.order\"\n        :options=\"sort.options\"\n        class=\"h-100 pd-small radius-medium t-white bg-black\"\n      />\n    </Dropdown> \n\n    <!-- Actions -->\n    <template\n      v-if=\"actions.length\"\n    >\n      <template v-for=\"action in actions\" :key=\"action.key\">\n        <div \n        :class=\"action.class || 'bg-light'\"\n        class=\"flex-center flex pd-thin bg-light radius-medium aspect-1x1 h-100\"\n      >\n        <component\n          :is=\"action.component\"\n          @click=\"action.handler\"\n          class=\"w-1r h-auto\"\n        >\n        </component>\n\n      </div>\n      </template>\n    </template>\n  </div>\n\n  <TransitionGroup \n    v-if=\"isLoading\"\n    tag=\"ul\" \n    name=\"scaleTransition\" \n    class=\"pos-relative z-index-1\"\n   :class=\"$attrs.class\"\n  >\n    <Skeleton\n      v-if=\"isLoading && !skeleton?.hide\"\n      v-for=\"i in currentLimit\" \n      :structure=\"skeleton.structure\"\n      :horizontal=\"skeleton.horizontal\"\n      :loading=\"skeleton.apply_to_slot\"\n      :key=\"'skeleton-' + i\"\n      class=\"radius-medium flex-child-default o-hidden d-block\"\n    />\n    <Loader v-if=\"isLoading && skeleton?.hide\"/>\n  </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    v-else-if=\"itemsList.length < 1\"\n    name=\"feed\"\n  >\n    <EmptyState\n      v-if=\"!isLoading && itemsList.length < 1\"\n      :title=\"states.empty.title\"\n      :description=\"states.empty.description\"\n      :action=\"states.empty.action\"\n      :callback=\"states.empty.callback\"\n      class=\"pd-medium mn-b-thin bg-light radius-medium\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    v-else\n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <button\n    v-if=\"showLoadMore && hasMoreItems && itemsList.length > 0 && !isLoadingExtra\"\n    @click=\"loadMoreItems\"\n    class=\"col-w-100 mn-t-thin w-100 t-black bg-main button\"\n  >\n    Load More\n  </button>\n\n  <div v-else key=\"sentinel\" ref=\"sentinel\" class=\"sentinel\"></div> \n\n  <div\n    v-if=\"isLoadingExtra\"\n    class=\"col-w-100 w-100 pos-relative\"\n  >\n    <Loader/>\n  </div>\n \n\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';\n\nimport SkeletonEvent from '@martyrs/src/modules/icons/skeletons/SkeletonEvent.vue'\n\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Skeleton from '@martyrs/src/components/Skeleton/Skeleton.vue';\nimport EmptyState from '@martyrs/src/components/EmptyState/EmptyState.vue';\nimport Dropdown from \"@martyrs/src/components/Dropdown/Dropdown.vue\";\nimport Calendar from '@martyrs/src/components/DatePicker/Calendar.vue'\nimport BottomSheet from '@martyrs/src/components/BottomSheet/BottomSheet.vue';\n\nimport BlockSearch from '@martyrs/src/modules/globals/views/components/blocks/BlockSearch.vue'\nimport BlockSorting  from '@martyrs/src/modules/globals/views/components/blocks/BlockSorting.vue'\nimport BlockFilter  from '@martyrs/src/modules/globals/views/components/blocks/BlockFilter.vue'\n\nimport ButtonSort  from '@martyrs/src/modules/globals/views/components/elements/ButtonSort.vue'\nimport ButtonDate  from '@martyrs/src/modules/globals/views/components/elements/ButtonDate.vue'\n\nimport IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue'\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'\n\nconst search = defineModel('search')\nconst sort = defineModel('sort')\nconst filter = defineModel('filter')\nconst date = defineModel('date')\nconst items = defineModel('items')\n\n// Пропсы\nconst props = defineProps({\n  showLoadMore: {\n    type: Boolean,\n    default: true\n  },\n  LoadMore: {\n    type: Boolean,\n    default: true\n  },\n  search: {\n    type: [Boolean, Object],\n    default: false\n  },\n  states: {\n    type: Object,\n    default: () => ({\n      empty: {\n        title: 'Nothing found',\n        description: 'Sorry, nothing found',\n      },\n    }),\n  },\n  actions: {\n    type: Array,\n    default: () => []\n  },\n  skeleton: {\n    type: Object,\n    default: () => ({\n      hide: false,\n      horizontal: false,\n      structure: [\n        { block: 'text', size: 'medium' },\n        { block: 'text', size: 'large' },\n        { block: 'button', size: 'small' }\n      ]\n    }),\n   \n  },\n  store: {\n    type: Object,\n    default: () => ({\n      read: Function,\n      state: Object,\n    }),\n  },\n  external: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: () => ({\n      category: null,\n      limit: 10, \n      skip: 0 ,\n      owner:  null,\n      creator:  null,\n      customer:  null,\n      user:  null,\n      status: null,\n      period:  null,\n      contain:  null,\n    }),\n  },\n});\n  \nconst itemsList = shallowRef(items.value || []);\nconst hasMoreItems = ref(false);\n\nlet isLoading = ref(true);\nlet isLoadingExtra = ref(false);\nlet sentinel = ref(null)\n\nlet currentSkip = ref(props.options.skip ? props.options.skip : 0);\nlet currentLimit = ref(props.options.limit ? props.options.limit : 10);\n\nlet currentSearch = ref('');\n// Флаг для определения поискового запроса\nlet isSearching = ref(false);\n\n// Счетчик для отслеживания актуальности запросов\nlet requestId = 0;\n\nfunction debounce(fn, delay) {\n  let timeoutId = null;\n  return (...args) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => fn(...args), delay);\n  };\n}\n\nconst debouncedSearch = debounce((value) => {\n  // Устанавливаем флаг поиска\n  isSearching.value = true;\n  currentSearch.value = value;\n  currentSkip.value = 0;\n  currentLimit.value = 10;\n  fetchItems();\n}, 500);\n\nfunction updateSearch(search) {\n  debouncedSearch(search);\n}\n\n// Вспомогательная функция для удаления null/undefined значений\nconst removeNullValues = (obj) => {\n  return Object.fromEntries(\n    Object.entries(obj).filter(([_, value]) => value != null)\n  );\n};\n\nconst loadMoreItems = async () => {\n  if (!hasMoreItems.value || isLoadingExtra.value) {\n    return;\n  }\n  \n  isLoadingExtra.value = true;\n  \n  // Увеличиваем счетчик запросов\n  const currentRequestId = ++requestId;\n\n  currentSkip.value += currentLimit.value;\n  \n  try {\n    // Собираем все параметры в один объект\n    const allParams = {\n      skip: currentSkip.value,\n      limit: currentLimit.value,\n      search: currentSearch.value,\n      dateStart: date.value?.start,\n      dateEnd: date.value?.end,\n      sortParam: sort.value?.param,\n      sortOrder: sort.value?.order,\n      ...props.options\n    };\n\n    // Фильтруем null/undefined значения для всего объекта\n    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\n\n    // Проверяем, актуален ли еще этот запрос\n    if (currentRequestId !== requestId) {\n      return;\n    }\n\n    if (data.length === 0) {\n      hasMoreItems.value = false;\n    } else if (data.length < currentLimit.value) {\n      hasMoreItems.value = false;\n    } else {\n      hasMoreItems.value = true;\n    }\n\n    itemsList.value = [...itemsList.value, ...data];\n    \n    if (items.value) items.value = itemsList.value;\n    \n  } catch (error) {\n    console.error('Load more error:', error);\n  } finally {\n    // Устанавливаем isLoadingExtra только для актуального запроса\n    if (currentRequestId === requestId) {\n      isLoadingExtra.value = false;\n    }\n  }\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  \n  // Увеличиваем счетчик при каждом новом запросе\n  const currentRequestId = ++requestId;\n  \n  // Очищаем список только при поиске\n  if (isSearching.value) {\n    itemsList.value = [];\n    isSearching.value = false; // Сбрасываем флаг после использования\n  }\n  \n  try {\n    // Собираем все параметры в один объект\n    const allParams = {\n      skip: currentSkip.value,\n      limit: currentLimit.value,\n      search: currentSearch.value,\n      dateStart: date.value?.start,\n      dateEnd: date.value?.end,\n      sortParam: sort.value?.param,\n      sortOrder: sort.value?.order,\n      ...props.options\n    };\n\n    // Фильтруем null/undefined значения для всего объекта\n    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\n\n    // Проверяем, актуален ли еще этот запрос\n    if (currentRequestId !== requestId) {\n      // Если нет - игнорируем результат\n      return;\n    }\n\n    if (data.length === 0) {\n      hasMoreItems.value = false;\n    } else if (data.length < currentLimit.value) {\n      hasMoreItems.value = false;\n    } else {\n      hasMoreItems.value = true;\n    }\n\n    itemsList.value = data;\n    if (items.value) items.value = itemsList.value;\n    \n  } catch (error) {\n    console.error('Fetch error:', error);\n  } finally {\n    // Устанавливаем isLoading только для актуального запроса\n    if (currentRequestId === requestId) {\n      isLoading.value = false;\n    }\n  }\n};\n\nwatch(\n  [() => props.external, () => date.value, () => ({...sort.value}), () => ({...props.options})],\n  ([newExternal, newDate, newSort, newOptions], [oldExternal, oldDate, oldSort, oldOptions]) => {\n    if (\n      newExternal !== oldExternal ||\n      newDate !== oldDate ||\n      newSort?.order !== oldSort?.order ||\n      newSort?.param !== oldSort?.param ||\n      JSON.stringify(newOptions) !== JSON.stringify(oldOptions)\n    ) {\n      currentSkip.value = 0;\n      fetchItems();\n    }\n  },\n  { deep: true }\n);\n\nlet observer = null\n\nonMounted(async () => {\n  await fetchItems()\n\n  if (typeof window !== 'undefined' && !props.showLoadMore && props.LoadMore) {\n    observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting)) {\n        loadMoreItems()\n      }\n    })\n\n    if (sentinel.value) observer.observe(sentinel.value)\n  }\n});\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect();\n  }\n});\n</script>\n\n<style>\n.feed-move, /* apply transition to moving elements */\n.feed-enter-active,\n.feed-leave-active {\n  transition: all 0.5s ease;\n}\n\n.feed-enter-from,\n.feed-leave-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n/* ensure leaving items are taken out of layout flow so that moving\n   animations can be calculated correctly. */\n.feed-leave-active {\n  position: absolute;\n}\n</style>"],"names":["_useModel","shallowRef","ref","search","watch","onMounted","onUnmounted"],"mappings":"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"}

package/dist/martyrs/src/components/Feed/Feed.vue.js

@@ -1,23 +1,24 @@
-import { mergeModels, useModel, shallowRef, ref, watch, onMounted, onUnmounted, createElementBlock, openBlock, Fragment, createCommentVNode, createBlock, createVNode, normalizeClass, createElementVNode, withCtx, unref, TransitionGroup, renderList, renderSlot } from "vue";
-import Loader from "../Loader/Loader.vue2.js";
+import { mergeModels, useModel, shallowRef, ref, watch, onMounted, onUnmounted, createElementBlock, openBlock, Fragment, createCommentVNode, createBlock, normalizeClass, withCtx, createVNode, createElementVNode, renderList, resolveDynamicComponent, unref, TransitionGroup, renderSlot } from "vue";
+import Loader from "../Loader/Loader.vue.js";
 import Skeleton from "../Skeleton/Skeleton.vue.js";
 import _sfc_main$9 from "../EmptyState/EmptyState.vue.js";
-import _sfc_main$5 from "../Dropdown/Dropdown.vue.js";
+import _sfc_main$2 from "../Dropdown/Dropdown.vue2.js";
 import Calendar from "../DatePicker/Calendar.vue.js";
-import _sfc_main$3 from "../BottomSheet/BottomSheet.vue.js";
+import _sfc_main$5 from "../BottomSheet/BottomSheet.vue.js";
 import _sfc_main$1 from "../../modules/globals/views/components/blocks/BlockSearch.vue.js";
 import _sfc_main$8 from "../../modules/globals/views/components/blocks/BlockSorting.vue.js";
-import _sfc_main$4 from "../../modules/globals/views/components/blocks/BlockFilter.vue.js";
+import _sfc_main$6 from "../../modules/globals/views/components/blocks/BlockFilter.vue.js";
 import _sfc_main$7 from "../../modules/globals/views/components/elements/ButtonSort.vue.js";
-import _sfc_main$6 from "../../modules/globals/views/components/elements/ButtonDate.vue.js";
-import _sfc_main$2 from "../../modules/icons/navigation/IconFilter.vue.js";
+import _sfc_main$3 from "../../modules/globals/views/components/elements/ButtonDate.vue.js";
+import _sfc_main$4 from "../../modules/icons/navigation/IconFilter.vue.js";
 /* empty css          */
 const _hoisted_1 = {
   key: 0,
-  class: "mn-b-thin flex-nowrap flex gap-thin"
+  style: { "transform": "scale(1)" },
+  class: "mn-b-thin z-index-10 pos-relative flex-nowrap flex gap-thin"
 };
 const _hoisted_2 = {
-  key: 5,
+  key: 6,
   class: "col-w-100 w-100 pos-relative"
 };
 const _sfc_main = {
@@ -44,6 +45,10 @@ const _sfc_main = {
         }
       })
     },
+    actions: {
+      type: Array,
+      default: () => []
+    },
     skeleton: {
       type: Object,
       default: () => ({
@@ -110,6 +115,8 @@ const _sfc_main = {
     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;
       return (...args) => {
@@ -118,6 +125,7 @@ const _sfc_main = {
       };
     }
     const debouncedSearch = debounce((value) => {
+      isSearching.value = true;
       currentSearch.value = value;
       currentSkip.value = 0;
       currentLimit.value = 10;
@@ -126,20 +134,35 @@ const _sfc_main = {
     function updateSearch(search2) {
       debouncedSearch(search2);
     }
+    const removeNullValues = (obj) => {
+      return Object.fromEntries(
+        Object.entries(obj).filter(([_, value]) => value != null)
+      );
+    };
     const loadMoreItems = async () => {
+      var _a, _b, _c, _d;
+      if (!hasMoreItems.value || isLoadingExtra.value) {
+        return;
+      }
       isLoadingExtra.value = true;
-      if (hasMoreItems.value) {
-        currentSkip.value += currentLimit.value;
-        const data = await props.store.read({
+      const currentRequestId = ++requestId;
+      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: (_a = date.value) == null ? void 0 : _a.start,
+          dateEnd: (_b = date.value) == null ? void 0 : _b.end,
+          sortParam: (_c = sort.value) == null ? void 0 : _c.param,
+          sortOrder: (_d = sort.value) == null ? void 0 : _d.order,
           ...props.options
-        });
+        };
+        const params = removeNullValues(allParams);
+        const data = await props.store.read(params);
+        if (currentRequestId !== requestId) {
+          return;
+        }
         if (data.length === 0) {
           hasMoreItems.value = false;
         } else if (data.length < currentLimit.value) {
@@ -149,31 +172,54 @@ const _sfc_main = {
         }
         itemsList.value = [...itemsList.value, ...data];
         if (items.value) items.value = itemsList.value;
+      } catch (error) {
+        console.error("Load more error:", error);
+      } finally {
+        if (currentRequestId === requestId) {
+          isLoadingExtra.value = false;
+        }
       }
-      isLoadingExtra.value = false;
     };
     const fetchItems = async () => {
+      var _a, _b, _c, _d;
       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: (_a = date.value) == null ? void 0 : _a.start,
+          dateEnd: (_b = date.value) == null ? void 0 : _b.end,
+          sortParam: (_c = sort.value) == null ? void 0 : _c.param,
+          sortOrder: (_d = sort.value) == null ? void 0 : _d.order,
+          ...props.options
+        };
+        const params = removeNullValues(allParams);
+        const data = await props.store.read(params);
+        if (currentRequestId !== requestId) {
+          return;
+        }
+        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 {
+        if (currentRequestId === requestId) {
+          isLoading.value = false;
+        }
       }
-      itemsList.value = data;
-      if (items.value) items.value = itemsList.value;
-      isLoading.value = false;
     };
     watch(
       [() => props.external, () => date.value, () => ({ ...sort.value }), () => ({ ...props.options })],
@@ -212,65 +258,65 @@ const _sfc_main = {
             onSearch: updateSearch,
             autofocus: search.value.autofocus
           }, null, 8, ["placeholder", "class", "autofocus"])) : createCommentVNode("", true),
-          filter.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          date.value ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 1,
+            label: {
+              component: _sfc_main$3,
+              props: { date: date.value }
+            },
+            class: normalizeClass([date.value.class || "bg-light", "flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-medium"]),
+            align: search.value ? "right" : "left"
+          }, {
+            default: withCtx(() => [
+              createVNode(Calendar, {
+                date: date.value,
+                "onUpdate:date": _cache[0] || (_cache[0] = ($event) => date.value = $event),
+                locale: _ctx.$i18n.locale,
+                allowRange: true,
+                class: "radius-medium w-100 o-hidden bg-light"
+              }, null, 8, ["date", "locale"])
+            ]),
+            _: 1
+          }, 8, ["label", "class", "align"])) : createCommentVNode("", true),
+          filter.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
             createElementVNode("div", {
-              class: normalizeClass([filter.value.class || "bg-light", "flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100"])
+              class: normalizeClass([filter.value.class || "bg-light", "flex-center flex pd-thin bg-light radius-medium aspect-1x1 h-100"])
             }, [
-              createVNode(_sfc_main$2, {
-                onClick: _cache[0] || (_cache[0] = () => filter.value.active = !filter.value.active),
+              createVNode(_sfc_main$4, {
+                onClick: _cache[1] || (_cache[1] = () => filter.value.active = !filter.value.active),
                 class: "w-1r h-auto"
               })
             ], 2),
-            createVNode(_sfc_main$3, {
+            createVNode(_sfc_main$5, {
               show: filter.value.active,
-              onToggle: _cache[3] || (_cache[3] = () => filter.value.active = false),
+              onToggle: _cache[4] || (_cache[4] = () => filter.value.active = false),
               class: normalizeClass(["z-index-10 pos-fixed pos-r-0", {
-                "pos-t-4r": filter.value.active,
+                "pos-t-0": filter.value.active,
                 "pos-t-100": !filter.value.active
               }])
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$4, {
+                createVNode(_sfc_main$6, {
                   filter: filter.value,
-                  "onUpdate:filter": _cache[1] || (_cache[1] = ($event) => filter.value = $event),
+                  "onUpdate:filter": _cache[2] || (_cache[2] = ($event) => filter.value = $event),
                   options: filter.value.options,
-                  onClick_filter: _cache[2] || (_cache[2] = () => {
+                  onClick_filter: _cache[3] || (_cache[3] = () => {
                     filter.value.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"
                 }, null, 8, ["filter", "options"])
               ]),
               _: 1
             }, 8, ["show", "class"])
           ], 64)) : createCommentVNode("", true),
-          date.value ? (openBlock(), createBlock(_sfc_main$5, {
-            key: 2,
-            label: {
-              component: _sfc_main$6,
-              props: { date: date.value }
-            },
-            class: normalizeClass([date.value.class || "bg-light", "flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big"]),
-            align: search.value ? "right" : "left"
-          }, {
-            default: withCtx(() => [
-              createVNode(Calendar, {
-                date: date.value,
-                "onUpdate:date": _cache[4] || (_cache[4] = ($event) => date.value = $event),
-                locale: _ctx.$i18n.locale,
-                allowRange: true,
-                class: "radius-semi w-100 o-hidden bg-light"
-              }, null, 8, ["date", "locale"])
-            ]),
-            _: 1
-          }, 8, ["label", "class", "align"])) : createCommentVNode("", true),
-          sort.value && !sort.value.hideButton ? (openBlock(), createBlock(_sfc_main$5, {
+          sort.value && !sort.value.hideButton ? (openBlock(), createBlock(_sfc_main$2, {
             key: 3,
             label: {
               component: _sfc_main$7,
               props: { order: sort.value.order },
               class: "w-1r"
             },
-            class: normalizeClass([sort.value.class || "bg-light", "radius-extra aspect-1x1 h-100"]),
+            class: normalizeClass([sort.value.class || "bg-light", "radius-medium aspect-1x1 h-100"]),
             align: search.value ? "right" : "left"
           }, {
             default: withCtx(() => [
@@ -280,17 +326,28 @@ const _sfc_main = {
                 order: sort.value.order,
                 "onUpdate:order": _cache[6] || (_cache[6] = ($event) => sort.value.order = $event),
                 options: sort.value.options,
-                class: "h-100 pd-small radius-semi t-white bg-black"
+                class: "h-100 pd-small radius-medium t-white bg-black"
               }, null, 8, ["param", "order", "options"])
             ]),
             _: 1
-          }, 8, ["label", "class", "align"])) : createCommentVNode("", true)
+          }, 8, ["label", "class", "align"])) : createCommentVNode("", true),
+          __props.actions.length ? (openBlock(true), createElementBlock(Fragment, { key: 4 }, renderList(__props.actions, (action) => {
+            return openBlock(), createElementBlock("div", {
+              key: action.key,
+              class: normalizeClass([action.class || "bg-light", "flex-center flex pd-thin bg-light radius-medium aspect-1x1 h-100"])
+            }, [
+              (openBlock(), createBlock(resolveDynamicComponent(action.component), {
+                onClick: action.handler,
+                class: "w-1r h-auto"
+              }, null, 8, ["onClick"]))
+            ], 2);
+          }), 128)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
         unref(isLoading) ? (openBlock(), createBlock(TransitionGroup, {
           key: 1,
           tag: "ul",
           name: "scaleTransition",
-          class: normalizeClass(_ctx.$attrs.class)
+          class: normalizeClass(["pos-relative z-index-1", _ctx.$attrs.class])
         }, {
           default: withCtx(() => {
             var _a, _b;
@@ -301,15 +358,14 @@ const _sfc_main = {
                   horizontal: __props.skeleton.horizontal,
                   loading: __props.skeleton.apply_to_slot,
                   key: "skeleton-" + i,
-                  class: "radius-medium o-hidden d-block"
+                  class: "radius-medium flex-child-default o-hidden d-block"
                 }, null, 8, ["structure", "horizontal", "loading"]);
               }), 128)) : createCommentVNode("", true),
               unref(isLoading) && ((_b = __props.skeleton) == null ? void 0 : _b.hide) ? (openBlock(), createBlock(Loader, { key: 1 })) : createCommentVNode("", true)
             ];
           }),
           _: 1
-        }, 8, ["class"])) : createCommentVNode("", true),
-        !unref(isLoading) && itemsList.value.length < 1 ? (openBlock(), createBlock(TransitionGroup, {
+        }, 8, ["class"])) : itemsList.value.length < 1 ? (openBlock(), createBlock(TransitionGroup, {
           key: 2,
           tag: "ul",
           name: "feed"
@@ -325,22 +381,19 @@ const _sfc_main = {
             }, null, 8, ["title", "description", "action", "callback"])) : createCommentVNode("", true)
           ]),
           _: 1
-        })) : createCommentVNode("", true),
-        createVNode(TransitionGroup, {
+        })) : (openBlock(), createBlock(TransitionGroup, {
+          key: 3,
           tag: "ul",
           name: "feed",
           class: normalizeClass(_ctx.$attrs.class)
         }, {
           default: withCtx(() => [
-            !unref(isLoading) && itemsList.value.length > 0 ? renderSlot(_ctx.$slots, "default", {
-              key: 0,
-              items: itemsList.value
-            }) : createCommentVNode("", true)
+            renderSlot(_ctx.$slots, "default", { items: itemsList.value })
           ]),
           _: 3
-        }, 8, ["class"]),
+        }, 8, ["class"])),
         __props.showLoadMore && hasMoreItems.value && itemsList.value.length > 0 && !unref(isLoadingExtra) ? (openBlock(), createElementBlock("button", {
-          key: 3,
+          key: 4,
           onClick: loadMoreItems,
           class: "col-w-100 mn-t-thin w-100 t-black bg-main button"
         }, " Load More ")) : (openBlock(), createElementBlock("div", {

package/dist/martyrs/src/components/Feed/Feed.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Feed.vue.js","sources":["../../../../../src/components/Feed/Feed.vue"],"sourcesContent":["<template>\n\n  <div v-if=\"search || date || (sort && !sort.hideButton)\" class=\"mn-b-thin flex-nowrap flex gap-thin\">\n\n    <BlockSearch \n      v-if=\"search\"\n      :placeholder=\"search.placeholder || 'Search...'\"\n      :class=\"search.class || 'bg-light'\"\n      @search=\"updateSearch\"\n      :autofocus=\"search.autofocus\"\n    />\n\n    <template\n      v-if=\"filter\"\n    >\n      <div \n        :class=\"filter.class || 'bg-light'\"\n        class=\"flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100\"\n      >\n        <IconFilter @click=\"() => filter.active = !filter.active\" class=\"w-1r h-auto\"/>\n      </div>\n\n    \n      <BottomSheet\n        :show=\"filter.active\"\n        @toggle=\"() => filter.active = false\"\n        class=\"z-index-10 pos-fixed pos-r-0\"\n        :class=\"{\n          'pos-t-4r':  filter.active,\n          'pos-t-100': !filter.active\n        }\"\n      >\n        <BlockFilter\n          v-model:filter=\"filter\"\n          :options=\"filter.options\"\n          @click_filter=\"() => { filter.active = false } \"\n          class=\"h-100 w-100 pd-small pd-b-5r bg-light\"\n        />\n      </BottomSheet>  \n    </template>\n\n    <Dropdown \n      v-if=\"date\"\n      :label=\"{\n        component: ButtonDate,\n        props: { date: date }\n      }\" \n      :class=\"date.class || 'bg-light'\"\n      class=\"flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <Calendar\n        v-model:date=\"date\"\n        :locale=\"$i18n.locale\"\n        :allowRange=\"true\"\n        class=\"radius-semi w-100 o-hidden bg-light\"\n      />\n    </Dropdown> \n\n    <Dropdown \n      v-if=\"sort && !sort.hideButton\"\n      :label=\"{\n        component: ButtonSort,\n        props: { order: sort.order },\n        class: 'w-1r'\n      }\" \n      :class=\"sort.class || 'bg-light'\"\n      class=\"radius-extra aspect-1x1 h-100\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <BlockSorting\n        v-model:param=\"sort.param\"\n        v-model:order=\"sort.order\"\n        :options=\"sort.options\"\n        class=\"h-100 pd-small radius-semi t-white bg-black\"\n      />\n    </Dropdown> \n  </div>\n\n  <TransitionGroup \n    v-if=\"isLoading\"\n    tag=\"ul\" \n    name=\"scaleTransition\" \n   :class=\"$attrs.class\"\n  >\n    <Skeleton\n      v-if=\"isLoading && !skeleton?.hide\"\n      v-for=\"i in currentLimit\" \n      :structure=\"skeleton.structure\"\n      :horizontal=\"skeleton.horizontal\"\n      :loading=\"skeleton.apply_to_slot\"\n      :key=\"'skeleton-' + i\"\n      class=\"radius-medium o-hidden d-block\"\n    />\n    <Loader v-if=\"isLoading && skeleton?.hide\"/>\n  </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    v-if=\"!isLoading && itemsList.length < 1\"\n    name=\"feed\"\n  >\n    <EmptyState\n      v-if=\"!isLoading && itemsList.length < 1\"\n      :title=\"states.empty.title\"\n      :description=\"states.empty.description\"\n      :action=\"states.empty.action\"\n      :callback=\"states.empty.callback\"\n      class=\"pd-medium mn-b-thin bg-light radius-medium\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      v-if=\"!isLoading && itemsList.length > 0\"\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <button\n    v-if=\"showLoadMore && hasMoreItems && itemsList.length > 0 && !isLoadingExtra\"\n    @click=\"loadMoreItems\"\n    class=\"col-w-100 mn-t-thin w-100 t-black bg-main button\"\n  >\n    Load More\n  </button>\n\n  <div v-else key=\"sentinel\" ref=\"sentinel\" class=\"sentinel\"></div> \n\n  <div\n\n    v-if=\"isLoadingExtra\"\n    class=\"col-w-100 w-100 pos-relative\"\n  >\n    <Loader/>\n  </div>\n \n\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';\n\nimport SkeletonEvent from '@martyrs/src/modules/icons/skeletons/SkeletonEvent.vue'\n\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Skeleton from '@martyrs/src/components/Skeleton/Skeleton.vue';\nimport EmptyState from '@martyrs/src/components/EmptyState/EmptyState.vue';\nimport Dropdown from \"@martyrs/src/components/Dropdown/Dropdown.vue\";\nimport Calendar from '@martyrs/src/components/DatePicker/Calendar.vue'\nimport BottomSheet from '@martyrs/src/components/BottomSheet/BottomSheet.vue';\n\nimport BlockSearch from '@martyrs/src/modules/globals/views/components/blocks/BlockSearch.vue'\nimport BlockSorting  from '@martyrs/src/modules/globals/views/components/blocks/BlockSorting.vue'\nimport BlockFilter  from '@martyrs/src/modules/globals/views/components/blocks/BlockFilter.vue'\n\nimport ButtonSort  from '@martyrs/src/modules/globals/views/components/elements/ButtonSort.vue'\nimport ButtonDate  from '@martyrs/src/modules/globals/views/components/elements/ButtonDate.vue'\n\nimport IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue'\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'\n\nconst search = defineModel('search')\nconst sort = defineModel('sort')\nconst filter = defineModel('filter')\nconst date = defineModel('date')\nconst items = defineModel('items')\n\n// Пропсы\nconst props = defineProps({\n  showLoadMore: {\n    type: Boolean,\n    default: true\n  },\n  LoadMore: {\n    type: Boolean,\n    default: true\n  },\n  search: {\n    type: [Boolean, Object],\n    default: false\n  },\n  states: {\n    type: Object,\n    default: () => ({\n      empty: {\n        title: 'Nothing found',\n        description: 'Sorry, nothing found',\n      },\n    }),\n  },\n  skeleton: {\n    type: Object,\n    default: () => ({\n      hide: false,\n      horizontal: false,\n      structure: [\n        { block: 'text', size: 'medium' },\n        { block: 'text', size: 'large' },\n        { block: 'button', size: 'small' }\n      ]\n    }),\n   \n  },\n  store: {\n    type: Object,\n    default: () => ({\n      read: Function,\n      state: Object,\n    }),\n  },\n  external: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: () => ({\n      category: null,\n      limit: 10, \n      skip: 0 ,\n      owner:  null,\n      creator:  null,\n      customer:  null,\n      user:  null,\n      status: null,\n      period:  null,\n      contain:  null,\n    }),\n  },\n});\n  \nconst itemsList = shallowRef(items.value || []);\nconst hasMoreItems = ref(false);\n\nlet isLoading = ref(true);\nlet isLoadingExtra = ref(false);\nlet sentinel = ref(null)\n\nlet currentSkip = ref(props.options.skip ? props.options.skip : 0);\nlet currentLimit = ref(props.options.limit ? props.options.limit : 10);\n\nlet currentSearch = ref('');\n\nfunction debounce(fn, delay) {\n  let timeoutId = null;\n  return (...args) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => fn(...args), delay);\n  };\n}\n\nconst debouncedSearch = debounce((value) => {\n  currentSearch.value = value;\n  currentSkip.value = 0;\n  currentLimit.value = 10;\n  fetchItems();\n}, 500);\n\nfunction updateSearch(search) {\n  debouncedSearch(search);\n}\n\nconst loadMoreItems = async () => {\n  isLoadingExtra.value = true\n\n  if (hasMoreItems.value) {\n    currentSkip.value += currentLimit.value;\n    \n    const data = await props.store.read({\n      skip: currentSkip.value,\n      limit: currentLimit.value,\n      search: currentSearch.value,\n      dateStart: date.value ? date.value.start : null,\n      dateEnd: date.value ? date.value.end : null,\n      sortParam: sort.value ? sort.value.param : null,\n      sortOrder: sort.value ? sort.value.order : null,\n      ...props.options\n    });\n\n    if (data.length === 0) {\n      hasMoreItems.value = false;\n    } else if (data.length < currentLimit.value) {\n      hasMoreItems.value = false;\n    } else {\n      hasMoreItems.value = true;\n    }\n\n    itemsList.value = [...itemsList.value, ...data];\n    \n    if (items.value) items.value = itemsList.value;\n  }\n\n  isLoadingExtra.value = false\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  const data = await props.store.read({\n    skip: currentSkip.value,\n    limit: currentLimit.value,\n    dateStart: date.value ? date.value.start : null,\n    dateEnd: date.value ? date.value.end : null,\n    sortParam: sort.value ? sort.value.param : null,\n    sortOrder: sort.value ? sort.value.order : null,\n    search: currentSearch.value,\n    ...props.options\n  });\n\n  if (data.length === 0) {\n    hasMoreItems.value = false;\n  } else if (data.length < currentLimit.value) {\n    hasMoreItems.value = false;\n  } else {\n    hasMoreItems.value = true;\n  }\n\n  itemsList.value = data;\n  if (items.value) items.value = itemsList.value;\n  isLoading.value = false;\n};\nwatch(\n  [() => props.external, () => date.value, () => ({...sort.value}), () => ({...props.options})],\n  ([newExternal, newDate, newSort, newOptions], [oldExternal, oldDate, oldSort, oldOptions]) => {\n    if (\n      newExternal !== oldExternal ||\n      newDate !== oldDate ||\n      newSort?.order !== oldSort?.order ||\n      newSort?.param !== oldSort?.param ||\n      JSON.stringify(newOptions) !== JSON.stringify(oldOptions)\n    ) {\n      currentSkip.value = 0;\n      fetchItems();\n    }\n  },\n  { deep: true }\n);\nlet observer = null\n\nonMounted(async () => {\n  await fetchItems()\n\n  if (typeof window !== 'undefined' && !props.showLoadMore && props.LoadMore) {\n    observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting)) {\n        loadMoreItems()\n      }\n    })\n\n    if (sentinel.value) observer.observe(sentinel.value)\n  }\n});\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect();\n  }\n});\n</script>\n\n\n<style>\n.feed-move, /* apply transition to moving elements */\n.feed-enter-active,\n.feed-leave-active {\n  transition: all 0.5s ease;\n}\n\n.feed-enter-from,\n.feed-leave-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n/* ensure leaving items are taken out of layout flow so that moving\n   animations can be calculated correctly. */\n.feed-leave-active {\n  position: absolute;\n}\n</style>"],"names":["_useModel","search"],"mappings":"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"}
+{"version":3,"file":"Feed.vue.js","sources":["../../../../../src/components/Feed/Feed.vue"],"sourcesContent":["<template>\n  <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\">\n\n    <BlockSearch \n      v-if=\"search\"\n      :placeholder=\"search.placeholder || 'Search...'\"\n      :class=\"search.class || 'bg-light'\"\n      @search=\"updateSearch\"\n      :autofocus=\"search.autofocus\"\n    />\n\n    <Dropdown \n      v-if=\"date\"\n      :label=\"{\n        component: ButtonDate,\n        props: { date: date }\n      }\" \n      :class=\"date.class || 'bg-light'\"\n      class=\"flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-medium\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <Calendar\n        v-model:date=\"date\"\n        :locale=\"$i18n.locale\"\n        :allowRange=\"true\"\n        class=\"radius-medium w-100 o-hidden bg-light\"\n      />\n    </Dropdown> \n\n    <template\n      v-if=\"filter\"\n    >\n      <div \n        :class=\"filter.class || 'bg-light'\"\n        class=\"flex-center flex pd-thin bg-light radius-medium aspect-1x1 h-100\"\n      >\n        <IconFilter @click=\"() => filter.active = !filter.active\" class=\"w-1r h-auto\"/>\n      </div>\n\n    \n      <BottomSheet\n        :show=\"filter.active\"\n        @toggle=\"() => filter.active = false\"\n        class=\"z-index-10 pos-fixed pos-r-0\"\n        :class=\"{\n          'pos-t-0':  filter.active,\n          'pos-t-100': !filter.active\n        }\"\n      >\n        <BlockFilter\n          v-model:filter=\"filter\"\n          :options=\"filter.options\"\n          @click_filter=\"() => { filter.active = false } \"\n          class=\"h-max w-100 pd-small pd-b-5r bg-light\"\n        />\n      </BottomSheet>  \n    </template>\n\n    <Dropdown \n      v-if=\"sort && !sort.hideButton\"\n      :label=\"{\n        component: ButtonSort,\n        props: { order: sort.order },\n        class: 'w-1r'\n      }\" \n      :class=\"sort.class || 'bg-light'\"\n      class=\"radius-medium aspect-1x1 h-100\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <BlockSorting\n        v-model:param=\"sort.param\"\n        v-model:order=\"sort.order\"\n        :options=\"sort.options\"\n        class=\"h-100 pd-small radius-medium t-white bg-black\"\n      />\n    </Dropdown> \n\n    <!-- Actions -->\n    <template\n      v-if=\"actions.length\"\n    >\n      <template v-for=\"action in actions\" :key=\"action.key\">\n        <div \n        :class=\"action.class || 'bg-light'\"\n        class=\"flex-center flex pd-thin bg-light radius-medium aspect-1x1 h-100\"\n      >\n        <component\n          :is=\"action.component\"\n          @click=\"action.handler\"\n          class=\"w-1r h-auto\"\n        >\n        </component>\n\n      </div>\n      </template>\n    </template>\n  </div>\n\n  <TransitionGroup \n    v-if=\"isLoading\"\n    tag=\"ul\" \n    name=\"scaleTransition\" \n    class=\"pos-relative z-index-1\"\n   :class=\"$attrs.class\"\n  >\n    <Skeleton\n      v-if=\"isLoading && !skeleton?.hide\"\n      v-for=\"i in currentLimit\" \n      :structure=\"skeleton.structure\"\n      :horizontal=\"skeleton.horizontal\"\n      :loading=\"skeleton.apply_to_slot\"\n      :key=\"'skeleton-' + i\"\n      class=\"radius-medium flex-child-default o-hidden d-block\"\n    />\n    <Loader v-if=\"isLoading && skeleton?.hide\"/>\n  </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    v-else-if=\"itemsList.length < 1\"\n    name=\"feed\"\n  >\n    <EmptyState\n      v-if=\"!isLoading && itemsList.length < 1\"\n      :title=\"states.empty.title\"\n      :description=\"states.empty.description\"\n      :action=\"states.empty.action\"\n      :callback=\"states.empty.callback\"\n      class=\"pd-medium mn-b-thin bg-light radius-medium\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    v-else\n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <button\n    v-if=\"showLoadMore && hasMoreItems && itemsList.length > 0 && !isLoadingExtra\"\n    @click=\"loadMoreItems\"\n    class=\"col-w-100 mn-t-thin w-100 t-black bg-main button\"\n  >\n    Load More\n  </button>\n\n  <div v-else key=\"sentinel\" ref=\"sentinel\" class=\"sentinel\"></div> \n\n  <div\n    v-if=\"isLoadingExtra\"\n    class=\"col-w-100 w-100 pos-relative\"\n  >\n    <Loader/>\n  </div>\n \n\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';\n\nimport SkeletonEvent from '@martyrs/src/modules/icons/skeletons/SkeletonEvent.vue'\n\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Skeleton from '@martyrs/src/components/Skeleton/Skeleton.vue';\nimport EmptyState from '@martyrs/src/components/EmptyState/EmptyState.vue';\nimport Dropdown from \"@martyrs/src/components/Dropdown/Dropdown.vue\";\nimport Calendar from '@martyrs/src/components/DatePicker/Calendar.vue'\nimport BottomSheet from '@martyrs/src/components/BottomSheet/BottomSheet.vue';\n\nimport BlockSearch from '@martyrs/src/modules/globals/views/components/blocks/BlockSearch.vue'\nimport BlockSorting  from '@martyrs/src/modules/globals/views/components/blocks/BlockSorting.vue'\nimport BlockFilter  from '@martyrs/src/modules/globals/views/components/blocks/BlockFilter.vue'\n\nimport ButtonSort  from '@martyrs/src/modules/globals/views/components/elements/ButtonSort.vue'\nimport ButtonDate  from '@martyrs/src/modules/globals/views/components/elements/ButtonDate.vue'\n\nimport IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue'\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue'\n\nconst search = defineModel('search')\nconst sort = defineModel('sort')\nconst filter = defineModel('filter')\nconst date = defineModel('date')\nconst items = defineModel('items')\n\n// Пропсы\nconst props = defineProps({\n  showLoadMore: {\n    type: Boolean,\n    default: true\n  },\n  LoadMore: {\n    type: Boolean,\n    default: true\n  },\n  search: {\n    type: [Boolean, Object],\n    default: false\n  },\n  states: {\n    type: Object,\n    default: () => ({\n      empty: {\n        title: 'Nothing found',\n        description: 'Sorry, nothing found',\n      },\n    }),\n  },\n  actions: {\n    type: Array,\n    default: () => []\n  },\n  skeleton: {\n    type: Object,\n    default: () => ({\n      hide: false,\n      horizontal: false,\n      structure: [\n        { block: 'text', size: 'medium' },\n        { block: 'text', size: 'large' },\n        { block: 'button', size: 'small' }\n      ]\n    }),\n   \n  },\n  store: {\n    type: Object,\n    default: () => ({\n      read: Function,\n      state: Object,\n    }),\n  },\n  external: {\n    type: Boolean,\n    default: false\n  },\n  options: {\n    type: Object,\n    default: () => ({\n      category: null,\n      limit: 10, \n      skip: 0 ,\n      owner:  null,\n      creator:  null,\n      customer:  null,\n      user:  null,\n      status: null,\n      period:  null,\n      contain:  null,\n    }),\n  },\n});\n  \nconst itemsList = shallowRef(items.value || []);\nconst hasMoreItems = ref(false);\n\nlet isLoading = ref(true);\nlet isLoadingExtra = ref(false);\nlet sentinel = ref(null)\n\nlet currentSkip = ref(props.options.skip ? props.options.skip : 0);\nlet currentLimit = ref(props.options.limit ? props.options.limit : 10);\n\nlet currentSearch = ref('');\n// Флаг для определения поискового запроса\nlet isSearching = ref(false);\n\n// Счетчик для отслеживания актуальности запросов\nlet requestId = 0;\n\nfunction debounce(fn, delay) {\n  let timeoutId = null;\n  return (...args) => {\n    clearTimeout(timeoutId);\n    timeoutId = setTimeout(() => fn(...args), delay);\n  };\n}\n\nconst debouncedSearch = debounce((value) => {\n  // Устанавливаем флаг поиска\n  isSearching.value = true;\n  currentSearch.value = value;\n  currentSkip.value = 0;\n  currentLimit.value = 10;\n  fetchItems();\n}, 500);\n\nfunction updateSearch(search) {\n  debouncedSearch(search);\n}\n\n// Вспомогательная функция для удаления null/undefined значений\nconst removeNullValues = (obj) => {\n  return Object.fromEntries(\n    Object.entries(obj).filter(([_, value]) => value != null)\n  );\n};\n\nconst loadMoreItems = async () => {\n  if (!hasMoreItems.value || isLoadingExtra.value) {\n    return;\n  }\n  \n  isLoadingExtra.value = true;\n  \n  // Увеличиваем счетчик запросов\n  const currentRequestId = ++requestId;\n\n  currentSkip.value += currentLimit.value;\n  \n  try {\n    // Собираем все параметры в один объект\n    const allParams = {\n      skip: currentSkip.value,\n      limit: currentLimit.value,\n      search: currentSearch.value,\n      dateStart: date.value?.start,\n      dateEnd: date.value?.end,\n      sortParam: sort.value?.param,\n      sortOrder: sort.value?.order,\n      ...props.options\n    };\n\n    // Фильтруем null/undefined значения для всего объекта\n    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\n\n    // Проверяем, актуален ли еще этот запрос\n    if (currentRequestId !== requestId) {\n      return;\n    }\n\n    if (data.length === 0) {\n      hasMoreItems.value = false;\n    } else if (data.length < currentLimit.value) {\n      hasMoreItems.value = false;\n    } else {\n      hasMoreItems.value = true;\n    }\n\n    itemsList.value = [...itemsList.value, ...data];\n    \n    if (items.value) items.value = itemsList.value;\n    \n  } catch (error) {\n    console.error('Load more error:', error);\n  } finally {\n    // Устанавливаем isLoadingExtra только для актуального запроса\n    if (currentRequestId === requestId) {\n      isLoadingExtra.value = false;\n    }\n  }\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  \n  // Увеличиваем счетчик при каждом новом запросе\n  const currentRequestId = ++requestId;\n  \n  // Очищаем список только при поиске\n  if (isSearching.value) {\n    itemsList.value = [];\n    isSearching.value = false; // Сбрасываем флаг после использования\n  }\n  \n  try {\n    // Собираем все параметры в один объект\n    const allParams = {\n      skip: currentSkip.value,\n      limit: currentLimit.value,\n      search: currentSearch.value,\n      dateStart: date.value?.start,\n      dateEnd: date.value?.end,\n      sortParam: sort.value?.param,\n      sortOrder: sort.value?.order,\n      ...props.options\n    };\n\n    // Фильтруем null/undefined значения для всего объекта\n    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\n\n    // Проверяем, актуален ли еще этот запрос\n    if (currentRequestId !== requestId) {\n      // Если нет - игнорируем результат\n      return;\n    }\n\n    if (data.length === 0) {\n      hasMoreItems.value = false;\n    } else if (data.length < currentLimit.value) {\n      hasMoreItems.value = false;\n    } else {\n      hasMoreItems.value = true;\n    }\n\n    itemsList.value = data;\n    if (items.value) items.value = itemsList.value;\n    \n  } catch (error) {\n    console.error('Fetch error:', error);\n  } finally {\n    // Устанавливаем isLoading только для актуального запроса\n    if (currentRequestId === requestId) {\n      isLoading.value = false;\n    }\n  }\n};\n\nwatch(\n  [() => props.external, () => date.value, () => ({...sort.value}), () => ({...props.options})],\n  ([newExternal, newDate, newSort, newOptions], [oldExternal, oldDate, oldSort, oldOptions]) => {\n    if (\n      newExternal !== oldExternal ||\n      newDate !== oldDate ||\n      newSort?.order !== oldSort?.order ||\n      newSort?.param !== oldSort?.param ||\n      JSON.stringify(newOptions) !== JSON.stringify(oldOptions)\n    ) {\n      currentSkip.value = 0;\n      fetchItems();\n    }\n  },\n  { deep: true }\n);\n\nlet observer = null\n\nonMounted(async () => {\n  await fetchItems()\n\n  if (typeof window !== 'undefined' && !props.showLoadMore && props.LoadMore) {\n    observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting)) {\n        loadMoreItems()\n      }\n    })\n\n    if (sentinel.value) observer.observe(sentinel.value)\n  }\n});\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect();\n  }\n});\n</script>\n\n<style>\n.feed-move, /* apply transition to moving elements */\n.feed-enter-active,\n.feed-leave-active {\n  transition: all 0.5s ease;\n}\n\n.feed-enter-from,\n.feed-leave-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n/* ensure leaving items are taken out of layout flow so that moving\n   animations can be calculated correctly. */\n.feed-leave-active {\n  position: absolute;\n}\n</style>"],"names":["_useModel","search"],"mappings":"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"}

package/dist/martyrs/src/components/Field/Field.vue.cjs

@@ -42,9 +42,18 @@ const _sfc_main = {
     const textarea = vue.ref(null);
     const input = vue.ref(null);
     function resize() {
-      var _a;
-      if (textarea.value) textarea.value.style.height = "1rem";
-      if (textarea.value) textarea.value.style.height = ((_a = textarea.value) == null ? void 0 : _a.scrollHeight) + "px";
+      if (!textarea.value) {
+        textarea.value.style.height = "";
+        return;
+      }
+      const el = textarea.value;
+      el.style.height = "";
+      const scrollHeight = el.scrollHeight;
+      if (scrollHeight > 33) {
+        el.style.height = scrollHeight + "px";
+      } else {
+        el.style.height = "";
+      }
     }
     function focus() {
       if (props.autofocus) {
@@ -55,28 +64,18 @@ const _sfc_main = {
         }
       }
     }
-    vue.watch(() => props.autofocus, (newVal) => {
-      if (newVal) {
-        vue.nextTick(() => {
-          focus();
-        });
+    vue.watch(() => props.field, () => {
+      if (props.type === "textarea") {
+        vue.nextTick(resize);
       }
     });
-    vue.onUpdated(() => {
-      if (props.type === "textarea") {
-        resize();
+    vue.watch(() => props.autofocus, (newVal) => {
+      if (newVal) {
+        vue.nextTick(focus);
       }
-      vue.nextTick(() => {
-        focus();
-      });
     });
     vue.onMounted(() => {
-      if (props.type === "textarea") {
-        resize();
-      }
-      vue.nextTick(() => {
-        focus();
-      });
+      vue.nextTick(focus);
     });
     const text = vue.ref(props.field);
     return (_ctx, _cache) => {
@@ -115,7 +114,6 @@ const _sfc_main = {
               onFocus: _cache[4] || (_cache[4] = (event) => emit("focus", event)),
               onBlur: _cache[5] || (_cache[5] = (event) => emit("blur", event)),
               class: "w-100",
-              style: { "resize": "vertical" },
               value: __props.field,
               placeholder: __props.placeholder,
               tabindex: __props.tabindex,
@@ -137,6 +135,6 @@ const _sfc_main = {
     };
   }
 };
-const Field = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-6ddbab92"]]);
+const Field = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-7b5b63ae"]]);
 exports.default = Field;
 //# sourceMappingURL=Field.vue.cjs.map

package/dist/martyrs/src/components/Field/Field.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.vue.cjs","sources":["../../../../../src/components/Field/Field.vue"],"sourcesContent":["<script setup>\n  import { ref, computed, onUpdated, onMounted, nextTick, watch } from 'vue'\n  \n  const emit = defineEmits(['update:field', 'focus', 'blur']);\n  const props = defineProps({\n    label: null,\n    symbol: null,\n    type: 'text',\n    placeholder: 'Enter something here',\n    field: null,\n    value: null,\n    validation: false,\n    disabled: null,\n    tabindex: -1,\n    autofocus: false\n  });\n  \n  if (props.value) {\n    emit('update:field', props.value)\n  }\n  \n  const textarea = ref(null);\n  const input = ref(null);\n  \n  function resize() {\n    if (textarea.value) textarea.value.style.height = \"1rem\";\n    if (textarea.value) textarea.value.style.height = textarea.value?.scrollHeight + \"px\";\n  }\n  \n  function focus() {\n    if (props.autofocus) {\n      if (props.type === 'textarea' && textarea.value) {\n        textarea.value.focus();\n      } else if (input.value) {\n        input.value.focus();\n      }\n    }\n  }\n  \n  // Отслеживаем изменение пропса autofocus\n  watch(() => props.autofocus, (newVal) => {\n    if (newVal) {\n      nextTick(() => {\n        focus();\n      });\n    }\n  });\n  \n  onUpdated(() => {\n    if (props.type === 'textarea') {\n      resize();\n    }\n    // Проверяем автофокус при обновлении компонента\n    nextTick(() => {\n      focus();\n    });\n  });\n  \n  onMounted(() => {\n    if (props.type === 'textarea') {\n      resize();\n    }\n    // Устанавливаем фокус при монтировании компонента\n    nextTick(() => {\n      focus();\n    });\n  });\n  \n  const text = ref(props.field);\n</script>\n\n<template>\n  <div \n    :class=\"[\n      $attrs.class, \n      { \n        'bg-fourth-nano': validation \n      }\n    ]\" \n    class=\"flex-center flex-nowrap flex\"\n  >\n    <div \n      v-if=\"label\" \n      class=\"t-transp mn-r-small\"\n    >\n      <span class=\"t-nowrap\">\n        {{label}}\n      </span>\n    </div>\n\n    <div class=\"w-100\">\n      <input \n        v-if=\"type !== 'textarea'\"\n        ref=\"input\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        :type=\"type\"\n        class=\"w-100\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n        :autofocus=\"autofocus\"\n\n      />\n      <textarea \n        v-else\n        ref=\"textarea\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        class=\"w-100\"\n        style=\"resize: vertical;\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n         :disabled=\"disabled\"\n      />\n    </div> \n\n    <slot></slot>\n\n    <div \n      v-if=\"symbol\" \n      class=\"t-transp mn-l-small\"\n    >\n      <span>\n        {{symbol}}\n      </span>\n    </div>\n  </div>\n\n  <!-- Validation -->\n  <transition name=\"fade\">\n    <div v-if=\"validation\" class=\"mn-t-thin mn-b-thin mn-b-thin invalid-feedback\">\n      * {{validation.message}}\n    </div>\n  </transition>\n</template>\n\n<style lang=\"scss\" scoped>\n  input, textarea, span {\n    line-height: 1;\n    color: inherit;\n  }\n</style>"],"names":["ref","watch","nextTick","onUpdated","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGE,UAAM,OAAO;AACb,UAAM,QAAQ;AAad,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IACpC;AAEE,UAAM,WAAWA,IAAG,IAAC,IAAI;AACzB,UAAM,QAAQA,IAAG,IAAC,IAAI;AAEtB,aAAS,SAAS;;AAChB,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,SAAS;AAClD,UAAI,SAAS,MAAO,UAAS,MAAM,MAAM,WAAS,cAAS,UAAT,mBAAgB,gBAAe;AAAA,IACrF;AAEE,aAAS,QAAQ;AACf,UAAI,MAAM,WAAW;AACnB,YAAI,MAAM,SAAS,cAAc,SAAS,OAAO;AAC/C,mBAAS,MAAM,MAAO;AAAA,QAC9B,WAAiB,MAAM,OAAO;AACtB,gBAAM,MAAM,MAAO;AAAA,QAC3B;AAAA,MACA;AAAA,IACA;AAGEC,QAAAA,MAAM,MAAM,MAAM,WAAW,CAAC,WAAW;AACvC,UAAI,QAAQ;AACVC,YAAAA,SAAS,MAAM;AACb,gBAAO;AAAA,QACf,CAAO;AAAA,MACP;AAAA,IACA,CAAG;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAI,MAAM,SAAS,YAAY;AAC7B,eAAQ;AAAA,MACd;AAEID,UAAAA,SAAS,MAAM;AACb,cAAO;AAAA,MACb,CAAK;AAAA,IACL,CAAG;AAEDE,QAAAA,UAAU,MAAM;AACd,UAAI,MAAM,SAAS,YAAY;AAC7B,eAAQ;AAAA,MACd;AAEIF,UAAAA,SAAS,MAAM;AACb,cAAO;AAAA,MACb,CAAK;AAAA,IACL,CAAG;AAED,UAAM,OAAOF,IAAAA,IAAI,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Field.vue.cjs","sources":["../../../../../src/components/Field/Field.vue"],"sourcesContent":["<script setup>\nimport { ref, onMounted, nextTick, watch } from 'vue'\nconst emit = defineEmits(['update:field', 'focus', 'blur']);\nconst props = defineProps({\n  label: null,\n  symbol: null,\n  type: 'text',\n  placeholder: 'Enter something here',\n  field: null,\n  value: null,\n  validation: false,\n  disabled: null,\n  tabindex: -1,\n  autofocus: false\n});\nif (props.value) {\n  emit('update:field', props.value)\n}\nconst textarea = ref(null);\nconst input = ref(null);\n\nfunction resize() {\n  if (!textarea.value) {\n    textarea.value.style.height = '';\n    return;\n  }\n  \n  const el = textarea.value;\n  \n  // Сначала сбрасываем высоту для правильного расчета scrollHeight\n  el.style.height = '';\n  \n  const scrollHeight = el.scrollHeight;\n  \n  // Теперь устанавливаем высоту на основе scrollHeight\n  if (scrollHeight > 33) {\n    el.style.height = scrollHeight + 'px';\n  } else {\n    el.style.height = '';\n  }\n}\n\n\nfunction focus() {\n  if (props.autofocus) {\n    if (props.type === 'textarea' && textarea.value) {\n      textarea.value.focus();\n    } else if (input.value) {\n      input.value.focus();\n    }\n  }\n}\n\n// Следим за изменениями поля\nwatch(() => props.field, () => {\n  if (props.type === 'textarea') {\n    nextTick(resize);\n  }\n});\n\n// Autofocus\nwatch(() => props.autofocus, (newVal) => {\n  if (newVal) {\n    nextTick(focus);\n  }\n});\n\nonMounted(() => {\n  nextTick(focus);\n});\n\nconst text = ref(props.field);\n</script>\n<template>\n  <div \n    :class=\"[\n      $attrs.class, \n      { \n        'bg-fourth-nano': validation \n      }\n    ]\" \n    class=\"flex-center flex-nowrap flex\"\n  >\n    <div \n      v-if=\"label\" \n      class=\"t-transp mn-r-small\"\n    >\n      <span class=\"t-nowrap\">\n        {{label}}\n      </span>\n    </div>\n    <div class=\"w-100\">\n      <input \n        v-if=\"type !== 'textarea'\"\n        ref=\"input\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        :type=\"type\"\n        class=\"w-100\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n        :autofocus=\"autofocus\"\n      />\n      <textarea \n        v-else\n        ref=\"textarea\"\n        @input=\"event => text = emit('update:field', event.target.value)\"\n        @focus=\"event => emit('focus', event)\"\n        @blur=\"event => emit('blur', event)\"\n        class=\"w-100\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n      />\n    </div> \n    <slot></slot>\n    <div \n      v-if=\"symbol\" \n      class=\"t-transp mn-l-small\"\n    >\n      <span>\n        {{symbol}}\n      </span>\n    </div>\n  </div>\n  <!-- Validation -->\n  <transition name=\"fade\">\n    <div v-if=\"validation\" class=\"mn-t-thin mn-b-thin mn-b-thin invalid-feedback\">\n      * {{validation.message}}\n    </div>\n  </transition>\n</template>\n<style scoped>\ninput, textarea, span {\n  line-height: 1;\n  color: inherit;\n}\ntextarea {\n  resize: none;\n  overflow: hidden;\n  height: 1rem; \n  line-height: 1rem;\n}\ninput[type=\"date\"]::-webkit-calendar-picker-indicator,\ninput[type=\"time\"]::-webkit-calendar-picker-indicator {\n  filter: invert(1); /* Это инвертирует иконку, подходит при светлом фоне */\n  opacity: 1;\n  color: inherit;\n}\n</style>"],"names":["ref","watch","nextTick","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,UAAM,OAAO;AACb,UAAM,QAAQ;AAYd,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IAClC;AACA,UAAM,WAAWA,IAAG,IAAC,IAAI;AACzB,UAAM,QAAQA,IAAG,IAAC,IAAI;AAEtB,aAAS,SAAS;AAChB,UAAI,CAAC,SAAS,OAAO;AACnB,iBAAS,MAAM,MAAM,SAAS;AAC9B;AAAA,MACJ;AAEE,YAAM,KAAK,SAAS;AAGpB,SAAG,MAAM,SAAS;AAElB,YAAM,eAAe,GAAG;AAGxB,UAAI,eAAe,IAAI;AACrB,WAAG,MAAM,SAAS,eAAe;AAAA,MACrC,OAAS;AACL,WAAG,MAAM,SAAS;AAAA,MACtB;AAAA,IACA;AAGA,aAAS,QAAQ;AACf,UAAI,MAAM,WAAW;AACnB,YAAI,MAAM,SAAS,cAAc,SAAS,OAAO;AAC/C,mBAAS,MAAM,MAAO;AAAA,QAC5B,WAAe,MAAM,OAAO;AACtB,gBAAM,MAAM,MAAO;AAAA,QACzB;AAAA,MACA;AAAA,IACA;AAGAC,QAAAA,MAAM,MAAM,MAAM,OAAO,MAAM;AAC7B,UAAI,MAAM,SAAS,YAAY;AAC7BC,YAAAA,SAAS,MAAM;AAAA,MACnB;AAAA,IACA,CAAC;AAGDD,QAAK,MAAC,MAAM,MAAM,WAAW,CAAC,WAAW;AACvC,UAAI,QAAQ;AACVC,YAAAA,SAAS,KAAK;AAAA,MAClB;AAAA,IACA,CAAC;AAEDC,QAAAA,UAAU,MAAM;AACdD,UAAAA,SAAS,KAAK;AAAA,IAChB,CAAC;AAED,UAAM,OAAOF,IAAAA,IAAI,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}