@ulu/frontend-vue 0.3.1 → 0.3.2

package/dist/components/visualizations/UluProgressBar.vue.d.ts

@@ -14,9 +14,11 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     positive: boolean;
     negative: boolean;
     loader: boolean;
+    rounded: boolean;
     indeterminate: boolean;
     noValues: boolean;
     amountInHeader: boolean;
+    modifiers?: string | unknown[] | undefined;
     label?: string | undefined;
     formatValue?: Function | undefined;
     $props: {
@@ -30,9 +32,11 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
         readonly positive?: boolean | undefined;
         readonly negative?: boolean | undefined;
         readonly loader?: boolean | undefined;
+        readonly rounded?: boolean | undefined;
         readonly indeterminate?: boolean | undefined;
         readonly noValues?: boolean | undefined;
         readonly amountInHeader?: boolean | undefined;
+        readonly modifiers?: string | unknown[] | undefined;
         readonly label?: string | undefined;
         readonly formatValue?: Function | undefined;
     };

package/dist/components/visualizations/UluProgressBar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluProgressBar.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/visualizations/UluProgressBar.vue"],"names":[],"mappings":"AAsDA;wBA8aqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sPAQG"}
+{"version":3,"file":"UluProgressBar.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/visualizations/UluProgressBar.vue"],"names":[],"mappings":"AA4DA;wBA4cqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sPAQG"}

package/dist/components/visualizations/UluProgressBar.vue.js

@@ -1,172 +1,186 @@
-import { computed as m, createElementBlock as r, openBlock as s, normalizeClass as v, createCommentVNode as n, createElementVNode as o, createBlock as B, resolveDynamicComponent as h, withCtx as k, renderSlot as i, createTextVNode as u, toDisplayString as d, normalizeStyle as b } from "vue";
-const V = {
+import { computed as m, createElementBlock as n, openBlock as s, normalizeClass as v, unref as B, createCommentVNode as r, createElementVNode as o, createBlock as h, resolveDynamicComponent as k, withCtx as V, renderSlot as i, createTextVNode as d, toDisplayString as u, normalizeStyle as b } from "vue";
+import { useModifiers as $ } from "../../composables/useModifiers.js";
+const C = {
   key: 0,
   class: "progress-bar__header"
-}, $ = {
+}, H = {
   key: 1,
   class: "progress-bar__value progress-bar__value--amount"
-}, C = {
+}, N = {
   key: 2,
   class: "progress-bar__icon"
-}, H = { class: "progress-bar__track" }, N = {
+}, S = { class: "progress-bar__track" }, A = {
   key: 1,
   class: "progress-bar__values"
-}, S = { class: "progress-bar__value progress-bar__value--amount" }, A = {
+}, D = { class: "progress-bar__value progress-bar__value--amount" }, E = {
   key: 0,
   class: "progress-bar__value progress-bar__value--deficit"
-}, D = { class: "progress-bar__value progress-bar__value--total" }, w = {
+}, I = { class: "progress-bar__value progress-bar__value--total" }, M = {
   __name: "UluProgressBar",
   props: {
     /**
-     * The label to display above the progress bar. (or use label slot)
-     */
+    * The label to display above the progress bar. (or use label slot)
+    */
     label: String,
     /**
-     * Hides the label visually, but keeps it for screen readers.
-     */
+    * Hides the label visually, but keeps it for screen readers.
+    */
     labelHidden: Boolean,
     /**
-     * Optional classes object (currently only allowing { label } class)
-     */
+    * Optional classes object (currently only allowing { label } class)
+    */
     classes: {
       type: Object,
       default: () => ({})
     },
     /**
-     * Element to use for label
-     */
+    * Element to use for label
+    */
     labelElement: {
       type: String,
       default: "strong"
     },
     /**
-     * The current amount of progress.
-     */
+    * The current amount of progress.
+    */
     amount: {
       type: Number,
       default: 0
     },
     /**
-     * The total amount that represents 100% progress.
-     */
+    * The total amount that represents 100% progress.
+    */
     total: {
       type: Number,
       default: 100
     },
     /**
-     * The amount of deficit to display on the bar.
-     */
+    * The amount of deficit to display on the bar.
+    */
     deficit: {
       type: Number,
       default: 0
     },
     /**
-     * Renders a smaller version of the progress bar.
-     */
+    * Renders a smaller version of the progress bar.
+    */
     small: Boolean,
     /**
-     * Applies the 'positive' style (e.g., green).
-     */
+    * Applies the 'positive' style (e.g., green).
+    */
     positive: Boolean,
     /**
-     * Applies the 'negative' style (e.g., red).
-     */
+    * Applies the 'negative' style (e.g., red).
+    */
     negative: Boolean,
     /**
-     * Applies styles for use as a thin loader.
-     */
+    * Applies styles for use as a thin loader.
+    */
     loader: Boolean,
     /**
-     * Applies an indeterminate animation for unknown progress.
-     */
+    * Applies styles for use as a thin loader.
+    */
+    rounded: Boolean,
+    /**
+    * Applies an indeterminate animation for unknown progress.
+    */
     indeterminate: Boolean,
     /**
-     * Omit values from output (the numbers below the progress bar)
-     */
+    * 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.
-     */
+    * 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: (e, a) => e
     },
     /**
-     * Will put the amount only in header (there is a headerValue slot it you want to format)
+    * Will put the amount only in header (there is a headerValue slot it you want to format)
+    */
+    amountInHeader: Boolean,
+    /**
+     * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
      */
-    amountInHeader: Boolean
+    modifiers: [String, Array]
   },
   setup(e) {
-    const a = e, c = (t, l) => `${l === 0 ? 0 : t / l * 100}%`, g = m(() => a.indeterminate ? null : c(a.amount, a.total)), f = m(() => c(a.deficit, a.total)), y = m(() => ({
-      "progress-bar": !0,
-      "progress-bar--small": a.small,
-      "progress-bar--positive": a.positive,
-      "progress-bar--negative": a.negative,
-      "progress-bar--loader": a.loader,
-      "progress-bar--indeterminate": a.indeterminate,
-      "type-small": a.small
-      // From original component, seems to control font size
-    }));
-    return (t, l) => (s(), r("div", {
-      class: v(y.value)
+    const a = e, c = (t, l) => `${l === 0 ? 0 : t / l * 100}%`, f = m(() => a.indeterminate ? null : c(a.amount, a.total)), g = m(() => c(a.deficit, a.total)), { resolvedModifiers: y } = $({
+      props: a,
+      baseClass: "progress-bar",
+      internal: m(() => ({
+        small: a.small,
+        positive: a.positive,
+        negative: a.negative,
+        loader: a.loader,
+        rounded: a.rounded,
+        indeterminate: a.indeterminate
+      }))
+    });
+    return (t, l) => (s(), n("div", {
+      class: v(["progress-bar", [
+        B(y),
+        { "type-small": e.small }
+      ]])
     }, [
-      e.label || t.$slots.label || t.$slots.icon || e.amountInHeader ? (s(), r("div", V, [
-        e.label ? (s(), B(h(e.labelElement), {
+      e.label || t.$slots.label || t.$slots.icon || e.amountInHeader ? (s(), n("div", C, [
+        e.label ? (s(), h(k(e.labelElement), {
           key: 0,
           class: v(["progress-bar__label", [e.classes.label, { "hidden-visually": e.labelHidden }]])
         }, {
-          default: k(() => [
+          default: V(() => [
             i(t.$slots, "label", {}, () => [
-              u(d(e.label), 1)
+              d(u(e.label), 1)
             ])
           ]),
           _: 3
-        }, 8, ["class"])) : n("", !0),
-        e.amountInHeader ? (s(), r("div", $, [
+        }, 8, ["class"])) : r("", !0),
+        e.amountInHeader ? (s(), n("div", H, [
           l[0] || (l[0] = o("strong", { class: "hidden-visually" }, "Amount:", -1)),
           i(t.$slots, "valueAmount", { value: e.amount }, () => [
-            u(d(e.formatValue(e.amount, "amount")), 1)
+            d(u(e.formatValue(e.amount, "amount")), 1)
           ])
-        ])) : n("", !0),
-        t.$slots.icon ? (s(), r("div", C, [
+        ])) : r("", !0),
+        t.$slots.icon ? (s(), n("div", N, [
           i(t.$slots, "icon")
-        ])) : n("", !0)
-      ])) : n("", !0),
-      o("div", H, [
+        ])) : r("", !0)
+      ])) : r("", !0),
+      o("div", S, [
         o("div", {
           class: "progress-bar__bar",
-          style: b({ width: g.value })
+          style: b({ width: f.value })
         }, null, 4),
-        e.deficit > 0 ? (s(), r("div", {
+        e.deficit > 0 ? (s(), n("div", {
           key: 0,
           class: "progress-bar__bar--deficit",
-          style: b({ width: f.value })
-        }, null, 4)) : n("", !0)
+          style: b({ width: g.value })
+        }, null, 4)) : r("", !0)
       ]),
-      !e.noValues && !e.amountInHeader && !e.loader && !e.indeterminate ? (s(), r("div", N, [
-        o("div", S, [
+      !e.noValues && !e.amountInHeader && !e.loader && !e.indeterminate ? (s(), n("div", A, [
+        o("div", D, [
           l[1] || (l[1] = o("strong", { class: "hidden-visually" }, "Amount:", -1)),
           i(t.$slots, "valueAmount", { value: e.amount }, () => [
-            u(d(e.formatValue(e.amount, "amount")), 1)
+            d(u(e.formatValue(e.amount, "amount")), 1)
           ])
         ]),
-        e.deficit > 0 ? (s(), r("div", A, [
+        e.deficit > 0 ? (s(), n("div", E, [
           l[2] || (l[2] = o("strong", { class: "hidden-visually" }, "Deficit: ", -1)),
           i(t.$slots, "valueDeficit", { value: e.deficit }, () => [
-            u("-" + d(e.formatValue(e.deficit, "deficit")), 1)
+            d("-" + u(e.formatValue(e.deficit, "deficit")), 1)
           ])
-        ])) : n("", !0),
-        o("div", D, [
+        ])) : r("", !0),
+        o("div", I, [
           l[3] || (l[3] = o("strong", { class: "hidden-visually" }, "Total:", -1)),
           i(t.$slots, "valueTotal", { value: e.total }, () => [
-            u(d(e.formatValue(e.total, "total")), 1)
+            d(u(e.formatValue(e.total, "total")), 1)
           ])
         ])
-      ])) : n("", !0)
+      ])) : r("", !0)
     ], 2));
   }
 };
 export {
-  w as default
+  M as default
 };

package/lib/components/visualizations/UluProgressBar.vue

@@ -1,5 +1,11 @@
 <template>
-  <div :class="componentClasses">
+  <div 
+    class="progress-bar" 
+    :class="[
+      resolvedModifiers, 
+      { 'type-small': small }
+    ]"
+  >
     <div 
       v-if="label || $slots.label || $slots.icon || amountInHeader" 
       class="progress-bar__header"
@@ -54,115 +60,125 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+  import { computed } from "vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
 
-/**
- * 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
-});
+  * 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 styles for use as a thin loader.
+    */
+    rounded: 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,
+    /**
+     * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
+     */
+    modifiers: [String, Array]
+  });
 
-const getCssPercentage = (amount, total) => {
-  const percent = total === 0 ? 0 : (amount / total) * 100;
-  return `${ percent }%`;
-};
+  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 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 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
-  };
-});
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    baseClass: "progress-bar",
+    internal: computed(() => ({
+      'small': props.small,
+      'positive': props.positive,
+      'negative': props.negative,
+      'loader': props.loader,
+      'rounded': props.rounded,
+      'indeterminate': props.indeterminate,
+    }))
+  });
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [