@ulu/frontend-vue 0.1.1-beta.1 → 0.1.1-beta.10

package/lib/components/visualizations/UluProgressBar.vue

@@ -1,13 +1,26 @@
 <template>
   <div :class="componentClasses">
-    <div v-if="label || $slots.icon" class="progress-bar__header">
-      <strong
+    <div 
+      v-if="label || $slots.label || $slots.icon || amountInHeader" 
+      class="progress-bar__header"
+    >
+      <component
         v-if="label"
+        :is="labelElement"
         class="progress-bar__label"
-        :class="{ 'hidden-visually': labelHidden }"
+        :class="[classes.label, { 'hidden-visually': labelHidden }]"
       >
-        {{ label }}
-      </strong>
+        <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>
@@ -20,21 +33,21 @@
         :style="{ width: deficitBarWidth }"
       ></div>
     </div>
-    <div v-if="!loader && !indeterminate" 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"
-      >
+      <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>
@@ -49,13 +62,27 @@ import { computed } from "vue";
  */
 const props = defineProps({
   /**
-   * The label to display above the progress bar.
+   * 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.
    */
@@ -97,6 +124,22 @@ const props = defineProps({
    * 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) => {

package/lib/components/visualizations/UluProgressCircle.vue

@@ -23,124 +23,137 @@
           cy="16" 
         />
       </svg>
-      <strong v-if="!showValueOutside" class="progress-circle__chart-value">
-        {{ percentage }}%
+      <strong v-if="!showValueOutside && !noValue" class="progress-circle__chart-value">
+        <slot name="value" :value="percentage">{{ formatValue(percentage) }}</slot>
       </strong>
     </div>
-    <strong v-if="showValueOutside" class="progress-circle__value type-small-x">
-      {{ percentage }}%
+    <strong v-if="showValueOutside && !noValue" class="progress-circle__value type-small-x">
+      <slot name="value" :value="percentage">{{ formatValue(percentage) }}</slot>
     </strong>
   </div>
 </template>
 
-<script>
+<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: ''
+  },
   /**
-   * A circular progress indicator component.
+   * Renders the component as a solid pie chart instead of a donut.
    */
-  export default {
-    name: 'UluProgressCircle',
-    props: {
-      /**
-       * The label for accessibility (visually hidden).
-       */
-      label: {
-        type: String,
-        default: "Progress"
-      },
-      /**
-       * The progress percentage (0-100).
-       */
-      percentage: {
-        type: Number,
-        default: 0
-      },
-      /**
-       * 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
-      }
-    },
-    watch: {
-      // Need to reanimate if value changes
-      percentage(newVal, oldVal) {
-        if (newVal !== oldVal) {
-          this.animate(this.normalize(oldVal));
-        }
-      }
-    },
-    computed: {
-      endDasharray() {
-        return `${ this.normalize(this.percentage) } 100`;
-      },
-      showValueOutside() {
-        return this.outside || this.outsideBelow || this.small;
-      },
-      componentClasses() {
-        const classes = {
-          'progress-circle': true,
-          'progress-circle--small': this.small,
-          'progress-circle--pie': this.pieStyle,
-          'progress-circle--outside': this.showValueOutside,
-          'progress-circle--outside-below': this.outsideBelow,
-          'progress-circle--no-mask': this.noMask,
-        };
-        if (this.status) {
-          classes[`progress-circle--${this.status}`] = true;
-        }
-        return classes;
-      }
-    },
-    methods: {
-      normalize(percentage) {
-        // Added the 1% extra to 100% because sometimes it renders with a tiny gap
-        return percentage === 100 ? 101 : percentage;
-      },
-      animate(from = 0) {
-        const { pie } = this.$refs;
-        if (!pie || !pie.animate) return; // No Animation API or element not ready
-        const { duration, easing, endDasharray } = this;
-        const keyframes = { strokeDasharray: [`${ from } 100`, endDasharray] };
-        pie.animate(keyframes, { duration, easing, fill: "forwards" });
-      }
-    },
-    mounted() {
-      this.animate();
-    }
+  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/plugins/core/index.js

@@ -24,8 +24,8 @@ const defaults = {
     pathSeparator: "fas fa-chevron-right",
     image: "fas fa-image",
     file: "fas fa-file",
-    next: "fas fa-chevron-left",
-    previous: "fas fa-chevron-right",
+    previous: "fas fa-chevron-left",
+    next: "fas fa-chevron-right",
     dropdownExpand: "fas fa-caret-down"
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.1-beta.1",
+  "version": "0.1.1-beta.10",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -14,10 +14,13 @@
       "import": "./lib/index.js",
       "types": "./types/index.d.ts"
     },
+    "./*": {
+      "import": "./lib/*",
+      "types": "./types/*"
+    },
     "./dist": {
       "import": "./dist/frontend-vue.js"
     },
-    "./*": "./lib/*",
     "./scss": "./lib/_index.scss"
   },
   "types": "./types/index.d.ts",
@@ -36,7 +39,7 @@
     "dev": "storybook dev -p 6006",
     "docs:build": "storybook build -o docs",
     "build": "vite build",
-    "types": "npx tsc",
+    "types": "vue-tsc",
     "deploy": "npm run types && npm run build && npm run docs:build",
     "update-contexts": "rm -rf .ctx && mkdir -p .ctx/frontend && cp -R node_modules/@ulu/frontend/scss node_modules/@ulu/frontend/js .ctx/frontend/"
   },
@@ -58,12 +61,12 @@
   },
   "homepage": "https://github.com/Jscherbe/frontend-vue#readme",
   "peerDependencies": {
+    "@formkit/auto-animate": "^0.9.0",
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.111",
+    "@ulu/frontend": "^0.1.0-beta.112",
     "@unhead/vue": "^2.0.11",
     "vue": "^3.5.17",
-    "vue-router": "^4.5.1",
-    "@formkit/auto-animate" : "^0.9.0"
+    "vue-router": "^4.5.1"
   },
   "optionalDependencies": {
     "fuse.js": "^6.6.2",
@@ -76,6 +79,7 @@
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
+    "@formkit/auto-animate": "^0.9.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
@@ -83,7 +87,7 @@
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-links": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.1.0-beta.111",
+    "@ulu/frontend": "^0.1.0-beta.112",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",
@@ -95,7 +99,7 @@
     "typescript": "^5.3.3",
     "vite": "^7.0.0",
     "vue-router": "^4.5.1",
-    "@formkit/auto-animate" : "^0.9.0"
+    "vue-tsc": "^3.0.6"
   },
   "volta": {
     "node": "22.17.0"

package/types/components/collapsible/UluAccordion.vue.d.ts

@@ -0,0 +1,42 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $emit: typeof emit;
+    $props: Partial<typeof props>;
+    startOpen: boolean;
+    classes: Record<string, any>;
+    animate: boolean | Record<string, any>;
+    triggerTextElement: string;
+    triggerText?: string | undefined;
+    modifiers?: string | unknown[] | undefined;
+    modelValue?: boolean | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    trigger?: ((props: {
+        open: boolean | undefined;
+        toggle: typeof toggle;
+    }) => any) | undefined;
+} & {
+    icon?: ((props: {
+        open: boolean | undefined;
+    }) => any) | undefined;
+} & {
+    default?: ((props: {
+        open: true;
+        toggle: typeof toggle;
+    }) => any) | undefined;
+};
+declare const emit: (event: "update:modelValue", ...args: any[]) => void;
+declare const props: {
+    readonly startOpen: boolean;
+    readonly classes: Record<string, any>;
+    readonly animate: boolean | Record<string, any>;
+    readonly triggerTextElement: string;
+    readonly triggerText?: string | undefined;
+    readonly modifiers?: string | unknown[] | undefined;
+    readonly modelValue?: boolean | undefined;
+};
+//# sourceMappingURL=UluAccordion.vue.d.ts.map

package/types/components/collapsible/UluAccordion.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluAccordion.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluAccordion.vue"],"names":[],"mappings":"wBAmSqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;2OAGrC;;;;;;;;;;;;;;;;AAlID,yEAAgD;AArDhD;;;;;;;;EAmDG"}

package/types/components/collapsible/UluAccordionGroup.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    items: unknown[];
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    item?: ((props: {
+        item: never;
+        index: number;
+    }) => any) | undefined;
+};
+declare const props: {
+    readonly items: unknown[];
+};
+//# sourceMappingURL=UluAccordionGroup.vue.d.ts.map

package/types/components/collapsible/UluAccordionGroup.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluAccordionGroup.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluAccordionGroup.vue"],"names":[],"mappings":"wBAwKqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;2OAErC;;;;;;;AA5GH;;EASG"}

package/types/components/collapsible/UluCollapsible.vue.d.ts

@@ -0,0 +1,40 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $emit: typeof emit;
+    $props: Partial<typeof props>;
+    startOpen: boolean;
+    classes: Record<string, any>;
+    animate: boolean | Record<string, any>;
+    closeOnEscape: boolean;
+    triggerText?: string | undefined;
+    modelValue?: boolean | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    trigger?: ((props: {
+        isOpen: boolean | undefined;
+        toggle: typeof toggle;
+    }) => any) | undefined;
+} & {
+    default?: ((props: {
+        isOpen: true;
+        toggle: typeof toggle;
+    }) => any) | undefined;
+};
+declare const emit: (event: "update:modelValue", ...args: any[]) => void;
+declare const props: {
+    readonly startOpen: boolean;
+    readonly classes: Record<string, any>;
+    readonly animate: boolean | Record<string, any>;
+    readonly closeOnEscape: boolean;
+    readonly triggerText?: string | undefined;
+    readonly modelValue?: boolean | undefined;
+};
+/**
+ * Function used to toggle the collapsible
+ */
+declare function toggle(): void;
+//# sourceMappingURL=UluCollapsible.vue.d.ts.map

package/types/components/collapsible/UluCollapsible.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluCollapsible.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluCollapsible.vue"],"names":[],"mappings":"wBAgWqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;2OAGrC;;;;;;;;;;;;AA3JD,yEAAgD;AA/ChD;;;;;;;EA6CG;AAiDH;;GAEG;AACH,gCAEC"}

package/types/components/collapsible/UluDropdown.vue.d.ts

@@ -0,0 +1,22 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    popoverClasses: Record<string, any>;
+    triggerText?: string | undefined;
+    items?: unknown[] | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    trigger?: ((props: {
+        isOpen: boolean;
+    }) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly popoverClasses: Record<string, any>;
+    readonly triggerText?: string | undefined;
+    readonly items?: unknown[] | undefined;
+};
+//# sourceMappingURL=UluDropdown.vue.d.ts.map

package/types/components/collapsible/UluDropdown.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluDropdown.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluDropdown.vue"],"names":[],"mappings":"wBA2JqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,WAAW,CAAC;;;;2OAE3C;;;;;;AA5GD;;;;EAkBG"}