@destyler/popper 0.0.1-beta.9 → 0.0.2

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { defineComponent, ref, watch, h, computed, watchEffect, mergeProps } from 'vue';
 import { createContext, computedEager } from '@destyler/shared';
-import { destylerPrimitiveProps, DestylerPrimitive, destylerPrimitiveProp } from '@destyler/primitive';
-import { useCustomElement, useForwardRef, useSize } from '@destyler/composition';
+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 { destylerArrowProps, DestylerArrow } from '@destyler/arrow';
+import { DestylerArrow } from '@destyler/arrow';
 
 const [injectPopperRootContext, providePopperRootContext] = createContext("DestylerPopperRoot");
 const DestylerPopperRoot = defineComponent({
@@ -21,7 +21,16 @@ const DestylerPopperRoot = defineComponent({
 });
 
 const destylerPopperAnchorProps = {
-  ...destylerPrimitiveProps,
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
   element: {
     type: Object
   }
@@ -30,21 +39,23 @@ const DestylerPopperAnchor = defineComponent({
   name: "DestylerPopperAnchor",
   props: destylerPopperAnchorProps,
   setup(props) {
-    const { customElement, currentElement } = useCustomElement();
+    const { forwardRef, currentElement } = useForwardExpose();
     const rootContext = injectPopperRootContext();
     watch(currentElement, () => {
       rootContext.onAnchorChange(props.element ?? currentElement.value);
     });
     return {
-      customElement
+      forwardRef
     };
   },
   render() {
     return h(DestylerPrimitive, {
       as: this.$props.as,
       asChild: this.$props.asChild,
-      ref: "customElement"
-    }, this.$slots.default?.());
+      ref: (el) => this.forwardRef(el)
+    }, {
+      default: () => this.$slots.default?.()
+    });
   }
 });
 
@@ -91,7 +102,16 @@ function getSideAndAlignFromPlacement(placement) {
 
 const [injectPopperContentContext, providePopperContentContext] = createContext("DestylerPopperContent");
 const destylerPopperContentProps = {
-  ...destylerPrimitiveProps,
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
   side: {
     type: String,
     required: false,
@@ -163,8 +183,7 @@ const DestylerPopperContent = defineComponent({
   props: destylerPopperContentProps,
   setup(props, { attrs }) {
     const rootContext = injectPopperRootContext();
-    const forwardRef = useForwardRef();
-    const { customElement, currentElement: contentElement } = useCustomElement();
+    const { forwardRef, currentElement: contentElement } = useForwardExpose();
     const floatingRef = ref();
     const arrow$1 = ref();
     const { width: arrowWidth, height: arrowHeight } = useSize(arrow$1);
@@ -278,14 +297,13 @@ const DestylerPopperContent = defineComponent({
       contentZIndex,
       middlewareData,
       forwardRef,
-      customElement,
       placedSide,
       placedAlign,
       attrStyle: attrs.style
     };
   },
   render() {
-    return h("div", mergeProps(this.$attrs, {
+    return h("div", {
       "data-destyler-popper-content-wrapper": "",
       "ref": "floatingRef",
       "style": {
@@ -298,11 +316,8 @@ const DestylerPopperContent = defineComponent({
           this.middlewareData.transformOrigin?.y
         ].join(" ")
       }
-    }), h(DestylerPrimitive, mergeProps(this.$attrs, {
-      "ref": (vnode) => {
-        this.forwardRef(vnode);
-        this.customElement = vnode;
-      },
+    }, h(DestylerPrimitive, mergeProps(this.$attrs, {
+      "ref": (el) => this.forwardRef(el),
       "as": this.$props.as,
       "asChild": this.$props.asChild,
       "data-side": this.placedSide,
@@ -311,7 +326,9 @@ const DestylerPopperContent = defineComponent({
         animation: !this.isPositioned ? "none" : void 0,
         opacity: this.middlewareData.hide?.referenceHidden ? 0 : void 0
       }
-    }), this.$slots.default?.()));
+    }), {
+      default: () => this.$slots.default?.()
+    }));
   }
 });
 
@@ -322,8 +339,21 @@ const OPPOSITE_SIDE = {
   left: "right"
 };
 const destylerPopperArrowProps = {
-  ...destylerPrimitiveProp,
-  ...destylerArrowProps,
+  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,
@@ -375,21 +405,10 @@ const DestylerPopperArrow = defineComponent({
       style: {
         display: "block"
       }
-    }), this.$slots.default?.()));
+    }), {
+      default: () => this.$slots.default?.()
+    }));
   }
 });
 
-const name = "@destyler/popper";
-
-const packageName = name;
-function DestylerPopperResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (name2 === "DestylerTemplate")
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-export { DestylerPopperAnchor, DestylerPopperArrow, DestylerPopperContent, DestylerPopperResolver, DestylerPopperRoot, OPPOSITE_SIDE, destylerPopperAnchorProps, destylerPopperArrowProps, destylerPopperContentProps, getSideAndAlignFromPlacement, injectPopperContentContext, injectPopperRootContext, isNotNull, providePopperContentContext, providePopperRootContext, transformOrigin };
+export { DestylerPopperAnchor, DestylerPopperArrow, DestylerPopperContent, DestylerPopperRoot };

package/dist/resolver.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+const name = "@destyler/popper";
+
+const packageName = name;
+const popperComponentName = [
+  "DestylerPopperRoot",
+  "DestylerPopperAnchor",
+  "DestylerPopperContent",
+  "DestylerPopperArrow"
+];
+function DestylerPopperResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (popperComponentName.includes(name2))
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+exports.DestylerPopperResolver = DestylerPopperResolver;
+exports.popperComponentName = popperComponentName;

package/dist/resolver.d.cts

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

package/dist/resolver.d.mts

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

package/dist/resolver.d.ts

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

package/dist/resolver.mjs

@@ -0,0 +1,20 @@
+const name = "@destyler/popper";
+
+const packageName = name;
+const popperComponentName = [
+  "DestylerPopperRoot",
+  "DestylerPopperAnchor",
+  "DestylerPopperContent",
+  "DestylerPopperArrow"
+];
+function DestylerPopperResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (popperComponentName.includes(name2))
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+export { DestylerPopperResolver, popperComponentName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@destyler/popper",
-  "version": "0.0.1-beta.9",
+  "version": "0.0.2",
   "description": "unstyled popper component for vue",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -10,6 +10,16 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     },
+    "./resolver": {
+      "types": "./dist/resolver.d.ts",
+      "import": "./dist/resolver.mjs",
+      "require": "./dist/resolver.cjs"
+    },
+    "./component": {
+      "types": "./dist/component.d.ts",
+      "import": "./dist/component.mjs",
+      "require": "./dist/component.cjs"
+    },
     "./*": "./*"
   },
   "main": "dist/index.cjs",
@@ -24,10 +34,10 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.0.4",
-    "@destyler/arrow": "0.0.1-beta.9",
-    "@destyler/composition": "0.0.1-beta.9",
-    "@destyler/shared": "0.0.1-beta.9",
-    "@destyler/primitive": "0.0.1-beta.9"
+    "@destyler/arrow": "0.0.2",
+    "@destyler/shared": "0.0.2",
+    "@destyler/primitive": "0.0.2",
+    "@destyler/composition": "0.0.2"
   },
   "scripts": {
     "clear": "rimraf ./dist",