bge-ui 1.0.26 → 1.1.2

package/dist/index.js

@@ -7805,9 +7805,6 @@ const usePopper = function(triggerReference, suppliedOptions = {}) {
   triggerReference.value && triggerReference.value.addEventListener("mouseleave", () => {
     toggleTooltipHover("close", "trigger");
   });
-  triggerReference.value && triggerReference.value.addEventListener("focus", () => {
-    toggleTooltipHover("open");
-  });
   triggerReference.value && triggerReference.value.addEventListener("click", () => {
     toggleTooltip();
   });
@@ -7954,7 +7951,7 @@ const usePopper = function(triggerReference, suppliedOptions = {}) {
                     default: () => {
                       return withDirectives(h(
                         "div",
-                        { class: `popper-content popper-content--${options.size ? options.size : "default"}` },
+                        { class: `popper-content ${options.type ? options.type : "default"} popper-content--${options.size ? options.size : "default"}` },
                         [
                           slots.default ? slots.default() : "",
                           h(
@@ -8034,18 +8031,21 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
      */
     title: {
       type: String,
-      default: "详情",
-      required: true
+      default: "详情"
     },
     buttonText: {
       type: String,
-      default: "知道了",
-      required: true
+      default: "知道了"
+    },
+    type: {
+      type: String,
+      default: "default"
+      // default dropdown
     },
     size: {
       type: String,
-      default: "default",
-      required: true
+      default: "default"
+      // default mini
     },
     /**
      * 是否将弹出层追加到body元素下
@@ -8194,6 +8194,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const result = usePopper(triggerRef, {
         hover: props.hover,
         size: props.size,
+        type: props.type,
         disableClickOutside: props.disableClickOutside,
         openDelay: props.openDelay,
         closeDelay: props.closeDelay,

package/dist/style.css

@@ -1028,22 +1028,39 @@ to {
 .bge-popper-wrapper[data-popper-placement^=top] > .popper-content > [data-popper-arrow] {
   bottom: -4px;
 }
+.bge-popper-wrapper[data-popper-placement^=top] > .popper-content > [data-popper-arrow]::before {
+  border-top: none;
+  border-left: none;
+}
 .bge-popper-wrapper[data-popper-placement^=bottom] > .popper-content > [data-popper-arrow] {
   top: -4px;
 }
+.bge-popper-wrapper[data-popper-placement^=bottom] > .popper-content > [data-popper-arrow]::before {
+  border-bottom: none;
+  border-right: none;
+}
 .bge-popper-wrapper[data-popper-placement^=left] > .popper-content > [data-popper-arrow] {
   right: -4px;
   top: 50% !important;
   transform: translateY(-50%) !important;
 }
+.bge-popper-wrapper[data-popper-placement^=left] > .popper-content > [data-popper-arrow]::before {
+  border-left: none;
+  border-bottom: none;
+}
 .bge-popper-wrapper[data-popper-placement^=right] > .popper-content > [data-popper-arrow] {
   left: -4px;
   top: 50% !important;
   transform: translateY(-50%) !important;
 }
+.bge-popper-wrapper[data-popper-placement^=right] > .popper-content > [data-popper-arrow]::before {
+  border-top: none;
+  border-right: none;
+}
 .bge-popper-wrapper .popper-content {
   max-width: 360px;
   box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.08);
+  border: solid 0.5px var(--separator-separator);
   border-radius: var(--radius-small, 4px);
   background: var(--bg-tooltip, #53677A);
   padding: var(--layout-x-3, 12px) var(--layout-x-4, 16px);
@@ -1052,6 +1069,10 @@ to {
   font-weight: 400;
   line-height: 24px;
 }
+.bge-popper-wrapper .popper-content.dropdown {
+  --bg-tooltip: var(--bg-float);
+  padding: 0;
+}
 .bge-popper-wrapper .popper-content.popper-content--mini {
   font-size: 12px;
   line-height: 20px;
@@ -1074,6 +1095,7 @@ to {
   width: 8px;
   height: 8px;
   background: var(--bg-tooltip, #53677A);
+  border: solid 0.5px var(--separator-separator);
   visibility: visible;
   transform: rotate(45deg);
 }

package/dist/tooltip/index.vue.d.ts

@@ -7,17 +7,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     title: {
         type: StringConstructor;
         default: string;
-        required: true;
     };
     buttonText: {
         type: StringConstructor;
         default: string;
-        required: true;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
     };
     size: {
         type: StringConstructor;
         default: string;
-        required: true;
     };
     /**
      * 是否将弹出层追加到body元素下
@@ -125,17 +126,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     title: {
         type: StringConstructor;
         default: string;
-        required: true;
     };
     buttonText: {
         type: StringConstructor;
         default: string;
-        required: true;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
     };
     size: {
         type: StringConstructor;
         default: string;
-        required: true;
     };
     /**
      * 是否将弹出层追加到body元素下
@@ -234,6 +236,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onClosed?: ((...args: any[]) => any) | undefined;
 }, {
     size: string;
+    type: string;
     title: string;
     teleported: boolean;
     modifiers: Modifier<any, any>[];

package/dist/tooltip/usePopper.d.ts

@@ -3,6 +3,7 @@ import type { PositioningStrategy, Placement, Modifier, Options as ModifierOptio
 type Options = {
     placement?: Placement;
     size?: string;
+    type?: string;
     hover?: boolean;
     disableClickOutside?: boolean;
     openDelay?: number;

package/package.json

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

package/src/tooltip/index.vue

@@ -38,18 +38,18 @@ const props = defineProps({
    title: {
     type: String,
     default: '详情',
-    required: true,
    },
    buttonText: {
     type: String,
     default: '知道了',
-    required: true,
    },
-
+   type: {
+    type: String,
+    default: 'default', // default dropdown
+   },
    size: {
     type: String,
-    default: 'default',
-    required: true,
+    default: 'default', // default mini
    },
   /**
    * 是否将弹出层追加到body元素下
@@ -216,6 +216,7 @@ function initTooltip() {
   const result = usePopper(triggerRef, {
     hover: props.hover,
     size: props.size,
+    type: props.type,
     disableClickOutside: props.disableClickOutside,
     openDelay: props.openDelay,
     closeDelay: props.closeDelay,
@@ -263,20 +264,36 @@ defineExpose({
   z-index: 20;
 
   &[data-popper-placement^="top"]>.popper-content>[data-popper-arrow] {
+    &::before {
+      border-top: none;
+      border-left: none;
+    }
     bottom: -4px;
   }
 
   &[data-popper-placement^="bottom"]>.popper-content>[data-popper-arrow] {
+    &::before {
+      border-bottom: none;
+      border-right: none;
+    }
     top: -4px;
   }
 
   &[data-popper-placement^="left"]>.popper-content>[data-popper-arrow] {
+    &::before {
+      border-left: none;
+      border-bottom: none;
+    }
     right: -4px;
     top: 50% !important;
     transform: translateY(-50%) !important;
   }
 
   &[data-popper-placement^="right"]>.popper-content>[data-popper-arrow] {
+    &::before {
+      border-top: none;
+      border-right: none;
+    }
     left: -4px;
     top: 50% !important;
     transform: translateY(-50%) !important;
@@ -285,6 +302,7 @@ defineExpose({
   .popper-content {
     max-width: 360px;
     box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.08);
+    border: solid 0.5px var(--separator-separator);
     border-radius: var(--radius-small, 4px);
     background: var(--bg-tooltip, #53677A);
     padding: var(--layout-x-3, 12px) var(--layout-x-4, 16px);
@@ -293,6 +311,11 @@ defineExpose({
     font-weight: 400;
     line-height: 24px;
 
+    &.dropdown {
+      --bg-tooltip: var(--bg-float);
+      padding: 0;
+    }
+
     &.popper-content--mini {
       font-size: 12px;
       line-height: 20px;
@@ -319,6 +342,7 @@ defineExpose({
     width: 8px;
     height: 8px;
     background: var(--bg-tooltip, #53677A);
+    border: solid 0.5px var(--separator-separator);
     visibility: visible;
     transform: rotate(45deg);
   }

package/src/tooltip/usePopper.ts

@@ -87,6 +87,7 @@ const transformOriginMap = {
 type Options = {
   placement?: Placement;
   size?: string;
+  type?: string;
   hover?: boolean;
   disableClickOutside?: boolean;
   openDelay?: number;
@@ -268,9 +269,10 @@ const usePopper = function (triggerReference, suppliedOptions: Options = {}) {
   triggerReference.value && triggerReference.value.addEventListener('mouseleave', () => {
     toggleTooltipHover('close', 'trigger')
   })
-  triggerReference.value && triggerReference.value.addEventListener('focus', () => {
-    toggleTooltipHover('open');
-  })
+  // triggerReference.value && triggerReference.value.addEventListener('focus', () => {
+  //   toggleTooltipHover('open');
+  // })
+  
   triggerReference.value && triggerReference.value.addEventListener('click', () => {
     toggleTooltip();
   })
@@ -492,7 +494,7 @@ const usePopper = function (triggerReference, suppliedOptions: Options = {}) {
                   {
                     default: () => {
                       return withDirectives(h('div',
-                        { class: `popper-content popper-content--${options.size ? options.size : 'default'}` },
+                        { class: `popper-content ${options.type ? options.type : 'default'} popper-content--${options.size ? options.size : 'default'}` },
                         [
                           slots.default ? slots.default() : '',
                           h('div',