@ulu/frontend-vue 0.1.1-beta.1 → 0.1.1-beta.11

package/lib/components/collapsible/UluAccordion.vue

@@ -7,24 +7,24 @@
     :animate="animate"
     @update:model-value="$emit('update:modelValue', $event)"
   >
-    <template #trigger="{ isOpen: open, toggle }">
-      <slot name="trigger" :open="open" :toggle="toggle">
+    <template #trigger="{ isOpen }">
+      <slot name="trigger" :isOpen="isOpen">
         <component :is="triggerTextElement">
           {{ triggerText }}
         </component>
       </slot>
-      <slot name="icon" :open="open">
+      <slot name="icon" :isOpen="isOpen">
         <span class="accordion__icon" :class="classes.icon">
           <UluIcon 
-            :icon="open ? 'type:collapse' : 'type:expand'"
+            :icon="isOpen ? 'type:collapse' : 'type:expand'"
             style="display: inline;"
           />
         </span>
       </slot>
     </template>
 
-    <template #default="{ isOpen: open, toggle }">
-      <slot :open="open" :toggle="toggle"/>
+    <template #default="{ isOpen, toggle }">
+      <slot :isOpen="isOpen" :toggle="toggle"/>
     </template>
   </UluCollapsible>
 </template>
@@ -55,7 +55,7 @@
      */
     animate: {
       type: [Boolean, Object],
-      default: false
+      default: true
     },
     /**
      * Text to use for accordion, alternatively use #trigger slot
@@ -69,7 +69,7 @@
       default: "strong"
     },
     /**
-     * Classes for elements. See UluCollapsible for all available class keys (toggle, content, etc).
+     * 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
      */
@@ -77,7 +77,7 @@
       type: Object,
       default: () => ({
         container: 'accordion',
-        toggle: 'accordion__summary',
+        trigger: 'accordion__summary',
         content: 'accordion__content',
         containerOpen: 'is-active'
       })

package/lib/components/collapsible/UluCollapsible.vue

@@ -5,13 +5,13 @@
     :class="[classes.container, containerStateClasses]"
   >
     <button
-      :class="classes.toggle"
-      :id="toggleId"
+      :class="classes.trigger"
+      :id="triggerId"
       :aria-controls="contentId"
       :aria-expanded="isOpen"
       @click="toggle"
     >
-      <slot name="trigger" :isOpen="isOpen" :toggle="toggle">
+      <slot name="trigger" :isOpen="isOpen">
         {{ triggerText }}
       </slot>
     </button>
@@ -21,7 +21,7 @@
       tabindex="-1"
       :id="contentId"
       :aria-hidden="!isOpen"
-      :aria-labelledby="toggleId"
+      :aria-labelledby="triggerId"
     >
       <div :class="classes.contentInner">
         <slot :isOpen="isOpen" :toggle="toggle" />
@@ -66,14 +66,14 @@
       default: true
     },
     /**
-     * Classes for elements ({ container, toggle, content, contentInner })
+     * Classes for elements ({ container, trigger, content, contentInner })
      * - Any valid class binding value per element
      */
     classes: {
       type: Object,
       default: () => ({
         container: 'ulu-collapsible',
-        toggle: 'ulu-collapsible__toggle',
+        trigger: 'ulu-collapsible__trigger',
         content: 'ulu-collapsible__content',
         contentInner: 'ulu-collapsible__content-inner',
         containerOpen: 'ulu-collapsible--open',
@@ -114,7 +114,7 @@
     }
   });
 
-  const toggleId = ref(newId('ulu-collapsible-toggle'));
+  const triggerId = ref(newId('ulu-collapsible-trigger'));
   const contentId = ref(newId('ulu-collapsible-content'));
 
   const containerStateClasses = computed(() => {

package/lib/components/forms/UluSelectableMenu.vue

@@ -1,7 +1,10 @@
 <template>
   <div 
     class="menu-stack form-theme" 
-    :class="{ 'menu-stack--hide-inputs' : hideInputs }"
+    :class="{ 
+      'menu-stack--hide-inputs' : hideInputs,
+      'menu-stack--compact' : compact
+    }"
     :role="groupRole" 
     :aria-labelledby="legendId"
   >
@@ -40,6 +43,10 @@ const props = defineProps({
    * 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').
    */

package/lib/components/navigation/UluMenu.vue

@@ -17,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" 

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,84 @@
+<template>
+  <div v-if="activeFilters.length" class="ulu-facets-active-filters">
+    <slot name="label">
+      <strong class="ulu-facets-active-filters__label">Active Filters:</strong>
+    </slot>
+    <div class="ulu-facets-active-filters__items">
+      <UluButton
+        v-for="filter in activeFilters"
+        :key="`${filter.groupUid}-${filter.uid}`"
+        class="button--sm"
+        @click="removeFilter(filter)"
+      >
+        {{ filter.label }}
+        <UluIcon icon="type:close" />
+      </UluButton>
+    </div>
+    <button @click="clearFilters" class="button button--link">Clear All</button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import UluButton from '../../elements/UluButton.vue';
+import UluIcon from '../../elements/UluIcon.vue';
+
+const props = defineProps({
+  /**
+   * The selectedFacets array from the useFacets composable.
+   */
+  selectedFacets: {
+    type: Array,
+    default: () => []
+  }
+});
+
+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>
+
+<style lang="scss">
+.ulu-facets-active-filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #eee;
+
+  &__label {
+    margin-right: 0.5rem;
+  }
+
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+}
+</style>

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

@@ -6,13 +6,13 @@
       :key="group.uid"
       :classes="{
         container: ['ulu-facets__group', classes.group],
-        trigger: ['ulu-facets__group-toggle', classes.groupToggle],
+        trigger: ['ulu-facets__group-trigger', classes.groupTrigger],
         content: ['ulu-facets__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,6 +22,7 @@
           :groupUid="group.uid"
           :groupName="group.name"
           :type="group.multiple ? 'checkbox' : 'radio'"
+          :compact="compact"
           :model-value="selectedUids(group)"
           @facet-change="emit('facet-change', $event)"
         />
@@ -42,6 +43,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 +79,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

@@ -4,6 +4,7 @@
     :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/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;
     }
   }