@ulu/frontend-vue 0.1.0-beta.14 → 0.1.0-beta.16

package/lib/components/navigation/UluPager.vue

@@ -0,0 +1,102 @@
+<template>
+  <nav v-if="items" class="pager" role="navigation" :aria-labelledby="headingId">
+    <component :is="titleElement" :id="headingId" class="hidden-visually">Pagination</component>
+    <ul class="pager__items js-pager__items">
+      <!-- First page link -->
+      <li v-if="items.first" class="pager__item pager__item--first">
+        <router-link :to="items.first.href" title="Go to first page" v-bind="items.first.attributes">
+          <span class="hidden-visually">First page</span>
+          <UluIcon icon="fas fa-angle-double-left" aria-hidden="true" />
+        </router-link>
+      </li>
+
+      <!-- Previous page link -->
+      <li v-if="items.previous" class="pager__item pager__item--previous">
+        <router-link :to="items.previous.href" title="Go to previous page" rel="prev" v-bind="items.previous.attributes">
+          <span class="hidden-visually">Previous page</span>
+          <UluIcon icon="fas fa-angle-left" aria-hidden="true" />
+        </router-link>
+      </li>
+
+      <!-- Ellipsis for previous pages -->
+      <li v-if="ellipses.previous" class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
+
+      <!-- Page number links -->
+      <li v-for="(item, key) in items.pages" :key="key" :class="['pager__item', { 'is-active': current == key }]">
+        <router-link :to="item.href" :title="getPageTitle(key)" v-bind="item.attributes">
+          <span class="hidden-visually">
+            {{ current == key ? 'Current page' : 'Page' }}
+          </span>
+          {{ key }}
+        </router-link>
+      </li>
+
+      <!-- Ellipsis for next pages -->
+      <li v-if="ellipses.next" class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
+
+      <!-- Next page link -->
+      <li v-if="items.next" class="pager__item pager__item--next">
+        <router-link :to="items.next.href" title="Go to next page" rel="next" v-bind="items.next.attributes">
+          <span class="hidden-visually">Next page</span>
+          <UluIcon icon="fas fa-angle-right" aria-hidden="true" />
+        </router-link>
+      </li>
+
+      <!-- Last page link -->
+      <li v-if="items.last" class="pager__item pager__item--last">
+        <router-link :to="items.last.href" title="Go to last page" v-bind="items.last.attributes">
+          <span class="hidden-visually">Last page</span>
+          <UluIcon icon="fas fa-angle-double-right" aria-hidden="true" />
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup>
+import UluIcon from '../elements/UluIcon.vue';
+
+let pagerCounter = 0;
+
+const props = defineProps({
+  /**
+   * The HTML element to use for the visually hidden title.
+   */
+  titleElement: {
+    type: String,
+    default: 'h4'
+  },
+  /**
+   * List of pager items.
+   */
+  items: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * The page number of the current page.
+   */
+  current: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * Ellipses configuration.
+   */
+  ellipses: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+const headingId = `ulu-pager-${ pagerCounter++ }`;
+
+/**
+ * Generates the title for a page link.
+ * @param {string|number} key - The page number.
+ * @returns {string} The title for the page link.
+ */
+function getPageTitle(key) {
+  return props.current == key ? 'Current page' : `Go to page ${key}`;
+}
+</script>

package/lib/components/systems/facets/ExampleFacetsWithPagination.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="BibliographyList">
+    <LayoutListPage title="Bibliography" icon="type:bibliography">
+      <template #intro>
+        <AppContent uid="bibliographyIntroduction" />
+      </template>
+      <template #default>
+        <UluFacetsSidebarLayout>
+          <template #sidebar>
+            <UluFacetsSearch v-model="searchValue" />
+            <UluFacetsSort v-model="selectedSort" :sort-types="sortTypes" />
+            <UluFacetsFilters :facets="facets" @facet-change="handleFacetChange" />
+          </template>
+          <template #main>
+            <UluFacetsResults :items="paginatedItems">
+              <template #item="{ item }">
+                <div class="source-item">
+                  <h3>{{ item.title || "NO TITLE" }}</h3>
+                  <div>
+                    <PortableText v-if="item.citation" :value="item.citation" />
+                  </div>
+                  <small v-if="item.publicationDate">Published on: {{ item.publicationDate }}</small>
+                </div>
+              </template>
+            </UluFacetsResults>
+            <UluPager
+              v-if="totalPages > 1"
+              :items="pagerItems"
+              :current="currentPage"
+              :ellipses="pagerEllipses"
+              class="mt-4"
+            />
+          </template>
+        </UluFacetsSidebarLayout>
+      </template>
+    </LayoutListPage>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from "vue";
+  import { PortableText } from "@portabletext/vue";
+  import sources from "@/api/virtual/sources.js?virtual-module";
+  import {
+    useFacets,
+    usePagination,
+    UluFacetsSidebarLayout,
+    UluFacetsFilters,
+    UluFacetsSort,
+    UluFacetsSearch,
+    UluFacetsResults
+  } from "@ulu/frontend-vue";
+
+  const sorterDateLatest = (a, b) => new Date(b.publicationDate) - new Date(a.publicationDate);
+
+  const config = {
+    facetFields: [
+      { name: "Chapters", uid: "chapters", open: false, getValue: item => item.chapters?.map(c => c.uuid) },
+      { name: "Types", uid: "types", open: true },
+      { name: "Topics", uid: "topics", open: true },
+      { name: "Citation Type", uid: "citationType", open: true },
+      { name: "Source Type", uid: "sourceType", open: true },
+      { name: "Authors", uid: "authors", open: false },
+      { name: "Source Name", uid: "sourceName", open: false }
+    ],
+    extraSortTypes: {
+      newest: {
+        text: "Date (Newest)",
+        sort: items => [...items].sort(sorterDateLatest)
+      },
+      oldest: {
+        text: "Date (Oldest)",
+        sort: items => [...items].sort(sorterDateLatest).reverse()
+      }
+    },
+    initialSortType: "az",
+    // Remove quotes and stuff from beginning when sorting
+    getSortValue: item => item.title ? item.title.replace(/^[^A-Za-z0-9]+/, "") : "",
+    searchOptions: {
+      keys: ["title", "authors", "sourceName", "topics", "types", "citation"]
+    }
+  };
+
+  const itemsPerPage = 20;
+
+  const {
+    facets,
+    searchValue,
+    selectedSort,
+    sortTypes,
+    displayItems,
+    handleFacetChange,
+  } = useFacets(ref(sources), config);
+
+  const {
+    currentPage,
+    totalPages,
+    paginatedItems,
+    pagerItems,
+    pagerEllipses
+  } = usePagination(displayItems, itemsPerPage);
+</script>
+
+<style lang="scss">
+// Add some basic styling for the item display
+.source-item {
+  padding: 1rem;
+  border-bottom: 1px solid #eee;
+
+  h3 {
+    margin: 0 0 0.5rem;
+  }
+
+  p {
+    margin: 0 0 0.5rem;
+    font-style: italic;
+  }
+}
+</style>

package/lib/composables/index.js

@@ -8,4 +8,5 @@ export { useIcon } from './useIcon.js';
 export { useModifiers } from './useModifiers.js';
 export { useWindowResize } from './useWindowResize.js';
 export { useRequiredInject } from './useRequiredInject.js';
-export { useBreakpointManager } from './useBreakpointManager.js';
+export { useBreakpointManager } from './useBreakpointManager.js';
+export { usePagination } from './usePagination.js';

package/lib/composables/usePagination.js

@@ -0,0 +1,122 @@
+import { computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+/**
+ * A Vue composable for handling pagination logic.
+ * It interacts with vue-router to keep the current page in the URL query string.
+ *
+ * @param {import('vue').Ref<Array<any>>} items - A ref containing the full list of items to be paginated.
+ * @param {number} itemsPerPage - The number of items to display per page.
+ * @returns {{
+ *   currentPage: import('vue').ComputedRef<number>,
+ *   totalPages: import('vue').ComputedRef<number>,
+ *   paginatedItems: import('vue').ComputedRef<Array<any>>,
+ *   pagerItems: import('vue').ComputedRef<object|null>,
+ *   pagerEllipses: import('vue').ComputedRef<{previous: boolean, next: boolean}>
+ * }} - An object containing reactive properties for pagination.
+ */
+export function usePagination(items, itemsPerPage) {
+  const route = useRoute();
+  const router = useRouter();
+
+  const currentPage = computed(() => {
+    const page = parseInt(route.query.page || '1', 10);
+    return isNaN(page) || page < 1 ? 1 : page;
+  });
+
+  const totalPages = computed(() => {
+    if (!items.value || items.value.length === 0) return 1;
+    return Math.ceil(items.value.length / itemsPerPage);
+  });
+
+  watch(totalPages, (newTotalPages) => {
+    if (currentPage.value > newTotalPages) {
+      router.push({ query: { ...route.query, page: newTotalPages } });
+    }
+  });
+
+  const paginatedItems = computed(() => {
+    const start = (currentPage.value - 1) * itemsPerPage;
+    const end = start + itemsPerPage;
+    return items.value.slice(start, end);
+  });
+
+  const pagerItems = computed(() => {
+    if (totalPages.value <= 1) {
+      return null;
+    }
+
+    const items = {
+      pages: {}
+    };
+    const page = currentPage.value;
+    const total = totalPages.value;
+    const maxPagesToShow = 5;
+
+    const createRoute = (p) => {
+      return { query: { ...route.query, page: p } };
+    };
+
+    if (page > 1) {
+      items.first = { href: createRoute(1) };
+      items.previous = { href: createRoute(page - 1) };
+    }
+
+    if (page < total) {
+      items.next = { href: createRoute(page + 1) };
+      items.last = { href: createRoute(total) };
+    }
+
+    let startPage, endPage;
+    if (total <= maxPagesToShow) {
+      startPage = 1;
+      endPage = total;
+    } else {
+      const maxPagesBeforeCurrent = Math.floor(maxPagesToShow / 2);
+      const maxPagesAfterCurrent = Math.ceil(maxPagesToShow / 2) - 1;
+      if (page <= maxPagesBeforeCurrent) {
+        startPage = 1;
+        endPage = maxPagesToShow;
+      } else if (page + maxPagesAfterCurrent >= total) {
+        startPage = total - maxPagesToShow + 1;
+        endPage = total;
+      } else {
+        startPage = page - maxPagesBeforeCurrent;
+        endPage = page + maxPagesAfterCurrent;
+      }
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      items.pages[i] = { href: createRoute(i) };
+    }
+
+    return items;
+  });
+
+  const pagerEllipses = computed(() => {
+    const ellipses = { previous: false, next: false };
+    if (!pagerItems.value || !pagerItems.value.pages) return ellipses;
+
+    const pageKeys = Object.keys(pagerItems.value.pages).map(Number);
+    if (pageKeys.length === 0) return ellipses;
+
+    const firstPageInPager = Math.min(...pageKeys);
+    const lastPageInPager = Math.max(...pageKeys);
+
+    if (firstPageInPager > 1) {
+      ellipses.previous = true;
+    }
+    if (lastPageInPager < totalPages.value) {
+      ellipses.next = true;
+    }
+    return ellipses;
+  });
+
+  return {
+    currentPage,
+    totalPages,
+    paginatedItems,
+    pagerItems,
+    pagerEllipses
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.14",
+  "version": "0.1.0-beta.16",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [

package/types/composables/index.d.ts

@@ -3,4 +3,5 @@ export { useModifiers } from "./useModifiers.js";
 export { useWindowResize } from "./useWindowResize.js";
 export { useRequiredInject } from "./useRequiredInject.js";
 export { useBreakpointManager } from "./useBreakpointManager.js";
+export { usePagination } from "./usePagination.js";
 //# sourceMappingURL=index.d.ts.map

package/types/composables/usePagination.d.ts

@@ -0,0 +1,25 @@
+/**
+ * A Vue composable for handling pagination logic.
+ * It interacts with vue-router to keep the current page in the URL query string.
+ *
+ * @param {import('vue').Ref<Array<any>>} items - A ref containing the full list of items to be paginated.
+ * @param {number} itemsPerPage - The number of items to display per page.
+ * @returns {{
+ *   currentPage: import('vue').ComputedRef<number>,
+ *   totalPages: import('vue').ComputedRef<number>,
+ *   paginatedItems: import('vue').ComputedRef<Array<any>>,
+ *   pagerItems: import('vue').ComputedRef<object|null>,
+ *   pagerEllipses: import('vue').ComputedRef<{previous: boolean, next: boolean}>
+ * }} - An object containing reactive properties for pagination.
+ */
+export function usePagination(items: import("vue").Ref<Array<any>>, itemsPerPage: number): {
+    currentPage: import("vue").ComputedRef<number>;
+    totalPages: import("vue").ComputedRef<number>;
+    paginatedItems: import("vue").ComputedRef<Array<any>>;
+    pagerItems: import("vue").ComputedRef<object | null>;
+    pagerEllipses: import("vue").ComputedRef<{
+        previous: boolean;
+        next: boolean;
+    }>;
+};
+//# sourceMappingURL=usePagination.d.ts.map

package/types/composables/usePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../lib/composables/usePagination.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,qCAVW,OAAO,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,gBAC7B,MAAM,GACJ;IACR,WAAW,EAAE,OAAO,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/C,UAAU,EAAE,OAAO,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9C,cAAc,EAAE,OAAO,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACtD,UAAU,EAAE,OAAO,KAAK,EAAE,WAAW,CAAC,MAAM,GAAC,IAAI,CAAC,CAAC;IACnD,aAAa,EAAE,OAAO,KAAK,EAAE,WAAW,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAC,CAAC,CAAA;CAC7E,CA0GH"}