@ulu/frontend-vue 0.1.0-beta.9 → 0.1.1-beta.10

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

@@ -0,0 +1,97 @@
+<template>
+  <div class="UluFacetsFilters">
+    <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]
+      }"
+      :startOpen="group.open"
+    >
+      <template #trigger="{ isOpen }">
+        <slot name="groupToggle" :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)"
+        />
+        <UluCollapsible
+          v-if="group.children.length > maxVisible"
+          class="ulu-facets__more-facets"
+          :class="classes.moreFacets"
+          :clickOutsideCloses="false"
+          :closeOnEscape="false"
+          :transitionHeight="true"
+        >
+          <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>
+        </UluCollapsible>
+      </template>
+    </UluCollapsible>
+  </div>
+</template>
+
+<script setup>
+  import UluFacetsList from "./UluFacetsList.vue";
+  import UluCollapsible from "../../collapsible/UluCollapsible.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,
+  });
+
+  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/UluFacetsFilterPopovers.vue

@@ -0,0 +1,125 @@
+<template>
+  <div :class="classes.container">
+    <div v-for="group in facets" :key="group.uid" :class="classes.group">
+      <UluPopover 
+        :classes="{ 
+          trigger: classes.trigger,
+          content: classes.content
+        }
+      ">
+        <template #trigger>
+          <slot name="trigger" :group="group" :label="selectedLabel(group)">
+            <span>{{ group.name }}: <strong>{{ selectedLabel(group) }}</strong></span>
+          </slot>
+          <UluIcon :class="classes.triggerIcon" icon="fas fa-chevron-down" />
+        </template>
+        <template #default="{ close }">
+          <UluSelectableMenu
+            :legend="group.name"
+            :type="group.multiple ? 'checkbox' : 'radio'"
+            :options="getMenuOptions(group)"
+            :model-value="selectedUids(group)"
+            @update:model-value="onFilterChange(group, $event, close)"
+            :hideInputs="hideInputs"
+          />
+        </template>
+      </UluPopover>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import UluPopover from '../../../plugins/popovers/UluPopover.vue';
+import UluSelectableMenu from '../../forms/UluSelectableMenu.vue';
+import UluIcon from '../../elements/UluIcon.vue';
+
+const props = defineProps({
+  /**
+   * An array of facet groups to display.
+   */
+  facets: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * An object of classes to apply to the component.
+   */
+  classes: {
+    type: Object,
+    default: () => ({
+      trigger: "button",
+      triggerIcon: "button__icon"
+      // content: null,
+      // container: null,
+      // group: null
+    })
+  },
+  /**
+   * If true, the input elements will be visually hidden.
+   */
+  hideInputs: Boolean
+});
+
+const emit = defineEmits(['facet-change']);
+
+const getMenuOptions = (group) => {
+  if (group.multiple) {
+    return group.children;
+  }
+  return [{ label: `All ${group.name}s`, uid: '' }, ...group.children];
+};
+
+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 || '';
+};
+
+const selectedLabel = (group) => {
+  const selectedItems = group.children.filter(c => c.selected);
+  const count = selectedItems.length;
+
+  if (count === 0) {
+    return 'All';
+  }
+
+  if (group.multiple) {
+    if (count === 1) {
+      return selectedItems[0].label;
+    }
+    return `${count} selected`;
+  }
+
+  return selectedItems[0].label;
+};
+
+function onFilterChange(group, value, closePopover) {
+  if (group.multiple) {
+    const selectedUids = new Set(value);
+    group.children.forEach(facet => {
+      const shouldBeSelected = selectedUids.has(facet.uid);
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: group.uid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
+      }
+    });
+  } else {
+    const selectedUid = value;
+    group.children.forEach(facet => {
+      const shouldBeSelected = facet.uid === selectedUid;
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: group.uid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
+      }
+    });
+    closePopover();
+  }
+}
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+  <div class="facets-dropdown-filters">
+    <div
+      class="facets-dropdown-filters__group"
+      v-for="group in facets"
+      :key="group.uid"
+    >
+      <label :for="`facet-dropdown-${group.uid}`" class="facets-dropdown-filters__label">
+        {{ group.name }}
+      </label>
+      <select
+        :id="`facet-dropdown-${group.uid}`"
+        class="facets-dropdown-filters__select"
+        @change="onFilterChange(group, $event)"
+      >
+        <option value="">All {{ group.name }}s</option>
+        <option
+          v-for="option in group.children"
+          :key="option.uid"
+          :value="option.uid"
+          :selected="option.selected"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  facets: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['facet-change']);
+
+function onFilterChange(group, event) {
+  const selectedUid = event.target.value;
+
+  const currentlySelected = group.children.find(c => c.selected);
+  if (currentlySelected?.uid === selectedUid) return;
+
+  group.children.forEach(facet => {
+    const shouldBeSelected = facet.uid === selectedUid;
+    if (facet.selected !== shouldBeSelected) {
+      emit('facet-change', {
+        groupUid: group.uid,
+        facetUid: facet.uid,
+        selected: shouldBeSelected
+      });
+    }
+  });
+}
+</script>
+
+<style lang="scss">
+.facets-dropdown-filters {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.facets-dropdown-filters__group {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+  <div class="facets-header-layout">
+    <div class="facets-header-layout__header">
+      <slot name="header"></slot>
+    </div>
+    <div class="facets-header-layout__main">
+      <slot name="main"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// This component is purely for layout, no logic needed.
+</script>
+
+<style lang="scss">
+.facets-header-layout__header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+</style>

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

@@ -1,39 +1,69 @@
 <template>
-  <ul class="UluFacets__facet-list">
-    <li 
-      class="UluFacets__facet"
-      :class="classFacet"
-      v-for="facet in children"
-      :key="facet.uid"
-    >
-      <input 
-        class="UluFacets__facet-checkbox"
-        :id="facetCheckboxId(facet)"
-        type="checkbox" 
-        v-model="facet.selected"
-      >
-      <label 
-        class="UluFacets__facet-label" 
-        :for="facetCheckboxId(facet)"
-      >
-        {{ facet.label }}
-      </label>
-    </li>
-  </ul>
+  <UluSelectableMenu
+    class="ulu-facets__facet-list"
+    :legend="groupUid"
+    :type="type"
+    :options="menuOptions"
+    :compact="compact"
+    :model-value="modelValue"
+    @update:model-value="handleChange"
+  >
+    <template #default="{ option }">
+      {{ option.label }} <span v-if="option.count !== undefined">({{ option.count }})</span>
+    </template>
+  </UluSelectableMenu>
 </template>
 
-<script>
-  export default {
-    name: 'UluFacetsList',
-    props: {
-      groupUid: String,
-      children: Array,
-      classFacet: String
-    },
-    methods: {
-      facetCheckboxId(facet) {
-        return `facet-${ this.groupUid }-${ facet.uid }`;
+<script setup>
+import { computed } from 'vue';
+import UluSelectableMenu from '../../forms/UluSelectableMenu.vue';
+
+const props = defineProps({
+  groupUid: String,
+  groupName: String,
+  children: Array,
+  type: {
+    type: String,
+    default: 'checkbox',
+  },
+  compact: Boolean,
+  modelValue: [String, Array],
+});
+
+const emit = defineEmits(['facet-change']);
+
+const menuOptions = computed(() => {
+  if (props.type === 'radio') {
+    return [{ label: `All ${props.groupName}s`, uid: '' }, ...props.children];
+  }
+  return props.children;
+});
+
+function handleChange(value) {
+  if (props.type === 'radio') {
+    const selectedUid = value;
+    props.children.forEach(facet => {
+      const shouldBeSelected = facet.uid === selectedUid;
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: props.groupUid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
+      }
+    });
+  } else {
+    const selectedUids = new Set(value);
+    props.children.forEach(facet => {
+      const shouldBeSelected = selectedUids.has(facet.uid);
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: props.groupUid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
       }
-    }
+    });
   }
-</script>
+}
+</script>

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="facets-results">
+    <transition-group
+      v-if="items.length"
+      :tag="tag"
+      :name="transitionName"
+      class="facets-results__list"
+      :class="classes.list"
+    >
+      <li
+        class="facets-results__item"
+        :class="classes.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="facets-results__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: 'facets-fade'
+    },
+    classes: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+</script>
+
+<style lang="scss">
+  .facets-results__list {
+    list-style: none;
+    padding: 0;
+  }
+
+  .facets-fade-enter-active,
+  .facets-fade-leave-active {
+    transition: opacity 0.25s ease;
+  }
+
+  .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>
@@ -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>