@bobbykim/manguito-theme 0.16.0 → 0.18.0

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.18.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.17.0...@bobbykim/manguito-theme@0.18.0) (2024-04-01)
+
+
+### Features
+
+* **manguito-theme:** update alert component event, update readme files, update story files ([99d4a7e](https://github.com/bobbykim89/manguito-component-library/commit/99d4a7ef192dfb628cf5b37b1cce34bb33aeb4c1))
+* **manguito-theme:** update observeVisibleAttr composable, add alert component ([1629762](https://github.com/bobbykim89/manguito-component-library/commit/16297624b667066bd7076b02001f0ca8db65630d))
+* ready for production ([4e2fc04](https://github.com/bobbykim89/manguito-component-library/commit/4e2fc048edd67791b4e917e0a764f301d4c610cb))
+
+
+
+
+
+# [0.17.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.15.0...@bobbykim/manguito-theme@0.17.0) (2024-03-24)
+
+
+### Features
+
+* build and release ([a372086](https://github.com/bobbykim89/manguito-component-library/commit/a3720861fb40dd6ec1d0e3dda1f06e2479967432))
+* code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
+* **components/*:** prepublish build ([c8eb95a](https://github.com/bobbykim89/manguito-component-library/commit/c8eb95a0ede6727bf183d2e9ad634ae64af1411d))
+* **manguito-theme:** add header-vertical component ([05c339d](https://github.com/bobbykim89/manguito-component-library/commit/05c339d77cdded35d2e45a5c22c3833329e41532))
+* **manguito-theme:** add new base component header-horizontal ([d3826ee](https://github.com/bobbykim89/manguito-component-library/commit/d3826ee1da15ea0edd2fa7f959269704f22008b3))
+* **manguito-theme:** code refactor ([d310131](https://github.com/bobbykim89/manguito-component-library/commit/d31013189fa5e1c4f8085de63a08ee2932652f55))
+* **mcl-header-a:** wip) update mcl-header-a ([344a13f](https://github.com/bobbykim89/manguito-component-library/commit/344a13f3cd25c6b02fc99866f19ae65bc89d9ec5))
+* **mcl-header-b:** add mobile layout for mcl-header-b ([ca961ec](https://github.com/bobbykim89/manguito-component-library/commit/ca961ecbaecab1d2e879cb62e905e713878539c0))
+* **mcl-header-b:** add more layouts for desktop screen ([bfd1c7e](https://github.com/bobbykim89/manguito-component-library/commit/bfd1c7e8ed3d9b839bea0dd1a7c3b5740a345c41))
+* **mcl-header-b:** fix minor issues with mcl closing collapses in menu item click, update text color of menu items ([1ecfcf3](https://github.com/bobbykim89/manguito-component-library/commit/1ecfcf3ec474e6a6097a34bb9861cbb680280530))
+* **mcl-header-b:** wip) adding story file for mcl-header-b ([2a80675](https://github.com/bobbykim89/manguito-component-library/commit/2a8067553df9a138398aef2a898ebdf3b4a9a268))
+* **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.16.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.15.0...@bobbykim/manguito-theme@0.16.0) (2024-03-21)
 
 

package/README.md

@@ -8,6 +8,7 @@ manguito-theme includes basic config for MCL, including type definitions for the
 
 - [Installation](https://manguito-component-library.vercel.app/?path=/docs/introduction-installation--docs)
 - Base Components
+  - [Alert](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-alert-component--alert)
   - [Collapse](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-collapse-component--collapse)
   - [Dropdown](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-dropdown-component--dropdown)
   - [Modal](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-modal-component--modal)

package/index.d.ts

@@ -1,4 +1,5 @@
-import type { ClassType, InputType } from './theme';
+import { generateClass } from './lib/theme/generateClass';
+import Alert from './lib/alert/Alert.vue';
 import Collapse from './lib/collapse/Collapse.vue';
 import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
 import DropdownContent from './lib/dropdown/DropdownContent.vue';
@@ -6,9 +7,8 @@ import HeaderHorizontal from './lib/header/HeaderHorizontal.vue';
 import HeaderVertical from './lib/header/HeaderVertical.vue';
 import Modal from './lib/modal/Modal.vue';
 import Sidebar from './lib/sidebar/Sidebar.vue';
-declare const generateClass: (type: ClassType, value: InputType) => string;
-export default generateClass;
 export * from './lib/directives';
 export * from './lib/header/index.types';
-export * from './theme/theme.types';
-export { Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };
+export * from './lib/theme/theme.types';
+export { Alert, Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };
+export default generateClass;

package/index.js

@@ -1,5 +1,7 @@
-import GenerateMCLClass, { borderWidthType, colorType, scaleType, textType, } from './theme';
+// generate class function
+import { generateClass } from './lib/theme/generateClass';
 // base components
+import Alert from './lib/alert/Alert.vue';
 import Collapse from './lib/collapse/Collapse.vue';
 import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
 import DropdownContent from './lib/dropdown/DropdownContent.vue';
@@ -7,25 +9,11 @@ import HeaderHorizontal from './lib/header/HeaderHorizontal.vue';
 import HeaderVertical from './lib/header/HeaderVertical.vue';
 import Modal from './lib/modal/Modal.vue';
 import Sidebar from './lib/sidebar/Sidebar.vue';
-const generateClass = (type, value) => {
-    const mclGenerate = new GenerateMCLClass(type, value);
-    if (colorType.includes(type)) {
-        return mclGenerate.generateColorClass();
-    }
-    if (textType.includes(type)) {
-        return mclGenerate.generateTextClass();
-    }
-    if (borderWidthType.includes(type)) {
-        return mclGenerate.generateBorderWidthClass();
-    }
-    if (scaleType.includes(type)) {
-        return mclGenerate.generateScaleClass();
-    }
-    // return spacing type if all of above is false
-    return mclGenerate.generateSpacingClass();
-};
-export default generateClass;
+// directives
 export * from './lib/directives';
+// types
 export * from './lib/header/index.types';
-export * from './theme/theme.types';
-export { Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };
+export * from './lib/theme/theme.types';
+// export components
+export { Alert, Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };
+export default generateClass;

package/index.ts

@@ -1,11 +1,7 @@
-import type { ClassType, InputType } from './theme'
-import GenerateMCLClass, {
-  borderWidthType,
-  colorType,
-  scaleType,
-  textType,
-} from './theme'
+// generate class function
+import { generateClass } from './lib/theme/generateClass'
 // base components
+import Alert from './lib/alert/Alert.vue'
 import Collapse from './lib/collapse/Collapse.vue'
 import DropdownContainer from './lib/dropdown/DropdownContainer.vue'
 import DropdownContent from './lib/dropdown/DropdownContent.vue'
@@ -14,30 +10,15 @@ import HeaderVertical from './lib/header/HeaderVertical.vue'
 import Modal from './lib/modal/Modal.vue'
 import Sidebar from './lib/sidebar/Sidebar.vue'
 
-const generateClass = (type: ClassType, value: InputType): string => {
-  const mclGenerate = new GenerateMCLClass(type, value)
-  if ((<string[]>(<unknown>colorType)).includes(type)) {
-    return mclGenerate.generateColorClass()
-  }
-  if ((<string[]>(<unknown>textType)).includes(type)) {
-    return mclGenerate.generateTextClass()
-  }
-  if ((<string[]>(<unknown>borderWidthType)).includes(type)) {
-    return mclGenerate.generateBorderWidthClass()
-  }
-  if ((<string[]>(<unknown>scaleType)).includes(type)) {
-    return mclGenerate.generateScaleClass()
-  }
-  // return spacing type if all of above is false
-  return mclGenerate.generateSpacingClass()
-}
-
-export default generateClass
-
+// directives
 export * from './lib/directives'
+// types
 export * from './lib/header/index.types'
-export * from './theme/theme.types'
+export * from './lib/theme/theme.types'
+
+// export components
 export {
+  Alert,
   Collapse,
   DropdownContainer,
   DropdownContent,
@@ -46,3 +27,5 @@ export {
   Modal,
   Sidebar,
 }
+
+export default generateClass

package/lib/alert/Alert.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { ColorPalette } from '../../'
+import generateClass from '../../'
+const props = withDefaults(
+  defineProps<{
+    color?: ColorPalette
+    rounded?: boolean
+    shadow?: boolean
+    show?: boolean
+    dismissible?: boolean
+  }>(),
+  {
+    color: 'danger',
+    rounded: true,
+    shadow: true,
+    show: false,
+    dismissible: false,
+  }
+)
+
+const slots = defineSlots<{
+  default: any
+}>()
+
+const emit = defineEmits<{
+  (e: 'close', event: Event): void
+}>()
+
+const showAlert = ref<boolean>(props.show)
+const componentClass = computed<string>(() => {
+  const { color, rounded, shadow } = props
+  const classArray: string[] = [generateClass('BGCOLOR', color)]
+  if (rounded) {
+    classArray.push('rounded-md')
+  }
+  if (shadow) {
+    classArray.push('drop-shadow-md')
+  }
+  return classArray.join(' ')
+})
+const handleClose = (e: Event) => {
+  showAlert.value = false
+  emit('close', e)
+}
+const closeAlert = () => {
+  showAlert.value = false
+}
+watch(
+  () => props.show,
+  (newValue) => {
+    showAlert.value = newValue
+  }
+)
+defineExpose({
+  close: closeAlert,
+})
+</script>
+
+<template>
+  <div
+    v-if="showAlert"
+    role="alert"
+    aria-live="polite"
+    aria-atomic="true"
+    class="py-[0.75rem] px-[1.25rem] relative"
+    :class="[componentClass]"
+  >
+    <div class="w-full flex justify-between gap-2xs">
+      <div class="w-full">
+        <slot></slot>
+      </div>
+      <button
+        v-if="dismissible"
+        @click="handleClose"
+        class="flex items-center opacity-60 hover:opacity-40 transition-opacity duration-300 ease-linear"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 384 512"
+          fill="currentColor"
+          class="h-xs"
+        >
+          <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+          <path
+            d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>

package/lib/alert/Alert.vue.d.ts

@@ -0,0 +1,65 @@
+import type { ColorPalette } from '../../';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    color?: ColorPalette | undefined;
+    rounded?: boolean | undefined;
+    shadow?: boolean | undefined;
+    show?: boolean | undefined;
+    dismissible?: boolean | undefined;
+}>, {
+    color: string;
+    rounded: boolean;
+    shadow: boolean;
+    show: boolean;
+    dismissible: boolean;
+}>, {
+    close: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: Event) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    color?: ColorPalette | undefined;
+    rounded?: boolean | undefined;
+    shadow?: boolean | undefined;
+    show?: boolean | undefined;
+    dismissible?: boolean | undefined;
+}>, {
+    color: string;
+    rounded: boolean;
+    shadow: boolean;
+    show: boolean;
+    dismissible: boolean;
+}>>> & {
+    onClose?: ((event: Event) => any) | undefined;
+}, {
+    color: ColorPalette;
+    shadow: boolean;
+    rounded: boolean;
+    show: boolean;
+    dismissible: 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/lib/collapse/Collapse.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Transition, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { Transition, ref, watch } from 'vue'
 import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
@@ -67,7 +67,7 @@ const onLeave = (el: any) => {
 const handleVisibility = (visible: boolean = false) => {
   toggle.value = visible
 }
-const observer = observeVisibleAttr(handleVisibility)
+observeVisibleAttr(collapseRef, handleVisibility)
 
 watch(
   () => props.visible,
@@ -87,14 +87,6 @@ defineExpose({
   close: closeCollapse,
   open: openCollapse,
 })
-onMounted(() => {
-  if (collapseRef.value) {
-    observer.observe(collapseRef.value, { attributes: true })
-  }
-})
-onBeforeUnmount(() => {
-  observer.disconnect()
-})
 </script>
 
 <template>

package/lib/collapse/Collapse.vue.d.ts

@@ -12,7 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     open: (visible: boolean) => void;
     close: (visible: boolean) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     accordion?: string | undefined;
     className?: string | undefined;
     visible?: boolean | undefined;
@@ -27,7 +27,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     className: string;
 }, {}>, Readonly<{
     default: any;
-}>>;
+}> & {
+    default: any;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/composables/observeVisible.d.ts

@@ -1 +1,6 @@
-export declare const observeVisibleAttr: (fn: (...args: any[]) => void) => MutationObserver;
+import type { Ref } from 'vue';
+export declare const observeVisibleAttr: (el: Ref, fn: (...args: any[]) => void) => {
+    isSupported: import("vue").ComputedRef<boolean>;
+    stop: () => void;
+    takeRecords: () => MutationRecord[] | undefined;
+};

package/lib/composables/observeVisible.js

@@ -1,15 +1,16 @@
-export const observeVisibleAttr = (fn) => {
-    const observer = new MutationObserver((mutations) => {
+import { useMutationObserver } from '@vueuse/core';
+export const observeVisibleAttr = (el, fn) => {
+    return useMutationObserver(el, (mutations) => {
         let changed = false;
         for (let i = 0; i < mutations.length && !changed; i++) {
             const mutation = mutations[i];
             const mutationType = mutation.type;
-            const mutationAttribute = mutation.attributeName;
+            const mutationAttr = mutation.attributeName;
             const mutationTarget = mutation.target;
             if (mutationType === 'attributes') {
                 changed = true;
             }
-            else if (mutationAttribute === 'visible') {
+            else if (mutationAttr === 'visible') {
                 changed = true;
             }
             if (changed) {
@@ -19,6 +20,5 @@ export const observeVisibleAttr = (fn) => {
                 fn(visibleAttr);
             }
         }
-    });
-    return observer;
+    }, { attributes: true });
 };

package/lib/composables/observeVisible.ts

@@ -1,24 +1,30 @@
-export const observeVisibleAttr = (fn: (...args: any[]) => void) => {
-  const observer = new MutationObserver((mutations) => {
-    let changed = false
-    for (let i = 0; i < mutations.length && !changed; i++) {
-      const mutation = mutations[i]
-      const mutationType = mutation.type
-      const mutationAttribute = mutation.attributeName
-      const mutationTarget = mutation.target
-      if (mutationType === 'attributes') {
-        changed = true
-      } else if (mutationAttribute === 'visible') {
-        changed = true
+import { useMutationObserver } from '@vueuse/core'
+import type { Ref } from 'vue'
+
+export const observeVisibleAttr = (el: Ref, fn: (...args: any[]) => void) => {
+  return useMutationObserver(
+    el,
+    (mutations) => {
+      let changed: boolean = false
+      for (let i = 0; i < mutations.length && !changed; i++) {
+        const mutation = mutations[i]
+        const mutationType = mutation.type
+        const mutationAttr = mutation.attributeName
+        const mutationTarget = mutation.target
+        if (mutationType === 'attributes') {
+          changed = true
+        } else if (mutationAttr === 'visible') {
+          changed = true
+        }
+        if (changed) {
+          const visibleAttr =
+            (mutationTarget as HTMLElement).getAttribute('visible') === 'true'
+              ? true
+              : false
+          fn(visibleAttr)
+        }
       }
-      if (changed) {
-        const visibleAttr =
-          (mutationTarget as HTMLElement).getAttribute('visible') === 'true'
-            ? true
-            : false
-        fn(visibleAttr)
-      }
-    }
-  })
-  return observer
+    },
+    { attributes: true }
+  )
 }

package/lib/dropdown/DropdownContainer.vue.d.ts

@@ -1,13 +1,16 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "click-outside": (event: Event) => void;
     toggle: (event: Event) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
     onToggle?: ((event: Event) => any) | undefined;
     "onClick-outside"?: ((event: Event) => any) | undefined;
 }, {}, {}>, Readonly<{
     default: any;
     toggler: any;
-}>>;
+}> & {
+    default: any;
+    toggler: any;
+}>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/lib/dropdown/DropdownContent.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     className?: string | undefined;
 }>, {
     className: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     className?: string | undefined;
 }>, {
     className: string;
@@ -12,7 +12,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     default(props: {
         itemClick: () => void;
     }): any;
-}>>;
+}> & {
+    default(props: {
+        itemClick: () => void;
+    }): any;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/header/HeaderHorizontal.vue.d.ts

@@ -20,7 +20,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     headerClose: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "toggle-drawer": (event: Event, open: boolean) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     bgColor?: ColorPalette | undefined;
     mobileMenuBgColor?: ColorPalette | undefined;
     drawerBtnColor?: ColorPalette | undefined;
@@ -52,7 +52,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     'mobile-content'(props: {
         headerClose: () => void;
     }): any;
-}>>;
+}> & {
+    content: any;
+    'content-right': any;
+    'mobile-content'(props: {
+        headerClose: () => void;
+    }): any;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/header/HeaderVertical.vue.d.ts

@@ -13,7 +13,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     headerClose: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "toggle-drawer": (event: Event, open: boolean) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     bgColor?: ColorPalette | undefined;
     drawerBtnColor?: ColorPalette | undefined;
     drawerBtnBorder?: boolean | undefined;
@@ -37,7 +37,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     'mobile-content'(props: {
         headerClose: () => void;
     }): any;
-}>>;
+}> & {
+    default: any;
+    content: any;
+    'content-bottom': any;
+    'mobile-content'(props: {
+        headerClose: () => void;
+    }): any;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/header/NavDrawer.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     displayBorder: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "hbg-click": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     color?: ColorPalette | undefined;
     displayBorder?: boolean | undefined;
     toggle: boolean;

package/lib/modal/Modal.vue

@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-  Transition,
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue'
+import { Transition, computed, ref, watch } from 'vue'
 import type { ColorPalette, VerticalAlignment } from '../../'
 import generateClass, { vClickOutside } from '../../'
 import { observeVisibleAttr } from '../composables'
@@ -92,7 +85,8 @@ const onAfterLeave = () => {
 const handleVisibility = (visible: boolean = false) => {
   toggle.value = visible
 }
-const observer = observeVisibleAttr(handleVisibility)
+
+observeVisibleAttr(modalRef, handleVisibility)
 
 watch(
   () => props.visible,
@@ -112,14 +106,6 @@ defineExpose({
   close: closeModal,
   open: openModal,
 })
-onMounted(() => {
-  if (modalRef.value) {
-    observer.observe(modalRef.value, { attributes: true })
-  }
-})
-onBeforeUnmount(() => {
-  observer.disconnect()
-})
 </script>
 
 <template>

package/lib/modal/Modal.vue.d.ts

@@ -25,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     open: (visible: boolean) => void;
     close: (visible: boolean) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string | undefined;
     titleColor?: ColorPalette | undefined;
     className?: string | undefined;
@@ -69,7 +69,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         close: () => void;
         status: boolean;
     }): any;
-}>>;
+}> & {
+    header(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+    body(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+    footer(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/sidebar/Sidebar.vue

@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-  Transition,
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue'
+import { Transition, computed, ref, watch } from 'vue'
 import type { ColorPalette, DirectionX } from '../../'
 import generateClass, { vClickOutside } from '../../'
 import { observeVisibleAttr } from '../composables'
@@ -101,7 +94,8 @@ const onAfterLeave = () => {
 const handleVisibility = (visible: boolean = false) => {
   toggle.value = visible
 }
-const observer = observeVisibleAttr(handleVisibility)
+
+observeVisibleAttr(sidebarRef, handleVisibility)
 
 watch(
   () => props.visible,
@@ -121,14 +115,6 @@ defineExpose({
   open: openSidebar,
   close: closeSidebar,
 })
-onMounted(() => {
-  if (sidebarRef.value) {
-    observer.observe(sidebarRef.value, { attributes: true })
-  }
-})
-onBeforeUnmount(() => {
-  observer.disconnect()
-})
 </script>
 
 <template>

package/lib/sidebar/Sidebar.vue.d.ts

@@ -27,7 +27,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     open: (visible: boolean) => void;
     close: (visible: boolean) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string | undefined;
     titleColor?: ColorPalette | undefined;
     className?: string | undefined;
@@ -55,12 +55,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     visible: boolean;
     className: string;
     color: ColorPalette;
+    width: string | number;
     titleColor: ColorPalette;
     noBackdrop: boolean;
     noHeader: boolean;
     backdropColor: ColorPalette;
     placement: DirectionX;
-    width: string | number;
 }, {}>, Readonly<{
     header(props: {
         close: () => void;
@@ -74,7 +74,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         close: () => void;
         status: boolean;
     }): any;
-}>>;
+}> & {
+    header(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+    body(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+    footer(props: {
+        close: () => void;
+        status: boolean;
+    }): any;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/theme/generateClass.d.ts

@@ -0,0 +1,2 @@
+import type { ClassType, InputType } from '.';
+export declare const generateClass: (type: ClassType, value: InputType) => string;

package/lib/theme/generateClass.js

@@ -0,0 +1,18 @@
+import GenerateMCLClass, { borderWidthType, colorType, scaleType, textType, } from '.';
+export const generateClass = (type, value) => {
+    const mclGenerate = new GenerateMCLClass(type, value);
+    if (colorType.includes(type)) {
+        return mclGenerate.generateColorClass();
+    }
+    if (textType.includes(type)) {
+        return mclGenerate.generateTextClass();
+    }
+    if (borderWidthType.includes(type)) {
+        return mclGenerate.generateBorderWidthClass();
+    }
+    if (scaleType.includes(type)) {
+        return mclGenerate.generateScaleClass();
+    }
+    // return spacing type if all of above is false
+    return mclGenerate.generateSpacingClass();
+};

package/lib/theme/generateClass.ts

@@ -0,0 +1,25 @@
+import type { ClassType, InputType } from '.'
+import GenerateMCLClass, {
+  borderWidthType,
+  colorType,
+  scaleType,
+  textType,
+} from '.'
+
+export const generateClass = (type: ClassType, value: InputType): string => {
+  const mclGenerate = new GenerateMCLClass(type, value)
+  if ((<string[]>(<unknown>colorType)).includes(type)) {
+    return mclGenerate.generateColorClass()
+  }
+  if ((<string[]>(<unknown>textType)).includes(type)) {
+    return mclGenerate.generateTextClass()
+  }
+  if ((<string[]>(<unknown>borderWidthType)).includes(type)) {
+    return mclGenerate.generateBorderWidthClass()
+  }
+  if ((<string[]>(<unknown>scaleType)).includes(type)) {
+    return mclGenerate.generateScaleClass()
+  }
+  // return spacing type if all of above is false
+  return mclGenerate.generateSpacingClass()
+}

package/lib/tooltip/index.d.ts

@@ -27,7 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     direction: {
         type: PropType<Direction>;
         default: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "main theme file for manguito components library. Other MCL components will need to import this file to run.",
   "type": "module",
   "main": "index.ts",
@@ -30,5 +30,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "5b81953e5108fd166c0b89ebc6a24e6de9499635"
+  "gitHead": "969800695a9a902bc9d0c19ad6ab002caace8061"
 }