@ulu/frontend-vue 0.1.0-beta.1

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

@@ -0,0 +1,380 @@
+<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>

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

@@ -0,0 +1,39 @@
+<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>
+</template>
+
+<script>
+  export default {
+    name: 'UluFacetsList',
+    props: {
+      groupUid: String,
+      children: Array,
+      classFacet: String
+    },
+    methods: {
+      facetCheckboxId(facet) {
+        return `facet-${ this.groupUid }-${ facet.uid }`;
+      }
+    }
+  }
+</script>

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="UluFacets__keyword-search">
+    <label :class="classes.searchLabel" :for="id">
+      <strong>Search</strong>
+    </label>
+    <input 
+      :id="id" 
+      :class="classes.searchInput" 
+      v-model="localValue"
+      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 }`
+      }
+    },
+    computed: {
+      localValue: {
+        get() {
+          return this.modelValue;
+        },
+        set(val) {
+          this.$emit('update:modelValue', val);
+        }
+      }
+    },
+    methods: {
+      clear() {
+        // this.value = null;
+        // this.applied = false;
+        // this.$emit("search", null);
+      }
+    }
+  }
+</script>

package/lib/components/systems/facets/_facets.scss

@@ -0,0 +1,64 @@
+////
+/// @group facets
+/// Filterable/Sortable View
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "@ulu/frontend/scss/selector";
+@use "@ulu/frontend/scss/utils";
+@use "@ulu/frontend/scss/color";
+@use "@ulu/frontend/scss/element";
+
+
+// Used for function fallback
+$-fallbacks: (
+  // "box-shadow" : (
+  //   "function" : meta.get-function("get", false, "element"),
+  //   "property" : "box-shadow"
+  // ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue}  example  [true] Example
+
+$config: (
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-facets-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-facets-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "facets [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+/// Prints component styles
+/// @demo facets
+/// @example scss
+///  @include ulu.component-facets-styles();
+
+@mixin styles {
+  $prefix: selector.class("facets");
+
+  #{ $prefix }__body {
+        .FacetView__body {
+        display: flex
+;
+    }
+  }
+}
+
+

package/lib/components/systems/index.js

@@ -0,0 +1,17 @@
+export { default as UluFacets } from './facets/UluFacets.vue';
+export { default as UluFacetsSearch } from './facets/UluFacetsSearch.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';
+export { default as UluScrollAnchorsNavAnimated } from './scroll-anchors/UluScrollAnchorsNavAnimated.vue';
+export { default as UluScrollAnchorsSection } from './scroll-anchors/UluScrollAnchorsSection.vue';
+export { default as UluShowSkeleton } from './skeleton/UluShowSkeleton.vue';
+export { default as UluSkeletonContent } from './skeleton/UluSkeletonContent.vue';
+export { default as UluSkeletonMedia } from './skeleton/UluSkeletonMedia.vue';
+export { default as UluSkeletonTextInline } from './skeleton/UluSkeletonTextInline.vue';
+export { default as UluImageSlideShow } from './slider/UluImageSlideShow.vue';
+export { default as UluSlideShow } from './slider/UluSlideShow.vue';
+export { default as UluSlideShowSlide } from './slider/UluSlideShowSlide.vue';
+export { default as UluTableSticky } from './table-sticky/UluTableSticky.vue';
+export { default as UluTableStickyRows } from './table-sticky/UluTableStickyRows.vue';
+export { default as UluTableStickyTable } from './table-sticky/UluTableStickyTable.vue';