yuyeon 0.3.4-beta.15 → 0.3.4-beta.18

package/lib/components/img/YImg.js

@@ -76,16 +76,14 @@ export const YImg = defineComponent({
     watch(() => props.src, () => {
       initIntersect();
     });
-    const _Placeholder = () => {
+    const _Placeholder = placeholderProps => {
       if (!slots.placeholder) return null;
       return _createVNode(PolyTransition, _mergeProps(polyTransitionBindProps.value, {
         "appear": true
       }), {
-        default: () => [(status.value === "idle" || status.value === "error") && _createVNode("div", {
+        default: () => [(placeholderProps.status === "idle" || placeholderProps.status === "error") && _createVNode("div", {
           "class": "y-img__placeholder"
-        }, [slots.placeholder?.({
-          status: status.value
-        })])]
+        }, [slots.placeholder?.(placeholderProps)])]
       });
     };
     function onLoad() {
@@ -165,7 +163,9 @@ export const YImg = defineComponent({
     useRender(() => {
       return _createVNode("div", {
         "class": ["y-img"]
-      }, [_createVNode(_Placeholder, null, null), _createVNode(_Image, {
+      }, [_createVNode(_Placeholder, {
+        "status": status.value
+      }, null), _createVNode(_Image, {
         "status": status.value
       }, null)]);
     });

package/lib/components/img/YImg.js.map

@@ -1 +1 @@
-{"version":3,"file":"YImg.js","names":["computed","getCurrentInstance","nextTick","onBeforeMount","onBeforeUnmount","ref","shallowRef","vShow","watch","withDirectives","createVNode","_createVNode","mergeProps","_mergeProps","useRender","pressDimensionPropsOptions","PolyTransition","pressPolyTransitionPropsOptions","usePolyTransition","defineComponent","propsFactory","Environments","pressYImgPropsOptions","src","String","crossorigin","referrerpolicy","transition","objectFit","type","default","eager","Boolean","YImg","name","props","slots","Object","emits","setup","_ref","attrs","emit","vm","image$","status","imgSrc","naturalWidth","naturalHeight","polyTransitionBindProps","srcMeta","imgClasses","getImgSrc","imgEl","value","currentSrc","inspectImage","complete","endsWith","startsWith","initIntersect","_Placeholder","placeholder","onLoad","isUnmounted","onError","event","_Image","imageProps","Img","draggable","alt","requestTimer","requestInspectImage","timeout","arguments","length","undefined","_request","clearTimeout","window","setTimeout","isIntersection","canUseIntersectionObserver"],"sources":["../../../src/components/img/YImg.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  computed,\n  getCurrentInstance,\n  type ImgHTMLAttributes,\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  type PropType,\n  ref,\n  type SlotsType,\n  shallowRef,\n  vShow,\n  watch,\n  withDirectives,\n} from \"vue\";\n\nimport { useRender } from \"@/composables/component\";\nimport { pressDimensionPropsOptions } from \"@/composables/dimension\";\nimport {\n  PolyTransition,\n  pressPolyTransitionPropsOptions,\n  usePolyTransition,\n} from \"@/composables/transition\";\nimport { defineComponent, propsFactory } from \"@/util/component\";\nimport Environments from \"@/util/environments\";\n\nimport \"./YImg.scss\";\n\nexport const pressYImgPropsOptions = propsFactory(\n  {\n    src: String as PropType<string>,\n    crossorigin: String as PropType<ImgHTMLAttributes[\"crossorigin\"]>,\n    referrerpolicy: String as PropType<ImgHTMLAttributes[\"referrerpolicy\"]>,\n    ...pressPolyTransitionPropsOptions({\n      transition: \"fade\",\n    }),\n    objectFit: {\n      type: String as PropType<\n        Extract<\n          CSSProperties[\"objectFit\"],\n          \"contain\" | \"cover\" | \"fill\" | \"scale-down\"\n        >\n      >,\n      default: \"contain\",\n    },\n    eager: Boolean,\n    ...pressDimensionPropsOptions(),\n  },\n  \"YImg\",\n);\n\nexport type YImgStatus = \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\nexport const YImg = defineComponent({\n  name: \"YImg\",\n  props: {\n    ...pressYImgPropsOptions(),\n  },\n  slots: Object as SlotsType<{\n    placeholder: any;\n  }>,\n  emits: [\"load\", \"loaded\", \"error\"],\n  setup(props, { slots, attrs, emit }) {\n    const vm = getCurrentInstance()!;\n    const image$ = ref<HTMLImageElement>();\n    const status = shallowRef<YImgStatus>(props.eager ? \"loading\" : \"idle\");\n    const imgSrc = shallowRef(\"\");\n    const naturalWidth = shallowRef<number>();\n    const naturalHeight = shallowRef<number>();\n    const { polyTransitionBindProps } = usePolyTransition(props);\n\n    const srcMeta = computed(() => {\n      const src = props.src;\n\n      return {\n        src,\n      };\n    });\n\n    const imgClasses = computed(() => {\n      return {\n        \"y-img--cover\": props.objectFit === \"cover\",\n        \"y-img--contain\": props.objectFit === \"contain\",\n        \"y-img--fill\": props.objectFit === \"fill\",\n        \"y-img--scale-down\": props.objectFit === \"scale-down\",\n      };\n    });\n\n    function getImgSrc() {\n      const imgEl = image$.value;\n      if (imgEl) {\n        imgSrc.value = imgEl.currentSrc || imgEl.src;\n      }\n    }\n\n    function inspectImage(imgEl: HTMLImageElement) {\n      if (imgEl.naturalWidth || imgEl.naturalHeight) {\n        naturalWidth.value = imgEl.naturalWidth;\n        naturalHeight.value = imgEl.naturalHeight;\n      } else if (!imgEl.complete && status.value === \"loading\") {\n        return false;\n      } else if (\n        imgEl.currentSrc.endsWith(\".svg\") ||\n        imgEl.currentSrc.startsWith(\"data:image/svg+xml\")\n      ) {\n        naturalWidth.value = 1;\n        naturalHeight.value = 1;\n      }\n\n      return true;\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        initIntersect();\n      },\n    );\n\n    const _Placeholder = () => {\n      if (!slots.placeholder) return null;\n      return (\n        <PolyTransition {...polyTransitionBindProps.value} appear>\n          {(status.value === \"idle\" || status.value === \"error\") && (\n            <div class=\"y-img__placeholder\">\n              {slots.placeholder?.({ status: status.value })}\n            </div>\n          )}\n        </PolyTransition>\n      );\n    };\n\n    function onLoad() {\n      if (vm.isUnmounted) return;\n      status.value = \"loaded\";\n    }\n\n    function onError(event?: Event) {\n      if (vm.isUnmounted) return;\n      status.value = \"error\";\n      emit(\"error\", event);\n    }\n\n    const _Image = (imageProps: { status: string }) => {\n      const Img = (\n        <img\n          ref={image$}\n          src={srcMeta.value.src}\n          crossorigin={props.crossorigin}\n          referrerpolicy={props.referrerpolicy}\n          draggable={(attrs as ImgHTMLAttributes).draggable}\n          alt={(attrs as ImgHTMLAttributes).alt}\n          class={[\"y-img__img\", imgClasses.value]}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      );\n\n      return (\n        <PolyTransition {...polyTransitionBindProps.value} appear>\n          {withDirectives(Img, [[vShow, imageProps.status === \"loaded\"]])}\n        </PolyTransition>\n      );\n    };\n\n    let requestTimer = -1;\n\n    /**\n     *\n     * @param imgEl\n     * @param timeout null: once\n     */\n    function requestInspectImage(\n      imgEl: HTMLImageElement,\n      timeout: number | null = 100,\n    ) {\n      const _request = () => {\n        clearTimeout(requestTimer);\n        if (vm.isUnmounted) return;\n        if (!inspectImage(imgEl) && timeout != null) {\n          requestTimer = window.setTimeout(_request, timeout);\n        }\n      };\n\n      _request();\n    }\n\n    function initIntersect(isIntersection?: boolean) {\n      if (props.eager && isIntersection) return;\n      if (\n        Environments.canUseIntersectionObserver &&\n        !isIntersection &&\n        !props.eager\n      )\n        return;\n\n      status.value = \"loading\";\n\n      if (!srcMeta.value.src) return;\n      nextTick(() => {\n        emit(\"load\", image$.value?.currentSrc || srcMeta.value.src);\n        setTimeout(() => {\n          if (vm.isUnmounted) return;\n          if (image$.value?.complete) {\n            if (!image$.value?.naturalWidth) {\n              onError();\n            }\n            if (status.value === \"error\") return;\n            requestInspectImage(image$.value, null);\n            if (status.value === \"loading\") onLoad();\n          } else if (image$.value) {\n            requestInspectImage(image$.value);\n            getImgSrc();\n          }\n        });\n      });\n    }\n\n    onBeforeMount(() => {\n      initIntersect();\n    });\n\n    onBeforeUnmount(() => {\n      clearTimeout(requestTimer);\n    });\n\n    useRender(() => {\n      return (\n        <div class={[\"y-img\"]}>\n          <_Placeholder />\n          <_Image status={status.value} />\n        </div>\n      );\n    });\n\n    return {\n      status,\n      image$: image$\n    }\n  },\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"YImg.js","names":["computed","getCurrentInstance","nextTick","onBeforeMount","onBeforeUnmount","ref","shallowRef","vShow","watch","withDirectives","createVNode","_createVNode","mergeProps","_mergeProps","useRender","pressDimensionPropsOptions","PolyTransition","pressPolyTransitionPropsOptions","usePolyTransition","defineComponent","propsFactory","Environments","pressYImgPropsOptions","src","String","crossorigin","referrerpolicy","transition","objectFit","type","default","eager","Boolean","YImg","name","props","slots","Object","emits","setup","_ref","attrs","emit","vm","image$","status","imgSrc","naturalWidth","naturalHeight","polyTransitionBindProps","srcMeta","imgClasses","getImgSrc","imgEl","value","currentSrc","inspectImage","complete","endsWith","startsWith","initIntersect","_Placeholder","placeholderProps","placeholder","onLoad","isUnmounted","onError","event","_Image","imageProps","Img","draggable","alt","requestTimer","requestInspectImage","timeout","arguments","length","undefined","_request","clearTimeout","window","setTimeout","isIntersection","canUseIntersectionObserver"],"sources":["../../../src/components/img/YImg.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  computed,\n  getCurrentInstance,\n  type ImgHTMLAttributes,\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  type PropType,\n  ref,\n  type SlotsType,\n  shallowRef,\n  vShow,\n  watch,\n  withDirectives,\n} from \"vue\";\n\nimport { useRender } from \"@/composables/component\";\nimport { pressDimensionPropsOptions } from \"@/composables/dimension\";\nimport {\n  PolyTransition,\n  pressPolyTransitionPropsOptions,\n  usePolyTransition,\n} from \"@/composables/transition\";\nimport { defineComponent, propsFactory } from \"@/util/component\";\nimport Environments from \"@/util/environments\";\n\nimport \"./YImg.scss\";\n\nexport const pressYImgPropsOptions = propsFactory(\n  {\n    src: String as PropType<string>,\n    crossorigin: String as PropType<ImgHTMLAttributes[\"crossorigin\"]>,\n    referrerpolicy: String as PropType<ImgHTMLAttributes[\"referrerpolicy\"]>,\n    ...pressPolyTransitionPropsOptions({\n      transition: \"fade\",\n    }),\n    objectFit: {\n      type: String as PropType<\n        Extract<\n          CSSProperties[\"objectFit\"],\n          \"contain\" | \"cover\" | \"fill\" | \"scale-down\"\n        >\n      >,\n      default: \"contain\",\n    },\n    eager: Boolean,\n    ...pressDimensionPropsOptions(),\n  },\n  \"YImg\",\n);\n\nexport type YImgStatus = \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\nexport const YImg = defineComponent({\n  name: \"YImg\",\n  props: {\n    ...pressYImgPropsOptions(),\n  },\n  slots: Object as SlotsType<{\n    placeholder: any;\n  }>,\n  emits: [\"load\", \"loaded\", \"error\"],\n  setup(props, { slots, attrs, emit }) {\n    const vm = getCurrentInstance()!;\n    const image$ = ref<HTMLImageElement>();\n    const status = shallowRef<YImgStatus>(props.eager ? \"loading\" : \"idle\");\n    const imgSrc = shallowRef(\"\");\n    const naturalWidth = shallowRef<number>();\n    const naturalHeight = shallowRef<number>();\n    const { polyTransitionBindProps } = usePolyTransition(props);\n\n    const srcMeta = computed(() => {\n      const src = props.src;\n\n      return {\n        src,\n      };\n    });\n\n    const imgClasses = computed(() => {\n      return {\n        \"y-img--cover\": props.objectFit === \"cover\",\n        \"y-img--contain\": props.objectFit === \"contain\",\n        \"y-img--fill\": props.objectFit === \"fill\",\n        \"y-img--scale-down\": props.objectFit === \"scale-down\",\n      };\n    });\n\n    function getImgSrc() {\n      const imgEl = image$.value;\n      if (imgEl) {\n        imgSrc.value = imgEl.currentSrc || imgEl.src;\n      }\n    }\n\n    function inspectImage(imgEl: HTMLImageElement) {\n      if (imgEl.naturalWidth || imgEl.naturalHeight) {\n        naturalWidth.value = imgEl.naturalWidth;\n        naturalHeight.value = imgEl.naturalHeight;\n      } else if (!imgEl.complete && status.value === \"loading\") {\n        return false;\n      } else if (\n        imgEl.currentSrc.endsWith(\".svg\") ||\n        imgEl.currentSrc.startsWith(\"data:image/svg+xml\")\n      ) {\n        naturalWidth.value = 1;\n        naturalHeight.value = 1;\n      }\n\n      return true;\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        initIntersect();\n      },\n    );\n\n    const _Placeholder = (placeholderProps: { status: string }) => {\n      if (!slots.placeholder) return null;\n      return (\n        <PolyTransition {...polyTransitionBindProps.value} appear>\n          {(placeholderProps.status === \"idle\" || placeholderProps.status === \"error\") && (\n            <div class=\"y-img__placeholder\">\n              {slots.placeholder?.(placeholderProps)}\n            </div>\n          )}\n        </PolyTransition>\n      );\n    };\n\n    function onLoad() {\n      if (vm.isUnmounted) return;\n      status.value = \"loaded\";\n    }\n\n    function onError(event?: Event) {\n      if (vm.isUnmounted) return;\n      status.value = \"error\";\n      emit(\"error\", event);\n    }\n\n    const _Image = (imageProps: { status: string }) => {\n      const Img = (\n        <img\n          ref={image$}\n          src={srcMeta.value.src}\n          crossorigin={props.crossorigin}\n          referrerpolicy={props.referrerpolicy}\n          draggable={(attrs as ImgHTMLAttributes).draggable}\n          alt={(attrs as ImgHTMLAttributes).alt}\n          class={[\"y-img__img\", imgClasses.value]}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      );\n\n      return (\n        <PolyTransition {...polyTransitionBindProps.value} appear>\n          {withDirectives(Img, [[vShow, imageProps.status === \"loaded\"]])}\n        </PolyTransition>\n      );\n    };\n\n    let requestTimer = -1;\n\n    /**\n     *\n     * @param imgEl\n     * @param timeout null: once\n     */\n    function requestInspectImage(\n      imgEl: HTMLImageElement,\n      timeout: number | null = 100,\n    ) {\n      const _request = () => {\n        clearTimeout(requestTimer);\n        if (vm.isUnmounted) return;\n        if (!inspectImage(imgEl) && timeout != null) {\n          requestTimer = window.setTimeout(_request, timeout);\n        }\n      };\n\n      _request();\n    }\n\n    function initIntersect(isIntersection?: boolean) {\n      if (props.eager && isIntersection) return;\n      if (\n        Environments.canUseIntersectionObserver &&\n        !isIntersection &&\n        !props.eager\n      )\n        return;\n\n      status.value = \"loading\";\n\n      if (!srcMeta.value.src) return;\n      nextTick(() => {\n        emit(\"load\", image$.value?.currentSrc || srcMeta.value.src);\n        setTimeout(() => {\n          if (vm.isUnmounted) return;\n          if (image$.value?.complete) {\n            if (!image$.value?.naturalWidth) {\n              onError();\n            }\n            if (status.value === \"error\") return;\n            requestInspectImage(image$.value, null);\n            if (status.value === \"loading\") onLoad();\n          } else if (image$.value) {\n            requestInspectImage(image$.value);\n            getImgSrc();\n          }\n        });\n      });\n    }\n\n    onBeforeMount(() => {\n      initIntersect();\n    });\n\n    onBeforeUnmount(() => {\n      clearTimeout(requestTimer);\n    });\n\n    useRender(() => {\n      return (\n        <div class={[\"y-img\"]}>\n          <_Placeholder status={status.value} />\n          <_Image status={status.value} />\n        </div>\n      );\n    });\n\n    return {\n      status,\n      image$: image$\n    }\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/components/layer/YLayer.js

@@ -149,6 +149,7 @@ export const YLayer = defineComponent({
     const maximized = toRef(props, "maximized");
     const rendered = computed(() => !disabled.value && (lazyValue.value || active.value));
     const {
+      coordination,
       coordinateStyles,
       updateCoordinate
     } = useCoordinate(props, {
@@ -217,8 +218,14 @@ export const YLayer = defineComponent({
     });
     const computedContentClasses = computed(() => {
       const boundClasses = bindClasses(props.contentClasses);
+      const {
+        side,
+        align
+      } = coordination.value;
       return {
-        ...boundClasses
+        ...boundClasses,
+        [`y-layer--side-${side}`]: !!side,
+        [`y-layer--align-${align}`]: !!align
       };
     });
     expose({
@@ -235,7 +242,8 @@ export const YLayer = defineComponent({
       getActiveLayers,
       isMe: vnode => {
         return vnode === vm;
-      }
+      },
+      coordination
     });
     useRender(() => {
       const slotBase = slots.base?.({
@@ -322,7 +330,8 @@ export const YLayer = defineComponent({
       polyTransitionBindProps,
       coordinateStyles,
       layerGroupState,
-      getActiveLayers
+      getActiveLayers,
+      coordination
     };
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"YLayer.js","names":["computed","getCurrentInstance","mergeProps","reactive","ref","shallowRef","Teleport","Transition","toRef","Fragment","_Fragment","createVNode","_createVNode","vShow","_vShow","resolveDirective","_resolveDirective","_mergeProps","withDirectives","_withDirectives","useModelDuplex","useRender","pressCoordinateProps","useCoordinate","pressDimensionPropsOptions","useDimension","useLayerGroup","pressThemePropsOptions","useLocalTheme","useLazy","PolyTransition","pressPolyTransitionPropsOptions","usePolyTransition","ComplementClick","bindClasses","defineComponent","propsFactory","pressBasePropsOptions","useBase","pressContentPropsOptions","useContent","pressScrollStrategyProps","useScrollStrategies","noop","pressYLayerProps","modelValue","type","Boolean","scrim","scrimOpacity","Number","eager","classes","Array","String","Object","contentClasses","closeClickScrim","contentStyles","default","disabled","maximized","openOnHover","openDelay","closeDelay","zIndex","contained","layerGroup","YLayer","name","inheritAttrs","components","directives","props","modal","emits","value","mouseEvent","afterLeave","slots","setup","_ref","emit","expose","attrs","vm","scrim$","content$","root$","model","active","get","set","v","base","base$","baseEl","baseSlot","baseFromSlotEl","contentEvents","themeClasses","layerGroupState","getActiveLayers","polyTransitionBindProps","dimensionStyles","lazyValue","onAfterUpdate","finish","hovered","focused","rendered","coordinateStyles","updateCoordinate","contentEl","root","onClickComplementLayer","target","closeConditional","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","onMouseenter","event","onMouseleave","computedStyle","toString","computedClass","boundClasses","computedContentClasses","isMe","vnode","slotBase","class","baseProps"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type { ComponentInternalInstance, PropType, SlotsType } from \"vue\";\nimport {\n\tcomputed,\n\tgetCurrentInstance,\n\tmergeProps,\n\treactive,\n\tref,\n\tshallowRef,\n\tTeleport,\n\tTransition,\n\ttoRef,\n} from \"vue\";\n\nimport { useModelDuplex } from \"@/composables/communication\";\nimport { useRender } from \"@/composables/component\";\nimport { pressCoordinateProps, useCoordinate } from \"@/composables/coordinate\";\nimport {\n\tpressDimensionPropsOptions,\n\tuseDimension,\n} from \"@/composables/dimension\";\nimport { useLayerGroup } from \"@/composables/layer-group\";\nimport { pressThemePropsOptions, useLocalTheme } from \"@/composables/theme\";\nimport { useLazy } from \"@/composables/timing\";\nimport {\n\tPolyTransition,\n\tpressPolyTransitionPropsOptions,\n\tusePolyTransition,\n} from \"@/composables/transition\";\nimport {\n\tComplementClick,\n\ttype ComplementClickBindingOptions,\n} from \"@/directives/complement-click\";\nimport { bindClasses, defineComponent, propsFactory } from \"@/util/component\";\n\nimport { pressBasePropsOptions, useBase } from \"./base\";\nimport { pressContentPropsOptions, useContent } from \"./content\";\nimport {\n\tpressScrollStrategyProps,\n\tuseScrollStrategies,\n} from \"./scroll-strategies\";\n\nimport \"./YLayer.scss\";\nimport type { CssProperties } from \"@/types\";\nimport { noop } from \"@/util\";\n\nexport const pressYLayerProps = propsFactory(\n\t{\n\t\tmodelValue: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t},\n\t\tscrim: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t},\n\t\tscrimOpacity: {\n\t\t\ttype: Number as PropType<number>,\n\t\t},\n\t\teager: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t},\n\t\tclasses: {\n\t\t\ttype: [Array, String, Object] as PropType<\n\t\t\t\tstring[] | string | Record<string, any>\n\t\t\t>,\n\t\t},\n\t\tcontentClasses: {\n\t\t\ttype: [Array, String, Object] as PropType<\n\t\t\t\tstring[] | string | Record<string, any>\n\t\t\t>,\n\t\t},\n\t\tcloseClickScrim: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t},\n\t\tcontentStyles: {\n\t\t\ttype: Object as PropType<CssProperties>,\n\t\t\tdefault: () => {},\n\t\t},\n\t\tdisabled: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t\tdefault: false,\n\t\t},\n\t\tmaximized: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t},\n\t\topenOnHover: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t\tdefault: false,\n\t\t},\n\t\topenDelay: {\n\t\t\ttype: Number as PropType<number>,\n\t\t\tdefault: 200,\n\t\t},\n\t\tcloseDelay: {\n\t\t\ttype: Number as PropType<number>,\n\t\t\tdefault: 200,\n\t\t},\n\t\tzIndex: {\n\t\t\ttype: [Number, String] as PropType<number | string>,\n\t\t\tdefault: 2000,\n\t\t},\n\t\tcontained: Boolean,\n\t\tlayerGroup: [String, Object] as PropType<string | Element>,\n\t\t...pressThemePropsOptions(),\n\t\t...pressPolyTransitionPropsOptions(),\n\t\t...pressBasePropsOptions(),\n\t\t...pressContentPropsOptions(),\n\t\t...pressCoordinateProps(),\n\t\t...pressScrollStrategyProps(),\n\t\t...pressDimensionPropsOptions(),\n\t},\n\t\"YLayer\",\n);\n\nexport const YLayer = defineComponent({\n\tname: \"YLayer\",\n\tinheritAttrs: false,\n\tcomponents: {\n\t\tPolyTransition,\n\t},\n\tdirectives: {\n\t\tComplementClick,\n\t},\n\tprops: {\n\t\tmodal: Boolean as PropType<boolean>,\n\t\t...pressYLayerProps(),\n\t},\n\temits: {\n\t\t\"update:modelValue\": (value: boolean) => true,\n\t\t\"click:complement\": (mouseEvent: MouseEvent) => true,\n\t\tafterLeave: () => true,\n\t},\n\tslots: Object as SlotsType<{\n\t\tbase: any;\n\t\tdefault: any;\n\t}>,\n\tsetup(props, { emit, expose, attrs, slots }) {\n\t\tconst vm = getCurrentInstance();\n\t\tconst scrim$ = ref<HTMLElement>();\n\t\tconst content$ = ref<HTMLElement>();\n\t\tconst root$ = ref<HTMLElement>();\n\t\tconst model = useModelDuplex(props);\n\t\tconst active = computed({\n\t\t\tget: (): boolean => {\n\t\t\t\treturn !!model.value;\n\t\t\t},\n\t\t\tset: (v: boolean) => {\n\t\t\t\tif (!(v && props.disabled)) model.value = v;\n\t\t\t},\n\t\t});\n\t\t// Frags\n\t\tconst { base, base$, baseEl, baseSlot, baseFromSlotEl } = useBase(props);\n\t\tconst { contentEvents } = useContent(props, active);\n\t\tconst { themeClasses } = useLocalTheme(props);\n\t\tconst { layerGroup, layerGroupState, getActiveLayers } =\n\t\t\tuseLayerGroup(props);\n\t\tconst { polyTransitionBindProps } = usePolyTransition(props);\n\t\tconst { dimensionStyles } = useDimension(props);\n\n\t\tconst { lazyValue, onAfterUpdate } = useLazy(toRef(props, \"eager\"), active);\n\t\t// States\n\t\tconst finish = shallowRef(false);\n\t\tconst hovered = ref(false);\n\t\tconst focused = ref(false);\n\t\tconst disabled = toRef(props, \"disabled\");\n\t\tconst maximized = toRef(props, \"maximized\");\n\n\t\tconst rendered = computed<boolean>(\n\t\t\t() => !disabled.value && (lazyValue.value || active.value),\n\t\t);\n\n\t\tconst { coordinateStyles, updateCoordinate } = useCoordinate(props, {\n\t\t\tcontentEl: content$,\n\t\t\tbase,\n\t\t\tactive,\n\t\t});\n\t\tuseScrollStrategies(props, {\n\t\t\troot: root$,\n\t\t\tcontentEl: content$,\n\t\t\tactive,\n\t\t\tbaseEl: base,\n\t\t\tupdateCoordinate,\n\t\t});\n\n\t\tfunction onClickComplementLayer(mouseEvent: MouseEvent) {\n\t\t\temit(\"click:complement\", mouseEvent);\n\t\t\tif (!props.modal) {\n\t\t\t\tif (\n\t\t\t\t\tscrim$.value !== null &&\n\t\t\t\t\tscrim$.value === mouseEvent.target &&\n\t\t\t\t\tprops.closeClickScrim\n\t\t\t\t) {\n\t\t\t\t\tactive.value = false;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// TODO: shrug ani\n\t\t\t}\n\t\t}\n\n\t\tfunction closeConditional(): boolean {\n\t\t\treturn (\n\t\t\t\t(!props.openOnHover || (props.openOnHover && !hovered.value)) &&\n\t\t\t\tactive.value &&\n\t\t\t\tfinish.value\n\t\t\t); // TODO: && groupTopLevel.value;\n\t\t}\n\n\t\tconst complementClickOption = reactive<ComplementClickBindingOptions>({\n\t\t\thandler: onClickComplementLayer,\n\t\t\tdetermine: closeConditional,\n\t\t\tinclude: () => [baseEl.value],\n\t\t});\n\n\t\tfunction onAfterEnter() {\n\t\t\tfinish.value = true;\n\t\t}\n\n\t\tfunction onAfterLeave() {\n\t\t\tonAfterUpdate();\n\t\t\tfinish.value = false;\n\t\t\temit(\"afterLeave\");\n\t\t}\n\n\t\tfunction onClickScrim() {\n\t\t\tif (props.closeClickScrim) {\n\t\t\t\tactive.value = false;\n\t\t\t}\n\t\t}\n\n\t\tfunction onMouseenter(event: Event) {\n\t\t\thovered.value = true;\n\t\t}\n\n\t\tfunction onMouseleave(event: Event) {\n\t\t\thovered.value = false;\n\t\t}\n\n\t\tconst computedStyle = computed(() => {\n\t\t\treturn {\n\t\t\t\tzIndex: (props.zIndex ?? \"2000\").toString(),\n\t\t\t};\n\t\t});\n\n\t\tconst computedClass = computed<Record<string, boolean>>(() => {\n\t\t\tconst { classes } = props;\n\t\t\tconst boundClasses = bindClasses(classes);\n\t\t\treturn {\n\t\t\t\t...boundClasses,\n\t\t\t\t\"y-layer--active\": !!active.value,\n\t\t\t};\n\t\t});\n\n\t\tconst computedContentClasses = computed<Record<string, boolean>>(() => {\n\t\t\tconst boundClasses = bindClasses(props.contentClasses);\n\t\t\treturn {\n\t\t\t\t...boundClasses,\n\t\t\t};\n\t\t});\n\n\t\texpose({\n\t\t\tscrim$,\n\t\t\tbase$,\n\t\t\tcontent$: computed(() => content$.value),\n\t\t\tbaseEl,\n\t\t\tactive,\n\t\t\tonAfterUpdate,\n\t\t\tupdateCoordinate,\n\t\t\thovered,\n\t\t\tfinish,\n\t\t\tmodal: computed(() => props.modal),\n\t\t\tgetActiveLayers,\n\t\t\tisMe: (vnode: ComponentInternalInstance) => {\n\t\t\t\treturn vnode === vm;\n\t\t\t},\n\t\t});\n\n\t\tuseRender(() => {\n\t\t\tconst slotBase = slots.base?.({\n\t\t\t\tactive: active.value,\n\t\t\t\tprops: mergeProps({\n\t\t\t\t\tref: base$,\n\t\t\t\t\tclass: {\n\t\t\t\t\t\t\"y-layer-base\": true,\n\t\t\t\t\t\t\"y-layer-base--active\": active.value,\n\t\t\t\t\t},\n\t\t\t\t\t...(props.baseProps ?? {}),\n\t\t\t\t}),\n\t\t\t});\n\t\t\tbaseSlot.value = slotBase;\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{slotBase}\n\t\t\t\t\t<Teleport disabled={!layerGroup.value} to={layerGroup.value as any}>\n\t\t\t\t\t\t{rendered.value && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass={[\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\"y-layer\": true,\n\t\t\t\t\t\t\t\t\t\t\"y-layer--finish\": finish.value,\n\t\t\t\t\t\t\t\t\t\t\"y-layer--contained\": props.contained,\n\t\t\t\t\t\t\t\t\t\t...computedClass.value,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tthemeClasses.value,\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\tonMouseenter={onMouseenter}\n\t\t\t\t\t\t\t\tonMouseleave={onMouseleave}\n\t\t\t\t\t\t\t\tstyle={computedStyle.value}\n\t\t\t\t\t\t\t\tref={root$}\n\t\t\t\t\t\t\t\t{...attrs}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Transition name=\"fade\" appear>\n\t\t\t\t\t\t\t\t\t{active.value && props.scrim && (\n\t\t\t\t\t\t\t\t\t\t// biome-ignore lint/a11y/noStaticElementInteractions: <explanation>\n\t\t\t\t\t\t\t\t\t\t// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclass=\"y-layer__scrim\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ \"--y-layer-scrim-opacity\": props.scrimOpacity }}\n\t\t\t\t\t\t\t\t\t\t\tonClick={onClickScrim}\n\t\t\t\t\t\t\t\t\t\t\tonKeydown={noop()}\n\t\t\t\t\t\t\t\t\t\t\tonKeyup={noop()}\n\t\t\t\t\t\t\t\t\t\t\tref=\"scrim$\"\n\t\t\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</Transition>\n\t\t\t\t\t\t\t\t<PolyTransition\n\t\t\t\t\t\t\t\t\tonAfterEnter={onAfterEnter}\n\t\t\t\t\t\t\t\t\tonAfterLeave={onAfterLeave}\n\t\t\t\t\t\t\t\t\tappear\n\t\t\t\t\t\t\t\t\t{...polyTransitionBindProps.value}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tv-show={active.value}\n\t\t\t\t\t\t\t\t\t\tv-complement-click={{ ...complementClickOption }}\n\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\"y-layer__content\": true,\n\t\t\t\t\t\t\t\t\t\t\t...computedContentClasses.value,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tstyle={[\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t...dimensionStyles.value,\n\t\t\t\t\t\t\t\t\t\t\t\t...coordinateStyles.value,\n\t\t\t\t\t\t\t\t\t\t\t\t...props.contentStyles,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t\t{...contentEvents.value}\n\t\t\t\t\t\t\t\t\t\tref={content$}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{slots.default?.({ active: active.value })}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</PolyTransition>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Teleport>\n\t\t\t\t</>\n\t\t\t);\n\t\t});\n\n\t\treturn {\n\t\t\tcomplementClickOption,\n\t\t\tlayerGroup,\n\t\t\tactive,\n\t\t\tfinish,\n\t\t\trendered,\n\t\t\tlazyValue,\n\t\t\tonAfterUpdate: onAfterUpdate as () => void,\n\t\t\tscrim$,\n\t\t\tcontent$,\n\t\t\tbase$,\n\t\t\tbaseEl,\n\t\t\tbaseFromSlotEl,\n\t\t\tpolyTransitionBindProps,\n\t\t\tcoordinateStyles,\n\t\t\tlayerGroupState,\n\t\t\tgetActiveLayers,\n\t\t};\n\t},\n});\n\nexport type YLayer = InstanceType<typeof YLayer>;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"YLayer.js","names":["computed","getCurrentInstance","mergeProps","reactive","ref","shallowRef","Teleport","Transition","toRef","Fragment","_Fragment","createVNode","_createVNode","vShow","_vShow","resolveDirective","_resolveDirective","_mergeProps","withDirectives","_withDirectives","useModelDuplex","useRender","pressCoordinateProps","useCoordinate","pressDimensionPropsOptions","useDimension","useLayerGroup","pressThemePropsOptions","useLocalTheme","useLazy","PolyTransition","pressPolyTransitionPropsOptions","usePolyTransition","ComplementClick","bindClasses","defineComponent","propsFactory","pressBasePropsOptions","useBase","pressContentPropsOptions","useContent","pressScrollStrategyProps","useScrollStrategies","noop","pressYLayerProps","modelValue","type","Boolean","scrim","scrimOpacity","Number","eager","classes","Array","String","Object","contentClasses","closeClickScrim","contentStyles","default","disabled","maximized","openOnHover","openDelay","closeDelay","zIndex","contained","layerGroup","YLayer","name","inheritAttrs","components","directives","props","modal","emits","value","mouseEvent","afterLeave","slots","setup","_ref","emit","expose","attrs","vm","scrim$","content$","root$","model","active","get","set","v","base","base$","baseEl","baseSlot","baseFromSlotEl","contentEvents","themeClasses","layerGroupState","getActiveLayers","polyTransitionBindProps","dimensionStyles","lazyValue","onAfterUpdate","finish","hovered","focused","rendered","coordination","coordinateStyles","updateCoordinate","contentEl","root","onClickComplementLayer","target","closeConditional","complementClickOption","handler","determine","include","onAfterEnter","onAfterLeave","onClickScrim","onMouseenter","event","onMouseleave","computedStyle","toString","computedClass","boundClasses","computedContentClasses","side","align","isMe","vnode","slotBase","class","baseProps"],"sources":["../../../src/components/layer/YLayer.tsx"],"sourcesContent":["import type { ComponentInternalInstance, PropType, SlotsType } from \"vue\";\nimport {\n\tcomputed,\n\tgetCurrentInstance,\n\tmergeProps,\n\treactive,\n\tref,\n\tshallowRef,\n\tTeleport,\n\tTransition,\n\ttoRef,\n} from \"vue\";\n\nimport { useModelDuplex } from \"@/composables/communication\";\nimport { useRender } from \"@/composables/component\";\nimport { pressCoordinateProps, useCoordinate } from \"@/composables/coordinate\";\nimport {\n\tpressDimensionPropsOptions,\n\tuseDimension,\n} from \"@/composables/dimension\";\nimport { useLayerGroup } from \"@/composables/layer-group\";\nimport { pressThemePropsOptions, useLocalTheme } from \"@/composables/theme\";\nimport { useLazy } from \"@/composables/timing\";\nimport {\n\tPolyTransition,\n\tpressPolyTransitionPropsOptions,\n\tusePolyTransition,\n} from \"@/composables/transition\";\nimport {\n\tComplementClick,\n\ttype ComplementClickBindingOptions,\n} from \"@/directives/complement-click\";\nimport { bindClasses, defineComponent, propsFactory } from \"@/util/component\";\n\nimport { pressBasePropsOptions, useBase } from \"./base\";\nimport { pressContentPropsOptions, useContent } from \"./content\";\nimport {\n\tpressScrollStrategyProps,\n\tuseScrollStrategies,\n} from \"./scroll-strategies\";\n\nimport \"./YLayer.scss\";\nimport type { CssProperties } from \"@/types\";\nimport { noop } from \"@/util\";\n\nexport const pressYLayerProps = propsFactory(\n\t{\n\t\tmodelValue: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t},\n\t\tscrim: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t},\n\t\tscrimOpacity: {\n\t\t\ttype: Number as PropType<number>,\n\t\t},\n\t\teager: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t},\n\t\tclasses: {\n\t\t\ttype: [Array, String, Object] as PropType<\n\t\t\t\tstring[] | string | Record<string, any>\n\t\t\t>,\n\t\t},\n\t\tcontentClasses: {\n\t\t\ttype: [Array, String, Object] as PropType<\n\t\t\t\tstring[] | string | Record<string, any>\n\t\t\t>,\n\t\t},\n\t\tcloseClickScrim: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t},\n\t\tcontentStyles: {\n\t\t\ttype: Object as PropType<CssProperties>,\n\t\t\tdefault: () => {},\n\t\t},\n\t\tdisabled: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t\tdefault: false,\n\t\t},\n\t\tmaximized: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t},\n\t\topenOnHover: {\n\t\t\ttype: Boolean as PropType<boolean>,\n\t\t\tdefault: false,\n\t\t},\n\t\topenDelay: {\n\t\t\ttype: Number as PropType<number>,\n\t\t\tdefault: 200,\n\t\t},\n\t\tcloseDelay: {\n\t\t\ttype: Number as PropType<number>,\n\t\t\tdefault: 200,\n\t\t},\n\t\tzIndex: {\n\t\t\ttype: [Number, String] as PropType<number | string>,\n\t\t\tdefault: 2000,\n\t\t},\n\t\tcontained: Boolean,\n\t\tlayerGroup: [String, Object] as PropType<string | Element>,\n\t\t...pressThemePropsOptions(),\n\t\t...pressPolyTransitionPropsOptions(),\n\t\t...pressBasePropsOptions(),\n\t\t...pressContentPropsOptions(),\n\t\t...pressCoordinateProps(),\n\t\t...pressScrollStrategyProps(),\n\t\t...pressDimensionPropsOptions(),\n\t},\n\t\"YLayer\",\n);\n\nexport const YLayer = defineComponent({\n\tname: \"YLayer\",\n\tinheritAttrs: false,\n\tcomponents: {\n\t\tPolyTransition,\n\t},\n\tdirectives: {\n\t\tComplementClick,\n\t},\n\tprops: {\n\t\tmodal: Boolean as PropType<boolean>,\n\t\t...pressYLayerProps(),\n\t},\n\temits: {\n\t\t\"update:modelValue\": (value: boolean) => true,\n\t\t\"click:complement\": (mouseEvent: MouseEvent) => true,\n\t\tafterLeave: () => true,\n\t},\n\tslots: Object as SlotsType<{\n\t\tbase: any;\n\t\tdefault: any;\n\t}>,\n\tsetup(props, { emit, expose, attrs, slots }) {\n\t\tconst vm = getCurrentInstance();\n\t\tconst scrim$ = ref<HTMLElement>();\n\t\tconst content$ = ref<HTMLElement>();\n\t\tconst root$ = ref<HTMLElement>();\n\t\tconst model = useModelDuplex(props);\n\t\tconst active = computed({\n\t\t\tget: (): boolean => {\n\t\t\t\treturn !!model.value;\n\t\t\t},\n\t\t\tset: (v: boolean) => {\n\t\t\t\tif (!(v && props.disabled)) model.value = v;\n\t\t\t},\n\t\t});\n\t\t// Frags\n\t\tconst { base, base$, baseEl, baseSlot, baseFromSlotEl } = useBase(props);\n\t\tconst { contentEvents } = useContent(props, active);\n\t\tconst { themeClasses } = useLocalTheme(props);\n\t\tconst { layerGroup, layerGroupState, getActiveLayers } =\n\t\t\tuseLayerGroup(props);\n\t\tconst { polyTransitionBindProps } = usePolyTransition(props);\n\t\tconst { dimensionStyles } = useDimension(props);\n\n\t\tconst { lazyValue, onAfterUpdate } = useLazy(toRef(props, \"eager\"), active);\n\t\t// States\n\t\tconst finish = shallowRef(false);\n\t\tconst hovered = ref(false);\n\t\tconst focused = ref(false);\n\t\tconst disabled = toRef(props, \"disabled\");\n\t\tconst maximized = toRef(props, \"maximized\");\n\n\t\tconst rendered = computed<boolean>(\n\t\t\t() => !disabled.value && (lazyValue.value || active.value),\n\t\t);\n\n\t\tconst { coordination, coordinateStyles, updateCoordinate } = useCoordinate(props, {\n\t\t\tcontentEl: content$,\n\t\t\tbase,\n\t\t\tactive,\n\t\t});\n\t\tuseScrollStrategies(props, {\n\t\t\troot: root$,\n\t\t\tcontentEl: content$,\n\t\t\tactive,\n\t\t\tbaseEl: base,\n\t\t\tupdateCoordinate,\n\t\t});\n\n\t\tfunction onClickComplementLayer(mouseEvent: MouseEvent) {\n\t\t\temit(\"click:complement\", mouseEvent);\n\t\t\tif (!props.modal) {\n\t\t\t\tif (\n\t\t\t\t\tscrim$.value !== null &&\n\t\t\t\t\tscrim$.value === mouseEvent.target &&\n\t\t\t\t\tprops.closeClickScrim\n\t\t\t\t) {\n\t\t\t\t\tactive.value = false;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// TODO: shrug ani\n\t\t\t}\n\t\t}\n\n\t\tfunction closeConditional(): boolean {\n\t\t\treturn (\n\t\t\t\t(!props.openOnHover || (props.openOnHover && !hovered.value)) &&\n\t\t\t\tactive.value &&\n\t\t\t\tfinish.value\n\t\t\t); // TODO: && groupTopLevel.value;\n\t\t}\n\n\t\tconst complementClickOption = reactive<ComplementClickBindingOptions>({\n\t\t\thandler: onClickComplementLayer,\n\t\t\tdetermine: closeConditional,\n\t\t\tinclude: () => [baseEl.value],\n\t\t});\n\n\t\tfunction onAfterEnter() {\n\t\t\tfinish.value = true;\n\t\t}\n\n\t\tfunction onAfterLeave() {\n\t\t\tonAfterUpdate();\n\t\t\tfinish.value = false;\n\t\t\temit(\"afterLeave\");\n\t\t}\n\n\t\tfunction onClickScrim() {\n\t\t\tif (props.closeClickScrim) {\n\t\t\t\tactive.value = false;\n\t\t\t}\n\t\t}\n\n\t\tfunction onMouseenter(event: Event) {\n\t\t\thovered.value = true;\n\t\t}\n\n\t\tfunction onMouseleave(event: Event) {\n\t\t\thovered.value = false;\n\t\t}\n\n\t\tconst computedStyle = computed(() => {\n\t\t\treturn {\n\t\t\t\tzIndex: (props.zIndex ?? \"2000\").toString(),\n\t\t\t};\n\t\t});\n\n\t\tconst computedClass = computed<Record<string, boolean>>(() => {\n\t\t\tconst { classes } = props;\n\t\t\tconst boundClasses = bindClasses(classes);\n\t\t\treturn {\n\t\t\t\t...boundClasses,\n\t\t\t\t\"y-layer--active\": !!active.value,\n\t\t\t};\n\t\t});\n\n\t\tconst computedContentClasses = computed<Record<string, boolean>>(() => {\n\t\t\tconst boundClasses = bindClasses(props.contentClasses);\n\t\t\tconst { side, align } = coordination.value;\n\t\t\treturn {\n\t\t\t\t...boundClasses,\n        [`y-layer--side-${side}`]: !!side,\n        [`y-layer--align-${align}`]: !!align,\n\t\t\t};\n\t\t});\n\n\t\texpose({\n\t\t\tscrim$,\n\t\t\tbase$,\n\t\t\tcontent$: computed(() => content$.value),\n\t\t\tbaseEl,\n\t\t\tactive,\n\t\t\tonAfterUpdate,\n\t\t\tupdateCoordinate,\n\t\t\thovered,\n\t\t\tfinish,\n\t\t\tmodal: computed(() => props.modal),\n\t\t\tgetActiveLayers,\n\t\t\tisMe: (vnode: ComponentInternalInstance) => {\n\t\t\t\treturn vnode === vm;\n\t\t\t},\n\t\t\tcoordination,\n\t\t});\n\n\t\tuseRender(() => {\n\t\t\tconst slotBase = slots.base?.({\n\t\t\t\tactive: active.value,\n\t\t\t\tprops: mergeProps({\n\t\t\t\t\tref: base$,\n\t\t\t\t\tclass: {\n\t\t\t\t\t\t\"y-layer-base\": true,\n\t\t\t\t\t\t\"y-layer-base--active\": active.value,\n\t\t\t\t\t},\n\t\t\t\t\t...(props.baseProps ?? {}),\n\t\t\t\t}),\n\t\t\t});\n\t\t\tbaseSlot.value = slotBase;\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{slotBase}\n\t\t\t\t\t<Teleport disabled={!layerGroup.value} to={layerGroup.value as any}>\n\t\t\t\t\t\t{rendered.value && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass={[\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\"y-layer\": true,\n\t\t\t\t\t\t\t\t\t\t\"y-layer--finish\": finish.value,\n\t\t\t\t\t\t\t\t\t\t\"y-layer--contained\": props.contained,\n\t\t\t\t\t\t\t\t\t\t...computedClass.value,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tthemeClasses.value,\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\tonMouseenter={onMouseenter}\n\t\t\t\t\t\t\t\tonMouseleave={onMouseleave}\n\t\t\t\t\t\t\t\tstyle={computedStyle.value}\n\t\t\t\t\t\t\t\tref={root$}\n\t\t\t\t\t\t\t\t{...attrs}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Transition name=\"fade\" appear>\n\t\t\t\t\t\t\t\t\t{active.value && props.scrim && (\n\t\t\t\t\t\t\t\t\t\t// biome-ignore lint/a11y/noStaticElementInteractions: <explanation>\n\t\t\t\t\t\t\t\t\t\t// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclass=\"y-layer__scrim\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ \"--y-layer-scrim-opacity\": props.scrimOpacity }}\n\t\t\t\t\t\t\t\t\t\t\tonClick={onClickScrim}\n\t\t\t\t\t\t\t\t\t\t\tonKeydown={noop()}\n\t\t\t\t\t\t\t\t\t\t\tonKeyup={noop()}\n\t\t\t\t\t\t\t\t\t\t\tref=\"scrim$\"\n\t\t\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</Transition>\n\t\t\t\t\t\t\t\t<PolyTransition\n\t\t\t\t\t\t\t\t\tonAfterEnter={onAfterEnter}\n\t\t\t\t\t\t\t\t\tonAfterLeave={onAfterLeave}\n\t\t\t\t\t\t\t\t\tappear\n\t\t\t\t\t\t\t\t\t{...polyTransitionBindProps.value}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tv-show={active.value}\n\t\t\t\t\t\t\t\t\t\tv-complement-click={{ ...complementClickOption }}\n\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\"y-layer__content\": true,\n\t\t\t\t\t\t\t\t\t\t\t...computedContentClasses.value,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tstyle={[\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t...dimensionStyles.value,\n\t\t\t\t\t\t\t\t\t\t\t\t...coordinateStyles.value,\n\t\t\t\t\t\t\t\t\t\t\t\t...props.contentStyles,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t\t{...contentEvents.value}\n\t\t\t\t\t\t\t\t\t\tref={content$}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{slots.default?.({ active: active.value })}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</PolyTransition>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Teleport>\n\t\t\t\t</>\n\t\t\t);\n\t\t});\n\n\t\treturn {\n\t\t\tcomplementClickOption,\n\t\t\tlayerGroup,\n\t\t\tactive,\n\t\t\tfinish,\n\t\t\trendered,\n\t\t\tlazyValue,\n\t\t\tonAfterUpdate: onAfterUpdate as () => void,\n\t\t\tscrim$,\n\t\t\tcontent$,\n\t\t\tbase$,\n\t\t\tbaseEl,\n\t\t\tbaseFromSlotEl,\n\t\t\tpolyTransitionBindProps,\n\t\t\tcoordinateStyles,\n\t\t\tlayerGroupState,\n\t\t\tgetActiveLayers,\n\t\t\tcoordination,\n\t\t};\n\t},\n});\n\nexport type YLayer = InstanceType<typeof YLayer>;\n"],"mappings":"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","ignoreList":[]}

package/lib/composables/coordinate/index.js

@@ -1,4 +1,4 @@
-import { onScopeDispose, ref, watch } from 'vue';
+import { onScopeDispose, ref, watch } from "vue";
 import { propsFactory } from "../../util/component/index.js";
 import { useToggleScope } from "../scope.js";
 import { applyArrangement } from "./arrangement.js";
@@ -10,19 +10,19 @@ const coordinateStrategies = {
 export const pressCoordinateProps = propsFactory({
   coordinateStrategy: {
     type: [String, Function],
-    default: 'arrangement'
+    default: "arrangement"
   },
   position: {
     type: String,
-    default: 'default'
+    default: "default"
   },
   align: {
     type: String,
-    default: 'start'
+    default: "start"
   },
   origin: {
     type: String,
-    default: 'auto'
+    default: "auto"
   },
   offset: {
     type: [Number, String, Array]
@@ -31,35 +31,45 @@ export const pressCoordinateProps = propsFactory({
     type: [Number, String, Array],
     default: 16
   }
-}, 'Coordinate');
+}, "Coordinate");
 export function useCoordinate(props, state) {
   const updateCoordinate = ref();
-  const coordinate = ref();
+  const coordination = ref({
+    side: '',
+    align: '',
+    offset: [0, 0],
+    rect: {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    }
+  });
   const coordinateStyles = ref({});
   useToggleScope(() => !!(state.active.value && props.coordinateStrategy), reset => {
     watch(() => props.coordinateStrategy, reset);
     onScopeDispose(() => {
       updateCoordinate.value = undefined;
     });
-    if (typeof props.coordinateStrategy === 'function') {
-      updateCoordinate.value = props.coordinateStrategy(props, state, coordinate, coordinateStyles)?.updateCoordinate;
+    if (typeof props.coordinateStrategy === "function") {
+      updateCoordinate.value = props.coordinateStrategy(props, state, coordination, coordinateStyles)?.updateCoordinate;
     } else {
       const strategy = coordinateStrategies[props.coordinateStrategy];
-      updateCoordinate.value = strategy?.(props, state, coordinate, coordinateStyles)?.updateCoordinate;
+      updateCoordinate.value = strategy?.(props, state, coordination, coordinateStyles)?.updateCoordinate;
     }
   });
-  window.addEventListener('resize', onResize, {
+  window.addEventListener("resize", onResize, {
     passive: true
   });
   onScopeDispose(() => {
-    window.removeEventListener('resize', onResize);
+    window.removeEventListener("resize", onResize);
     updateCoordinate.value = undefined;
   });
   function onResize(e) {
     updateCoordinate.value?.(e);
   }
   return {
-    coordinate,
+    coordination,
     coordinateStyles,
     updateCoordinate
   };

package/lib/composables/coordinate/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["onScopeDispose","ref","watch","propsFactory","useToggleScope","applyArrangement","applyLevitation","coordinateStrategies","levitation","arrangement","pressCoordinateProps","coordinateStrategy","type","String","Function","default","position","align","origin","offset","Number","Array","viewportMargin","useCoordinate","props","state","updateCoordinate","coordinate","coordinateStyles","active","value","reset","undefined","strategy","window","addEventListener","onResize","passive","removeEventListener","e"],"sources":["../../../src/composables/coordinate/index.ts"],"sourcesContent":["import type { PropType, Ref } from 'vue';\nimport { onScopeDispose, ref, watch } from 'vue';\n\nimport { CssProperties } from '@/types';\n\nimport { propsFactory } from '../../util/component';\nimport { Rect } from '../../util/rect';\nimport { useToggleScope } from '../scope';\nimport { applyArrangement } from './arrangement';\nimport { applyLevitation } from './levitation';\nimport { CoordinateState } from './types';\n\nconst coordinateStrategies = {\n  levitation: applyLevitation,\n  arrangement: applyArrangement,\n};\n\nexport type CoordinateStrategyFn = (\n  props: any,\n  state: CoordinateState,\n  coordinate: Ref<Rect | undefined>,\n  coordinateStyles: Ref<CssProperties>,\n) => undefined | { updateCoordinate: (e: Event) => void };\n\nexport const pressCoordinateProps = propsFactory(\n  {\n    coordinateStrategy: {\n      type: [String, Function] as PropType<\n        keyof typeof coordinateStrategies | CoordinateStrategyFn\n      >,\n      default: 'arrangement',\n    },\n    position: {\n      type: String as PropType<\n        'default' | 'top' | 'end' | 'right' | 'bottom' | 'left' | 'start'\n      >,\n      default: 'default',\n    },\n    align: {\n      type: String as PropType<'start' | 'center' | 'end' | 'top' | 'bottom'>,\n      default: 'start',\n    },\n    origin: {\n      type: String,\n      default: 'auto',\n    },\n    offset: {\n      type: [Number, String, Array] as PropType<number | string | number[]>,\n    },\n    viewportMargin: {\n      type: [Number, String, Array],\n      default: 16,\n    },\n  },\n  'Coordinate',\n);\n\nexport function useCoordinate(props: any, state: CoordinateState) {\n  const updateCoordinate = ref<(e: Event) => void>();\n  const coordinate = ref<Rect | undefined>();\n  const coordinateStyles = ref<CssProperties>({});\n\n  useToggleScope(\n    () => !!(state.active.value && props.coordinateStrategy),\n    (reset) => {\n      watch(() => props.coordinateStrategy, reset);\n      onScopeDispose(() => {\n        updateCoordinate.value = undefined;\n      });\n\n      if (typeof props.coordinateStrategy === 'function') {\n        updateCoordinate.value = props.coordinateStrategy(\n          props,\n          state,\n          coordinate,\n          coordinateStyles,\n        )?.updateCoordinate;\n      } else {\n        const strategy =\n          coordinateStrategies[\n            props.coordinateStrategy as keyof typeof coordinateStrategies\n          ];\n        updateCoordinate.value = strategy?.(\n          props,\n          state,\n          coordinate,\n          coordinateStyles,\n        )?.updateCoordinate;\n      }\n    },\n  );\n\n  window.addEventListener('resize', onResize, { passive: true });\n\n  onScopeDispose(() => {\n    window.removeEventListener('resize', onResize);\n    updateCoordinate.value = undefined;\n  });\n\n  function onResize(e: Event) {\n    updateCoordinate.value?.(e);\n  }\n\n  return {\n    coordinate,\n    coordinateStyles,\n    updateCoordinate,\n  };\n}\n"],"mappings":"AACA,SAASA,cAAc,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AAAC,SAIxCC,YAAY;AAAA,SAEZC,cAAc;AAAA,SACdC,gBAAgB;AAAA,SAChBC,eAAe;AAGxB,MAAMC,oBAAoB,GAAG;EAC3BC,UAAU,EAAEF,eAAe;EAC3BG,WAAW,EAAEJ;AACf,CAAC;AASD,OAAO,MAAMK,oBAAoB,GAAGP,YAAY,CAC9C;EACEQ,kBAAkB,EAAE;IAClBC,IAAI,EAAE,CAACC,MAAM,EAAEC,QAAQ,CAEtB;IACDC,OAAO,EAAE;EACX,CAAC;EACDC,QAAQ,EAAE;IACRJ,IAAI,EAAEC,MAEL;IACDE,OAAO,EAAE;EACX,CAAC;EACDE,KAAK,EAAE;IACLL,IAAI,EAAEC,MAAiE;IACvEE,OAAO,EAAE;EACX,CAAC;EACDG,MAAM,EAAE;IACNN,IAAI,EAAEC,MAAM;IACZE,OAAO,EAAE;EACX,CAAC;EACDI,MAAM,EAAE;IACNP,IAAI,EAAE,CAACQ,MAAM,EAAEP,MAAM,EAAEQ,KAAK;EAC9B,CAAC;EACDC,cAAc,EAAE;IACdV,IAAI,EAAE,CAACQ,MAAM,EAAEP,MAAM,EAAEQ,KAAK,CAAC;IAC7BN,OAAO,EAAE;EACX;AACF,CAAC,EACD,YACF,CAAC;AAED,OAAO,SAASQ,aAAaA,CAACC,KAAU,EAAEC,KAAsB,EAAE;EAChE,MAAMC,gBAAgB,GAAGzB,GAAG,CAAqB,CAAC;EAClD,MAAM0B,UAAU,GAAG1B,GAAG,CAAmB,CAAC;EAC1C,MAAM2B,gBAAgB,GAAG3B,GAAG,CAAgB,CAAC,CAAC,CAAC;EAE/CG,cAAc,CACZ,MAAM,CAAC,EAAEqB,KAAK,CAACI,MAAM,CAACC,KAAK,IAAIN,KAAK,CAACb,kBAAkB,CAAC,EACvDoB,KAAK,IAAK;IACT7B,KAAK,CAAC,MAAMsB,KAAK,CAACb,kBAAkB,EAAEoB,KAAK,CAAC;IAC5C/B,cAAc,CAAC,MAAM;MACnB0B,gBAAgB,CAACI,KAAK,GAAGE,SAAS;IACpC,CAAC,CAAC;IAEF,IAAI,OAAOR,KAAK,CAACb,kBAAkB,KAAK,UAAU,EAAE;MAClDe,gBAAgB,CAACI,KAAK,GAAGN,KAAK,CAACb,kBAAkB,CAC/Ca,KAAK,EACLC,KAAK,EACLE,UAAU,EACVC,gBACF,CAAC,EAAEF,gBAAgB;IACrB,CAAC,MAAM;MACL,MAAMO,QAAQ,GACZ1B,oBAAoB,CAClBiB,KAAK,CAACb,kBAAkB,CACzB;MACHe,gBAAgB,CAACI,KAAK,GAAGG,QAAQ,GAC/BT,KAAK,EACLC,KAAK,EACLE,UAAU,EACVC,gBACF,CAAC,EAAEF,gBAAgB;IACrB;EACF,CACF,CAAC;EAEDQ,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEC,QAAQ,EAAE;IAAEC,OAAO,EAAE;EAAK,CAAC,CAAC;EAE9DrC,cAAc,CAAC,MAAM;IACnBkC,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEF,QAAQ,CAAC;IAC9CV,gBAAgB,CAACI,KAAK,GAAGE,SAAS;EACpC,CAAC,CAAC;EAEF,SAASI,QAAQA,CAACG,CAAQ,EAAE;IAC1Bb,gBAAgB,CAACI,KAAK,GAAGS,CAAC,CAAC;EAC7B;EAEA,OAAO;IACLZ,UAAU;IACVC,gBAAgB;IAChBF;EACF,CAAC;AACH","ignoreList":[]}
+{"version":3,"file":"index.js","names":["onScopeDispose","ref","watch","propsFactory","useToggleScope","applyArrangement","applyLevitation","coordinateStrategies","levitation","arrangement","pressCoordinateProps","coordinateStrategy","type","String","Function","default","position","align","origin","offset","Number","Array","viewportMargin","useCoordinate","props","state","updateCoordinate","coordination","side","rect","x","y","width","height","coordinateStyles","active","value","reset","undefined","strategy","window","addEventListener","onResize","passive","removeEventListener","e"],"sources":["../../../src/composables/coordinate/index.ts"],"sourcesContent":["import type { PropType, Ref } from \"vue\";\nimport { onScopeDispose, ref, watch } from \"vue\";\n\nimport type { CssProperties } from \"@/types\";\n\nimport { propsFactory } from \"../../util/component\";\nimport type { Rect } from \"../../util/rect\";\nimport { useToggleScope } from \"../scope\";\nimport { applyArrangement } from \"./arrangement\";\nimport { applyLevitation } from \"./levitation\";\nimport type { CoordinateState } from \"./types\";\n\nconst coordinateStrategies = {\n\tlevitation: applyLevitation,\n\tarrangement: applyArrangement,\n};\n\nexport type CoordinateStrategyFn = (\n\tprops: any,\n\tstate: CoordinateState,\n\tcoordination: Ref<any>,\n\tcoordinateStyles: Ref<CssProperties>,\n) => undefined | { updateCoordinate: (e: Event) => void };\n\nexport const pressCoordinateProps = propsFactory(\n\t{\n\t\tcoordinateStrategy: {\n\t\t\ttype: [String, Function] as PropType<\n\t\t\t\tkeyof typeof coordinateStrategies | CoordinateStrategyFn\n\t\t\t>,\n\t\t\tdefault: \"arrangement\",\n\t\t},\n\t\tposition: {\n\t\t\ttype: String as PropType<\n\t\t\t\t\"default\" | \"top\" | \"end\" | \"right\" | \"bottom\" | \"left\" | \"start\"\n\t\t\t>,\n\t\t\tdefault: \"default\",\n\t\t},\n\t\talign: {\n\t\t\ttype: String as PropType<\"start\" | \"center\" | \"end\" | \"top\" | \"bottom\">,\n\t\t\tdefault: \"start\",\n\t\t},\n\t\torigin: {\n\t\t\ttype: String,\n\t\t\tdefault: \"auto\",\n\t\t},\n\t\toffset: {\n\t\t\ttype: [Number, String, Array] as PropType<number | string | number[]>,\n\t\t},\n\t\tviewportMargin: {\n\t\t\ttype: [Number, String, Array],\n\t\t\tdefault: 16,\n\t\t},\n\t},\n\t\"Coordinate\",\n);\n\nexport function useCoordinate(props: any, state: CoordinateState) {\n\tconst updateCoordinate = ref<(e: Event) => void>();\n\tconst coordination = ref<any>({\n\t\tside: '',\n\t\talign: '',\n\t\toffset: [0, 0],\n\t\trect: {\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t\twidth: 0,\n\t\t\theight: 0\n\t\t}\n\t});\n\tconst coordinateStyles = ref<CssProperties>({});\n\n\tuseToggleScope(\n\t\t() => !!(state.active.value && props.coordinateStrategy),\n\t\t(reset) => {\n\t\t\twatch(() => props.coordinateStrategy, reset);\n\t\t\tonScopeDispose(() => {\n\t\t\t\tupdateCoordinate.value = undefined;\n\t\t\t});\n\n\t\t\tif (typeof props.coordinateStrategy === \"function\") {\n\t\t\t\tupdateCoordinate.value = props.coordinateStrategy(\n\t\t\t\t\tprops,\n\t\t\t\t\tstate,\n\t\t\t\t\tcoordination,\n\t\t\t\t\tcoordinateStyles,\n\t\t\t\t)?.updateCoordinate;\n\t\t\t} else {\n\t\t\t\tconst strategy =\n\t\t\t\t\tcoordinateStrategies[\n\t\t\t\t\t\tprops.coordinateStrategy as keyof typeof coordinateStrategies\n\t\t\t\t\t];\n\t\t\t\tupdateCoordinate.value = strategy?.(\n\t\t\t\t\tprops,\n\t\t\t\t\tstate,\n\t\t\t\t\tcoordination,\n\t\t\t\t\tcoordinateStyles,\n\t\t\t\t)?.updateCoordinate;\n\t\t\t}\n\t\t},\n\t);\n\n\twindow.addEventListener(\"resize\", onResize, { passive: true });\n\n\tonScopeDispose(() => {\n\t\twindow.removeEventListener(\"resize\", onResize);\n\t\tupdateCoordinate.value = undefined;\n\t});\n\n\tfunction onResize(e: Event) {\n\t\tupdateCoordinate.value?.(e);\n\t}\n\n\treturn {\n\t\tcoordination,\n\t\tcoordinateStyles,\n\t\tupdateCoordinate,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/composables/coordinate/levitation.js

@@ -1,38 +1,60 @@
-import { computed, nextTick, onScopeDispose, ref, watch } from 'vue';
+import { computed, nextTick, onScopeDispose, ref, watch } from "vue";
 import { flipAlign, flipCorner, flipSide, getAxis, parseAnchor } from "../../util/anchor.js";
 import { clamp } from "../../util/common.js";
 import { $computed } from "../../util/reactivity.js";
-import { MutableRect, getOverflow } from "../../util/rect.js";
+import { getOverflow, MutableRect } from "../../util/rect.js";
 import { getScrollParents } from "../../util/scroll.js";
 import { getBoundingPureRect, pixelCeil, pixelRound, toStyleSizeValue } from "../../util/ui.js";
 import { anchorToPoint, getOffset } from "./utils/point.js";
-export function applyLevitation(props, state, coordinate, coordinateStyles) {
+export function applyLevitation(props, state, coordination, coordinateStyles) {
   const {
     contentEl,
     base,
     active
   } = state;
   const isRtl = ref(false);
+  const isFlipped = ref([false, false]);
 
   /* Content Limitations */
-  const [minWidth, minHeight, maxWidth, maxHeight] = ['minWidth', 'minHeight', 'maxWidth', 'maxHeight'].map(key => {
+  const [minWidth, minHeight, maxWidth, maxHeight] = ["minWidth", "minHeight", "maxWidth", "maxHeight"].map(key => {
     return computed(() => {
       const val = parseFloat(props[key]);
       return isNaN(val) ? Infinity : val;
     });
   });
+  const {
+    preferredAnchor,
+    preferredOrigin
+  } = $computed(() => {
+    const location = `${props.position} ${props.align}`;
+    const parsedAnchor = parseAnchor(location, false);
+    const parsedOrigin = props.origin === "overlap" ? parsedAnchor : props.origin === "auto" ? flipSide(parsedAnchor) : parseAnchor(props.origin, false);
+
+    // Some combinations of props may produce an invalid origin
+    if (parsedAnchor.side === parsedOrigin.side && parsedAnchor.align === flipAlign(parsedOrigin).align) {
+      return {
+        preferredAnchor: flipCorner(parsedAnchor),
+        preferredOrigin: flipCorner(parsedOrigin)
+      };
+    } else {
+      return {
+        preferredAnchor: parsedAnchor,
+        preferredOrigin: parsedOrigin
+      };
+    }
+  });
 
   /* Offset */
   const offset = computed(() => {
     if (Array.isArray(props.offset)) {
       return props.offset;
     }
-    if (typeof props.offset === 'string') {
-      const offset = props.offset.split(' ').map(parseFloat);
+    if (typeof props.offset === "string") {
+      const offset = props.offset.split(" ").map(parseFloat);
       if (offset.length < 2) offset.push(0);
       return offset;
     }
-    return typeof props.offset === 'number' ? [props.offset, 0] : [0, 0];
+    return typeof props.offset === "number" ? [props.offset, 0] : [0, 0];
   });
 
   /* Viewport Margin */
@@ -40,12 +62,12 @@ export function applyLevitation(props, state, coordinate, coordinateStyles) {
     if (Array.isArray(props.viewportMargin)) {
       return props.viewportMargin;
     }
-    if (typeof props.viewportMargin === 'string') {
-      const offset = props.viewportMargin.split(' ').map(parseFloat);
+    if (typeof props.viewportMargin === "string") {
+      const offset = props.viewportMargin.split(" ").map(parseFloat);
       if (offset.length < 2) offset.push(0);
       return offset;
     }
-    return typeof props.viewportMargin === 'number' ? [props.viewportMargin, 0] : [0, 0];
+    return typeof props.viewportMargin === "number" ? [props.viewportMargin, 0] : [0, 0];
   });
 
   /* Observing Update */
@@ -68,8 +90,8 @@ export function applyLevitation(props, state, coordinate, coordinateStyles) {
   });
   function getIgnoreInsetRect(el) {
     const rect = getBoundingPureRect(el);
-    rect.x -= parseFloat(el.style.left || '0');
-    rect.y -= parseFloat(el.style.top || '0');
+    rect.x -= parseFloat(el.style.left || "0");
+    rect.y -= parseFloat(el.style.top || "0");
     return rect;
   }
   function updateCoordinate() {
@@ -77,7 +99,9 @@ export function applyLevitation(props, state, coordinate, coordinateStyles) {
     const $base = base.value;
     const $content = contentEl.value;
     requestAnimationFrame(() => {
-      requestAnimationFrame(() => observe = true);
+      requestAnimationFrame(() => {
+        observe = true;
+      });
     });
     if (!$base || !$content) return;
     const baseRect = Array.isArray($base) ? new MutableRect({
@@ -117,27 +141,6 @@ export function applyLevitation(props, state, coordinate, coordinateStyles) {
     viewport.y += viewportMargin.value[1];
     viewport.width -= viewportMargin.value[0] * 2;
     viewport.height -= viewportMargin.value[1] * 2;
-    const {
-      preferredAnchor,
-      preferredOrigin
-    } = $computed(() => {
-      const location = `${props.position} ${props.align}`;
-      const parsedAnchor = parseAnchor(location, false);
-      const parsedOrigin = props.origin === 'overlap' ? parsedAnchor : props.origin === 'auto' ? flipSide(parsedAnchor) : parseAnchor(props.origin, false);
-
-      // Some combinations of props may produce an invalid origin
-      if (parsedAnchor.side === parsedOrigin.side && parsedAnchor.align === flipAlign(parsedOrigin).align) {
-        return {
-          preferredAnchor: flipCorner(parsedAnchor),
-          preferredOrigin: flipCorner(parsedOrigin)
-        };
-      } else {
-        return {
-          preferredAnchor: parsedAnchor,
-          preferredOrigin: parsedOrigin
-        };
-      }
-    });
     let placement = {
       anchor: preferredAnchor.value,
       origin: preferredOrigin.value
@@ -151,32 +154,41 @@ export function applyLevitation(props, state, coordinate, coordinateStyles) {
         y
       } = getOffset(targetPoint, contentPoint);
       switch (_placement.anchor.side) {
-        case 'top':
+        case "top":
           y -= offset.value[0];
           break;
-        case 'bottom':
+        case "bottom":
           y += offset.value[0];
           break;
-        case 'left':
+        case "left":
           x -= offset.value[0];
           break;
-        case 'right':
+        case "right":
           x += offset.value[0];
           break;
       }
       switch (_placement.anchor.align) {
-        case 'top':
+        case "top":
           y -= offset.value[1];
           break;
-        case 'bottom':
+        case "bottom":
           y += offset.value[1];
           break;
-        case 'left':
+        case "left":
           x -= offset.value[1];
           break;
-        case 'right':
+        case "right":
           x += offset.value[1];
           break;
+        case "center":
+          {
+            if (_placement.anchor.side === "top" || _placement.anchor.side === "bottom") {
+              x += offset.value[1];
+            } else {
+              y += offset.value[1];
+            }
+            break;
+          }
       }
       box.x += x;
       box.y += y;
@@ -220,8 +232,8 @@ export function applyLevitation(props, state, coordinate, coordinateStyles) {
         const hasOverflowX = overflows.x.before || overflows.x.after;
         const hasOverflowY = overflows.y.before || overflows.y.after;
         let reset = false;
-        ['x', 'y'].forEach(key => {
-          if (key === 'x' && hasOverflowX && !flipped.x || key === 'y' && hasOverflowY && !flipped.y) {
+        ["x", "y"].forEach(key => {
+          if (key === "x" && hasOverflowX && !flipped.x || key === "y" && hasOverflowY && !flipped.y) {
             const newPlacement = {
               anchor: {
                 ...placement.anchor
@@ -230,7 +242,7 @@ export function applyLevitation(props, state, coordinate, coordinateStyles) {
                 ...placement.origin
               }
             };
-            const flip = key === 'x' ? axis === 'y' ? flipAlign : flipSide : axis === 'y' ? flipSide : flipAlign;
+            const flip = key === "x" ? axis === "y" ? flipAlign : flipSide : axis === "y" ? flipSide : flipAlign;
             newPlacement.anchor = flip(newPlacement.anchor);
             newPlacement.origin = flip(newPlacement.origin);
             const {
@@ -276,22 +288,36 @@ export function applyLevitation(props, state, coordinate, coordinateStyles) {
       break;
     }
     const axis = getAxis(placement.anchor);
+    coordination.value = {
+      side: placement.anchor.side,
+      align: placement.anchor.align,
+      rect: new MutableRect({
+        x,
+        y,
+        width: contentRect.width,
+        height: contentRect.height
+      }),
+      offset: [0, 0]
+    };
     Object.assign(coordinateStyles.value, {
-      '--y-levitation-anchor-origin': `${placement.anchor.side} ${placement.anchor.align}`,
+      "--y-levitation-anchor-origin": `${placement.anchor.side} ${placement.anchor.align}`,
       transformOrigin: `${placement.origin.side} ${placement.origin.align}`,
       top: toStyleSizeValue(pixelRound(y)),
       left: isRtl.value ? undefined : toStyleSizeValue(pixelRound(x)),
       right: isRtl.value ? toStyleSizeValue(pixelRound(-x)) : undefined,
-      minWidth: toStyleSizeValue(axis === 'y' ? Math.min(minWidth.value, baseRect.width) : minWidth.value),
+      minWidth: toStyleSizeValue(axis === "y" ? Math.min(minWidth.value, baseRect.width) : minWidth.value),
       maxWidth: toStyleSizeValue(pixelCeil(clamp(available.x, minWidth.value === Infinity ? 0 : minWidth.value, maxWidth.value))),
       maxHeight: toStyleSizeValue(pixelCeil(clamp(available.y, minHeight.value === Infinity ? 0 : minHeight.value, maxHeight.value)))
     });
+    isFlipped.value = [flipped.x, flipped.y];
     return {
       available,
-      contentRect
+      contentRect,
+      flipped,
+      placement
     };
   }
-  watch(() => [props.offset, props.minWidth, props.minHeight, props.maxWidth, props.maxHeight], () => updateCoordinate());
+  watch(() => [props.offset, props.minWidth, props.minHeight, props.maxWidth, props.maxHeight, preferredAnchor.value, preferredOrigin.value], () => updateCoordinate());
   nextTick(() => {
     const result = updateCoordinate();
     if (!result) return;
@@ -309,7 +335,10 @@ export function applyLevitation(props, state, coordinate, coordinateStyles) {
     }
   });
   return {
-    updateCoordinate
+    updateCoordinate,
+    isFlipped,
+    preferredAnchor,
+    preferredOrigin
   };
 }
 //# sourceMappingURL=levitation.js.map