@ulu/frontend-vue 0.1.0-beta.2 → 0.1.0-beta.21

package/lib/components/forms/UluFormDropzone.vue

@@ -1,62 +0,0 @@
-<!-- Based on https://react-dropzone.js.org/#section-basic-example -->
-<template>
-  <div 
-    class="site-dropzone site-form__item site-form__item--file"
-    :class="{ 'is-danger' : fileErrors.length }"
-  >
-    <div 
-      class="site-dropzone__target" 
-      :class="{
-        'site-dropzone__target--dropping' : isDragActive
-      }"
-      v-bind="getRootProps()"
-    >
-      <input v-bind="getInputProps()" />
-      <div class="site-dropzone__instructions">
-        <strong class="type-normal">
-          Drag 'n' drop files here, or click to select
-        </strong>
-      </div>
-    </div>
-    <p class="site-form__description">
-      <em>Only images allowed (.jpg, .png)</em>
-    </p>
-    <div v-if="fileErrors.length" class="site-dropzone__errors site-form__description site-form__error">
-      <ul class="list-unordered">
-        <li v-for="(fileErr, index) in fileErrors" :key="index">
-          <strong>{{ fileErr.file.name }}</strong>:
-          <span>{{ fileErr.errors.map(e => e.message).join() }}</span>
-        </li>
-      </ul>
-    </div>
-    <div class="site-dropzone__display margin-top" v-if="files.length">
-      <strong>Files</strong>
-      <FilesDisplay class="site-dropzone__list" :files="files"/>
-    </div>
-  </div>
-</template>
-
-<script setup>
-  import { ref } from "vue";
-  import { useDropzone } from "vue3-dropzone";
-
-  const files = ref([]);
-  const fileErrors = ref([]);
-
-  const $emit = defineEmits(["filesChange"]);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
-    onDrop: (acceptFiles, rejectReasons) => {
-      if (rejectReasons) {
-        fileErrors.value = rejectReasons.map(err => err);
-      } else {
-        fileErrors.value = [];
-      }
-      if (acceptFiles.length) {
-        files.value = acceptFiles.map(file => file);
-        $emit("filesChange", files.value);
-      }
-    },
-    accept: [".png", ".jpg", ".jpeg"]
-  });
-</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>

package/lib/settings.js

@@ -1,119 +0,0 @@
-/**
- * @module settings
- * @description Manages shared configuration for the library.
- */
-
-import { reactive } from 'vue'; 
-
-/**
- * Default settings
- * @typedef {object} Defaults
- * @property {string} fontAwesomeStatic - Whether the default UluIcon should use fontawesome vue or fontawesome CSS classes (static)
- */
-
-/**
- * @type {Defaults}
- */
-const defaults = {
-  /**
-   * If set UluIcon will use global css classes instead of Font Awesome vue component
-   */
-  fontAwesomeStatic: false,
-  /**
-   * Use a different icon component (if using a library other than Font Awesome)
-   * - Need to have this component map (iconsByType) to it's implementation
-   * - All components internally use type, so only user defined components change definitions
-   *   - So you should only need to create definitions for the default types to replace this for the library
-   */
-  iconComponent: null,
-  /**
-   * Which prop in iconComponent should receive the resolved definition
-   */
-  iconPropResolver: (definition) => ({ icon: definition }),
-  /**
-   * Default icons by type
-   */
-  iconsByType: {
-    danger: "fas fa-triangle-exclamation",
-    warning: "fas fa-circle-exclamation",
-    info: "fas fa-circle-info",
-    success: "fas fa-circle-check",
-    externalLink: "fas fa-arrow-up-right-from-square",
-    close: "fas fa-xmark",
-    expand: "fas fa-plus",
-    collapse: "fas fa-minus",
-    resizeHorizontal: "fas fa-grip-lines-vertical",
-    resizeVertical: "fas fa-grip-lines",
-    resizeBoth: "fas fa-grip",
-    ellipsis: "fas fa-ellipsis",
-    pathSeparator: "fas fa-chevron-right"
-  }
-};
-
-// Current configuration, initialized with defaults and made reactive
-// We wrap `defaults` in `reactive` so `currentSettings` becomes a reactive object.
-let currentSettings = reactive({ ...defaults });
-
-/**
- * Retrieves a copy of the default settings.
- * @returns {object} A copy of the default settings object.
- */
-export function getDefaultSettings() {
-  // Return a non-reactive copy of defaults
-  return { ...defaults };
-}
-
-/**
- * Updates multiple configuration settings.
- * @param {object} changes An object containing the settings to update.
- */
-export function updateSettings(changes) {
-  Object.assign(currentSettings, changes);
-}
-
-/**
- * Retrieves a copy of the current configuration settings.
- * @returns {object} A copy of the current settings object (vue reactive object)
- */
-export function getSettings() {
-  return currentSettings; 
-}
-
-/**
- * Retrieves a specific configuration setting by key.
- * @param {string} key The key of the setting to retrieve.
- * @returns {*} The value of the setting, or undefined if not found.
- */
-export function getSetting(key) {
-  if (!currentSettings.hasOwnProperty(key)) {
-    console.warn(`Attempted to access non-existent setting: ${key}`);
-    return;
-  }
-  return currentSettings[key];
-}
-
-/**
- * Updates a specific configuration setting.
- * @param {string} key The key of the setting to update.
- * @param {*} value The new value for the setting.
- */
-export function updateSetting(key, value) {
-  if (typeof key !== "string") {
-    throw new Error("Expected key to be string");
-  }
-  currentSettings[key] = value;
-}
-
-/**
- * Retrieves the icon definition by type
- * @param {string} type - The type of icon to retrieve (e.g., 'error', 'info').
- * @returns {string} The icon definition
- * @throws {Error} If the specified icon type is not found
- */
-export function getIconByType(type) {
-  const icons = currentSettings.iconsByType;
-  if (!icons[type]) {
-    throw new Error(`Icon type "${ type }" not found!`);
-  }
-  return icons[type];
-}

package/lib/utils/placeholder.js

@@ -1,6 +0,0 @@
-export default {
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.",
-  textSmall: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet.",
-  paragraph: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>",
-  paragraphSmall: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. </p>"
-}