@kobalte/core
Version:
Unstyled components and primitives for building accessible web apps and design systems with SolidJS.
293 lines (288 loc) • 9.35 kB
JavaScript
import { ButtonRoot } from './7OVKXYPU.js';
import { createControllableSignal } from './BLN63FDC.js';
import { Polymorphic } from './6Y7B2NEO.js';
import { __export } from './5ZKAE4VZ.js';
import { insert, createComponent, mergeProps, memo, template } from 'solid-js/web';
import { composeEventHandlers, mergeDefaultProps } from '@kobalte/utils';
import { createContext, useContext, splitProps, createMemo, Show, For, createUniqueId } from 'solid-js';
// src/pagination/index.tsx
var pagination_exports = {};
__export(pagination_exports, {
Ellipsis: () => PaginationEllipsis,
Item: () => PaginationItem,
Items: () => PaginationItems,
Next: () => PaginationNext,
Pagination: () => Pagination,
Previous: () => PaginationPrevious,
Root: () => PaginationRoot,
usePaginationContext: () => usePaginationContext
});
var _tmpl$ = /* @__PURE__ */ template(`<li>`);
function PaginationEllipsis(props) {
return (() => {
const _el$ = _tmpl$();
insert(_el$, createComponent(Polymorphic, mergeProps({
as: "div"
}, props)));
return _el$;
})();
}
var PaginationContext = createContext();
function usePaginationContext() {
const context = useContext(PaginationContext);
if (context === void 0) {
throw new Error("[kobalte]: `usePaginationContext` must be used within a `Pagination` component");
}
return context;
}
// src/pagination/pagination-item.tsx
var _tmpl$2 = /* @__PURE__ */ template(`<li>`);
function PaginationItem(props) {
const context = usePaginationContext();
const [local, others] = splitProps(props, ["page", "onClick"]);
const isCurrent = () => {
return context.page() === local.page;
};
const onClick = () => {
context.setPage(local.page);
};
return (() => {
const _el$ = _tmpl$2();
insert(_el$, createComponent(ButtonRoot, mergeProps({
get ["aria-current"]() {
return isCurrent() ? "page" : void 0;
},
get ["data-current"]() {
return isCurrent() ? "" : void 0;
},
get onClick() {
return composeEventHandlers([local.onClick, onClick]);
}
}, others)));
return _el$;
})();
}
function PaginationItems(props) {
const context = usePaginationContext();
const items = createMemo(() => {
const {
count,
siblingCount,
page,
fixedItems,
showFirst,
showLast
} = context;
const renderItemsDirectly = count() < 2 * siblingCount() + (fixedItems() ? 6 : 4);
if (renderItemsDirectly)
return {
renderItemsDirectly
};
const _showFirst = showFirst() && page() - 1 > siblingCount();
const _showLast = showLast() && count() - page() > siblingCount();
let showFirstEllipsis = page() - (showFirst() ? 2 : 1) > siblingCount();
let showLastEllipsis = count() - page() - (showLast() ? 1 : 0) > siblingCount();
let previousSiblingCount = Math.min(page() - 1, siblingCount());
let nextSiblingCount = Math.min(count() - page(), siblingCount());
if (fixedItems() !== false) {
const previousSiblingCountRef = previousSiblingCount;
const nextSiblingCountRef = nextSiblingCount;
previousSiblingCount += Math.max(siblingCount() - nextSiblingCountRef, 0);
nextSiblingCount += Math.max(siblingCount() - previousSiblingCountRef, 0);
if (!_showFirst)
nextSiblingCount++;
if (!_showLast)
previousSiblingCount++;
if (fixedItems() === true) {
if (!showFirstEllipsis)
nextSiblingCount++;
if (!showLastEllipsis)
previousSiblingCount++;
}
if (page() - previousSiblingCount - (showFirst() ? 2 : 1) === 1) {
showFirstEllipsis = false;
previousSiblingCount++;
}
if (count() - page() - nextSiblingCount - (showLast() ? 1 : 0) === 1) {
showLastEllipsis = false;
nextSiblingCount++;
}
}
return {
showFirst: _showFirst,
showLast: _showLast,
showFirstEllipsis,
showLastEllipsis,
previousSiblingCount,
nextSiblingCount,
renderItemsDirectly
};
});
return createComponent(Show, {
get when() {
return items().renderItemsDirectly;
},
get fallback() {
return [createComponent(Show, {
get when() {
return items().showFirst;
},
get children() {
return context.renderItem(1);
}
}), createComponent(Show, {
get when() {
return items().showFirstEllipsis;
},
get children() {
return context.renderEllipsis();
}
}), createComponent(For, {
get each() {
return [...Array(items().previousSiblingCount).keys()].reverse();
},
children: (offset) => memo(() => context.renderItem(context.page() - (offset + 1)))
}), memo(() => context.renderItem(context.page())), createComponent(For, {
get each() {
return [...Array(items().nextSiblingCount).keys()];
},
children: (offset) => memo(() => context.renderItem(context.page() + (offset + 1)))
}), createComponent(Show, {
get when() {
return items().showLastEllipsis;
},
get children() {
return context.renderEllipsis();
}
}), createComponent(Show, {
get when() {
return items().showLast;
},
get children() {
return context.renderItem(context.count());
}
})];
},
get children() {
return createComponent(For, {
get each() {
return [...Array(context.count()).keys()];
},
children: (page) => memo(() => context.renderItem(page + 1))
});
}
});
}
var _tmpl$3 = /* @__PURE__ */ template(`<li>`);
function PaginationNext(props) {
const context = usePaginationContext();
const [local, others] = splitProps(props, ["onClick"]);
const onClick = () => {
context.setPage(context.page() + 1);
};
const isDisabled = () => context.page() === context.count();
return (() => {
const _el$ = _tmpl$3();
insert(_el$, createComponent(ButtonRoot, mergeProps({
get tabIndex() {
return isDisabled() || context.page() === context.count() ? -1 : void 0;
},
get disabled() {
return isDisabled();
},
get ["aria-disabled"]() {
return isDisabled() || void 0;
},
get ["data-disabled"]() {
return isDisabled() ? "" : void 0;
},
get onClick() {
return composeEventHandlers([local.onClick, onClick]);
}
}, others)));
return _el$;
})();
}
var _tmpl$4 = /* @__PURE__ */ template(`<li>`);
function PaginationPrevious(props) {
const context = usePaginationContext();
const [local, others] = splitProps(props, ["onClick"]);
const onClick = () => {
context.setPage(context.page() - 1);
};
const isDisabled = () => context.page() === 1;
return (() => {
const _el$ = _tmpl$4();
insert(_el$, createComponent(ButtonRoot, mergeProps({
get tabIndex() {
return isDisabled() || context.page() === 1 ? -1 : void 0;
},
get disabled() {
return isDisabled();
},
get ["aria-disabled"]() {
return isDisabled() || void 0;
},
get ["data-disabled"]() {
return isDisabled() ? "" : void 0;
},
get onClick() {
return composeEventHandlers([local.onClick, onClick]);
}
}, others)));
return _el$;
})();
}
var _tmpl$5 = /* @__PURE__ */ template(`<ul>`);
function PaginationRoot(props) {
const defaultId = `pagination-${createUniqueId()}`;
const mergedProps = mergeDefaultProps({
id: defaultId
}, props);
const [local, others] = splitProps(mergedProps, ["page", "defaultPage", "onPageChange", "count", "siblingCount", "showFirst", "showLast", "fixedItems", "itemComponent", "ellipsisComponent", "disabled", "children"]);
const state = createControllableSignal({
defaultValue: () => local.defaultPage ?? 1,
onChange: local.onPageChange,
value: () => local.page
});
const context = {
count: () => local.count,
siblingCount: () => local.siblingCount ?? 1,
showFirst: () => local.showFirst ?? true,
showLast: () => local.showLast ?? true,
fixedItems: () => local.fixedItems ?? false,
isDisabled: () => local.disabled ?? false,
renderItem: (page) => local.itemComponent({
page
}),
renderEllipsis: local.ellipsisComponent,
page: () => Math.min(state[0]() ?? 1, local.count),
setPage: state[1]
};
return createComponent(PaginationContext.Provider, {
value: context,
get children() {
return createComponent(Polymorphic, mergeProps({
as: "nav",
get ["data-disabled"]() {
return local.disabled ? "" : void 0;
}
}, others, {
get children() {
const _el$ = _tmpl$5();
insert(_el$, () => local.children);
return _el$;
}
}));
}
});
}
// src/pagination/index.tsx
var Pagination = Object.assign(PaginationRoot, {
Ellipsis: PaginationEllipsis,
Item: PaginationItem,
Items: PaginationItems,
Next: PaginationNext,
Previous: PaginationPrevious
});
export { Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNext, PaginationPrevious, PaginationRoot, pagination_exports, usePaginationContext };