@ulu/frontend-vue 0.1.0-beta.2 → 0.1.0-beta.21

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" />
+            <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/UluFacetsFilters.vue

@@ -0,0 +1,73 @@
+<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"
+          :classFacet="classes.facet"
+          @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"
+              :classFacet="classes.facet"
+              @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']);
+</script>

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

@@ -10,7 +10,8 @@
         class="UluFacets__facet-checkbox"
         :id="facetCheckboxId(facet)"
         type="checkbox" 
-        v-model="facet.selected"
+        :checked="facet.selected"
+        @change="emit('facet-change', { groupUid, facetUid: facet.uid, selected: $event.target.checked })"
       >
       <label 
         class="UluFacets__facet-label" 
@@ -22,18 +23,16 @@
   </ul>
 </template>
 
-<script>
-  export default {
-    name: 'UluFacetsList',
-    props: {
-      groupUid: String,
-      children: Array,
-      classFacet: String
-    },
-    methods: {
-      facetCheckboxId(facet) {
-        return `facet-${ this.groupUid }-${ facet.uid }`;
-      }
-    }
+<script setup>
+  const props = defineProps({
+    groupUid: String,
+    children: Array,
+    classFacet: String
+  });
+
+  const emit = defineEmits(['facet-change']);
+
+  function facetCheckboxId(facet) {
+    return `facet-${props.groupUid}-${facet.uid}`;
   }
 </script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="UluFacetsResults">
+    <transition-group 
+      v-if="items.length"
+      :tag="tag" 
+      :name="transitionName"
+      class="UluFacetsResults__list"
+    >
+      <li
+        class="UluFacetsResults__item"
+        v-for="(item, index) in items"
+        :key="item.id || index"
+      >
+        <slot name="item" :item="item" :index="index"></slot>
+      </li>
+    </transition-group>
+    <div v-else class="UluFacetsResults__empty">
+      <slot name="empty">
+        <p>No matching items found.</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  defineProps({
+    items: {
+      type: Array,
+      required: true
+    },
+    tag: {
+      type: String,
+      default: 'ul'
+    },
+    transitionName: {
+      type: String,
+      default: 'UluFacetsFade'
+    }
+  });
+</script>
+
+<style lang="scss">
+  .UluFacetsResults__list {
+    list-style: none;
+    padding: 0;
+  }
+
+  .UluFacetsFade-enter-active,
+  .UluFacetsFade-leave-active {
+    transition: opacity 0.25s ease;
+  }
+
+  .UluFacetsFade-enter-from,
+  .UluFacetsFade-leave-to {
+    opacity: 0;
+  }
+</style>

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

@@ -10,58 +10,35 @@
       type="text" 
       :placeholder="placeholder"
     >
-    <!-- <button 
-      v-if="value"
-      :class="classes.searchClear" 
-      @click="clear"
-      :aria-label="classes.searchClearIcon ? 'Clear Search' : false"
-      type="button" 
-    >
-      <span 
-        v-if="classes.searchClearIcon" 
-        :class="classes.searchClearIcon"
-        aria-hidden="true"
-      ></span>
-      <span v-else>
-        Clear
-      </span>
-    </button> -->
   </div>
 </template>
 
-<script>
-  let uid = 0;
-  export default {
-    name: 'UluFacetsSearch',
-    props: {
-      classes: Object,
-      modelValue: String,
-      placeholder: {
-        type: String,
-        default: "Keywords…"
-      }
-    },
-    data() {
-      return {
-        id: `facet-view-keyword-${ ++uid }`
-      }
+<script setup>
+  import { computed } from 'vue';
+
+  const props = defineProps({
+    classes: {
+      type: Object,
+      default: () => ({})
     },
-    computed: {
-      localValue: {
-        get() {
-          return this.modelValue;
-        },
-        set(val) {
-          this.$emit('update:modelValue', val);
-        }
-      }
+    modelValue: String,
+    placeholder: {
+      type: String,
+      default: "Keywords…"
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  let uid = 0;
+  const id = `facet-view-keyword-${++uid}`;
+
+  const localValue = computed({
+    get() {
+      return props.modelValue;
     },
-    methods: {
-      clear() {
-        // this.value = null;
-        // this.applied = false;
-        // this.$emit("search", null);
-      }
+    set(val) {
+      emit('update:modelValue', val);
     }
-  }
-</script>
+  });
+</script>

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="UluFacetsSidebarLayout">
+    <div class="UluFacetsSidebarLayout__header">
+      <slot name="header"></slot>
+    </div>
+    <div class="UluFacetsSidebarLayout__body">
+      <div class="UluFacetsSidebarLayout__sidebar">
+        <slot name="sidebar"></slot>
+      </div>
+      <div class="UluFacetsSidebarLayout__main">
+        <slot name="main"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// This component is purely for layout, no logic needed.
+</script>
+
+<style lang="scss">
+.UluFacetsSidebarLayout__body {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 250px 1fr;
+  }
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="UluFacetsSort" :class="classes.sortForm">
+    <label 
+      :for="sortId" 
+      :class="classes.sortFormLabel"
+    >
+      <slot>Sort:</slot>
+    </label>
+    <select 
+      :value="modelValue"
+      @change="emit('update:modelValue', $event.target.value)"
+      :id="sortId" 
+      :class="classes.sortFormSelect"
+    >
+      <option v-for="(item, key) in sortTypes" :value="key" :key="key">
+        {{ item.text }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  let idCounter = 0;
+
+  defineProps({
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    sortTypes: {
+      type: Object,
+      default: () => ({})
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  const sortId = ref(`ulu-facet-sort-${++idCounter}`);
+</script>

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/facets/_mock-data.js

@@ -0,0 +1,40 @@
+export const initialMockFacets = [
+  {
+    name: 'Category',
+    uid: 'category',
+    open: true,
+    children: [
+      { uid: 'cat1', label: 'Design' },
+      { uid: 'cat2', label: 'Development' },
+      { uid: 'cat3', label: 'Marketing' },
+      { uid: 'cat4', label: 'Business' },
+      { uid: 'cat5', label: 'Lifestyle' },
+      { uid: 'cat6', label: 'Technology' },
+    ]
+  },
+  {
+    name: 'Author',
+    uid: 'author',
+    open: true,
+    children: [
+      { uid: 'jane-doe', label: 'Jane Doe' },
+      { uid: 'john-smith', label: 'John Smith' },
+      { uid: 'peter-jones', label: 'Peter Jones' },
+    ]
+  }
+];
+
+export const mockItems = [
+  { id: 1, title: 'The Art of UI Design', description: 'A deep dive into creating beautiful user interfaces.', category: ['cat1', 'cat2'], author: ['jane-doe'], date: new Date(2023, 5, 15) },
+  { id: 2, title: 'Vue.js for Beginners', description: 'Getting started with the popular JavaScript framework.', category: ['cat2', 'cat6'], author: ['john-smith'], date: new Date(2023, 8, 22) },
+  { id: 3, title: 'Content Marketing Strategies', description: 'How to attract and retain customers with great content.', category: ['cat3'], author: ['peter-jones'], date: new Date(2022, 11, 10) },
+  { id: 4, title: 'Startup Funding 101', description: 'A guide to raising capital for your new venture.', category: ['cat4'], author: ['jane-doe'], date: new Date(2024, 1, 5) },
+  { id: 5, title: 'Minimalist Living', description: 'Declutter your life and find more happiness.', category: ['cat5'], author: ['john-smith'], date: new Date(2023, 3, 30) },
+  { id: 6, title: 'The Future of AI', description: 'Exploring the impact of artificial intelligence on society.', category: ['cat6'], author: ['peter-jones'], date: new Date(2024, 0, 1) },
+  { id: 7, title: 'Advanced CSS Techniques', description: 'Take your styling skills to the next level.', category: ['cat1', 'cat2'], author: ['jane-doe'], date: new Date(2023, 10, 18) },
+  { id: 8, title: 'Building a Scalable API', description: 'Best practices for designing and implementing APIs.', category: ['cat2', 'cat6'], author: ['john-smith'], date: new Date(2023, 7, 3) },
+  { id: 9, title: 'Social Media for Business', description: 'Leveraging social platforms for growth.', category: ['cat3'], author: ['peter-jones'], date: new Date(2022, 9, 14) },
+  { id: 10, title: 'Negotiation and Deal Making', description: 'Master the art of getting what you want.', category: ['cat4'], author: ['jane-doe'], date: new Date(2023, 6, 25) },
+  { id: 11, title: 'Healthy Eating Habits', description: 'A guide to a balanced and nutritious diet.', category: ['cat5'], author: ['john-smith'], date: new Date(2024, 2, 12) },
+  { id: 12, title: 'Quantum Computing Explained', description: 'A simple introduction to a complex topic.', category: ['cat6'], author: ['peter-jones'], date: new Date(2023, 9, 9) },
+];