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

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

@@ -0,0 +1,53 @@
+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({
+  inheritAttrs: !1
+}, {
+  __name: "UluImage",
+  props: {
+    src: {
+      type: String,
+      required: !0
+    },
+    alt: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Array of source objects for <picture> tag.
+     * Example: [{ srcset: '/small.jpg', media: '(max-width: 600px)' }]
+     */
+    sources: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Granular class targeting for internal elements.
+     * Example: { picture: 'my-picture-class', img: 'my-img-class' }
+     */
+    classes: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(e) {
+    return (l, d) => e.sources?.length ? (s(), t("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({
+        src: e.src,
+        alt: e.alt,
+        class: e.classes?.img
+      }, l.$attrs), null, 16, o)
+    ], 2)) : (s(), t("img", r({
+      key: 1,
+      src: e.src,
+      alt: e.alt,
+      class: e.classes?.img
+    }, l.$attrs), null, 16, g));
+  }
+});
+export {
+  y as default
+};

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

@@ -1 +1 @@
-{"version":3,"file":"UluList.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluList.vue"],"names":[],"mappings":"AA6BA;wBA0OqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;2OAQG"}
+{"version":3,"file":"UluList.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluList.vue"],"names":[],"mappings":"AA8BA;wBA2OqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;;;;;;;;;;;;;;;;;;;2OAOG"}

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

@@ -1,5 +1,5 @@
-import { computed as o, createBlock as u, openBlock as t, resolveDynamicComponent as m, normalizeStyle as y, normalizeClass as n, withCtx as B, createElementBlock as d, Fragment as f, renderList as v, renderSlot as S, createTextVNode as g, toDisplayString as k } from "vue";
-const x = {
+import { computed as n, createBlock as m, createCommentVNode as u, openBlock as t, resolveDynamicComponent as y, normalizeStyle as B, normalizeClass as o, withCtx as f, createElementBlock as d, Fragment as v, renderList as S, renderSlot as g, createTextVNode as k, toDisplayString as C } from "vue";
+const h = {
   __name: "UluList",
   props: {
     /**
@@ -49,9 +49,10 @@ const x = {
     listStyleType: String
   },
   setup(e) {
-    const l = e, r = o(() => l.ordered || l.forceOrdered), c = o(() => r.value ? "ol" : "ul");
-    return (i, O) => (t(), u(m(c.value), {
-      class: n([
+    const l = e, r = n(() => l.ordered || l.forceOrdered), c = n(() => r.value ? "ol" : "ul");
+    return (i, O) => e.items?.length ? (t(), m(y(c.value), {
+      key: 0,
+      class: o([
         {
           "list-ordered": e.ordered,
           "list-unordered": e.unordered,
@@ -60,29 +61,29 @@ const x = {
         },
         e.classes.list
       ]),
-      style: y({
+      style: B({
         listStyleType: e.listStyleType
       }),
       reversed: r.value ? e.reversed : null,
       start: e.start
     }, {
-      default: B(() => [
-        (t(!0), d(f, null, v(e.items, (s, a) => (t(), d("li", {
+      default: f(() => [
+        (t(!0), d(v, null, S(e.items, (s, a) => (t(), d("li", {
           key: a,
-          class: n(e.classes.listItem)
+          class: o(e.classes.listItem)
         }, [
-          S(i.$slots, "default", {
+          g(i.$slots, "default", {
             item: s,
             index: a
           }, () => [
-            g(k(s), 1)
+            k(C(s), 1)
           ])
         ], 2))), 128))
       ]),
       _: 3
-    }, 8, ["class", "style", "reversed", "start"]));
+    }, 8, ["class", "style", "reversed", "start"])) : u("", !0);
   }
 };
 export {
-  x as default
+  h as default
 };

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

@@ -0,0 +1,49 @@
+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<{}, {
+    element: string;
+    controls: boolean;
+    trackId: string;
+    scrollAmount: string | number;
+    scrollBehavior: string;
+    namespace: string;
+    controlsClass: string;
+    buttonClasses: unknown[];
+    iconClassPrevious: string;
+    iconClassNext: string;
+    offsetStart: number;
+    offsetEnd: number;
+    $props: {
+        readonly element?: string | undefined;
+        readonly controls?: boolean | undefined;
+        readonly trackId?: string | undefined;
+        readonly scrollAmount?: string | number | undefined;
+        readonly scrollBehavior?: string | undefined;
+        readonly namespace?: string | undefined;
+        readonly controlsClass?: string | undefined;
+        readonly buttonClasses?: unknown[] | undefined;
+        readonly iconClassPrevious?: string | undefined;
+        readonly iconClassNext?: string | undefined;
+        readonly offsetStart?: number | undefined;
+        readonly offsetEnd?: number | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            setTrackRef: (el: any) => void;
+            onScroll: () => void;
+            canScrollLeft: boolean;
+            canScrollRight: boolean;
+        }): any;
+        previous?(_: {}): any;
+        next?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+//# sourceMappingURL=UluOverflowScroller.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UluOverflowScroller.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluOverflowScroller.vue"],"names":[],"mappings":"AAoCA;wBAoXqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;;;;;2OAQG"}

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

@@ -0,0 +1,138 @@
+import { ref as d, onMounted as g, nextTick as k, onBeforeUnmount as B, createBlock as N, openBlock as v, resolveDynamicComponent as x, withCtx as w, renderSlot as f, createElementBlock as L, createCommentVNode as R, normalizeClass as o, createElementVNode as s, createVNode as b } from "vue";
+import y from "./UluIcon.vue.js";
+const E = ["aria-controls", "disabled"], A = ["aria-controls", "disabled"], P = {
+  __name: "UluOverflowScroller",
+  props: {
+    /**
+     * The HTML element to use as the root wrapper.
+     */
+    element: { type: String, default: "div" },
+    /**
+     * Show previous/next controls.
+     */
+    controls: { type: Boolean, default: !0 },
+    /**
+     * The ID of the track element, used for aria-controls.
+     */
+    trackId: { type: String, default: null },
+    /**
+     * Scroll amount (in pixels) for the next/prev buttons.
+     * If 'auto', it scrolls by the visible width of the track.
+     */
+    scrollAmount: { type: [Number, String], default: "auto" },
+    /**
+     * Scroll behavior ('smooth' or 'auto').
+     */
+    scrollBehavior: { type: String, default: "smooth" },
+    /**
+     * CSS class namespace for controls.
+     */
+    namespace: { type: String, default: "OverflowScroller" },
+    /**
+     * Additional class to apply to the controls container.
+     */
+    controlsClass: { type: String, default: "" },
+    /**
+     * Button classes to apply.
+     */
+    buttonClasses: { type: Array, default: () => ["button", "button--icon"] },
+    /**
+     * Icon definition for previous button.
+     */
+    iconClassPrevious: { type: String, default: "type:previous" },
+    /**
+     * Icon definition for next button.
+     */
+    iconClassNext: { type: String, default: "type:next" },
+    /**
+     * Offset threshold to consider "at start" (disables previous button).
+     */
+    offsetStart: { type: Number, default: 10 },
+    /**
+     * Offset threshold to consider "at end" (disables next button).
+     */
+    offsetEnd: { type: Number, default: 10 }
+  },
+  setup(e) {
+    const c = e, n = d(null), r = d(!1), i = d(!1), S = (t) => {
+      n.value = t;
+    }, u = () => {
+      if (!n.value) return;
+      const { scrollLeft: t, scrollWidth: l, clientWidth: a } = n.value;
+      r.value = t > c.offsetStart, i.value = Math.ceil(t + a) < l - c.offsetEnd;
+    }, h = () => {
+      u();
+    }, m = (t) => {
+      if (!n.value) return;
+      const { clientWidth: l } = n.value;
+      let a = c.scrollAmount;
+      a === "auto" && (a = l), n.value.scrollBy({
+        left: t === "right" ? a : -a,
+        behavior: c.scrollBehavior
+      });
+    }, $ = () => m("left"), C = () => m("right");
+    return g(() => {
+      k(() => {
+        u();
+      }), window.addEventListener("resize", u);
+    }), B(() => {
+      window.removeEventListener("resize", u);
+    }), (t, l) => (v(), N(x(e.element), null, {
+      default: w(() => [
+        f(t.$slots, "default", {
+          setTrackRef: S,
+          onScroll: h,
+          canScrollLeft: r.value,
+          canScrollRight: i.value
+        }),
+        e.controls ? (v(), L("ul", {
+          key: 0,
+          class: o([`${e.namespace}__controls`, e.controlsClass])
+        }, [
+          s("li", {
+            class: o([`${e.namespace}__controls-item`, `${e.namespace}__controls-item--previous`, { [`${e.namespace}__controls-item--disabled`]: !r.value }])
+          }, [
+            s("button", {
+              class: o([`${e.namespace}__control-button`, `${e.namespace}__control-button--previous`, ...e.buttonClasses]),
+              "aria-label": "Scroll Left",
+              "aria-controls": e.trackId,
+              onClick: $,
+              disabled: !r.value
+            }, [
+              f(t.$slots, "previous", {}, () => [
+                l[0] || (l[0] = s("span", { class: "hidden-visually" }, "Previous", -1)),
+                b(y, {
+                  icon: e.iconClassPrevious,
+                  class: o(`${e.namespace}__control-icon`)
+                }, null, 8, ["icon", "class"])
+              ])
+            ], 10, E)
+          ], 2),
+          s("li", {
+            class: o([`${e.namespace}__controls-item`, `${e.namespace}__controls-item--next`, { [`${e.namespace}__controls-item--disabled`]: !i.value }])
+          }, [
+            s("button", {
+              class: o([`${e.namespace}__control-button`, `${e.namespace}__control-button--next`, ...e.buttonClasses]),
+              "aria-label": "Scroll Right",
+              "aria-controls": e.trackId,
+              onClick: C,
+              disabled: !i.value
+            }, [
+              f(t.$slots, "next", {}, () => [
+                l[1] || (l[1] = s("span", { class: "hidden-visually" }, "Next", -1)),
+                b(y, {
+                  icon: e.iconClassNext,
+                  class: o(`${e.namespace}__control-icon`)
+                }, null, 8, ["icon", "class"])
+              ])
+            ], 10, A)
+          ], 2)
+        ], 2)) : R("", !0)
+      ]),
+      _: 3
+    }));
+  }
+};
+export {
+  P as default
+};

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

@@ -0,0 +1,38 @@
+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<{}, {
+    items: unknown[];
+    controls: boolean;
+    scrollAmount: string | number;
+    scrollBehavior: string;
+    emptySlides: boolean;
+    observerOptions: Record<string, any>;
+    modifiers?: string | unknown[] | undefined;
+    $props: {
+        readonly items?: unknown[] | undefined;
+        readonly controls?: boolean | undefined;
+        readonly scrollAmount?: string | number | undefined;
+        readonly scrollBehavior?: string | undefined;
+        readonly emptySlides?: boolean | undefined;
+        readonly observerOptions?: Record<string, any> | undefined;
+        readonly modifiers?: string | unknown[] | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        slide?(_: {
+            item: unknown;
+            index: number;
+            isIntersecting: boolean;
+        }): any;
+        previous?(_: {}): any;
+        next?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+//# sourceMappingURL=UluScrollSlider.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UluScrollSlider.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluScrollSlider.vue"],"names":[],"mappings":"AA6CA;wBAqYqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;sPAQG"}

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

@@ -0,0 +1,146 @@
+import { ref as f, onMounted as g, nextTick as A, onBeforeUnmount as $, createElementBlock as i, openBlock as n, normalizeClass as C, unref as m, createVNode as x, createSlots as E, withCtx as v, createElementVNode as k, createCommentVNode as S, Fragment as N, renderList as O, renderSlot as p } from "vue";
+import { useModifiers as w } from "../../composables/useModifiers.js";
+import { newId as M } from "../../utils/dom.js";
+import R from "./UluOverflowScroller.vue.js";
+const V = { class: "scroll-slider__track-crop" }, U = ["id", "onScroll"], j = {
+  key: 0,
+  class: "scroll-slider__slide scroll-slider__slide--empty",
+  role: "presentation"
+}, q = {
+  key: 1,
+  class: "scroll-slider__slide scroll-slider__slide--empty",
+  role: "presentation"
+}, D = {
+  __name: "UluScrollSlider",
+  props: {
+    /**
+     * Array of items to render.
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Show previous/next controls.
+     */
+    controls: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Scroll amount (in pixels) for the next/prev buttons.
+     * If not provided, it defaults to the visible width of the track.
+     */
+    scrollAmount: {
+      type: [Number, String],
+      default: "auto"
+    },
+    /**
+     * Scroll behavior ('smooth' or 'auto').
+     */
+    scrollBehavior: {
+      type: String,
+      default: "smooth"
+    },
+    /**
+     * Include empty start and end slides (needed for correct margin collapsing with some styles).
+     */
+    emptySlides: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Options passed to the IntersectionObserver (determines when a slide is considered "intersecting").
+     */
+    observerOptions: {
+      type: Object,
+      default: () => ({ threshold: 0.1 })
+    },
+    /**
+     * Base class modifiers.
+     */
+    modifiers: [String, Array]
+  },
+  setup(l) {
+    const _ = l, { resolvedModifiers: B } = w({ props: _, baseClass: "scroll-slider" }), y = M("ulu-scroll-slider-track"), h = f(null), u = f([]), r = f([]);
+    let c = null;
+    const I = (e, o) => {
+      e && (u.value[o] = e);
+    };
+    return g(() => {
+      A(() => {
+        c = new IntersectionObserver((e) => {
+          e.forEach((o) => {
+            const s = u.value.findIndex((t) => t === o.target);
+            s > -1 && (o.isIntersecting ? r.value.includes(s) || r.value.push(s) : r.value = r.value.filter((t) => t !== s));
+          });
+        }, {
+          ..._.observerOptions,
+          root: h.value
+        }), u.value.forEach((e) => {
+          e && c.observe(e);
+        });
+      });
+    }), $(() => {
+      c && c.disconnect();
+    }), (e, o) => (n(), i("div", {
+      class: C(["scroll-slider", m(B)])
+    }, [
+      x(R, {
+        class: "scroll-slider__control-context",
+        controlsClass: "scroll-slider__controls",
+        controls: l.controls,
+        scrollAmount: l.scrollAmount,
+        scrollBehavior: l.scrollBehavior,
+        trackId: m(y)
+      }, E({
+        default: v(({ setTrackRef: s, onScroll: t }) => [
+          k("div", V, [
+            k("ul", {
+              class: "scroll-slider__track",
+              id: m(y),
+              ref: (d) => {
+                h.value = d, s(d);
+              },
+              onScroll: t
+            }, [
+              l.emptySlides ? (n(), i("li", j, " ")) : S("", !0),
+              (n(!0), i(N, null, O(l.items, (d, a) => (n(), i("li", {
+                key: a,
+                class: "scroll-slider__slide",
+                ref_for: !0,
+                ref: (b) => I(b, a)
+              }, [
+                p(e.$slots, "slide", {
+                  item: d,
+                  index: a,
+                  isIntersecting: r.value.includes(a)
+                })
+              ]))), 128)),
+              l.emptySlides ? (n(), i("li", q, " ")) : S("", !0)
+            ], 40, U)
+          ])
+        ]),
+        _: 2
+      }, [
+        e.$slots.previous ? {
+          name: "previous",
+          fn: v(() => [
+            p(e.$slots, "previous")
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.next ? {
+          name: "next",
+          fn: v(() => [
+            p(e.$slots, "next")
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["controls", "scrollAmount", "scrollBehavior", "trackId"])
+    ], 2));
+  }
+};
+export {
+  D as default
+};

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

@@ -0,0 +1,57 @@
+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<{}, {
+    $emit: (event: "change", ...args: any[]) => void;
+    duration: number;
+    transition: string;
+    items: unknown[];
+    nav: boolean;
+    controls: boolean;
+    timingFunction: string;
+    loop: boolean;
+    autoplay: number;
+    reduceMotionFallback: boolean;
+    focusOptions: Record<string, any>;
+    modifiers?: string | unknown[] | undefined;
+    $props: {
+        readonly duration?: number | undefined;
+        readonly transition?: string | undefined;
+        readonly items?: unknown[] | undefined;
+        readonly nav?: boolean | undefined;
+        readonly controls?: boolean | undefined;
+        readonly timingFunction?: string | undefined;
+        readonly loop?: boolean | undefined;
+        readonly autoplay?: number | undefined;
+        readonly reduceMotionFallback?: boolean | undefined;
+        readonly focusOptions?: Record<string, any> | undefined;
+        readonly modifiers?: string | unknown[] | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    trackRef: HTMLUListElement;
+}, HTMLDivElement>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        slide?(_: {
+            item: unknown;
+            index: number;
+            active: boolean;
+            upcoming: boolean;
+        }): any;
+        previous?(_: {}): any;
+        next?(_: {}): any;
+        nav?(_: {
+            item: unknown;
+            index: number;
+            active: boolean;
+        }): any;
+    };
+    refs: {
+        trackRef: HTMLUListElement;
+    };
+    rootEl: HTMLDivElement;
+};
+//# sourceMappingURL=UluSlider.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UluSlider.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluSlider.vue"],"names":[],"mappings":"AAiGA;wBAwjCqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAUG"}