@bobbykim/mcl-collapse 0.6.0 → 0.7.1

package/dist/index.d.ts

@@ -0,0 +1,206 @@
+import { ColorPalette } from '@bobbykim/manguito-theme';
+import { ComponentOptionsMixin } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+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 MclCollapseA: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+collapseId: string;
+borderColor?: ColorPalette | undefined;
+rounded?: boolean | undefined;
+displayHighlight?: boolean | undefined;
+highlightColor?: ColorPalette | undefined;
+title: string;
+titleSize?: HeadingSize | undefined;
+titleColor?: ColorPalette | undefined;
+visible?: boolean | undefined;
+iconColor?: ColorPalette | undefined;
+bgColor?: ColorPalette | undefined;
+slotBgColor?: ColorPalette | undefined;
+accordion?: string | undefined;
+}>, {
+borderColor: string;
+rounded: boolean;
+displayHighlight: boolean;
+highlightColor: string;
+titleSize: string;
+titleColor: string;
+visible: boolean;
+iconColor: string;
+bgColor: string;
+slotBgColor: string;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"collapse-open": (visible: boolean, title: string) => void;
+"collapse-close": (visible: boolean, title: string) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+collapseId: string;
+borderColor?: ColorPalette | undefined;
+rounded?: boolean | undefined;
+displayHighlight?: boolean | undefined;
+highlightColor?: ColorPalette | undefined;
+title: string;
+titleSize?: HeadingSize | undefined;
+titleColor?: ColorPalette | undefined;
+visible?: boolean | undefined;
+iconColor?: ColorPalette | undefined;
+bgColor?: ColorPalette | undefined;
+slotBgColor?: ColorPalette | undefined;
+accordion?: string | undefined;
+}>, {
+borderColor: string;
+rounded: boolean;
+displayHighlight: boolean;
+highlightColor: string;
+titleSize: string;
+titleColor: string;
+visible: boolean;
+iconColor: string;
+bgColor: string;
+slotBgColor: string;
+}>>> & {
+"onCollapse-open"?: ((visible: boolean, title: string) => any) | undefined;
+"onCollapse-close"?: ((visible: boolean, title: string) => any) | undefined;
+}, {
+borderColor: ColorPalette;
+rounded: boolean;
+displayHighlight: boolean;
+highlightColor: ColorPalette;
+titleSize: HeadingSize;
+titleColor: ColorPalette;
+visible: boolean;
+iconColor: ColorPalette;
+bgColor: ColorPalette;
+slotBgColor: ColorPalette;
+}, {}>, Readonly<{
+    content: any;
+    tab: any;
+}> & {
+    content: any;
+    tab: any;
+}>;
+
+export declare const MclCollapseB: __VLS_WithTemplateSlots_2<DefineComponent<__VLS_WithDefaults_2<__VLS_TypePropsToRuntimeProps_2<{
+collapseId: string;
+title: string;
+titleColor?: ColorPalette | undefined;
+titleSize?: HeadingSize | undefined;
+borderColor?: ColorPalette | undefined;
+bgColor?: ColorPalette | undefined;
+btnColor?: ColorPalette | undefined;
+iconColor?: ColorPalette | undefined;
+rounded?: boolean | undefined;
+displayShadow?: boolean | undefined;
+visible?: boolean | undefined;
+accordion?: string | undefined;
+}>, {
+titleColor: string;
+titleSize: string;
+borderColor: string;
+bgColor: string;
+btnColor: string;
+iconColor: string;
+rounded: boolean;
+displayShadow: boolean;
+visible: boolean;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"collapse-open": (visible: boolean, title: string) => void;
+"collapse-close": (visible: boolean, title: string) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_2<__VLS_TypePropsToRuntimeProps_2<{
+collapseId: string;
+title: string;
+titleColor?: ColorPalette | undefined;
+titleSize?: HeadingSize | undefined;
+borderColor?: ColorPalette | undefined;
+bgColor?: ColorPalette | undefined;
+btnColor?: ColorPalette | undefined;
+iconColor?: ColorPalette | undefined;
+rounded?: boolean | undefined;
+displayShadow?: boolean | undefined;
+visible?: boolean | undefined;
+accordion?: string | undefined;
+}>, {
+titleColor: string;
+titleSize: string;
+borderColor: string;
+bgColor: string;
+btnColor: string;
+iconColor: string;
+rounded: boolean;
+displayShadow: boolean;
+visible: boolean;
+}>>> & {
+"onCollapse-open"?: ((visible: boolean, title: string) => any) | undefined;
+"onCollapse-close"?: ((visible: boolean, title: string) => any) | undefined;
+}, {
+borderColor: ColorPalette;
+rounded: boolean;
+titleSize: HeadingSize;
+titleColor: ColorPalette;
+visible: boolean;
+iconColor: ColorPalette;
+bgColor: ColorPalette;
+btnColor: ColorPalette;
+displayShadow: boolean;
+}, {}>, Readonly<{
+    default: any;
+}> & {
+    default: any;
+}>;
+
+export { }

package/dist/mcl-collapse.js

@@ -0,0 +1,193 @@
+import { defineComponent as B, ref as O, useSlots as R, watch as L, openBlock as n, createElementBlock as d, normalizeClass as r, withDirectives as b, unref as s, createElementVNode as c, toDisplayString as A, withModifiers as $, renderSlot as y, createCommentVNode as z, createVNode as S, withCtx as E } from "vue";
+import l, { vCollapse as w, Collapse as I } from "@bobbykim/manguito-theme";
+const D = { class: "flex justify-between items-center" }, G = /* @__PURE__ */ c("path", { d: "M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z" }, null, -1), M = [
+  G
+], q = /* @__PURE__ */ B({
+  __name: "MclCollapseA",
+  props: {
+    collapseId: {},
+    borderColor: { default: "light-4" },
+    rounded: { type: Boolean, default: !1 },
+    displayHighlight: { type: Boolean, default: !0 },
+    highlightColor: { default: "secondary" },
+    title: {},
+    titleSize: { default: "sm" },
+    titleColor: { default: "dark-3" },
+    visible: { type: Boolean, default: !1 },
+    iconColor: { default: "dark-3" },
+    bgColor: { default: "white" },
+    slotBgColor: { default: "light-2" },
+    accordion: {}
+  },
+  emits: ["collapse-open", "collapse-close"],
+  setup(m, { emit: g }) {
+    const u = m, i = O(u.visible), f = R(), p = g, C = (e) => {
+      const { title: t } = u;
+      i.value = e, p(e === !0 ? "collapse-open" : "collapse-close", e, t);
+    }, v = (e, t, h) => {
+      const a = ["border", l("BORDER", e)];
+      return t && [l("BORDERL", h)].forEach((j) => {
+        a.push(j), a.push("border-l-8");
+      }), a.join(" ");
+    }, o = (e, t) => [
+      l("H3", e),
+      l("TEXTCOLOR", t)
+    ].join(" ");
+    return L(
+      () => u.visible,
+      (e) => {
+        i.value = e;
+      }
+    ), (e, t) => (n(), d("div", {
+      class: r(["overflow-hidden w-full", [
+        e.rounded ? "rounded-lg" : "rounded-sm",
+        v(e.borderColor, e.displayHighlight, e.highlightColor)
+      ]])
+    }, [
+      b((n(), d("div", {
+        class: r(["py-xs px-sm cursor-pointer transition-[border] duration-500", [
+          i.value ? `border-b ${s(l)("BORDERB", e.borderColor)} ease-in` : "ease-out",
+          s(l)("BGCOLOR", e.bgColor)
+        ]])
+      }, [
+        c("div", D, [
+          c("h3", {
+            class: r(o(e.titleSize, e.titleColor))
+          }, A(e.title), 3),
+          s(f).tab ? (n(), d("div", {
+            key: 0,
+            onClick: t[0] || (t[0] = $(() => {
+            }, ["stop"])),
+            class: "cursor-default"
+          }, [
+            y(e.$slots, "tab")
+          ])) : z("", !0)
+        ])
+      ], 2)), [
+        [s(w), void 0, e.collapseId]
+      ]),
+      c("div", {
+        class: r(["overflow-hidden", s(l)("BGCOLOR", e.slotBgColor)])
+      }, [
+        S(s(I), {
+          id: e.collapseId,
+          visible: e.visible,
+          "class-name": "py-sm px-xs",
+          onOpen: C,
+          onClose: C,
+          accordion: e.accordion
+        }, {
+          default: E(() => [
+            y(e.$slots, "content")
+          ]),
+          _: 3
+        }, 8, ["id", "visible", "accordion"])
+      ], 2),
+      b((n(), d("div", {
+        class: r(["py-1.5 px-sm cursor-pointer transition-all duration-500 flex justify-center items-center border-t", [
+          s(l)("BGCOLOR", e.bgColor),
+          s(l)("BORDERT", e.borderColor)
+        ]])
+      }, [
+        (n(), d("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 448 512",
+          class: r(["h-xs", [
+            i.value ? "rotate-180" : "rotate-0",
+            "transition-transform duration-300 ease-in",
+            s(l)("SVGFILL", e.iconColor)
+          ]])
+        }, M, 2))
+      ], 2)), [
+        [s(w), void 0, e.collapseId]
+      ])
+    ], 2));
+  }
+}), T = { class: "flex justify-center items-center ml-xs md:ml-sm lg:ml-md" }, k = /* @__PURE__ */ c("path", { d: "M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z" }, null, -1), V = [
+  k
+], H = { class: "overflow-hidden" }, J = /* @__PURE__ */ B({
+  __name: "MclCollapseB",
+  props: {
+    collapseId: {},
+    title: {},
+    titleColor: { default: "light-1" },
+    titleSize: { default: "md" },
+    borderColor: { default: "light-3" },
+    bgColor: { default: "light-1" },
+    btnColor: { default: "primary" },
+    iconColor: { default: "light-1" },
+    rounded: { type: Boolean, default: !0 },
+    displayShadow: { type: Boolean, default: !0 },
+    visible: { type: Boolean, default: !1 },
+    accordion: {}
+  },
+  emits: ["collapse-open", "collapse-close"],
+  setup(m, { emit: g }) {
+    const u = m;
+    R();
+    const i = O(u.visible), f = g, p = (o) => {
+      const { title: e } = u;
+      i.value = o, f(o === !0 ? "collapse-open" : "collapse-close", o, e);
+    }, C = (o, e, t, h) => {
+      let a = [
+        "border",
+        l("BORDER", o),
+        l("BGCOLOR", e)
+      ];
+      return h && a.push("shadow-md"), t ? a.push("rounded-2xl") : a.push("rounded-sm"), a.join(" ");
+    }, v = (o, e) => [
+      l("H3", o),
+      l("TEXTCOLOR", e)
+    ].join(" ");
+    return L(
+      () => u.visible,
+      (o) => {
+        i.value = o;
+      }
+    ), (o, e) => (n(), d("div", {
+      class: r(["w-full overflow-hidden p-2xs", C(o.borderColor, o.bgColor, o.rounded, o.displayShadow)])
+    }, [
+      b((n(), d("div", {
+        class: r(["flex justify-between items-center w-full px-4 py-2 cursor-pointer hover:bg-opacity-70 transition duration-200 ease-in", [
+          o.rounded ? "rounded-lg" : "rounded-sm",
+          s(l)("BGCOLOR", o.btnColor)
+        ]])
+      }, [
+        c("h3", {
+          class: r(v(o.titleSize, o.titleColor))
+        }, A(o.title), 3),
+        c("div", T, [
+          (n(), d("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 448 512",
+            class: r(["h-xs transition-transform duration-300 ease-in", [
+              i.value ? "rotate-180" : "rotate-0",
+              s(l)("SVGFILL", o.iconColor)
+            ]])
+          }, V, 2))
+        ])
+      ], 2)), [
+        [s(w), void 0, o.collapseId]
+      ]),
+      c("div", H, [
+        S(s(I), {
+          id: o.collapseId,
+          visible: o.visible,
+          "class-name": "px-xs pt-xs pb-2xs",
+          accordion: o.accordion,
+          onOpen: p,
+          onClose: p
+        }, {
+          default: E(() => [
+            y(o.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["id", "visible", "accordion"])
+      ])
+    ], 2));
+  }
+});
+export {
+  q as MclCollapseA,
+  J as MclCollapseB
+};

package/dist/mcl-collapse.umd.cjs

@@ -0,0 +1 @@
+(function(s,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],o):(s=typeof globalThis<"u"?globalThis:s||self,o(s.MclCollapse={},s.Vue,s.ManguitoTheme))})(this,function(s,o,t){"use strict";const u={class:"flex justify-between items-center"},b=[o.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)],B=o.defineComponent({__name:"MclCollapseA",props:{collapseId:{},borderColor:{default:"light-4"},rounded:{type:Boolean,default:!1},displayHighlight:{type:Boolean,default:!0},highlightColor:{default:"secondary"},title:{},titleSize:{default:"sm"},titleColor:{default:"dark-3"},visible:{type:Boolean,default:!1},iconColor:{default:"dark-3"},bgColor:{default:"white"},slotBgColor:{default:"light-2"},accordion:{}},emits:["collapse-open","collapse-close"],setup(m,{emit:h}){const d=m,i=o.ref(d.visible),c=o.useSlots(),a=h,p=e=>{const{title:r}=d;i.value=e,a(e===!0?"collapse-open":"collapse-close",e,r)},C=(e,r,f)=>{const n=["border",t("BORDER",e)];return r&&[t("BORDERL",f)].forEach(k=>{n.push(k),n.push("border-l-8")}),n.join(" ")},l=(e,r)=>[t("H3",e),t("TEXTCOLOR",r)].join(" ");return o.watch(()=>d.visible,e=>{i.value=e}),(e,r)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["overflow-hidden w-full",[e.rounded?"rounded-lg":"rounded-sm",C(e.borderColor,e.displayHighlight,e.highlightColor)]])},[o.withDirectives((o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["py-xs px-sm cursor-pointer transition-[border] duration-500",[i.value?`border-b ${o.unref(t)("BORDERB",e.borderColor)} ease-in`:"ease-out",o.unref(t)("BGCOLOR",e.bgColor)]])},[o.createElementVNode("div",u,[o.createElementVNode("h3",{class:o.normalizeClass(l(e.titleSize,e.titleColor))},o.toDisplayString(e.title),3),o.unref(c).tab?(o.openBlock(),o.createElementBlock("div",{key:0,onClick:r[0]||(r[0]=o.withModifiers(()=>{},["stop"])),class:"cursor-default"},[o.renderSlot(e.$slots,"tab")])):o.createCommentVNode("",!0)])],2)),[[o.unref(t.vCollapse),void 0,e.collapseId]]),o.createElementVNode("div",{class:o.normalizeClass(["overflow-hidden",o.unref(t)("BGCOLOR",e.slotBgColor)])},[o.createVNode(o.unref(t.Collapse),{id:e.collapseId,visible:e.visible,"class-name":"py-sm px-xs",onOpen:p,onClose:p,accordion:e.accordion},{default:o.withCtx(()=>[o.renderSlot(e.$slots,"content")]),_:3},8,["id","visible","accordion"])],2),o.withDirectives((o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["py-1.5 px-sm cursor-pointer transition-all duration-500 flex justify-center items-center border-t",[o.unref(t)("BGCOLOR",e.bgColor),o.unref(t)("BORDERT",e.borderColor)]])},[(o.openBlock(),o.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:o.normalizeClass(["h-xs",[i.value?"rotate-180":"rotate-0","transition-transform duration-300 ease-in",o.unref(t)("SVGFILL",e.iconColor)]])},b,2))],2)),[[o.unref(t.vCollapse),void 0,e.collapseId]])],2))}}),y={class:"flex justify-center items-center ml-xs md:ml-sm lg:ml-md"},w=[o.createElementVNode("path",{d:"M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"},null,-1)],g={class:"overflow-hidden"},E=o.defineComponent({__name:"MclCollapseB",props:{collapseId:{},title:{},titleColor:{default:"light-1"},titleSize:{default:"md"},borderColor:{default:"light-3"},bgColor:{default:"light-1"},btnColor:{default:"primary"},iconColor:{default:"light-1"},rounded:{type:Boolean,default:!0},displayShadow:{type:Boolean,default:!0},visible:{type:Boolean,default:!1},accordion:{}},emits:["collapse-open","collapse-close"],setup(m,{emit:h}){const d=m;o.useSlots();const i=o.ref(d.visible),c=h,a=l=>{const{title:e}=d;i.value=l,c(l===!0?"collapse-open":"collapse-close",l,e)},p=(l,e,r,f)=>{let n=["border",t("BORDER",l),t("BGCOLOR",e)];return f&&n.push("shadow-md"),r?n.push("rounded-2xl"):n.push("rounded-sm"),n.join(" ")},C=(l,e)=>[t("H3",l),t("TEXTCOLOR",e)].join(" ");return o.watch(()=>d.visible,l=>{i.value=l}),(l,e)=>(o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["w-full overflow-hidden p-2xs",p(l.borderColor,l.bgColor,l.rounded,l.displayShadow)])},[o.withDirectives((o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["flex justify-between items-center w-full px-4 py-2 cursor-pointer hover:bg-opacity-70 transition duration-200 ease-in",[l.rounded?"rounded-lg":"rounded-sm",o.unref(t)("BGCOLOR",l.btnColor)]])},[o.createElementVNode("h3",{class:o.normalizeClass(C(l.titleSize,l.titleColor))},o.toDisplayString(l.title),3),o.createElementVNode("div",y,[(o.openBlock(),o.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",class:o.normalizeClass(["h-xs transition-transform duration-300 ease-in",[i.value?"rotate-180":"rotate-0",o.unref(t)("SVGFILL",l.iconColor)]])},w,2))])],2)),[[o.unref(t.vCollapse),void 0,l.collapseId]]),o.createElementVNode("div",g,[o.createVNode(o.unref(t.Collapse),{id:l.collapseId,visible:l.visible,"class-name":"px-xs pt-xs pb-2xs",accordion:l.accordion,onOpen:a,onClose:a},{default:o.withCtx(()=>[o.renderSlot(l.$slots,"default")]),_:3},8,["id","visible","accordion"])])],2))}});s.MclCollapseA=B,s.MclCollapseB=E,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "@bobbykim/mcl-collapse",
-  "version": "0.6.0",
-  "description": "",
+  "version": "0.7.1",
+  "description": "collapse component built on top of @bobbykim/manguito-theme",
   "type": "module",
-  "main": "index.ts",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/mcl-collapse.umd.cjs",
+  "module": "./dist/mcl-collapse.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/mcl-collapse.js",
+      "require": "./dist/mcl-collapse.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,16 @@
   },
   "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",
+    "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,61 +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.6.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-collapse@0.5.0...@bobbykim/mcl-collapse@0.6.0) (2024-04-01)
-
-
-### Features
-
-* ready for production ([4e2fc04](https://github.com/bobbykim89/manguito-component-library/commit/4e2fc048edd67791b4e917e0a764f301d4c610cb))
-
-
-
-
-
-# [0.5.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/mcl-collapse@0.3.0...@bobbykim/mcl-collapse@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))
-* **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))
-* 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-collapse@0.3.0...@bobbykim/mcl-collapse@0.4.0) (2024-03-21)
-
-
-### Features
-
-* **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))
-* 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-collapse@0.2.0...@bobbykim/mcl-collapse@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-collapse:** add mcl-collapse component library and add story for mcl-collapse-a ([397b63e](https://github.com/bobbykim89/manguito-component-library/commit/397b63e00b83801bdf1cd2c6710d0ba876c6bf87))
-* **mcl-collapse:** add story for mcl-collapse-b ([6edbc56](https://github.com/bobbykim89/manguito-component-library/commit/6edbc569833aae3f1aef65634987157b38956f83))
-* **stories:** add story for mcl-card-b ([7470f0d](https://github.com/bobbykim89/manguito-component-library/commit/7470f0ddee5b3ba3c9f5c37e52bd37f6a1a75202))

package/index.d.ts

@@ -1,3 +0,0 @@
-import MclCollapseA from './lib/mcl-collapse-a/MclCollapseA.vue';
-import MclCollapseB from './lib/mcl-collapse-b/MclCollapseB.vue';
-export { MclCollapseA, MclCollapseB };

package/index.js

@@ -1,3 +0,0 @@
-import MclCollapseA from './lib/mcl-collapse-a/MclCollapseA.vue';
-import MclCollapseB from './lib/mcl-collapse-b/MclCollapseB.vue';
-export { MclCollapseA, MclCollapseB };

package/index.ts

@@ -1,4 +0,0 @@
-import MclCollapseA from './lib/mcl-collapse-a/MclCollapseA.vue'
-import MclCollapseB from './lib/mcl-collapse-b/MclCollapseB.vue'
-
-export { MclCollapseA, MclCollapseB }

package/lib/mcl-collapse-a/MclCollapseA.vue

@@ -1,163 +0,0 @@
-<script setup lang="ts">
-import type { ColorPalette, HeadingSize } from '@bobbykim/manguito-theme'
-import generateClass, { Collapse, vCollapse } from '@bobbykim/manguito-theme'
-import { ref, watch } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    collapseId: string
-    borderColor?: ColorPalette
-    rounded?: boolean
-    displayHighlight?: boolean
-    highlightColor?: ColorPalette
-    title: string
-    titleSize?: HeadingSize
-    titleColor?: ColorPalette
-    visible?: boolean
-    iconColor?: ColorPalette
-    bgColor?: ColorPalette
-    slotBgColor?: ColorPalette
-    accordion?: string
-  }>(),
-  {
-    borderColor: 'light-4',
-    rounded: false,
-    displayHighlight: true,
-    highlightColor: 'secondary',
-    titleSize: 'sm',
-    titleColor: 'dark-3',
-    visible: false,
-    iconColor: 'dark-3',
-    bgColor: 'white',
-    slotBgColor: 'light-2',
-  }
-)
-
-const toggle = ref(props.visible)
-const slots = defineSlots<{
-  content: any
-  tab: any
-}>()
-const emit = defineEmits<{
-  (e: 'collapse-open', visible: boolean, title: string): void
-  (e: 'collapse-close', visible: boolean, title: string): void
-}>()
-
-const toggleAction = (visible: boolean): void => {
-  const { title } = props
-  toggle.value = visible
-  if (visible === true) {
-    emit('collapse-open', visible, title)
-  } else {
-    emit('collapse-close', visible, title)
-  }
-}
-
-const getBorderClass = (
-  bColor: ColorPalette,
-  dHl: boolean,
-  hlColor: ColorPalette
-): string => {
-  /**
-   * @param {ColorPalette} bColor - borderColor
-   * @param {boolean} dHl - displayHighlight
-   * @param {ColorPalette} hlColor - highlightColor
-   */
-
-  const classArray: string[] = ['border', generateClass('BORDER', bColor)]
-
-  if (dHl) {
-    const borderArray: string[] = [generateClass('BORDERL', hlColor)]
-    borderArray.forEach((item) => {
-      classArray.push(item), classArray.push('border-l-8')
-    })
-  }
-
-  return classArray.join(' ')
-}
-
-const getTitleClass = (size: HeadingSize, color: ColorPalette): string => {
-  /**
-   * @param {HeadingSize} size - titleSize
-   * @param {ColorPalette} color - titleColor
-   */
-  const classArray: string[] = [
-    generateClass('H3', size),
-    generateClass('TEXTCOLOR', color),
-  ]
-  return classArray.join(' ')
-}
-
-watch(
-  () => props.visible,
-  (newValue) => {
-    toggle.value = newValue
-  }
-)
-</script>
-
-<template>
-  <div
-    class="overflow-hidden w-full"
-    :class="[
-      rounded ? 'rounded-lg' : 'rounded-sm',
-      getBorderClass(borderColor, displayHighlight, highlightColor),
-    ]"
-  >
-    <div
-      class="py-xs px-sm cursor-pointer transition-[border] duration-500"
-      :class="[
-        toggle
-          ? `border-b ${generateClass('BORDERB', borderColor)} ease-in`
-          : 'ease-out',
-        generateClass('BGCOLOR', bgColor),
-      ]"
-      v-collapse:[collapseId]
-    >
-      <div class="flex justify-between items-center">
-        <h3 :class="getTitleClass(titleSize, titleColor)">
-          {{ title }}
-        </h3>
-        <div @click.stop class="cursor-default" v-if="slots['tab']">
-          <slot name="tab"></slot>
-        </div>
-      </div>
-    </div>
-    <div class="overflow-hidden" :class="generateClass('BGCOLOR', slotBgColor)">
-      <collapse
-        :id="collapseId"
-        :visible="visible"
-        class-name="py-sm px-xs"
-        @open="toggleAction"
-        @close="toggleAction"
-        :accordion="accordion"
-      >
-        <slot name="content"></slot>
-      </collapse>
-    </div>
-    <div
-      class="py-1.5 px-sm cursor-pointer transition-all duration-500 flex justify-center items-center border-t"
-      :class="[
-        generateClass('BGCOLOR', bgColor),
-        generateClass('BORDERT', borderColor),
-      ]"
-      v-collapse:[collapseId]
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 448 512"
-        class="h-xs"
-        :class="[
-          !toggle ? 'rotate-0' : 'rotate-180',
-          'transition-transform duration-300 ease-in',
-          generateClass('SVGFILL', iconColor),
-        ]"
-      >
-        <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
-        <path
-          d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"
-        />
-      </svg>
-    </div>
-  </div>
-</template>

package/lib/mcl-collapse-a/MclCollapseA.vue.d.ts

@@ -1,98 +0,0 @@
-import type { ColorPalette, HeadingSize } from '@bobbykim/manguito-theme';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    collapseId: string;
-    borderColor?: ColorPalette | undefined;
-    rounded?: boolean | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    title: string;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    visible?: boolean | undefined;
-    iconColor?: ColorPalette | undefined;
-    bgColor?: ColorPalette | undefined;
-    slotBgColor?: ColorPalette | undefined;
-    accordion?: string | undefined;
-}>, {
-    borderColor: string;
-    rounded: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    titleSize: string;
-    titleColor: string;
-    visible: boolean;
-    iconColor: string;
-    bgColor: string;
-    slotBgColor: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "collapse-open": (visible: boolean, title: string) => void;
-    "collapse-close": (visible: boolean, title: string) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    collapseId: string;
-    borderColor?: ColorPalette | undefined;
-    rounded?: boolean | undefined;
-    displayHighlight?: boolean | undefined;
-    highlightColor?: ColorPalette | undefined;
-    title: string;
-    titleSize?: HeadingSize | undefined;
-    titleColor?: ColorPalette | undefined;
-    visible?: boolean | undefined;
-    iconColor?: ColorPalette | undefined;
-    bgColor?: ColorPalette | undefined;
-    slotBgColor?: ColorPalette | undefined;
-    accordion?: string | undefined;
-}>, {
-    borderColor: string;
-    rounded: boolean;
-    displayHighlight: boolean;
-    highlightColor: string;
-    titleSize: string;
-    titleColor: string;
-    visible: boolean;
-    iconColor: string;
-    bgColor: string;
-    slotBgColor: string;
-}>>> & {
-    "onCollapse-open"?: ((visible: boolean, title: string) => any) | undefined;
-    "onCollapse-close"?: ((visible: boolean, title: string) => any) | undefined;
-}, {
-    rounded: boolean;
-    visible: boolean;
-    bgColor: ColorPalette;
-    titleColor: ColorPalette;
-    borderColor: ColorPalette;
-    displayHighlight: boolean;
-    highlightColor: ColorPalette;
-    titleSize: HeadingSize;
-    iconColor: ColorPalette;
-    slotBgColor: ColorPalette;
-}, {}>, Readonly<{
-    content: any;
-    tab: any;
-}> & {
-    content: any;
-    tab: 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-collapse-b/MclCollapseB.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import type { ColorPalette, HeadingSize } from '@bobbykim/manguito-theme'
-import generateClass, { Collapse, vCollapse } from '@bobbykim/manguito-theme'
-import { ref, watch } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    collapseId: string
-    title: string
-    titleColor?: ColorPalette
-    titleSize?: HeadingSize
-    borderColor?: ColorPalette
-    bgColor?: ColorPalette
-    btnColor?: ColorPalette
-    iconColor?: ColorPalette
-    rounded?: boolean
-    displayShadow?: boolean
-    visible?: boolean
-    accordion?: string
-  }>(),
-  {
-    titleColor: 'light-1',
-    titleSize: 'md',
-    borderColor: 'light-3',
-    bgColor: 'light-1',
-    btnColor: 'primary',
-    iconColor: 'light-1',
-    rounded: true,
-    displayShadow: true,
-    visible: false,
-  }
-)
-
-const slots = defineSlots<{
-  default: any
-}>()
-const toggle = ref(props.visible)
-const emit = defineEmits<{
-  (e: 'collapse-open', visible: boolean, title: string): void
-  (e: 'collapse-close', visible: boolean, title: string): void
-}>()
-
-const toggleAction = (visible: boolean): void => {
-  const { title } = props
-  toggle.value = visible
-  if (visible === true) {
-    emit('collapse-open', visible, title)
-  } else {
-    emit('collapse-close', visible, title)
-  }
-}
-
-const getBorderClass = (
-  bColor: ColorPalette,
-  bgColor: ColorPalette,
-  rounded: boolean,
-  dShadow: boolean
-): string => {
-  /**
-   * @param {ColorPalette} bColor - borderColor
-   * @param {ColorPalette} bgColor - bgColor
-   * @param {boolean} rounded - rounded
-   * @param {boolean} dShadow - displayShadow
-   */
-
-  let borderInfo: string[] = [
-    'border',
-    generateClass('BORDER', bColor),
-    generateClass('BGCOLOR', bgColor),
-  ]
-
-  if (dShadow) {
-    borderInfo.push('shadow-md')
-  }
-  if (rounded) {
-    borderInfo.push('rounded-2xl')
-  } else {
-    borderInfo.push('rounded-sm')
-  }
-
-  return borderInfo.join(' ')
-}
-
-const getTitleClass = (size: HeadingSize, color: ColorPalette): string => {
-  /**
-   * @param {HeadingSize} size - titleSize
-   * @param {ColorPalette} color - titleColor
-   */
-
-  const classArray: string[] = [
-    generateClass('H3', size),
-    generateClass('TEXTCOLOR', color),
-  ]
-  return classArray.join(' ')
-}
-
-watch(
-  () => props.visible,
-  (newValue) => {
-    toggle.value = newValue
-  }
-)
-</script>
-
-<template>
-  <div
-    class="w-full overflow-hidden p-2xs"
-    :class="getBorderClass(borderColor, bgColor, rounded, displayShadow)"
-  >
-    <div
-      v-collapse:[collapseId]
-      class="flex justify-between items-center w-full px-4 py-2 cursor-pointer hover:bg-opacity-70 transition duration-200 ease-in"
-      :class="[
-        rounded ? 'rounded-lg' : 'rounded-sm',
-        generateClass('BGCOLOR', btnColor),
-      ]"
-    >
-      <h3 :class="getTitleClass(titleSize, titleColor)">{{ title }}</h3>
-      <div class="flex justify-center items-center ml-xs md:ml-sm lg:ml-md">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512"
-          class="h-xs transition-transform duration-300 ease-in"
-          :class="[
-            !toggle ? 'rotate-0' : 'rotate-180',
-            generateClass('SVGFILL', iconColor),
-          ]"
-        >
-          <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
-          <path
-            d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"
-          />
-        </svg>
-      </div>
-    </div>
-    <div class="overflow-hidden">
-      <collapse
-        :id="collapseId"
-        :visible="visible"
-        class-name="px-xs pt-xs pb-2xs"
-        :accordion="accordion"
-        @open="toggleAction"
-        @close="toggleAction"
-      >
-        <slot></slot>
-      </collapse>
-    </div>
-  </div>
-</template>

package/lib/mcl-collapse-b/MclCollapseB.vue.d.ts

@@ -1,91 +0,0 @@
-import type { ColorPalette, HeadingSize } from '@bobbykim/manguito-theme';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    collapseId: string;
-    title: string;
-    titleColor?: ColorPalette | undefined;
-    titleSize?: HeadingSize | undefined;
-    borderColor?: ColorPalette | undefined;
-    bgColor?: ColorPalette | undefined;
-    btnColor?: ColorPalette | undefined;
-    iconColor?: ColorPalette | undefined;
-    rounded?: boolean | undefined;
-    displayShadow?: boolean | undefined;
-    visible?: boolean | undefined;
-    accordion?: string | undefined;
-}>, {
-    titleColor: string;
-    titleSize: string;
-    borderColor: string;
-    bgColor: string;
-    btnColor: string;
-    iconColor: string;
-    rounded: boolean;
-    displayShadow: boolean;
-    visible: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "collapse-open": (visible: boolean, title: string) => void;
-    "collapse-close": (visible: boolean, title: string) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    collapseId: string;
-    title: string;
-    titleColor?: ColorPalette | undefined;
-    titleSize?: HeadingSize | undefined;
-    borderColor?: ColorPalette | undefined;
-    bgColor?: ColorPalette | undefined;
-    btnColor?: ColorPalette | undefined;
-    iconColor?: ColorPalette | undefined;
-    rounded?: boolean | undefined;
-    displayShadow?: boolean | undefined;
-    visible?: boolean | undefined;
-    accordion?: string | undefined;
-}>, {
-    titleColor: string;
-    titleSize: string;
-    borderColor: string;
-    bgColor: string;
-    btnColor: string;
-    iconColor: string;
-    rounded: boolean;
-    displayShadow: boolean;
-    visible: boolean;
-}>>> & {
-    "onCollapse-open"?: ((visible: boolean, title: string) => any) | undefined;
-    "onCollapse-close"?: ((visible: boolean, title: string) => any) | undefined;
-}, {
-    rounded: boolean;
-    visible: boolean;
-    bgColor: ColorPalette;
-    titleColor: ColorPalette;
-    borderColor: ColorPalette;
-    titleSize: HeadingSize;
-    iconColor: ColorPalette;
-    btnColor: ColorPalette;
-    displayShadow: boolean;
-}, {}>, Readonly<{
-    default: any;
-}> & {
-    default: 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
-}
-}