@bobbykim/mcl-footer 0.5.1 → 0.6.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/index.d.ts +159 -0
- package/dist/mcl-footer.js +255 -0
- package/dist/mcl-footer.umd.cjs +2 -0
- package/package.json +28 -6
- package/CHANGELOG.md +0 -59
- package/index.d.ts +0 -3
- package/index.js +0 -3
- package/index.ts +0 -4
- package/lib/common/icons/GithubIcon.vue +0 -14
- package/lib/common/icons/GithubIcon.vue.d.ts +0 -2
- package/lib/common/icons/InstagramIcon.vue +0 -14
- package/lib/common/icons/InstagramIcon.vue.d.ts +0 -2
- package/lib/common/icons/LinkedinIcon.vue +0 -14
- package/lib/common/icons/LinkedinIcon.vue.d.ts +0 -2
- package/lib/common/icons/TwitterIcon.vue +0 -14
- package/lib/common/icons/TwitterIcon.vue.d.ts +0 -2
- package/lib/mcl-footer-a/MclFooterA.vue +0 -250
- package/lib/mcl-footer-a/MclFooterA.vue.d.ts +0 -132
- package/lib/mcl-footer-a/SocialIcons.vue +0 -100
- package/lib/mcl-footer-a/SocialIcons.vue.d.ts +0 -33
- package/lib/mcl-footer-a/index.types.d.ts +0 -12
- package/lib/mcl-footer-a/index.types.js +0 -1
- package/lib/mcl-footer-a/index.types.ts +0 -14
- package/tsconfig.json +0 -5
- package/tsconfig.ts.json +0 -9
- package/tsconfig.vue.json +0 -9
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { BodyText } from '@bobbykim/manguito-theme';
|
|
2
|
+
import { ColorPalette } from '@bobbykim/manguito-theme';
|
|
3
|
+
import { ComponentOptionsMixin } from 'vue';
|
|
4
|
+
import { CtaTarget } from '@bobbykim/manguito-theme';
|
|
5
|
+
import { DefineComponent } from 'vue';
|
|
6
|
+
import { ExtractPropTypes } from 'vue';
|
|
7
|
+
import { HeadingSize } from '@bobbykim/manguito-theme';
|
|
8
|
+
import { PropType } from 'vue';
|
|
9
|
+
import { PublicProps } from 'vue';
|
|
10
|
+
|
|
11
|
+
declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
12
|
+
|
|
13
|
+
declare type __VLS_Prettify<T> = {
|
|
14
|
+
[K in keyof T]: T[K];
|
|
15
|
+
} & {};
|
|
16
|
+
|
|
17
|
+
declare type __VLS_TypePropsToRuntimeProps<T> = {
|
|
18
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
19
|
+
type: PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
20
|
+
} : {
|
|
21
|
+
type: PropType<T[K]>;
|
|
22
|
+
required: true;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
declare type __VLS_WithDefaults<P, D> = {
|
|
27
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
28
|
+
default: D[K];
|
|
29
|
+
}> : P[K];
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
33
|
+
new (): {
|
|
34
|
+
$slots: S;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export declare const MclFooterA: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
39
|
+
title: string;
|
|
40
|
+
titleSize?: HeadingSize | undefined;
|
|
41
|
+
titleColor?: ColorPalette | undefined;
|
|
42
|
+
copyText?: string | undefined;
|
|
43
|
+
logo: string;
|
|
44
|
+
logoAlt?: string | undefined;
|
|
45
|
+
logoAsLink?: boolean | undefined;
|
|
46
|
+
logoLink: string;
|
|
47
|
+
logoLinkTarget?: CtaTarget | undefined;
|
|
48
|
+
displaySocialIcons?: boolean | undefined;
|
|
49
|
+
socialIconColor: ColorPalette;
|
|
50
|
+
socialLinks?: SocialUrl | undefined;
|
|
51
|
+
menuItems: MenuItemType[];
|
|
52
|
+
secondaryMenuItems?: MenuItemType[] | undefined;
|
|
53
|
+
menuItemAsLink?: boolean | undefined;
|
|
54
|
+
menuTextSize?: BodyText | undefined;
|
|
55
|
+
menuTextColor?: ColorPalette | undefined;
|
|
56
|
+
menuTextBold?: boolean | undefined;
|
|
57
|
+
displayHighlight?: boolean | undefined;
|
|
58
|
+
highlightColor?: ColorPalette | undefined;
|
|
59
|
+
bgColor?: ColorPalette | undefined;
|
|
60
|
+
borderTopColor?: ColorPalette | undefined;
|
|
61
|
+
headlineColor?: ColorPalette | undefined;
|
|
62
|
+
}>, {
|
|
63
|
+
titleSize: string;
|
|
64
|
+
titleColor: string;
|
|
65
|
+
logoAsLink: boolean;
|
|
66
|
+
logoLinkTarget: string;
|
|
67
|
+
displaySocialIcons: boolean;
|
|
68
|
+
socialIconColor: string;
|
|
69
|
+
menuItemAsLink: boolean;
|
|
70
|
+
menuTextSize: string;
|
|
71
|
+
menuTextColor: string;
|
|
72
|
+
menuTextBold: boolean;
|
|
73
|
+
displayHighlight: boolean;
|
|
74
|
+
highlightColor: string;
|
|
75
|
+
bgColor: string;
|
|
76
|
+
borderTopColor: string;
|
|
77
|
+
headlineColor: string;
|
|
78
|
+
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
79
|
+
"logo-click": (event: Event, link: string, target: CtaTarget) => void;
|
|
80
|
+
"menu-click": (event: Event, item: MenuItemType) => void;
|
|
81
|
+
}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
82
|
+
title: string;
|
|
83
|
+
titleSize?: HeadingSize | undefined;
|
|
84
|
+
titleColor?: ColorPalette | undefined;
|
|
85
|
+
copyText?: string | undefined;
|
|
86
|
+
logo: string;
|
|
87
|
+
logoAlt?: string | undefined;
|
|
88
|
+
logoAsLink?: boolean | undefined;
|
|
89
|
+
logoLink: string;
|
|
90
|
+
logoLinkTarget?: CtaTarget | undefined;
|
|
91
|
+
displaySocialIcons?: boolean | undefined;
|
|
92
|
+
socialIconColor: ColorPalette;
|
|
93
|
+
socialLinks?: SocialUrl | undefined;
|
|
94
|
+
menuItems: MenuItemType[];
|
|
95
|
+
secondaryMenuItems?: MenuItemType[] | undefined;
|
|
96
|
+
menuItemAsLink?: boolean | undefined;
|
|
97
|
+
menuTextSize?: BodyText | undefined;
|
|
98
|
+
menuTextColor?: ColorPalette | undefined;
|
|
99
|
+
menuTextBold?: boolean | undefined;
|
|
100
|
+
displayHighlight?: boolean | undefined;
|
|
101
|
+
highlightColor?: ColorPalette | undefined;
|
|
102
|
+
bgColor?: ColorPalette | undefined;
|
|
103
|
+
borderTopColor?: ColorPalette | undefined;
|
|
104
|
+
headlineColor?: ColorPalette | undefined;
|
|
105
|
+
}>, {
|
|
106
|
+
titleSize: string;
|
|
107
|
+
titleColor: string;
|
|
108
|
+
logoAsLink: boolean;
|
|
109
|
+
logoLinkTarget: string;
|
|
110
|
+
displaySocialIcons: boolean;
|
|
111
|
+
socialIconColor: string;
|
|
112
|
+
menuItemAsLink: boolean;
|
|
113
|
+
menuTextSize: string;
|
|
114
|
+
menuTextColor: string;
|
|
115
|
+
menuTextBold: boolean;
|
|
116
|
+
displayHighlight: boolean;
|
|
117
|
+
highlightColor: string;
|
|
118
|
+
bgColor: string;
|
|
119
|
+
borderTopColor: string;
|
|
120
|
+
headlineColor: string;
|
|
121
|
+
}>>> & {
|
|
122
|
+
"onLogo-click"?: ((event: Event, link: string, target: CtaTarget) => any) | undefined;
|
|
123
|
+
"onMenu-click"?: ((event: Event, item: MenuItemType) => any) | undefined;
|
|
124
|
+
}, {
|
|
125
|
+
titleSize: HeadingSize;
|
|
126
|
+
titleColor: ColorPalette;
|
|
127
|
+
logoAsLink: boolean;
|
|
128
|
+
logoLinkTarget: CtaTarget;
|
|
129
|
+
displaySocialIcons: boolean;
|
|
130
|
+
socialIconColor: ColorPalette;
|
|
131
|
+
menuItemAsLink: boolean;
|
|
132
|
+
menuTextSize: BodyText;
|
|
133
|
+
menuTextColor: ColorPalette;
|
|
134
|
+
menuTextBold: boolean;
|
|
135
|
+
displayHighlight: boolean;
|
|
136
|
+
highlightColor: ColorPalette;
|
|
137
|
+
bgColor: ColorPalette;
|
|
138
|
+
borderTopColor: ColorPalette;
|
|
139
|
+
headlineColor: ColorPalette;
|
|
140
|
+
}, {}>, Readonly<{
|
|
141
|
+
default: any;
|
|
142
|
+
}> & {
|
|
143
|
+
default: any;
|
|
144
|
+
}>;
|
|
145
|
+
|
|
146
|
+
export declare interface MenuItemType {
|
|
147
|
+
title: string;
|
|
148
|
+
url: string;
|
|
149
|
+
target?: CtaTarget;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
export declare interface SocialUrl {
|
|
153
|
+
linkedin?: string;
|
|
154
|
+
instagram?: string;
|
|
155
|
+
github?: string;
|
|
156
|
+
twitter?: string;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
export { }
|
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.nav__decorator[data-v-962994fc]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-962994fc]:before,.nav__text:hover+.nav__decorator[data-v-962994fc]:before{width:100%}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
import { openBlock as l, createElementBlock as s, createElementVNode as o, defineComponent as T, ref as L, onMounted as $, Fragment as w, renderList as b, normalizeClass as d, createBlock as I, resolveDynamicComponent as M, markRaw as C, useSlots as B, unref as v, createVNode as z, createCommentVNode as k, toDisplayString as A, renderSlot as O } from "vue";
|
|
3
|
+
import r from "@bobbykim/manguito-theme";
|
|
4
|
+
const y = (i, c) => {
|
|
5
|
+
const u = i.__vccOpts || i;
|
|
6
|
+
for (const [_, p] of c)
|
|
7
|
+
u[_] = p;
|
|
8
|
+
return u;
|
|
9
|
+
}, H = {}, R = {
|
|
10
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
11
|
+
viewBox: "0 0 448 512",
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
class: "h-md w-md",
|
|
14
|
+
role: "img"
|
|
15
|
+
}, S = /* @__PURE__ */ o("path", { 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" }, null, -1), V = [
|
|
16
|
+
S
|
|
17
|
+
];
|
|
18
|
+
function j(i, c) {
|
|
19
|
+
return l(), s("svg", R, V);
|
|
20
|
+
}
|
|
21
|
+
const E = /* @__PURE__ */ y(H, [["render", j]]), D = {}, F = {
|
|
22
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
23
|
+
viewBox: "0 0 448 512",
|
|
24
|
+
fill: "currentColor",
|
|
25
|
+
class: "h-md w-md",
|
|
26
|
+
role: "img"
|
|
27
|
+
}, G = /* @__PURE__ */ o("path", { 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" }, null, -1), Z = [
|
|
28
|
+
G
|
|
29
|
+
];
|
|
30
|
+
function N(i, c) {
|
|
31
|
+
return l(), s("svg", F, Z);
|
|
32
|
+
}
|
|
33
|
+
const X = /* @__PURE__ */ y(D, [["render", N]]), Y = {}, q = {
|
|
34
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
35
|
+
viewBox: "0 0 448 512",
|
|
36
|
+
fill: "currentColor",
|
|
37
|
+
class: "h-md w-md",
|
|
38
|
+
role: "img"
|
|
39
|
+
}, J = /* @__PURE__ */ o("path", { 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" }, null, -1), K = [
|
|
40
|
+
J
|
|
41
|
+
];
|
|
42
|
+
function P(i, c) {
|
|
43
|
+
return l(), s("svg", q, K);
|
|
44
|
+
}
|
|
45
|
+
const Q = /* @__PURE__ */ y(Y, [["render", P]]), U = {}, W = {
|
|
46
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
47
|
+
viewBox: "0 0 448 512",
|
|
48
|
+
fill: "currentColor",
|
|
49
|
+
class: "h-md w-md",
|
|
50
|
+
role: "img"
|
|
51
|
+
}, ee = /* @__PURE__ */ o("path", { 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-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z" }, null, -1), te = [
|
|
52
|
+
ee
|
|
53
|
+
];
|
|
54
|
+
function oe(i, c) {
|
|
55
|
+
return l(), s("svg", W, te);
|
|
56
|
+
}
|
|
57
|
+
const le = /* @__PURE__ */ y(U, [["render", oe]]), se = { class: "flex flex-wrap" }, ne = ["href", "aria-label"], re = /* @__PURE__ */ T({
|
|
58
|
+
__name: "SocialIcons",
|
|
59
|
+
props: {
|
|
60
|
+
iconColor: { default: "light-1" },
|
|
61
|
+
socialLinks: {}
|
|
62
|
+
},
|
|
63
|
+
setup(i) {
|
|
64
|
+
const c = i, u = L([]), _ = () => {
|
|
65
|
+
const { linkedin: a, instagram: g, github: m, twitter: h } = c.socialLinks, e = [];
|
|
66
|
+
a && e.push({
|
|
67
|
+
url: a,
|
|
68
|
+
icon: C(Q),
|
|
69
|
+
label: "linkedin social icon"
|
|
70
|
+
}), m && e.push({
|
|
71
|
+
url: m,
|
|
72
|
+
icon: C(E),
|
|
73
|
+
label: "github social icon"
|
|
74
|
+
}), g && e.push({
|
|
75
|
+
url: g,
|
|
76
|
+
icon: C(X),
|
|
77
|
+
label: "instagram social icon"
|
|
78
|
+
}), h && e.push({
|
|
79
|
+
url: h,
|
|
80
|
+
icon: C(le),
|
|
81
|
+
label: "twitter social icon"
|
|
82
|
+
}), u.value = e;
|
|
83
|
+
}, p = (a) => [
|
|
84
|
+
r("TEXTCOLOR", a),
|
|
85
|
+
r("RINGCOLOR", a)
|
|
86
|
+
].join(" ");
|
|
87
|
+
return $(() => {
|
|
88
|
+
_();
|
|
89
|
+
}), (a, g) => (l(), s("ul", se, [
|
|
90
|
+
(l(!0), s(w, null, b(u.value, (m, h) => (l(), s("li", {
|
|
91
|
+
key: h,
|
|
92
|
+
class: "mr-xs last:mr-0"
|
|
93
|
+
}, [
|
|
94
|
+
o("a", {
|
|
95
|
+
href: m.url,
|
|
96
|
+
target: "_blank",
|
|
97
|
+
class: d(["inline-block outline-none focus:ring-2 hover:ring-2 hover:opacity-70 ring-offset-2 ring-offset-transparent rounded-md transition-all duration-300 ease-linear", p(a.iconColor)]),
|
|
98
|
+
"aria-label": m.label
|
|
99
|
+
}, [
|
|
100
|
+
(l(), I(M(m.icon)))
|
|
101
|
+
], 10, ne)
|
|
102
|
+
]))), 128))
|
|
103
|
+
]));
|
|
104
|
+
}
|
|
105
|
+
}), ie = { class: "container px-xs md:px-lg lg:px-xl" }, ce = { class: "h-lg md:h-xl align-middle mb-xs" }, ae = ["href", "target"], de = ["src", "alt"], ue = {
|
|
106
|
+
key: 0,
|
|
107
|
+
class: "mb-xs flex items-center justify-end md:justify-center"
|
|
108
|
+
}, me = { class: "flex flex-wrap md:justify-between items-center md:items-start gap-6 md:gap-8" }, fe = { class: "grid gap-2 justify-items-center basis-full md:basis-1/3" }, ge = ["innerHTML"], he = {
|
|
109
|
+
key: 0,
|
|
110
|
+
class: "text-xs text-white align-middle mb-2"
|
|
111
|
+
}, _e = { class: "px-xs md:px-0" }, pe = { class: "text-sm flex flex-col md:flex-row items-center sm:items-start sm:flex-row text-center sm:text-left gap-xs justify-between md:justify-around grow md:basis-1/2" }, ke = { class: "flex flex-wrap md:flex-col justify-center items-center gap-2xs" }, ye = ["href", "target", "onClick", "innerHTML"], Ce = {
|
|
112
|
+
key: 0,
|
|
113
|
+
class: "flex flex-wrap md:flex-col justify-center items-center gap-2xs"
|
|
114
|
+
}, ve = ["href", "target", "onClick", "innerHTML"], xe = /* @__PURE__ */ T({
|
|
115
|
+
__name: "MclFooterA",
|
|
116
|
+
props: {
|
|
117
|
+
title: {},
|
|
118
|
+
titleSize: { default: "md" },
|
|
119
|
+
titleColor: { default: "light-1" },
|
|
120
|
+
copyText: {},
|
|
121
|
+
logo: {},
|
|
122
|
+
logoAlt: {},
|
|
123
|
+
logoAsLink: { type: Boolean, default: !0 },
|
|
124
|
+
logoLink: {},
|
|
125
|
+
logoLinkTarget: { default: "_self" },
|
|
126
|
+
displaySocialIcons: { type: Boolean, default: !0 },
|
|
127
|
+
socialIconColor: { default: "light-1" },
|
|
128
|
+
socialLinks: {},
|
|
129
|
+
menuItems: {},
|
|
130
|
+
secondaryMenuItems: {},
|
|
131
|
+
menuItemAsLink: { type: Boolean, default: !0 },
|
|
132
|
+
menuTextSize: { default: "md" },
|
|
133
|
+
menuTextColor: { default: "light-1" },
|
|
134
|
+
menuTextBold: { type: Boolean, default: !1 },
|
|
135
|
+
displayHighlight: { type: Boolean, default: !0 },
|
|
136
|
+
highlightColor: { default: "primary" },
|
|
137
|
+
bgColor: { default: "dark-3" },
|
|
138
|
+
borderTopColor: { default: "primary" },
|
|
139
|
+
headlineColor: { default: "light-1" }
|
|
140
|
+
},
|
|
141
|
+
emits: ["logo-click", "menu-click"],
|
|
142
|
+
setup(i, { emit: c }) {
|
|
143
|
+
const u = i;
|
|
144
|
+
B();
|
|
145
|
+
const _ = c, p = (e, n) => [
|
|
146
|
+
r("BGCOLOR", e),
|
|
147
|
+
r("BORDER", n)
|
|
148
|
+
].join(" "), a = (e, n) => [
|
|
149
|
+
r("H2", e),
|
|
150
|
+
r("TEXTCOLOR", n)
|
|
151
|
+
].join(" "), g = (e, n, t) => {
|
|
152
|
+
const f = [
|
|
153
|
+
r("BODYTEXT", e),
|
|
154
|
+
r("TEXTCOLOR", n)
|
|
155
|
+
];
|
|
156
|
+
return t && f.push("font-bold"), f.join(" ");
|
|
157
|
+
}, m = (e) => {
|
|
158
|
+
const { logoAsLink: n, logoLink: t, logoLinkTarget: f } = u;
|
|
159
|
+
!n && e.preventDefault(), _("logo-click", e, t, f);
|
|
160
|
+
}, h = (e, n) => {
|
|
161
|
+
const { menuItemAsLink: t } = u;
|
|
162
|
+
!t && e.preventDefault(), _("menu-click", e, n);
|
|
163
|
+
};
|
|
164
|
+
return (e, n) => (l(), s("footer", {
|
|
165
|
+
class: d(["border-t-2 py-6 sm:py-8 md:py-12", p(e.bgColor, e.borderTopColor)])
|
|
166
|
+
}, [
|
|
167
|
+
o("div", ie, [
|
|
168
|
+
o("div", {
|
|
169
|
+
class: d(["flex flex-col md:flex-row flex-wrap justify-between mb-xs md:mb-md px-xs md:px-md border-b-2", v(r)("BORDER", e.headlineColor)])
|
|
170
|
+
}, [
|
|
171
|
+
o("div", ce, [
|
|
172
|
+
o("a", {
|
|
173
|
+
href: e.logoLink,
|
|
174
|
+
target: e.logoLinkTarget,
|
|
175
|
+
class: d(["h-full inline-block outline-none focus:ring-2 ring-offset-2 ring-offset-transparent rounded-md transition-all duration-300 ease-linear", v(r)("RINGCOLOR", e.titleColor)]),
|
|
176
|
+
onClick: n[0] || (n[0] = (t) => m(t))
|
|
177
|
+
}, [
|
|
178
|
+
o("img", {
|
|
179
|
+
class: "inline-block h-full",
|
|
180
|
+
src: e.logo,
|
|
181
|
+
alt: e.logoAlt
|
|
182
|
+
}, null, 8, de)
|
|
183
|
+
], 10, ae)
|
|
184
|
+
]),
|
|
185
|
+
e.displaySocialIcons ? (l(), s("div", ue, [
|
|
186
|
+
z(re, {
|
|
187
|
+
"social-links": e.socialLinks,
|
|
188
|
+
"icon-color": e.socialIconColor
|
|
189
|
+
}, null, 8, ["social-links", "icon-color"])
|
|
190
|
+
])) : k("", !0)
|
|
191
|
+
], 2),
|
|
192
|
+
o("div", me, [
|
|
193
|
+
o("div", fe, [
|
|
194
|
+
o("h2", {
|
|
195
|
+
class: d(["inline-block align-middle tracking-wider", a(e.titleSize, e.titleColor)]),
|
|
196
|
+
innerHTML: e.title
|
|
197
|
+
}, null, 10, ge),
|
|
198
|
+
e.copyText ? (l(), s("small", he, " © " + A(e.copyText + " " + (/* @__PURE__ */ new Date()).getFullYear()), 1)) : k("", !0),
|
|
199
|
+
o("div", _e, [
|
|
200
|
+
O(e.$slots, "default", {}, void 0, !0)
|
|
201
|
+
])
|
|
202
|
+
]),
|
|
203
|
+
o("nav", pe, [
|
|
204
|
+
o("ul", ke, [
|
|
205
|
+
(l(!0), s(w, null, b(e.menuItems, (t, f) => (l(), s("li", {
|
|
206
|
+
key: `first-nav-${f}`,
|
|
207
|
+
class: "inline-block"
|
|
208
|
+
}, [
|
|
209
|
+
o("a", {
|
|
210
|
+
href: t.url,
|
|
211
|
+
target: t.target ? t.target : "_self",
|
|
212
|
+
class: d([
|
|
213
|
+
"tracking-wide outline-none nav__text",
|
|
214
|
+
g(e.menuTextSize, e.menuTextColor, e.menuTextBold)
|
|
215
|
+
]),
|
|
216
|
+
onClick: (x) => h(x, t),
|
|
217
|
+
innerHTML: t.title
|
|
218
|
+
}, null, 10, ye),
|
|
219
|
+
e.displayHighlight ? (l(), s("div", {
|
|
220
|
+
key: 0,
|
|
221
|
+
class: d(["relative top-3xs h-3xs nav__decorator", v(r)("BEFOREBG", e.highlightColor)])
|
|
222
|
+
}, null, 2)) : k("", !0)
|
|
223
|
+
]))), 128))
|
|
224
|
+
]),
|
|
225
|
+
e.secondaryMenuItems ? (l(), s("ul", Ce, [
|
|
226
|
+
(l(!0), s(w, null, b(e.secondaryMenuItems, (t, f) => (l(), s("li", {
|
|
227
|
+
key: `second-nav-${f}`,
|
|
228
|
+
class: "inline-block"
|
|
229
|
+
}, [
|
|
230
|
+
o("a", {
|
|
231
|
+
href: t.url,
|
|
232
|
+
target: t.target ? t.target : "_self",
|
|
233
|
+
class: d([
|
|
234
|
+
"tracking-wide outline-none nav__text",
|
|
235
|
+
g(e.menuTextSize, e.menuTextColor, e.menuTextBold)
|
|
236
|
+
]),
|
|
237
|
+
onClick: (x) => h(x, t),
|
|
238
|
+
innerHTML: t.title
|
|
239
|
+
}, null, 10, ve),
|
|
240
|
+
e.displayHighlight ? (l(), s("div", {
|
|
241
|
+
key: 0,
|
|
242
|
+
class: d(["relative top-3xs h-3xs nav__decorator", v(r)("BEFOREBG", e.highlightColor)])
|
|
243
|
+
}, null, 2)) : k("", !0)
|
|
244
|
+
]))), 128))
|
|
245
|
+
])) : k("", !0)
|
|
246
|
+
])
|
|
247
|
+
])
|
|
248
|
+
])
|
|
249
|
+
], 2));
|
|
250
|
+
}
|
|
251
|
+
});
|
|
252
|
+
const Te = /* @__PURE__ */ y(xe, [["__scopeId", "data-v-962994fc"]]);
|
|
253
|
+
export {
|
|
254
|
+
Te as MclFooterA
|
|
255
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.nav__decorator[data-v-962994fc]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-962994fc]:before,.nav__text:hover+.nav__decorator[data-v-962994fc]:before{width:100%}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
(function(i,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):(i=typeof globalThis<"u"?globalThis:i||self,e(i.MclFooter={},i.Vue,i.ManguitoTheme))})(this,function(i,e,l){"use strict";const g=(s,r)=>{const a=s.__vccOpts||s;for(const[p,_]of r)a[p]=_;return a},u={},y={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",fill:"currentColor",class:"h-md w-md",role:"img"},B=[e.createElementVNode("path",{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"},null,-1)];function C(s,r){return e.openBlock(),e.createElementBlock("svg",y,B)}const x=g(u,[["render",C]]),w={},E={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",fill:"currentColor",class:"h-md w-md",role:"img"},b=[e.createElementVNode("path",{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"},null,-1)];function T(s,r){return e.openBlock(),e.createElementBlock("svg",E,b)}const V=g(w,[["render",T]]),L={},z={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",fill:"currentColor",class:"h-md w-md",role:"img"},$=[e.createElementVNode("path",{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"},null,-1)];function M(s,r){return e.openBlock(),e.createElementBlock("svg",z,$)}const N=g(L,[["render",M]]),I={},A={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",fill:"currentColor",class:"h-md w-md",role:"img"},O=[e.createElementVNode("path",{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-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"},null,-1)];function R(s,r){return e.openBlock(),e.createElementBlock("svg",A,O)}const H=g(I,[["render",R]]),S={class:"flex flex-wrap"},j=["href","aria-label"],F=e.defineComponent({__name:"SocialIcons",props:{iconColor:{default:"light-1"},socialLinks:{}},setup(s){const r=s,a=e.ref([]),p=()=>{const{linkedin:c,instagram:f,github:d,twitter:h}=r.socialLinks,o=[];c&&o.push({url:c,icon:e.markRaw(N),label:"linkedin social icon"}),d&&o.push({url:d,icon:e.markRaw(x),label:"github social icon"}),f&&o.push({url:f,icon:e.markRaw(V),label:"instagram social icon"}),h&&o.push({url:h,icon:e.markRaw(H),label:"twitter social icon"}),a.value=o},_=c=>[l("TEXTCOLOR",c),l("RINGCOLOR",c)].join(" ");return e.onMounted(()=>{p()}),(c,f)=>(e.openBlock(),e.createElementBlock("ul",S,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(d,h)=>(e.openBlock(),e.createElementBlock("li",{key:h,class:"mr-xs last:mr-0"},[e.createElementVNode("a",{href:d.url,target:"_blank",class:e.normalizeClass(["inline-block outline-none focus:ring-2 hover:ring-2 hover:opacity-70 ring-offset-2 ring-offset-transparent rounded-md transition-all duration-300 ease-linear",_(c.iconColor)]),"aria-label":d.label},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(d.icon)))],10,j)]))),128))]))}}),D={class:"container px-xs md:px-lg lg:px-xl"},G={class:"h-lg md:h-xl align-middle mb-xs"},Z=["href","target"],X=["src","alt"],q={key:0,class:"mb-xs flex items-center justify-end md:justify-center"},Y={class:"flex flex-wrap md:justify-between items-center md:items-start gap-6 md:gap-8"},P={class:"grid gap-2 justify-items-center basis-full md:basis-1/3"},J=["innerHTML"],K={key:0,class:"text-xs text-white align-middle mb-2"},Q={class:"px-xs md:px-0"},U={class:"text-sm flex flex-col md:flex-row items-center sm:items-start sm:flex-row text-center sm:text-left gap-xs justify-between md:justify-around grow md:basis-1/2"},W={class:"flex flex-wrap md:flex-col justify-center items-center gap-2xs"},v=["href","target","onClick","innerHTML"],ee={key:0,class:"flex flex-wrap md:flex-col justify-center items-center gap-2xs"},oe=["href","target","onClick","innerHTML"],te=e.defineComponent({__name:"MclFooterA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"light-1"},copyText:{},logo:{},logoAlt:{},logoAsLink:{type:Boolean,default:!0},logoLink:{},logoLinkTarget:{default:"_self"},displaySocialIcons:{type:Boolean,default:!0},socialIconColor:{default:"light-1"},socialLinks:{},menuItems:{},secondaryMenuItems:{},menuItemAsLink:{type:Boolean,default:!0},menuTextSize:{default:"md"},menuTextColor:{default:"light-1"},menuTextBold:{type:Boolean,default:!1},displayHighlight:{type:Boolean,default:!0},highlightColor:{default:"primary"},bgColor:{default:"dark-3"},borderTopColor:{default:"primary"},headlineColor:{default:"light-1"}},emits:["logo-click","menu-click"],setup(s,{emit:r}){const a=s;e.useSlots();const p=r,_=(o,n)=>[l("BGCOLOR",o),l("BORDER",n)].join(" "),c=(o,n)=>[l("H2",o),l("TEXTCOLOR",n)].join(" "),f=(o,n,t)=>{const m=[l("BODYTEXT",o),l("TEXTCOLOR",n)];return t&&m.push("font-bold"),m.join(" ")},d=o=>{const{logoAsLink:n,logoLink:t,logoLinkTarget:m}=a;!n&&o.preventDefault(),p("logo-click",o,t,m)},h=(o,n)=>{const{menuItemAsLink:t}=a;!t&&o.preventDefault(),p("menu-click",o,n)};return(o,n)=>(e.openBlock(),e.createElementBlock("footer",{class:e.normalizeClass(["border-t-2 py-6 sm:py-8 md:py-12",_(o.bgColor,o.borderTopColor)])},[e.createElementVNode("div",D,[e.createElementVNode("div",{class:e.normalizeClass(["flex flex-col md:flex-row flex-wrap justify-between mb-xs md:mb-md px-xs md:px-md border-b-2",e.unref(l)("BORDER",o.headlineColor)])},[e.createElementVNode("div",G,[e.createElementVNode("a",{href:o.logoLink,target:o.logoLinkTarget,class:e.normalizeClass(["h-full inline-block outline-none focus:ring-2 ring-offset-2 ring-offset-transparent rounded-md transition-all duration-300 ease-linear",e.unref(l)("RINGCOLOR",o.titleColor)]),onClick:n[0]||(n[0]=t=>d(t))},[e.createElementVNode("img",{class:"inline-block h-full",src:o.logo,alt:o.logoAlt},null,8,X)],10,Z)]),o.displaySocialIcons?(e.openBlock(),e.createElementBlock("div",q,[e.createVNode(F,{"social-links":o.socialLinks,"icon-color":o.socialIconColor},null,8,["social-links","icon-color"])])):e.createCommentVNode("",!0)],2),e.createElementVNode("div",Y,[e.createElementVNode("div",P,[e.createElementVNode("h2",{class:e.normalizeClass(["inline-block align-middle tracking-wider",c(o.titleSize,o.titleColor)]),innerHTML:o.title},null,10,J),o.copyText?(e.openBlock(),e.createElementBlock("small",K," © "+e.toDisplayString(o.copyText+" "+new Date().getFullYear()),1)):e.createCommentVNode("",!0),e.createElementVNode("div",Q,[e.renderSlot(o.$slots,"default",{},void 0,!0)])]),e.createElementVNode("nav",U,[e.createElementVNode("ul",W,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.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(["tracking-wide outline-none nav__text",f(o.menuTextSize,o.menuTextColor,o.menuTextBold)]),onClick:k=>h(k,t),innerHTML:t.title},null,10,v),o.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["relative top-3xs h-3xs nav__decorator",e.unref(l)("BEFOREBG",o.highlightColor)])},null,2)):e.createCommentVNode("",!0)]))),128))]),o.secondaryMenuItems?(e.openBlock(),e.createElementBlock("ul",ee,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.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(["tracking-wide outline-none nav__text",f(o.menuTextSize,o.menuTextColor,o.menuTextBold)]),onClick:k=>h(k,t),innerHTML:t.title},null,10,oe),o.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["relative top-3xs h-3xs nav__decorator",e.unref(l)("BEFOREBG",o.highlightColor)])},null,2)):e.createCommentVNode("",!0)]))),128))])):e.createCommentVNode("",!0)])])])],2))}}),ie="",le=g(te,[["__scopeId","data-v-962994fc"]]);i.MclFooterA=le,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,11 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-footer",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "",
|
|
3
|
+
"version": "0.6.1",
|
|
4
|
+
"description": "a footer components built based on Manguito theme",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
9
|
+
"main": "./dist/mcl-footer.umd.cjs",
|
|
10
|
+
"module": "./dist/mcl-footer.js",
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./dist/mcl-footer.js",
|
|
15
|
+
"require": "./dist/mcl-footer.umd.cjs",
|
|
16
|
+
"types": "./dist/index.d.ts"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
7
19
|
"scripts": {
|
|
8
|
-
"build": "
|
|
20
|
+
"build": "vite build"
|
|
9
21
|
},
|
|
10
22
|
"author": {
|
|
11
23
|
"name": "Bobby Kim",
|
|
@@ -21,7 +33,17 @@
|
|
|
21
33
|
},
|
|
22
34
|
"license": "MIT",
|
|
23
35
|
"dependencies": {
|
|
24
|
-
"@bobbykim/manguito-theme": "
|
|
36
|
+
"@bobbykim/manguito-theme": "0.20.0",
|
|
37
|
+
"vue": "^3.3.10"
|
|
38
|
+
},
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"@vitejs/plugin-vue": "^4.5.2",
|
|
41
|
+
"sass": "^1.69.5",
|
|
42
|
+
"typescript": "^5.3.3",
|
|
43
|
+
"vite": "^4.5.1",
|
|
44
|
+
"vite-plugin-css-injected-by-js": "^3.5.0",
|
|
45
|
+
"vite-plugin-dts": "^3.8.3",
|
|
46
|
+
"vue-tsc": "^1.8.25"
|
|
25
47
|
},
|
|
26
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "2e677770b8628a9616237cd3812af2dcb20ee5bb"
|
|
27
49
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
# Change Log
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file.
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
-
|
|
6
|
-
## [0.5.1](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-footer@0.5.0...@bobbykim/mcl-footer@0.5.1) (2024-04-01)
|
|
7
|
-
|
|
8
|
-
**Note:** Version bump only for package @bobbykim/mcl-footer
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
# [0.5.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-footer@0.3.0...@bobbykim/mcl-footer@0.5.0) (2024-03-24)
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
### Features
|
|
18
|
-
|
|
19
|
-
* build and release ([a372086](https://github.com/bobbykim89/manguito-component-library/commit/a3720861fb40dd6ec1d0e3dda1f06e2479967432))
|
|
20
|
-
* **components/*:** prepublish build ([c8eb95a](https://github.com/bobbykim89/manguito-component-library/commit/c8eb95a0ede6727bf183d2e9ad634ae64af1411d))
|
|
21
|
-
* **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
|
|
22
|
-
* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
# [0.4.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-footer@0.3.0...@bobbykim/mcl-footer@0.4.0) (2024-03-21)
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
### Features
|
|
32
|
-
|
|
33
|
-
* **mcl-header:** move deprecated items to deprecated folder in root dir, update configs, init mcl-header-b component ([19aa842](https://github.com/bobbykim89/manguito-component-library/commit/19aa842faa7f1594f7be030b97d5093014efe7cb))
|
|
34
|
-
* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
# [0.3.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-footer@0.2.0...@bobbykim/mcl-footer@0.3.0) (2024-02-27)
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
### Features
|
|
44
|
-
|
|
45
|
-
* **/components/**/README.md,/deprecated:** update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
# 0.2.0 (2024-02-27)
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
### Features
|
|
55
|
-
|
|
56
|
-
* **manguito-theme,mcl-cards,mcl-header,mcl-footer,mcl-carousel:** add vueuse as one of dependencies, update code to make them ssr friendly ([119a327](https://github.com/bobbykim89/manguito-component-library/commit/119a327adf1ca9866e6ac063bce5acd4790db612))
|
|
57
|
-
* **mcl-footer:** finialize adding controllers for mcl-footer-a component, add mdx doc page ([de3bee0](https://github.com/bobbykim89/manguito-component-library/commit/de3bee0cb0376e50eaa761b6815b9dd83f61b8ec))
|
|
58
|
-
* **mcl-footer:** init mcl-footer-a ([8b9fc27](https://github.com/bobbykim89/manguito-component-library/commit/8b9fc27c19f644459e659c84a413f01aeda3faca))
|
|
59
|
-
* **stories/*:** ran package:build to build type declaration, move deprecated story files into deprecated folder ([ffc487d](https://github.com/bobbykim89/manguito-component-library/commit/ffc487dbcc093be7a3ccfeae98c5e10e8372a0e3))
|
package/index.d.ts
DELETED
package/index.js
DELETED
package/index.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<svg
|
|
3
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
-
viewBox="0 0 448 512"
|
|
5
|
-
fill="currentColor"
|
|
6
|
-
class="h-md w-md"
|
|
7
|
-
role="img"
|
|
8
|
-
>
|
|
9
|
-
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
|
|
10
|
-
<path
|
|
11
|
-
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"
|
|
12
|
-
/>
|
|
13
|
-
</svg>
|
|
14
|
-
</template>
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<svg
|
|
3
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
-
viewBox="0 0 448 512"
|
|
5
|
-
fill="currentColor"
|
|
6
|
-
class="h-md w-md"
|
|
7
|
-
role="img"
|
|
8
|
-
>
|
|
9
|
-
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
|
|
10
|
-
<path
|
|
11
|
-
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"
|
|
12
|
-
/>
|
|
13
|
-
</svg>
|
|
14
|
-
</template>
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<svg
|
|
3
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
-
viewBox="0 0 448 512"
|
|
5
|
-
fill="currentColor"
|
|
6
|
-
class="h-md w-md"
|
|
7
|
-
role="img"
|
|
8
|
-
>
|
|
9
|
-
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
|
|
10
|
-
<path
|
|
11
|
-
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"
|
|
12
|
-
/>
|
|
13
|
-
</svg>
|
|
14
|
-
</template>
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<svg
|
|
3
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
-
viewBox="0 0 448 512"
|
|
5
|
-
fill="currentColor"
|
|
6
|
-
class="h-md w-md"
|
|
7
|
-
role="img"
|
|
8
|
-
>
|
|
9
|
-
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
|
|
10
|
-
<path
|
|
11
|
-
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-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"
|
|
12
|
-
/>
|
|
13
|
-
</svg>
|
|
14
|
-
</template>
|
|
@@ -1,250 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import type {
|
|
3
|
-
BodyText,
|
|
4
|
-
ColorPalette,
|
|
5
|
-
CtaTarget,
|
|
6
|
-
HeadingSize,
|
|
7
|
-
} from '@bobbykim/manguito-theme'
|
|
8
|
-
import generateClass from '@bobbykim/manguito-theme'
|
|
9
|
-
import SocialIcons from './SocialIcons.vue'
|
|
10
|
-
import type { MenuItemType, SocialUrl } from './index.types'
|
|
11
|
-
|
|
12
|
-
const props = withDefaults(
|
|
13
|
-
defineProps<{
|
|
14
|
-
title: string
|
|
15
|
-
titleSize?: HeadingSize
|
|
16
|
-
titleColor?: ColorPalette
|
|
17
|
-
copyText?: string
|
|
18
|
-
logo: string
|
|
19
|
-
logoAlt?: string
|
|
20
|
-
logoAsLink?: boolean
|
|
21
|
-
logoLink: string
|
|
22
|
-
logoLinkTarget?: CtaTarget
|
|
23
|
-
displaySocialIcons?: boolean
|
|
24
|
-
socialIconColor: ColorPalette
|
|
25
|
-
socialLinks?: SocialUrl
|
|
26
|
-
menuItems: MenuItemType[]
|
|
27
|
-
secondaryMenuItems?: MenuItemType[]
|
|
28
|
-
menuItemAsLink?: boolean
|
|
29
|
-
menuTextSize?: BodyText
|
|
30
|
-
menuTextColor?: ColorPalette
|
|
31
|
-
menuTextBold?: boolean
|
|
32
|
-
displayHighlight?: boolean
|
|
33
|
-
highlightColor?: ColorPalette
|
|
34
|
-
bgColor?: ColorPalette
|
|
35
|
-
borderTopColor?: ColorPalette
|
|
36
|
-
headlineColor?: ColorPalette
|
|
37
|
-
}>(),
|
|
38
|
-
{
|
|
39
|
-
titleSize: 'md',
|
|
40
|
-
titleColor: 'light-1',
|
|
41
|
-
logoAsLink: true,
|
|
42
|
-
logoLinkTarget: '_self',
|
|
43
|
-
displaySocialIcons: true,
|
|
44
|
-
socialIconColor: 'light-1',
|
|
45
|
-
menuItemAsLink: true,
|
|
46
|
-
menuTextSize: 'md',
|
|
47
|
-
menuTextColor: 'light-1',
|
|
48
|
-
menuTextBold: false,
|
|
49
|
-
displayHighlight: true,
|
|
50
|
-
highlightColor: 'primary',
|
|
51
|
-
bgColor: 'dark-3',
|
|
52
|
-
borderTopColor: 'primary',
|
|
53
|
-
headlineColor: 'light-1',
|
|
54
|
-
}
|
|
55
|
-
)
|
|
56
|
-
|
|
57
|
-
const slots = defineSlots<{
|
|
58
|
-
default: any
|
|
59
|
-
}>()
|
|
60
|
-
const emit = defineEmits<{
|
|
61
|
-
(e: 'logo-click', event: Event, link: string, target: CtaTarget): void
|
|
62
|
-
(e: 'menu-click', event: Event, item: MenuItemType): void
|
|
63
|
-
}>()
|
|
64
|
-
|
|
65
|
-
const getFooterClass = (bg: ColorPalette, border: ColorPalette): string => {
|
|
66
|
-
/**
|
|
67
|
-
* @bg - bgColor
|
|
68
|
-
* @border - borderTopColor
|
|
69
|
-
*/
|
|
70
|
-
|
|
71
|
-
const classArray: string[] = [
|
|
72
|
-
generateClass('BGCOLOR', bg),
|
|
73
|
-
generateClass('BORDER', border),
|
|
74
|
-
]
|
|
75
|
-
return classArray.join(' ')
|
|
76
|
-
}
|
|
77
|
-
const getTitleClass = (size: HeadingSize, color: ColorPalette): string => {
|
|
78
|
-
/**
|
|
79
|
-
* @size - titleSize
|
|
80
|
-
* @color - titleColor
|
|
81
|
-
*/
|
|
82
|
-
const classArray: string[] = [
|
|
83
|
-
generateClass('H2', size),
|
|
84
|
-
generateClass('TEXTCOLOR', color),
|
|
85
|
-
]
|
|
86
|
-
return classArray.join(' ')
|
|
87
|
-
}
|
|
88
|
-
const getMenuItemClass = (
|
|
89
|
-
size: BodyText,
|
|
90
|
-
color: ColorPalette,
|
|
91
|
-
bold: boolean
|
|
92
|
-
): string => {
|
|
93
|
-
/**
|
|
94
|
-
* @size - menuTextSize
|
|
95
|
-
* @color - menuTextColor
|
|
96
|
-
* @bold - menuTextBold
|
|
97
|
-
*/
|
|
98
|
-
const classArray: string[] = [
|
|
99
|
-
generateClass('BODYTEXT', size),
|
|
100
|
-
generateClass('TEXTCOLOR', color),
|
|
101
|
-
]
|
|
102
|
-
if (bold) {
|
|
103
|
-
classArray.push('font-bold')
|
|
104
|
-
}
|
|
105
|
-
return classArray.join(' ')
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
const handleTitleClick = (e: Event) => {
|
|
109
|
-
const { logoAsLink, logoLink, logoLinkTarget } = props
|
|
110
|
-
!logoAsLink && e.preventDefault()
|
|
111
|
-
emit('logo-click', e, logoLink, logoLinkTarget)
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
const handleMenuItemClick = (e: Event, item: MenuItemType) => {
|
|
115
|
-
const { menuItemAsLink } = props
|
|
116
|
-
!menuItemAsLink && e.preventDefault()
|
|
117
|
-
emit('menu-click', e, item)
|
|
118
|
-
}
|
|
119
|
-
</script>
|
|
120
|
-
|
|
121
|
-
<template>
|
|
122
|
-
<footer
|
|
123
|
-
class="border-t-2 py-6 sm:py-8 md:py-12"
|
|
124
|
-
:class="getFooterClass(bgColor, borderTopColor)"
|
|
125
|
-
>
|
|
126
|
-
<div class="container px-xs md:px-lg lg:px-xl">
|
|
127
|
-
<div
|
|
128
|
-
class="flex flex-col md:flex-row flex-wrap justify-between mb-xs md:mb-md px-xs md:px-md border-b-2"
|
|
129
|
-
:class="generateClass('BORDER', headlineColor)"
|
|
130
|
-
>
|
|
131
|
-
<div class="h-lg md:h-xl align-middle mb-xs">
|
|
132
|
-
<a
|
|
133
|
-
:href="logoLink"
|
|
134
|
-
:target="logoLinkTarget"
|
|
135
|
-
class="h-full inline-block outline-none focus:ring-2 ring-offset-2 ring-offset-transparent rounded-md transition-all duration-300 ease-linear"
|
|
136
|
-
:class="generateClass('RINGCOLOR', titleColor)"
|
|
137
|
-
@click="handleTitleClick($event)"
|
|
138
|
-
>
|
|
139
|
-
<img class="inline-block h-full" :src="logo" :alt="logoAlt" />
|
|
140
|
-
</a>
|
|
141
|
-
</div>
|
|
142
|
-
<div
|
|
143
|
-
v-if="displaySocialIcons"
|
|
144
|
-
class="mb-xs flex items-center justify-end md:justify-center"
|
|
145
|
-
>
|
|
146
|
-
<!-- social icons -->
|
|
147
|
-
<social-icons
|
|
148
|
-
:social-links="socialLinks"
|
|
149
|
-
:icon-color="socialIconColor"
|
|
150
|
-
></social-icons>
|
|
151
|
-
</div>
|
|
152
|
-
</div>
|
|
153
|
-
<div
|
|
154
|
-
class="flex flex-wrap md:justify-between items-center md:items-start gap-6 md:gap-8"
|
|
155
|
-
>
|
|
156
|
-
<div class="grid gap-2 justify-items-center basis-full md:basis-1/3">
|
|
157
|
-
<h2
|
|
158
|
-
class="inline-block align-middle tracking-wider"
|
|
159
|
-
:class="getTitleClass(titleSize, titleColor)"
|
|
160
|
-
v-html="title"
|
|
161
|
-
></h2>
|
|
162
|
-
<small v-if="copyText" class="text-xs text-white align-middle mb-2">
|
|
163
|
-
© {{ copyText + ' ' + new Date().getFullYear() }}
|
|
164
|
-
</small>
|
|
165
|
-
<div class="px-xs md:px-0">
|
|
166
|
-
<slot></slot>
|
|
167
|
-
</div>
|
|
168
|
-
</div>
|
|
169
|
-
<nav
|
|
170
|
-
class="text-sm flex flex-col md:flex-row items-center sm:items-start sm:flex-row text-center sm:text-left gap-xs justify-between md:justify-around grow md:basis-1/2"
|
|
171
|
-
>
|
|
172
|
-
<ul
|
|
173
|
-
class="flex flex-wrap md:flex-col justify-center items-center gap-2xs"
|
|
174
|
-
>
|
|
175
|
-
<li
|
|
176
|
-
v-for="(item, i) in menuItems"
|
|
177
|
-
:key="`first-nav-${i}`"
|
|
178
|
-
class="inline-block"
|
|
179
|
-
>
|
|
180
|
-
<a
|
|
181
|
-
:href="item.url"
|
|
182
|
-
:target="item.target ? item.target : '_self'"
|
|
183
|
-
class="tracking-wide outline-none nav__text"
|
|
184
|
-
:class="
|
|
185
|
-
getMenuItemClass(menuTextSize, menuTextColor, menuTextBold)
|
|
186
|
-
"
|
|
187
|
-
@click="handleMenuItemClick($event, item)"
|
|
188
|
-
v-html="item.title"
|
|
189
|
-
>
|
|
190
|
-
</a>
|
|
191
|
-
<div
|
|
192
|
-
v-if="displayHighlight"
|
|
193
|
-
class="relative top-3xs h-3xs nav__decorator"
|
|
194
|
-
:class="generateClass('BEFOREBG', highlightColor)"
|
|
195
|
-
></div>
|
|
196
|
-
</li>
|
|
197
|
-
</ul>
|
|
198
|
-
|
|
199
|
-
<!-- secondary menu -->
|
|
200
|
-
<ul
|
|
201
|
-
v-if="secondaryMenuItems"
|
|
202
|
-
class="flex flex-wrap md:flex-col justify-center items-center gap-2xs"
|
|
203
|
-
>
|
|
204
|
-
<li
|
|
205
|
-
v-for="(item, i) in secondaryMenuItems"
|
|
206
|
-
:key="`second-nav-${i}`"
|
|
207
|
-
class="inline-block"
|
|
208
|
-
>
|
|
209
|
-
<a
|
|
210
|
-
:href="item.url"
|
|
211
|
-
:target="item.target ? item.target : '_self'"
|
|
212
|
-
class="tracking-wide outline-none nav__text"
|
|
213
|
-
:class="
|
|
214
|
-
getMenuItemClass(menuTextSize, menuTextColor, menuTextBold)
|
|
215
|
-
"
|
|
216
|
-
@click="handleMenuItemClick($event, item)"
|
|
217
|
-
v-html="item.title"
|
|
218
|
-
>
|
|
219
|
-
</a>
|
|
220
|
-
<div
|
|
221
|
-
v-if="displayHighlight"
|
|
222
|
-
class="relative top-3xs h-3xs nav__decorator"
|
|
223
|
-
:class="generateClass('BEFOREBG', highlightColor)"
|
|
224
|
-
></div>
|
|
225
|
-
</li>
|
|
226
|
-
</ul>
|
|
227
|
-
</nav>
|
|
228
|
-
</div>
|
|
229
|
-
</div>
|
|
230
|
-
</footer>
|
|
231
|
-
</template>
|
|
232
|
-
|
|
233
|
-
<style lang="scss" scoped>
|
|
234
|
-
.nav__decorator {
|
|
235
|
-
&::before {
|
|
236
|
-
content: '';
|
|
237
|
-
position: absolute;
|
|
238
|
-
bottom: 0;
|
|
239
|
-
left: 0;
|
|
240
|
-
height: 100%;
|
|
241
|
-
width: 0;
|
|
242
|
-
transition: width 0.3s linear;
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
.nav__text:focus + .nav__decorator::before,
|
|
247
|
-
.nav__text:hover + .nav__decorator::before {
|
|
248
|
-
width: 100%;
|
|
249
|
-
}
|
|
250
|
-
</style>
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import type { BodyText, ColorPalette, CtaTarget, HeadingSize } from '@bobbykim/manguito-theme';
|
|
2
|
-
import type { MenuItemType, SocialUrl } from './index.types';
|
|
3
|
-
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
4
|
-
title: string;
|
|
5
|
-
titleSize?: HeadingSize | undefined;
|
|
6
|
-
titleColor?: ColorPalette | undefined;
|
|
7
|
-
copyText?: string | undefined;
|
|
8
|
-
logo: string;
|
|
9
|
-
logoAlt?: string | undefined;
|
|
10
|
-
logoAsLink?: boolean | undefined;
|
|
11
|
-
logoLink: string;
|
|
12
|
-
logoLinkTarget?: CtaTarget | undefined;
|
|
13
|
-
displaySocialIcons?: boolean | undefined;
|
|
14
|
-
socialIconColor: ColorPalette;
|
|
15
|
-
socialLinks?: SocialUrl | undefined;
|
|
16
|
-
menuItems: MenuItemType[];
|
|
17
|
-
secondaryMenuItems?: MenuItemType[] | undefined;
|
|
18
|
-
menuItemAsLink?: boolean | undefined;
|
|
19
|
-
menuTextSize?: BodyText | undefined;
|
|
20
|
-
menuTextColor?: ColorPalette | undefined;
|
|
21
|
-
menuTextBold?: boolean | undefined;
|
|
22
|
-
displayHighlight?: boolean | undefined;
|
|
23
|
-
highlightColor?: ColorPalette | undefined;
|
|
24
|
-
bgColor?: ColorPalette | undefined;
|
|
25
|
-
borderTopColor?: ColorPalette | undefined;
|
|
26
|
-
headlineColor?: ColorPalette | undefined;
|
|
27
|
-
}>, {
|
|
28
|
-
titleSize: string;
|
|
29
|
-
titleColor: string;
|
|
30
|
-
logoAsLink: boolean;
|
|
31
|
-
logoLinkTarget: string;
|
|
32
|
-
displaySocialIcons: boolean;
|
|
33
|
-
socialIconColor: string;
|
|
34
|
-
menuItemAsLink: boolean;
|
|
35
|
-
menuTextSize: string;
|
|
36
|
-
menuTextColor: string;
|
|
37
|
-
menuTextBold: boolean;
|
|
38
|
-
displayHighlight: boolean;
|
|
39
|
-
highlightColor: string;
|
|
40
|
-
bgColor: string;
|
|
41
|
-
borderTopColor: string;
|
|
42
|
-
headlineColor: string;
|
|
43
|
-
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
44
|
-
"logo-click": (event: Event, link: string, target: CtaTarget) => void;
|
|
45
|
-
"menu-click": (event: Event, item: MenuItemType) => void;
|
|
46
|
-
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
47
|
-
title: string;
|
|
48
|
-
titleSize?: HeadingSize | undefined;
|
|
49
|
-
titleColor?: ColorPalette | undefined;
|
|
50
|
-
copyText?: string | undefined;
|
|
51
|
-
logo: string;
|
|
52
|
-
logoAlt?: string | undefined;
|
|
53
|
-
logoAsLink?: boolean | undefined;
|
|
54
|
-
logoLink: string;
|
|
55
|
-
logoLinkTarget?: CtaTarget | undefined;
|
|
56
|
-
displaySocialIcons?: boolean | undefined;
|
|
57
|
-
socialIconColor: ColorPalette;
|
|
58
|
-
socialLinks?: SocialUrl | undefined;
|
|
59
|
-
menuItems: MenuItemType[];
|
|
60
|
-
secondaryMenuItems?: MenuItemType[] | undefined;
|
|
61
|
-
menuItemAsLink?: boolean | undefined;
|
|
62
|
-
menuTextSize?: BodyText | undefined;
|
|
63
|
-
menuTextColor?: ColorPalette | undefined;
|
|
64
|
-
menuTextBold?: boolean | undefined;
|
|
65
|
-
displayHighlight?: boolean | undefined;
|
|
66
|
-
highlightColor?: ColorPalette | undefined;
|
|
67
|
-
bgColor?: ColorPalette | undefined;
|
|
68
|
-
borderTopColor?: ColorPalette | undefined;
|
|
69
|
-
headlineColor?: ColorPalette | undefined;
|
|
70
|
-
}>, {
|
|
71
|
-
titleSize: string;
|
|
72
|
-
titleColor: string;
|
|
73
|
-
logoAsLink: boolean;
|
|
74
|
-
logoLinkTarget: string;
|
|
75
|
-
displaySocialIcons: boolean;
|
|
76
|
-
socialIconColor: string;
|
|
77
|
-
menuItemAsLink: boolean;
|
|
78
|
-
menuTextSize: string;
|
|
79
|
-
menuTextColor: string;
|
|
80
|
-
menuTextBold: boolean;
|
|
81
|
-
displayHighlight: boolean;
|
|
82
|
-
highlightColor: string;
|
|
83
|
-
bgColor: string;
|
|
84
|
-
borderTopColor: string;
|
|
85
|
-
headlineColor: string;
|
|
86
|
-
}>>> & {
|
|
87
|
-
"onLogo-click"?: ((event: Event, link: string, target: CtaTarget) => any) | undefined;
|
|
88
|
-
"onMenu-click"?: ((event: Event, item: MenuItemType) => any) | undefined;
|
|
89
|
-
}, {
|
|
90
|
-
bgColor: ColorPalette;
|
|
91
|
-
titleColor: ColorPalette;
|
|
92
|
-
titleSize: HeadingSize;
|
|
93
|
-
logoAsLink: boolean;
|
|
94
|
-
logoLinkTarget: CtaTarget;
|
|
95
|
-
displaySocialIcons: boolean;
|
|
96
|
-
socialIconColor: ColorPalette;
|
|
97
|
-
menuItemAsLink: boolean;
|
|
98
|
-
menuTextSize: BodyText;
|
|
99
|
-
menuTextColor: ColorPalette;
|
|
100
|
-
menuTextBold: boolean;
|
|
101
|
-
displayHighlight: boolean;
|
|
102
|
-
highlightColor: ColorPalette;
|
|
103
|
-
borderTopColor: ColorPalette;
|
|
104
|
-
headlineColor: ColorPalette;
|
|
105
|
-
}, {}>, Readonly<{
|
|
106
|
-
default: any;
|
|
107
|
-
}> & {
|
|
108
|
-
default: any;
|
|
109
|
-
}>;
|
|
110
|
-
export default _default;
|
|
111
|
-
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
112
|
-
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
113
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
114
|
-
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
115
|
-
} : {
|
|
116
|
-
type: import('vue').PropType<T[K]>;
|
|
117
|
-
required: true;
|
|
118
|
-
};
|
|
119
|
-
};
|
|
120
|
-
type __VLS_WithDefaults<P, D> = {
|
|
121
|
-
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
122
|
-
default: D[K];
|
|
123
|
-
}> : P[K];
|
|
124
|
-
};
|
|
125
|
-
type __VLS_Prettify<T> = {
|
|
126
|
-
[K in keyof T]: T[K];
|
|
127
|
-
} & {};
|
|
128
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
129
|
-
new (): {
|
|
130
|
-
$slots: S;
|
|
131
|
-
};
|
|
132
|
-
};
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { ref, markRaw, onMounted, computed } from 'vue'
|
|
3
|
-
import type { ColorPalette } from '@bobbykim/manguito-theme'
|
|
4
|
-
import generateClass from '@bobbykim/manguito-theme'
|
|
5
|
-
import type { SocialUrl } from './index.types'
|
|
6
|
-
// Import Icon files
|
|
7
|
-
import GithubIcon from '../common//icons/GithubIcon.vue'
|
|
8
|
-
import InstagramIcon from '../common/icons/InstagramIcon.vue'
|
|
9
|
-
import LinkedinIcon from '../common/icons/LinkedinIcon.vue'
|
|
10
|
-
import TwitterIcon from '../common/icons/TwitterIcon.vue'
|
|
11
|
-
|
|
12
|
-
const props = withDefaults(
|
|
13
|
-
defineProps<{
|
|
14
|
-
iconColor: ColorPalette
|
|
15
|
-
socialLinks?: SocialUrl
|
|
16
|
-
}>(),
|
|
17
|
-
{
|
|
18
|
-
iconColor: 'light-1',
|
|
19
|
-
}
|
|
20
|
-
)
|
|
21
|
-
|
|
22
|
-
interface IconList {
|
|
23
|
-
url: string
|
|
24
|
-
icon: any
|
|
25
|
-
label: string
|
|
26
|
-
}
|
|
27
|
-
const iconsRef = ref<any>([])
|
|
28
|
-
|
|
29
|
-
const handleIconsList = (): void => {
|
|
30
|
-
const { linkedin, instagram, github, twitter } = props.socialLinks!
|
|
31
|
-
|
|
32
|
-
const iconsList: IconList[] = []
|
|
33
|
-
if (linkedin) {
|
|
34
|
-
iconsList.push({
|
|
35
|
-
url: linkedin,
|
|
36
|
-
icon: markRaw(LinkedinIcon),
|
|
37
|
-
label: 'linkedin social icon',
|
|
38
|
-
})
|
|
39
|
-
}
|
|
40
|
-
if (github) {
|
|
41
|
-
iconsList.push({
|
|
42
|
-
url: github,
|
|
43
|
-
icon: markRaw(GithubIcon),
|
|
44
|
-
label: 'github social icon',
|
|
45
|
-
})
|
|
46
|
-
}
|
|
47
|
-
if (instagram) {
|
|
48
|
-
iconsList.push({
|
|
49
|
-
url: instagram,
|
|
50
|
-
icon: markRaw(InstagramIcon),
|
|
51
|
-
label: 'instagram social icon',
|
|
52
|
-
})
|
|
53
|
-
}
|
|
54
|
-
if (twitter) {
|
|
55
|
-
iconsList.push({
|
|
56
|
-
url: twitter,
|
|
57
|
-
icon: markRaw(TwitterIcon),
|
|
58
|
-
label: 'twitter social icon',
|
|
59
|
-
})
|
|
60
|
-
}
|
|
61
|
-
iconsRef.value = iconsList
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
const getIconList = computed(() => {
|
|
65
|
-
return iconsRef.value
|
|
66
|
-
})
|
|
67
|
-
|
|
68
|
-
const getIconColor = (color: ColorPalette): string => {
|
|
69
|
-
/**
|
|
70
|
-
* @color - iconColor
|
|
71
|
-
*/
|
|
72
|
-
const classArray: string[] = [
|
|
73
|
-
generateClass('TEXTCOLOR', color),
|
|
74
|
-
generateClass('RINGCOLOR', color),
|
|
75
|
-
]
|
|
76
|
-
return classArray.join(' ')
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
onMounted(() => {
|
|
80
|
-
handleIconsList()
|
|
81
|
-
})
|
|
82
|
-
</script>
|
|
83
|
-
|
|
84
|
-
<template>
|
|
85
|
-
<ul class="flex flex-wrap">
|
|
86
|
-
<li v-for="(item, index) in iconsRef" :key="index" class="mr-xs last:mr-0">
|
|
87
|
-
<a
|
|
88
|
-
:href="item.url"
|
|
89
|
-
target="_blank"
|
|
90
|
-
class="inline-block outline-none focus:ring-2 hover:ring-2 hover:opacity-70 ring-offset-2 ring-offset-transparent rounded-md transition-all duration-300 ease-linear"
|
|
91
|
-
:class="getIconColor(iconColor)"
|
|
92
|
-
:aria-label="item.label"
|
|
93
|
-
>
|
|
94
|
-
<component :is="item.icon"></component>
|
|
95
|
-
</a>
|
|
96
|
-
</li>
|
|
97
|
-
</ul>
|
|
98
|
-
</template>
|
|
99
|
-
|
|
100
|
-
<style lang="scss" scoped></style>
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import type { ColorPalette } from '@bobbykim/manguito-theme';
|
|
2
|
-
import type { SocialUrl } from './index.types';
|
|
3
|
-
declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
4
|
-
iconColor: ColorPalette;
|
|
5
|
-
socialLinks?: SocialUrl | undefined;
|
|
6
|
-
}>, {
|
|
7
|
-
iconColor: string;
|
|
8
|
-
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
9
|
-
iconColor: ColorPalette;
|
|
10
|
-
socialLinks?: SocialUrl | undefined;
|
|
11
|
-
}>, {
|
|
12
|
-
iconColor: string;
|
|
13
|
-
}>>>, {
|
|
14
|
-
iconColor: ColorPalette;
|
|
15
|
-
}, {}>;
|
|
16
|
-
export default _default;
|
|
17
|
-
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
18
|
-
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
19
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
20
|
-
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
21
|
-
} : {
|
|
22
|
-
type: import('vue').PropType<T[K]>;
|
|
23
|
-
required: true;
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
type __VLS_WithDefaults<P, D> = {
|
|
27
|
-
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
28
|
-
default: D[K];
|
|
29
|
-
}> : P[K];
|
|
30
|
-
};
|
|
31
|
-
type __VLS_Prettify<T> = {
|
|
32
|
-
[K in keyof T]: T[K];
|
|
33
|
-
} & {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { CtaTarget } from '@bobbykim/manguito-theme';
|
|
2
|
-
export interface MenuItemType {
|
|
3
|
-
title: string;
|
|
4
|
-
url: string;
|
|
5
|
-
target?: CtaTarget;
|
|
6
|
-
}
|
|
7
|
-
export interface SocialUrl {
|
|
8
|
-
linkedin?: string;
|
|
9
|
-
instagram?: string;
|
|
10
|
-
github?: string;
|
|
11
|
-
twitter?: string;
|
|
12
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { CtaTarget } from '@bobbykim/manguito-theme'
|
|
2
|
-
|
|
3
|
-
export interface MenuItemType {
|
|
4
|
-
title: string
|
|
5
|
-
url: string
|
|
6
|
-
target?: CtaTarget
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export interface SocialUrl {
|
|
10
|
-
linkedin?: string
|
|
11
|
-
instagram?: string
|
|
12
|
-
github?: string
|
|
13
|
-
twitter?: string
|
|
14
|
-
}
|
package/tsconfig.json
DELETED
package/tsconfig.ts.json
DELETED