@ulu/frontend-vue 0.2.0-beta.8 → 0.3.0

package/dist/components/utils/UluPlaceholderImage.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluPlaceholderImage.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/utils/UluPlaceholderImage.vue"],"names":[],"mappings":"AAGA;;;IA2DM;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;;;;;;IApBH;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG"}
+{"version":3,"file":"UluPlaceholderImage.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/utils/UluPlaceholderImage.vue"],"names":[],"mappings":"AAGA;"}

package/dist/components/utils/UluPlaceholderImage.vue.js

@@ -1,8 +1,7 @@
-import { randomInt as i } from "@ulu/utils/random.js";
-import { createElementBlock as s, openBlock as c } from "vue";
-import a from "../../_virtual/_plugin-vue_export-helper.js";
-const d = {
-  name: "UluPlaceholderImage",
+import { computed as n, createElementBlock as d, openBlock as h } from "vue";
+import { randomInt as o } from "@ulu/utils/random.js";
+const s = ["src", "alt"], g = {
+  __name: "UluPlaceholderImage",
   props: {
     imageId: String,
     /**
@@ -28,27 +27,20 @@ const d = {
      */
     random: Boolean
   },
-  computed: {
-    src() {
-      const { imageId: t } = this, { width: r, height: e } = this.size;
-      return `https://picsum.photos/${t ? `id/${t}/` : ""}${r}/${e}`;
-    },
-    size() {
-      const { random: t, width: r, height: e } = this;
-      return t ? {
-        width: i(500, 1e3),
-        height: i(500, 1e3)
-      } : { width: r, height: e };
-    }
+  setup(e) {
+    const t = e, a = n(() => t.random ? {
+      width: o(500, 1e3),
+      height: o(500, 1e3)
+    } : { width: t.width, height: t.height }), c = n(() => {
+      const { width: r, height: i } = a.value;
+      return `https://picsum.photos/${t.imageId ? `id/${t.imageId}/` : ""}${r}/${i}`;
+    });
+    return (r, i) => (h(), d("img", {
+      src: c.value,
+      alt: e.alt
+    }, null, 8, s));
   }
-}, h = ["src", "alt"];
-function m(t, r, e, o, l, n) {
-  return c(), s("img", {
-    src: n.src,
-    alt: e.alt
-  }, null, 8, h);
-}
-const f = /* @__PURE__ */ a(d, [["render", m]]);
+};
 export {
-  f as default
+  g as default
 };

package/dist/components/utils/UluPlaceholderText.vue.d.ts

@@ -1,24 +1,10 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    amount: {
-        type: NumberConstructor;
-        default: number;
-    };
-    element: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    amount: {
-        type: NumberConstructor;
-        default: number;
-    };
-    element: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
+declare const _default: import('vue').DefineComponent<{}, {
     element: string;
     amount: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    $props: {
+        readonly element?: string | undefined;
+        readonly amount?: number | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=UluPlaceholderText.vue.d.ts.map

package/dist/components/utils/UluPlaceholderText.vue.js

@@ -1,7 +1,6 @@
-import { createElementBlock as u, openBlock as i, Fragment as s, renderList as a, createBlock as r, resolveDynamicComponent as c, withCtx as l, createTextVNode as o } from "vue";
-import m from "../../_virtual/_plugin-vue_export-helper.js";
-const d = {
-  name: "PlaceholderText",
+import { createElementBlock as n, openBlock as u, Fragment as s, renderList as a, createBlock as r, resolveDynamicComponent as l, withCtx as c, createTextVNode as m } from "vue";
+const p = {
+  __name: "UluPlaceholderText",
   props: {
     amount: {
       type: Number,
@@ -11,17 +10,16 @@ const d = {
       type: String,
       default: "p"
     }
+  },
+  setup(e) {
+    return (o, t) => (u(!0), n(s, null, a(parseInt(e.amount), (i) => (u(), r(l(e.element), { key: i }, {
+      default: c(() => [...t[0] || (t[0] = [
+        m(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat tincidunt tellus vestibulum dictum. Fusce vel augue commodo, egestas diam sed, accumsan leo. Maecenas congue nec nisl et ullamcorper. Maecenas tincidunt, tortor et viverra eleifend, enim leo vestibulum ipsum, quis placerat mi nisi nec ex. Vivamus a justo volutpat, scelerisque elit eget, lacinia ex. Phasellus dapibus sollicitudin tortor, vitae suscipit nunc condimentum ut. Cras suscipit feugiat nibh nec consectetur. Phasellus vitae quam blandit, cursus metus ut, placerat mi. Sed tempor lacus non est interdum imperdiet nec quis metus. Praesent vel eleifend diam. Donec tincidunt eget purus sed posuere. ", -1)
+      ])]),
+      _: 2
+    }, 1024))), 128));
   }
 };
-function p(f, e, t, v, g, x) {
-  return i(!0), u(s, null, a(parseInt(t.amount), (n) => (i(), r(c(t.element), { key: n }, {
-    default: l(() => [...e[0] || (e[0] = [
-      o(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper erat tincidunt tellus vestibulum dictum. Fusce vel augue commodo, egestas diam sed, accumsan leo. Maecenas congue nec nisl et ullamcorper. Maecenas tincidunt, tortor et viverra eleifend, enim leo vestibulum ipsum, quis placerat mi nisi nec ex. Vivamus a justo volutpat, scelerisque elit eget, lacinia ex. Phasellus dapibus sollicitudin tortor, vitae suscipit nunc condimentum ut. Cras suscipit feugiat nibh nec consectetur. Phasellus vitae quam blandit, cursus metus ut, placerat mi. Sed tempor lacus non est interdum imperdiet nec quis metus. Praesent vel eleifend diam. Donec tincidunt eget purus sed posuere. ", -1)
-    ])]),
-    _: 2
-  }, 1024))), 128);
-}
-const h = /* @__PURE__ */ m(d, [["render", p]]);
 export {
-  h as default
+  p as default
 };

package/dist/components/utils/UluRouteAnnouncer.vue.d.ts

@@ -1,63 +1,14 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    /**
-     * Allow user to bypass this functionality
-     * - Function should return true if the page should be announced
-     * - Function is passed  (to, from, $route) => {}
-     *   - to/from are path strings
-     */
-    validator: {
-        type: FunctionConstructor;
-        default: () => boolean;
-    };
-    /**
-     * Array of paths to exclude
-     * - Can be exact path "/about"
-     * - Or can be path with wildcard "/about/*" (match all paths under about)
-     */
-    exclude: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    /**
-     * Function to retrieve routes title
-     */
-    getTitle: {
-        type: FunctionConstructor;
-        default: (route: any) => any;
-    };
-}>, {}, {}, {
-    title(): any;
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    /**
-     * Allow user to bypass this functionality
-     * - Function should return true if the page should be announced
-     * - Function is passed  (to, from, $route) => {}
-     *   - to/from are path strings
-     */
-    validator: {
-        type: FunctionConstructor;
-        default: () => boolean;
-    };
-    /**
-     * Array of paths to exclude
-     * - Can be exact path "/about"
-     * - Or can be path with wildcard "/about/*" (match all paths under about)
-     */
-    exclude: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    /**
-     * Function to retrieve routes title
-     */
-    getTitle: {
-        type: FunctionConstructor;
-        default: (route: any) => any;
-    };
-}>> & Readonly<{}>, {
+declare const _default: import('vue').DefineComponent<{}, {
     validator: Function;
     exclude: unknown[];
     getTitle: Function;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    $props: {
+        readonly validator?: Function | undefined;
+        readonly exclude?: unknown[] | undefined;
+        readonly getTitle?: Function | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    el: HTMLParagraphElement;
+}, any>;
 export default _default;
 //# sourceMappingURL=UluRouteAnnouncer.vue.d.ts.map

package/dist/components/utils/UluRouteAnnouncer.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluRouteAnnouncer.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/utils/UluRouteAnnouncer.vue"],"names":[],"mappings":"AAqBA;;IAuFM;;;;;OAKG;;;;;IAKH;;;;OAIG;;;;;IAKH;;OAEG;;;;;;;;IArBH;;;;;OAKG;;;;;IAKH;;;;OAIG;;;;;IAKH;;OAEG"}
+{"version":3,"file":"UluRouteAnnouncer.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/utils/UluRouteAnnouncer.vue"],"names":[],"mappings":"AAqBA;"}

package/dist/components/utils/UluRouteAnnouncer.vue.js

@@ -1,7 +1,8 @@
-import { createElementBlock as s, createCommentVNode as l, openBlock as u, toDisplayString as c } from "vue";
-import a from "../../_virtual/_plugin-vue_export-helper.js";
-const d = {
-  name: "RouteAnnouncer",
+import { ref as s, computed as f, watch as d, nextTick as p, createElementBlock as m, createCommentVNode as h, openBlock as y, toDisplayString as v } from "vue";
+import { useRoute as _ } from "vue-router";
+import { getRouteTitle as g } from "../../utils/router.js";
+const A = {
+  __name: "UluRouteAnnouncer",
   props: {
     /**
      * Allow user to bypass this functionality
@@ -27,33 +28,32 @@ const d = {
      */
     getTitle: {
       type: Function,
-      default: (t) => t.meta?.title
+      default: (r) => g(r)
     }
   },
-  watch: {
-    "$route.path"(t, r) {
-      if (this.$route.hash)
-        return;
-      const n = this.validator(t, r, this.$route), i = this.exclude.some((e) => e.endsWith("*") ? t.startsWith(e.slice(0, e.length - 1)) : t === e);
-      n && !i && this.$refs.el.focus();
-    }
-  },
-  computed: {
-    title() {
-      const t = this.getTitle(this.$route);
-      return t || console.warn("RouteAnnouncer: No page title!"), t;
-    }
+  setup(r) {
+    const n = r, t = _(), u = s(null), l = f(() => {
+      if (!t) return "";
+      const e = n.getTitle(t);
+      return e || console.warn("RouteAnnouncer: No page title!"), e;
+    });
+    return t ? d(
+      () => t.path,
+      async (e, a) => {
+        if (t.hash)
+          return;
+        const c = n.validator(e, a, t), i = n.exclude.some((o) => o.endsWith("*") ? e.startsWith(o.slice(0, o.length - 1)) : e === o);
+        c && !i && (await p(), u.value?.focus());
+      }
+    ) : console.error("RouteAnnouncer: No route found (install vue-router)."), (e, a) => l.value ? (y(), m("p", {
+      key: 0,
+      tabindex: "-1",
+      class: "hidden-visually",
+      ref_key: "el",
+      ref: u
+    }, v(l.value), 513)) : h("", !0);
   }
 };
-function f(t, r, n, i, e, o) {
-  return o.title ? (u(), s("p", {
-    key: 0,
-    tabindex: "-1",
-    class: "hidden-visually",
-    ref: "el"
-  }, c(o.title), 513)) : l("", !0);
-}
-const m = /* @__PURE__ */ a(d, [["render", f]]);
 export {
-  m as default
+  A as default
 };

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

@@ -1,16 +1,22 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    /**
-     * The target number to animate to.
-     */
-    value: NumberConstructor;
-}>, {}, {
-    currentValue: number | undefined;
-    tweenValue: number | undefined;
-}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    /**
-     * The target number to animate to.
-     */
-    value: NumberConstructor;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    value?: number | undefined;
+    $props: {
+        readonly value?: number | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLSpanElement>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            currentValue: number | undefined;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
 //# sourceMappingURL=UluAnimateNumber.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UluAnimateNumber.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/visualizations/UluAnimateNumber.vue"],"names":[],"mappings":"AAGA;;IAiDM;;OAEG;;;;;;IAFH;;OAEG"}
+{"version":3,"file":"UluAnimateNumber.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/visualizations/UluAnimateNumber.vue"],"names":[],"mappings":"AAGA;wBA6GqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;uPAQG"}

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

@@ -1,39 +1,31 @@
-import r from "gsap";
-import { createElementBlock as a, openBlock as u, renderSlot as n, createTextVNode as l, toDisplayString as o } from "vue";
-import s from "../../_virtual/_plugin-vue_export-helper.js";
-const c = {
-  name: "AnimateNumber",
+import { ref as n, reactive as u, watch as o, createElementBlock as c, openBlock as s, renderSlot as p, createTextVNode as m, toDisplayString as i } from "vue";
+import v from "gsap";
+const _ = {
+  __name: "UluAnimateNumber",
   props: {
     /**
      * The target number to animate to.
      */
     value: Number
   },
-  watch: {
-    value() {
-      r.to(this, {
-        tweenValue: this.value,
+  setup(r) {
+    const e = r, t = n(e.value), l = u({
+      tweenValue: e.value
+    });
+    return o(() => e.value, (a) => {
+      v.to(l, {
+        tweenValue: a,
         onUpdate: () => {
-          this.currentValue = Math.ceil(this.tweenValue);
+          t.value = Math.ceil(l.tweenValue);
         }
       });
-    }
-  },
-  data() {
-    return {
-      currentValue: this.value,
-      tweenValue: this.value
-    };
+    }), (a, f) => (s(), c("span", null, [
+      p(a.$slots, "default", { currentValue: t.value }, () => [
+        m(i(t.value), 1)
+      ])
+    ]));
   }
 };
-function i(t, p, m, f, e, h) {
-  return u(), a("span", null, [
-    n(t.$slots, "default", { currentValue: e.currentValue }, () => [
-      l(o(e.currentValue), 1)
-    ])
-  ]);
-}
-const v = /* @__PURE__ */ s(c, [["render", i]]);
 export {
-  v as default
+  _ as default
 };

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

@@ -4,9 +4,9 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
     $slots: S;
 });
 declare const __VLS_component: import('vue').DefineComponent<{}, {
-    small: boolean;
     duration: number;
     easing: string;
+    small: boolean;
     label: string;
     formatValue: Function;
     percentage: number;
@@ -17,9 +17,9 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     pieStyle: boolean;
     noMask: boolean;
     $props: {
-        readonly small?: boolean | undefined;
         readonly duration?: number | undefined;
         readonly easing?: string | undefined;
+        readonly small?: boolean | undefined;
         readonly label?: string | undefined;
         readonly formatValue?: Function | undefined;
         readonly percentage?: number | undefined;

package/dist/composables/useModifiers.d.ts

@@ -16,37 +16,32 @@
  * <div :class="[resolvedModifiers, 'other-class']"></div>
  * </template>
  *
- * <script>
+ * <script setup>
  * import { computed, ref } from 'vue';
  * import { useModifiers } from './composables/useModifiers.js'; // Adjust path
  *
- * export default {
- *   props: {
- *     variant: String, // e.g., 'primary', 'secondary'
- *     isActive: Boolean,
- *     modifiers: [String, Array, Object] // User-passed modifiers
- *   },
- *   setup(props) {
- *     const isHovered = ref(false);
+ * const props = defineProps({
+ *   variant: String, // e.g., 'primary', 'secondary'
+ *   isActive: Boolean,
+ *   modifiers: [String, Array, Object] // User-passed modifiers
+ * });
  *
- *     // Define component-internal modifiers based on props or local state
- *     const internalModifiers = computed(() => ({
- *       [props.variant]: !!props.variant, // Add 'primary' or 'secondary' if prop exists
- *       'active': props.isActive, // Add 'active' if isActive prop is true
- *       'hovered': isHovered.value, // Add 'hovered' if local state is true
- *       'default': !props.variant && !props.isActive // Add 'default' if no variant/active
- *     }));
+ * const isHovered = ref(false);
  *
- *     // Use the composable to get the combined modifier classes
- *     const { resolvedModifiers } = useModifiers({
- *       props: props, // Pass component props for 'modifiers' prop
- *       baseClass: 'button', // The BEM block name
- *       internal: internalModifiers // The computed internal modifiers
- *     });
+ * // Define component-internal modifiers based on props or local state
+ * const internalModifiers = computed(() => ({
+ *   [props.variant]: !!props.variant, // Add 'primary' or 'secondary' if prop exists
+ *   'active': props.isActive, // Add 'active' if isActive prop is true
+ *   'hovered': isHovered.value, // Add 'hovered' if local state is true
+ *   'default': !props.variant && !props.isActive // Add 'default' if no variant/active
+ * }));
  *
- *     return { resolvedModifiers, isHovered };
- *   }
- * };
+ * // Use the composable to get the combined modifier classes
+ * const { resolvedModifiers } = useModifiers({
+ *   props: props, // Pass component props for 'modifiers' prop
+ *   baseClass: 'button', // The BEM block name
+ *   internal: internalModifiers // The computed internal modifiers
+ * });
  * </script>
  *
  * // Resulting class examples for 'my-component':

package/dist/composables/useModifiers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModifiers.d.ts","sourceRoot":"","sources":["../../lib/composables/useModifiers.js"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,6DAtDG;IAAwB,KAAK,EAArB,MAAM;IACsC,SAAS,EAArD,MAAM,GAAG,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC;IAEuF,QAAQ;;;;;CAEzI,GAAU,MAAM,CA0ElB"}
+{"version":3,"file":"useModifiers.d.ts","sourceRoot":"","sources":["../../lib/composables/useModifiers.js"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,6DAjDG;IAAwB,KAAK,EAArB,MAAM;IACsC,SAAS,EAArD,MAAM,GAAG,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC;IAEuF,QAAQ;;;;;CAEzI,GAAU,MAAM,CAqElB"}