@at-flux/astroflare 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@at-flux/astroflare",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "description": "Reusable headless components, styles, and utilities for Astro + Tailwind v4 + Cloudflare projects",
   "author": "atflux <dev@atflux.uk>",

package/src/components/CollectionQuery.astro

@@ -11,6 +11,9 @@ const {
   maxPageButtons = 7,
   filtersClass = "mb-8",
   pagerClass = "mt-6",
+  sizeOptions = [4, 2, 8, 12, 16],
+  showPageSize = true,
+  pageSizeClass = "",
   perPage = 9,
   class: className = "",
 } = Astro.props;
@@ -47,8 +50,12 @@ const pagerItems = buildPageSequence(totalPages, currentPage, maxPageButtons).ma
         page: item,
         href: buildCollectionHref(pathname, query, { page: item, offset: (item - 1) * query.size }),
         active: item === currentPage,
+        disabled: totalPages <= 1 || item === currentPage,
       },
 );
+const sanitizedSizeOptions = Array.from(
+  new Set([query.size, ...sizeOptions].filter((value) => Number.isFinite(value) && value > 0)),
+).sort((a, b) => a - b);
 ---
 
 {useServer && (
@@ -67,7 +74,32 @@ const pagerItems = buildPageSequence(totalPages, currentPage, maxPageButtons).ma
     </slot>
     <slot />
     <slot name="pager">
-      <Pager items={pagerItems} class={pagerClass} />
+      <div class:list={["af-query-pager-row flex flex-col gap-3 md:flex-row md:items-center md:justify-between", pagerClass]}>
+        <Pager items={pagerItems} class="md:order-1 md:flex-1 md:justify-center" />
+        {showPageSize && (
+          <form method="get" action={pathname} class:list={["af-query-size-form md:order-2 md:ml-auto", pageSizeClass]}>
+            <input type="hidden" name="page" value="1" />
+            <input type="hidden" name="offset" value="0" />
+            {Object.keys(activeFilters).length > 0 && (
+              <input type="hidden" name="filters" value={JSON.stringify(activeFilters)} />
+            )}
+            <label class="inline-flex items-center gap-2 text-xs uppercase tracking-[0.08em] text-light-text-subtle dark:text-dark-text-subtle">
+              <span>Page size</span>
+              <select
+                name="size"
+                class="rounded-full border border-light-border bg-light-surface px-3 py-1.5 text-xs text-light-text-body dark:border-dark-border dark:bg-dark-surface dark:text-dark-text-body"
+                onchange="this.form?.submit()"
+              >
+                {sanitizedSizeOptions.map((size) => (
+                  <option value={String(size)} selected={size === query.size}>
+                    {size}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </form>
+        )}
+      </div>
     </slot>
   </>
 )}

package/src/components/Pager.astro

@@ -8,7 +8,7 @@ interface Props {
   class?: string;
   /** Optional explicit pager items for link-based server rendering. */
   items?: Array<
-    | { page: number; label?: string; href?: string; active?: boolean }
+    | { page: number; label?: string; href?: string; active?: boolean; disabled?: boolean }
     | { ellipsis: true; label?: string }
   >;
 }
@@ -22,7 +22,7 @@ const fallbackPages = Array.from({ length: Math.max(0, pageCount) }, (_, index)
     ? items.map((item) =>
         "ellipsis" in item ? (
           <span class="af-pager-ellipsis" aria-hidden="true">{item.label ?? "…"}</span>
-        ) : item.href ? (
+        ) : item.href && !item.active && !item.disabled ? (
           <a
             href={item.href}
             data-page={String(item.page)}
@@ -34,6 +34,8 @@ const fallbackPages = Array.from({ length: Math.max(0, pageCount) }, (_, index)
           <button
             type="button"
             data-page={String(item.page)}
+            disabled={item.disabled ?? item.active}
+            aria-disabled={item.disabled ?? item.active}
             class:list={["af-pager-pill", item.active && "is-active"]}
           >
             {item.label ?? item.page}
@@ -68,6 +70,12 @@ const fallbackPages = Array.from({ length: Math.max(0, pageCount) }, (_, index)
     align-items: center;
     justify-content: center;
   }
+  .af-pager .af-pager-pill:disabled,
+  .af-pager .af-pager-pill[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.72;
+    pointer-events: none;
+  }
   [data-theme="dark"] .af-pager .af-pager-pill {
     border-color: var(--color-dark-border);
     color: color-mix(in oklab, var(--color-dark-text-subtle) 78%, transparent);

package/src/components/collection-query-props.ts

@@ -15,6 +15,12 @@ interface CollectionQueryBaseProps {
   filtersClass?: string;
   /** Optional wrapper class for pager row. */
   pagerClass?: string;
+  /** Available page sizes for server-mode size selector. */
+  sizeOptions?: number[];
+  /** Toggle server-mode page size selector visibility. */
+  showPageSize?: boolean;
+  /** Optional wrapper class for page-size selector. */
+  pageSizeClass?: string;
   /** Visible cards per page in client mode. */
   perPage?: number;
   /** Classes applied to the host wrapper element in client mode. */