yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/ele-popconfirm/index.js

@@ -0,0 +1,212 @@
+import { defineComponent, ref, computed, resolveComponent, createBlock, openBlock, mergeProps, withCtx, renderSlot, createCommentVNode, createElementVNode, normalizeStyle, normalizeClass, normalizeProps, resolveDynamicComponent, createElementBlock, createTextVNode, toDisplayString } from "vue";
+import { ElButton, ElIcon, useLocale } from "element-plus";
+import { pick } from "../utils/core";
+import EleTooltip from "../ele-tooltip/index";
+import { tooltipPropKeys } from "../ele-tooltip/props";
+import { QuestionCircleFilled } from "../icons";
+import { popconfirmEmits, popconfirmProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "ElePopconfirm",
+  components: { ElIcon, ElButton, EleTooltip, QuestionCircleFilled },
+  props: popconfirmProps,
+  emits: popconfirmEmits,
+  setup(props, { emit }) {
+    const { t } = useLocale();
+    const tooltipRef = ref(null);
+    const tooltipProps = computed(() => {
+      const keys = tooltipPropKeys.filter(
+        (k) => !["content", "bodyStyle"].includes(k)
+      );
+      const options = pick(props, keys);
+      options.ariaLabel = props.title;
+      options.gpuAcceleration = props.transition === "el-fade-in-linear";
+      const classes = ["ele-popconfirm"];
+      if (typeof props.popperClass === "string" && props.popperClass) {
+        classes.push(props.popperClass);
+      }
+      options.popperClass = classes.join(" ");
+      return options;
+    });
+    const iconOptions = computed(() => {
+      const options = props.iconProps || {};
+      if (props.iconColor) {
+        options.style = Object.assign(
+          { color: props.iconColor },
+          options.style
+        );
+      }
+      const classes = ["ele-popconfirm-icon"];
+      if (options.class) {
+        if (Array.isArray(options.class)) {
+          options.class.forEach((c) => {
+            classes.push(c);
+          });
+        } else {
+          classes.push(options.class);
+        }
+      }
+      options.class = classes;
+      return options;
+    });
+    const confirmText = computed(() => {
+      return props.confirmButtonText || t("el.popconfirm.confirmButtonText");
+    });
+    const cancelText = computed(() => {
+      return props.cancelButtonText || t("el.popconfirm.cancelButtonText");
+    });
+    const hidePopper = () => {
+      tooltipRef.value && tooltipRef.value.hide();
+    };
+    const confirm = (e) => {
+      hidePopper();
+      emit("confirm", e);
+    };
+    const cancel = (e) => {
+      hidePopper();
+      emit("cancel", e);
+    };
+    const handleUpdateVisible = (visible) => {
+      emit("update:visible", visible);
+    };
+    const handlePopBeforeEnter = () => {
+      emit("before-enter");
+    };
+    const handlePopBeforeLeave = () => {
+      emit("before-leave");
+    };
+    const handlePopAfterEnter = () => {
+      emit("after-enter");
+    };
+    const handlePopAfterLeave = () => {
+      emit("after-leave");
+    };
+    return {
+      tooltipRef,
+      tooltipProps,
+      iconOptions,
+      confirmText,
+      cancelText,
+      hidePopper,
+      confirm,
+      cancel,
+      handleUpdateVisible,
+      handlePopBeforeEnter,
+      handlePopBeforeLeave,
+      handlePopAfterEnter,
+      handlePopAfterLeave
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-popconfirm-main" };
+const _hoisted_2 = { class: "ele-popconfirm-body" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_QuestionCircleFilled = resolveComponent("QuestionCircleFilled");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_ElButton = resolveComponent("ElButton");
+  const _component_EleTooltip = resolveComponent("EleTooltip");
+  return openBlock(), createBlock(_component_EleTooltip, mergeProps({ tabindex: _ctx.tabindex }, _ctx.tooltipProps, {
+    ref: "tooltipRef",
+    isPopover: true,
+    "onUpdate:visible": _ctx.handleUpdateVisible,
+    onBeforeShow: _ctx.handlePopBeforeEnter,
+    onBeforeHide: _ctx.handlePopBeforeLeave,
+    onShow: _ctx.handlePopAfterEnter,
+    onHide: _ctx.handlePopAfterLeave
+  }), {
+    body: withCtx(() => [
+      createElementVNode("div", {
+        class: normalizeClass(["ele-popover-body", _ctx.bodyClass]),
+        style: normalizeStyle(_ctx.bodyStyle)
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          !_ctx.hideIcon ? (openBlock(), createBlock(_component_ElIcon, normalizeProps(mergeProps({ key: 0 }, _ctx.iconOptions)), {
+            default: withCtx(() => [
+              _ctx.icon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), {
+                key: 0,
+                style: normalizeStyle(_ctx.iconStyle)
+              }, null, 8, ["style"])) : (openBlock(), createBlock(_component_QuestionCircleFilled, {
+                key: 1,
+                style: normalizeStyle(_ctx.iconStyle)
+              }, null, 8, ["style"]))
+            ]),
+            _: 1
+          }, 16)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2, [
+            (_ctx.content || _ctx.$slots.content) && (_ctx.title || _ctx.$slots.title) ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "ele-popconfirm-title",
+              style: normalizeStyle(_ctx.titleStyle)
+            }, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(_ctx.title), 1)
+              ])
+            ], 4)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: "ele-popconfirm-content",
+              style: normalizeStyle(_ctx.contentStyle)
+            }, [
+              renderSlot(_ctx.$slots, "content", {}, () => [
+                createTextVNode(toDisplayString(_ctx.content || _ctx.title), 1)
+              ])
+            ], 4)
+          ])
+        ]),
+        createElementVNode("div", {
+          class: "ele-popconfirm-action",
+          style: normalizeStyle(_ctx.footerStyle)
+        }, [
+          renderSlot(_ctx.$slots, "actions", {
+            cancel: _ctx.cancel,
+            confirm: _ctx.confirm,
+            cancelText: _ctx.cancelText,
+            confirmText: _ctx.confirmText
+          }, () => [
+            renderSlot(_ctx.$slots, "action", {
+              cancel: _ctx.cancel,
+              confirm: _ctx.confirm,
+              cancelText: _ctx.cancelText,
+              confirmText: _ctx.confirmText
+            }),
+            !_ctx.hideCancelButton ? (openBlock(), createBlock(_component_ElButton, mergeProps({
+              key: 0,
+              size: "small",
+              type: _ctx.cancelButtonType === "text" ? void 0 : _ctx.cancelButtonType,
+              text: _ctx.cancelButtonType === "text"
+            }, _ctx.cancelButtonProps || {}, { onClick: _ctx.cancel }), {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.cancelText), 1)
+              ]),
+              _: 1
+            }, 16, ["type", "text", "onClick"])) : createCommentVNode("", true),
+            !_ctx.hideConfirmButton ? (openBlock(), createBlock(_component_ElButton, mergeProps({
+              key: 1,
+              size: "small",
+              type: _ctx.confirmButtonType === "text" ? void 0 : _ctx.confirmButtonType,
+              text: _ctx.confirmButtonType === "text"
+            }, _ctx.confirmButtonProps || {}, { onClick: _ctx.confirm }), {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.confirmText), 1)
+              ]),
+              _: 1
+            }, 16, ["type", "text", "onClick"])) : createCommentVNode("", true)
+          ])
+        ], 4)
+      ], 6)
+    ]),
+    default: withCtx(() => [
+      _ctx.$slots.reference ? renderSlot(_ctx.$slots, "reference", { key: 0 }) : createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 16, ["tabindex", "onUpdate:visible", "onBeforeShow", "onBeforeHide", "onShow", "onHide"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-popconfirm/props.d.ts

@@ -0,0 +1,236 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { ElPopconfirmProps, ElIconProps, ElButtonProps } from '../ele-app/el';
+import { ElePopoverProps } from '../ele-app/plus';
+
+/**
+ * 属性
+ */
+export declare const popconfirmProps: {
+    trigger: {
+        type: PropType<ElePopoverProps["trigger"]>;
+        default: string;
+    };
+    /** 确认按钮文字 */
+    confirmButtonText: StringConstructor;
+    /** 取消按钮文字 */
+    cancelButtonText: StringConstructor;
+    /** 确认按钮类型 */
+    confirmButtonType: {
+        type: PropType<ElPopconfirmProps["confirmButtonType"]>;
+        default: string;
+    };
+    /** 取消按钮类型 */
+    cancelButtonType: {
+        type: PropType<ElPopconfirmProps["cancelButtonType"]>;
+        default: string;
+    };
+    /** 自定义图标 */
+    icon: PropType<ElPopconfirmProps["icon"]>;
+    /** 图标颜色 */
+    iconColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 是否隐藏图标 */
+    hideIcon: BooleanConstructor;
+    /** 是否隐藏确认按钮 */
+    hideConfirmButton: BooleanConstructor;
+    /** 是否隐藏取消按钮 */
+    hideCancelButton: BooleanConstructor;
+    /** 图标样式 */
+    iconStyle: PropType<StyleValue>;
+    /** 图标组件属性 */
+    iconProps: PropType<ElIconProps>;
+    /** 确认按钮组件属性 */
+    confirmButtonProps: PropType<ElButtonProps>;
+    /** 取消按钮组件属性 */
+    cancelButtonProps: PropType<ElButtonProps>;
+    /** 底栏样式 */
+    footerStyle: PropType<StyleValue>;
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    bodyClass: StringConstructor;
+    bodyStyle: PropType<StyleValue>;
+    titleStyle: PropType<StyleValue>;
+    contentStyle: PropType<StyleValue>;
+    showAfter: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0;
+    };
+    hideAfter: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 200;
+    };
+    autoClose: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0;
+    };
+    title: StringConstructor;
+    effect: {
+        readonly default: "light";
+        readonly type: PropType<import('element-plus').PopperEffect>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        readonly __epPropKey: true;
+    };
+    placement: {
+        readonly type: PropType<any>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "bottom";
+    };
+    teleported: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    appendTo: {
+        readonly type: PropType<string | HTMLElement>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    disabled: BooleanConstructor;
+    offset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: undefined;
+    };
+    persistent: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    width: {
+        readonly type: PropType<string | number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 150;
+    };
+    visible: {
+        readonly type: PropType<boolean | null>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: null;
+    };
+    triggerKeys: {
+        readonly type: PropType<string[]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: () => string[];
+    };
+    popperOptions: {
+        readonly type: PropType<any>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: () => {};
+    };
+    tabindex: {
+        readonly type: PropType<string | number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0;
+    };
+    content: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    enterable: {
+        readonly default: true;
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        readonly __epPropKey: true;
+    };
+    showArrow: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    popperStyle: PropType<StyleValue>;
+    popperClass: StringConstructor;
+    ariaLabel: StringConstructor;
+    bg: StringConstructor;
+    zIndex: NumberConstructor;
+    arrowOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 5;
+    };
+    virtualRef: {
+        readonly type: PropType<import('element-plus').Measurable>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    virtualTriggering: BooleanConstructor;
+    className: StringConstructor;
+    gpuAcceleration: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    arrowBg: StringConstructor;
+};
+export type PopconfirmProps = ExtractPropTypes<typeof popconfirmProps>;
+/**
+ * 事件
+ */
+export declare const popconfirmEmits: {
+    confirm: (_e: MouseEvent) => boolean;
+    cancel: (_e: MouseEvent) => boolean;
+    "update:visible": (value: boolean) => boolean;
+    "before-enter": () => boolean;
+    "before-leave": () => boolean;
+    "after-enter": () => boolean;
+    "after-leave": () => boolean;
+};

package/es/ele-popconfirm/props.js

@@ -0,0 +1,54 @@
+import { popoverProps, popoverEmits } from "../ele-popover/props";
+const popconfirmProps = {
+  ...popoverProps,
+  trigger: {
+    type: String,
+    default: "click"
+  },
+  /** 确认按钮文字 */
+  confirmButtonText: String,
+  /** 取消按钮文字 */
+  cancelButtonText: String,
+  /** 确认按钮类型 */
+  confirmButtonType: {
+    type: String,
+    default: "primary"
+  },
+  /** 取消按钮类型 */
+  cancelButtonType: {
+    type: String,
+    default: "text"
+  },
+  /** 自定义图标 */
+  icon: [String, Object, Function],
+  /** 图标颜色 */
+  iconColor: {
+    type: String,
+    default: "#f90"
+  },
+  /** 是否隐藏图标 */
+  hideIcon: Boolean,
+  /** 是否隐藏确认按钮 */
+  hideConfirmButton: Boolean,
+  /** 是否隐藏取消按钮 */
+  hideCancelButton: Boolean,
+  /** 图标样式 */
+  iconStyle: Object,
+  /** 图标组件属性 */
+  iconProps: Object,
+  /** 确认按钮组件属性 */
+  confirmButtonProps: Object,
+  /** 取消按钮组件属性 */
+  cancelButtonProps: Object,
+  /** 底栏样式 */
+  footerStyle: Object
+};
+const popconfirmEmits = {
+  ...popoverEmits,
+  confirm: (_e) => true,
+  cancel: (_e) => true
+};
+export {
+  popconfirmEmits,
+  popconfirmProps
+};

package/es/ele-popconfirm/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 气泡确认框主题变量 */
+@mixin set-popconfirm-var($var) {
+  .ele-popconfirm {
+    @include set-ele-var('popconfirm', $var);
+  }
+}

package/es/ele-popconfirm/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-popconfirm/style/index.js

@@ -0,0 +1,4 @@
+import "element-plus/es/components/icon/style/index";
+import "element-plus/es/components/button/style/index";
+import "../../ele-tooltip/style/index";
+import "./index.scss";

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

@@ -0,0 +1,41 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-popconfirm-var($ele);
+
+.ele-popconfirm > .ele-popover-body {
+  padding: eleVar('popconfirm', 'padding');
+}
+
+.ele-popconfirm-main {
+  display: flex;
+}
+
+.ele-popconfirm-icon {
+  flex-shrink: 0;
+  font-size: eleVar('popconfirm', 'icon-font-size');
+  margin: eleVar('popconfirm', 'icon-margin');
+}
+
+.ele-popconfirm-body {
+  flex: 1;
+}
+
+.ele-popconfirm-title {
+  color: eleVar('popconfirm', 'title-color');
+  font-size: eleVar('popconfirm', 'title-font-size');
+  font-weight: eleVar('popconfirm', 'title-font-weight');
+  margin-bottom: eleVar('popconfirm', 'title-margin');
+}
+
+.ele-popconfirm-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: eleVar('popconfirm', 'action-margin');
+
+  .el-button + .el-button {
+    margin-left: eleVar('popconfirm', 'action-space');
+  }
+}