Skip to content

Commit

Permalink
feat(Pagination): config redesign and implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Dec 8, 2023
1 parent dd967f0 commit cfc211a
Show file tree
Hide file tree
Showing 7 changed files with 275 additions and 103 deletions.
125 changes: 111 additions & 14 deletions src/plugins/components/pagination/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,57 +15,154 @@ export default plugin.withOptions(
const config = theme(`shurikenUi.${key}`) satisfies PaginationConfig

addComponents({
//Wrapper
[`.${prefix}pagination`]: {
[`@apply inline-flex w-${config.size} flex-col md:flex-row md:justify-between`]:
[`@apply inline-flex w-${config.width} flex-col md:flex-row md:justify-between`]:
{},

//Pagination:list
[`.${prefix}pagination-list`]: {
[`@apply border-${config.list.border} bg-${config.list.bg} dark:border-${config.list.borderDark} dark:bg-${config.list.bgDark} mb-4 inline-flex flex-wrap gap-2 border p-${config.list.space} md:mb-0 md:gap-1`]:
//Base
[`@apply inline-flex flex-wrap gap-2 md:gap-1 p-${config.padding} mb-4 md:mb-0`]:
{},
//Background
[`@apply bg-${config.list.background.light} dark:bg-${config.list.background.dark}`]:
{},
//Border
[`@apply border border-${config.list.border.light} dark:border-${config.list.border.dark}`]:
{},
},
//Pagination:buttons
[`.${prefix}pagination-buttons`]: {
[`@apply border-${config.buttons.border} bg-${config.buttons.bg} dark:border-${config.buttons.borderDark} dark:bg-${config.buttons.bgDark} flex items-center justify-end gap-1 border p-${config.buttons.space}`]:
//Base
[`@apply flex items-center justify-end gap-1 border p-${config.buttons.padding}`]:
{},
//Background
[`@apply bg-${config.buttons.background.light} dark:bg-${config.buttons.background.dark}`]:
{},
//Border
[`@apply border-${config.buttons.border.light} dark:border-${config.buttons.border.dark}`]:
{},
//Buttons:button
[`.${prefix}pagination-button`]: {
[`@apply border-${config.buttons.button.border} text-${config.buttons.button.text} hover:bg-${config.buttons.button.bgHover} hover:text-${config.buttons.button.textHover} dark:border-${config.buttons.button.borderDark} dark:bg-${config.buttons.button.bgDark} dark:hover:bg-${config.buttons.button.bgHoverDark} dark:hover:text-${config.buttons.button.textHoverDark} flex h-10 w-full items-center justify-center bg-${config.buttons.button.bg} font-${config.buttons.button.font} text-${config.buttons.button.textSize} transition-all duration-${config.buttons.button.duration} md:w-10`]:
//Base
[`@apply flex h-10 w-full items-center justify-center md:w-10`]:
{},
//Font
[`@apply font-${config.buttons.button.font.family} text-${config.buttons.button.font.size}`]:
{},
//Color
[`@apply text-${config.buttons.button.font.color.base.light} dark:text-${config.buttons.button.font.color.base.dark}`]:
{},
//Color:hover
[`@apply hover:text-${config.buttons.button.font.color.hover.light} dark:hover:text-${config.buttons.button.font.color.hover.dark}`]:
{},
//Background
[`@apply bg-${config.buttons.button.background.base.light} dark:bg-${config.buttons.button.background.base.dark}`]:
{},
//Background:hover
[`@apply hover:bg-${config.buttons.button.background.hover.light} dark:hover:bg-${config.buttons.button.background.hover.dark}`]:
{},
//Border
[`@apply border-${config.buttons.button.border.light} dark:border-${config.buttons.button.border.dark}`]:
{},
//Transition
[`@apply transition-${config.buttons.button.transition.property} duration-${config.buttons.button.transition.duration}`]:
{},
//Button:icon
[`.${prefix}pagination-button-icon`]: {
[`@apply block h-${config.buttons.button.iconSize} w-${config.buttons.button.iconSize}`]:
[`@apply block h-${config.buttons.button.icon.size} w-${config.buttons.button.icon.size}`]:
{},
},
},
},
//Pagination:link
[`.${prefix}pagination-link`]: {
[`@apply flex h-${config.link.size} w-${config.link.size} items-center justify-center font-${config.link.font} text-${config.link.text} border-${config.link.border} bg-${config.link.bg} dark:border-${config.link.borderDark} dark:bg-${config.link.bgDark} mb-4 inline-flex flex-wrap gap-2 border p-${config.link.space} md:mb-0 md:gap-1`]:
//Base
[`@apply flex items-center justify-center mb-4 md:mb-0 inline-flex flex-wrap gap-2 md:gap-1`]:
{},
//Size
[`@apply h-${config.link.size} w-${config.link.size} p-${config.link.padding}`]:
{},
//Font
[`@apply font-${config.link.font.family} text-${config.link.font.size}`]:
{},
//Background
[`@apply bg-${config.link.background.base.light} dark:bg-${config.link.background.base.dark}`]:
{},
//Border
[`@apply border border-${config.link.border.base.light} dark:border-${config.link.border.base.dark}`]:
{},
//Link:not-active
[`&:not(.${prefix}active)`]: {
[`@apply dark:bg-${config.link.notActive.bgDark} border-${config.link.notActive.border} dark:border-${config.link.notActive.borderDark} hover:bg-${config.link.notActive.bgHover} dark:hover:bg-${config.link.notActive.bgHoverDark} text-${config.link.notActive.text} hover:text-${config.link.notActive.textHover} dark:hover:text-${config.link.notActive.textHoverDark} bg-${config.link.notActive.bg}`]:
//Color:inactive:base
[`@apply text-${config.link.font.color.inactive.base.light} dark:text-${config.link.font.color.inactive.base.dark}`]:
{},
//Color:inactive:hover
[`@apply hover:text-${config.link.font.color.inactive.hover.light} dark:hover:text-${config.link.font.color.inactive.hover.dark}`]:
{},
//Background:inactive:base
[`@apply bg-${config.link.background.inactive.base.light} dark:bg-${config.link.background.inactive.base.dark}`]:
{},
//Background:inactive:hover
[`@apply hover:bg-${config.link.background.inactive.hover.light} dark:hover:bg-${config.link.background.inactive.hover.dark}`]:
{},
//Border:inactive
[`@apply border-${config.link.border.inactive.light} dark:border-${config.link.border.inactive.dark}`]:
{},
},
//Link:active
[`&.${prefix}active`]: {
[`@apply bg-${config.link.active.bg} border-${config.link.active.border} shadow-${config.link.active.shadow} dark:shadow-${config.link.active.shadowDark} text-${config.link.active.text} shadow-${config.link.active.shadowSize}`]:
//Color
[`@apply text-${config.link.font.color.active.light} dark:text-${config.link.font.color.active.dark}`]:
{},
//Background
[`@apply bg-${config.link.background.active.light} dark:bg-${config.link.background.active.dark}`]:
{},
//Border:active
[`@apply border-${config.link.border.active.light} dark:border-${config.link.border.active.dark}`]:
{},
//Shadow:active
[`@apply shadow-${config.link.shadow.active.size} shadow-${config.link.shadow.active.light} dark:shadow-${config.link.shadow.active.dark}`]:
{},
},
},
//Pagination:ellipsis
[`.${prefix}pagination-ellipsis`]: {
[`@apply border-${config.ellipsis.border} text-${config.ellipsis.text} dark:border-${config.ellipsis.borderDark} dark:bg-${config.ellipsis.bgDark} flex h-${config.ellipsis.size} w-${config.ellipsis.size} items-center justify-center bg-${config.ellipsis.bg} font-${config.ellipsis.font} text-${config.ellipsis.textSize}`]:
//Base
[`@apply flex h-${config.ellipsis.size} w-${config.ellipsis.size} items-center justify-center`]:
{},
//Font
[`@apply font-${config.ellipsis.font.family} text-${config.ellipsis.font.size}`]:
{},
//Color
[`@apply text-${config.ellipsis.font.color.light} dark:text-${config.ellipsis.font.color.dark}`]:
{},
//Background
[`@apply bg-${config.ellipsis.background.light} dark:bg-${config.ellipsis.background.dark}`]:
{},
//Border
[`@apply border-${config.ellipsis.border.light} dark:border-${config.ellipsis.border.dark}`]:
{},
},
//Rounded:sm
[`&.${prefix}pagination-rounded .${prefix}pagination-list, &.${prefix}pagination-rounded .${prefix}pagination-buttons, &.${prefix}pagination-rounded .${prefix}pagination-buttons .${prefix}pagination-button, &.${prefix}pagination-rounded .${prefix}pagination-link, &.${prefix}pagination-rounded .${prefix}pagination-ellipsis`]:
{
[`@apply rounded-${config.rounded.default}`]: {},
[`@apply ${config.rounded.sm}`]: {},
},
//Rounded:md
[`&.${prefix}pagination-smooth .${prefix}pagination-list, &.${prefix}pagination-smooth .${prefix}pagination-buttons, &.${prefix}pagination-smooth .${prefix}pagination-buttons .${prefix}pagination-button, &.${prefix}pagination-smooth .${prefix}pagination-link, &.${prefix}pagination-smooth .${prefix}pagination-ellipsis`]:
{
[`@apply rounded-${config.rounded.smooth}`]: {},
[`@apply ${config.rounded.md}`]: {},
},
//Rounded:lg
[`&.${prefix}pagination-curved .${prefix}pagination-list, &.${prefix}pagination-curved .${prefix}pagination-buttons, &.${prefix}pagination-curved .${prefix}pagination-buttons .${prefix}pagination-button, &.${prefix}pagination-curved .${prefix}pagination-link, &.${prefix}pagination-curved .${prefix}pagination-ellipsis`]:
{
[`@apply rounded-${config.rounded.curved}`]: {},
[`@apply ${config.rounded.lg}`]: {},
},
//Rounded:full
[`&.${prefix}pagination-full .${prefix}pagination-list, &.${prefix}pagination-full .${prefix}pagination-buttons, &.${prefix}pagination-full .${prefix}pagination-buttons .${prefix}pagination-button, &.${prefix}pagination-full .${prefix}pagination-link, &.${prefix}pagination-full .${prefix}pagination-ellipsis`]:
{
[`@apply rounded-${config.rounded.full}`]: {},
[`@apply ${config.rounded.full}`]: {},
},
},
})
Expand Down
4 changes: 2 additions & 2 deletions src/plugins/components/pagination/pagination.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import * as variants from './pagination.variants'
/**
* Primary UI component for user interaction
*/
export const Pagination = ({ shape, classes, ...attrs }: PaginationAttrs) => {
export const Pagination = ({ rounded, classes, ...attrs }: PaginationAttrs) => {
return html`
<div
class=${[
'nui-pagination',
shape && variants.shape[shape],
rounded && variants.rounded[rounded],
classes?.wrapper,
]
.filter(Boolean)
Expand Down
Loading

0 comments on commit cfc211a

Please sign in to comment.