@ozdao/prometheus-framework 0.2.199 → 0.2.200

package/dist/prometheus-framework/src/components/Feed/Feed.vue.js

@@ -1,30 +1,31 @@
-import { mergeModels as N, useModel as M, ref as g, watch as $, onMounted as T, onUnmounted as P, openBlock as s, createElementBlock as S, Fragment as j, createBlock as m, normalizeClass as y, createCommentVNode as r, createElementVNode as U, createVNode as B, withCtx as k, unref as w, TransitionGroup as C, renderList as G, renderSlot as R } from "vue";
-import q from "../../modules/icons/skeletons/SkeletonEvent.vue.js";
+import { mergeModels, useModel, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, Fragment, createBlock, normalizeClass, createCommentVNode, createElementVNode, createVNode, withCtx, unref, TransitionGroup, renderList, renderSlot } from "vue";
+import SkeletonEvent from "../../modules/icons/skeletons/SkeletonEvent.vue.js";
 /* empty css                   */
-import A from "../EmptyState/EmptyState.vue.js";
-import z from "../Dropdown/Dropdown.vue.js";
-import D from "../DatePicker/Calendar.vue2.js";
-import H from "../BottomSheet/BottomSheet.vue.js";
-import J from "../../modules/globals/views/components/blocks/BlockSearch.vue.js";
-import K from "../../modules/globals/views/components/blocks/BlockSorting.vue.js";
-import Q from "../../modules/globals/views/components/blocks/BlockFilter.vue.js";
-import W from "../../modules/globals/views/components/elements/ButtonSort.vue.js";
-import X from "../../modules/globals/views/components/elements/ButtonDate.vue.js";
-import Y from "../../modules/icons/navigation/IconFilter.vue.js";
+import _sfc_main$a from "../EmptyState/EmptyState.vue.js";
+import _sfc_main$5 from "../Dropdown/Dropdown.vue2.js";
+import _sfc_main$7 from "../DatePicker/Calendar.vue2.js";
+import _sfc_main$3 from "../BottomSheet/BottomSheet.vue.js";
+import _sfc_main$1 from "../../modules/globals/views/components/blocks/BlockSearch.vue.js";
+import _sfc_main$9 from "../../modules/globals/views/components/blocks/BlockSorting.vue.js";
+import _sfc_main$4 from "../../modules/globals/views/components/blocks/BlockFilter.vue.js";
+import _sfc_main$8 from "../../modules/globals/views/components/elements/ButtonSort.vue.js";
+import _sfc_main$6 from "../../modules/globals/views/components/elements/ButtonDate.vue.js";
+import _sfc_main$2 from "../../modules/icons/navigation/IconFilter.vue.js";
 /* empty css          */
-const Z = {
+const _hoisted_1 = {
   key: 0,
   class: "flex-nowrap flex gap-thin"
-}, ve = {
+};
+const _sfc_main = {
   __name: "Feed",
-  props: /* @__PURE__ */ N({
+  props: /* @__PURE__ */ mergeModels({
     showLoadMore: {
       type: Boolean,
-      default: !0
+      default: true
     },
     search: {
       type: [Boolean, Object],
-      default: !1
+      default: false
     },
     states: {
       type: Object,
@@ -44,7 +45,7 @@ const Z = {
     },
     external: {
       type: Boolean,
-      default: !1
+      default: false
     },
     options: {
       type: Object,
@@ -61,213 +62,279 @@ const Z = {
       })
     }
   }, {
-    search: {},
-    searchModifiers: {},
-    sort: {},
-    sortModifiers: {},
-    filter: {},
-    filterModifiers: {},
-    date: {},
-    dateModifiers: {},
-    items: {},
-    itemsModifiers: {}
+    "search": {},
+    "searchModifiers": {},
+    "sort": {},
+    "sortModifiers": {},
+    "filter": {},
+    "filterModifiers": {},
+    "date": {},
+    "dateModifiers": {},
+    "items": {},
+    "itemsModifiers": {}
   }),
   emits: ["update:search", "update:sort", "update:filter", "update:date", "update:items"],
-  setup(u) {
-    const h = M(u, "search"), a = M(u, "sort"), i = M(u, "filter"), l = M(u, "date"), x = M(u, "items"), o = u, n = g(x.value || []), v = g(!1);
-    let b = g(!0), E = g(null), d = g(o.options.skip ? o.options.skip : 0), f = g(o.options.limit ? o.options.limit : 10), O = g("");
-    function F(e) {
-      O.value = e, d.value = 0, f.value = 10, p();
+  setup(__props) {
+    const search = useModel(__props, "search");
+    const sort = useModel(__props, "sort");
+    const filter = useModel(__props, "filter");
+    const date = useModel(__props, "date");
+    const items = useModel(__props, "items");
+    const props = __props;
+    const itemsList = ref(items.value || []);
+    const hasMoreItems = ref(false);
+    let isLoading = ref(true);
+    let sentinel = ref(null);
+    let currentSkip = ref(props.options.skip ? props.options.skip : 0);
+    let currentLimit = ref(props.options.limit ? props.options.limit : 10);
+    let currentSearch = ref("");
+    function updateSearch(search2) {
+      currentSearch.value = search2;
+      currentSkip.value = 0;
+      currentLimit.value = 10;
+      fetchItems();
     }
-    const I = async () => {
-      if (v.value) {
-        d.value += f.value;
-        const e = await o.store.read({
-          skip: d.value,
-          limit: f.value,
-          search: O.value,
-          dateStart: l.value ? l.value.start : null,
-          dateEnd: l.value ? l.value.end : null,
-          sortParam: a.value ? a.value.param : null,
-          sortOrder: a.value ? a.value.order : null,
-          ...o.options
+    const loadMoreItems = async () => {
+      if (hasMoreItems.value) {
+        currentSkip.value += currentLimit.value;
+        const data = await props.store.read({
+          skip: currentSkip.value,
+          limit: currentLimit.value,
+          search: currentSearch.value,
+          dateStart: date.value ? date.value.start : null,
+          dateEnd: date.value ? date.value.end : null,
+          sortParam: sort.value ? sort.value.param : null,
+          sortOrder: sort.value ? sort.value.order : null,
+          ...props.options
         });
-        e.length === 0 || e.length < f.value ? v.value = !1 : v.value = !0, n.value = [...n.value, ...e], x.value && (x.value = n.value);
+        if (data.length === 0) {
+          hasMoreItems.value = false;
+        } else if (data.length < currentLimit.value) {
+          hasMoreItems.value = false;
+        } else {
+          hasMoreItems.value = true;
+        }
+        itemsList.value = [...itemsList.value, ...data];
+        if (items.value) items.value = itemsList.value;
       }
-    }, p = async () => {
-      const e = await o.store.read({
-        skip: d.value,
-        limit: f.value,
-        dateStart: l.value ? l.value.start : null,
-        dateEnd: l.value ? l.value.end : null,
-        sortParam: a.value ? a.value.param : null,
-        sortOrder: a.value ? a.value.order : null,
-        search: O.value,
-        ...o.options
+    };
+    const fetchItems = async () => {
+      const data = await props.store.read({
+        skip: currentSkip.value,
+        limit: currentLimit.value,
+        dateStart: date.value ? date.value.start : null,
+        dateEnd: date.value ? date.value.end : null,
+        sortParam: sort.value ? sort.value.param : null,
+        sortOrder: sort.value ? sort.value.order : null,
+        search: currentSearch.value,
+        ...props.options
       });
-      e.length === 0 || e.length < f.value ? v.value = !1 : v.value = !0, n.value = e, x.value && (x.value = n.value), b.value = !1;
+      if (data.length === 0) {
+        hasMoreItems.value = false;
+      } else if (data.length < currentLimit.value) {
+        hasMoreItems.value = false;
+      } else {
+        hasMoreItems.value = true;
+      }
+      itemsList.value = data;
+      if (items.value) items.value = itemsList.value;
+      isLoading.value = false;
     };
-    $(() => o.external, (e, t) => {
-      e !== t && (d.value = 0, p());
-    }, { deep: !0 }), $(() => l.value, (e, t) => {
-      e !== t && (d.value = 0, p());
-    }, { deep: !0 }), $(() => {
-      var e;
-      return (e = a.value) == null ? void 0 : e.order;
-    }, (e, t) => {
-      e !== t && (d.value = 0, p());
-    }), $(() => {
-      var e;
-      return (e = a.value) == null ? void 0 : e.param;
-    }, (e, t) => {
-      e !== t && (d.value = 0, p());
-    }), $(() => o.options, (e, t) => {
-      (e.organization !== t.organization || e.categories !== t.categories || e.prices !== t.prices || e.delivery !== t.delivery || e.search !== t.search || e.status !== t.status || e.hidden !== t.hidden || e.type !== t.type || e.tags !== t.tags || e.following !== t.following) && (d.value = 0, p());
-    }, { deep: !0 });
-    let L = null;
-    return T(async () => {
-      await p(), typeof window < "u" && !o.showLoadMore && (L = new IntersectionObserver((e) => {
-        e.some((t) => t.isIntersecting) && I();
-      }), L.observe(E.value));
-    }), P(() => {
-      L && L.disconnect();
-    }), (e, t) => (s(), S(j, null, [
-      h.value || l.value || a.value && !a.value.hideButton ? (s(), S("div", Z, [
-        h.value ? (s(), m(J, {
-          key: 0,
-          placeholder: h.value.placeholder || "Search...",
-          class: y(h.value.class || "bg-light"),
-          onSearch: F
-        }, null, 8, ["placeholder", "class"])) : r("", !0),
-        i.value ? (s(), S(j, { key: 1 }, [
-          U("div", {
-            class: y([i.value.class || "bg-light", "flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100"])
-          }, [
-            B(Y, {
-              onClick: t[0] || (t[0] = () => i.value.active = !i.value.active),
-              class: "w-1r h-auto"
-            })
-          ], 2),
-          i.value.active ? (s(), m(H, {
+    watch(() => props.external, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        currentSkip.value = 0;
+        fetchItems();
+      }
+    }, { deep: true });
+    watch(() => date.value, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        currentSkip.value = 0;
+        fetchItems();
+      }
+    }, { deep: true });
+    watch(() => {
+      var _a;
+      return (_a = sort.value) == null ? void 0 : _a.order;
+    }, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        currentSkip.value = 0;
+        fetchItems();
+      }
+    });
+    watch(() => {
+      var _a;
+      return (_a = sort.value) == null ? void 0 : _a.param;
+    }, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        currentSkip.value = 0;
+        fetchItems();
+      }
+    });
+    watch(() => props.options, (newVal, oldVal) => {
+      if (newVal.organization !== oldVal.organization || newVal.categories !== oldVal.categories || newVal.prices !== oldVal.prices || newVal.delivery !== oldVal.delivery || newVal.search !== oldVal.search || newVal.status !== oldVal.status || newVal.hidden !== oldVal.hidden || newVal.type !== oldVal.type || newVal.tags !== oldVal.tags || newVal.following !== oldVal.following) {
+        currentSkip.value = 0;
+        fetchItems();
+      }
+    }, { deep: true });
+    let observer = null;
+    onMounted(async () => {
+      await fetchItems();
+      if (typeof window !== "undefined" && !props.showLoadMore) {
+        observer = new IntersectionObserver((entries) => {
+          if (entries.some((entry) => entry.isIntersecting)) {
+            loadMoreItems();
+          }
+        });
+        observer.observe(sentinel.value);
+      }
+    });
+    onUnmounted(() => {
+      if (observer) {
+        observer.disconnect();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        search.value || date.value || sort.value && !sort.value.hideButton ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          search.value ? (openBlock(), createBlock(_sfc_main$1, {
             key: 0,
-            show: i.value.active,
-            onToggle: t[2] || (t[2] = () => i.value.active = !1),
-            class: y(["z-index-10 pos-fixed pos-t-0 pos-r-0", {
-              "pos-t-0": i.value.active,
-              "pos-t-100": !i.value.active
-            }])
+            placeholder: search.value.placeholder || "Search...",
+            class: normalizeClass(search.value.class || "bg-light"),
+            onSearch: updateSearch
+          }, null, 8, ["placeholder", "class"])) : createCommentVNode("", true),
+          filter.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createElementVNode("div", {
+              class: normalizeClass([filter.value.class || "bg-light", "flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100"])
+            }, [
+              createVNode(_sfc_main$2, {
+                onClick: _cache[0] || (_cache[0] = () => filter.value.active = !filter.value.active),
+                class: "w-1r h-auto"
+              })
+            ], 2),
+            filter.value.active ? (openBlock(), createBlock(_sfc_main$3, {
+              key: 0,
+              show: filter.value.active,
+              onToggle: _cache[2] || (_cache[2] = () => filter.value.active = false),
+              class: normalizeClass(["z-index-10 pos-fixed pos-t-0 pos-r-0", {
+                "pos-t-0": filter.value.active,
+                "pos-t-100": !filter.value.active
+              }])
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$4, {
+                  filter: filter.value,
+                  "onUpdate:filter": _cache[1] || (_cache[1] = ($event) => filter.value = $event),
+                  options: filter.value.options,
+                  class: "h-100 w-100 pd-small bg-light"
+                }, null, 8, ["filter", "options"])
+              ]),
+              _: 1
+            }, 8, ["show", "class"])) : createCommentVNode("", true)
+          ], 64)) : createCommentVNode("", true),
+          date.value ? (openBlock(), createBlock(_sfc_main$5, {
+            key: 2,
+            label: {
+              component: _sfc_main$6,
+              props: { date: date.value }
+            },
+            class: normalizeClass([date.value.class || "bg-light", "flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big"]),
+            align: search.value ? "right" : "left"
           }, {
-            default: k(() => [
-              B(Q, {
-                filter: i.value,
-                "onUpdate:filter": t[1] || (t[1] = (c) => i.value = c),
-                options: i.value.options,
-                class: "h-100 w-100 pd-small bg-light"
-              }, null, 8, ["filter", "options"])
+            default: withCtx(() => [
+              createVNode(_sfc_main$7, {
+                date: date.value,
+                "onUpdate:date": _cache[3] || (_cache[3] = ($event) => date.value = $event),
+                locale: _ctx.$i18n.locale,
+                allowRange: true,
+                class: "radius-semi w-100 o-hidden bg-light"
+              }, null, 8, ["date", "locale"])
             ]),
             _: 1
-          }, 8, ["show", "class"])) : r("", !0)
-        ], 64)) : r("", !0),
-        l.value ? (s(), m(z, {
-          key: 2,
-          label: {
-            component: X,
-            props: { date: l.value }
-          },
-          class: y([l.value.class || "bg-light", "flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big"]),
-          align: h.value ? "right" : "left"
+          }, 8, ["label", "class", "align"])) : createCommentVNode("", true),
+          sort.value && !sort.value.hideButton ? (openBlock(), createBlock(_sfc_main$5, {
+            key: 3,
+            label: {
+              component: _sfc_main$8,
+              props: { order: sort.value.order },
+              class: "w-1r"
+            },
+            class: normalizeClass([sort.value.class || "bg-light", "radius-extra aspect-1x1 h-100"]),
+            align: search.value ? "right" : "left"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$9, {
+                param: sort.value.param,
+                "onUpdate:param": _cache[4] || (_cache[4] = ($event) => sort.value.param = $event),
+                order: sort.value.order,
+                "onUpdate:order": _cache[5] || (_cache[5] = ($event) => sort.value.order = $event),
+                options: sort.value.options,
+                class: "h-100 pd-small radius-semi t-white bg-black"
+              }, null, 8, ["param", "order", "options"])
+            ]),
+            _: 1
+          }, 8, ["label", "class", "align"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        unref(isLoading) ? (openBlock(), createBlock(TransitionGroup, {
+          key: 1,
+          tag: "ul",
+          name: "scaleTransition"
         }, {
-          default: k(() => [
-            B(D, {
-              date: l.value,
-              "onUpdate:date": t[3] || (t[3] = (c) => l.value = c),
-              locale: e.$i18n.locale,
-              allowRange: !0,
-              class: "radius-semi w-100 o-hidden bg-light"
-            }, null, 8, ["date", "locale"])
+          default: withCtx(() => [
+            unref(isLoading) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(currentLimit), (i) => {
+              return openBlock(), createBlock(SkeletonEvent, {
+                key: "skeleton-" + i,
+                class: "mn-b-small radius-big o-hidden d-block"
+              });
+            }), 128)) : createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["label", "class", "align"])) : r("", !0),
-        a.value && !a.value.hideButton ? (s(), m(z, {
-          key: 3,
-          label: {
-            component: W,
-            props: { order: a.value.order },
-            class: "w-1r"
-          },
-          class: y([a.value.class || "bg-light", "radius-extra aspect-1x1 h-100"]),
-          align: h.value ? "right" : "left"
+        })) : createCommentVNode("", true),
+        !unref(isLoading) && itemsList.value.length < 1 ? (openBlock(), createBlock(TransitionGroup, {
+          key: 2,
+          tag: "ul",
+          name: "feed"
         }, {
-          default: k(() => [
-            B(K, {
-              param: a.value.param,
-              "onUpdate:param": t[4] || (t[4] = (c) => a.value.param = c),
-              order: a.value.order,
-              "onUpdate:order": t[5] || (t[5] = (c) => a.value.order = c),
-              options: a.value.options,
-              class: "h-100 pd-small radius-semi t-white bg-black"
-            }, null, 8, ["param", "order", "options"])
+          default: withCtx(() => [
+            !unref(isLoading) && itemsList.value.length < 1 ? (openBlock(), createBlock(_sfc_main$a, {
+              key: 0,
+              title: __props.states.empty.title,
+              description: __props.states.empty.description,
+              action: __props.states.empty.action,
+              callback: __props.states.empty.callback,
+              class: "pd-medium mn-b-thin bg-light radius-big"
+            }, null, 8, ["title", "description", "action", "callback"])) : createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["label", "class", "align"])) : r("", !0)
-      ])) : r("", !0),
-      w(b) ? (s(), m(C, {
-        key: 1,
-        tag: "ul",
-        name: "scaleTransition"
-      }, {
-        default: k(() => [
-          w(b) ? (s(!0), S(j, { key: 0 }, G(w(f), (c) => (s(), m(q, {
-            key: "skeleton-" + c,
-            class: "mn-b-small radius-big o-hidden d-block"
-          }))), 128)) : r("", !0)
-        ]),
-        _: 1
-      })) : r("", !0),
-      !w(b) && n.value.length < 1 ? (s(), m(C, {
-        key: 2,
-        tag: "ul",
-        name: "feed"
-      }, {
-        default: k(() => [
-          !w(b) && n.value.length < 1 ? (s(), m(A, {
-            key: 0,
-            title: u.states.empty.title,
-            description: u.states.empty.description,
-            action: u.states.empty.action,
-            callback: u.states.empty.callback,
-            class: "pd-medium mn-b-thin bg-light radius-big"
-          }, null, 8, ["title", "description", "action", "callback"])) : r("", !0)
-        ]),
-        _: 1
-      })) : r("", !0),
-      B(C, {
-        tag: "ul",
-        name: "feed",
-        class: y(e.$attrs.class)
-      }, {
-        default: k(() => [
-          !w(b) && n.value.length > 0 ? R(e.$slots, "default", {
-            key: 0,
-            items: n.value
-          }) : r("", !0),
-          u.showLoadMore && v.value && n.value.length > 0 ? (s(), S("button", {
-            key: 1,
-            onClick: I,
-            class: "col-w-100 w-100 bg-main button"
-          }, " Load More ")) : r("", !0),
-          U("div", {
-            key: "sentinel",
-            ref_key: "sentinel",
-            ref: E,
-            class: "sentinel"
-          }, null, 512)
-        ]),
-        _: 3
-      }, 8, ["class"])
-    ], 64));
+        })) : createCommentVNode("", true),
+        createVNode(TransitionGroup, {
+          tag: "ul",
+          name: "feed",
+          class: normalizeClass(_ctx.$attrs.class)
+        }, {
+          default: withCtx(() => [
+            !unref(isLoading) && itemsList.value.length > 0 ? renderSlot(_ctx.$slots, "default", {
+              key: 0,
+              items: itemsList.value
+            }) : createCommentVNode("", true),
+            __props.showLoadMore && hasMoreItems.value && itemsList.value.length > 0 ? (openBlock(), createElementBlock("button", {
+              key: 1,
+              onClick: loadMoreItems,
+              class: "col-w-100 w-100 bg-main button"
+            }, " Load More ")) : createCommentVNode("", true),
+            createElementVNode("div", {
+              key: "sentinel",
+              ref_key: "sentinel",
+              ref: sentinel,
+              class: "sentinel"
+            }, null, 512)
+          ]),
+          _: 3
+        }, 8, ["class"])
+      ], 64);
+    };
   }
 };
 export {
-  ve as default
+  _sfc_main as default
 };
+//# sourceMappingURL=Feed.vue.js.map

package/dist/prometheus-framework/src/components/Feed/Feed.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feed.vue.js","sources":["../../../../../src/components/Feed/Feed.vue"],"sourcesContent":["<template>\n\n  <div v-if=\"search || date || (sort && !sort.hideButton)\" class=\"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    />\n\n    <template\n      v-if=\"filter\"\n    >\n      <div \n        :class=\"filter.class || 'bg-light'\"\n        class=\"flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100\"\n      >\n        <IconFilter @click=\"() => filter.active = !filter.active\" class=\"w-1r h-auto\"/>\n      </div>\n\n    \n      <BottomSheet\n        v-if=\"filter.active\"\n        :show=\"filter.active\"\n        @toggle=\"() => filter.active = false\"\n        class=\"z-index-10 pos-fixed pos-t-0 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          class=\"h-100 w-100 pd-small bg-light\"\n        />\n      </BottomSheet>  \n    </template>\n\n    <Dropdown \n      v-if=\"date\"\n      :label=\"{\n        component: ButtonDate,\n        props: { date: date }\n      }\" \n      :class=\"date.class || 'bg-light'\"\n      class=\"flex-child flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <Calendar\n        v-model:date=\"date\"\n        :locale=\"$i18n.locale\"\n        :allowRange=\"true\"\n        class=\"radius-semi w-100 o-hidden bg-light\"\n      />\n    </Dropdown> \n\n    <Dropdown \n      v-if=\"sort && !sort.hideButton\"\n      :label=\"{\n        component: ButtonSort,\n        props: { order: sort.order },\n        class: 'w-1r'\n      }\" \n      :class=\"sort.class || 'bg-light'\"\n      class=\"radius-extra aspect-1x1 h-100\"\n      :align=\"search ? 'right' : 'left'\"\n    >\n\n      <BlockSorting\n        v-model:param=\"sort.param\"\n        v-model:order=\"sort.order\"\n        :options=\"sort.options\"\n        class=\"h-100 pd-small radius-semi t-white bg-black\"\n      />\n    </Dropdown> \n  </div>\n\n  <TransitionGroup \n\n    v-if=\"isLoading\"\n    tag=\"ul\" \n    name=\"scaleTransition\" \n  >\n    <SkeletonEvent\n      v-if=\"isLoading\"\n      v-for=\"i in currentLimit\" \n      :key=\"'skeleton-' + i\"\n      class=\"mn-b-small radius-big o-hidden d-block\"\n    />\n  </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    v-if=\"!isLoading && itemsList.length < 1\"\n    name=\"feed\"\n  >\n    <EmptyState\n      v-if=\"!isLoading && itemsList.length < 1\"\n      :title=\"states.empty.title\"\n      :description=\"states.empty.description\"\n      :action=\"states.empty.action\"\n      :callback=\"states.empty.callback\"\n      class=\"pd-medium mn-b-thin bg-light radius-big\"\n    />\n   </TransitionGroup>\n\n  <TransitionGroup \n    tag=\"ul\" \n    name=\"feed\"\n    :class=\"$attrs.class\"\n  >\n    <slot\n      v-if=\"!isLoading && itemsList.length > 0\"\n      :items=\"itemsList\"\n    >\n    </slot>\n\n    <button\n      v-if=\"showLoadMore && hasMoreItems && itemsList.length > 0\"\n      @click=\"loadMoreItems\"\n      class=\"col-w-100 w-100 bg-main button\"\n    >\n      Load More\n    </button>\n\n    <div key=\"sentinel\" ref=\"sentinel\" class=\"sentinel\"></div> \n  </TransitionGroup>\n\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted, watch } from 'vue';\n\nimport SkeletonEvent from '@pf/src/modules/icons/skeletons/SkeletonEvent.vue'\n\nimport Loader from '@pf/src/components/Loader/Loader.vue';\nimport EmptyState from '@pf/src/components/EmptyState/EmptyState.vue';\nimport Dropdown from \"@pf/src/components/Dropdown/Dropdown.vue\";\nimport Calendar from '@pf/src/components/DatePicker/Calendar.vue'\nimport BottomSheet from '@pf/src/components/BottomSheet/BottomSheet.vue';\n\nimport BlockSearch from '@pf/src/modules/globals/views/components/blocks/BlockSearch.vue'\nimport BlockSorting  from '@pf/src/modules/globals/views/components/blocks/BlockSorting.vue'\nimport BlockFilter  from '@pf/src/modules/globals/views/components/blocks/BlockFilter.vue'\n\nimport ButtonSort  from '@pf/src/modules/globals/views/components/elements/ButtonSort.vue'\nimport ButtonDate  from '@pf/src/modules/globals/views/components/elements/ButtonDate.vue'\n\nimport IconFilter from '@pf/src/modules/icons/navigation/IconFilter.vue'\nimport IconEvents from '@pf/src/modules/icons/entities/IconEvents.vue'\n\nconst search = defineModel('search')\nconst sort = defineModel('sort')\nconst filter = defineModel('filter')\nconst date = defineModel('date')\nconst items = defineModel('items')\n\n// Пропсы\nconst props = defineProps({\n  showLoadMore: {\n    type: Boolean,\n    default: true\n  },\n  search: {\n    type: [Boolean, Object],\n    default: false\n  },\n  states: {\n    type: Object,\n    default: () => ({\n      empty: {\n        title: String,\n        description: String,\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: 20, \n      skip: 0 ,\n      owner:  null,\n      creator:  null,\n      user:  null,\n      status: null,\n      period:  null,\n      contain:  null,\n    }),\n  },\n});\n  \nconst itemsList = ref(items.value || []);\nconst hasMoreItems = ref(false);\n\nlet isLoading = ref(true);\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\n// let sortParam = ref(sort.value?.param || 'createdAt');\n// let sortOrder = ref(sort.value?.order || 'asc');\n\nlet currentSearch = ref('');\n\nfunction updateSearch(search) {\n  currentSearch.value = search\n  currentSkip.value = 0\n  currentLimit.value = 10\n\n  fetchItems();\n}\n\nconst loadMoreItems = async () => {\n\n  if (hasMoreItems.value) {\n    currentSkip.value += currentLimit.value;\n    \n    const data = await props.store.read({\n      skip: currentSkip.value,\n      limit: currentLimit.value,\n      search: currentSearch.value,\n      dateStart: date.value ? date.value.start : null,\n      dateEnd: date.value ? date.value.end : null,\n      sortParam: sort.value ? sort.value.param : null,\n      sortOrder: sort.value ? sort.value.order : null,\n      ...props.options\n    });\n\n    if (data.length === 0) {\n      hasMoreItems.value = false;\n    } else if (data.length < currentLimit.value) {\n      hasMoreItems.value = false;\n    } else {\n      hasMoreItems.value = true;\n    }\n\n    itemsList.value = [...itemsList.value, ...data];\n    \n    if (items.value) items.value = itemsList.value;\n  }\n};\n\nconst fetchItems = async () => {\n  const data = await props.store.read({\n    skip: currentSkip.value,\n    limit: currentLimit.value,\n    dateStart: date.value ? date.value.start : null,\n    dateEnd: date.value ? date.value.end : null,\n    sortParam: sort.value ? sort.value.param : null,\n    sortOrder: sort.value ? sort.value.order : null,\n    search: currentSearch.value,\n    ...props.options\n  });\n\n  if (data.length === 0) {\n    hasMoreItems.value = false;\n  } else if (data.length < currentLimit.value) {\n    hasMoreItems.value = false;\n  } else {\n    hasMoreItems.value = true;\n  }\n\n  itemsList.value = data;\n  if (items.value) items.value = itemsList.value;\n  isLoading.value = false;\n};\n\n\nwatch(() => props.external, (newVal, oldVal) => {\n  if (newVal !== oldVal) {\n     currentSkip.value = 0\n    fetchItems();\n  }\n}, { deep: true });\n\nwatch(() => date.value, (newVal, oldVal) => {\n  if (newVal !== oldVal) {\n     currentSkip.value = 0\n    fetchItems();\n  }\n}, { deep: true });\n\nwatch(() => sort.value?.order, (newVal, oldVal) => {\n\n  if (newVal !== oldVal) {\n     currentSkip.value = 0\n    fetchItems();\n  }\n});\n\nwatch(() => sort.value?.param, (newVal, oldVal) => {\n\n  if (newVal !== oldVal) {\n     currentSkip.value = 0\n    fetchItems();\n  }\n});\n\n\nwatch(() => props.options, (newVal, oldVal) => {\n  if (\n    newVal.organization !== oldVal.organization ||\n    newVal.categories !== oldVal.categories ||\n    newVal.prices !== oldVal.prices ||\n    newVal.delivery !== oldVal.delivery ||\n    newVal.search !== oldVal.search ||\n    newVal.status !== oldVal.status ||\n    newVal.hidden !== oldVal.hidden ||\n    newVal.type !== oldVal.type ||\n    newVal.tags !== oldVal.tags || \n    newVal.following !== oldVal.following\n  ) {\n    currentSkip.value = 0\n    fetchItems();\n  }\n}, { deep: true });\n\nlet observer = null\n\nonMounted(async () => {\n  await fetchItems()\n\n  if (typeof window !== 'undefined' && !props.showLoadMore) {\n    observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting)) {\n        loadMoreItems()\n      }\n    })\n\n    observer.observe(sentinel.value)\n  }\n});\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect();\n  }\n});\n</script>\n\n\n<style>\n.feed-move, /* apply transition to moving elements */\n.feed-enter-active,\n.feed-leave-active {\n  transition: all 0.5s ease;\n}\n\n.feed-enter-from,\n.feed-leave-to {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n/* ensure leaving items are taken out of layout flow so that moving\n   animations can be calculated correctly. */\n.feed-leave-active {\n  position: absolute;\n}\n</style>"],"names":["_useModel","search"],"mappings":"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"}