@destyler/popper 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -1,414 +1,8 @@
-import { defineComponent, ref, watch, h, computed, watchEffect, mergeProps } from 'vue';
-import { createContext, computedEager } from '@destyler/shared';
-import { DestylerPrimitive } from '@destyler/primitive';
-import { useForwardExpose, useSize } from '@destyler/composition';
-import { offset, shift, limitShift, flip, size, arrow, hide, useFloating, autoUpdate } from '@floating-ui/vue';
-import { DestylerArrow } from '@destyler/arrow';
-
-const [injectPopperRootContext, providePopperRootContext] = createContext("DestylerPopperRoot");
-const DestylerPopperRoot = defineComponent({
-  name: "DestylerPopperRoot",
-  setup() {
-    const anchor = 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 = defineComponent({
-  name: "DestylerPopperAnchor",
-  props: destylerPopperAnchorProps,
-  setup(props) {
-    const { forwardRef, currentElement } = useForwardExpose();
-    const rootContext = injectPopperRootContext();
-    watch(currentElement, () => {
-      rootContext.onAnchorChange(props.element ?? currentElement.value);
-    });
-    return {
-      forwardRef
-    };
-  },
-  render() {
-    return h(DestylerPrimitive, {
-      as: this.$props.as,
-      asChild: this.$props.asChild,
-      ref: (el) => this.forwardRef(el)
-    }, {
-      default: () => 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] = 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 = defineComponent({
-  name: "DestylerPopperContent",
-  inheritAttrs: false,
-  props: destylerPopperContentProps,
-  setup(props, { attrs }) {
-    const rootContext = injectPopperRootContext();
-    const { forwardRef, currentElement: contentElement } = useForwardExpose();
-    const floatingRef = ref();
-    const arrow$1 = ref();
-    const { width: arrowWidth, height: arrowHeight } = useSize(arrow$1);
-    const desiredPlacement = computed(() => props.side + (props.align !== "center" ? `-${props.align}` : ""));
-    const collisionPadding = computed(() => {
-      return typeof props.collisionPadding === "number" ? props.collisionPadding : { top: 0, right: 0, bottom: 0, left: 0, ...props.collisionPadding };
-    });
-    const boundary = computed(() => {
-      return Array.isArray(props.collisionBoundary) ? props.collisionBoundary : [props.collisionBoundary];
-    });
-    const detectOverflowOptions = 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 = computedEager(() => {
-      return [
-        offset({
-          mainAxis: props.sideOffset + arrowHeight.value,
-          alignmentAxis: props.alignOffset
-        }),
-        props.avoidCollisions && shift({
-          mainAxis: true,
-          crossAxis: !!props.prioritizePosition,
-          limiter: props.sticky === "partial" ? limitShift() : void 0,
-          ...detectOverflowOptions.value
-        }),
-        !props.prioritizePosition && props.avoidCollisions && flip({
-          ...detectOverflowOptions.value
-        }),
-        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$1.value && arrow({ element: arrow$1.value, padding: props.arrowPadding }),
-        transformOrigin({
-          arrowWidth: arrowWidth.value,
-          arrowHeight: arrowHeight.value
-        }),
-        props.hideWhenDetached && hide({ strategy: "referenceHidden", ...detectOverflowOptions.value })
-      ];
-    });
-    const { floatingStyles, placement, isPositioned, middlewareData } = useFloating(
-      rootContext.anchor,
-      floatingRef,
-      {
-        strategy: "fixed",
-        placement: desiredPlacement,
-        whileElementsMounted: (...args) => {
-          const cleanup = autoUpdate(...args, {
-            animationFrame: props.updatePositionStrategy === "always"
-          });
-          return cleanup;
-        },
-        middleware: computedMiddleware
-      }
-    );
-    const placedSide = computed(() => getSideAndAlignFromPlacement(placement.value)[0]);
-    const placedAlign = computed(() => getSideAndAlignFromPlacement(placement.value)[1]);
-    watchEffect(() => {
-      if (isPositioned.value)
-        props.onPlaced?.();
-    });
-    const cannotCenterArrow = computed(
-      () => middlewareData.value.arrow?.centerOffset !== 0
-    );
-    const contentZIndex = ref("");
-    watchEffect(() => {
-      if (contentElement.value)
-        contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex;
-    });
-    const arrowX = computed(() => middlewareData.value.arrow?.x ?? 0);
-    const arrowY = computed(() => middlewareData.value.arrow?.y ?? 0);
-    providePopperContentContext({
-      placedSide,
-      onArrowChange: (element) => arrow$1.value = element,
-      arrowX,
-      arrowY,
-      shouldHideArrow: cannotCenterArrow
-    });
-    return {
-      floatingRef,
-      floatingStyles,
-      isPositioned,
-      contentZIndex,
-      middlewareData,
-      forwardRef,
-      placedSide,
-      placedAlign,
-      attrStyle: attrs.style
-    };
-  },
-  render() {
-    return h("div", {
-      "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(" ")
-      }
-    }, h(DestylerPrimitive, mergeProps(this.$attrs, {
-      "ref": (el) => this.forwardRef(el),
-      "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
-      }
-    }), {
-      default: () => 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 = defineComponent({
-  name: "DestylerPopperArrow",
-  inheritAttrs: false,
-  props: destylerPopperArrowProps,
-  setup() {
-    const contentContext = injectPopperContentContext();
-    const baseSide = computed(() => OPPOSITE_SIDE[contentContext.placedSide.value]);
-    return {
-      contentContext,
-      baseSide
-    };
-  },
-  render() {
-    return 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
-      }
-    }, h(DestylerArrow, mergeProps(this.$attrs, {
-      as: this.$props.as,
-      asChild: this.$props.asChild,
-      width: this.$props.width,
-      height: this.$props.height,
-      style: {
-        display: "block"
-      }
-    }), {
-      default: () => this.$slots.default?.()
-    }));
-  }
-});
-
-export { DestylerPopperAnchor, DestylerPopperArrow, DestylerPopperContent, DestylerPopperRoot };
+export { PopperAnchor, PopperArrow, PopperContent, PopperRoot, popperAnchorProps, popperArrowProps, popperContentProps } from './component.mjs';
+import 'vue';
+import '@destyler/shared';
+import '@destyler/primitive';
+import '@destyler/composition';
+import '@floating-ui/vue';
+import '@destyler/arrow';
+import '@destyler/arrow/component';

package/dist/resolver.cjs

@@ -4,12 +4,12 @@ const name = "@destyler/popper";
 
 const packageName = name;
 const popperComponentName = [
-  "DestylerPopperRoot",
-  "DestylerPopperAnchor",
-  "DestylerPopperContent",
-  "DestylerPopperArrow"
+  "PopperRoot",
+  "PopperAnchor",
+  "PopperContent",
+  "PopperArrow"
 ];
-function DestylerPopperResolver() {
+function PopperResolver() {
   return {
     type: "component",
     resolve: (name2) => {
@@ -19,5 +19,5 @@ function DestylerPopperResolver() {
   };
 }
 
-exports.DestylerPopperResolver = DestylerPopperResolver;
+exports.PopperResolver = PopperResolver;
 exports.popperComponentName = popperComponentName;

package/dist/resolver.d.cts

@@ -1,6 +1,6 @@
 import { ComponentResolver } from 'unplugin-vue-components';
 
 declare const popperComponentName: string[];
-declare function DestylerPopperResolver(): ComponentResolver;
+declare function PopperResolver(): ComponentResolver;
 
-export { DestylerPopperResolver, popperComponentName };
+export { PopperResolver, popperComponentName };

package/dist/resolver.d.mts

@@ -1,6 +1,6 @@
 import { ComponentResolver } from 'unplugin-vue-components';
 
 declare const popperComponentName: string[];
-declare function DestylerPopperResolver(): ComponentResolver;
+declare function PopperResolver(): ComponentResolver;
 
-export { DestylerPopperResolver, popperComponentName };
+export { PopperResolver, popperComponentName };

package/dist/resolver.d.ts

@@ -1,6 +1,6 @@
 import { ComponentResolver } from 'unplugin-vue-components';
 
 declare const popperComponentName: string[];
-declare function DestylerPopperResolver(): ComponentResolver;
+declare function PopperResolver(): ComponentResolver;
 
-export { DestylerPopperResolver, popperComponentName };
+export { PopperResolver, popperComponentName };

package/dist/resolver.mjs

@@ -2,12 +2,12 @@ const name = "@destyler/popper";
 
 const packageName = name;
 const popperComponentName = [
-  "DestylerPopperRoot",
-  "DestylerPopperAnchor",
-  "DestylerPopperContent",
-  "DestylerPopperArrow"
+  "PopperRoot",
+  "PopperAnchor",
+  "PopperContent",
+  "PopperArrow"
 ];
-function DestylerPopperResolver() {
+function PopperResolver() {
   return {
     type: "component",
     resolve: (name2) => {
@@ -17,4 +17,4 @@ function DestylerPopperResolver() {
   };
 }
 
-export { DestylerPopperResolver, popperComponentName };
+export { PopperResolver, popperComponentName };

package/package.json

@@ -1,24 +1,22 @@
 {
   "name": "@destyler/popper",
-  "version": "0.0.2",
-  "description": "unstyled popper component for vue",
+  "type": "module",
+  "version": "0.0.4",
+  "description": "popper is a component that allows you to create popups, tooltips, and dropdowns.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     },
     "./resolver": {
-      "types": "./dist/resolver.d.ts",
-      "import": "./dist/resolver.mjs",
-      "require": "./dist/resolver.cjs"
+      "types": "./dist/resolver.d.mts",
+      "default": "./dist/resolver.mjs"
     },
     "./component": {
-      "types": "./dist/component.d.ts",
-      "import": "./dist/component.mjs",
-      "require": "./dist/component.cjs"
+      "types": "./dist/component.d.mts",
+      "default": "./dist/component.mjs"
     },
     "./*": "./*"
   },
@@ -30,17 +28,18 @@
     "dist"
   ],
   "peerDependencies": {
-    "vue": ">=3.3.4"
+    "vue": ">=3.4.21"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.0.4",
-    "@destyler/arrow": "0.0.2",
-    "@destyler/shared": "0.0.2",
-    "@destyler/primitive": "0.0.2",
-    "@destyler/composition": "0.0.2"
+    "@floating-ui/vue": "^1.0.6",
+    "@destyler/shared": "0.0.4",
+    "@destyler/composition": "0.0.4",
+    "@destyler/primitive": "0.0.4",
+    "@destyler/arrow": "0.0.4"
   },
   "scripts": {
     "clear": "rimraf ./dist",
-    "build": "pnpm run clear && unbuild"
+    "build": "pnpm run clear && unbuild",
+    "stub": "unbuild --stub"
   }
 }