cognova 0.2.19 → 0.2.21

package/.output/server/chunks/build/usage-BHdQZbfI.mjs

@@ -418,58 +418,48 @@ const _sfc_main$2 = {
     const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
     const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
     const lastIcon = computed(() => props.lastIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight));
-    const ui = computed(() => {
-      var _a;
-      return tv({ extend: tv(theme), ...((_a = appConfig.ui) == null ? void 0 : _a.pagination) || {} })();
-    });
+    const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pagination || {} })());
     return (_ctx, _push, _parent, _attrs) => {
-      var _a;
       _push(ssrRenderComponent(unref(PaginationRoot), mergeProps(unref(rootProps), {
         "data-slot": "root",
-        class: ui.value.root({ class: [(_a = props.ui) == null ? void 0 : _a.root, props.class] })
+        class: ui.value.root({ class: [props.ui?.root, props.class] })
       }, _attrs), {
         default: withCtx(({ page, pageCount }, _push2, _parent2, _scopeId) => {
-          var _a2, _b;
           if (_push2) {
             _push2(ssrRenderComponent(unref(PaginationList), {
               "data-slot": "list",
-              class: ui.value.list({ class: (_a2 = props.ui) == null ? void 0 : _a2.list })
+              class: ui.value.list({ class: props.ui?.list })
             }, {
               default: withCtx(({ items }, _push3, _parent3, _scopeId2) => {
-                var _a3, _b2, _c, _d, _e, _f, _g, _h;
                 if (_push3) {
                   if (__props.showControls || !!slots.first) {
                     _push3(ssrRenderComponent(unref(PaginationFirst), {
                       "as-child": "",
                       "data-slot": "first",
-                      class: ui.value.first({ class: (_a3 = props.ui) == null ? void 0 : _a3.first })
+                      class: ui.value.first({ class: props.ui?.first })
                     }, {
                       default: withCtx((_, _push4, _parent4, _scopeId3) => {
                         if (_push4) {
                           ssrRenderSlot(_ctx.$slots, "first", {}, () => {
-                            var _a4;
                             _push4(ssrRenderComponent(_sfc_main$8$1, {
                               color: __props.color,
                               variant: __props.variant,
                               size: __props.size,
                               icon: firstIcon.value,
-                              to: (_a4 = __props.to) == null ? void 0 : _a4.call(__props, 1)
+                              to: __props.to?.(1)
                             }, null, _parent4, _scopeId3));
                           }, _push4, _parent4, _scopeId3);
                         } else {
                           return [
-                            renderSlot(_ctx.$slots, "first", {}, () => {
-                              var _a4;
-                              return [
-                                createVNode(_sfc_main$8$1, {
-                                  color: __props.color,
-                                  variant: __props.variant,
-                                  size: __props.size,
-                                  icon: firstIcon.value,
-                                  to: (_a4 = __props.to) == null ? void 0 : _a4.call(__props, 1)
-                                }, null, 8, ["color", "variant", "size", "icon", "to"])
-                              ];
-                            })
+                            renderSlot(_ctx.$slots, "first", {}, () => [
+                              createVNode(_sfc_main$8$1, {
+                                color: __props.color,
+                                variant: __props.variant,
+                                size: __props.size,
+                                icon: firstIcon.value,
+                                to: __props.to?.(1)
+                              }, null, 8, ["color", "variant", "size", "icon", "to"])
+                            ])
                           ];
                         }
                       }),
@@ -482,34 +472,30 @@ const _sfc_main$2 = {
                     _push3(ssrRenderComponent(unref(PaginationPrev), {
                       "as-child": "",
                       "data-slot": "prev",
-                      class: ui.value.prev({ class: (_b2 = props.ui) == null ? void 0 : _b2.prev })
+                      class: ui.value.prev({ class: props.ui?.prev })
                     }, {
                       default: withCtx((_, _push4, _parent4, _scopeId3) => {
                         if (_push4) {
                           ssrRenderSlot(_ctx.$slots, "prev", {}, () => {
-                            var _a4;
                             _push4(ssrRenderComponent(_sfc_main$8$1, {
                               color: __props.color,
                               variant: __props.variant,
                               size: __props.size,
                               icon: prevIcon.value,
-                              to: page > 1 ? (_a4 = __props.to) == null ? void 0 : _a4.call(__props, page - 1) : void 0
+                              to: page > 1 ? __props.to?.(page - 1) : void 0
                             }, null, _parent4, _scopeId3));
                           }, _push4, _parent4, _scopeId3);
                         } else {
                           return [
-                            renderSlot(_ctx.$slots, "prev", {}, () => {
-                              var _a4;
-                              return [
-                                createVNode(_sfc_main$8$1, {
-                                  color: __props.color,
-                                  variant: __props.variant,
-                                  size: __props.size,
-                                  icon: prevIcon.value,
-                                  to: page > 1 ? (_a4 = __props.to) == null ? void 0 : _a4.call(__props, page - 1) : void 0
-                                }, null, 8, ["color", "variant", "size", "icon", "to"])
-                              ];
-                            })
+                            renderSlot(_ctx.$slots, "prev", {}, () => [
+                              createVNode(_sfc_main$8$1, {
+                                color: __props.color,
+                                variant: __props.variant,
+                                size: __props.size,
+                                icon: prevIcon.value,
+                                to: page > 1 ? __props.to?.(page - 1) : void 0
+                              }, null, 8, ["color", "variant", "size", "icon", "to"])
+                            ])
                           ];
                         }
                       }),
@@ -520,45 +506,40 @@ const _sfc_main$2 = {
                   }
                   _push3(`<!--[-->`);
                   ssrRenderList(items, (item, index) => {
-                    var _a4, _b3;
                     _push3(`<!--[-->`);
                     if (item.type === "page") {
                       _push3(ssrRenderComponent(unref(PaginationListItem), {
                         "as-child": "",
                         value: item.value,
                         "data-slot": "item",
-                        class: ui.value.item({ class: (_a4 = props.ui) == null ? void 0 : _a4.item })
+                        class: ui.value.item({ class: props.ui?.item })
                       }, {
                         default: withCtx((_, _push4, _parent4, _scopeId3) => {
                           if (_push4) {
                             ssrRenderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, { item, index, page, pageCount }), () => {
-                              var _a5;
                               _push4(ssrRenderComponent(_sfc_main$8$1, {
                                 color: page === item.value ? __props.activeColor : __props.color,
                                 variant: page === item.value ? __props.activeVariant : __props.variant,
                                 size: __props.size,
                                 label: String(item.value),
                                 ui: { label: ui.value.label() },
-                                to: (_a5 = __props.to) == null ? void 0 : _a5.call(__props, item.value),
+                                to: __props.to?.(item.value),
                                 square: ""
                               }, null, _parent4, _scopeId3));
                             }, _push4, _parent4, _scopeId3);
                           } else {
                             return [
-                              renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, { item, index, page, pageCount }), () => {
-                                var _a5;
-                                return [
-                                  createVNode(_sfc_main$8$1, {
-                                    color: page === item.value ? __props.activeColor : __props.color,
-                                    variant: page === item.value ? __props.activeVariant : __props.variant,
-                                    size: __props.size,
-                                    label: String(item.value),
-                                    ui: { label: ui.value.label() },
-                                    to: (_a5 = __props.to) == null ? void 0 : _a5.call(__props, item.value),
-                                    square: ""
-                                  }, null, 8, ["color", "variant", "size", "label", "ui", "to"])
-                                ];
-                              })
+                              renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, { item, index, page, pageCount }), () => [
+                                createVNode(_sfc_main$8$1, {
+                                  color: page === item.value ? __props.activeColor : __props.color,
+                                  variant: page === item.value ? __props.activeVariant : __props.variant,
+                                  size: __props.size,
+                                  label: String(item.value),
+                                  ui: { label: ui.value.label() },
+                                  to: __props.to?.(item.value),
+                                  square: ""
+                                }, null, 8, ["color", "variant", "size", "label", "ui", "to"])
+                              ])
                             ];
                           }
                         }),
@@ -568,7 +549,7 @@ const _sfc_main$2 = {
                       _push3(ssrRenderComponent(unref(PaginationEllipsis), {
                         "as-child": "",
                         "data-slot": "ellipsis",
-                        class: ui.value.ellipsis({ class: (_b3 = props.ui) == null ? void 0 : _b3.ellipsis })
+                        class: ui.value.ellipsis({ class: props.ui?.ellipsis })
                       }, {
                         default: withCtx((_, _push4, _parent4, _scopeId3) => {
                           if (_push4) {
@@ -605,34 +586,30 @@ const _sfc_main$2 = {
                     _push3(ssrRenderComponent(unref(PaginationNext), {
                       "as-child": "",
                       "data-slot": "next",
-                      class: ui.value.next({ class: (_c = props.ui) == null ? void 0 : _c.next })
+                      class: ui.value.next({ class: props.ui?.next })
                     }, {
                       default: withCtx((_, _push4, _parent4, _scopeId3) => {
                         if (_push4) {
                           ssrRenderSlot(_ctx.$slots, "next", {}, () => {
-                            var _a4;
                             _push4(ssrRenderComponent(_sfc_main$8$1, {
                               color: __props.color,
                               variant: __props.variant,
                               size: __props.size,
                               icon: nextIcon.value,
-                              to: page < pageCount ? (_a4 = __props.to) == null ? void 0 : _a4.call(__props, page + 1) : void 0
+                              to: page < pageCount ? __props.to?.(page + 1) : void 0
                             }, null, _parent4, _scopeId3));
                           }, _push4, _parent4, _scopeId3);
                         } else {
                           return [
-                            renderSlot(_ctx.$slots, "next", {}, () => {
-                              var _a4;
-                              return [
-                                createVNode(_sfc_main$8$1, {
-                                  color: __props.color,
-                                  variant: __props.variant,
-                                  size: __props.size,
-                                  icon: nextIcon.value,
-                                  to: page < pageCount ? (_a4 = __props.to) == null ? void 0 : _a4.call(__props, page + 1) : void 0
-                                }, null, 8, ["color", "variant", "size", "icon", "to"])
-                              ];
-                            })
+                            renderSlot(_ctx.$slots, "next", {}, () => [
+                              createVNode(_sfc_main$8$1, {
+                                color: __props.color,
+                                variant: __props.variant,
+                                size: __props.size,
+                                icon: nextIcon.value,
+                                to: page < pageCount ? __props.to?.(page + 1) : void 0
+                              }, null, 8, ["color", "variant", "size", "icon", "to"])
+                            ])
                           ];
                         }
                       }),
@@ -645,34 +622,30 @@ const _sfc_main$2 = {
                     _push3(ssrRenderComponent(unref(PaginationLast), {
                       "as-child": "",
                       "data-slot": "last",
-                      class: ui.value.last({ class: (_d = props.ui) == null ? void 0 : _d.last })
+                      class: ui.value.last({ class: props.ui?.last })
                     }, {
                       default: withCtx((_, _push4, _parent4, _scopeId3) => {
                         if (_push4) {
                           ssrRenderSlot(_ctx.$slots, "last", {}, () => {
-                            var _a4;
                             _push4(ssrRenderComponent(_sfc_main$8$1, {
                               color: __props.color,
                               variant: __props.variant,
                               size: __props.size,
                               icon: lastIcon.value,
-                              to: (_a4 = __props.to) == null ? void 0 : _a4.call(__props, pageCount)
+                              to: __props.to?.(pageCount)
                             }, null, _parent4, _scopeId3));
                           }, _push4, _parent4, _scopeId3);
                         } else {
                           return [
-                            renderSlot(_ctx.$slots, "last", {}, () => {
-                              var _a4;
-                              return [
-                                createVNode(_sfc_main$8$1, {
-                                  color: __props.color,
-                                  variant: __props.variant,
-                                  size: __props.size,
-                                  icon: lastIcon.value,
-                                  to: (_a4 = __props.to) == null ? void 0 : _a4.call(__props, pageCount)
-                                }, null, 8, ["color", "variant", "size", "icon", "to"])
-                              ];
-                            })
+                            renderSlot(_ctx.$slots, "last", {}, () => [
+                              createVNode(_sfc_main$8$1, {
+                                color: __props.color,
+                                variant: __props.variant,
+                                size: __props.size,
+                                icon: lastIcon.value,
+                                to: __props.to?.(pageCount)
+                              }, null, 8, ["color", "variant", "size", "icon", "to"])
+                            ])
                           ];
                         }
                       }),
@@ -687,21 +660,18 @@ const _sfc_main$2 = {
                       key: 0,
                       "as-child": "",
                       "data-slot": "first",
-                      class: ui.value.first({ class: (_e = props.ui) == null ? void 0 : _e.first })
+                      class: ui.value.first({ class: props.ui?.first })
                     }, {
                       default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "first", {}, () => {
-                          var _a4;
-                          return [
-                            createVNode(_sfc_main$8$1, {
-                              color: __props.color,
-                              variant: __props.variant,
-                              size: __props.size,
-                              icon: firstIcon.value,
-                              to: (_a4 = __props.to) == null ? void 0 : _a4.call(__props, 1)
-                            }, null, 8, ["color", "variant", "size", "icon", "to"])
-                          ];
-                        })
+                        renderSlot(_ctx.$slots, "first", {}, () => [
+                          createVNode(_sfc_main$8$1, {
+                            color: __props.color,
+                            variant: __props.variant,
+                            size: __props.size,
+                            icon: firstIcon.value,
+                            to: __props.to?.(1)
+                          }, null, 8, ["color", "variant", "size", "icon", "to"])
+                        ])
                       ]),
                       _: 3
                     }, 8, ["class"])) : createCommentVNode("", true),
@@ -709,56 +679,49 @@ const _sfc_main$2 = {
                       key: 1,
                       "as-child": "",
                       "data-slot": "prev",
-                      class: ui.value.prev({ class: (_f = props.ui) == null ? void 0 : _f.prev })
+                      class: ui.value.prev({ class: props.ui?.prev })
                     }, {
                       default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "prev", {}, () => {
-                          var _a4;
-                          return [
-                            createVNode(_sfc_main$8$1, {
-                              color: __props.color,
-                              variant: __props.variant,
-                              size: __props.size,
-                              icon: prevIcon.value,
-                              to: page > 1 ? (_a4 = __props.to) == null ? void 0 : _a4.call(__props, page - 1) : void 0
-                            }, null, 8, ["color", "variant", "size", "icon", "to"])
-                          ];
-                        })
+                        renderSlot(_ctx.$slots, "prev", {}, () => [
+                          createVNode(_sfc_main$8$1, {
+                            color: __props.color,
+                            variant: __props.variant,
+                            size: __props.size,
+                            icon: prevIcon.value,
+                            to: page > 1 ? __props.to?.(page - 1) : void 0
+                          }, null, 8, ["color", "variant", "size", "icon", "to"])
+                        ])
                       ]),
                       _: 2
                     }, 1032, ["class"])) : createCommentVNode("", true),
                     (openBlock(true), createBlock(Fragment, null, renderList(items, (item, index) => {
-                      var _a4, _b3;
                       return openBlock(), createBlock(Fragment, { key: index }, [
                         item.type === "page" ? (openBlock(), createBlock(unref(PaginationListItem), {
                           key: 0,
                           "as-child": "",
                           value: item.value,
                           "data-slot": "item",
-                          class: ui.value.item({ class: (_a4 = props.ui) == null ? void 0 : _a4.item })
+                          class: ui.value.item({ class: props.ui?.item })
                         }, {
                           default: withCtx(() => [
-                            renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, { item, index, page, pageCount }), () => {
-                              var _a5;
-                              return [
-                                createVNode(_sfc_main$8$1, {
-                                  color: page === item.value ? __props.activeColor : __props.color,
-                                  variant: page === item.value ? __props.activeVariant : __props.variant,
-                                  size: __props.size,
-                                  label: String(item.value),
-                                  ui: { label: ui.value.label() },
-                                  to: (_a5 = __props.to) == null ? void 0 : _a5.call(__props, item.value),
-                                  square: ""
-                                }, null, 8, ["color", "variant", "size", "label", "ui", "to"])
-                              ];
-                            })
+                            renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, { item, index, page, pageCount }), () => [
+                              createVNode(_sfc_main$8$1, {
+                                color: page === item.value ? __props.activeColor : __props.color,
+                                variant: page === item.value ? __props.activeVariant : __props.variant,
+                                size: __props.size,
+                                label: String(item.value),
+                                ui: { label: ui.value.label() },
+                                to: __props.to?.(item.value),
+                                square: ""
+                              }, null, 8, ["color", "variant", "size", "label", "ui", "to"])
+                            ])
                           ]),
                           _: 2
                         }, 1032, ["value", "class"])) : (openBlock(), createBlock(unref(PaginationEllipsis), {
                           key: 1,
                           "as-child": "",
                           "data-slot": "ellipsis",
-                          class: ui.value.ellipsis({ class: (_b3 = props.ui) == null ? void 0 : _b3.ellipsis })
+                          class: ui.value.ellipsis({ class: props.ui?.ellipsis })
                         }, {
                           default: withCtx(() => [
                             renderSlot(_ctx.$slots, "ellipsis", { ui: ui.value }, () => [
@@ -779,21 +742,18 @@ const _sfc_main$2 = {
                       key: 2,
                       "as-child": "",
                       "data-slot": "next",
-                      class: ui.value.next({ class: (_g = props.ui) == null ? void 0 : _g.next })
+                      class: ui.value.next({ class: props.ui?.next })
                     }, {
                       default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "next", {}, () => {
-                          var _a4;
-                          return [
-                            createVNode(_sfc_main$8$1, {
-                              color: __props.color,
-                              variant: __props.variant,
-                              size: __props.size,
-                              icon: nextIcon.value,
-                              to: page < pageCount ? (_a4 = __props.to) == null ? void 0 : _a4.call(__props, page + 1) : void 0
-                            }, null, 8, ["color", "variant", "size", "icon", "to"])
-                          ];
-                        })
+                        renderSlot(_ctx.$slots, "next", {}, () => [
+                          createVNode(_sfc_main$8$1, {
+                            color: __props.color,
+                            variant: __props.variant,
+                            size: __props.size,
+                            icon: nextIcon.value,
+                            to: page < pageCount ? __props.to?.(page + 1) : void 0
+                          }, null, 8, ["color", "variant", "size", "icon", "to"])
+                        ])
                       ]),
                       _: 2
                     }, 1032, ["class"])) : createCommentVNode("", true),
@@ -801,21 +761,18 @@ const _sfc_main$2 = {
                       key: 3,
                       "as-child": "",
                       "data-slot": "last",
-                      class: ui.value.last({ class: (_h = props.ui) == null ? void 0 : _h.last })
+                      class: ui.value.last({ class: props.ui?.last })
                     }, {
                       default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "last", {}, () => {
-                          var _a4;
-                          return [
-                            createVNode(_sfc_main$8$1, {
-                              color: __props.color,
-                              variant: __props.variant,
-                              size: __props.size,
-                              icon: lastIcon.value,
-                              to: (_a4 = __props.to) == null ? void 0 : _a4.call(__props, pageCount)
-                            }, null, 8, ["color", "variant", "size", "icon", "to"])
-                          ];
-                        })
+                        renderSlot(_ctx.$slots, "last", {}, () => [
+                          createVNode(_sfc_main$8$1, {
+                            color: __props.color,
+                            variant: __props.variant,
+                            size: __props.size,
+                            icon: lastIcon.value,
+                            to: __props.to?.(pageCount)
+                          }, null, 8, ["color", "variant", "size", "icon", "to"])
+                        ])
                       ]),
                       _: 2
                     }, 1032, ["class"])) : createCommentVNode("", true)
@@ -828,149 +785,130 @@ const _sfc_main$2 = {
             return [
               createVNode(unref(PaginationList), {
                 "data-slot": "list",
-                class: ui.value.list({ class: (_b = props.ui) == null ? void 0 : _b.list })
+                class: ui.value.list({ class: props.ui?.list })
               }, {
-                default: withCtx(({ items }) => {
-                  var _a3, _b2, _c, _d;
-                  return [
-                    __props.showControls || !!slots.first ? (openBlock(), createBlock(unref(PaginationFirst), {
-                      key: 0,
-                      "as-child": "",
-                      "data-slot": "first",
-                      class: ui.value.first({ class: (_a3 = props.ui) == null ? void 0 : _a3.first })
-                    }, {
-                      default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "first", {}, () => {
-                          var _a4;
-                          return [
-                            createVNode(_sfc_main$8$1, {
-                              color: __props.color,
-                              variant: __props.variant,
-                              size: __props.size,
-                              icon: firstIcon.value,
-                              to: (_a4 = __props.to) == null ? void 0 : _a4.call(__props, 1)
-                            }, null, 8, ["color", "variant", "size", "icon", "to"])
-                          ];
-                        })
-                      ]),
-                      _: 3
-                    }, 8, ["class"])) : createCommentVNode("", true),
-                    __props.showControls || !!slots.prev ? (openBlock(), createBlock(unref(PaginationPrev), {
-                      key: 1,
-                      "as-child": "",
-                      "data-slot": "prev",
-                      class: ui.value.prev({ class: (_b2 = props.ui) == null ? void 0 : _b2.prev })
-                    }, {
-                      default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "prev", {}, () => {
-                          var _a4;
-                          return [
-                            createVNode(_sfc_main$8$1, {
-                              color: __props.color,
-                              variant: __props.variant,
-                              size: __props.size,
-                              icon: prevIcon.value,
-                              to: page > 1 ? (_a4 = __props.to) == null ? void 0 : _a4.call(__props, page - 1) : void 0
-                            }, null, 8, ["color", "variant", "size", "icon", "to"])
-                          ];
-                        })
-                      ]),
-                      _: 2
-                    }, 1032, ["class"])) : createCommentVNode("", true),
-                    (openBlock(true), createBlock(Fragment, null, renderList(items, (item, index) => {
-                      var _a4, _b3;
-                      return openBlock(), createBlock(Fragment, { key: index }, [
-                        item.type === "page" ? (openBlock(), createBlock(unref(PaginationListItem), {
-                          key: 0,
-                          "as-child": "",
-                          value: item.value,
-                          "data-slot": "item",
-                          class: ui.value.item({ class: (_a4 = props.ui) == null ? void 0 : _a4.item })
-                        }, {
-                          default: withCtx(() => [
-                            renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, { item, index, page, pageCount }), () => {
-                              var _a5;
-                              return [
-                                createVNode(_sfc_main$8$1, {
-                                  color: page === item.value ? __props.activeColor : __props.color,
-                                  variant: page === item.value ? __props.activeVariant : __props.variant,
-                                  size: __props.size,
-                                  label: String(item.value),
-                                  ui: { label: ui.value.label() },
-                                  to: (_a5 = __props.to) == null ? void 0 : _a5.call(__props, item.value),
-                                  square: ""
-                                }, null, 8, ["color", "variant", "size", "label", "ui", "to"])
-                              ];
-                            })
-                          ]),
-                          _: 2
-                        }, 1032, ["value", "class"])) : (openBlock(), createBlock(unref(PaginationEllipsis), {
-                          key: 1,
-                          "as-child": "",
-                          "data-slot": "ellipsis",
-                          class: ui.value.ellipsis({ class: (_b3 = props.ui) == null ? void 0 : _b3.ellipsis })
-                        }, {
-                          default: withCtx(() => [
-                            renderSlot(_ctx.$slots, "ellipsis", { ui: ui.value }, () => [
-                              createVNode(_sfc_main$8$1, {
-                                as: "div",
-                                color: __props.color,
-                                variant: __props.variant,
-                                size: __props.size,
-                                icon: __props.ellipsisIcon || unref(appConfig).ui.icons.ellipsis
-                              }, null, 8, ["color", "variant", "size", "icon"])
-                            ])
-                          ]),
-                          _: 3
-                        }, 8, ["class"]))
-                      ], 64);
-                    }), 128)),
-                    __props.showControls || !!slots.next ? (openBlock(), createBlock(unref(PaginationNext), {
-                      key: 2,
-                      "as-child": "",
-                      "data-slot": "next",
-                      class: ui.value.next({ class: (_c = props.ui) == null ? void 0 : _c.next })
-                    }, {
-                      default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "next", {}, () => {
-                          var _a4;
-                          return [
+                default: withCtx(({ items }) => [
+                  __props.showControls || !!slots.first ? (openBlock(), createBlock(unref(PaginationFirst), {
+                    key: 0,
+                    "as-child": "",
+                    "data-slot": "first",
+                    class: ui.value.first({ class: props.ui?.first })
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "first", {}, () => [
+                        createVNode(_sfc_main$8$1, {
+                          color: __props.color,
+                          variant: __props.variant,
+                          size: __props.size,
+                          icon: firstIcon.value,
+                          to: __props.to?.(1)
+                        }, null, 8, ["color", "variant", "size", "icon", "to"])
+                      ])
+                    ]),
+                    _: 3
+                  }, 8, ["class"])) : createCommentVNode("", true),
+                  __props.showControls || !!slots.prev ? (openBlock(), createBlock(unref(PaginationPrev), {
+                    key: 1,
+                    "as-child": "",
+                    "data-slot": "prev",
+                    class: ui.value.prev({ class: props.ui?.prev })
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "prev", {}, () => [
+                        createVNode(_sfc_main$8$1, {
+                          color: __props.color,
+                          variant: __props.variant,
+                          size: __props.size,
+                          icon: prevIcon.value,
+                          to: page > 1 ? __props.to?.(page - 1) : void 0
+                        }, null, 8, ["color", "variant", "size", "icon", "to"])
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["class"])) : createCommentVNode("", true),
+                  (openBlock(true), createBlock(Fragment, null, renderList(items, (item, index) => {
+                    return openBlock(), createBlock(Fragment, { key: index }, [
+                      item.type === "page" ? (openBlock(), createBlock(unref(PaginationListItem), {
+                        key: 0,
+                        "as-child": "",
+                        value: item.value,
+                        "data-slot": "item",
+                        class: ui.value.item({ class: props.ui?.item })
+                      }, {
+                        default: withCtx(() => [
+                          renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, { item, index, page, pageCount }), () => [
                             createVNode(_sfc_main$8$1, {
-                              color: __props.color,
-                              variant: __props.variant,
+                              color: page === item.value ? __props.activeColor : __props.color,
+                              variant: page === item.value ? __props.activeVariant : __props.variant,
                               size: __props.size,
-                              icon: nextIcon.value,
-                              to: page < pageCount ? (_a4 = __props.to) == null ? void 0 : _a4.call(__props, page + 1) : void 0
-                            }, null, 8, ["color", "variant", "size", "icon", "to"])
-                          ];
-                        })
-                      ]),
-                      _: 2
-                    }, 1032, ["class"])) : createCommentVNode("", true),
-                    __props.showControls || !!slots.last ? (openBlock(), createBlock(unref(PaginationLast), {
-                      key: 3,
-                      "as-child": "",
-                      "data-slot": "last",
-                      class: ui.value.last({ class: (_d = props.ui) == null ? void 0 : _d.last })
-                    }, {
-                      default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "last", {}, () => {
-                          var _a4;
-                          return [
+                              label: String(item.value),
+                              ui: { label: ui.value.label() },
+                              to: __props.to?.(item.value),
+                              square: ""
+                            }, null, 8, ["color", "variant", "size", "label", "ui", "to"])
+                          ])
+                        ]),
+                        _: 2
+                      }, 1032, ["value", "class"])) : (openBlock(), createBlock(unref(PaginationEllipsis), {
+                        key: 1,
+                        "as-child": "",
+                        "data-slot": "ellipsis",
+                        class: ui.value.ellipsis({ class: props.ui?.ellipsis })
+                      }, {
+                        default: withCtx(() => [
+                          renderSlot(_ctx.$slots, "ellipsis", { ui: ui.value }, () => [
                             createVNode(_sfc_main$8$1, {
+                              as: "div",
                               color: __props.color,
                               variant: __props.variant,
                               size: __props.size,
-                              icon: lastIcon.value,
-                              to: (_a4 = __props.to) == null ? void 0 : _a4.call(__props, pageCount)
-                            }, null, 8, ["color", "variant", "size", "icon", "to"])
-                          ];
-                        })
-                      ]),
-                      _: 2
-                    }, 1032, ["class"])) : createCommentVNode("", true)
-                  ];
-                }),
+                              icon: __props.ellipsisIcon || unref(appConfig).ui.icons.ellipsis
+                            }, null, 8, ["color", "variant", "size", "icon"])
+                          ])
+                        ]),
+                        _: 3
+                      }, 8, ["class"]))
+                    ], 64);
+                  }), 128)),
+                  __props.showControls || !!slots.next ? (openBlock(), createBlock(unref(PaginationNext), {
+                    key: 2,
+                    "as-child": "",
+                    "data-slot": "next",
+                    class: ui.value.next({ class: props.ui?.next })
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "next", {}, () => [
+                        createVNode(_sfc_main$8$1, {
+                          color: __props.color,
+                          variant: __props.variant,
+                          size: __props.size,
+                          icon: nextIcon.value,
+                          to: page < pageCount ? __props.to?.(page + 1) : void 0
+                        }, null, 8, ["color", "variant", "size", "icon", "to"])
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["class"])) : createCommentVNode("", true),
+                  __props.showControls || !!slots.last ? (openBlock(), createBlock(unref(PaginationLast), {
+                    key: 3,
+                    "as-child": "",
+                    "data-slot": "last",
+                    class: ui.value.last({ class: props.ui?.last })
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "last", {}, () => [
+                        createVNode(_sfc_main$8$1, {
+                          color: __props.color,
+                          variant: __props.variant,
+                          size: __props.size,
+                          icon: lastIcon.value,
+                          to: __props.to?.(pageCount)
+                        }, null, 8, ["color", "variant", "size", "icon", "to"])
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["class"])) : createCommentVNode("", true)
+                ]),
                 _: 2
               }, 1032, ["class"])
             ];