@bobbykim/mcl-footer 0.9.9 → 0.10.1

package/dist/index.d.ts

@@ -18,13 +18,13 @@ titleSize: HeadingSize;
 titleColor: ColorPalette;
 logoAsLink: boolean;
 logoLinkTarget: CtaTarget;
-displaySocialIcons: boolean;
+showSocialIcons: boolean;
 socialIconColor: ColorPalette;
 menuItemAsLink: boolean;
 menuTextSize: BodyText;
 menuTextColor: ColorPalette;
 menuTextBold: boolean;
-displayHighlight: boolean;
+showHighlight: boolean;
 highlightColor: ColorPalette;
 bgColor: ColorPalette;
 borderTopColor: ColorPalette;
@@ -40,7 +40,7 @@ declare type __VLS_Props = {
     logoAsLink?: boolean;
     logoLink: string;
     logoLinkTarget?: CtaTarget;
-    displaySocialIcons?: boolean;
+    showSocialIcons?: boolean;
     socialIconColor: ColorPalette;
     socialLinks?: SocialUrl;
     menuItems: MenuItemType[];
@@ -49,7 +49,7 @@ declare type __VLS_Props = {
     menuTextSize?: BodyText;
     menuTextColor?: ColorPalette;
     menuTextBold?: boolean;
-    displayHighlight?: boolean;
+    showHighlight?: boolean;
     highlightColor?: ColorPalette;
     bgColor?: ColorPalette;
     borderTopColor?: ColorPalette;

package/dist/mcl-footer.js

@@ -1,6 +1,6 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.nav__decorator[data-v-21dde3ea]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-21dde3ea]:before,.nav__text:hover+.nav__decorator[data-v-21dde3ea]:before{width:100%}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { defineComponent as b, computed as k, openBlock as c, createElementBlock as r, Fragment as L, renderList as v, createElementVNode as t, normalizeClass as d, useSlots as T, unref as h, createVNode as I, createCommentVNode as x, renderSlot as A } from "vue";
-import a from "@bobbykim/manguito-theme";
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.nav__decorator[data-v-7bf1ebe4]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-7bf1ebe4]:before,.nav__text:hover+.nav__decorator[data-v-7bf1ebe4]:before{width:100%}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { defineComponent as p, computed as w, openBlock as r, createElementBlock as c, Fragment as v, renderList as y, createElementVNode as n, normalizeClass as d, useSlots as V, unref as h, createVNode as A, createCommentVNode as x, renderSlot as I } from "vue";
+import { generateClass as a } from "@bobbykim/manguito-theme";
 const _ = `<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 448 512"
@@ -25,7 +25,7 @@ const _ = `<svg
   <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"
   />
-</svg>`, H = `<svg
+</svg>`, z = `<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 448 512"
   fill="currentColor"
@@ -37,7 +37,7 @@ const _ = `<svg
   <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"
   />
-</svg>`, z = `<svg
+</svg>`, H = `<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 448 512"
   fill="currentColor"
@@ -49,62 +49,62 @@ const _ = `<svg
   <path
     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"
   />
-</svg>`, B = { class: "flex flex-wrap" }, O = ["href", "aria-label"], V = ["innerHTML"], F = /* @__PURE__ */ b({
+</svg>`, T = { class: "flex flex-wrap" }, B = ["href", "aria-label"], j = ["innerHTML"], S = /* @__PURE__ */ p({
   __name: "SocialIcons",
   props: {
     iconColor: { default: "light-1" },
     socialLinks: {}
   },
   setup(e) {
-    const s = e, m = k(() => {
-      const o = [];
-      return s.socialLinks?.linkedin && o.push({
+    const s = e, m = w(() => {
+      const t = [];
+      return s.socialLinks?.linkedin && t.push({
         url: s.socialLinks.linkedin,
-        icon: H,
+        icon: z,
         label: "linkedin social icon"
-      }), s.socialLinks?.github && o.push({
+      }), s.socialLinks?.github && t.push({
         url: s.socialLinks.github,
         icon: _,
         label: "github social icon"
-      }), s.socialLinks?.instagram && o.push({
+      }), s.socialLinks?.instagram && t.push({
         url: s.socialLinks.instagram,
         icon: M,
         label: "instagram social icon"
-      }), s.socialLinks?.twitter && o.push({
+      }), s.socialLinks?.twitter && t.push({
         url: s.socialLinks.twitter,
-        icon: z,
+        icon: H,
         label: "x/twitter social icon"
-      }), o;
-    }), u = (o) => [
-      a("TEXTCOLOR", o),
-      a("RINGCOLOR", o)
+      }), t;
+    }), u = (t) => [
+      a.textColorVariant({ color: t }),
+      a.ringColorVariant({ color: t })
     ].join(" ");
-    return (o, w) => (c(), r("ul", B, [
-      (c(!0), r(L, null, v(m.value, (g, C) => (c(), r("li", {
+    return (t, k) => (r(), c("ul", T, [
+      (r(!0), c(v, null, y(m.value, (g, C) => (r(), c("li", {
         key: C,
         class: "mr-xs last:mr-0"
       }, [
-        t("a", {
+        n("a", {
           href: g.url,
           target: "_blank",
-          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", u(e.iconColor)]),
+          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", u(e.iconColor)]),
           "aria-label": g.label,
           role: "button"
         }, [
-          t("div", {
+          n("div", {
             innerHTML: g.icon
-          }, null, 8, V)
-        ], 10, O)
+          }, null, 8, j)
+        ], 10, B)
       ]))), 128))
     ]));
   }
-}), R = { class: "container px-xs md:px-lg lg:px-xl" }, j = { class: "h-lg md:h-xl align-middle mb-xs" }, S = ["href", "target"], E = ["src", "alt"], $ = {
+}), F = { class: "container px-xs md:px-lg lg:px-xl" }, $ = { class: "mb-xs h-lg align-middle md:h-xl" }, Z = ["href", "target"], N = ["src", "alt"], P = {
   key: 0,
   class: "mb-xs flex items-center justify-end md:justify-center"
-}, G = { class: "flex flex-wrap md:justify-between items-center md:items-start gap-6 md:gap-8" }, Z = { class: "grid gap-2 justify-items-center basis-full md:basis-1/3" }, D = ["innerHTML"], N = { class: "px-xs md:px-0" }, X = { 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" }, P = { class: "flex flex-wrap md:flex-col justify-center items-center gap-2xs" }, Y = ["href", "target", "onClick", "innerHTML"], q = {
+}, D = { class: "flex flex-wrap items-center gap-6 md:items-start md:justify-between md:gap-8" }, E = { class: "grid basis-full justify-items-center gap-2 md:basis-1/3" }, G = ["innerHTML"], O = { class: "px-xs md:px-0" }, X = { 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" }, q = { class: "flex flex-wrap items-center justify-center gap-2xs md:flex-col" }, J = ["href", "target", "onClick", "innerHTML"], K = {
   key: 0,
-  class: "flex flex-wrap md:flex-col justify-center items-center gap-2xs"
-}, J = ["href", "target", "onClick", "innerHTML"], K = /* @__PURE__ */ b({
+  class: "flex flex-wrap items-center justify-center gap-2xs md:flex-col"
+}, Q = ["href", "target", "onClick", "innerHTML"], R = /* @__PURE__ */ p({
   __name: "MclFooterA",
   props: {
     title: {},
@@ -115,7 +115,7 @@ const _ = `<svg
     logoAsLink: { type: Boolean, default: !1 },
     logoLink: {},
     logoLinkTarget: { default: "_self" },
-    displaySocialIcons: { type: Boolean, default: !0 },
+    showSocialIcons: { type: Boolean, default: !0 },
     socialIconColor: { default: "light-1" },
     socialLinks: {},
     menuItems: {},
@@ -124,7 +124,7 @@ const _ = `<svg
     menuTextSize: { default: "md" },
     menuTextColor: { default: "light-1" },
     menuTextBold: { type: Boolean, default: !1 },
-    displayHighlight: { type: Boolean, default: !0 },
+    showHighlight: { type: Boolean, default: !0 },
     highlightColor: { default: "primary" },
     bgColor: { default: "dark-3" },
     borderTopColor: { default: "primary" },
@@ -133,104 +133,110 @@ const _ = `<svg
   emits: ["logo-click", "menu-click"],
   setup(e, { emit: s }) {
     const m = e;
-    T();
-    const u = s, o = k(() => {
+    V();
+    const u = s, t = w(() => {
       const { bgColor: l, borderTopColor: i } = m;
       return [
-        a("BGCOLOR", l),
-        a("BORDER", i)
+        a.bgColorVariant({ color: l }),
+        a.borderColorVariant({ color: i })
       ].join(" ");
-    }), w = k(() => {
+    }), k = w(() => {
       const { titleSize: l, titleColor: i } = m;
       return [
-        a("H2", l),
-        a("TEXTCOLOR", i)
+        a.h2Variant({ size: l }),
+        a.textColorVariant({ color: i })
       ].join(" ");
-    }), g = k(() => {
-      const { menuTextSize: l, menuTextColor: i, menuTextBold: n } = m;
+    }), g = w(() => {
+      const { menuTextSize: l, menuTextColor: i, menuTextBold: o } = m;
       return [
-        a("BODYTEXT", l),
-        a("TEXTCOLOR", i)
+        a.bodyTextVariant({ size: l }),
+        a.textColorVariant({ color: i })
       ].join(" ");
     }), C = (l) => {
-      const { logoAsLink: i, logoLink: n, logoLinkTarget: f } = m;
-      !i && l.preventDefault(), u("logo-click", l, n, f);
-    }, p = (l, i) => {
-      const { menuItemAsLink: n } = m;
-      !n && l.preventDefault(), u("menu-click", l, i);
+      const { logoAsLink: i, logoLink: o, logoLinkTarget: f } = m;
+      !i && l.preventDefault(), u("logo-click", l, o, f);
+    }, L = (l, i) => {
+      const { menuItemAsLink: o } = m;
+      !o && l.preventDefault(), u("menu-click", l, i);
     };
-    return (l, i) => (c(), r("footer", {
-      class: d(["border-t-2 py-6 sm:py-8 md:py-12", o.value])
+    return (l, i) => (r(), c("footer", {
+      class: d(["border-t-2 py-6 sm:py-8 md:py-12", t.value])
     }, [
-      t("div", R, [
-        t("div", {
-          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", h(a)("BORDER", e.headlineColor)])
+      n("div", F, [
+        n("div", {
+          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 })])
         }, [
-          t("div", j, [
-            t("a", {
+          n("div", $, [
+            n("a", {
               href: e.logoLink,
               target: e.logoLinkTarget,
-              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", h(a)("RINGCOLOR", e.titleColor)]),
-              onClick: i[0] || (i[0] = (n) => C(n))
+              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 })]),
+              onClick: i[0] || (i[0] = (o) => C(o))
             }, [
-              t("img", {
+              n("img", {
                 class: "inline-block h-full",
                 src: e.logo,
                 alt: e.logoAlt
-              }, null, 8, E)
-            ], 10, S)
+              }, null, 8, N)
+            ], 10, Z)
           ]),
-          e.displaySocialIcons ? (c(), r("div", $, [
-            I(F, {
+          e.showSocialIcons ? (r(), c("div", P, [
+            A(S, {
               "social-links": e.socialLinks,
               "icon-color": e.socialIconColor
             }, null, 8, ["social-links", "icon-color"])
           ])) : x("", !0)
         ], 2),
-        t("div", G, [
-          t("div", Z, [
-            t("h2", {
-              class: d(["inline-block align-middle tracking-wider", w.value]),
+        n("div", D, [
+          n("div", E, [
+            n("h2", {
+              class: d(["inline-block align-middle tracking-wider", k.value]),
               innerHTML: e.title
-            }, null, 10, D),
-            t("div", N, [
-              A(l.$slots, "default", {}, void 0, !0)
+            }, null, 10, G),
+            n("div", O, [
+              I(l.$slots, "default", {}, void 0, !0)
             ])
           ]),
-          t("nav", X, [
-            t("ul", P, [
-              (c(!0), r(L, null, v(e.menuItems, (n, f) => (c(), r("li", {
+          n("nav", X, [
+            n("ul", q, [
+              (r(!0), c(v, null, y(e.menuItems, (o, f) => (r(), c("li", {
                 key: `first-nav-${f}`,
                 class: "inline-block"
               }, [
-                t("a", {
-                  href: n.url,
-                  target: n.target ? n.target : "_self",
-                  class: d(["tracking-wide outline-none nav__text", g.value]),
-                  onClick: (y) => p(y, n),
-                  innerHTML: n.title
-                }, null, 10, Y),
-                e.displayHighlight ? (c(), r("div", {
+                n("a", {
+                  href: o.url,
+                  target: o.target ? o.target : "_self",
+                  class: d(["nav__text tracking-wide outline-none", g.value]),
+                  onClick: (b) => L(b, o),
+                  innerHTML: o.title
+                }, null, 10, J),
+                e.showHighlight ? (r(), c("div", {
                   key: 0,
-                  class: d(["relative top-3xs h-3xs nav__decorator", h(a)("BEFOREBG", e.highlightColor)])
+                  class: d([
+                    "nav__decorator relative top-3xs h-3xs",
+                    h(a).beforeBgColorVariant({ color: e.highlightColor })
+                  ])
                 }, null, 2)) : x("", !0)
               ]))), 128))
             ]),
-            e.secondaryMenuItems ? (c(), r("ul", q, [
-              (c(!0), r(L, null, v(e.secondaryMenuItems, (n, f) => (c(), r("li", {
+            e.secondaryMenuItems ? (r(), c("ul", K, [
+              (r(!0), c(v, null, y(e.secondaryMenuItems, (o, f) => (r(), c("li", {
                 key: `second-nav-${f}`,
                 class: "inline-block"
               }, [
-                t("a", {
-                  href: n.url,
-                  target: n.target ? n.target : "_self",
-                  class: d(["tracking-wide outline-none nav__text", g.value]),
-                  onClick: (y) => p(y, n),
-                  innerHTML: n.title
-                }, null, 10, J),
-                e.displayHighlight ? (c(), r("div", {
+                n("a", {
+                  href: o.url,
+                  target: o.target ? o.target : "_self",
+                  class: d(["nav__text tracking-wide outline-none", g.value]),
+                  onClick: (b) => L(b, o),
+                  innerHTML: o.title
+                }, null, 10, Q),
+                e.showHighlight ? (r(), c("div", {
                   key: 0,
-                  class: d(["relative top-3xs h-3xs nav__decorator", h(a)("BEFOREBG", e.highlightColor)])
+                  class: d([
+                    "nav__decorator relative top-3xs h-3xs",
+                    h(a).beforeBgColorVariant({ color: e.highlightColor })
+                  ])
                 }, null, 2)) : x("", !0)
               ]))), 128))
             ])) : x("", !0)
@@ -239,12 +245,12 @@ const _ = `<svg
       ])
     ], 2));
   }
-}), Q = (e, s) => {
+}), U = (e, s) => {
   const m = e.__vccOpts || e;
-  for (const [u, o] of s)
-    m[u] = o;
+  for (const [u, t] of s)
+    m[u] = t;
   return m;
-}, ee = /* @__PURE__ */ Q(K, [["__scopeId", "data-v-21dde3ea"]]);
+}, ee = /* @__PURE__ */ U(R, [["__scopeId", "data-v-7bf1ebe4"]]);
 export {
   ee as MclFooterA
 };

package/dist/mcl-footer.umd.cjs

@@ -1,5 +1,5 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.nav__decorator[data-v-21dde3ea]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-21dde3ea]:before,.nav__text:hover+.nav__decorator[data-v-21dde3ea]:before{width:100%}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-(function(r,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):(r=typeof globalThis<"u"?globalThis:r||self,e(r.MclFooter={},r.Vue,r.ManguitoTheme))})(this,(function(r,e,s){"use strict";const p=`<svg
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.nav__decorator[data-v-7bf1ebe4]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-7bf1ebe4]:before,.nav__text:hover+.nav__decorator[data-v-7bf1ebe4]:before{width:100%}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+(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,s){"use strict";const x=`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 448 512"
   fill="currentColor"
@@ -11,7 +11,7 @@
   <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"
   />
-</svg>`,x=`<svg
+</svg>`,u=`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 448 512"
   fill="currentColor"
@@ -23,7 +23,7 @@
   <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"
   />
-</svg>`,w=`<svg
+</svg>`,p=`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 448 512"
   fill="currentColor"
@@ -35,7 +35,7 @@
   <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"
   />
-</svg>`,y=`<svg
+</svg>`,w=`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 448 512"
   fill="currentColor"
@@ -47,4 +47,4 @@
   <path
     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"
   />
-</svg>`,C={class:"flex flex-wrap"},L=["href","aria-label"],b=["innerHTML"],B=e.defineComponent({__name:"SocialIcons",props:{iconColor:{default:"light-1"},socialLinks:{}},setup(n){const i=n,a=e.computed(()=>{const o=[];return i.socialLinks?.linkedin&&o.push({url:i.socialLinks.linkedin,icon:w,label:"linkedin social icon"}),i.socialLinks?.github&&o.push({url:i.socialLinks.github,icon:p,label:"github social icon"}),i.socialLinks?.instagram&&o.push({url:i.socialLinks.instagram,icon:x,label:"instagram social icon"}),i.socialLinks?.twitter&&o.push({url:i.socialLinks.twitter,icon:y,label:"x/twitter social icon"}),o}),m=o=>[s("TEXTCOLOR",o),s("RINGCOLOR",o)].join(" ");return(o,h)=>(e.openBlock(),e.createElementBlock("ul",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(d,g)=>(e.openBlock(),e.createElementBlock("li",{key:g,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",m(n.iconColor)]),"aria-label":d.label,role:"button"},[e.createElementVNode("div",{innerHTML:d.icon},null,8,b)],10,L)]))),128))]))}}),E={class:"container px-xs md:px-lg lg:px-xl"},V={class:"h-lg md:h-xl align-middle mb-xs"},T=["href","target"],z=["src","alt"],_={key:0,class:"mb-xs flex items-center justify-end md:justify-center"},M={class:"flex flex-wrap md:justify-between items-center md:items-start gap-6 md:gap-8"},I={class:"grid gap-2 justify-items-center basis-full md:basis-1/3"},A=["innerHTML"],H={class:"px-xs md:px-0"},N={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"},O={class:"flex flex-wrap md:flex-col justify-center items-center gap-2xs"},F=["href","target","onClick","innerHTML"],j={key:0,class:"flex flex-wrap md:flex-col justify-center items-center gap-2xs"},S=["href","target","onClick","innerHTML"],R=((n,i)=>{const a=n.__vccOpts||n;for(const[m,o]of i)a[m]=o;return a})(e.defineComponent({__name:"MclFooterA",props:{title:{},titleSize:{default:"md"},titleColor:{default:"light-1"},logo:{},logoAlt:{},logoAsLink:{type:Boolean,default:!1},logoLink:{},logoLinkTarget:{default:"_self"},displaySocialIcons:{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},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(n,{emit:i}){const a=n;e.useSlots();const m=i,o=e.computed(()=>{const{bgColor:l,borderTopColor:c}=a;return[s("BGCOLOR",l),s("BORDER",c)].join(" ")}),h=e.computed(()=>{const{titleSize:l,titleColor:c}=a;return[s("H2",l),s("TEXTCOLOR",c)].join(" ")}),d=e.computed(()=>{const{menuTextSize:l,menuTextColor:c,menuTextBold:t}=a;return[s("BODYTEXT",l),s("TEXTCOLOR",c)].join(" ")}),g=l=>{const{logoAsLink:c,logoLink:t,logoLinkTarget:f}=a;!c&&l.preventDefault(),m("logo-click",l,t,f)},u=(l,c)=>{const{menuItemAsLink:t}=a;!t&&l.preventDefault(),m("menu-click",l,c)};return(l,c)=>(e.openBlock(),e.createElementBlock("footer",{class:e.normalizeClass(["border-t-2 py-6 sm:py-8 md:py-12",o.value])},[e.createElementVNode("div",E,[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(s)("BORDER",n.headlineColor)])},[e.createElementVNode("div",V,[e.createElementVNode("a",{href:n.logoLink,target:n.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(s)("RINGCOLOR",n.titleColor)]),onClick:c[0]||(c[0]=t=>g(t))},[e.createElementVNode("img",{class:"inline-block h-full",src:n.logo,alt:n.logoAlt},null,8,z)],10,T)]),n.displaySocialIcons?(e.openBlock(),e.createElementBlock("div",_,[e.createVNode(B,{"social-links":n.socialLinks,"icon-color":n.socialIconColor},null,8,["social-links","icon-color"])])):e.createCommentVNode("",!0)],2),e.createElementVNode("div",M,[e.createElementVNode("div",I,[e.createElementVNode("h2",{class:e.normalizeClass(["inline-block align-middle tracking-wider",h.value]),innerHTML:n.title},null,10,A),e.createElementVNode("div",H,[e.renderSlot(l.$slots,"default",{},void 0,!0)])]),e.createElementVNode("nav",N,[e.createElementVNode("ul",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.menuItems,(t,f)=>(e.openBlock(),e.createElementBlock("li",{key:`first-nav-${f}`,class:"inline-block"},[e.createElementVNode("a",{href:t.url,target:t.target?t.target:"_self",class:e.normalizeClass(["tracking-wide outline-none nav__text",d.value]),onClick:k=>u(k,t),innerHTML:t.title},null,10,F),n.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["relative top-3xs h-3xs nav__decorator",e.unref(s)("BEFOREBG",n.highlightColor)])},null,2)):e.createCommentVNode("",!0)]))),128))]),n.secondaryMenuItems?(e.openBlock(),e.createElementBlock("ul",j,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.secondaryMenuItems,(t,f)=>(e.openBlock(),e.createElementBlock("li",{key:`second-nav-${f}`,class:"inline-block"},[e.createElementVNode("a",{href:t.url,target:t.target?t.target:"_self",class:e.normalizeClass(["tracking-wide outline-none nav__text",d.value]),onClick:k=>u(k,t),innerHTML:t.title},null,10,S),n.displayHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["relative top-3xs h-3xs nav__decorator",e.unref(s)("BEFOREBG",n.highlightColor)])},null,2)):e.createCommentVNode("",!0)]))),128))])):e.createCommentVNode("",!0)])])])],2))}}),[["__scopeId","data-v-21dde3ea"]]);r.MclFooterA=R,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
+</svg>`,b={class:"flex flex-wrap"},y=["href","aria-label"],L=["innerHTML"],V=e.defineComponent({__name:"SocialIcons",props:{iconColor:{default:"light-1"},socialLinks:{}},setup(o){const a=o,c=e.computed(()=>{const n=[];return a.socialLinks?.linkedin&&n.push({url:a.socialLinks.linkedin,icon:p,label:"linkedin social icon"}),a.socialLinks?.github&&n.push({url:a.socialLinks.github,icon:x,label:"github social icon"}),a.socialLinks?.instagram&&n.push({url:a.socialLinks.instagram,icon:u,label:"instagram social icon"}),a.socialLinks?.twitter&&n.push({url:a.socialLinks.twitter,icon:w,label:"x/twitter social icon"}),n}),m=n=>[s.generateClass.textColorVariant({color:n}),s.generateClass.ringColorVariant({color:n})].join(" ");return(n,g)=>(e.openBlock(),e.createElementBlock("ul",b,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.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 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",m(o.iconColor)]),"aria-label":d.label,role:"button"},[e.createElementVNode("div",{innerHTML:d.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"},_=["href","target"],M=["src","alt"],E={key:0,class:"mb-xs flex items-center justify-end md:justify-center"},A={class:"flex flex-wrap items-center gap-6 md:items-start md:justify-between md:gap-8"},I={class:"grid basis-full justify-items-center gap-2 md:basis-1/3"},H=["innerHTML"],N={class:"px-xs md:px-0"},F={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"},j={class:"flex flex-wrap items-center justify-center gap-2xs md:flex-col"},S=["href","target","onClick","innerHTML"],T={key:0,class:"flex flex-wrap items-center justify-center gap-2xs md:flex-col"},$=["href","target","onClick","innerHTML"],Z=((o,a)=>{const c=o.__vccOpts||o;for(const[m,n]of a)c[m]=n;return c})(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"}},emits:["logo-click","menu-click"],setup(o,{emit:a}){const c=o;e.useSlots();const m=a,n=e.computed(()=>{const{bgColor:l,borderTopColor:r}=c;return[s.generateClass.bgColorVariant({color:l}),s.generateClass.borderColorVariant({color:r})].join(" ")}),g=e.computed(()=>{const{titleSize:l,titleColor:r}=c;return[s.generateClass.h2Variant({size:l}),s.generateClass.textColorVariant({color:r})].join(" ")}),d=e.computed(()=>{const{menuTextSize:l,menuTextColor:r,menuTextBold:t}=c;return[s.generateClass.bodyTextVariant({size:l}),s.generateClass.textColorVariant({color:r})].join(" ")}),h=l=>{const{logoAsLink:r,logoLink:t,logoLinkTarget:f}=c;!r&&l.preventDefault(),m("logo-click",l,t,f)},C=(l,r)=>{const{menuItemAsLink:t}=c;!t&&l.preventDefault(),m("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",n.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:o.headlineColor})])},[e.createElementVNode("div",z,[e.createElementVNode("a",{href:o.logoLink,target:o.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:o.titleColor})]),onClick:r[0]||(r[0]=t=>h(t))},[e.createElementVNode("img",{class:"inline-block h-full",src:o.logo,alt:o.logoAlt},null,8,M)],10,_)]),o.showSocialIcons?(e.openBlock(),e.createElementBlock("div",E,[e.createVNode(V,{"social-links":o.socialLinks,"icon-color":o.socialIconColor},null,8,["social-links","icon-color"])])):e.createCommentVNode("",!0)],2),e.createElementVNode("div",A,[e.createElementVNode("div",I,[e.createElementVNode("h2",{class:e.normalizeClass(["inline-block align-middle tracking-wider",g.value]),innerHTML:o.title},null,10,H),e.createElementVNode("div",N,[e.renderSlot(l.$slots,"default",{},void 0,!0)])]),e.createElementVNode("nav",F,[e.createElementVNode("ul",j,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.menuItems,(t,f)=>(e.openBlock(),e.createElementBlock("li",{key:`first-nav-${f}`,class:"inline-block"},[e.createElementVNode("a",{href:t.url,target:t.target?t.target:"_self",class:e.normalizeClass(["nav__text tracking-wide outline-none",d.value]),onClick:k=>C(k,t),innerHTML:t.title},null,10,S),o.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative top-3xs h-3xs",e.unref(s.generateClass).beforeBgColorVariant({color:o.highlightColor})])},null,2)):e.createCommentVNode("",!0)]))),128))]),o.secondaryMenuItems?(e.openBlock(),e.createElementBlock("ul",T,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.secondaryMenuItems,(t,f)=>(e.openBlock(),e.createElementBlock("li",{key:`second-nav-${f}`,class:"inline-block"},[e.createElementVNode("a",{href:t.url,target:t.target?t.target:"_self",class:e.normalizeClass(["nav__text tracking-wide outline-none",d.value]),onClick:k=>C(k,t),innerHTML:t.title},null,10,$),o.showHighlight?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["nav__decorator relative top-3xs h-3xs",e.unref(s.generateClass).beforeBgColorVariant({color:o.highlightColor})])},null,2)):e.createCommentVNode("",!0)]))),128))])):e.createCommentVNode("",!0)])])])],2))}}),[["__scopeId","data-v-7bf1ebe4"]]);i.MclFooterA=Z,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/mcl-footer",
-  "version": "0.9.9",
+  "version": "0.10.1",
   "description": "a footer components built based on Manguito theme",
   "type": "module",
   "files": [
@@ -16,9 +16,6 @@
       "require": "./dist/mcl-footer.umd.cjs"
     }
   },
-  "scripts": {
-    "build": "vite build"
-  },
   "author": {
     "name": "Bobby Kim",
     "url": "https://www.devbobbykim.com/"
@@ -33,8 +30,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@bobbykim/manguito-theme": "0.28.3",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "@bobbykim/manguito-theme": "1.0.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
@@ -45,5 +42,7 @@
     "vite-plugin-dts": "^4.3.0",
     "vue-tsc": "^2.1.10"
   },
-  "gitHead": "fc1830324e5a409b68bbb2b39280fe0b3cf3673a"
-}
+  "scripts": {
+    "build": "vite build"
+  }
+}