@ulu/frontend-vue 0.1.0-beta.3 → 0.1.0-beta.30

package/lib/components/navigation/UluBreadcrumb.vue

@@ -4,9 +4,10 @@
     aria-label="Breadcrumb"
     v-if="items.length"
   >
-    <ul :class="classes.list">
+    <ol :class="classes.list">
       <li v-for="(item, index) in items" :key="index" :class="classes.item">
         <router-link
+          v-if="!item.current"
           :to="item.to"
           :class="classes.link"
           :aria-current="item.current ? 'page' : null"
@@ -15,17 +16,21 @@
             {{ item.title }}
           </slot>
         </router-link>
+        <span v-else :class="item.current">
+          <slot :item="item">
+            {{ item.title }}
+          </slot>
+        </span>
         <template v-if="index < items.length - 1">
           <slot name="separator">
             <UluIcon
               :class="classes.separator"
-              type="pathSeparator"
-              :definition="separatorIcon"
+              :icon="separatorIcon || 'type:pathSeparator'"
             />
           </slot>
         </template>
       </li>
-    </ul>
+    </ol>
   </nav>
 </template>
 
@@ -64,6 +69,7 @@
           list: "breadcrumb__list",
           item: "breadcrumb__item",
           link: "breadcrumb__link",
+          current: "breadcrumb__current",
           separator: "breadcrumb__separator"
         })
       }

package/lib/components/navigation/UluMenu.vue

@@ -26,7 +26,7 @@
         <slot :item="item" :index="index">
           <UluIcon 
             v-if="item.icon" 
-            :definition="item.icon" 
+            :icon="item.icon" 
             :class="[classes.linkIcon, item?.classes?.linkIcon]"
           />
           <span :class="[classes.linkText, item?.classes?.linkText]">{{ item.title }}</span>
@@ -60,7 +60,7 @@
       /**
        * Fired anytime a item is clicked
        */
-      "itemClick"
+      "item-click"
     ],
     props: {
       /**
@@ -98,7 +98,7 @@
         if (item.click) {
           item.click(event);
         }
-        this.$emit("itemClick", { item, event });
+        this.$emit("item-click", { item, event });
       }
     }
   };

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" />
+            <UluFacetsFilterLists :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,
+    UluFacetsFilterLists,
+    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/UluFacetsFilterLists.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="UluFacetsFilters">
+    <UluCollapsibleRegion
+      class="UluFacets__group"
+      :class="classes.group"
+      :classToggle="['UluFacets__group-toggle', classes.groupToggle]"
+      :classContent="['UluFacets__group-content', classes.groupContent]"
+      v-for="group in facets"
+      :key="group.uid"
+      :group="group"
+      :startOpen="group.open"
+      :clickOutsideCloses="false"
+      :closeOnEscape="false"
+      :transitionHeight="true"
+    >
+      <template #toggle="{ isOpen }">
+        <slot name="groupToggle" :group="group" :isOpen="isOpen">
+          {{ group.name }}
+        </slot>
+      </template>
+      <template #default>
+        <UluFacetsList
+          :children="group.children.slice(0, maxVisible)"
+          :groupUid="group.uid"
+          :groupName="group.name"
+          :type="group.multiple ? 'checkbox' : 'radio'"
+          :model-value="selectedUids(group)"
+          @facet-change="emit('facet-change', $event)"
+        />
+        <UluCollapsibleRegion
+          v-if="group.children.length > maxVisible"
+          class="UluFacets__more-facets"
+          :class="classes.moreFacets"
+          :clickOutsideCloses="false"
+          :closeOnEscape="false"
+          :transitionHeight="true"
+        >
+          <template #toggle="{ isOpen }">
+            {{ isOpen ? "- Less" : "+ More" }}
+          </template>
+          <template #default>
+            <UluFacetsList
+              :children="group.children.slice(maxVisible)"
+              :groupUid="group.uid"
+              :groupName="group.name"
+              :type="group.multiple ? 'checkbox' : 'radio'"
+              :model-value="selectedUids(group)"
+              @facet-change="emit('facet-change', $event)"
+            />
+          </template>
+        </UluCollapsibleRegion>
+      </template>
+    </UluCollapsibleRegion>
+  </div>
+</template>
+
+<script setup>
+  import UluFacetsList from "./UluFacetsList.vue";
+  import UluCollapsibleRegion from "../../collapsible/UluCollapsibleRegion.vue";
+
+  defineProps({
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    maxVisible: {
+      type: Number,
+      default: 5
+    },
+    facets: {
+      type: Array,
+      default: () => []
+    }
+  });
+
+  const emit = defineEmits(['facet-change']);
+
+  const selectedUids = (group) => {
+    if (group.multiple) {
+      return group.children.filter(c => c.selected).map(c => c.uid);
+    }
+    return group.children.find(c => c.selected)?.uid || '';
+  };
+</script>

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

@@ -0,0 +1,112 @@
+<template>
+  <div :class="classes.container">
+    <div v-for="group in facets" :key="group.uid" :class="classes.group">
+      <UluPopover 
+        :classes="{ 
+          trigger: classes.trigger,
+          content: classes.content
+        }
+      ">
+        <template #trigger>
+          <span>{{ group.name }}: <strong>{{ selectedLabel(group) }}</strong></span>
+          <UluIcon :class="classes.triggerIcon" icon="fas fa-chevron-down" />
+        </template>
+        <template #content="{ close }">
+          <UluSelectableMenu
+            :legend="group.name"
+            :type="group.multiple ? 'checkbox' : 'radio'"
+            :options="getMenuOptions(group)"
+            :model-value="selectedUids(group)"
+            @update:model-value="onFilterChange(group, $event, close)"
+          />
+        </template>
+      </UluPopover>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import UluPopover from '../../../plugins/popovers/UluPopover.vue';
+import UluSelectableMenu from '../../forms/UluSelectableMenu.vue';
+import UluIcon from '../../elements/UluIcon.vue';
+
+const props = defineProps({
+  facets: {
+    type: Array,
+    default: () => []
+  },
+  classes: {
+    type: Object,
+    default: () => ({
+      trigger: "button",
+      triggerIcon: "button__icon"
+      // content: null,
+      // container: null,
+      // group: null
+    })
+  }
+});
+
+const emit = defineEmits(['facet-change']);
+
+const getMenuOptions = (group) => {
+  if (group.multiple) {
+    return group.children;
+  }
+  return [{ label: `All ${group.name}s`, uid: '' }, ...group.children];
+};
+
+const selectedUids = (group) => {
+  if (group.multiple) {
+    return group.children.filter(c => c.selected).map(c => c.uid);
+  }
+  return group.children.find(c => c.selected)?.uid || '';
+};
+
+const selectedLabel = (group) => {
+  const selectedItems = group.children.filter(c => c.selected);
+  const count = selectedItems.length;
+
+  if (count === 0) {
+    return 'All';
+  }
+
+  if (group.multiple) {
+    if (count === 1) {
+      return selectedItems[0].label;
+    }
+    return `${count} selected`;
+  }
+
+  return selectedItems[0].label;
+};
+
+function onFilterChange(group, value, closePopover) {
+  if (group.multiple) {
+    const selectedUids = new Set(value);
+    group.children.forEach(facet => {
+      const shouldBeSelected = selectedUids.has(facet.uid);
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: group.uid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
+      }
+    });
+  } else {
+    const selectedUid = value;
+    group.children.forEach(facet => {
+      const shouldBeSelected = facet.uid === selectedUid;
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: group.uid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
+      }
+    });
+    closePopover();
+  }
+}
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+  <div class="UluFacetsDropdownFilters">
+    <div
+      class="UluFacetsDropdownFilters__group"
+      v-for="group in facets"
+      :key="group.uid"
+    >
+      <label :for="`facet-dropdown-${group.uid}`" class="UluFacetsDropdownFilters__label">
+        {{ group.name }}
+      </label>
+      <select
+        :id="`facet-dropdown-${group.uid}`"
+        class="UluFacetsDropdownFilters__select"
+        @change="onFilterChange(group, $event)"
+      >
+        <option value="">All {{ group.name }}s</option>
+        <option
+          v-for="option in group.children"
+          :key="option.uid"
+          :value="option.uid"
+          :selected="option.selected"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  facets: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['facet-change']);
+
+function onFilterChange(group, event) {
+  const selectedUid = event.target.value;
+
+  const currentlySelected = group.children.find(c => c.selected);
+  if (currentlySelected?.uid === selectedUid) return;
+
+  group.children.forEach(facet => {
+    const shouldBeSelected = facet.uid === selectedUid;
+    if (facet.selected !== shouldBeSelected) {
+      emit('facet-change', {
+        groupUid: group.uid,
+        facetUid: facet.uid,
+        selected: shouldBeSelected
+      });
+    }
+  });
+}
+</script>
+
+<style lang="scss">
+.UluFacetsDropdownFilters {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.UluFacetsDropdownFilters__group {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+  <div class="UluFacetsHeaderLayout">
+    <div class="UluFacetsHeaderLayout__header">
+      <slot name="header"></slot>
+    </div>
+    <div class="UluFacetsHeaderLayout__main">
+      <slot name="main"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// This component is purely for layout, no logic needed.
+</script>
+
+<style lang="scss">
+.UluFacetsHeaderLayout__header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+</style>

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

@@ -1,39 +1,67 @@
 <template>
-  <ul class="UluFacets__facet-list">
-    <li 
-      class="UluFacets__facet"
-      :class="classFacet"
-      v-for="facet in children"
-      :key="facet.uid"
-    >
-      <input 
-        class="UluFacets__facet-checkbox"
-        :id="facetCheckboxId(facet)"
-        type="checkbox" 
-        v-model="facet.selected"
-      >
-      <label 
-        class="UluFacets__facet-label" 
-        :for="facetCheckboxId(facet)"
-      >
-        {{ facet.label }}
-      </label>
-    </li>
-  </ul>
+  <UluSelectableMenu
+    class="UluFacets__facet-list"
+    :legend="groupUid"
+    :type="type"
+    :options="menuOptions"
+    :model-value="modelValue"
+    @update:model-value="handleChange"
+  >
+    <template #default="{ option }">
+      {{ option.label }}
+    </template>
+  </UluSelectableMenu>
 </template>
 
-<script>
-  export default {
-    name: 'UluFacetsList',
-    props: {
-      groupUid: String,
-      children: Array,
-      classFacet: String
-    },
-    methods: {
-      facetCheckboxId(facet) {
-        return `facet-${ this.groupUid }-${ facet.uid }`;
+<script setup>
+import { computed } from 'vue';
+import UluSelectableMenu from '../../forms/UluSelectableMenu.vue';
+
+const props = defineProps({
+  groupUid: String,
+  groupName: String,
+  children: Array,
+  type: {
+    type: String,
+    default: 'checkbox',
+  },
+  modelValue: [String, Array],
+});
+
+const emit = defineEmits(['facet-change']);
+
+const menuOptions = computed(() => {
+  if (props.type === 'radio') {
+    return [{ label: `All ${props.groupName}s`, uid: '' }, ...props.children];
+  }
+  return props.children;
+});
+
+function handleChange(value) {
+  if (props.type === 'radio') {
+    const selectedUid = value;
+    props.children.forEach(facet => {
+      const shouldBeSelected = facet.uid === selectedUid;
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: props.groupUid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
+      }
+    });
+  } else {
+    const selectedUids = new Set(value);
+    props.children.forEach(facet => {
+      const shouldBeSelected = selectedUids.has(facet.uid);
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: props.groupUid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
       }
-    }
+    });
   }
+}
 </script>