@bobbykim/mcl-container 0.8.7 → 0.8.9

package/dist/index.d.ts

@@ -8,56 +8,47 @@ import { HeadingLevel } from '@bobbykim/manguito-theme';
 import { HeadingSize } from '@bobbykim/manguito-theme';
 import { PublicProps } from 'vue';
 
-declare const __VLS_component: DefineComponent<    {
-sectionBg?: ColorPalette;
-containerBg?: ColorPalette;
-topDirection?: DirectionX;
-bottomDirection?: DirectionX;
-twoColumns?: boolean;
-leftColumnWidth?: ColumnWidth;
-}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
-sectionBg?: ColorPalette;
-containerBg?: ColorPalette;
-topDirection?: DirectionX;
-bottomDirection?: DirectionX;
-twoColumns?: boolean;
-leftColumnWidth?: ColumnWidth;
-}> & Readonly<{}>, {
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
 sectionBg: ColorPalette;
 containerBg: ColorPalette;
 topDirection: DirectionX;
 bottomDirection: DirectionX;
 twoColumns: boolean;
 leftColumnWidth: ColumnWidth;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_2: DefineComponent<    {
-sectionBgColor?: ColorPalette;
-containerBgColor?: ColorPalette;
-imageSource: string;
-imageAlt: string;
-title: string;
-titleLevel?: HeadingLevel;
-titleSize?: HeadingSize;
-titleColor?: ColorPalette;
-}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
-sectionBgColor?: ColorPalette;
-containerBgColor?: ColorPalette;
-imageSource: string;
-imageAlt: string;
-title: string;
-titleLevel?: HeadingLevel;
-titleSize?: HeadingSize;
-titleColor?: ColorPalette;
-}> & Readonly<{}>, {
+declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
 sectionBgColor: ColorPalette;
 containerBgColor: ColorPalette;
 titleLevel: HeadingLevel;
 titleSize: HeadingSize;
 titleColor: ColorPalette;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+mainContentElem: HTMLDivElement;
+}, HTMLElement>;
+
+declare type __VLS_Props = {
+    sectionBg?: ColorPalette;
+    containerBg?: ColorPalette;
+    topDirection?: DirectionX;
+    bottomDirection?: DirectionX;
+    twoColumns?: boolean;
+    leftColumnWidth?: ColumnWidth;
+};
+
+declare type __VLS_Props_2 = {
+    sectionBgColor?: ColorPalette;
+    containerBgColor?: ColorPalette;
+    imageSource: string;
+    imageAlt: string;
+    title: string;
+    titleLevel?: HeadingLevel;
+    titleSize?: HeadingSize;
+    titleColor?: ColorPalette;
+};
 
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         'left-column': any;
         'right-column': any;
@@ -66,10 +57,11 @@ declare function __VLS_template(): {
         'right-column': any;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLElement;
 };
 
 declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
     slots: Readonly<{
         content: any;
     }> & {
@@ -78,7 +70,7 @@ declare function __VLS_template_2(): {
     refs: {
         mainContentElem: HTMLDivElement;
     };
-    attrs: Partial<{}>;
+    rootEl: HTMLElement;
 };
 
 declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/mcl-container",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "description": "basic container components based on manguito-theme",
   "type": "module",
   "files": [
@@ -33,7 +33,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@bobbykim/manguito-theme": "0.28.1",
+    "@bobbykim/manguito-theme": "0.28.3",
     "@vueuse/core": "^12.0.0",
     "vue": "^3.5.13"
   },
@@ -46,5 +46,5 @@
     "vite-plugin-dts": "^4.3.0",
     "vue-tsc": "^2.1.10"
   },
-  "gitHead": "9ffea0493c49e2c7df51c45e3c2f72d256663048"
+  "gitHead": "fc1830324e5a409b68bbb2b39280fe0b3cf3673a"
 }