ele-admin-plus 1.2.0 → 1.2.1-beta.2

package/lib/ele-tool/index.cjs

@@ -1,34 +1,48 @@
 "use strict";
 const vue = require("vue");
-const EleTooltip = require("../ele-tooltip/index");
+const hook = require("../utils/hook");
+const props$1 = require("../ele-toolbar/props");
 const props = require("./props");
 const _sfc_main = vue.defineComponent({
   name: "EleTool",
-  components: { EleTooltip },
   props: props.toolProps,
   emits: props.toolEmits,
   setup(props2, { emit }) {
-    const visible = vue.ref(false);
-    const updateVisible = (value) => {
-      if (value && (!props2.title || props2.disabled)) {
-        visible.value = false;
-        return;
+    const toolbarProvide = vue.inject(props$1.TOOLBAR_KEY, {});
+    const [startHideTipTimer, stopHideTipTimer] = hook.useTimer(200);
+    const showTooltip = (text, el, options) => {
+      if (toolbarProvide.showTooltip) {
+        toolbarProvide.showTooltip(text, el, options);
       }
-      visible.value = value;
     };
-    const onClick = (e) => {
-      visible.value = false;
+    const hideTooltip = () => {
+      toolbarProvide.hideTooltip && toolbarProvide.hideTooltip();
+    };
+    const handleClick = (e) => {
+      startHideTipTimer(() => {
+        hideTooltip();
+      });
       emit("click", e);
     };
+    const handleMouseover = (e) => {
+      if (props2.title && !props2.disabled) {
+        stopHideTipTimer();
+        showTooltip(props2.title, e.currentTarget, {
+          placement: props2.placement,
+          offset: 10
+        });
+      }
+    };
     vue.watch([() => props2.disabled, () => props2.title], () => {
       if (!props2.title || props2.disabled) {
-        visible.value = false;
+        hideTooltip();
       }
     });
     return {
-      visible,
-      updateVisible,
-      onClick
+      handleClick,
+      handleMouseover,
+      showTooltip,
+      hideTooltip
     };
   }
 });
@@ -41,26 +55,15 @@ const _export_sfc = (sfc, props2) => {
 };
 const _hoisted_1 = { class: "ele-tool-body" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
   return vue.openBlock(), vue.createElementBlock("div", {
     class: "ele-tool",
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onMouseover: _cache[1] || (_cache[1] = (...args) => _ctx.handleMouseover && _ctx.handleMouseover(...args))
   }, [
-    vue.createVNode(_component_EleTooltip, {
-      content: _ctx.title,
-      visible: _ctx.visible,
-      placement: _ctx.placement,
-      offset: 10,
-      "onUpdate:visible": _ctx.updateVisible
-    }, {
-      default: vue.withCtx(() => [
-        vue.createElementVNode("div", _hoisted_1, [
-          vue.renderSlot(_ctx.$slots, "default")
-        ])
-      ]),
-      _: 3
-    }, 8, ["content", "visible", "placement", "onUpdate:visible"])
-  ]);
+    vue.createElementVNode("div", _hoisted_1, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ])
+  ], 32);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 module.exports = index;

package/lib/ele-tool/index.d.ts

@@ -1,3 +1,5 @@
+import { EleTooltipProps } from '../ele-app/plus';
+
 declare const _default: import('vue').DefineComponent<{
     title: StringConstructor;
     placement: {
@@ -6,9 +8,10 @@ declare const _default: import('vue').DefineComponent<{
     };
     disabled: BooleanConstructor;
 }, {
-    visible: import('vue').Ref<boolean>;
-    updateVisible: (value: boolean) => void;
-    onClick: (e: MouseEvent) => void;
+    handleClick: (e: MouseEvent) => void;
+    handleMouseover: (e: MouseEvent) => void;
+    showTooltip: (text?: string, el?: HTMLElement, options?: EleTooltipProps) => void;
+    hideTooltip: () => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: (_e: MouseEvent) => boolean;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{

package/lib/ele-tool/style/index.cjs

@@ -1,3 +1,2 @@
 "use strict";
-require("../../ele-tooltip/style/index");
 require("./index.scss");

package/lib/ele-tool/style/index.scss

@@ -32,19 +32,6 @@
     line-height: inherit;
     position: static;
   }
-
-  .el-tooltip__trigger {
-    position: static;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-  }
 }
 
 .ele-toolbar .ele-tool {

package/lib/ele-toolbar/index.cjs

@@ -1,11 +1,39 @@
 "use strict";
 const vue = require("vue");
+const EleTooltip = require("../ele-tooltip/index");
 const EleText = require("../ele-text/index");
 const props = require("./props");
 const _sfc_main = vue.defineComponent({
   name: "EleToolbar",
-  components: { EleText },
-  props: props.toolbarProps
+  components: { EleTooltip, EleText },
+  props: props.toolbarProps,
+  setup() {
+    const tooltipRef = vue.ref(null);
+    const virtualRef = vue.ref();
+    const tooltipContent = vue.ref("");
+    const tooltipProps = vue.ref({});
+    const showTooltip = (text, el, options) => {
+      virtualRef.value = el;
+      tooltipContent.value = text ?? "";
+      tooltipProps.value = options || {};
+    };
+    const hideTooltip = () => {
+      tooltipRef.value && tooltipRef.value.hide();
+    };
+    const toolbarProvide = vue.shallowReactive({
+      showTooltip,
+      hideTooltip
+    });
+    vue.provide(props.TOOLBAR_KEY, toolbarProvide);
+    return {
+      tooltipRef,
+      virtualRef,
+      tooltipContent,
+      tooltipProps,
+      showTooltip,
+      hideTooltip
+    };
+  }
 });
 const _export_sfc = (sfc, props2) => {
   const target = sfc.__vccOpts || sfc;
@@ -16,6 +44,7 @@ const _export_sfc = (sfc, props2) => {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_EleText = vue.resolveComponent("EleText");
+  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass([
       "ele-toolbar",
@@ -58,7 +87,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       style: vue.normalizeStyle(_ctx.toolsStyle)
     }, [
       vue.renderSlot(_ctx.$slots, "tools")
-    ], 4)
+    ], 4),
+    vue.createVNode(_component_EleTooltip, vue.mergeProps({
+      trigger: "hover",
+      placement: "top",
+      persistent: false,
+      content: _ctx.tooltipContent
+    }, _ctx.tooltipProps || {}, {
+      virtualTriggering: true,
+      virtualRef: _ctx.virtualRef,
+      ref: "tooltipRef"
+    }), null, 16, ["content", "virtualRef"])
   ], 2);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);