@ulu/frontend-vue 0.2.0-beta.8 → 0.3.0

package/lib/components/navigation/UluBreadcrumb.vue

@@ -34,45 +34,40 @@
   </nav>
 </template>
 
-<script>
+<script setup>
   import UluIcon from '../elements/UluIcon.vue';
+  
   /**
    * Breadcrumb trail component
    * - Is now agnostic of router, pass precomputed breadcrumb trail via items prop
    */
-  export default {
-    name: 'UluBreadcrumb',
-    components: {
-      UluIcon
+  const props = defineProps({
+    /**
+     * Array of breadcrumb items.
+     * Each item is an object: { title: String, to: [String, Object], current: Boolean }
+     */
+    items: {
+      type: Array,
+      default: () => []
     },
-    props: {
-      /**
-       * Array of breadcrumb items.
-       * Each item is an object: { title: String, to: [String, Object], current: Boolean }
-       */
-      items: {
-        type: Array,
-        default: () => []
-      },
-      /**
-       * Icon to use as a separator.
-       */
-      separatorIcon: String,
-      /**
-       * Classes object to be applied to elements.
-       * Keys: nav, list, item, link, icon
-       */
-      classes: {
-        type: Object,
-        default: () => ({
-          nav: "breadcrumb",
-          list: "breadcrumb__list",
-          item: "breadcrumb__item",
-          link: "breadcrumb__link",
-          current: "breadcrumb__current",
-          separator: "breadcrumb__separator"
-        })
-      }
+    /**
+     * Icon to use as a separator.
+     */
+    separatorIcon: String,
+    /**
+     * Classes object to be applied to elements.
+     * Keys: nav, list, item, link, icon
+     */
+    classes: {
+      type: Object,
+      default: () => ({
+        nav: "breadcrumb",
+        list: "breadcrumb__list",
+        item: "breadcrumb__item",
+        link: "breadcrumb__link",
+        current: "breadcrumb__current",
+        separator: "breadcrumb__separator"
+      })
     }
-  }
+  });
 </script>

package/lib/components/navigation/UluMenu.vue

@@ -1,5 +1,8 @@
 <template>
-  <ul v-if="items?.length" :class="classes.list">
+  <ul 
+    v-if="items?.length" 
+    :class="classes.list"
+  >
     <li 
       v-for="(item, index) in items" 
       :key="index" 
@@ -10,20 +13,10 @@
         item.separatorAfter ? classes.itemSeparatorAfter : ''
       ]"
     >
-      <!-- 
-        Note: The ternary spread method below is conditionally adding certain 
-        props/handlers for each of the different element types.  
-      -->
-      <component
-        :is="item.to || item.path ? 'router-link' : item.click ? 'button' : 'a'"
-        v-bind="{
-          ...(item.to || item.path ? {
-            to: item.to || item.path,
-            activeClass: classes.linkActive || null,
-            exactActiveClass: classes.linkExactActive || null
-          } : {}),
-          ...(item.href ? { 'href' : item.href || '#' } : {}),
-        }"
+      <UluAction
+        v-bind="item"
+        :activeClass="classes.linkActive"
+        :exactActiveClass="classes.linkExactActive"
         @click="(event) => { handleItemClick(event, item) }"
         :class="[classes.link, item?.classes?.link]"
         :aria-label="iconOnly ? item.title : null"
@@ -39,74 +32,70 @@
           <span :class="[classes.linkText, item?.classes?.linkText]">{{ item.title }}</span>
           <UluTag v-if="item.tag" v-bind="item.tag"/>
         </slot>
-      </component>
+      </UluAction>
+      <slot name="item" :item="item" :index="index" />
       <!-- Component calls itself recursively for children if allowed (noChildren) -->
       <UluMenu v-if="!noChildren && item?.children?.length"
         :iconOnly="iconOnly"
         :classes="classes"
         :items="item.children"
-      />
+      >
+        <template v-for="(_, name) in $slots" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+      </UluMenu>
     </li>
   </ul>
 </template>
 
-<script>
+<script setup>
+  import UluAction from "../utils/UluAction.vue";
   import UluIcon from "../elements/UluIcon.vue";
   import UluTag from "../elements/UluTag.vue";
-  /**
-   * Reusable menu component (ul > li > [a/button/router-link])
-   * - Requires ulu tooltip plugin (as items themselves can have tooltips)
-   */
-  export default {
-    name: "UluMenu",
-    components: {
-      UluIcon,
-      UluTag
-    },
-    emits: [
-      /**
-       * Fired anytime a item is clicked
-       */
-      "item-click"
-    ],
-    props: {
-      /**
-       * Items Array of Objects for each link
-       * [{
-       *   title: String (title of link)
-       *   icon: Icon definition passed to UluIcon
-       *   tag: Tag appearing after link text (count/etc), pass props you want bound to tag
-       *   tooltip: Add tooltip to menu item (pass options for tooltip), unless iconOnly than the title is presented in the tooltip
-       *   href: Will result in <a>
-       *   click: Will be called on click and result in <button>
-       *   to: Will result in <a> and use vue-router router-link component
-       * }]
-       */
-      items: Array,
-      /**
-       * Classes object to add class bindings to the different elements
-       * - { list, item, link, linkActive, linkExactActive, linkIcon, linkText }
-       */
-      classes: {
-        type: Object,
-        default: () => ({})
-      },
-      /**
-       * Use icon only version of menu
-       */
-      iconOnly: Boolean,
-      /**
-       * Do not print menu items children recursively
-       */
-      noChildren: Boolean
+
+  const props = defineProps({
+    /**
+     * Items Array of Objects for each link
+     * [{
+     *   title: String (title of link)
+     *   icon: Icon definition passed to UluIcon
+     *   tag: Tag appearing after link text (count/etc), pass props you want bound to tag
+     *   tooltip: Add tooltip to menu item (pass options for tooltip), unless iconOnly than the title is presented in the tooltip
+     *   href: Will result in <a>
+     *   click: Will be called on click and result in <button>
+     *   to: Will result in <a> and use vue-router router-link component
+     * }]
+     */
+    items: Array,
+    /**
+     * Classes object to add class bindings to the different elements
+     * - { list, item, link, linkActive, linkExactActive, linkIcon, linkText }
+     */
+    classes: {
+      type: Object,
+      default: () => ({})
     },
-    methods: {
-      handleItemClick(event, item) {
-        if (item.click) {
-          item.click(event);
-        }
-        this.$emit("item-click", { item, event });
-      }
+    /**
+     * Use icon only version of menu
+     */
+    iconOnly: Boolean,
+    /**
+     * Do not print menu items children recursively
+     */
+    noChildren: Boolean
+  });
+
+  const emit = defineEmits([
+    /**
+     * Fired anytime a item is clicked
+     */
+    "item-click"
+  ]);
+
+  const handleItemClick = (event, item) => {
+    if (item.click) {
+      item.click(event);
     }
+    emit("item-click", { item, event });
   };
 </script>

package/lib/components/navigation/UluMenuStack.vue

@@ -1,5 +1,6 @@
 <template>
   <component
+    v-if="items?.length"
     class="menu-stack"
     :is="containerElement" 
     :class="resolvedModifiers"
@@ -16,7 +17,11 @@
         itemSeparatorAfter: 'menu-stack__item--separator-after'
       }" 
       :noChildren="noChildren"
-    />
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </UluMenu>
   </component>
 </template>
 

package/lib/components/navigation/UluNavStrip.vue

@@ -1,11 +1,8 @@
 <template>
   <nav 
+    v-if="items?.length"
     class="nav-strip"
-    :class="{
-      'nav-strip--rule' : rule,
-      'nav-strip--center' : center,
-      'nav-strip--right' : right
-    }"
+    :class="resolvedModifiers"
   >
     <UluMenu 
       :items="items" 
@@ -15,34 +12,49 @@
         link: 'nav-strip__link',
         linkExactActive: 'is-active'
       }"
-    />
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </UluMenu>
   </nav>
 </template>
 
-<script>
+<script setup>
+  import { computed } from "vue";
   import UluMenu from "./UluMenu.vue";
-  export default {
-    name: "UluNavStrip",
-    components: {
-      UluMenu
-    },
-    props: {
-      /**
-       * Array of items for list (uses UluMenu, see structure there)
-       */
-      items: Array,
-      /**
-       * Center aligned
-       */
-      center: Boolean,
-      /**
-       * Right aligned
-       */
-      right: Boolean,
-      /**
-       * Rule nav strip style
-       */
-      rule: Boolean
-    },
-  };
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  const props = defineProps({
+    /**
+     * Array of items for list (uses UluMenu, see structure there)
+     */
+    items: Array,
+    /**
+     * Center aligned
+     */
+    center: Boolean,
+    /**
+     * Right aligned
+     */
+    right: Boolean,
+    /**
+     * Rule nav strip style
+     */
+    rule: Boolean,
+    /**
+     * Modifiers (to add any modifier classes based on base class)
+     */
+    modifiers: [String, Array]
+  });
+
+  const { resolvedModifiers } = useModifiers({
+    props,
+    baseClass: "nav-strip",
+    internal: computed(() => ({
+      "center": props.center,
+      "right": props.right,
+      "rule": props.rule
+    }))
+  });
 </script>

package/lib/components/systems/facets/useFacets.js

@@ -1,5 +1,7 @@
-import { ref, computed, watch, nextTick, watchPostEffect } from 'vue';
-import Fuse from 'fuse.js';
+import { ref, computed, watch, watchPostEffect } from "vue";
+import Fuse from "fuse.js";
+
+const isFunction = v => typeof v === "function";
 
 /**
  * Helper function to create a union of multiple Sets.
@@ -58,7 +60,7 @@ function getFilteredSetFromIndex(selected, index, allItemsSet) {
     });
 
     // For 'all' (AND), intersect the sets within the group.
-    if (group.match === 'all') {
+    if (group.match === "all") {
       return intersectSets(childSets);
     }
     // For 'some' (OR), union the sets within the group.
@@ -125,19 +127,21 @@ function generateInitialFacets(allItems, facetFields) {
  * @param {Object} [options.urlSync] - Optional configuration to sync state with URL.
  * @param {import('vue-router').Router} [options.urlSync.router] - The Vue Router instance.
  * @param {import('vue-router').RouteLocationNormalizedLoaded} [options.urlSync.route] - The current route instance.
+ * @param {Function} [options.isPinned] - A function that receives an item and returns true if it should be pinned to the top of the results.
  */
 export function useFacets(allItems, options = {}) {
   const {
     initialFacets,
     facetFields,
-    initialSearchValue = '',
-    initialSortType = 'az',
+    initialSearchValue = "",
+    initialSortType = "az",
     noDefaultSorts = false,
     extraSortTypes = {},
     searchOptions: initialSearchOptions = {},
     getSortValue = item => (item.title || item.label || ""),
-    countMode = 'none', // 'none', 'simple', 'intuitive'
-    urlSync: urlSyncOptions
+    countMode = "none", // 'none', 'simple', 'intuitive'
+    urlSync: urlSyncOptions,
+    isPinned
   } = options;
 
   const sortAlpha = items => {
@@ -261,14 +265,22 @@ export function useFacets(allItems, options = {}) {
     return result;
   });
 
-  const displayItems = computed(() => {
+  const displayItemsGrouped = computed(() => {
     const sortFn = sortTypes.value[selectedSort.value]?.sort;
-    if (typeof sortFn !== 'function') {
-      return filteredItems.value;
+    let sorted = isFunction(sortFn) ? sortFn([...filteredItems.value]) : [...filteredItems.value];
+    
+    if (isFunction(isPinned)) {
+      const pinned = [];
+      const unpinned = [];
+      sorted.forEach(item => isPinned(item) ? pinned.push(item) : unpinned.push(item));
+      return { pinned, unpinned, all: [...pinned, ...unpinned] };
     }
-    return sortFn([...filteredItems.value]);
+    return { pinned: [], unpinned: sorted, all: sorted };
   });
 
+  const displayItems = computed(() => displayItemsGrouped.value.all);
+  const pinnedItems = computed(() => displayItemsGrouped.value.pinned);
+
   // --- Methods ---
   function clearFilters() {
     facets.value.forEach(group => {
@@ -309,12 +321,12 @@ export function useFacets(allItems, options = {}) {
   }, { immediate: true });
 
   watch([selectedFacets, searchedItems], ([currentSelected, currentSearchedItems], [prevSelected, prevSearchedItems]) => {
-    if (countMode === 'none' || !facets.value.length) return;
+    if (countMode === "none" || !facets.value.length) return;
 
     // A simple optimization to prevent re-calculating counts if the actual data hasn't changed.
     if (currentSelected === prevSelected && currentSearchedItems === prevSearchedItems) return;
 
-    if (countMode === 'simple') {
+    if (countMode === "simple") {
       const index = facetIndex.value;
       if (index.size === 0 && searchedItems.value.length > 0 && facetFields?.length > 0) {
         return; // Index not ready
@@ -337,7 +349,7 @@ export function useFacets(allItems, options = {}) {
           child.count = intersection.size;
         });
       });
-    } else if (countMode === 'intuitive') {
+    } else if (countMode === "intuitive") {
       const index = facetIndex.value;
       if (index.size === 0 && searchedItems.value.length > 0 && facetFields?.length > 0) {
         // Index might not be ready yet.
@@ -348,7 +360,7 @@ export function useFacets(allItems, options = {}) {
 
       facets.value.forEach(group => {
         group.children.forEach(child => {
-          const key = `${group.uid}:${child.uid}`;
+          const key = `${ group.uid }:${ child.uid }`;
           const childSet = index.get(key) || new Set();
 
           if (child.selected) {
@@ -438,7 +450,7 @@ export function useFacets(allItems, options = {}) {
   
       const selectionsFromUrl = new Map();
       facets.value.forEach(group => {
-        const selectedUids = query[group.uid] ? query[group.uid].split(',') : [];
+        const selectedUids = query[group.uid] ? query[group.uid].split(",") : [];
         selectionsFromUrl.set(group.uid, new Set(selectedUids));
       });
   
@@ -463,7 +475,10 @@ export function useFacets(allItems, options = {}) {
     });
 
     // Sync state changes TO the URL
-    watch([selectedSort, searchValue, selectedFacets], updateUrlFromState, { deep: true });
+    watch(
+      [selectedSort, searchValue, selectedFacets], updateUrlFromState, 
+      { deep: true }
+    );
 
     // Sync URL changes TO the state
     watch(() => route.query, updateStateFromUrl);
@@ -475,6 +490,7 @@ export function useFacets(allItems, options = {}) {
     selectedSort,
     sortTypes,
     displayItems,
+    pinnedItems,
     selectedFacets,
     clearFilters,
     handleFacetChange

package/lib/components/systems/index.js

@@ -25,10 +25,6 @@ export { default as UluSkeletonContent } from './skeleton/UluSkeletonContent.vue
 export { default as UluSkeletonMedia } from './skeleton/UluSkeletonMedia.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';