@ulu/frontend-vue 0.1.0-beta.9 → 0.1.1-beta.1

package/lib/components/forms/UluSearchForm.vue

@@ -13,19 +13,20 @@
       class="search-form__submit button button--primary"
       aria-label="Submit Search"
     >
-      <FaIcon :icon="$site.getIcon('search')"/>
+      <UluIcon icon="type:search" />
     </button>
   </div>
 </template>
 
-<script>
-  export default {
-    name: "SearchForm",
-    props: {
-      placeholder: {
-        type: String,
-        default: "Titles, keyword…"
-      }
+<script setup>
+  import UluIcon from "../elements/UluIcon.vue";
+  defineProps({
+    /**
+     * The placeholder text for the search input.
+     */
+    placeholder: {
+      type: String,
+      default: "Titles, keyword…"
     }
-  };
+  });
 </script>

package/lib/components/forms/UluSelectableMenu.vue

@@ -0,0 +1,99 @@
+<template>
+  <div 
+    class="menu-stack form-theme" 
+    :class="{ 'menu-stack--hide-inputs' : hideInputs }"
+    :role="groupRole" 
+    :aria-labelledby="legendId"
+  >
+    <div v-if="legend" :id="legendId" class="hidden-visually">{{ legend }}</div>
+    <ul class="menu-stack__list">
+      <li class="menu-stack__item" v-for="option in options" :key="option.uid">
+        <div class="menu-stack__selectable">
+          <input
+            :type="type"
+            :id="getId(option)"
+            :name="name"
+            :value="option.uid"
+            :checked="isChecked(option)"
+            @change="handleChange(option, $event)"
+          >
+          <label :for="getId(option)">
+            <slot :option="option">
+              {{ option?.label || option?.title || option?.text }}
+            </slot>
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * The legend for the menu.
+   */
+  legend: String,
+  /**
+   * An array of options for the menu.
+   */
+  options: Array,
+  /**
+   * The type of input to use ('checkbox' or 'radio').
+   */
+  type: {
+    type: String,
+    default: 'checkbox',
+  },
+  /**
+   * The value of the menu (for v-model).
+   */
+  modelValue: [String, Array],
+  /**
+   * If true, the input elements will be visually hidden.
+   */
+  hideInputs: Boolean
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const name = computed(() => props.legend ? props.legend.toLowerCase().replace(/\s+/g, '-') : `menu-${ Math.random().toString(36).substring(7) }`);
+const legendId = computed(() => name.value ? `${name.value}-legend` : null);
+const groupRole = computed(() => props.type === 'radio' ? 'radiogroup' : 'group');
+
+const getId = (option) => `${name.value}-${option.uid}`;
+
+const isChecked = (option) => {
+  if (props.type === 'radio') {
+    return props.modelValue === option.uid;
+  }
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(option.uid);
+  }
+  if (props.type === 'checkbox') {
+    return option.checked || false;
+  }
+  return false;
+};
+
+const handleChange = (option, event) => {
+  if (props.type === 'radio') {
+    emit('update:modelValue', option.uid);
+  } else {
+    if (Array.isArray(props.modelValue)) {
+      const newValue = [...props.modelValue];
+      const index = newValue.indexOf(option.uid);
+      if (index > -1) {
+        newValue.splice(index, 1);
+      } else {
+        newValue.push(option.uid);
+      }
+      emit('update:modelValue', newValue);
+    } else {
+      option.checked = event.target.checked;
+    }
+  }
+};
+</script>

package/lib/components/index.js

@@ -4,7 +4,7 @@
  * - Used in main plugin and bundle exports
  */
 export { default as UluAccordion } from './collapsible/UluAccordion.vue';
-export { default as UluCollapsibleRegion } from './collapsible/UluCollapsibleRegion.vue';
+export { default as UluCollapsible } from './collapsible/UluCollapsible.vue';
 export { default as UluDropdown } from './collapsible/UluDropdown.vue';
 export { default as UluModal } from './collapsible/UluModal.vue';
 export { default as UluOverflowPopover } from './collapsible/UluOverflowPopover.vue';
@@ -17,6 +17,7 @@ export { default as UluAlert } from './elements/UluAlert.vue';
 export { default as UluBadge } from './elements/UluBadge.vue';
 export { default as UluBadgeStack } from './elements/UluBadgeStack.vue';
 export { default as UluButton } from './elements/UluButton.vue';
+export { default as UluButtonVerbose } from './elements/UluButtonVerbose.vue';
 export { default as UluCallout } from './elements/UluCallout.vue';
 export { default as UluCard } from './elements/UluCard.vue';
 export { default as UluDefinitionList } from './elements/UluDefinitionList.vue';
@@ -26,7 +27,7 @@ export { default as UluList } from './elements/UluList.vue';
 export { default as UluMain } from './elements/UluMain.vue';
 export { default as UluSpokeSpinner } from './elements/UluSpokeSpinner.vue';
 export { default as UluTag } from './elements/UluTag.vue';
-export { default as UluCheckboxMenu } from './forms/UluCheckboxMenu.vue';
+export { default as UluSelectableMenu } from './forms/UluSelectableMenu.vue';
 export { default as UluFileDisplay } from './forms/UluFileDisplay.vue';
 export { default as UluFormFile } from './forms/UluFormFile.vue';
 export { default as UluFormMessage } from './forms/UluFormMessage.vue';
@@ -49,5 +50,5 @@ export { default as UluPlaceholderText } from './utils/UluPlaceholderText.vue';
 export { default as UluRouteAnnouncer } from './utils/UluRouteAnnouncer.vue';
 export { default as UluAnimateNumber } from './visualizations/UluAnimateNumber.vue';
 export { default as UluProgressBar } from './visualizations/UluProgressBar.vue';
-export { default as UluProgressDonut } from './visualizations/UluProgressDonut.vue';
+export { default as UluProgressCircle } from './visualizations/UluProgressCircle.vue';
 export * from './systems/index.js';

package/lib/components/layout/UluTitleRail.vue

@@ -37,11 +37,20 @@
       UluIcon
     },
     props: {
+      /**
+       * Icon to display next to the title.
+       */
       icon: String,
+      /**
+       * The alignment of the icon with the title.
+       */
       iconAlign: {
         type: String,
         default: "baseline"
       },
+      /**
+       * Classes for the different elements in the component.
+       */
       classes: {
         type: Object,
         default: () => ({
@@ -49,11 +58,20 @@
           icon: "margin-right-small"
         })
       },
+      /**
+       * The title to display.
+       */
       title: String,
+      /**
+       * The HTML element to use for the title.
+       */
       titleElement: {
         type: String,
         default: "h2"
       },
+      /**
+       * If true, a rule will be displayed under the title.
+       */
       rule: Boolean
     }
   }

package/lib/components/layout/UluWhenBreakpoint.vue

@@ -7,8 +7,17 @@
   import { useRequiredInject } from '../../composables/useRequiredInject.js';
 
   const props = defineProps({
+    /**
+     * The maximum breakpoint to show the content at.
+     */
     max: String,
+    /**
+     * The minimum breakpoint to show the content at.
+     */
     min: String,
+    /**
+     * Only show the content at this breakpoint.
+     */
     only: String,
   });
 

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,6 +16,11 @@
             {{ 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
@@ -24,7 +30,7 @@
           </slot>
         </template>
       </li>
-    </ul>
+    </ol>
   </nav>
 </template>
 
@@ -63,6 +69,7 @@
           list: "breadcrumb__list",
           item: "breadcrumb__item",
           link: "breadcrumb__link",
+          current: "breadcrumb__current",
           separator: "breadcrumb__separator"
         })
       }

package/lib/components/navigation/UluMenu.vue

@@ -3,7 +3,12 @@
     <li 
       v-for="(item, index) in items" 
       :key="index" 
-      :class="[classes.item, item?.classes?.item]"
+      :class="[
+        classes.item,
+        item?.classes?.item,
+        item.separatorBefore ? classes.itemSeparatorBefore : '',
+        item.separatorAfter ? classes.itemSeparatorAfter : ''
+      ]"
     >
       <!-- 
         Note: The ternary spread method below is conditionally adding certain 
@@ -60,7 +65,7 @@
       /**
        * Fired anytime a item is clicked
        */
-      "itemClick"
+      "item-click"
     ],
     props: {
       /**
@@ -98,7 +103,7 @@
         if (item.click) {
           item.click(event);
         }
-        this.$emit("itemClick", { item, event });
+        this.$emit("item-click", { item, event });
       }
     }
   };

package/lib/components/navigation/UluMenuStack.vue

@@ -13,7 +13,9 @@
         item: 'menu-stack__item',
         link: 'menu-stack__link',
         linkText: 'menu-stack__link-text',
-        linkIcon: 'menu-stack__link-icon'
+        linkIcon: 'menu-stack__link-icon',
+        itemSeparatorBefore: 'menu-stack__item--separator-before',
+        itemSeparatorAfter: 'menu-stack__item--separator-after'
       }" 
       :noChildren="noChildren"
     />

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,91 @@
+<template>
+  <div class="UluFacetsFilters">
+    <UluCollapsible
+      class="ulu-facets__group"
+      v-for="group in facets"
+      :key="group.uid"
+      :classes="{
+        container: ['ulu-facets__group', classes.group],
+        trigger: ['ulu-facets__group-toggle', classes.groupToggle],
+        content: ['ulu-facets__group-content', classes.groupContent]
+      }"
+      :startOpen="group.open"
+    >
+      <template #trigger="{ 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)"
+        />
+        <UluCollapsible
+          v-if="group.children.length > maxVisible"
+          class="ulu-facets__more-facets"
+          :class="classes.moreFacets"
+          :clickOutsideCloses="false"
+          :closeOnEscape="false"
+          :transitionHeight="true"
+        >
+          <template #trigger="{ isOpen }">
+            {{ isOpen ? "View Less" : "Show 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>
+        </UluCollapsible>
+      </template>
+    </UluCollapsible>
+  </div>
+</template>
+
+<script setup>
+  import UluFacetsList from "./UluFacetsList.vue";
+  import UluCollapsible from "../../collapsible/UluCollapsible.vue";
+
+  defineProps({
+    /**
+     * An object of classes to apply to the component.
+     */
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * The maximum number of facets to show before showing the "More" button.
+     */
+    maxVisible: {
+      type: Number,
+      default: 5
+    },
+    /**
+     * An array of facet groups to display.
+     */
+    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>