@ozdao/martyrs 0.2.506 → 0.2.507

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

@@ -6,17 +6,10 @@ const Skeleton = require("../Skeleton/Skeleton.vue2.cjs");
 const EmptyState = require("../EmptyState/EmptyState.vue.cjs");
 const Dropdown = require("../Dropdown/Dropdown.vue2.cjs");
 const Calendar = require("../Calendar/Calendar.vue2.cjs");
-const BottomSheet = require("../BottomSheet/BottomSheet.vue.cjs");
 const BlockSearch = require("../../modules/globals/views/components/blocks/BlockSearch.vue.cjs");
 const BlockSorting = require("../../modules/globals/views/components/blocks/BlockSorting.vue.cjs");
-const BlockFilter = require("../../modules/globals/views/components/blocks/BlockFilter.vue.cjs");
-;/* empty css                    */
-require("vue-router");
-;/* empty css                    */
-;/* empty css                      */
-const IconFilter = require("../../modules/icons/navigation/IconFilter.vue.cjs");
-;/* empty css                                                                        */
-;/* empty css                                                            */
+;/* empty css                       */
+const Filters = require("../../modules/globals/views/components/sections/Filters.vue2.cjs");
 const ButtonSort = require("../../modules/globals/views/components/elements/ButtonSort.vue.cjs");
 const ButtonDate = require("../../modules/globals/views/components/elements/ButtonDate.vue.cjs");
 ;/* empty css            */
@@ -137,7 +130,7 @@ const _sfc_main = {
         }
       }
     });
-    vue.computed(() => {
+    const filterConfig = vue.computed(() => {
       if (!filter.value?.options) return [];
       return filter.value.options.map((opt) => ({
         key: opt.value,
@@ -294,8 +287,15 @@ const _sfc_main = {
             onSearch: updateSearch,
             autofocus: search.value.autofocus
           }, null, 8, ["placeholder", "class", "autofocus"])) : vue.createCommentVNode("", true),
-          date.value ? (vue.openBlock(), vue.createBlock(Dropdown.default, {
+          filter.value ? (vue.openBlock(), vue.createBlock(Filters.default, {
             key: 1,
+            modelValue: filter.value.selected,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filter.value.selected = $event),
+            filters: filterConfig.value,
+            class: vue.normalizeClass(filter.value.class || "mobile-only")
+          }, null, 8, ["modelValue", "filters", "class"])) : vue.createCommentVNode("", true),
+          date.value ? (vue.openBlock(), vue.createBlock(Dropdown.default, {
+            key: 2,
             label: {
               component: ButtonDate.default,
               props: { date: date.value }
@@ -306,7 +306,7 @@ const _sfc_main = {
             default: vue.withCtx(() => [
               vue.createVNode(Calendar.default, {
                 date: date.value,
-                "onUpdate:date": _cache[0] || (_cache[0] = ($event) => date.value = $event),
+                "onUpdate:date": _cache[1] || (_cache[1] = ($event) => date.value = $event),
                 locale: _ctx.$i18n.locale,
                 allowRange: true,
                 class: "radius-medium w-100 o-hidden bg-light"
@@ -314,37 +314,6 @@ const _sfc_main = {
             ]),
             _: 1
           }, 8, ["label", "class", "align"])) : vue.createCommentVNode("", true),
-          filter.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass([filter.value.class || "bg-light", "flex-center flex pd-thin bg-light radius-medium aspect-1x1 h-100"])
-            }, [
-              vue.createVNode(IconFilter.default, {
-                onClick: _cache[1] || (_cache[1] = () => filter.value.active = !filter.value.active),
-                class: "w-1r h-auto"
-              })
-            ], 2),
-            vue.createVNode(BottomSheet.default, {
-              show: filter.value.active,
-              onToggle: _cache[4] || (_cache[4] = () => filter.value.active = false),
-              class: vue.normalizeClass(["z-index-10 pos-fixed pos-r-0", {
-                "pos-t-0": filter.value.active,
-                "pos-t-100": !filter.value.active
-              }])
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(BlockFilter.default, {
-                  filter: filter.value,
-                  "onUpdate:filter": _cache[2] || (_cache[2] = ($event) => filter.value = $event),
-                  options: filter.value.options,
-                  onClick_filter: _cache[3] || (_cache[3] = () => {
-                    filter.value.active = false;
-                  }),
-                  class: "h-max w-100 pd-small pd-b-5r bg-light"
-                }, null, 8, ["filter", "options"])
-              ]),
-              _: 1
-            }, 8, ["show", "class"])
-          ], 64)) : vue.createCommentVNode("", true),
           sort.value && !sort.value.hideButton ? (vue.openBlock(), vue.createBlock(Dropdown.default, {
             key: 3,
             label: {
@@ -358,9 +327,9 @@ const _sfc_main = {
             default: vue.withCtx(() => [
               vue.createVNode(BlockSorting.default, {
                 param: sort.value.param,
-                "onUpdate:param": _cache[5] || (_cache[5] = ($event) => sort.value.param = $event),
+                "onUpdate:param": _cache[2] || (_cache[2] = ($event) => sort.value.param = $event),
                 order: sort.value.order,
-                "onUpdate:order": _cache[6] || (_cache[6] = ($event) => sort.value.order = $event),
+                "onUpdate:order": _cache[3] || (_cache[3] = ($event) => sort.value.order = $event),
                 options: sort.value.options,
                 class: "h-100 pd-small radius-medium t-white bg-black"
               }, null, 8, ["param", "order", "options"])

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  <div v-if=\"search || date || (sort && !sort.hideButton)\" style=\"transform: scale(1);\" class=\"mn-b-thin 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   <!--  <FiltersBar\n      v-if=\"filter\"\n      v-model=\"filter.selected\"\n      :filters=\"filterConfig\"\n      :class=\"filter.class || 'mobile-only'\"\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 && !keepSlotVisible\"\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=\"replaceClasses('radius-medium bg-light pd-thin flex-child-default o-hidden d-block', skeleton.class)\"\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=\"replaceClasses('pd-medium bg-light radius-medium', states.empty.class)\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    v-else-if=\"!keepSlotVisible || !isLoading\"\n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <!-- Slot visible with overlay loader -->\n  <div v-else class=\"pos-relative\">\n    <TransitionGroup \n      tag=\"ul\" \n      name=\"feed\"\n      :class=\"$attrs.class\"\n    >\n      <slot\n        :items=\"itemsList\"\n      >\n      </slot>\n    </TransitionGroup>\n    \n    <!-- Overlay loader -->\n    <div \n      v-if=\"isLoading && keepSlotVisible\"\n      class=\"pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center bg-white-transp-90 z-index-10\"\n    >\n      <Loader />\n    </div>\n  </div>\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, 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/Calendar/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 FiltersBar from '@martyrs/src/modules/globals/views/components/sections/Filters.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// Внутреннее хранилище для случая, когда v-model:items не передан\nconst internalItems = ref([])\n\n// Элегантное решение через computed\nconst itemsList = computed({\n  get: () => items.value ?? internalItems.value,\n  set: (val) => {\n    if (items.value !== undefined) {\n      items.value = val\n    } else {\n      internalItems.value = val\n    }\n  }\n})\n\nconst filterConfig = computed(() => {\n  if (!filter.value?.options) return []\n  \n  return filter.value.options.map(opt => ({\n    key: opt.value,\n    title: opt.title,\n    type: 'options',\n    options: opt.options || [],\n    defaultValue: null\n  }))\n})\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  keepSlotVisible: {\n    type: Boolean,\n    default: false\n  },\n});\n  \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('');\nlet isSearching = ref(false);\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  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\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  const currentRequestId = ++requestId;\n\n  currentSkip.value += currentLimit.value;\n  \n  try {\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    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\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    // Элегантное обновление через computed setter\n    itemsList.value = [...itemsList.value, ...data];\n    \n  } catch (error) {\n    console.error('Load more error:', error);\n  } finally {\n    if (currentRequestId === requestId) {\n      isLoadingExtra.value = false;\n    }\n  }\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  \n  const currentRequestId = ++requestId;\n  \n  if (isSearching.value) {\n    itemsList.value = [];\n    isSearching.value = false;\n  }\n  \n  try {\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    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\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    // Элегантное обновление через computed setter\n    itemsList.value = data;\n    \n  } catch (error) {\n    console.error('Fetch error:', error);\n  } finally {\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,\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.feed-leave-active {\n  position: absolute;\n}\n</style>"],"names":["_useModel","ref","computed","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 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    <FiltersBar\n      v-if=\"filter\"\n      v-model=\"filter.selected\"\n      :filters=\"filterConfig\"\n      :class=\"filter.class || 'mobile-only'\"\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 && !keepSlotVisible\"\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=\"replaceClasses('radius-medium bg-light pd-thin flex-child-default o-hidden d-block', skeleton.class)\"\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=\"replaceClasses('pd-medium bg-light radius-medium', states.empty.class)\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    v-else-if=\"!keepSlotVisible || !isLoading\"\n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <!-- Slot visible with overlay loader -->\n  <div v-else class=\"pos-relative\">\n    <TransitionGroup \n      tag=\"ul\" \n      name=\"feed\"\n      :class=\"$attrs.class\"\n    >\n      <slot\n        :items=\"itemsList\"\n      >\n      </slot>\n    </TransitionGroup>\n    \n    <!-- Overlay loader -->\n    <div \n      v-if=\"isLoading && keepSlotVisible\"\n      class=\"pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center bg-white-transp-90 z-index-10\"\n    >\n      <Loader />\n    </div>\n  </div>\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, 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/Calendar/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 FiltersBar from '@martyrs/src/modules/globals/views/components/sections/Filters.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// Внутреннее хранилище для случая, когда v-model:items не передан\nconst internalItems = ref([])\n\n// Элегантное решение через computed\nconst itemsList = computed({\n  get: () => items.value ?? internalItems.value,\n  set: (val) => {\n    if (items.value !== undefined) {\n      items.value = val\n    } else {\n      internalItems.value = val\n    }\n  }\n})\n\nconst filterConfig = computed(() => {\n  if (!filter.value?.options) return []\n  \n  return filter.value.options.map(opt => ({\n    key: opt.value,\n    title: opt.title,\n    type: 'options',\n    options: opt.options || [],\n    defaultValue: null\n  }))\n})\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  keepSlotVisible: {\n    type: Boolean,\n    default: false\n  },\n});\n  \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('');\nlet isSearching = ref(false);\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  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\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  const currentRequestId = ++requestId;\n\n  currentSkip.value += currentLimit.value;\n  \n  try {\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    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\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    // Элегантное обновление через computed setter\n    itemsList.value = [...itemsList.value, ...data];\n    \n  } catch (error) {\n    console.error('Load more error:', error);\n  } finally {\n    if (currentRequestId === requestId) {\n      isLoadingExtra.value = false;\n    }\n  }\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  \n  const currentRequestId = ++requestId;\n  \n  if (isSearching.value) {\n    itemsList.value = [];\n    isSearching.value = false;\n  }\n  \n  try {\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    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\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    // Элегантное обновление через computed setter\n    itemsList.value = data;\n    \n  } catch (error) {\n    console.error('Fetch error:', error);\n  } finally {\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,\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.feed-leave-active {\n  position: absolute;\n}\n</style>"],"names":["_useModel","ref","computed","search","watch","onMounted","onUnmounted"],"mappings":"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"}

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

@@ -1,21 +1,14 @@
-import { mergeModels, useModel, ref, computed, watch, onMounted, onUnmounted, createElementBlock, openBlock, Fragment, createCommentVNode, createBlock, normalizeClass, withCtx, createVNode, createElementVNode, renderList, resolveDynamicComponent, unref, TransitionGroup, renderSlot } from "vue";
+import { mergeModels, useModel, ref, computed, watch, onMounted, onUnmounted, createElementBlock, openBlock, Fragment, createCommentVNode, createBlock, normalizeClass, withCtx, createVNode, renderList, resolveDynamicComponent, unref, TransitionGroup, renderSlot } from "vue";
 import Loader from "../Loader/Loader.vue.js";
 import Skeleton from "../Skeleton/Skeleton.vue2.js";
-import _sfc_main$9 from "../EmptyState/EmptyState.vue.js";
+import _sfc_main$6 from "../EmptyState/EmptyState.vue.js";
 import _sfc_main$2 from "../Dropdown/Dropdown.vue2.js";
 import Calendar from "../Calendar/Calendar.vue2.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$6 from "../../modules/globals/views/components/blocks/BlockFilter.vue.js";
-/* empty css                  */
-import "vue-router";
-/* empty css                  */
-/* empty css                    */
-import _sfc_main$4 from "../../modules/icons/navigation/IconFilter.vue.js";
-/* empty css                                                                      */
-/* empty css                                                          */
-import _sfc_main$7 from "../../modules/globals/views/components/elements/ButtonSort.vue.js";
+import _sfc_main$5 from "../../modules/globals/views/components/blocks/BlockSorting.vue.js";
+/* empty css                     */
+import Filters from "../../modules/globals/views/components/sections/Filters.vue2.js";
+import _sfc_main$4 from "../../modules/globals/views/components/elements/ButtonSort.vue.js";
 import _sfc_main$3 from "../../modules/globals/views/components/elements/ButtonDate.vue.js";
 /* empty css          */
 const _hoisted_1 = {
@@ -135,7 +128,7 @@ const _sfc_main = {
         }
       }
     });
-    computed(() => {
+    const filterConfig = computed(() => {
       if (!filter.value?.options) return [];
       return filter.value.options.map((opt) => ({
         key: opt.value,
@@ -292,8 +285,15 @@ const _sfc_main = {
             onSearch: updateSearch,
             autofocus: search.value.autofocus
           }, null, 8, ["placeholder", "class", "autofocus"])) : createCommentVNode("", true),
-          date.value ? (openBlock(), createBlock(_sfc_main$2, {
+          filter.value ? (openBlock(), createBlock(Filters, {
             key: 1,
+            modelValue: filter.value.selected,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filter.value.selected = $event),
+            filters: filterConfig.value,
+            class: normalizeClass(filter.value.class || "mobile-only")
+          }, null, 8, ["modelValue", "filters", "class"])) : createCommentVNode("", true),
+          date.value ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 2,
             label: {
               component: _sfc_main$3,
               props: { date: date.value }
@@ -304,7 +304,7 @@ const _sfc_main = {
             default: withCtx(() => [
               createVNode(Calendar, {
                 date: date.value,
-                "onUpdate:date": _cache[0] || (_cache[0] = ($event) => date.value = $event),
+                "onUpdate:date": _cache[1] || (_cache[1] = ($event) => date.value = $event),
                 locale: _ctx.$i18n.locale,
                 allowRange: true,
                 class: "radius-medium w-100 o-hidden bg-light"
@@ -312,41 +312,10 @@ const _sfc_main = {
             ]),
             _: 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-medium aspect-1x1 h-100"])
-            }, [
-              createVNode(_sfc_main$4, {
-                onClick: _cache[1] || (_cache[1] = () => filter.value.active = !filter.value.active),
-                class: "w-1r h-auto"
-              })
-            ], 2),
-            createVNode(_sfc_main$5, {
-              show: filter.value.active,
-              onToggle: _cache[4] || (_cache[4] = () => filter.value.active = false),
-              class: normalizeClass(["z-index-10 pos-fixed pos-r-0", {
-                "pos-t-0": filter.value.active,
-                "pos-t-100": !filter.value.active
-              }])
-            }, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$6, {
-                  filter: filter.value,
-                  "onUpdate:filter": _cache[2] || (_cache[2] = ($event) => filter.value = $event),
-                  options: filter.value.options,
-                  onClick_filter: _cache[3] || (_cache[3] = () => {
-                    filter.value.active = false;
-                  }),
-                  class: "h-max w-100 pd-small pd-b-5r bg-light"
-                }, null, 8, ["filter", "options"])
-              ]),
-              _: 1
-            }, 8, ["show", "class"])
-          ], 64)) : createCommentVNode("", true),
           sort.value && !sort.value.hideButton ? (openBlock(), createBlock(_sfc_main$2, {
             key: 3,
             label: {
-              component: _sfc_main$7,
+              component: _sfc_main$4,
               props: { order: sort.value.order },
               class: "w-1r"
             },
@@ -354,11 +323,11 @@ const _sfc_main = {
             align: search.value ? "right" : "left"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$8, {
+              createVNode(_sfc_main$5, {
                 param: sort.value.param,
-                "onUpdate:param": _cache[5] || (_cache[5] = ($event) => sort.value.param = $event),
+                "onUpdate:param": _cache[2] || (_cache[2] = ($event) => sort.value.param = $event),
                 order: sort.value.order,
-                "onUpdate:order": _cache[6] || (_cache[6] = ($event) => sort.value.order = $event),
+                "onUpdate:order": _cache[3] || (_cache[3] = ($event) => sort.value.order = $event),
                 options: sort.value.options,
                 class: "h-100 pd-small radius-medium t-white bg-black"
               }, null, 8, ["param", "order", "options"])
@@ -402,7 +371,7 @@ const _sfc_main = {
           name: "feed"
         }, {
           default: withCtx(() => [
-            !unref(isLoading) && itemsList.value.length < 1 ? (openBlock(), createBlock(_sfc_main$9, {
+            !unref(isLoading) && itemsList.value.length < 1 ? (openBlock(), createBlock(_sfc_main$6, {
               key: 0,
               title: __props.states.empty.title,
               description: __props.states.empty.description,

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  <div v-if=\"search || date || (sort && !sort.hideButton)\" style=\"transform: scale(1);\" class=\"mn-b-thin 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   <!--  <FiltersBar\n      v-if=\"filter\"\n      v-model=\"filter.selected\"\n      :filters=\"filterConfig\"\n      :class=\"filter.class || 'mobile-only'\"\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 && !keepSlotVisible\"\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=\"replaceClasses('radius-medium bg-light pd-thin flex-child-default o-hidden d-block', skeleton.class)\"\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=\"replaceClasses('pd-medium bg-light radius-medium', states.empty.class)\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    v-else-if=\"!keepSlotVisible || !isLoading\"\n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <!-- Slot visible with overlay loader -->\n  <div v-else class=\"pos-relative\">\n    <TransitionGroup \n      tag=\"ul\" \n      name=\"feed\"\n      :class=\"$attrs.class\"\n    >\n      <slot\n        :items=\"itemsList\"\n      >\n      </slot>\n    </TransitionGroup>\n    \n    <!-- Overlay loader -->\n    <div \n      v-if=\"isLoading && keepSlotVisible\"\n      class=\"pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center bg-white-transp-90 z-index-10\"\n    >\n      <Loader />\n    </div>\n  </div>\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, 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/Calendar/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 FiltersBar from '@martyrs/src/modules/globals/views/components/sections/Filters.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// Внутреннее хранилище для случая, когда v-model:items не передан\nconst internalItems = ref([])\n\n// Элегантное решение через computed\nconst itemsList = computed({\n  get: () => items.value ?? internalItems.value,\n  set: (val) => {\n    if (items.value !== undefined) {\n      items.value = val\n    } else {\n      internalItems.value = val\n    }\n  }\n})\n\nconst filterConfig = computed(() => {\n  if (!filter.value?.options) return []\n  \n  return filter.value.options.map(opt => ({\n    key: opt.value,\n    title: opt.title,\n    type: 'options',\n    options: opt.options || [],\n    defaultValue: null\n  }))\n})\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  keepSlotVisible: {\n    type: Boolean,\n    default: false\n  },\n});\n  \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('');\nlet isSearching = ref(false);\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  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\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  const currentRequestId = ++requestId;\n\n  currentSkip.value += currentLimit.value;\n  \n  try {\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    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\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    // Элегантное обновление через computed setter\n    itemsList.value = [...itemsList.value, ...data];\n    \n  } catch (error) {\n    console.error('Load more error:', error);\n  } finally {\n    if (currentRequestId === requestId) {\n      isLoadingExtra.value = false;\n    }\n  }\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  \n  const currentRequestId = ++requestId;\n  \n  if (isSearching.value) {\n    itemsList.value = [];\n    isSearching.value = false;\n  }\n  \n  try {\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    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\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    // Элегантное обновление через computed setter\n    itemsList.value = data;\n    \n  } catch (error) {\n    console.error('Fetch error:', error);\n  } finally {\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,\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.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 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    <FiltersBar\n      v-if=\"filter\"\n      v-model=\"filter.selected\"\n      :filters=\"filterConfig\"\n      :class=\"filter.class || 'mobile-only'\"\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 && !keepSlotVisible\"\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=\"replaceClasses('radius-medium bg-light pd-thin flex-child-default o-hidden d-block', skeleton.class)\"\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=\"replaceClasses('pd-medium bg-light radius-medium', states.empty.class)\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    v-else-if=\"!keepSlotVisible || !isLoading\"\n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      :items=\"itemsList\"\n    >\n    </slot>\n  </TransitionGroup>\n\n  <!-- Slot visible with overlay loader -->\n  <div v-else class=\"pos-relative\">\n    <TransitionGroup \n      tag=\"ul\" \n      name=\"feed\"\n      :class=\"$attrs.class\"\n    >\n      <slot\n        :items=\"itemsList\"\n      >\n      </slot>\n    </TransitionGroup>\n    \n    <!-- Overlay loader -->\n    <div \n      v-if=\"isLoading && keepSlotVisible\"\n      class=\"pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center bg-white-transp-90 z-index-10\"\n    >\n      <Loader />\n    </div>\n  </div>\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, 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/Calendar/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 FiltersBar from '@martyrs/src/modules/globals/views/components/sections/Filters.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// Внутреннее хранилище для случая, когда v-model:items не передан\nconst internalItems = ref([])\n\n// Элегантное решение через computed\nconst itemsList = computed({\n  get: () => items.value ?? internalItems.value,\n  set: (val) => {\n    if (items.value !== undefined) {\n      items.value = val\n    } else {\n      internalItems.value = val\n    }\n  }\n})\n\nconst filterConfig = computed(() => {\n  if (!filter.value?.options) return []\n  \n  return filter.value.options.map(opt => ({\n    key: opt.value,\n    title: opt.title,\n    type: 'options',\n    options: opt.options || [],\n    defaultValue: null\n  }))\n})\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  keepSlotVisible: {\n    type: Boolean,\n    default: false\n  },\n});\n  \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('');\nlet isSearching = ref(false);\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  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\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  const currentRequestId = ++requestId;\n\n  currentSkip.value += currentLimit.value;\n  \n  try {\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    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\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    // Элегантное обновление через computed setter\n    itemsList.value = [...itemsList.value, ...data];\n    \n  } catch (error) {\n    console.error('Load more error:', error);\n  } finally {\n    if (currentRequestId === requestId) {\n      isLoadingExtra.value = false;\n    }\n  }\n};\n\nconst fetchItems = async () => {\n  isLoading.value = true;\n  \n  const currentRequestId = ++requestId;\n  \n  if (isSearching.value) {\n    itemsList.value = [];\n    isSearching.value = false;\n  }\n  \n  try {\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    const params = removeNullValues(allParams);\n\n    const data = await props.store.read(params);\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    // Элегантное обновление через computed setter\n    itemsList.value = data;\n    \n  } catch (error) {\n    console.error('Fetch error:', error);\n  } finally {\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,\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.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

@@ -10,8 +10,8 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = { class: "t-nowrap" };
 const _hoisted_3 = { class: "w-100 pos-relative" };
-const _hoisted_4 = ["type", "value", "placeholder", "tabindex", "disabled", "autofocus"];
-const _hoisted_5 = ["value", "placeholder", "tabindex", "disabled"];
+const _hoisted_4 = ["type", "value", "placeholder", "tabindex", "disabled", "autofocus", "name", "id"];
+const _hoisted_5 = ["value", "placeholder", "tabindex", "disabled", "name", "id"];
 const _hoisted_6 = {
   key: 4,
   class: "t-transp mn-l-small"
@@ -33,8 +33,12 @@ const _sfc_main = {
     disabled: null,
     tabindex: -1,
     autofocus: false,
-    icon: null
+    icon: null,
     // Добавлен пропс для иконки
+    name: null,
+    // Имя поля для автозаполнения
+    id: null
+    // ID поля
   },
   emits: ["update:field", "focus", "blur"],
   setup(__props, { emit: __emit }) {
@@ -112,7 +116,9 @@ const _sfc_main = {
               placeholder: __props.placeholder,
               tabindex: __props.tabindex,
               disabled: __props.disabled,
-              autofocus: __props.autofocus
+              autofocus: __props.autofocus,
+              name: __props.name,
+              id: __props.id
             }, null, 40, _hoisted_4)) : (vue.openBlock(), vue.createElementBlock("textarea", {
               key: 1,
               ref_key: "textarea",
@@ -124,7 +130,9 @@ const _sfc_main = {
               value: __props.field,
               placeholder: __props.placeholder,
               tabindex: __props.tabindex,
-              disabled: __props.disabled
+              disabled: __props.disabled,
+              name: __props.name,
+              id: __props.id
             }, null, 40, _hoisted_5))
           ]),
           __props.type === "password" ? (vue.openBlock(), vue.createBlock(IconShow.default, {
@@ -148,6 +156,6 @@ const _sfc_main = {
     };
   }
 };
-const Field = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-69b12b85"]]);
+const Field = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-985f0e53"]]);
 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>\nimport { ref, onMounted, nextTick, watch } from 'vue'\nimport IconShow from '@martyrs/src/modules/icons/actions/IconShow.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  icon: null // Добавлен пропс для иконки\n});\nif (props.value) {\n  emit('update:field', props.value)\n}\nconst textarea = ref(null);\nconst input = ref(null);\nconst showPassword = ref(false);\n\nfunction resize() {\n  if (!textarea.value) {\n    return;\n  }\n  const el = textarea.value;\n  el.style.height = '';\n  const scrollHeight = el.scrollHeight;\n  if (scrollHeight > 33) {\n    el.style.height = scrollHeight + 'px';\n  } else {\n    el.style.height = '';\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}\nwatch(() => props.field, () => {\n  if (props.type === 'textarea') {\n    nextTick(resize);\n  }\n});\nwatch(() => props.autofocus, (newVal) => {\n  if (newVal) {\n    nextTick(focus);\n  }\n});\nonMounted(() => {\n  nextTick(focus);\n  nextTick(resize);\n});\nconst text = ref(props.field);\n</script>\n<template>\n  <div\n    :class=\"[\n      $attrs.class,\n      { 'bg-fourth-nano': validation }\n    ]\"\n    class=\"field-wrapper flex-center flex-nowrap flex\"\n  >\n    <!-- Слот для иконки -->\n    <slot name=\"icon\" v-if=\"$slots.icon\" />\n    <!-- Или компонент иконки через пропс -->\n    <component :is=\"icon\" v-else-if=\"icon\" class=\"i-medium t-transp mn-r-thin\" />\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 pos-relative\">\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 === 'password' && !showPassword ? 'password' : type === 'password' ? 'text' : 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    <IconShow\n      v-if=\"type === 'password'\"\n      :show=\"!showPassword\"\n      @click=\"showPassword = !showPassword\"\n      class=\"i-medium cursor-pointer\"\n    />\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,\ntextarea,\nspan {\n  color: inherit;\n  line-height: 1;\n}\ntextarea {\n  resize: none;\n  overflow: hidden; \n  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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,UAAM,OAAO;AACb,UAAM,QAAQ;AAad,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IAClC;AACA,UAAM,WAAWA,IAAAA,IAAI,IAAI;AACzB,UAAM,QAAQA,IAAAA,IAAI,IAAI;AACtB,UAAM,eAAeA,IAAAA,IAAI,KAAK;AAE9B,aAAS,SAAS;AAChB,UAAI,CAAC,SAAS,OAAO;AACnB;AAAA,MACF;AACA,YAAM,KAAK,SAAS;AACpB,SAAG,MAAM,SAAS;AAClB,YAAM,eAAe,GAAG;AACxB,UAAI,eAAe,IAAI;AACrB,WAAG,MAAM,SAAS,eAAe;AAAA,MACnC,OAAO;AACL,WAAG,MAAM,SAAS;AAAA,MACpB;AAAA,IACF;AACA,aAAS,QAAQ;AACf,UAAI,MAAM,WAAW;AACnB,YAAI,MAAM,SAAS,cAAc,SAAS,OAAO;AAC/C,mBAAS,MAAM,MAAK;AAAA,QACtB,WAAW,MAAM,OAAO;AACtB,gBAAM,MAAM,MAAK;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AACAC,QAAAA,MAAM,MAAM,MAAM,OAAO,MAAM;AAC7B,UAAI,MAAM,SAAS,YAAY;AAC7BC,YAAAA,SAAS,MAAM;AAAA,MACjB;AAAA,IACF,CAAC;AACDD,QAAAA,MAAM,MAAM,MAAM,WAAW,CAAC,WAAW;AACvC,UAAI,QAAQ;AACVC,YAAAA,SAAS,KAAK;AAAA,MAChB;AAAA,IACF,CAAC;AACDC,QAAAA,UAAU,MAAM;AACdD,UAAAA,SAAS,KAAK;AACdA,UAAAA,SAAS,MAAM;AAAA,IACjB,CAAC;AACD,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'\nimport IconShow from '@martyrs/src/modules/icons/actions/IconShow.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  icon: null, // Добавлен пропс для иконки\n  name: null, // Имя поля для автозаполнения\n  id: null // ID поля\n});\nif (props.value) {\n  emit('update:field', props.value)\n}\nconst textarea = ref(null);\nconst input = ref(null);\nconst showPassword = ref(false);\n\nfunction resize() {\n  if (!textarea.value) {\n    return;\n  }\n  const el = textarea.value;\n  el.style.height = '';\n  const scrollHeight = el.scrollHeight;\n  if (scrollHeight > 33) {\n    el.style.height = scrollHeight + 'px';\n  } else {\n    el.style.height = '';\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}\nwatch(() => props.field, () => {\n  if (props.type === 'textarea') {\n    nextTick(resize);\n  }\n});\nwatch(() => props.autofocus, (newVal) => {\n  if (newVal) {\n    nextTick(focus);\n  }\n});\nonMounted(() => {\n  nextTick(focus);\n  nextTick(resize);\n});\nconst text = ref(props.field);\n</script>\n<template>\n  <div\n    :class=\"[\n      $attrs.class,\n      { 'bg-fourth-nano': validation }\n    ]\"\n    class=\"field-wrapper flex-center flex-nowrap flex\"\n  >\n    <!-- Слот для иконки -->\n    <slot name=\"icon\" v-if=\"$slots.icon\" />\n    <!-- Или компонент иконки через пропс -->\n    <component :is=\"icon\" v-else-if=\"icon\" class=\"i-medium t-transp mn-r-thin\" />\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 pos-relative\">\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 === 'password' && !showPassword ? 'password' : type === 'password' ? 'text' : type\"\n        class=\"w-100\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n        :autofocus=\"autofocus\"\n        :name=\"name\"\n        :id=\"id\"\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        :name=\"name\"\n        :id=\"id\"\n      />\n    </div>\n    <IconShow\n      v-if=\"type === 'password'\"\n      :show=\"!showPassword\"\n      @click=\"showPassword = !showPassword\"\n      class=\"i-medium cursor-pointer\"\n    />\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,\ntextarea,\nspan {\n  color: inherit;\n  line-height: 1;\n}\ntextarea {\n  resize: none;\n  overflow: hidden; \n  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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,UAAM,OAAO;AACb,UAAM,QAAQ;AAed,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IAClC;AACA,UAAM,WAAWA,IAAAA,IAAI,IAAI;AACzB,UAAM,QAAQA,IAAAA,IAAI,IAAI;AACtB,UAAM,eAAeA,IAAAA,IAAI,KAAK;AAE9B,aAAS,SAAS;AAChB,UAAI,CAAC,SAAS,OAAO;AACnB;AAAA,MACF;AACA,YAAM,KAAK,SAAS;AACpB,SAAG,MAAM,SAAS;AAClB,YAAM,eAAe,GAAG;AACxB,UAAI,eAAe,IAAI;AACrB,WAAG,MAAM,SAAS,eAAe;AAAA,MACnC,OAAO;AACL,WAAG,MAAM,SAAS;AAAA,MACpB;AAAA,IACF;AACA,aAAS,QAAQ;AACf,UAAI,MAAM,WAAW;AACnB,YAAI,MAAM,SAAS,cAAc,SAAS,OAAO;AAC/C,mBAAS,MAAM,MAAK;AAAA,QACtB,WAAW,MAAM,OAAO;AACtB,gBAAM,MAAM,MAAK;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AACAC,QAAAA,MAAM,MAAM,MAAM,OAAO,MAAM;AAC7B,UAAI,MAAM,SAAS,YAAY;AAC7BC,YAAAA,SAAS,MAAM;AAAA,MACjB;AAAA,IACF,CAAC;AACDD,QAAAA,MAAM,MAAM,MAAM,WAAW,CAAC,WAAW;AACvC,UAAI,QAAQ;AACVC,YAAAA,SAAS,KAAK;AAAA,MAChB;AAAA,IACF,CAAC;AACDC,QAAAA,UAAU,MAAM;AACdD,UAAAA,SAAS,KAAK;AACdA,UAAAA,SAAS,MAAM;AAAA,IACjB,CAAC;AACD,UAAM,OAAOF,IAAAA,IAAI,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -8,8 +8,8 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = { class: "t-nowrap" };
 const _hoisted_3 = { class: "w-100 pos-relative" };
-const _hoisted_4 = ["type", "value", "placeholder", "tabindex", "disabled", "autofocus"];
-const _hoisted_5 = ["value", "placeholder", "tabindex", "disabled"];
+const _hoisted_4 = ["type", "value", "placeholder", "tabindex", "disabled", "autofocus", "name", "id"];
+const _hoisted_5 = ["value", "placeholder", "tabindex", "disabled", "name", "id"];
 const _hoisted_6 = {
   key: 4,
   class: "t-transp mn-l-small"
@@ -31,8 +31,12 @@ const _sfc_main = {
     disabled: null,
     tabindex: -1,
     autofocus: false,
-    icon: null
+    icon: null,
     // Добавлен пропс для иконки
+    name: null,
+    // Имя поля для автозаполнения
+    id: null
+    // ID поля
   },
   emits: ["update:field", "focus", "blur"],
   setup(__props, { emit: __emit }) {
@@ -110,7 +114,9 @@ const _sfc_main = {
               placeholder: __props.placeholder,
               tabindex: __props.tabindex,
               disabled: __props.disabled,
-              autofocus: __props.autofocus
+              autofocus: __props.autofocus,
+              name: __props.name,
+              id: __props.id
             }, null, 40, _hoisted_4)) : (openBlock(), createElementBlock("textarea", {
               key: 1,
               ref_key: "textarea",
@@ -122,7 +128,9 @@ const _sfc_main = {
               value: __props.field,
               placeholder: __props.placeholder,
               tabindex: __props.tabindex,
-              disabled: __props.disabled
+              disabled: __props.disabled,
+              name: __props.name,
+              id: __props.id
             }, null, 40, _hoisted_5))
           ]),
           __props.type === "password" ? (openBlock(), createBlock(_sfc_main$1, {
@@ -146,7 +154,7 @@ const _sfc_main = {
     };
   }
 };
-const Field = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-69b12b85"]]);
+const Field = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-985f0e53"]]);
 export {
   Field as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Field.vue.js","sources":["../../../../../src/components/Field/Field.vue"],"sourcesContent":["<script setup>\nimport { ref, onMounted, nextTick, watch } from 'vue'\nimport IconShow from '@martyrs/src/modules/icons/actions/IconShow.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  icon: null // Добавлен пропс для иконки\n});\nif (props.value) {\n  emit('update:field', props.value)\n}\nconst textarea = ref(null);\nconst input = ref(null);\nconst showPassword = ref(false);\n\nfunction resize() {\n  if (!textarea.value) {\n    return;\n  }\n  const el = textarea.value;\n  el.style.height = '';\n  const scrollHeight = el.scrollHeight;\n  if (scrollHeight > 33) {\n    el.style.height = scrollHeight + 'px';\n  } else {\n    el.style.height = '';\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}\nwatch(() => props.field, () => {\n  if (props.type === 'textarea') {\n    nextTick(resize);\n  }\n});\nwatch(() => props.autofocus, (newVal) => {\n  if (newVal) {\n    nextTick(focus);\n  }\n});\nonMounted(() => {\n  nextTick(focus);\n  nextTick(resize);\n});\nconst text = ref(props.field);\n</script>\n<template>\n  <div\n    :class=\"[\n      $attrs.class,\n      { 'bg-fourth-nano': validation }\n    ]\"\n    class=\"field-wrapper flex-center flex-nowrap flex\"\n  >\n    <!-- Слот для иконки -->\n    <slot name=\"icon\" v-if=\"$slots.icon\" />\n    <!-- Или компонент иконки через пропс -->\n    <component :is=\"icon\" v-else-if=\"icon\" class=\"i-medium t-transp mn-r-thin\" />\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 pos-relative\">\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 === 'password' && !showPassword ? 'password' : type === 'password' ? 'text' : 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    <IconShow\n      v-if=\"type === 'password'\"\n      :show=\"!showPassword\"\n      @click=\"showPassword = !showPassword\"\n      class=\"i-medium cursor-pointer\"\n    />\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,\ntextarea,\nspan {\n  color: inherit;\n  line-height: 1;\n}\ntextarea {\n  resize: none;\n  overflow: hidden; \n  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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,UAAM,OAAO;AACb,UAAM,QAAQ;AAad,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IAClC;AACA,UAAM,WAAW,IAAI,IAAI;AACzB,UAAM,QAAQ,IAAI,IAAI;AACtB,UAAM,eAAe,IAAI,KAAK;AAE9B,aAAS,SAAS;AAChB,UAAI,CAAC,SAAS,OAAO;AACnB;AAAA,MACF;AACA,YAAM,KAAK,SAAS;AACpB,SAAG,MAAM,SAAS;AAClB,YAAM,eAAe,GAAG;AACxB,UAAI,eAAe,IAAI;AACrB,WAAG,MAAM,SAAS,eAAe;AAAA,MACnC,OAAO;AACL,WAAG,MAAM,SAAS;AAAA,MACpB;AAAA,IACF;AACA,aAAS,QAAQ;AACf,UAAI,MAAM,WAAW;AACnB,YAAI,MAAM,SAAS,cAAc,SAAS,OAAO;AAC/C,mBAAS,MAAM,MAAK;AAAA,QACtB,WAAW,MAAM,OAAO;AACtB,gBAAM,MAAM,MAAK;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AACA,UAAM,MAAM,MAAM,OAAO,MAAM;AAC7B,UAAI,MAAM,SAAS,YAAY;AAC7B,iBAAS,MAAM;AAAA,MACjB;AAAA,IACF,CAAC;AACD,UAAM,MAAM,MAAM,WAAW,CAAC,WAAW;AACvC,UAAI,QAAQ;AACV,iBAAS,KAAK;AAAA,MAChB;AAAA,IACF,CAAC;AACD,cAAU,MAAM;AACd,eAAS,KAAK;AACd,eAAS,MAAM;AAAA,IACjB,CAAC;AACD,UAAM,OAAO,IAAI,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Field.vue.js","sources":["../../../../../src/components/Field/Field.vue"],"sourcesContent":["<script setup>\nimport { ref, onMounted, nextTick, watch } from 'vue'\nimport IconShow from '@martyrs/src/modules/icons/actions/IconShow.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  icon: null, // Добавлен пропс для иконки\n  name: null, // Имя поля для автозаполнения\n  id: null // ID поля\n});\nif (props.value) {\n  emit('update:field', props.value)\n}\nconst textarea = ref(null);\nconst input = ref(null);\nconst showPassword = ref(false);\n\nfunction resize() {\n  if (!textarea.value) {\n    return;\n  }\n  const el = textarea.value;\n  el.style.height = '';\n  const scrollHeight = el.scrollHeight;\n  if (scrollHeight > 33) {\n    el.style.height = scrollHeight + 'px';\n  } else {\n    el.style.height = '';\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}\nwatch(() => props.field, () => {\n  if (props.type === 'textarea') {\n    nextTick(resize);\n  }\n});\nwatch(() => props.autofocus, (newVal) => {\n  if (newVal) {\n    nextTick(focus);\n  }\n});\nonMounted(() => {\n  nextTick(focus);\n  nextTick(resize);\n});\nconst text = ref(props.field);\n</script>\n<template>\n  <div\n    :class=\"[\n      $attrs.class,\n      { 'bg-fourth-nano': validation }\n    ]\"\n    class=\"field-wrapper flex-center flex-nowrap flex\"\n  >\n    <!-- Слот для иконки -->\n    <slot name=\"icon\" v-if=\"$slots.icon\" />\n    <!-- Или компонент иконки через пропс -->\n    <component :is=\"icon\" v-else-if=\"icon\" class=\"i-medium t-transp mn-r-thin\" />\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 pos-relative\">\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 === 'password' && !showPassword ? 'password' : type === 'password' ? 'text' : type\"\n        class=\"w-100\"\n        :value=\"field\"\n        :placeholder=\"placeholder\"\n        :tabindex=\"tabindex\"\n        :disabled=\"disabled\"\n        :autofocus=\"autofocus\"\n        :name=\"name\"\n        :id=\"id\"\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        :name=\"name\"\n        :id=\"id\"\n      />\n    </div>\n    <IconShow\n      v-if=\"type === 'password'\"\n      :show=\"!showPassword\"\n      @click=\"showPassword = !showPassword\"\n      class=\"i-medium cursor-pointer\"\n    />\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,\ntextarea,\nspan {\n  color: inherit;\n  line-height: 1;\n}\ntextarea {\n  resize: none;\n  overflow: hidden; \n  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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,UAAM,OAAO;AACb,UAAM,QAAQ;AAed,QAAI,MAAM,OAAO;AACf,WAAK,gBAAgB,MAAM,KAAK;AAAA,IAClC;AACA,UAAM,WAAW,IAAI,IAAI;AACzB,UAAM,QAAQ,IAAI,IAAI;AACtB,UAAM,eAAe,IAAI,KAAK;AAE9B,aAAS,SAAS;AAChB,UAAI,CAAC,SAAS,OAAO;AACnB;AAAA,MACF;AACA,YAAM,KAAK,SAAS;AACpB,SAAG,MAAM,SAAS;AAClB,YAAM,eAAe,GAAG;AACxB,UAAI,eAAe,IAAI;AACrB,WAAG,MAAM,SAAS,eAAe;AAAA,MACnC,OAAO;AACL,WAAG,MAAM,SAAS;AAAA,MACpB;AAAA,IACF;AACA,aAAS,QAAQ;AACf,UAAI,MAAM,WAAW;AACnB,YAAI,MAAM,SAAS,cAAc,SAAS,OAAO;AAC/C,mBAAS,MAAM,MAAK;AAAA,QACtB,WAAW,MAAM,OAAO;AACtB,gBAAM,MAAM,MAAK;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AACA,UAAM,MAAM,MAAM,OAAO,MAAM;AAC7B,UAAI,MAAM,SAAS,YAAY;AAC7B,iBAAS,MAAM;AAAA,MACjB;AAAA,IACF,CAAC;AACD,UAAM,MAAM,MAAM,WAAW,CAAC,WAAW;AACvC,UAAI,QAAQ;AACV,iBAAS,KAAK;AAAA,MAChB;AAAA,IACF,CAAC;AACD,cAAU,MAAM;AACd,eAAS,KAAK;AACd,eAAS,MAAM;AAAA,IACjB,CAAC;AACD,UAAM,OAAO,IAAI,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}