@ulu/frontend-vue 0.1.0-beta.10 → 0.1.0-beta.11

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

@@ -0,0 +1,73 @@
+<template>
+  <div class="UluFacetsFilters">
+    <UluCollapsibleRegion
+      class="UluFacets__group"
+      :class="classes.group"
+      :classToggle="['UluFacets__group-toggle', classes.groupToggle]"
+      :classContent="['UluFacets__group-content', classes.groupContent]"
+      v-for="group in facets"
+      :key="group.uid"
+      :group="group"
+      :startOpen="group.open"
+      :clickOutsideCloses="false"
+      :closeOnEscape="false"
+      :transitionHeight="true"
+    >
+      <template #toggle="{ isOpen }">
+        <slot name="groupToggle" :group="group" :isOpen="isOpen">
+          {{ group.name }}
+        </slot>
+      </template>
+      <template #default>
+        <UluFacetsList
+          :children="group.children.slice(0, maxVisible)"
+          :groupUid="group.uid"
+          :classFacet="classes.facet"
+          @facet-change="emit('facet-change', $event)"
+        />
+        <UluCollapsibleRegion
+          v-if="group.children.length > maxVisible"
+          class="UluFacets__more-facets"
+          :class="classes.moreFacets"
+          :clickOutsideCloses="false"
+          :closeOnEscape="false"
+          :transitionHeight="true"
+        >
+          <template #toggle="{ isOpen }">
+            {{ isOpen ? "- Less" : "+ More" }}
+          </template>
+          <template #default>
+            <UluFacetsList
+              :children="group.children.slice(maxVisible)"
+              :groupUid="group.uid"
+              :classFacet="classes.facet"
+              @facet-change="emit('facet-change', $event)"
+            />
+          </template>
+        </UluCollapsibleRegion>
+      </template>
+    </UluCollapsibleRegion>
+  </div>
+</template>
+
+<script setup>
+  import UluFacetsList from "./UluFacetsList.vue";
+  import UluCollapsibleRegion from "../../collapsible/UluCollapsibleRegion.vue";
+
+  defineProps({
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    maxVisible: {
+      type: Number,
+      default: 5
+    },
+    facets: {
+      type: Array,
+      default: () => []
+    }
+  });
+
+  const emit = defineEmits(['facet-change']);
+</script>

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

@@ -10,7 +10,8 @@
         class="UluFacets__facet-checkbox"
         :id="facetCheckboxId(facet)"
         type="checkbox" 
-        v-model="facet.selected"
+        :checked="facet.selected"
+        @change="emit('facet-change', { groupUid, facetUid: facet.uid, selected: $event.target.checked })"
       >
       <label 
         class="UluFacets__facet-label" 
@@ -22,18 +23,16 @@
   </ul>
 </template>
 
-<script>
-  export default {
-    name: 'UluFacetsList',
-    props: {
-      groupUid: String,
-      children: Array,
-      classFacet: String
-    },
-    methods: {
-      facetCheckboxId(facet) {
-        return `facet-${ this.groupUid }-${ facet.uid }`;
-      }
-    }
+<script setup>
+  const props = defineProps({
+    groupUid: String,
+    children: Array,
+    classFacet: String
+  });
+
+  const emit = defineEmits(['facet-change']);
+
+  function facetCheckboxId(facet) {
+    return `facet-${props.groupUid}-${facet.uid}`;
   }
 </script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="UluFacetsResults">
+    <transition-group 
+      v-if="items.length"
+      :tag="tag" 
+      :name="transitionName"
+      class="UluFacetsResults__list"
+    >
+      <li
+        class="UluFacetsResults__item"
+        v-for="(item, index) in items"
+        :key="item.id || index"
+      >
+        <slot name="item" :item="item" :index="index"></slot>
+      </li>
+    </transition-group>
+    <div v-else class="UluFacetsResults__empty">
+      <slot name="empty">
+        <p>No matching items found.</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  defineProps({
+    items: {
+      type: Array,
+      required: true
+    },
+    tag: {
+      type: String,
+      default: 'ul'
+    },
+    transitionName: {
+      type: String,
+      default: 'UluFacetsFade'
+    }
+  });
+</script>
+
+<style lang="scss">
+  .UluFacetsResults__list {
+    list-style: none;
+    padding: 0;
+  }
+
+  .UluFacetsFade-enter-active,
+  .UluFacetsFade-leave-active {
+    transition: opacity 0.25s ease;
+  }
+
+  .UluFacetsFade-enter-from,
+  .UluFacetsFade-leave-to {
+    opacity: 0;
+  }
+</style>

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

@@ -10,58 +10,35 @@
       type="text" 
       :placeholder="placeholder"
     >
-    <!-- <button 
-      v-if="value"
-      :class="classes.searchClear" 
-      @click="clear"
-      :aria-label="classes.searchClearIcon ? 'Clear Search' : false"
-      type="button" 
-    >
-      <span 
-        v-if="classes.searchClearIcon" 
-        :class="classes.searchClearIcon"
-        aria-hidden="true"
-      ></span>
-      <span v-else>
-        Clear
-      </span>
-    </button> -->
   </div>
 </template>
 
-<script>
-  let uid = 0;
-  export default {
-    name: 'UluFacetsSearch',
-    props: {
-      classes: Object,
-      modelValue: String,
-      placeholder: {
-        type: String,
-        default: "Keywords…"
-      }
-    },
-    data() {
-      return {
-        id: `facet-view-keyword-${ ++uid }`
-      }
+<script setup>
+  import { computed } from 'vue';
+
+  const props = defineProps({
+    classes: {
+      type: Object,
+      default: () => ({})
     },
-    computed: {
-      localValue: {
-        get() {
-          return this.modelValue;
-        },
-        set(val) {
-          this.$emit('update:modelValue', val);
-        }
-      }
+    modelValue: String,
+    placeholder: {
+      type: String,
+      default: "Keywords…"
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  let uid = 0;
+  const id = `facet-view-keyword-${++uid}`;
+
+  const localValue = computed({
+    get() {
+      return props.modelValue;
     },
-    methods: {
-      clear() {
-        // this.value = null;
-        // this.applied = false;
-        // this.$emit("search", null);
-      }
+    set(val) {
+      emit('update:modelValue', val);
     }
-  }
-</script>
+  });
+</script>

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="UluFacetsSidebarLayout">
+    <div class="UluFacetsSidebarLayout__header">
+      <slot name="header"></slot>
+    </div>
+    <div class="UluFacetsSidebarLayout__body">
+      <div class="UluFacetsSidebarLayout__sidebar">
+        <slot name="sidebar"></slot>
+      </div>
+      <div class="UluFacetsSidebarLayout__main">
+        <slot name="main"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// This component is purely for layout, no logic needed.
+</script>
+
+<style lang="scss">
+.UluFacetsSidebarLayout__body {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 250px 1fr;
+  }
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="UluFacetsSort" :class="classes.sortForm">
+    <label 
+      :for="sortId" 
+      :class="classes.sortFormLabel"
+    >
+      <slot>Sort:</slot>
+    </label>
+    <select 
+      :value="modelValue"
+      @change="emit('update:modelValue', $event.target.value)"
+      :id="sortId" 
+      :class="classes.sortFormSelect"
+    >
+      <option v-for="(item, key) in sortTypes" :value="key" :key="key">
+        {{ item.text }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  let idCounter = 0;
+
+  defineProps({
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    sortTypes: {
+      type: Object,
+      default: () => ({})
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  const sortId = ref(`ulu-facet-sort-${++idCounter}`);
+</script>

package/lib/components/systems/facets/_mock-data.js

@@ -0,0 +1,40 @@
+export const initialMockFacets = [
+  {
+    name: 'Category',
+    uid: 'category',
+    open: true,
+    children: [
+      { uid: 'cat1', label: 'Design' },
+      { uid: 'cat2', label: 'Development' },
+      { uid: 'cat3', label: 'Marketing' },
+      { uid: 'cat4', label: 'Business' },
+      { uid: 'cat5', label: 'Lifestyle' },
+      { uid: 'cat6', label: 'Technology' },
+    ]
+  },
+  {
+    name: 'Author',
+    uid: 'author',
+    open: true,
+    children: [
+      { uid: 'jane-doe', label: 'Jane Doe' },
+      { uid: 'john-smith', label: 'John Smith' },
+      { uid: 'peter-jones', label: 'Peter Jones' },
+    ]
+  }
+];
+
+export const mockItems = [
+  { id: 1, title: 'The Art of UI Design', description: 'A deep dive into creating beautiful user interfaces.', category: ['cat1', 'cat2'], author: ['jane-doe'], date: new Date(2023, 5, 15) },
+  { id: 2, title: 'Vue.js for Beginners', description: 'Getting started with the popular JavaScript framework.', category: ['cat2', 'cat6'], author: ['john-smith'], date: new Date(2023, 8, 22) },
+  { id: 3, title: 'Content Marketing Strategies', description: 'How to attract and retain customers with great content.', category: ['cat3'], author: ['peter-jones'], date: new Date(2022, 11, 10) },
+  { id: 4, title: 'Startup Funding 101', description: 'A guide to raising capital for your new venture.', category: ['cat4'], author: ['jane-doe'], date: new Date(2024, 1, 5) },
+  { id: 5, title: 'Minimalist Living', description: 'Declutter your life and find more happiness.', category: ['cat5'], author: ['john-smith'], date: new Date(2023, 3, 30) },
+  { id: 6, title: 'The Future of AI', description: 'Exploring the impact of artificial intelligence on society.', category: ['cat6'], author: ['peter-jones'], date: new Date(2024, 0, 1) },
+  { id: 7, title: 'Advanced CSS Techniques', description: 'Take your styling skills to the next level.', category: ['cat1', 'cat2'], author: ['jane-doe'], date: new Date(2023, 10, 18) },
+  { id: 8, title: 'Building a Scalable API', description: 'Best practices for designing and implementing APIs.', category: ['cat2', 'cat6'], author: ['john-smith'], date: new Date(2023, 7, 3) },
+  { id: 9, title: 'Social Media for Business', description: 'Leveraging social platforms for growth.', category: ['cat3'], author: ['peter-jones'], date: new Date(2022, 9, 14) },
+  { id: 10, title: 'Negotiation and Deal Making', description: 'Master the art of getting what you want.', category: ['cat4'], author: ['jane-doe'], date: new Date(2023, 6, 25) },
+  { id: 11, title: 'Healthy Eating Habits', description: 'A guide to a balanced and nutritious diet.', category: ['cat5'], author: ['john-smith'], date: new Date(2024, 2, 12) },
+  { id: 12, title: 'Quantum Computing Explained', description: 'A simple introduction to a complex topic.', category: ['cat6'], author: ['peter-jones'], date: new Date(2023, 9, 9) },
+];

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

@@ -0,0 +1,140 @@
+import { ref, computed } from 'vue';
+import Fuse from 'fuse.js';
+
+const sortAlpha = items => {
+  const getTitle = i => (i.title || i.label || "");
+  return items.sort((a, b) => getTitle(a).localeCompare(getTitle(b)));
+}
+const defaultSorts = {
+  az: { text: "A-Z", sort: sortAlpha },
+  za: { text: "Z-A", sort: items => sortAlpha(items).reverse() },
+};
+
+/**
+ * A composable for handling client-side faceted search, filtering, and sorting.
+ * @param {import('vue').Ref<Array<Object>>} allItems - A Vue ref containing the full list of items to be processed.
+ * @param {Object} options - Configuration options for the composable.
+ * @param {Array} [options.initialFacets=[]] - The initial configuration for the facets.
+ * @param {String} [options.initialSearchValue=''] - The initial value for the search input.
+ * @param {String} [options.initialSortType='az'] - The initial sort type.
+ * @param {Boolean} [options.noDefaultSorts=false] - If true, the default 'A-Z' and 'Z-A' sorts will not be included.
+ * @param {Object} [options.extraSortTypes={}] - Additional sort types to be merged with the default ones.
+ * @param {Object} [options.searchOptions={}] - Configuration options for Fuse.js.
+ * @param {Function} [options.getItemFacet] - A function to retrieve facet information from an item.
+ */
+export function useFacets(allItems, options = {}) {
+  const {
+    initialFacets = [],
+    initialSearchValue = '',
+    initialSortType = 'az',
+    noDefaultSorts = false,
+    extraSortTypes = {},
+    searchOptions: initialSearchOptions = {},
+    getItemFacet = (item, uid) => item[uid]
+  } = options;
+
+  // --- State ---
+  const facets = ref(createFacets(initialFacets));
+  const searchValue = ref(initialSearchValue);
+  const selectedSort = ref(initialSortType);
+
+  // --- Helpers ---
+  function createFacets(initial) {
+    return initial.map(group => ({
+      ...group,
+      open: group.open || false,
+      children: group.children.map(facet => ({
+        ...facet,
+        selected: facet.selected || false
+      })),
+      selectedCount: 0
+    }));
+  }
+
+  // --- Computed ---
+  const sortTypes = computed(() => ({
+    ...(noDefaultSorts ? {} : defaultSorts),
+    ...extraSortTypes
+  }));
+
+  const searchOptions = computed(() => ({
+    shouldSort: true,
+    keys: ["title", "label", "description", "author"],
+    ...initialSearchOptions
+  }));
+
+  const selectedFacets = computed(() => {
+    const selected = [];
+    facets.value.forEach((group) => {
+      const { name, uid, children } = group;
+      let count = 0;
+      let added = false;
+      if (children) {
+        children.forEach(child => {
+          if (child.selected) {
+            ++count;
+            if (!added) {
+              selected.push({ uid, name, children: [] });
+              added = true;
+            }
+            selected[selected.length - 1].children.push(child);
+          }
+        });
+      }
+      group.selectedCount = count;
+    });
+    return selected;
+  });
+
+  const filteredItems = computed(() => {
+    if (!selectedFacets.value.length) {
+      return allItems.value;
+    }
+    return allItems.value.filter(item => {
+      return selectedFacets.value.some(group => {
+        const cats = getItemFacet(item, group.uid);
+        if (cats && cats.length) {
+          return group.children.some(facet => cats.includes(facet.uid));
+        }
+        return false;
+      });
+    });
+  });
+
+  const searchedItems = computed(() => {
+    if (!searchValue.value?.length) {
+      return filteredItems.value;
+    }
+    const fuse = new Fuse(filteredItems.value, searchOptions.value);
+    return fuse.search(searchValue.value).map(result => result.item);
+  });
+
+  const displayItems = computed(() => {
+    const sortFn = sortTypes.value[selectedSort.value]?.sort;
+    if (typeof sortFn !== 'function') {
+      return searchedItems.value;
+    }
+    // The sort function should not mutate the original array
+    return sortFn([...searchedItems.value]);
+  });
+
+  // --- Methods ---
+  function clearFilters() {
+    facets.value = createFacets(initialFacets);
+  }
+
+  return {
+    // State
+    facets,
+    searchValue,
+    selectedSort,
+    sortTypes,
+
+    // Computed
+    displayItems,
+    selectedFacets,
+
+    // Methods
+    clearFilters
+  };
+}

package/lib/components/systems/index.js

@@ -1,5 +1,8 @@
-export { default as UluFacets } from './facets/UluFacets.vue';
+export { default as UluFacetsFilters } from './facets/UluFacetsFilters.vue';
+export { default as UluFacetsResults } from './facets/UluFacetsResults.vue';
 export { default as UluFacetsSearch } from './facets/UluFacetsSearch.vue';
+export { default as UluFacetsSidebarLayout } from './facets/UluFacetsSidebarLayout.vue';
+export { default as UluFacetsSort } from './facets/UluFacetsSort.vue';
 export { default as UluFacetsList } from './facets/UluFacetsList.vue';
 export { default as UluScrollAnchors } from './scroll-anchors/UluScrollAnchors.vue';
 export { default as UluScrollAnchorsNav } from './scroll-anchors/UluScrollAnchorsNav.vue';

package/package.json

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

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

@@ -1,380 +0,0 @@
-<template>
-  <div class="UluFacets">
-    <div class="UluFacets__header" :class="classes.header">
-      <slot name="header" :count="filteredItems.length"></slot>
-      <div class="UluFacets__header-actions" :class="classes.headerActions">
-        <button 
-          @click="toggleFilterVisibility"
-          :class="classes.buttonFilterToggle" 
-          :aria-controls="filterId"
-          :aria-expanded="filtersHidden ? 'false' : 'true'" 
-          type="button"
-        >
-          <slot name="buttonFilterToggle" :hidden="filtersHidden">
-            {{ filtersHidden ? 'Show' : 'Hide' }} Filters
-          </slot>
-        </button>
-        <button 
-          v-if="selectedFacets.length"
-          @click="clearFilters" 
-          :class="classes.buttonClearFilters" 
-          type="button"
-        >
-          <slot name="buttonClearFilters">
-            Clear Filters
-          </slot>
-        </button>
-        <div :class="classes.sortForm">
-          <label 
-            :for="sortId" 
-            :class="classes.sortFormLabel"
-          >Sort:</label>
-          <select 
-            v-model="selectedSort" 
-            :id="sortId" 
-            :class="classes.sortFormSelect"
-          >
-            <option v-for="(item, key) in sortTypes" :value="key" :key="key">
-              {{ item.text }}
-            </option>
-          </select>
-        </div>
-      </div>
-    </div>
-    <div class="UluFacets__body">
-      <transition name="UluFacetsFade" mode="out-in">
-        <div 
-          v-show="!filtersHidden"
-          class="UluFacets__filters"
-          :id="filterId" 
-          :class="{ 'UluFacets__filters--hidden' : filtersHidden }"
-        >
-          <UluFacetsSearch 
-            :classes="classes"
-            :initialValue="initialSearchValue"
-            :placeholder="searchPlaceholder"
-            v-model="searchValue"
-          />
-          <UluCollapsibleRegion 
-            class="UluFacets__group"
-            :class="classes.group"
-            :classToggle="['UluFacets__group-toggle', classes.groupToggle]"
-            :classContent="['UluFacets__group-content', classes.groupContent]"
-            v-for="group in facets"
-            :key="group.uid"
-            :group="group"
-            :startOpen="group.open"
-            :clickOutsideCloses="false"
-            :closeOnEscape="false"
-            :transitionHeight="true"
-          >
-            <template #toggle="{ isOpen }">
-              <slot name="groupToggle" :group="group" :isOpen="isOpen">
-                {{ group.name }}
-              </slot>
-            </template>
-            <template #default>
-              <UluFacetsList 
-                :children="group.children.slice(0, maxVisible)"
-                :groupUid="group.uid"
-                :classFacet="classes.facet"
-              />
-              <UluCollapsibleRegion 
-                v-if="group.children.length > maxVisible"
-                class="UluFacets__more-facets"
-                :class="classes.moreFacets"
-                :clickOutsideCloses="false"
-                :closeOnEscape="false"
-                :transitionHeight="true"
-              >
-                <template #toggle="{ isOpen }">
-                  {{ isOpen ? "- Less" : "+ More" }}
-                </template>
-                <template #default>
-                  <UluFacetsList 
-                    :children="group.children.slice(maxVisible)"
-                    :groupUid="group.uid"
-                    :classFacet="classes.facet"
-                  />
-                </template>
-              </UluCollapsibleRegion>
-            </template>
-          </UluCollapsibleRegion>
-        </div>
-      </transition>
-      <transition name="UluFacetsFade" mode="out-in">
-        <ul
-          class="UluFacets__results"
-          :class="classes.results"
-          :key="filterIteration"
-          v-if="resultsVisible && filteredItems.length"
-        >
-
-          <li
-            class="UluFacets__results-item"
-            :class="classes.resultsItem"
-            v-for="(item, index) in filteredItems"
-            :key="index"
-          >
-            <slot name="item" :item="item" :index="index"></slot>
-          </li>
-        </ul>
-        <div v-else class="UluFacets__empty">
-          <slot name="empty">
-            No Results Found
-          </slot>
-        </div>
-      </transition>
-      <!-- <div class="UluFacets__pagination"></div> -->
-    </div>
-  </div>
-</template>
-
-<script>
-  import Fuse from 'fuse.js';
-  import UluFacetsList from "./UluFacetsList.vue";
-  import UluFacetsSearch from "./UluFacetsSearch.vue";
-  import UluCollapsibleRegion from "../../collapsible/UluCollapsibleRegion.vue";
-
-  let idCounter = 0;
-  const sortAlpha = items => {
-    const getTitle = i => (i.title || i.label || "");
-    return items.sort((a, b) => getTitle(a).localeCompare(getTitle(b)));
-  }
-  const defaultSorts = {
-    az: { text: "A-Z", sort: sortAlpha },
-    za: { text: "Z-A", sort: items => sortAlpha(items).reverse() },
-  };
-  export default {
-    name: 'UluFacets',
-    components: { 
-      UluCollapsibleRegion, 
-      UluFacetsList,
-      UluFacetsSearch
-    },
-    props: {
-      /**
-       * Options passed to fuse js for search feature
-       */
-      searchOptions: {
-        type: Object,
-        default: () => ({
-          // isCaseSensitive: false,
-          // includeScore: false,
-          shouldSort: true,
-          // includeMatches: false,
-          // findAllMatches: false,
-          // minMatchCharLength: 1,
-          // location: 0,
-          // threshold: 0.6,
-          // distance: 100,
-          // useExtendedSearch: false,
-          // ignoreLocation: false,
-          // ignoreFieldNorm: false,
-          // fieldNormWeight: 1,
-          keys: [
-            "title",
-            "label",
-            "description",
-            "author"
-          ]
-        })
-      },
-      initialFiltersHidden: Boolean,
-      searchPlaceholder: String,
-      /**
-       * Array of facet configurations
-       */
-      initialFacets: {
-        required: true,
-        type: Array
-      },
-      initialSearchValue: String,
-      classes: {
-        type: Object,
-        required: false,
-        default: () => ({})
-      },
-      /**
-       * Maximum facets shown per group before truncating
-       */
-      maxVisible: {
-        type: Number,
-        default: 5
-      },
-      /**
-       * Array of objects of the items to display
-       */
-      items: {
-        required: true,
-        type: Array
-      },
-      /**
-       * Provides a way to find categories for each facet
-       * @param {Object} item An item to lookup the facet/category info for
-       * @param {String} uid The facet's uid (the categories uid) to return a value, value should be an array of facet (child) keys
-       */
-      getItemFacet: {
-        type: Function,
-        default: (item, uid) => item[uid]
-      },
-      /**
-       * Return the value for an item to use for sorting alphabetically
-       */
-      getItemSortAlpha: {
-        type: Function,
-        default: item => (item.title || item.label || "")
-      },
-      initialSortType: {
-        type: String,
-        default: "az"
-      },
-      noDefaultSorts: Boolean,
-      extraSortTypes: {
-        type: Object,
-        default: () => ({})
-      }
-    },
-    data() {
-      const { 
-        initialFiltersHidden, 
-        initialSearchValue,
-        noDefaultSorts,
-        initialSortType,
-        extraSortTypes
-      } = this;
-      return {
-        filterId: `ulu-facet-filters-${ ++idCounter }`,
-        sortId: `ulu-facet-sort-${ ++idCounter }`,
-        selectedSort: initialSortType,
-        sortTypes: {
-          ...(noDefaultSorts ? {} : defaultSorts),
-          ...extraSortTypes
-        },
-        facets: this.createFacets(), // Copy of users facet configs
-        filtersHidden: initialFiltersHidden || false,
-        searchValue: initialSearchValue || null,
-        resultsVisible: true,
-        filterIteration: 0,
-      }
-    },
-    computed: {
-      /**
-       * Returns an array of groups with children that are active
-       */
-      selectedFacets() {
-        const selected = [];
-        this.facets.forEach((group) => {
-          const { name, uid, children } = group;
-          let count = 0;
-          let added = false;
-          if (children) {
-            children.forEach(child => {
-              if (child.selected) {
-                ++count;
-                if (!added) {
-                  selected.push({ uid, name, children: [] });
-                  added = true;
-                }
-                selected[selected.length - 1].children.push(child);
-              }
-            });
-          }
-          group.selectedCount = count;
-        });
-        return selected;
-      },
-      filteredItems() {
-        this.resultsVisible = false;
-        const { getItemFacet, selectedFacets, sortTypes, selectedSort } = this;
-        const sort = sortTypes[selectedSort].sort;
-
-        const filteredItems = this.items.filter(item => {
-          if (selectedFacets.length) {
-            return selectedFacets.some(group => {
-              let matched;
-              const cats = getItemFacet(item, group.uid);
-              if (cats && cats.length) {
-                matched = group.children.some(facet => cats.includes(facet.uid));
-              }
-              return matched;
-            });
-          // No filters are applied
-          } else {
-            return true;
-          }
-        });
-        // Increment counter (used for transitions)
-        // this.filterIteration = filterIteration + 1;
-        const newItems = sort(this.search(filteredItems));
-        // this.resultsVisible = false;
-        this.$nextTick(() => {
-          this.resultsVisible = true;
-          this.filterIteration = this.filterIteration + 1;
-          //  this.$nextTick(() => this.resultsVisible = true);
-        });
-        return newItems;
-      }
-    },
-    methods: {
-      /**
-       * Resets all active filters to user's initial
-       */
-      clearFilters() {
-        this.facets = this.createFacets();
-      },
-      /**
-       * Maps users initial facets to the local facet array used in this component
-       */
-      createFacets() {
-        return this.initialFacets.map(group => {
-          const children =  group.children.map(facet => ({
-            ...facet,
-            selected: facet.selected || false
-          }));
-          return {
-            ...group,
-            open: group.open || false,
-            children,
-            selectedCount: 0
-          };
-        })
-      },
-      /**
-       * Search applied to an already filtered batch of items
-       */
-      search(items) {
-        const { searchValue, searchOptions } = this;
-        if (!searchValue?.length) return items;
-        const fuse = new Fuse(items, searchOptions);
-        const results = fuse.search(searchValue);
-        return results.map(result => result.item);
-      },
-      toggleFilterVisibility() {
-        this.filtersHidden = !this.filtersHidden;
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-  .UluFacets__more-facets {
-    display: flex;
-    flex-direction: column;
-    &.UluCollapsibleRegion--open,
-    &.UluCollapsibleRegion--transitioning {
-      .UluCollapsibleRegion__content {
-        order: -1;
-      }
-    }
-  }
-  .UluFacetsFade-enter-active,
-  .UluFacetsFade-leave-active {
-    transition: opacity 0.25s ease;
-  }
-
-  .UluFacetsFade-enter-from,
-  .UluFacetsFade-leave-to {
-    opacity: 0;
-  }
-</style>