@bobbykim/mcl-footer 0.10.6 → 0.10.8
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 +3 -0
- package/dist/mcl-footer.js +65 -61
- package/dist/mcl-footer.umd.cjs +3 -3
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -29,6 +29,7 @@ highlightColor: ColorPalette;
|
|
|
29
29
|
bgColor: ColorPalette;
|
|
30
30
|
borderTopColor: ColorPalette;
|
|
31
31
|
headlineColor: ColorPalette;
|
|
32
|
+
navLabel: string;
|
|
32
33
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
|
|
33
34
|
|
|
34
35
|
declare type __VLS_Props = {
|
|
@@ -54,6 +55,8 @@ declare type __VLS_Props = {
|
|
|
54
55
|
bgColor?: ColorPalette;
|
|
55
56
|
borderTopColor?: ColorPalette;
|
|
56
57
|
headlineColor?: ColorPalette;
|
|
58
|
+
/** aria-label of the footer's nav landmark. */
|
|
59
|
+
navLabel?: string;
|
|
57
60
|
};
|
|
58
61
|
|
|
59
62
|
declare function __VLS_template(): {
|
package/dist/mcl-footer.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.nav__decorator[data-v-
|
|
2
|
-
import { defineComponent as
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.nav__decorator[data-v-5d63d453]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-5d63d453]:before,.nav__text:hover+.nav__decorator[data-v-5d63d453]:before{width:100%}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
import { defineComponent as y, computed as w, openBlock as r, createElementBlock as c, Fragment as v, renderList as L, createElementVNode as o, normalizeClass as d, unref as h, createVNode as I, createCommentVNode as x, renderSlot as V } from "vue";
|
|
3
3
|
import { generateClass as a } from "@bobbykim/manguito-theme";
|
|
4
|
-
const
|
|
4
|
+
const A = `<svg
|
|
5
5
|
xmlns="http://www.w3.org/2000/svg"
|
|
6
6
|
viewBox="0 0 448 512"
|
|
7
7
|
fill="currentColor"
|
|
@@ -13,7 +13,7 @@ const _ = `<svg
|
|
|
13
13
|
<path
|
|
14
14
|
d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z"
|
|
15
15
|
/>
|
|
16
|
-
</svg>`,
|
|
16
|
+
</svg>`, M = `<svg
|
|
17
17
|
xmlns="http://www.w3.org/2000/svg"
|
|
18
18
|
viewBox="0 0 448 512"
|
|
19
19
|
fill="currentColor"
|
|
@@ -25,7 +25,7 @@ const _ = `<svg
|
|
|
25
25
|
<path
|
|
26
26
|
d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z"
|
|
27
27
|
/>
|
|
28
|
-
</svg>`,
|
|
28
|
+
</svg>`, z = `<svg
|
|
29
29
|
xmlns="http://www.w3.org/2000/svg"
|
|
30
30
|
viewBox="0 0 448 512"
|
|
31
31
|
fill="currentColor"
|
|
@@ -37,7 +37,7 @@ const _ = `<svg
|
|
|
37
37
|
<path
|
|
38
38
|
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
|
|
39
39
|
/>
|
|
40
|
-
</svg>`,
|
|
40
|
+
</svg>`, H = `<svg
|
|
41
41
|
xmlns="http://www.w3.org/2000/svg"
|
|
42
42
|
viewBox="0 0 448 512"
|
|
43
43
|
fill="currentColor"
|
|
@@ -49,7 +49,7 @@ const _ = `<svg
|
|
|
49
49
|
<path
|
|
50
50
|
d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm297.1 84L257.3 234.6 379.4 396H283.8L209 298.1 123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5L313.6 116h47.5zM323.3 367.6L153.4 142.9H125.1L296.9 367.6h26.3z"
|
|
51
51
|
/>
|
|
52
|
-
</svg>`,
|
|
52
|
+
</svg>`, _ = { class: "flex flex-wrap" }, T = ["href", "aria-label"], B = ["innerHTML"], j = /* @__PURE__ */ y({
|
|
53
53
|
__name: "SocialIcons",
|
|
54
54
|
props: {
|
|
55
55
|
iconColor: { default: "light-1" },
|
|
@@ -60,38 +60,38 @@ const _ = `<svg
|
|
|
60
60
|
const t = [];
|
|
61
61
|
return s.socialLinks?.linkedin && t.push({
|
|
62
62
|
url: s.socialLinks.linkedin,
|
|
63
|
-
icon:
|
|
64
|
-
label: "
|
|
63
|
+
icon: z,
|
|
64
|
+
label: "LinkedIn (opens in new tab)"
|
|
65
65
|
}), s.socialLinks?.github && t.push({
|
|
66
66
|
url: s.socialLinks.github,
|
|
67
|
-
icon:
|
|
68
|
-
label: "
|
|
67
|
+
icon: A,
|
|
68
|
+
label: "GitHub (opens in new tab)"
|
|
69
69
|
}), s.socialLinks?.instagram && t.push({
|
|
70
70
|
url: s.socialLinks.instagram,
|
|
71
|
-
icon:
|
|
72
|
-
label: "
|
|
71
|
+
icon: M,
|
|
72
|
+
label: "Instagram (opens in new tab)"
|
|
73
73
|
}), s.socialLinks?.twitter && t.push({
|
|
74
74
|
url: s.socialLinks.twitter,
|
|
75
|
-
icon:
|
|
76
|
-
label: "
|
|
75
|
+
icon: H,
|
|
76
|
+
label: "X (Twitter) (opens in new tab)"
|
|
77
77
|
}), t;
|
|
78
78
|
}), f = (t) => [
|
|
79
79
|
a.textColorVariant({ color: t }),
|
|
80
80
|
a.ringColorVariant({ color: t })
|
|
81
81
|
].join(" ");
|
|
82
|
-
return (t, k) => (r(), c("ul",
|
|
83
|
-
(r(!0), c(v, null,
|
|
84
|
-
key:
|
|
82
|
+
return (t, k) => (r(), c("ul", _, [
|
|
83
|
+
(r(!0), c(v, null, L(m.value, (g, b) => (r(), c("li", {
|
|
84
|
+
key: b,
|
|
85
85
|
class: "mr-xs last:mr-0"
|
|
86
86
|
}, [
|
|
87
|
-
|
|
87
|
+
o("a", {
|
|
88
88
|
href: g.url,
|
|
89
89
|
target: "_blank",
|
|
90
|
+
rel: "noopener noreferrer",
|
|
90
91
|
class: d(["inline-block rounded-md ring-offset-2 ring-offset-transparent transition-all duration-300 ease-linear outline-none hover:opacity-70 hover:ring-2 focus:ring-2", f(e.iconColor)]),
|
|
91
|
-
"aria-label": g.label
|
|
92
|
-
role: "button"
|
|
92
|
+
"aria-label": g.label
|
|
93
93
|
}, [
|
|
94
|
-
|
|
94
|
+
o("div", {
|
|
95
95
|
innerHTML: g.icon
|
|
96
96
|
}, null, 8, B)
|
|
97
97
|
], 10, T)
|
|
@@ -101,10 +101,10 @@ const _ = `<svg
|
|
|
101
101
|
}), F = { class: "container px-xs md:px-lg lg:px-xl" }, S = { class: "mb-xs h-lg align-middle md:h-xl" }, $ = ["href", "target"], Z = ["src", "alt"], N = {
|
|
102
102
|
key: 0,
|
|
103
103
|
class: "mb-xs flex items-center justify-end md:justify-center"
|
|
104
|
-
}, P = { class: "flex flex-wrap items-center gap-6 md:items-start md:justify-between md:gap-8" }, D = { class: "grid basis-full justify-items-center gap-2 md:basis-1/3" }, E = ["innerHTML"], G = { class: "px-xs md:px-0" },
|
|
104
|
+
}, P = { class: "flex flex-wrap items-center gap-6 md:items-start md:justify-between md:gap-8" }, D = { class: "grid basis-full justify-items-center gap-2 md:basis-1/3" }, E = ["innerHTML"], G = { class: "px-xs md:px-0" }, X = ["aria-label"], O = { class: "flex flex-wrap items-center justify-center gap-2xs md:flex-col" }, q = ["href", "target", "onClick", "innerHTML"], J = {
|
|
105
105
|
key: 0,
|
|
106
106
|
class: "flex flex-wrap items-center justify-center gap-2xs md:flex-col"
|
|
107
|
-
}, K = ["href", "target", "onClick", "innerHTML"], Q = /* @__PURE__ */
|
|
107
|
+
}, K = ["href", "target", "onClick", "innerHTML"], Q = /* @__PURE__ */ y({
|
|
108
108
|
__name: "MclFooterA",
|
|
109
109
|
props: {
|
|
110
110
|
title: {},
|
|
@@ -128,7 +128,8 @@ const _ = `<svg
|
|
|
128
128
|
highlightColor: { default: "primary" },
|
|
129
129
|
bgColor: { default: "dark-3" },
|
|
130
130
|
borderTopColor: { default: "primary" },
|
|
131
|
-
headlineColor: { default: "light-1" }
|
|
131
|
+
headlineColor: { default: "light-1" },
|
|
132
|
+
navLabel: { default: "Footer" }
|
|
132
133
|
},
|
|
133
134
|
emits: ["logo-click", "menu-click"],
|
|
134
135
|
setup(e, { emit: s }) {
|
|
@@ -145,33 +146,33 @@ const _ = `<svg
|
|
|
145
146
|
a.textColorVariant({ color: i })
|
|
146
147
|
].join(" ");
|
|
147
148
|
}), g = w(() => {
|
|
148
|
-
const { menuTextSize: l, menuTextColor: i, menuTextBold:
|
|
149
|
+
const { menuTextSize: l, menuTextColor: i, menuTextBold: n } = m, u = [
|
|
149
150
|
a.bodyTextVariant({ size: l }),
|
|
150
151
|
a.textColorVariant({ color: i })
|
|
151
152
|
];
|
|
152
|
-
return
|
|
153
|
-
}),
|
|
154
|
-
const { logoAsLink: i, logoLink:
|
|
155
|
-
i || l.preventDefault(), f("logo-click", l,
|
|
156
|
-
},
|
|
157
|
-
const { menuItemAsLink:
|
|
158
|
-
|
|
153
|
+
return n && u.push("font-bold"), u.join(" ");
|
|
154
|
+
}), b = (l) => {
|
|
155
|
+
const { logoAsLink: i, logoLink: n, logoLinkTarget: u } = m;
|
|
156
|
+
i || l.preventDefault(), f("logo-click", l, n, u);
|
|
157
|
+
}, p = (l, i) => {
|
|
158
|
+
const { menuItemAsLink: n } = m;
|
|
159
|
+
n || l.preventDefault(), f("menu-click", l, i);
|
|
159
160
|
};
|
|
160
161
|
return (l, i) => (r(), c("footer", {
|
|
161
162
|
class: d(["border-t-2 py-6 sm:py-8 md:py-12", t.value])
|
|
162
163
|
}, [
|
|
163
|
-
|
|
164
|
-
|
|
164
|
+
o("div", F, [
|
|
165
|
+
o("div", {
|
|
165
166
|
class: d(["mb-xs flex flex-col flex-wrap justify-between border-b-2 px-xs md:mb-md md:flex-row md:px-md", h(a).borderColorVariant({ color: e.headlineColor })])
|
|
166
167
|
}, [
|
|
167
|
-
|
|
168
|
-
|
|
168
|
+
o("div", S, [
|
|
169
|
+
o("a", {
|
|
169
170
|
href: e.logoLink,
|
|
170
171
|
target: e.logoLinkTarget,
|
|
171
172
|
class: d(["inline-block h-full rounded-md ring-offset-2 ring-offset-transparent transition-all duration-300 ease-linear outline-none focus:ring-2", h(a).ringColorVariant({ color: e.titleColor })]),
|
|
172
|
-
onClick: i[0] || (i[0] = (
|
|
173
|
+
onClick: i[0] || (i[0] = (n) => b(n))
|
|
173
174
|
}, [
|
|
174
|
-
|
|
175
|
+
o("img", {
|
|
175
176
|
class: "inline-block h-full",
|
|
176
177
|
src: e.logo,
|
|
177
178
|
alt: e.logoAlt
|
|
@@ -179,34 +180,37 @@ const _ = `<svg
|
|
|
179
180
|
], 10, $)
|
|
180
181
|
]),
|
|
181
182
|
e.showSocialIcons ? (r(), c("div", N, [
|
|
182
|
-
|
|
183
|
+
I(j, {
|
|
183
184
|
"social-links": e.socialLinks,
|
|
184
185
|
"icon-color": e.socialIconColor
|
|
185
186
|
}, null, 8, ["social-links", "icon-color"])
|
|
186
187
|
])) : x("", !0)
|
|
187
188
|
], 2),
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
189
|
+
o("div", P, [
|
|
190
|
+
o("div", D, [
|
|
191
|
+
o("h2", {
|
|
191
192
|
class: d(["inline-block align-middle tracking-wider", k.value]),
|
|
192
193
|
innerHTML: e.title
|
|
193
194
|
}, null, 10, E),
|
|
194
|
-
|
|
195
|
-
|
|
195
|
+
o("div", G, [
|
|
196
|
+
V(l.$slots, "default", {}, void 0, !0)
|
|
196
197
|
])
|
|
197
198
|
]),
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
199
|
+
o("nav", {
|
|
200
|
+
"aria-label": e.navLabel,
|
|
201
|
+
class: "flex grow flex-col items-center justify-between gap-xs text-center text-sm sm:flex-row sm:items-start sm:text-left md:basis-1/2 md:flex-row md:justify-around"
|
|
202
|
+
}, [
|
|
203
|
+
o("ul", O, [
|
|
204
|
+
(r(!0), c(v, null, L(e.menuItems, (n, u) => (r(), c("li", {
|
|
201
205
|
key: `first-nav-${u}`,
|
|
202
206
|
class: "inline-block"
|
|
203
207
|
}, [
|
|
204
|
-
|
|
205
|
-
href:
|
|
206
|
-
target:
|
|
208
|
+
o("a", {
|
|
209
|
+
href: n.url,
|
|
210
|
+
target: n.target ? n.target : "_self",
|
|
207
211
|
class: d(["nav__text tracking-wide outline-none", g.value]),
|
|
208
|
-
onClick: (
|
|
209
|
-
innerHTML:
|
|
212
|
+
onClick: (C) => p(C, n),
|
|
213
|
+
innerHTML: n.title
|
|
210
214
|
}, null, 10, q),
|
|
211
215
|
e.showHighlight ? (r(), c("div", {
|
|
212
216
|
key: 0,
|
|
@@ -218,16 +222,16 @@ const _ = `<svg
|
|
|
218
222
|
]))), 128))
|
|
219
223
|
]),
|
|
220
224
|
e.secondaryMenuItems ? (r(), c("ul", J, [
|
|
221
|
-
(r(!0), c(v, null,
|
|
225
|
+
(r(!0), c(v, null, L(e.secondaryMenuItems, (n, u) => (r(), c("li", {
|
|
222
226
|
key: `second-nav-${u}`,
|
|
223
227
|
class: "inline-block"
|
|
224
228
|
}, [
|
|
225
|
-
|
|
226
|
-
href:
|
|
227
|
-
target:
|
|
229
|
+
o("a", {
|
|
230
|
+
href: n.url,
|
|
231
|
+
target: n.target ? n.target : "_self",
|
|
228
232
|
class: d(["nav__text tracking-wide outline-none", g.value]),
|
|
229
|
-
onClick: (
|
|
230
|
-
innerHTML:
|
|
233
|
+
onClick: (C) => p(C, n),
|
|
234
|
+
innerHTML: n.title
|
|
231
235
|
}, null, 10, K),
|
|
232
236
|
e.showHighlight ? (r(), c("div", {
|
|
233
237
|
key: 0,
|
|
@@ -238,7 +242,7 @@ const _ = `<svg
|
|
|
238
242
|
}, null, 2)) : x("", !0)
|
|
239
243
|
]))), 128))
|
|
240
244
|
])) : x("", !0)
|
|
241
|
-
])
|
|
245
|
+
], 8, X)
|
|
242
246
|
])
|
|
243
247
|
])
|
|
244
248
|
], 2));
|
|
@@ -248,7 +252,7 @@ const _ = `<svg
|
|
|
248
252
|
for (const [f, t] of s)
|
|
249
253
|
m[f] = t;
|
|
250
254
|
return m;
|
|
251
|
-
}, Y = /* @__PURE__ */ R(Q, [["__scopeId", "data-v-
|
|
255
|
+
}, Y = /* @__PURE__ */ R(Q, [["__scopeId", "data-v-5d63d453"]]);
|
|
252
256
|
export {
|
|
253
257
|
Y as MclFooterA
|
|
254
258
|
};
|
package/dist/mcl-footer.umd.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.nav__decorator[data-v-
|
|
2
|
-
(function(
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.nav__decorator[data-v-5d63d453]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-5d63d453]:before,.nav__text:hover+.nav__decorator[data-v-5d63d453]:before{width:100%}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
(function(c,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):(c=typeof globalThis<"u"?globalThis:c||self,e(c.MclFooter={},c.Vue,c.ManguitoTheme))})(this,(function(c,e,s){"use strict";const x=`<svg
|
|
3
3
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
4
|
viewBox="0 0 448 512"
|
|
5
5
|
fill="currentColor"
|
|
@@ -47,4 +47,4 @@
|
|
|
47
47
|
<path
|
|
48
48
|
d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm297.1 84L257.3 234.6 379.4 396H283.8L209 298.1 123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5L313.6 116h47.5zM323.3 367.6L153.4 142.9H125.1L296.9 367.6h26.3z"
|
|
49
49
|
/>
|
|
50
|
-
</svg>`,b={class:"flex flex-wrap"},y=["href","aria-label"],L=["innerHTML"],V=e.defineComponent({__name:"SocialIcons",props:{iconColor:{default:"light-1"},socialLinks:{}},setup(
|
|
50
|
+
</svg>`,b={class:"flex flex-wrap"},y=["href","aria-label"],L=["innerHTML"],V=e.defineComponent({__name:"SocialIcons",props:{iconColor:{default:"light-1"},socialLinks:{}},setup(n){const a=n,i=e.computed(()=>{const o=[];return a.socialLinks?.linkedin&&o.push({url:a.socialLinks.linkedin,icon:p,label:"LinkedIn (opens in new tab)"}),a.socialLinks?.github&&o.push({url:a.socialLinks.github,icon:x,label:"GitHub (opens in new tab)"}),a.socialLinks?.instagram&&o.push({url:a.socialLinks.instagram,icon:u,label:"Instagram (opens in new tab)"}),a.socialLinks?.twitter&&o.push({url:a.socialLinks.twitter,icon:w,label:"X (Twitter) (opens in new tab)"}),o}),d=o=>[s.generateClass.textColorVariant({color:o}),s.generateClass.ringColorVariant({color:o})].join(" ");return(o,g)=>(e.openBlock(),e.createElementBlock("ul",b,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(f,h)=>(e.openBlock(),e.createElementBlock("li",{key:h,class:"mr-xs last:mr-0"},[e.createElementVNode("a",{href:f.url,target:"_blank",rel:"noopener noreferrer",class:e.normalizeClass(["inline-block rounded-md ring-offset-2 ring-offset-transparent transition-all duration-300 ease-linear outline-none hover:opacity-70 hover:ring-2 focus:ring-2",d(n.iconColor)]),"aria-label":f.label},[e.createElementVNode("div",{innerHTML:f.icon},null,8,L)],10,y)]))),128))]))}}),B={class:"container px-xs md:px-lg lg:px-xl"},z={class:"mb-xs h-lg align-middle md:h-xl"},M=["href","target"],E=["src","alt"],I={key:0,class:"mb-xs flex items-center justify-end md:justify-center"},_={class:"flex flex-wrap items-center gap-6 md:items-start md:justify-between md:gap-8"},A={class:"grid basis-full justify-items-center gap-2 md:basis-1/3"},H=["innerHTML"],N={class:"px-xs md:px-0"},F=["aria-label"],j={class:"flex flex-wrap items-center justify-center gap-2xs md:flex-col"},T=["href","target","onClick","innerHTML"],S={key:0,class:"flex flex-wrap items-center justify-center gap-2xs md:flex-col"},$=["href","target","onClick","innerHTML"],Z=((n,a)=>{const i=n.__vccOpts||n;for(const[d,o]of a)i[d]=o;return i})(e.defineComponent({__name:"MclFooterA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"light-1"},logo:{},logoAlt:{},logoAsLink:{type:Boolean,default:!1},logoLink:{},logoLinkTarget:{default:"_self"},showSocialIcons:{type:Boolean,default:!0},socialIconColor:{default:"light-1"},socialLinks:{},menuItems:{},secondaryMenuItems:{},menuItemAsLink:{type:Boolean,default:!1},menuTextSize:{default:"md"},menuTextColor:{default:"light-1"},menuTextBold:{type:Boolean,default:!1},showHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},bgColor:{default:"dark-3"},borderTopColor:{default:"primary"},headlineColor:{default:"light-1"},navLabel:{default:"Footer"}},emits:["logo-click","menu-click"],setup(n,{emit:a}){const i=n,d=a,o=e.computed(()=>{const{bgColor:l,borderTopColor:r}=i;return[s.generateClass.bgColorVariant({color:l}),s.generateClass.borderColorVariant({color:r})].join(" ")}),g=e.computed(()=>{const{titleSize:l,titleColor:r}=i;return[s.generateClass.h2Variant({size:l}),s.generateClass.textColorVariant({color:r})].join(" ")}),f=e.computed(()=>{const{menuTextSize:l,menuTextColor:r,menuTextBold:t}=i,m=[s.generateClass.bodyTextVariant({size:l}),s.generateClass.textColorVariant({color:r})];return t&&m.push("font-bold"),m.join(" ")}),h=l=>{const{logoAsLink:r,logoLink:t,logoLinkTarget:m}=i;r||l.preventDefault(),d("logo-click",l,t,m)},C=(l,r)=>{const{menuItemAsLink:t}=i;t||l.preventDefault(),d("menu-click",l,r)};return(l,r)=>(e.openBlock(),e.createElementBlock("footer",{class:e.normalizeClass(["border-t-2 py-6 sm:py-8 md:py-12",o.value])},[e.createElementVNode("div",B,[e.createElementVNode("div",{class:e.normalizeClass(["mb-xs flex flex-col flex-wrap justify-between border-b-2 px-xs md:mb-md md:flex-row md:px-md",e.unref(s.generateClass).borderColorVariant({color:n.headlineColor})])},[e.createElementVNode("div",z,[e.createElementVNode("a",{href:n.logoLink,target:n.logoLinkTarget,class:e.normalizeClass(["inline-block h-full rounded-md ring-offset-2 ring-offset-transparent transition-all duration-300 ease-linear outline-none focus:ring-2",e.unref(s.generateClass).ringColorVariant({color:n.titleColor})]),onClick:r[0]||(r[0]=t=>h(t))},[e.createElementVNode("img",{class:"inline-block h-full",src:n.logo,alt:n.logoAlt},null,8,E)],10,M)]),n.showSocialIcons?(e.openBlock(),e.createElementBlock("div",I,[e.createVNode(V,{"social-links":n.socialLinks,"icon-color":n.socialIconColor},null,8,["social-links","icon-color"])])):e.createCommentVNode("",!0)],2),e.createElementVNode("div",_,[e.createElementVNode("div",A,[e.createElementVNode("h2",{class:e.normalizeClass(["inline-block align-middle tracking-wider",g.value]),innerHTML:n.title},null,10,H),e.createElementVNode("div",N,[e.renderSlot(l.$slots,"default",{},void 0,!0)])]),e.createElementVNode("nav",{"aria-label":n.navLabel,class:"flex grow flex-col items-center justify-between gap-xs text-center text-sm sm:flex-row sm:items-start sm:text-left md:basis-1/2 md:flex-row md:justify-around"},[e.createElementVNode("ul",j,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.menuItems,(t,m)=>(e.openBlock(),e.createElementBlock("li",{key:`first-nav-${m}`,class:"inline-block"},[e.createElementVNode("a",{href:t.url,target:t.target?t.target:"_self",class:e.normalizeClass(["nav__text tracking-wide outline-none",f.value]),onClick:k=>C(k,t),innerHTML:t.title},null,10,T),n.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative top-3xs h-3xs",e.unref(s.generateClass).beforeBgColorVariant({color:n.highlightColor})])},null,2)):e.createCommentVNode("",!0)]))),128))]),n.secondaryMenuItems?(e.openBlock(),e.createElementBlock("ul",S,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.secondaryMenuItems,(t,m)=>(e.openBlock(),e.createElementBlock("li",{key:`second-nav-${m}`,class:"inline-block"},[e.createElementVNode("a",{href:t.url,target:t.target?t.target:"_self",class:e.normalizeClass(["nav__text tracking-wide outline-none",f.value]),onClick:k=>C(k,t),innerHTML:t.title},null,10,$),n.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative top-3xs h-3xs",e.unref(s.generateClass).beforeBgColorVariant({color:n.highlightColor})])},null,2)):e.createCommentVNode("",!0)]))),128))])):e.createCommentVNode("",!0)],8,F)])])],2))}}),[["__scopeId","data-v-5d63d453"]]);c.MclFooterA=Z,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-footer",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.8",
|
|
4
4
|
"description": "a footer components built based on Manguito theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"license": "MIT",
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"vue": "^3.5.13",
|
|
34
|
-
"@bobbykim/manguito-theme": "1.
|
|
34
|
+
"@bobbykim/manguito-theme": "1.5.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@vitejs/plugin-vue": "^5.2.1",
|