@ulu/frontend-vue 0.1.0-beta.15 → 0.1.0-beta.17

package/lib/components/elements/UluCard.vue

@@ -54,7 +54,7 @@
         </component>
         <slot name="body"/>
       </div>
-      <div class="card__aside" v-if="$slots.body">
+      <div class="card__aside" v-if="$slots.aside">
         <slot name="aside"/>
       </div>
     </div>

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/components/systems/facets/_facets.scss

@@ -54,9 +54,8 @@ $config: (
   $prefix: selector.class("facets");
 
   #{ $prefix }__body {
-        .FacetView__body {
-        display: flex
-;
+    .FacetView__body {
+      display: flex;
     }
   }
 }

package/lib/components/systems/index.js

@@ -5,17 +5,21 @@ export { default as UluFacetsSearch } from './facets/UluFacetsSearch.vue';
 export { default as UluFacetsSidebarLayout } from './facets/UluFacetsSidebarLayout.vue';
 export { default as UluFacetsSort } from './facets/UluFacetsSort.vue';
 export { default as UluFacetsList } from './facets/UluFacetsList.vue';
+
 export { default as UluScrollAnchors } from './scroll-anchors/UluScrollAnchors.vue';
 export { default as UluScrollAnchorsNav } from './scroll-anchors/UluScrollAnchorsNav.vue';
 export { default as UluScrollAnchorsNavAnimated } from './scroll-anchors/UluScrollAnchorsNavAnimated.vue';
 export { default as UluScrollAnchorsSection } from './scroll-anchors/UluScrollAnchorsSection.vue';
+
 export { default as UluShowSkeleton } from './skeleton/UluShowSkeleton.vue';
 export { default as UluSkeletonContent } from './skeleton/UluSkeletonContent.vue';
 export { default as UluSkeletonMedia } from './skeleton/UluSkeletonMedia.vue';
-export { default as UluSkeletonTextInline } from './skeleton/UluSkeletonTextInline.vue';
+export { default as UluSkeletonText } from './skeleton/UluSkeletonText.vue';
+
 export { default as UluImageSlideShow } from './slider/UluImageSlideShow.vue';
 export { default as UluSlideShow } from './slider/UluSlideShow.vue';
 export { default as UluSlideShowSlide } from './slider/UluSlideShowSlide.vue';
+
 export { default as UluTableSticky } from './table-sticky/UluTableSticky.vue';
 export { default as UluTableStickyRows } from './table-sticky/UluTableStickyRows.vue';
 export { default as UluTableStickyTable } from './table-sticky/UluTableStickyTable.vue';

package/lib/components/systems/skeleton/UluShowSkeleton.vue

@@ -1,13 +1,14 @@
 <template>
   <slot v-if="!when"/>
-  <SkeletonTextInline class="skeleton" v-else/>
+  <UluSkeletonText v-else inline/>
 </template>
 
-<script>
-  export default {
-    name: "ShowSkeleton",
-    props: {
-      when: Boolean,
-    },
-  };
+<script setup>
+  import UluSkeletonText from "./UluSkeletonText.vue";
+  defineProps({
+    /**
+     * If true will show whatever is passed to slot, else skeleton text
+     */
+    when: Boolean,
+  });
 </script>

package/lib/components/systems/skeleton/UluSkeletonContent.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="skeleton">
+  <div>
     <div v-for="(line, index) in linesWithSegments" :key="index">
       <span 
         v-for="segment in line"
         :key="segment"
-        class="skeleton__text skeleton__text--inline"
-        :class="{ 'skeleton__alt' : segment.alt }"
+        class="skeleton skeleton--text skeleton--inline"
+        :class="{ 'skeleton--background-alt' : segment.alt }"
         :style="{ width: `${ segment.width }%` }"
       > 
       </span>
@@ -13,48 +13,44 @@
   </div>
 </template>
 
-<script>
+<script setup>
+  import { computed } from "vue";
   import { randomInt } from "@ulu/utils/random.js";
   import { arrayCreate } from "@ulu/utils/array.js";
-  export default {
-    name: "SkeletonContent",
-    props: {
-      lines: {
-        type: Number,
-        default: 6
-      },
-    },
-    methods: {
-      randomInt
+
+  const props = defineProps({
+    /**
+     * Amount of lines to generate
+     */
+    lines: {
+      type: Number,
+      default: 6
     },
-    computed: {
-      /**
-       * Creates the segments (like words) for the given line count
-       * - Uses random number of segments and makes sure to fill the line between 70% - 100%
-       */
-      linesWithSegments() {
-        return arrayCreate(this.lines, () => {
-          const minWidth = 15;
-          const total = randomInt(70, 100);
-          let widthCurrent = 0;
-          const newWidth = () => {
-            const remaining = total - widthCurrent;
-            const width = randomInt(minWidth, remaining);
-            widthCurrent += width;
-            return width;
-          };
-          const segments = [];
-          while (widthCurrent < total - minWidth) {
-            segments.push(newWidth());
-          }
-          const getActualTotal = () => segments.reduce((acc, a) => acc + a, 0);
-          while (getActualTotal() >= total) {
-            let removed = segments.pop();
-            if (!removed) break;
-          }
-          return segments.map(width => ({ width, alt: Math.random() < 0.5 }));
-        });
-      }
+  });
+
+  /**
+   * Creates the segments (like words) for the given line count
+   * - Uses random number of segments and makes sure to fill the line between 70% - 100%
+   */
+  const linesWithSegments = computed(() => arrayCreate(props.lines, () => {
+    const minWidth = 15;
+    const total = randomInt(70, 100);
+    let widthCurrent = 0;
+    const newWidth = () => {
+      const remaining = total - widthCurrent;
+      const width = randomInt(minWidth, remaining);
+      widthCurrent += width;
+      return width;
+    };
+    const segments = [];
+    while (widthCurrent < total - minWidth) {
+      segments.push(newWidth());
+    }
+    const getActualTotal = () => segments.reduce((acc, a) => acc + a, 0);
+    while (getActualTotal() >= total) {
+      let removed = segments.pop();
+      if (!removed) break;
     }
-  };
+    return segments.map(width => ({ width, alt: Math.random() < 0.5 }));
+  }));
 </script>

package/lib/components/systems/skeleton/UluSkeletonMedia.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="skeleton__block skeleton__block--media layout-flex-center-all">
-    <FaIcon style="font-size: 2rem" icon="image"/>
+  <div class="skeleton skeleton-block--media">
+    <UluIcon icon="type:image"/>
   </div>
 </template>
 
-<script>
-  export default {
-    name: "SkeletonMedia",
-  };
+<script setup>
+  import UluIcon from "../../elements/UluIcon.vue";
 </script>

package/lib/components/systems/skeleton/UluSkeletonText.vue

@@ -0,0 +1,27 @@
+<template>
+  <span 
+    class="skeleton skeleton--text"
+    :class="{
+      'skeleton--inline' : inline,
+      'skeleton--background-alt' : alt,
+      [`skeleton--width-${ width }`] : width
+    }"
+  ></span>
+</template>
+
+<script setup>
+  defineProps({
+    /**
+     * Inline modifier
+     */
+    inline: Boolean,
+    /**
+     * Use alternate background color
+     */
+    alt: Boolean,
+    /**
+     * Optional size (width) - should correspond with width setup in scss component
+     */
+    width: String
+  });
+</script>

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/lib/plugins/core/index.js

@@ -21,7 +21,8 @@ const defaults = {
     resizeVertical: "fas fa-grip-lines",
     resizeBoth: "fas fa-grip",
     ellipsis: "fas fa-ellipsis",
-    pathSeparator: "fas fa-chevron-right"
+    pathSeparator: "fas fa-chevron-right",
+    image: "fas fa-image"
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.15",
+  "version": "0.1.0-beta.17",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -35,7 +35,8 @@
     "docs:build": "storybook build -o docs",
     "build": "vite build",
     "types": "npx tsc",
-    "deploy": "npm run types && npm run build && npm run docs:build"
+    "deploy": "npm run types && npm run build && npm run docs:build",
+    "update-contexts": "rm -rf .contexts && mkdir -p .contexts/frontend && cp -R node_modules/@ulu/frontend/scss node_modules/@ulu/frontend/js .contexts/frontend/"
   },
   "keywords": [
     "vue",
@@ -56,7 +57,7 @@
   "homepage": "https://github.com/Jscherbe/frontend-vue#readme",
   "peerDependencies": {
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.94",
+    "@ulu/frontend": "^0.1.0-beta.100",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
   },
@@ -78,7 +79,7 @@
     "@storybook/addon-links": "^9.1.1",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.1.0-beta.94",
+    "@ulu/frontend": "^0.1.0-beta.100",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",
     "react": "^19.1.1",

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"}

package/types/plugins/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/core/index.js"],"names":[],"mappings":"AA6BA,mEAyDC;AA3DD,gCAA0D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/core/index.js"],"names":[],"mappings":"AA8BA,mEAyDC;AA3DD,gCAA0D"}

package/lib/components/systems/skeleton/UluSkeletonTextInline.vue

@@ -1,9 +0,0 @@
-<template>
-  <span class="skeleton__text skeleton__text--inline"></span>
-</template>
-
-<script>
-  export default {
-    name: "SkeletonTextInline",
-  };
-</script>