@ulu/frontend-vue 0.5.5 → 0.5.7

package/dist/components/elements/UluCard.vue.d.ts

@@ -22,6 +22,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     titleTo?: string | Record<string, any> | undefined;
     titleHref?: string | undefined;
     titleTarget?: string | undefined;
+    image?: string | Record<string, any> | undefined;
     imageSrc?: string | undefined;
     imageAlt?: string | undefined;
     $props: {
@@ -42,6 +43,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
         readonly titleTo?: string | Record<string, any> | undefined;
         readonly titleHref?: string | undefined;
         readonly titleTarget?: string | undefined;
+        readonly image?: string | Record<string, any> | undefined;
         readonly imageSrc?: string | undefined;
         readonly imageAlt?: string | undefined;
     };

package/dist/components/elements/UluCard.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluCard.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluCard.vue"],"names":[],"mappings":"AA+EA;wBAkpBqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUG"}
+{"version":3,"file":"UluCard.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluCard.vue"],"names":[],"mappings":"AA+EA;wBAitBqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUG"}

package/dist/components/elements/UluCard.vue.js

@@ -1,14 +1,16 @@
-import { useSlots as N, ref as f, computed as r, createBlock as k, openBlock as a, resolveDynamicComponent as B, normalizeStyle as R, normalizeClass as h, unref as n, withCtx as S, createElementVNode as C, createElementBlock as m, createCommentVNode as y, renderSlot as i, createTextVNode as x, toDisplayString as b } from "vue";
-import { RouterLink as P } from "vue-router";
-import { useModifiers as V } from "../../composables/useModifiers.js";
-import { refToElement as I } from "../../utils/dom.js";
-const q = { class: "card__body" }, L = { class: "card__main" }, F = ["href", "target"], G = {
+import { useSlots as R, computed as r, ref as f, createBlock as k, openBlock as a, resolveDynamicComponent as z, normalizeStyle as V, normalizeClass as h, unref as n, withCtx as S, createElementVNode as $, createElementBlock as m, createCommentVNode as g, renderSlot as i, createTextVNode as C, toDisplayString as x, createVNode as I, normalizeProps as q, guardReactiveProps as L } from "vue";
+import { RouterLink as B } from "vue-router";
+import { useModifiers as F } from "../../composables/useModifiers.js";
+import { refToElement as G } from "../../utils/dom.js";
+import { warnDeprecatedProp as O } from "../../utils/props.js";
+import J from "./UluImage.vue.js";
+const K = { class: "card__body" }, Q = { class: "card__main" }, W = ["href", "target"], X = {
   key: 0,
   class: "card__aside"
-}, J = ["src", "alt"], K = {
+}, Y = {
   key: 1,
   class: "card__footer"
-}, Z = {
+}, oe = {
   __name: "UluCard",
   props: {
     /**
@@ -82,11 +84,17 @@ const q = { class: "card__body" }, L = { class: "card__main" }, F = ["href", "ta
       default: () => ({})
     },
     /**
-     * Source of image
+     * Unified image prop configuration passed to UluImage. Can be a string (src) or an object matching UluImage props.
+     */
+    image: [String, Object],
+    /**
+     * This is deprecated and will be removed in future version use "image" prop or image slot
+     * @deprecated Use `image` instead.
      */
     imageSrc: String,
     /**
-     * Alt text for image
+     * This is deprecated and will be removed in future version use "image" prop or image slot
+     * @deprecated Use `image` (as an object with `alt`) instead.
      */
     imageAlt: String,
     /**
@@ -112,118 +120,118 @@ const q = { class: "card__body" }, L = { class: "card__main" }, F = ["href", "ta
     modifiers: [Array, String]
   },
   emits: ["proxy-click"],
-  setup(e, { emit: $ }) {
-    const t = e, O = $, s = N();
-    t.proxyClick && (t.to || t.href) && console.warn("UluCard: 'proxyClick' is ignored when 'to' or 'href' are present."), (t.titleTo || t.titleHref) && (t.to || t.href) && console.warn("UluCard: 'titleTo'/'titleHref' should not be used with 'to'/'href'.");
-    const T = f(null), v = f(null), { resolvedModifiers: H } = V({ props: t, baseClass: "card" }), E = f(null), c = f(!1), u = r(() => t.proxyClick && !t.to && !t.href), w = r(() => u.value && (t.titleTo || t.titleHref)), M = r(() => u.value && !w.value), g = r(() => u.value || null), z = r(() => ({
+  setup(t, { emit: p }) {
+    const e = t, H = p, s = R();
+    e.proxyClick && (e.to || e.href) && console.warn("UluCard: 'proxyClick' is ignored when 'to' or 'href' are present."), (e.titleTo || e.titleHref) && (e.to || e.href) && console.warn("UluCard: 'titleTo'/'titleHref' should not be used with 'to'/'href'."), O("UluCard", e, "imageSrc", "image"), O("UluCard", e, "imageAlt", "image");
+    const b = r(() => e.image ? typeof e.image == "string" ? { src: e.image } : e.image : e.imageSrc ? {
+      src: e.imageSrc,
+      alt: e.imageAlt || ""
+    } : null), T = f(null), y = f(null), { resolvedModifiers: M } = F({ props: e, baseClass: "card" }), w = f(null), c = f(!1), u = r(() => e.proxyClick && !e.to && !e.href), E = r(() => u.value && (e.titleTo || e.titleHref)), U = r(() => u.value && !E.value), v = r(() => u.value || null), P = r(() => ({
       selectorPrevent: "input, select, textarea, button, a, [tabindex='-1']",
       mousedownDurationPrevent: 250,
-      ...t.proxyClickOptions
-    })), j = r(() => u.value ? "pointer" : null), D = r(() => t.to ? P : t.href ? "a" : t.cardElement);
-    function U({ target: l, timeStamp: d }) {
-      if (!g.value) return;
-      const { selectorPrevent: o } = z.value;
-      c.value = !1, l.closest(o) || (c.value = !0, E.value = d);
+      ...e.proxyClickOptions
+    })), j = r(() => u.value ? "pointer" : null), D = r(() => e.to ? B : e.href ? "a" : e.cardElement);
+    function A({ target: l, timeStamp: d }) {
+      if (!v.value) return;
+      const { selectorPrevent: o } = P.value;
+      c.value = !1, l.closest(o) || (c.value = !0, w.value = d);
     }
-    function A({ timeStamp: l }) {
-      if (!g.value || !c.value) return;
-      const { mousedownDurationPrevent: d } = z.value;
-      if (l - E.value < d) {
-        if (w.value) {
-          const o = I(v.value);
+    function N({ timeStamp: l }) {
+      if (!v.value || !c.value) return;
+      const { mousedownDurationPrevent: d } = P.value;
+      if (l - w.value < d) {
+        if (E.value) {
+          const o = G(y.value);
           o ? o.click() : console.warn("Unable to resolve title link ref");
-        } else if (M.value) {
+        } else if (U.value) {
           const o = T.value?.querySelector("[data-ulu-card-proxy-target]");
-          o ? o.click() : O("proxy-click");
+          o ? o.click() : H("proxy-click");
         }
       }
       c.value = !1;
     }
-    return (l, d) => (a(), k(B(D.value), {
+    return (l, d) => (a(), k(z(D.value), {
       ref_key: "cardRoot",
       ref: T,
       class: h(["card", [
         {
-          "card--horizontal": e.horizontal || e.horizontalCenter,
-          "card--horizontal-center": e.horizontalCenter,
-          "card--overlay": e.overlay
+          "card--horizontal": t.horizontal || t.horizontalCenter,
+          "card--horizontal-center": t.horizontalCenter,
+          "card--overlay": t.overlay
         },
-        n(H)
+        n(M)
       ]]),
-      onMousedown: U,
-      onMouseup: A,
-      style: R({ cursor: j.value }),
-      target: e.target,
-      to: e.to,
-      href: e.href,
-      "data-ulu-proxy-click-init": g.value
+      onMousedown: A,
+      onMouseup: N,
+      style: V({ cursor: j.value }),
+      target: t.target,
+      to: t.to,
+      href: t.href,
+      "data-ulu-proxy-click-init": v.value
     }, {
       default: S(() => [
-        C("div", q, [
-          C("div", L, [
-            e.title || n(s).title ? (a(), k(B(e.titleElement), {
+        $("div", K, [
+          $("div", Q, [
+            t.title || n(s).title ? (a(), k(z(t.titleElement), {
               key: 0,
-              class: h(["card__title", e.classes.title])
+              class: h(["card__title", t.classes.title])
             }, {
               default: S(() => [
-                e.titleTo ? (a(), k(n(P), {
+                t.titleTo ? (a(), k(n(B), {
                   key: 0,
                   class: "card__title-link",
-                  to: e.titleTo,
+                  to: t.titleTo,
                   ref_key: "link",
-                  ref: v
+                  ref: y
                 }, {
                   default: S(() => [
                     i(l.$slots, "title", {}, () => [
-                      x(b(e.title), 1)
+                      C(x(t.title), 1)
                     ])
                   ]),
                   _: 3
-                }, 8, ["to"])) : e.titleHref ? (a(), m("a", {
+                }, 8, ["to"])) : t.titleHref ? (a(), m("a", {
                   key: 1,
                   class: "card__title-link",
-                  href: e.titleHref,
-                  target: e.titleTarget,
+                  href: t.titleHref,
+                  target: t.titleTarget,
                   ref_key: "link",
-                  ref: v
+                  ref: y
                 }, [
                   i(l.$slots, "title", {}, () => [
-                    x(b(e.title), 1)
+                    C(x(t.title), 1)
                   ])
-                ], 8, F)) : i(l.$slots, "title", { key: 2 }, () => [
-                  x(b(e.title), 1)
+                ], 8, W)) : i(l.$slots, "title", { key: 2 }, () => [
+                  C(x(t.title), 1)
                 ])
               ]),
               _: 3
-            }, 8, ["class"])) : y("", !0),
+            }, 8, ["class"])) : g("", !0),
             i(l.$slots, "body")
           ]),
-          n(s).aside ? (a(), m("div", G, [
+          n(s).aside ? (a(), m("div", X, [
             i(l.$slots, "aside")
-          ])) : y("", !0)
+          ])) : g("", !0)
         ]),
-        n(s).image || e.imageSrc ? (a(), m("div", {
+        n(s).image || b.value ? (a(), m("div", {
           key: 0,
           class: h(["card__image", [
-            { "card__image--icon": e.imageIcon },
-            e.classes.image
+            { "card__image--icon": t.imageIcon },
+            t.classes.image
           ]])
         }, [
           i(l.$slots, "image", {}, () => [
-            C("img", {
-              src: e.imageSrc,
-              alt: e.imageAlt
-            }, null, 8, J)
+            I(J, q(L(b.value)), null, 16)
           ])
-        ], 2)) : y("", !0),
-        n(s).footer ? (a(), m("div", K, [
+        ], 2)) : g("", !0),
+        n(s).footer ? (a(), m("div", Y, [
           i(l.$slots, "footer")
-        ])) : y("", !0)
+        ])) : g("", !0)
       ]),
       _: 3
     }, 40, ["class", "style", "target", "to", "href", "data-ulu-proxy-click-init"]));
   }
 };
 export {
-  Z as default
+  oe as default
 };

package/dist/components/elements/UluImage.vue.d.ts

@@ -1,4 +1,9 @@
-declare const _default: import('vue').DefineComponent<{}, {
+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<{}, {
     classes: Record<string, any>;
     alt: string;
     src: string;
@@ -10,5 +15,12 @@ declare const _default: import('vue').DefineComponent<{}, {
         readonly sources?: unknown[] | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
 //# sourceMappingURL=UluImage.vue.d.ts.map

package/dist/components/elements/UluImage.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluImage.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluImage.vue"],"names":[],"mappings":"AAuBA;"}
+{"version":3,"file":"UluImage.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluImage.vue"],"names":[],"mappings":"AAwBA;wBA2KqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;;;;;;;2OAOG"}

package/dist/components/elements/UluImage.vue.js

@@ -1,5 +1,6 @@
-import { createElementBlock as t, openBlock as s, normalizeClass as n, createElementVNode as u, Fragment as i, renderList as m, mergeProps as r } from "vue";
-const o = ["src", "alt"], g = ["src", "alt"], y = /* @__PURE__ */ Object.assign({
+import { createElementBlock as r, openBlock as s, normalizeClass as n, renderSlot as u, createElementVNode as i, Fragment as m, renderList as o, createBlock as f, mergeProps as l } from "vue";
+import d from "./UluImageSource.vue.js";
+const g = ["src", "alt"], y = ["src", "alt"], B = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "UluImage",
@@ -30,24 +31,25 @@ const o = ["src", "alt"], g = ["src", "alt"], y = /* @__PURE__ */ Object.assign(
     }
   },
   setup(e) {
-    return (l, d) => e.sources?.length ? (s(), t("picture", {
+    return (t, k) => e.sources?.length || t.$slots.default ? (s(), r("picture", {
       key: 0,
       class: n(e.classes?.picture)
     }, [
-      (s(!0), t(i, null, m(e.sources, (a, c) => (s(), t("source", r({ key: c }, { ref_for: !0 }, a), null, 16))), 128)),
-      u("img", r({
+      u(t.$slots, "default"),
+      (s(!0), r(m, null, o(e.sources, (a, c) => (s(), f(d, l({ key: c }, { ref_for: !0 }, a), null, 16))), 128)),
+      i("img", l({
         src: e.src,
         alt: e.alt,
         class: e.classes?.img
-      }, l.$attrs), null, 16, o)
-    ], 2)) : (s(), t("img", r({
+      }, t.$attrs), null, 16, g)
+    ], 2)) : (s(), r("img", l({
       key: 1,
       src: e.src,
       alt: e.alt,
       class: e.classes?.img
-    }, l.$attrs), null, 16, g));
+    }, t.$attrs), null, 16, y));
   }
 });
 export {
-  y as default
+  B as default
 };

package/dist/components/elements/UluImageSource.vue.d.ts

@@ -0,0 +1,10 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    srcset: string;
+    media?: string | undefined;
+    $props: {
+        readonly srcset?: string | undefined;
+        readonly media?: string | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=UluImageSource.vue.d.ts.map

package/dist/components/elements/UluImageSource.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluImageSource.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluImageSource.vue"],"names":[],"mappings":"AAOA;"}

package/dist/components/elements/UluImageSource.vue.js

@@ -0,0 +1,31 @@
+import { createElementBlock as r, openBlock as s, mergeProps as a } from "vue";
+const c = ["srcset", "media"], o = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "UluImageSource",
+  props: {
+    /**
+     * Source set (e.g. image paths)
+     */
+    srcset: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Media query (e.g. (min-width: 600px))
+     */
+    media: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(e) {
+    return (t, n) => (s(), r("source", a({
+      srcset: e.srcset,
+      media: e.media
+    }, t.$attrs), null, 16, c));
+  }
+});
+export {
+  o as default
+};

package/dist/components/index.d.ts

@@ -23,6 +23,7 @@ export { default as UluDefinitionListItem } from './elements/UluDefinitionListIt
 export { default as UluExternalLink } from './elements/UluExternalLink.vue';
 export { default as UluIcon } from './elements/UluIcon.vue';
 export { default as UluImage } from './elements/UluImage.vue';
+export { default as UluImageSource } from './elements/UluImageSource.vue';
 export { default as UluList } from './elements/UluList.vue';
 export { default as UluListItem } from './elements/UluListItem.vue';
 export { default as UluCounterList } from './elements/UluCounterList.vue';

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

@@ -11,6 +11,6 @@ declare const _default: import('vue').DefineComponent<{}, {
         readonly alt?: string | undefined;
         readonly imageId?: string | undefined;
     };
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLImageElement>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=UluPlaceholderImage.vue.d.ts.map

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

@@ -1,6 +1,7 @@
-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 = {
+import { computed as o, createBlock as m, openBlock as d } from "vue";
+import { randomInt as n } from "@ulu/utils/random.js";
+import h from "../elements/UluImage.vue.js";
+const g = {
   __name: "UluPlaceholderImage",
   props: {
     imageId: String,
@@ -28,17 +29,17 @@ const s = ["src", "alt"], g = {
     random: Boolean
   },
   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 t = e, a = o(() => t.random ? {
+      width: n(500, 1e3),
+      height: n(500, 1e3)
+    } : { width: t.width, height: t.height }), c = o(() => {
       const { width: r, height: i } = a.value;
       return `https://picsum.photos/${t.imageId ? `id/${t.imageId}/` : ""}${r}/${i}`;
     });
-    return (r, i) => (h(), d("img", {
+    return (r, i) => (d(), m(h, {
       src: c.value,
       alt: e.alt
-    }, null, 8, s));
+    }, null, 8, ["src", "alt"]));
   }
 };
 export {

package/dist/index.js

@@ -8,11 +8,11 @@ import { default as U } from "./plugins/breakpoints/index.js";
 import { default as n } from "./components/collapsible/UluAccordion.vue.js";
 import { default as S } from "./components/collapsible/UluAccordionGroup.vue.js";
 import { default as T } from "./components/collapsible/UluCollapsible.vue.js";
-import { default as A } from "./components/collapsible/UluDropdown.vue.js";
+import { default as g } from "./components/collapsible/UluDropdown.vue.js";
 import { default as h } from "./components/collapsible/UluModal.vue.js";
 import { default as P } from "./components/collapsible/UluOverflowPopover.vue.js";
 import { default as C } from "./components/collapsible/UluTab.vue.js";
-import { default as y } from "./components/collapsible/UluTabGroup.vue.js";
+import { default as v } from "./components/collapsible/UluTabGroup.vue.js";
 import { default as R } from "./components/collapsible/UluTabList.vue.js";
 import { default as w } from "./components/collapsible/UluTabPanel.vue.js";
 import { default as D } from "./components/collapsible/UluTabPanels.vue.js";
@@ -30,209 +30,211 @@ import { default as te } from "./components/elements/UluDefinitionListItem.vue.j
 import { default as le } from "./components/elements/UluExternalLink.vue.js";
 import { default as fe } from "./components/elements/UluIcon.vue.js";
 import { default as me } from "./components/elements/UluImage.vue.js";
-import { default as de } from "./components/elements/UluList.vue.js";
-import { default as Ue } from "./components/elements/UluListItem.vue.js";
-import { default as ne } from "./components/elements/UluCounterList.vue.js";
-import { default as Se } from "./components/elements/UluOverflowScroller.vue.js";
-import { default as Te } from "./components/elements/UluRule.vue.js";
-import { default as Ae } from "./components/elements/UluScrollSlider.vue.js";
-import { default as he } from "./components/elements/UluSlider.vue.js";
-import { default as Pe } from "./components/elements/UluSpokeSpinner.vue.js";
-import { default as Ce } from "./components/elements/UluTable.vue.js";
-import { default as ye } from "./components/elements/UluTag.vue.js";
-import { default as Re } from "./components/forms/UluSelectableMenu.vue.js";
-import { default as we } from "./components/forms/UluFileDisplay.vue.js";
-import { default as De } from "./components/forms/UluFormFile.vue.js";
-import { default as Ee } from "./components/forms/UluFormMessage.vue.js";
-import { default as We } from "./components/forms/UluFormSelect.vue.js";
-import { default as He } from "./components/forms/UluFormText.vue.js";
-import { default as Ve } from "./components/forms/UluSearchForm.vue.js";
-import { default as ze } from "./components/forms/UluForm.vue.js";
-import { default as Ke } from "./components/forms/UluFormActions.vue.js";
-import { default as Xe } from "./components/forms/UluFormCheckbox.vue.js";
-import { default as Ze } from "./components/forms/UluFormFieldset.vue.js";
-import { default as $e } from "./components/forms/UluFormItem.vue.js";
-import { default as oo } from "./components/forms/UluFormItemsInline.vue.js";
-import { default as to } from "./components/forms/UluFormRadio.vue.js";
-import { default as lo } from "./components/forms/UluFormRequiredChar.vue.js";
-import { default as fo } from "./components/forms/UluFormTextarea.vue.js";
-import { default as mo } from "./components/layout/UluAdaptiveLayout.vue.js";
-import { default as xo } from "./components/layout/UluDataGrid.vue.js";
-import { default as io } from "./components/layout/UluTitleRail.vue.js";
-import { default as co } from "./components/layout/UluWhenBreakpoint.vue.js";
-import { default as Fo } from "./components/navigation/UluBreadcrumb.vue.js";
-import { default as bo } from "./components/navigation/UluMenu.vue.js";
-import { default as go } from "./components/navigation/UluMenuStack.vue.js";
-import { default as ko } from "./components/navigation/UluNavStrip.vue.js";
-import { default as Lo } from "./components/navigation/UluPager.vue.js";
-import { default as vo } from "./components/utils/UluAction.vue.js";
-import { default as Io } from "./components/utils/UluConditionalText.vue.js";
-import { default as Mo } from "./components/utils/UluConditionalWrapper.vue.js";
-import { default as Bo } from "./components/utils/UluPlaceholderImage.vue.js";
-import { default as No } from "./components/utils/UluPlaceholderText.vue.js";
-import { default as Go } from "./components/utils/UluRouteAnnouncer.vue.js";
-import { default as qo } from "./components/utils/UluSanityRichText.vue.js";
-import { default as Oo } from "./components/visualizations/UluAnimateNumber.vue.js";
-import { default as jo } from "./components/visualizations/UluProgressBar.vue.js";
-import { default as Jo } from "./components/visualizations/UluProgressCircle.vue.js";
-import { default as Qo } from "./components/systems/facets/UluFacetsActiveFilters.vue.js";
-import { default as Yo } from "./components/systems/facets/UluFacetsFilterLists.vue.js";
-import { default as _o } from "./components/systems/facets/UluFacetsFilterAccordions.vue.js";
-import { default as er } from "./components/systems/facets/UluFacetsFilterPopovers.vue.js";
-import { default as rr } from "./components/systems/facets/UluFacetsFilterSelects.vue.js";
-import { default as ar } from "./components/systems/facets/UluFacetsHeaderLayout.vue.js";
-import { default as ur } from "./components/systems/facets/UluFacetsResults.vue.js";
-import { default as sr } from "./components/systems/facets/UluFacetsSearch.vue.js";
-import { default as pr } from "./components/systems/facets/UluFacetsSidebarLayout.vue.js";
-import { default as xr } from "./components/systems/facets/UluFacetsSort.vue.js";
-import { default as ir } from "./components/systems/facets/UluFacetsList.vue.js";
-import { default as cr } from "./components/systems/scroll-anchors/UluScrollAnchors.vue.js";
-import { default as Fr } from "./components/systems/scroll-anchors/UluScrollAnchorsNav.vue.js";
-import { default as br } from "./components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue.js";
-import { default as gr } from "./components/systems/scroll-anchors/UluScrollAnchorsSection.vue.js";
-import { default as kr } from "./components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue.js";
-import { default as Lr } from "./components/systems/skeleton/UluShowSkeleton.vue.js";
-import { default as vr } from "./components/systems/skeleton/UluSkeletonContent.vue.js";
-import { default as Ir } from "./components/systems/skeleton/UluSkeletonMedia.vue.js";
-import { default as Mr } from "./components/systems/skeleton/UluSkeletonText.vue.js";
-import { default as Br } from "./components/systems/table-sticky/UluTableSticky.vue.js";
-import { default as Nr } from "./components/systems/table-sticky/UluTableStickyRows.vue.js";
-import { default as Gr } from "./components/systems/table-sticky/UluTableStickyTable.vue.js";
-import { useTooltip as qr } from "./plugins/popovers/useTooltip.js";
-import { default as Or } from "./components/elements/UluMain.vue.js";
-import { default as jr } from "./components/navigation/UluSkipLink.vue.js";
-import { default as Jr } from "./components/utils/UluEmpty.vue.js";
-import { default as Qr } from "./components/utils/UluEmptyView.vue.js";
-import { useFacets as Yr } from "./components/systems/facets/useFacets.js";
-import { useScrollAnchors as _r } from "./components/systems/scroll-anchors/useScrollAnchors.js";
-import { useScrollAnchorSection as et } from "./components/systems/scroll-anchors/useScrollAnchorSection.js";
-import { useScrollAnchorSections as rt } from "./components/systems/scroll-anchors/useScrollAnchorSections.js";
-import { useIcon as at } from "./composables/useIcon.js";
-import { useModifiers as ut } from "./composables/useModifiers.js";
-import { useWindowResize as st } from "./composables/useWindowResize.js";
-import { useRequiredInject as pt } from "./composables/useRequiredInject.js";
-import { useBreakpointManager as xt } from "./composables/useBreakpointManager.js";
-import { usePagination as it } from "./composables/usePagination.js";
-import { useDocumentTitle as ct } from "./composables/useDocumentTitle.js";
-import { useUluFloating as Ft } from "./composables/useUluFloating.js";
-import { useTableData as bt } from "./composables/useTableData.js";
+import { default as de } from "./components/elements/UluImageSource.vue.js";
+import { default as Ue } from "./components/elements/UluList.vue.js";
+import { default as ne } from "./components/elements/UluListItem.vue.js";
+import { default as Se } from "./components/elements/UluCounterList.vue.js";
+import { default as Te } from "./components/elements/UluOverflowScroller.vue.js";
+import { default as ge } from "./components/elements/UluRule.vue.js";
+import { default as he } from "./components/elements/UluScrollSlider.vue.js";
+import { default as Pe } from "./components/elements/UluSlider.vue.js";
+import { default as Ce } from "./components/elements/UluSpokeSpinner.vue.js";
+import { default as ve } from "./components/elements/UluTable.vue.js";
+import { default as Re } from "./components/elements/UluTag.vue.js";
+import { default as we } from "./components/forms/UluSelectableMenu.vue.js";
+import { default as De } from "./components/forms/UluFileDisplay.vue.js";
+import { default as Ee } from "./components/forms/UluFormFile.vue.js";
+import { default as We } from "./components/forms/UluFormMessage.vue.js";
+import { default as He } from "./components/forms/UluFormSelect.vue.js";
+import { default as Ve } from "./components/forms/UluFormText.vue.js";
+import { default as ze } from "./components/forms/UluSearchForm.vue.js";
+import { default as Ke } from "./components/forms/UluForm.vue.js";
+import { default as Xe } from "./components/forms/UluFormActions.vue.js";
+import { default as Ze } from "./components/forms/UluFormCheckbox.vue.js";
+import { default as $e } from "./components/forms/UluFormFieldset.vue.js";
+import { default as oo } from "./components/forms/UluFormItem.vue.js";
+import { default as to } from "./components/forms/UluFormItemsInline.vue.js";
+import { default as lo } from "./components/forms/UluFormRadio.vue.js";
+import { default as fo } from "./components/forms/UluFormRequiredChar.vue.js";
+import { default as mo } from "./components/forms/UluFormTextarea.vue.js";
+import { default as xo } from "./components/layout/UluAdaptiveLayout.vue.js";
+import { default as io } from "./components/layout/UluDataGrid.vue.js";
+import { default as co } from "./components/layout/UluTitleRail.vue.js";
+import { default as Fo } from "./components/layout/UluWhenBreakpoint.vue.js";
+import { default as bo } from "./components/navigation/UluBreadcrumb.vue.js";
+import { default as Ao } from "./components/navigation/UluMenu.vue.js";
+import { default as ko } from "./components/navigation/UluMenuStack.vue.js";
+import { default as Lo } from "./components/navigation/UluNavStrip.vue.js";
+import { default as Io } from "./components/navigation/UluPager.vue.js";
+import { default as yo } from "./components/utils/UluAction.vue.js";
+import { default as Mo } from "./components/utils/UluConditionalText.vue.js";
+import { default as Bo } from "./components/utils/UluConditionalWrapper.vue.js";
+import { default as No } from "./components/utils/UluPlaceholderImage.vue.js";
+import { default as Go } from "./components/utils/UluPlaceholderText.vue.js";
+import { default as qo } from "./components/utils/UluRouteAnnouncer.vue.js";
+import { default as Oo } from "./components/utils/UluSanityRichText.vue.js";
+import { default as jo } from "./components/visualizations/UluAnimateNumber.vue.js";
+import { default as Jo } from "./components/visualizations/UluProgressBar.vue.js";
+import { default as Qo } from "./components/visualizations/UluProgressCircle.vue.js";
+import { default as Yo } from "./components/systems/facets/UluFacetsActiveFilters.vue.js";
+import { default as _o } from "./components/systems/facets/UluFacetsFilterLists.vue.js";
+import { default as er } from "./components/systems/facets/UluFacetsFilterAccordions.vue.js";
+import { default as rr } from "./components/systems/facets/UluFacetsFilterPopovers.vue.js";
+import { default as ar } from "./components/systems/facets/UluFacetsFilterSelects.vue.js";
+import { default as ur } from "./components/systems/facets/UluFacetsHeaderLayout.vue.js";
+import { default as sr } from "./components/systems/facets/UluFacetsResults.vue.js";
+import { default as pr } from "./components/systems/facets/UluFacetsSearch.vue.js";
+import { default as xr } from "./components/systems/facets/UluFacetsSidebarLayout.vue.js";
+import { default as ir } from "./components/systems/facets/UluFacetsSort.vue.js";
+import { default as cr } from "./components/systems/facets/UluFacetsList.vue.js";
+import { default as Fr } from "./components/systems/scroll-anchors/UluScrollAnchors.vue.js";
+import { default as br } from "./components/systems/scroll-anchors/UluScrollAnchorsNav.vue.js";
+import { default as Ar } from "./components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue.js";
+import { default as kr } from "./components/systems/scroll-anchors/UluScrollAnchorsSection.vue.js";
+import { default as Lr } from "./components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue.js";
+import { default as Ir } from "./components/systems/skeleton/UluShowSkeleton.vue.js";
+import { default as yr } from "./components/systems/skeleton/UluSkeletonContent.vue.js";
+import { default as Mr } from "./components/systems/skeleton/UluSkeletonMedia.vue.js";
+import { default as Br } from "./components/systems/skeleton/UluSkeletonText.vue.js";
+import { default as Nr } from "./components/systems/table-sticky/UluTableSticky.vue.js";
+import { default as Gr } from "./components/systems/table-sticky/UluTableStickyRows.vue.js";
+import { default as qr } from "./components/systems/table-sticky/UluTableStickyTable.vue.js";
+import { useTooltip as Or } from "./plugins/popovers/useTooltip.js";
+import { default as jr } from "./components/elements/UluMain.vue.js";
+import { default as Jr } from "./components/navigation/UluSkipLink.vue.js";
+import { default as Qr } from "./components/utils/UluEmpty.vue.js";
+import { default as Yr } from "./components/utils/UluEmptyView.vue.js";
+import { useFacets as _r } from "./components/systems/facets/useFacets.js";
+import { useScrollAnchors as et } from "./components/systems/scroll-anchors/useScrollAnchors.js";
+import { useScrollAnchorSection as rt } from "./components/systems/scroll-anchors/useScrollAnchorSection.js";
+import { useScrollAnchorSections as at } from "./components/systems/scroll-anchors/useScrollAnchorSections.js";
+import { useIcon as ut } from "./composables/useIcon.js";
+import { useModifiers as st } from "./composables/useModifiers.js";
+import { useWindowResize as pt } from "./composables/useWindowResize.js";
+import { useRequiredInject as xt } from "./composables/useRequiredInject.js";
+import { useBreakpointManager as it } from "./composables/useBreakpointManager.js";
+import { usePagination as ct } from "./composables/usePagination.js";
+import { useDocumentTitle as Ft } from "./composables/useDocumentTitle.js";
+import { useUluFloating as bt } from "./composables/useUluFloating.js";
+import { useTableData as At } from "./composables/useTableData.js";
 export {
   n as UluAccordion,
   S as UluAccordionGroup,
-  vo as UluAction,
-  mo as UluAdaptiveLayout,
+  yo as UluAction,
+  xo as UluAdaptiveLayout,
   E as UluAlert,
-  Oo as UluAnimateNumber,
+  jo as UluAnimateNumber,
   W as UluBadge,
   H as UluBadgeStack,
-  Fo as UluBreadcrumb,
+  bo as UluBreadcrumb,
   V as UluButton,
   z as UluButtonVerbose,
   K as UluCallout,
   X as UluCaptionedFigure,
   Z as UluCard,
   T as UluCollapsible,
-  Io as UluConditionalText,
-  Mo as UluConditionalWrapper,
-  ne as UluCounterList,
-  xo as UluDataGrid,
+  Mo as UluConditionalText,
+  Bo as UluConditionalWrapper,
+  Se as UluCounterList,
+  io as UluDataGrid,
   $ as UluDataTable,
   oe as UluDefinitionList,
   te as UluDefinitionListItem,
-  A as UluDropdown,
-  Jr as UluEmpty,
-  Qr as UluEmptyView,
+  g as UluDropdown,
+  Qr as UluEmpty,
+  Yr as UluEmptyView,
   le as UluExternalLink,
-  Qo as UluFacetsActiveFilters,
-  _o as UluFacetsFilterAccordions,
-  Yo as UluFacetsFilterLists,
-  er as UluFacetsFilterPopovers,
-  rr as UluFacetsFilterSelects,
-  ar as UluFacetsHeaderLayout,
-  ir as UluFacetsList,
-  ur as UluFacetsResults,
-  sr as UluFacetsSearch,
-  pr as UluFacetsSidebarLayout,
-  xr as UluFacetsSort,
-  we as UluFileDisplay,
-  ze as UluForm,
-  Ke as UluFormActions,
-  Xe as UluFormCheckbox,
-  Ze as UluFormFieldset,
-  De as UluFormFile,
-  $e as UluFormItem,
-  oo as UluFormItemsInline,
-  Ee as UluFormMessage,
-  to as UluFormRadio,
-  lo as UluFormRequiredChar,
-  We as UluFormSelect,
-  He as UluFormText,
-  fo as UluFormTextarea,
+  Yo as UluFacetsActiveFilters,
+  er as UluFacetsFilterAccordions,
+  _o as UluFacetsFilterLists,
+  rr as UluFacetsFilterPopovers,
+  ar as UluFacetsFilterSelects,
+  ur as UluFacetsHeaderLayout,
+  cr as UluFacetsList,
+  sr as UluFacetsResults,
+  pr as UluFacetsSearch,
+  xr as UluFacetsSidebarLayout,
+  ir as UluFacetsSort,
+  De as UluFileDisplay,
+  Ke as UluForm,
+  Xe as UluFormActions,
+  Ze as UluFormCheckbox,
+  $e as UluFormFieldset,
+  Ee as UluFormFile,
+  oo as UluFormItem,
+  to as UluFormItemsInline,
+  We as UluFormMessage,
+  lo as UluFormRadio,
+  fo as UluFormRequiredChar,
+  He as UluFormSelect,
+  Ve as UluFormText,
+  mo as UluFormTextarea,
   fe as UluIcon,
   me as UluImage,
-  de as UluList,
-  Ue as UluListItem,
-  Or as UluMain,
-  bo as UluMenu,
-  go as UluMenuStack,
+  de as UluImageSource,
+  Ue as UluList,
+  ne as UluListItem,
+  jr as UluMain,
+  Ao as UluMenu,
+  ko as UluMenuStack,
   h as UluModal,
-  ko as UluNavStrip,
+  Lo as UluNavStrip,
   P as UluOverflowPopover,
-  Se as UluOverflowScroller,
-  Lo as UluPager,
-  Bo as UluPlaceholderImage,
-  No as UluPlaceholderText,
-  jo as UluProgressBar,
-  Jo as UluProgressCircle,
-  Go as UluRouteAnnouncer,
-  Te as UluRule,
-  qo as UluSanityRichText,
-  cr as UluScrollAnchors,
-  kr as UluScrollAnchorsHeadlessSection,
-  Fr as UluScrollAnchorsNav,
-  br as UluScrollAnchorsNavAnimated,
-  gr as UluScrollAnchorsSection,
-  Ae as UluScrollSlider,
-  Ve as UluSearchForm,
-  Re as UluSelectableMenu,
-  Lr as UluShowSkeleton,
-  vr as UluSkeletonContent,
-  Ir as UluSkeletonMedia,
-  Mr as UluSkeletonText,
-  jr as UluSkipLink,
-  he as UluSlider,
-  Pe as UluSpokeSpinner,
+  Te as UluOverflowScroller,
+  Io as UluPager,
+  No as UluPlaceholderImage,
+  Go as UluPlaceholderText,
+  Jo as UluProgressBar,
+  Qo as UluProgressCircle,
+  qo as UluRouteAnnouncer,
+  ge as UluRule,
+  Oo as UluSanityRichText,
+  Fr as UluScrollAnchors,
+  Lr as UluScrollAnchorsHeadlessSection,
+  br as UluScrollAnchorsNav,
+  Ar as UluScrollAnchorsNavAnimated,
+  kr as UluScrollAnchorsSection,
+  he as UluScrollSlider,
+  ze as UluSearchForm,
+  we as UluSelectableMenu,
+  Ir as UluShowSkeleton,
+  yr as UluSkeletonContent,
+  Mr as UluSkeletonMedia,
+  Br as UluSkeletonText,
+  Jr as UluSkipLink,
+  Pe as UluSlider,
+  Ce as UluSpokeSpinner,
   C as UluTab,
-  y as UluTabGroup,
+  v as UluTabGroup,
   R as UluTabList,
   w as UluTabPanel,
   D as UluTabPanels,
-  Ce as UluTable,
-  Br as UluTableSticky,
-  Nr as UluTableStickyRows,
-  Gr as UluTableStickyTable,
-  ye as UluTag,
-  io as UluTitleRail,
-  co as UluWhenBreakpoint,
+  ve as UluTable,
+  Nr as UluTableSticky,
+  Gr as UluTableStickyRows,
+  qr as UluTableStickyTable,
+  Re as UluTag,
+  co as UluTitleRail,
+  Fo as UluWhenBreakpoint,
   U as breakpointsPlugin,
   t as corePlugin,
   m as modalsPlugin,
   l as popoversPlugin,
   d as toastPlugin,
-  xt as useBreakpointManager,
-  ct as useDocumentTitle,
-  Yr as useFacets,
-  at as useIcon,
-  ut as useModifiers,
-  it as usePagination,
-  pt as useRequiredInject,
-  et as useScrollAnchorSection,
-  rt as useScrollAnchorSections,
-  _r as useScrollAnchors,
-  bt as useTableData,
-  qr as useTooltip,
+  it as useBreakpointManager,
+  Ft as useDocumentTitle,
+  _r as useFacets,
+  ut as useIcon,
+  st as useModifiers,
+  ct as usePagination,
+  xt as useRequiredInject,
+  rt as useScrollAnchorSection,
+  at as useScrollAnchorSections,
+  et as useScrollAnchors,
+  At as useTableData,
+  Or as useTooltip,
   f as useTooltipFollow,
-  Ft as useUluFloating,
-  st as useWindowResize,
+  bt as useUluFloating,
+  pt as useWindowResize,
   e as utils
 };

package/dist/utils/props.d.ts

@@ -4,4 +4,12 @@
  * @returns {Boolean} Whether all are objects within
  */
 export function isArrayOfObjects(array: any[]): boolean;
+/**
+ * Logs a deprecation warning for a component prop in non-production environments.
+ * @param {String} componentName The name of the component using the deprecated prop.
+ * @param {Object} props The component's props object.
+ * @param {String} oldProp The name of the deprecated prop.
+ * @param {String} newProp The name of the new prop to use instead.
+ */
+export function warnDeprecatedProp(componentName: string, props: Object, oldProp: string, newProp: string): void;
 //# sourceMappingURL=props.d.ts.map

package/dist/utils/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../lib/utils/props.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wDAEC"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../lib/utils/props.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wDAEC;AAED;;;;;;GAMG;AACH,iEAJW,MAAM,0CAQhB"}

package/dist/utils/props.js

@@ -1,6 +1,10 @@
 function t(e) {
-  return e.every((r) => typeof r == "object");
+  return e.every((n) => typeof n == "object");
+}
+function i(e, n, r, o) {
+  n[r] !== void 0 && typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn(`[${e}]: Prop '${r}' is deprecated and will be removed in future, Use '${o}' instead`);
 }
 export {
-  t as isArrayOfObjects
+  t as isArrayOfObjects,
+  i as warnDeprecatedProp
 };

package/dist/vite.d.ts

@@ -0,0 +1,5 @@
+export namespace uluTransformAssetUrls {
+    let UluImage: string[];
+    let UluImageSource: string[];
+}
+//# sourceMappingURL=vite.d.ts.map

package/dist/vite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../lib/vite.js"],"names":[],"mappings":""}

package/dist/vite.js

@@ -0,0 +1,7 @@
+const s = {
+  UluImage: ["src"],
+  UluImageSource: ["srcset"]
+};
+export {
+  s as uluTransformAssetUrls
+};

package/lib/components/elements/UluCard.vue

@@ -61,7 +61,7 @@
       </div>
     </div>
     <div 
-      v-if="$slots.image || imageSrc" 
+      v-if="$slots.image || resolvedImage" 
       class="card__image"
       :class="[
         { 'card__image--icon' : imageIcon },
@@ -69,7 +69,7 @@
       ]"
     >
       <slot name="image">
-        <img :src="imageSrc" :alt="imageAlt">
+        <UluImage v-bind="resolvedImage" />
       </slot>
     </div>
     <div class="card__footer" v-if="$slots.footer">
@@ -83,6 +83,8 @@
   import { RouterLink } from "vue-router";
   import { useModifiers } from "../../composables/useModifiers.js";
   import { refToElement } from '../../utils/dom.js';
+  import { warnDeprecatedProp } from '../../utils/props.js';
+  import UluImage from './UluImage.vue';
 
   const props = defineProps({
     /**
@@ -156,11 +158,17 @@
       default: () => ({})
     },
     /**
-     * Source of image
+     * Unified image prop configuration passed to UluImage. Can be a string (src) or an object matching UluImage props.
+     */
+    image: [String, Object],
+    /**
+     * This is deprecated and will be removed in future version use "image" prop or image slot
+     * @deprecated Use `image` instead.
      */
     imageSrc: String,
     /**
-     * Alt text for image
+     * This is deprecated and will be removed in future version use "image" prop or image slot
+     * @deprecated Use `image` (as an object with `alt`) instead.
      */
     imageAlt: String,
     /**
@@ -197,6 +205,26 @@
     console.warn("UluCard: 'titleTo'/'titleHref' should not be used with 'to'/'href'.");
   }
 
+  // Deprecation Warnings
+  // - Note these should be removed in the next minor or maybe major release
+  warnDeprecatedProp('UluCard', props, 'imageSrc', 'image');
+  warnDeprecatedProp('UluCard', props, 'imageAlt', 'image');
+
+  const resolvedImage = computed(() => {
+    if (props.image) {
+      if (typeof props.image === 'string') {
+        return { src: props.image };
+      }
+      return props.image;
+    } else if (props.imageSrc) {
+      return {
+        src: props.imageSrc,
+        alt: props.imageAlt || ''
+      };
+    }
+    return null;
+  });
+
   // --- Template refs
   const cardRoot = ref(null);
   const link = ref(null);

package/lib/components/elements/UluImage.vue

@@ -1,6 +1,7 @@
 <template>
-  <picture v-if="sources?.length" :class="classes?.picture">
-    <source 
+  <picture v-if="sources?.length || $slots.default" :class="classes?.picture">
+    <slot />
+    <UluImageSource 
       v-for="(source, index) in sources" 
       :key="index"
       v-bind="source" 
@@ -23,6 +24,8 @@
 </template>
 
 <script setup>
+  import UluImageSource from './UluImageSource.vue';
+
   defineOptions({
     inheritAttrs: false
   });

package/lib/components/elements/UluImageSource.vue

@@ -0,0 +1,30 @@
+<template>
+  <source 
+    :srcset="srcset" 
+    :media="media" 
+    v-bind="$attrs" 
+  />
+</template>
+
+<script setup>
+  defineOptions({
+    inheritAttrs: false
+  });
+
+  defineProps({
+    /**
+     * Source set (e.g. image paths)
+     */
+    srcset: {
+      type: String,
+      required: true
+    },
+    /**
+     * Media query (e.g. (min-width: 600px))
+     */
+    media: {
+      type: String,
+      default: undefined
+    }
+  });
+</script>

package/lib/components/index.js

@@ -28,6 +28,7 @@ export { default as UluDefinitionListItem } from './elements/UluDefinitionListIt
 export { default as UluExternalLink } from './elements/UluExternalLink.vue';
 export { default as UluIcon } from './elements/UluIcon.vue';
 export { default as UluImage } from './elements/UluImage.vue';
+export { default as UluImageSource } from './elements/UluImageSource.vue';
 
 // TODO (Still needs stylesheet for main library [and any scripting over there so it's contained in ulu])
 // export { default as UluImageSlider } from './elements/UluImageSlider.vue';

package/lib/components/utils/UluPlaceholderImage.vue

@@ -1,10 +1,11 @@
 <template>
-  <img :src="src" :alt="alt">
+  <UluImage :src="src" :alt="alt" />
 </template>
 
 <script setup>
   import { computed } from 'vue';
   import { randomInt } from "@ulu/utils/random.js";
+  import UluImage from "../elements/UluImage.vue";
 
   const props = defineProps({
     imageId: String,

package/lib/utils/props.js

@@ -5,4 +5,17 @@
  */
 export function isArrayOfObjects(array) {
   return array.every(item => typeof item === "object");
+}
+
+/**
+ * Logs a deprecation warning for a component prop in non-production environments.
+ * @param {String} componentName The name of the component using the deprecated prop.
+ * @param {Object} props The component's props object.
+ * @param {String} oldProp The name of the deprecated prop.
+ * @param {String} newProp The name of the new prop to use instead.
+ */
+export function warnDeprecatedProp(componentName, props, oldProp, newProp) {
+  if (props[oldProp] !== undefined && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    console.warn(`[${ componentName }]: Prop '${ oldProp }' is deprecated and will be removed in future, Use '${ newProp }' instead`);
+  }
 }

package/lib/vite.js

@@ -0,0 +1,25 @@
+/**
+ * Vite/Vue plugin utility to automatically transform asset URLs for UluImage components.
+ * 
+ * Usage in vite.config.js:
+ * import { uluTransformAssetUrls } from '@ulu/frontend-vue/vite.js';
+ * import vue from '@vitejs/plugin-vue';
+ * 
+ * export default defineConfig({
+ *   plugins: [
+ *     vue({
+ *       template: {
+ *         transformAssetUrls: {
+ *           // You can spread default tags if needed, or Vue handles merging objects depending on setup.
+ *           ...uluTransformAssetUrls
+ *         }
+ *       }
+ *     })
+ *   ]
+ * });
+ */
+
+export const uluTransformAssetUrls = {
+  UluImage: ['src'],
+  UluImageSource: ['srcset']
+};

package/package.json

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