bge-ui 1.4.8 → 1.5.0

package/dist/index.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, normalizeStyle, createStaticVNode, provide, reactive, toRefs, ref, watch, unref, getCurrentScope, onScopeDispose, readonly, computed, getCurrentInstance, onMounted, useSlots, inject, createTextVNode, toDisplayString, createCommentVNode, TransitionGroup, withCtx, withDirectives, vModelDynamic, vModelText, createBlock, withModifiers, cloneVNode, Fragment, Text, Comment, Teleport, onUnmounted, h, Transition, vShow, onBeforeMount, nextTick, resolveDynamicComponent, shallowReactive, render as render$7, isVNode, vModelCheckbox, renderList, toRef, useAttrs, normalizeProps, mergeProps, onBeforeUpdate, withKeys, createSlots, guardReactiveProps, isRef } from "vue";
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, normalizeStyle, createStaticVNode, provide, reactive, toRefs, ref, watch, unref, getCurrentScope, onScopeDispose, readonly, computed, getCurrentInstance, onMounted, useSlots, inject, createTextVNode, toDisplayString, createCommentVNode, TransitionGroup, withCtx, withDirectives, vModelDynamic, vModelText, createBlock, withModifiers, cloneVNode, Fragment, Text, Comment, onUnmounted, h, Transition, vShow, onBeforeMount, nextTick, Teleport, resolveDynamicComponent, shallowReactive, render as render$7, isVNode, vModelCheckbox, renderList, toRef, useAttrs, normalizeProps, mergeProps, onBeforeUpdate, withKeys, createSlots, guardReactiveProps, isRef } from "vue";
 const _hoisted_1$26 = ["disabled"];
 const _hoisted_2$1M = { class: "loading-icon" };
 const _sfc_main$2g = /* @__PURE__ */ defineComponent({
@@ -6482,111 +6482,6 @@ function findFirstLegitChild(node) {
 }
 function wrapTextContent(s) {
 }
-const _hoisted_1$i = { class: "bge-dailog__wrapper" };
-const _hoisted_2$e = { class: "bge-dialog__header" };
-const _hoisted_3$a = ["onClick"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  props: {
-    customClass: {
-      type: String,
-      default: ""
-    },
-    teleported: {
-      type: Boolean,
-      default: true
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    resetState: {
-      type: Boolean,
-      default: false
-    },
-    fullBody: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: ""
-    }
-  },
-  emits: [
-    "update:visible",
-    "close"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const height = ref(160);
-    const opacity = ref(0);
-    const DialogBody = ref();
-    watch(() => [props.visible, props.resetState], ([value]) => {
-      if (value) {
-        setTimeout(() => {
-          opacity.value = 1;
-          height.value = 48 + 64 + Number(DialogBody.value.offsetHeight);
-        });
-      }
-    }, {
-      immediate: true
-    });
-    function updateHeight() {
-      height.value = 48 + 64 + Number(DialogBody.value.offsetHeight);
-    }
-    function close() {
-      height.value = "160";
-      opacity.value = 0;
-      setTimeout(() => {
-        emits("update:visible", false);
-        emits("close", false);
-      }, 200);
-    }
-    __expose({
-      updateHeight
-    });
-    return (_ctx, _cache) => {
-      const _component_MonoClose = resolveComponent("MonoClose");
-      return __props.teleported ? (openBlock(), createBlock(Teleport, {
-        key: 0,
-        to: "body"
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(`bge-modal ${__props.customClass} ${__props.visible ? "show" : ""}`),
-          style: normalizeStyle(`opacity: ${opacity.value};`)
-        }, [
-          createElementVNode("div", {
-            class: "bge-dialog",
-            style: normalizeStyle(`height:${height.value}px`)
-          }, [
-            createElementVNode("div", _hoisted_1$i, [
-              createElementVNode("div", _hoisted_2$e, [
-                __props.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  createTextVNode(toDisplayString(__props.title), 1)
-                ], 64)) : renderSlot(_ctx.$slots, "header", { key: 1 }),
-                createElementVNode("span", {
-                  class: "bge-dialog__close",
-                  onClick: withModifiers(close, ["stop"])
-                }, [
-                  createVNode(_component_MonoClose)
-                ], 8, _hoisted_3$a)
-              ]),
-              createElementVNode("div", {
-                class: normalizeClass(["bge-dialog__body", { full: __props.fullBody }]),
-                ref_key: "DialogBody",
-                ref: DialogBody
-              }, [
-                renderSlot(_ctx.$slots, "default")
-              ], 2)
-            ])
-          ], 4)
-        ], 6)
-      ])) : createCommentVNode("", true);
-    };
-  }
-});
 var top = "top";
 var bottom = "bottom";
 var right = "right";
@@ -8300,7 +8195,7 @@ const usePopper = function(triggerReference, suppliedOptions = {}) {
     })
   };
 };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     /**
@@ -8459,9 +8354,6 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         dislogVisible.value = true;
       }
     }
-    function closeToolTip() {
-      dislogVisible.value = false;
-    }
     function initTooltip() {
       const result = usePopper(triggerRef, {
         hover: props.hover,
@@ -8515,54 +8407,29 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 512),
-        sreenWidth.value <= 768 ? (openBlock(), createBlock(_sfc_main$q, {
+        __props.teleported ? (openBlock(), createBlock(Teleport, {
           key: 0,
-          visible: dislogVisible.value,
-          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => dislogVisible.value = $event),
-          title: __props.title,
-          onClose: closeToolTip
-        }, {
-          default: withCtx(() => [
-            createElementVNode("div", null, [
-              renderSlot(_ctx.$slots, "content")
-            ]),
-            createVNode(_sfc_main$2g, {
-              class: "bge-tooltip__closeButton",
-              type: "primary",
-              onClick: closeToolTip
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(__props.buttonText), 1)
-              ]),
-              _: 1
-            })
-          ]),
-          _: 3
-        }, 8, ["visible", "title"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          __props.teleported ? (openBlock(), createBlock(Teleport, {
-            key: 0,
-            to: "body"
-          }, [
-            (openBlock(), createBlock(resolveDynamicComponent(tooltipElement.value), null, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "content")
-              ]),
-              _: 3
-            }))
-          ])) : (openBlock(), createBlock(resolveDynamicComponent(tooltipElement.value), { key: 1 }, {
+          to: "body"
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent(tooltipElement.value), null, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "content")
             ]),
             _: 3
           }))
-        ], 64))
+        ])) : (openBlock(), createBlock(resolveDynamicComponent(tooltipElement.value), { key: 1 }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "content")
+          ]),
+          _: 3
+        }))
       ], 64);
     };
   }
 });
-const _hoisted_1$h = ["id"];
-const _hoisted_2$d = ["innerHTML"];
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = ["id"];
+const _hoisted_2$e = ["innerHTML"];
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     id: {
@@ -8693,9 +8560,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               size: 20
             })) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "default", {}, () => [
-              createElementVNode("p", { innerHTML: __props.message }, null, 8, _hoisted_2$d)
+              createElementVNode("p", { innerHTML: __props.message }, null, 8, _hoisted_2$e)
             ])
-          ], 46, _hoisted_1$h), [
+          ], 46, _hoisted_1$i), [
             [vShow, visible.value]
           ])
         ]),
@@ -8771,7 +8638,7 @@ function createMessage(_options = {}, context) {
     }
   };
   const vnode = createVNode(
-    _sfc_main$o,
+    _sfc_main$p,
     props,
     isFunction(props.message) || isVNode(props.message) ? {
       default: isFunction(props.message) ? props.message : () => props.message
@@ -8821,6 +8688,123 @@ function closeAll(type4, styleType = "message") {
 }
 message$1.closeAll = closeAll;
 message$1._context = null;
+const _hoisted_1$h = { class: "bge-dailog__wrapper" };
+const _hoisted_2$d = { class: "bge-dialog__header" };
+const _hoisted_3$a = ["onClick"];
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    customClass: {
+      type: String,
+      default: ""
+    },
+    teleported: {
+      type: Boolean,
+      default: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    resetState: {
+      type: Boolean,
+      default: false
+    },
+    fullBody: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    "update:visible",
+    "close"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const height = ref(160);
+    const opacity = ref(0);
+    const DialogBody = ref();
+    watch(() => [props.visible, props.resetState], ([value]) => {
+      if (value) {
+        setTimeout(() => {
+          let offsetHeight = 0;
+          const children = DialogBody.value.children;
+          for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            offsetHeight += child.offsetHeight;
+          }
+          opacity.value = 1;
+          height.value = 48 + 64 + 16 + Number(offsetHeight);
+        });
+      }
+    }, {
+      immediate: true
+    });
+    function updateHeight() {
+      let offsetHeight = 0;
+      const children = DialogBody.value.children;
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        offsetHeight += child.offsetHeight;
+      }
+      height.value = 48 + 64 + 16 + Number(offsetHeight);
+    }
+    function close() {
+      height.value = "160";
+      opacity.value = 0;
+      setTimeout(() => {
+        emits("update:visible", false);
+        emits("close", false);
+      }, 200);
+    }
+    __expose({
+      updateHeight
+    });
+    return (_ctx, _cache) => {
+      const _component_MonoClose = resolveComponent("MonoClose");
+      return __props.teleported ? (openBlock(), createBlock(Teleport, {
+        key: 0,
+        to: "body"
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(`bge-modal ${__props.customClass} ${__props.visible ? "show" : ""}`),
+          style: normalizeStyle(`opacity: ${opacity.value};`)
+        }, [
+          createElementVNode("div", {
+            class: "bge-dialog",
+            style: normalizeStyle(`height:${height.value}px`)
+          }, [
+            createElementVNode("div", _hoisted_1$h, [
+              createElementVNode("div", _hoisted_2$d, [
+                __props.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  createTextVNode(toDisplayString(__props.title), 1)
+                ], 64)) : renderSlot(_ctx.$slots, "header", { key: 1 }),
+                createElementVNode("span", {
+                  class: "bge-dialog__close",
+                  onClick: withModifiers(close, ["stop"])
+                }, [
+                  createVNode(_component_MonoClose)
+                ], 8, _hoisted_3$a)
+              ]),
+              createElementVNode("div", {
+                class: normalizeClass(["bge-dialog__body", { full: __props.fullBody }]),
+                ref_key: "DialogBody",
+                ref: DialogBody
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 2)
+            ])
+          ], 4)
+        ], 6)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
 const _hoisted_1$g = { class: "bge-checkbox__input" };
 const _hoisted_2$c = ["id", "disabled"];
 const _hoisted_3$9 = {
@@ -10795,7 +10779,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             onTouchstart: onButtonDown,
             onMousedown: onButtonDown
           }, [
-            __props.showToolTip ? (openBlock(), createBlock(_sfc_main$p, {
+            __props.showToolTip ? (openBlock(), createBlock(_sfc_main$q, {
               key: 0,
               ref_key: "tooltip",
               ref: tooltip,
@@ -10905,7 +10889,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const emits = __emit;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
-        createVNode(_sfc_main$p, {
+        createVNode(_sfc_main$q, {
           ref_key: "tooltipRef",
           ref: tooltipRef,
           placement: "bottom",
@@ -22776,8 +22760,8 @@ const components = {
   UiInput: _sfc_main$t,
   UiTabs: _sfc_main$s,
   UiTabPane: _sfc_main$r,
-  UiTooltip: _sfc_main$p,
-  UiDialog: _sfc_main$q,
+  UiTooltip: _sfc_main$q,
+  UiDialog: _sfc_main$o,
   UiCheckbox: _sfc_main$n,
   UiRadio: _sfc_main$m,
   UiSlider: _sfc_main$l,
@@ -22801,7 +22785,7 @@ export {
   _sfc_main$2g as UiButton,
   _sfc_main$n as UiCheckbox,
   UiDatePicker,
-  _sfc_main$q as UiDialog,
+  _sfc_main$o as UiDialog,
   _sfc_main$v as UiForm,
   _sfc_main$u as UiFormItem,
   _sfc_main$t as UiInput,
@@ -22814,6 +22798,6 @@ export {
   UiSwitch,
   _sfc_main$r as UiTabPane,
   _sfc_main$s as UiTabs,
-  _sfc_main$p as UiTooltip,
+  _sfc_main$q as UiTooltip,
   index as default
 };

package/dist/style.css

@@ -1024,84 +1024,6 @@ to {
 }
 .bge-tabs__bordered .bge-tab__pane:hover, .bge-tabs__bordered .bge-tab__pane.active {
   color: var(--tc-primary, #E0E0E0);
-}.bge-modal {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  background: var(--bg-overlay, rgba(7, 9, 10, 0.8));
-  backdrop-filter: blur(12px);
-  display: none;
-  transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
-  z-index: 1000;
-}
-.bge-modal.show {
-  display: block;
-}
-.bge-dialog {
-  z-index: 1001;
-  background: var(--bg-tertiary, #232B33);
-  transition: height 0.2s cubic-bezier(0, 0, 0.58, 1);
-  overflow: hidden;
-  z-index: 1003;
-  width: 440px;
-  margin: 0 auto;
-  border-radius: var(--radius-medium, 16px);
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  height: 160px;
-  padding: 32px 0;
-  overflow: hidden;
-}
-.bge-dialog .bge-dialog__header {
-  padding: 0 32px;
-  line-height: 32px;
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--tc-primary, #e5e5e5);
-  height: 48px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.bge-dialog .bge-dialog__header .bge-dialog__close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 32px;
-  width: 24px;
-  color: var(--tc-tertiary);
-  cursor: pointer;
-}
-.bge-dialog .bge-dialog__header .bge-dialog__close:hover {
-  color: var(--tc-primary);
-}
-.bge-dialog .bge-dialog__body {
-  padding: 16px 32px 0 32px;
-  max-height: calc(94vh - 86px);
-  color: var(--tc-secondary, #B2BAC2);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-}
-.bge-dialog .bge-dialog__body.full {
-  padding: 16px 0;
-}
-@media only screen and (max-width: 1023px) {
-.bge-dialog {
-    width: 100%;
-    left: 0;
-    top: 100%;
-    transform: translate(0, -100%);
-}
-.bge-dialog .bge-dialog__header {
-    font-size: 18px;
-    line-height: 32px;
-}
 }.bge-popper-wrapper {
   z-index: 20;
 }
@@ -1313,6 +1235,77 @@ to {
 .bge-message.fade-enter-from {
   opacity: 0;
   transform: translate(-50%, -100%);
+}.bge-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: var(--bg-overlay, rgba(7, 9, 10, 0.8));
+  backdrop-filter: blur(12px);
+  display: none;
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
+  z-index: 1000;
+}
+.bge-modal.show {
+  display: block;
+}
+.bge-dialog {
+  z-index: 1001;
+  background: var(--bg-tertiary, #232B33);
+  transition: height 0.2s cubic-bezier(0, 0, 0.58, 1);
+  overflow: hidden;
+  z-index: 1003;
+  width: 440px;
+  max-height: calc(94vh - 86px);
+  margin: 0 auto;
+  border-radius: var(--radius-medium, 16px);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  height: 160px;
+  padding: 32px 0;
+  overflow: hidden;
+}
+.bge-dialog .bge-dialog__header {
+  padding: 0 32px;
+  line-height: 32px;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--tc-primary, #e5e5e5);
+  height: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.bge-dialog .bge-dialog__header .bge-dialog__close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 32px;
+  width: 24px;
+  color: var(--tc-tertiary);
+  cursor: pointer;
+}
+.bge-dialog .bge-dialog__header .bge-dialog__close:hover {
+  color: var(--tc-primary);
+}
+.bge-dialog .bge-dailog__wrapper {
+  height: 100%;
+}
+.bge-dialog .bge-dialog__body {
+  padding: 16px 32px 0 32px;
+  color: var(--tc-secondary, #B2BAC2);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  overflow-y: auto;
+  height: calc(100% - 48px);
+}
+.bge-dialog .bge-dialog__body.full {
+  padding: 16px 0;
 }.bge-checkbox {
   display: inline-flex;
   justify-content: flex-start;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/dialog/index.vue

@@ -61,8 +61,14 @@ const DialogBody = ref()
 watch(() => [props.visible, props.resetState], ([value]) => {
   if (value) {
     setTimeout(() => {
+      let offsetHeight = 0
+      const children = DialogBody.value.children
+      for (let i = 0; i < children.length; i++) {
+          const child = children[i]
+          offsetHeight += child.offsetHeight
+      }
       opacity.value = 1
-      height.value = 48 + 64 + Number(DialogBody.value.offsetHeight)
+      height.value = 48 + 64 + 16 + Number(offsetHeight)
     })
   }
 }, {
@@ -70,7 +76,13 @@ watch(() => [props.visible, props.resetState], ([value]) => {
 })
 
 function updateHeight() {
-  height.value = 48 + 64 + Number(DialogBody.value.offsetHeight)
+  let offsetHeight = 0
+  const children = DialogBody.value.children
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i]
+    offsetHeight += child.offsetHeight
+  }
+  height.value = 48 + 64 + 16 + Number(offsetHeight)
 }
 
 
@@ -133,6 +145,7 @@ defineExpose({
   overflow: hidden;
   z-index: 1003;
   width: 440px;
+  max-height: calc(94vh - 86px);
   margin: 0 auto;
   border-radius: var(--radius-medium, 16px);
   position: absolute;
@@ -169,13 +182,18 @@ defineExpose({
     }
   }
 
+  .bge-dailog__wrapper {
+    height: 100%;
+  }
+
   .bge-dialog__body {
     padding: 16px 32px 0 32px;
-    max-height: calc(94vh - 86px);
     color: var(--tc-secondary, #B2BAC2);
     font-size: 14px;
     font-weight: 400;
     line-height: 24px;
+    overflow-y: auto;
+    height: calc(100% - 48px);
 
     &.full {
       padding: 16px 0;
@@ -183,18 +201,18 @@ defineExpose({
   }
 }
 
-@include md {
-  .bge-dialog {
-    width: 100%;
-    left: 0;
-    top: 100%;
-    transform: translate(0, -100%);
-
-    .bge-dialog__header {
-      font-size: 18px;
-      line-height: 32px;
-    }
-  }
-}
+// @include md {
+//   .bge-dialog {
+//     width: 100%;
+//     left: 0;
+//     top: 100%;
+//     transform: translate(0, -100%);
+
+//     .bge-dialog__header {
+//       font-size: 18px;
+//       line-height: 32px;
+//     }
+//   }
+// }
 
 </style>

package/src/tooltip/index.vue

@@ -5,13 +5,13 @@
   <!-- <component :is="triggerElement">
     <slot />
   </component> -->
-  <template v-if="sreenWidth <= 768">
+  <!-- <template v-if="sreenWidth <= 768">
     <UiDialog v-model:visible="dislogVisible" :title="title" @close="closeToolTip">
       <div><slot name="content" /></div>
       <UiButton class="bge-tooltip__closeButton" type="primary" @click="closeToolTip">{{ buttonText }}</UiButton>
     </UiDialog>
   </template>
-  <template v-else>
+  <template v-else> -->
     <teleport v-if="teleported" to="body">
       <component :is="tooltipElement">
         <slot name="content" />
@@ -20,15 +20,15 @@
     <component v-else :is="tooltipElement">
       <slot name="content" />
     </component>
-  </template>
+  <!-- </template> -->
 </template>
 <script setup lang="ts">
 import { OnlyChild as UiOnlyChild } from './only-child'
 import type { PropType } from 'vue'
 import { computed, ref, onMounted, onBeforeMount, nextTick } from 'vue';
 import type { PositioningStrategy, Placement } from '@popperjs/core'
-import UiDialog from '../dialog/index.vue'
-import UiButton from '../button/index.vue'
+// import UiDialog from '../dialog/index.vue'
+// import UiButton from '../button/index.vue'
 import { usePopper } from './usePopper'
 const sreenWidth = ref(0)
 const props = defineProps({