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

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" 
@@ -19,33 +17,52 @@
       }" 
       :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/systems/facets/UluFacetsActiveFilters.vue

@@ -0,0 +1,104 @@
+<template>
+  <div v-if="activeFilters.length" class="facets-active" :class="classes.container">
+    <component :is="labelElement" class="facets-active__label" :class="classes.label">
+      <slot name="label">
+        Active Filters:
+      </slot>
+    </component>
+    <ul class="facets-active__list" :class="classes.list">
+      <li  
+        class="facets-active__item"
+        v-for="filter in activeFilters" 
+        :key="`${ filter.groupUid }-${ filter.uid }`"
+        :class="classes.item"
+      >
+        <button
+          :class="classes.filterButton"
+          icon="type:remove"
+          @click="removeFilter(filter)"
+        >
+          <span :class="classes.filterButtonText">
+            <span class="hidden-visually">Remove Active Filter:</span>
+            {{ filter.label }}
+          </span>
+          <span :class="classes.filterButtonIcon">
+            <UluIcon :icon="removeIcon" />
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button @click="clearFilters" :class="classes.clearButton">Clear All</button>
+  </div>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import UluIcon from '../../elements/UluIcon.vue';
+
+  const props = defineProps({
+    /**
+     * The selectedFacets array from the useFacets composable.
+     */
+    selectedFacets: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Element to use for label
+     */
+    labelElement: {
+      type: String,
+      default: "strong"
+    },
+    /**
+     * Icon to use for remove (in button)
+     */
+    removeIcon: {
+      type: String,
+      default: "type:close"
+    },
+    /**
+     * Classes for different element { label, list, item, filterButton, filterButtonText, filterButtonIcon, clearButton }
+     */
+    classes: {
+      type: Object,
+      default: () => ({
+        container: "layout-flex flex-wrap",
+        label: "hidden-visually",
+        list: "layout-flex flex-wrap",
+        item: "margin-right-small-x",
+        filterButton: "button button--small button--outline no-min-width",
+        filterButtonText: null,
+        filterButtonIcon: "button__icon",
+        clearButton: "button button--small"
+      })
+    }
+  });
+
+  const emit = defineEmits(['facet-change', 'clear-filters']);
+
+  const activeFilters = computed(() => {
+    const filters = [];
+    props.selectedFacets.forEach(group => {
+      group.children.forEach(child => {
+        filters.push({
+          ...child,
+          groupUid: group.uid
+        });
+      });
+    });
+    return filters;
+  });
+
+  function removeFilter(filter) {
+    emit('facet-change', {
+      groupUid: filter.groupUid,
+      facetUid: filter.uid,
+      selected: false
+    });
+  }
+
+  function clearFilters() {
+    emit('clear-filters');
+  }
+</script>

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="facets-filters">
+    <UluAccordion
+      v-for="group in facets"
+      :key="group.uid"
+      :modifiers="accordionModifiers"
+      :startOpen="group.open"
+    >
+      <template #trigger="{ isOpen }">
+        <slot name="groupTrigger" :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'"
+          :compact="compact"
+          :model-value="selectedUids(group)"
+          @facet-change="emit('facet-change', $event)"
+        />
+        <UluAccordion
+          v-if="group.children.length > maxVisible"
+          class="facets-filters__more-facets"
+          :class="classes.moreFacets"
+          :modifiers="accordionModifiers"
+        >
+          <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'"
+              :compact="compact"
+              :model-value="selectedUids(group)"
+              @facet-change="emit('facet-change', $event)"
+            />
+          </template>
+        </UluAccordion>
+      </template>
+    </UluAccordion>
+  </div>
+</template>
+
+<script setup>
+  import UluFacetsList from "./UluFacetsList.vue";
+  import UluAccordion from "../../collapsible/UluAccordion.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: () => []
+    },
+    /**
+     * Whether to use compact modifier on selectable menu
+     */
+    compact: Boolean,
+    /**
+     * Class modifiers for accordion (ie. 'transparent', 'secondary', etc)
+     */
+    accordionModifiers: [String, Array]
+  });
+
+  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/UluFacetsFilterLists.vue

@@ -1,18 +1,19 @@
 <template>
-  <div class="UluFacetsFilters">
+  <div class="facets-filters">
     <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]
+        container: ['facets-filters__group', classes.group],
+        containerOpen: ['facets-filters__group--open', classes.groupOpen],
+        containerClosed: ['facets-filters__group--closed', classes.groupClosed],
+        trigger: ['facets-filters__group-trigger', classes.groupTrigger],
+        content: ['facets-filters__group-content', classes.groupContent]
       }"
       :startOpen="group.open"
     >
       <template #trigger="{ isOpen }">
-        <slot name="groupToggle" :group="group" :isOpen="isOpen">
+        <slot name="groupTrigger" :group="group" :isOpen="isOpen">
           {{ group.name }}
         </slot>
       </template>
@@ -22,16 +23,14 @@
           :groupUid="group.uid"
           :groupName="group.name"
           :type="group.multiple ? 'checkbox' : 'radio'"
+          :compact="compact"
           :model-value="selectedUids(group)"
           @facet-change="emit('facet-change', $event)"
         />
         <UluCollapsible
           v-if="group.children.length > maxVisible"
-          class="ulu-facets__more-facets"
+          class="facets-filters__more-facets"
           :class="classes.moreFacets"
-          :clickOutsideCloses="false"
-          :closeOnEscape="false"
-          :transitionHeight="true"
         >
           <template #trigger="{ isOpen }">
             {{ isOpen ? "View Less" : "Show More" }}
@@ -42,6 +41,7 @@
               :groupUid="group.uid"
               :groupName="group.name"
               :type="group.multiple ? 'checkbox' : 'radio'"
+              :compact="compact"
               :model-value="selectedUids(group)"
               @facet-change="emit('facet-change', $event)"
             />
@@ -77,7 +77,11 @@
     facets: {
       type: Array,
       default: () => []
-    }
+    },
+    /**
+     * Whether to use compact modifier on selectable menu
+     */
+    compact: Boolean,
   });
 
   const emit = defineEmits(['facet-change']);

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

@@ -1,9 +1,10 @@
 <template>
   <UluSelectableMenu
-    class="ulu-facets__facet-list"
+    class="facets-list"
     :legend="groupUid"
     :type="type"
     :options="menuOptions"
+    :compact="compact"
     :model-value="modelValue"
     @update:model-value="handleChange"
   >
@@ -25,6 +26,7 @@ const props = defineProps({
     type: String,
     default: 'checkbox',
   },
+  compact: Boolean,
   modelValue: [String, Array],
 });
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="ulu-facets__keyword-search">
+  <div class="facets-search">
     <label :class="classes.searchLabel" :for="id">
       <strong>Search</strong>
     </label>

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

@@ -1,21 +1,23 @@
 <template>
   <div 
-    class="facets-sidebar-layout" 
-    :class="{ 'facets-sidebar-layout--filters-hidden' : isMobile }"
+    class="facets-sidebar" 
+    :class="{ 'facets-sidebar--filters-hidden' : isMobile }"
   >
-    <div class="facets-sidebar-layout__header">
+    <div class="facets-sidebar__header">
       <slot name="header"></slot>
     </div>
 
-    <div v-show="isMobile" class="facets-sidebar-layout__mobile-controls">
-      <button class="button" @click="showMobileFilters = true">Filters & Sort</button>
+    <div v-show="isMobile" class="facets-sidebar__mobile-controls">
+      <button :class="classes.mobileButton" @click="showMobileFilters = true">
+        {{ mobileButtonText }}
+      </button>
     </div>
 
-    <div class="facets-sidebar-layout__body">
+    <div class="facets-sidebar__body">
       <!-- Desktop container for the sidebar -->
-      <div v-show="!isMobile" class="facets-sidebar-layout__sidebar" ref="desktopTarget"></div>
+      <div v-show="!isMobile" class="facets-sidebar__sidebar" ref="desktopTarget"></div>
       
-      <div class="facets-sidebar-layout__main">
+      <div class="facets-sidebar__main">
         <slot name="main"></slot>
       </div>
     </div>
@@ -28,7 +30,7 @@
       allowResize
     >
       <!-- Mobile container for the sidebar -->
-      <div class="facets-sidebar-layout__sidebar" ref="mobileTarget"></div>
+      <div class="facets-sidebar__sidebar" ref="mobileTarget"></div>
     </UluModal>
 
     <teleport :to="teleportTarget" v-if="teleportTarget">
@@ -41,6 +43,24 @@
   import { ref, inject, computed } from 'vue';
   import UluModal from '../../collapsible/UluModal.vue';
 
+  defineProps({
+    mobileButtonText: {
+      type: String,
+      default: "Filters & Sort"
+    },
+    /**
+     * Classes for elements. See UluCollapsible for all available class keys (trigger, content, etc).
+     * The 'icon' key is also available for the icon span.
+     * - Any valid class binding value per element
+     */
+    classes: {
+      type: Object,
+      default: () => ({
+        mobileButton: 'button'
+      })
+    }
+  })
+
   const showMobileFilters = ref(false);
   const isMobile = inject("uluIsMobile");
 
@@ -57,13 +77,13 @@
 </script>
 
 <style lang="scss">
-  .facets-sidebar-layout__body {
+  .facets-sidebar__body {
     display: grid;
     grid-template-columns: 250px 1fr;
     gap: 2rem;
   }
-  .facets-sidebar-layout--filters-hidden {
-    .facets-sidebar-layout__body {
+  .facets-sidebar--filters-hidden {
+    .facets-sidebar__body {
       grid-template-columns: 1fr;
     }
   }