@ulu/frontend-vue 0.1.0-beta.3 → 0.1.0-beta.31

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

@@ -1,11 +1,9 @@
 <template>
-  <div class="skeleton__block skeleton__block--media layout-flex-center-all">
-    <FaIcon style="font-size: 2rem" icon="image"/>
+  <div class="skeleton skeleton-block--media">
+    <UluIcon icon="type:image"/>
   </div>
 </template>
 
-<script>
-  export default {
-    name: "SkeletonMedia",
-  };
+<script setup>
+  import UluIcon from "../../elements/UluIcon.vue";
 </script>

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

@@ -0,0 +1,27 @@
+<template>
+  <span 
+    class="skeleton skeleton--text"
+    :class="{
+      'skeleton--inline' : inline,
+      'skeleton--background-alt' : alt,
+      [`skeleton--width-${ width }`] : width
+    }"
+  ></span>
+</template>
+
+<script setup>
+  defineProps({
+    /**
+     * Inline modifier
+     */
+    inline: Boolean,
+    /**
+     * Use alternate background color
+     */
+    alt: Boolean,
+    /**
+     * Optional size (width) - should correspond with width setup in scss component
+     */
+    width: String
+  });
+</script>

package/lib/components/systems/slider/UluImageSlideShow.vue

@@ -9,7 +9,7 @@
   <UluSlideShow 
     class="slideshow--images" 
     :items="images"
-    @slideChange="slideChange"
+    @slide-change="slideChange"
   >
     <template #slide="{ item }">
       <img :src="item.src" :alt="item.alt">

package/lib/components/systems/slider/UluSlideShow.vue

@@ -50,7 +50,7 @@
             @click="previous"
             :disabled="!canScrollLeft"
           >
-            <FaIcon class="slideshow__control-icon" icon="fas fa-chevron-left"/>
+            <UluIcon class="slideshow__control-icon" icon="type:next"/>
           </button>
         </li>
         <li class="slideshow__controls-item slideshow__controls-item--next">
@@ -60,7 +60,7 @@
             @click="next"
             :disabled="!canScrollRight"
           >
-            <FaIcon class="slideshow__control-icon" icon="fas fa-chevron-right"/>
+            <UluIcon class="slideshow__control-icon" icon="type:previous" />
           </button>
         </li>
       </ul>
@@ -97,8 +97,13 @@
 </template>
 
 <script>
+  import UluIcon from "../../elements/UluIcon.vue";
   export default {
     name: 'SlideShow',
+    emits: ['slide-change'],
+    components: {
+      UluIcon
+    },
     props: {
       /**
        * Should slides be focusable by tab key
@@ -278,7 +283,7 @@
             this.$nextTick(() => {
               const slide = this.getSlideByElement(entry.target);
               slide.active = entry.isIntersecting;
-              this.$emit('slideChange', { slide, track, nav });
+              this.$emit('slide-change', { slide, track, nav });
             });
           });
         };

package/lib/components/systems/table-sticky/UluTableSticky.vue

@@ -43,7 +43,7 @@
             pointerEvents: sizesCalculated ? 'auto' : 'none',
             width: tableWidth
           }"
-          @columnSorted="applySort"
+          @column-sorted="applySort"
         >
           <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
             <slot :name="name" v-bind="slotData" />
@@ -66,7 +66,7 @@
           opacity: headerOpacityX,
           pointerEvents: headerVisibleX ? 'auto' : 'none'
         }"
-        @columnSorted="applySort"
+        @column-sorted="applySort"
       >
         <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
           <slot :name="name" v-bind="slotData" />
@@ -138,9 +138,9 @@
         :getRowValue="getRowValue"
         :getColumnTitle="getColumnTitle"
         @vue:mounted="tableReady"
-        @actualHeaderRemoved="headerRemoved"
-        @actualHeaderAdded="headerAdded"
-        @columnSorted="applySort"
+        @actual-header-removed="headerRemoved"
+        @actual-header-added="headerAdded"
+        @column-sorted="applySort"
       >
         <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
           <slot :name="name" v-bind="slotData" />
@@ -167,7 +167,7 @@
         opacity: headerOpacityX,
         pointerEvents: headerVisibleX ? 'auto' : 'none'
       }"
-      @columnSorted="applySort"
+      @column-sorted="applySort"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
         <slot :name="name" v-bind="slotData" />
@@ -180,7 +180,7 @@
   import UluTableStickyTable from "./UluTableStickyTable.vue";
   import { debounce } from "@ulu/utils/performance.js";
   import { runAfterFramePaint } from "@ulu/utils/browser/performance.js";
-  import cloneDeep from "lodash.clonedeep";
+  import cloneDeep from "lodash-es/cloneDeep.js";
   
   const arrayOfObjects = a => a.every(o => typeof o === "object");
   const required = true;
@@ -443,7 +443,7 @@
         } else {
           column.sortApplied = true;
         }
-        this.$emit("columnSort", column);
+        this.$emit("column-sort", column);
       },
       onColumnResize() {
         if (this.sizesPainted) {

package/lib/components/systems/table-sticky/UluTableStickyTable.vue

@@ -50,7 +50,7 @@
             :class="{ 
               'table-sticky__sort-button--focused' : column.sortFocused,
             }"
-            @click="$emit('columnSorted', column)"
+            @click="$emit('column-sorted', column)"
             @focus="handleSortFocus(column, true)"
             @blur="handleSortFocus(column, false)"
             :aria-pressed="column.sortApplied ? 'true' : 'false'"
@@ -199,9 +199,9 @@
         const { id } = column;
         const old = headerRefs[id];
         if (old) {
-          this.$emit("actualHeaderRemoved", old);
+          this.$emit("actual-header-removed", old);
         }
-        this.$emit("actualHeaderAdded", el);
+        this.$emit("actual-header-added", el);
         headerRefs[id] = el;
       },
       /**

package/lib/composables/index.js

@@ -7,4 +7,7 @@
 export { useIcon } from './useIcon.js';
 export { useModifiers } from './useModifiers.js';
 export { useWindowResize } from './useWindowResize.js';
-export { useBreakpointManager } from './useBreakpointManager.js';
+export { useRequiredInject } from './useRequiredInject.js';
+export { useBreakpointManager } from './useBreakpointManager.js';
+export { usePagination } from './usePagination.js';
+export { useDocumentTitle } from './useDocumentTitle.js';

package/lib/composables/useDocumentTitle.js

@@ -0,0 +1,61 @@
+import { reactive, watchEffect, onUnmounted, unref, computed } from "vue";
+import { useHead as defaultUseHead } from "@unhead/vue";
+import { useRoute as defaultUseRoute } from "vue-router";
+import { getRouteTitle } from "../utils/router.js";
+
+// A reactive map to store component-defined titles.
+const componentTitles = reactive({});
+
+/**
+ * A composable to manage the document title.
+ *
+ * When called with a `title` option, it sets a dynamic title for the current page.
+ * This is for use within specific components.
+ *
+ * When called without a `title` option (typically in App.vue), it manages the
+ * document title for the whole app, using titles from components or route meta.
+ *
+ * @param {object} options
+ * @param {import('vue').Ref<string> | string} [options.title] - The dynamic title to set for the current page.
+ * @param {string} [options.titleTemplate='%s'] - The template for the document title, e.g., '%s | My Site'.
+ * @param {Function} [options.useRoute=defaultUseRoute] - Injectable `useRoute` for testing.
+ * @param {Function} [options.useHead=defaultUseHead] - Injectable `useHead` for testing.
+ */
+export function useDocumentTitle(options = {}) {
+  const {
+    title,
+    titleTemplate = "%s",
+    useRoute = defaultUseRoute,
+    useHead = defaultUseHead,
+  } = options;
+
+  const route = useRoute();
+  const path = route.path;
+
+  // --- Setter Mode ---
+  // If a title is provided, we're in "setter" mode, used within a component.
+  if (title !== undefined) {
+    watchEffect(() => {
+      componentTitles[path] = unref(title);
+    });
+
+    onUnmounted(() => {
+      delete componentTitles[path];
+    });
+    return; // End execution for setter mode.
+  }
+
+  // --- Manager Mode ---
+  // If no title is provided, we're in "manager" mode, used in App.vue.
+  const documentTitle = computed(() => {
+    const titleFromComponent = componentTitles[route.path];
+    const titleFromMeta = getRouteTitle(route, route);
+    const resolvedTitle = titleFromComponent || titleFromMeta;
+
+    return resolvedTitle ? titleTemplate.replace("%s", resolvedTitle) : "App";
+  });
+
+  useHead({
+    title: documentTitle,
+  });
+}

package/lib/composables/usePagination.js

@@ -0,0 +1,122 @@
+import { computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+/**
+ * A Vue composable for handling pagination logic.
+ * It interacts with vue-router to keep the current page in the URL query string.
+ *
+ * @param {import('vue').Ref<Array<any>>} items - A ref containing the full list of items to be paginated.
+ * @param {number} itemsPerPage - The number of items to display per page.
+ * @returns {{
+ *   currentPage: import('vue').ComputedRef<number>,
+ *   totalPages: import('vue').ComputedRef<number>,
+ *   paginatedItems: import('vue').ComputedRef<Array<any>>,
+ *   pagerItems: import('vue').ComputedRef<object|null>,
+ *   pagerEllipses: import('vue').ComputedRef<{previous: boolean, next: boolean}>
+ * }} - An object containing reactive properties for pagination.
+ */
+export function usePagination(items, itemsPerPage) {
+  const route = useRoute();
+  const router = useRouter();
+
+  const currentPage = computed(() => {
+    const page = parseInt(route.query.page || '1', 10);
+    return isNaN(page) || page < 1 ? 1 : page;
+  });
+
+  const totalPages = computed(() => {
+    if (!items.value || items.value.length === 0) return 1;
+    return Math.ceil(items.value.length / itemsPerPage);
+  });
+
+  watch(totalPages, (newTotalPages) => {
+    if (currentPage.value > newTotalPages) {
+      router.push({ query: { ...route.query, page: newTotalPages } });
+    }
+  });
+
+  const paginatedItems = computed(() => {
+    const start = (currentPage.value - 1) * itemsPerPage;
+    const end = start + itemsPerPage;
+    return items.value.slice(start, end);
+  });
+
+  const pagerItems = computed(() => {
+    if (totalPages.value <= 1) {
+      return null;
+    }
+
+    const items = {
+      pages: {}
+    };
+    const page = currentPage.value;
+    const total = totalPages.value;
+    const maxPagesToShow = 5;
+
+    const createRoute = (p) => {
+      return { query: { ...route.query, page: p } };
+    };
+
+    if (page > 1) {
+      items.first = { href: createRoute(1) };
+      items.previous = { href: createRoute(page - 1) };
+    }
+
+    if (page < total) {
+      items.next = { href: createRoute(page + 1) };
+      items.last = { href: createRoute(total) };
+    }
+
+    let startPage, endPage;
+    if (total <= maxPagesToShow) {
+      startPage = 1;
+      endPage = total;
+    } else {
+      const maxPagesBeforeCurrent = Math.floor(maxPagesToShow / 2);
+      const maxPagesAfterCurrent = Math.ceil(maxPagesToShow / 2) - 1;
+      if (page <= maxPagesBeforeCurrent) {
+        startPage = 1;
+        endPage = maxPagesToShow;
+      } else if (page + maxPagesAfterCurrent >= total) {
+        startPage = total - maxPagesToShow + 1;
+        endPage = total;
+      } else {
+        startPage = page - maxPagesBeforeCurrent;
+        endPage = page + maxPagesAfterCurrent;
+      }
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      items.pages[i] = { href: createRoute(i) };
+    }
+
+    return items;
+  });
+
+  const pagerEllipses = computed(() => {
+    const ellipses = { previous: false, next: false };
+    if (!pagerItems.value || !pagerItems.value.pages) return ellipses;
+
+    const pageKeys = Object.keys(pagerItems.value.pages).map(Number);
+    if (pageKeys.length === 0) return ellipses;
+
+    const firstPageInPager = Math.min(...pageKeys);
+    const lastPageInPager = Math.max(...pageKeys);
+
+    if (firstPageInPager > 1) {
+      ellipses.previous = true;
+    }
+    if (lastPageInPager < totalPages.value) {
+      ellipses.next = true;
+    }
+    return ellipses;
+  });
+
+  return {
+    currentPage,
+    totalPages,
+    paginatedItems,
+    pagerItems,
+    pagerEllipses
+  };
+}

package/lib/composables/useRequiredInject.js

@@ -0,0 +1,26 @@
+import { inject } from 'vue';
+import { injectRegistry } from "../meta.js";
+
+// A unique sentinel object to detect if a value was provided.
+// This is used to differentiate between a provider not existing vs.
+// a provider explicitly giving a `null` value.
+const NOT_FOUND = {};
+
+/**
+ * Injects a dependency from a plugin (or other required inject) and throws an error if it's not available.
+ *
+ * @param {string} key - The injection key (e.g., 'uluBreakpointManager').
+ * @returns The injected value.
+ */
+export function useRequiredInject(key) {
+  const dependency = inject(key, NOT_FOUND);
+
+  if (dependency === NOT_FOUND) {
+    const plugin = injectRegistry[key] || '';
+    const pluginInfo = plugin ? ` from the '${ plugin }' plugin` : "";
+    const action = plugin ? "Please install missing plugin." : ""; 
+    throw new Error(`Required inject: '${ key }'${ pluginInfo } was not provided. ${ action }`);
+  }
+
+  return dependency;
+}

package/lib/index.js

@@ -7,4 +7,4 @@
 export * from './plugins/index.js';
 export * from './components/index.js';
 export * from './composables/index.js';
-export * from './settings.js';
+export * as utils from './utils/index.js';

package/lib/meta.js

@@ -0,0 +1,14 @@
+/**
+ * @module lib/meta
+ * @description A central lookup for meta like info in the system
+ */
+
+export const injectRegistry = {
+  'uluCore': 'Core',
+  'uluIsMobile': 'Breakpoints',
+  'uluBreakpointActive': 'Breakpoints',
+  'uluBreakpointDirection': 'Breakpoints',
+  'uluBreakpointManager': 'Breakpoints',
+  'uluModals': 'Modals',
+  'uluToast': 'Toast',
+};

package/lib/plugins/core/index.js

@@ -0,0 +1,91 @@
+/**
+ * @module plugins/core/index.js
+ * @description Core plugin for managing shared configuration for the library.
+ */
+import { reactive } from 'vue';
+
+const defaults = {
+  fontAwesomeStatic: false,
+  iconComponent: null,
+  iconPropResolver: (definition) => ({ icon: definition }),
+  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",
+    image: "fas fa-image",
+    file: "fas fa-file",
+    next: "fas fa-chevron-left",
+    previous: "fas fa-chevron-right"
+  }
+};
+
+export const iconKeys = Object.keys(defaults.iconsByType);
+
+export default function install(app, userSettings = {}) {
+  // A single reactive object for all settings
+  const settings = reactive({ ...defaults });
+
+  // Separate icon overrides from other options to handle them safely
+  const { iconsByType: iconOverrides, ...otherOptions } = userSettings || {};
+
+  // Merge any user-provided options during installation
+  if (otherOptions) {
+    Object.assign(settings, otherOptions);
+  }
+
+  const api = {
+    // Methods to interact with settings
+    getSettings() {
+      return settings;
+    },
+    getDefaultSettings() {
+      return { ...defaults };
+    },
+    updateSettings(changes) {
+      return Object.assign(settings, changes);
+    },
+    getSetting(key) {
+      if (!settings.hasOwnProperty(key)) {
+        console.warn(`Attempted to access non-existent setting: ${key}`);
+        return;
+      }
+      return settings[key];
+    },
+    updateSetting(key, value) {
+      if (typeof key !== "string") {
+        throw new Error("Expected key to be string");
+      }
+      settings[key] = value;
+    },
+    getIcon(type) {
+      const icons = settings.iconsByType;
+      if (!icons[type]) {
+        throw new Error(`Icon type "${type}" not found!`);
+      }
+      return icons[type];
+    },
+    setIcon(type, definition) {
+      settings.iconsByType[type] = definition;
+    }
+  };
+
+  // Apply any individual icon overrides passed during installation
+  if (iconOverrides) {
+    for (const [type, definition] of Object.entries(iconOverrides)) {
+      api.setIcon(type, definition);
+    }
+  }
+
+  app.provide('uluCore', api);
+  app.config.globalProperties.$uluCore = api;
+}

package/lib/plugins/index.js

@@ -5,6 +5,7 @@
  */
 
 
+export { default as corePlugin } from './core/index.js';
 export { default as popoversPlugin } from './popovers/index.js';
 export { default as modalsPlugin } from './modals/index.js';
 export { default as toastPlugin } from './toast/index.js';

package/lib/plugins/popovers/UluPopover.vue

@@ -4,6 +4,7 @@
     type="button" 
     ref="trigger"
     @click="toggle"
+    :id="triggerId"
     :disabled="disabled"
     :class="[ 
       { [activeClass] : isOpen }, 
@@ -27,7 +28,7 @@
       }, 
       classes.content,
     ]"
-    :aria-hidden="isOpen ? 'false' : 'true'" 
+    :aria-labelledby="triggerId" 
     :id="id" 
     :style="floatingStyles"
     :data-placement="placement"
@@ -95,6 +96,7 @@
   });
 
   const id = newUid();
+  const triggerId = newUid();
   const config = Object.assign({}, defaults.popover, props.config);
   const isOpen = ref(props.startOpen || false);
   const trigger = ref(null);

package/lib/plugins/toast/UluToast.vue

@@ -13,7 +13,7 @@
   >
     <div v-if="toast.icon || $slots.icon" class="toast__icon" :class="classes.icon">
       <slot name="icon" :toast="toast">
-        <FaIcon v-if="toast.icon" :icon="toast.icon"/>
+        <UluIcon v-if="toast.icon" :icon="toast.icon"/>
       </slot>
     </div>
     <div class="toast__content" :class="classes.content">
@@ -43,7 +43,7 @@
       </button>
     </div>
     <button class="toast__close" :class="classes.closeButton" @click="toast.close">
-      <UluIcon type="close"/>
+      <UluIcon :icon="'type:close'"/>
     </button>
   </div>
 </template>

package/lib/utils/index.js

@@ -0,0 +1,2 @@
+export * as dom from './dom.js';
+export * as router from './router.js';