@bobbykim/mcl-container 0.8.8 → 0.9.0

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/mcl-container",
-  "version": "0.8.8",
+  "version": "0.9.0",
   "description": "basic container components based on manguito-theme",
   "type": "module",
   "files": [
@@ -16,9 +16,6 @@
       "require": "./dist/mcl-container.umd.cjs"
     }
   },
-  "scripts": {
-    "build": "vite build"
-  },
   "author": {
     "name": "Bobby Kim",
     "url": "https://www.devbobbykim.com/"
@@ -33,9 +30,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@bobbykim/manguito-theme": "0.28.2",
     "@vueuse/core": "^12.0.0",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "@bobbykim/manguito-theme": "1.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
@@ -46,5 +43,7 @@
     "vite-plugin-dts": "^4.3.0",
     "vue-tsc": "^2.1.10"
   },
-  "gitHead": "8e1c889ef7ff6e3d81de9621db9d1605a67101f6"
-}
+  "scripts": {
+    "build": "vite build"
+  }
+}