yuyeon 0.0.35 → 0.0.37

package/lib/components/dialog/YDialog.mjs

@@ -1,11 +1,13 @@
 import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, defineComponent, getCurrentInstance, ref, shallowRef, watch } from 'vue';
+import { useModelDuplex } from "../../composables/communication.mjs";
 import { useRender } from "../../composables/component.mjs";
+import { toStyleSizeValue } from "../../util/index.mjs";
 import { bindClasses } from "../../util/vue-component.mjs";
 import { YCard } from "../card/index.mjs";
 import { YLayer } from "../layer/index.mjs";
+import { useActiveStack } from "../layer/active-stack.mjs";
 import "./YDialog.scss";
-import { useModelDuplex } from "../../composables/communication.mjs";
 export const YDialog = defineComponent({
   name: 'YDialog',
   components: {
@@ -16,13 +18,25 @@ export const YDialog = defineComponent({
     modelValue: {
       type: Boolean
     },
-    modal: {
-      type: Boolean
+    persistent: {
+      type: Boolean,
+      default: true
     },
     dialogClasses: {
       type: [Array, String, Object]
     },
-    disabled: Boolean
+    closeClickScrim: {
+      type: Boolean
+    },
+    disabled: Boolean,
+    maximized: Boolean,
+    scrim: {
+      type: Boolean,
+      default: true
+    },
+    offset: {
+      type: String
+    }
   },
   emits: ['update:modelValue'],
   setup(props, _ref) {
@@ -30,21 +44,42 @@ export const YDialog = defineComponent({
       emit,
       slots
     } = _ref;
+    const vm = getCurrentInstance();
+    const $yuyeon = vm?.appContext.config.globalProperties.$yuyeon;
     const active = useModelDuplex(props);
     const classes = computed(() => {
       const boundClasses = bindClasses(props.dialogClasses);
       return {
         ...boundClasses,
-        'y-dialog': true
+        'y-dialog': true,
+        'y-dialog--maximized': props.maximized
+      };
+    });
+    const computedOffset = computed(() => {
+      return {
+        paddingTop: toStyleSizeValue(props.offset)
       };
     });
-    const layer = ref();
+    const styles = computed(() => {
+      return {
+        ...computedOffset.value
+      };
+    });
+    const layer$ = ref();
+    const {
+      children
+    } = useActiveStack(layer$, active, shallowRef(true));
     function onFocusin(e) {
       const prevTarget = e.relatedTarget;
       const target = e.target;
-      if (prevTarget !== target && layer.value?.content$ && ![document, layer.value?.content$].includes(target) && !layer.value?.content$.contains(target)) {
+      function testChildrenContains(layers) {
+        return layers.some(layer => {
+          return !layer.content$?.contains(target);
+        });
+      }
+      if (prevTarget !== target && layer$.value?.content$ && ![document, layer$.value?.content$].includes(target) && !layer$.value?.content$.contains(target) && !testChildrenContains(children.value)) {
         const focusableSelector = 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
-        const focusables = [...layer.value.content$.querySelectorAll(focusableSelector)].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]'));
+        const focusables = [...layer$.value.content$.querySelectorAll(focusableSelector)].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]'));
         if (!focusables.length) return;
         const firstChild = focusables[0];
         const lastChild = focusables[focusables.length - 1];
@@ -61,6 +96,39 @@ export const YDialog = defineComponent({
     function dismantleFocusTrap() {
       document.removeEventListener('focusin', onFocusin);
     }
+    const tempScrollTop = ref(0);
+    const tempScrollLeft = ref(0);
+    function preventInteractionBackground(toggle) {
+      const root$ = $yuyeon.root;
+      const activeLayers = layer$.value?.getActiveLayers();
+      if (toggle) {
+        const filtered = activeLayers?.filter(layer => {
+          return layer.ctx.modal;
+        });
+        if (filtered && !filtered.length) {
+          const scrollTop = document.documentElement.scrollTop;
+          const scrollLeft = document.documentElement.scrollLeft;
+          tempScrollTop.value = scrollTop;
+          tempScrollLeft.value = scrollLeft;
+          document.documentElement.classList.add('y-dialog--prevent-scroll');
+          root$.classList.add('y-dialog--virtual-scroll');
+          root$.style.top = toStyleSizeValue(-1 * scrollTop) || '';
+          root$.style.left = toStyleSizeValue(-1 * scrollLeft) || '';
+        }
+      } else {
+        const filtered = activeLayers?.filter(layer => {
+          return !layer$.value?.isMe(layer) && layer.ctx.modal;
+        });
+        if (filtered && !filtered.length) {
+          root$.classList.remove('y-dialog--virtual-scroll');
+          document.documentElement.classList.remove('y-dialog--prevent-scroll');
+          root$.style.top = '';
+          root$.style.left = '';
+          document.documentElement.scrollTop = tempScrollTop.value;
+          document.documentElement.scrollLeft = tempScrollLeft.value;
+        }
+      }
+    }
     function onUpdate(v) {
       active.value = v;
     }
@@ -70,7 +138,7 @@ export const YDialog = defineComponent({
         active.value = !currentActive;
       }
     }
-    watch(() => layer.value?.baseEl, (neo, old) => {
+    watch(() => layer$.value?.baseEl, (neo, old) => {
       if (neo) {
         neo.addEventListener('click', onClick);
       } else if (old) {
@@ -79,6 +147,7 @@ export const YDialog = defineComponent({
     });
     watch(() => active.value, neo => {
       neo ? installFocusTrap() : dismantleFocusTrap();
+      preventInteractionBackground(neo);
     }, {
       immediate: true
     });
@@ -86,10 +155,12 @@ export const YDialog = defineComponent({
       return _createVNode(_Fragment, null, [_createVNode(YLayer, {
         "modelValue": active.value,
         "onUpdate:modelValue": $event => active.value = $event,
-        "scrim": true,
         "classes": classes.value,
-        "modal": props.modal,
-        "ref": layer
+        "content-styles": styles.value,
+        "scrim": props.scrim,
+        "modal": true,
+        "close-click-scrim": props.closeClickScrim,
+        "ref": layer$
       }, {
         default: function () {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -102,7 +173,7 @@ export const YDialog = defineComponent({
     });
     return {
       active,
-      layer,
+      layer: layer$,
       classes
     };
   }

package/lib/components/dialog/YDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDialog.mjs","names":["computed","defineComponent","ref","watch","useRender","bindClasses","YCard","YLayer","useModelDuplex","YDialog","name","components","props","modelValue","type","Boolean","modal","dialogClasses","Array","String","Object","disabled","emits","setup","_ref","emit","slots","active","classes","boundClasses","layer","onFocusin","e","prevTarget","relatedTarget","target","value","content$","document","includes","contains","focusableSelector","focusables","querySelectorAll","filter","el","hasAttribute","matches","length","firstChild","lastChild","focus","installFocusTrap","addEventListener","dismantleFocusTrap","removeEventListener","onUpdate","v","onClick","currentActive","baseEl","neo","old","immediate","_createVNode","_Fragment","$event","default","_len","arguments","args","_key","base"],"sources":["../../../src/components/dialog/YDialog.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, defineComponent, ref, watch } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { bindClasses } from '../../util/vue-component';\nimport { YCard } from '../card';\nimport { YLayer } from '../layer';\n\nimport './YDialog.scss';\nimport { useModelDuplex } from \"../../composables/communication\";\n\nexport const YDialog = defineComponent({\n  name: 'YDialog',\n  components: {\n    YLayer,\n    YCard,\n  },\n  props: {\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n    },\n    modal: {\n      type: Boolean,\n    },\n    dialogClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    disabled: Boolean,\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const active = useModelDuplex(props);\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.dialogClasses);\n      return {\n        ...boundClasses,\n        'y-dialog': true,\n      };\n    });\n\n    const layer = ref<typeof YLayer>();\n\n    function onFocusin(e: FocusEvent) {\n      const prevTarget = e.relatedTarget as HTMLElement | null;\n      const target = e.target as HTMLElement | null;\n      if (\n        prevTarget !== target &&\n        layer.value?.content$ &&\n        ![document, layer.value?.content$].includes(target) &&\n        !layer.value?.content$.contains(target)\n      ) {\n        const focusableSelector =\n          'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n        const focusables = [\n          ...layer.value.content$.querySelectorAll(focusableSelector),\n        ].filter(\n          (el) =>\n            !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]'),\n        ) as HTMLElement[];\n        if (!focusables.length) return;\n        const firstChild = focusables[0];\n        const lastChild = focusables[focusables.length - 1];\n        if (firstChild === lastChild) {\n          lastChild.focus();\n        } else {\n          firstChild.focus();\n        }\n      }\n    }\n\n    function installFocusTrap() {\n      document.addEventListener('focusin', onFocusin);\n    }\n\n    function dismantleFocusTrap() {\n      document.removeEventListener('focusin', onFocusin);\n    }\n\n    function onUpdate(v: boolean) {\n      active.value = v;\n    }\n\n    function onClick(e: MouseEvent) {\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    watch(() => layer.value?.baseEl, (neo, old) => {\n      if (neo) {\n        neo.addEventListener('click', onClick);\n      } else if (old) {\n        old.removeEventListener('click', onClick);\n      }\n    });\n\n    watch(\n      () => active.value,\n      (neo) => {\n        neo ? installFocusTrap() : dismantleFocusTrap();\n      },\n      { immediate: true },\n    );\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            v-model={active.value}\n            scrim\n            classes={classes.value}\n            modal={props.modal}\n            ref={layer}\n          >\n            {{\n              default: (...args: any[]) => slots.default?.(...args),\n              base: slots.base\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      active,\n      layer,\n      classes,\n    };\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"YDialog.mjs","names":["computed","defineComponent","getCurrentInstance","ref","shallowRef","watch","useModelDuplex","useRender","toStyleSizeValue","bindClasses","YCard","YLayer","useActiveStack","YDialog","name","components","props","modelValue","type","Boolean","persistent","default","dialogClasses","Array","String","Object","closeClickScrim","disabled","maximized","scrim","offset","emits","setup","_ref","emit","slots","vm","$yuyeon","appContext","config","globalProperties","active","classes","boundClasses","computedOffset","paddingTop","styles","value","layer$","children","onFocusin","e","prevTarget","relatedTarget","target","testChildrenContains","layers","some","layer","content$","contains","document","includes","focusableSelector","focusables","querySelectorAll","filter","el","hasAttribute","matches","length","firstChild","lastChild","focus","installFocusTrap","addEventListener","dismantleFocusTrap","removeEventListener","tempScrollTop","tempScrollLeft","preventInteractionBackground","toggle","root$","root","activeLayers","getActiveLayers","filtered","ctx","modal","scrollTop","documentElement","scrollLeft","classList","add","style","top","left","isMe","remove","onUpdate","v","onClick","currentActive","baseEl","neo","old","immediate","_createVNode","_Fragment","$event","_len","arguments","args","_key","base"],"sources":["../../../src/components/dialog/YDialog.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue';\n\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { toStyleSizeValue } from '../../util';\nimport { bindClasses } from '../../util/vue-component';\nimport { YCard } from '../card';\nimport { YLayer } from '../layer';\nimport { useActiveStack } from '../layer/active-stack';\n\nimport './YDialog.scss';\n\nexport const YDialog = defineComponent({\n  name: 'YDialog',\n  components: {\n    YLayer,\n    YCard,\n  },\n  props: {\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n    },\n    persistent: {\n      type: Boolean as PropType<boolean>,\n      default: true,\n    },\n    dialogClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    closeClickScrim: {\n      type: Boolean as PropType<boolean>,\n    },\n    disabled: Boolean as PropType<boolean>,\n    maximized: Boolean as PropType<boolean>,\n    scrim: {\n      type: Boolean as PropType<boolean>,\n      default: true,\n    },\n    offset: {\n      type: String as PropType<string>,\n    },\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const vm = getCurrentInstance();\n    const $yuyeon = vm?.appContext.config.globalProperties.$yuyeon;\n    const active = useModelDuplex(props);\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.dialogClasses);\n      return {\n        ...boundClasses,\n        'y-dialog': true,\n        'y-dialog--maximized': props.maximized,\n      };\n    });\n\n    const computedOffset = computed(() => {\n      return {\n        paddingTop: toStyleSizeValue(props.offset),\n      };\n    });\n\n    const styles = computed(() => {\n      return {\n        ...computedOffset.value,\n      };\n    });\n\n    const layer$ = ref<typeof YLayer>();\n    const { children } = useActiveStack(layer$, active, shallowRef(true));\n    function onFocusin(e: FocusEvent) {\n      const prevTarget = e.relatedTarget as HTMLElement | null;\n      const target = e.target as HTMLElement | null;\n\n      function testChildrenContains(layers: YLayer[]) {\n        return layers.some((layer) => {\n          return !layer.content$?.contains(target);\n        });\n      }\n\n      if (\n        prevTarget !== target &&\n        layer$.value?.content$ &&\n        ![document, layer$.value?.content$].includes(target) &&\n        !layer$.value?.content$.contains(target) &&\n        !testChildrenContains(children.value)\n      ) {\n        const focusableSelector =\n          'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n        const focusables = [\n          ...layer$.value.content$.querySelectorAll(focusableSelector),\n        ].filter(\n          (el) =>\n            !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]'),\n        ) as HTMLElement[];\n        if (!focusables.length) return;\n        const firstChild = focusables[0];\n        const lastChild = focusables[focusables.length - 1];\n        if (firstChild === lastChild) {\n          lastChild.focus();\n        } else {\n          firstChild.focus();\n        }\n      }\n    }\n\n    function installFocusTrap() {\n      document.addEventListener('focusin', onFocusin);\n    }\n\n    function dismantleFocusTrap() {\n      document.removeEventListener('focusin', onFocusin);\n    }\n\n    const tempScrollTop = ref(0);\n    const tempScrollLeft = ref(0);\n\n    function preventInteractionBackground(toggle: boolean) {\n      const root$ = $yuyeon.root as HTMLElement;\n      const activeLayers = layer$.value?.getActiveLayers();\n      if (toggle) {\n        const filtered = activeLayers?.filter((layer: any) => {\n          return layer.ctx.modal;\n        });\n        if (filtered && !filtered.length) {\n          const scrollTop = document.documentElement.scrollTop;\n          const scrollLeft = document.documentElement.scrollLeft;\n          tempScrollTop.value = scrollTop;\n          tempScrollLeft.value = scrollLeft;\n          document.documentElement.classList.add('y-dialog--prevent-scroll');\n          root$.classList.add('y-dialog--virtual-scroll');\n          root$.style.top = toStyleSizeValue(-1 * scrollTop) || '';\n          root$.style.left = toStyleSizeValue(-1 * scrollLeft) || '';\n        }\n      } else {\n        const filtered = activeLayers?.filter((layer: any) => {\n          return !layer$.value?.isMe(layer) && layer.ctx.modal;\n        });\n        if (filtered && !filtered.length) {\n          root$.classList.remove('y-dialog--virtual-scroll');\n          document.documentElement.classList.remove('y-dialog--prevent-scroll');\n          root$.style.top = '';\n          root$.style.left = '';\n          document.documentElement.scrollTop = tempScrollTop.value;\n          document.documentElement.scrollLeft = tempScrollLeft.value;\n        }\n      }\n    }\n\n    function onUpdate(v: boolean) {\n      active.value = v;\n    }\n\n    function onClick(e: MouseEvent) {\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    watch(\n      () => layer$.value?.baseEl,\n      (neo, old) => {\n        if (neo) {\n          neo.addEventListener('click', onClick);\n        } else if (old) {\n          old.removeEventListener('click', onClick);\n        }\n      },\n    );\n\n    watch(\n      () => active.value,\n      (neo) => {\n        neo ? installFocusTrap() : dismantleFocusTrap();\n        preventInteractionBackground(neo);\n      },\n      { immediate: true },\n    );\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            v-model={active.value}\n            classes={classes.value}\n            content-styles={styles.value}\n            scrim={props.scrim}\n            modal\n            close-click-scrim={props.closeClickScrim}\n            ref={layer$}\n          >\n            {{\n              default: (...args: any[]) => slots.default?.(...args),\n              base: slots.base,\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      active,\n      layer: layer$,\n      classes,\n    };\n  },\n});\n"],"mappings":"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"}

package/lib/components/dialog/YDialog.scss

@@ -4,7 +4,7 @@
   backdrop-filter: blur(0.8px) saturate(0.4);
 
   .y-layer {
-    &__content > .y-card {
+    &__content > div {
       position: relative;
     }
   }
@@ -14,4 +14,34 @@
       position: relative;
     }
   }
+
+  &--maximized {
+    backdrop-filter: none;
+    align-items: unset;
+    justify-content: unset;
+
+    .y-layer {
+      &__content {
+        contain: none;
+        position: relative;
+        width: 100%;
+        max-height: 100dvh;
+        background: transparent;
+        pointer-events: all;
+        overflow-y: scroll;
+      }
+      &__content > div {
+        border-radius: 0;
+        width: 100%;
+        min-height: 100%;
+      }
+    }
+  }
+}
+
+.y-dialog--prevent-scroll {
+  overflow: hidden !important;
+}
+.y-dialog--virtual-scroll {
+  position: fixed !important;
 }

package/lib/components/layer/YLayer.mjs

@@ -1,5 +1,5 @@
 import { mergeProps as _mergeProps, withDirectives as _withDirectives, resolveDirective as _resolveDirective, vShow as _vShow, createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { Teleport, Transition, computed, defineComponent, mergeProps, reactive, ref, shallowRef, toRef, watchEffect } from 'vue';
+import { Teleport, Transition, computed, defineComponent, getCurrentInstance, mergeProps, reactive, ref, shallowRef, toRef, watchEffect } from 'vue';
 import { useRender } from "../../composables/component.mjs";
 import { pressCoordinateProps, useCoordinate } from "../../composables/coordinate/index.mjs";
 import { pressDimensionPropsOptions, useDimension } from "../../composables/dimension.mjs";
@@ -17,6 +17,9 @@ export const pressYLayerProps = propsFactory({
   scrim: {
     type: Boolean
   },
+  scrimOpacity: {
+    type: Number
+  },
   eager: {
     type: Boolean
   },
@@ -29,7 +32,6 @@ export const pressYLayerProps = propsFactory({
   closeClickScrim: {
     type: Boolean
   },
-  modal: Boolean,
   contentStyles: {
     type: Object,
     default: () => {}
@@ -65,6 +67,7 @@ export const YLayer = defineComponent({
     ComplementClick
   },
   props: {
+    modal: Boolean,
     ...pressYLayerProps()
   },
   emits: {
@@ -79,6 +82,7 @@ export const YLayer = defineComponent({
       attrs,
       slots
     } = _ref;
+    const vm = getCurrentInstance();
     const base$ = ref();
     const scrim$ = ref();
     const content$ = ref();
@@ -88,7 +92,9 @@ export const YLayer = defineComponent({
       themeClasses
     } = useLocalTheme(props);
     const {
-      layerGroup
+      layerGroup,
+      layerGroupState,
+      getActiveLayers
     } = useLayerGroup();
     const {
       polyTransitionBindProps
@@ -112,7 +118,6 @@ export const YLayer = defineComponent({
     } = useLazy(toRef(props, 'eager'), active);
     const rendered = computed(() => !disabled.value && (lazyValue.value || active.value));
     const {
-      coordinate,
       coordinateStyles,
       updateCoordinate
     } = useCoordinate(props, {
@@ -199,7 +204,12 @@ export const YLayer = defineComponent({
       active,
       onAfterUpdate,
       updateCoordinate,
-      hovered
+      hovered,
+      modal: computed(() => props.modal),
+      getActiveLayers,
+      isMe: vnode => {
+        return vnode === vm;
+      }
     });
     useRender(() => {
       const slotBase = slots.base?.({
@@ -233,6 +243,9 @@ export const YLayer = defineComponent({
         }, {
           default: () => [active.value && props.scrim && _createVNode("div", {
             "class": "y-layer__scrim",
+            "style": {
+              '--y-layer-scrim-opacity': props.scrimOpacity
+            },
             "onClick": onClickScrim,
             "ref": "scrim$"
           }, null)]
@@ -271,7 +284,9 @@ export const YLayer = defineComponent({
       content$,
       baseEl,
       polyTransitionBindProps,
-      coordinateStyles
+      coordinateStyles,
+      layerGroupState,
+      getActiveLayers
     };
   }
 });

package/lib/components/layer/YLayer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","defineComponent","mergeProps","reactive","ref","shallowRef","toRef","watchEffect","useRender","pressCoordinateProps","useCoordinate","pressDimensionPropsOptions","useDimension","useLayerGroup","pressThemePropsOptions","useLocalTheme","useLazy","PolyTransition","polyTransitionPropOptions","usePolyTransition","ComplementClick","bindClasses","propsFactory","pressYLayerProps","modelValue","type","Boolean","scrim","eager","classes","Array","String","Object","contentClasses","closeClickScrim","modal","contentStyles","default","disabled","openOnHover","openDelay","Number","closeDelay","YLayer","name","inheritAttrs","components","directives","props","emits","value","mouseEvent","afterLeave","setup","_ref","emit","expose","attrs","slots","base$","scrim$","content$","baseSlot","baseEl","themeClasses","layerGroup","polyTransitionBindProps","dimensionStyles","active","get","set","v","finish","lazyValue","onAfterUpdate","rendered","coordinate","coordinateStyles","updateCoordinate","contentEl","onClickComplementLayer","target","closeConditional","hovered","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","baseFromSlotEl","el","base","$el","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","onMouseenter","event","onMouseleave","slotBase","class","_createVNode","_Fragment","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type { CSSProperties, PropType } from 'vue';\r\nimport {\r\n  Teleport,\r\n  Transition,\r\n  computed,\r\n  defineComponent,\r\n  mergeProps,\r\n  reactive,\r\n  ref,\r\n  shallowRef,\r\n  toRef,\r\n  watchEffect, watch,\r\n} from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport {\r\n  pressCoordinateProps,\r\n  useCoordinate,\r\n} from '../../composables/coordinate';\r\nimport {\r\n  pressDimensionPropsOptions,\r\n  useDimension,\r\n} from '../../composables/dimension';\r\nimport { useLayerGroup } from '../../composables/layer-group';\r\nimport { pressThemePropsOptions, useLocalTheme } from '../../composables/theme';\r\nimport { useLazy } from '../../composables/timing';\r\nimport {\r\n  PolyTransition,\r\n  polyTransitionPropOptions,\r\n  usePolyTransition,\r\n} from '../../composables/transition';\r\nimport {\r\n  ComplementClick,\r\n  ComplementClickBindingOptions,\r\n} from '../../directives/complement-click';\r\nimport { bindClasses, propsFactory } from '../../util/vue-component';\r\n\r\nimport './YLayer.scss';\r\n\r\nexport const pressYLayerProps = propsFactory(\r\n  {\r\n    modelValue: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    scrim: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    eager: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    classes: {\r\n      type: [Array, String, Object] as PropType<\r\n        string[] | string | Record<string, any>\r\n      >,\r\n    },\r\n    contentClasses: {\r\n      type: [Array, String, Object] as PropType<\r\n        string[] | string | Record<string, any>\r\n      >,\r\n    },\r\n    closeClickScrim: {\r\n      type: Boolean as PropType<boolean>,\r\n    },\r\n    modal: Boolean as PropType<boolean>,\r\n    contentStyles: {\r\n      type: Object as PropType<CSSProperties>,\r\n      default: () => {},\r\n    },\r\n    disabled: {\r\n      type: Boolean as PropType<boolean>,\r\n      default: false,\r\n    },\r\n    openOnHover: {\r\n      type: Boolean as PropType<boolean>,\r\n      default: false,\r\n    },\r\n    openDelay: {\r\n      type: Number as PropType<number>,\r\n      default: 200,\r\n    },\r\n    closeDelay: {\r\n      type: Number as PropType<number>,\r\n      default: 200,\r\n    },\r\n    ...pressThemePropsOptions(),\r\n    ...polyTransitionPropOptions,\r\n    ...pressCoordinateProps(),\r\n    ...pressDimensionPropsOptions(),\r\n  },\r\n  'YLayer',\r\n);\r\n\r\nexport const YLayer = defineComponent({\r\n  name: 'YLayer',\r\n  inheritAttrs: false,\r\n  components: {\r\n    PolyTransition,\r\n  },\r\n  directives: {\r\n    ComplementClick,\r\n  },\r\n  props: {\r\n    ...pressYLayerProps(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: boolean) => true,\r\n    'click:complement': (mouseEvent: MouseEvent) => true,\r\n    afterLeave: () => true,\r\n  },\r\n  setup(props, { emit, expose, attrs, slots }) {\r\n    const base$ = ref();\r\n    const scrim$ = ref<HTMLElement>();\r\n    const content$ = ref<HTMLElement>();\r\n    const baseSlot = ref();\r\n    const baseEl = ref<HTMLElement>();\r\n\r\n    const { themeClasses } = useLocalTheme(props);\r\n    const { layerGroup } = useLayerGroup();\r\n    const { polyTransitionBindProps } = usePolyTransition(props);\r\n    const { dimensionStyles } = useDimension(props);\r\n    const active = computed<boolean>({\r\n      get: (): boolean => {\r\n        return !!props.modelValue;\r\n      },\r\n      set: (v: boolean) => {\r\n        emit('update:modelValue', v);\r\n      },\r\n    });\r\n    const finish = shallowRef(false);\r\n\r\n    const disabled = toRef(props, 'disabled');\r\n    const { lazyValue, onAfterUpdate } = useLazy(\r\n      toRef(props, 'eager'),\r\n      active,\r\n    );\r\n    const rendered = computed<boolean>(\r\n      () => !disabled.value && (lazyValue.value || active.value),\r\n    );\r\n\r\n    const { coordinate, coordinateStyles, updateCoordinate } = useCoordinate(\r\n      props,\r\n      { contentEl: content$, baseEl, active },\r\n    );\r\n\r\n    function onClickComplementLayer(mouseEvent: MouseEvent) {\r\n      emit('click:complement', mouseEvent);\r\n      if (!props.modal) {\r\n        if (\r\n          scrim$.value !== null &&\r\n          scrim$.value === mouseEvent.target &&\r\n          props.closeClickScrim\r\n        ) {\r\n          active.value = false;\r\n        }\r\n      } else {\r\n        // TODO: shrug ani\r\n      }\r\n    }\r\n\r\n    function closeConditional(): boolean {\r\n      return (\r\n        (!props.openOnHover || (props.openOnHover && !hovered.value)) &&\r\n        active.value\r\n      ); // TODO: && groupTopLevel.value;\r\n    }\r\n\r\n    const complementClickOption = reactive<ComplementClickBindingOptions>({\r\n      handler: onClickComplementLayer,\r\n      determine: closeConditional,\r\n      include: () => [baseEl.value],\r\n    });\r\n\r\n    function onAfterEnter() {\r\n      finish.value = true;\r\n    }\r\n\r\n    function onAfterLeave() {\r\n      onAfterUpdate();\r\n      finish.value = false;\r\n      emit('afterLeave');\r\n    }\r\n\r\n    function onClickScrim() {\r\n      if (props.closeClickScrim) {\r\n        active.value = false;\r\n      }\r\n    }\r\n\r\n    const baseFromSlotEl = computed(() => {\r\n      return baseSlot.value?.[0]?.el;\r\n    });\r\n\r\n    watchEffect(() => {\r\n      if (!base$.value) {\r\n        baseEl.value = baseFromSlotEl.value;\r\n        return;\r\n      }\r\n      const base = base$.value;\r\n      baseEl.value = base$.value?.$el ? base$.value?.$el : base;\r\n    });\r\n\r\n    const computedStyle = computed(() => {\r\n      return {\r\n        zIndex: '2000',\r\n      };\r\n    });\r\n\r\n    const computedClass = computed<Record<string, boolean>>(() => {\r\n      const { classes } = props;\r\n      const boundClasses = bindClasses(classes);\r\n      return {\r\n        ...boundClasses,\r\n        'y-layer--active': !!active.value,\r\n      };\r\n    });\r\n\r\n    const computedContentClasses = computed<Record<string, boolean>>(() => {\r\n      const boundClasses = bindClasses(props.contentClasses);\r\n      return {\r\n        ...boundClasses,\r\n      };\r\n    });\r\n\r\n    const hovered = ref(false);\r\n\r\n    function onMouseenter(event: Event) {\r\n      hovered.value = true;\r\n    }\r\n\r\n    function onMouseleave(event: Event) {\r\n      hovered.value = false;\r\n    }\r\n\r\n    expose({\r\n      scrim$,\r\n      base$,\r\n      content$,\r\n      baseEl,\r\n      active,\r\n      onAfterUpdate,\r\n      updateCoordinate,\r\n      hovered,\r\n    });\r\n\r\n    useRender(() => {\r\n      const slotBase = slots.base?.({\r\n        active: active.value,\r\n        props: mergeProps({\r\n          ref: base$,\r\n          class: {\r\n            'y-layer-base': true,\r\n            'y-layer-base--active': active.value,\r\n          },\r\n        }),\r\n      });\r\n      baseSlot.value = slotBase;\r\n      return (\r\n        <>\r\n          {slotBase}\r\n          <Teleport disabled={!layerGroup.value} to={layerGroup.value as any}>\r\n            {rendered.value && (\r\n              <div\r\n                class={{\r\n                  'y-layer': true,\r\n                  'y-layer--finish': finish.value,\r\n                  ...computedClass.value,\r\n                  [themeClasses.value ?? '']: true,\r\n                }}\r\n                onMouseenter={onMouseenter}\r\n                onMouseleave={onMouseleave}\r\n                style={computedStyle.value}\r\n                {...attrs}\r\n              >\r\n                <Transition name=\"fade\" appear>\r\n                  {active.value && props.scrim && (\r\n                    <div\r\n                      class=\"y-layer__scrim\"\r\n                      onClick={onClickScrim}\r\n                      ref=\"scrim$\"\r\n                    ></div>\r\n                  )}\r\n                </Transition>\r\n                <PolyTransition\r\n                  onAfterEnter={onAfterEnter}\r\n                  onAfterLeave={onAfterLeave}\r\n                  appear\r\n                  {...polyTransitionBindProps.value}\r\n                >\r\n                  <div\r\n                    v-show={active.value}\r\n                    v-complement-click={{ ...complementClickOption }}\r\n                    class={{\r\n                      'y-layer__content': true,\r\n                      ...computedContentClasses.value,\r\n                    }}\r\n                    style={[\r\n                      {\r\n                        ...dimensionStyles.value,\r\n                        ...coordinateStyles.value,\r\n                        ...props.contentStyles,\r\n                      },\r\n                    ]}\r\n                    ref={content$}\r\n                  >\r\n                    {slots.default?.({ active: active.value })}\r\n                  </div>\r\n                </PolyTransition>\r\n              </div>\r\n            )}\r\n          </Teleport>\r\n        </>\r\n      );\r\n    });\r\n\r\n    return {\r\n      complementClickOption,\r\n      layerGroup,\r\n      active,\r\n      rendered,\r\n      lazyValue,\r\n      onAfterUpdate: onAfterUpdate as () => void,\r\n      scrim$,\r\n      content$,\r\n      baseEl,\r\n      polyTransitionBindProps,\r\n      coordinateStyles,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YLayer = InstanceType<typeof YLayer>;\r\n"],"mappings":"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"}
+{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","defineComponent","getCurrentInstance","mergeProps","reactive","ref","shallowRef","toRef","watchEffect","useRender","pressCoordinateProps","useCoordinate","pressDimensionPropsOptions","useDimension","useLayerGroup","pressThemePropsOptions","useLocalTheme","useLazy","PolyTransition","polyTransitionPropOptions","usePolyTransition","ComplementClick","bindClasses","propsFactory","pressYLayerProps","modelValue","type","Boolean","scrim","scrimOpacity","Number","eager","classes","Array","String","Object","contentClasses","closeClickScrim","contentStyles","default","disabled","openOnHover","openDelay","closeDelay","YLayer","name","inheritAttrs","components","directives","props","modal","emits","value","mouseEvent","afterLeave","setup","_ref","emit","expose","attrs","slots","vm","base$","scrim$","content$","baseSlot","baseEl","themeClasses","layerGroup","layerGroupState","getActiveLayers","polyTransitionBindProps","dimensionStyles","active","get","set","v","finish","lazyValue","onAfterUpdate","rendered","coordinateStyles","updateCoordinate","contentEl","onClickComplementLayer","target","closeConditional","hovered","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","baseFromSlotEl","el","base","$el","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","onMouseenter","event","onMouseleave","isMe","vnode","slotBase","class","_createVNode","_Fragment","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type { CSSProperties, PropType, ComponentInternalInstance } from 'vue';\nimport {\n  Teleport,\n  Transition,\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  mergeProps,\n  reactive,\n  ref,\n  shallowRef,\n  toRef,\n  watchEffect,\n} from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport {\n  pressCoordinateProps,\n  useCoordinate,\n} from '../../composables/coordinate';\nimport {\n  pressDimensionPropsOptions,\n  useDimension,\n} from '../../composables/dimension';\nimport { useLayerGroup } from '../../composables/layer-group';\nimport { pressThemePropsOptions, useLocalTheme } from '../../composables/theme';\nimport { useLazy } from '../../composables/timing';\nimport {\n  PolyTransition,\n  polyTransitionPropOptions,\n  usePolyTransition,\n} from '../../composables/transition';\nimport {\n  ComplementClick,\n  ComplementClickBindingOptions,\n} from '../../directives/complement-click';\nimport { bindClasses, propsFactory } from '../../util/vue-component';\n\nimport './YLayer.scss';\n\nexport const pressYLayerProps = propsFactory(\n  {\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n    },\n    scrim: {\n      type: Boolean as PropType<boolean>,\n    },\n    scrimOpacity: {\n      type: Number as PropType<number>,\n    },\n    eager: {\n      type: Boolean as PropType<boolean>,\n    },\n    classes: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    contentClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    closeClickScrim: {\n      type: Boolean as PropType<boolean>,\n    },\n\n    contentStyles: {\n      type: Object as PropType<CSSProperties>,\n      default: () => {},\n    },\n    disabled: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    openOnHover: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    openDelay: {\n      type: Number as PropType<number>,\n      default: 200,\n    },\n    closeDelay: {\n      type: Number as PropType<number>,\n      default: 200,\n    },\n    ...pressThemePropsOptions(),\n    ...polyTransitionPropOptions,\n    ...pressCoordinateProps(),\n    ...pressDimensionPropsOptions(),\n  },\n  'YLayer',\n);\n\nexport const YLayer = defineComponent({\n  name: 'YLayer',\n  inheritAttrs: false,\n  components: {\n    PolyTransition,\n  },\n  directives: {\n    ComplementClick,\n  },\n  props: {\n    modal: Boolean as PropType<boolean>,\n    ...pressYLayerProps(),\n  },\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n    'click:complement': (mouseEvent: MouseEvent) => true,\n    afterLeave: () => true,\n  },\n  setup(props, { emit, expose, attrs, slots }) {\n    const vm = getCurrentInstance();\n    const base$ = ref();\n    const scrim$ = ref<HTMLElement>();\n    const content$ = ref<HTMLElement>();\n    const baseSlot = ref();\n    const baseEl = ref<HTMLElement>();\n\n    const { themeClasses } = useLocalTheme(props);\n    const { layerGroup, layerGroupState, getActiveLayers } = useLayerGroup();\n    const { polyTransitionBindProps } = usePolyTransition(props);\n    const { dimensionStyles } = useDimension(props);\n    const active = computed<boolean>({\n      get: (): boolean => {\n        return !!props.modelValue;\n      },\n      set: (v: boolean) => {\n        emit('update:modelValue', v);\n      },\n    });\n    const finish = shallowRef(false);\n\n    const disabled = toRef(props, 'disabled');\n    const { lazyValue, onAfterUpdate } = useLazy(toRef(props, 'eager'), active);\n    const rendered = computed<boolean>(\n      () => !disabled.value && (lazyValue.value || active.value),\n    );\n\n    const { coordinateStyles, updateCoordinate } = useCoordinate(props, {\n      contentEl: content$,\n      baseEl,\n      active,\n    });\n\n    function onClickComplementLayer(mouseEvent: MouseEvent) {\n      emit('click:complement', mouseEvent);\n      if (!props.modal) {\n        if (\n          scrim$.value !== null &&\n          scrim$.value === mouseEvent.target &&\n          props.closeClickScrim\n        ) {\n          active.value = false;\n        }\n      } else {\n        // TODO: shrug ani\n      }\n    }\n\n    function closeConditional(): boolean {\n      return (\n        (!props.openOnHover || (props.openOnHover && !hovered.value)) &&\n        active.value\n      ); // TODO: && groupTopLevel.value;\n    }\n\n    const complementClickOption = reactive<ComplementClickBindingOptions>({\n      handler: onClickComplementLayer,\n      determine: closeConditional,\n      include: () => [baseEl.value],\n    });\n\n    function onAfterEnter() {\n      finish.value = true;\n    }\n\n    function onAfterLeave() {\n      onAfterUpdate();\n      finish.value = false;\n      emit('afterLeave');\n    }\n\n    function onClickScrim() {\n      if (props.closeClickScrim) {\n        active.value = false;\n      }\n    }\n\n    const baseFromSlotEl = computed(() => {\n      return baseSlot.value?.[0]?.el;\n    });\n\n    watchEffect(() => {\n      if (!base$.value) {\n        baseEl.value = baseFromSlotEl.value;\n        return;\n      }\n      const base = base$.value;\n      baseEl.value = base$.value?.$el ? base$.value?.$el : base;\n    });\n\n    const computedStyle = computed(() => {\n      return {\n        zIndex: '2000',\n      };\n    });\n\n    const computedClass = computed<Record<string, boolean>>(() => {\n      const { classes } = props;\n      const boundClasses = bindClasses(classes);\n      return {\n        ...boundClasses,\n        'y-layer--active': !!active.value,\n      };\n    });\n\n    const computedContentClasses = computed<Record<string, boolean>>(() => {\n      const boundClasses = bindClasses(props.contentClasses);\n      return {\n        ...boundClasses,\n      };\n    });\n\n    const hovered = ref(false);\n\n    function onMouseenter(event: Event) {\n      hovered.value = true;\n    }\n\n    function onMouseleave(event: Event) {\n      hovered.value = false;\n    }\n\n    expose({\n      scrim$,\n      base$,\n      content$,\n      baseEl,\n      active,\n      onAfterUpdate,\n      updateCoordinate,\n      hovered,\n      modal: computed(() => props.modal),\n      getActiveLayers,\n      isMe: (vnode: ComponentInternalInstance) => {\n        return vnode === vm;\n      },\n    });\n\n    useRender(() => {\n      const slotBase = slots.base?.({\n        active: active.value,\n        props: mergeProps({\n          ref: base$,\n          class: {\n            'y-layer-base': true,\n            'y-layer-base--active': active.value,\n          },\n        }),\n      });\n      baseSlot.value = slotBase;\n      return (\n        <>\n          {slotBase}\n          <Teleport disabled={!layerGroup.value} to={layerGroup.value as any}>\n            {rendered.value && (\n              <div\n                class={{\n                  'y-layer': true,\n                  'y-layer--finish': finish.value,\n                  ...computedClass.value,\n                  [themeClasses.value ?? '']: true,\n                }}\n                onMouseenter={onMouseenter}\n                onMouseleave={onMouseleave}\n                style={computedStyle.value}\n                {...attrs}\n              >\n                <Transition name=\"fade\" appear>\n                  {active.value && props.scrim && (\n                    <div\n                      class=\"y-layer__scrim\"\n                      style={{ '--y-layer-scrim-opacity': props.scrimOpacity }}\n                      onClick={onClickScrim}\n                      ref=\"scrim$\"\n                    ></div>\n                  )}\n                </Transition>\n                <PolyTransition\n                  onAfterEnter={onAfterEnter}\n                  onAfterLeave={onAfterLeave}\n                  appear\n                  {...polyTransitionBindProps.value}\n                >\n                  <div\n                    v-show={active.value}\n                    v-complement-click={{ ...complementClickOption }}\n                    class={{\n                      'y-layer__content': true,\n                      ...computedContentClasses.value,\n                    }}\n                    style={[\n                      {\n                        ...dimensionStyles.value,\n                        ...coordinateStyles.value,\n                        ...props.contentStyles,\n                      },\n                    ]}\n                    ref={content$}\n                  >\n                    {slots.default?.({ active: active.value })}\n                  </div>\n                </PolyTransition>\n              </div>\n            )}\n          </Teleport>\n        </>\n      );\n    });\n\n    return {\n      complementClickOption,\n      layerGroup,\n      active,\n      rendered,\n      lazyValue,\n      onAfterUpdate: onAfterUpdate as () => void,\n      scrim$,\n      content$,\n      baseEl,\n      polyTransitionBindProps,\n      coordinateStyles,\n      layerGroupState,\n      getActiveLayers,\n    };\n  },\n});\n\nexport type YLayer = InstanceType<typeof YLayer>;\n"],"mappings":"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"}

package/lib/components/layer/YLayer.scss

@@ -8,6 +8,8 @@
 }
 
 .y-layer {
+  --y-layer-scrim-opacity: 0.4;
+
   border-radius: inherit;
   display: flex;
   inset: 0;
@@ -18,9 +20,12 @@
     pointer-events: auto;
     background: rgb(var(--y-layer-scrim, 0, 0, 0));
     border-radius: inherit;
-    inset: 0;
-    opacity: 0.4;
+    opacity: var(--y-layer-scrim-opacity);
     position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
   }
 
   &__content {

package/lib/components/layer/active-stack.mjs

@@ -3,6 +3,7 @@ export const YUYEON_ACTIVE_STACK_KEY = Symbol.for('yuyeon.active-stack');
 export function useActiveStack($el, active, sequential) {
   const parent = inject(YUYEON_ACTIVE_STACK_KEY, null);
   const children = shallowRef([]);
+  const vm = getCurrentInstance();
   function push(instance) {
     children.value.push(instance);
   }
@@ -29,9 +30,9 @@ export function useActiveStack($el, active, sequential) {
   }
   watch(active, neo => {
     if (neo) {
-      parent?.push(getCurrentInstance());
+      parent?.push(vm);
     } else {
-      parent?.pop(getCurrentInstance());
+      parent?.pop(vm);
     }
   });
   provide(YUYEON_ACTIVE_STACK_KEY, {

package/lib/components/layer/active-stack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"active-stack.mjs","names":["getCurrentInstance","inject","provide","shallowRef","watch","watchPostEffect","YUYEON_ACTIVE_STACK_KEY","Symbol","for","useActiveStack","$el","active","sequential","parent","children","push","instance","value","pop","index","findIndex","child","splice","clear","bubble","length","neo"],"sources":["../../../src/components/layer/active-stack.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue';\r\nimport {\r\n  getCurrentInstance,\r\n  inject,\r\n  provide,\r\n  shallowRef,\r\n  watch,\r\n  watchPostEffect,\r\n} from 'vue';\r\n\r\nimport { YLayer } from './YLayer';\r\n\r\ninterface ActiveStackProvide {\r\n  push: (instance: any) => void;\r\n  pop: (instance?: any) => void;\r\n  clear: () => void;\r\n  $el: Ref<typeof YLayer | undefined>\r\n}\r\n\r\nexport const YUYEON_ACTIVE_STACK_KEY: InjectionKey<ActiveStackProvide> =\r\n  Symbol.for('yuyeon.active-stack');\r\n\r\nexport function useActiveStack(\r\n  $el: Ref<typeof YLayer | undefined>,\r\n  active: Ref<boolean>,\r\n  sequential?: Ref<boolean | undefined>,\r\n) {\r\n  const parent = inject(YUYEON_ACTIVE_STACK_KEY, null);\r\n  const children = shallowRef<any[]>([]);\r\n\r\n  function push(instance: any) {\r\n    children.value.push(instance);\r\n  }\r\n\r\n  function pop(instance?: any) {\r\n    if (instance) {\r\n      const index = children.value.findIndex((child) => child === instance);\r\n      if (index > -1) {\r\n        children.value.splice(index, 1);\r\n        return;\r\n      }\r\n    }\r\n    children.value.pop();\r\n  }\r\n\r\n  function clear() {\r\n    active.value = false;\r\n    const bubble = () => {\r\n      if (children.value.length === 0) {\r\n        parent?.clear();\r\n      }\r\n    };\r\n    if (!sequential?.value) {\r\n      watchPostEffect(bubble);\r\n    }\r\n  }\r\n\r\n  watch(active, (neo) => {\r\n    if (neo) {\r\n      parent?.push(getCurrentInstance());\r\n    } else {\r\n      parent?.pop(getCurrentInstance());\r\n    }\r\n  });\r\n\r\n  provide(YUYEON_ACTIVE_STACK_KEY, {\r\n    push,\r\n    pop,\r\n    clear,\r\n    $el,\r\n  });\r\n\r\n  return {\r\n    push,\r\n    pop,\r\n    parent,\r\n    children,\r\n  };\r\n}\r\n"],"mappings":"AACA,SACEA,kBAAkB,EAClBC,MAAM,EACNC,OAAO,EACPC,UAAU,EACVC,KAAK,EACLC,eAAe,QACV,KAAK;AAWZ,OAAO,MAAMC,uBAAyD,GACpEC,MAAM,CAACC,GAAG,CAAC,qBAAqB,CAAC;AAEnC,OAAO,SAASC,cAAcA,CAC5BC,GAAmC,EACnCC,MAAoB,EACpBC,UAAqC,EACrC;EACA,MAAMC,MAAM,GAAGZ,MAAM,CAACK,uBAAuB,EAAE,IAAI,CAAC;EACpD,MAAMQ,QAAQ,GAAGX,UAAU,CAAQ,EAAE,CAAC;EAEtC,SAASY,IAAIA,CAACC,QAAa,EAAE;IAC3BF,QAAQ,CAACG,KAAK,CAACF,IAAI,CAACC,QAAQ,CAAC;EAC/B;EAEA,SAASE,GAAGA,CAACF,QAAc,EAAE;IAC3B,IAAIA,QAAQ,EAAE;MACZ,MAAMG,KAAK,GAAGL,QAAQ,CAACG,KAAK,CAACG,SAAS,CAAEC,KAAK,IAAKA,KAAK,KAAKL,QAAQ,CAAC;MACrE,IAAIG,KAAK,GAAG,CAAC,CAAC,EAAE;QACdL,QAAQ,CAACG,KAAK,CAACK,MAAM,CAACH,KAAK,EAAE,CAAC,CAAC;QAC/B;MACF;IACF;IACAL,QAAQ,CAACG,KAAK,CAACC,GAAG,CAAC,CAAC;EACtB;EAEA,SAASK,KAAKA,CAAA,EAAG;IACfZ,MAAM,CAACM,KAAK,GAAG,KAAK;IACpB,MAAMO,MAAM,GAAGA,CAAA,KAAM;MACnB,IAAIV,QAAQ,CAACG,KAAK,CAACQ,MAAM,KAAK,CAAC,EAAE;QAC/BZ,MAAM,EAAEU,KAAK,CAAC,CAAC;MACjB;IACF,CAAC;IACD,IAAI,CAACX,UAAU,EAAEK,KAAK,EAAE;MACtBZ,eAAe,CAACmB,MAAM,CAAC;IACzB;EACF;EAEApB,KAAK,CAACO,MAAM,EAAGe,GAAG,IAAK;IACrB,IAAIA,GAAG,EAAE;MACPb,MAAM,EAAEE,IAAI,CAACf,kBAAkB,CAAC,CAAC,CAAC;IACpC,CAAC,MAAM;MACLa,MAAM,EAAEK,GAAG,CAAClB,kBAAkB,CAAC,CAAC,CAAC;IACnC;EACF,CAAC,CAAC;EAEFE,OAAO,CAACI,uBAAuB,EAAE;IAC/BS,IAAI;IACJG,GAAG;IACHK,KAAK;IACLb;EACF,CAAC,CAAC;EAEF,OAAO;IACLK,IAAI;IACJG,GAAG;IACHL,MAAM;IACNC;EACF,CAAC;AACH"}
+{"version":3,"file":"active-stack.mjs","names":["getCurrentInstance","inject","provide","shallowRef","watch","watchPostEffect","YUYEON_ACTIVE_STACK_KEY","Symbol","for","useActiveStack","$el","active","sequential","parent","children","vm","push","instance","value","pop","index","findIndex","child","splice","clear","bubble","length","neo"],"sources":["../../../src/components/layer/active-stack.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue';\r\nimport {\r\n  getCurrentInstance,\r\n  inject,\r\n  provide,\r\n  shallowRef,\r\n  watch,\r\n  watchPostEffect,\r\n} from 'vue';\r\n\r\nimport { YLayer } from './YLayer';\r\n\r\ninterface ActiveStackProvide {\r\n  push: (instance: any) => void;\r\n  pop: (instance?: any) => void;\r\n  clear: () => void;\r\n  $el: Ref<typeof YLayer | undefined>\r\n}\r\n\r\nexport const YUYEON_ACTIVE_STACK_KEY: InjectionKey<ActiveStackProvide> =\r\n  Symbol.for('yuyeon.active-stack');\r\n\r\nexport function useActiveStack(\r\n  $el: Ref<typeof YLayer | undefined>,\r\n  active: Ref<boolean>,\r\n  sequential?: Ref<boolean | undefined>,\r\n) {\r\n  const parent = inject(YUYEON_ACTIVE_STACK_KEY, null);\r\n  const children = shallowRef<any[]>([]);\r\n  const vm = getCurrentInstance();\r\n\r\n  function push(instance: any) {\r\n    children.value.push(instance);\r\n  }\r\n\r\n  function pop(instance?: any) {\r\n    if (instance) {\r\n      const index = children.value.findIndex((child) => child === instance);\r\n      if (index > -1) {\r\n        children.value.splice(index, 1);\r\n        return;\r\n      }\r\n    }\r\n    children.value.pop();\r\n  }\r\n\r\n  function clear() {\r\n    active.value = false;\r\n    const bubble = () => {\r\n      if (children.value.length === 0) {\r\n        parent?.clear();\r\n      }\r\n    };\r\n    if (!sequential?.value) {\r\n      watchPostEffect(bubble);\r\n    }\r\n  }\r\n\r\n  watch(active, (neo) => {\r\n    if (neo) {\r\n      parent?.push(vm);\r\n    } else {\r\n      parent?.pop(vm);\r\n    }\r\n  });\r\n\r\n  provide(YUYEON_ACTIVE_STACK_KEY, {\r\n    push,\r\n    pop,\r\n    clear,\r\n    $el,\r\n  });\r\n\r\n  return {\r\n    push,\r\n    pop,\r\n    parent,\r\n    children,\r\n  };\r\n}\r\n"],"mappings":"AACA,SACEA,kBAAkB,EAClBC,MAAM,EACNC,OAAO,EACPC,UAAU,EACVC,KAAK,EACLC,eAAe,QACV,KAAK;AAWZ,OAAO,MAAMC,uBAAyD,GACpEC,MAAM,CAACC,GAAG,CAAC,qBAAqB,CAAC;AAEnC,OAAO,SAASC,cAAcA,CAC5BC,GAAmC,EACnCC,MAAoB,EACpBC,UAAqC,EACrC;EACA,MAAMC,MAAM,GAAGZ,MAAM,CAACK,uBAAuB,EAAE,IAAI,CAAC;EACpD,MAAMQ,QAAQ,GAAGX,UAAU,CAAQ,EAAE,CAAC;EACtC,MAAMY,EAAE,GAAGf,kBAAkB,CAAC,CAAC;EAE/B,SAASgB,IAAIA,CAACC,QAAa,EAAE;IAC3BH,QAAQ,CAACI,KAAK,CAACF,IAAI,CAACC,QAAQ,CAAC;EAC/B;EAEA,SAASE,GAAGA,CAACF,QAAc,EAAE;IAC3B,IAAIA,QAAQ,EAAE;MACZ,MAAMG,KAAK,GAAGN,QAAQ,CAACI,KAAK,CAACG,SAAS,CAAEC,KAAK,IAAKA,KAAK,KAAKL,QAAQ,CAAC;MACrE,IAAIG,KAAK,GAAG,CAAC,CAAC,EAAE;QACdN,QAAQ,CAACI,KAAK,CAACK,MAAM,CAACH,KAAK,EAAE,CAAC,CAAC;QAC/B;MACF;IACF;IACAN,QAAQ,CAACI,KAAK,CAACC,GAAG,CAAC,CAAC;EACtB;EAEA,SAASK,KAAKA,CAAA,EAAG;IACfb,MAAM,CAACO,KAAK,GAAG,KAAK;IACpB,MAAMO,MAAM,GAAGA,CAAA,KAAM;MACnB,IAAIX,QAAQ,CAACI,KAAK,CAACQ,MAAM,KAAK,CAAC,EAAE;QAC/Bb,MAAM,EAAEW,KAAK,CAAC,CAAC;MACjB;IACF,CAAC;IACD,IAAI,CAACZ,UAAU,EAAEM,KAAK,EAAE;MACtBb,eAAe,CAACoB,MAAM,CAAC;IACzB;EACF;EAEArB,KAAK,CAACO,MAAM,EAAGgB,GAAG,IAAK;IACrB,IAAIA,GAAG,EAAE;MACPd,MAAM,EAAEG,IAAI,CAACD,EAAE,CAAC;IAClB,CAAC,MAAM;MACLF,MAAM,EAAEM,GAAG,CAACJ,EAAE,CAAC;IACjB;EACF,CAAC,CAAC;EAEFb,OAAO,CAACI,uBAAuB,EAAE;IAC/BU,IAAI;IACJG,GAAG;IACHK,KAAK;IACLd;EACF,CAAC,CAAC;EAEF,OAAO;IACLM,IAAI;IACJG,GAAG;IACHN,MAAM;IACNC;EACF,CAAC;AACH"}

package/lib/components/menu/YMenu.mjs

@@ -53,7 +53,7 @@ export const YMenu = defineComponent({
       emit,
       expose
     } = _ref;
-    const el$ = ref();
+    const layer$ = ref();
     const classes = computed(() => {
       const boundClasses = bindClasses(props.menuClasses);
       return {
@@ -70,11 +70,11 @@ export const YMenu = defineComponent({
         if (!(v && props.disabled)) model.value = v;
       }
     });
-    const hovered = computed(() => !!el$.value?.hovered);
+    const hovered = computed(() => !!layer$.value?.hovered);
     const {
       children,
       parent
-    } = useActiveStack(el$, active, toRef(props, 'preventCloseBubble'));
+    } = useActiveStack(layer$, active, toRef(props, 'preventCloseBubble'));
     const {
       startOpenDelay,
       startCloseDelay
@@ -122,8 +122,9 @@ export const YMenu = defineComponent({
       }
       if (active.value) {
         const parentContent = parent?.$el.value?.content$;
+        const parentModal = parent?.$el.value?.modal;
         active.value = false;
-        if (!(parentContent && !hasElementMouseEvent(e, parentContent))) {
+        if (!(parentContent && !hasElementMouseEvent(e, parentContent)) && !parentModal) {
           parent?.clear();
         }
       }
@@ -136,7 +137,7 @@ export const YMenu = defineComponent({
       el.removeEventListener('mouseenter', onMouseenter);
       el.removeEventListener('mouseleave', onMouseleave);
     }
-    watch(() => el$.value?.baseEl, (neo, old) => {
+    watch(() => layer$.value?.baseEl, (neo, old) => {
       if (neo) {
         bindHover(neo);
         neo.addEventListener('click', onClick);
@@ -153,7 +154,7 @@ export const YMenu = defineComponent({
     });
     useRender(() => {
       return _createVNode(_Fragment, null, [_createVNode(YLayer, _mergeProps({
-        "ref": el$,
+        "ref": layer$,
         "transition": props.transition,
         "onClick:complement": onComplementClick,
         "onAfterLeave": () => emit('afterLeave')
@@ -184,7 +185,7 @@ export const YMenu = defineComponent({
       })]);
     });
     return {
-      el$,
+      el$: layer$,
       classes
     };
   }