eco-vue-js 0.3.67

package/dist/components/InfiniteList/WInfiniteListPages.vue.js

@@ -0,0 +1,229 @@
+import { defineComponent, ref, computed, watch, toRef, openBlock, createBlock, normalizeStyle, withCtx, createCommentVNode, createElementBlock, Fragment, renderList, normalizeClass, nextTick, unref, renderSlot } from 'vue';
+import _sfc_main$1 from './components/InfiniteListScroll.vue.js';
+import _sfc_main$3 from './components/InfiniteListPage.vue.js';
+import { useRefetchNextPages } from './use/useRefetchNextPages.js';
+import _sfc_main$2 from './components/InfiniteListButton.vue.js';
+import { isEqualObj } from '../../utils/utils.js';
+import { getIsScrollDown } from './models/utils.js';
+
+const MAX_PAGES = 5;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "WInfiniteListPages",
+  props: {
+    useQueryFn: {},
+    isInvalidPage: {},
+    queryParams: {},
+    skeletonLength: { default: void 0 },
+    hidePageTitle: { type: Boolean },
+    skipScrollTarget: { type: Boolean },
+    selected: { default: void 0 },
+    wrap: { type: Boolean },
+    noGap: { type: Boolean },
+    transition: { type: Boolean },
+    pageLength: { default: 24 },
+    scrollingElement: { default: null },
+    headerTop: { default: 0 },
+    headerHeight: { default: 0 },
+    minHeight: { type: Boolean },
+    excludeParams: { default: void 0 },
+    emptyStub: { default: void 0 },
+    selectOnly: { type: Boolean },
+    unselectOnly: { type: Boolean },
+    reverseSelection: { type: Boolean },
+    allowPageSelection: { type: Boolean },
+    pageClass: { default: void 0 }
+  },
+  emits: ["update:page", "update:count", "update:selected"],
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const infiniteScroll = ref();
+    const pages = ref([props.queryParams.page ?? 1]);
+    const pagesCount = ref(1);
+    const count = ref(0);
+    const nextPage = ref();
+    const previousPage = ref();
+    const isResettingPage = ref(false);
+    const getSkeletonLength = (pagesBefore) => {
+      if (props.skeletonLength === void 0)
+        return props.pageLength;
+      const length = Math.min(props.skeletonLength - pagesBefore * props.pageLength, props.pageLength);
+      return length < 0 ? props.pageLength : length;
+    };
+    const isPreviousButtonVisible = computed(() => {
+      if (pages.value.length === 1 && pages.value[0] > 1)
+        return true;
+      if (count.value === 0)
+        return false;
+      if (previousPage.value)
+        return true;
+      return false;
+    });
+    const { pageComponent, refetchNextPages } = useRefetchNextPages();
+    const updateCount = (value) => {
+      count.value = value;
+    };
+    const updatePagesCount = (value) => {
+      pagesCount.value = value;
+    };
+    const updateNextPage = (value) => {
+      nextPage.value = value;
+      if (pages.value.length === 1 && getIsScrollDown(props.scrollingElement))
+        addNextPage(true);
+    };
+    const updatePreviousPage = (value) => {
+      previousPage.value = value;
+      if (pages.value.length === 1)
+        addPreviousPage(true);
+    };
+    const addNextPage = (silent) => {
+      if (!nextPage.value)
+        return;
+      if (pages.value.includes(nextPage.value))
+        return;
+      pages.value.push(nextPage.value);
+      if (!silent)
+        emit("update:page", nextPage.value);
+      if (pages.value.length < MAX_PAGES)
+        return;
+      const firstPage = pages.value.shift();
+      if (firstPage === void 0)
+        return;
+      previousPage.value = firstPage;
+    };
+    const addPreviousPage = (silent) => {
+      if (!previousPage.value)
+        return;
+      if (pages.value.includes(previousPage.value))
+        return;
+      pages.value.unshift(previousPage.value);
+      if (!silent)
+        emit("update:page", previousPage.value);
+      if (pages.value.length < MAX_PAGES)
+        return;
+      const lastPage = pages.value.pop();
+      if (lastPage === void 0)
+        return;
+      nextPage.value = lastPage;
+    };
+    const updateScroll = (height) => {
+      const element = props.scrollingElement ?? document.scrollingElement;
+      if (!element)
+        return;
+      element.scrollTop = element.scrollTop + height;
+    };
+    const removePage = (page) => {
+      const index = pages.value.indexOf(page);
+      if (index === -1)
+        return;
+      pages.value.splice(index, pages.value.length - index);
+      if (!pages.value.length)
+        pages.value = [1];
+      emit("update:page", pages.value[pages.value.length - 1]);
+    };
+    const resetPage = () => {
+      isResettingPage.value = true;
+      emit("update:page", void 0);
+      pages.value = [1];
+      nextPage.value = null;
+      previousPage.value = null;
+      if (!props.skipScrollTarget)
+        (props.scrollingElement ?? document.scrollingElement)?.scrollTo(0, props.headerTop);
+    };
+    watch(toRef(props, "queryParams"), (newValue, oldValue) => {
+      if (isEqualObj(newValue, oldValue, ["page", ...props.excludeParams ?? []]))
+        return;
+      resetPage();
+    });
+    __expose({
+      resetPage
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        ref_key: "infiniteScroll",
+        ref: infiniteScroll,
+        "scrolling-element": _ctx.scrollingElement,
+        style: normalizeStyle({ "--infinite-list-header-height": _ctx.headerHeight + "px" }),
+        "onScroll:down": addNextPage,
+        "onScroll:up": addPreviousPage
+      }, {
+        default: withCtx(() => [
+          isPreviousButtonVisible.value ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 0,
+            onClick: _cache[0] || (_cache[0] = ($event) => addPreviousPage())
+          })) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(pages.value, (page, index) => {
+            return openBlock(), createBlock(_sfc_main$3, {
+              ref_for: true,
+              ref_key: "pageComponent",
+              ref: pageComponent,
+              key: page,
+              "query-params": { ..._ctx.queryParams, page },
+              "use-query-fn": _ctx.useQueryFn,
+              "is-invalid-page": _ctx.isInvalidPage,
+              "skeleton-length": getSkeletonLength(page - 1),
+              "first-page": index === 0,
+              "last-page": index === pages.value.length - 1,
+              "hide-page-title": _ctx.hidePageTitle,
+              selected: _ctx.selected,
+              wrap: _ctx.wrap,
+              "no-gap": _ctx.noGap,
+              transition: _ctx.transition,
+              resetting: isResettingPage.value,
+              "empty-stub": _ctx.emptyStub,
+              "select-only": _ctx.selectOnly,
+              "unselect-only": _ctx.unselectOnly,
+              "reverse-selection": _ctx.reverseSelection,
+              "allow-page-selection": _ctx.allowPageSelection,
+              "min-height": _ctx.minHeight,
+              "page-class": _ctx.pageClass,
+              class: normalizeClass({
+                "last:min-h-[calc(100vh-var(--header-height)-var(--infinite-list-header-height))] last:pb-16": !_ctx.minHeight
+              }),
+              "onUpdate:count": _cache[1] || (_cache[1] = ($event) => {
+                updateCount($event);
+                _ctx.$emit("update:count", $event);
+              }),
+              "onUpdate:pagesCount": updatePagesCount,
+              "onUpdate:nextPage": _cache[2] || (_cache[2] = ($event) => {
+                updateNextPage($event);
+                infiniteScroll.value?.checkIsScrollDown();
+              }),
+              "onUpdate:previousPage": _cache[3] || (_cache[3] = ($event) => {
+                updatePreviousPage($event);
+                infiniteScroll.value?.checkIsScrollUp();
+              }),
+              "onUpdate:scroll": updateScroll,
+              "onUpdateFromHeader:scroll": _cache[4] || (_cache[4] = ($event) => _ctx.headerTop > 0 && nextTick(() => updateScroll(_ctx.headerTop))),
+              "onError:invalidPage": removePage,
+              onRefetch: ($event) => unref(refetchNextPages)(index),
+              "onUpdate:selected": _cache[5] || (_cache[5] = ($event) => _ctx.$emit("update:selected", $event)),
+              onFetched: _cache[6] || (_cache[6] = ($event) => isResettingPage.value = false)
+            }, {
+              default: withCtx(({ item, setter, skeleton, refetch, previous, next, first, last }) => [
+                renderSlot(_ctx.$slots, "default", {
+                  item,
+                  setter,
+                  skeleton,
+                  refetch,
+                  previous: previous ?? unref(pageComponent)[index - 1]?.getLast() ?? unref(pageComponent)[unref(pageComponent).length - 1]?.getLast(),
+                  next: next ?? unref(pageComponent)[index + 1]?.getFirst() ?? unref(pageComponent)[0]?.getFirst(),
+                  first,
+                  last,
+                  resetting: isResettingPage.value
+                })
+              ]),
+              _: 2
+            }, 1032, ["query-params", "use-query-fn", "is-invalid-page", "skeleton-length", "first-page", "last-page", "hide-page-title", "selected", "wrap", "no-gap", "transition", "resetting", "empty-stub", "select-only", "unselect-only", "reverse-selection", "allow-page-selection", "min-height", "page-class", "class", "onRefetch"]);
+          }), 128)),
+          count.value !== 0 && nextPage.value ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 1,
+            onClick: addNextPage
+          })) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["scrolling-element", "style"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/InfiniteList/WInfiniteListPages.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './WInfiniteListPages.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/InfiniteList/components/InfiniteListButton.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    onClick?: (() => any) | undefined;
+}, {}, {}>;
+export default _default;
+//# sourceMappingURL=InfiniteListButton.vue.d.ts.map

package/dist/components/InfiniteList/components/InfiniteListButton.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteListButton.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/InfiniteList/components/InfiniteListButton.vue.ts"],"names":[],"mappings":";;;;;AAgFA,wBAAkD"}

package/dist/components/InfiniteList/components/InfiniteListButton.vue.js

@@ -0,0 +1,26 @@
+import { defineComponent, openBlock, createElementBlock, createVNode, unref, withCtx, createTextVNode } from 'vue';
+import { SemanticType } from '../../../utils/SemanticType.js';
+import _sfc_main$1 from '../../Button/WButton.vue.js';
+
+const _hoisted_1 = { class: "flex w-full p-12 justify-center items-center" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InfiniteListButton",
+  emits: ["click"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$1, {
+          "semantic-type": unref(SemanticType).SECONDARY,
+          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click"))
+        }, {
+          default: withCtx(() => [
+            createTextVNode(" More ")
+          ]),
+          _: 1
+        }, 8, ["semantic-type"])
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/InfiniteList/components/InfiniteListButton.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './InfiniteListButton.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/InfiniteList/components/InfiniteListPage.vue.d.ts

@@ -0,0 +1,183 @@
+declare const _default: <Data extends DefaultData>(__VLS_props: {
+    queryParams: QueryParams;
+    useQueryFn: UsePaginatedQuery<Data>;
+    isInvalidPage: (error: unknown) => boolean;
+    skeletonLength: number;
+    firstPage: boolean;
+    lastPage: boolean;
+    hidePageTitle?: boolean | undefined;
+    selected?: number[] | undefined;
+    wrap?: boolean | undefined;
+    noGap?: boolean | undefined;
+    transition?: boolean | undefined;
+    resetting?: boolean | undefined;
+    emptyStub?: string | undefined;
+    selectOnly?: boolean | undefined;
+    unselectOnly?: boolean | undefined;
+    reverseSelection?: boolean | undefined;
+    allowPageSelection?: boolean | undefined;
+    minHeight?: boolean | undefined;
+    pageClass?: string | undefined;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: Pick<{
+    props: {
+        queryParams: QueryParams;
+        useQueryFn: UsePaginatedQuery<Data>;
+        isInvalidPage: (error: unknown) => boolean;
+        skeletonLength: number;
+        firstPage: boolean;
+        lastPage: boolean;
+        hidePageTitle?: boolean | undefined;
+        selected?: number[] | undefined;
+        wrap?: boolean | undefined;
+        noGap?: boolean | undefined;
+        transition?: boolean | undefined;
+        resetting?: boolean | undefined;
+        emptyStub?: string | undefined;
+        selectOnly?: boolean | undefined;
+        unselectOnly?: boolean | undefined;
+        reverseSelection?: boolean | undefined;
+        allowPageSelection?: boolean | undefined;
+        minHeight?: boolean | undefined;
+        pageClass?: string | undefined;
+    };
+    expose(exposed: {
+        getFirst: () => Data | undefined;
+        getLast: () => Data | undefined;
+        refetch: () => Promise<void>;
+    }): void;
+    attrs: any;
+    slots: {
+        default?: ((props: {
+            item: Data;
+            setter: (newItem?: Data | undefined) => void;
+            skeleton: boolean;
+            refetch: () => void;
+            previous?: Data | undefined;
+            next?: Data | undefined;
+            first: boolean;
+            last: boolean;
+        }) => void) | undefined;
+    };
+    emit: {
+        (e: 'update:count', value: number): void;
+        (e: 'update:pagesCount', value: number): void;
+        (e: 'update:nextPage', value: number | null): void;
+        (e: 'update:previousPage', value: number | null): void;
+        (e: 'update:scroll', value: number): void;
+        (e: 'error:invalidPage', value: number): void;
+        (e: 'refetch'): void;
+        (e: 'update-from-header:scroll'): void;
+        (e: 'update:selected', values: number[]): void;
+        (e: 'fetched'): void;
+    };
+}, "attrs" | "slots" | "emit"> | undefined, __VLS_setup?: {
+    props: {
+        queryParams: QueryParams;
+        useQueryFn: UsePaginatedQuery<Data>;
+        isInvalidPage: (error: unknown) => boolean;
+        skeletonLength: number;
+        firstPage: boolean;
+        lastPage: boolean;
+        hidePageTitle?: boolean | undefined;
+        selected?: number[] | undefined;
+        wrap?: boolean | undefined;
+        noGap?: boolean | undefined;
+        transition?: boolean | undefined;
+        resetting?: boolean | undefined;
+        emptyStub?: string | undefined;
+        selectOnly?: boolean | undefined;
+        unselectOnly?: boolean | undefined;
+        reverseSelection?: boolean | undefined;
+        allowPageSelection?: boolean | undefined;
+        minHeight?: boolean | undefined;
+        pageClass?: string | undefined;
+    };
+    expose(exposed: {
+        getFirst: () => Data | undefined;
+        getLast: () => Data | undefined;
+        refetch: () => Promise<void>;
+    }): void;
+    attrs: any;
+    slots: {
+        default?: ((props: {
+            item: Data;
+            setter: (newItem?: Data | undefined) => void;
+            skeleton: boolean;
+            refetch: () => void;
+            previous?: Data | undefined;
+            next?: Data | undefined;
+            first: boolean;
+            last: boolean;
+        }) => void) | undefined;
+    };
+    emit: {
+        (e: 'update:count', value: number): void;
+        (e: 'update:pagesCount', value: number): void;
+        (e: 'update:nextPage', value: number | null): void;
+        (e: 'update:previousPage', value: number | null): void;
+        (e: 'update:scroll', value: number): void;
+        (e: 'error:invalidPage', value: number): void;
+        (e: 'refetch'): void;
+        (e: 'update-from-header:scroll'): void;
+        (e: 'update:selected', values: number[]): void;
+        (e: 'fetched'): void;
+    };
+}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            queryParams: QueryParams;
+            useQueryFn: UsePaginatedQuery<Data>;
+            isInvalidPage: (error: unknown) => boolean;
+            skeletonLength: number;
+            firstPage: boolean;
+            lastPage: boolean;
+            hidePageTitle?: boolean | undefined;
+            selected?: number[] | undefined;
+            wrap?: boolean | undefined;
+            noGap?: boolean | undefined;
+            transition?: boolean | undefined;
+            resetting?: boolean | undefined;
+            emptyStub?: string | undefined;
+            selectOnly?: boolean | undefined;
+            unselectOnly?: boolean | undefined;
+            reverseSelection?: boolean | undefined;
+            allowPageSelection?: boolean | undefined;
+            minHeight?: boolean | undefined;
+            pageClass?: string | undefined;
+        };
+        expose(exposed: {
+            getFirst: () => Data | undefined;
+            getLast: () => Data | undefined;
+            refetch: () => Promise<void>;
+        }): void;
+        attrs: any;
+        slots: {
+            default?: ((props: {
+                item: Data;
+                setter: (newItem?: Data | undefined) => void;
+                skeleton: boolean;
+                refetch: () => void;
+                previous?: Data | undefined;
+                next?: Data | undefined;
+                first: boolean;
+                last: boolean;
+            }) => void) | undefined;
+        };
+        emit: {
+            (e: 'update:count', value: number): void;
+            (e: 'update:pagesCount', value: number): void;
+            (e: 'update:nextPage', value: number | null): void;
+            (e: 'update:previousPage', value: number | null): void;
+            (e: 'update:scroll', value: number): void;
+            (e: 'error:invalidPage', value: number): void;
+            (e: 'refetch'): void;
+            (e: 'update-from-header:scroll'): void;
+            (e: 'update:selected', values: number[]): void;
+            (e: 'fetched'): void;
+        };
+    } | undefined;
+};
+export default _default;
+//# sourceMappingURL=InfiniteListPage.vue.d.ts.map

package/dist/components/InfiniteList/components/InfiniteListPage.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteListPage.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/InfiniteList/components/InfiniteListPage.vue.ts"],"names":[],"mappings":";iBA+biB,WAAW;;2BAED,OAAO,KAAK,OAAO;oBAC1B,MAAM;eACX,OAAO;cACR,OAAO;;;;;;;;;;;;;;;;qBALJ,WAAW;;+BAED,OAAO,KAAK,OAAO;wBAC1B,MAAM;mBACX,OAAO;kBACR,OAAO;;;;;;;;;;;;;;;;;;;QA6BkB,IAAI;WACpC,GAAG;;;;oDA5QkC,IAAI;sBAClC,OAAO;qBACR,MAAM,IAAI;;;mBAGZ,OAAO;kBACR,OAAO;cACT,IAAI;;;YAuPN,cAAc,SAAS,MAAM,GAAG,IAAI;YACpC,mBAAmB,SAAS,MAAM,GAAG,IAAI;YACzC,iBAAiB,SAAS,MAAM,GAAG,IAAI,GAAG,IAAI;YAC9C,qBAAqB,SAAS,MAAM,GAAG,IAAI,GAAG,IAAI;YAClD,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,mBAAmB,SAAS,MAAM,GAAG,IAAI;YACzC,SAAS,GAAG,IAAI;YAChB,2BAA2B,GAAG,IAAI;YAClC,iBAAiB,UAAU,MAAM,EAAE,GAAG,IAAI;YAC1C,SAAS,GAAG,IAAI;;;;qBA9BL,WAAW;;+BAED,OAAO,KAAK,OAAO;wBAC1B,MAAM;mBACX,OAAO;kBACR,OAAO;;;;;;;;;;;;;;;;;;;QA6BkB,IAAI;WACpC,GAAG;;;;oDA5QkC,IAAI;sBAClC,OAAO;qBACR,MAAM,IAAI;;;mBAGZ,OAAO;kBACR,OAAO;cACT,IAAI;;;YAuPN,cAAc,SAAS,MAAM,GAAG,IAAI;YACpC,mBAAmB,SAAS,MAAM,GAAG,IAAI;YACzC,iBAAiB,SAAS,MAAM,GAAG,IAAI,GAAG,IAAI;YAC9C,qBAAqB,SAAS,MAAM,GAAG,IAAI,GAAG,IAAI;YAClD,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,mBAAmB,SAAS,MAAM,GAAG,IAAI;YACzC,SAAS,GAAG,IAAI;YAChB,2BAA2B,GAAG,IAAI;YAClC,iBAAiB,UAAU,MAAM,EAAE,GAAG,IAAI;YAC1C,SAAS,GAAG,IAAI;;;;;;;yBA9BL,WAAW;;mCAED,OAAO,KAAK,OAAO;4BAC1B,MAAM;uBACX,OAAO;sBACR,OAAO;;;;;;;;;;;;;;;;;;;YA6BkB,IAAI;eACpC,GAAG;;;;wDA5QkC,IAAI;0BAClC,OAAO;yBACR,MAAM,IAAI;;;uBAGZ,OAAO;sBACR,OAAO;kBACT,IAAI;;;gBAuPN,cAAc,SAAS,MAAM,GAAG,IAAI;gBACpC,mBAAmB,SAAS,MAAM,GAAG,IAAI;gBACzC,iBAAiB,SAAS,MAAM,GAAG,IAAI,GAAG,IAAI;gBAC9C,qBAAqB,SAAS,MAAM,GAAG,IAAI,GAAG,IAAI;gBAClD,eAAe,SAAS,MAAM,GAAG,IAAI;gBACrC,mBAAmB,SAAS,MAAM,GAAG,IAAI;gBACzC,SAAS,GAAG,IAAI;gBAChB,2BAA2B,GAAG,IAAI;gBAClC,iBAAiB,UAAU,MAAM,EAAE,GAAG,IAAI;gBAC1C,SAAS,GAAG,IAAI;;;;AAvdtB,wBAgekE"}