@bobbykim/mcl-container 0.7.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mcl-container.js +95 -99
- package/dist/mcl-container.umd.cjs +2 -2
- package/package.json +2 -2
package/dist/mcl-container.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".space-hts[data-v-
|
|
2
|
-
import { defineComponent as O, useSlots as L, openBlock as
|
|
1
|
+
(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)}})();
|
|
2
|
+
import { defineComponent as O, useSlots as L, openBlock as h, createElementBlock as y, normalizeClass as p, unref as f, createElementVNode as a, renderSlot as S, createCommentVNode as $, onMounted as R, nextTick as z, getCurrentScope as G, onScopeDispose as M, getCurrentInstance as k, computed as B, ref as _, watch as A, normalizeStyle as D, createBlock as E, resolveDynamicComponent as I, withCtx as H, toDisplayString as V } from "vue";
|
|
3
3
|
import u from "@bobbykim/manguito-theme";
|
|
4
|
-
const
|
|
4
|
+
const T = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, F = ["points"], N = { class: "container grid md:grid-cols-4 gap-4" }, P = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, j = ["points"], ce = /* @__PURE__ */ O({
|
|
5
5
|
__name: "MclContainerA",
|
|
6
6
|
props: {
|
|
7
7
|
sectionBg: { default: "light-1" },
|
|
@@ -43,23 +43,23 @@ const V = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, D
|
|
|
43
43
|
return "";
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
|
-
return (t, i) => (
|
|
47
|
-
class: p(["py-lg lg:py-xl",
|
|
46
|
+
return (t, i) => (h(), y("section", {
|
|
47
|
+
class: p(["py-lg lg:py-xl", f(u)("BGCOLOR", t.sectionBg)])
|
|
48
48
|
}, [
|
|
49
|
-
a("div",
|
|
50
|
-
(
|
|
51
|
-
class: p(["block absolute left-0 inset-x-0 h-full w-full",
|
|
49
|
+
a("div", T, [
|
|
50
|
+
(h(), y("svg", {
|
|
51
|
+
class: p(["block absolute left-0 inset-x-0 h-full w-full", f(u)("SVGFILL", t.containerBg)]),
|
|
52
52
|
viewBox: "0 0 100 100",
|
|
53
53
|
preserveAspectRatio: "none",
|
|
54
54
|
"aria-hidden": "true"
|
|
55
55
|
}, [
|
|
56
56
|
a("polygon", {
|
|
57
57
|
points: o("top", t.topDirection)
|
|
58
|
-
}, null, 8,
|
|
58
|
+
}, null, 8, F)
|
|
59
59
|
], 2))
|
|
60
60
|
]),
|
|
61
61
|
a("div", {
|
|
62
|
-
class: p(["py-md md:py-lg lg:py-xl px-sm md:px-md lg:px-lg",
|
|
62
|
+
class: p(["py-md md:py-lg lg:py-xl px-sm md:px-md lg:px-lg", f(u)("BGCOLOR", t.containerBg)])
|
|
63
63
|
}, [
|
|
64
64
|
a("div", N, [
|
|
65
65
|
a("div", {
|
|
@@ -67,66 +67,66 @@ const V = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, D
|
|
|
67
67
|
}, [
|
|
68
68
|
S(t.$slots, "left-column")
|
|
69
69
|
], 2),
|
|
70
|
-
t.twoColumns && t.leftColumnWidth !== 100 ? (
|
|
70
|
+
t.twoColumns && t.leftColumnWidth !== 100 ? (h(), y("div", {
|
|
71
71
|
key: 0,
|
|
72
72
|
class: p(c(t.twoColumns, t.leftColumnWidth))
|
|
73
73
|
}, [
|
|
74
74
|
S(t.$slots, "right-column")
|
|
75
|
-
], 2)) :
|
|
75
|
+
], 2)) : $("", !0)
|
|
76
76
|
])
|
|
77
77
|
], 2),
|
|
78
|
-
a("div",
|
|
79
|
-
(
|
|
80
|
-
class: p(["block absolute left-0 inset-x-0 h-full w-full",
|
|
78
|
+
a("div", P, [
|
|
79
|
+
(h(), y("svg", {
|
|
80
|
+
class: p(["block absolute left-0 inset-x-0 h-full w-full", f(u)("SVGFILL", t.containerBg)]),
|
|
81
81
|
viewBox: "0 0 100 100",
|
|
82
82
|
preserveAspectRatio: "none",
|
|
83
83
|
"aria-hidden": "true"
|
|
84
84
|
}, [
|
|
85
85
|
a("polygon", {
|
|
86
86
|
points: o("bottom", t.bottomDirection)
|
|
87
|
-
}, null, 8,
|
|
87
|
+
}, null, 8, j)
|
|
88
88
|
], 2))
|
|
89
89
|
])
|
|
90
90
|
], 2));
|
|
91
91
|
}
|
|
92
92
|
});
|
|
93
|
-
function j(e) {
|
|
94
|
-
return z() ? (G(e), !0) : !1;
|
|
95
|
-
}
|
|
96
93
|
function U(e) {
|
|
97
|
-
return
|
|
94
|
+
return G() ? (M(e), !0) : !1;
|
|
95
|
+
}
|
|
96
|
+
function X(e) {
|
|
97
|
+
return typeof e == "function" ? e() : f(e);
|
|
98
98
|
}
|
|
99
|
-
const
|
|
99
|
+
const q = typeof window < "u" && typeof document < "u";
|
|
100
100
|
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
|
|
101
|
-
function
|
|
102
|
-
return
|
|
101
|
+
function J(e) {
|
|
102
|
+
return k();
|
|
103
103
|
}
|
|
104
|
-
function
|
|
105
|
-
|
|
104
|
+
function K(e, o = !0, s) {
|
|
105
|
+
J() ? R(e, s) : o ? e() : z(e);
|
|
106
106
|
}
|
|
107
107
|
function g(e) {
|
|
108
108
|
var o;
|
|
109
|
-
const s =
|
|
109
|
+
const s = X(e);
|
|
110
110
|
return (o = s == null ? void 0 : s.$el) != null ? o : s;
|
|
111
111
|
}
|
|
112
|
-
const W =
|
|
113
|
-
function
|
|
114
|
-
const e =
|
|
112
|
+
const W = q ? window : void 0;
|
|
113
|
+
function Q() {
|
|
114
|
+
const e = _(!1), o = k();
|
|
115
115
|
return o && R(() => {
|
|
116
116
|
e.value = !0;
|
|
117
117
|
}, o), e;
|
|
118
118
|
}
|
|
119
|
-
function
|
|
120
|
-
const o =
|
|
121
|
-
return
|
|
119
|
+
function Y(e) {
|
|
120
|
+
const o = Q();
|
|
121
|
+
return B(() => (o.value, !!e()));
|
|
122
122
|
}
|
|
123
|
-
function
|
|
123
|
+
function Z(e, o, s = {}) {
|
|
124
124
|
const { window: c = W, ...t } = s;
|
|
125
125
|
let i;
|
|
126
|
-
const l =
|
|
126
|
+
const l = Y(() => c && "ResizeObserver" in c), r = () => {
|
|
127
127
|
i && (i.disconnect(), i = void 0);
|
|
128
|
-
},
|
|
129
|
-
|
|
128
|
+
}, v = B(() => Array.isArray(e) ? e.map((n) => g(n)) : [g(e)]), C = A(
|
|
129
|
+
v,
|
|
130
130
|
(n) => {
|
|
131
131
|
if (r(), l.value && c) {
|
|
132
132
|
i = new ResizeObserver(o);
|
|
@@ -135,56 +135,56 @@ function Y(e, o, s = {}) {
|
|
|
135
135
|
}
|
|
136
136
|
},
|
|
137
137
|
{ immediate: !0, flush: "post" }
|
|
138
|
-
),
|
|
139
|
-
r(),
|
|
138
|
+
), b = () => {
|
|
139
|
+
r(), C();
|
|
140
140
|
};
|
|
141
|
-
return
|
|
141
|
+
return U(b), {
|
|
142
142
|
isSupported: l,
|
|
143
|
-
stop:
|
|
143
|
+
stop: b
|
|
144
144
|
};
|
|
145
145
|
}
|
|
146
|
-
function
|
|
147
|
-
const { window: c = W, box: t = "content-box" } = s, i =
|
|
146
|
+
function ee(e, o = { width: 0, height: 0 }, s = {}) {
|
|
147
|
+
const { window: c = W, box: t = "content-box" } = s, i = B(() => {
|
|
148
148
|
var n, d;
|
|
149
149
|
return (d = (n = g(e)) == null ? void 0 : n.namespaceURI) == null ? void 0 : d.includes("svg");
|
|
150
|
-
}), l =
|
|
150
|
+
}), l = _(o.width), r = _(o.height), { stop: v } = Z(
|
|
151
151
|
e,
|
|
152
152
|
([n]) => {
|
|
153
153
|
const d = t === "border-box" ? n.borderBoxSize : t === "content-box" ? n.contentBoxSize : n.devicePixelContentBoxSize;
|
|
154
154
|
if (c && i.value) {
|
|
155
|
-
const
|
|
156
|
-
if (
|
|
157
|
-
const
|
|
158
|
-
l.value = Number.parseFloat(
|
|
155
|
+
const w = g(e);
|
|
156
|
+
if (w) {
|
|
157
|
+
const m = c.getComputedStyle(w);
|
|
158
|
+
l.value = Number.parseFloat(m.width), r.value = Number.parseFloat(m.height);
|
|
159
159
|
}
|
|
160
160
|
} else if (d) {
|
|
161
|
-
const
|
|
162
|
-
l.value =
|
|
161
|
+
const w = Array.isArray(d) ? d : [d];
|
|
162
|
+
l.value = w.reduce((m, { inlineSize: x }) => m + x, 0), r.value = w.reduce((m, { blockSize: x }) => m + x, 0);
|
|
163
163
|
} else
|
|
164
164
|
l.value = n.contentRect.width, r.value = n.contentRect.height;
|
|
165
165
|
},
|
|
166
166
|
s
|
|
167
167
|
);
|
|
168
|
-
|
|
168
|
+
K(() => {
|
|
169
169
|
const n = g(e);
|
|
170
170
|
n && (l.value = "offsetWidth" in n ? n.offsetWidth : o.width, r.value = "offsetHeight" in n ? n.offsetHeight : o.height);
|
|
171
171
|
});
|
|
172
|
-
const
|
|
172
|
+
const C = A(
|
|
173
173
|
() => g(e),
|
|
174
174
|
(n) => {
|
|
175
175
|
l.value = n ? o.width : 0, r.value = n ? o.height : 0;
|
|
176
176
|
}
|
|
177
177
|
);
|
|
178
|
-
function
|
|
179
|
-
|
|
178
|
+
function b() {
|
|
179
|
+
v(), C();
|
|
180
180
|
}
|
|
181
181
|
return {
|
|
182
182
|
width: l,
|
|
183
183
|
height: r,
|
|
184
|
-
stop:
|
|
184
|
+
stop: b
|
|
185
185
|
};
|
|
186
186
|
}
|
|
187
|
-
const
|
|
187
|
+
const te = { class: "relative" }, oe = ["aria-label"], ne = { class: "w-full" }, se = { class: "mt-sm" }, le = /* @__PURE__ */ O({
|
|
188
188
|
__name: "MclContainerB",
|
|
189
189
|
props: {
|
|
190
190
|
sectionBgColor: { default: "transparent" },
|
|
@@ -199,70 +199,66 @@ const ee = { class: "relative" }, te = ["aria-label"], oe = { class: "w-full" },
|
|
|
199
199
|
setup(e) {
|
|
200
200
|
const o = e;
|
|
201
201
|
L();
|
|
202
|
-
const s =
|
|
203
|
-
const { titleLevel: l, titleSize: r, titleColor:
|
|
202
|
+
const s = _(), { height: c } = ee(s), t = B(() => {
|
|
203
|
+
const { titleLevel: l, titleSize: r, titleColor: v } = o, C = {
|
|
204
204
|
h1: u("H1", r),
|
|
205
205
|
h2: u("H2", r),
|
|
206
206
|
h3: u("H3", r),
|
|
207
207
|
h4: u("H4", r)
|
|
208
208
|
};
|
|
209
209
|
return [
|
|
210
|
-
u("TEXTCOLOR",
|
|
211
|
-
|
|
210
|
+
u("TEXTCOLOR", v),
|
|
211
|
+
C[l]
|
|
212
212
|
].join(" ");
|
|
213
|
-
}), i =
|
|
213
|
+
}), i = B(() => ({
|
|
214
214
|
"--bg-image": `url('${o.imageSource}')`,
|
|
215
215
|
"--space-height": `${c.value / 2}px`
|
|
216
216
|
}));
|
|
217
|
-
return (l, r) => {
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
217
|
+
return (l, r) => (h(), y("section", {
|
|
218
|
+
class: "relative",
|
|
219
|
+
style: D(i.value)
|
|
220
|
+
}, [
|
|
221
|
+
a("div", {
|
|
222
|
+
class: p([f(u)("BGCOLOR", l.sectionBgColor), "space-hts"])
|
|
223
|
+
}, null, 2),
|
|
224
|
+
a("div", te, [
|
|
223
225
|
a("div", {
|
|
224
|
-
class:
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
226
|
+
class: "absolute bg-fixed bg-cover bg-top inset-0 bg-no-repeat bg-image",
|
|
227
|
+
role: "img",
|
|
228
|
+
"aria-label": l.imageAlt
|
|
229
|
+
}, null, 8, oe),
|
|
230
|
+
a("div", {
|
|
231
|
+
class: "container relative z-[10] -translate-y-1/2 px-xs max-w-[1140px]",
|
|
232
|
+
ref_key: "mainContentElem",
|
|
233
|
+
ref: s
|
|
234
|
+
}, [
|
|
232
235
|
a("div", {
|
|
233
|
-
class: "
|
|
234
|
-
ref_key: "mainContentElem",
|
|
235
|
-
ref: s
|
|
236
|
+
class: p([f(u)("BGCOLOR", l.containerBgColor), "py-md md:py-lg px-xs md:px-md lg:p-xl"])
|
|
236
237
|
}, [
|
|
237
|
-
a("div",
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
_: 1
|
|
249
|
-
}, 8, ["is"]),
|
|
250
|
-
a("div", se, [
|
|
251
|
-
S(l.$slots, "content", {}, void 0, !0)
|
|
252
|
-
])
|
|
238
|
+
a("div", ne, [
|
|
239
|
+
(h(), E(I(l.titleLevel), null, {
|
|
240
|
+
default: H(() => [
|
|
241
|
+
a("span", {
|
|
242
|
+
class: p(t.value)
|
|
243
|
+
}, V(l.title), 3)
|
|
244
|
+
]),
|
|
245
|
+
_: 1
|
|
246
|
+
})),
|
|
247
|
+
a("div", se, [
|
|
248
|
+
S(l.$slots, "content", {}, void 0, !0)
|
|
253
249
|
])
|
|
254
|
-
]
|
|
255
|
-
],
|
|
256
|
-
])
|
|
257
|
-
]
|
|
258
|
-
|
|
250
|
+
])
|
|
251
|
+
], 2)
|
|
252
|
+
], 512)
|
|
253
|
+
])
|
|
254
|
+
], 4));
|
|
259
255
|
}
|
|
260
256
|
}), ie = (e, o) => {
|
|
261
257
|
const s = e.__vccOpts || e;
|
|
262
258
|
for (const [c, t] of o)
|
|
263
259
|
s[c] = t;
|
|
264
260
|
return s;
|
|
265
|
-
}, ue = /* @__PURE__ */ ie(le, [["__scopeId", "data-v-
|
|
261
|
+
}, ue = /* @__PURE__ */ ie(le, [["__scopeId", "data-v-fb05edc4"]]);
|
|
266
262
|
export {
|
|
267
263
|
ce as MclContainerA,
|
|
268
264
|
ue as MclContainerB
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".space-hts[data-v-
|
|
2
|
-
(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]"},
|
|
1
|
+
(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)}})();
|
|
2
|
+
(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]"},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",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,k)],2))])],2))}});function V(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}function O(t){return typeof t=="function"?t():e.unref(t)}const N=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 f(t){var n;const s=O(t);return(n=s==null?void 0:s.$el)!=null?n:s}const y=N?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 A(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)},h=e.computed(()=>Array.isArray(t)?t.map(l=>f(l)):[f(t)]),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=y,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.ref(n.width),c=e.ref(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=a.getComputedStyle(C);i.value=Number.parseFloat(u.width),c.value=Number.parseFloat(u.height)}}else if(m){const C=Array.isArray(m)?m:[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);L(()=>{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"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-container",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"description": "basic container components based on manguito-theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"vite-plugin-dts": "^3.8.3",
|
|
47
47
|
"vue-tsc": "^1.8.25"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "d807567cd0c66c7a1c36d29c588c9298564c6432"
|
|
50
50
|
}
|