@ulu/frontend-vue 0.1.0-beta.34 → 0.1.0-beta.35

package/lib/components/collapsible/UluCollapsibleRegion.vue

@@ -1,15 +1,15 @@
 <template>
   <div 
-    class="CollapsibleRegion"
+    class="collapsible-region"
     @keydown.esc="handleEscape"
     :class="{ 
-      'CollapsibleRegion--open' : isOpen,
-      'CollapsibleRegion--closed' : !isOpen,
-      'CollapsibleRegion--transitioning' : isTransitioning
+      'collapsible-region--open' : isOpen,
+      'collapsible-region--closed' : !isOpen,
+      'collapsible-region--transitioning' : isTransitioning
     }"
   >
     <button 
-      class="CollapsibleRegion__toggle"
+      class="collapsible-region__toggle"
       :id="toggleId"
       :aria-controls="contentId" 
       :aria-expanded="isOpen"
@@ -20,7 +20,7 @@
       </slot>
     </button>
     <div 
-      class="CollapsibleRegion__content"
+      class="collapsible-region__content"
       tabindex="-1"
       ref="content"
       :id="contentId"
@@ -34,7 +34,7 @@
       as they interfere with getting accurate measurements of the content
       when it's hidden (scrollHeight) 
       -->
-      <div class="CollapsibleRegion__content-inner">
+      <div class="collapsible-region__content-inner">
         <slot/>
       </div>
     </div>

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

@@ -1,10 +1,10 @@
 <template>
   <div class="UluFacetsFilters">
     <UluCollapsibleRegion
-      class="UluFacets__group"
+      class="ulu-facets__group"
       :class="classes.group"
-      :classToggle="['UluFacets__group-toggle', classes.groupToggle]"
-      :classContent="['UluFacets__group-content', classes.groupContent]"
+      :classToggle="['ulu-facets__group-toggle', classes.groupToggle]"
+      :classContent="['ulu-facets__group-content', classes.groupContent]"
       v-for="group in facets"
       :key="group.uid"
       :group="group"
@@ -29,7 +29,7 @@
         />
         <UluCollapsibleRegion
           v-if="group.children.length > maxVisible"
-          class="UluFacets__more-facets"
+          class="ulu-facets__more-facets"
           :class="classes.moreFacets"
           :clickOutsideCloses="false"
           :closeOnEscape="false"

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

@@ -1,16 +1,16 @@
 <template>
-  <div class="UluFacetsDropdownFilters">
+  <div class="facets-dropdown-filters">
     <div
-      class="UluFacetsDropdownFilters__group"
+      class="facets-dropdown-filters__group"
       v-for="group in facets"
       :key="group.uid"
     >
-      <label :for="`facet-dropdown-${group.uid}`" class="UluFacetsDropdownFilters__label">
+      <label :for="`facet-dropdown-${group.uid}`" class="facets-dropdown-filters__label">
         {{ group.name }}
       </label>
       <select
         :id="`facet-dropdown-${group.uid}`"
-        class="UluFacetsDropdownFilters__select"
+        class="facets-dropdown-filters__select"
         @change="onFilterChange(group, $event)"
       >
         <option value="">All {{ group.name }}s</option>
@@ -57,13 +57,13 @@ function onFilterChange(group, event) {
 </script>
 
 <style lang="scss">
-.UluFacetsDropdownFilters {
+.facets-dropdown-filters {
   display: flex;
   gap: 1rem;
   align-items: center;
   flex-wrap: wrap;
 }
-.UluFacetsDropdownFilters__group {
+.facets-dropdown-filters__group {
   display: flex;
   gap: 0.5rem;
   align-items: center;

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

@@ -1,9 +1,9 @@
 <template>
-  <div class="UluFacetsHeaderLayout">
-    <div class="UluFacetsHeaderLayout__header">
+  <div class="facets-header-layout">
+    <div class="facets-header-layout__header">
       <slot name="header"></slot>
     </div>
-    <div class="UluFacetsHeaderLayout__main">
+    <div class="facets-header-layout__main">
       <slot name="main"></slot>
     </div>
   </div>
@@ -14,7 +14,7 @@
 </script>
 
 <style lang="scss">
-.UluFacetsHeaderLayout__header {
+.facets-header-layout__header {
   display: flex;
   gap: 1rem;
   align-items: center;

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

@@ -1,6 +1,6 @@
 <template>
   <UluSelectableMenu
-    class="UluFacets__facet-list"
+    class="ulu-facets__facet-list"
     :legend="groupUid"
     :type="type"
     :options="menuOptions"

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

@@ -1,14 +1,14 @@
 <template>
-  <div class="UluFacetsResults">
+  <div class="facets-results">
     <transition-group
       v-if="items.length"
       :tag="tag"
       :name="transitionName"
-      class="UluFacetsResults__list"
+      class="facets-results__list"
       :class="classes.list"
     >
       <li
-        class="UluFacetsResults__item"
+        class="facets-results__item"
         :class="classes.item"
         v-for="(item, index) in items"
         :key="item.id || index"
@@ -16,7 +16,7 @@
         <slot name="item" :item="item" :index="index"></slot>
       </li>
     </transition-group>
-    <div v-else class="UluFacetsResults__empty">
+    <div v-else class="facets-results__empty">
       <slot name="empty">
         <p>No matching items found.</p>
       </slot>
@@ -36,7 +36,7 @@
     },
     transitionName: {
       type: String,
-      default: 'UluFacetsFade'
+      default: 'facets-fade'
     },
     classes: {
       type: Object,
@@ -46,18 +46,18 @@
 </script>
 
 <style lang="scss">
-  .UluFacetsResults__list {
+  .facets-results__list {
     list-style: none;
     padding: 0;
   }
 
-  .UluFacetsFade-enter-active,
-  .UluFacetsFade-leave-active {
+  .facets-fade-enter-active,
+  .facets-fade-leave-active {
     transition: opacity 0.25s ease;
   }
 
-  .UluFacetsFade-enter-from,
-  .UluFacetsFade-leave-to {
+  .facets-fade-enter-from,
+  .facets-fade-leave-to {
     opacity: 0;
   }
 </style>

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

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

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

@@ -1,31 +1,70 @@
 <template>
-  <div class="UluFacetsSidebarLayout">
-    <div class="UluFacetsSidebarLayout__header">
+  <div 
+    class="facets-sidebar-layout" 
+    :class="{ 'facets-sidebar-layout--filters-hidden' : isMobile }"
+  >
+    <div class="facets-sidebar-layout__header">
       <slot name="header"></slot>
     </div>
-    <div class="UluFacetsSidebarLayout__body">
-      <div class="UluFacetsSidebarLayout__sidebar">
-        <slot name="sidebar"></slot>
-      </div>
-      <div class="UluFacetsSidebarLayout__main">
+
+    <div v-show="isMobile" class="facets-sidebar-layout__mobile-controls">
+      <button class="button" @click="showMobileFilters = true">Filters & Sort</button>
+    </div>
+
+    <div class="facets-sidebar-layout__body">
+      <!-- Desktop container for the sidebar -->
+      <div v-show="!isMobile" class="facets-sidebar-layout__sidebar" ref="desktopTarget"></div>
+      
+      <div class="facets-sidebar-layout__main">
         <slot name="main"></slot>
       </div>
     </div>
+
+    <UluModal
+      v-if="isMobile"
+      v-model="showMobileFilters"
+      position="right"
+      title="Filters & Sort"
+      allowResize
+    >
+      <!-- Mobile container for the sidebar -->
+      <div class="facets-sidebar-layout__sidebar" ref="mobileTarget"></div>
+    </UluModal>
+
+    <teleport :to="teleportTarget" v-if="teleportTarget">
+      <slot name="sidebar"></slot>
+    </teleport>
   </div>
 </template>
 
 <script setup>
-// This component is purely for layout, no logic needed.
+  import { ref, inject, computed } from 'vue';
+  import UluModal from '../../collapsible/UluModal.vue';
+
+  const showMobileFilters = ref(false);
+  const isMobile = inject("uluIsMobile");
+
+  const desktopTarget = ref(null);
+  const mobileTarget = ref(null);
+
+  const teleportTarget = computed(() => {
+    if (isMobile.value) {
+      return mobileTarget.value;
+    } else {
+      return desktopTarget.value;
+    }
+  });
 </script>
 
 <style lang="scss">
-.UluFacetsSidebarLayout__body {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 2rem;
-
-  @media (min-width: 768px) {
+  .facets-sidebar-layout__body {
+    display: grid;
     grid-template-columns: 250px 1fr;
+    gap: 2rem;
+  }
+  .facets-sidebar-layout--filters-hidden {
+    .facets-sidebar-layout__body {
+      grid-template-columns: 1fr;
+    }
   }
-}
-</style>
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="UluFacetsSort" :class="classes.sortForm">
+  <div class="facets-sort" :class="classes.sortForm">
     <label 
       :for="sortId" 
       :class="classes.sortFormLabel"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.34",
+  "version": "0.1.0-beta.35",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [