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

package/lib/components/visualizations/UluProgressBar.vue

@@ -1,94 +1,168 @@
 <template>
-  <div 
-    class="progress-bar"
-    :class="{
-      'progress-bar--small' : small,
-      'progress-bar--icon-left' : iconOnLeft,
-      'type-small' : small
-    }"
-  >
-    <div class="progress-bar__header">
-      <strong 
-        class="progress-bar__label" 
-        :class="{ 
-          'type-normal' : small,
-          'hidden-visually' : labelHidden,
-        }"
+  <div :class="componentClasses">
+    <div 
+      v-if="label || $slots.label || $slots.icon || amountInHeader" 
+      class="progress-bar__header"
+    >
+      <component
+        v-if="label"
+        :is="labelElement"
+        class="progress-bar__label"
+        :class="[classes.label, { 'hidden-visually': labelHidden }]"
       >
-        {{ label }}
-      </strong>
-      <div v-if="status" class="progress-bar__icon">
-        <StatusIcon :type="status.type" />
-        <span class="hidden-visually">{{ status.message }}</span>
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </component>
+      <div 
+        v-if="amountInHeader"  
+        class="progress-bar__value progress-bar__value--amount"
+      >
+        <strong class="hidden-visually">Amount:</strong>
+        <slot name="valueAmount" :value="amount">{{ formatValue(amount, 'amount') }}</slot>
+      </div>
+      <div v-if="$slots.icon" class="progress-bar__icon">
+        <slot name="icon" />
       </div>
     </div>
     <div class="progress-bar__track">
-      <div 
-        class="progress-bar__bar"
-        :style="`width: ${ percentage }%`"
-      ></div>
-      <div 
-        v-if="deficit"
+      <div class="progress-bar__bar" :style="{ width: barWidth }"></div>
+      <div
+        v-if="deficit > 0"
         class="progress-bar__bar--deficit"
-        :style="`width: ${ defPercentage }%`"
+        :style="{ width: deficitBarWidth }"
       ></div>
     </div>
-    <div class="progress-bar__values">
+    <div 
+      v-if="!noValues && !amountInHeader && (!loader && !indeterminate)" 
+      class="progress-bar__values"
+    >
       <div class="progress-bar__value progress-bar__value--amount">
         <strong class="hidden-visually">Amount:</strong>
-        {{ amount }}
+        <slot name="valueAmount" :value="amount">{{ formatValue(amount, 'amount') }}</slot>
       </div>
-      <div 
-        v-if="deficit > 0" 
-        class="progress-bar__value progress-bar__value--deficit color-status is-danger"
-      >
+      <div v-if="deficit > 0" class="progress-bar__value progress-bar__value--deficit">
         <strong class="hidden-visually">Deficit: </strong>
-        -{{ deficit }}
+        <slot name="valueDeficit" :value="deficit">-{{ formatValue(deficit, 'deficit') }}</slot>
       </div>
       <div class="progress-bar__value progress-bar__value--total">
         <strong class="hidden-visually">Total:</strong>
-        {{ total }}
+        <slot name="valueTotal" :value="total">{{ formatValue(total, 'total') }}</slot>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-  export default {
-    name: 'ProgressBar',
-    props: {
-      small: Boolean,
-      label: {
-        type: String,
-        default: "Progress"
-      },
-      labelHidden: Boolean,
-      total: Number,
-      deficit: Number,
-      amount: Number,
-      iconOnLeft: Boolean
-    },
-    computed: {
-      percentage() {
-        const { amount, total } = this;
-        return amount / total * 100;
-      },
-      defPercentage() {
-        const { deficit, total } = this;
-        return deficit ? deficit / total * 100 : 0;
-      },
-      isComplete() {
-        return this.amount >= this.total;
-      },
-      status() {
-        return this.isComplete ? {
-          type: "success",
-          message: "Item Completed"
-        } : this.deficit ? {
-          type: "danger",
-          message: "Item Has Deficit"
-         } : null;
-      }
-    }
-  }
-</script>
+<script setup>
+import { computed } from "vue";
+
+/**
+ * A linear progress bar to display progress, with support for various styles and a deficit indicator.
+ * @slot icon - A slot for placing an icon in the header, typically to indicate status.
+ */
+const props = defineProps({
+  /**
+   * The label to display above the progress bar. (or use label slot)
+   */
+  label: String,
+  /**
+   * Hides the label visually, but keeps it for screen readers.
+   */
+  labelHidden: Boolean,
+  /**
+   * Optional classes object (currently only allowing { label } class)
+   */
+  classes: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * Element to use for label
+   */
+  labelElement: {
+    type: String,
+    default: "strong"
+  },
+  /**
+   * The current amount of progress.
+   */
+  amount: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * The total amount that represents 100% progress.
+   */
+  total: {
+    type: Number,
+    default: 100,
+  },
+  /**
+   * The amount of deficit to display on the bar.
+   */
+  deficit: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * Renders a smaller version of the progress bar.
+   */
+  small: Boolean,
+  /**
+   * Applies the 'positive' style (e.g., green).
+   */
+  positive: Boolean,
+  /**
+   * Applies the 'negative' style (e.g., red).
+   */
+  negative: Boolean,
+  /**
+   * Applies styles for use as a thin loader.
+   */
+  loader: Boolean,
+  /**
+   * Applies an indeterminate animation for unknown progress.
+   */
+  indeterminate: Boolean,
+  /**
+   * Omit values from output (the numbers below the progress bar)
+   */
+  noValues: Boolean,
+  /**
+   * A function to format the numerical values (amount, deficit, total).
+   * Takes the value and type ('amount', 'deficit', 'total') as input and should return a string.
+   */
+  formatValue: {
+    type: Function,
+    default: (value, type) => value,
+  },
+  /**
+   * Will put the amount only in header (there is a headerValue slot it you want to format)
+   */
+  amountInHeader: Boolean
+});
+
+const getCssPercentage = (amount, total) => {
+  const percent = total === 0 ? 0 : (amount / total) * 100;
+  return `${ percent }%`;
+};
+
+const barWidth = computed(() => {
+  if (props.indeterminate) return null; // No value for width
+  return getCssPercentage(props.amount, props.total);
+});
+
+const deficitBarWidth = computed(() => getCssPercentage(props.deficit, props.total));
+
+const componentClasses = computed(() => {
+  return {
+    'progress-bar': true,
+    'progress-bar--small': props.small,
+    'progress-bar--positive': props.positive,
+    'progress-bar--negative': props.negative,
+    'progress-bar--loader': props.loader,
+    'progress-bar--indeterminate': props.indeterminate,
+    'type-small': props.small, // From original component, seems to control font size
+  };
+});
+</script>

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",
+    next: "fas fa-chevron-left",
+    previous: "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">