@bobbykim/mcl-container 0.6.3 → 0.7.0

package/dist/index.d.ts

@@ -110,8 +110,7 @@ export declare const MclContainerB: __VLS_WithTemplateSlots_2<DefineComponent<__
 sectionBgColor?: ColorPalette | undefined;
 containerBgColor?: ColorPalette | undefined;
 imageSource: string;
-imgHeightMobile?: number | undefined;
-imgHeightDesktop?: number | undefined;
+imageAlt: string;
 title: string;
 titleLevel?: HeadingLevel | undefined;
 titleSize?: HeadingSize | undefined;
@@ -119,8 +118,6 @@ titleColor?: ColorPalette | undefined;
 }>, {
 sectionBgColor: string;
 containerBgColor: string;
-imgHeightMobile: number;
-imgHeightDesktop: number;
 titleLevel: string;
 titleSize: string;
 titleColor: string;
@@ -128,8 +125,7 @@ titleColor: string;
 sectionBgColor?: ColorPalette | undefined;
 containerBgColor?: ColorPalette | undefined;
 imageSource: string;
-imgHeightMobile?: number | undefined;
-imgHeightDesktop?: number | undefined;
+imageAlt: string;
 title: string;
 titleLevel?: HeadingLevel | undefined;
 titleSize?: HeadingSize | undefined;
@@ -137,16 +133,12 @@ titleColor?: ColorPalette | undefined;
 }>, {
 sectionBgColor: string;
 containerBgColor: string;
-imgHeightMobile: number;
-imgHeightDesktop: number;
 titleLevel: string;
 titleSize: string;
 titleColor: string;
 }>>>, {
 sectionBgColor: ColorPalette;
 containerBgColor: ColorPalette;
-imgHeightMobile: number;
-imgHeightDesktop: number;
 titleLevel: HeadingLevel;
 titleSize: HeadingSize;
 titleColor: ColorPalette;

package/dist/mcl-container.js

@@ -1,7 +1,7 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".parallax-container[data-v-f3bc2137]{height:var(--container-height-mobile, 256px)}.parallax-image[data-v-f3bc2137]{height:var(--container-height-mobile, 256px);background-image:var(--bg-image);background-position:center top}@media screen and (min-width: 768px){.parallax-container[data-v-f3bc2137],.parallax-image[data-v-f3bc2137]{height:var(--container-height-desktop, 384px)}}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-import { defineComponent as h, useSlots as f, openBlock as p, createElementBlock as d, normalizeClass as i, unref as r, createElementVNode as t, renderSlot as g, createCommentVNode as v, computed as C, resolveComponent as _, normalizeStyle as B, createVNode as b, withCtx as x, pushScopeId as w, popScopeId as y } from "vue";
-import n from "@bobbykim/manguito-theme";
-const L = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, $ = ["points"], H = { class: "container grid md:grid-cols-4 gap-4" }, S = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, k = ["points"], z = /* @__PURE__ */ h({
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".space-hts[data-v-ea9fe6ce]{height:calc(var(--space-height) + 36px)}@media screen and (min-width: 768px){.space-hts[data-v-ea9fe6ce]{height:calc(var(--space-height) + 48px)}}@media screen and (min-width: 1024px){.space-hts[data-v-ea9fe6ce]{height:calc(var(--space-height) + 64px)}}.bg-image[data-v-ea9fe6ce]{background-image:var(--bg-image)}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import { defineComponent as O, useSlots as L, openBlock as w, createElementBlock as y, normalizeClass as p, unref as m, createElementVNode as a, renderSlot as S, createCommentVNode as k, onMounted as R, nextTick as M, getCurrentScope as z, onScopeDispose as G, getCurrentInstance as $, computed as _, ref as B, watch as A, resolveComponent as H, normalizeStyle as E, createVNode as I, withCtx as T } from "vue";
+import u from "@bobbykim/manguito-theme";
+const V = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, D = ["points"], N = { class: "container grid md:grid-cols-4 gap-4" }, F = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, P = ["points"], ce = /* @__PURE__ */ O({
   __name: "MclContainerA",
   props: {
     sectionBg: { default: "light-1" },
@@ -11,12 +11,12 @@ const L = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, $
     twoColumns: { type: Boolean, default: !0 },
     leftColumnWidth: { default: 50 }
   },
-  setup(s) {
-    f();
-    const l = (e, o) => e === "top" ? o === "left" ? "0,0 100,100 0,100" : "100,0 100,100 0,100" : o === "left" ? "0,0 100,0 0,100" : "0,0 100,0 100,100", a = (e, o) => {
-      if (!e)
+  setup(e) {
+    L();
+    const o = (t, i) => t === "top" ? i === "left" ? "0,0 100,100 0,100" : "100,0 100,100 0,100" : i === "left" ? "0,0 100,0 0,100" : "0,0 100,0 100,100", s = (t, i) => {
+      if (!t)
         return "md:col-span-4";
-      switch (o) {
+      switch (i) {
         case 25:
           return "md:col-span-1";
         case 50:
@@ -28,10 +28,10 @@ const L = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, $
         default:
           return "";
       }
-    }, c = (e, o) => {
-      if (!e)
+    }, c = (t, i) => {
+      if (!t)
         return "";
-      switch (o) {
+      switch (i) {
         case 25:
           return "md:col-span-3";
         case 50:
@@ -43,117 +43,227 @@ const L = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, $
           return "";
       }
     };
-    return (e, o) => (p(), d("section", {
-      class: i(["py-lg lg:py-xl", r(n)("BGCOLOR", e.sectionBg)])
+    return (t, i) => (w(), y("section", {
+      class: p(["py-lg lg:py-xl", m(u)("BGCOLOR", t.sectionBg)])
     }, [
-      t("div", L, [
-        (p(), d("svg", {
-          class: i(["block absolute left-0 inset-x-0 h-full w-full", r(n)("SVGFILL", e.containerBg)]),
+      a("div", V, [
+        (w(), y("svg", {
+          class: p(["block absolute left-0 inset-x-0 h-full w-full", m(u)("SVGFILL", t.containerBg)]),
           viewBox: "0 0 100 100",
           preserveAspectRatio: "none",
           "aria-hidden": "true"
         }, [
-          t("polygon", {
-            points: l("top", e.topDirection)
-          }, null, 8, $)
+          a("polygon", {
+            points: o("top", t.topDirection)
+          }, null, 8, D)
         ], 2))
       ]),
-      t("div", {
-        class: i(["py-md md:py-lg lg:py-xl px-sm md:px-md lg:px-lg", r(n)("BGCOLOR", e.containerBg)])
+      a("div", {
+        class: p(["py-md md:py-lg lg:py-xl px-sm md:px-md lg:px-lg", m(u)("BGCOLOR", t.containerBg)])
       }, [
-        t("div", H, [
-          t("div", {
-            class: i(a(e.twoColumns, e.leftColumnWidth))
+        a("div", N, [
+          a("div", {
+            class: p(s(t.twoColumns, t.leftColumnWidth))
           }, [
-            g(e.$slots, "left-column")
+            S(t.$slots, "left-column")
           ], 2),
-          e.twoColumns && e.leftColumnWidth !== 100 ? (p(), d("div", {
+          t.twoColumns && t.leftColumnWidth !== 100 ? (w(), y("div", {
             key: 0,
-            class: i(c(e.twoColumns, e.leftColumnWidth))
+            class: p(c(t.twoColumns, t.leftColumnWidth))
           }, [
-            g(e.$slots, "right-column")
-          ], 2)) : v("", !0)
+            S(t.$slots, "right-column")
+          ], 2)) : k("", !0)
         ])
       ], 2),
-      t("div", S, [
-        (p(), d("svg", {
-          class: i(["block absolute left-0 inset-x-0 h-full w-full", r(n)("SVGFILL", e.containerBg)]),
+      a("div", F, [
+        (w(), y("svg", {
+          class: p(["block absolute left-0 inset-x-0 h-full w-full", m(u)("SVGFILL", t.containerBg)]),
           viewBox: "0 0 100 100",
           preserveAspectRatio: "none",
           "aria-hidden": "true"
         }, [
-          t("polygon", {
-            points: l("bottom", e.bottomDirection)
-          }, null, 8, k)
+          a("polygon", {
+            points: o("bottom", t.bottomDirection)
+          }, null, 8, P)
         ], 2))
       ])
     ], 2));
   }
-}), O = (s) => (w("data-v-f3bc2137"), s = s(), y(), s), M = /* @__PURE__ */ O(() => /* @__PURE__ */ t("div", { class: "absolute parallax-image bg-fixed bg-cover w-full top-0 left-0 bg-no-repeat" }, null, -1)), I = { class: "container relative z-[10] px-xs top-[-48px] md:top-[-96px] max-w-[1140px]" }, R = { class: "w-full" }, D = ["innerHTML"], G = { class: "mt-sm" }, W = /* @__PURE__ */ h({
+});
+function j(e) {
+  return z() ? (G(e), !0) : !1;
+}
+function U(e) {
+  return typeof e == "function" ? e() : m(e);
+}
+const X = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+function q(e) {
+  return $();
+}
+function J(e, o = !0, s) {
+  q() ? R(e, s) : o ? e() : M(e);
+}
+function g(e) {
+  var o;
+  const s = U(e);
+  return (o = s == null ? void 0 : s.$el) != null ? o : s;
+}
+const W = X ? window : void 0;
+function K() {
+  const e = B(!1), o = $();
+  return o && R(() => {
+    e.value = !0;
+  }, o), e;
+}
+function Q(e) {
+  const o = K();
+  return _(() => (o.value, !!e()));
+}
+function Y(e, o, s = {}) {
+  const { window: c = W, ...t } = s;
+  let i;
+  const l = Q(() => c && "ResizeObserver" in c), r = () => {
+    i && (i.disconnect(), i = void 0);
+  }, f = _(() => Array.isArray(e) ? e.map((n) => g(n)) : [g(e)]), v = A(
+    f,
+    (n) => {
+      if (r(), l.value && c) {
+        i = new ResizeObserver(o);
+        for (const d of n)
+          d && i.observe(d, t);
+      }
+    },
+    { immediate: !0, flush: "post" }
+  ), C = () => {
+    r(), v();
+  };
+  return j(C), {
+    isSupported: l,
+    stop: C
+  };
+}
+function Z(e, o = { width: 0, height: 0 }, s = {}) {
+  const { window: c = W, box: t = "content-box" } = s, i = _(() => {
+    var n, d;
+    return (d = (n = g(e)) == null ? void 0 : n.namespaceURI) == null ? void 0 : d.includes("svg");
+  }), l = B(o.width), r = B(o.height), { stop: f } = Y(
+    e,
+    ([n]) => {
+      const d = t === "border-box" ? n.borderBoxSize : t === "content-box" ? n.contentBoxSize : n.devicePixelContentBoxSize;
+      if (c && i.value) {
+        const b = g(e);
+        if (b) {
+          const h = c.getComputedStyle(b);
+          l.value = Number.parseFloat(h.width), r.value = Number.parseFloat(h.height);
+        }
+      } else if (d) {
+        const b = Array.isArray(d) ? d : [d];
+        l.value = b.reduce((h, { inlineSize: x }) => h + x, 0), r.value = b.reduce((h, { blockSize: x }) => h + x, 0);
+      } else
+        l.value = n.contentRect.width, r.value = n.contentRect.height;
+    },
+    s
+  );
+  J(() => {
+    const n = g(e);
+    n && (l.value = "offsetWidth" in n ? n.offsetWidth : o.width, r.value = "offsetHeight" in n ? n.offsetHeight : o.height);
+  });
+  const v = A(
+    () => g(e),
+    (n) => {
+      l.value = n ? o.width : 0, r.value = n ? o.height : 0;
+    }
+  );
+  function C() {
+    f(), v();
+  }
+  return {
+    width: l,
+    height: r,
+    stop: C
+  };
+}
+const ee = { class: "relative" }, te = ["aria-label"], oe = { class: "w-full" }, ne = ["innerHTML"], se = { class: "mt-sm" }, le = /* @__PURE__ */ O({
   __name: "MclContainerB",
   props: {
     sectionBgColor: { default: "transparent" },
     containerBgColor: { default: "light-2" },
     imageSource: {},
-    imgHeightMobile: { default: 256 },
-    imgHeightDesktop: { default: 384 },
+    imageAlt: {},
     title: {},
     titleLevel: { default: "h2" },
     titleSize: { default: "md" },
     titleColor: { default: "dark-3" }
   },
-  setup(s) {
-    const l = s;
-    f();
-    const a = (e, o, u) => {
-      let m;
-      return e === "h1" ? m = n("H1", o) : e === "h2" ? m = n("H2", o) : m = n("H3", o), `${m} ${n("TEXTCOLOR", u)}`;
-    }, c = C(() => ({
-      "--bg-image": `url('${l.imageSource}')`,
-      "--container-height-mobile": `${l.imgHeightMobile}px`,
-      "--container-height-desktop": `${l.imgHeightDesktop > l.imgHeightMobile ? l.imgHeightDesktop : l.imgHeightMobile}px`
+  setup(e) {
+    const o = e;
+    L();
+    const s = B(), { height: c } = Z(s), t = _(() => {
+      const { titleLevel: l, titleSize: r, titleColor: f } = o, v = {
+        h1: u("H1", r),
+        h2: u("H2", r),
+        h3: u("H3", r),
+        h4: u("H4", r)
+      };
+      return [
+        u("TEXTCOLOR", f),
+        v[l]
+      ].join(" ");
+    }), i = _(() => ({
+      "--bg-image": `url('${o.imageSource}')`,
+      "--space-height": `${c.value / 2}px`
     }));
-    return (e, o) => {
-      const u = _("compoenent");
-      return p(), d("section", {
-        class: i(["relative pt-xl md:pt-3xl", r(n)("BGCOLOR", e.sectionBgColor)])
+    return (l, r) => {
+      const f = H("compoenent");
+      return w(), y("section", {
+        class: "relative",
+        style: E(i.value)
       }, [
-        t("div", {
-          class: "relative parallax-container",
-          style: B(c.value)
-        }, [
-          M,
-          t("div", I, [
-            t("div", {
-              class: i([r(n)("BGCOLOR", e.containerBgColor), "py-md md:py-lg px-xs md:px-md lg:p-xl"])
+        a("div", {
+          class: p([m(u)("BGCOLOR", l.sectionBgColor), "space-hts"])
+        }, null, 2),
+        a("div", ee, [
+          a("div", {
+            class: "absolute bg-fixed bg-cover bg-top inset-0 bg-no-repeat bg-image",
+            role: "img",
+            "aria-label": l.imageAlt
+          }, null, 8, te),
+          a("div", {
+            class: "container relative z-[10] -translate-y-1/2 px-xs max-w-[1140px]",
+            ref_key: "mainContentElem",
+            ref: s
+          }, [
+            a("div", {
+              class: p([m(u)("BGCOLOR", l.containerBgColor), "py-md md:py-lg px-xs md:px-md lg:p-xl"])
             }, [
-              t("div", R, [
-                b(u, { is: e.titleLevel }, {
-                  default: x(() => [
-                    t("span", {
-                      class: i(a(e.titleLevel, e.titleSize, e.titleColor)),
-                      innerHTML: e.title
-                    }, null, 10, D)
+              a("div", oe, [
+                I(f, { is: l.titleLevel }, {
+                  default: T(() => [
+                    a("span", {
+                      class: p(t.value),
+                      innerHTML: l.title
+                    }, null, 10, ne)
                   ]),
                   _: 1
                 }, 8, ["is"]),
-                t("div", G, [
-                  g(e.$slots, "content", {}, void 0, !0)
+                a("div", se, [
+                  S(l.$slots, "content", {}, void 0, !0)
                 ])
               ])
             ], 2)
-          ])
-        ], 4)
-      ], 2);
+          ], 512)
+        ])
+      ], 4);
     };
   }
-}), T = (s, l) => {
-  const a = s.__vccOpts || s;
-  for (const [c, e] of l)
-    a[c] = e;
-  return a;
-}, E = /* @__PURE__ */ T(W, [["__scopeId", "data-v-f3bc2137"]]);
+}), ie = (e, o) => {
+  const s = e.__vccOpts || e;
+  for (const [c, t] of o)
+    s[c] = t;
+  return s;
+}, ue = /* @__PURE__ */ ie(le, [["__scopeId", "data-v-ea9fe6ce"]]);
 export {
-  z as MclContainerA,
-  E as MclContainerB
+  ce as MclContainerA,
+  ue as MclContainerB
 };

package/dist/mcl-container.umd.cjs

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".parallax-container[data-v-f3bc2137]{height:var(--container-height-mobile, 256px)}.parallax-image[data-v-f3bc2137]{height:var(--container-height-mobile, 256px);background-image:var(--bg-image);background-position:center top}@media screen and (min-width: 768px){.parallax-container[data-v-f3bc2137],.parallax-image[data-v-f3bc2137]{height:var(--container-height-desktop, 384px)}}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.MclContainer={},i.Vue,i.ManguitoTheme))})(this,function(i,e,l){"use strict";const m={class:"relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]"},p=["points"],f={class:"container grid md:grid-cols-4 gap-4"},h={class:"relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]"},g=["points"],u=e.defineComponent({__name:"MclContainerA",props:{sectionBg:{default:"light-1"},containerBg:{default:"primary"},topDirection:{default:"left"},bottomDirection:{default:"left"},twoColumns:{type:Boolean,default:!0},leftColumnWidth:{default:50}},setup(s){e.useSlots();const n=(t,o)=>t==="top"?o==="left"?"0,0 100,100 0,100":"100,0 100,100 0,100":o==="left"?"0,0 100,0 0,100":"0,0 100,0 100,100",r=(t,o)=>{if(!t)return"md:col-span-4";switch(o){case 25:return"md:col-span-1";case 50:return"md:col-span-2";case 75:return"md:col-span-3";case 100:return"md:col-span-4";default:return""}},a=(t,o)=>{if(!t)return"";switch(o){case 25:return"md:col-span-3";case 50:return"md:col-span-2";case 75:return"md:col-span-1";case 100:default:return""}};return(t,o)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["py-lg lg:py-xl",e.unref(l)("BGCOLOR",t.sectionBg)])},[e.createElementVNode("div",m,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["block absolute left-0 inset-x-0 h-full w-full",e.unref(l)("SVGFILL",t.containerBg)]),viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true"},[e.createElementVNode("polygon",{points:n("top",t.topDirection)},null,8,p)],2))]),e.createElementVNode("div",{class:e.normalizeClass(["py-md md:py-lg lg:py-xl px-sm md:px-md lg:px-lg",e.unref(l)("BGCOLOR",t.containerBg)])},[e.createElementVNode("div",f,[e.createElementVNode("div",{class:e.normalizeClass(r(t.twoColumns,t.leftColumnWidth))},[e.renderSlot(t.$slots,"left-column")],2),t.twoColumns&&t.leftColumnWidth!==100?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(a(t.twoColumns,t.leftColumnWidth))},[e.renderSlot(t.$slots,"right-column")],2)):e.createCommentVNode("",!0)])],2),e.createElementVNode("div",h,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["block absolute left-0 inset-x-0 h-full w-full",e.unref(l)("SVGFILL",t.containerBg)]),viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true"},[e.createElementVNode("polygon",{points:n("bottom",t.bottomDirection)},null,8,g)],2))])],2))}}),C=(s=>(e.pushScopeId("data-v-f3bc2137"),s=s(),e.popScopeId(),s))(()=>e.createElementVNode("div",{class:"absolute parallax-image bg-fixed bg-cover w-full top-0 left-0 bg-no-repeat"},null,-1)),B={class:"container relative z-[10] px-xs top-[-48px] md:top-[-96px] max-w-[1140px]"},_={class:"w-full"},b=["innerHTML"],k={class:"mt-sm"},y=((s,n)=>{const r=s.__vccOpts||s;for(const[a,t]of n)r[a]=t;return r})(e.defineComponent({__name:"MclContainerB",props:{sectionBgColor:{default:"transparent"},containerBgColor:{default:"light-2"},imageSource:{},imgHeightMobile:{default:256},imgHeightDesktop:{default:384},title:{},titleLevel:{default:"h2"},titleSize:{default:"md"},titleColor:{default:"dark-3"}},setup(s){const n=s;e.useSlots();const r=(t,o,d)=>{let c;return t==="h1"?c=l("H1",o):t==="h2"?c=l("H2",o):c=l("H3",o),`${c} ${l("TEXTCOLOR",d)}`},a=e.computed(()=>({"--bg-image":`url('${n.imageSource}')`,"--container-height-mobile":`${n.imgHeightMobile}px`,"--container-height-desktop":`${n.imgHeightDesktop>n.imgHeightMobile?n.imgHeightDesktop:n.imgHeightMobile}px`}));return(t,o)=>{const d=e.resolveComponent("compoenent");return e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["relative pt-xl md:pt-3xl",e.unref(l)("BGCOLOR",t.sectionBgColor)])},[e.createElementVNode("div",{class:"relative parallax-container",style:e.normalizeStyle(a.value)},[C,e.createElementVNode("div",B,[e.createElementVNode("div",{class:e.normalizeClass([e.unref(l)("BGCOLOR",t.containerBgColor),"py-md md:py-lg px-xs md:px-md lg:p-xl"])},[e.createElementVNode("div",_,[e.createVNode(d,{is:t.titleLevel},{default:e.withCtx(()=>[e.createElementVNode("span",{class:e.normalizeClass(r(t.titleLevel,t.titleSize,t.titleColor)),innerHTML:t.title},null,10,b)]),_:1},8,["is"]),e.createElementVNode("div",k,[e.renderSlot(t.$slots,"content",{},void 0,!0)])])],2)])],4)],2)}}}),[["__scopeId","data-v-f3bc2137"]]);i.MclContainerA=u,i.MclContainerB=y,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".space-hts[data-v-ea9fe6ce]{height:calc(var(--space-height) + 36px)}@media screen and (min-width: 768px){.space-hts[data-v-ea9fe6ce]{height:calc(var(--space-height) + 48px)}}@media screen and (min-width: 1024px){.space-hts[data-v-ea9fe6ce]{height:calc(var(--space-height) + 64px)}}.bg-image[data-v-ea9fe6ce]{background-image:var(--bg-image)}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.MclContainer={},p.Vue,p.ManguitoTheme))})(this,function(p,e,d){"use strict";const w={class:"relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]"},_=["points"],E={class:"container grid md:grid-cols-4 gap-4"},S={class:"relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]"},x=["points"],V=e.defineComponent({__name:"MclContainerA",props:{sectionBg:{default:"light-1"},containerBg:{default:"primary"},topDirection:{default:"left"},bottomDirection:{default:"left"},twoColumns:{type:Boolean,default:!0},leftColumnWidth:{default:50}},setup(t){e.useSlots();const n=(o,r)=>o==="top"?r==="left"?"0,0 100,100 0,100":"100,0 100,100 0,100":r==="left"?"0,0 100,0 0,100":"0,0 100,0 100,100",s=(o,r)=>{if(!o)return"md:col-span-4";switch(r){case 25:return"md:col-span-1";case 50:return"md:col-span-2";case 75:return"md:col-span-3";case 100:return"md:col-span-4";default:return""}},a=(o,r)=>{if(!o)return"";switch(r){case 25:return"md:col-span-3";case 50:return"md:col-span-2";case 75:return"md:col-span-1";case 100:default:return""}};return(o,r)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["py-lg lg:py-xl",e.unref(d)("BGCOLOR",o.sectionBg)])},[e.createElementVNode("div",w,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["block absolute left-0 inset-x-0 h-full w-full",e.unref(d)("SVGFILL",o.containerBg)]),viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true"},[e.createElementVNode("polygon",{points:n("top",o.topDirection)},null,8,_)],2))]),e.createElementVNode("div",{class:e.normalizeClass(["py-md md:py-lg lg:py-xl px-sm md:px-md lg:px-lg",e.unref(d)("BGCOLOR",o.containerBg)])},[e.createElementVNode("div",E,[e.createElementVNode("div",{class:e.normalizeClass(s(o.twoColumns,o.leftColumnWidth))},[e.renderSlot(o.$slots,"left-column")],2),o.twoColumns&&o.leftColumnWidth!==100?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(a(o.twoColumns,o.leftColumnWidth))},[e.renderSlot(o.$slots,"right-column")],2)):e.createCommentVNode("",!0)])],2),e.createElementVNode("div",S,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["block absolute left-0 inset-x-0 h-full w-full",e.unref(d)("SVGFILL",o.containerBg)]),viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true"},[e.createElementVNode("polygon",{points:n("bottom",o.bottomDirection)},null,8,x)],2))])],2))}});function k(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}function N(t){return typeof t=="function"?t():e.unref(t)}const O=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;function z(t){return e.getCurrentInstance()}function L(t,n=!0,s){z()?e.onMounted(t,s):n?t():e.nextTick(t)}function u(t){var n;const s=N(t);return(n=s==null?void 0:s.$el)!=null?n:s}const y=O?window:void 0;function M(){const t=e.ref(!1),n=e.getCurrentInstance();return n&&e.onMounted(()=>{t.value=!0},n),t}function R(t){const n=M();return e.computed(()=>(n.value,!!t()))}function $(t,n,s={}){const{window:a=y,...o}=s;let r;const i=R(()=>a&&"ResizeObserver"in a),c=()=>{r&&(r.disconnect(),r=void 0)},f=e.computed(()=>Array.isArray(t)?t.map(l=>u(l)):[u(t)]),g=e.watch(f,l=>{if(c(),i.value&&a){r=new ResizeObserver(n);for(const m of l)m&&r.observe(m,o)}},{immediate:!0,flush:"post"}),b=()=>{c(),g()};return k(b),{isSupported:i,stop:b}}function A(t,n={width:0,height:0},s={}){const{window:a=y,box:o="content-box"}=s,r=e.computed(()=>{var l,m;return(m=(l=u(t))==null?void 0:l.namespaceURI)==null?void 0:m.includes("svg")}),i=e.ref(n.width),c=e.ref(n.height),{stop:f}=$(t,([l])=>{const m=o==="border-box"?l.borderBoxSize:o==="content-box"?l.contentBoxSize:l.devicePixelContentBoxSize;if(a&&r.value){const C=u(t);if(C){const h=a.getComputedStyle(C);i.value=Number.parseFloat(h.width),c.value=Number.parseFloat(h.height)}}else if(m){const C=Array.isArray(m)?m:[m];i.value=C.reduce((h,{inlineSize:B})=>h+B,0),c.value=C.reduce((h,{blockSize:B})=>h+B,0)}else i.value=l.contentRect.width,c.value=l.contentRect.height},s);L(()=>{const l=u(t);l&&(i.value="offsetWidth"in l?l.offsetWidth:n.width,c.value="offsetHeight"in l?l.offsetHeight:n.height)});const g=e.watch(()=>u(t),l=>{i.value=l?n.width:0,c.value=l?n.height:0});function b(){f(),g()}return{width:i,height:c,stop:b}}const W={class:"relative"},T=["aria-label"],G={class:"w-full"},H=["innerHTML"],I={class:"mt-sm"},D=((t,n)=>{const s=t.__vccOpts||t;for(const[a,o]of n)s[a]=o;return s})(e.defineComponent({__name:"MclContainerB",props:{sectionBgColor:{default:"transparent"},containerBgColor:{default:"light-2"},imageSource:{},imageAlt:{},title:{},titleLevel:{default:"h2"},titleSize:{default:"md"},titleColor:{default:"dark-3"}},setup(t){const n=t;e.useSlots();const s=e.ref(),{height:a}=A(s),o=e.computed(()=>{const{titleLevel:i,titleSize:c,titleColor:f}=n,g={h1:d("H1",c),h2:d("H2",c),h3:d("H3",c),h4:d("H4",c)};return[d("TEXTCOLOR",f),g[i]].join(" ")}),r=e.computed(()=>({"--bg-image":`url('${n.imageSource}')`,"--space-height":`${a.value/2}px`}));return(i,c)=>{const f=e.resolveComponent("compoenent");return e.openBlock(),e.createElementBlock("section",{class:"relative",style:e.normalizeStyle(r.value)},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(d)("BGCOLOR",i.sectionBgColor),"space-hts"])},null,2),e.createElementVNode("div",W,[e.createElementVNode("div",{class:"absolute bg-fixed bg-cover bg-top inset-0 bg-no-repeat bg-image",role:"img","aria-label":i.imageAlt},null,8,T),e.createElementVNode("div",{class:"container relative z-[10] -translate-y-1/2 px-xs max-w-[1140px]",ref_key:"mainContentElem",ref:s},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(d)("BGCOLOR",i.containerBgColor),"py-md md:py-lg px-xs md:px-md lg:p-xl"])},[e.createElementVNode("div",G,[e.createVNode(f,{is:i.titleLevel},{default:e.withCtx(()=>[e.createElementVNode("span",{class:e.normalizeClass(o.value),innerHTML:i.title},null,10,H)]),_:1},8,["is"]),e.createElementVNode("div",I,[e.renderSlot(i.$slots,"content",{},void 0,!0)])])],2)],512)])],4)}}}),[["__scopeId","data-v-ea9fe6ce"]]);p.MclContainerA=V,p.MclContainerB=D,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/mcl-container",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "basic container components based on manguito-theme",
   "type": "module",
   "files": [
@@ -33,7 +33,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@bobbykim/manguito-theme": "0.22.0",
+    "@bobbykim/manguito-theme": "0.22.1",
+    "@vueuse/core": "^10.8.0",
     "vue": "^3.3.10"
   },
   "devDependencies": {
@@ -45,5 +46,5 @@
     "vite-plugin-dts": "^3.8.3",
     "vue-tsc": "^1.8.25"
   },
-  "gitHead": "611995a0ec341a9fb5289ab695114ea7b1ac949e"
+  "gitHead": "f4cfa987ef03b3b80bfc4cd22cb033a404a249b3"
 }