@bobbykim/manguito-theme 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.15.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.14.0...@bobbykim/manguito-theme@0.15.0) (2024-02-27)
+
+
+### Features
+
+* **/components/**/README.md,/deprecated:** update readme files, move deprecated packages to deprecated folder ([c0f8f7d](https://github.com/bobbykim89/manguito-component-library/commit/c0f8f7df158b8fcd99b4e3d191e02e3c8a9c144d))
+
+
+
+
+
+# [0.14.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.13.0...@bobbykim/manguito-theme@0.14.0) (2024-02-27)
+
+
+### Features
+
+* **components/*:** run package:build ([fcc2d09](https://github.com/bobbykim89/manguito-component-library/commit/fcc2d0953d77ecaa317be27eb212c927dec33b17))
+* **manguito-theme,mcl-cards,mcl-header,mcl-footer,mcl-carousel:** add vueuse as one of dependencies, update code to make them ssr friendly ([119a327](https://github.com/bobbykim89/manguito-component-library/commit/119a327adf1ca9866e6ac063bce5acd4790db612))
+* **mcl-collapse:** add mcl-collapse component library and add story for mcl-collapse-a ([397b63e](https://github.com/bobbykim89/manguito-component-library/commit/397b63e00b83801bdf1cd2c6710d0ba876c6bf87))
+* **stories/*:** ran package:build to build type declaration, move deprecated story files into deprecated folder ([ffc487d](https://github.com/bobbykim89/manguito-component-library/commit/ffc487dbcc093be7a3ccfeae98c5e10e8372a0e3))
+* **stories:** add basic addons, add stories for theme and base component ([841d8db](https://github.com/bobbykim89/manguito-component-library/commit/841d8db015d3d861f567ae3d19cf0033b28bac7c))
+
+
+
+
+
 # [0.13.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.12.0...@bobbykim/manguito-theme@0.13.0) (2023-12-06)
 
 

package/README.md

@@ -1,15 +1,27 @@
 # @bobbykim/manguito-theme
 
-manguito-theme includes basic config for MCL, including theme.types and generateClass function that returns tailwindCSS style classes.
+manguito-theme includes basic config for MCL, including type definitions for theme and base components, and generateClass function that returns tailwindCSS style classes.
 
 ## Demo
 
-[MCL Histoire Page](https://manguito-component-library.vercel.app/story/src-stories-documentation-mcltheme-story-vue?variantId=src-stories-documentation-mcltheme-story-vue-0)
+[MCL Storybook Page](https://manguito-component-library.vercel.app/)
+
+- [Installation](https://manguito-component-library.vercel.app/?path=/docs/introduction-installation--docs)
+- Base Components
+  - [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)
+  - [Sidebar](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-sidebar-component--sidebar)
+  - [Tooltip](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-tooltip-component--tooltip)
+- Utility Class
+  - [Button Class](https://manguito-component-library.vercel.app/?path=/docs/base-utility-class-button-class--button)
+  - [Link Class](https://manguito-component-library.vercel.app/?path=/docs/base-utility-class-link-class--link)
+  - [List Class](https://manguito-component-library.vercel.app/?path=/docs/base-utility-class-list-class--list)
 
 ## Install
 
 ```sh
-npm i -D tailwindcss postcss autoprefixer sass
+npm i -D tailwindcss postcss autoprefixer sass @vueuse/core
 npm i @bobbykim/manguito-theme
 npx tailwindcss init -p
 ```
@@ -83,13 +95,25 @@ in Vue component file.
 <script setup lang="ts">
 ...
 import generateClass from '@bobbykim/manguito-theme'
-import type { <Type you need> } from '@bobbykim/manguito-theme/theme/theme.types'
+import type { <Type you need> } from '@bobbykim/manguito-theme'
 ...
 </script>
 
 <template>...</template>
 ```
 
+## Dependencies
+
+- @vueuse/core
+- vue
+
+## Dev Dependencies
+
+- autoprefixer
+- postcss
+- sass
+- tailwindcss
+
 ## Maintainers
 
 - **Bobby Kim** - _Initial work_

package/index.d.ts

@@ -4,10 +4,9 @@ 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 { DropdownContainer, DropdownContent, Collapse, Sidebar, Modal };
 export * from './lib/directives/index.js';
 export * from './theme/theme.types.js';
 export * from './lib/collapse/index.types.js';

package/index.js

@@ -5,7 +5,6 @@ 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)) {
@@ -24,7 +23,7 @@ const generateClass = (type, value) => {
     return mclGenerate.generateSpacingClass();
 };
 export default generateClass;
-export { DropdownContainer, DropdownContent, Collapse, HamburgerMenu, Sidebar, Modal, };
+export { DropdownContainer, DropdownContent, Collapse, Sidebar, Modal };
 export * from './lib/directives/index.js';
 export * from './theme/theme.types.js';
 export * from './lib/collapse/index.types.js';

package/index.ts

@@ -12,8 +12,6 @@ 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: ClassType, value: InputType): string => {
   const mclGenerate = new GenerateMCLClass(type, value)
   if ((<string[]>(<unknown>colorType)).includes(type)) {
@@ -34,14 +32,7 @@ const generateClass = (type: ClassType, value: InputType): string => {
 
 export default generateClass
 
-export {
-  DropdownContainer,
-  DropdownContent,
-  Collapse,
-  HamburgerMenu,
-  Sidebar,
-  Modal,
-}
+export { DropdownContainer, DropdownContent, Collapse, Sidebar, Modal }
 export * from './lib/directives/index.js'
 export * from './theme/theme.types.js'
 export * from './lib/collapse/index.types.js'

package/lib/collapse/Collapse.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, Transition, onMounted, onBeforeUnmount } from 'vue'
+import { Transition, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { observeVisibleAttr } from '../composables/index.js'
 
 const props = withDefaults(

package/lib/directives/index.js

@@ -16,6 +16,7 @@ export const vClickOutside = {
 export const vToggle = {
     mounted(el, binding) {
         el.__ClickToggleHandler = (e) => {
+            e.preventDefault();
             const eTarget = e.target;
             let target;
             if (eTarget.tagName === 'A') {
@@ -45,38 +46,8 @@ export const vToggle = {
 };
 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) => {
+            event.preventDefault();
             const eTarget = event.target;
             let target;
             if (eTarget.tagName === 'A') {
@@ -169,10 +140,10 @@ export const vTooltip = {
             }
             // handle tooltip width
             let tooltipWidth;
-            if (el.hasAttribute('width')) {
-                tooltipWidth = el.getAttribute('width');
+            if (el.hasAttribute('tooltip-width')) {
+                tooltipWidth = el.getAttribute('tooltip-width');
             }
-            if (!el.hasAttribute('width') &&
+            if (!el.hasAttribute('tooltip-width') &&
                 typeof binding.value !== 'undefined' &&
                 typeof binding.value !== 'string' &&
                 typeof binding.value.width === ('number' || 'string')) {

package/lib/directives/index.ts

@@ -21,6 +21,7 @@ export const vClickOutside: Directive = {
 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') {
@@ -51,38 +52,8 @@ 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 => {
+      event.preventDefault()
       const eTarget = event.target as HTMLElement
       let target: HTMLElement
       if (eTarget.tagName === 'A') {
@@ -190,11 +161,11 @@ export const vTooltip: Directive<TooltipElementType, TooltipValueType> = {
       }
       // handle tooltip width
       let tooltipWidth: string | number | null | undefined
-      if (el.hasAttribute('width')) {
-        tooltipWidth = el.getAttribute('width')
+      if (el.hasAttribute('tooltip-width')) {
+        tooltipWidth = el.getAttribute('tooltip-width')
       }
       if (
-        !el.hasAttribute('width') &&
+        !el.hasAttribute('tooltip-width') &&
         typeof binding.value !== 'undefined' &&
         typeof binding.value !== 'string' &&
         typeof binding.value.width === ('number' || 'string')

package/lib/dropdown/DropdownContainer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { reactive, provide, ref, onMounted } from 'vue'
-import type { InjectType } from './index.types.js'
+import { onMounted, provide, reactive, ref } from 'vue'
 import { vClickOutside } from '../directives/index.js'
+import type { InjectType } from './index.types.js'
 
 const emit = defineEmits(['click-outside', 'toggle'])
 const dropdownTarget = ref()
@@ -22,9 +22,7 @@ const onEscape = (): void => {
   dropdownState.active = false
 }
 onMounted(() => {
-  if (typeof window !== undefined) {
-    dropdownState.buttonHeight = dropdownTarget.value.scrollHeight
-  }
+  dropdownState.buttonHeight = dropdownTarget.value.scrollHeight
 })
 </script>
 

package/lib/dropdown/DropdownContent.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, inject, Transition } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+import { Transition, computed, inject, ref } from 'vue'
 import type { InjectType } from './index.types.js'
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     className?: string
   }>(),
@@ -10,6 +11,7 @@ const props = withDefaults(
     className: '',
   }
 )
+const { height } = useWindowSize()
 const contentRef = ref<HTMLAreaElement>()
 const dropdownState = inject<InjectType>('dropdownState', {
   active: false,
@@ -25,16 +27,10 @@ const buttonHeight = computed(() => {
   return { '--button-height': `${dropdownState.buttonHeight}px` }
 })
 const dropdownDirection = computed<string | undefined>(() => {
-  if (typeof window === undefined) {
-    return
-  }
   if (!dropdownState.active || !contentRef.value) {
     return
   }
-  if (
-    window.innerHeight - contentRef.value.getBoundingClientRect().bottom <
-    0
-  ) {
+  if (height.value - contentRef.value.getBoundingClientRect().bottom < 0) {
     return 'dropup-bottom'
   }
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.13.0",
+  "version": "0.15.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",
@@ -10,6 +10,16 @@
   "scripts": {
     "build": "vue-tsc --project tsconfig.vue.json && tsc"
   },
+  "dependencies": {
+    "@vueuse/core": "^10.8.0",
+    "vue": "^3.3.10"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "sass": "^1.69.5",
+    "tailwindcss": "^3.3.6"
+  },
   "author": {
     "name": "Bobby Kim",
     "url": "https://www.devbobbykim.com/"
@@ -20,5 +30,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "8a54d2b4e7a06b4468904a978b0436ef389b00e6"
+  "gitHead": "69d6ee1c4f91a74b226cb46182845201141805fa"
 }

package/lib/nav/HamburgerMenu.vue

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { ColorPalette } from '../../index.js'
-import generateClass from '../../index.js'
-
-const props = withDefaults(
-  defineProps<{
-    color?: ColorPalette
-    displayBorder?: boolean
-    toggle: boolean
-    navColor: ColorPalette
-  }>(),
-  {
-    color: 'dark-2',
-    displayBorder: true,
-  }
-)
-
-const emit = defineEmits(['hbg-click'])
-
-const handleButtonToggle = (e: Event): void => {
-  emit('hbg-click', e)
-}
-
-const hamburgetButtonState = computed({
-  get() {
-    return props.toggle
-  },
-  set(value) {
-    return value
-  },
-})
-
-const getBorderClass = (
-  bColor: ColorPalette,
-  border: boolean,
-  nColor: ColorPalette
-): string => {
-  /**
-   * @bColor - color
-   * @border - displayBorder
-   * @nColor - navColor
-   */
-
-  const classArray: string[] = [
-    generateClass('RINGCOLOR', bColor),
-    generateClass('OFFSETRING', nColor),
-  ]
-
-  if (border) {
-    classArray.push(generateClass('BORDER', bColor))
-    classArray.push('border')
-  }
-  return classArray.join(' ')
-}
-
-const getHamburgerButtonClass = (color: ColorPalette): string => {
-  /**
-   * @color - color
-   */
-  const classArray: string[] = [
-    generateClass('BGCOLOR', color),
-    generateClass('BEFOREBG', color),
-    generateClass('AFTERBG', color),
-  ]
-
-  return classArray.join(' ')
-}
-</script>
-
-<template>
-  <button
-    class="p-3xs rounded-md aspect-square outline-none focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear hover:opacity-70 focus:opacity-70 hamburger__button"
-    :class="getBorderClass(color, displayBorder, navColor)"
-    @click="handleButtonToggle"
-  >
-    <input
-      type="checkbox"
-      v-model="hamburgetButtonState"
-      class="hidden hamburger__checkbox"
-    />
-    <div
-      class="relative h-[3px] w-sm hamburger__icon before:w-sm after:w-sm before:h-[3px] after:h-[3px] transition-all duration-300 ease-linear"
-      :class="getHamburgerButtonClass(color)"
-    ></div>
-  </button>
-</template>
-
-<style lang="scss" scoped>
-.hamburger__icon {
-  &::before,
-  &::after {
-    position: absolute;
-    left: 0;
-    transition: all 0.3s linear;
-  }
-  &::before {
-    top: -0.5rem;
-  }
-  &::after {
-    top: 0.5rem;
-  }
-}
-.hamburger__button {
-  &:focus .hamburger__icon,
-  &:hover .hamburger__icon {
-    scale: 1.05;
-  }
-}
-.hamburger__checkbox:checked + .hamburger__icon {
-  background-color: transparent;
-}
-.hamburger__checkbox:checked + .hamburger__icon::before {
-  top: 0;
-  transform: rotate(135deg);
-}
-.hamburger__checkbox:checked + .hamburger__icon::after {
-  top: 0;
-  transform: rotate(-135deg);
-}
-</style>

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

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