@bobbykim/manguito-theme 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.18.0](https://github.com/bobbykim89/manguito-component-library/compare/@bobbykim/manguito-theme@0.17.0...@bobbykim/manguito-theme@0.18.0) (2024-04-01)
+
+
+### Features
+
+* **manguito-theme:** update alert component event, update readme files, update story files ([99d4a7e](https://github.com/bobbykim89/manguito-component-library/commit/99d4a7ef192dfb628cf5b37b1cce34bb33aeb4c1))
+* **manguito-theme:** update observeVisibleAttr composable, add alert component ([1629762](https://github.com/bobbykim89/manguito-component-library/commit/16297624b667066bd7076b02001f0ca8db65630d))
+* ready for production ([4e2fc04](https://github.com/bobbykim89/manguito-component-library/commit/4e2fc048edd67791b4e917e0a764f301d4c610cb))
+
+
+
+
+
 # [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)
 
 

package/README.md

@@ -8,6 +8,7 @@ manguito-theme includes basic config for MCL, including type definitions for the
 
 - [Installation](https://manguito-component-library.vercel.app/?path=/docs/introduction-installation--docs)
 - Base Components
+  - [Alert](https://manguito-component-library.vercel.app/?path=/docs/base-base-component-alert-component--alert)
   - [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)

package/index.d.ts

@@ -1,4 +1,5 @@
 import { generateClass } from './lib/theme/generateClass';
+import Alert from './lib/alert/Alert.vue';
 import Collapse from './lib/collapse/Collapse.vue';
 import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
 import DropdownContent from './lib/dropdown/DropdownContent.vue';
@@ -9,5 +10,5 @@ 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 { Alert, Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };
 export default generateClass;

package/index.js

@@ -1,6 +1,7 @@
 // generate class function
 import { generateClass } from './lib/theme/generateClass';
 // base components
+import Alert from './lib/alert/Alert.vue';
 import Collapse from './lib/collapse/Collapse.vue';
 import DropdownContainer from './lib/dropdown/DropdownContainer.vue';
 import DropdownContent from './lib/dropdown/DropdownContent.vue';
@@ -14,5 +15,5 @@ export * from './lib/directives';
 export * from './lib/header/index.types';
 export * from './lib/theme/theme.types';
 // export components
-export { Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };
+export { Alert, Collapse, DropdownContainer, DropdownContent, HeaderHorizontal, HeaderVertical, Modal, Sidebar, };
 export default generateClass;

package/index.ts

@@ -1,6 +1,7 @@
 // generate class function
 import { generateClass } from './lib/theme/generateClass'
 // base components
+import Alert from './lib/alert/Alert.vue'
 import Collapse from './lib/collapse/Collapse.vue'
 import DropdownContainer from './lib/dropdown/DropdownContainer.vue'
 import DropdownContent from './lib/dropdown/DropdownContent.vue'
@@ -17,6 +18,7 @@ export * from './lib/theme/theme.types'
 
 // export components
 export {
+  Alert,
   Collapse,
   DropdownContainer,
   DropdownContent,

package/lib/alert/Alert.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { ColorPalette } from '../../'
+import generateClass from '../../'
+const props = withDefaults(
+  defineProps<{
+    color?: ColorPalette
+    rounded?: boolean
+    shadow?: boolean
+    show?: boolean
+    dismissible?: boolean
+  }>(),
+  {
+    color: 'danger',
+    rounded: true,
+    shadow: true,
+    show: false,
+    dismissible: false,
+  }
+)
+
+const slots = defineSlots<{
+  default: any
+}>()
+
+const emit = defineEmits<{
+  (e: 'close', event: Event): void
+}>()
+
+const showAlert = ref<boolean>(props.show)
+const componentClass = computed<string>(() => {
+  const { color, rounded, shadow } = props
+  const classArray: string[] = [generateClass('BGCOLOR', color)]
+  if (rounded) {
+    classArray.push('rounded-md')
+  }
+  if (shadow) {
+    classArray.push('drop-shadow-md')
+  }
+  return classArray.join(' ')
+})
+const handleClose = (e: Event) => {
+  showAlert.value = false
+  emit('close', e)
+}
+const closeAlert = () => {
+  showAlert.value = false
+}
+watch(
+  () => props.show,
+  (newValue) => {
+    showAlert.value = newValue
+  }
+)
+defineExpose({
+  close: closeAlert,
+})
+</script>
+
+<template>
+  <div
+    v-if="showAlert"
+    role="alert"
+    aria-live="polite"
+    aria-atomic="true"
+    class="py-[0.75rem] px-[1.25rem] relative"
+    :class="[componentClass]"
+  >
+    <div class="w-full flex justify-between gap-2xs">
+      <div class="w-full">
+        <slot></slot>
+      </div>
+      <button
+        v-if="dismissible"
+        @click="handleClose"
+        class="flex items-center opacity-60 hover:opacity-40 transition-opacity duration-300 ease-linear"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 384 512"
+          fill="currentColor"
+          class="h-xs"
+        >
+          <!-- !Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+          <path
+            d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>

package/lib/alert/Alert.vue.d.ts

@@ -0,0 +1,65 @@
+import type { ColorPalette } from '../../';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    color?: ColorPalette | undefined;
+    rounded?: boolean | undefined;
+    shadow?: boolean | undefined;
+    show?: boolean | undefined;
+    dismissible?: boolean | undefined;
+}>, {
+    color: string;
+    rounded: boolean;
+    shadow: boolean;
+    show: boolean;
+    dismissible: boolean;
+}>, {
+    close: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: Event) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    color?: ColorPalette | undefined;
+    rounded?: boolean | undefined;
+    shadow?: boolean | undefined;
+    show?: boolean | undefined;
+    dismissible?: boolean | undefined;
+}>, {
+    color: string;
+    rounded: boolean;
+    shadow: boolean;
+    show: boolean;
+    dismissible: boolean;
+}>>> & {
+    onClose?: ((event: Event) => any) | undefined;
+}, {
+    color: ColorPalette;
+    shadow: boolean;
+    rounded: boolean;
+    show: boolean;
+    dismissible: boolean;
+}, {}>, 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/collapse/Collapse.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Transition, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { Transition, ref, watch } from 'vue'
 import { observeVisibleAttr } from '../composables'
 
 const props = withDefaults(
@@ -67,7 +67,7 @@ const onLeave = (el: any) => {
 const handleVisibility = (visible: boolean = false) => {
   toggle.value = visible
 }
-const observer = observeVisibleAttr(handleVisibility)
+observeVisibleAttr(collapseRef, handleVisibility)
 
 watch(
   () => props.visible,
@@ -87,14 +87,6 @@ defineExpose({
   close: closeCollapse,
   open: openCollapse,
 })
-onMounted(() => {
-  if (collapseRef.value) {
-    observer.observe(collapseRef.value, { attributes: true })
-  }
-})
-onBeforeUnmount(() => {
-  observer.disconnect()
-})
 </script>
 
 <template>

package/lib/composables/observeVisible.d.ts

@@ -1 +1,6 @@
-export declare const observeVisibleAttr: (fn: (...args: any[]) => void) => MutationObserver;
+import type { Ref } from 'vue';
+export declare const observeVisibleAttr: (el: Ref, fn: (...args: any[]) => void) => {
+    isSupported: import("vue").ComputedRef<boolean>;
+    stop: () => void;
+    takeRecords: () => MutationRecord[] | undefined;
+};

package/lib/composables/observeVisible.js

@@ -1,15 +1,16 @@
-export const observeVisibleAttr = (fn) => {
-    const observer = new MutationObserver((mutations) => {
+import { useMutationObserver } from '@vueuse/core';
+export const observeVisibleAttr = (el, fn) => {
+    return useMutationObserver(el, (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 mutationAttr = mutation.attributeName;
             const mutationTarget = mutation.target;
             if (mutationType === 'attributes') {
                 changed = true;
             }
-            else if (mutationAttribute === 'visible') {
+            else if (mutationAttr === 'visible') {
                 changed = true;
             }
             if (changed) {
@@ -19,6 +20,5 @@ export const observeVisibleAttr = (fn) => {
                 fn(visibleAttr);
             }
         }
-    });
-    return observer;
+    }, { attributes: true });
 };

package/lib/composables/observeVisible.ts

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

package/lib/modal/Modal.vue

@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-  Transition,
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue'
+import { Transition, computed, ref, watch } from 'vue'
 import type { ColorPalette, VerticalAlignment } from '../../'
 import generateClass, { vClickOutside } from '../../'
 import { observeVisibleAttr } from '../composables'
@@ -92,7 +85,8 @@ const onAfterLeave = () => {
 const handleVisibility = (visible: boolean = false) => {
   toggle.value = visible
 }
-const observer = observeVisibleAttr(handleVisibility)
+
+observeVisibleAttr(modalRef, handleVisibility)
 
 watch(
   () => props.visible,
@@ -112,14 +106,6 @@ defineExpose({
   close: closeModal,
   open: openModal,
 })
-onMounted(() => {
-  if (modalRef.value) {
-    observer.observe(modalRef.value, { attributes: true })
-  }
-})
-onBeforeUnmount(() => {
-  observer.disconnect()
-})
 </script>
 
 <template>

package/lib/sidebar/Sidebar.vue

@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-  Transition,
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue'
+import { Transition, computed, ref, watch } from 'vue'
 import type { ColorPalette, DirectionX } from '../../'
 import generateClass, { vClickOutside } from '../../'
 import { observeVisibleAttr } from '../composables'
@@ -101,7 +94,8 @@ const onAfterLeave = () => {
 const handleVisibility = (visible: boolean = false) => {
   toggle.value = visible
 }
-const observer = observeVisibleAttr(handleVisibility)
+
+observeVisibleAttr(sidebarRef, handleVisibility)
 
 watch(
   () => props.visible,
@@ -121,14 +115,6 @@ defineExpose({
   open: openSidebar,
   close: closeSidebar,
 })
-onMounted(() => {
-  if (sidebarRef.value) {
-    observer.observe(sidebarRef.value, { attributes: true })
-  }
-})
-onBeforeUnmount(() => {
-  observer.disconnect()
-})
 </script>
 
 <template>

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

@@ -55,12 +55,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     visible: boolean;
     className: string;
     color: ColorPalette;
+    width: string | number;
     titleColor: ColorPalette;
     noBackdrop: boolean;
     noHeader: boolean;
     backdropColor: ColorPalette;
     placement: DirectionX;
-    width: string | number;
 }, {}>, Readonly<{
     header(props: {
         close: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobbykim/manguito-theme",
-  "version": "0.17.0",
+  "version": "0.18.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",
@@ -30,5 +30,5 @@
     "url": "https://github.com/bobbykim89/manguito-component-library.git"
   },
   "license": "MIT",
-  "gitHead": "f4be01699f747aba1f831a1f796f8e41e6fcd676"
+  "gitHead": "969800695a9a902bc9d0c19ad6ab002caace8061"
 }