[{"data":1,"prerenderedAt":1591},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-pagination":316,"-colorffy-ui-components-pagination-surround":1586},[4,21,115,307,312],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Colorffy CSS","i-lucide-palette","\u002Fcolorffy-css","2.colorffy-css",[27,32,37,42,78,99],{"title":28,"path":29,"stem":30,"icon":31},"Overview","\u002Fcolorffy-css\u002Foverview","2.colorffy-css\u002F1.overview","i-lucide-book-open",{"title":33,"path":34,"stem":35,"icon":36},"Color System","\u002Fcolorffy-css\u002Fcolor-system","2.colorffy-css\u002F2.color-system","i-lucide-droplet",{"title":38,"path":39,"stem":40,"icon":41},"Customization","\u002Fcolorffy-css\u002Fcustomization","2.colorffy-css\u002F3.customization","i-lucide-settings",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":20},"Utilities","i-lucide-wrench","\u002Fcolorffy-css\u002Futilities","2.colorffy-css\u002F4.utilities",[48,53,58,63,68,73],{"title":49,"path":50,"stem":51,"icon":52},"Borders & Shadows","\u002Fcolorffy-css\u002Futilities\u002Fborders-shadows","2.colorffy-css\u002F4.utilities\u002F01.borders-shadows","i-lucide-frame",{"title":54,"path":55,"stem":56,"icon":57},"Colors & Gradients","\u002Fcolorffy-css\u002Futilities\u002Fcolors-gradients","2.colorffy-css\u002F4.utilities\u002F02.colors-gradients","i-lucide-paint-bucket",{"title":59,"path":60,"stem":61,"icon":62},"Display & Flexbox","\u002Fcolorffy-css\u002Futilities\u002Fdisplay-flexbox","2.colorffy-css\u002F4.utilities\u002F03.display-flexbox","i-lucide-stretch-horizontal",{"title":64,"path":65,"stem":66,"icon":67},"Effects","\u002Fcolorffy-css\u002Futilities\u002Feffects","2.colorffy-css\u002F4.utilities\u002F04.effects","i-lucide-wand-sparkles",{"title":69,"path":70,"stem":71,"icon":72},"Spacing","\u002Fcolorffy-css\u002Futilities\u002Fspacing","2.colorffy-css\u002F4.utilities\u002F05.spacing","i-lucide-ruler",{"title":74,"path":75,"stem":76,"icon":77},"Typography","\u002Fcolorffy-css\u002Futilities\u002Ftypography","2.colorffy-css\u002F4.utilities\u002F06.typography","i-lucide-type",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":20},"Layout","i-lucide-layout-template","\u002Fcolorffy-css\u002Flayout","2.colorffy-css\u002F5.layout",[84,89,94],{"title":85,"path":86,"stem":87,"icon":88},"App Layout","\u002Fcolorffy-css\u002Flayout\u002Fapp-layout","2.colorffy-css\u002F5.layout\u002F01.app-layout","i-lucide-app-window",{"title":90,"path":91,"stem":92,"icon":93},"Flex Grid","\u002Fcolorffy-css\u002Flayout\u002Fflex-grid","2.colorffy-css\u002F5.layout\u002F02.flex-grid","i-lucide-columns-3",{"title":95,"path":96,"stem":97,"icon":98},"Grid","\u002Fcolorffy-css\u002Flayout\u002Fgrid","2.colorffy-css\u002F5.layout\u002F03.grid","i-lucide-grid-3x3",{"title":100,"icon":101,"path":102,"stem":103,"children":104,"page":20},"SCSS API","i-lucide-braces","\u002Fcolorffy-css\u002Fscss-api","2.colorffy-css\u002F6.scss-api",[105,110],{"title":106,"path":107,"stem":108,"icon":109},"Mixins","\u002Fcolorffy-css\u002Fscss-api\u002Fmixins","2.colorffy-css\u002F6.scss-api\u002F01.mixins","i-lucide-code",{"title":111,"path":112,"stem":113,"icon":114},"Tonal Tokens","\u002Fcolorffy-css\u002Fscss-api\u002Ftonal-tokens","2.colorffy-css\u002F6.scss-api\u002F02.tonal-tokens","i-lucide-swatch-book",{"title":116,"icon":117,"path":118,"stem":119,"children":120,"page":20},"Colorffy UI","i-lucide-blocks","\u002Fcolorffy-ui","3.colorffy-ui",[121,125,297,302],{"title":122,"path":123,"stem":124,"icon":31},"Usage","\u002Fcolorffy-ui\u002Fusage","3.colorffy-ui\u002F1.usage",{"title":126,"icon":127,"path":128,"stem":129,"children":130,"page":20},"Components","i-lucide-component","\u002Fcolorffy-ui\u002Fcomponents","3.colorffy-ui\u002F2.components",[131,135,140,145,150,155,160,165,170,175,180,185,190,195,200,205,210,215,219,224,229,233,238,243,248,253,257,262,267,272,277,282,287,292],{"title":28,"path":132,"stem":133,"icon":134},"\u002Fcolorffy-ui\u002Fcomponents\u002Foverview","3.colorffy-ui\u002F2.components\u002F00.overview","i-lucide-layout-grid",{"title":136,"path":137,"stem":138,"icon":139},"Accordion","\u002Fcolorffy-ui\u002Fcomponents\u002Faccordion","3.colorffy-ui\u002F2.components\u002F01.accordion","i-lucide-chevrons-down-up",{"title":141,"path":142,"stem":143,"icon":144},"Alert","\u002Fcolorffy-ui\u002Fcomponents\u002Falert","3.colorffy-ui\u002F2.components\u002F02.alert","i-lucide-triangle-alert",{"title":146,"path":147,"stem":148,"icon":149},"Avatar","\u002Fcolorffy-ui\u002Fcomponents\u002Favatar","3.colorffy-ui\u002F2.components\u002F03.avatar","i-lucide-circle-user",{"title":151,"path":152,"stem":153,"icon":154},"Badge","\u002Fcolorffy-ui\u002Fcomponents\u002Fbadge","3.colorffy-ui\u002F2.components\u002F04.badge","i-lucide-tag",{"title":156,"path":157,"stem":158,"icon":159},"Breadcrumb","\u002Fcolorffy-ui\u002Fcomponents\u002Fbreadcrumb","3.colorffy-ui\u002F2.components\u002F05.breadcrumb","i-lucide-chevron-right",{"title":161,"path":162,"stem":163,"icon":164},"Button","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton","3.colorffy-ui\u002F2.components\u002F06.button","i-lucide-square-mouse-pointer",{"title":166,"path":167,"stem":168,"icon":169},"Button Group","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-group","3.colorffy-ui\u002F2.components\u002F07.button-group","i-lucide-square-stack",{"title":171,"path":172,"stem":173,"icon":174},"Button Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-menu","3.colorffy-ui\u002F2.components\u002F08.button-menu","i-lucide-menu",{"title":176,"path":177,"stem":178,"icon":179},"Calendar","\u002Fcolorffy-ui\u002Fcomponents\u002Fcalendar","3.colorffy-ui\u002F2.components\u002F09.calendar","i-lucide-calendar",{"title":181,"path":182,"stem":183,"icon":184},"Card","\u002Fcolorffy-ui\u002Fcomponents\u002Fcard","3.colorffy-ui\u002F2.components\u002F10.card","i-lucide-square",{"title":186,"path":187,"stem":188,"icon":189},"Chip","\u002Fcolorffy-ui\u002Fcomponents\u002Fchip","3.colorffy-ui\u002F2.components\u002F11.chip","i-lucide-tags",{"title":191,"path":192,"stem":193,"icon":194},"Datatable","\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable","3.colorffy-ui\u002F2.components\u002F12.datatable","i-lucide-table",{"title":196,"path":197,"stem":198,"icon":199},"Divider","\u002Fcolorffy-ui\u002Fcomponents\u002Fdivider","3.colorffy-ui\u002F2.components\u002F13.divider","i-lucide-separator-horizontal",{"title":201,"path":202,"stem":203,"icon":204},"Empty","\u002Fcolorffy-ui\u002Fcomponents\u002Fempty","3.colorffy-ui\u002F2.components\u002F14.empty","i-lucide-inbox",{"title":206,"path":207,"stem":208,"icon":209},"Icons","\u002Fcolorffy-ui\u002Fcomponents\u002Ficons","3.colorffy-ui\u002F2.components\u002F15.icons","i-lucide-shapes",{"title":211,"path":212,"stem":213,"icon":214},"Inputs","\u002Fcolorffy-ui\u002Fcomponents\u002Finputs","3.colorffy-ui\u002F2.components\u002F16.inputs","i-lucide-text-cursor-input",{"title":79,"path":216,"stem":217,"icon":218},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout","3.colorffy-ui\u002F2.components\u002F17.layout","i-lucide-layout",{"title":220,"path":221,"stem":222,"icon":223},"List","\u002Fcolorffy-ui\u002Fcomponents\u002Flist","3.colorffy-ui\u002F2.components\u002F18.list","i-lucide-list",{"title":225,"path":226,"stem":227,"icon":228},"Loading","\u002Fcolorffy-ui\u002Fcomponents\u002Floading","3.colorffy-ui\u002F2.components\u002F19.loading","i-lucide-loader-circle",{"title":230,"path":231,"stem":232,"icon":88},"Modal","\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal","3.colorffy-ui\u002F2.components\u002F20.modal",{"title":234,"path":235,"stem":236,"icon":237},"Navbar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavbar","3.colorffy-ui\u002F2.components\u002F21.navbar","i-lucide-panel-top",{"title":239,"path":240,"stem":241,"icon":242},"Navigation Bar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavigation-bar","3.colorffy-ui\u002F2.components\u002F22.navigation-bar","i-lucide-navigation",{"title":244,"path":245,"stem":246,"icon":247},"Pagination","\u002Fcolorffy-ui\u002Fcomponents\u002Fpagination","3.colorffy-ui\u002F2.components\u002F23.pagination","i-lucide-ellipsis",{"title":249,"path":250,"stem":251,"icon":252},"Popover","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover","3.colorffy-ui\u002F2.components\u002F24.popover","i-lucide-message-square",{"title":254,"path":255,"stem":256,"icon":247},"Popover Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover-menu","3.colorffy-ui\u002F2.components\u002F25.popover-menu",{"title":258,"path":259,"stem":260,"icon":261},"Progress","\u002Fcolorffy-ui\u002Fcomponents\u002Fprogress","3.colorffy-ui\u002F2.components\u002F26.progress","i-lucide-loader",{"title":263,"path":264,"stem":265,"icon":266},"Segmented Controls","\u002Fcolorffy-ui\u002Fcomponents\u002Fsegmented-controls","3.colorffy-ui\u002F2.components\u002F27.segmented-controls","i-lucide-toggle-left",{"title":268,"path":269,"stem":270,"icon":271},"Sidebar","\u002Fcolorffy-ui\u002Fcomponents\u002Fsidebar","3.colorffy-ui\u002F2.components\u002F28.sidebar","i-lucide-panel-left",{"title":273,"path":274,"stem":275,"icon":276},"Skeleton","\u002Fcolorffy-ui\u002Fcomponents\u002Fskeleton","3.colorffy-ui\u002F2.components\u002F29.skeleton","i-lucide-square-dashed",{"title":278,"path":279,"stem":280,"icon":281},"Stepper","\u002Fcolorffy-ui\u002Fcomponents\u002Fstepper","3.colorffy-ui\u002F2.components\u002F30.stepper","i-lucide-list-ordered",{"title":283,"path":284,"stem":285,"icon":286},"Tabs","\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs","3.colorffy-ui\u002F2.components\u002F31.tabs","i-lucide-panels-top-left",{"title":288,"path":289,"stem":290,"icon":291},"Timeline","\u002Fcolorffy-ui\u002Fcomponents\u002Ftimeline","3.colorffy-ui\u002F2.components\u002F32.timeline","i-lucide-history",{"title":293,"path":294,"stem":295,"icon":296},"Tooltip","\u002Fcolorffy-ui\u002Fcomponents\u002Ftooltip","3.colorffy-ui\u002F2.components\u002F33.tooltip","i-lucide-message-circle",{"title":298,"path":299,"stem":300,"icon":301},"Styling","\u002Fcolorffy-ui\u002Fstyling","3.colorffy-ui\u002F3.styling","i-lucide-paintbrush",{"title":303,"path":304,"stem":305,"icon":306},"Localization","\u002Fcolorffy-ui\u002Flocalization","3.colorffy-ui\u002F4.localization","i-lucide-languages",{"title":308,"path":309,"stem":310,"icon":311},"Migration","\u002Fmigration","4.migration","i-lucide-route",{"title":313,"path":314,"stem":315,"icon":291},"Changelog","\u002Fchangelog","5.changelog",{"id":317,"title":244,"body":318,"description":1579,"extension":1580,"links":1581,"meta":1582,"navigation":1583,"path":245,"seo":1584,"stem":246,"__hash__":1585},"docs\u002F3.colorffy-ui\u002F2.components\u002F23.pagination.md",{"type":319,"value":320,"toc":1569},"minimark",[321,341,346,530,536,540,547,759,770,774,784,852,858,862,873,929,933,970,1054,1058,1082,1086,1346,1391,1395,1410,1482,1565],[322,323,324,328,329,332,333,336,337,340],"p",{},[325,326,327],"code",{},"UiPagination"," renders a ",[325,330,331],{},"\u003Cnav>"," of page buttons. Bind the current page with ",[325,334,335],{},"v-model:page"," (pages start at 1) and give it either the item count and page size, or the page count. The current page gets ",[325,338,339],{},"aria-current=\"page\"",".",[342,343,345],"h2",{"id":344},"add-a-pagination","Add a pagination",[347,348,353],"pre",{"className":349,"code":350,"language":351,"meta":352,"style":352},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst page = ref(1)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiPagination v-model:page=\"page\" :total=\"248\" :page-size=\"20\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[325,354,355,390,418,425,449,459,464,474,521],{"__ignoreMap":352},[356,357,360,364,368,372,375,378,381,385,387],"span",{"class":358,"line":359},"line",1,[356,361,363],{"class":362},"sMK4o","\u003C",[356,365,367],{"class":366},"swJcz","script",[356,369,371],{"class":370},"spNyl"," setup",[356,373,374],{"class":370}," lang",[356,376,377],{"class":362},"=",[356,379,380],{"class":362},"\"",[356,382,384],{"class":383},"sfazB","ts",[356,386,380],{"class":362},[356,388,389],{"class":362},">\n",[356,391,393,397,400,404,407,410,413,415],{"class":358,"line":392},2,[356,394,396],{"class":395},"s7zQu","import",[356,398,399],{"class":362}," {",[356,401,403],{"class":402},"sTEyZ"," ref",[356,405,406],{"class":362}," }",[356,408,409],{"class":395}," from",[356,411,412],{"class":362}," '",[356,414,351],{"class":383},[356,416,417],{"class":362},"'\n",[356,419,421],{"class":358,"line":420},3,[356,422,424],{"emptyLinePlaceholder":423},true,"\n",[356,426,428,431,434,436,439,442,446],{"class":358,"line":427},4,[356,429,430],{"class":370},"const",[356,432,433],{"class":402}," page ",[356,435,377],{"class":362},[356,437,403],{"class":438},"s2Zo4",[356,440,441],{"class":402},"(",[356,443,445],{"class":444},"sbssI","1",[356,447,448],{"class":402},")\n",[356,450,452,455,457],{"class":358,"line":451},5,[356,453,454],{"class":362},"\u003C\u002F",[356,456,367],{"class":366},[356,458,389],{"class":362},[356,460,462],{"class":358,"line":461},6,[356,463,424],{"emptyLinePlaceholder":423},[356,465,467,469,472],{"class":358,"line":466},7,[356,468,363],{"class":362},[356,470,471],{"class":366},"template",[356,473,389],{"class":362},[356,475,477,480,482,485,487,489,492,494,497,499,501,504,506,509,511,513,516,518],{"class":358,"line":476},8,[356,478,479],{"class":362},"  \u003C",[356,481,327],{"class":366},[356,483,484],{"class":370}," v-model:page",[356,486,377],{"class":362},[356,488,380],{"class":362},[356,490,491],{"class":383},"page",[356,493,380],{"class":362},[356,495,496],{"class":370}," :total",[356,498,377],{"class":362},[356,500,380],{"class":362},[356,502,503],{"class":383},"248",[356,505,380],{"class":362},[356,507,508],{"class":370}," :page-size",[356,510,377],{"class":362},[356,512,380],{"class":362},[356,514,515],{"class":383},"20",[356,517,380],{"class":362},[356,519,520],{"class":362}," \u002F>\n",[356,522,524,526,528],{"class":358,"line":523},9,[356,525,454],{"class":362},[356,527,471],{"class":366},[356,529,389],{"class":362},[322,531,532,533,340],{},"When the page count drops below the current page, for example after a filter, the pagination moves to the last page and emits ",[325,534,535],{},"update:page",[342,537,539],{"id":538},"page-on-the-server","Page on the server",[322,541,542,543,546],{},"Pass ",[325,544,545],{},"totalPages"," when the server sends a page count, and fetch the page whenever it changes:",[347,548,550],{"className":349,"code":549,"language":351,"meta":352,"style":352},"\u003Cscript setup lang=\"ts\">\nconst page = ref(1)\nconst { data } = await useFetch('\u002Fapi\u002Finvoices', { query: { page } })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiDatatable :columns=\"columns\" :items=\"data?.items ?? []\" \u002F>\n  \u003CUiPagination\n    v-model:page=\"page\"\n    :total-pages=\"data?.pageCount ?? 1\"\n    class=\"d-flex justify-content-end mt-3\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[325,551,552,572,588,640,648,652,660,693,700,714,729,744,750],{"__ignoreMap":352},[356,553,554,556,558,560,562,564,566,568,570],{"class":358,"line":359},[356,555,363],{"class":362},[356,557,367],{"class":366},[356,559,371],{"class":370},[356,561,374],{"class":370},[356,563,377],{"class":362},[356,565,380],{"class":362},[356,567,384],{"class":383},[356,569,380],{"class":362},[356,571,389],{"class":362},[356,573,574,576,578,580,582,584,586],{"class":358,"line":392},[356,575,430],{"class":370},[356,577,433],{"class":402},[356,579,377],{"class":362},[356,581,403],{"class":438},[356,583,441],{"class":402},[356,585,445],{"class":444},[356,587,448],{"class":402},[356,589,590,592,594,597,600,603,606,609,611,614,617,619,622,624,627,630,632,634,636,638],{"class":358,"line":420},[356,591,430],{"class":370},[356,593,399],{"class":362},[356,595,596],{"class":402}," data ",[356,598,599],{"class":362},"}",[356,601,602],{"class":362}," =",[356,604,605],{"class":395}," await",[356,607,608],{"class":438}," useFetch",[356,610,441],{"class":402},[356,612,613],{"class":362},"'",[356,615,616],{"class":383},"\u002Fapi\u002Finvoices",[356,618,613],{"class":362},[356,620,621],{"class":362},",",[356,623,399],{"class":362},[356,625,626],{"class":366}," query",[356,628,629],{"class":362},":",[356,631,399],{"class":362},[356,633,433],{"class":402},[356,635,599],{"class":362},[356,637,406],{"class":362},[356,639,448],{"class":402},[356,641,642,644,646],{"class":358,"line":427},[356,643,454],{"class":362},[356,645,367],{"class":366},[356,647,389],{"class":362},[356,649,650],{"class":358,"line":451},[356,651,424],{"emptyLinePlaceholder":423},[356,653,654,656,658],{"class":358,"line":461},[356,655,363],{"class":362},[356,657,471],{"class":366},[356,659,389],{"class":362},[356,661,662,664,667,670,672,674,677,679,682,684,686,689,691],{"class":358,"line":466},[356,663,479],{"class":362},[356,665,666],{"class":366},"UiDatatable",[356,668,669],{"class":370}," :columns",[356,671,377],{"class":362},[356,673,380],{"class":362},[356,675,676],{"class":383},"columns",[356,678,380],{"class":362},[356,680,681],{"class":370}," :items",[356,683,377],{"class":362},[356,685,380],{"class":362},[356,687,688],{"class":383},"data?.items ?? []",[356,690,380],{"class":362},[356,692,520],{"class":362},[356,694,695,697],{"class":358,"line":476},[356,696,479],{"class":362},[356,698,699],{"class":366},"UiPagination\n",[356,701,702,705,707,709,711],{"class":358,"line":523},[356,703,704],{"class":370},"    v-model:page",[356,706,377],{"class":362},[356,708,380],{"class":362},[356,710,491],{"class":383},[356,712,713],{"class":362},"\"\n",[356,715,717,720,722,724,727],{"class":358,"line":716},10,[356,718,719],{"class":370},"    :total-pages",[356,721,377],{"class":362},[356,723,380],{"class":362},[356,725,726],{"class":383},"data?.pageCount ?? 1",[356,728,713],{"class":362},[356,730,732,735,737,739,742],{"class":358,"line":731},11,[356,733,734],{"class":370},"    class",[356,736,377],{"class":362},[356,738,380],{"class":362},[356,740,741],{"class":383},"d-flex justify-content-end mt-3",[356,743,713],{"class":362},[356,745,747],{"class":358,"line":746},12,[356,748,749],{"class":362},"  \u002F>\n",[356,751,753,755,757],{"class":358,"line":752},13,[356,754,454],{"class":362},[356,756,471],{"class":366},[356,758,389],{"class":362},[322,760,761,762,769],{},"To page rows that are already loaded, use the datatable's ",[763,764,766],"a",{"href":765},"\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable#split-rows-into-pages",[325,767,768],{},"pagination"," prop instead.",[342,771,773],{"id":772},"collapse-long-ranges","Collapse long ranges",[322,775,776,777,780,781,783],{},"The first and last pages always show, with ",[325,778,779],{},"siblingCount"," pages on each side of the current one (default ",[325,782,445],{},"). The pages in between collapse into an ellipsis. An ellipsis never hides a single page, and the number of buttons stays the same from page to page, so the arrows don't move under the pointer.",[347,785,787],{"className":349,"code":786,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003C!-- 1 … 8 9 10 11 12 … 20 -->\n  \u003CUiPagination v-model:page=\"page\" :total-pages=\"20\" :sibling-count=\"2\" \u002F>\n\u003C\u002Ftemplate>\n",[325,788,789,797,803,844],{"__ignoreMap":352},[356,790,791,793,795],{"class":358,"line":359},[356,792,363],{"class":362},[356,794,471],{"class":366},[356,796,389],{"class":362},[356,798,799],{"class":358,"line":392},[356,800,802],{"class":801},"sHwdD","  \u003C!-- 1 … 8 9 10 11 12 … 20 -->\n",[356,804,805,807,809,811,813,815,817,819,822,824,826,828,830,833,835,837,840,842],{"class":358,"line":420},[356,806,479],{"class":362},[356,808,327],{"class":366},[356,810,484],{"class":370},[356,812,377],{"class":362},[356,814,380],{"class":362},[356,816,491],{"class":383},[356,818,380],{"class":362},[356,820,821],{"class":370}," :total-pages",[356,823,377],{"class":362},[356,825,380],{"class":362},[356,827,515],{"class":383},[356,829,380],{"class":362},[356,831,832],{"class":370}," :sibling-count",[356,834,377],{"class":362},[356,836,380],{"class":362},[356,838,839],{"class":383},"2",[356,841,380],{"class":362},[356,843,520],{"class":362},[356,845,846,848,850],{"class":358,"line":427},[356,847,454],{"class":362},[356,849,471],{"class":366},[356,851,389],{"class":362},[322,853,854,857],{},[325,855,856],{},"showEdges"," adds first-page and last-page buttons next to the arrows.",[342,859,861],{"id":860},"compact-layout","Compact layout",[322,863,864,865,868,869,872],{},"On screens narrower than 600px, the page numbers give way to the position text: ",[325,866,867],{},"‹ Page 3 of 12 ›",". Set ",[325,870,871],{},"compact"," to use that layout at every width, for example in a narrow card:",[347,874,876],{"className":349,"code":875,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CUiPagination v-model:page=\"page\" :total-pages=\"12\" compact show-edges \u002F>\n\u003C\u002Ftemplate>\n",[325,877,878,886,921],{"__ignoreMap":352},[356,879,880,882,884],{"class":358,"line":359},[356,881,363],{"class":362},[356,883,471],{"class":366},[356,885,389],{"class":362},[356,887,888,890,892,894,896,898,900,902,904,906,908,911,913,916,919],{"class":358,"line":392},[356,889,479],{"class":362},[356,891,327],{"class":366},[356,893,484],{"class":370},[356,895,377],{"class":362},[356,897,380],{"class":362},[356,899,491],{"class":383},[356,901,380],{"class":362},[356,903,821],{"class":370},[356,905,377],{"class":362},[356,907,380],{"class":362},[356,909,910],{"class":383},"12",[356,912,380],{"class":362},[356,914,915],{"class":370}," compact",[356,917,918],{"class":370}," show-edges",[356,920,520],{"class":362},[356,922,923,925,927],{"class":358,"line":420},[356,924,454],{"class":362},[356,926,471],{"class":366},[356,928,389],{"class":362},[342,930,932],{"id":931},"translate-the-labels","Translate the labels",[322,934,935,938,939,942,943,942,946,942,949,952,953,956,957,959,960,942,962,965,966,969],{},[325,936,937],{},"labels"," takes any of ",[325,940,941],{},"first",", ",[325,944,945],{},"previous",[325,947,948],{},"next",[325,950,951],{},"last"," (the arrow buttons' accessible names) and ",[325,954,955],{},"status"," (the position text). To translate every pagination at once, set them app-wide; see ",[763,958,303],{"href":304},". In ",[325,961,955],{},[325,963,964],{},"{page}"," and ",[325,967,968],{},"{total}"," are replaced with numbers, so the words can come in any order:",[347,971,973],{"className":349,"code":972,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CUiPagination\n    v-model:page=\"page\"\n    :total-pages=\"8\"\n    aria-label=\"Paginación\"\n    :labels=\"{ previous: 'Página anterior', next: 'Página siguiente', status: 'Página {page} de {total}' }\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[325,974,975,983,989,1001,1014,1028,1042,1046],{"__ignoreMap":352},[356,976,977,979,981],{"class":358,"line":359},[356,978,363],{"class":362},[356,980,471],{"class":366},[356,982,389],{"class":362},[356,984,985,987],{"class":358,"line":392},[356,986,479],{"class":362},[356,988,699],{"class":366},[356,990,991,993,995,997,999],{"class":358,"line":420},[356,992,704],{"class":370},[356,994,377],{"class":362},[356,996,380],{"class":362},[356,998,491],{"class":383},[356,1000,713],{"class":362},[356,1002,1003,1005,1007,1009,1012],{"class":358,"line":427},[356,1004,719],{"class":370},[356,1006,377],{"class":362},[356,1008,380],{"class":362},[356,1010,1011],{"class":383},"8",[356,1013,713],{"class":362},[356,1015,1016,1019,1021,1023,1026],{"class":358,"line":451},[356,1017,1018],{"class":370},"    aria-label",[356,1020,377],{"class":362},[356,1022,380],{"class":362},[356,1024,1025],{"class":383},"Paginación",[356,1027,713],{"class":362},[356,1029,1030,1033,1035,1037,1040],{"class":358,"line":461},[356,1031,1032],{"class":370},"    :labels",[356,1034,377],{"class":362},[356,1036,380],{"class":362},[356,1038,1039],{"class":383},"{ previous: 'Página anterior', next: 'Página siguiente', status: 'Página {page} de {total}' }",[356,1041,713],{"class":362},[356,1043,1044],{"class":358,"line":466},[356,1045,749],{"class":362},[356,1047,1048,1050,1052],{"class":358,"line":476},[356,1049,454],{"class":362},[356,1051,471],{"class":366},[356,1053,389],{"class":362},[342,1055,1057],{"id":1056},"accessibility","Accessibility",[1059,1060,1061,1073,1076],"ul",{},[1062,1063,1064,1065,1068,1069,1072],"li",{},"At the first or last page, the arrows that can't move are marked ",[325,1066,1067],{},"aria-disabled"," instead of ",[325,1070,1071],{},"disabled",", so keyboard focus stays on the arrow you just pressed.",[1062,1074,1075],{},"Moving to another page announces the position text through a polite live region.",[1062,1077,1078,1079,340],{},"Give each pagination on a page its own ",[325,1080,1081],{},"ariaLabel",[342,1083,1085],{"id":1084},"props","Props",[1087,1088,1089,1108],"table",{},[1090,1091,1092],"thead",{},[1093,1094,1095,1099,1102,1105],"tr",{},[1096,1097,1098],"th",{},"Prop",[1096,1100,1101],{},"Type",[1096,1103,1104],{},"Default",[1096,1106,1107],{},"Description",[1109,1110,1111,1132,1155,1173,1196,1213,1232,1249,1269,1286,1307,1325],"tbody",{},[1093,1112,1113,1118,1123,1127],{},[1114,1115,1116],"td",{},[325,1117,491],{},[1114,1119,1120],{},[325,1121,1122],{},"number",[1114,1124,1125],{},[325,1126,445],{},[1114,1128,1129,1130,340],{},"Current page, starting at 1. Bind with ",[325,1131,335],{},[1093,1133,1134,1139,1143,1148],{},[1114,1135,1136],{},[325,1137,1138],{},"total",[1114,1140,1141],{},[325,1142,1122],{},[1114,1144,1145],{},[325,1146,1147],{},"0",[1114,1149,1150,1151,1154],{},"Number of items. With ",[325,1152,1153],{},"pageSize",", sets the page count.",[1093,1156,1157,1161,1165,1170],{},[1114,1158,1159],{},[325,1160,1153],{},[1114,1162,1163],{},[325,1164,1122],{},[1114,1166,1167],{},[325,1168,1169],{},"10",[1114,1171,1172],{},"Items per page.",[1093,1174,1175,1179,1184,1189],{},[1114,1176,1177],{},[325,1178,545],{},[1114,1180,1181],{},[325,1182,1183],{},"number | null",[1114,1185,1186],{},[325,1187,1188],{},"null",[1114,1190,1191,1192,965,1194,340],{},"Page count. Takes precedence over ",[325,1193,1138],{},[325,1195,1153],{},[1093,1197,1198,1202,1206,1210],{},[1114,1199,1200],{},[325,1201,779],{},[1114,1203,1204],{},[325,1205,1122],{},[1114,1207,1208],{},[325,1209,445],{},[1114,1211,1212],{},"Pages shown on each side of the current page.",[1093,1214,1215,1219,1224,1229],{},[1114,1216,1217],{},[325,1218,856],{},[1114,1220,1221],{},[325,1222,1223],{},"boolean",[1114,1225,1226],{},[325,1227,1228],{},"false",[1114,1230,1231],{},"Add first-page and last-page buttons.",[1093,1233,1234,1238,1242,1246],{},[1114,1235,1236],{},[325,1237,871],{},[1114,1239,1240],{},[325,1241,1223],{},[1114,1243,1244],{},[325,1245,1228],{},[1114,1247,1248],{},"Show the position text instead of page numbers at every width.",[1093,1250,1251,1256,1261,1266],{},[1114,1252,1253],{},[325,1254,1255],{},"size",[1114,1257,1258],{},[325,1259,1260],{},"'sm' | 'md' | 'lg' | null",[1114,1262,1263],{},[325,1264,1265],{},"'sm'",[1114,1267,1268],{},"Button size.",[1093,1270,1271,1275,1279,1283],{},[1114,1272,1273],{},[325,1274,1071],{},[1114,1276,1277],{},[325,1278,1223],{},[1114,1280,1281],{},[325,1282,1228],{},[1114,1284,1285],{},"Disable every button.",[1093,1287,1288,1292,1297,1302],{},[1114,1289,1290],{},[325,1291,1081],{},[1114,1293,1294],{},[325,1295,1296],{},"string",[1114,1298,1299],{},[325,1300,1301],{},"'Pagination'",[1114,1303,1304,1306],{},[325,1305,331],{}," landmark name.",[1093,1308,1309,1313,1318,1322],{},[1114,1310,1311],{},[325,1312,937],{},[1114,1314,1315],{},[325,1316,1317],{},"Partial\u003CIPaginationLabels> | null",[1114,1319,1320],{},[325,1321,1188],{},[1114,1323,1324],{},"Text for the arrows and the position text.",[1093,1326,1327,1332,1337,1341],{},[1114,1328,1329],{},[325,1330,1331],{},"customClass",[1114,1333,1334],{},[325,1335,1336],{},"ClassValue | null",[1114,1338,1339],{},[325,1340,1188],{},[1114,1342,1343,1344,340],{},"Classes for the ",[325,1345,331],{},[322,1347,1348,1356,1357,1359,1360,1363,1364,1359,1366,1363,1369,1359,1371,1363,1374,1359,1376,1363,1379,1359,1381,1384,1385,1356,1388,340],{},[1349,1350,1351,1352,1355],"strong",{},"Labels (",[325,1353,1354],{},"IPaginationLabels","):"," ",[325,1358,941],{}," (",[325,1361,1362],{},"'First page'","), ",[325,1365,945],{},[325,1367,1368],{},"'Previous page'",[325,1370,948],{},[325,1372,1373],{},"'Next page'",[325,1375,951],{},[325,1377,1378],{},"'Last page'",[325,1380,955],{},[325,1382,1383],{},"'Page {page} of {total}'",").\n",[1349,1386,1387],{},"Emits:",[325,1389,1390],{},"update:page(page)",[342,1392,1394],{"id":1393},"css-variables","CSS variables",[322,1396,1397,1398,1401,1402,1405,1406,1409],{},"Set these on ",[325,1399,1400],{},":root",", or on any wrapper to restyle only the paginations inside it. The page buttons are ",[325,1403,1404],{},".btn"," elements, so their size and hover come from the ",[763,1407,1408],{"href":162},"button"," styles.",[347,1411,1415],{"className":1412,"code":1413,"language":1414,"meta":352,"style":352},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n  --cffy-pagination-radius: var(--cffy-radius-sm);\n  --cffy-pagination-current-bg-color: var(--cffy-primary-container);\n  --cffy-pagination-current-color: var(--cffy-on-primary-container);\n}\n","css",[325,1416,1417,1427,1445,1461,1477],{"__ignoreMap":352},[356,1418,1419,1421,1424],{"class":358,"line":359},[356,1420,629],{"class":362},[356,1422,1423],{"class":370},"root",[356,1425,1426],{"class":362}," {\n",[356,1428,1429,1432,1434,1437,1439,1442],{"class":358,"line":392},[356,1430,1431],{"class":402},"  --cffy-pagination-radius",[356,1433,629],{"class":362},[356,1435,1436],{"class":438}," var",[356,1438,441],{"class":362},[356,1440,1441],{"class":402},"--cffy-radius-sm",[356,1443,1444],{"class":362},");\n",[356,1446,1447,1450,1452,1454,1456,1459],{"class":358,"line":420},[356,1448,1449],{"class":402},"  --cffy-pagination-current-bg-color",[356,1451,629],{"class":362},[356,1453,1436],{"class":438},[356,1455,441],{"class":362},[356,1457,1458],{"class":402},"--cffy-primary-container",[356,1460,1444],{"class":362},[356,1462,1463,1466,1468,1470,1472,1475],{"class":358,"line":427},[356,1464,1465],{"class":402},"  --cffy-pagination-current-color",[356,1467,629],{"class":362},[356,1469,1436],{"class":438},[356,1471,441],{"class":362},[356,1473,1474],{"class":402},"--cffy-on-primary-container",[356,1476,1444],{"class":362},[356,1478,1479],{"class":358,"line":451},[356,1480,1481],{"class":362},"}\n",[1087,1483,1484,1496],{},[1090,1485,1486],{},[1093,1487,1488,1491,1493],{},[1096,1489,1490],{},"Variable",[1096,1492,1104],{},[1096,1494,1495],{},"Controls",[1109,1497,1498,1513,1528,1550],{},[1093,1499,1500,1505,1510],{},[1114,1501,1502],{},[325,1503,1504],{},"--cffy-pagination-gap",[1114,1506,1507],{},[325,1508,1509],{},"--cffy-space-4",[1114,1511,1512],{},"Space between buttons",[1093,1514,1515,1520,1525],{},[1114,1516,1517],{},[325,1518,1519],{},"--cffy-pagination-radius",[1114,1521,1522],{},[325,1523,1524],{},"--cffy-radius-full",[1114,1526,1527],{},"Button corners",[1093,1529,1530,1539,1547],{},[1114,1531,1532,1535,1536],{},[325,1533,1534],{},"--cffy-pagination-current-bg-color"," \u002F ",[325,1537,1538],{},"--cffy-pagination-current-color",[1114,1540,1541,1535,1544],{},[325,1542,1543],{},"--cffy-primary-a10",[325,1545,1546],{},"--cffy-on-primary",[1114,1548,1549],{},"Current page",[1093,1551,1552,1557,1562],{},[1114,1553,1554],{},[325,1555,1556],{},"--cffy-pagination-status-color",[1114,1558,1559],{},[325,1560,1561],{},"--cffy-on-background",[1114,1563,1564],{},"Position text in the compact layout",[1566,1567,1568],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":352,"searchDepth":392,"depth":392,"links":1570},[1571,1572,1573,1574,1575,1576,1577,1578],{"id":344,"depth":392,"text":345},{"id":538,"depth":392,"text":539},{"id":772,"depth":392,"text":773},{"id":860,"depth":392,"text":861},{"id":931,"depth":392,"text":932},{"id":1056,"depth":392,"text":1057},{"id":1084,"depth":392,"text":1085},{"id":1393,"depth":392,"text":1394},"Split a long list into pages, with page numbers that collapse to fit.","md",null,{},{"icon":247},{"title":244,"description":1579},"izjG_bgDKXrzxGW1z0E6lHmna4K2gK1R5W2Od2h7N_s",[1587,1589],{"title":239,"path":240,"stem":241,"description":1588,"icon":242,"children":-1},"A data-driven bottom \u002F island navigation bar.",{"title":249,"path":250,"stem":251,"description":1590,"icon":252,"children":-1},"An anchored popover panel built on the native Popover API and CSS anchor positioning.",1791247320347]