@destyler/popper 0.0.1-beta.10

package/dist/component.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+const index = require('./index.cjs');
+require('vue');
+require('@destyler/shared');
+require('@destyler/primitive');
+require('@destyler/composition');
+require('@floating-ui/vue');
+require('@destyler/arrow');
+
+
+
+exports.DestylerPopperAnchor = index.DestylerPopperAnchor;
+exports.DestylerPopperArrow = index.DestylerPopperArrow;
+exports.DestylerPopperContent = index.DestylerPopperContent;
+exports.DestylerPopperRoot = index.DestylerPopperRoot;

package/dist/component.d.cts

@@ -0,0 +1,5 @@
+export { DestylerPopperAnchor, DestylerPopperAnchorProps, DestylerPopperArrow, DestylerPopperArrowProps, DestylerPopperContent, DestylerPopperContentProps, DestylerPopperRoot } from './index.cjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';
+import '@floating-ui/vue';

package/dist/component.d.mts

@@ -0,0 +1,5 @@
+export { DestylerPopperAnchor, DestylerPopperAnchorProps, DestylerPopperArrow, DestylerPopperArrowProps, DestylerPopperContent, DestylerPopperContentProps, DestylerPopperRoot } from './index.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';
+import '@floating-ui/vue';

package/dist/component.d.ts

@@ -0,0 +1,5 @@
+export { DestylerPopperAnchor, DestylerPopperAnchorProps, DestylerPopperArrow, DestylerPopperArrowProps, DestylerPopperContent, DestylerPopperContentProps, DestylerPopperRoot } from './index.js';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';
+import '@floating-ui/vue';

package/dist/component.mjs

@@ -0,0 +1,7 @@
+export { DestylerPopperAnchor, DestylerPopperArrow, DestylerPopperContent, DestylerPopperRoot } from './index.mjs';
+import 'vue';
+import '@destyler/shared';
+import '@destyler/primitive';
+import '@destyler/composition';
+import '@floating-ui/vue';
+import '@destyler/arrow';

package/dist/index.cjs

@@ -0,0 +1,418 @@
+'use strict';
+
+const vue = require('vue');
+const shared = require('@destyler/shared');
+const primitive = require('@destyler/primitive');
+const composition = require('@destyler/composition');
+const vue$1 = require('@floating-ui/vue');
+const arrow = require('@destyler/arrow');
+
+const [injectPopperRootContext, providePopperRootContext] = shared.createContext("DestylerPopperRoot");
+const DestylerPopperRoot = vue.defineComponent({
+  name: "DestylerPopperRoot",
+  setup() {
+    const anchor = vue.ref();
+    providePopperRootContext({
+      anchor,
+      onAnchorChange: (element) => anchor.value = element
+    });
+  },
+  render() {
+    return this.$slots.default?.();
+  }
+});
+
+const destylerPopperAnchorProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  element: {
+    type: Object
+  }
+};
+const DestylerPopperAnchor = vue.defineComponent({
+  name: "DestylerPopperAnchor",
+  props: destylerPopperAnchorProps,
+  setup(props) {
+    const { customElement, currentElement } = composition.useCustomElement();
+    const rootContext = injectPopperRootContext();
+    vue.watch(currentElement, () => {
+      rootContext.onAnchorChange(props.element ?? currentElement.value);
+    });
+    return {
+      customElement
+    };
+  },
+  render() {
+    return vue.h(primitive.DestylerPrimitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild,
+      ref: "customElement"
+    }, this.$slots.default?.());
+  }
+});
+
+function isNotNull(value) {
+  return value !== null;
+}
+function transformOrigin(options) {
+  return {
+    name: "transformOrigin",
+    options,
+    fn(data) {
+      const { placement, rects, middlewareData } = data;
+      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+      const isArrowHidden = cannotCenterArrow;
+      const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+      const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+      const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
+      const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+      const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+      let x = "";
+      let y = "";
+      if (placedSide === "bottom") {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${-arrowHeight}px`;
+      } else if (placedSide === "top") {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${rects.floating.height + arrowHeight}px`;
+      } else if (placedSide === "right") {
+        x = `${-arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      } else if (placedSide === "left") {
+        x = `${rects.floating.width + arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      }
+      return { data: { x, y } };
+    }
+  };
+}
+function getSideAndAlignFromPlacement(placement) {
+  const [side, align = "center"] = placement.split("-");
+  return [side, align];
+}
+
+const [injectPopperContentContext, providePopperContentContext] = shared.createContext("DestylerPopperContent");
+const destylerPopperContentProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  side: {
+    type: String,
+    required: false,
+    default: "bottom"
+  },
+  sideOffset: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  align: {
+    type: String,
+    required: false,
+    default: "center"
+  },
+  alignOffset: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  avoidCollisions: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  collisionBoundary: {
+    type: [Object, Array, null],
+    required: false,
+    default: () => []
+  },
+  collisionPadding: {
+    type: [Number, Object],
+    required: false,
+    default: 0
+  },
+  arrowPadding: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  sticky: {
+    type: String,
+    required: false,
+    default: "partial"
+  },
+  hideWhenDetached: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  updatePositionStrategy: {
+    type: String,
+    required: false,
+    default: "optimized"
+  },
+  onPlaced: {
+    type: Function,
+    required: false
+  },
+  prioritizePosition: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerPopperContent = vue.defineComponent({
+  name: "DestylerPopperContent",
+  inheritAttrs: false,
+  props: destylerPopperContentProps,
+  setup(props, { attrs }) {
+    const rootContext = injectPopperRootContext();
+    const forwardRef = composition.useForwardRef();
+    const { customElement, currentElement: contentElement } = composition.useCustomElement();
+    const floatingRef = vue.ref();
+    const arrow = vue.ref();
+    const { width: arrowWidth, height: arrowHeight } = composition.useSize(arrow);
+    const desiredPlacement = vue.computed(() => props.side + (props.align !== "center" ? `-${props.align}` : ""));
+    const collisionPadding = vue.computed(() => {
+      return typeof props.collisionPadding === "number" ? props.collisionPadding : { top: 0, right: 0, bottom: 0, left: 0, ...props.collisionPadding };
+    });
+    const boundary = vue.computed(() => {
+      return Array.isArray(props.collisionBoundary) ? props.collisionBoundary : [props.collisionBoundary];
+    });
+    const detectOverflowOptions = vue.computed(() => {
+      return {
+        padding: collisionPadding.value,
+        boundary: boundary.value.filter(isNotNull),
+        // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
+        altBoundary: boundary.value.length > 0
+      };
+    });
+    const computedMiddleware = shared.computedEager(() => {
+      return [
+        vue$1.offset({
+          mainAxis: props.sideOffset + arrowHeight.value,
+          alignmentAxis: props.alignOffset
+        }),
+        props.avoidCollisions && vue$1.shift({
+          mainAxis: true,
+          crossAxis: !!props.prioritizePosition,
+          limiter: props.sticky === "partial" ? vue$1.limitShift() : void 0,
+          ...detectOverflowOptions.value
+        }),
+        !props.prioritizePosition && props.avoidCollisions && vue$1.flip({
+          ...detectOverflowOptions.value
+        }),
+        vue$1.size({
+          ...detectOverflowOptions.value,
+          apply: ({ elements, rects, availableWidth, availableHeight }) => {
+            const { width: anchorWidth, height: anchorHeight } = rects.reference;
+            const contentStyle = elements.floating.style;
+            Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth}px`,
+              maxHeight: `${availableHeight}px`
+            });
+            contentStyle.setProperty(
+              "--destyler_popper_available_width",
+              `${availableWidth}px`
+            );
+            contentStyle.setProperty(
+              "--destyler_popper_available_height",
+              `${availableHeight}px`
+            );
+            contentStyle.setProperty(
+              "--destyler_popper_anchor_width",
+              `${anchorWidth}px`
+            );
+            contentStyle.setProperty(
+              "--destyler_popper_anchor_height",
+              `${anchorHeight}px`
+            );
+          }
+        }),
+        arrow.value && vue$1.arrow({ element: arrow.value, padding: props.arrowPadding }),
+        transformOrigin({
+          arrowWidth: arrowWidth.value,
+          arrowHeight: arrowHeight.value
+        }),
+        props.hideWhenDetached && vue$1.hide({ strategy: "referenceHidden", ...detectOverflowOptions.value })
+      ];
+    });
+    const { floatingStyles, placement, isPositioned, middlewareData } = vue$1.useFloating(
+      rootContext.anchor,
+      floatingRef,
+      {
+        strategy: "fixed",
+        placement: desiredPlacement,
+        whileElementsMounted: (...args) => {
+          const cleanup = vue$1.autoUpdate(...args, {
+            animationFrame: props.updatePositionStrategy === "always"
+          });
+          return cleanup;
+        },
+        middleware: computedMiddleware
+      }
+    );
+    const placedSide = vue.computed(() => getSideAndAlignFromPlacement(placement.value)[0]);
+    const placedAlign = vue.computed(() => getSideAndAlignFromPlacement(placement.value)[1]);
+    vue.watchEffect(() => {
+      if (isPositioned.value)
+        props.onPlaced?.();
+    });
+    const cannotCenterArrow = vue.computed(
+      () => middlewareData.value.arrow?.centerOffset !== 0
+    );
+    const contentZIndex = vue.ref("");
+    vue.watchEffect(() => {
+      if (contentElement.value)
+        contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex;
+    });
+    const arrowX = vue.computed(() => middlewareData.value.arrow?.x ?? 0);
+    const arrowY = vue.computed(() => middlewareData.value.arrow?.y ?? 0);
+    providePopperContentContext({
+      placedSide,
+      onArrowChange: (element) => arrow.value = element,
+      arrowX,
+      arrowY,
+      shouldHideArrow: cannotCenterArrow
+    });
+    return {
+      floatingRef,
+      floatingStyles,
+      isPositioned,
+      contentZIndex,
+      middlewareData,
+      forwardRef,
+      customElement,
+      placedSide,
+      placedAlign,
+      attrStyle: attrs.style
+    };
+  },
+  render() {
+    return vue.h("div", vue.mergeProps(this.$attrs, {
+      "data-destyler-popper-content-wrapper": "",
+      "ref": "floatingRef",
+      "style": {
+        ...this.floatingStyles,
+        transform: this.isPositioned ? this.floatingStyles.transform : "translate(0, -200%)",
+        minWidth: "max-content",
+        zIndex: this.contentZIndex,
+        ["--destyler_popper_transform_origin"]: [
+          this.middlewareData.transformOrigin?.x,
+          this.middlewareData.transformOrigin?.y
+        ].join(" ")
+      }
+    }), vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+      "ref": (vnode) => {
+        this.forwardRef(vnode);
+        this.customElement = vnode;
+      },
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "data-side": this.placedSide,
+      "data-align": this.placedAlign,
+      "style": {
+        animation: !this.isPositioned ? "none" : void 0,
+        opacity: this.middlewareData.hide?.referenceHidden ? 0 : void 0
+      }
+    }), this.$slots.default?.()));
+  }
+});
+
+const OPPOSITE_SIDE = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+const destylerPopperArrowProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  width: {
+    type: Number,
+    required: false,
+    default: 5
+  },
+  height: {
+    type: Number,
+    required: false,
+    default: 10
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "svg"
+  }
+};
+const DestylerPopperArrow = vue.defineComponent({
+  name: "DestylerPopperArrow",
+  inheritAttrs: false,
+  props: destylerPopperArrowProps,
+  setup() {
+    const contentContext = injectPopperContentContext();
+    const baseSide = vue.computed(() => OPPOSITE_SIDE[contentContext.placedSide.value]);
+    return {
+      contentContext,
+      baseSide
+    };
+  },
+  render() {
+    return vue.h("span", {
+      ref: (el) => {
+        this.contentContext.onArrowChange(el);
+        return void 0;
+      },
+      style: {
+        position: "absolute",
+        left: this.contentContext.arrowX?.value ? `${this.contentContext.arrowX?.value}px` : void 0,
+        top: this.contentContext.arrowY?.value ? `${this.contentContext.arrowY?.value}px` : void 0,
+        [this.baseSide]: 0,
+        transformOrigin: {
+          top: "",
+          right: "0 0",
+          bottom: "center 0",
+          left: "100% 0"
+        }[this.contentContext.placedSide.value],
+        transform: {
+          top: "translateY(100%)",
+          right: "translateY(50%) rotate(90deg) translateX(-50%)",
+          bottom: `rotate(180deg)`,
+          left: "translateY(50%) rotate(-90deg) translateX(50%)"
+        }[this.contentContext.placedSide.value],
+        visibility: this.contentContext.shouldHideArrow.value ? "hidden" : void 0
+      }
+    }, vue.h(arrow.DestylerArrow, vue.mergeProps(this.$attrs, {
+      as: this.$props.as,
+      asChild: this.$props.asChild,
+      width: this.$props.width,
+      height: this.$props.height,
+      style: {
+        display: "block"
+      }
+    }), this.$slots.default?.()));
+  }
+});
+
+exports.DestylerPopperAnchor = DestylerPopperAnchor;
+exports.DestylerPopperArrow = DestylerPopperArrow;
+exports.DestylerPopperContent = DestylerPopperContent;
+exports.DestylerPopperRoot = DestylerPopperRoot;