@bobbykim/manguito-theme 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.8.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.7.0...@bobbykim/manguito-theme@0.8.0) (2023-12-01)
+
+
+### Features
+
+* prerelease run build ([f7a852c](https://github.com/bobbykim89/manguito-component-library/commit/f7a852c9bf12b77481bf5d2f1602e50367d834f8))
+* **tsconfig.json,tsconfig.vue.json:** update tsconfig ([0f21861](https://github.com/bobbykim89/manguito-component-library/commit/0f2186167342314f5d218e789a68c03cf6faa8ff))

package/index.d.ts

@@ -0,0 +1,13 @@
+import type { ClassType, InputType } from './theme/index.js';
+import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
+import DropdownContent from './lib/dropdown/DropdownContent.vue';
+import Collapse from './lib/collapse/Collapse.vue';
+import Sidebar from './lib/sidebar/Sidebar.vue';
+import Modal from './lib/modal/Modal.vue';
+import HamburgerMenu from './lib/nav/HamburgerMenu.vue';
+declare const generateClass: (type: ClassType, value: InputType) => string;
+export default generateClass;
+export { DropdownContainer, DropdownContent, Collapse, HamburgerMenu, Sidebar, Modal, };
+export * from './lib/directives';
+export * from './theme/theme.types';
+export * from './lib/collapse/index.types';

package/index.js

@@ -0,0 +1,30 @@
+import GenerateMCLClass, { colorType, textType, borderWidthType, scaleType, } from './theme';
+// base components
+import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
+import DropdownContent from './lib/dropdown/DropdownContent.vue';
+import Collapse from './lib/collapse/Collapse.vue';
+import Sidebar from './lib/sidebar/Sidebar.vue';
+import Modal from './lib/modal/Modal.vue';
+import HamburgerMenu from './lib/nav/HamburgerMenu.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;
+export { DropdownContainer, DropdownContent, Collapse, HamburgerMenu, Sidebar, Modal, };
+export * from './lib/directives';
+export * from './theme/theme.types';
+export * from './lib/collapse/index.types';

package/lib/collapse/Collapse.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, watch, Transition } from 'vue'
-import type { CollapseEvent } from './index.types'
+import { ref, watch, Transition, onMounted, onBeforeUnmount } from 'vue'
+import { observeVisibleAttr } from '../composables'
+
 const props = withDefaults(
   defineProps<{
-    collapseId: string
     accordion?: string
     className?: string
     visible?: boolean
@@ -13,12 +13,24 @@ const props = withDefaults(
     visible: false,
   }
 )
-const emit = defineEmits(['toggle'])
+const emit = defineEmits(['open', 'close'])
+const collapseRef = ref<HTMLElement | undefined>()
 const toggle = ref<boolean>(props.visible)
 
-const handleToggleEvent = (e: Event): void => {
+const toggleCollapse = (): void => {
   toggle.value = !toggle.value
-  emit('toggle', { ...e, visible: toggle.value } as CollapseEvent)
+}
+const openCollapse = (): void => {
+  toggle.value = true
+}
+const closeCollapse = (): void => {
+  toggle.value = false
+}
+const emitOpenEvent = () => {
+  emit('open', { visible: true })
+}
+const emitCloseEvent = () => {
+  emit('close', { visible: false })
 }
 
 /**
@@ -45,30 +57,49 @@ const onLeave = (el: any) => {
   el.style.opacity = '0'
 }
 
+// set nutation observer watching `visible` attribute in element
+const handleVisibility = (visible: boolean = false) => {
+  toggle.value = visible
+}
+const observer = observeVisibleAttr(handleVisibility)
+
 watch(
   () => props.visible,
   (newValue) => {
     toggle.value = newValue
   }
 )
+watch(toggle, (newValue) => {
+  if (newValue === true) {
+    emitOpenEvent()
+  } else if (newValue === false) {
+    emitCloseEvent()
+  }
+})
+defineExpose({
+  toggle: toggleCollapse,
+  close: closeCollapse,
+  open: openCollapse,
+})
+onMounted(() => {
+  if (collapseRef.value) {
+    observer.observe(collapseRef.value, { attributes: true })
+  }
+})
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
 </script>
 
 <template>
-  <div>
-    <button
-      :id="collapseId"
-      @click="handleToggleEvent"
-      class="hidden"
-      :accordion="accordion"
-      :visible="toggle"
-    ></button>
+  <div :accordion="accordion" :visible="toggle" ref="collapseRef">
     <transition
       name="collapse"
       tag="div"
       @enter="onEnter"
       @after-enter="onAfterEnter"
       @leave="onLeave"
-      class="overflow-hidden"
+      class="overflow-y-clip"
     >
       <div v-show="toggle">
         <div :class="[className]">

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

@@ -0,0 +1,46 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    visible: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    accordion: {
+        type: import("vue").PropType<string>;
+    };
+    className: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, {
+    toggle: () => void;
+    close: () => void;
+    open: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (...args: any[]) => void;
+    close: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    visible: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    accordion: {
+        type: import("vue").PropType<string>;
+    };
+    className: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & {
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    visible: boolean;
+    className: string;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/collapse/index.types.d.ts

@@ -0,0 +1,3 @@
+export interface CollapseEvent {
+    visible: boolean;
+}

package/lib/collapse/index.types.js

@@ -0,0 +1 @@
+export {};

package/lib/collapse/index.types.ts

@@ -1,3 +1,3 @@
-export interface CollapseEvent extends Event {
+export interface CollapseEvent {
   visible: boolean
 }

package/lib/composables/index.d.ts

@@ -0,0 +1 @@
+export * from './observeVisible';

package/lib/composables/index.js

@@ -0,0 +1 @@
+export * from './observeVisible';

package/lib/composables/index.ts

@@ -0,0 +1 @@
+export * from './observeVisible'

package/lib/composables/observeVisible.d.ts

@@ -0,0 +1 @@
+export declare const observeVisibleAttr: (fn: (...args: any[]) => void) => MutationObserver;

package/lib/composables/observeVisible.js

@@ -0,0 +1,24 @@
+export const observeVisibleAttr = (fn) => {
+    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;
+            }
+            if (changed) {
+                const visibleAttr = mutationTarget.getAttribute('visible') === 'true'
+                    ? true
+                    : false;
+                fn(visibleAttr);
+            }
+        }
+    });
+    return observer;
+};

package/lib/composables/observeVisible.ts

@@ -0,0 +1,24 @@
+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
+      }
+      if (changed) {
+        const visibleAttr =
+          (mutationTarget as HTMLElement).getAttribute('visible') === 'true'
+            ? true
+            : false
+        fn(visibleAttr)
+      }
+    }
+  })
+  return observer
+}

package/lib/directives/index.d.ts

@@ -0,0 +1,6 @@
+import { Directive } from 'vue';
+import type { TooltipElementType, TooltipValueType } from './index.types';
+export declare const vClickOutside: Directive;
+export declare const vToggle: Directive;
+export declare const vCollapse: Directive;
+export declare const vTooltip: Directive<TooltipElementType, TooltipValueType>;

package/lib/directives/index.js

@@ -0,0 +1,215 @@
+import { render, createVNode } from 'vue';
+import tooltip from '../tooltip';
+export const vClickOutside = {
+    mounted(el, binding) {
+        el.__ClickOutsideHandler = (event) => {
+            if (!(el === event.target || el.contains(event.target))) {
+                binding.value(event);
+            }
+        };
+        document.body.addEventListener('click', el.__ClickOutsideHandler);
+    },
+    unmounted(el) {
+        document.body.removeEventListener('click', el.__ClickOutsideHandler);
+    },
+};
+export const vToggle = {
+    mounted(el, binding) {
+        el.__ClickToggleHandler = (e) => {
+            const eTarget = e.target;
+            let target;
+            if (eTarget.tagName === 'A') {
+                const targetId = eTarget.getAttribute('href');
+                const formattedTargetId = (targetId === null || targetId === void 0 ? void 0 : targetId.charAt(0)) === '#' ? targetId.substring(1) : targetId;
+                target = document.getElementById(formattedTargetId);
+            }
+            else {
+                target = document.getElementById(binding.arg);
+            }
+            if (!target) {
+                return;
+            }
+            if (target.hasAttribute('visible') === false) {
+                return;
+            }
+            const targetAttr = target.getAttribute('visible');
+            const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true';
+            target.setAttribute('visible', attrAfterToggle);
+            return;
+        };
+        el.addEventListener('click', el.__ClickToggleHandler);
+    },
+    unmounted(el) {
+        el.removeEventListener('click', el.__ClickToggleHandler);
+    },
+};
+export const vCollapse = {
+    mounted(el, binding) {
+        // el.__HandleToggler = (event: Event): void => {
+        //   const eTarget = event.target as HTMLElement
+        //   let target: HTMLElement
+        //   if (eTarget.tagName === 'A') {
+        //     const targetId = eTarget.getAttribute('href')
+        //     const formattedTargetId =
+        //       targetId?.charAt(0) === '#' ? targetId.substring(1) : targetId
+        //     target = document.getElementById(formattedTargetId as string)!
+        //   } else {
+        //     target = document.getElementById(binding.arg as string) as HTMLElement
+        //   }
+        //   if (!target.hasAttribute('accordion')) {
+        //     // run when it is not accordion component case
+        //     target.click()
+        //     return
+        //   }
+        //   const accordionName = target.getAttribute('accordion')
+        //   const accordionList: NodeListOf<HTMLElement> = document.querySelectorAll(
+        //     `button[accordion="${accordionName}"]`
+        //   )
+        //   // loop through each accordion items and handle reaction for each case
+        //   for (let i = 0; i < accordionList.length; i++) {
+        //     const isVisible = accordionList[i].getAttribute('visible')
+        //     if (accordionList[i].id !== target.id && isVisible === 'true') {
+        //       accordionList[i].click()
+        //     }
+        //     if (accordionList[i].id === target.id) {
+        //       accordionList[i].click()
+        //     }
+        //   }
+        // }
+        el.__HandleToggler = (event) => {
+            const eTarget = event.target;
+            let target;
+            if (eTarget.tagName === 'A') {
+                const targetId = eTarget.getAttribute('href');
+                const formattedTargetId = (targetId === null || targetId === void 0 ? void 0 : targetId.charAt(0)) === '#' ? targetId.substring(1) : targetId;
+                target = document.getElementById(formattedTargetId);
+            }
+            else {
+                target = document.getElementById(binding.arg);
+            }
+            if (!target) {
+                return;
+            }
+            if (target.hasAttribute('visible') === false) {
+                return;
+            }
+            if (!target.hasAttribute('accordion')) {
+                // run when it is not accordion component case
+                const targetAttr = target.getAttribute('visible');
+                const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true';
+                target.setAttribute('visible', attrAfterToggle);
+                // target.click()
+                return;
+            }
+            const accordionName = target.getAttribute('accordion');
+            const accordionList = document.querySelectorAll(`div[accordion="${accordionName}"]`);
+            // loop through each accordion items and handle reaction for each case
+            for (let i = 0; i < accordionList.length; i++) {
+                const isVisible = accordionList[i].getAttribute('visible');
+                if (accordionList[i].id !== target.id && isVisible === 'true') {
+                    accordionList[i].setAttribute('visible', 'false');
+                    // accordionList[i].click()
+                }
+                if (accordionList[i].id === target.id) {
+                    const targetAttr = target.getAttribute('visible');
+                    const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true';
+                    target.setAttribute('visible', attrAfterToggle);
+                    // accordionList[i].click()
+                }
+            }
+        };
+        el.addEventListener('click', el.__HandleToggler);
+    },
+    unmounted(el) {
+        el.removeEventListener('click', el.__HandleToggler);
+    },
+};
+export const vTooltip = {
+    mounted(el, binding) {
+        el.__HandleTooltip = (el, binding) => {
+            // parent element class
+            el.classList.add('relative', 'group', 'overflow-visible');
+            // handle tooltip text
+            let tooltipText;
+            if (el.hasAttribute('title')) {
+                tooltipText = el.getAttribute('title');
+            }
+            if (!el.hasAttribute('title') &&
+                typeof binding.value !== 'undefined' &&
+                typeof binding.value === 'string') {
+                tooltipText = binding.value;
+            }
+            if (!el.hasAttribute('title') &&
+                typeof binding.value !== 'undefined' &&
+                typeof binding.value !== 'string' &&
+                typeof binding.value.title === 'string') {
+                tooltipText = binding.value.title;
+            }
+            // handle tooltip color
+            let tooltipColor;
+            if (el.hasAttribute('color')) {
+                tooltipColor = el.getAttribute('color');
+            }
+            if (!el.hasAttribute('color') &&
+                typeof binding.value !== 'undefined' &&
+                typeof binding.value !== 'string' &&
+                typeof binding.value.color === 'string') {
+                tooltipColor = binding.value.color;
+            }
+            // handle tooltip text color
+            let tooltipTextColor;
+            if (el.hasAttribute('text-color')) {
+                tooltipTextColor = el.getAttribute('text-color');
+            }
+            if (!el.hasAttribute('text-color') &&
+                typeof binding.value !== 'undefined' &&
+                typeof binding.value !== 'string' &&
+                typeof binding.value.textColor === 'string') {
+                tooltipTextColor = binding.value.textColor;
+            }
+            // handle tooltip width
+            let tooltipWidth;
+            if (el.hasAttribute('width')) {
+                tooltipWidth = el.getAttribute('width');
+            }
+            if (!el.hasAttribute('width') &&
+                typeof binding.value !== 'undefined' &&
+                typeof binding.value !== 'string' &&
+                typeof binding.value.width === ('number' || 'string')) {
+                tooltipWidth = binding.value.width;
+            }
+            // handle custom class names
+            let tooltipClassName;
+            if (typeof binding.value !== 'undefined' &&
+                typeof binding.value !== 'string' &&
+                typeof binding.value.className === 'string') {
+                tooltipClassName = binding.value.className;
+            }
+            let tooltipDirection;
+            const modifierArray = Object.keys(binding.modifiers);
+            // handle direction
+            if (modifierArray.length > 0) {
+                tooltipDirection = modifierArray[0];
+            }
+            const vnode = createVNode(tooltip, {
+                direction: tooltipDirection,
+                title: tooltipText,
+                color: tooltipColor,
+                textColor: tooltipTextColor,
+                width: tooltipWidth,
+                customClass: tooltipClassName,
+            });
+            render(vnode, el);
+        };
+        el.__UnmountTooltip = (el) => {
+            render(null, el);
+        };
+        el.__HandleTooltip(el, binding);
+    },
+    updated(el, binding) {
+        el.__HandleTooltip(el, binding);
+    },
+    unmounted(el) {
+        el.__UnmountTooltip(el);
+    },
+};

package/lib/directives/index.ts

@@ -31,7 +31,15 @@ export const vToggle: Directive = {
       } else {
         target = document.getElementById(binding.arg as string)!
       }
-      target.click()
+      if (!target) {
+        return
+      }
+      if (target.hasAttribute('visible') === false) {
+        return
+      }
+      const targetAttr = target.getAttribute('visible')
+      const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true'
+      target.setAttribute('visible', attrAfterToggle)
       return
     }
     el.addEventListener('click', el.__ClickToggleHandler)
@@ -43,6 +51,37 @@ export const vToggle: Directive = {
 
 export const vCollapse: Directive = {
   mounted(el, binding) {
+    // el.__HandleToggler = (event: Event): void => {
+    //   const eTarget = event.target as HTMLElement
+    //   let target: HTMLElement
+    //   if (eTarget.tagName === 'A') {
+    //     const targetId = eTarget.getAttribute('href')
+    //     const formattedTargetId =
+    //       targetId?.charAt(0) === '#' ? targetId.substring(1) : targetId
+    //     target = document.getElementById(formattedTargetId as string)!
+    //   } else {
+    //     target = document.getElementById(binding.arg as string) as HTMLElement
+    //   }
+    //   if (!target.hasAttribute('accordion')) {
+    //     // run when it is not accordion component case
+    //     target.click()
+    //     return
+    //   }
+    //   const accordionName = target.getAttribute('accordion')
+    //   const accordionList: NodeListOf<HTMLElement> = document.querySelectorAll(
+    //     `button[accordion="${accordionName}"]`
+    //   )
+    //   // loop through each accordion items and handle reaction for each case
+    //   for (let i = 0; i < accordionList.length; i++) {
+    //     const isVisible = accordionList[i].getAttribute('visible')
+    //     if (accordionList[i].id !== target.id && isVisible === 'true') {
+    //       accordionList[i].click()
+    //     }
+    //     if (accordionList[i].id === target.id) {
+    //       accordionList[i].click()
+    //     }
+    //   }
+    // }
     el.__HandleToggler = (event: Event): void => {
       const eTarget = event.target as HTMLElement
       let target: HTMLElement
@@ -54,23 +93,36 @@ export const vCollapse: Directive = {
       } else {
         target = document.getElementById(binding.arg as string) as HTMLElement
       }
+      if (!target) {
+        return
+      }
+      if (target.hasAttribute('visible') === false) {
+        return
+      }
       if (!target.hasAttribute('accordion')) {
         // run when it is not accordion component case
-        target.click()
+        const targetAttr = target.getAttribute('visible')
+        const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true'
+        target.setAttribute('visible', attrAfterToggle)
+        // target.click()
         return
       }
       const accordionName = target.getAttribute('accordion')
       const accordionList: NodeListOf<HTMLElement> = document.querySelectorAll(
-        `button[accordion="${accordionName}"]`
+        `div[accordion="${accordionName}"]`
       )
       // loop through each accordion items and handle reaction for each case
       for (let i = 0; i < accordionList.length; i++) {
         const isVisible = accordionList[i].getAttribute('visible')
         if (accordionList[i].id !== target.id && isVisible === 'true') {
-          accordionList[i].click()
+          accordionList[i].setAttribute('visible', 'false')
+          // accordionList[i].click()
         }
         if (accordionList[i].id === target.id) {
-          accordionList[i].click()
+          const targetAttr = target.getAttribute('visible')
+          const attrAfterToggle = targetAttr === 'true' ? 'false' : 'true'
+          target.setAttribute('visible', attrAfterToggle)
+          // accordionList[i].click()
         }
       }
     }

package/lib/directives/index.types.d.ts

@@ -0,0 +1,14 @@
+import type { ColorPalette } from '../..';
+export interface TooltipElementType extends HTMLElement {
+    __HandleTooltip: Function;
+    __UnmountTooltip: Function;
+}
+interface TooltipValueObjectType {
+    title?: string;
+    color?: ColorPalette;
+    textColor?: ColorPalette;
+    width?: number | string;
+    className?: string;
+}
+export type TooltipValueType = TooltipValueObjectType | string;
+export {};

package/lib/directives/index.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,19 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (...args: any[]) => void;
+    "click-outside": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    onToggle?: ((...args: any[]) => any) | undefined;
+    "onClick-outside"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>, {
+    toggler?(_: {
+        toggle: (e: Event) => void;
+        dropdownState: boolean;
+    }): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,23 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    className: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    className: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>>, {
+    className: string;
+}, {}>, {
+    default?(_: {
+        itemClick: () => void;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/dropdown/index.types.d.ts

@@ -0,0 +1,4 @@
+export type InjectType = {
+    active: boolean;
+    buttonHeight: number;
+};