@kiva/kv-components 6.19.3 → 6.20.0

package/dist/vue/KvAtbModal.css

@@ -0,0 +1 @@
+@media (min-width: 45.875rem){.cart-modal[data-v-c974cd2d] div.container{right:var(--modal-right)!important;top:var(--modal-top)!important}}

package/dist/vue/KvAtbModal.js

@@ -1,11 +1,12 @@
 import { toRefs as N, ref as j, computed as C, onMounted as V, onUnmounted as F, resolveComponent as E, openBlock as u, createBlock as O, normalizeStyle as z, withCtx as B, createElementBlock as m, createVNode as D, createElementVNode as e, normalizeClass as R, toDisplayString as T, createCommentVNode as k } from "vue";
-import { throttle as U } from "../utils/throttle.js";
-import I from "./KvCartModal.js";
+import { throttle as I } from "../utils/throttle.js";
+import U from "./KvCartModal.js";
 import G from "./KvCartPill.js";
+import "./KvAtbModal.css";
 import W from "../_virtual/_plugin-vue_export-helper.js";
 const Y = {
   components: {
-    KvCartModal: I,
+    KvCartModal: U,
     KvCartPill: G
   },
   props: {
@@ -145,7 +146,7 @@ const Y = {
       s || (a = [...document.querySelectorAll('[data-testid="header-about"]')], s = a.find((L) => L == null ? void 0 : L.clientHeight));
       const r = (s == null ? void 0 : s.getBoundingClientRect()) ?? null;
       r && (r == null ? void 0 : r.right) !== f.value && (f.value = r == null ? void 0 : r.right), o && (o == null ? void 0 : o.bottom) !== w.value && (w.value = o == null ? void 0 : o.bottom);
-    }, h = U(x, 100);
+    }, h = I(x, 100);
     return V(() => {
       x(), window.addEventListener("scroll", h), window.addEventListener("resize", h);
     }), F(() => {
@@ -386,7 +387,7 @@ function e1(g, i, n, l, M, y) {
     _: 1
   }, 8, ["style", "visible", "photo-path", "basket-count", "category-name", "onCartModalClosed"])) : k("", !0);
 }
-const a1 = /* @__PURE__ */ W(Y, [["render", e1]]);
+const i1 = /* @__PURE__ */ W(Y, [["render", e1], ["__scopeId", "data-v-c974cd2d"]]);
 export {
-  a1 as default
+  i1 as default
 };

package/dist/vue/KvSideSheet.js

@@ -1,10 +1,10 @@
-import { toRefs as U, ref as w, reactive as A, computed as G, onMounted as D, onUnmounted as T, watch as j, resolveComponent as I, openBlock as v, createElementBlock as m, normalizeClass as y, withModifiers as q, createElementVNode as s, normalizeStyle as O, createVNode as C, createCommentVNode as g, toDisplayString as J, renderSlot as V, nextTick as P } from "vue";
-import { mdiArrowLeft as Q, mdiClose as W, mdiExportVariant as X } from "@mdi/js";
-import Y from "./KvMaterialIcon.js";
-import Z from "../_virtual/_plugin-vue_export-helper.js";
-const $ = {
+import { toRefs as J, ref as w, reactive as P, computed as I, onMounted as Q, onUnmounted as E, watch as R, resolveComponent as W, openBlock as g, createElementBlock as p, normalizeClass as k, withModifiers as X, createElementVNode as c, normalizeStyle as H, createVNode as z, createCommentVNode as x, toDisplayString as Y, renderSlot as N, nextTick as Z } from "vue";
+import { mdiArrowLeft as $, mdiClose as ee, mdiExportVariant as te } from "@mdi/js";
+import oe from "./KvMaterialIcon.js";
+import ie from "../_virtual/_plugin-vue_export-helper.js";
+const ne = {
   components: {
-    KvMaterialIcon: Y
+    KvMaterialIcon: oe
   },
   props: {
     /**
@@ -62,208 +62,267 @@ const $ = {
     headline: {
       type: String,
       default: ""
+    },
+    /**
+     * The CSS width of the SideSheet, either as a string (e.g., '33.33%') or an object with
+     * breakpoint-specific widths (e.g., { default: '100%', lg: '50%' }). Supports responsive
+     * design with breakpoints: default, sm, md, lg, xl, 2xl
+     * */
+    widthDimensions: {
+      type: [String, Object],
+      default: () => ({ default: "100%", md: "50%" }),
+      validator: (l) => typeof l == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(l) : typeof l == "object" ? Object.keys(l).every((s) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(s) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(l[s])) : !1
     }
   },
   emits: ["side-sheet-closed", "go-to-link"],
-  setup(c, { emit: l, slots: n }) {
+  setup(l, { emit: s, slots: a }) {
     const {
-      visible: e,
-      kvTrackFunction: E,
-      trackEventCategory: L,
-      animationSourceElement: r
-    } = U(c), i = w(!1), S = w({}), u = w({}), h = w(null), f = w(null), R = w(window.innerHeight), d = A({
+      visible: t,
+      kvTrackFunction: _,
+      trackEventCategory: K,
+      animationSourceElement: u,
+      widthDimensions: i
+    } = J(l), d = w(!1), b = w({}), f = w({}), T = w(null), m = w(null), v = w(null), V = w(window.innerHeight), h = P({
       headline: 0,
       controls: 0
-    }), M = G(() => {
-      const t = R.value - d.headline - d.controls;
-      return Math.max(t, 0);
-    }), F = (t, a) => {
+    }), U = I(() => {
+      const e = V.value - h.headline - h.controls;
+      return Math.max(e, 0);
+    }), A = (e, n) => {
       let o;
-      return (...b) => {
-        clearTimeout(o), o = setTimeout(() => t(...b), a);
+      return (...y) => {
+        clearTimeout(o), o = setTimeout(() => e(...y), n);
       };
-    }, p = () => {
-      R.value = window.innerHeight, setTimeout(() => {
-        P(() => {
-          var t;
-          if (f.value) {
-            const a = f.value.getBoundingClientRect();
-            d.headline = a.height;
+    }, S = () => {
+      V.value = window.innerHeight, setTimeout(() => {
+        Z(() => {
+          var e;
+          if (v.value) {
+            const n = v.value.getBoundingClientRect();
+            h.headline = n.height;
           } else
-            d.headline = 0;
-          if ((t = n.controls) != null && t.call(n) && h.value) {
-            const a = h.value.getBoundingClientRect();
-            d.controls = a.height;
+            h.headline = 0;
+          if ((e = a.controls) != null && e.call(a) && m.value) {
+            const n = m.value.getBoundingClientRect();
+            h.controls = n.height;
           } else
-            d.controls = 0;
+            h.controls = 0;
         });
       }, 300);
-    }, k = F(p, 100), x = () => {
-      const t = "tw-overflow-hidden";
-      i.value ? document.body.classList.add(t) : document.body.classList.remove(t);
-    }, H = () => {
-      i.value = !1, x(), E.value(L.value, "click", "side-sheet-closed"), r.value && (u.value = {
-        ...S.value,
+    }, B = A(S, 100), L = () => {
+      const e = "tw-overflow-hidden";
+      d.value ? document.body.classList.add(e) : document.body.classList.remove(e);
+    }, M = () => {
+      d.value = !1, L(), _.value(K.value, "click", "side-sheet-closed"), u.value && (f.value = {
+        ...b.value,
         transition: "all 0.5s ease-in-out"
       }), setTimeout(() => {
-        l("side-sheet-closed");
-      }, 700), document.removeEventListener("keyup", B);
-    }, K = () => {
-      l("go-to-link");
-    }, B = (t) => {
-      (t == null ? void 0 : t.key) === "Escape" && H();
+        s("side-sheet-closed");
+      }, 700), document.removeEventListener("keyup", j);
+    }, G = () => {
+      s("go-to-link");
+    }, j = (e) => {
+      (e == null ? void 0 : e.key) === "Escape" && M();
     };
-    return D(() => {
+    Q(() => {
       if (setTimeout(() => {
-        p();
-      }, 100), h.value) {
-        const t = new ResizeObserver(k);
-        t.observe(h.value), T(() => t.disconnect());
+        S();
+      }, 100), m.value) {
+        const e = new ResizeObserver(B);
+        e.observe(m.value), E(() => e.disconnect());
       }
-      if (f.value) {
-        const t = new ResizeObserver(k);
-        t.observe(f.value), T(() => t.disconnect());
+      if (v.value) {
+        const e = new ResizeObserver(B);
+        e.observe(v.value), E(() => e.disconnect());
       }
-      window.addEventListener("resize", k), T(() => window.removeEventListener("resize", k));
-    }), j(() => {
-      var t;
-      return (t = n.controls) == null ? void 0 : t.call(n);
+      window.addEventListener("resize", B), E(() => window.removeEventListener("resize", B));
+    }), R(() => {
+      var e;
+      return (e = a.controls) == null ? void 0 : e.call(a);
     }, () => {
       setTimeout(() => {
-        p();
+        S();
       }, 100);
-    }, { deep: !0, immediate: !0 }), j(e, (t) => {
-      var a;
-      if (t) {
-        document.addEventListener("keyup", B), setTimeout(() => {
-          i.value = !0, x(), p();
+    }, { deep: !0, immediate: !0 });
+    const q = I(() => {
+      if (!d.value)
+        return {};
+      if (typeof i.value == "string")
+        return { width: i.value };
+      const n = ["sm", "md", "lg", "xl", "2xl"].find((o) => i.value[o]);
+      return { width: i.value[n] || i.value.default || "100%" };
+    });
+    R([t, i], ([e]) => {
+      var n;
+      if (e) {
+        document.addEventListener("keyup", j), setTimeout(() => {
+          d.value = !0, L(), S();
         }, 100);
-        const o = (a = r.value) == null ? void 0 : a.getBoundingClientRect(), b = (o == null ? void 0 : o.top) ?? 0, N = (o == null ? void 0 : o.left) ?? 0, z = (o == null ? void 0 : o.width) ?? 0, _ = (o == null ? void 0 : o.height) ?? 0;
-        b || N || z || _ ? (S.value = {
+        const o = (n = u.value) == null ? void 0 : n.getBoundingClientRect(), y = (o == null ? void 0 : o.top) ?? 0, O = (o == null ? void 0 : o.left) ?? 0, r = (o == null ? void 0 : o.width) ?? 0, C = (o == null ? void 0 : o.height) ?? 0;
+        y || O || r || C ? (b.value = {
           position: "fixed",
-          top: `${b}px`,
-          width: `${z}px`,
-          height: `${_}px`
-        }, u.value = {
-          ...S.value,
+          top: `${y}px`,
+          width: `${r}px`,
+          height: `${C}px`
+        }, f.value = {
+          ...b.value,
           transition: "none"
         }, setTimeout(() => {
-          u.value = {
+          f.value = {
             top: "0",
-            width: "100%",
             height: "100%",
             transition: "all 0.5s ease-in-out"
           };
-        }, 10)) : u.value = {};
+        }, 10)) : f.value = {
+          height: "100%"
+        };
       } else
-        i.value = !1, x(), document.removeEventListener("keyup", B);
+        d.value = !1, L(), document.removeEventListener("keyup", j), f.value = u.value ? {
+          ...b.value,
+          transition: "all 0.5s ease-in-out"
+        } : {};
+    });
+    const D = () => {
+      if (typeof i.value == "object" && T.value) {
+        const e = "side-sheet-styles";
+        let n = document.getElementById(e);
+        n || (n = document.createElement("style"), n.id = e, document.head.appendChild(n));
+        const o = {
+          sm: "640px",
+          md: "768px",
+          lg: "1024px",
+          xl: "1280px",
+          "2xl": "1536px"
+        }, O = Object.keys(i.value).filter((r) => r !== "default").sort((r, C) => {
+          const F = ["sm", "md", "lg", "xl", "2xl"];
+          return F.indexOf(r) - F.indexOf(C);
+        }).map((r) => `
+						@media (min-width: ${o[r]}) {
+							#side-sheet-${l.trackEventCategory || "default"} {
+								width: ${i.value[r]} !important;
+							}
+						}
+					`).join("");
+        n.textContent = O, T.value.id = `side-sheet-${l.trackEventCategory || "default"}`, E(() => {
+          n && n.remove();
+        });
+      }
+    };
+    return R(i, () => {
+      d.value && D();
+    }, { immediate: !0 }), R(d, (e) => {
+      e && D();
     }), {
-      closeSideSheet: H,
-      contentHeight: M,
-      controlsRef: h,
-      headlineRef: f,
-      goToLink: K,
-      mdiArrowLeft: Q,
-      mdiClose: W,
-      mdiExportVariant: X,
-      modalStyles: u,
-      open: i
+      closeSideSheet: M,
+      contentHeight: U,
+      controlsRef: m,
+      headlineRef: v,
+      sideSheetRef: T,
+      sideSheetStyles: q,
+      goToLink: G,
+      mdiArrowLeft: $,
+      mdiClose: ee,
+      mdiExportVariant: te,
+      modalStyles: f,
+      open: d
     };
   }
-}, ee = { class: "tw-flex tw-gap-1.5" }, te = { key: 1 }, oe = { class: "tw-flex tw-gap-1.5" };
-function ne(c, l, n, e, E, L) {
-  const r = I("kv-material-icon");
-  return n.visible ? (v(), m("div", {
+}, le = { class: "tw-flex tw-gap-1.5" }, se = { key: 1 }, ae = { class: "tw-flex tw-gap-1.5" };
+function re(l, s, a, t, _, K) {
+  const u = W("kv-material-icon");
+  return a.visible ? (g(), p("div", {
     key: 0,
-    class: y(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
-      "tw-bg-opacity-0 tw-delay-300": !e.open,
-      "tw-bg-opacity-low": e.open
+    class: k(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
+      "tw-bg-opacity-0 tw-delay-300": !t.open,
+      "tw-bg-opacity-low": t.open
     }]),
-    onClick: l[3] || (l[3] = q((...i) => e.closeSideSheet && e.closeSideSheet(...i), ["self"]))
+    onClick: s[3] || (s[3] = X((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
   }, [
-    s("div", {
-      class: y(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
-        "tw-w-0 tw-delay-200 tw-opacity-0": !e.open,
-        "lg:tw-w-1/2 tw-w-full tw-opacity-full": e.open,
-        "tw-h-full": c.$slots.controls
-      }])
+    c("div", {
+      ref: "sideSheetRef",
+      class: k(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
+        "tw-w-0 tw-delay-200 tw-opacity-0": !t.open,
+        "tw-opacity-full": t.open,
+        "tw-h-full": l.$slots.controls
+      }]),
+      style: H(t.sideSheetStyles)
     }, [
-      s("div", {
+      c("div", {
         class: "tw-flex tw-flex-col tw-h-full",
-        style: O(e.modalStyles)
+        style: H(t.modalStyles)
       }, [
-        s("div", {
+        c("div", {
           ref: "headlineRef",
-          class: y(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200 tw-px-3 tw-py-2 tw-border-tertiary", {
-            "tw-opacity-0": !e.open,
-            "tw-opacity-full": e.open,
-            "tw-border-b": n.showHeadlineBorder
+          class: k(["tw-flex tw-justify-between tw-transition-opacity tw-duration-200 tw-px-3 tw-py-2 tw-border-tertiary", {
+            "tw-opacity-0": !t.open,
+            "tw-opacity-full": t.open,
+            "tw-border-b": a.showHeadlineBorder
           }])
         }, [
-          s("div", ee, [
-            n.showBackButton ? (v(), m("button", {
+          c("div", le, [
+            a.showBackButton ? (g(), p("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: l[0] || (l[0] = (...i) => e.closeSideSheet && e.closeSideSheet(...i))
+              onClick: s[0] || (s[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
             }, [
-              C(r, {
+              z(u, {
                 class: "tw-w-3 tw-h-3",
-                icon: e.mdiArrowLeft
+                icon: t.mdiArrowLeft
               }, null, 8, ["icon"])
-            ])) : g("", !0),
-            n.headline ? (v(), m("h2", te, J(n.headline), 1)) : g("", !0)
+            ])) : x("", !0),
+            a.headline ? (g(), p("h2", se, Y(a.headline), 1)) : x("", !0)
           ]),
-          s("div", oe, [
-            n.showGoToLink ? (v(), m("button", {
+          c("div", ae, [
+            a.showGoToLink ? (g(), p("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: l[1] || (l[1] = (...i) => e.goToLink && e.goToLink(...i))
+              onClick: s[1] || (s[1] = (...i) => t.goToLink && t.goToLink(...i))
             }, [
-              C(r, {
+              z(u, {
                 class: "tw-w-3 tw-h-3",
-                icon: e.mdiExportVariant
+                icon: t.mdiExportVariant
               }, null, 8, ["icon"])
-            ])) : g("", !0),
-            s("button", {
+            ])) : x("", !0),
+            c("button", {
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: l[2] || (l[2] = (...i) => e.closeSideSheet && e.closeSideSheet(...i))
+              onClick: s[2] || (s[2] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
             }, [
-              C(r, {
+              z(u, {
                 class: "tw-w-3 tw-h-3",
-                icon: e.mdiClose
+                icon: t.mdiClose
               }, null, 8, ["icon"])
             ])
           ])
         ], 2),
-        s("div", {
+        c("div", {
           class: "tw-overflow-y-auto tw-overscroll-y-contain",
-          style: O({ height: e.contentHeight + "px" })
+          style: H({ height: t.contentHeight + "px" })
         }, [
-          s("div", {
-            class: y(["tw-p-2 tw-transition-opacity tw-duration-500 tw-delay-200", {
-              "tw-opacity-0": !e.open,
-              "tw-opacity-full": e.open
+          c("div", {
+            class: k(["tw-p-2 tw-transition-opacity tw-duration-200", {
+              "tw-opacity-0": !t.open,
+              "tw-opacity-full": t.open
             }])
           }, [
-            V(c.$slots, "default")
+            N(l.$slots, "default")
           ], 2)
         ], 4),
-        c.$slots.controls ? (v(), m("div", {
+        l.$slots.controls ? (g(), p("div", {
           key: 0,
           ref: "controlsRef",
-          class: y(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white", {
-            "tw-opacity-0": !e.open,
-            "tw-opacity-full": e.open
+          class: k(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white tw-transition-opacity tw-duration-200", {
+            "tw-opacity-0": !t.open,
+            "tw-opacity-full": t.open
           }]),
           style: { "z-index": "999" }
         }, [
-          V(c.$slots, "controls")
-        ], 2)) : g("", !0)
+          N(l.$slots, "controls")
+        ], 2)) : x("", !0)
       ], 4)
-    ], 2)
-  ], 2)) : g("", !0);
+    ], 6)
+  ], 2)) : x("", !0);
 }
-const ce = /* @__PURE__ */ Z($, [["render", ne]]);
+const fe = /* @__PURE__ */ ie(ne, [["render", re]]);
 export {
-  ce as default
+  fe as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.19.3",
+  "version": "6.20.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "598d31555546dd2c068cc2e2e0a86fe6b945619a"
+  "gitHead": "679a1245a2f841c23eaabfd75403bd128b375774"
 }