@kiva/kv-components 7.6.3 → 8.0.1

package/dist/vue/KvSideSheet.js

@@ -1,324 +1,106 @@
-import { toRefs as X, ref as d, reactive as Y, computed as j, watch as g, onMounted as Z, onBeforeUnmount as $, onUnmounted as ee, resolveComponent as te, openBlock as p, createElementBlock as k, normalizeClass as b, withModifiers as ne, createElementVNode as w, normalizeStyle as H, createVNode as z, createCommentVNode as x, toDisplayString as oe, renderSlot as F, nextTick as ie } from "vue";
-import { mdiArrowLeft as le, mdiClose as ae, mdiOpenInNew as se } from "@mdi/js";
-import de from "./KvMaterialIcon.js";
-import re from "../_virtual/_plugin-vue_export-helper.js";
-const ce = {
-  name: "KvSideSheet",
-  components: {
-    KvMaterialIcon: de
-  },
-  props: {
-    /**
-     * Whether the side sheet is open or not
-     * */
-    visible: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Show the back button
-     * */
-    showBackButton: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Show the go to link button
-     * */
-    showGoToLink: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Show the border of the headline section
-     * */
-    showHeadlineBorder: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Tracking event function
-     * */
-    kvTrackFunction: {
-      type: Function,
-      default: () => ({})
-    },
-    /**
-     * Tracking event category
-     * */
-    trackEventCategory: {
-      type: String,
-      default: ""
-    },
-    /**
-     * The headline of the side sheet
-     * */
-    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: (n) => typeof n == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n) : typeof n == "object" ? Object.keys(n).every((o) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(o) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n[o])) : !1
-    },
-    /**
-     * Whether to hide the background of the headline section on mobile (e.g., in Borrower Profile Sidesheet)
-     * */
-    hideHeadlineBgOnMobile: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Whether to animate the opening of the side sheet
-     * */
-    isAnimated: {
-      type: Boolean,
-      default: !0
-    }
-  },
-  emits: ["side-sheet-closed", "go-to-link"],
-  setup(n, { emit: o, slots: i }) {
-    const {
-      visible: t,
-      kvTrackFunction: M,
-      trackEventCategory: I,
-      widthDimensions: l,
-      hideHeadlineBgOnMobile: r,
-      isAnimated: V
-    } = X(n), c = d(!V.value), s = d({}), O = d(null), m = d(null), y = d(null), _ = d(null), N = d(null), S = d(null), B = d(null), W = d("100vh"), v = Y({
-      headline: 0,
-      controls: 0
-    }), G = j(() => {
-      const e = _.value - (r.value ? 0 : v.headline) - v.controls;
-      return Math.max(e, 0);
-    }), A = j(() => {
-      if (typeof l.value == "string")
-        return l.value;
-      const e = {
-        sm: 640,
-        md: 768,
-        lg: 1024,
-        xl: 1280,
-        "2xl": 1536
-      }, a = N.value || (typeof window < "u" ? window.innerWidth : 0), f = Object.keys(l.value).filter((u) => u !== "default").sort((u, R) => e[R] - e[u]).find((u) => a >= e[u]);
-      return f ? l.value[f] : l.value.default || "100%";
-    }), q = (e, a) => {
-      let f;
-      return (...u) => {
-        clearTimeout(f), f = setTimeout(() => e(...u), a);
-      };
-    }, C = () => {
-      _.value = typeof window < "u" ? window.innerHeight : 0, N.value = typeof window < "u" ? window.innerWidth : 0, setTimeout(() => {
-        ie(() => {
-          var e;
-          if (y.value) {
-            const a = y.value.getBoundingClientRect();
-            v.headline = a.height;
-          } else
-            v.headline = 0;
-          if ((e = i.controls) != null && e.call(i) && m.value) {
-            const a = m.value.getBoundingClientRect();
-            v.controls = a.height;
-          } else
-            v.controls = 0;
-        });
-      }, 300);
-    }, E = q(C, 100), T = () => {
-      const e = "tw-overflow-hidden";
-      c.value ? document.body.classList.add(e) : document.body.classList.remove(e);
-    }, K = () => {
-      c.value = !1, T(), M.value(I.value, "click", "side-sheet-closed"), setTimeout(() => {
-        o("side-sheet-closed");
-      }, 300), document.removeEventListener("keyup", L);
-    }, J = () => {
-      o("go-to-link");
-    }, L = (e) => {
-      (e == null ? void 0 : e.key) === "Escape" && K();
-    }, P = j(() => ({
-      width: A.value
-    })), U = () => {
-      if (typeof l.value == "object" && O.value) {
-        const e = "side-sheet-styles";
-        let a = document.getElementById(e);
-        a || (a = document.createElement("style"), a.id = e, document.head.appendChild(a));
-        const f = {
-          sm: "640px",
-          md: "768px",
-          lg: "1024px",
-          xl: "1280px",
-          "2xl": "1536px"
-        }, R = Object.keys(l.value).filter((h) => h !== "default").sort((h, Q) => {
-          const D = ["sm", "md", "lg", "xl", "2xl"];
-          return D.indexOf(h) - D.indexOf(Q);
-        }).map((h) => `
-						@media (min-width: ${f[h]}) {
-							#side-sheet-${n.trackEventCategory || "default"} {
-								width: ${l.value[h]} !important;
-							}
-						}
-					`).join("");
-        a.textContent = R, O.value.id = `side-sheet-${n.trackEventCategory || "default"}`;
-      }
-    };
-    return g(t, (e) => {
-      typeof window < "u" && (e ? (document.addEventListener("keyup", L), s.value = {}, setTimeout(() => {
-        c.value = !0, T(), C();
-      }, 10)) : (c.value = !1, T(), document.removeEventListener("keyup", L), s.value = {}));
-    }, { immediate: !0 }), g(() => {
-      var e;
-      return (e = i.controls) == null ? void 0 : e.call(i);
-    }, () => {
-      setTimeout(() => {
-        C();
-      }, 100);
-    }, { deep: !0 }), g(A, (e) => {
-      c.value && t.value && s.value && Object.keys(s.value).length > 0 && (s.value = {
-        ...s.value,
-        width: e,
-        transition: "none"
-        // No animation for resize
-      }, setTimeout(() => {
-        s.value && Object.keys(s.value).length > 0 && (s.value = {
-          ...s.value,
-          transition: "all 0.3s ease-in-out"
-        });
-      }, 50));
-    }), g(l, () => {
-      c.value && U();
-    }, { immediate: !0 }), g(c, (e) => {
-      e && U();
-    }), Z(() => {
-      W.value = "auto", setTimeout(() => {
-        C();
-      }, 100), m.value && (S.value = new ResizeObserver(E), S.value.observe(m.value)), y.value && (B.value = new ResizeObserver(E), B.value.observe(y.value)), window.addEventListener("resize", E);
-    }), $(() => {
-      c.value && document.body.classList.remove("tw-overflow-hidden");
-    }), ee(() => {
-      S.value && S.value.disconnect(), B.value && B.value.disconnect(), window.removeEventListener("resize", E);
-      const e = document.getElementById("side-sheet-styles");
-      e && e.remove();
-    }), {
-      closeSideSheet: K,
-      contentHeight: G,
-      controlsRef: m,
-      headlineRef: y,
-      sideSheetRef: O,
-      sideSheetStyles: P,
-      goToLink: J,
-      mdiArrowLeft: le,
-      mdiClose: ae,
-      mdiOpenInNew: se,
-      modalStyles: s,
-      open: c,
-      loadingContentMinHeight: W
-    };
-  }
-}, ue = { class: "tw-flex tw-gap-1.5" }, we = { key: 1 }, fe = { class: "tw-flex tw-gap-1.5" };
-function ve(n, o, i, t, M, I) {
-  const l = te("kv-material-icon");
-  return i.visible ? (p(), k("div", {
+import y from "./KvSideSheet2.js";
+import { resolveComponent as m, openBlock as n, createElementBlock as w, normalizeClass as r, withModifiers as g, createElementVNode as o, normalizeStyle as d, createVNode as f, createCommentVNode as a, toDisplayString as S, renderSlot as h } from "vue";
+import b from "../_virtual/_plugin-vue_export-helper.js";
+const k = { class: "tw-flex tw-gap-1.5" }, v = { key: 1 }, x = { class: "tw-flex tw-gap-1.5" };
+function u(s, e, l, t, C, _) {
+  const c = m("kv-material-icon");
+  return l.visible ? (n(), w("div", {
     key: 0,
-    class: b(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
+    class: r(["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: o[3] || (o[3] = ne((...r) => t.closeSideSheet && t.closeSideSheet(...r), ["self"]))
+    onClick: e[3] || (e[3] = g((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
   }, [
-    w("div", {
+    o("div", {
       ref: "sideSheetRef",
-      class: b(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white", {
+      class: r(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white", {
         "tw-translate-x-full": !t.open,
         "tw-translate-x-0": t.open,
-        "tw-h-full": n.$slots.controls
+        "tw-h-full": s.$slots.controls
       }]),
-      style: H(t.sideSheetStyles)
+      style: d(t.sideSheetStyles)
     }, [
-      w("div", {
+      o("div", {
         class: "tw-flex tw-flex-col tw-h-full",
-        style: H(t.modalStyles)
+        style: d(t.modalStyles)
       }, [
-        w("div", {
+        o("div", {
           ref: "headlineRef",
-          class: b(["tw-flex tw-justify-between tw-transition-opacity tw-duration-200 tw-px-3 tw-py-2 tw-border-tertiary tw-gap-1.5", {
+          class: r(["tw-flex tw-justify-between tw-transition-opacity tw-duration-200 tw-px-3 tw-py-2 tw-border-tertiary tw-gap-1.5", {
             "tw-opacity-0": !t.open,
             "tw-opacity-full": t.open,
-            "tw-border-b": i.showHeadlineBorder
+            "tw-border-b": l.showHeadlineBorder
           }])
         }, [
-          w("div", ue, [
-            i.showBackButton ? (p(), k("button", {
+          o("div", k, [
+            l.showBackButton ? (n(), w("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: o[0] || (o[0] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
+              onClick: e[0] || (e[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
             }, [
-              z(l, {
+              f(c, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiArrowLeft
               }, null, 8, ["icon"])
-            ])) : x("", !0),
-            i.headline ? (p(), k("h3", we, oe(i.headline), 1)) : x("", !0)
+            ])) : a("", !0),
+            l.headline ? (n(), w("h3", v, S(l.headline), 1)) : a("", !0)
           ]),
-          w("div", fe, [
-            i.showGoToLink ? (p(), k("button", {
+          o("div", x, [
+            l.showGoToLink ? (n(), w("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: o[1] || (o[1] = (...r) => t.goToLink && t.goToLink(...r))
+              onClick: e[1] || (e[1] = (...i) => t.goToLink && t.goToLink(...i))
             }, [
-              z(l, {
+              f(c, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiOpenInNew
               }, null, 8, ["icon"])
-            ])) : x("", !0),
-            w("button", {
+            ])) : a("", !0),
+            o("button", {
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: o[2] || (o[2] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
+              onClick: e[2] || (e[2] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
             }, [
-              z(l, {
+              f(c, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiClose
               }, null, 8, ["icon"])
             ])
           ])
         ], 2),
-        w("div", {
+        o("div", {
           id: "sidesheet-content",
           class: "tw-overflow-y-auto tw-overscroll-y-contain",
-          style: H([
+          style: d([
             { "min-height": t.loadingContentMinHeight },
             { height: t.contentHeight + "px" }
           ])
         }, [
-          w("div", {
-            class: b(["tw-px-2 tw-transition-opacity tw-duration-200", {
+          o("div", {
+            class: r(["tw-px-2 tw-transition-opacity tw-duration-200", {
               "tw-opacity-0": !t.open,
               "tw-opacity-full": t.open
             }])
           }, [
-            F(n.$slots, "default")
+            h(s.$slots, "default")
           ], 2)
         ], 4),
-        n.$slots.controls ? (p(), k("div", {
+        s.$slots.controls ? (n(), w("div", {
           key: 0,
           ref: "controlsRef",
-          class: b(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white tw-transition-opacity tw-duration-200", {
+          class: r(["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" }
         }, [
-          F(n.$slots, "controls")
-        ], 2)) : x("", !0)
+          h(s.$slots, "controls")
+        ], 2)) : a("", !0)
       ], 4)
     ], 6)
-  ], 2)) : x("", !0);
+  ], 2)) : a("", !0);
 }
-const pe = /* @__PURE__ */ re(ce, [["render", ve]]);
+const z = /* @__PURE__ */ b(y, [["render", u]]);
 export {
-  pe as default
+  z as default
 };

package/dist/vue/KvSideSheet.vue.d.ts

@@ -0,0 +1,136 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showBackButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showGoToLink: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showHeadlineBorder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    kvTrackFunction: {
+        type: FunctionConstructor;
+        default: () => {};
+    };
+    trackEventCategory: {
+        type: StringConstructor;
+        default: string;
+    };
+    headline: {
+        type: StringConstructor;
+        default: string;
+    };
+    widthDimensions: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: () => {
+            default: string;
+            md: string;
+        };
+        validator: (value: unknown) => boolean;
+    };
+    hideHeadlineBgOnMobile: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isAnimated: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    closeSideSheet: () => void;
+    contentHeight: import('vue').ComputedRef<number>;
+    controlsRef: import('vue').Ref<any, any>;
+    headlineRef: import('vue').Ref<any, any>;
+    sideSheetRef: import('vue').Ref<any, any>;
+    sideSheetStyles: import('vue').ComputedRef<{
+        width: any;
+    }>;
+    goToLink: () => void;
+    mdiArrowLeft: string;
+    mdiClose: string;
+    mdiOpenInNew: string;
+    modalStyles: import('vue').Ref<{}, {}>;
+    open: import('vue').Ref<boolean, boolean>;
+    loadingContentMinHeight: import('vue').Ref<string, string>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("side-sheet-closed" | "go-to-link")[], "side-sheet-closed" | "go-to-link", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showBackButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showGoToLink: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showHeadlineBorder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    kvTrackFunction: {
+        type: FunctionConstructor;
+        default: () => {};
+    };
+    trackEventCategory: {
+        type: StringConstructor;
+        default: string;
+    };
+    headline: {
+        type: StringConstructor;
+        default: string;
+    };
+    widthDimensions: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: () => {
+            default: string;
+            md: string;
+        };
+        validator: (value: unknown) => boolean;
+    };
+    hideHeadlineBgOnMobile: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isAnimated: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onSide-sheet-closed"?: (...args: any[]) => any;
+    "onGo-to-link"?: (...args: any[]) => any;
+}>, {
+    visible: boolean;
+    kvTrackFunction: Function;
+    trackEventCategory: string;
+    showBackButton: boolean;
+    showGoToLink: boolean;
+    showHeadlineBorder: boolean;
+    headline: string;
+    widthDimensions: string | Record<string, any>;
+    hideHeadlineBgOnMobile: boolean;
+    isAnimated: boolean;
+}, {}, {
+    KvMaterialIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        icon: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        icon: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        icon: string;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;