@bobbykim/mcl-container 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -1,55 +1,89 @@
 import { ColorPalette } from '@bobbykim/manguito-theme';
 import { ColumnWidth } from '@bobbykim/manguito-theme';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { DirectionX } from '@bobbykim/manguito-theme';
-import { ExtractPropTypes } from 'vue';
 import { HeadingLevel } from '@bobbykim/manguito-theme';
 import { HeadingSize } from '@bobbykim/manguito-theme';
-import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
-
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
+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<{}>, {
+sectionBg: ColorPalette;
+containerBg: ColorPalette;
+topDirection: DirectionX;
+bottomDirection: DirectionX;
+twoColumns: boolean;
+leftColumnWidth: ColumnWidth;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare type __VLS_Prettify_2<T> = {
-    [K in keyof T]: T[K];
-} & {};
+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<{}>, {
+sectionBgColor: ColorPalette;
+containerBgColor: ColorPalette;
+titleLevel: HeadingLevel;
+titleSize: HeadingSize;
+titleColor: ColorPalette;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
+declare function __VLS_template(): {
+    slots: Readonly<{
+        'left-column': any;
+        'right-column': any;
+    }> & {
+        'left-column': any;
+        'right-column': any;
     };
+    refs: {};
+    attrs: Partial<{}>;
 };
 
-declare type __VLS_TypePropsToRuntimeProps_2<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable_2<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
+declare function __VLS_template_2(): {
+    slots: Readonly<{
+        content: any;
+    }> & {
+        content: any;
     };
+    refs: {
+        mainContentElem: HTMLDivElement;
+    };
+    attrs: Partial<{}>;
 };
 
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
-declare type __VLS_WithDefaults_2<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify_2<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
 
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
@@ -63,89 +97,8 @@ declare type __VLS_WithTemplateSlots_2<T, S> = T & {
     };
 };
 
-export declare const MclContainerA: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-sectionBg?: ColorPalette | undefined;
-containerBg?: ColorPalette | undefined;
-topDirection?: DirectionX | undefined;
-bottomDirection?: DirectionX | undefined;
-twoColumns?: boolean | undefined;
-leftColumnWidth?: ColumnWidth | undefined;
-}>, {
-sectionBg: string;
-containerBg: string;
-topDirection: string;
-bottomDirection: string;
-twoColumns: boolean;
-leftColumnWidth: number;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-sectionBg?: ColorPalette | undefined;
-containerBg?: ColorPalette | undefined;
-topDirection?: DirectionX | undefined;
-bottomDirection?: DirectionX | undefined;
-twoColumns?: boolean | undefined;
-leftColumnWidth?: ColumnWidth | undefined;
-}>, {
-sectionBg: string;
-containerBg: string;
-topDirection: string;
-bottomDirection: string;
-twoColumns: boolean;
-leftColumnWidth: number;
-}>>>, {
-sectionBg: ColorPalette;
-containerBg: ColorPalette;
-topDirection: DirectionX;
-bottomDirection: DirectionX;
-twoColumns: boolean;
-leftColumnWidth: ColumnWidth;
-}, {}>, Readonly<{
-    'left-column': any;
-    'right-column': any;
-}> & {
-    'left-column': any;
-    'right-column': any;
-}>;
+export declare const MclContainerA: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
-export declare const MclContainerB: __VLS_WithTemplateSlots_2<DefineComponent<__VLS_WithDefaults_2<__VLS_TypePropsToRuntimeProps_2<{
-sectionBgColor?: ColorPalette | undefined;
-containerBgColor?: ColorPalette | undefined;
-imageSource: string;
-imageAlt: string;
-title: string;
-titleLevel?: HeadingLevel | undefined;
-titleSize?: HeadingSize | undefined;
-titleColor?: ColorPalette | undefined;
-}>, {
-sectionBgColor: string;
-containerBgColor: string;
-titleLevel: string;
-titleSize: string;
-titleColor: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_2<__VLS_TypePropsToRuntimeProps_2<{
-sectionBgColor?: ColorPalette | undefined;
-containerBgColor?: ColorPalette | undefined;
-imageSource: string;
-imageAlt: string;
-title: string;
-titleLevel?: HeadingLevel | undefined;
-titleSize?: HeadingSize | undefined;
-titleColor?: ColorPalette | undefined;
-}>, {
-sectionBgColor: string;
-containerBgColor: string;
-titleLevel: string;
-titleSize: string;
-titleColor: string;
-}>>>, {
-sectionBgColor: ColorPalette;
-containerBgColor: ColorPalette;
-titleLevel: HeadingLevel;
-titleSize: HeadingSize;
-titleColor: ColorPalette;
-}, {}>, Readonly<{
-    content: any;
-}> & {
-    content: any;
-}>;
+export declare const MclContainerB: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
 
 export { }

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-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({
+(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, openBlock as h, createElementBlock as y, normalizeClass as p, unref as f, createElementVNode as a, renderSlot as S, createCommentVNode as z, onMounted as L, nextTick as G, getCurrentScope as M, onScopeDispose as D, getCurrentInstance as k, computed as B, ref as _, watch as A, normalizeStyle as E, createBlock as I, resolveDynamicComponent as H, withCtx as V, toDisplayString as T } from "vue";
+import d from "@bobbykim/manguito-theme";
+const F = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, N = ["points"], P = { class: "container grid md:grid-cols-4 gap-4" }, j = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, U = ["points"], ce = /* @__PURE__ */ O({
   __name: "MclContainerA",
   props: {
     sectionBg: { default: "light-1" },
@@ -12,7 +12,7 @@ const V = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, D
     leftColumnWidth: { default: 50 }
   },
   setup(e) {
-    L();
+    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)
         return "md:col-span-4";
@@ -43,148 +43,151 @@ const V = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, D
           return "";
       }
     };
-    return (t, i) => (w(), y("section", {
-      class: p(["py-lg lg:py-xl", m(u)("BGCOLOR", t.sectionBg)])
+    return (t, i) => (h(), y("section", {
+      class: p(["py-lg lg:py-xl", f(d)("BGCOLOR", t.sectionBg)])
     }, [
-      a("div", V, [
-        (w(), y("svg", {
-          class: p(["block absolute left-0 inset-x-0 h-full w-full", m(u)("SVGFILL", t.containerBg)]),
+      a("div", F, [
+        (h(), y("svg", {
+          class: p(["block absolute left-0 inset-x-0 h-full w-full", f(d)("SVGFILL", t.containerBg)]),
           viewBox: "0 0 100 100",
           preserveAspectRatio: "none",
           "aria-hidden": "true"
         }, [
           a("polygon", {
             points: o("top", t.topDirection)
-          }, null, 8, D)
+          }, null, 8, N)
         ], 2))
       ]),
       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)])
+        class: p(["py-md md:py-lg lg:py-xl px-sm md:px-md lg:px-lg", f(d)("BGCOLOR", t.containerBg)])
       }, [
-        a("div", N, [
+        a("div", P, [
           a("div", {
             class: p(s(t.twoColumns, t.leftColumnWidth))
           }, [
             S(t.$slots, "left-column")
           ], 2),
-          t.twoColumns && t.leftColumnWidth !== 100 ? (w(), y("div", {
+          t.twoColumns && t.leftColumnWidth !== 100 ? (h(), y("div", {
             key: 0,
             class: p(c(t.twoColumns, t.leftColumnWidth))
           }, [
             S(t.$slots, "right-column")
-          ], 2)) : k("", !0)
+          ], 2)) : z("", !0)
         ])
       ], 2),
-      a("div", F, [
-        (w(), y("svg", {
-          class: p(["block absolute left-0 inset-x-0 h-full w-full", m(u)("SVGFILL", t.containerBg)]),
+      a("div", j, [
+        (h(), y("svg", {
+          class: p(["block absolute left-0 inset-x-0 h-full w-full", f(d)("SVGFILL", t.containerBg)]),
           viewBox: "0 0 100 100",
           preserveAspectRatio: "none",
           "aria-hidden": "true"
         }, [
           a("polygon", {
             points: o("bottom", t.bottomDirection)
-          }, null, 8, P)
+          }, null, 8, U)
         ], 2))
       ])
     ], 2));
   }
 });
-function j(e) {
-  return z() ? (G(e), !0) : !1;
+function X(e) {
+  return M() ? (D(e), !0) : !1;
 }
-function U(e) {
-  return typeof e == "function" ? e() : m(e);
+function W(e) {
+  return typeof e == "function" ? e() : f(e);
 }
-const X = typeof window < "u" && typeof document < "u";
+const q = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-function q(e) {
-  return $();
+function J(e) {
+  return k();
 }
-function J(e, o = !0, s) {
-  q() ? R(e, s) : o ? e() : M(e);
+function K(e, o = !0, s) {
+  J() ? L(e, s) : o ? e() : G(e);
 }
+const $ = q ? window : void 0;
 function g(e) {
   var o;
-  const s = U(e);
+  const s = W(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(() => {
+function Q() {
+  const e = _(!1), o = k();
+  return o && L(() => {
     e.value = !0;
   }, o), e;
 }
-function Q(e) {
-  const o = K();
-  return _(() => (o.value, !!e()));
+function Y(e) {
+  const o = Q();
+  return B(() => (o.value, !!e()));
 }
-function Y(e, o, s = {}) {
-  const { window: c = W, ...t } = s;
+function Z(e, o, s = {}) {
+  const { window: c = $, ...t } = s;
   let i;
-  const l = Q(() => c && "ResizeObserver" in c), r = () => {
+  const l = Y(() => 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,
+  }, v = B(() => {
+    const n = W(e);
+    return Array.isArray(n) ? n.map((u) => g(u)) : [g(n)];
+  }), C = A(
+    v,
     (n) => {
       if (r(), l.value && c) {
         i = new ResizeObserver(o);
-        for (const d of n)
-          d && i.observe(d, t);
+        for (const u of n)
+          u && i.observe(u, t);
       }
     },
     { immediate: !0, flush: "post" }
-  ), C = () => {
-    r(), v();
+  ), b = () => {
+    r(), C();
   };
-  return j(C), {
+  return X(b), {
     isSupported: l,
-    stop: C
+    stop: b
   };
 }
-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(
+function ee(e, o = { width: 0, height: 0 }, s = {}) {
+  const { window: c = $, box: t = "content-box" } = s, i = B(() => {
+    var n, u;
+    return (u = (n = g(e)) == null ? void 0 : n.namespaceURI) == null ? void 0 : u.includes("svg");
+  }), l = _(o.width), r = _(o.height), { stop: v } = Z(
     e,
     ([n]) => {
-      const d = t === "border-box" ? n.borderBoxSize : t === "content-box" ? n.contentBoxSize : n.devicePixelContentBoxSize;
+      const u = 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);
+        const w = g(e);
+        if (w) {
+          const m = w.getBoundingClientRect();
+          l.value = m.width, r.value = m.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 if (u) {
+        const w = Array.isArray(u) ? u : [u];
+        l.value = w.reduce((m, { inlineSize: x }) => m + x, 0), r.value = w.reduce((m, { blockSize: x }) => m + x, 0);
       } else
         l.value = n.contentRect.width, r.value = n.contentRect.height;
     },
     s
   );
-  J(() => {
+  K(() => {
     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(
+  const C = A(
     () => g(e),
     (n) => {
       l.value = n ? o.width : 0, r.value = n ? o.height : 0;
     }
   );
-  function C() {
-    f(), v();
+  function b() {
+    v(), C();
   }
   return {
     width: l,
     height: r,
-    stop: C
+    stop: b
   };
 }
-const ee = { class: "relative" }, te = ["aria-label"], oe = { class: "w-full" }, ne = ["innerHTML"], se = { class: "mt-sm" }, le = /* @__PURE__ */ O({
+const te = { class: "relative" }, oe = ["aria-label"], ne = { class: "w-full" }, se = { class: "mt-sm" }, le = /* @__PURE__ */ O({
   __name: "MclContainerB",
   props: {
     sectionBgColor: { default: "transparent" },
@@ -198,71 +201,67 @@ const ee = { class: "relative" }, te = ["aria-label"], oe = { class: "w-full" },
   },
   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)
+    R();
+    const s = _(), { height: c } = ee(s), t = B(() => {
+      const { titleLevel: l, titleSize: r, titleColor: v } = o, C = {
+        h1: d("H1", r),
+        h2: d("H2", r),
+        h3: d("H3", r),
+        h4: d("H4", r)
       };
       return [
-        u("TEXTCOLOR", f),
-        v[l]
+        d("TEXTCOLOR", v),
+        C[l]
       ].join(" ");
-    }), i = _(() => ({
+    }), i = B(() => ({
       "--bg-image": `url('${o.imageSource}')`,
       "--space-height": `${c.value / 2}px`
     }));
-    return (l, r) => {
-      const f = H("compoenent");
-      return w(), y("section", {
-        class: "relative",
-        style: E(i.value)
-      }, [
+    return (l, r) => (h(), y("section", {
+      class: "relative",
+      style: E(i.value)
+    }, [
+      a("div", {
+        class: p([f(d)("BGCOLOR", l.sectionBgColor), "space-hts"])
+      }, null, 2),
+      a("div", te, [
         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),
+          class: "absolute bg-fixed bg-cover bg-top inset-0 bg-no-repeat bg-image",
+          role: "img",
+          "aria-label": l.imageAlt
+        }, null, 8, oe),
+        a("div", {
+          class: "container relative z-[10] -translate-y-1/2 px-xs max-w-[1140px]",
+          ref_key: "mainContentElem",
+          ref: s
+        }, [
           a("div", {
-            class: "container relative z-[10] -translate-y-1/2 px-xs max-w-[1140px]",
-            ref_key: "mainContentElem",
-            ref: s
+            class: p([f(d)("BGCOLOR", l.containerBgColor), "py-md md:py-lg px-xs md:px-md lg:p-xl"])
           }, [
-            a("div", {
-              class: p([m(u)("BGCOLOR", l.containerBgColor), "py-md md:py-lg px-xs md:px-md lg:p-xl"])
-            }, [
-              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"]),
-                a("div", se, [
-                  S(l.$slots, "content", {}, void 0, !0)
-                ])
+            a("div", ne, [
+              (h(), I(H(l.titleLevel), null, {
+                default: V(() => [
+                  a("span", {
+                    class: p(t.value)
+                  }, T(l.title), 3)
+                ]),
+                _: 1
+              })),
+              a("div", se, [
+                S(l.$slots, "content", {}, void 0, !0)
               ])
-            ], 2)
-          ], 512)
-        ])
-      ], 4);
-    };
+            ])
+          ], 2)
+        ], 512)
+      ])
+    ], 4));
   }
 }), 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"]]);
+}, ue = /* @__PURE__ */ ie(le, [["__scopeId", "data-v-fb05edc4"]]);
 export {
   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(".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"})});
+(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,m){"use strict";const _={class:"relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]"},E=["points"],S={class:"container grid md:grid-cols-4 gap-4"},k={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(m)("BGCOLOR",o.sectionBg)])},[e.createElementVNode("div",_,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["block absolute left-0 inset-x-0 h-full w-full",e.unref(m)("SVGFILL",o.containerBg)]),viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true"},[e.createElementVNode("polygon",{points:n("top",o.topDirection)},null,8,E)],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(m)("BGCOLOR",o.containerBg)])},[e.createElementVNode("div",S,[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",k,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["block absolute left-0 inset-x-0 h-full w-full",e.unref(m)("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 O(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}function y(t){return typeof t=="function"?t():e.unref(t)}const z=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;function N(t){return e.getCurrentInstance()}function R(t,n=!0,s){N()?e.onMounted(t,s):n?t():e.nextTick(t)}const w=z?window:void 0;function f(t){var n;const s=y(t);return(n=s==null?void 0:s.$el)!=null?n:s}function L(){const t=e.ref(!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=y(t);return Array.isArray(l)?l.map(d=>f(d)):[f(l)]}),g=e.watch(h,l=>{if(c(),i.value&&a){r=new ResizeObserver(n);for(const d of l)d&&r.observe(d,o)}},{immediate:!0,flush:"post"}),b=()=>{c(),g()};return O(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,d;return(d=(l=f(t))==null?void 0:l.namespaceURI)==null?void 0:d.includes("svg")}),i=e.ref(n.width),c=e.ref(n.height),{stop:h}=A(t,([l])=>{const d=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(d){const C=Array.isArray(d)?d:[d];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);R(()=>{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:m("H1",c),h2:m("H2",c),h3:m("H3",c),h4:m("H4",c)};return[m("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(m)("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(m)("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=V,p.MclContainerB=I,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/mcl-container",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "basic container components based on manguito-theme",
   "type": "module",
   "files": [
@@ -33,18 +33,18 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@bobbykim/manguito-theme": "0.22.1",
-    "@vueuse/core": "^10.8.0",
-    "vue": "^3.3.10"
+    "@bobbykim/manguito-theme": "0.23.0",
+    "@vueuse/core": "^12.0.0",
+    "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.2",
-    "sass": "^1.69.5",
-    "typescript": "^5.3.3",
-    "vite": "^4.5.1",
-    "vite-plugin-css-injected-by-js": "^3.5.0",
-    "vite-plugin-dts": "^3.8.3",
-    "vue-tsc": "^1.8.25"
+    "@vitejs/plugin-vue": "^5.2.1",
+    "sass": "^1.82.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.3.0",
+    "vue-tsc": "^2.1.10"
   },
-  "gitHead": "f4cfa987ef03b3b80bfc4cd22cb033a404a249b3"
+  "gitHead": "0c86a1a70a33446112dafbaf5fce5fdcb5fdf755"
 }