@bobbykim/manguito-theme 0.17.0 → 0.19.0

package/package.json

@@ -1,24 +1,45 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.17.0",
+  "version": "0.19.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"
   },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/core.cjs",
+  "module": "./dist/core.js",
+  "types": "./dist/core.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/core.js",
+      "require": "./dist/core.cjs",
+      "types": "./dist/core.d.ts"
+    },
+    "./mcl-theme": {
+      "import": "./dist/mcl-theme.js",
+      "require": "./dist/mcl-theme.cjs",
+      "types": "./dist/mcl-theme.d.ts"
+    }
+  },
   "scripts": {
-    "build": "vue-tsc --project tsconfig.vue.json && tsc --project tsconfig.ts.json"
+    "build": "vite build"
   },
   "dependencies": {
     "@vueuse/core": "^10.8.0",
     "vue": "^3.3.10"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.32",
+    "@vitejs/plugin-vue": "^4.5.2",
     "sass": "^1.69.5",
-    "tailwindcss": "^3.3.6"
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.3.3",
+    "vite": "^4.5.1",
+    "vite-plugin-css-injected-by-js": "^3.5.0",
+    "vite-plugin-dts": "^3.8.3",
+    "vue-tsc": "^1.8.25"
   },
   "author": {
     "name": "Bobby Kim",
@@ -30,5 +51,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "f4be01699f747aba1f831a1f796f8e41e6fcd676"
+  "gitHead": "b66ad8b5fabf32c0814726f0847ce86399b4115b"
 }

package/CHANGELOG.md

@@ -1,137 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [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)
-
-
-### Features
-
-* code refactor ([8a025e7](https://github.com/bobbykim89/manguito-component-library/commit/8a025e7cf870ff3dd0cb35878a08793e99ec5cef))
-* **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))
-* **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.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)
-
-
-### Features
-
-* **tsconfig,-card-delta:** card-delta bug fix, update tsconfig ([4c469b9](https://github.com/bobbykim89/manguito-component-library/commit/4c469b933632e3e729f6b75f7e808c89c090d463))
-* **tsconfig:** install dependencies and update tsconfig to not generate source map ([0bd4d4c](https://github.com/bobbykim89/manguito-component-library/commit/0bd4d4c78503ef156dbb3d49aa3e67e7e0e68289))
-
-
-
-
-
-# [0.12.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.11.0...@bobbykim/manguito-theme@0.12.0) (2023-12-02)
-
-
-### Features
-
-* **manguito-theme,accordion-alpha,accordion-beta,nav-alpha:** change tsconfig settings ([055e6d8](https://github.com/bobbykim89/manguito-component-library/commit/055e6d8781705fcc144769da90470eb0d5e36612))
-
-
-
-
-
-# [0.11.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.10.0...@bobbykim/manguito-theme@0.11.0) (2023-12-02)
-
-
-### Features
-
-* **manguito-theme:** update import path ([c6c69fa](https://github.com/bobbykim89/manguito-component-library/commit/c6c69fa416e6ff7f388d97f8663a8e77b2e806d3))
-
-
-
-
-
-# [0.10.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.9.0...@bobbykim/manguito-theme@0.10.0) (2023-12-01)
-
-
-### Features
-
-* **tsconfig:** update tsconfig file and some of import paths ([c7caaa3](https://github.com/bobbykim89/manguito-component-library/commit/c7caaa3101a5d57d0e799568f1c4f5cbebececc3))
-
-
-
-
-
-# [0.9.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.8.0...@bobbykim/manguito-theme@0.9.0) (2023-12-01)
-
-
-### Features
-
-* **components:** target version update ([fe78575](https://github.com/bobbykim89/manguito-component-library/commit/fe78575f5e82bb854333672c3853956e9e930044))
-
-
-
-
-
-# [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

@@ -1,13 +0,0 @@
-import { generateClass } from './lib/theme/generateClass';
-import Collapse from './lib/collapse/Collapse.vue';
-import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
-import DropdownContent from './lib/dropdown/DropdownContent.vue';
-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';
-export * from './lib/directives';
-export * from './lib/header/index.types';
-export * from './lib/theme/theme.types';
-export { Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };
-export default generateClass;

package/index.js

@@ -1,18 +0,0 @@
-// generate class function
-import { generateClass } from './lib/theme/generateClass';
-// base components
-import Collapse from './lib/collapse/Collapse.vue';
-import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
-import DropdownContent from './lib/dropdown/DropdownContent.vue';
-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';
-// directives
-export * from './lib/directives';
-// types
-export * from './lib/header/index.types';
-export * from './lib/theme/theme.types';
-// export components
-export { Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };
-export default generateClass;

package/index.ts

@@ -1,29 +0,0 @@
-// generate class function
-import { generateClass } from './lib/theme/generateClass'
-// base components
-import Collapse from './lib/collapse/Collapse.vue'
-import DropdownContainer from './lib/dropdown/DropdownContainer.vue'
-import DropdownContent from './lib/dropdown/DropdownContent.vue'
-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'
-
-// directives
-export * from './lib/directives'
-// types
-export * from './lib/header/index.types'
-export * from './lib/theme/theme.types'
-
-// export components
-export {
-  Collapse,
-  DropdownContainer,
-  DropdownContent,
-  HeaderHorizontal,
-  HeaderVertical,
-  Modal,
-  Sidebar,
-}
-
-export default generateClass

package/lib/collapse/Collapse.vue

@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import { Transition, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { observeVisibleAttr } from '../composables'
-
-const props = withDefaults(
-  defineProps<{
-    accordion?: string
-    className?: string
-    visible?: boolean
-  }>(),
-  {
-    className: '',
-    visible: false,
-  }
-)
-const slots = defineSlots<{
-  default: any
-}>()
-const emit = defineEmits<{
-  (e: 'open', visible: boolean): void
-  (e: 'close', visible: boolean): void
-}>()
-const collapseRef = ref<HTMLElement | undefined>()
-const toggle = ref<boolean>(props.visible)
-
-const toggleCollapse = (): void => {
-  toggle.value = !toggle.value
-}
-const openCollapse = (): void => {
-  toggle.value = true
-}
-const closeCollapse = (): void => {
-  toggle.value = false
-}
-const emitOpenEvent = () => {
-  emit('open', true)
-}
-const emitCloseEvent = () => {
-  emit('close', false)
-}
-
-/**
- * @TransitionFunctions
- * @param {HTMLElement} el - passed any since transition handlers don't accept HTMLElement (accepts Element)
- */
-const onEnter = (el: any) => {
-  el.style.height = 'auto'
-  el.style.opacity = '0'
-  const endWidth = getComputedStyle(el).height
-  el.style.height = '0px'
-  el.offsetHeight // force repaint
-  el.style.height = endWidth
-  el.style.opacity = '1'
-}
-const onAfterEnter = (el: any) => {
-  el.style.height = 'auto'
-  el.style.opacity = '1'
-}
-const onLeave = (el: any) => {
-  el.style.height = getComputedStyle(el).height
-  el.offsetHeight // force repaint
-  el.style.height = '0px'
-  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 :accordion="accordion" :visible="toggle" ref="collapseRef">
-    <transition
-      name="collapse"
-      tag="div"
-      @enter="onEnter"
-      @after-enter="onAfterEnter"
-      @leave="onLeave"
-      class="overflow-y-clip"
-    >
-      <div v-show="toggle">
-        <div :class="[className]">
-          <slot />
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.collapse-enter-active,
-.collapse-leave-active {
-  transition-property: height, opacity;
-  transition-duration: 500ms;
-  transition-timing-function: ease;
-}
-</style>

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

@@ -1,55 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    accordion?: string | undefined;
-    className?: string | undefined;
-    visible?: boolean | undefined;
-}>, {
-    className: string;
-    visible: boolean;
-}>, {
-    toggle: () => void;
-    close: () => void;
-    open: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    open: (visible: boolean) => void;
-    close: (visible: boolean) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    accordion?: string | undefined;
-    className?: string | undefined;
-    visible?: boolean | undefined;
-}>, {
-    className: string;
-    visible: boolean;
-}>>> & {
-    onOpen?: ((visible: boolean) => any) | undefined;
-    onClose?: ((visible: boolean) => any) | undefined;
-}, {
-    visible: boolean;
-    className: string;
-}, {}>, 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/composables/index.d.ts

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

package/lib/composables/index.js

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

package/lib/composables/index.ts

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

package/lib/composables/observeVisible.d.ts

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

package/lib/composables/observeVisible.js

@@ -1,24 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -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>;