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

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,106 @@
+<template>
+  <div 
+    class="menu-stack form-theme" 
+    :class="{ 
+      'menu-stack--hide-inputs' : hideInputs,
+      'menu-stack--compact' : compact
+    }"
+    :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,
+  /**
+   * Use compact modifier on menu stack
+   */
+  compact: Boolean,
+  /**
+   * 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 
@@ -12,13 +17,15 @@
       <component
         :is="item.to || item.path ? 'router-link' : item.click ? 'button' : 'a'"
         v-bind="{
-          ...(item.to || item.path ? { to: item.to || item.path } : {}),
+          ...(item.to || item.path ? {
+            to: item.to || item.path,
+            activeClass: classes.linkActive || null,
+            exactActiveClass: classes.linkExactActive || null
+          } : {}),
           ...(item.href ? { 'href' : item.href || '#' } : {}),
         }"
         @click="(event) => { handleItemClick(event, item) }"
         :class="[classes.link, item?.classes?.link]"
-        :activeClass="classes.linkActive"
-        :exactActiveClass="classes.linkExactActive"
         :aria-label="iconOnly ? item.title : null"
         :id="item.id"
         v-ulu-tooltip="iconOnly ? item.title : item.tooltip || null" 
@@ -60,7 +67,7 @@
       /**
        * Fired anytime a item is clicked
        */
-      "itemClick"
+      "item-click"
     ],
     props: {
       /**
@@ -98,7 +105,7 @@
         if (item.click) {
           item.click(event);
         }
-        this.$emit("itemClick", { item, event });
+        this.$emit("item-click", { item, event });
       }
     }
   };

package/lib/components/navigation/UluMenuStack.vue

@@ -1,10 +1,8 @@
 <template>
-  <nav 
+  <component
     class="menu-stack"
-    :class="{
-      'menu-stack--hanging' : hanging,
-      'menu-stack--compact' : compact
-    }"
+    :is="containerElement" 
+    :class="resolvedModifiers"
   >
     <UluMenu 
       :items="items" 
@@ -13,37 +11,58 @@
         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"
     />
-  </nav>
+  </component>
 </template>
 
-<script>
+<script setup>
+  import { computed } from "vue";
   import UluMenu from "./UluMenu.vue";
-  export default {
-    name: "UluMenuStack",
-    components: {
-      UluMenu
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  const props = defineProps({
+    /**
+     * Menu item (see UluMenu)
+     */
+    items: Array,
+    /**
+    * The HTML element to use as the container (e.g., 'nav', 'div', 'aside').
+     */
+    containerElement: {
+      type: String,
+      default: "nav"
     },
-    props: {
-      /**
-       * Menu item (see UluMenu)
-       */
-      items: Array,
-      /**
-       * Hanging style menu
-       */
-      hanging: Boolean,
-      /**
-       * Compact style menu
-       */
-      compact: Boolean,
-      /**
-       * Don't include children of menu
-       */
-      noChildren: Boolean
-    }
-  };
+    /**
+     * Hanging style menu
+     */
+    hanging: Boolean,
+    /**
+     * Compact style menu
+     */
+    compact: Boolean,
+    /**
+     * Don't include children of menu
+     */
+    noChildren: Boolean,
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array]
+  });
+
+  const internalModifiers = computed(() => ({
+    'hanging' : props.hanging,
+    'compact' : props.compact,
+  }));
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    internal: internalModifiers,
+    baseClass: "menu-stack"
+  });
 </script>

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>