@bobbykim/manguito-theme 0.6.0 → 0.8.0

package/lib/dropdown/index.types.js

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

package/lib/modal/Modal.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import { ref, computed, watch, Transition } from 'vue'
+import {
+  ref,
+  computed,
+  watch,
+  Transition,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue'
 import generateClass, {
   ColorPalette,
   vClickOutside,
   VerticalAlignment,
 } from '../../'
+import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
   defineProps<{
-    modalId: string
     title?: string
     titleColor?: ColorPalette
     className?: string
@@ -31,23 +38,31 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['toggle', 'close'])
+const emit = defineEmits(['open', 'close'])
+const modalRef = ref<HTMLElement | undefined>()
 const toggle = ref<boolean>(props.visible)
 const toggleComplete = ref<boolean>(false)
 
-const handleToggleEvent = (e: Event): void => {
+// const handleToggleEvent = (): void => {
+//   toggle.value = !toggle.value
+// }
+const toggleModal = (): void => {
   toggle.value = !toggle.value
-  emit('toggle', e)
 }
 const openModal = (): void => {
   toggle.value = true
 }
-const closeModal = (e: Event): void => {
+const closeModal = (): void => {
   if (toggleComplete.value === true) {
     toggle.value = false
-    emit('close', e)
   }
 }
+const emitOpenEvent = () => {
+  emit('open', { visible: true })
+}
+const emitCloseEvent = () => {
+  emit('close', { visible: false })
+}
 const handlePlacementVar = computed(() => {
   let placementVariable: number
   if (props.placement === 'top') {
@@ -70,22 +85,44 @@ const onAfterEnter = () => {
 const onAfterLeave = () => {
   toggleComplete.value = false
 }
+
+// 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 && toggleComplete.value === true) {
+    emitCloseEvent()
+  }
+})
 defineExpose({
-  toggle: handleToggleEvent,
+  toggle: toggleModal,
   close: closeModal,
   open: openModal,
 })
+onMounted(() => {
+  if (modalRef.value) {
+    observer.observe(modalRef.value, { attributes: true })
+  }
+})
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
 </script>
 
 <template>
-  <div :style="handlePlacementVar">
-    <button :id="modalId" @click="handleToggleEvent" class="hidden"></button>
+  <div :style="handlePlacementVar" :visible="toggle" ref="modalRef">
+    <!-- <button :id="modalId" @click="handleToggleEvent" class="hidden"></button> -->
     <Transition name="fade" appear tag="div" v-if="!noBackdrop">
       <section
         v-if="toggle"

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

@@ -0,0 +1,112 @@
+import { ColorPalette, VerticalAlignment } from '../../';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    visible: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    className: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    titleColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    noBackdrop: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    noHeader: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    backdropColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    placement: {
+        type: import("vue").PropType<VerticalAlignment>;
+        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;
+    };
+    className: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    titleColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    noBackdrop: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    noHeader: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    backdropColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    placement: {
+        type: import("vue").PropType<VerticalAlignment>;
+        default: string;
+    };
+}>> & {
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    visible: boolean;
+    className: string;
+    titleColor: ColorPalette;
+    noBackdrop: boolean;
+    noHeader: boolean;
+    color: ColorPalette;
+    backdropColor: ColorPalette;
+    placement: VerticalAlignment;
+}, {}>, {
+    header?(_: {
+        close: () => void;
+        status: true;
+    }): any;
+    body?(_: {
+        close: () => void;
+        status: true;
+    }): any;
+    footer?(_: {
+        close: () => void;
+        status: true;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/nav/HamburgerMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { ColorPalette } from '@bobbykim/manguito-theme'
+import type { ColorPalette } from '../../'
 import generateClass from '../../index'
 
 const props = withDefaults(

package/lib/nav/HamburgerMenu.vue.d.ts

@@ -0,0 +1,44 @@
+import type { ColorPalette } from '../../';
+declare const _default: import("vue").DefineComponent<{
+    toggle: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    color: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    displayBorder: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    navColor: {
+        type: import("vue").PropType<ColorPalette>;
+        required: true;
+    };
+}, {}, 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<{
+    toggle: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    color: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    displayBorder: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    navColor: {
+        type: import("vue").PropType<ColorPalette>;
+        required: true;
+    };
+}>> & {
+    "onHbg-click"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: ColorPalette;
+    displayBorder: boolean;
+}, {}>;
+export default _default;

package/lib/sidebar/Sidebar.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
-import { ref, computed, watch, Transition } from 'vue'
+import {
+  ref,
+  computed,
+  watch,
+  Transition,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue'
 import generateClass, { ColorPalette, vClickOutside, DirectionX } from '../../'
+import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
   defineProps<{
-    sidebarId: string
     title?: string
     titleColor?: ColorPalette
     className?: string
@@ -29,15 +36,18 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits(['toggle', 'close'])
+const emit = defineEmits(['open', 'close'])
 const toggle = ref<boolean>(props.visible)
 const toggleComplete = ref<boolean>(false)
+const sidebarRef = ref<HTMLElement | undefined>()
 const headerRef = ref<HTMLElement>()
 const footerRef = ref<HTMLElement>()
 
 const handleToggleEvent = (e: Event): void => {
   toggle.value = !toggle.value
-  emit('toggle', e)
+}
+const toggleSidebar = (): void => {
+  toggle.value = !toggle.value
 }
 const openSidebar = (): void => {
   toggle.value = true
@@ -45,9 +55,14 @@ const openSidebar = (): void => {
 const closeSidebar = (e: Event): void => {
   if (toggleComplete.value === true) {
     toggle.value = false
-    emit('close', e)
   }
 }
+const emitOpenEvent = () => {
+  emit('open', { visible: true })
+}
+const emitCloseEvent = () => {
+  emit('close', { visible: false })
+}
 const handleStyleVariables = computed(() => {
   return {
     '--sidebar-width': `${props.width}px`,
@@ -75,22 +90,44 @@ const onAfterEnter = () => {
 const onAfterLeave = () => {
   toggleComplete.value = false
 }
+
+// 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 && toggleComplete.value === true) {
+    emitCloseEvent()
+  }
+})
 defineExpose({
-  toggle: handleToggleEvent,
+  toggle: toggleSidebar,
   open: openSidebar,
   close: closeSidebar,
 })
+onMounted(() => {
+  if (sidebarRef.value) {
+    observer.observe(sidebarRef.value, { attributes: true })
+  }
+})
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
 </script>
 
 <template>
-  <div :style="handleStyleVariables">
-    <button :id="sidebarId" @click="handleToggleEvent" class="hidden"></button>
+  <div :style="handleStyleVariables" :visible="toggle" ref="sidebarRef">
+    <!-- <button :id="sidebarId" @click="handleToggleEvent" class="hidden"></button> -->
     <Transition name="fade" appear tag="div" v-if="!noBackdrop">
       <section
         v-if="toggle"

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

@@ -0,0 +1,121 @@
+import { ColorPalette, DirectionX } from '../../';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    visible: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    className: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    titleColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    noBackdrop: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    noHeader: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    backdropColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    placement: {
+        type: import("vue").PropType<DirectionX>;
+        default: string;
+    };
+    width: {
+        type: import("vue").PropType<string | number>;
+        default: number;
+    };
+}, {
+    toggle: () => void;
+    open: () => void;
+    close: (e: Event) => 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;
+    };
+    className: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    titleColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    noBackdrop: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    noHeader: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    backdropColor: {
+        type: import("vue").PropType<ColorPalette>;
+        default: string;
+    };
+    placement: {
+        type: import("vue").PropType<DirectionX>;
+        default: string;
+    };
+    width: {
+        type: import("vue").PropType<string | number>;
+        default: number;
+    };
+}>> & {
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    visible: boolean;
+    className: string;
+    titleColor: ColorPalette;
+    noBackdrop: boolean;
+    noHeader: boolean;
+    color: ColorPalette;
+    backdropColor: ColorPalette;
+    placement: DirectionX;
+    width: string | number;
+}, {}>, {
+    header?(_: {
+        close: (e: Event) => void;
+        status: true;
+    }): any;
+    body?(_: {
+        close: (e: Event) => void;
+        status: true;
+    }): any;
+    footer?(_: {
+        close: (e: Event) => void;
+        status: true;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/tooltip/index.d.ts

@@ -0,0 +1,62 @@
+import { PropType } from 'vue';
+import type { Direction, ColorPalette } from '../../';
+declare const _default: import("vue").DefineComponent<{
+    direction: {
+        type: PropType<Direction>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorPalette>;
+        default: string;
+    };
+    textColor: {
+        type: PropType<ColorPalette>;
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    customClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+}, () => 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<{
+    direction: {
+        type: PropType<Direction>;
+        default: string;
+    };
+    color: {
+        type: PropType<ColorPalette>;
+        default: string;
+    };
+    textColor: {
+        type: PropType<ColorPalette>;
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    customClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {
+    direction: Direction;
+    color: ColorPalette;
+    textColor: ColorPalette;
+    width: string | number;
+    customClass: string;
+}, {}>;
+export default _default;

package/lib/tooltip/index.js

@@ -0,0 +1,71 @@
+import { defineComponent, h, computed } from 'vue';
+import generateClass from '../../';
+export default defineComponent({
+    props: {
+        direction: {
+            type: String,
+            default: 'right',
+        },
+        color: {
+            type: String,
+            default: 'dark-3',
+        },
+        textColor: {
+            type: String,
+            default: 'white',
+        },
+        width: {
+            type: [Number, String],
+            default: 80,
+        },
+        customClass: {
+            type: String,
+            default: '',
+        },
+        title: {
+            type: String,
+            required: true,
+        },
+    },
+    setup(props) {
+        const defaultClassList = 'invisible opacity-0 group-hover:visible group-hover:opacity-100 z-[100] tooltip';
+        const colorClass = computed(() => {
+            /**
+             * @param {ColorPalette} color - props
+             * @param {ColorPalette} textolor - props
+             */
+            const { color, textColor } = props;
+            const classArray = [
+                generateClass('BGCOLOR', color),
+                generateClass('TEXTCOLOR', textColor),
+            ];
+            return classArray.join(' ');
+        });
+        const tooltipWidth = computed(() => {
+            return { width: `${props.width}px` };
+        });
+        const tooltipDirection = computed(() => {
+            switch (props.direction) {
+                case 'left':
+                    return 'tooltip-left';
+                case 'top':
+                    return 'tooltip-top';
+                case 'bottom':
+                    return 'tooltip-bottom';
+                default:
+                    return 'tooltip-right';
+            }
+        });
+        return () => h('div', {
+            class: [
+                defaultClassList,
+                props.customClass,
+                tooltipDirection.value,
+                colorClass.value,
+            ],
+            role: 'tooltip',
+            innerHTML: props.title,
+            style: [tooltipWidth.value],
+        });
+    },
+});

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.6.0",
+  "version": "0.8.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",
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "vue-tsc --project tsconfig.vue.json && tsc"
+  },
   "author": {
     "name": "Bobby Kim",
     "url": "https://www.devbobbykim.com/"
@@ -17,5 +20,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "eb0833dd47a9dd0bb326bee28daf2bee4e421279"
+  "gitHead": "97c70699ec57726f77f021927b61f83715847f33"
 }