yuang-framework-ui-pc 1.1.44 → 1.1.45

package/es/ele-tooltip/index.js

@@ -0,0 +1,176 @@
+import { defineComponent, ref, computed, resolveComponent, createBlock, openBlock, mergeProps, withCtx, renderSlot, createCommentVNode, createElementBlock, normalizeStyle, createTextVNode, toDisplayString } from "vue";
+import { ElTooltip } from "element-plus";
+import { omit } from "../utils/core";
+import { tooltipEmits, tooltipProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleTooltip",
+  components: { ElTooltip },
+  props: tooltipProps,
+  emits: tooltipEmits,
+  setup(props, { emit }) {
+    const tooltipRef = ref();
+    const rootProps = computed(() => {
+      const options = omit(props, [
+        "content",
+        "bodyStyle",
+        "bg",
+        "arrowBg",
+        "width",
+        "isPopover",
+        "onUpdate:visible",
+        "onBeforeShow",
+        "onBeforeHide",
+        "onBefore-show",
+        "onBefore-hide",
+        "onShow",
+        "onHide",
+        "onOpen",
+        "onClose"
+      ]);
+      const classes = ["ele-popper"];
+      if (props.isPopover && props.effect === "light") {
+        classes.push("ele-popover");
+      } else {
+        classes.push("ele-tooltip");
+      }
+      if (typeof props.popperClass === "string" && props.popperClass) {
+        classes.push(props.popperClass);
+      }
+      options.popperClass = classes.join(" ");
+      const style = {};
+      if (props.bg || props.arrowBg) {
+        options.effect = "dark";
+        if (props.bg) {
+          style["--ele-tooltip-bg"] = props.bg;
+        }
+        if (props.arrowBg) {
+          style["--ele-tooltip-arrow-bg"] = props.arrowBg;
+        }
+      }
+      const { width, popperStyle } = props;
+      if (width != null) {
+        style.width = typeof width === "string" ? width : `${width}px`;
+      }
+      if (!popperStyle) {
+        options.popperStyle = style;
+      } else if (Array.isArray(popperStyle)) {
+        options.popperStyle = [style, ...popperStyle];
+      } else {
+        options.popperStyle = [style, popperStyle];
+      }
+      return options;
+    });
+    const popperRef = computed(
+      () => {
+        var _a;
+        return (_a = tooltipRef.value) == null ? void 0 : _a.popperRef;
+      }
+    );
+    const contentRef = computed(() => {
+      var _a;
+      return (_a = tooltipRef.value) == null ? void 0 : _a.contentRef;
+    });
+    const isFocusInsideContent = () => {
+      tooltipRef.value && tooltipRef.value.isFocusInsideContent();
+    };
+    const updatePopper = () => {
+      tooltipRef.value && tooltipRef.value.updatePopper();
+    };
+    const handleOpen = (opt) => {
+      tooltipRef.value && tooltipRef.value.onOpen(opt);
+    };
+    const handleClose = (opt) => {
+      tooltipRef.value && tooltipRef.value.onClose(opt);
+    };
+    const hide = (opt) => {
+      tooltipRef.value && tooltipRef.value.hide(opt);
+    };
+    const handleUpdateVisible = (visible) => {
+      emit("update:visible", visible);
+    };
+    const handlePopBeforeShow = (e) => {
+      emit("before-show", e);
+    };
+    const handlePopBeforeHide = (e) => {
+      emit("before-hide", e);
+    };
+    const handlePopShow = (e) => {
+      emit("show", e);
+    };
+    const handlePopHide = (e) => {
+      emit("hide", e);
+    };
+    const handlePopOpen = (e) => {
+      emit("open", e);
+    };
+    const handlePopClose = (e) => {
+      emit("close", e);
+    };
+    return {
+      tooltipRef,
+      rootProps,
+      popperRef,
+      contentRef,
+      isFocusInsideContent,
+      updatePopper,
+      handleOpen,
+      handleClose,
+      hide,
+      handleUpdateVisible,
+      handlePopBeforeShow,
+      handlePopBeforeHide,
+      handlePopShow,
+      handlePopHide,
+      handlePopOpen,
+      handlePopClose
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElTooltip = resolveComponent("ElTooltip");
+  return openBlock(), createBlock(_component_ElTooltip, mergeProps(_ctx.rootProps, {
+    ref: "tooltipRef",
+    "onUpdate:visible": _ctx.handleUpdateVisible,
+    onBeforeShow: _ctx.handlePopBeforeShow,
+    onBeforeHide: _ctx.handlePopBeforeHide,
+    onShow: _ctx.handlePopShow,
+    onHide: _ctx.handlePopHide,
+    onOpen: _ctx.handlePopOpen,
+    onClose: _ctx.handlePopClose
+  }), {
+    content: withCtx(() => [
+      renderSlot(_ctx.$slots, "body", {}, () => [
+        _ctx.rawContent && _ctx.content != null && _ctx.content != "" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          innerHTML: _ctx.content,
+          class: "ele-tooltip-body",
+          style: normalizeStyle(_ctx.bodyStyle)
+        }, null, 12, _hoisted_1)) : (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "ele-tooltip-body",
+          style: normalizeStyle(_ctx.bodyStyle)
+        }, [
+          renderSlot(_ctx.$slots, "content", {}, () => [
+            createTextVNode(toDisplayString(_ctx.content), 1)
+          ])
+        ], 4))
+      ])
+    ]),
+    default: withCtx(() => [
+      _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 16, ["onUpdate:visible", "onBeforeShow", "onBeforeHide", "onShow", "onHide", "onOpen", "onClose"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-tooltip/style/index.scss

@@ -0,0 +1,95 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-tooltip-var($ele);
+
+@include popper-style('.ele-popper.el-popper');
+
+.ele-tooltip-body,
+.ele-popover-body {
+  background: inherit;
+  border-radius: inherit;
+  box-sizing: border-box;
+}
+
+.ele-tooltip-body {
+  padding: eleVar('tooltip', 'padding');
+  position: relative;
+  z-index: 2;
+}
+
+.ele-popper.el-popper.ele-tooltip {
+  color: eleVar('tooltip', 'color');
+  font-size: eleVar('tooltip', 'font-size');
+  line-height: eleVar('tooltip', 'line-height');
+  padding: 0;
+  background: eleVar('tooltip', 'bg');
+  border: eleVar('tooltip', 'border');
+  box-shadow: eleVar('tooltip', 'shadow');
+  border-radius: eleVar('tooltip', 'radius');
+
+  & > .el-popper__arrow::before {
+    background: eleVar('tooltip', 'arrow-bg');
+    border: eleVar('tooltip', 'border');
+    box-shadow: eleVar('tooltip', 'arrow-shadow');
+  }
+
+  &.is-dark {
+    padding: 0;
+  }
+
+  &.is-light {
+    color: eleVar('tooltip-light', 'color');
+    background: eleVar('tooltip-light', 'bg');
+    border: eleVar('tooltip-light', 'border');
+    box-shadow: eleVar('tooltip-light', 'shadow');
+
+    & > .el-popper__arrow::before {
+      background: eleVar('tooltip-light', 'arrow-bg');
+      border: eleVar('tooltip-light', 'border');
+      box-shadow: eleVar('tooltip-light', 'arrow-shadow');
+    }
+  }
+
+  &.is-danger,
+  &.is-danger > .el-popper__arrow::before {
+    background: elVar('color-danger');
+    border-color: elVar('color-danger');
+  }
+
+  &.is-warning,
+  &.is-warning > .el-popper__arrow::before {
+    background: elVar('color-warning');
+    border-color: elVar('color-warning');
+  }
+
+  &.is-success,
+  &.is-success > .el-popper__arrow::before {
+    background: elVar('color-success');
+    border-color: elVar('color-success');
+  }
+}
+
+/* 气泡卡片 */
+.ele-popper.ele-popover {
+  color: eleVar('popover', 'color');
+  font-size: eleVar('popover', 'font-size');
+  line-height: inherit;
+  text-align: left;
+  min-width: 150px;
+  padding: 0;
+}
+
+.ele-popover-content {
+  padding: eleVar('popover', 'padding');
+  box-sizing: border-box;
+}
+
+.ele-popover-title {
+  color: eleVar('popover', 'title-color');
+  font-size: eleVar('popover', 'title-font-size');
+  font-weight: eleVar('popover', 'title-font-weight');
+  padding: eleVar('popover', 'title-padding');
+  border-bottom: eleVar('popover', 'title-border');
+}