@bobbykim/manguito-theme 0.18.0 → 0.20.0

package/lib/composables/observeVisible.ts

@@ -1,30 +0,0 @@
-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)
-        }
-      }
-    },
-    { attributes: true }
-  )
-}

package/lib/directives/index.d.ts

@@ -1,6 +0,0 @@
-import type { Directive } from 'vue';
-import type { TooltipElementType, TooltipValueType } from './index.types.js';
-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

@@ -1,186 +0,0 @@
-import { render, createVNode } from 'vue';
-import tooltip from '../tooltip/index.js';
-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) => {
-            e.preventDefault();
-            const eTarget = e.target;
-            let target;
-            if (eTarget.tagName === 'A') {
-                const targetId = eTarget.getAttribute('href');
-                const formattedTargetId = 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.preventDefault();
-            const eTarget = event.target;
-            let target;
-            if (eTarget.tagName === 'A') {
-                const targetId = eTarget.getAttribute('href');
-                const formattedTargetId = 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('tooltip-width')) {
-                tooltipWidth = el.getAttribute('tooltip-width');
-            }
-            if (!el.hasAttribute('tooltip-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

@@ -1,211 +0,0 @@
-import { render, createVNode } from 'vue'
-import type { Directive, DirectiveBinding } from 'vue'
-import type { Direction } from '../../index.js'
-import tooltip from '../tooltip/index.js'
-import type { TooltipElementType, TooltipValueType } from './index.types.js'
-
-export const vClickOutside: Directive = {
-  mounted(el, binding) {
-    el.__ClickOutsideHandler = (event: 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: Directive = {
-  mounted(el, binding) {
-    el.__ClickToggleHandler = (e: Event): void => {
-      e.preventDefault()
-      const eTarget = e.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)!
-      }
-      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: Directive = {
-  mounted(el, binding) {
-    el.__HandleToggler = (event: Event): void => {
-      event.preventDefault()
-      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) {
-        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: NodeListOf<HTMLElement> = 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: Directive<TooltipElementType, TooltipValueType> = {
-  mounted(el, binding) {
-    el.__HandleTooltip = (
-      el: HTMLElement,
-      binding: DirectiveBinding<TooltipValueType>
-    ) => {
-      // parent element class
-      el.classList.add('relative', 'group', 'overflow-visible')
-
-      // handle tooltip text
-      let tooltipText: string | null | undefined
-      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: string | null | undefined
-      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: string | null | undefined
-      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: string | number | null | undefined
-      if (el.hasAttribute('tooltip-width')) {
-        tooltipWidth = el.getAttribute('tooltip-width')
-      }
-      if (
-        !el.hasAttribute('tooltip-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: string | undefined
-      if (
-        typeof binding.value !== 'undefined' &&
-        typeof binding.value !== 'string' &&
-        typeof binding.value.className === 'string'
-      ) {
-        tooltipClassName = binding.value.className
-      }
-      let tooltipDirection: Direction | undefined
-      const modifierArray: string[] = Object.keys(binding.modifiers)
-      // handle direction
-      if (modifierArray.length > 0) {
-        tooltipDirection = modifierArray[0] as Direction
-      }
-      const vnode = createVNode(tooltip, {
-        direction: tooltipDirection,
-        title: tooltipText,
-        color: tooltipColor,
-        textColor: tooltipTextColor,
-        width: tooltipWidth,
-        customClass: tooltipClassName,
-      })
-      render(vnode, el)
-    }
-    el.__UnmountTooltip = (el: Element) => {
-      render(null, el)
-    }
-    el.__HandleTooltip(el, binding)
-  },
-  updated(el, binding) {
-    el.__HandleTooltip(el, binding)
-  },
-  unmounted(el) {
-    el.__UnmountTooltip(el)
-  },
-}

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

@@ -1,14 +0,0 @@
-import type { ColorPalette } from '../../index.js';
-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

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

package/lib/directives/index.types.ts

@@ -1,15 +0,0 @@
-import type { ColorPalette } from '../../index.js'
-
-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

package/lib/dropdown/DropdownContainer.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { onMounted, provide, reactive, ref } from 'vue'
-import { vClickOutside } from '../directives'
-import type { InjectType } from './index.types'
-
-const slots = defineSlots<{
-  default: any
-  toggler: any
-}>()
-const emit = defineEmits<{
-  (e: 'click-outside', event: Event): void
-  (e: 'toggle', event: Event): void
-}>()
-const dropdownTarget = ref()
-const dropdownState = reactive<InjectType>({
-  active: false,
-  buttonHeight: 0,
-})
-provide('dropdownState', dropdownState)
-const toggle = (e: Event): void => {
-  dropdownState.active = !dropdownState.active
-  emit('toggle', e)
-}
-const onClickOutside = (e: Event): void => {
-  dropdownState.active = false
-  emit('click-outside', e)
-}
-const onEscape = (): void => {
-  dropdownState.active = false
-}
-onMounted(() => {
-  dropdownState.buttonHeight = dropdownTarget.value.scrollHeight
-})
-</script>
-
-<template>
-  <div
-    class="relative"
-    ref="dropdownTarget"
-    v-click-outside="onClickOutside"
-    @keyup.esc="onEscape"
-  >
-    <slot
-      name="toggler"
-      :toggle="toggle"
-      :dropdown-state="dropdownState.active"
-    />
-    <slot></slot>
-  </div>
-</template>

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

@@ -1,19 +0,0 @@
-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").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 (): {
-        $slots: S;
-    };
-};

package/lib/dropdown/DropdownContent.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { useWindowSize } from '@vueuse/core'
-import { Transition, computed, inject, ref } from 'vue'
-import type { InjectType } from './index.types'
-
-withDefaults(
-  defineProps<{
-    className?: string
-  }>(),
-  {
-    className: '',
-  }
-)
-const { height } = useWindowSize()
-const slots = defineSlots<{
-  default(props: { itemClick: () => void }): any
-}>()
-const contentRef = ref<HTMLAreaElement>()
-const dropdownState = inject<InjectType>('dropdownState', {
-  active: false,
-  buttonHeight: 0,
-})
-const active = computed<boolean>(() => {
-  return dropdownState.active
-})
-const handleItemClick = () => {
-  dropdownState.active = false
-}
-const buttonHeight = computed(() => {
-  return { '--button-height': `${dropdownState.buttonHeight}px` }
-})
-const dropdownDirection = computed<string | undefined>(() => {
-  if (!dropdownState.active || !contentRef.value) {
-    return
-  }
-  if (height.value - contentRef.value.getBoundingClientRect().bottom < 0) {
-    return 'dropup-bottom'
-  }
-})
-</script>
-
-<template>
-  <transition name="dropdown-content">
-    <div
-      v-if="active"
-      ref="contentRef"
-      class="absolute my-2xs max-w-[14rem] w-max overflow-hidden"
-      :class="[dropdownDirection, className]"
-      :style="buttonHeight"
-    >
-      <slot :item-click="handleItemClick" />
-    </div>
-  </transition>
-</template>
-
-<style scoped lang="scss">
-.dropup-bottom {
-  bottom: var(--button-height);
-}
-.dropdown-content-enter-active,
-.dropdown-content-leave-active {
-  transition: all 0.3s;
-}
-.dropdown-content-enter-from,
-.dropdown-content-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-</style>

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

@@ -1,42 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    className?: string | undefined;
-}>, {
-    className: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    className?: string | undefined;
-}>, {
-    className: string;
-}>>>, {
-    className: string;
-}, {}>, Readonly<{
-    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> = {
-    [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/dropdown/index.types.d.ts

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

package/lib/dropdown/index.types.js

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

package/lib/dropdown/index.types.ts

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