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

package/lib/components/collapsible/UluCollapsibleRegion.vue

@@ -1,278 +0,0 @@
-<template>
-  <div 
-    class="CollapsibleRegion"
-    @keydown.esc="handleEscape"
-    :class="{ 
-      'CollapsibleRegion--open' : isOpen,
-      'CollapsibleRegion--closed' : !isOpen,
-      'CollapsibleRegion--transitioning' : isTransitioning
-    }"
-  >
-    <button 
-      class="CollapsibleRegion__toggle"
-      :id="toggleId"
-      :aria-controls="contentId" 
-      :aria-expanded="isOpen"
-      @click="toggle"
-    >
-      <slot name="toggle" :isOpen="isOpen">
-        {{ title }}
-      </slot>
-    </button>
-    <div 
-      class="CollapsibleRegion__content"
-      tabindex="-1"
-      ref="content"
-      :id="contentId"
-      :aria-hidden="!isOpen"
-      :aria-labelledby="toggleId"
-      :style="contentStyles"
-      v-show="!isHidden"
-    >
-      <!-- 
-      Using inner container to allow no styles on content container
-      as they interfere with getting accurate measurements of the content
-      when it's hidden (scrollHeight) 
-      -->
-      <div class="CollapsibleRegion__content-inner">
-        <slot/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  
-  let uid = 0;
-  /**
-   * Utility component for creating disclosure type behaviors (show/hide)
-   */
-  export default {
-    name: "UluCollapsibleRegion",
-    props: {
-      /**
-       * Set title for toggle (instead of using slot)
-       */
-      title: String,
-      /**
-       * Closes with escape key
-       */
-      closeOnEscape: Boolean,
-      /**
-       * When the component is shown it should start visible or hidden
-       */
-      startOpen: Boolean,
-      /**
-       * Whether or not to transition the show and hide
-       */          
-      transitionHeight: Boolean,
-      /**
-       * Transition should fade as it expands
-       */         
-      transitionFades: Boolean,
-      /**
-       * Transition Timing Function
-       */
-      transitionTiming: {
-        type: String,
-        default: "ease-out"
-      },
-      /**
-       * Transition Duration (css duration string), use comma seperation if different for opacity (fade).
-       * Note: This is used to calculate a fallback timer if transitions fail
-       */      
-      transitionDuration: {
-        type: String,
-        default: "400ms",
-        validator(value) {
-          // Make sure that it's a valid css duration (ms|s)
-          return value.includes("s");
-        }
-      },
-    },
-    data() {
-      const isOpen = this.startOpen;
-      // Note (isOpen vs isHidden): 'isOpen' is the actaul state of the content, 
-      // and 'isHidden' is just used for display none
-      return {
-        isOpen,               
-        toggleId:             this.getUid(),
-        contentId:            this.getUid(),
-        contentHeight:        isOpen ? "auto" : "0px",
-        contentOpacity:       this.transitionFades && !isOpen ? 0 : 1,
-        transitionsDisabled:  false,
-        transitionTimeout:    Math.ceil(this.getUnitlessDuration(this.transitionDuration) + 500),
-        isTransitioning:      false,
-        isHidden:             isOpen ? false : true,
-        onCleanupTransition:  null, // Transitions add function here used if needing to cancel 
-      };
-    },
-    computed: {
-      contentStyles() {
-        if (this.transitionHeight) {
-          return { 
-            overflow:           "hidden",
-            height:             this.contentHeight,
-            transitionDuration: this.transitionDuration,
-            transitionTiming:   this.transitionTiming,
-            opacity:            this.contentOpacity,
-            transitionProperty: this.transitionsDisabled ? "none" : `height${ this.transitionFades ? ",opacity" : "" }`
-          };
-        }
-        return {};
-      }
-    },
-    methods: {
-      
-      /**
-       * Function used to toggle the collapsible 
-       */
-      toggle() {
-        // console.log('Toggle Click', this.isOpen);
-        if (this.isOpen && !this.isTransitioning) {
-          this.close();
-        } else {
-          this.open();
-        }
-      },
-      handleEscape() {
-        if (this.closeOnEscape && this.isOpen) {
-          this.close();
-        }
-      },
-      removeTransition(_canceled) {
-        if (this.onCleanupTransition) this.onCleanupTransition();
-        this.isTransitioning = false;
-        this.onCleanupTransition = null;
-      },
-      /**
-       * Function that will handle setting the styles in a way that allows for
-       * transitioning from display: none to height: auto. With optional fade.
-       */
-      open() {
-        // If there are no animations
-        if (!this.transitionHeight) {
-          this.isOpen = true;
-          this.isHidden = false;
-          return;
-        }
-
-        this.removeTransition(true);
-
-        let tid;
-        const element = this.$refs.content;
-        // When finished clear the fallback and set the height to auto
-        // incase something else on the page changes this elements layout/height,
-        // remove the one time listener, and call the ending callback 
-        // and user callbacks
-        const complete = () => {
-          this.contentHeight = "auto";
-          this.isOpen = true;
-          this.removeTransition();
-          this.$emit("collapsible-opened");
-        };
-        this.onCleanupTransition = () => {
-          clearTimeout(tid);
-          element.removeEventListener("transitionend", complete);
-        };
-        // Listen for the end of the transition we are about to trigger on 
-        element.addEventListener("transitionend", complete);
-        this.isHidden = false;
-        this.isTransitioning = true;
-        this.$emit("collapsible-opening");
-        // Waiting for vue to update the elements style.display from none
-        // so we can measure it's hidden height, set it statically,
-        // to then trigger the transition to that static height
-        this.$nextTick(() => {
-          this.contentHeight = element.scrollHeight + "px";
-          if (this.transitionFades) this.contentOpacity = 1;
-          // Setting a fallback incase anything interupts the browsers 
-          // ability to fire the 'transitionend' event, the element will 
-          // still be functional
-          tid = setTimeout(complete, this.transitionTimeout);
-        });
-      },
-      /**
-       * Function that will handle setting the styles in a way that allows for
-       * transitioning from height: auto to display: none
-       */      
-      close() {
-        // If there are no animations
-        if (!this.transitionHeight) {
-          this.isOpen = false;
-          this.isHidden = true;
-          return;
-        }
-
-        this.removeTransition(true);
-
-        let tid;
-        // Measure the elements height, to set it from auto  
-        // to static so that we can transition it
-        const element = this.$refs.content;
-        const height = element.scrollHeight;
-        // Set the elements height to a static value so we can transition it
-        // then on next tick when that value is set, start the transition
-        const setup = () => {
-          element.addEventListener("transitionend", complete);
-          this.contentHeight = height + "px";
-          this.$nextTick(init);
-        };
-        // Enable transitions and then on next update start it
-        // by setting the height to 0
-        const init = () => {
-          this.transitionsDisabled = false;
-          this.$nextTick(() => {
-            requestAnimationFrame(transition);
-          });
-        };
-        const transition = () => {
-          this.contentHeight = "0px";
-          if (this.transitionFades) this.contentOpacity = 0;
-        };
-        const complete = () => {
-          this.isOpen = false;
-          this.isHidden = true;
-          this.removeTransition();
-          this.$emit("collapsible-closed");
-        };
-        const fallback = () => {
-          transition();
-          complete();
-        };
-        this.onCleanupTransition = () => {
-          clearTimeout(tid);
-          element.removeEventListener("transitionend", complete);
-        };
-        // Temporarily disable the transitions on the element,
-        // on next tick when transistions are disabled (removing transiton-property) 
-        // attach the fallback and setup the transition
-        this.transitionsDisabled = true;
-        this.isTransitioning = true;
-        this.$emit("collapsible-closing");
-        this.$nextTick(() => {
-          requestAnimationFrame(setup);
-          tid = setTimeout(fallback, this.transitionTimeout);
-        });
-      },
-      /**
-       * Returns unitless duration
-       * @param {String} duration - Css duration string
-       */
-      getUnitlessDuration(value) {
-        // Grab only first value in string
-        let duration = parseFloat( value.split(",")[0] );
-        // If not milliseconds we need to convert assumed if 
-        // not milliseconds it's seconds (only other valid duration)
-        return value.includes("ms") ? duration : duration * 1000;
-      },
-      /**
-       * Recursive function to generate and test id uniqueness
-       */
-      getUid() {
-        const id = `Ulu-C-${ ++uid }`;
-        return document.getElementById(id) ? this.getUid() : id;
-      }
-    }
-  };
-</script>

package/lib/components/forms/UluCheckboxMenu.vue

@@ -1,36 +0,0 @@
-<template>
-  <ul class="site-menu site-form">
-    <li
-    class="site-menu__item"
-      v-for="(option, index) in options"
-      :key="index"
-    >
-      <div class="site-menu__checkbox">
-        <input 
-          type="checkbox" 
-          :id="getId(index)" 
-          v-model="option.checked"
-        >
-        <label :for="getId(index)">
-          <slot>
-            {{ option?.title || option?.text }}
-          </slot>
-        </label>
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script>
-  export default {
-    name: "UluCheckboxMenu",
-    props: {
-      options: Array
-    },
-    methods: {
-      getId(index) {
-        return `checkbox-menu-opt-${ index }`;
-      }
-    }
-  };
-</script>

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>

package/lib/components/systems/skeleton/UluSkeletonTextInline.vue

@@ -1,9 +0,0 @@
-<template>
-  <span class="skeleton__text skeleton__text--inline"></span>
-</template>
-
-<script>
-  export default {
-    name: "SkeletonTextInline",
-  };
-</script>