@bobbykim/mcl-container 0.5.1 → 0.6.1

package/dist/index.d.ts

@@ -0,0 +1,159 @@
+import { ColorPalette } from '@bobbykim/manguito-theme';
+import { ColumnWidth } from '@bobbykim/manguito-theme';
+import { ComponentOptionsMixin } from 'vue';
+import { DefineComponent } from 'vue';
+import { DirectionX } from '@bobbykim/manguito-theme';
+import { ExtractPropTypes } from 'vue';
+import { HeadingLevel } from '@bobbykim/manguito-theme';
+import { HeadingSize } from '@bobbykim/manguito-theme';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_Prettify_2<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_TypePropsToRuntimeProps_2<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_2<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+declare type __VLS_WithDefaults_2<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify_2<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const MclContainerA: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+sectionBg?: ColorPalette | undefined;
+containerBg?: ColorPalette | undefined;
+topDirection?: DirectionX | undefined;
+bottomDirection?: DirectionX | undefined;
+twoColumns?: boolean | undefined;
+leftColumnWidth?: ColumnWidth | undefined;
+}>, {
+sectionBg: string;
+containerBg: string;
+topDirection: string;
+bottomDirection: string;
+twoColumns: boolean;
+leftColumnWidth: number;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+sectionBg?: ColorPalette | undefined;
+containerBg?: ColorPalette | undefined;
+topDirection?: DirectionX | undefined;
+bottomDirection?: DirectionX | undefined;
+twoColumns?: boolean | undefined;
+leftColumnWidth?: ColumnWidth | undefined;
+}>, {
+sectionBg: string;
+containerBg: string;
+topDirection: string;
+bottomDirection: string;
+twoColumns: boolean;
+leftColumnWidth: number;
+}>>>, {
+sectionBg: ColorPalette;
+containerBg: ColorPalette;
+topDirection: DirectionX;
+bottomDirection: DirectionX;
+twoColumns: boolean;
+leftColumnWidth: ColumnWidth;
+}, {}>, Readonly<{
+    'left-column': any;
+    'right-column': any;
+}> & {
+    'left-column': any;
+    'right-column': any;
+}>;
+
+export declare const MclContainerB: __VLS_WithTemplateSlots_2<DefineComponent<__VLS_WithDefaults_2<__VLS_TypePropsToRuntimeProps_2<{
+sectionBgColor?: ColorPalette | undefined;
+containerBgColor?: ColorPalette | undefined;
+imageSource: string;
+imgHeightMobile?: number | undefined;
+imgHeightDesktop?: number | undefined;
+title: string;
+titleLevel?: HeadingLevel | undefined;
+titleSize?: HeadingSize | undefined;
+titleColor?: ColorPalette | undefined;
+}>, {
+sectionBgColor: string;
+containerBgColor: string;
+imgHeightMobile: number;
+imgHeightDesktop: number;
+titleLevel: string;
+titleSize: string;
+titleColor: string;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_2<__VLS_TypePropsToRuntimeProps_2<{
+sectionBgColor?: ColorPalette | undefined;
+containerBgColor?: ColorPalette | undefined;
+imageSource: string;
+imgHeightMobile?: number | undefined;
+imgHeightDesktop?: number | undefined;
+title: string;
+titleLevel?: HeadingLevel | undefined;
+titleSize?: HeadingSize | undefined;
+titleColor?: ColorPalette | undefined;
+}>, {
+sectionBgColor: string;
+containerBgColor: string;
+imgHeightMobile: number;
+imgHeightDesktop: number;
+titleLevel: string;
+titleSize: string;
+titleColor: string;
+}>>>, {
+sectionBgColor: ColorPalette;
+containerBgColor: ColorPalette;
+imgHeightMobile: number;
+imgHeightDesktop: number;
+titleLevel: HeadingLevel;
+titleSize: HeadingSize;
+titleColor: ColorPalette;
+}, {}>, Readonly<{
+    content: any;
+}> & {
+    content: any;
+}>;
+
+export { }

package/dist/mcl-container.js

@@ -0,0 +1,160 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".parallax-container[data-v-f3bc2137]{height:var(--container-height-mobile, 256px)}.parallax-image[data-v-f3bc2137]{height:var(--container-height-mobile, 256px);background-image:var(--bg-image);background-position:center top}@media screen and (min-width: 768px){.parallax-container[data-v-f3bc2137],.parallax-image[data-v-f3bc2137]{height:var(--container-height-desktop, 384px)}}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import { defineComponent as f, useSlots as h, openBlock as p, createElementBlock as d, normalizeClass as i, unref as r, createElementVNode as t, renderSlot as g, createCommentVNode as v, computed as C, resolveComponent as _, normalizeStyle as B, createVNode as b, withCtx as x, pushScopeId as y, popScopeId as w } from "vue";
+import n from "@bobbykim/manguito-theme";
+const L = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, $ = ["points"], H = { class: "container grid md:grid-cols-4 gap-4" }, S = { class: "relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]" }, k = ["points"], z = /* @__PURE__ */ f({
+  __name: "MclContainerA",
+  props: {
+    sectionBg: { default: "light-1" },
+    containerBg: { default: "primary" },
+    topDirection: { default: "left" },
+    bottomDirection: { default: "left" },
+    twoColumns: { type: Boolean, default: !0 },
+    leftColumnWidth: { default: 50 }
+  },
+  setup(s) {
+    h();
+    const l = (e, o) => e === "top" ? o === "left" ? "0,0 100,100 0,100" : "100,0 100,100 0,100" : o === "left" ? "0,0 100,0 0,100" : "0,0 100,0 100,100", a = (e, o) => {
+      if (!e)
+        return "md:col-span-4";
+      switch (o) {
+        case 25:
+          return "md:col-span-1";
+        case 50:
+          return "md:col-span-2";
+        case 75:
+          return "md:col-span-3";
+        case 100:
+          return "md:col-span-4";
+        default:
+          return "";
+      }
+    }, c = (e, o) => {
+      if (!e)
+        return "";
+      switch (o) {
+        case 25:
+          return "md:col-span-3";
+        case 50:
+          return "md:col-span-2";
+        case 75:
+          return "md:col-span-1";
+        case 100:
+        default:
+          return "";
+      }
+    };
+    return (e, o) => (p(), d("section", {
+      class: i(["py-lg lg:py-xl", r(n)("BGCOLOR", e.sectionBg)])
+    }, [
+      t("div", L, [
+        (p(), d("svg", {
+          class: i(["block absolute left-0 inset-x-0 h-full w-full", r(n)("SVGFILL", e.containerBg)]),
+          viewBox: "0 0 100 100",
+          preserveAspectRatio: "none",
+          "aria-hidden": "true"
+        }, [
+          t("polygon", {
+            points: l("top", e.topDirection)
+          }, null, 8, $)
+        ], 2))
+      ]),
+      t("div", {
+        class: i(["py-md md:py-lg lg:py-xl px-sm md:px-md lg:px-lg", r(n)("BGCOLOR", e.containerBg)])
+      }, [
+        t("div", H, [
+          t("div", {
+            class: i(a(e.twoColumns, e.leftColumnWidth))
+          }, [
+            g(e.$slots, "left-column")
+          ], 2),
+          e.twoColumns && e.leftColumnWidth !== 100 ? (p(), d("div", {
+            key: 0,
+            class: i(c(e.twoColumns, e.leftColumnWidth))
+          }, [
+            g(e.$slots, "right-column")
+          ], 2)) : v("", !0)
+        ])
+      ], 2),
+      t("div", S, [
+        (p(), d("svg", {
+          class: i(["block absolute left-0 inset-x-0 h-full w-full", r(n)("SVGFILL", e.containerBg)]),
+          viewBox: "0 0 100 100",
+          preserveAspectRatio: "none",
+          "aria-hidden": "true"
+        }, [
+          t("polygon", {
+            points: l("bottom", e.bottomDirection)
+          }, null, 8, k)
+        ], 2))
+      ])
+    ], 2));
+  }
+}), M = (s) => (y("data-v-f3bc2137"), s = s(), w(), s), O = /* @__PURE__ */ M(() => /* @__PURE__ */ t("div", { class: "absolute parallax-image bg-fixed bg-cover w-full top-0 left-0 bg-no-repeat" }, null, -1)), I = { class: "container relative z-[10] px-xs top-[-48px] md:top-[-96px] max-w-[1140px]" }, R = { class: "w-full" }, D = ["innerHTML"], G = { class: "mt-sm" }, W = /* @__PURE__ */ f({
+  __name: "MclContainerB",
+  props: {
+    sectionBgColor: { default: "transparent" },
+    containerBgColor: { default: "light-2" },
+    imageSource: {},
+    imgHeightMobile: { default: 256 },
+    imgHeightDesktop: { default: 384 },
+    title: {},
+    titleLevel: { default: "h2" },
+    titleSize: { default: "md" },
+    titleColor: { default: "dark-3" }
+  },
+  setup(s) {
+    const l = s;
+    h();
+    const a = (e, o, u) => {
+      let m;
+      return e === "h1" ? m = n("H1", o) : e === "h2" ? m = n("H2", o) : m = n("H3", o), `${m} ${n("TEXTCOLOR", u)}`;
+    }, c = C(() => ({
+      "--bg-image": `url('${l.imageSource}')`,
+      "--container-height-mobile": `${l.imgHeightMobile}px`,
+      "--container-height-desktop": `${l.imgHeightDesktop > l.imgHeightMobile ? l.imgHeightDesktop : l.imgHeightMobile}px`
+    }));
+    return (e, o) => {
+      const u = _("compoenent");
+      return p(), d("section", {
+        class: i(["relative pt-xl md:pt-3xl", r(n)("BGCOLOR", e.sectionBgColor)])
+      }, [
+        t("div", {
+          class: "relative parallax-container",
+          style: B(c.value)
+        }, [
+          O,
+          t("div", I, [
+            t("div", {
+              class: i([r(n)("BGCOLOR", e.containerBgColor), "py-md md:py-lg px-xs md:px-md lg:p-xl"])
+            }, [
+              t("div", R, [
+                b(u, { is: e.titleLevel }, {
+                  default: x(() => [
+                    t("span", {
+                      class: i(a(e.titleLevel, e.titleSize, e.titleColor)),
+                      innerHTML: e.title
+                    }, null, 10, D)
+                  ]),
+                  _: 1
+                }, 8, ["is"]),
+                t("div", G, [
+                  g(e.$slots, "content", {}, void 0, !0)
+                ])
+              ])
+            ], 2)
+          ])
+        ], 4)
+      ], 2);
+    };
+  }
+});
+const T = (s, l) => {
+  const a = s.__vccOpts || s;
+  for (const [c, e] of l)
+    a[c] = e;
+  return a;
+}, E = /* @__PURE__ */ T(W, [["__scopeId", "data-v-f3bc2137"]]);
+export {
+  z as MclContainerA,
+  E as MclContainerB
+};

package/dist/mcl-container.umd.cjs

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".parallax-container[data-v-f3bc2137]{height:var(--container-height-mobile, 256px)}.parallax-image[data-v-f3bc2137]{height:var(--container-height-mobile, 256px);background-image:var(--bg-image);background-position:center top}@media screen and (min-width: 768px){.parallax-container[data-v-f3bc2137],.parallax-image[data-v-f3bc2137]{height:var(--container-height-desktop, 384px)}}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+(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.MclContainer={},i.Vue,i.ManguitoTheme))})(this,function(i,e,l){"use strict";const m={class:"relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]"},p=["points"],f={class:"container grid md:grid-cols-4 gap-4"},h={class:"relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]"},g=["points"],u=e.defineComponent({__name:"MclContainerA",props:{sectionBg:{default:"light-1"},containerBg:{default:"primary"},topDirection:{default:"left"},bottomDirection:{default:"left"},twoColumns:{type:Boolean,default:!0},leftColumnWidth:{default:50}},setup(s){e.useSlots();const n=(t,o)=>t==="top"?o==="left"?"0,0 100,100 0,100":"100,0 100,100 0,100":o==="left"?"0,0 100,0 0,100":"0,0 100,0 100,100",r=(t,o)=>{if(!t)return"md:col-span-4";switch(o){case 25:return"md:col-span-1";case 50:return"md:col-span-2";case 75:return"md:col-span-3";case 100:return"md:col-span-4";default:return""}},a=(t,o)=>{if(!t)return"";switch(o){case 25:return"md:col-span-3";case 50:return"md:col-span-2";case 75:return"md:col-span-1";case 100:default:return""}};return(t,o)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["py-lg lg:py-xl",e.unref(l)("BGCOLOR",t.sectionBg)])},[e.createElementVNode("div",m,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["block absolute left-0 inset-x-0 h-full w-full",e.unref(l)("SVGFILL",t.containerBg)]),viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true"},[e.createElementVNode("polygon",{points:n("top",t.topDirection)},null,8,p)],2))]),e.createElementVNode("div",{class:e.normalizeClass(["py-md md:py-lg lg:py-xl px-sm md:px-md lg:px-lg",e.unref(l)("BGCOLOR",t.containerBg)])},[e.createElementVNode("div",f,[e.createElementVNode("div",{class:e.normalizeClass(r(t.twoColumns,t.leftColumnWidth))},[e.renderSlot(t.$slots,"left-column")],2),t.twoColumns&&t.leftColumnWidth!==100?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(a(t.twoColumns,t.leftColumnWidth))},[e.renderSlot(t.$slots,"right-column")],2)):e.createCommentVNode("",!0)])],2),e.createElementVNode("div",h,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["block absolute left-0 inset-x-0 h-full w-full",e.unref(l)("SVGFILL",t.containerBg)]),viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true"},[e.createElementVNode("polygon",{points:n("bottom",t.bottomDirection)},null,8,g)],2))])],2))}}),C=(s=>(e.pushScopeId("data-v-f3bc2137"),s=s(),e.popScopeId(),s))(()=>e.createElementVNode("div",{class:"absolute parallax-image bg-fixed bg-cover w-full top-0 left-0 bg-no-repeat"},null,-1)),_={class:"container relative z-[10] px-xs top-[-48px] md:top-[-96px] max-w-[1140px]"},B={class:"w-full"},b=["innerHTML"],y={class:"mt-sm"},k=e.defineComponent({__name:"MclContainerB",props:{sectionBgColor:{default:"transparent"},containerBgColor:{default:"light-2"},imageSource:{},imgHeightMobile:{default:256},imgHeightDesktop:{default:384},title:{},titleLevel:{default:"h2"},titleSize:{default:"md"},titleColor:{default:"dark-3"}},setup(s){const n=s;e.useSlots();const r=(t,o,d)=>{let c;return t==="h1"?c=l("H1",o):t==="h2"?c=l("H2",o):c=l("H3",o),`${c} ${l("TEXTCOLOR",d)}`},a=e.computed(()=>({"--bg-image":`url('${n.imageSource}')`,"--container-height-mobile":`${n.imgHeightMobile}px`,"--container-height-desktop":`${n.imgHeightDesktop>n.imgHeightMobile?n.imgHeightDesktop:n.imgHeightMobile}px`}));return(t,o)=>{const d=e.resolveComponent("compoenent");return e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["relative pt-xl md:pt-3xl",e.unref(l)("BGCOLOR",t.sectionBgColor)])},[e.createElementVNode("div",{class:"relative parallax-container",style:e.normalizeStyle(a.value)},[C,e.createElementVNode("div",_,[e.createElementVNode("div",{class:e.normalizeClass([e.unref(l)("BGCOLOR",t.containerBgColor),"py-md md:py-lg px-xs md:px-md lg:p-xl"])},[e.createElementVNode("div",B,[e.createVNode(d,{is:t.titleLevel},{default:e.withCtx(()=>[e.createElementVNode("span",{class:e.normalizeClass(r(t.titleLevel,t.titleSize,t.titleColor)),innerHTML:t.title},null,10,b)]),_:1},8,["is"]),e.createElementVNode("div",y,[e.renderSlot(t.$slots,"content",{},void 0,!0)])])],2)])],4)],2)}}}),x="",E=((s,n)=>{const r=s.__vccOpts||s;for(const[a,t]of n)r[a]=t;return r})(k,[["__scopeId","data-v-f3bc2137"]]);i.MclContainerA=u,i.MclContainerB=E,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "@bobbykim/mcl-container",
-  "version": "0.5.1",
-  "description": "",
+  "version": "0.6.1",
+  "description": "basic container components based on manguito-theme",
   "type": "module",
-  "main": "index.ts",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/mcl-container.umd.cjs",
+  "module": "./dist/mcl-container.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/mcl-container.js",
+      "require": "./dist/mcl-container.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
-    "build": "vue-tsc --project tsconfig.vue.json && tsc --project tsconfig.ts.json"
+    "build": "vite build"
   },
   "author": {
     "name": "Bobby Kim",
@@ -21,7 +33,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@bobbykim/manguito-theme": "^0.18.0"
+    "@bobbykim/manguito-theme": "0.20.0",
+    "vue": "^3.3.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.2",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.3",
+    "vite": "^4.5.1",
+    "vite-plugin-css-injected-by-js": "^3.5.0",
+    "vite-plugin-dts": "^3.8.3",
+    "vue-tsc": "^1.8.25"
   },
-  "gitHead": "969800695a9a902bc9d0c19ad6ab002caace8061"
+  "gitHead": "2e677770b8628a9616237cd3812af2dcb20ee5bb"
 }

package/CHANGELOG.md

@@ -1,56 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [0.5.1](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-container@0.5.0...@bobbykim/mcl-container@0.5.1) (2024-04-01)
-
-**Note:** Version bump only for package @bobbykim/mcl-container
-
-
-
-
-
-# [0.5.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-container@0.3.0...@bobbykim/mcl-container@0.5.0) (2024-03-24)
-
-
-### Features
-
-* build and release ([a372086](https://github.com/bobbykim89/manguito-component-library/commit/a3720861fb40dd6ec1d0e3dda1f06e2479967432))
-* **components/*:** prepublish build ([c8eb95a](https://github.com/bobbykim89/manguito-component-library/commit/c8eb95a0ede6727bf183d2e9ad634ae64af1411d))
-* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
-
-
-
-
-
-# [0.4.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-container@0.3.0...@bobbykim/mcl-container@0.4.0) (2024-03-21)
-
-
-### Features
-
-* tsconfig update, slots and emits update ([c30ff80](https://github.com/bobbykim89/manguito-component-library/commit/c30ff804c961d205ac097e20cd51285a15ca8966))
-
-
-
-
-
-# [0.3.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-container@0.2.0...@bobbykim/mcl-container@0.3.0) (2024-02-27)
-
-
-### Features
-
-* **/components/**/README.md,/deprecated:** update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
-
-
-
-
-
-# 0.2.0 (2024-02-27)
-
-
-### Features
-
-* **mcl-container:** add mcl-container-b with story page ([95b522d](https://github.com/bobbykim89/manguito-component-library/commit/95b522d61a9a86422c5fbb8105a27a3957d453ac))
-* **mcl-header:** init mcl-header package and add mcl-header-a component ([29fe8d7](https://github.com/bobbykim89/manguito-component-library/commit/29fe8d7b62bed93d307f340e9a378f1dfe58a03a))
-* **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

@@ -1,3 +0,0 @@
-import MclContainerA from './lib/mcl-container-a/MclContainerA.vue';
-import MclContainerB from './lib/mcl-container-b/MclContainerB.vue';
-export { MclContainerA, MclContainerB };

package/index.js

@@ -1,3 +0,0 @@
-import MclContainerA from './lib/mcl-container-a/MclContainerA.vue';
-import MclContainerB from './lib/mcl-container-b/MclContainerB.vue';
-export { MclContainerA, MclContainerB };

package/index.ts

@@ -1,4 +0,0 @@
-import MclContainerA from './lib/mcl-container-a/MclContainerA.vue'
-import MclContainerB from './lib/mcl-container-b/MclContainerB.vue'
-
-export { MclContainerA, MclContainerB }

package/lib/mcl-container-a/MclContainerA.vue

@@ -1,134 +0,0 @@
-<script setup lang="ts">
-import type {
-  ColorPalette,
-  ColumnWidth,
-  DirectionX,
-  DirectionY,
-} from '@bobbykim/manguito-theme'
-import generateClass from '@bobbykim/manguito-theme'
-
-const props = withDefaults(
-  defineProps<{
-    sectionBg?: ColorPalette
-    containerBg?: ColorPalette
-    topDirection?: DirectionX
-    bottomDirection?: DirectionX
-    twoColumns?: boolean
-    leftColumnWidth?: ColumnWidth
-  }>(),
-  {
-    sectionBg: 'light-1',
-    containerBg: 'primary',
-    topDirection: 'left',
-    bottomDirection: 'left',
-    twoColumns: true,
-    leftColumnWidth: 50,
-  }
-)
-const slots = defineSlots<{
-  'left-column': any
-  'right-column': any
-}>()
-
-const generatePoints = (
-  location: DirectionY,
-  direction: DirectionX
-): string => {
-  /**
-   * @location - 'top'||'bottom'
-   * @direction - topDirection || bottomDirection
-   */
-  if (location === 'top') {
-    return direction === 'left' ? '0,0 100,100 0,100' : '100,0 100,100 0,100'
-  }
-  return direction === 'left' ? '0,0 100,0 0,100' : '0,0 100,0 100,100'
-}
-const getLeftColumnWidth = (
-  dRightCol: boolean,
-  lColWidth: ColumnWidth
-): string => {
-  /**
-   * @drightCol - twoColumns
-   * @lColWidth - leftColumnWidth
-   */
-  if (!dRightCol) {
-    return 'md:col-span-4'
-  }
-  switch (lColWidth) {
-    case 25:
-      return 'md:col-span-1'
-    case 50:
-      return 'md:col-span-2'
-    case 75:
-      return 'md:col-span-3'
-    case 100:
-      return 'md:col-span-4'
-    default:
-      return ''
-  }
-}
-const getRightColumnWIdth = (
-  dRightCol: boolean,
-  lColWidth: ColumnWidth
-): string => {
-  if (!dRightCol) {
-    return ''
-  }
-  switch (lColWidth) {
-    case 25:
-      return 'md:col-span-3'
-    case 50:
-      return 'md:col-span-2'
-    case 75:
-      return 'md:col-span-1'
-    case 100:
-    default:
-      return ''
-  }
-}
-</script>
-
-<template>
-  <section class="py-lg lg:py-xl" :class="generateClass('BGCOLOR', sectionBg)">
-    <div class="relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]">
-      <svg
-        class="block absolute left-0 inset-x-0 h-full w-full"
-        :class="generateClass('SVGFILL', containerBg)"
-        viewBox="0 0 100 100"
-        preserveAspectRatio="none"
-        aria-hidden="true"
-      >
-        <polygon :points="generatePoints('top', topDirection)" />
-      </svg>
-    </div>
-    <div
-      class="py-md md:py-lg lg:py-xl px-sm md:px-md lg:px-lg"
-      :class="generateClass('BGCOLOR', containerBg)"
-    >
-      <div class="container grid md:grid-cols-4 gap-4">
-        <div :class="getLeftColumnWidth(twoColumns, leftColumnWidth)">
-          <slot name="left-column"></slot>
-        </div>
-        <div
-          v-if="twoColumns && leftColumnWidth !== 100"
-          :class="getRightColumnWIdth(twoColumns, leftColumnWidth)"
-        >
-          <slot name="right-column"></slot>
-        </div>
-      </div>
-    </div>
-    <div class="relative min-h-[36px] md:min-h-[48px] lg:min-h-[60px]">
-      <svg
-        class="block absolute left-0 inset-x-0 h-full w-full"
-        :class="generateClass('SVGFILL', containerBg)"
-        viewBox="0 0 100 100"
-        preserveAspectRatio="none"
-        aria-hidden="true"
-      >
-        <polygon :points="generatePoints('bottom', bottomDirection)" />
-      </svg>
-    </div>
-  </section>
-</template>
-
-<style lang="scss" scoped></style>

package/lib/mcl-container-a/MclContainerA.vue.d.ts

@@ -1,66 +0,0 @@
-import type { ColorPalette, ColumnWidth, DirectionX } from '@bobbykim/manguito-theme';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    sectionBg?: ColorPalette | undefined;
-    containerBg?: ColorPalette | undefined;
-    topDirection?: DirectionX | undefined;
-    bottomDirection?: DirectionX | undefined;
-    twoColumns?: boolean | undefined;
-    leftColumnWidth?: ColumnWidth | undefined;
-}>, {
-    sectionBg: string;
-    containerBg: string;
-    topDirection: string;
-    bottomDirection: string;
-    twoColumns: boolean;
-    leftColumnWidth: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    sectionBg?: ColorPalette | undefined;
-    containerBg?: ColorPalette | undefined;
-    topDirection?: DirectionX | undefined;
-    bottomDirection?: DirectionX | undefined;
-    twoColumns?: boolean | undefined;
-    leftColumnWidth?: ColumnWidth | undefined;
-}>, {
-    sectionBg: string;
-    containerBg: string;
-    topDirection: string;
-    bottomDirection: string;
-    twoColumns: boolean;
-    leftColumnWidth: number;
-}>>>, {
-    sectionBg: ColorPalette;
-    containerBg: ColorPalette;
-    topDirection: DirectionX;
-    bottomDirection: DirectionX;
-    twoColumns: boolean;
-    leftColumnWidth: ColumnWidth;
-}, {}>, Readonly<{
-    'left-column': any;
-    'right-column': any;
-}> & {
-    'left-column': any;
-    'right-column': any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/lib/mcl-container-b/MclContainerB.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import type {
-  ColorPalette,
-  HeadingLevel,
-  HeadingSize,
-} from '@bobbykim/manguito-theme'
-import generateClass from '@bobbykim/manguito-theme'
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    sectionBgColor?: ColorPalette
-    containerBgColor?: ColorPalette
-    imageSource: string
-    imgHeightMobile?: number
-    imgHeightDesktop?: number
-    title: string
-    titleLevel?: HeadingLevel
-    titleSize?: HeadingSize
-    titleColor?: ColorPalette
-  }>(),
-  {
-    sectionBgColor: 'transparent',
-    containerBgColor: 'light-2',
-    imgHeightMobile: 256,
-    imgHeightDesktop: 384,
-    titleLevel: 'h2',
-    titleSize: 'md',
-    titleColor: 'dark-3',
-  }
-)
-
-const slots = defineSlots<{
-  content: any
-}>()
-
-const getTitleClass = (
-  level: HeadingLevel,
-  size: HeadingSize,
-  color: ColorPalette
-): string => {
-  /**
-   * @level - titleLevel
-   * @size - titleSize
-   * @Color - titleColor
-   */
-  let heading: string
-  // let textColor: string = textColorClass[Color]
-  if (level === 'h1') {
-    // heading = h1Class[size]
-    heading = generateClass('H1', size)
-  } else if (level === 'h2') {
-    // heading = h2Class[size]
-    heading = generateClass('H2', size)
-  } else {
-    // heading = h3Class[size]
-    heading = generateClass('H3', size)
-  }
-  return `${heading} ${generateClass('TEXTCOLOR', color)}`
-}
-
-const parallaxImage = computed(() => {
-  return {
-    '--bg-image': `url('${props.imageSource}')`,
-    '--container-height-mobile': `${props.imgHeightMobile}px`,
-    '--container-height-desktop': `${
-      props.imgHeightDesktop > props.imgHeightMobile
-        ? props.imgHeightDesktop
-        : props.imgHeightMobile
-    }px`,
-  }
-})
-</script>
-
-<template>
-  <section
-    class="relative pt-xl md:pt-3xl"
-    :class="generateClass('BGCOLOR', sectionBgColor)"
-  >
-    <div class="relative parallax-container" :style="parallaxImage">
-      <div
-        class="absolute parallax-image bg-fixed bg-cover w-full top-0 left-0 bg-no-repeat"
-      ></div>
-      <div
-        class="container relative z-[10] px-xs top-[-48px] md:top-[-96px] max-w-[1140px]"
-      >
-        <div
-          :class="generateClass('BGCOLOR', containerBgColor)"
-          class="py-md md:py-lg px-xs md:px-md lg:p-xl"
-        >
-          <div class="w-full">
-            <compoenent :is="titleLevel">
-              <span
-                :class="getTitleClass(titleLevel, titleSize, titleColor)"
-                v-html="title"
-              ></span>
-            </compoenent>
-            <div class="mt-sm">
-              <slot name="content" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style lang="scss" scoped>
-.parallax-container {
-  height: var(--container-height-mobile, 256px);
-}
-.parallax-image {
-  height: var(--container-height-mobile, 256px);
-  background-image: var(--bg-image);
-  background-position: center top;
-}
-@media screen and (min-width: 768px) {
-  .parallax-container {
-    height: var(--container-height-desktop, 384px);
-  }
-  .parallax-image {
-    height: var(--container-height-desktop, 384px);
-  }
-}
-</style>

package/lib/mcl-container-b/MclContainerB.vue.d.ts

@@ -1,73 +0,0 @@
-import type { ColorPalette, HeadingLevel, HeadingSize } from '@bobbykim/manguito-theme';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    sectionBgColor?: ColorPalette | undefined;
-    containerBgColor?: ColorPalette | undefined;
-    imageSource: string;
-    imgHeightMobile?: number | undefined;
-    imgHeightDesktop?: number | undefined;
-    title: string;
-    titleLevel?: HeadingLevel | undefined;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-}>, {
-    sectionBgColor: string;
-    containerBgColor: string;
-    imgHeightMobile: number;
-    imgHeightDesktop: number;
-    titleLevel: string;
-    titleSize: string;
-    titleColor: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    sectionBgColor?: ColorPalette | undefined;
-    containerBgColor?: ColorPalette | undefined;
-    imageSource: string;
-    imgHeightMobile?: number | undefined;
-    imgHeightDesktop?: number | undefined;
-    title: string;
-    titleLevel?: HeadingLevel | undefined;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-}>, {
-    sectionBgColor: string;
-    containerBgColor: string;
-    imgHeightMobile: number;
-    imgHeightDesktop: number;
-    titleLevel: string;
-    titleSize: string;
-    titleColor: string;
-}>>>, {
-    titleColor: ColorPalette;
-    sectionBgColor: ColorPalette;
-    containerBgColor: ColorPalette;
-    imgHeightMobile: number;
-    imgHeightDesktop: number;
-    titleLevel: HeadingLevel;
-    titleSize: HeadingSize;
-}, {}>, Readonly<{
-    content: any;
-}> & {
-    content: any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "include": ["./**/*.ts", "./**/*.vue"],
-  "exclude": ["node_modules", "./**/*.vue.d.ts"]
-}

package/tsconfig.ts.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "include": ["./**/*.ts"],
-  "exclude": ["node_modules", "./**/*.vue.d.ts", "./**/*.vue"],
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "declaration": true
-  }
-}

package/tsconfig.vue.json

@@ -1,9 +0,0 @@
-{
-"extends": "../../../tsconfig.json",
-"include": ["./**/*.vue"],
-"exclude": ["node_modules"],
-"compilerOptions": {
-"declaration": true,
-"emitDeclarationOnly": true
-}
-}