winbox-ui-next
Version:
We Design Vue 2.0: A Vue.js 3 UI Library
247 lines (246 loc) • 8.02 kB
JavaScript
;
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var constant = require("../_utils/constant.js");
var index$2 = require("../icon/icon-info-circle-fill/index.js");
var index$3 = require("../icon/icon-check-circle-fill/index.js");
var index$4 = require("../icon/icon-exclamation-circle-fill/index.js");
var index$5 = require("../icon/icon-close-circle-fill/index.js");
var index = require("../button/index.js");
var index$1 = require("../trigger/index.js");
var index$6 = require("../locale/index.js");
var is = require("../_utils/is.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper");
const _sfc_main = vue.defineComponent({
name: "Popconfirm",
components: {
WButton: index["default"],
Trigger: index$1,
IconInfoCircleFill: index$2,
IconCheckCircleFill: index$3,
IconExclamationCircleFill: index$4,
IconCloseCircleFill: index$5
},
props: {
content: String,
placement: {
type: String,
default: "top",
validator: (value) => {
return constant.TRIGGER_POSITIONS.includes(value);
}
},
popupVisible: {
type: Boolean,
default: void 0
},
defaultPopupVisible: {
type: Boolean,
default: false
},
type: {
type: String,
default: "warning",
validator: (value) => {
return constant.MESSAGE_TYPES.includes(value);
}
},
okText: String,
cancelText: String,
okLoading: {
type: Boolean,
default: false
},
okButtonProps: {
type: Object
},
cancelButtonProps: {
type: Object
},
contentClass: {
type: [String, Array, Object]
},
contentStyle: {
type: Object
},
arrowClass: {
type: [String, Array, Object]
},
arrowStyle: {
type: Object
},
popupContainer: {
type: [String, Object]
},
onBeforeOk: {
type: [Function, Array]
},
onBeforeCancel: {
type: [Function, Array]
}
},
emits: [
"update:popupVisible",
"popupVisibleChange",
"ok",
"cancel"
],
setup(props, { emit }) {
const prefixCls = globalConfig.getPrefixCls("popconfirm");
const { t } = index$6.useI18n();
const _popupVisible = vue.ref(props.defaultPopupVisible);
const computedPopupVisible = vue.computed(() => {
var _a;
return (_a = props.popupVisible) != null ? _a : _popupVisible.value;
});
const _okLoading = vue.ref(false);
const mergedOkLoading = vue.computed(() => props.okLoading || _okLoading.value);
let promiseNumber = 0;
const close = () => {
promiseNumber++;
if (_okLoading.value) {
_okLoading.value = false;
}
_popupVisible.value = false;
emit("update:popupVisible", false);
emit("popupVisibleChange", false);
};
const handlePopupVisibleChange = (visible) => {
if (!visible) {
close();
} else {
_popupVisible.value = visible;
emit("update:popupVisible", visible);
emit("popupVisibleChange", visible);
}
};
const handleOk = () => {
const currentPromiseNumber = promiseNumber;
const promise = new Promise((resolve) => {
if (is.isFunction(props.onBeforeOk)) {
const result = props.onBeforeOk(resolve);
if (is.isBoolean(result)) {
resolve(result);
} else {
_okLoading.value = true;
}
} else {
resolve();
}
});
promise.then((closed = true) => {
if (currentPromiseNumber === promiseNumber) {
_okLoading.value = false;
if (closed) {
emit("ok");
close();
}
}
});
};
const handleCancel = () => {
var _a;
let result = true;
if (is.isFunction(props.onBeforeCancel)) {
result = (_a = props.onBeforeCancel()) != null ? _a : false;
}
if (result) {
emit("cancel");
close();
}
};
const contentCls = vue.computed(() => [
`${prefixCls}-popup-content`,
props.contentClass
]);
const arrowCls = vue.computed(() => [
`${prefixCls}-popup-arrow`,
props.arrowClass
]);
return {
prefixCls,
contentCls,
arrowCls,
computedPopupVisible,
mergedOkLoading,
handlePopupVisibleChange,
handleOk,
handleCancel,
t
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_icon_info_circle_fill = vue.resolveComponent("icon-info-circle-fill");
const _component_icon_check_circle_fill = vue.resolveComponent("icon-check-circle-fill");
const _component_icon_exclamation_circle_fill = vue.resolveComponent("icon-exclamation-circle-fill");
const _component_icon_close_circle_fill = vue.resolveComponent("icon-close-circle-fill");
const _component_w_button = vue.resolveComponent("w-button");
const _component_trigger = vue.resolveComponent("trigger");
return vue.openBlock(), vue.createBlock(_component_trigger, {
class: vue.normalizeClass(_ctx.prefixCls),
trigger: "click",
position: _ctx.placement,
"show-arrow": "",
"popup-visible": _ctx.computedPopupVisible,
"popup-offset": 10,
"popup-container": _ctx.popupContainer,
"content-class": _ctx.contentCls,
"content-style": _ctx.contentStyle,
"arrow-class": _ctx.arrowCls,
"arrow-style": _ctx.arrowStyle,
onPopupVisibleChange: _ctx.handlePopupVisibleChange
}, {
content: vue.withCtx(() => [
vue.createElementVNode("p", {
class: vue.normalizeClass(`${_ctx.prefixCls}-body`)
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(`${_ctx.prefixCls}-icon`)
}, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
_ctx.type === "info" ? (vue.openBlock(), vue.createBlock(_component_icon_info_circle_fill, { key: 0 })) : _ctx.type === "success" ? (vue.openBlock(), vue.createBlock(_component_icon_check_circle_fill, { key: 1 })) : _ctx.type === "warning" ? (vue.openBlock(), vue.createBlock(_component_icon_exclamation_circle_fill, { key: 2 })) : _ctx.type === "error" ? (vue.openBlock(), vue.createBlock(_component_icon_close_circle_fill, { key: 3 })) : vue.createCommentVNode("v-if", true)
])
], 2),
vue.createElementVNode("span", {
class: vue.normalizeClass(`${_ctx.prefixCls}-content`)
}, [
vue.renderSlot(_ctx.$slots, "content", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.content), 1)
])
], 2)
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(`${_ctx.prefixCls}-footer`)
}, [
vue.createVNode(_component_w_button, vue.mergeProps({
type: "text",
size: "small"
}, _ctx.cancelButtonProps, { onClick: _ctx.handleCancel }), {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.cancelText || _ctx.t("popconfirm.cancelText")), 1)
]),
_: 1
}, 16, ["onClick"]),
vue.createVNode(_component_w_button, vue.mergeProps({
type: "primary",
size: "small"
}, _ctx.okButtonProps, {
loading: _ctx.mergedOkLoading,
onClick: _ctx.handleOk
}), {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.okText || _ctx.t("popconfirm.okText")), 1)
]),
_: 1
}, 16, ["loading", "onClick"])
], 2)
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class", "position", "popup-visible", "popup-container", "content-class", "content-style", "arrow-class", "arrow-style", "onPopupVisibleChange"]);
}
var _Popconfirm = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = _Popconfirm;