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

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

@@ -1,11 +1,11 @@
 <template>
-  <div class="skeleton">
+  <div>
     <div v-for="(line, index) in linesWithSegments" :key="index">
       <span 
         v-for="segment in line"
         :key="segment"
-        class="skeleton__text skeleton__text--inline"
-        :class="{ 'skeleton__alt' : segment.alt }"
+        class="skeleton skeleton--text skeleton--inline"
+        :class="{ 'skeleton--background-alt' : segment.alt }"
         :style="{ width: `${ segment.width }%` }"
       > 
       </span>
@@ -13,48 +13,44 @@
   </div>
 </template>
 
-<script>
+<script setup>
+  import { computed } from "vue";
   import { randomInt } from "@ulu/utils/random.js";
   import { arrayCreate } from "@ulu/utils/array.js";
-  export default {
-    name: "SkeletonContent",
-    props: {
-      lines: {
-        type: Number,
-        default: 6
-      },
-    },
-    methods: {
-      randomInt
+
+  const props = defineProps({
+    /**
+     * Amount of lines to generate
+     */
+    lines: {
+      type: Number,
+      default: 6
     },
-    computed: {
-      /**
-       * Creates the segments (like words) for the given line count
-       * - Uses random number of segments and makes sure to fill the line between 70% - 100%
-       */
-      linesWithSegments() {
-        return arrayCreate(this.lines, () => {
-          const minWidth = 15;
-          const total = randomInt(70, 100);
-          let widthCurrent = 0;
-          const newWidth = () => {
-            const remaining = total - widthCurrent;
-            const width = randomInt(minWidth, remaining);
-            widthCurrent += width;
-            return width;
-          };
-          const segments = [];
-          while (widthCurrent < total - minWidth) {
-            segments.push(newWidth());
-          }
-          const getActualTotal = () => segments.reduce((acc, a) => acc + a, 0);
-          while (getActualTotal() >= total) {
-            let removed = segments.pop();
-            if (!removed) break;
-          }
-          return segments.map(width => ({ width, alt: Math.random() < 0.5 }));
-        });
-      }
+  });
+
+  /**
+   * Creates the segments (like words) for the given line count
+   * - Uses random number of segments and makes sure to fill the line between 70% - 100%
+   */
+  const linesWithSegments = computed(() => arrayCreate(props.lines, () => {
+    const minWidth = 15;
+    const total = randomInt(70, 100);
+    let widthCurrent = 0;
+    const newWidth = () => {
+      const remaining = total - widthCurrent;
+      const width = randomInt(minWidth, remaining);
+      widthCurrent += width;
+      return width;
+    };
+    const segments = [];
+    while (widthCurrent < total - minWidth) {
+      segments.push(newWidth());
+    }
+    const getActualTotal = () => segments.reduce((acc, a) => acc + a, 0);
+    while (getActualTotal() >= total) {
+      let removed = segments.pop();
+      if (!removed) break;
     }
-  };
+    return segments.map(width => ({ width, alt: Math.random() < 0.5 }));
+  }));
 </script>

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:previous"/>
           </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:next" />
           </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" />
@@ -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/components/visualizations/UluAnimateNumber.vue

@@ -4,11 +4,17 @@
 
 <script>
   import gsap from "gsap";
+
+  /**
+   * Animates a number from a previous value to a new value.
+   * @slot default - The default slot for customizing the display of the number.
+   * @binding {number} currentValue - The current animated value.
+   */
   export default {
     name: 'AnimateNumber',
     props: {
       /**
-       * Number to animate as it changes
+       * The target number to animate to.
        */
       value: Number
     },

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>