yuyeon 0.0.12 → 0.0.13

package/lib/components/dialog/YDialog.mjs

@@ -5,6 +5,7 @@ import { bindClasses } from "../../util/vue-component.mjs";
 import { YCard } from "../card/index.mjs";
 import { YLayer } from "../layer/index.mjs";
 import "./YDialog.scss";
+import { useModelDuplex } from "../../composables/communication.mjs";
 export const YDialog = defineComponent({
   name: 'YDialog',
   components: {
@@ -15,12 +16,13 @@ export const YDialog = defineComponent({
     modelValue: {
       type: Boolean
     },
+    persistent: {
+      type: Boolean
+    },
     dialogClasses: {
       type: [Array, String, Object]
     },
-    persistent: {
-      type: Boolean
-    }
+    disabled: Boolean
   },
   emits: ['update:modelValue'],
   setup(props, _ref) {
@@ -28,14 +30,7 @@ export const YDialog = defineComponent({
       emit,
       slots
     } = _ref;
-    const active = computed({
-      get: () => {
-        return !!props.modelValue;
-      },
-      set: v => {
-        emit('update:modelValue', v);
-      }
-    });
+    const active = useModelDuplex(props);
     const classes = computed(() => {
       const boundClasses = bindClasses(props.dialogClasses);
       return {
@@ -69,15 +64,28 @@ export const YDialog = defineComponent({
     function onUpdate(v) {
       active.value = v;
     }
+    function onClick(e) {
+      const currentActive = active.value;
+      if (!props.disabled) {
+        active.value = !currentActive;
+      }
+    }
+    watch(() => layer.value?.baseEl, (neo, old) => {
+      if (neo) {
+        neo.addEventListener('click', onClick);
+      } else if (old) {
+        old.removeEventListener('click', onClick);
+      }
+    });
     watch(() => active.value, neo => {
       neo ? installFocusTrap() : dismantleFocusTrap();
     }, {
       immediate: true
     });
     useRender(() => {
-      return _createVNode(_Fragment, null, [slots.base?.(), _createVNode(YLayer, {
-        "model-value": active.value,
-        "onUpdate:modelValue": onUpdate,
+      return _createVNode(_Fragment, null, [_createVNode(YLayer, {
+        "modelValue": active.value,
+        "onUpdate:modelValue": $event => active.value = $event,
         "scrim": true,
         "classes": classes.value,
         "persistent": props.persistent,
@@ -88,7 +96,8 @@ export const YDialog = defineComponent({
             args[_key] = arguments[_key];
           }
           return slots.default?.(...args);
-        }
+        },
+        base: slots.base
       })]);
     });
     return {

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

@@ -1 +1 @@
-{"version":3,"file":"YDialog.mjs","names":["computed","defineComponent","ref","watch","useRender","bindClasses","YCard","YLayer","YDialog","name","components","props","modelValue","type","Boolean","dialogClasses","Array","String","Object","persistent","emits","setup","_ref","emit","slots","active","get","set","v","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","neo","immediate","_createVNode","_Fragment","base","default","_len","arguments","args","_key"],"sources":["../../../src/components/dialog/YDialog.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, provide, 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';\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    dialogClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    persistent: {\n      type: Boolean,\n    }\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const active = computed({\n      get: (): boolean => {\n        return !!props.modelValue;\n      },\n      set: (v: boolean) => {\n        emit('update:modelValue', v);\n      },\n    });\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    watch(\n      () => active.value,\n      (neo) => {\n        neo ? installFocusTrap() : dismantleFocusTrap();\n      },\n      { immediate: true },\n    );\n\n    useRender(() => {\n      return (\n        <>\n          {slots.base?.()}\n          <YLayer\n            model-value={active.value}\n            onUpdate:modelValue={onUpdate}\n            scrim\n            classes={classes.value}\n            persistent={props.persistent}\n            ref={layer}\n          >\n            {{\n              default: (...args: any[]) => slots.default?.(...args),\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","ref","watch","useRender","bindClasses","YCard","YLayer","useModelDuplex","YDialog","name","components","props","modelValue","type","Boolean","persistent","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    persistent: {\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            persistent={props.persistent}\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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"}

package/lib/components/dialog/YDialog.scss

@@ -2,4 +2,16 @@
   justify-content: center;
   align-items: center;
   backdrop-filter: blur(0.8px) saturate(0.4);
+
+  .y-layer {
+    &__content > .y-card {
+      position: relative;
+    }
+  }
+
+  &.y-layer--finish {
+    .y-layer__content > .y-card > .y-card__footer {
+      position: relative;
+    }
+  }
 }

package/lib/components/dropdown/YDropdown.mjs

@@ -0,0 +1,7 @@
+import { defineComponent } from 'vue';
+import { propsFactory } from "../../util/vue-component.mjs";
+export const pressYDropdownPropsOptions = propsFactory({}, 'YDropdown');
+export const YDropdown = defineComponent({
+  name: 'YDropdown'
+});
+//# sourceMappingURL=YDropdown.mjs.map

package/lib/components/dropdown/YDropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YDropdown.mjs","names":["defineComponent","propsFactory","pressYDropdownPropsOptions","YDropdown","name"],"sources":["../../../src/components/dropdown/YDropdown.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { propsFactory } from \"../../util/vue-component\";\n\nexport const pressYDropdownPropsOptions = propsFactory({}, 'YDropdown');\n\nexport const YDropdown = defineComponent({\n  name: 'YDropdown',\n});\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAC7BC,YAAY;AAErB,OAAO,MAAMC,0BAA0B,GAAGD,YAAY,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC;AAEvE,OAAO,MAAME,SAAS,GAAGH,eAAe,CAAC;EACvCI,IAAI,EAAE;AACR,CAAC,CAAC"}

package/lib/components/dropdown/index.mjs

@@ -0,0 +1,2 @@
+export * from "./YDropdown.mjs";
+//# sourceMappingURL=index.mjs.map

package/lib/components/dropdown/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/dropdown/index.ts"],"sourcesContent":["export * from './YDropdown';\r\n"],"mappings":""}

package/lib/components/layer/YLayer.mjs

@@ -1,12 +1,44 @@
-import { mergeProps as _mergeProps, withDirectives as _withDirectives, resolveDirective as _resolveDirective, vShow as _vShow, createVNode as _createVNode } from "vue";
-import { Teleport, Transition, computed, defineComponent, reactive, ref, toRef } from 'vue';
+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, toRef, watchEffect, shallowRef } from "vue";
 import { useRender } from "../../composables/component.mjs";
 import { useLayerGroup } from "../../composables/layer-group.mjs";
 import { useLazy } from "../../composables/timing.mjs";
 import { PolyTransition, polyTransitionPropOptions, usePolyTransition } from "../../composables/transition.mjs";
 import { ComplementClick } from "../../directives/complement-click/index.mjs";
-import { bindClasses } from "../../util/vue-component.mjs";
+import { bindClasses, propsFactory } from "../../util/vue-component.mjs";
 import "./YLayer.scss";
+import { pressCoordinateProps, useCoordinate } from "../../composables/coordinate/index.mjs";
+export const pressYLayerProps = propsFactory({
+  modelValue: {
+    type: Boolean
+  },
+  scrim: {
+    type: Boolean
+  },
+  eager: {
+    type: Boolean
+  },
+  classes: {
+    type: [Array, String, Object]
+  },
+  contentClasses: {
+    type: [Array, String, Object]
+  },
+  closeClickScrim: {
+    type: Boolean
+  },
+  persistent: Boolean,
+  contentStyles: {
+    type: Object,
+    default: () => {}
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  ...polyTransitionPropOptions,
+  ...pressCoordinateProps()
+}, 'YLayer');
 export const YLayer = defineComponent({
   name: 'YLayer',
   inheritAttrs: false,
@@ -17,38 +49,12 @@ export const YLayer = defineComponent({
     ComplementClick
   },
   props: {
-    modelValue: {
-      type: Boolean
-    },
-    scrim: {
-      type: Boolean
-    },
-    eager: {
-      type: Boolean
-    },
-    classes: {
-      type: [Array, String, Object]
-    },
-    contentClasses: {
-      type: [Array, String, Object]
-    },
-    closeClickScrim: {
-      type: Boolean
-    },
-    persistent: Boolean,
-    contentStyles: {
-      type: Object,
-      default: () => {}
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    ...polyTransitionPropOptions
+    ...pressYLayerProps()
   },
   emits: {
     'update:modelValue': value => true,
-    'click:complement': mouseEvent => true
+    'click:complement': mouseEvent => true,
+    'afterLeave': () => true
   },
   setup(props, _ref) {
     let {
@@ -57,6 +63,12 @@ export const YLayer = defineComponent({
       attrs,
       slots
     } = _ref;
+    const el$ = ref();
+    const base$ = ref();
+    const scrim$ = ref();
+    const content$ = ref();
+    const baseSlot = ref();
+    const baseEl = ref();
     const {
       layerGroup
     } = useLayerGroup();
@@ -71,14 +83,22 @@ export const YLayer = defineComponent({
         emit('update:modelValue', v);
       }
     });
+    const finish = shallowRef(false);
     const disabled = toRef(props, 'disabled');
     const {
       lazyValue,
       onAfterUpdate
     } = useLazy(!!props.eager, active);
     const rendered = computed(() => !disabled.value && (lazyValue.value || active.value));
-    const scrim$ = ref();
-    const content$ = ref();
+    const {
+      coordinate,
+      coordinateStyles,
+      updateCoordinate
+    } = useCoordinate(props, {
+      contentEl: content$,
+      baseEl,
+      active
+    });
     function onClickComplementLayer(mouseEvent) {
       emit('click:complement', mouseEvent);
       if (!props.persistent) {
@@ -96,27 +116,32 @@ export const YLayer = defineComponent({
     const complementClickOption = reactive({
       handler: onClickComplementLayer,
       determine: closeConditional,
-      include: () => [
-        // activatorEl.value
-      ]
-    });
-    expose({
-      scrim$,
-      content$,
-      active,
-      onAfterUpdate
+      include: () => []
     });
     function onAfterEnter() {
-      // console.log('after')
+      finish.value = true;
     }
     function onAfterLeave() {
       onAfterUpdate();
+      finish.value = false;
+      emit('afterLeave');
     }
     function onClickScrim() {
       if (props.closeClickScrim) {
         active.value = false;
       }
     }
+    const baseFromSlotEl = computed(() => {
+      return baseSlot.value?.[0]?.el;
+    });
+    watchEffect(() => {
+      if (!base$.value) {
+        baseEl.value = baseFromSlotEl.value;
+        return;
+      }
+      const base = base$.value;
+      baseEl.value = base$.value?.$el ? base$.value?.$el : base;
+    });
     const computedStyle = computed(() => {
       return {
         zIndex: '2000'
@@ -138,14 +163,35 @@ export const YLayer = defineComponent({
         ...boundClasses
       };
     });
+    expose({
+      scrim$,
+      base$,
+      content$,
+      baseEl,
+      active,
+      onAfterUpdate,
+      updateCoordinate
+    });
     useRender(() => {
-      return _createVNode(Teleport, {
+      const slotBase = slots.base?.({
+        active: active.value,
+        props: mergeProps({
+          ref: base$,
+          class: {
+            'y-layer-base': true,
+            'y-layer-base--active': active.value
+          }
+        })
+      });
+      baseSlot.value = slotBase;
+      return _createVNode(_Fragment, null, [slotBase, _createVNode(Teleport, {
         "disabled": !layerGroup.value,
         "to": layerGroup.value
       }, {
         default: () => [rendered.value && _createVNode("div", _mergeProps({
           "class": {
             'y-layer': true,
+            'y-layer--finish': finish.value,
             ...computedClass.value
           },
           "style": computedStyle.value
@@ -168,15 +214,18 @@ export const YLayer = defineComponent({
               'y-layer__content': true,
               ...computedContentClasses.value
             },
-            "style": props.contentStyles,
-            "ref": "content$"
+            "style": [{
+              ...coordinateStyles.value,
+              ...props.contentStyles
+            }],
+            "ref": content$
           }, [slots.default?.({
             active: active.value
           })]), [[_vShow, active.value], [_resolveDirective("complement-click"), {
             ...complementClickOption
           }]])]
         })])]
-      });
+      })]);
     });
     return {
       complementClickOption,
@@ -186,7 +235,8 @@ export const YLayer = defineComponent({
       onAfterUpdate: onAfterUpdate,
       scrim$,
       content$,
-      polyTransitionBindProps
+      polyTransitionBindProps,
+      coordinateStyles
     };
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","defineComponent","reactive","ref","toRef","useRender","useLayerGroup","useLazy","PolyTransition","polyTransitionPropOptions","usePolyTransition","ComplementClick","bindClasses","YLayer","name","inheritAttrs","components","directives","props","modelValue","type","Boolean","scrim","eager","classes","Array","String","Object","contentClasses","closeClickScrim","persistent","contentStyles","default","disabled","emits","value","mouseEvent","setup","_ref","emit","expose","attrs","slots","layerGroup","polyTransitionBindProps","active","get","set","v","lazyValue","onAfterUpdate","rendered","scrim$","content$","onClickComplementLayer","target","closeConditional","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","_createVNode","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  Prop,\n  PropType,\n  Teleport,\n  Transition,\n  computed,\n  defineComponent,\n  reactive,\n  ref,\n  toRef,\n} from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { useLayerGroup } from '../../composables/layer-group';\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 } from '../../util/vue-component';\n\nimport './YLayer.scss';\n\nexport const YLayer = defineComponent({\n  name: 'YLayer',\n  inheritAttrs: false,\n  components: {\n    PolyTransition,\n  },\n  directives: {\n    ComplementClick,\n  },\n  props: {\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n    },\n    scrim: {\n      type: Boolean as PropType<boolean>,\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    persistent: Boolean as PropType<boolean>,\n    contentStyles: {\n      type: Object as PropType<CSSProperties>,\n      default: () => {},\n    },\n    disabled: {\n      type: Boolean as PropType<boolean>,\n      default: false,\n    },\n    ...polyTransitionPropOptions,\n  },\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n    'click:complement': (mouseEvent: MouseEvent) => true,\n  },\n  setup(props, { emit, expose, attrs, slots }) {\n    const { layerGroup } = useLayerGroup();\n    const { polyTransitionBindProps } = usePolyTransition(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 disabled = toRef(props, 'disabled');\n    const { lazyValue, onAfterUpdate } = useLazy(!!props.eager, active);\n    const rendered = computed<boolean>(\n      () => !disabled.value && (lazyValue.value || active.value),\n    );\n    const scrim$ = ref<HTMLElement>();\n    const content$ = ref<HTMLElement>();\n\n    function onClickComplementLayer(mouseEvent: MouseEvent) {\n      emit('click:complement', mouseEvent);\n      if (!props.persistent) {\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 active.value; // TODO: && groupTopLevel.value;\n    }\n\n    const complementClickOption = reactive<ComplementClickBindingOptions>({\n      handler: onClickComplementLayer,\n      determine: closeConditional,\n      include: () => [\n        // activatorEl.value\n      ],\n    });\n\n    expose({\n      scrim$,\n      content$,\n      active,\n      onAfterUpdate,\n    });\n\n    function onAfterEnter() {\n      // console.log('after')\n    }\n\n    function onAfterLeave() {\n      onAfterUpdate();\n    }\n\n    function onClickScrim() {\n      if (props.closeClickScrim) {\n        active.value = false;\n      }\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    useRender(() => {\n      return (\n        <Teleport disabled={!layerGroup.value} to={layerGroup.value as any}>\n          {rendered.value && (\n            <div\n              class={{ 'y-layer': true, ...computedClass.value }}\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                    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={props.contentStyles}\n                  ref=\"content$\"\n                >\n                  {slots.default?.({ active: active.value })}\n                </div>\n              </PolyTransition>\n            </div>\n          )}\n        </Teleport>\n      );\n    });\n\n    return {\n      complementClickOption,\n      layerGroup,\n      active,\n      rendered,\n      onAfterUpdate: onAfterUpdate as () => void,\n      scrim$,\n      content$,\n      polyTransitionBindProps,\n    };\n  },\n});\n\nexport type YLayer = InstanceType<typeof YLayer>;\n"],"mappings":"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"}
+{"version":3,"file":"YLayer.mjs","names":["Teleport","Transition","computed","defineComponent","mergeProps","reactive","ref","toRef","watchEffect","shallowRef","useRender","useLayerGroup","useLazy","PolyTransition","polyTransitionPropOptions","usePolyTransition","ComplementClick","bindClasses","propsFactory","pressCoordinateProps","useCoordinate","pressYLayerProps","modelValue","type","Boolean","scrim","eager","classes","Array","String","Object","contentClasses","closeClickScrim","persistent","contentStyles","default","disabled","YLayer","name","inheritAttrs","components","directives","props","emits","value","mouseEvent","afterLeave","setup","_ref","emit","expose","attrs","slots","el$","base$","scrim$","content$","baseSlot","baseEl","layerGroup","polyTransitionBindProps","active","get","set","v","finish","lazyValue","onAfterUpdate","rendered","coordinate","coordinateStyles","updateCoordinate","contentEl","onClickComplementLayer","target","closeConditional","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","baseFromSlotEl","el","base","$el","computedStyle","zIndex","computedClass","boundClasses","computedContentClasses","slotBase","class","_createVNode","_Fragment","_mergeProps","_withDirectives","_vShow","_resolveDirective"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type { CSSProperties, PropType } from 'vue';\nimport {\n  Teleport,\n  Transition,\n  computed,\n  defineComponent,\n  mergeProps,\n  nextTick,\n  reactive,\n  ref,\n  toRef,\n  watch,\n  watchEffect, shallowRef\n} from \"vue\";\n\nimport { useRender } from '../../composables/component';\nimport { useLayerGroup } from '../../composables/layer-group';\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';\nimport { pressCoordinateProps, useCoordinate } from \"../../composables/coordinate\";\n\nexport const pressYLayerProps = propsFactory({\n  modelValue: {\n    type: Boolean as PropType<boolean>,\n  },\n  scrim: {\n    type: Boolean as PropType<boolean>,\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  persistent: Boolean as PropType<boolean>,\n  contentStyles: {\n    type: Object as PropType<CSSProperties>,\n    default: () => {},\n  },\n  disabled: {\n    type: Boolean as PropType<boolean>,\n    default: false,\n  },\n  ...polyTransitionPropOptions,\n  ...pressCoordinateProps(),\n}, 'YLayer');\n\nexport const YLayer = defineComponent({\n  name: 'YLayer',\n  inheritAttrs: false,\n  components: {\n    PolyTransition,\n  },\n  directives: {\n    ComplementClick,\n  },\n  props: {\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 el$ = ref<typeof YLayer>();\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 { layerGroup } = useLayerGroup();\n    const { polyTransitionBindProps } = usePolyTransition(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(!!props.eager, active);\n    const rendered = computed<boolean>(\n      () => !disabled.value && (lazyValue.value || active.value),\n    );\n\n\n    const { coordinate, coordinateStyles, updateCoordinate } = useCoordinate(\n      props,\n      { contentEl: content$, baseEl, active },\n    );\n\n    function onClickComplementLayer(mouseEvent: MouseEvent) {\n      emit('click:complement', mouseEvent);\n      if (!props.persistent) {\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 active.value; // TODO: && groupTopLevel.value;\n    }\n\n    const complementClickOption = reactive<ComplementClickBindingOptions>({\n      handler: onClickComplementLayer,\n      determine: closeConditional,\n      include: () => [],\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    expose({\n      scrim$,\n      base$,\n      content$,\n      baseEl,\n      active,\n      onAfterUpdate,\n      updateCoordinate,\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={{ 'y-layer': true, 'y-layer--finish': finish.value, ...computedClass.value }}\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                      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={[{...coordinateStyles.value, ...props.contentStyles}]}\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      onAfterUpdate: onAfterUpdate as () => void,\n      scrim$,\n      content$,\n      polyTransitionBindProps,\n      coordinateStyles,\n    };\n  },\n});\n\nexport type YLayer = InstanceType<typeof YLayer>;\n"],"mappings":"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"}

package/lib/components/menu/YMenu.mjs

@@ -1,13 +1,13 @@
-import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { computed, defineComponent, mergeProps, nextTick, ref, toRef, watch, watchEffect } from 'vue';
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { computed, defineComponent, ref, watch } from 'vue';
 import { useModelDuplex } from "../../composables/communication.mjs";
 import { useRender } from "../../composables/component.mjs";
+import { pressCoordinateProps } from "../../composables/coordinate/index.mjs";
 import { polyTransitionPropOptions } from "../../composables/transition.mjs";
 import { toKebabCase } from "../../util/string.mjs";
-import { bindClasses } from "../../util/vue-component.mjs";
+import { bindClasses, chooseProps } from "../../util/vue-component.mjs";
 import { YLayer } from "../layer/index.mjs";
 import "./YMenu.scss";
-import { toStyleSizeValue } from "../../util/ui.mjs";
 const NAME = 'YMenu';
 const CLASS_NAME = toKebabCase(NAME);
 export const YMenuPropOptions = {
@@ -22,14 +22,6 @@ export const YMenuPropOptions = {
     type: Boolean,
     default: false
   },
-  position: {
-    type: String,
-    default: 'default'
-  },
-  align: {
-    type: String,
-    default: 'start'
-  },
   openOnHover: {
     type: Boolean,
     default: false
@@ -41,9 +33,9 @@ export const YMenuPropOptions = {
     type: Boolean,
     default: true
   },
-  offsetY: {
-    type: [Number, String]
-  }
+  ...pressCoordinateProps({
+    coordinateStrategy: 'levitation'
+  })
 };
 
 /**
@@ -66,10 +58,6 @@ export const YMenu = defineComponent({
       expose
     } = _ref;
     const el$ = ref();
-    const base$ = ref();
-    const baseSlot = ref();
-    const baseEl = ref();
-    const contentEl = ref();
     const classes = computed(() => {
       const boundClasses = bindClasses(props.menuClasses);
       return {
@@ -86,73 +74,6 @@ export const YMenu = defineComponent({
         if (!(v && props.disabled)) model.value = v;
       }
     });
-    const position = toRef(props, 'position');
-    const align = toRef(props, 'align');
-    const coordinate = ref();
-    const coordinateStyles = computed(() => {
-      return coordinate.value ?? {};
-    });
-    function computeCoordinates() {
-      const $base = baseEl.value;
-      const actived = active.value;
-      if ($base && actived) {
-        const $content = contentEl.value;
-        const rect = $base.getBoundingClientRect();
-        let top = rect.top;
-        let left = rect.left + rect.width / 2;
-        if ($content) {
-          if (position.value === 'top' || position.value === 'bottom') {
-            if (position.value === 'top') {
-              top -= $content.clientHeight;
-              top -= 8; // Offset
-            }
-
-            if (position.value === 'bottom') {
-              top += rect.height;
-              top += 8; // Offset
-            }
-          }
-
-          if (align.value === 'center') {
-            left -= $content.clientWidth / 2;
-          } else if (align.value === 'start') {
-            left = rect.left;
-          } else if (align.value === 'end') {
-            left = rect.right;
-            left -= $content.clientWidth;
-          }
-        }
-        if (props.offsetY) {
-          top += +props.offsetY;
-        }
-        return {
-          top: `${top}px`,
-          left: `${left}px`,
-          minWidth: toStyleSizeValue(rect.width)
-        };
-      }
-      return {};
-    }
-    const baseFromSlotEl = computed(() => {
-      return baseSlot.value?.[0]?.el;
-    });
-    watchEffect(() => {
-      if (!base$.value) {
-        baseEl.value = baseFromSlotEl.value;
-        return;
-      }
-      const base = base$.value;
-      baseEl.value = base$.value?.$el ? base$.value?.$el : base;
-    });
-    watch(active, neo => {
-      if (neo) {
-        nextTick(() => {
-          const $content = el$.value?.content$;
-          contentEl.value = $content;
-          coordinate.value = computeCoordinates();
-        });
-      }
-    });
     function onMouseenter(e) {
       if (props.openOnHover) {
         active.value = true;
@@ -182,7 +103,7 @@ export const YMenu = defineComponent({
       el.removeEventListener('mouseenter', onMouseenter);
       el.removeEventListener('mouseleave', onMouseleave);
     }
-    watch(baseEl, (neo, old) => {
+    watch(() => el$.value?.baseEl, (neo, old) => {
       if (neo) {
         bindHover(neo);
         neo.addEventListener('click', onClick);
@@ -192,45 +113,29 @@ export const YMenu = defineComponent({
       }
     });
     useRender(() => {
-      const slotBase = slots.base?.({
-        active: active.value,
-        props: mergeProps({
-          ref: base$,
-          class: {
-            'y-menu-base': true,
-            'y-menu-base--active': active.value
-          }
-        })
-      });
-      baseSlot.value = slotBase;
-      return _createVNode(_Fragment, null, [slotBase, _createVNode(YLayer, {
-        "modelValue": active.value,
-        "onUpdate:modelValue": $event => active.value = $event,
+      return _createVNode(_Fragment, null, [_createVNode(YLayer, _mergeProps({
         "ref": el$,
         "classes": classes.value,
         "scrim": false,
         "disabled": props.disabled,
-        "content-styles": {
-          ...coordinateStyles.value
-        },
         "content-classes": ['y-menu__content'],
         "transition": props.transition,
         "onClick:complement": onComplementClick
-      }, {
+      }, chooseProps(props, YLayer.props), {
+        "modelValue": active.value,
+        "onUpdate:modelValue": $event => active.value = $event
+      }), {
         default: function () {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
           return _createVNode(_Fragment, null, [slots.default?.(...args) ?? '']);
-        }
+        },
+        base: () => slots.base?.()
       })]);
     });
     return {
-      base$,
-      el$,
-      baseEl,
-      coordinatesStyles: coordinateStyles,
-      baseSlot
+      el$
     };
   }
 });