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

package/lib/components/visualizations/UluProgressCircle.vue

@@ -0,0 +1,159 @@
+<template>
+  <div :class="componentClasses">
+    <strong class="hidden-visually">{{ label }}</strong>
+    <div class="progress-circle__chart">
+      <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
+        <circle
+          class="progress-circle__chart-track"
+          r="16"
+          cx="16"
+          cy="16"
+        />
+        <circle 
+          class="progress-circle__chart-pie" 
+          ref="pie"
+          r="16" 
+          cx="16" 
+          cy="16"
+          :style="{ strokeDasharray: endDasharray }"
+        />
+        <circle 
+          class="progress-circle__chart-mask" 
+          cx="16" 
+          cy="16" 
+        />
+      </svg>
+      <strong v-if="!showValueOutside && !noValue" class="progress-circle__chart-value">
+        <slot name="value" :value="percentage">{{ formatValue(percentage) }}</slot>
+      </strong>
+    </div>
+    <strong v-if="showValueOutside && !noValue" class="progress-circle__value type-small-x">
+      <slot name="value" :value="percentage">{{ formatValue(percentage) }}</slot>
+    </strong>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+
+/**
+ * A circular progress indicator component.
+ * @slot value - The value display. Overrides the `formatValue` prop.
+ */
+const props = defineProps({
+  /**
+   * The label for accessibility (visually hidden).
+   */
+  label: {
+    type: String,
+    default: "Progress"
+  },
+  /**
+   * The progress percentage (0-100).
+   */
+  percentage: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * A function to format the percentage value.
+   * Takes the number as input and should return a string.
+   */
+  formatValue: {
+    type: Function,
+    default: (value) => `${ value }%`,
+  },
+  /**
+   * Hides the percentage value display.
+   */
+  noValue: Boolean,
+  /**
+   * Renders a smaller version of the component.
+   */
+  small: Boolean,
+  /**
+   * Displays the percentage value outside (to the side) of the circle.
+   */
+  outside: Boolean,
+  /**
+   * Displays the percentage value below the circle.
+   */
+  outsideBelow: Boolean,
+  /**
+   * Sets the status color of the progress circle (e.g., 'low', 'incomplete', 'complete').
+   */
+  status: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Renders the component as a solid pie chart instead of a donut.
+   */
+  pieStyle: Boolean,
+  /**
+   * Removes the center mask, filling the entire circle.
+   */
+  noMask: Boolean,
+  /**
+   * The duration of the animation in milliseconds.
+   */
+  duration: {
+    type: Number,
+    default: 1000 // Matches SCSS animation-duration
+  },
+  /**
+   * The easing function for the animation.
+   */
+  easing: {
+    type: String,
+    default: "ease-in" // Matches SCSS animation-timing
+  }
+});
+
+const pie = ref(null);
+
+const normalize = (percentage) => {
+  // Added the 1% extra to 100% because sometimes it renders with a tiny gap
+  return percentage === 100 ? 101 : percentage;
+};
+
+const animate = (from = 0) => {
+  if (!pie.value || !pie.value.animate) return; // No Animation API or element not ready
+  
+  const keyframes = { strokeDasharray: [`${from} 100`, endDasharray.value] };
+  pie.value.animate(keyframes, { duration: props.duration, easing: props.easing, fill: "forwards" });
+};
+
+watch(() => props.percentage, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    animate(normalize(oldVal));
+  }
+});
+
+const endDasharray = computed(() => {
+  return `${normalize(props.percentage)} 100`;
+});
+
+const showValueOutside = computed(() => {
+  return props.outside || props.outsideBelow || props.small;
+});
+
+const componentClasses = computed(() => {
+  const classes = {
+    'progress-circle': true,
+    'progress-circle--small': props.small,
+    'progress-circle--pie': props.pieStyle,
+    'progress-circle--outside': showValueOutside.value,
+    'progress-circle--outside-below': props.outsideBelow,
+    'progress-circle--no-mask': props.noMask,
+  };
+  if (props.status) {
+    classes[`progress-circle--${props.status}`] = true;
+  }
+  return classes;
+});
+
+onMounted(() => {
+  animate();
+});
+</script>

package/lib/composables/index.js

@@ -8,4 +8,6 @@ export { useIcon } from './useIcon.js';
 export { useModifiers } from './useModifiers.js';
 export { useWindowResize } from './useWindowResize.js';
 export { useRequiredInject } from './useRequiredInject.js';
-export { useBreakpointManager } from './useBreakpointManager.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/index.js

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

package/lib/plugins/core/index.js

@@ -21,7 +21,12 @@ const defaults = {
     resizeVertical: "fas fa-grip-lines",
     resizeBoth: "fas fa-grip",
     ellipsis: "fas fa-ellipsis",
-    pathSeparator: "fas fa-chevron-right"
+    pathSeparator: "fas fa-chevron-right",
+    image: "fas fa-image",
+    file: "fas fa-file",
+    previous: "fas fa-chevron-left",
+    next: "fas fa-chevron-right",
+    dropdownExpand: "fas fa-caret-down"
   }
 };
 

package/lib/plugins/popovers/UluPopover.vue

@@ -4,6 +4,7 @@
     type="button" 
     ref="trigger"
     @click="toggle"
+    :id="triggerId"
     :disabled="disabled"
     :class="[ 
       { [activeClass] : isOpen }, 
@@ -14,7 +15,9 @@
     :aria-label="triggerAlt"
     v-ulu-tooltip="tooltip ? tooltip : null"
   >
-    <slot name="trigger" :isOpen="isOpen"/>
+    <slot name="trigger" :isOpen="isOpen" :toggle="toggle" :close="close">
+      {{ triggerText }}
+    </slot>
   </button>
   <span 
     class="popover"
@@ -27,7 +30,7 @@
       }, 
       classes.content,
     ]"
-    :aria-hidden="isOpen ? 'false' : 'true'" 
+    :aria-labelledby="triggerId" 
     :id="id" 
     :style="floatingStyles"
     :data-placement="placement"
@@ -35,7 +38,7 @@
     tabindex="-1"
   >
     <span class="popover__inner">
-      <slot name="content" :close="close"/>
+      <slot :isOpen="isOpen" :toggle="toggle" :close="close"/>
     </span>
     <span v-if="$slots.footer" class="popover__footer">
       <slot name="footer" :close="close"/>
@@ -65,6 +68,7 @@
 
   const emit = defineEmits(["toggle"]);
   const props = defineProps({
+    triggerText: String,
     triggerAlt: String,
     disabled: Boolean,
     tooltip: String,
@@ -95,6 +99,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">

package/lib/plugins/toast/UluToastDisplay.vue

@@ -3,7 +3,7 @@
     <TransitionGroup 
       class="toast-container"
       :class="classes"
-      name="toast" 
+      name="toast-animation" 
       tag="div"
     >
       <component
@@ -32,4 +32,21 @@
       }
     }
   }
-</script>
+</script>
+
+<style lang="css">
+  .toast-animation-move, 
+  .toast-animation-enter-active,
+  .toast-animation-leave-active {
+    transition: all 0.3s ease;
+  }
+  .toast-animation-enter-from,
+  .toast-animation-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  .toast-animation-leave-active {
+    position: absolute;
+    width: 100%;
+  }
+</style>

package/lib/utils/dom.js

@@ -11,4 +11,16 @@ export function refToElement(value) {
   } else if (typeof value === 'object' && '$el' in value) {
     return value.$el;
   }
+}
+
+
+let idCounter = 0;
+
+export function newId(prefix = "ulu-id") {
+  const id = `${ prefix }-${ ++idCounter }`;
+  if (typeof document !== 'undefined' && document.getElementById(id)) {
+    // In the unlikely event of a collision (e.g., SSR), recurse.
+    return generateUid(prefix);
+  }
+  return id;
 }

package/lib/utils/index.js

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