vlite3 0.3.4 → 0.3.6

package/components/DataList/DataList.vue.d.ts

@@ -20,22 +20,24 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<DataListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:itemsPerPage": (limit: number) => any;
-    "page-change": (page: number) => any;
+    change: (payload: {
+        page: number;
+        limit: number;
+    }) => any;
 }, string, import('vue').PublicProps, Readonly<DataListProps> & Readonly<{
-    "onUpdate:itemsPerPage"?: (limit: number) => any;
-    "onPage-change"?: (page: number) => any;
+    onChange?: (payload: {
+        page: number;
+        limit: number;
+    }) => any;
 }>, {
     data: any[];
     loading: boolean;
     className: string;
-    paginationPosition: "start" | "center" | "end" | "between";
-    showItemsPerPage: boolean;
-    itemsPerPageOptions: number[];
     emptyTitle: string;
     emptyDescription: string;
     emptyIcon: string;
     showPagination: boolean;
+    paginationProps: import('./types').DataListMetaInfo;
     itemProps: Record<string, any>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/components/DataList/DataList.vue.js

@@ -1,16 +1,16 @@
-import { defineComponent as b, computed as r, openBlock as t, createElementBlock as n, normalizeClass as c, Fragment as u, renderList as f, renderSlot as l, createBlock as y, resolveDynamicComponent as P, createElementVNode as i, createVNode as h, toDisplayString as k, mergeProps as C, createCommentVNode as p, unref as N } from "vue";
-import B from "../Pagination/Pagination.vue.js";
-import $ from "../Icon.vue.js";
-const D = { class: "flex flex-col w-full" }, V = {
+import { defineComponent as B, ref as D, watch as u, computed as f, openBlock as a, createElementBlock as n, normalizeClass as y, Fragment as P, renderList as h, renderSlot as i, createBlock as k, resolveDynamicComponent as v, createElementVNode as d, createVNode as I, toDisplayString as p, mergeProps as x, createCommentVNode as b, unref as L } from "vue";
+import j from "../Pagination/Pagination.vue.js";
+import E from "../Icon.vue.js";
+const S = { class: "flex flex-col w-full" }, z = {
   key: 1,
   class: "h-48 rounded-lg bg-gray-200 animate-pulse w-full"
-}, j = {
+}, F = {
   key: 1,
   class: "flex flex-col items-center justify-center p-12 text-center bg-gray-50 border border-gray-200 rounded-lg"
-}, E = { class: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 mb-4" }, L = { class: "text-lg font-semibold text-gray-900" }, O = { class: "mt-2 text-sm text-gray-500" }, S = {
+}, O = { class: "flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 mb-4" }, U = { class: "text-lg font-semibold text-gray-900" }, V = { class: "mt-2 text-sm text-gray-500" }, W = {
   key: 3,
-  class: "mt-8"
-}, W = /* @__PURE__ */ b({
+  class: "mt-8 w-full"
+}, H = /* @__PURE__ */ B({
   __name: "DataList",
   props: {
     data: { default: () => [] },
@@ -25,74 +25,96 @@ const D = { class: "flex flex-col w-full" }, V = {
     emptyDescription: { default: "We could not find any items to display here." },
     emptyIcon: { default: "lucide:inbox" },
     showPagination: { type: Boolean, default: !0 },
-    paginationPosition: { default: "between" },
-    itemsPerPageOptions: { default: () => [10, 25, 50, 100] },
-    showItemsPerPage: { type: Boolean, default: !1 }
+    paginationProps: { default: () => ({
+      alignment: "end",
+      navType: "icon",
+      showItemsPerPage: !1,
+      itemsPerPageOptions: [10, 25, 50, 100],
+      showPageInfo: !1
+    }) }
   },
-  emits: ["page-change", "update:itemsPerPage"],
-  setup(e, { emit: v }) {
-    const d = e, m = v, w = (a) => {
-      m("page-change", a);
-    }, x = (a) => {
-      m("update:itemsPerPage", a);
-    }, I = r(() => d.pageInfo?.currentPage || 1), g = r(() => d.pageInfo?.totalPages || 1);
-    return (a, T) => (t(), n("div", D, [
-      e.loading ? (t(), n("div", {
+  emits: ["change"],
+  setup(e, { emit: w }) {
+    const o = e, C = w, s = D(o.pageInfo?.itemsPerPage || o.paginationProps?.itemsPerPage || 10);
+    u(
+      () => o.pageInfo?.itemsPerPage,
+      (t) => {
+        t !== void 0 && (s.value = t);
+      }
+    ), u(
+      () => o.paginationProps?.itemsPerPage,
+      (t) => {
+        t !== void 0 && (s.value = t);
+      }
+    );
+    let r = null;
+    const g = (t, m) => {
+      r && clearTimeout(r), r = setTimeout(() => {
+        C("change", { page: t, limit: m });
+      }, 10);
+    }, N = (t) => {
+      g(t, s.value);
+    }, T = (t) => {
+      s.value = t, g(o.pageInfo?.currentPage || 1, t);
+    };
+    f(() => o.pageInfo?.currentPage || 1);
+    const $ = f(() => o.pageInfo?.totalPages || 1);
+    return (t, m) => (a(), n("div", S, [
+      e.loading ? (a(), n("div", {
         key: 0,
-        class: c(e.className)
+        class: y(e.className)
       }, [
-        (t(), n(u, null, f(8, (s) => l(a.$slots, "skeleton", {
-          key: "skeleton-" + s,
-          index: s
+        (a(), n(P, null, h(8, (l) => i(t.$slots, "skeleton", {
+          key: "skeleton-" + l,
+          index: l
         }, () => [
-          l(a.$slots, "skelton", { index: s }, () => [
-            e.skeleton || e.skelton ? (t(), y(P(e.skeleton || e.skelton), { key: 0 })) : (t(), n("div", V))
+          i(t.$slots, "skelton", { index: l }, () => [
+            e.skeleton || e.skelton ? (a(), k(v(e.skeleton || e.skelton), { key: 0 })) : (a(), n("div", z))
           ])
         ])), 64))
-      ], 2)) : !e.data || e.data.length === 0 ? (t(), n("div", j, [
-        l(a.$slots, "empty", {}, () => [
-          i("div", E, [
-            h($, {
+      ], 2)) : !e.data || e.data.length === 0 ? (a(), n("div", F, [
+        i(t.$slots, "empty", {}, () => [
+          d("div", O, [
+            I(E, {
               icon: e.emptyIcon,
               class: "h-6 w-6 text-gray-500"
             }, null, 8, ["icon"])
           ]),
-          i("h3", L, k(e.emptyTitle), 1),
-          i("p", O, k(e.emptyDescription), 1)
+          d("h3", U, p(e.emptyTitle), 1),
+          d("p", V, p(e.emptyDescription), 1)
         ])
-      ])) : (t(), n("div", {
+      ])) : (a(), n("div", {
         key: 2,
-        class: c(e.className)
+        class: y(e.className)
       }, [
-        (t(!0), n(u, null, f(e.data, (s, o) => l(a.$slots, "item", {
-          key: o,
-          item: s,
+        (a(!0), n(P, null, h(e.data, (l, c) => i(t.$slots, "item", {
+          key: c,
+          item: l,
           data: e.data,
-          index: o
+          index: c
         }, () => [
-          e.item ? (t(), y(P(e.item), C({
+          e.item ? (a(), k(v(e.item), x({
             key: 0,
-            item: s,
+            item: l,
             data: e.data,
-            index: o
-          }, { ref_for: !0 }, e.itemProps), null, 16, ["item", "data", "index"])) : p("", !0)
+            index: c
+          }, { ref_for: !0 }, e.itemProps), null, 16, ["item", "data", "index"])) : b("", !0)
         ])), 128))
       ], 2)),
-      e.showPagination && e.pageInfo && g.value > 1 ? (t(), n("div", S, [
-        h(N(B), {
-          "current-page": I.value,
-          "total-pages": g.value,
-          alignment: e.paginationPosition,
-          "show-items-per-page": e.showItemsPerPage,
-          "items-per-page": e.pageInfo?.itemsPerPage,
-          "items-per-page-options": e.itemsPerPageOptions,
-          onChange: w,
-          "onUpdate:itemsPerPage": x
-        }, null, 8, ["current-page", "total-pages", "alignment", "show-items-per-page", "items-per-page", "items-per-page-options"])
-      ])) : p("", !0)
+      e.showPagination && e.pageInfo && $.value > 1 ? (a(), n("div", W, [
+        I(L(j), x({
+          "current-page": e.pageInfo?.currentPage,
+          "total-pages": e.pageInfo?.totalPages,
+          "total-items": e.pageInfo?.totalItems,
+          navType: "icon"
+        }, e.paginationProps, {
+          onChange: N,
+          "onUpdate:itemsPerPage": T
+        }), null, 16, ["current-page", "total-pages", "total-items"])
+      ])) : b("", !0)
     ]));
   }
 });
 export {
-  W as default
+  H as default
 };

package/components/DataList/types.d.ts

@@ -1,13 +1,9 @@
-export interface DataListPageInfo {
-    currentPage: number;
-    totalPages: number;
-    totalItems?: number;
-    itemsPerPage?: number;
-}
+import { PageInfo, PaginationProps } from '../Pagination';
+export type DataListMetaInfo = Omit<PaginationProps, 'currentPage' | 'totalPages'>;
 export interface DataListProps {
     data?: any[];
     loading?: boolean;
-    pageInfo?: DataListPageInfo;
+    pageInfo?: PageInfo;
     className?: string;
     item?: any;
     skeleton?: any;
@@ -17,7 +13,5 @@ export interface DataListProps {
     emptyDescription?: string;
     emptyIcon?: string;
     showPagination?: boolean;
-    paginationPosition?: 'start' | 'center' | 'end' | 'between';
-    itemsPerPageOptions?: number[];
-    showItemsPerPage?: boolean;
+    paginationProps?: DataListMetaInfo;
 }

package/components/DataTable/DataTable.vue.d.ts

@@ -37,9 +37,6 @@ declare const __VLS_component: import('vue').DefineComponent<DataTableProps, {},
     rows: any[];
     selectable: boolean;
     showSearch: boolean;
-    showItemsPerPage: boolean;
-    itemsPerPage: number;
-    itemsPerPageOptions: number[];
     compact: boolean;
     headers: import('./types').TableHeader[];
     keyField: string;
@@ -53,6 +50,7 @@ declare const __VLS_component: import('vue').DefineComponent<DataTableProps, {},
     emptyDescription: string;
     emptyIcon: string;
     showPagination: boolean;
+    paginationProps: import('./types').DataTablePaginationProps;
     bordered: boolean;
     sortable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;