@bobbykim/mcl-container 0.7.1 → 0.8.0
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/index.d.ts +70 -117
- package/dist/mcl-container.js +49 -46
- package/dist/mcl-container.umd.cjs +1 -1
- package/package.json +12 -12
package/dist/index.d.ts
CHANGED
|
@@ -1,55 +1,89 @@
|
|
|
1
1
|
import { ColorPalette } from '@bobbykim/manguito-theme';
|
|
2
2
|
import { ColumnWidth } from '@bobbykim/manguito-theme';
|
|
3
3
|
import { ComponentOptionsMixin } from 'vue';
|
|
4
|
+
import { ComponentProvideOptions } from 'vue';
|
|
4
5
|
import { DefineComponent } from 'vue';
|
|
5
6
|
import { DirectionX } from '@bobbykim/manguito-theme';
|
|
6
|
-
import { ExtractPropTypes } from 'vue';
|
|
7
7
|
import { HeadingLevel } from '@bobbykim/manguito-theme';
|
|
8
8
|
import { HeadingSize } from '@bobbykim/manguito-theme';
|
|
9
|
-
import { PropType } from 'vue';
|
|
10
9
|
import { PublicProps } from 'vue';
|
|
11
10
|
|
|
12
|
-
declare
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
declare const __VLS_component: DefineComponent< {
|
|
12
|
+
sectionBg?: ColorPalette;
|
|
13
|
+
containerBg?: ColorPalette;
|
|
14
|
+
topDirection?: DirectionX;
|
|
15
|
+
bottomDirection?: DirectionX;
|
|
16
|
+
twoColumns?: boolean;
|
|
17
|
+
leftColumnWidth?: ColumnWidth;
|
|
18
|
+
}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
|
|
19
|
+
sectionBg?: ColorPalette;
|
|
20
|
+
containerBg?: ColorPalette;
|
|
21
|
+
topDirection?: DirectionX;
|
|
22
|
+
bottomDirection?: DirectionX;
|
|
23
|
+
twoColumns?: boolean;
|
|
24
|
+
leftColumnWidth?: ColumnWidth;
|
|
25
|
+
}> & Readonly<{}>, {
|
|
26
|
+
sectionBg: ColorPalette;
|
|
27
|
+
containerBg: ColorPalette;
|
|
28
|
+
topDirection: DirectionX;
|
|
29
|
+
bottomDirection: DirectionX;
|
|
30
|
+
twoColumns: boolean;
|
|
31
|
+
leftColumnWidth: ColumnWidth;
|
|
32
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
19
33
|
|
|
20
|
-
declare
|
|
21
|
-
|
|
22
|
-
|
|
34
|
+
declare const __VLS_component_2: DefineComponent< {
|
|
35
|
+
sectionBgColor?: ColorPalette;
|
|
36
|
+
containerBgColor?: ColorPalette;
|
|
37
|
+
imageSource: string;
|
|
38
|
+
imageAlt: string;
|
|
39
|
+
title: string;
|
|
40
|
+
titleLevel?: HeadingLevel;
|
|
41
|
+
titleSize?: HeadingSize;
|
|
42
|
+
titleColor?: ColorPalette;
|
|
43
|
+
}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
|
|
44
|
+
sectionBgColor?: ColorPalette;
|
|
45
|
+
containerBgColor?: ColorPalette;
|
|
46
|
+
imageSource: string;
|
|
47
|
+
imageAlt: string;
|
|
48
|
+
title: string;
|
|
49
|
+
titleLevel?: HeadingLevel;
|
|
50
|
+
titleSize?: HeadingSize;
|
|
51
|
+
titleColor?: ColorPalette;
|
|
52
|
+
}> & Readonly<{}>, {
|
|
53
|
+
sectionBgColor: ColorPalette;
|
|
54
|
+
containerBgColor: ColorPalette;
|
|
55
|
+
titleLevel: HeadingLevel;
|
|
56
|
+
titleSize: HeadingSize;
|
|
57
|
+
titleColor: ColorPalette;
|
|
58
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
23
59
|
|
|
24
|
-
declare
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
60
|
+
declare function __VLS_template(): {
|
|
61
|
+
slots: Readonly<{
|
|
62
|
+
'left-column': any;
|
|
63
|
+
'right-column': any;
|
|
64
|
+
}> & {
|
|
65
|
+
'left-column': any;
|
|
66
|
+
'right-column': any;
|
|
30
67
|
};
|
|
68
|
+
refs: {};
|
|
69
|
+
attrs: Partial<{}>;
|
|
31
70
|
};
|
|
32
71
|
|
|
33
|
-
declare
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
required: true;
|
|
72
|
+
declare function __VLS_template_2(): {
|
|
73
|
+
slots: Readonly<{
|
|
74
|
+
content: any;
|
|
75
|
+
}> & {
|
|
76
|
+
content: any;
|
|
39
77
|
};
|
|
78
|
+
refs: {
|
|
79
|
+
mainContentElem: HTMLDivElement;
|
|
80
|
+
};
|
|
81
|
+
attrs: Partial<{}>;
|
|
40
82
|
};
|
|
41
83
|
|
|
42
|
-
declare type
|
|
43
|
-
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
44
|
-
default: D[K];
|
|
45
|
-
}> : P[K];
|
|
46
|
-
};
|
|
84
|
+
declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
47
85
|
|
|
48
|
-
declare type
|
|
49
|
-
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify_2<P[K] & {
|
|
50
|
-
default: D[K];
|
|
51
|
-
}> : P[K];
|
|
52
|
-
};
|
|
86
|
+
declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
|
|
53
87
|
|
|
54
88
|
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
55
89
|
new (): {
|
|
@@ -63,89 +97,8 @@ declare type __VLS_WithTemplateSlots_2<T, S> = T & {
|
|
|
63
97
|
};
|
|
64
98
|
};
|
|
65
99
|
|
|
66
|
-
export declare const MclContainerA: __VLS_WithTemplateSlots<
|
|
67
|
-
sectionBg?: ColorPalette | undefined;
|
|
68
|
-
containerBg?: ColorPalette | undefined;
|
|
69
|
-
topDirection?: DirectionX | undefined;
|
|
70
|
-
bottomDirection?: DirectionX | undefined;
|
|
71
|
-
twoColumns?: boolean | undefined;
|
|
72
|
-
leftColumnWidth?: ColumnWidth | undefined;
|
|
73
|
-
}>, {
|
|
74
|
-
sectionBg: string;
|
|
75
|
-
containerBg: string;
|
|
76
|
-
topDirection: string;
|
|
77
|
-
bottomDirection: string;
|
|
78
|
-
twoColumns: boolean;
|
|
79
|
-
leftColumnWidth: number;
|
|
80
|
-
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
81
|
-
sectionBg?: ColorPalette | undefined;
|
|
82
|
-
containerBg?: ColorPalette | undefined;
|
|
83
|
-
topDirection?: DirectionX | undefined;
|
|
84
|
-
bottomDirection?: DirectionX | undefined;
|
|
85
|
-
twoColumns?: boolean | undefined;
|
|
86
|
-
leftColumnWidth?: ColumnWidth | undefined;
|
|
87
|
-
}>, {
|
|
88
|
-
sectionBg: string;
|
|
89
|
-
containerBg: string;
|
|
90
|
-
topDirection: string;
|
|
91
|
-
bottomDirection: string;
|
|
92
|
-
twoColumns: boolean;
|
|
93
|
-
leftColumnWidth: number;
|
|
94
|
-
}>>>, {
|
|
95
|
-
sectionBg: ColorPalette;
|
|
96
|
-
containerBg: ColorPalette;
|
|
97
|
-
topDirection: DirectionX;
|
|
98
|
-
bottomDirection: DirectionX;
|
|
99
|
-
twoColumns: boolean;
|
|
100
|
-
leftColumnWidth: ColumnWidth;
|
|
101
|
-
}, {}>, Readonly<{
|
|
102
|
-
'left-column': any;
|
|
103
|
-
'right-column': any;
|
|
104
|
-
}> & {
|
|
105
|
-
'left-column': any;
|
|
106
|
-
'right-column': any;
|
|
107
|
-
}>;
|
|
100
|
+
export declare const MclContainerA: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
108
101
|
|
|
109
|
-
export declare const MclContainerB: __VLS_WithTemplateSlots_2<
|
|
110
|
-
sectionBgColor?: ColorPalette | undefined;
|
|
111
|
-
containerBgColor?: ColorPalette | undefined;
|
|
112
|
-
imageSource: string;
|
|
113
|
-
imageAlt: string;
|
|
114
|
-
title: string;
|
|
115
|
-
titleLevel?: HeadingLevel | undefined;
|
|
116
|
-
titleSize?: HeadingSize | undefined;
|
|
117
|
-
titleColor?: ColorPalette | undefined;
|
|
118
|
-
}>, {
|
|
119
|
-
sectionBgColor: string;
|
|
120
|
-
containerBgColor: string;
|
|
121
|
-
titleLevel: string;
|
|
122
|
-
titleSize: string;
|
|
123
|
-
titleColor: string;
|
|
124
|
-
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_2<__VLS_TypePropsToRuntimeProps_2<{
|
|
125
|
-
sectionBgColor?: ColorPalette | undefined;
|
|
126
|
-
containerBgColor?: ColorPalette | undefined;
|
|
127
|
-
imageSource: string;
|
|
128
|
-
imageAlt: string;
|
|
129
|
-
title: string;
|
|
130
|
-
titleLevel?: HeadingLevel | undefined;
|
|
131
|
-
titleSize?: HeadingSize | undefined;
|
|
132
|
-
titleColor?: ColorPalette | undefined;
|
|
133
|
-
}>, {
|
|
134
|
-
sectionBgColor: string;
|
|
135
|
-
containerBgColor: string;
|
|
136
|
-
titleLevel: string;
|
|
137
|
-
titleSize: string;
|
|
138
|
-
titleColor: string;
|
|
139
|
-
}>>>, {
|
|
140
|
-
sectionBgColor: ColorPalette;
|
|
141
|
-
containerBgColor: ColorPalette;
|
|
142
|
-
titleLevel: HeadingLevel;
|
|
143
|
-
titleSize: HeadingSize;
|
|
144
|
-
titleColor: ColorPalette;
|
|
145
|
-
}, {}>, Readonly<{
|
|
146
|
-
content: any;
|
|
147
|
-
}> & {
|
|
148
|
-
content: any;
|
|
149
|
-
}>;
|
|
102
|
+
export declare const MclContainerB: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
|
|
150
103
|
|
|
151
104
|
export { }
|
package/dist/mcl-container.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
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
|
|
3
|
-
import
|
|
4
|
-
const
|
|
2
|
+
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";
|
|
3
|
+
import d from "@bobbykim/manguito-theme";
|
|
4
|
+
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({
|
|
5
5
|
__name: "MclContainerA",
|
|
6
6
|
props: {
|
|
7
7
|
sectionBg: { default: "light-1" },
|
|
@@ -12,7 +12,7 @@ const T = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, F
|
|
|
12
12
|
leftColumnWidth: { default: 50 }
|
|
13
13
|
},
|
|
14
14
|
setup(e) {
|
|
15
|
-
|
|
15
|
+
R();
|
|
16
16
|
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) => {
|
|
17
17
|
if (!t)
|
|
18
18
|
return "md:col-span-4";
|
|
@@ -44,24 +44,24 @@ const T = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, F
|
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
46
|
return (t, i) => (h(), y("section", {
|
|
47
|
-
class: p(["py-lg lg:py-xl", f(
|
|
47
|
+
class: p(["py-lg lg:py-xl", f(d)("BGCOLOR", t.sectionBg)])
|
|
48
48
|
}, [
|
|
49
|
-
a("div",
|
|
49
|
+
a("div", F, [
|
|
50
50
|
(h(), y("svg", {
|
|
51
|
-
class: p(["block absolute left-0 inset-x-0 h-full w-full", f(
|
|
51
|
+
class: p(["block absolute left-0 inset-x-0 h-full w-full", f(d)("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, N)
|
|
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", f(
|
|
62
|
+
class: p(["py-md md:py-lg lg:py-xl px-sm md:px-md lg:px-lg", f(d)("BGCOLOR", t.containerBg)])
|
|
63
63
|
}, [
|
|
64
|
-
a("div",
|
|
64
|
+
a("div", P, [
|
|
65
65
|
a("div", {
|
|
66
66
|
class: p(s(t.twoColumns, t.leftColumnWidth))
|
|
67
67
|
}, [
|
|
@@ -72,28 +72,28 @@ const T = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, F
|
|
|
72
72
|
class: p(c(t.twoColumns, t.leftColumnWidth))
|
|
73
73
|
}, [
|
|
74
74
|
S(t.$slots, "right-column")
|
|
75
|
-
], 2)) :
|
|
75
|
+
], 2)) : z("", !0)
|
|
76
76
|
])
|
|
77
77
|
], 2),
|
|
78
|
-
a("div",
|
|
78
|
+
a("div", j, [
|
|
79
79
|
(h(), y("svg", {
|
|
80
|
-
class: p(["block absolute left-0 inset-x-0 h-full w-full", f(
|
|
80
|
+
class: p(["block absolute left-0 inset-x-0 h-full w-full", f(d)("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, U)
|
|
88
88
|
], 2))
|
|
89
89
|
])
|
|
90
90
|
], 2));
|
|
91
91
|
}
|
|
92
92
|
});
|
|
93
|
-
function U(e) {
|
|
94
|
-
return G() ? (M(e), !0) : !1;
|
|
95
|
-
}
|
|
96
93
|
function X(e) {
|
|
94
|
+
return M() ? (D(e), !0) : !1;
|
|
95
|
+
}
|
|
96
|
+
function W(e) {
|
|
97
97
|
return typeof e == "function" ? e() : f(e);
|
|
98
98
|
}
|
|
99
99
|
const q = typeof window < "u" && typeof document < "u";
|
|
@@ -102,17 +102,17 @@ function J(e) {
|
|
|
102
102
|
return k();
|
|
103
103
|
}
|
|
104
104
|
function K(e, o = !0, s) {
|
|
105
|
-
J() ?
|
|
105
|
+
J() ? L(e, s) : o ? e() : G(e);
|
|
106
106
|
}
|
|
107
|
+
const $ = q ? window : void 0;
|
|
107
108
|
function g(e) {
|
|
108
109
|
var o;
|
|
109
|
-
const s =
|
|
110
|
+
const s = W(e);
|
|
110
111
|
return (o = s == null ? void 0 : s.$el) != null ? o : s;
|
|
111
112
|
}
|
|
112
|
-
const W = q ? window : void 0;
|
|
113
113
|
function Q() {
|
|
114
114
|
const e = _(!1), o = k();
|
|
115
|
-
return o &&
|
|
115
|
+
return o && L(() => {
|
|
116
116
|
e.value = !0;
|
|
117
117
|
}, o), e;
|
|
118
118
|
}
|
|
@@ -121,44 +121,47 @@ function Y(e) {
|
|
|
121
121
|
return B(() => (o.value, !!e()));
|
|
122
122
|
}
|
|
123
123
|
function Z(e, o, s = {}) {
|
|
124
|
-
const { window: c =
|
|
124
|
+
const { window: c = $, ...t } = s;
|
|
125
125
|
let i;
|
|
126
126
|
const l = Y(() => c && "ResizeObserver" in c), r = () => {
|
|
127
127
|
i && (i.disconnect(), i = void 0);
|
|
128
|
-
}, v = B(() =>
|
|
128
|
+
}, v = B(() => {
|
|
129
|
+
const n = W(e);
|
|
130
|
+
return Array.isArray(n) ? n.map((u) => g(u)) : [g(n)];
|
|
131
|
+
}), C = A(
|
|
129
132
|
v,
|
|
130
133
|
(n) => {
|
|
131
134
|
if (r(), l.value && c) {
|
|
132
135
|
i = new ResizeObserver(o);
|
|
133
|
-
for (const
|
|
134
|
-
|
|
136
|
+
for (const u of n)
|
|
137
|
+
u && i.observe(u, t);
|
|
135
138
|
}
|
|
136
139
|
},
|
|
137
140
|
{ immediate: !0, flush: "post" }
|
|
138
141
|
), b = () => {
|
|
139
142
|
r(), C();
|
|
140
143
|
};
|
|
141
|
-
return
|
|
144
|
+
return X(b), {
|
|
142
145
|
isSupported: l,
|
|
143
146
|
stop: b
|
|
144
147
|
};
|
|
145
148
|
}
|
|
146
149
|
function ee(e, o = { width: 0, height: 0 }, s = {}) {
|
|
147
|
-
const { window: c =
|
|
148
|
-
var n,
|
|
149
|
-
return (
|
|
150
|
+
const { window: c = $, box: t = "content-box" } = s, i = B(() => {
|
|
151
|
+
var n, u;
|
|
152
|
+
return (u = (n = g(e)) == null ? void 0 : n.namespaceURI) == null ? void 0 : u.includes("svg");
|
|
150
153
|
}), l = _(o.width), r = _(o.height), { stop: v } = Z(
|
|
151
154
|
e,
|
|
152
155
|
([n]) => {
|
|
153
|
-
const
|
|
156
|
+
const u = t === "border-box" ? n.borderBoxSize : t === "content-box" ? n.contentBoxSize : n.devicePixelContentBoxSize;
|
|
154
157
|
if (c && i.value) {
|
|
155
158
|
const w = g(e);
|
|
156
159
|
if (w) {
|
|
157
|
-
const m =
|
|
158
|
-
l.value =
|
|
160
|
+
const m = w.getBoundingClientRect();
|
|
161
|
+
l.value = m.width, r.value = m.height;
|
|
159
162
|
}
|
|
160
|
-
} else if (
|
|
161
|
-
const w = Array.isArray(
|
|
163
|
+
} else if (u) {
|
|
164
|
+
const w = Array.isArray(u) ? u : [u];
|
|
162
165
|
l.value = w.reduce((m, { inlineSize: x }) => m + x, 0), r.value = w.reduce((m, { blockSize: x }) => m + x, 0);
|
|
163
166
|
} else
|
|
164
167
|
l.value = n.contentRect.width, r.value = n.contentRect.height;
|
|
@@ -198,16 +201,16 @@ const te = { class: "relative" }, oe = ["aria-label"], ne = { class: "w-full" },
|
|
|
198
201
|
},
|
|
199
202
|
setup(e) {
|
|
200
203
|
const o = e;
|
|
201
|
-
|
|
204
|
+
R();
|
|
202
205
|
const s = _(), { height: c } = ee(s), t = B(() => {
|
|
203
206
|
const { titleLevel: l, titleSize: r, titleColor: v } = o, C = {
|
|
204
|
-
h1:
|
|
205
|
-
h2:
|
|
206
|
-
h3:
|
|
207
|
-
h4:
|
|
207
|
+
h1: d("H1", r),
|
|
208
|
+
h2: d("H2", r),
|
|
209
|
+
h3: d("H3", r),
|
|
210
|
+
h4: d("H4", r)
|
|
208
211
|
};
|
|
209
212
|
return [
|
|
210
|
-
|
|
213
|
+
d("TEXTCOLOR", v),
|
|
211
214
|
C[l]
|
|
212
215
|
].join(" ");
|
|
213
216
|
}), i = B(() => ({
|
|
@@ -216,10 +219,10 @@ const te = { class: "relative" }, oe = ["aria-label"], ne = { class: "w-full" },
|
|
|
216
219
|
}));
|
|
217
220
|
return (l, r) => (h(), y("section", {
|
|
218
221
|
class: "relative",
|
|
219
|
-
style:
|
|
222
|
+
style: E(i.value)
|
|
220
223
|
}, [
|
|
221
224
|
a("div", {
|
|
222
|
-
class: p([f(
|
|
225
|
+
class: p([f(d)("BGCOLOR", l.sectionBgColor), "space-hts"])
|
|
223
226
|
}, null, 2),
|
|
224
227
|
a("div", te, [
|
|
225
228
|
a("div", {
|
|
@@ -233,14 +236,14 @@ const te = { class: "relative" }, oe = ["aria-label"], ne = { class: "w-full" },
|
|
|
233
236
|
ref: s
|
|
234
237
|
}, [
|
|
235
238
|
a("div", {
|
|
236
|
-
class: p([f(
|
|
239
|
+
class: p([f(d)("BGCOLOR", l.containerBgColor), "py-md md:py-lg px-xs md:px-md lg:p-xl"])
|
|
237
240
|
}, [
|
|
238
241
|
a("div", ne, [
|
|
239
|
-
(h(),
|
|
240
|
-
default:
|
|
242
|
+
(h(), I(H(l.titleLevel), null, {
|
|
243
|
+
default: V(() => [
|
|
241
244
|
a("span", {
|
|
242
245
|
class: p(t.value)
|
|
243
|
-
},
|
|
246
|
+
}, T(l.title), 3)
|
|
244
247
|
]),
|
|
245
248
|
_: 1
|
|
246
249
|
})),
|
|
@@ -1,2 +1,2 @@
|
|
|
1
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,
|
|
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,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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-container",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "basic container components based on manguito-theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -33,18 +33,18 @@
|
|
|
33
33
|
},
|
|
34
34
|
"license": "MIT",
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@bobbykim/manguito-theme": "0.
|
|
37
|
-
"@vueuse/core": "^
|
|
38
|
-
"vue": "^3.
|
|
36
|
+
"@bobbykim/manguito-theme": "0.23.0",
|
|
37
|
+
"@vueuse/core": "^12.0.0",
|
|
38
|
+
"vue": "^3.5.13"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@vitejs/plugin-vue": "^
|
|
42
|
-
"sass": "^1.
|
|
43
|
-
"typescript": "^5.
|
|
44
|
-
"vite": "^
|
|
45
|
-
"vite-plugin-css-injected-by-js": "^3.5.
|
|
46
|
-
"vite-plugin-dts": "^3.
|
|
47
|
-
"vue-tsc": "^1.
|
|
41
|
+
"@vitejs/plugin-vue": "^5.2.1",
|
|
42
|
+
"sass": "^1.82.0",
|
|
43
|
+
"typescript": "^5.7.2",
|
|
44
|
+
"vite": "^6.0.3",
|
|
45
|
+
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
46
|
+
"vite-plugin-dts": "^4.3.0",
|
|
47
|
+
"vue-tsc": "^2.1.10"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "0c86a1a70a33446112dafbaf5fce5fdcb5fdf755"
|
|
50
50
|
}
|