vue-devui 1.6.3-markdown.3 → 1.6.3-select.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.6.3-markdown.3",
+  "version": "1.6.3-select.0",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [

package/pagination/index.es.js

@@ -9429,8 +9429,16 @@ var Select = defineComponent({
       toggleChange
     });
     const isRender = ref(false);
+    const currentPosition = ref("bottom");
     const position = ref(["bottom-start", "top-start"]);
     const dropdownWidth = ref("0");
+    const handlePositionChange = (pos) => {
+      currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
+      "z-index": "var(--devui-z-index-dropdown, 1052)"
+    }));
     const updateDropdownWidth = () => {
       var _a;
       dropdownWidth.value = ((_a = originRef == null ? void 0 : originRef.value) == null ? void 0 : _a.clientWidth) ? originRef.value.clientWidth + "px" : "100%";
@@ -9485,9 +9493,9 @@ var Select = defineComponent({
         "to": "body"
       }, {
         default: () => [createVNode(Transition, {
-          "name": "fade"
+          "name": `fade-${currentPosition.value}`
         }, {
-          default: () => [createVNode(FlexibleOverlay, {
+          default: () => [withDirectives(createVNode(FlexibleOverlay, {
             "modelValue": isRender.value,
             "onUpdate:modelValue": ($event) => isRender.value = $event,
             "ref": dropdownRef,
@@ -9495,18 +9503,15 @@ var Select = defineComponent({
             "align": "start",
             "offset": 4,
             "position": position.value,
-            "style": {
-              visibility: isOpen.value ? "visible" : "hidden",
-              "z-index": isOpen.value ? "var(--devui-z-index-dropdown, 1052)" : -1
-            }
+            "onPositionChange": handlePositionChange,
+            "style": styles.value
           }, {
             default: () => {
               var _a, _b, _c, _d;
               return [createVNode("div", {
                 "class": dropdownCls,
                 "style": {
-                  width: `${dropdownWidth.value}`,
-                  visibility: isOpen.value ? "visible" : "hidden"
+                  width: `${dropdownWidth.value}`
                 }
               }, [withDirectives(createVNode("ul", {
                 "class": listCls,
@@ -9535,7 +9540,7 @@ var Select = defineComponent({
                 "class": dropdownEmptyCls
               }, [emptyText.value])])])];
             }
-          })]
+          }), [[vShow, isOpen.value]])]
         })]
       })]);
     };