vue-ele-plus
Version:
1,152 lines (1,151 loc) • 34.8 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { ref, unref, getCurrentScope, onScopeDispose, watch, defineComponent, openBlock, createElementBlock, createElementVNode, warn, getCurrentInstance, inject, computed, onMounted, watchEffect, onBeforeUnmount, isRef, mergeProps, renderSlot, createVNode, h, normalizeClass, normalizeStyle, withModifiers, toDisplayString, createCommentVNode, withCtx, createBlock, resolveDynamicComponent, nextTick, provide, Teleport, Transition, withDirectives, createSlots, vShow, resolveComponent } from "vue";
function fromPairs(pairs) {
var index2 = -1, length = pairs == null ? 0 : pairs.length, result = {};
while (++index2 < length) {
var pair = pairs[index2];
result[pair[0]] = pair[1];
}
return result;
}
function tryOnScopeDispose(fn) {
if (getCurrentScope()) {
onScopeDispose(fn);
return true;
}
return false;
}
const isClient = typeof window !== "undefined";
const isBoolean = (val) => typeof val === "boolean";
const isNumber = (val) => typeof val === "number";
const isString$1 = (val) => typeof val === "string";
const noop = () => {
};
function useTimeoutFn(cb, interval, options = {}) {
const {
immediate = true
} = options;
const isPending = ref(false);
let timer = null;
function clear() {
if (timer) {
clearTimeout(timer);
timer = null;
}
}
function stop() {
isPending.value = false;
clear();
}
function start(...args) {
clear();
isPending.value = true;
timer = setTimeout(() => {
isPending.value = false;
timer = null;
cb(...args);
}, unref(interval));
}
if (immediate) {
isPending.value = true;
if (isClient)
start();
}
tryOnScopeDispose(stop);
return {
isPending,
start,
stop
};
}
function unrefElement(elRef) {
var _a2;
const plain = unref(elRef);
return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
}
const defaultWindow = isClient ? window : void 0;
function useEventListener(...args) {
let target;
let event;
let listener;
let options;
if (isString$1(args[0])) {
[event, listener, options] = args;
target = defaultWindow;
} else {
[target, event, listener, options] = args;
}
if (!target)
return noop;
let cleanup = noop;
const stopWatch = watch(() => unrefElement(target), (el) => {
cleanup();
if (!el)
return;
el.addEventListener(event, listener, options);
cleanup = () => {
el.removeEventListener(event, listener, options);
cleanup = noop;
};
}, { immediate: true, flush: "post" });
const stop = () => {
stopWatch();
cleanup();
};
tryOnScopeDispose(stop);
return stop;
}
const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
const globalKey = "__vueuse_ssr_handlers__";
_global[globalKey] = _global[globalKey] || {};
_global[globalKey];
var _a, _b;
isClient && (window == null ? void 0 : window.navigator) && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.platform) && /iP(ad|hone|od)/.test((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.platform);
const NOOP = () => {
};
const hasOwnProperty = Object.prototype.hasOwnProperty;
const hasOwn = (val, key) => hasOwnProperty.call(val, key);
const isString = (val) => typeof val === "string";
const isObject = (val) => val !== null && typeof val === "object";
const cacheStringFunction = (fn) => {
const cache = /* @__PURE__ */ Object.create(null);
return (str) => {
const hit = cache[str];
return hit || (cache[str] = fn(str));
};
};
const camelizeRE = /-(\w)/g;
const camelize = cacheStringFunction((str) => {
return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
});
const isUndefined = (val) => val === void 0;
const classNameToArray = (cls = "") => cls.split(" ").filter((item) => !!item.trim());
const hasClass = (el, cls) => {
if (!el || !cls)
return false;
if (cls.includes(" "))
throw new Error("className should not contain space.");
return el.classList.contains(cls);
};
const addClass = (el, cls) => {
if (!el || !cls.trim())
return;
el.classList.add(...classNameToArray(cls));
};
const removeClass = (el, cls) => {
if (!el || !cls.trim())
return;
el.classList.remove(...classNameToArray(cls));
};
const getStyle = (element, styleName) => {
var _a2;
if (!isClient || !element || !styleName)
return "";
camelize(styleName);
try {
const style = element.style[styleName];
if (style)
return style;
const computed2 = (_a2 = document.defaultView) == null ? void 0 : _a2.getComputedStyle(element, "");
return computed2 ? computed2[styleName] : "";
} catch (e) {
return element.style[styleName];
}
};
let scrollBarWidth;
const getScrollBarWidth = () => {
var _a2;
if (!isClient)
return 0;
if (scrollBarWidth !== void 0)
return scrollBarWidth;
const outer = document.createElement("div");
outer.className = "el-scrollbar__wrap";
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.position = "absolute";
outer.style.top = "-9999px";
document.body.appendChild(outer);
const widthNoScroll = outer.offsetWidth;
outer.style.overflow = "scroll";
const inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
const widthWithScroll = inner.offsetWidth;
(_a2 = outer.parentNode) == null ? void 0 : _a2.removeChild(outer);
scrollBarWidth = widthNoScroll - widthWithScroll;
return scrollBarWidth;
};
var _export_sfc$1 = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _sfc_main$4 = defineComponent({
name: "Close"
});
const _hoisted_1$1 = {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
fill: "currentColor",
d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
}, null, -1);
const _hoisted_3 = [
_hoisted_2
];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_3);
}
var close = /* @__PURE__ */ _export_sfc$1(_sfc_main$4, [["render", _sfc_render]]);
const wrapperKey = Symbol();
const propKey = "__elPropsReservedKey";
function buildProp(option, key) {
if (!isObject(option) || !!option[propKey])
return option;
const { values, required, default: defaultValue, type, validator } = option;
const _validator = values || validator ? (val) => {
let valid = false;
let allowedValues = [];
if (values) {
allowedValues = Array.from(values);
if (hasOwn(option, "default")) {
allowedValues.push(defaultValue);
}
valid || (valid = allowedValues.includes(val));
}
if (validator)
valid || (valid = validator(val));
if (!valid && allowedValues.length > 0) {
const allowValuesText = [...new Set(allowedValues)].map((value) => JSON.stringify(value)).join(", ");
warn(`Invalid prop: validation failed${key ? ` for prop "${key}"` : ""}. Expected one of [${allowValuesText}], got value ${JSON.stringify(val)}.`);
}
return valid;
} : void 0;
const prop = {
type: isObject(type) && Object.getOwnPropertySymbols(type).includes(wrapperKey) ? type[wrapperKey] : type,
required: !!required,
validator: _validator,
[propKey]: true
};
if (hasOwn(option, "default"))
prop.default = defaultValue;
return prop;
}
const buildProps = (props) => fromPairs(Object.entries(props).map(([key, option]) => [
key,
buildProp(option, key)
]));
const definePropType = (val) => ({ [wrapperKey]: val });
const iconPropType = definePropType([
String,
Object,
Function
]);
const CloseComponents = {
Close: close
};
const withInstall = (main, extra) => {
main.install = (app) => {
for (const comp of [main, ...Object.values(extra != null ? extra : {})]) {
app.component(comp.name, comp);
}
};
if (extra) {
for (const [key, comp] of Object.entries(extra)) {
main[key] = comp;
}
}
return main;
};
class ElementPlusError extends Error {
constructor(m) {
super(m);
this.name = "ElementPlusError";
}
}
function throwError(scope, m) {
throw new ElementPlusError(`[${scope}] ${m}`);
}
function addUnit(value, defaultUnit = "px") {
if (!value)
return "";
if (isString(value)) {
return value;
} else if (isNumber(value)) {
return `${value}${defaultUnit}`;
}
}
const EVENT_CODE = {
tab: "Tab",
enter: "Enter",
space: "Space",
left: "ArrowLeft",
up: "ArrowUp",
right: "ArrowRight",
down: "ArrowDown",
esc: "Escape",
delete: "Delete",
backspace: "Backspace",
numpadEnter: "NumpadEnter",
pageUp: "PageUp",
pageDown: "PageDown",
home: "Home",
end: "End"
};
const UPDATE_MODEL_EVENT = "update:modelValue";
var PatchFlags = /* @__PURE__ */ ((PatchFlags2) => {
PatchFlags2[PatchFlags2["TEXT"] = 1] = "TEXT";
PatchFlags2[PatchFlags2["CLASS"] = 2] = "CLASS";
PatchFlags2[PatchFlags2["STYLE"] = 4] = "STYLE";
PatchFlags2[PatchFlags2["PROPS"] = 8] = "PROPS";
PatchFlags2[PatchFlags2["FULL_PROPS"] = 16] = "FULL_PROPS";
PatchFlags2[PatchFlags2["HYDRATE_EVENTS"] = 32] = "HYDRATE_EVENTS";
PatchFlags2[PatchFlags2["STABLE_FRAGMENT"] = 64] = "STABLE_FRAGMENT";
PatchFlags2[PatchFlags2["KEYED_FRAGMENT"] = 128] = "KEYED_FRAGMENT";
PatchFlags2[PatchFlags2["UNKEYED_FRAGMENT"] = 256] = "UNKEYED_FRAGMENT";
PatchFlags2[PatchFlags2["NEED_PATCH"] = 512] = "NEED_PATCH";
PatchFlags2[PatchFlags2["DYNAMIC_SLOTS"] = 1024] = "DYNAMIC_SLOTS";
PatchFlags2[PatchFlags2["HOISTED"] = -1] = "HOISTED";
PatchFlags2[PatchFlags2["BAIL"] = -2] = "BAIL";
return PatchFlags2;
})(PatchFlags || {});
const configProviderContextKey = Symbol();
const dialogInjectionKey = Symbol("dialogInjectionKey");
const globalConfig = ref();
function useGlobalConfig(key, defaultValue = void 0) {
const config = getCurrentInstance() ? inject(configProviderContextKey, globalConfig) : globalConfig;
if (key) {
return computed(() => {
var _a2, _b2;
return (_b2 = (_a2 = config.value) == null ? void 0 : _a2[key]) != null ? _b2 : defaultValue;
});
} else {
return config;
}
}
const useDraggable = (targetRef, dragRef, draggable) => {
let transform = {
offsetX: 0,
offsetY: 0
};
const onMousedown = (e) => {
const downX = e.clientX;
const downY = e.clientY;
const { offsetX, offsetY } = transform;
const targetRect = targetRef.value.getBoundingClientRect();
const targetLeft = targetRect.left;
const targetTop = targetRect.top;
const targetWidth = targetRect.width;
const targetHeight = targetRect.height;
const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;
const minLeft = -targetLeft + offsetX;
const minTop = -targetTop + offsetY;
const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
const maxTop = clientHeight - targetTop - targetHeight + offsetY;
const onMousemove = (e2) => {
const moveX = Math.min(Math.max(offsetX + e2.clientX - downX, minLeft), maxLeft);
const moveY = Math.min(Math.max(offsetY + e2.clientY - downY, minTop), maxTop);
transform = {
offsetX: moveX,
offsetY: moveY
};
targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`;
};
const onMouseup = () => {
document.removeEventListener("mousemove", onMousemove);
document.removeEventListener("mouseup", onMouseup);
};
document.addEventListener("mousemove", onMousemove);
document.addEventListener("mouseup", onMouseup);
};
const onDraggable = () => {
if (dragRef.value && targetRef.value) {
dragRef.value.addEventListener("mousedown", onMousedown);
}
};
const offDraggable = () => {
if (dragRef.value && targetRef.value) {
dragRef.value.removeEventListener("mousedown", onMousedown);
}
};
onMounted(() => {
watchEffect(() => {
if (draggable.value) {
onDraggable();
} else {
offDraggable();
}
});
});
onBeforeUnmount(() => {
offDraggable();
});
};
const useLockscreen = (trigger) => {
if (!isRef(trigger)) {
throwError("[useLockscreen]", "You need to pass a ref param to this function");
}
if (!isClient || hasClass(document.body, "el-popup-parent--hidden")) {
return;
}
let scrollBarWidth2 = 0;
let withoutHiddenClass = false;
let bodyPaddingRight = "0";
let computedBodyPaddingRight = 0;
const cleanup = () => {
removeClass(document.body, "el-popup-parent--hidden");
if (withoutHiddenClass) {
document.body.style.paddingRight = bodyPaddingRight;
}
};
watch(trigger, (val) => {
if (!val) {
cleanup();
return;
}
withoutHiddenClass = !hasClass(document.body, "el-popup-parent--hidden");
if (withoutHiddenClass) {
bodyPaddingRight = document.body.style.paddingRight;
computedBodyPaddingRight = Number.parseInt(getStyle(document.body, "paddingRight"), 10);
}
scrollBarWidth2 = getScrollBarWidth();
const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
const bodyOverflowY = getStyle(document.body, "overflowY");
if (scrollBarWidth2 > 0 && (bodyHasOverflow || bodyOverflowY === "scroll") && withoutHiddenClass) {
document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarWidth2}px`;
}
addClass(document.body, "el-popup-parent--hidden");
});
onScopeDispose(() => cleanup());
};
const modalStack = [];
const closeModal = (e) => {
if (modalStack.length === 0)
return;
if (e.code === EVENT_CODE.esc) {
e.stopPropagation();
const topModal = modalStack[modalStack.length - 1];
topModal.handleClose();
}
};
const useModal = (instance, visibleRef) => {
watch(visibleRef, (val) => {
if (val) {
modalStack.push(instance);
} else {
modalStack.splice(modalStack.indexOf(instance), 1);
}
});
};
if (isClient)
useEventListener(document, "keydown", closeModal);
const useRestoreActive = (toggle, initialFocus) => {
let previousActive;
watch(() => toggle.value, (val) => {
var _a2, _b2;
if (val) {
previousActive = document.activeElement;
if (isRef(initialFocus)) {
(_b2 = (_a2 = initialFocus.value).focus) == null ? void 0 : _b2.call(_a2);
}
} else {
{
previousActive.focus();
}
}
});
};
const useSameTarget = (handleClick) => {
if (!handleClick) {
return { onClick: NOOP, onMousedown: NOOP, onMouseup: NOOP };
}
let mousedownTarget = false;
let mouseupTarget = false;
const onClick = (e) => {
if (mousedownTarget && mouseupTarget) {
handleClick(e);
}
mousedownTarget = mouseupTarget = false;
};
const onMousedown = (e) => {
mousedownTarget = e.target === e.currentTarget;
};
const onMouseup = (e) => {
mouseupTarget = e.target === e.currentTarget;
};
return { onClick, onMousedown, onMouseup };
};
const defaultNamespace = "el";
const statePrefix = "is-";
const _bem = (namespace, block, blockSuffix, element, modifier) => {
let cls = `${namespace}-${block}`;
if (blockSuffix) {
cls += `-${blockSuffix}`;
}
if (element) {
cls += `__${element}`;
}
if (modifier) {
cls += `--${modifier}`;
}
return cls;
};
const useNamespace = (block) => {
const globalConfig2 = useGlobalConfig("namespace");
const namespace = computed(() => globalConfig2.value || defaultNamespace);
const b = (blockSuffix = "") => _bem(unref(namespace), block, blockSuffix, "", "");
const e = (element) => element ? _bem(unref(namespace), block, "", element, "") : "";
const m = (modifier) => modifier ? _bem(unref(namespace), block, "", "", modifier) : "";
const be = (blockSuffix, element) => blockSuffix && element ? _bem(unref(namespace), block, blockSuffix, element, "") : "";
const em = (element, modifier) => element && modifier ? _bem(unref(namespace), block, "", element, modifier) : "";
const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(unref(namespace), block, blockSuffix, "", modifier) : "";
const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(unref(namespace), block, blockSuffix, element, modifier) : "";
const is = (name, ...args) => {
const state = args.length >= 1 ? args[0] : true;
return name && state ? `${statePrefix}${name}` : "";
};
return {
namespace,
b,
e,
m,
be,
em,
bm,
bem,
is
};
};
const zIndex = ref(0);
const useZIndex = () => {
const initialZIndex = useGlobalConfig("zIndex", 2e3);
const currentZIndex = computed(() => initialZIndex.value + zIndex.value);
const nextZIndex = () => {
zIndex.value++;
return currentZIndex.value;
};
return {
initialZIndex,
currentZIndex,
nextZIndex
};
};
var _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const iconProps = buildProps({
size: {
type: definePropType([Number, String])
},
color: {
type: String
}
});
const __default__$2 = {
name: "ElIcon",
inheritAttrs: false
};
const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
props: iconProps,
setup(__props) {
const props = __props;
const ns = useNamespace("icon");
const style = computed(() => {
if (!props.size && !props.color)
return {};
return {
fontSize: isUndefined(props.size) ? void 0 : addUnit(props.size),
"--color": props.color
};
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("i", mergeProps({
class: unref(ns).b(),
style: unref(style)
}, _ctx.$attrs), [
renderSlot(_ctx.$slots, "default")
], 16);
};
}
}));
var Icon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/icon/src/icon.vue"]]);
const ElIcon = withInstall(Icon);
const overlayProps = buildProps({
mask: {
type: Boolean,
default: true
},
customMaskEvent: {
type: Boolean,
default: false
},
overlayClass: {
type: definePropType([
String,
Array,
Object
])
},
zIndex: {
type: definePropType([String, Number])
}
});
const overlayEmits = {
click: (evt) => evt instanceof MouseEvent
};
var Overlay = defineComponent({
name: "ElOverlay",
props: overlayProps,
emits: overlayEmits,
setup(props, { slots, emit }) {
const ns = useNamespace("overlay");
const onMaskClick = (e) => {
emit("click", e);
};
const { onClick, onMousedown, onMouseup } = useSameTarget(props.customMaskEvent ? void 0 : onMaskClick);
return () => {
return props.mask ? createVNode("div", {
class: [ns.b(), props.overlayClass],
style: {
zIndex: props.zIndex
},
onClick,
onMousedown,
onMouseup
}, [renderSlot(slots, "default")], PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS, ["onClick", "onMouseup", "onMousedown"]) : h("div", {
class: props.overlayClass,
style: {
zIndex: props.zIndex,
position: "fixed",
top: "0px",
right: "0px",
bottom: "0px",
left: "0px"
}
}, [renderSlot(slots, "default")]);
};
}
});
const ElOverlay = Overlay;
const dialogContentProps = buildProps({
center: {
type: Boolean,
default: false
},
closeIcon: {
type: iconPropType,
default: ""
},
customClass: {
type: String,
default: ""
},
draggable: {
type: Boolean,
default: false
},
fullscreen: {
type: Boolean,
default: false
},
showClose: {
type: Boolean,
default: true
},
title: {
type: String,
default: ""
}
});
const dialogContentEmits = {
close: () => true
};
const _hoisted_1 = ["aria-label"];
const __default__$1 = { name: "ElDialogContent" };
const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
props: dialogContentProps,
emits: dialogContentEmits,
setup(__props) {
const { Close } = CloseComponents;
const { dialogRef, headerRef, ns, style } = inject(dialogInjectionKey);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "dialogRef",
ref: dialogRef,
class: normalizeClass([
unref(ns).b(),
unref(ns).is("fullscreen", _ctx.fullscreen),
unref(ns).is("draggable", _ctx.draggable),
{ [unref(ns).m("center")]: _ctx.center },
_ctx.customClass
]),
"aria-modal": "true",
role: "dialog",
"aria-label": _ctx.title || "dialog",
style: normalizeStyle(unref(style)),
onClick: _cache[1] || (_cache[1] = withModifiers(() => {
}, ["stop"]))
}, [
createElementVNode("div", {
ref_key: "headerRef",
ref: headerRef,
class: normalizeClass(unref(ns).e("header"))
}, [
renderSlot(_ctx.$slots, "title", {}, () => [
createElementVNode("span", {
class: normalizeClass(unref(ns).e("title"))
}, toDisplayString(_ctx.title), 3)
])
], 2),
createElementVNode("div", {
class: normalizeClass(unref(ns).e("body"))
}, [
renderSlot(_ctx.$slots, "default")
], 2),
_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(ns).e("footer"))
}, [
renderSlot(_ctx.$slots, "footer")
], 2)) : createCommentVNode("v-if", true),
_ctx.showClose ? (openBlock(), createElementBlock("button", {
key: 1,
"aria-label": "close",
class: normalizeClass(unref(ns).e("headerbtn")),
type: "button",
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
}, [
createVNode(unref(ElIcon), {
class: normalizeClass(unref(ns).e("close"))
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.closeIcon || unref(Close))))
]),
_: 1
}, 8, ["class"])
], 2)) : createCommentVNode("v-if", true)
], 14, _hoisted_1);
};
}
}));
var ElDialogContent = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/dialog/src/dialog-content.vue"]]);
const dialogProps = buildProps(__spreadProps(__spreadValues({}, dialogContentProps), {
appendToBody: {
type: Boolean,
default: false
},
beforeClose: {
type: definePropType(Function)
},
destroyOnClose: {
type: Boolean,
default: false
},
closeOnClickModal: {
type: Boolean,
default: true
},
closeOnPressEscape: {
type: Boolean,
default: true
},
lockScroll: {
type: Boolean,
default: true
},
modal: {
type: Boolean,
default: true
},
openDelay: {
type: Number,
default: 0
},
closeDelay: {
type: Number,
default: 0
},
top: {
type: String
},
modelValue: {
type: Boolean,
required: true
},
modalClass: String,
width: {
type: [String, Number]
},
zIndex: {
type: Number
},
trapFocus: {
type: Boolean,
default: false
}
}));
const dialogEmits = {
open: () => true,
opened: () => true,
close: () => true,
closed: () => true,
[UPDATE_MODEL_EVENT]: (value) => isBoolean(value),
openAutoFocus: () => true,
closeAutoFocus: () => true
};
const useDialog = (props, targetRef) => {
const instance = getCurrentInstance();
const emit = instance.emit;
const { nextZIndex } = useZIndex();
let lastPosition = "";
const visible = ref(false);
const closed = ref(false);
const rendered = ref(false);
const zIndex2 = ref(props.zIndex || nextZIndex());
let openTimer = void 0;
let closeTimer = void 0;
const normalizeWidth = computed(() => isNumber(props.width) ? `${props.width}px` : props.width);
const style = computed(() => {
const style2 = {};
const varPrefix = `--el-dialog`;
if (!props.fullscreen) {
if (props.top) {
style2[`${varPrefix}-margin-top`] = props.top;
}
if (props.width) {
style2[`${varPrefix}-width`] = normalizeWidth.value;
}
}
return style2;
});
function afterEnter() {
emit("opened");
}
function afterLeave() {
emit("closed");
emit(UPDATE_MODEL_EVENT, false);
if (props.destroyOnClose) {
rendered.value = false;
}
}
function beforeLeave() {
emit("close");
}
function open() {
closeTimer == null ? void 0 : closeTimer();
openTimer == null ? void 0 : openTimer();
if (props.openDelay && props.openDelay > 0) {
({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay));
} else {
doOpen();
}
}
function close2() {
openTimer == null ? void 0 : openTimer();
closeTimer == null ? void 0 : closeTimer();
if (props.closeDelay && props.closeDelay > 0) {
({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay));
} else {
doClose();
}
}
function handleClose() {
function hide(shouldCancel) {
if (shouldCancel)
return;
closed.value = true;
visible.value = false;
}
if (props.beforeClose) {
props.beforeClose(hide);
} else {
close2();
}
}
function onModalClick() {
if (props.closeOnClickModal) {
handleClose();
}
}
function doOpen() {
if (!isClient)
return;
visible.value = true;
}
function doClose() {
visible.value = false;
}
if (props.lockScroll) {
useLockscreen(visible);
}
if (props.closeOnPressEscape) {
useModal({
handleClose
}, visible);
}
useRestoreActive(visible);
watch(() => props.modelValue, (val) => {
if (val) {
closed.value = false;
open();
rendered.value = true;
emit("open");
zIndex2.value = props.zIndex ? zIndex2.value++ : nextZIndex();
nextTick(() => {
if (targetRef.value) {
targetRef.value.scrollTop = 0;
}
});
} else {
if (visible.value) {
close2();
}
}
});
watch(() => props.fullscreen, (val) => {
if (!targetRef.value)
return;
if (val) {
lastPosition = targetRef.value.style.transform;
targetRef.value.style.transform = "";
} else {
targetRef.value.style.transform = lastPosition;
}
});
onMounted(() => {
if (props.modelValue) {
visible.value = true;
rendered.value = true;
open();
}
});
return {
afterEnter,
afterLeave,
beforeLeave,
handleClose,
onModalClick,
close: close2,
doClose,
closed,
style,
rendered,
visible,
zIndex: zIndex2
};
};
const __default__ = {
name: "ElDialog"
};
const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
props: dialogProps,
emits: dialogEmits,
setup(__props, { expose }) {
const props = __props;
const ns = useNamespace("dialog");
const dialogRef = ref();
const headerRef = ref();
const {
visible,
style,
rendered,
zIndex: zIndex2,
afterEnter,
afterLeave,
beforeLeave,
handleClose,
onModalClick
} = useDialog(props, dialogRef);
provide(dialogInjectionKey, {
dialogRef,
headerRef,
ns,
rendered,
style
});
const overlayEvent = useSameTarget(onModalClick);
const draggable = computed(() => props.draggable && !props.fullscreen);
useDraggable(dialogRef, headerRef, draggable);
expose({
visible
});
return (_ctx, _cache) => {
return openBlock(), createBlock(Teleport, {
to: "body",
disabled: !_ctx.appendToBody
}, [
createVNode(Transition, {
name: "dialog-fade",
onAfterEnter: unref(afterEnter),
onAfterLeave: unref(afterLeave),
onBeforeLeave: unref(beforeLeave)
}, {
default: withCtx(() => [
withDirectives(createVNode(unref(ElOverlay), {
"custom-mask-event": "",
mask: _ctx.modal,
"overlay-class": _ctx.modalClass,
"z-index": unref(zIndex2)
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(`${unref(ns).namespace.value}-overlay-dialog`),
onClick: _cache[0] || (_cache[0] = (...args) => unref(overlayEvent).onClick && unref(overlayEvent).onClick(...args)),
onMousedown: _cache[1] || (_cache[1] = (...args) => unref(overlayEvent).onMousedown && unref(overlayEvent).onMousedown(...args)),
onMouseup: _cache[2] || (_cache[2] = (...args) => unref(overlayEvent).onMouseup && unref(overlayEvent).onMouseup(...args))
}, [
unref(rendered) ? (openBlock(), createBlock(ElDialogContent, {
key: 0,
"custom-class": _ctx.customClass,
center: _ctx.center,
"close-icon": _ctx.closeIcon,
draggable: unref(draggable),
fullscreen: _ctx.fullscreen,
"show-close": _ctx.showClose,
style: normalizeStyle(unref(style)),
title: _ctx.title,
onClose: unref(handleClose)
}, createSlots({
title: withCtx(() => [
renderSlot(_ctx.$slots, "title")
]),
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 2
}, [
_ctx.$slots.footer ? {
name: "footer",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "footer")
])
} : void 0
]), 1032, ["custom-class", "center", "close-icon", "draggable", "fullscreen", "show-close", "style", "title", "onClose"])) : createCommentVNode("v-if", true)
], 34)
]),
_: 3
}, 8, ["mask", "overlay-class", "z-index"]), [
[vShow, unref(visible)]
])
]),
_: 3
}, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
], 8, ["disabled"]);
};
}
}));
var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/dialog/src/dialog.vue"]]);
const ElDialog = withInstall(Dialog);
const _sfc_main = /* @__PURE__ */ defineComponent({
props: {
visible: {
type: Boolean,
default: false
},
options: {
default: [],
type: Array
},
isScroll: {
type: Boolean,
default: false
},
onPreview: {
type: Function
},
onRemove: {
type: Function
},
onExceed: {
type: Function
},
onSuccess: {
type: Function
},
beforeRemove: {
type: Function
}
},
emits: ["update:visible"],
setup(__props, { emit: emits }) {
const props = __props;
let form = ref(null);
let dialogVisible = ref(props.visible);
watch(() => props.visible, (val) => {
dialogVisible.value = val;
});
watch(() => dialogVisible.value, (val) => {
emits("update:visible", val);
});
return (_ctx, _cache) => {
const _component_m_form = resolveComponent("m-form");
return openBlock(), createElementBlock("div", {
class: normalizeClass({ "m-choose-icon-dialog-body-height": __props.isScroll })
}, [
createVNode(unref(ElDialog), mergeProps({
modelValue: unref(dialogVisible),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(dialogVisible) ? dialogVisible.value = $event : dialogVisible = $event)
}, _ctx.$attrs), {
default: withCtx(() => [
createVNode(_component_m_form, {
"label-width": "100px",
ref_key: "form",
ref: form,
options: __props.options,
onOnPreview: __props.onPreview,
onOnRemove: __props.onRemove,
onOnExceed: __props.onExceed,
onOnSuccess: __props.onSuccess,
onBeforeRemove: __props.beforeRemove
}, {
uploadArea: withCtx(() => [
renderSlot(_ctx.$slots, "uploadArea")
]),
uploadTip: withCtx(() => [
renderSlot(_ctx.$slots, "uploadTip")
]),
_: 3
}, 8, ["options", "onOnPreview", "onOnRemove", "onOnExceed", "onOnSuccess", "onBeforeRemove"])
]),
footer: withCtx(() => [
renderSlot(_ctx.$slots, "footer", { form: unref(form) })
]),
_: 3
}, 16, ["modelValue"])
], 2);
};
}
});
var index = {
install(app) {
app.component("m-model-form", _sfc_main);
}
};
export { index as default };