@ulu/frontend-vue 0.5.6 → 0.5.8

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?: 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?: 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;wBA+rBqB,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,15 @@
-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 V, computed as o, ref as f, createBlock as k, openBlock as a, resolveDynamicComponent as P, normalizeStyle as p, normalizeClass as h, unref as n, withCtx as S, createElementVNode as $, createElementBlock as m, createCommentVNode as y, renderSlot as i, createTextVNode as C, toDisplayString as x, createVNode as A, normalizeProps as I, guardReactiveProps as q } from "vue";
+import { RouterLink as B } from "vue-router";
+import { useModifiers as L } from "../../composables/useModifiers.js";
+import { refToElement as F } from "../../utils/dom.js";
+import G from "./UluImage.vue.js";
+const J = { class: "card__body" }, K = { class: "card__main" }, Q = ["href", "target"], W = {
   key: 0,
   class: "card__aside"
-}, J = ["src", "alt"], K = {
+}, X = {
   key: 1,
   class: "card__footer"
-}, Z = {
+}, le = {
   __name: "UluCard",
   props: {
     /**
@@ -82,11 +83,17 @@ const q = { class: "card__body" }, L = { class: "card__main" }, F = ["href", "ta
       default: () => ({})
     },
     /**
-     * Source of image
+     * Advanced configuration for the underlying `<UluImage>` component.
+     * Accepts a full configuration object (e.g., for lazy loading, srcset, etc.).
+     */
+    image: Object,
+    /**
+     * Convenience prop for quickly setting the image source. 
+     * For advanced image configurations, use the `image` prop or `#image` slot instead.
      */
     imageSrc: String,
     /**
-     * Alt text for image
+     * The alt text for the image when using the `imageSrc` convenience prop.
      */
     imageAlt: String,
     /**
@@ -112,111 +119,111 @@ 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: O }) {
+    const e = t, H = O, s = V();
+    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'.");
+    const b = o(() => e.image ? e.image : e.imageSrc ? {
+      src: e.imageSrc,
+      alt: e.imageAlt || ""
+    } : null), T = f(null), v = f(null), { resolvedModifiers: M } = L({ props: e, baseClass: "card" }), E = f(null), c = f(!1), u = o(() => e.proxyClick && !e.to && !e.href), w = o(() => u.value && (e.titleTo || e.titleHref)), j = o(() => u.value && !w.value), g = o(() => u.value || null), z = o(() => ({
       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 }) {
+      ...e.proxyClickOptions
+    })), D = o(() => u.value ? "pointer" : null), N = o(() => e.to ? B : e.href ? "a" : e.cardElement);
+    function R({ 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);
+      const { selectorPrevent: r } = z.value;
+      c.value = !1, l.closest(r) || (c.value = !0, E.value = d);
     }
-    function A({ timeStamp: l }) {
+    function U({ 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);
-          o ? o.click() : console.warn("Unable to resolve title link ref");
-        } else if (M.value) {
-          const o = T.value?.querySelector("[data-ulu-card-proxy-target]");
-          o ? o.click() : O("proxy-click");
+          const r = F(v.value);
+          r ? r.click() : console.warn("Unable to resolve title link ref");
+        } else if (j.value) {
+          const r = T.value?.querySelector("[data-ulu-card-proxy-target]");
+          r ? r.click() : H("proxy-click");
         }
       }
       c.value = !1;
     }
-    return (l, d) => (a(), k(B(D.value), {
+    return (l, d) => (a(), k(P(N.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,
+      onMousedown: R,
+      onMouseup: U,
+      style: p({ cursor: D.value }),
+      target: t.target,
+      to: t.to,
+      href: t.href,
       "data-ulu-proxy-click-init": g.value
     }, {
       default: S(() => [
-        C("div", q, [
-          C("div", L, [
-            e.title || n(s).title ? (a(), k(B(e.titleElement), {
+        $("div", J, [
+          $("div", K, [
+            t.title || n(s).title ? (a(), k(P(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
                 }, {
                   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
                 }, [
                   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, Q)) : i(l.$slots, "title", { key: 2 }, () => [
+                  C(x(t.title), 1)
                 ])
               ]),
               _: 3
             }, 8, ["class"])) : y("", !0),
             i(l.$slots, "body")
           ]),
-          n(s).aside ? (a(), m("div", G, [
+          n(s).aside ? (a(), m("div", W, [
             i(l.$slots, "aside")
           ])) : y("", !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)
+            A(G, I(q(b.value)), null, 16)
           ])
         ], 2)) : y("", !0),
-        n(s).footer ? (a(), m("div", K, [
+        n(s).footer ? (a(), m("div", X, [
           i(l.$slots, "footer")
         ])) : y("", !0)
       ]),
@@ -225,5 +232,5 @@ const q = { class: "card__body" }, L = { class: "card__main" }, F = ["href", "ta
   }
 };
 export {
-  Z as default
+  le as default
 };

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/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,7 @@
   import { RouterLink } from "vue-router";
   import { useModifiers } from "../../composables/useModifiers.js";
   import { refToElement } from '../../utils/dom.js';
+  import UluImage from './UluImage.vue';
 
   const props = defineProps({
     /**
@@ -156,11 +157,17 @@
       default: () => ({})
     },
     /**
-     * Source of image
+     * Advanced configuration for the underlying `<UluImage>` component.
+     * Accepts a full configuration object (e.g., for lazy loading, srcset, etc.).
+     */
+    image: Object,
+    /**
+     * Convenience prop for quickly setting the image source. 
+     * For advanced image configurations, use the `image` prop or `#image` slot instead.
      */
     imageSrc: String,
     /**
-     * Alt text for image
+     * The alt text for the image when using the `imageSrc` convenience prop.
      */
     imageAlt: String,
     /**
@@ -197,6 +204,18 @@
     console.warn("UluCard: 'titleTo'/'titleHref' should not be used with 'to'/'href'.");
   }
 
+  const resolvedImage = computed(() => {
+    if (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/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/package.json

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