{
const nodes = [];
const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, {
acceptNode: (node) => {
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
if (node.disabled || node.hidden || isHiddenInput)
return NodeFilter.FILTER_SKIP;
return node.tabIndex >= 0 || node === document.activeElement ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
while (walker.nextNode())
nodes.push(walker.currentNode);
return nodes;
};
const getVisibleElement = (elements, container) => {
for (const element of elements) {
if (!isHidden(element, container))
return element;
}
};
const isHidden = (element, container) => {
if (getComputedStyle(element).visibility === "hidden")
return true;
while (element) {
if (container && element === container)
return false;
if (getComputedStyle(element).display === "none")
return true;
element = element.parentElement;
}
return false;
};
const getEdges = (container) => {
const focusable = obtainAllFocusableElements(container);
const first = getVisibleElement(focusable, container);
const last = getVisibleElement(focusable.reverse(), container);
return [first, last];
};
const isSelectable = (element) => {
return element instanceof HTMLInputElement && "select" in element;
};
const tryFocus = (element, shouldSelect) => {
if (element && element.focus) {
const prevFocusedElement = document.activeElement;
element.focus({ preventScroll: true });
lastAutomatedFocusTimestamp.value = window.performance.now();
if (element !== prevFocusedElement && isSelectable(element) && shouldSelect) {
if (element.tagName === "INPUT") {
element.setSelectionRange(element.value.length, element.value.length);
return;
}
element.select();
}
}
};
function removeFromStack(list, item) {
const copy = [...list];
const idx = list.indexOf(item);
if (idx !== -1) {
copy.splice(idx, 1);
}
return copy;
}
const createFocusableStack = () => {
let stack = [];
const push = (layer) => {
const currentLayer = stack[0];
if (currentLayer && layer !== currentLayer) {
currentLayer.pause();
}
stack = removeFromStack(stack, layer);
stack.unshift(layer);
};
const remove = (layer) => {
var _a, _b;
stack = removeFromStack(stack, layer);
(_b = (_a = stack[0]) == null ? void 0 : _a.resume) == null ? void 0 : _b.call(_a);
};
return {
push,
remove
};
};
const focusFirstDescendant = (elements, shouldSelect = false) => {
const prevFocusedElement = document.activeElement;
for (const element of elements) {
tryFocus(element, shouldSelect);
if (document.activeElement !== prevFocusedElement)
return;
}
};
const focusableStack = createFocusableStack();
const isFocusCausedByUserEvent = () => {
return lastUserFocusTimestamp.value > lastAutomatedFocusTimestamp.value;
};
const notifyFocusReasonPointer = () => {
focusReason.value = "pointer";
lastUserFocusTimestamp.value = window.performance.now();
};
const notifyFocusReasonKeydown = () => {
focusReason.value = "keyboard";
lastUserFocusTimestamp.value = window.performance.now();
};
const useFocusReason = () => {
vue.onMounted(() => {
if (focusReasonUserCount === 0) {
document.addEventListener("mousedown", notifyFocusReasonPointer);
document.addEventListener("touchstart", notifyFocusReasonPointer);
document.addEventListener("keydown", notifyFocusReasonKeydown);
}
focusReasonUserCount++;
});
vue.onBeforeUnmount(() => {
focusReasonUserCount--;
if (focusReasonUserCount <= 0) {
document.removeEventListener("mousedown", notifyFocusReasonPointer);
document.removeEventListener("touchstart", notifyFocusReasonPointer);
document.removeEventListener("keydown", notifyFocusReasonKeydown);
}
});
return {
focusReason,
lastUserFocusTimestamp,
lastAutomatedFocusTimestamp
};
};
const createFocusOutPreventedEvent = (detail) => {
return new CustomEvent(FOCUSOUT_PREVENTED, {
...FOCUSOUT_PREVENTED_OPTS,
detail
});
};
const _sfc_main$25 = vue.defineComponent({
name: "ElFocusTrap",
inheritAttrs: false,
props: {
loop: Boolean,
trapped: Boolean,
focusTrapEl: Object,
focusStartEl: {
type: [Object, String],
default: "first"
}
},
emits: [
ON_TRAP_FOCUS_EVT,
ON_RELEASE_FOCUS_EVT,
"focusin",
"focusout",
"focusout-prevented",
"release-requested"
],
setup(props, { emit }) {
const forwardRef = vue.ref();
let lastFocusBeforeTrapped;
let lastFocusAfterTrapped;
const { focusReason } = useFocusReason();
useEscapeKeydown((event) => {
if (props.trapped && !focusLayer.paused) {
emit("release-requested", event);
}
});
const focusLayer = {
paused: false,
pause() {
this.paused = true;
},
resume() {
this.paused = false;
}
};
const onKeydown = (e) => {
if (!props.loop && !props.trapped)
return;
if (focusLayer.paused)
return;
const { key, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e;
const { loop } = props;
const isTabbing = key === EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey;
const currentFocusingEl = document.activeElement;
if (isTabbing && currentFocusingEl) {
const container = currentTarget;
const [first, last] = getEdges(container);
const isTabbable = first && last;
if (!isTabbable) {
if (currentFocusingEl === container) {
const focusoutPreventedEvent = createFocusOutPreventedEvent({
focusReason: focusReason.value
});
emit("focusout-prevented", focusoutPreventedEvent);
if (!focusoutPreventedEvent.defaultPrevented) {
e.preventDefault();
}
}
} else {
if (!shiftKey && currentFocusingEl === last) {
const focusoutPreventedEvent = createFocusOutPreventedEvent({
focusReason: focusReason.value
});
emit("focusout-prevented", focusoutPreventedEvent);
if (!focusoutPreventedEvent.defaultPrevented) {
e.preventDefault();
if (loop)
tryFocus(first, true);
}
} else if (shiftKey && [first, container].includes(currentFocusingEl)) {
const focusoutPreventedEvent = createFocusOutPreventedEvent({
focusReason: focusReason.value
});
emit("focusout-prevented", focusoutPreventedEvent);
if (!focusoutPreventedEvent.defaultPrevented) {
e.preventDefault();
if (loop)
tryFocus(last, true);
}
}
}
}
};
vue.provide(FOCUS_TRAP_INJECTION_KEY, {
focusTrapRef: forwardRef,
onKeydown
});
vue.watch(() => props.focusTrapEl, (focusTrapEl) => {
if (focusTrapEl) {
forwardRef.value = focusTrapEl;
}
}, { immediate: true });
vue.watch([forwardRef], ([forwardRef2], [oldForwardRef]) => {
if (forwardRef2) {
forwardRef2.addEventListener("keydown", onKeydown);
forwardRef2.addEventListener("focusin", onFocusIn);
forwardRef2.addEventListener("focusout", onFocusOut);
}
if (oldForwardRef) {
oldForwardRef.removeEventListener("keydown", onKeydown);
oldForwardRef.removeEventListener("focusin", onFocusIn);
oldForwardRef.removeEventListener("focusout", onFocusOut);
}
});
const trapOnFocus = (e) => {
emit(ON_TRAP_FOCUS_EVT, e);
};
const releaseOnFocus = (e) => emit(ON_RELEASE_FOCUS_EVT, e);
const onFocusIn = (e) => {
const trapContainer = vue.unref(forwardRef);
if (!trapContainer)
return;
const target = e.target;
const relatedTarget = e.relatedTarget;
const isFocusedInTrap = target && trapContainer.contains(target);
if (!props.trapped) {
const isPrevFocusedInTrap = relatedTarget && trapContainer.contains(relatedTarget);
if (!isPrevFocusedInTrap) {
lastFocusBeforeTrapped = relatedTarget;
}
}
if (isFocusedInTrap)
emit("focusin", e);
if (focusLayer.paused)
return;
if (props.trapped) {
if (isFocusedInTrap) {
lastFocusAfterTrapped = target;
} else {
tryFocus(lastFocusAfterTrapped, true);
}
}
};
const onFocusOut = (e) => {
const trapContainer = vue.unref(forwardRef);
if (focusLayer.paused || !trapContainer)
return;
if (props.trapped) {
const relatedTarget = e.relatedTarget;
if (!isNil(relatedTarget) && !trapContainer.contains(relatedTarget)) {
setTimeout(() => {
if (!focusLayer.paused && props.trapped) {
const focusoutPreventedEvent = createFocusOutPreventedEvent({
focusReason: focusReason.value
});
emit("focusout-prevented", focusoutPreventedEvent);
if (!focusoutPreventedEvent.defaultPrevented) {
tryFocus(lastFocusAfterTrapped, true);
}
}
}, 0);
}
} else {
const target = e.target;
const isFocusedInTrap = target && trapContainer.contains(target);
if (!isFocusedInTrap)
emit("focusout", e);
}
};
async function startTrap() {
await vue.nextTick();
const trapContainer = vue.unref(forwardRef);
if (trapContainer) {
focusableStack.push(focusLayer);
const prevFocusedElement = trapContainer.contains(document.activeElement) ? lastFocusBeforeTrapped : document.activeElement;
lastFocusBeforeTrapped = prevFocusedElement;
const isPrevFocusContained = trapContainer.contains(prevFocusedElement);
if (!isPrevFocusContained) {
const focusEvent = new Event(FOCUS_AFTER_TRAPPED, FOCUS_AFTER_TRAPPED_OPTS);
trapContainer.addEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus);
trapContainer.dispatchEvent(focusEvent);
if (!focusEvent.defaultPrevented) {
vue.nextTick(() => {
let focusStartEl = props.focusStartEl;
if (!isString(focusStartEl)) {
tryFocus(focusStartEl);
if (document.activeElement !== focusStartEl) {
focusStartEl = "first";
}
}
if (focusStartEl === "first") {
focusFirstDescendant(obtainAllFocusableElements(trapContainer), true);
}
if (document.activeElement === prevFocusedElement || focusStartEl === "container") {
tryFocus(trapContainer);
}
});
}
}
}
}
function stopTrap() {
const trapContainer = vue.unref(forwardRef);
if (trapContainer) {
trapContainer.removeEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus);
const releasedEvent = new CustomEvent(FOCUS_AFTER_RELEASED, {
...FOCUS_AFTER_TRAPPED_OPTS,
detail: {
focusReason: focusReason.value
}
});
trapContainer.addEventListener(FOCUS_AFTER_RELEASED, releaseOnFocus);
trapContainer.dispatchEvent(releasedEvent);
if (!releasedEvent.defaultPrevented && (focusReason.value == "keyboard" || !isFocusCausedByUserEvent())) {
tryFocus(lastFocusBeforeTrapped != null ? lastFocusBeforeTrapped : document.body, true);
}
trapContainer.removeEventListener(FOCUS_AFTER_RELEASED, trapOnFocus);
focusableStack.remove(focusLayer);
}
}
vue.onMounted(() => {
if (props.trapped) {
startTrap();
}
vue.watch(() => props.trapped, (trapped) => {
if (trapped) {
startTrap();
} else {
stopTrap();
}
});
});
vue.onBeforeUnmount(() => {
if (props.trapped) {
stopTrap();
}
});
return {
onKeydown
};
}
});
function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
return vue.renderSlot(_ctx.$slots, "default", { handleKeydown: _ctx.onKeydown });
}
var ElFocusTrap = /* @__PURE__ */ _export_sfc(_sfc_main$25, [["render", _sfc_render$y], ["__file", "focus-trap.vue"]]);
const POSITIONING_STRATEGIES = ["fixed", "absolute"];
const popperCoreConfigProps = buildProps({
boundariesPadding: {
type: Number,
default: 0
},
fallbackPlacements: {
type: definePropType(Array),
default: void 0
},
gpuAcceleration: {
type: Boolean,
default: true
},
offset: {
type: Number,
default: 12
},
placement: {
type: String,
values: Ee,
default: "bottom"
},
popperOptions: {
type: definePropType(Object),
default: () => ({})
},
strategy: {
type: String,
values: POSITIONING_STRATEGIES,
default: "absolute"
}
});
const popperContentProps = buildProps({
...popperCoreConfigProps,
id: String,
style: {
type: definePropType([String, Array, Object])
},
className: {
type: definePropType([String, Array, Object])
},
effect: {
type: String,
default: "dark"
},
visible: Boolean,
enterable: {
type: Boolean,
default: true
},
pure: Boolean,
focusOnShow: {
type: Boolean,
default: false
},
trapping: {
type: Boolean,
default: false
},
popperClass: {
type: definePropType([String, Array, Object])
},
popperStyle: {
type: definePropType([String, Array, Object])
},
referenceEl: {
type: definePropType(Object)
},
triggerTargetEl: {
type: definePropType(Object)
},
stopPopperMouseEvent: {
type: Boolean,
default: true
},
ariaLabel: {
type: String,
default: void 0
},
virtualTriggering: Boolean,
zIndex: Number
});
const popperContentEmits = {
mouseenter: (evt) => evt instanceof MouseEvent,
mouseleave: (evt) => evt instanceof MouseEvent,
focus: () => true,
blur: () => true,
close: () => true
};
const usePopperCoreConfigProps = popperCoreConfigProps;
const usePopperContentProps = popperContentProps;
const usePopperContentEmits = popperContentEmits;
const buildPopperOptions = (props, arrowProps) => {
const { placement, strategy, popperOptions } = props;
const options = {
placement,
strategy,
...popperOptions,
modifiers: genModifiers(props)
};
attachArrow(options, arrowProps);
deriveExtraModifiers(options, popperOptions == null ? void 0 : popperOptions.modifiers);
return options;
};
const unwrapMeasurableEl = ($el) => {
if (!isClient)
return;
return unrefElement($el);
};
function genModifiers(options) {
const { offset, gpuAcceleration, fallbackPlacements } = options;
return [
{
name: "offset",
options: {
offset: [0, offset != null ? offset : 12]
}
},
{
name: "preventOverflow",
options: {
padding: {
top: 2,
bottom: 2,
left: 5,
right: 5
}
}
},
{
name: "flip",
options: {
padding: 5,
fallbackPlacements
}
},
{
name: "computeStyles",
options: {
gpuAcceleration
}
}
];
}
function attachArrow(options, { arrowEl, arrowOffset }) {
options.modifiers.push({
name: "arrow",
options: {
element: arrowEl,
padding: arrowOffset != null ? arrowOffset : 5
}
});
}
function deriveExtraModifiers(options, modifiers) {
if (modifiers) {
options.modifiers = [...options.modifiers, ...modifiers != null ? modifiers : []];
}
}
const __default__$1o = vue.defineComponent({
name: "ElPopperContent"
});
const _sfc_main$24 = /* @__PURE__ */ vue.defineComponent({
...__default__$1o,
props: popperContentProps,
emits: popperContentEmits,
setup(__props, { expose, emit }) {
const props = __props;
const { popperInstanceRef, contentRef, triggerRef, role } = vue.inject(POPPER_INJECTION_KEY, void 0);
const formItemContext = vue.inject(formItemContextKey, void 0);
const { nextZIndex } = useZIndex();
const ns = useNamespace("popper");
const popperContentRef = vue.ref();
const focusStartRef = vue.ref("first");
const arrowRef = vue.ref();
const arrowOffset = vue.ref();
vue.provide(POPPER_CONTENT_INJECTION_KEY, {
arrowRef,
arrowOffset
});
if (formItemContext && (formItemContext.addInputId || formItemContext.removeInputId)) {
vue.provide(formItemContextKey, {
...formItemContext,
addInputId: NOOP,
removeInputId: NOOP
});
}
const contentZIndex = vue.ref(props.zIndex || nextZIndex());
const trapped = vue.ref(false);
let triggerTargetAriaStopWatch = void 0;
const computedReference = vue.computed(() => unwrapMeasurableEl(props.referenceEl) || vue.unref(triggerRef));
const contentStyle = vue.computed(() => [{ zIndex: vue.unref(contentZIndex) }, props.popperStyle]);
const contentClass = vue.computed(() => [
ns.b(),
ns.is("pure", props.pure),
ns.is(props.effect),
props.popperClass
]);
const ariaModal = vue.computed(() => {
return role && role.value === "dialog" ? "false" : void 0;
});
const createPopperInstance = ({
referenceEl,
popperContentEl,
arrowEl
}) => {
const options = buildPopperOptions(props, {
arrowEl,
arrowOffset: vue.unref(arrowOffset)
});
return yn(referenceEl, popperContentEl, options);
};
const updatePopper = (shouldUpdateZIndex = true) => {
var _a;
(_a = vue.unref(popperInstanceRef)) == null ? void 0 : _a.update();
shouldUpdateZIndex && (contentZIndex.value = props.zIndex || nextZIndex());
};
const togglePopperAlive = () => {
var _a, _b;
const monitorable = { name: "eventListeners", enabled: props.visible };
(_b = (_a = vue.unref(popperInstanceRef)) == null ? void 0 : _a.setOptions) == null ? void 0 : _b.call(_a, (options) => ({
...options,
modifiers: [...options.modifiers || [], monitorable]
}));
updatePopper(false);
if (props.visible && props.focusOnShow) {
trapped.value = true;
} else if (props.visible === false) {
trapped.value = false;
}
};
const onFocusAfterTrapped = () => {
emit("focus");
};
const onFocusAfterReleased = (event) => {
var _a;
if (((_a = event.detail) == null ? void 0 : _a.focusReason) !== "pointer") {
focusStartRef.value = "first";
emit("blur");
}
};
const onFocusInTrap = (event) => {
if (props.visible && !trapped.value) {
if (event.target) {
focusStartRef.value = event.target;
}
trapped.value = true;
}
};
const onFocusoutPrevented = (event) => {
if (!props.trapping) {
if (event.detail.focusReason === "pointer") {
event.preventDefault();
}
trapped.value = false;
}
};
const onReleaseRequested = () => {
trapped.value = false;
emit("close");
};
vue.onMounted(() => {
let updateHandle;
vue.watch(computedReference, (referenceEl) => {
var _a;
updateHandle == null ? void 0 : updateHandle();
const popperInstance = vue.unref(popperInstanceRef);
(_a = popperInstance == null ? void 0 : popperInstance.destroy) == null ? void 0 : _a.call(popperInstance);
if (referenceEl) {
const popperContentEl = vue.unref(popperContentRef);
contentRef.value = popperContentEl;
popperInstanceRef.value = createPopperInstance({
referenceEl,
popperContentEl,
arrowEl: vue.unref(arrowRef)
});
updateHandle = vue.watch(() => referenceEl.getBoundingClientRect(), () => updatePopper(), {
immediate: true
});
} else {
popperInstanceRef.value = void 0;
}
}, {
immediate: true
});
vue.watch(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => {
triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
triggerTargetAriaStopWatch = void 0;
const el = vue.unref(triggerTargetEl || popperContentRef.value);
const prevEl = vue.unref(prevTriggerTargetEl || popperContentRef.value);
if (isElement$1(el)) {
triggerTargetAriaStopWatch = vue.watch([role, () => props.ariaLabel, ariaModal, () => props.id], (watches) => {
["role", "aria-label", "aria-modal", "id"].forEach((key, idx) => {
isNil(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]);
});
}, { immediate: true });
}
if (prevEl !== el && isElement$1(prevEl)) {
["role", "aria-label", "aria-modal", "id"].forEach((key) => {
prevEl.removeAttribute(key);
});
}
}, { immediate: true });
vue.watch(() => props.visible, togglePopperAlive, { immediate: true });
vue.watch(() => buildPopperOptions(props, {
arrowEl: vue.unref(arrowRef),
arrowOffset: vue.unref(arrowOffset)
}), (option) => {
var _a;
return (_a = popperInstanceRef.value) == null ? void 0 : _a.setOptions(option);
});
});
vue.onBeforeUnmount(() => {
triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
triggerTargetAriaStopWatch = void 0;
});
expose({
popperContentRef,
popperInstanceRef,
updatePopper,
contentStyle
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "popperContentRef",
ref: popperContentRef,
style: vue.normalizeStyle(vue.unref(contentStyle)),
class: vue.normalizeClass(vue.unref(contentClass)),
tabindex: "-1",
onMouseenter: _cache[0] || (_cache[0] = (e) => _ctx.$emit("mouseenter", e)),
onMouseleave: _cache[1] || (_cache[1] = (e) => _ctx.$emit("mouseleave", e))
}, [
vue.createVNode(vue.unref(ElFocusTrap), {
trapped: trapped.value,
"trap-on-focus-in": true,
"focus-trap-el": popperContentRef.value,
"focus-start-el": focusStartRef.value,
onFocusAfterTrapped,
onFocusAfterReleased,
onFocusin: onFocusInTrap,
onFocusoutPrevented,
onReleaseRequested
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["trapped", "focus-trap-el", "focus-start-el"])
], 38);
};
}
});
var ElPopperContent = /* @__PURE__ */ _export_sfc(_sfc_main$24, [["__file", "content.vue"]]);
const ElPopper = withInstall(Popper);
const ns = useNamespace("tooltip");
const useTooltipContentProps = buildProps({
...useDelayedToggleProps,
...popperContentProps,
appendTo: {
type: definePropType([String, Object]),
default: POPPER_CONTAINER_SELECTOR
},
content: {
type: String,
default: ""
},
rawContent: {
type: Boolean,
default: false
},
persistent: Boolean,
ariaLabel: String,
visible: {
type: definePropType(Boolean),
default: null
},
transition: {
type: String,
default: `${ns.namespace.value}-fade-in-linear`
},
teleported: {
type: Boolean,
default: true
},
disabled: {
type: Boolean
}
});
const useTooltipTriggerProps = buildProps({
...popperTriggerProps,
disabled: Boolean,
trigger: {
type: definePropType([String, Array]),
default: "hover"
},
triggerKeys: {
type: definePropType(Array),
default: () => [EVENT_CODE.enter, EVENT_CODE.space]
}
});
const {
useModelToggleProps: useTooltipModelToggleProps,
useModelToggleEmits: useTooltipModelToggleEmits,
useModelToggle: useTooltipModelToggle
} = createModelToggleComposable("visible");
const useTooltipProps = buildProps({
...popperProps,
...useTooltipModelToggleProps,
...useTooltipContentProps,
...useTooltipTriggerProps,
...popperArrowProps,
showArrow: {
type: Boolean,
default: true
}
});
const tooltipEmits = [
...useTooltipModelToggleEmits,
"before-show",
"before-hide",
"show",
"hide",
"open",
"close"
];
const isTriggerType = (trigger, type) => {
if (isArray(trigger)) {
return trigger.includes(type);
}
return trigger === type;
};
const whenTrigger = (trigger, type, handler) => {
return (e) => {
isTriggerType(vue.unref(trigger), type) && handler(e);
};
};
const __default__$1n = vue.defineComponent({
name: "ElTooltipTrigger"
});
const _sfc_main$23 = /* @__PURE__ */ vue.defineComponent({
...__default__$1n,
props: useTooltipTriggerProps,
setup(__props, { expose }) {
const props = __props;
const ns = useNamespace("tooltip");
const { controlled, id, open, onOpen, onClose, onToggle } = vue.inject(TOOLTIP_INJECTION_KEY, void 0);
const triggerRef = vue.ref(null);
const stopWhenControlledOrDisabled = () => {
if (vue.unref(controlled) || props.disabled) {
return true;
}
};
const trigger = vue.toRef(props, "trigger");
const onMouseenter = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "hover", onOpen));
const onMouseleave = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "hover", onClose));
const onClick = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "click", (e) => {
if (e.button === 0) {
onToggle(e);
}
}));
const onFocus = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "focus", onOpen));
const onBlur = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "focus", onClose));
const onContextMenu = composeEventHandlers(stopWhenControlledOrDisabled, whenTrigger(trigger, "contextmenu", (e) => {
e.preventDefault();
onToggle(e);
}));
const onKeydown = composeEventHandlers(stopWhenControlledOrDisabled, (e) => {
const { code } = e;
if (props.triggerKeys.includes(code)) {
e.preventDefault();
onToggle(e);
}
});
expose({
triggerRef
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElPopperTrigger), {
id: vue.unref(id),
"virtual-ref": _ctx.virtualRef,
open: vue.unref(open),
"virtual-triggering": _ctx.virtualTriggering,
class: vue.normalizeClass(vue.unref(ns).e("trigger")),
onBlur: vue.unref(onBlur),
onClick: vue.unref(onClick),
onContextmenu: vue.unref(onContextMenu),
onFocus: vue.unref(onFocus),
onMouseenter: vue.unref(onMouseenter),
onMouseleave: vue.unref(onMouseleave),
onKeydown: vue.unref(onKeydown)
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["id", "virtual-ref", "open", "virtual-triggering", "class", "onBlur", "onClick", "onContextmenu", "onFocus", "onMouseenter", "onMouseleave", "onKeydown"]);
};
}
});
var ElTooltipTrigger = /* @__PURE__ */ _export_sfc(_sfc_main$23, [["__file", "trigger.vue"]]);
const __default__$1m = vue.defineComponent({
name: "ElTooltipContent",
inheritAttrs: false
});
const _sfc_main$22 = /* @__PURE__ */ vue.defineComponent({
...__default__$1m,
props: useTooltipContentProps,
setup(__props, { expose }) {
const props = __props;
const contentRef = vue.ref(null);
const destroyed = vue.ref(false);
const {
controlled,
id,
open,
trigger,
onClose,
onOpen,
onShow,
onHide,
onBeforeShow,
onBeforeHide
} = vue.inject(TOOLTIP_INJECTION_KEY, void 0);
const persistentRef = vue.computed(() => {
return props.persistent;
});
vue.onBeforeUnmount(() => {
destroyed.value = true;
});
const shouldRender = vue.computed(() => {
return vue.unref(persistentRef) ? true : vue.unref(open);
});
const shouldShow = vue.computed(() => {
return props.disabled ? false : vue.unref(open);
});
const contentStyle = vue.computed(() => {
var _a;
return (_a = props.style) != null ? _a : {};
});
const ariaHidden = vue.computed(() => !vue.unref(open));
const onTransitionLeave = () => {
onHide();
};
const stopWhenControlled = () => {
if (vue.unref(controlled))
return true;
};
const onContentEnter = composeEventHandlers(stopWhenControlled, () => {
if (props.enterable && vue.unref(trigger) === "hover") {
onOpen();
}
});
const onContentLeave = composeEventHandlers(stopWhenControlled, () => {
if (vue.unref(trigger) === "hover") {
onClose();
}
});
const onBeforeEnter = () => {
var _a, _b;
(_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
onBeforeShow == null ? void 0 : onBeforeShow();
};
const onBeforeLeave = () => {
onBeforeHide == null ? void 0 : onBeforeHide();
};
const onAfterShow = () => {
onShow();
stopHandle = onClickOutside(vue.computed(() => {
var _a;
return (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
}), () => {
if (vue.unref(controlled))
return;
const $trigger = vue.unref(trigger);
if ($trigger !== "hover") {
onClose();
}
});
};
const onBlur = () => {
if (!props.virtualTriggering) {
onClose();
}
};
let stopHandle;
vue.watch(() => vue.unref(open), (val) => {
if (!val) {
stopHandle == null ? void 0 : stopHandle();
}
}, {
flush: "post"
});
vue.watch(() => props.content, () => {
var _a, _b;
(_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
});
expose({
contentRef
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Teleport, {
disabled: !_ctx.teleported,
to: _ctx.appendTo
}, [
vue.createVNode(vue.Transition, {
name: _ctx.transition,
onAfterLeave: onTransitionLeave,
onBeforeEnter,
onAfterEnter: onAfterShow,
onBeforeLeave
}, {
default: vue.withCtx(() => [
vue.unref(shouldRender) ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(ElPopperContent), vue.mergeProps({
key: 0,
id: vue.unref(id),
ref_key: "contentRef",
ref: contentRef
}, _ctx.$attrs, {
"aria-label": _ctx.ariaLabel,
"aria-hidden": vue.unref(ariaHidden),
"boundaries-padding": _ctx.boundariesPadding,
"fallback-placements": _ctx.fallbackPlacements,
"gpu-acceleration": _ctx.gpuAcceleration,
offset: _ctx.offset,
placement: _ctx.placement,
"popper-options": _ctx.popperOptions,
strategy: _ctx.strategy,
effect: _ctx.effect,
enterable: _ctx.enterable,
pure: _ctx.pure,
"popper-class": _ctx.popperClass,
"popper-style": [_ctx.popperStyle, vue.unref(contentStyle)],
"reference-el": _ctx.referenceEl,
"trigger-target-el": _ctx.triggerTargetEl,
visible: vue.unref(shouldShow),
"z-index": _ctx.zIndex,
onMouseenter: vue.unref(onContentEnter),
onMouseleave: vue.unref(onContentLeave),
onBlur,
onClose: vue.unref(onClose)
}), {
default: vue.withCtx(() => [
vue.createCommentVNode(" Workaround bug #6378 "),
!destroyed.value ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 16, ["id", "aria-label", "aria-hidden", "boundaries-padding", "fallback-placements", "gpu-acceleration", "offset", "placement", "popper-options", "strategy", "effect", "enterable", "pure", "popper-class", "popper-style", "reference-el", "trigger-target-el", "visible", "z-index", "onMouseenter", "onMouseleave", "onClose"])), [
[vue.vShow, vue.unref(shouldShow)]
]) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["name"])
], 8, ["disabled", "to"]);
};
}
});
var ElTooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main$22, [["__file", "content.vue"]]);
const _hoisted_1$12 = ["innerHTML"];
const _hoisted_2$F = { key: 1 };
const __default__$1l = vue.defineComponent({
name: "ElTooltip"
});
const _sfc_main$21 = /* @__PURE__ */ vue.defineComponent({
...__default__$1l,
props: useTooltipProps,
emits: tooltipEmits,
setup(__props, { expose, emit }) {
const props = __props;
usePopperContainer();
const id = useId();
const popperRef = vue.ref();
const contentRef = vue.ref();
const updatePopper = () => {
var _a;
const popperComponent = vue.unref(popperRef);
if (popperComponent) {
(_a = popperComponent.popperInstanceRef) == null ? void 0 : _a.update();
}
};
const open = vue.ref(false);
const toggleReason = vue.ref();
const { show, hide, hasUpdateHandler } = useTooltipModelToggle({
indicator: open,
toggleReason
});
const { onOpen, onClose } = useDelayedToggle({
showAfter: vue.toRef(props, "showAfter"),
hideAfter: vue.toRef(props, "hideAfter"),
open: show,
close: hide
});
const controlled = vue.computed(() => isBoolean(props.visible) && !hasUpdateHandler.value);
vue.provide(TOOLTIP_INJECTION_KEY, {
controlled,
id,
open: vue.readonly(open),
trigger: vue.toRef(props, "trigger"),
onOpen: (event) => {
onOpen(event);
},
onClose: (event) => {
onClose(event);
},
onToggle: (event) => {
if (vue.unref(open)) {
onClose(event);
} else {
onOpen(event);
}
},
onShow: () => {
emit("show", toggleReason.value);
},
onHide: () => {
emit("hide", toggleReason.value);
},
onBeforeShow: () => {
emit("before-show", toggleReason.value);
},
onBeforeHide: () => {
emit("before-hide", toggleReason.value);
},
updatePopper
});
vue.watch(() => props.disabled, (disabled) => {
if (disabled && open.value) {
open.value = false;
}
});
const isFocusInsideContent = () => {
var _a, _b;
const popperContent = (_b = (_a = contentRef.value) == null ? void 0 : _a.contentRef) == null ? void 0 : _b.popperContentRef;
return popperContent && popperContent.contains(document.activeElement);
};
vue.onDeactivated(() => open.value && hide());
expose({
popperRef,
contentRef,
isFocusInsideContent,
updatePopper,
onOpen,
onClose,
hide
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElPopper), {
ref_key: "popperRef",
ref: popperRef,
role: _ctx.role
}, {
default: vue.withCtx(() => [
vue.createVNode(ElTooltipTrigger, {
disabled: _ctx.disabled,
trigger: _ctx.trigger,
"trigger-keys": _ctx.triggerKeys,
"virtual-ref": _ctx.virtualRef,
"virtual-triggering": _ctx.virtualTriggering
}, {
default: vue.withCtx(() => [
_ctx.$slots.default ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["disabled", "trigger", "trigger-keys", "virtual-ref", "virtual-triggering"]),
vue.createVNode(ElTooltipContent, {
ref_key: "contentRef",
ref: contentRef,
"aria-label": _ctx.ariaLabel,
"boundaries-padding": _ctx.boundariesPadding,
content: _ctx.content,
disabled: _ctx.disabled,
effect: _ctx.effect,
enterable: _ctx.enterable,
"fallback-placements": _ctx.fallbackPlacements,
"hide-after": _ctx.hideAfter,
"gpu-acceleration": _ctx.gpuAcceleration,
offset: _ctx.offset,
persistent: _ctx.persistent,
"popper-class": _ctx.popperClass,
"popper-style": _ctx.popperStyle,
placement: _ctx.placement,
"popper-options": _ctx.popperOptions,
pure: _ctx.pure,
"raw-content": _ctx.rawContent,
"reference-el": _ctx.referenceEl,
"trigger-target-el": _ctx.triggerTargetEl,
"show-after": _ctx.showAfter,
strategy: _ctx.strategy,
teleported: _ctx.teleported,
transition: _ctx.transition,
"virtual-triggering": _ctx.virtualTriggering,
"z-index": _ctx.zIndex,
"append-to": _ctx.appendTo
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "content", {}, () => [
_ctx.rawContent ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
innerHTML: _ctx.content
}, null, 8, _hoisted_1$12)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$F, vue.toDisplayString(_ctx.content), 1))
]),
_ctx.showArrow ? (vue.openBlock(), vue.createBlock(vue.unref(ElPopperArrow), {
key: 0,
"arrow-offset": _ctx.arrowOffset
}, null, 8, ["arrow-offset"])) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["aria-label", "boundaries-padding", "content", "disabled", "effect", "enterable", "fallback-placements", "hide-after", "gpu-acceleration", "offset", "persistent", "popper-class", "popper-style", "placement", "popper-options", "pure", "raw-content", "reference-el", "trigger-target-el", "show-after", "strategy", "teleported", "transition", "virtual-triggering", "z-index", "append-to"])
]),
_: 3
}, 8, ["role"]);
};
}
});
var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$21, [["__file", "tooltip.vue"]]);
const ElTooltip = withInstall(Tooltip);
const autocompleteProps = buildProps({
valueKey: {
type: String,
default: "value"
},
modelValue: {
type: [String, Number],
default: ""
},
debounce: {
type: Number,
default: 300
},
placement: {
type: definePropType(String),
values: [
"top",
"top-start",
"top-end",
"bottom",
"bottom-start",
"bottom-end"
],
default: "bottom-start"
},
fetchSuggestions: {
type: definePropType([Function, Array]),
default: NOOP
},
popperClass: {
type: String,
default: ""
},
triggerOnFocus: {
type: Boolean,
default: true
},
selectWhenUnmatched: {
type: Boolean,
default: false
},
hideLoading: {
type: Boolean,
default: false
},
label: {
type: String
},
teleported: useTooltipContentProps.teleported,
highlightFirstItem: {
type: Boolean,
default: false
},
fitInputWidth: {
type: Boolean,
default: false
}
});
const autocompleteEmits = {
[UPDATE_MODEL_EVENT]: (value) => isString(value),
[INPUT_EVENT]: (value) => isString(value),
[CHANGE_EVENT]: (value) => isString(value),
focus: (evt) => evt instanceof FocusEvent,
blur: (evt) => evt instanceof FocusEvent,
clear: () => true,
select: (item) => isObject$1(item)
};
const _hoisted_1$11 = ["aria-expanded", "aria-owns"];
const _hoisted_2$E = { key: 0 };
const _hoisted_3$j = ["id", "aria-selected", "onClick"];
const COMPONENT_NAME$j = "ElAutocomplete";
const __default__$1k = vue.defineComponent({
name: COMPONENT_NAME$j,
inheritAttrs: false
});
const _sfc_main$20 = /* @__PURE__ */ vue.defineComponent({
...__default__$1k,
props: autocompleteProps,
emits: autocompleteEmits,
setup(__props, { expose, emit }) {
const props = __props;
const attrs = useAttrs();
const rawAttrs = vue.useAttrs();
const disabled = useDisabled();
const ns = useNamespace("autocomplete");
const inputRef = vue.ref();
const regionRef = vue.ref();
const popperRef = vue.ref();
const listboxRef = vue.ref();
let readonly = false;
let ignoreFocusEvent = false;
const suggestions = vue.ref([]);
const highlightedIndex = vue.ref(-1);
const dropdownWidth = vue.ref("");
const activated = vue.ref(false);
const suggestionDisabled = vue.ref(false);
const loading = vue.ref(false);
const listboxId = vue.computed(() => ns.b(String(generateId())));
const styles = vue.computed(() => rawAttrs.style);
const suggestionVisible = vue.computed(() => {
const isValidData = suggestions.value.length > 0;
return (isValidData || loading.value) && activated.value;
});
const suggestionLoading = vue.computed(() => !props.hideLoading && loading.value);
const refInput = vue.computed(() => {
if (inputRef.value) {
return Array.from(inputRef.value.$el.querySelectorAll("input"));
}
return [];
});
const onSuggestionShow = async () => {
await vue.nextTick();
if (suggestionVisible.value) {
dropdownWidth.value = `${inputRef.value.$el.offsetWidth}px`;
}
};
const onShow = () => {
ignoreFocusEvent = true;
};
const onHide = () => {
ignoreFocusEvent = false;
highlightedIndex.value = -1;
};
const getData = async (queryString) => {
if (suggestionDisabled.value)
return;
const cb = (suggestionList) => {
loading.value = false;
if (suggestionDisabled.value)
return;
if (isArray(suggestionList)) {
suggestions.value = suggestionList;
highlightedIndex.value = props.highlightFirstItem ? 0 : -1;
} else {
throwError(COMPONENT_NAME$j, "autocomplete suggestions must be an array");
}
};
loading.value = true;
if (isArray(props.fetchSuggestions)) {
cb(props.fetchSuggestions);
} else {
const result = await props.fetchSuggestions(queryString, cb);
if (isArray(result))
cb(result);
}
};
const debouncedGetData = debounce(getData, props.debounce);
const handleInput = (value) => {
const valuePresented = !!value;
emit(INPUT_EVENT, value);
emit(UPDATE_MODEL_EVENT, value);
suggestionDisabled.value = false;
activated.value || (activated.value = valuePresented);
if (!props.triggerOnFocus && !value) {
suggestionDisabled.value = true;
suggestions.value = [];
return;
}
debouncedGetData(value);
};
const handleMouseDown = (event) => {
var _a;
if (disabled.value)
return;
if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT" || refInput.value.includes(document.activeElement)) {
activated.value = true;
}
};
const handleChange = (value) => {
emit(CHANGE_EVENT, value);
};
const handleFocus = (evt) => {
if (ignoreFocusEvent)
return;
activated.value = true;
emit("focus", evt);
if (props.triggerOnFocus && !readonly) {
debouncedGetData(String(props.modelValue));
}
};
const handleBlur = (evt) => {
if (ignoreFocusEvent)
return;
emit("blur", evt);
};
const handleClear = () => {
activated.value = false;
emit(UPDATE_MODEL_EVENT, "");
emit("clear");
};
const handleKeyEnter = async () => {
if (suggestionVisible.value && highlightedIndex.value >= 0 && highlightedIndex.value < suggestions.value.length) {
handleSelect(suggestions.value[highlightedIndex.value]);
} else if (props.selectWhenUnmatched) {
emit("select", { value: props.modelValue });
suggestions.value = [];
highlightedIndex.value = -1;
}
};
const handleKeyEscape = (evt) => {
if (suggestionVisible.value) {
evt.preventDefault();
evt.stopPropagation();
close();
}
};
const close = () => {
activated.value = false;
};
const focus = () => {
var _a;
(_a = inputRef.value) == null ? void 0 : _a.focus();
};
const blur = () => {
var _a;
(_a = inputRef.value) == null ? void 0 : _a.blur();
};
const handleSelect = async (item) => {
emit(INPUT_EVENT, item[props.valueKey]);
emit(UPDATE_MODEL_EVENT, item[props.valueKey]);
emit("select", item);
suggestions.value = [];
highlightedIndex.value = -1;
};
const highlight = (index) => {
if (!suggestionVisible.value || loading.value)
return;
if (index < 0) {
highlightedIndex.value = -1;
return;
}
if (index >= suggestions.value.length) {
index = suggestions.value.length - 1;
}
const suggestion = regionRef.value.querySelector(`.${ns.be("suggestion", "wrap")}`);
const suggestionList = suggestion.querySelectorAll(`.${ns.be("suggestion", "list")} li`);
const highlightItem = suggestionList[index];
const scrollTop = suggestion.scrollTop;
const { offsetTop, scrollHeight } = highlightItem;
if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {
suggestion.scrollTop += scrollHeight;
}
if (offsetTop < scrollTop) {
suggestion.scrollTop -= scrollHeight;
}
highlightedIndex.value = index;
inputRef.value.ref.setAttribute("aria-activedescendant", `${listboxId.value}-item-${highlightedIndex.value}`);
};
onClickOutside(listboxRef, () => {
suggestionVisible.value && close();
});
vue.onMounted(() => {
inputRef.value.ref.setAttribute("role", "textbox");
inputRef.value.ref.setAttribute("aria-autocomplete", "list");
inputRef.value.ref.setAttribute("aria-controls", "id");
inputRef.value.ref.setAttribute("aria-activedescendant", `${listboxId.value}-item-${highlightedIndex.value}`);
readonly = inputRef.value.ref.hasAttribute("readonly");
});
expose({
highlightedIndex,
activated,
loading,
inputRef,
popperRef,
suggestions,
handleSelect,
handleKeyEnter,
focus,
blur,
close,
highlight
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), {
ref_key: "popperRef",
ref: popperRef,
visible: vue.unref(suggestionVisible),
placement: _ctx.placement,
"fallback-placements": ["bottom-start", "top-start"],
"popper-class": [vue.unref(ns).e("popper"), _ctx.popperClass],
teleported: _ctx.teleported,
"gpu-acceleration": false,
pure: "",
"manual-mode": "",
effect: "light",
trigger: "click",
transition: `${vue.unref(ns).namespace.value}-zoom-in-top`,
persistent: "",
onBeforeShow: onSuggestionShow,
onShow,
onHide
}, {
content: vue.withCtx(() => [
vue.createElementVNode("div", {
ref_key: "regionRef",
ref: regionRef,
class: vue.normalizeClass([vue.unref(ns).b("suggestion"), vue.unref(ns).is("loading", vue.unref(suggestionLoading))]),
style: vue.normalizeStyle({
[_ctx.fitInputWidth ? "width" : "minWidth"]: dropdownWidth.value,
outline: "none"
}),
role: "region"
}, [
vue.createVNode(vue.unref(ElScrollbar), {
id: vue.unref(listboxId),
tag: "ul",
"wrap-class": vue.unref(ns).be("suggestion", "wrap"),
"view-class": vue.unref(ns).be("suggestion", "list"),
role: "listbox"
}, {
default: vue.withCtx(() => [
vue.unref(suggestionLoading) ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$E, [
vue.createVNode(vue.unref(ElIcon), {
class: vue.normalizeClass(vue.unref(ns).is("loading"))
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(loading_default))
]),
_: 1
}, 8, ["class"])
])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(suggestions.value, (item, index) => {
return vue.openBlock(), vue.createElementBlock("li", {
id: `${vue.unref(listboxId)}-item-${index}`,
key: index,
class: vue.normalizeClass({ highlighted: highlightedIndex.value === index }),
role: "option",
"aria-selected": highlightedIndex.value === index,
onClick: ($event) => handleSelect(item)
}, [
vue.renderSlot(_ctx.$slots, "default", { item }, () => [
vue.createTextVNode(vue.toDisplayString(item[_ctx.valueKey]), 1)
])
], 10, _hoisted_3$j);
}), 128))
]),
_: 3
}, 8, ["id", "wrap-class", "view-class"])
], 6)
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", {
ref_key: "listboxRef",
ref: listboxRef,
class: vue.normalizeClass([vue.unref(ns).b(), _ctx.$attrs.class]),
style: vue.normalizeStyle(vue.unref(styles)),
role: "combobox",
"aria-haspopup": "listbox",
"aria-expanded": vue.unref(suggestionVisible),
"aria-owns": vue.unref(listboxId)
}, [
vue.createVNode(vue.unref(ElInput), vue.mergeProps({
ref_key: "inputRef",
ref: inputRef
}, vue.unref(attrs), {
"model-value": _ctx.modelValue,
onInput: handleInput,
onChange: handleChange,
onFocus: handleFocus,
onBlur: handleBlur,
onClear: handleClear,
onKeydown: [
_cache[0] || (_cache[0] = vue.withKeys(vue.withModifiers(($event) => highlight(highlightedIndex.value - 1), ["prevent"]), ["up"])),
_cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(($event) => highlight(highlightedIndex.value + 1), ["prevent"]), ["down"])),
vue.withKeys(handleKeyEnter, ["enter"]),
vue.withKeys(close, ["tab"]),
vue.withKeys(handleKeyEscape, ["esc"])
],
onMousedown: handleMouseDown
}), vue.createSlots({ _: 2 }, [
_ctx.$slots.prepend ? {
name: "prepend",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prepend")
])
} : void 0,
_ctx.$slots.append ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
])
} : void 0,
_ctx.$slots.prefix ? {
name: "prefix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "prefix")
])
} : void 0,
_ctx.$slots.suffix ? {
name: "suffix",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "suffix")
])
} : void 0
]), 1040, ["model-value", "onKeydown"])
], 14, _hoisted_1$11)
]),
_: 3
}, 8, ["visible", "placement", "popper-class", "teleported", "transition"]);
};
}
});
var Autocomplete = /* @__PURE__ */ _export_sfc(_sfc_main$20, [["__file", "autocomplete.vue"]]);
const ElAutocomplete = withInstall(Autocomplete);
const avatarProps = buildProps({
size: {
type: [Number, String],
values: componentSizes,
default: "",
validator: (val) => isNumber(val)
},
shape: {
type: String,
values: ["circle", "square"],
default: "circle"
},
icon: {
type: iconPropType
},
src: {
type: String,
default: ""
},
alt: String,
srcSet: String,
fit: {
type: definePropType(String),
default: "cover"
}
});
const avatarEmits = {
error: (evt) => evt instanceof Event
};
const _hoisted_1$10 = ["src", "alt", "srcset"];
const __default__$1j = vue.defineComponent({
name: "ElAvatar"
});
const _sfc_main$1$ = /* @__PURE__ */ vue.defineComponent({
...__default__$1j,
props: avatarProps,
emits: avatarEmits,
setup(__props, { emit }) {
const props = __props;
const ns = useNamespace("avatar");
const hasLoadError = vue.ref(false);
const avatarClass = vue.computed(() => {
const { size, icon, shape } = props;
const classList = [ns.b()];
if (isString(size))
classList.push(ns.m(size));
if (icon)
classList.push(ns.m("icon"));
if (shape)
classList.push(ns.m(shape));
return classList;
});
const sizeStyle = vue.computed(() => {
const { size } = props;
return isNumber(size) ? ns.cssVarBlock({
size: addUnit(size) || ""
}) : void 0;
});
const fitStyle = vue.computed(() => ({
objectFit: props.fit
}));
vue.watch(() => props.src, () => hasLoadError.value = false);
function handleError(e) {
hasLoadError.value = true;
emit("error", e);
}
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass(vue.unref(avatarClass)),
style: vue.normalizeStyle(vue.unref(sizeStyle))
}, [
(_ctx.src || _ctx.srcSet) && !hasLoadError.value ? (vue.openBlock(), vue.createElementBlock("img", {
key: 0,
src: _ctx.src,
alt: _ctx.alt,
srcset: _ctx.srcSet,
style: vue.normalizeStyle(vue.unref(fitStyle)),
onError: handleError
}, null, 44, _hoisted_1$10)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
]),
_: 1
})) : vue.renderSlot(_ctx.$slots, "default", { key: 2 })
], 6);
};
}
});
var Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$1$, [["__file", "avatar.vue"]]);
const ElAvatar = withInstall(Avatar);
const backtopProps = {
visibilityHeight: {
type: Number,
default: 200
},
target: {
type: String,
default: ""
},
right: {
type: Number,
default: 40
},
bottom: {
type: Number,
default: 40
}
};
const backtopEmits = {
click: (evt) => evt instanceof MouseEvent
};
const useBackTop = (props, emit, componentName) => {
const el = vue.shallowRef();
const container = vue.shallowRef();
const visible = vue.ref(false);
const scrollToTop = () => {
if (!el.value)
return;
const beginTime = Date.now();
const beginValue = el.value.scrollTop;
const frameFunc = () => {
if (!el.value)
return;
const progress = (Date.now() - beginTime) / 500;
if (progress < 1) {
el.value.scrollTop = beginValue * (1 - easeInOutCubic(progress));
requestAnimationFrame(frameFunc);
} else {
el.value.scrollTop = 0;
}
};
requestAnimationFrame(frameFunc);
};
const handleScroll = () => {
if (el.value)
visible.value = el.value.scrollTop >= props.visibilityHeight;
};
const handleClick = (event) => {
scrollToTop();
emit("click", event);
};
const handleScrollThrottled = useThrottleFn(handleScroll, 300, true);
useEventListener(container, "scroll", handleScrollThrottled);
vue.onMounted(() => {
var _a;
container.value = document;
el.value = document.documentElement;
if (props.target) {
el.value = (_a = document.querySelector(props.target)) != null ? _a : void 0;
if (!el.value) {
throwError(componentName, `target does not exist: ${props.target}`);
}
container.value = el.value;
}
});
return {
visible,
handleClick
};
};
const COMPONENT_NAME$i = "ElBacktop";
const __default__$1i = vue.defineComponent({
name: COMPONENT_NAME$i
});
const _sfc_main$1_ = /* @__PURE__ */ vue.defineComponent({
...__default__$1i,
props: backtopProps,
emits: backtopEmits,
setup(__props, { emit }) {
const props = __props;
const ns = useNamespace("backtop");
const { handleClick, visible } = useBackTop(props, emit, COMPONENT_NAME$i);
const backTopStyle = vue.computed(() => ({
right: `${props.right}px`,
bottom: `${props.bottom}px`
}));
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Transition, {
name: `${vue.unref(ns).namespace.value}-fade-in`
}, {
default: vue.withCtx(() => [
vue.unref(visible) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
style: vue.normalizeStyle(vue.unref(backTopStyle)),
class: vue.normalizeClass(vue.unref(ns).b()),
onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => vue.unref(handleClick) && vue.unref(handleClick)(...args), ["stop"]))
}, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createVNode(vue.unref(ElIcon), {
class: vue.normalizeClass(vue.unref(ns).e("icon"))
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(caret_top_default))
]),
_: 1
}, 8, ["class"])
])
], 6)) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["name"]);
};
}
});
var Backtop = /* @__PURE__ */ _export_sfc(_sfc_main$1_, [["__file", "backtop.vue"]]);
const ElBacktop = withInstall(Backtop);
const badgeProps = buildProps({
value: {
type: [String, Number],
default: ""
},
max: {
type: Number,
default: 99
},
isDot: Boolean,
hidden: Boolean,
type: {
type: String,
values: ["primary", "success", "warning", "info", "danger"],
default: "danger"
}
});
const _hoisted_1$$ = ["textContent"];
const __default__$1h = vue.defineComponent({
name: "ElBadge"
});
const _sfc_main$1Z = /* @__PURE__ */ vue.defineComponent({
...__default__$1h,
props: badgeProps,
setup(__props, { expose }) {
const props = __props;
const ns = useNamespace("badge");
const content = vue.computed(() => {
if (props.isDot)
return "";
if (isNumber(props.value) && isNumber(props.max)) {
return props.max < props.value ? `${props.max}+` : `${props.value}`;
}
return `${props.value}`;
});
expose({
content
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(ns).b())
}, [
vue.renderSlot(_ctx.$slots, "default"),
vue.createVNode(vue.Transition, {
name: `${vue.unref(ns).namespace.value}-zoom-in-center`,
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("sup", {
class: vue.normalizeClass([
vue.unref(ns).e("content"),
vue.unref(ns).em("content", _ctx.type),
vue.unref(ns).is("fixed", !!_ctx.$slots.default),
vue.unref(ns).is("dot", _ctx.isDot)
]),
textContent: vue.toDisplayString(vue.unref(content))
}, null, 10, _hoisted_1$$), [
[vue.vShow, !_ctx.hidden && (vue.unref(content) || _ctx.isDot)]
])
]),
_: 1
}, 8, ["name"])
], 2);
};
}
});
var Badge = /* @__PURE__ */ _export_sfc(_sfc_main$1Z, [["__file", "badge.vue"]]);
const ElBadge = withInstall(Badge);
const breadcrumbProps = buildProps({
separator: {
type: String,
default: "/"
},
separatorIcon: {
type: iconPropType
}
});
const __default__$1g = vue.defineComponent({
name: "ElBreadcrumb"
});
const _sfc_main$1Y = /* @__PURE__ */ vue.defineComponent({
...__default__$1g,
props: breadcrumbProps,
setup(__props) {
const props = __props;
const ns = useNamespace("breadcrumb");
const breadcrumb = vue.ref();
vue.provide(breadcrumbKey, props);
vue.onMounted(() => {
const items = breadcrumb.value.querySelectorAll(`.${ns.e("item")}`);
if (items.length) {
items[items.length - 1].setAttribute("aria-current", "page");
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "breadcrumb",
ref: breadcrumb,
class: vue.normalizeClass(vue.unref(ns).b()),
"aria-label": "Breadcrumb",
role: "navigation"
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2);
};
}
});
var Breadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main$1Y, [["__file", "breadcrumb.vue"]]);
const breadcrumbItemProps = buildProps({
to: {
type: definePropType([String, Object]),
default: ""
},
replace: {
type: Boolean,
default: false
}
});
const __default__$1f = vue.defineComponent({
name: "ElBreadcrumbItem"
});
const _sfc_main$1X = /* @__PURE__ */ vue.defineComponent({
...__default__$1f,
props: breadcrumbItemProps,
setup(__props) {
const props = __props;
const instance = vue.getCurrentInstance();
const breadcrumbContext = vue.inject(breadcrumbKey, void 0);
const ns = useNamespace("breadcrumb");
const { separator, separatorIcon } = vue.toRefs(breadcrumbContext);
const router = instance.appContext.config.globalProperties.$router;
const link = vue.ref();
const onClick = () => {
if (!props.to || !router)
return;
props.replace ? router.replace(props.to) : router.push(props.to);
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass(vue.unref(ns).e("item"))
}, [
vue.createElementVNode("span", {
ref_key: "link",
ref: link,
class: vue.normalizeClass([vue.unref(ns).e("inner"), vue.unref(ns).is("link", !!_ctx.to)]),
role: "link",
onClick
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2),
vue.unref(separatorIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("separator"))
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(separatorIcon))))
]),
_: 1
}, 8, ["class"])) : (vue.openBlock(), vue.createElementBlock("span", {
key: 1,
class: vue.normalizeClass(vue.unref(ns).e("separator")),
role: "presentation"
}, vue.toDisplayString(vue.unref(separator)), 3))
], 2);
};
}
});
var BreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$1X, [["__file", "breadcrumb-item.vue"]]);
const ElBreadcrumb = withInstall(Breadcrumb, {
BreadcrumbItem
});
const ElBreadcrumbItem = withNoopInstall(BreadcrumbItem);
const useButton = (props, emit) => {
useDeprecated({
from: "type.text",
replacement: "link",
version: "3.0.0",
scope: "props",
ref: "https://element-plus.org/en-US/component/button.html#button-attributes"
}, vue.computed(() => props.type === "text"));
const buttonGroupContext = vue.inject(buttonGroupContextKey, void 0);
const globalConfig = useGlobalConfig("button");
const { form } = useFormItem();
const _size = useSize(vue.computed(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size));
const _disabled = useDisabled();
const _ref = vue.ref();
const slots = vue.useSlots();
const _type = vue.computed(() => props.type || (buttonGroupContext == null ? void 0 : buttonGroupContext.type) || "");
const autoInsertSpace = vue.computed(() => {
var _a, _b, _c;
return (_c = (_b = props.autoInsertSpace) != null ? _b : (_a = globalConfig.value) == null ? void 0 : _a.autoInsertSpace) != null ? _c : false;
});
const shouldAddSpace = vue.computed(() => {
var _a;
const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots);
if (autoInsertSpace.value && (defaultSlot == null ? void 0 : defaultSlot.length) === 1) {
const slot = defaultSlot[0];
if ((slot == null ? void 0 : slot.type) === vue.Text) {
const text = slot.children;
return /^\p{Unified_Ideograph}{2}$/u.test(text.trim());
}
}
return false;
});
const handleClick = (evt) => {
if (props.nativeType === "reset") {
form == null ? void 0 : form.resetFields();
}
emit("click", evt);
};
return {
_disabled,
_size,
_type,
_ref,
shouldAddSpace,
handleClick
};
};
const buttonTypes = [
"default",
"primary",
"success",
"warning",
"info",
"danger",
"text",
""
];
const buttonNativeTypes = ["button", "submit", "reset"];
const buttonProps = buildProps({
size: useSizeProp,
disabled: Boolean,
type: {
type: String,
values: buttonTypes,
default: ""
},
icon: {
type: iconPropType
},
nativeType: {
type: String,
values: buttonNativeTypes,
default: "button"
},
loading: Boolean,
loadingIcon: {
type: iconPropType,
default: () => loading_default
},
plain: Boolean,
text: Boolean,
link: Boolean,
bg: Boolean,
autofocus: Boolean,
round: Boolean,
circle: Boolean,
color: String,
dark: Boolean,
autoInsertSpace: {
type: Boolean,
default: void 0
}
});
const buttonEmits = {
click: (evt) => evt instanceof MouseEvent
};
function bound01$1(n, max) {
if (isOnePointZero$1(n)) {
n = "100%";
}
var isPercent = isPercentage$1(n);
n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
if (isPercent) {
n = parseInt(String(n * max), 10) / 100;
}
if (Math.abs(n - max) < 1e-6) {
return 1;
}
if (max === 360) {
n = (n < 0 ? n % max + max : n % max) / parseFloat(String(max));
} else {
n = n % max / parseFloat(String(max));
}
return n;
}
function clamp01(val) {
return Math.min(1, Math.max(0, val));
}
function isOnePointZero$1(n) {
return typeof n === "string" && n.indexOf(".") !== -1 && parseFloat(n) === 1;
}
function isPercentage$1(n) {
return typeof n === "string" && n.indexOf("%") !== -1;
}
function boundAlpha(a) {
a = parseFloat(a);
if (isNaN(a) || a < 0 || a > 1) {
a = 1;
}
return a;
}
function convertToPercentage(n) {
if (n <= 1) {
return "".concat(Number(n) * 100, "%");
}
return n;
}
function pad2(c) {
return c.length === 1 ? "0" + c : String(c);
}
function rgbToRgb(r, g, b) {
return {
r: bound01$1(r, 255) * 255,
g: bound01$1(g, 255) * 255,
b: bound01$1(b, 255) * 255
};
}
function rgbToHsl(r, g, b) {
r = bound01$1(r, 255);
g = bound01$1(g, 255);
b = bound01$1(b, 255);
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h = 0;
var s = 0;
var l = (max + min) / 2;
if (max === min) {
s = 0;
h = 0;
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return { h, s, l };
}
function hue2rgb(p, q, t) {
if (t < 0) {
t += 1;
}
if (t > 1) {
t -= 1;
}
if (t < 1 / 6) {
return p + (q - p) * (6 * t);
}
if (t < 1 / 2) {
return q;
}
if (t < 2 / 3) {
return p + (q - p) * (2 / 3 - t) * 6;
}
return p;
}
function hslToRgb(h, s, l) {
var r;
var g;
var b;
h = bound01$1(h, 360);
s = bound01$1(s, 100);
l = bound01$1(l, 100);
if (s === 0) {
g = l;
b = l;
r = l;
} else {
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return { r: r * 255, g: g * 255, b: b * 255 };
}
function rgbToHsv(r, g, b) {
r = bound01$1(r, 255);
g = bound01$1(g, 255);
b = bound01$1(b, 255);
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var h = 0;
var v = max;
var d = max - min;
var s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0;
} else {
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return { h, s, v };
}
function hsvToRgb(h, s, v) {
h = bound01$1(h, 360) * 6;
s = bound01$1(s, 100);
v = bound01$1(v, 100);
var i = Math.floor(h);
var f = h - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var mod = i % 6;
var r = [v, q, p, p, t, v][mod];
var g = [t, v, v, q, p, p][mod];
var b = [p, p, t, v, v, q][mod];
return { r: r * 255, g: g * 255, b: b * 255 };
}
function rgbToHex(r, g, b, allow3Char) {
var hex = [
pad2(Math.round(r).toString(16)),
pad2(Math.round(g).toString(16)),
pad2(Math.round(b).toString(16))
];
if (allow3Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1))) {
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
}
return hex.join("");
}
function rgbaToHex(r, g, b, a, allow4Char) {
var hex = [
pad2(Math.round(r).toString(16)),
pad2(Math.round(g).toString(16)),
pad2(Math.round(b).toString(16)),
pad2(convertDecimalToHex(a))
];
if (allow4Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1)) && hex[3].startsWith(hex[3].charAt(1))) {
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
}
return hex.join("");
}
function convertDecimalToHex(d) {
return Math.round(parseFloat(d) * 255).toString(16);
}
function convertHexToDecimal(h) {
return parseIntFromHex(h) / 255;
}
function parseIntFromHex(val) {
return parseInt(val, 16);
}
function numberInputToObject(color) {
return {
r: color >> 16,
g: (color & 65280) >> 8,
b: color & 255
};
}
var names = {
aliceblue: "#f0f8ff",
antiquewhite: "#faebd7",
aqua: "#00ffff",
aquamarine: "#7fffd4",
azure: "#f0ffff",
beige: "#f5f5dc",
bisque: "#ffe4c4",
black: "#000000",
blanchedalmond: "#ffebcd",
blue: "#0000ff",
blueviolet: "#8a2be2",
brown: "#a52a2a",
burlywood: "#deb887",
cadetblue: "#5f9ea0",
chartreuse: "#7fff00",
chocolate: "#d2691e",
coral: "#ff7f50",
cornflowerblue: "#6495ed",
cornsilk: "#fff8dc",
crimson: "#dc143c",
cyan: "#00ffff",
darkblue: "#00008b",
darkcyan: "#008b8b",
darkgoldenrod: "#b8860b",
darkgray: "#a9a9a9",
darkgreen: "#006400",
darkgrey: "#a9a9a9",
darkkhaki: "#bdb76b",
darkmagenta: "#8b008b",
darkolivegreen: "#556b2f",
darkorange: "#ff8c00",
darkorchid: "#9932cc",
darkred: "#8b0000",
darksalmon: "#e9967a",
darkseagreen: "#8fbc8f",
darkslateblue: "#483d8b",
darkslategray: "#2f4f4f",
darkslategrey: "#2f4f4f",
darkturquoise: "#00ced1",
darkviolet: "#9400d3",
deeppink: "#ff1493",
deepskyblue: "#00bfff",
dimgray: "#696969",
dimgrey: "#696969",
dodgerblue: "#1e90ff",
firebrick: "#b22222",
floralwhite: "#fffaf0",
forestgreen: "#228b22",
fuchsia: "#ff00ff",
gainsboro: "#dcdcdc",
ghostwhite: "#f8f8ff",
goldenrod: "#daa520",
gold: "#ffd700",
gray: "#808080",
green: "#008000",
greenyellow: "#adff2f",
grey: "#808080",
honeydew: "#f0fff0",
hotpink: "#ff69b4",
indianred: "#cd5c5c",
indigo: "#4b0082",
ivory: "#fffff0",
khaki: "#f0e68c",
lavenderblush: "#fff0f5",
lavender: "#e6e6fa",
lawngreen: "#7cfc00",
lemonchiffon: "#fffacd",
lightblue: "#add8e6",
lightcoral: "#f08080",
lightcyan: "#e0ffff",
lightgoldenrodyellow: "#fafad2",
lightgray: "#d3d3d3",
lightgreen: "#90ee90",
lightgrey: "#d3d3d3",
lightpink: "#ffb6c1",
lightsalmon: "#ffa07a",
lightseagreen: "#20b2aa",
lightskyblue: "#87cefa",
lightslategray: "#778899",
lightslategrey: "#778899",
lightsteelblue: "#b0c4de",
lightyellow: "#ffffe0",
lime: "#00ff00",
limegreen: "#32cd32",
linen: "#faf0e6",
magenta: "#ff00ff",
maroon: "#800000",
mediumaquamarine: "#66cdaa",
mediumblue: "#0000cd",
mediumorchid: "#ba55d3",
mediumpurple: "#9370db",
mediumseagreen: "#3cb371",
mediumslateblue: "#7b68ee",
mediumspringgreen: "#00fa9a",
mediumturquoise: "#48d1cc",
mediumvioletred: "#c71585",
midnightblue: "#191970",
mintcream: "#f5fffa",
mistyrose: "#ffe4e1",
moccasin: "#ffe4b5",
navajowhite: "#ffdead",
navy: "#000080",
oldlace: "#fdf5e6",
olive: "#808000",
olivedrab: "#6b8e23",
orange: "#ffa500",
orangered: "#ff4500",
orchid: "#da70d6",
palegoldenrod: "#eee8aa",
palegreen: "#98fb98",
paleturquoise: "#afeeee",
palevioletred: "#db7093",
papayawhip: "#ffefd5",
peachpuff: "#ffdab9",
peru: "#cd853f",
pink: "#ffc0cb",
plum: "#dda0dd",
powderblue: "#b0e0e6",
purple: "#800080",
rebeccapurple: "#663399",
red: "#ff0000",
rosybrown: "#bc8f8f",
royalblue: "#4169e1",
saddlebrown: "#8b4513",
salmon: "#fa8072",
sandybrown: "#f4a460",
seagreen: "#2e8b57",
seashell: "#fff5ee",
sienna: "#a0522d",
silver: "#c0c0c0",
skyblue: "#87ceeb",
slateblue: "#6a5acd",
slategray: "#708090",
slategrey: "#708090",
snow: "#fffafa",
springgreen: "#00ff7f",
steelblue: "#4682b4",
tan: "#d2b48c",
teal: "#008080",
thistle: "#d8bfd8",
tomato: "#ff6347",
turquoise: "#40e0d0",
violet: "#ee82ee",
wheat: "#f5deb3",
white: "#ffffff",
whitesmoke: "#f5f5f5",
yellow: "#ffff00",
yellowgreen: "#9acd32"
};
function inputToRGB(color) {
var rgb = { r: 0, g: 0, b: 0 };
var a = 1;
var s = null;
var v = null;
var l = null;
var ok = false;
var format = false;
if (typeof color === "string") {
color = stringInputToObject(color);
}
if (typeof color === "object") {
if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
rgb = rgbToRgb(color.r, color.g, color.b);
ok = true;
format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
s = convertToPercentage(color.s);
v = convertToPercentage(color.v);
rgb = hsvToRgb(color.h, s, v);
ok = true;
format = "hsv";
} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
s = convertToPercentage(color.s);
l = convertToPercentage(color.l);
rgb = hslToRgb(color.h, s, l);
ok = true;
format = "hsl";
}
if (Object.prototype.hasOwnProperty.call(color, "a")) {
a = color.a;
}
}
a = boundAlpha(a);
return {
ok,
format: color.format || format,
r: Math.min(255, Math.max(rgb.r, 0)),
g: Math.min(255, Math.max(rgb.g, 0)),
b: Math.min(255, Math.max(rgb.b, 0)),
a
};
}
var CSS_INTEGER = "[-\\+]?\\d+%?";
var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
var CSS_UNIT = "(?:".concat(CSS_NUMBER, ")|(?:").concat(CSS_INTEGER, ")");
var PERMISSIVE_MATCH3 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
var PERMISSIVE_MATCH4 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
var matchers = {
CSS_UNIT: new RegExp(CSS_UNIT),
rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
};
function stringInputToObject(color) {
color = color.trim().toLowerCase();
if (color.length === 0) {
return false;
}
var named = false;
if (names[color]) {
color = names[color];
named = true;
} else if (color === "transparent") {
return { r: 0, g: 0, b: 0, a: 0, format: "name" };
}
var match = matchers.rgb.exec(color);
if (match) {
return { r: match[1], g: match[2], b: match[3] };
}
match = matchers.rgba.exec(color);
if (match) {
return { r: match[1], g: match[2], b: match[3], a: match[4] };
}
match = matchers.hsl.exec(color);
if (match) {
return { h: match[1], s: match[2], l: match[3] };
}
match = matchers.hsla.exec(color);
if (match) {
return { h: match[1], s: match[2], l: match[3], a: match[4] };
}
match = matchers.hsv.exec(color);
if (match) {
return { h: match[1], s: match[2], v: match[3] };
}
match = matchers.hsva.exec(color);
if (match) {
return { h: match[1], s: match[2], v: match[3], a: match[4] };
}
match = matchers.hex8.exec(color);
if (match) {
return {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
a: convertHexToDecimal(match[4]),
format: named ? "name" : "hex8"
};
}
match = matchers.hex6.exec(color);
if (match) {
return {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
format: named ? "name" : "hex"
};
}
match = matchers.hex4.exec(color);
if (match) {
return {
r: parseIntFromHex(match[1] + match[1]),
g: parseIntFromHex(match[2] + match[2]),
b: parseIntFromHex(match[3] + match[3]),
a: convertHexToDecimal(match[4] + match[4]),
format: named ? "name" : "hex8"
};
}
match = matchers.hex3.exec(color);
if (match) {
return {
r: parseIntFromHex(match[1] + match[1]),
g: parseIntFromHex(match[2] + match[2]),
b: parseIntFromHex(match[3] + match[3]),
format: named ? "name" : "hex"
};
}
return false;
}
function isValidCSSUnit(color) {
return Boolean(matchers.CSS_UNIT.exec(String(color)));
}
var TinyColor = function() {
function TinyColor2(color, opts) {
if (color === void 0) {
color = "";
}
if (opts === void 0) {
opts = {};
}
var _a;
if (color instanceof TinyColor2) {
return color;
}
if (typeof color === "number") {
color = numberInputToObject(color);
}
this.originalInput = color;
var rgb = inputToRGB(color);
this.originalInput = color;
this.r = rgb.r;
this.g = rgb.g;
this.b = rgb.b;
this.a = rgb.a;
this.roundA = Math.round(100 * this.a) / 100;
this.format = (_a = opts.format) !== null && _a !== void 0 ? _a : rgb.format;
this.gradientType = opts.gradientType;
if (this.r < 1) {
this.r = Math.round(this.r);
}
if (this.g < 1) {
this.g = Math.round(this.g);
}
if (this.b < 1) {
this.b = Math.round(this.b);
}
this.isValid = rgb.ok;
}
TinyColor2.prototype.isDark = function() {
return this.getBrightness() < 128;
};
TinyColor2.prototype.isLight = function() {
return !this.isDark();
};
TinyColor2.prototype.getBrightness = function() {
var rgb = this.toRgb();
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
};
TinyColor2.prototype.getLuminance = function() {
var rgb = this.toRgb();
var R;
var G;
var B;
var RsRGB = rgb.r / 255;
var GsRGB = rgb.g / 255;
var BsRGB = rgb.b / 255;
if (RsRGB <= 0.03928) {
R = RsRGB / 12.92;
} else {
R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
}
if (GsRGB <= 0.03928) {
G = GsRGB / 12.92;
} else {
G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
}
if (BsRGB <= 0.03928) {
B = BsRGB / 12.92;
} else {
B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
}
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};
TinyColor2.prototype.getAlpha = function() {
return this.a;
};
TinyColor2.prototype.setAlpha = function(alpha) {
this.a = boundAlpha(alpha);
this.roundA = Math.round(100 * this.a) / 100;
return this;
};
TinyColor2.prototype.toHsv = function() {
var hsv = rgbToHsv(this.r, this.g, this.b);
return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
};
TinyColor2.prototype.toHsvString = function() {
var hsv = rgbToHsv(this.r, this.g, this.b);
var h = Math.round(hsv.h * 360);
var s = Math.round(hsv.s * 100);
var v = Math.round(hsv.v * 100);
return this.a === 1 ? "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)") : "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(this.roundA, ")");
};
TinyColor2.prototype.toHsl = function() {
var hsl = rgbToHsl(this.r, this.g, this.b);
return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
};
TinyColor2.prototype.toHslString = function() {
var hsl = rgbToHsl(this.r, this.g, this.b);
var h = Math.round(hsl.h * 360);
var s = Math.round(hsl.s * 100);
var l = Math.round(hsl.l * 100);
return this.a === 1 ? "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)") : "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(this.roundA, ")");
};
TinyColor2.prototype.toHex = function(allow3Char) {
if (allow3Char === void 0) {
allow3Char = false;
}
return rgbToHex(this.r, this.g, this.b, allow3Char);
};
TinyColor2.prototype.toHexString = function(allow3Char) {
if (allow3Char === void 0) {
allow3Char = false;
}
return "#" + this.toHex(allow3Char);
};
TinyColor2.prototype.toHex8 = function(allow4Char) {
if (allow4Char === void 0) {
allow4Char = false;
}
return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
};
TinyColor2.prototype.toHex8String = function(allow4Char) {
if (allow4Char === void 0) {
allow4Char = false;
}
return "#" + this.toHex8(allow4Char);
};
TinyColor2.prototype.toRgb = function() {
return {
r: Math.round(this.r),
g: Math.round(this.g),
b: Math.round(this.b),
a: this.a
};
};
TinyColor2.prototype.toRgbString = function() {
var r = Math.round(this.r);
var g = Math.round(this.g);
var b = Math.round(this.b);
return this.a === 1 ? "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")") : "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(this.roundA, ")");
};
TinyColor2.prototype.toPercentageRgb = function() {
var fmt = function(x) {
return "".concat(Math.round(bound01$1(x, 255) * 100), "%");
};
return {
r: fmt(this.r),
g: fmt(this.g),
b: fmt(this.b),
a: this.a
};
};
TinyColor2.prototype.toPercentageRgbString = function() {
var rnd = function(x) {
return Math.round(bound01$1(x, 255) * 100);
};
return this.a === 1 ? "rgb(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%)") : "rgba(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%, ").concat(this.roundA, ")");
};
TinyColor2.prototype.toName = function() {
if (this.a === 0) {
return "transparent";
}
if (this.a < 1) {
return false;
}
var hex = "#" + rgbToHex(this.r, this.g, this.b, false);
for (var _i = 0, _a = Object.entries(names); _i < _a.length; _i++) {
var _b = _a[_i], key = _b[0], value = _b[1];
if (hex === value) {
return key;
}
}
return false;
};
TinyColor2.prototype.toString = function(format) {
var formatSet = Boolean(format);
format = format !== null && format !== void 0 ? format : this.format;
var formattedString = false;
var hasAlpha = this.a < 1 && this.a >= 0;
var needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith("hex") || format === "name");
if (needsAlphaFormat) {
if (format === "name" && this.a === 0) {
return this.toName();
}
return this.toRgbString();
}
if (format === "rgb") {
formattedString = this.toRgbString();
}
if (format === "prgb") {
formattedString = this.toPercentageRgbString();
}
if (format === "hex" || format === "hex6") {
formattedString = this.toHexString();
}
if (format === "hex3") {
formattedString = this.toHexString(true);
}
if (format === "hex4") {
formattedString = this.toHex8String(true);
}
if (format === "hex8") {
formattedString = this.toHex8String();
}
if (format === "name") {
formattedString = this.toName();
}
if (format === "hsl") {
formattedString = this.toHslString();
}
if (format === "hsv") {
formattedString = this.toHsvString();
}
return formattedString || this.toHexString();
};
TinyColor2.prototype.toNumber = function() {
return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
};
TinyColor2.prototype.clone = function() {
return new TinyColor2(this.toString());
};
TinyColor2.prototype.lighten = function(amount) {
if (amount === void 0) {
amount = 10;
}
var hsl = this.toHsl();
hsl.l += amount / 100;
hsl.l = clamp01(hsl.l);
return new TinyColor2(hsl);
};
TinyColor2.prototype.brighten = function(amount) {
if (amount === void 0) {
amount = 10;
}
var rgb = this.toRgb();
rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
return new TinyColor2(rgb);
};
TinyColor2.prototype.darken = function(amount) {
if (amount === void 0) {
amount = 10;
}
var hsl = this.toHsl();
hsl.l -= amount / 100;
hsl.l = clamp01(hsl.l);
return new TinyColor2(hsl);
};
TinyColor2.prototype.tint = function(amount) {
if (amount === void 0) {
amount = 10;
}
return this.mix("white", amount);
};
TinyColor2.prototype.shade = function(amount) {
if (amount === void 0) {
amount = 10;
}
return this.mix("black", amount);
};
TinyColor2.prototype.desaturate = function(amount) {
if (amount === void 0) {
amount = 10;
}
var hsl = this.toHsl();
hsl.s -= amount / 100;
hsl.s = clamp01(hsl.s);
return new TinyColor2(hsl);
};
TinyColor2.prototype.saturate = function(amount) {
if (amount === void 0) {
amount = 10;
}
var hsl = this.toHsl();
hsl.s += amount / 100;
hsl.s = clamp01(hsl.s);
return new TinyColor2(hsl);
};
TinyColor2.prototype.greyscale = function() {
return this.desaturate(100);
};
TinyColor2.prototype.spin = function(amount) {
var hsl = this.toHsl();
var hue = (hsl.h + amount) % 360;
hsl.h = hue < 0 ? 360 + hue : hue;
return new TinyColor2(hsl);
};
TinyColor2.prototype.mix = function(color, amount) {
if (amount === void 0) {
amount = 50;
}
var rgb1 = this.toRgb();
var rgb2 = new TinyColor2(color).toRgb();
var p = amount / 100;
var rgba = {
r: (rgb2.r - rgb1.r) * p + rgb1.r,
g: (rgb2.g - rgb1.g) * p + rgb1.g,
b: (rgb2.b - rgb1.b) * p + rgb1.b,
a: (rgb2.a - rgb1.a) * p + rgb1.a
};
return new TinyColor2(rgba);
};
TinyColor2.prototype.analogous = function(results, slices) {
if (results === void 0) {
results = 6;
}
if (slices === void 0) {
slices = 30;
}
var hsl = this.toHsl();
var part = 360 / slices;
var ret = [this];
for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; ) {
hsl.h = (hsl.h + part) % 360;
ret.push(new TinyColor2(hsl));
}
return ret;
};
TinyColor2.prototype.complement = function() {
var hsl = this.toHsl();
hsl.h = (hsl.h + 180) % 360;
return new TinyColor2(hsl);
};
TinyColor2.prototype.monochromatic = function(results) {
if (results === void 0) {
results = 6;
}
var hsv = this.toHsv();
var h = hsv.h;
var s = hsv.s;
var v = hsv.v;
var res = [];
var modification = 1 / results;
while (results--) {
res.push(new TinyColor2({ h, s, v }));
v = (v + modification) % 1;
}
return res;
};
TinyColor2.prototype.splitcomplement = function() {
var hsl = this.toHsl();
var h = hsl.h;
return [
this,
new TinyColor2({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),
new TinyColor2({ h: (h + 216) % 360, s: hsl.s, l: hsl.l })
];
};
TinyColor2.prototype.onBackground = function(background) {
var fg = this.toRgb();
var bg = new TinyColor2(background).toRgb();
return new TinyColor2({
r: bg.r + (fg.r - bg.r) * fg.a,
g: bg.g + (fg.g - bg.g) * fg.a,
b: bg.b + (fg.b - bg.b) * fg.a
});
};
TinyColor2.prototype.triad = function() {
return this.polyad(3);
};
TinyColor2.prototype.tetrad = function() {
return this.polyad(4);
};
TinyColor2.prototype.polyad = function(n) {
var hsl = this.toHsl();
var h = hsl.h;
var result = [this];
var increment = 360 / n;
for (var i = 1; i < n; i++) {
result.push(new TinyColor2({ h: (h + i * increment) % 360, s: hsl.s, l: hsl.l }));
}
return result;
};
TinyColor2.prototype.equals = function(color) {
return this.toRgbString() === new TinyColor2(color).toRgbString();
};
return TinyColor2;
}();
function darken(color, amount = 20) {
return color.mix("#141414", amount).toString();
}
function useButtonCustomStyle(props) {
const _disabled = useDisabled();
const ns = useNamespace("button");
return vue.computed(() => {
let styles = {};
const buttonColor = props.color;
if (buttonColor) {
const color = new TinyColor(buttonColor);
const activeBgColor = props.dark ? color.tint(20).toString() : darken(color, 20);
if (props.plain) {
styles = ns.cssVarBlock({
"bg-color": props.dark ? darken(color, 90) : color.tint(90).toString(),
"text-color": buttonColor,
"border-color": props.dark ? darken(color, 50) : color.tint(50).toString(),
"hover-text-color": `var(${ns.cssVarName("color-white")})`,
"hover-bg-color": buttonColor,
"hover-border-color": buttonColor,
"active-bg-color": activeBgColor,
"active-text-color": `var(${ns.cssVarName("color-white")})`,
"active-border-color": activeBgColor
});
if (_disabled.value) {
styles[ns.cssVarBlockName("disabled-bg-color")] = props.dark ? darken(color, 90) : color.tint(90).toString();
styles[ns.cssVarBlockName("disabled-text-color")] = props.dark ? darken(color, 50) : color.tint(50).toString();
styles[ns.cssVarBlockName("disabled-border-color")] = props.dark ? darken(color, 80) : color.tint(80).toString();
}
} else {
const hoverBgColor = props.dark ? darken(color, 30) : color.tint(30).toString();
const textColor = color.isDark() ? `var(${ns.cssVarName("color-white")})` : `var(${ns.cssVarName("color-black")})`;
styles = ns.cssVarBlock({
"bg-color": buttonColor,
"text-color": textColor,
"border-color": buttonColor,
"hover-bg-color": hoverBgColor,
"hover-text-color": textColor,
"hover-border-color": hoverBgColor,
"active-bg-color": activeBgColor,
"active-border-color": activeBgColor
});
if (_disabled.value) {
const disabledButtonColor = props.dark ? darken(color, 50) : color.tint(50).toString();
styles[ns.cssVarBlockName("disabled-bg-color")] = disabledButtonColor;
styles[ns.cssVarBlockName("disabled-text-color")] = props.dark ? "rgba(255, 255, 255, 0.5)" : `var(${ns.cssVarName("color-white")})`;
styles[ns.cssVarBlockName("disabled-border-color")] = disabledButtonColor;
}
}
}
return styles;
});
}
const _hoisted_1$_ = ["aria-disabled", "disabled", "autofocus", "type"];
const __default__$1e = vue.defineComponent({
name: "ElButton"
});
const _sfc_main$1W = /* @__PURE__ */ vue.defineComponent({
...__default__$1e,
props: buttonProps,
emits: buttonEmits,
setup(__props, { expose, emit }) {
const props = __props;
const buttonStyle = useButtonCustomStyle(props);
const ns = useNamespace("button");
const { _ref, _size, _type, _disabled, shouldAddSpace, handleClick } = useButton(props, emit);
expose({
ref: _ref,
size: _size,
type: _type,
disabled: _disabled,
shouldAddSpace
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("button", {
ref_key: "_ref",
ref: _ref,
class: vue.normalizeClass([
vue.unref(ns).b(),
vue.unref(ns).m(vue.unref(_type)),
vue.unref(ns).m(vue.unref(_size)),
vue.unref(ns).is("disabled", vue.unref(_disabled)),
vue.unref(ns).is("loading", _ctx.loading),
vue.unref(ns).is("plain", _ctx.plain),
vue.unref(ns).is("round", _ctx.round),
vue.unref(ns).is("circle", _ctx.circle),
vue.unref(ns).is("text", _ctx.text),
vue.unref(ns).is("link", _ctx.link),
vue.unref(ns).is("has-bg", _ctx.bg)
]),
"aria-disabled": vue.unref(_disabled) || _ctx.loading,
disabled: vue.unref(_disabled) || _ctx.loading,
autofocus: _ctx.autofocus,
type: _ctx.nativeType,
style: vue.normalizeStyle(vue.unref(buttonStyle)),
onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleClick) && vue.unref(handleClick)(...args))
}, [
_ctx.loading ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
_ctx.$slots.loading ? vue.renderSlot(_ctx.$slots, "loading", { key: 0 }) : (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 1,
class: vue.normalizeClass(vue.unref(ns).is("loading"))
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.loadingIcon)))
]),
_: 1
}, 8, ["class"]))
], 64)) : _ctx.icon || _ctx.$slots.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, {
default: vue.withCtx(() => [
_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon), { key: 0 })) : vue.renderSlot(_ctx.$slots, "icon", { key: 1 })
]),
_: 3
})) : vue.createCommentVNode("v-if", true),
_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", {
key: 2,
class: vue.normalizeClass({ [vue.unref(ns).em("text", "expand")]: vue.unref(shouldAddSpace) })
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2)) : vue.createCommentVNode("v-if", true)
], 14, _hoisted_1$_);
};
}
});
var Button = /* @__PURE__ */ _export_sfc(_sfc_main$1W, [["__file", "button.vue"]]);
const buttonGroupProps = {
size: buttonProps.size,
type: buttonProps.type
};
const __default__$1d = vue.defineComponent({
name: "ElButtonGroup"
});
const _sfc_main$1V = /* @__PURE__ */ vue.defineComponent({
...__default__$1d,
props: buttonGroupProps,
setup(__props) {
const props = __props;
vue.provide(buttonGroupContextKey, vue.reactive({
size: vue.toRef(props, "size"),
type: vue.toRef(props, "type")
}));
const ns = useNamespace("button");
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(`${vue.unref(ns).b("group")}`)
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2);
};
}
});
var ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1V, [["__file", "button-group.vue"]]);
const ElButton = withInstall(Button, {
ButtonGroup
});
const ElButtonGroup$1 = withNoopInstall(ButtonGroup);
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
var dayjs_min = {exports: {}};
(function(module, exports) {
!function(t, e) {
module.exports = e() ;
}(commonjsGlobal, function() {
var t = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", f = "month", h = "quarter", c = "year", d = "date", $ = "Invalid Date", l = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_") }, m = function(t2, e2, n2) {
var r2 = String(t2);
return !r2 || r2.length >= e2 ? t2 : "" + Array(e2 + 1 - r2.length).join(n2) + t2;
}, g = { s: m, z: function(t2) {
var e2 = -t2.utcOffset(), n2 = Math.abs(e2), r2 = Math.floor(n2 / 60), i2 = n2 % 60;
return (e2 <= 0 ? "+" : "-") + m(r2, 2, "0") + ":" + m(i2, 2, "0");
}, m: function t2(e2, n2) {
if (e2.date() < n2.date())
return -t2(n2, e2);
var r2 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r2, f), s2 = n2 - i2 < 0, u2 = e2.clone().add(r2 + (s2 ? -1 : 1), f);
return +(-(r2 + (n2 - i2) / (s2 ? i2 - u2 : u2 - i2)) || 0);
}, a: function(t2) {
return t2 < 0 ? Math.ceil(t2) || 0 : Math.floor(t2);
}, p: function(t2) {
return { M: f, y: c, w: o, d: a, D: d, h: u, m: s, s: i, ms: r, Q: h }[t2] || String(t2 || "").toLowerCase().replace(/s$/, "");
}, u: function(t2) {
return t2 === void 0;
} }, v = "en", D = {};
D[v] = M;
var p = function(t2) {
return t2 instanceof _;
}, S = function t2(e2, n2, r2) {
var i2;
if (!e2)
return v;
if (typeof e2 == "string") {
var s2 = e2.toLowerCase();
D[s2] && (i2 = s2), n2 && (D[s2] = n2, i2 = s2);
var u2 = e2.split("-");
if (!i2 && u2.length > 1)
return t2(u2[0]);
} else {
var a2 = e2.name;
D[a2] = e2, i2 = a2;
}
return !r2 && i2 && (v = i2), i2 || !r2 && v;
}, w = function(t2, e2) {
if (p(t2))
return t2.clone();
var n2 = typeof e2 == "object" ? e2 : {};
return n2.date = t2, n2.args = arguments, new _(n2);
}, O = g;
O.l = S, O.i = p, O.w = function(t2, e2) {
return w(t2, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset });
};
var _ = function() {
function M2(t2) {
this.$L = S(t2.locale, null, true), this.parse(t2);
}
var m2 = M2.prototype;
return m2.parse = function(t2) {
this.$d = function(t3) {
var e2 = t3.date, n2 = t3.utc;
if (e2 === null)
return new Date(NaN);
if (O.u(e2))
return new Date();
if (e2 instanceof Date)
return new Date(e2);
if (typeof e2 == "string" && !/Z$/i.test(e2)) {
var r2 = e2.match(l);
if (r2) {
var i2 = r2[2] - 1 || 0, s2 = (r2[7] || "0").substring(0, 3);
return n2 ? new Date(Date.UTC(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2)) : new Date(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2);
}
}
return new Date(e2);
}(t2), this.$x = t2.x || {}, this.init();
}, m2.init = function() {
var t2 = this.$d;
this.$y = t2.getFullYear(), this.$M = t2.getMonth(), this.$D = t2.getDate(), this.$W = t2.getDay(), this.$H = t2.getHours(), this.$m = t2.getMinutes(), this.$s = t2.getSeconds(), this.$ms = t2.getMilliseconds();
}, m2.$utils = function() {
return O;
}, m2.isValid = function() {
return !(this.$d.toString() === $);
}, m2.isSame = function(t2, e2) {
var n2 = w(t2);
return this.startOf(e2) <= n2 && n2 <= this.endOf(e2);
}, m2.isAfter = function(t2, e2) {
return w(t2) < this.startOf(e2);
}, m2.isBefore = function(t2, e2) {
return this.endOf(e2) < w(t2);
}, m2.$g = function(t2, e2, n2) {
return O.u(t2) ? this[e2] : this.set(n2, t2);
}, m2.unix = function() {
return Math.floor(this.valueOf() / 1e3);
}, m2.valueOf = function() {
return this.$d.getTime();
}, m2.startOf = function(t2, e2) {
var n2 = this, r2 = !!O.u(e2) || e2, h2 = O.p(t2), $2 = function(t3, e3) {
var i2 = O.w(n2.$u ? Date.UTC(n2.$y, e3, t3) : new Date(n2.$y, e3, t3), n2);
return r2 ? i2 : i2.endOf(a);
}, l2 = function(t3, e3) {
return O.w(n2.toDate()[t3].apply(n2.toDate("s"), (r2 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2);
}, y2 = this.$W, M3 = this.$M, m3 = this.$D, g2 = "set" + (this.$u ? "UTC" : "");
switch (h2) {
case c:
return r2 ? $2(1, 0) : $2(31, 11);
case f:
return r2 ? $2(1, M3) : $2(0, M3 + 1);
case o:
var v2 = this.$locale().weekStart || 0, D2 = (y2 < v2 ? y2 + 7 : y2) - v2;
return $2(r2 ? m3 - D2 : m3 + (6 - D2), M3);
case a:
case d:
return l2(g2 + "Hours", 0);
case u:
return l2(g2 + "Minutes", 1);
case s:
return l2(g2 + "Seconds", 2);
case i:
return l2(g2 + "Milliseconds", 3);
default:
return this.clone();
}
}, m2.endOf = function(t2) {
return this.startOf(t2, false);
}, m2.$set = function(t2, e2) {
var n2, o2 = O.p(t2), h2 = "set" + (this.$u ? "UTC" : ""), $2 = (n2 = {}, n2[a] = h2 + "Date", n2[d] = h2 + "Date", n2[f] = h2 + "Month", n2[c] = h2 + "FullYear", n2[u] = h2 + "Hours", n2[s] = h2 + "Minutes", n2[i] = h2 + "Seconds", n2[r] = h2 + "Milliseconds", n2)[o2], l2 = o2 === a ? this.$D + (e2 - this.$W) : e2;
if (o2 === f || o2 === c) {
var y2 = this.clone().set(d, 1);
y2.$d[$2](l2), y2.init(), this.$d = y2.set(d, Math.min(this.$D, y2.daysInMonth())).$d;
} else
$2 && this.$d[$2](l2);
return this.init(), this;
}, m2.set = function(t2, e2) {
return this.clone().$set(t2, e2);
}, m2.get = function(t2) {
return this[O.p(t2)]();
}, m2.add = function(r2, h2) {
var d2, $2 = this;
r2 = Number(r2);
var l2 = O.p(h2), y2 = function(t2) {
var e2 = w($2);
return O.w(e2.date(e2.date() + Math.round(t2 * r2)), $2);
};
if (l2 === f)
return this.set(f, this.$M + r2);
if (l2 === c)
return this.set(c, this.$y + r2);
if (l2 === a)
return y2(1);
if (l2 === o)
return y2(7);
var M3 = (d2 = {}, d2[s] = e, d2[u] = n, d2[i] = t, d2)[l2] || 1, m3 = this.$d.getTime() + r2 * M3;
return O.w(m3, this);
}, m2.subtract = function(t2, e2) {
return this.add(-1 * t2, e2);
}, m2.format = function(t2) {
var e2 = this, n2 = this.$locale();
if (!this.isValid())
return n2.invalidDate || $;
var r2 = t2 || "YYYY-MM-DDTHH:mm:ssZ", i2 = O.z(this), s2 = this.$H, u2 = this.$m, a2 = this.$M, o2 = n2.weekdays, f2 = n2.months, h2 = function(t3, n3, i3, s3) {
return t3 && (t3[n3] || t3(e2, r2)) || i3[n3].slice(0, s3);
}, c2 = function(t3) {
return O.s(s2 % 12 || 12, t3, "0");
}, d2 = n2.meridiem || function(t3, e3, n3) {
var r3 = t3 < 12 ? "AM" : "PM";
return n3 ? r3.toLowerCase() : r3;
}, l2 = { YY: String(this.$y).slice(-2), YYYY: this.$y, M: a2 + 1, MM: O.s(a2 + 1, 2, "0"), MMM: h2(n2.monthsShort, a2, f2, 3), MMMM: h2(f2, a2), D: this.$D, DD: O.s(this.$D, 2, "0"), d: String(this.$W), dd: h2(n2.weekdaysMin, this.$W, o2, 2), ddd: h2(n2.weekdaysShort, this.$W, o2, 3), dddd: o2[this.$W], H: String(s2), HH: O.s(s2, 2, "0"), h: c2(1), hh: c2(2), a: d2(s2, u2, true), A: d2(s2, u2, false), m: String(u2), mm: O.s(u2, 2, "0"), s: String(this.$s), ss: O.s(this.$s, 2, "0"), SSS: O.s(this.$ms, 3, "0"), Z: i2 };
return r2.replace(y, function(t3, e3) {
return e3 || l2[t3] || i2.replace(":", "");
});
}, m2.utcOffset = function() {
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
}, m2.diff = function(r2, d2, $2) {
var l2, y2 = O.p(d2), M3 = w(r2), m3 = (M3.utcOffset() - this.utcOffset()) * e, g2 = this - M3, v2 = O.m(this, M3);
return v2 = (l2 = {}, l2[c] = v2 / 12, l2[f] = v2, l2[h] = v2 / 3, l2[o] = (g2 - m3) / 6048e5, l2[a] = (g2 - m3) / 864e5, l2[u] = g2 / n, l2[s] = g2 / e, l2[i] = g2 / t, l2)[y2] || g2, $2 ? v2 : O.a(v2);
}, m2.daysInMonth = function() {
return this.endOf(f).$D;
}, m2.$locale = function() {
return D[this.$L];
}, m2.locale = function(t2, e2) {
if (!t2)
return this.$L;
var n2 = this.clone(), r2 = S(t2, e2, true);
return r2 && (n2.$L = r2), n2;
}, m2.clone = function() {
return O.w(this.$d, this);
}, m2.toDate = function() {
return new Date(this.valueOf());
}, m2.toJSON = function() {
return this.isValid() ? this.toISOString() : null;
}, m2.toISOString = function() {
return this.$d.toISOString();
}, m2.toString = function() {
return this.$d.toUTCString();
}, M2;
}(), T = _.prototype;
return w.prototype = T, [["$ms", r], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", f], ["$y", c], ["$D", d]].forEach(function(t2) {
T[t2[1]] = function(e2) {
return this.$g(e2, t2[0], t2[1]);
};
}), w.extend = function(t2, e2) {
return t2.$i || (t2(e2, _, w), t2.$i = true), w;
}, w.locale = S, w.isDayjs = p, w.unix = function(t2) {
return w(1e3 * t2);
}, w.en = D[v], w.Ls = D, w.p = {}, w;
});
})(dayjs_min);
var dayjs = dayjs_min.exports;
var customParseFormat$1 = {exports: {}};
(function(module, exports) {
!function(e, t) {
module.exports = t() ;
}(commonjsGlobal, function() {
var e = { LTS: "h:mm:ss A", LT: "h:mm A", L: "MM/DD/YYYY", LL: "MMMM D, YYYY", LLL: "MMMM D, YYYY h:mm A", LLLL: "dddd, MMMM D, YYYY h:mm A" }, t = /(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g, n = /\d\d/, r = /\d\d?/, i = /\d*[^-_:/,()\s\d]+/, o = {}, s = function(e2) {
return (e2 = +e2) + (e2 > 68 ? 1900 : 2e3);
};
var a = function(e2) {
return function(t2) {
this[e2] = +t2;
};
}, f = [/[+-]\d\d:?(\d\d)?|Z/, function(e2) {
(this.zone || (this.zone = {})).offset = function(e3) {
if (!e3)
return 0;
if (e3 === "Z")
return 0;
var t2 = e3.match(/([+-]|\d\d)/g), n2 = 60 * t2[1] + (+t2[2] || 0);
return n2 === 0 ? 0 : t2[0] === "+" ? -n2 : n2;
}(e2);
}], h = function(e2) {
var t2 = o[e2];
return t2 && (t2.indexOf ? t2 : t2.s.concat(t2.f));
}, u = function(e2, t2) {
var n2, r2 = o.meridiem;
if (r2) {
for (var i2 = 1; i2 <= 24; i2 += 1)
if (e2.indexOf(r2(i2, 0, t2)) > -1) {
n2 = i2 > 12;
break;
}
} else
n2 = e2 === (t2 ? "pm" : "PM");
return n2;
}, d = { A: [i, function(e2) {
this.afternoon = u(e2, false);
}], a: [i, function(e2) {
this.afternoon = u(e2, true);
}], S: [/\d/, function(e2) {
this.milliseconds = 100 * +e2;
}], SS: [n, function(e2) {
this.milliseconds = 10 * +e2;
}], SSS: [/\d{3}/, function(e2) {
this.milliseconds = +e2;
}], s: [r, a("seconds")], ss: [r, a("seconds")], m: [r, a("minutes")], mm: [r, a("minutes")], H: [r, a("hours")], h: [r, a("hours")], HH: [r, a("hours")], hh: [r, a("hours")], D: [r, a("day")], DD: [n, a("day")], Do: [i, function(e2) {
var t2 = o.ordinal, n2 = e2.match(/\d+/);
if (this.day = n2[0], t2)
for (var r2 = 1; r2 <= 31; r2 += 1)
t2(r2).replace(/\[|\]/g, "") === e2 && (this.day = r2);
}], M: [r, a("month")], MM: [n, a("month")], MMM: [i, function(e2) {
var t2 = h("months"), n2 = (h("monthsShort") || t2.map(function(e3) {
return e3.slice(0, 3);
})).indexOf(e2) + 1;
if (n2 < 1)
throw new Error();
this.month = n2 % 12 || n2;
}], MMMM: [i, function(e2) {
var t2 = h("months").indexOf(e2) + 1;
if (t2 < 1)
throw new Error();
this.month = t2 % 12 || t2;
}], Y: [/[+-]?\d+/, a("year")], YY: [n, function(e2) {
this.year = s(e2);
}], YYYY: [/\d{4}/, a("year")], Z: f, ZZ: f };
function c(n2) {
var r2, i2;
r2 = n2, i2 = o && o.formats;
for (var s2 = (n2 = r2.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function(t2, n3, r3) {
var o2 = r3 && r3.toUpperCase();
return n3 || i2[r3] || e[r3] || i2[o2].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function(e2, t3, n4) {
return t3 || n4.slice(1);
});
})).match(t), a2 = s2.length, f2 = 0; f2 < a2; f2 += 1) {
var h2 = s2[f2], u2 = d[h2], c2 = u2 && u2[0], l = u2 && u2[1];
s2[f2] = l ? { regex: c2, parser: l } : h2.replace(/^\[|\]$/g, "");
}
return function(e2) {
for (var t2 = {}, n3 = 0, r3 = 0; n3 < a2; n3 += 1) {
var i3 = s2[n3];
if (typeof i3 == "string")
r3 += i3.length;
else {
var o2 = i3.regex, f3 = i3.parser, h3 = e2.slice(r3), u3 = o2.exec(h3)[0];
f3.call(t2, u3), e2 = e2.replace(u3, "");
}
}
return function(e3) {
var t3 = e3.afternoon;
if (t3 !== void 0) {
var n4 = e3.hours;
t3 ? n4 < 12 && (e3.hours += 12) : n4 === 12 && (e3.hours = 0), delete e3.afternoon;
}
}(t2), t2;
};
}
return function(e2, t2, n2) {
n2.p.customParseFormat = true, e2 && e2.parseTwoDigitYear && (s = e2.parseTwoDigitYear);
var r2 = t2.prototype, i2 = r2.parse;
r2.parse = function(e3) {
var t3 = e3.date, r3 = e3.utc, s2 = e3.args;
this.$u = r3;
var a2 = s2[1];
if (typeof a2 == "string") {
var f2 = s2[2] === true, h2 = s2[3] === true, u2 = f2 || h2, d2 = s2[2];
h2 && (d2 = s2[2]), o = this.$locale(), !f2 && d2 && (o = n2.Ls[d2]), this.$d = function(e4, t4, n3) {
try {
if (["x", "X"].indexOf(t4) > -1)
return new Date((t4 === "X" ? 1e3 : 1) * e4);
var r4 = c(t4)(e4), i3 = r4.year, o2 = r4.month, s3 = r4.day, a3 = r4.hours, f3 = r4.minutes, h3 = r4.seconds, u3 = r4.milliseconds, d3 = r4.zone, l2 = new Date(), m2 = s3 || (i3 || o2 ? 1 : l2.getDate()), M2 = i3 || l2.getFullYear(), Y = 0;
i3 && !o2 || (Y = o2 > 0 ? o2 - 1 : l2.getMonth());
var p = a3 || 0, v = f3 || 0, D = h3 || 0, g = u3 || 0;
return d3 ? new Date(Date.UTC(M2, Y, m2, p, v, D, g + 60 * d3.offset * 1e3)) : n3 ? new Date(Date.UTC(M2, Y, m2, p, v, D, g)) : new Date(M2, Y, m2, p, v, D, g);
} catch (e5) {
return new Date("");
}
}(t3, a2, r3), this.init(), d2 && d2 !== true && (this.$L = this.locale(d2).$L), u2 && t3 != this.format(a2) && (this.$d = new Date("")), o = {};
} else if (a2 instanceof Array)
for (var l = a2.length, m = 1; m <= l; m += 1) {
s2[1] = a2[m - 1];
var M = n2.apply(this, s2);
if (M.isValid()) {
this.$d = M.$d, this.$L = M.$L, this.init();
break;
}
m === l && (this.$d = new Date(""));
}
else
i2.call(this, e3);
};
};
});
})(customParseFormat$1);
var customParseFormat = customParseFormat$1.exports;
const timeUnits = ["hours", "minutes", "seconds"];
const DEFAULT_FORMATS_TIME = "HH:mm:ss";
const DEFAULT_FORMATS_DATE = "YYYY-MM-DD";
const DEFAULT_FORMATS_DATEPICKER = {
date: DEFAULT_FORMATS_DATE,
dates: DEFAULT_FORMATS_DATE,
week: "gggg[w]ww",
year: "YYYY",
month: "YYYY-MM",
datetime: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`,
monthrange: "YYYY-MM",
daterange: DEFAULT_FORMATS_DATE,
datetimerange: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`
};
const buildTimeList = (value, bound) => {
return [
value > 0 ? value - 1 : void 0,
value,
value < bound ? value + 1 : void 0
];
};
const rangeArr = (n) => Array.from(Array.from({ length: n }).keys());
const extractDateFormat = (format) => {
return format.replace(/\W?m{1,2}|\W?ZZ/g, "").replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi, "").trim();
};
const extractTimeFormat = (format) => {
return format.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?Y{2,4}/g, "").trim();
};
const dateEquals = function(a, b) {
const aIsDate = isDate(a);
const bIsDate = isDate(b);
if (aIsDate && bIsDate) {
return a.getTime() === b.getTime();
}
if (!aIsDate && !bIsDate) {
return a === b;
}
return false;
};
const valueEquals = function(a, b) {
const aIsArray = isArray(a);
const bIsArray = isArray(b);
if (aIsArray && bIsArray) {
if (a.length !== b.length) {
return false;
}
return a.every((item, index) => dateEquals(item, b[index]));
}
if (!aIsArray && !bIsArray) {
return dateEquals(a, b);
}
return false;
};
const parseDate = function(date, format, lang) {
const day = isEmpty(format) || format === "x" ? dayjs(date).locale(lang) : dayjs(date, format).locale(lang);
return day.isValid() ? day : void 0;
};
const formatter = function(date, format, lang) {
if (isEmpty(format))
return date;
if (format === "x")
return +date;
return dayjs(date).locale(lang).format(format);
};
const makeList = (total, method) => {
var _a;
const arr = [];
const disabledArr = method == null ? void 0 : method();
for (let i = 0; i < total; i++) {
arr.push((_a = disabledArr == null ? void 0 : disabledArr.includes(i)) != null ? _a : false);
}
return arr;
};
const disabledTimeListsProps = buildProps({
disabledHours: {
type: definePropType(Function)
},
disabledMinutes: {
type: definePropType(Function)
},
disabledSeconds: {
type: definePropType(Function)
}
});
const timePanelSharedProps = buildProps({
visible: Boolean,
actualVisible: {
type: Boolean,
default: void 0
},
format: {
type: String,
default: ""
}
});
const timePickerDefaultProps = buildProps({
id: {
type: definePropType([Array, String])
},
name: {
type: definePropType([Array, String]),
default: ""
},
popperClass: {
type: String,
default: ""
},
format: String,
valueFormat: String,
type: {
type: String,
default: ""
},
clearable: {
type: Boolean,
default: true
},
clearIcon: {
type: definePropType([String, Object]),
default: circle_close_default
},
editable: {
type: Boolean,
default: true
},
prefixIcon: {
type: definePropType([String, Object]),
default: ""
},
size: useSizeProp,
readonly: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: ""
},
popperOptions: {
type: definePropType(Object),
default: () => ({})
},
modelValue: {
type: definePropType([Date, Array, String, Number]),
default: ""
},
rangeSeparator: {
type: String,
default: "-"
},
startPlaceholder: String,
endPlaceholder: String,
defaultValue: {
type: definePropType([Date, Array])
},
defaultTime: {
type: definePropType([Date, Array])
},
isRange: {
type: Boolean,
default: false
},
...disabledTimeListsProps,
disabledDate: {
type: Function
},
cellClassName: {
type: Function
},
shortcuts: {
type: Array,
default: () => []
},
arrowControl: {
type: Boolean,
default: false
},
label: {
type: String,
default: void 0
},
tabindex: {
type: definePropType([String, Number]),
default: 0
},
validateEvent: {
type: Boolean,
default: true
},
unlinkPanels: Boolean
});
const _hoisted_1$Z = ["id", "name", "placeholder", "value", "disabled", "readonly"];
const _hoisted_2$D = ["id", "name", "placeholder", "value", "disabled", "readonly"];
const __default__$1c = vue.defineComponent({
name: "Picker"
});
const _sfc_main$1U = /* @__PURE__ */ vue.defineComponent({
...__default__$1c,
props: timePickerDefaultProps,
emits: [
"update:modelValue",
"change",
"focus",
"blur",
"calendar-change",
"panel-change",
"visible-change",
"keydown"
],
setup(__props, { expose, emit }) {
const props = __props;
const { lang } = useLocale();
const nsDate = useNamespace("date");
const nsInput = useNamespace("input");
const nsRange = useNamespace("range");
const { form, formItem } = useFormItem();
const elPopperOptions = vue.inject("ElPopperOptions", {});
const refPopper = vue.ref();
const inputRef = vue.ref();
const pickerVisible = vue.ref(false);
const pickerActualVisible = vue.ref(false);
const valueOnOpen = vue.ref(null);
let hasJustTabExitedInput = false;
let ignoreFocusEvent = false;
vue.watch(pickerVisible, (val) => {
if (!val) {
userInput.value = null;
vue.nextTick(() => {
emitChange(props.modelValue);
});
} else {
vue.nextTick(() => {
if (val) {
valueOnOpen.value = props.modelValue;
}
});
}
});
const emitChange = (val, isClear) => {
if (isClear || !valueEquals(val, valueOnOpen.value)) {
emit("change", val);
props.validateEvent && (formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn()));
}
};
const emitInput = (input) => {
if (!valueEquals(props.modelValue, input)) {
let formatted;
if (isArray(input)) {
formatted = input.map((item) => formatter(item, props.valueFormat, lang.value));
} else if (input) {
formatted = formatter(input, props.valueFormat, lang.value);
}
emit("update:modelValue", input ? formatted : input, lang.value);
}
};
const emitKeydown = (e) => {
emit("keydown", e);
};
const refInput = vue.computed(() => {
if (inputRef.value) {
const _r = isRangeInput.value ? inputRef.value : inputRef.value.$el;
return Array.from(_r.querySelectorAll("input"));
}
return [];
});
const setSelectionRange = (start, end, pos) => {
const _inputs = refInput.value;
if (!_inputs.length)
return;
if (!pos || pos === "min") {
_inputs[0].setSelectionRange(start, end);
_inputs[0].focus();
} else if (pos === "max") {
_inputs[1].setSelectionRange(start, end);
_inputs[1].focus();
}
};
const focusOnInputBox = () => {
focus(true, true);
vue.nextTick(() => {
ignoreFocusEvent = false;
});
};
const onPick = (date = "", visible = false) => {
if (!visible) {
ignoreFocusEvent = true;
}
pickerVisible.value = visible;
let result;
if (isArray(date)) {
result = date.map((_) => _.toDate());
} else {
result = date ? date.toDate() : date;
}
userInput.value = null;
emitInput(result);
};
const onBeforeShow = () => {
pickerActualVisible.value = true;
};
const onShow = () => {
emit("visible-change", true);
};
const onKeydownPopperContent = (event) => {
if ((event == null ? void 0 : event.key) === EVENT_CODE.esc) {
focus(true, true);
}
};
const onHide = () => {
pickerActualVisible.value = false;
pickerVisible.value = false;
ignoreFocusEvent = false;
emit("visible-change", false);
};
const handleOpen = () => {
pickerVisible.value = true;
};
const handleClose = () => {
pickerVisible.value = false;
};
const focus = (focusStartInput = true, isIgnoreFocusEvent = false) => {
ignoreFocusEvent = isIgnoreFocusEvent;
const [leftInput, rightInput] = vue.unref(refInput);
let input = leftInput;
if (!focusStartInput && isRangeInput.value) {
input = rightInput;
}
if (input) {
input.focus();
}
};
const handleFocusInput = (e) => {
if (props.readonly || pickerDisabled.value || pickerVisible.value || ignoreFocusEvent) {
return;
}
pickerVisible.value = true;
emit("focus", e);
};
let currentHandleBlurDeferCallback = void 0;
const handleBlurInput = (e) => {
const handleBlurDefer = async () => {
setTimeout(() => {
var _a;
if (currentHandleBlurDeferCallback === handleBlurDefer) {
if (!(((_a = refPopper.value) == null ? void 0 : _a.isFocusInsideContent()) && !hasJustTabExitedInput) && refInput.value.filter((input) => {
return input.contains(document.activeElement);
}).length === 0) {
handleChange();
pickerVisible.value = false;
emit("blur", e);
props.validateEvent && (formItem == null ? void 0 : formItem.validate("blur").catch((err) => debugWarn()));
}
hasJustTabExitedInput = false;
}
}, 0);
};
currentHandleBlurDeferCallback = handleBlurDefer;
handleBlurDefer();
};
const pickerDisabled = vue.computed(() => {
return props.disabled || (form == null ? void 0 : form.disabled);
});
const parsedValue = vue.computed(() => {
let dayOrDays;
if (valueIsEmpty.value) {
if (pickerOptions.value.getDefaultValue) {
dayOrDays = pickerOptions.value.getDefaultValue();
}
} else {
if (isArray(props.modelValue)) {
dayOrDays = props.modelValue.map((d) => parseDate(d, props.valueFormat, lang.value));
} else {
dayOrDays = parseDate(props.modelValue, props.valueFormat, lang.value);
}
}
if (pickerOptions.value.getRangeAvailableTime) {
const availableResult = pickerOptions.value.getRangeAvailableTime(dayOrDays);
if (!isEqual$1(availableResult, dayOrDays)) {
dayOrDays = availableResult;
emitInput(isArray(dayOrDays) ? dayOrDays.map((_) => _.toDate()) : dayOrDays.toDate());
}
}
if (isArray(dayOrDays) && dayOrDays.some((day) => !day)) {
dayOrDays = [];
}
return dayOrDays;
});
const displayValue = vue.computed(() => {
if (!pickerOptions.value.panelReady)
return "";
const formattedValue = formatDayjsToString(parsedValue.value);
if (isArray(userInput.value)) {
return [
userInput.value[0] || formattedValue && formattedValue[0] || "",
userInput.value[1] || formattedValue && formattedValue[1] || ""
];
} else if (userInput.value !== null) {
return userInput.value;
}
if (!isTimePicker.value && valueIsEmpty.value)
return "";
if (!pickerVisible.value && valueIsEmpty.value)
return "";
if (formattedValue) {
return isDatesPicker.value ? formattedValue.join(", ") : formattedValue;
}
return "";
});
const isTimeLikePicker = vue.computed(() => props.type.includes("time"));
const isTimePicker = vue.computed(() => props.type.startsWith("time"));
const isDatesPicker = vue.computed(() => props.type === "dates");
const triggerIcon = vue.computed(() => props.prefixIcon || (isTimeLikePicker.value ? clock_default : calendar_default));
const showClose = vue.ref(false);
const onClearIconClick = (event) => {
if (props.readonly || pickerDisabled.value)
return;
if (showClose.value) {
event.stopPropagation();
focusOnInputBox();
emitInput(null);
emitChange(null, true);
showClose.value = false;
pickerVisible.value = false;
pickerOptions.value.handleClear && pickerOptions.value.handleClear();
}
};
const valueIsEmpty = vue.computed(() => {
const { modelValue } = props;
return !modelValue || isArray(modelValue) && !modelValue.filter(Boolean).length;
});
const onMouseDownInput = async (event) => {
var _a;
if (props.readonly || pickerDisabled.value)
return;
if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT" || refInput.value.includes(document.activeElement)) {
pickerVisible.value = true;
}
};
const onMouseEnter = () => {
if (props.readonly || pickerDisabled.value)
return;
if (!valueIsEmpty.value && props.clearable) {
showClose.value = true;
}
};
const onMouseLeave = () => {
showClose.value = false;
};
const onTouchStartInput = (event) => {
var _a;
if (props.readonly || pickerDisabled.value)
return;
if (((_a = event.touches[0].target) == null ? void 0 : _a.tagName) !== "INPUT" || refInput.value.includes(document.activeElement)) {
pickerVisible.value = true;
}
};
const isRangeInput = vue.computed(() => {
return props.type.includes("range");
});
const pickerSize = useSize();
const popperEl = vue.computed(() => {
var _a, _b;
return (_b = (_a = vue.unref(refPopper)) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
});
const actualInputRef = vue.computed(() => {
var _a;
if (vue.unref(isRangeInput)) {
return vue.unref(inputRef);
}
return (_a = vue.unref(inputRef)) == null ? void 0 : _a.$el;
});
onClickOutside(actualInputRef, (e) => {
const unrefedPopperEl = vue.unref(popperEl);
const inputEl = vue.unref(actualInputRef);
if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || e.composedPath().includes(inputEl))
return;
pickerVisible.value = false;
});
const userInput = vue.ref(null);
const handleChange = () => {
if (userInput.value) {
const value = parseUserInputToDayjs(displayValue.value);
if (value) {
if (isValidValue(value)) {
emitInput(isArray(value) ? value.map((_) => _.toDate()) : value.toDate());
userInput.value = null;
}
}
}
if (userInput.value === "") {
emitInput(null);
emitChange(null);
userInput.value = null;
}
};
const parseUserInputToDayjs = (value) => {
if (!value)
return null;
return pickerOptions.value.parseUserInput(value);
};
const formatDayjsToString = (value) => {
if (!value)
return null;
return pickerOptions.value.formatToString(value);
};
const isValidValue = (value) => {
return pickerOptions.value.isValidValue(value);
};
const handleKeydownInput = async (event) => {
if (props.readonly || pickerDisabled.value)
return;
const { code } = event;
emitKeydown(event);
if (code === EVENT_CODE.esc) {
if (pickerVisible.value === true) {
pickerVisible.value = false;
event.preventDefault();
event.stopPropagation();
}
return;
}
if (code === EVENT_CODE.down) {
if (pickerOptions.value.handleFocusPicker) {
event.preventDefault();
event.stopPropagation();
}
if (pickerVisible.value === false) {
pickerVisible.value = true;
await vue.nextTick();
}
if (pickerOptions.value.handleFocusPicker) {
pickerOptions.value.handleFocusPicker();
return;
}
}
if (code === EVENT_CODE.tab) {
hasJustTabExitedInput = true;
return;
}
if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {
if (userInput.value === null || userInput.value === "" || isValidValue(parseUserInputToDayjs(displayValue.value))) {
handleChange();
pickerVisible.value = false;
}
event.stopPropagation();
return;
}
if (userInput.value) {
event.stopPropagation();
return;
}
if (pickerOptions.value.handleKeydownInput) {
pickerOptions.value.handleKeydownInput(event);
}
};
const onUserInput = (e) => {
userInput.value = e;
if (!pickerVisible.value) {
pickerVisible.value = true;
}
};
const handleStartInput = (event) => {
const target = event.target;
if (userInput.value) {
userInput.value = [target.value, userInput.value[1]];
} else {
userInput.value = [target.value, null];
}
};
const handleEndInput = (event) => {
const target = event.target;
if (userInput.value) {
userInput.value = [userInput.value[0], target.value];
} else {
userInput.value = [null, target.value];
}
};
const handleStartChange = () => {
var _a;
const values = userInput.value;
const value = parseUserInputToDayjs(values && values[0]);
const parsedVal = vue.unref(parsedValue);
if (value && value.isValid()) {
userInput.value = [
formatDayjsToString(value),
((_a = displayValue.value) == null ? void 0 : _a[1]) || null
];
const newValue = [value, parsedVal && (parsedVal[1] || null)];
if (isValidValue(newValue)) {
emitInput(newValue);
userInput.value = null;
}
}
};
const handleEndChange = () => {
var _a;
const values = vue.unref(userInput);
const value = parseUserInputToDayjs(values && values[1]);
const parsedVal = vue.unref(parsedValue);
if (value && value.isValid()) {
userInput.value = [
((_a = vue.unref(displayValue)) == null ? void 0 : _a[0]) || null,
formatDayjsToString(value)
];
const newValue = [parsedVal && parsedVal[0], value];
if (isValidValue(newValue)) {
emitInput(newValue);
userInput.value = null;
}
}
};
const pickerOptions = vue.ref({});
const onSetPickerOption = (e) => {
pickerOptions.value[e[0]] = e[1];
pickerOptions.value.panelReady = true;
};
const onCalendarChange = (e) => {
emit("calendar-change", e);
};
const onPanelChange = (value, mode, view) => {
emit("panel-change", value, mode, view);
};
vue.provide("EP_PICKER_BASE", {
props
});
expose({
focus,
handleFocusInput,
handleBlurInput,
handleOpen,
handleClose,
onPick
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), vue.mergeProps({
ref_key: "refPopper",
ref: refPopper,
visible: pickerVisible.value,
effect: "light",
pure: "",
trigger: "click"
}, _ctx.$attrs, {
role: "dialog",
teleported: "",
transition: `${vue.unref(nsDate).namespace.value}-zoom-in-top`,
"popper-class": [`${vue.unref(nsDate).namespace.value}-picker__popper`, _ctx.popperClass],
"popper-options": vue.unref(elPopperOptions),
"fallback-placements": ["bottom", "top", "right", "left"],
"gpu-acceleration": false,
"stop-popper-mouse-event": false,
"hide-after": 0,
persistent: "",
onBeforeShow,
onShow,
onHide
}), {
default: vue.withCtx(() => [
!vue.unref(isRangeInput) ? (vue.openBlock(), vue.createBlock(vue.unref(ElInput), {
key: 0,
id: _ctx.id,
ref_key: "inputRef",
ref: inputRef,
"container-role": "combobox",
"model-value": vue.unref(displayValue),
name: _ctx.name,
size: vue.unref(pickerSize),
disabled: vue.unref(pickerDisabled),
placeholder: _ctx.placeholder,
class: vue.normalizeClass([vue.unref(nsDate).b("editor"), vue.unref(nsDate).bm("editor", _ctx.type), _ctx.$attrs.class]),
style: vue.normalizeStyle(_ctx.$attrs.style),
readonly: !_ctx.editable || _ctx.readonly || vue.unref(isDatesPicker) || _ctx.type === "week",
label: _ctx.label,
tabindex: _ctx.tabindex,
"validate-event": false,
onInput: onUserInput,
onFocus: handleFocusInput,
onBlur: handleBlurInput,
onKeydown: handleKeydownInput,
onChange: handleChange,
onMousedown: onMouseDownInput,
onMouseenter: onMouseEnter,
onMouseleave: onMouseLeave,
onTouchstart: onTouchStartInput,
onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["stop"]))
}, {
prefix: vue.withCtx(() => [
vue.unref(triggerIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(vue.unref(nsInput).e("icon")),
onMousedown: vue.withModifiers(onMouseDownInput, ["prevent"]),
onTouchstart: onTouchStartInput
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(triggerIcon))))
]),
_: 1
}, 8, ["class", "onMousedown"])) : vue.createCommentVNode("v-if", true)
]),
suffix: vue.withCtx(() => [
showClose.value && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(`${vue.unref(nsInput).e("icon")} clear-icon`),
onClick: vue.withModifiers(onClearIconClick, ["stop"])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
]),
_: 1
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
]),
_: 1
}, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "label", "tabindex", "onKeydown"])) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
ref_key: "inputRef",
ref: inputRef,
class: vue.normalizeClass([
vue.unref(nsDate).b("editor"),
vue.unref(nsDate).bm("editor", _ctx.type),
vue.unref(nsInput).e("wrapper"),
vue.unref(nsDate).is("disabled", vue.unref(pickerDisabled)),
vue.unref(nsDate).is("active", pickerVisible.value),
vue.unref(nsRange).b("editor"),
vue.unref(pickerSize) ? vue.unref(nsRange).bm("editor", vue.unref(pickerSize)) : "",
_ctx.$attrs.class
]),
style: vue.normalizeStyle(_ctx.$attrs.style),
onClick: handleFocusInput,
onMouseenter: onMouseEnter,
onMouseleave: onMouseLeave,
onTouchstart: onTouchStartInput,
onKeydown: handleKeydownInput
}, [
vue.unref(triggerIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass([vue.unref(nsInput).e("icon"), vue.unref(nsRange).e("icon")]),
onMousedown: vue.withModifiers(onMouseDownInput, ["prevent"]),
onTouchstart: onTouchStartInput
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(triggerIcon))))
]),
_: 1
}, 8, ["class", "onMousedown"])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("input", {
id: _ctx.id && _ctx.id[0],
autocomplete: "off",
name: _ctx.name && _ctx.name[0],
placeholder: _ctx.startPlaceholder,
value: vue.unref(displayValue) && vue.unref(displayValue)[0],
disabled: vue.unref(pickerDisabled),
readonly: !_ctx.editable || _ctx.readonly,
class: vue.normalizeClass(vue.unref(nsRange).b("input")),
onMousedown: onMouseDownInput,
onInput: handleStartInput,
onChange: handleStartChange,
onFocus: handleFocusInput,
onBlur: handleBlurInput
}, null, 42, _hoisted_1$Z),
vue.renderSlot(_ctx.$slots, "range-separator", {}, () => [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(nsRange).b("separator"))
}, vue.toDisplayString(_ctx.rangeSeparator), 3)
]),
vue.createElementVNode("input", {
id: _ctx.id && _ctx.id[1],
autocomplete: "off",
name: _ctx.name && _ctx.name[1],
placeholder: _ctx.endPlaceholder,
value: vue.unref(displayValue) && vue.unref(displayValue)[1],
disabled: vue.unref(pickerDisabled),
readonly: !_ctx.editable || _ctx.readonly,
class: vue.normalizeClass(vue.unref(nsRange).b("input")),
onMousedown: onMouseDownInput,
onFocus: handleFocusInput,
onBlur: handleBlurInput,
onInput: handleEndInput,
onChange: handleEndChange
}, null, 42, _hoisted_2$D),
_ctx.clearIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 1,
class: vue.normalizeClass([
vue.unref(nsInput).e("icon"),
vue.unref(nsRange).e("close-icon"),
{
[vue.unref(nsRange).e("close-icon--hidden")]: !showClose.value
}
]),
onClick: onClearIconClick
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true)
], 38))
]),
content: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default", {
visible: pickerVisible.value,
actualVisible: pickerActualVisible.value,
parsedValue: vue.unref(parsedValue),
format: _ctx.format,
unlinkPanels: _ctx.unlinkPanels,
type: _ctx.type,
defaultValue: _ctx.defaultValue,
onPick,
onSelectRange: setSelectionRange,
onSetPickerOption,
onCalendarChange,
onPanelChange,
onKeydown: onKeydownPopperContent,
onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["stop"]))
})
]),
_: 3
}, 16, ["visible", "transition", "popper-class", "popper-options"]);
};
}
});
var CommonPicker = /* @__PURE__ */ _export_sfc(_sfc_main$1U, [["__file", "picker.vue"]]);
const panelTimePickerProps = buildProps({
...timePanelSharedProps,
datetimeRole: String,
parsedValue: {
type: definePropType(Object)
}
});
const useTimePanel = ({
getAvailableHours,
getAvailableMinutes,
getAvailableSeconds
}) => {
const getAvailableTime = (date, role, first, compareDate) => {
const availableTimeGetters = {
hour: getAvailableHours,
minute: getAvailableMinutes,
second: getAvailableSeconds
};
let result = date;
["hour", "minute", "second"].forEach((type) => {
if (availableTimeGetters[type]) {
let availableTimeSlots;
const method = availableTimeGetters[type];
switch (type) {
case "minute": {
availableTimeSlots = method(result.hour(), role, compareDate);
break;
}
case "second": {
availableTimeSlots = method(result.hour(), result.minute(), role, compareDate);
break;
}
default: {
availableTimeSlots = method(role, compareDate);
break;
}
}
if ((availableTimeSlots == null ? void 0 : availableTimeSlots.length) && !availableTimeSlots.includes(result[type]())) {
const pos = first ? 0 : availableTimeSlots.length - 1;
result = result[type](availableTimeSlots[pos]);
}
}
});
return result;
};
const timePickerOptions = {};
const onSetOption = ([key, val]) => {
timePickerOptions[key] = val;
};
return {
timePickerOptions,
getAvailableTime,
onSetOption
};
};
const makeAvailableArr = (disabledList) => {
const trueOrNumber = (isDisabled, index) => isDisabled || index;
const getNumber = (predicate) => predicate !== true;
return disabledList.map(trueOrNumber).filter(getNumber);
};
const getTimeLists = (disabledHours, disabledMinutes, disabledSeconds) => {
const getHoursList = (role, compare) => {
return makeList(24, disabledHours && (() => disabledHours == null ? void 0 : disabledHours(role, compare)));
};
const getMinutesList = (hour, role, compare) => {
return makeList(60, disabledMinutes && (() => disabledMinutes == null ? void 0 : disabledMinutes(hour, role, compare)));
};
const getSecondsList = (hour, minute, role, compare) => {
return makeList(60, disabledSeconds && (() => disabledSeconds == null ? void 0 : disabledSeconds(hour, minute, role, compare)));
};
return {
getHoursList,
getMinutesList,
getSecondsList
};
};
const buildAvailableTimeSlotGetter = (disabledHours, disabledMinutes, disabledSeconds) => {
const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(disabledHours, disabledMinutes, disabledSeconds);
const getAvailableHours = (role, compare) => {
return makeAvailableArr(getHoursList(role, compare));
};
const getAvailableMinutes = (hour, role, compare) => {
return makeAvailableArr(getMinutesList(hour, role, compare));
};
const getAvailableSeconds = (hour, minute, role, compare) => {
return makeAvailableArr(getSecondsList(hour, minute, role, compare));
};
return {
getAvailableHours,
getAvailableMinutes,
getAvailableSeconds
};
};
const useOldValue = (props) => {
const oldValue = vue.ref(props.parsedValue);
vue.watch(() => props.visible, (val) => {
if (!val) {
oldValue.value = props.parsedValue;
}
});
return oldValue;
};
const nodeList = /* @__PURE__ */ new Map();
let startClick;
if (isClient) {
document.addEventListener("mousedown", (e) => startClick = e);
document.addEventListener("mouseup", (e) => {
for (const handlers of nodeList.values()) {
for (const { documentHandler } of handlers) {
documentHandler(e, startClick);
}
}
});
}
function createDocumentHandler(el, binding) {
let excludes = [];
if (Array.isArray(binding.arg)) {
excludes = binding.arg;
} else if (isElement$1(binding.arg)) {
excludes.push(binding.arg);
}
return function(mouseup, mousedown) {
const popperRef = binding.instance.popperRef;
const mouseUpTarget = mouseup.target;
const mouseDownTarget = mousedown == null ? void 0 : mousedown.target;
const isBound = !binding || !binding.instance;
const isTargetExists = !mouseUpTarget || !mouseDownTarget;
const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
const isSelf = el === mouseUpTarget;
const isTargetExcluded = excludes.length && excludes.some((item) => item == null ? void 0 : item.contains(mouseUpTarget)) || excludes.length && excludes.includes(mouseDownTarget);
const isContainedByPopper = popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
if (isBound || isTargetExists || isContainedByEl || isSelf || isTargetExcluded || isContainedByPopper) {
return;
}
binding.value(mouseup, mousedown);
};
}
const ClickOutside = {
beforeMount(el, binding) {
if (!nodeList.has(el)) {
nodeList.set(el, []);
}
nodeList.get(el).push({
documentHandler: createDocumentHandler(el, binding),
bindingFn: binding.value
});
},
updated(el, binding) {
if (!nodeList.has(el)) {
nodeList.set(el, []);
}
const handlers = nodeList.get(el);
const oldHandlerIndex = handlers.findIndex((item) => item.bindingFn === binding.oldValue);
const newHandler = {
documentHandler: createDocumentHandler(el, binding),
bindingFn: binding.value
};
if (oldHandlerIndex >= 0) {
handlers.splice(oldHandlerIndex, 1, newHandler);
} else {
handlers.push(newHandler);
}
},
unmounted(el) {
nodeList.delete(el);
}
};
const REPEAT_INTERVAL = 100;
const REPEAT_DELAY = 600;
const vRepeatClick = {
beforeMount(el, binding) {
const value = binding.value;
const { interval = REPEAT_INTERVAL, delay = REPEAT_DELAY } = isFunction(value) ? {} : value;
let intervalId;
let delayId;
const handler = () => isFunction(value) ? value() : value.handler();
const clear = () => {
if (delayId) {
clearTimeout(delayId);
delayId = void 0;
}
if (intervalId) {
clearInterval(intervalId);
intervalId = void 0;
}
};
el.addEventListener("mousedown", (evt) => {
if (evt.button !== 0)
return;
clear();
handler();
document.addEventListener("mouseup", () => clear(), {
once: true
});
delayId = setTimeout(() => {
intervalId = setInterval(() => {
handler();
}, interval);
}, delay);
});
}
};
const FOCUSABLE_CHILDREN = "_trap-focus-children";
const FOCUS_STACK = [];
const FOCUS_HANDLER = (e) => {
if (FOCUS_STACK.length === 0)
return;
const focusableElement = FOCUS_STACK[FOCUS_STACK.length - 1][FOCUSABLE_CHILDREN];
if (focusableElement.length > 0 && e.code === EVENT_CODE.tab) {
if (focusableElement.length === 1) {
e.preventDefault();
if (document.activeElement !== focusableElement[0]) {
focusableElement[0].focus();
}
return;
}
const goingBackward = e.shiftKey;
const isFirst = e.target === focusableElement[0];
const isLast = e.target === focusableElement[focusableElement.length - 1];
if (isFirst && goingBackward) {
e.preventDefault();
focusableElement[focusableElement.length - 1].focus();
}
if (isLast && !goingBackward) {
e.preventDefault();
focusableElement[0].focus();
}
}
};
const TrapFocus = {
beforeMount(el) {
el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements$1(el);
FOCUS_STACK.push(el);
if (FOCUS_STACK.length <= 1) {
document.addEventListener("keydown", FOCUS_HANDLER);
}
},
updated(el) {
vue.nextTick(() => {
el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements$1(el);
});
},
unmounted() {
FOCUS_STACK.shift();
if (FOCUS_STACK.length === 0) {
document.removeEventListener("keydown", FOCUS_HANDLER);
}
}
};
var v=!1,o,f,s,u,d,N,l,p,m,w,D,x,E,M,F;function a(){if(!v){v=!0;var e=navigator.userAgent,n=/(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(e),i=/(Mac OS X)|(Windows)|(Linux)/.exec(e);if(x=/\b(iPhone|iP[ao]d)/.exec(e),E=/\b(iP[ao]d)/.exec(e),w=/Android/i.exec(e),M=/FBAN\/\w+;/i.exec(e),F=/Mobile/i.exec(e),D=!!/Win64/.exec(e),n){o=n[1]?parseFloat(n[1]):n[5]?parseFloat(n[5]):NaN,o&&document&&document.documentMode&&(o=document.documentMode);var r=/(?:Trident\/(\d+.\d+))/.exec(e);N=r?parseFloat(r[1])+4:o,f=n[2]?parseFloat(n[2]):NaN,s=n[3]?parseFloat(n[3]):NaN,u=n[4]?parseFloat(n[4]):NaN,u?(n=/(?:Chrome\/(\d+\.\d+))/.exec(e),d=n&&n[1]?parseFloat(n[1]):NaN):d=NaN;}else o=f=s=d=u=NaN;if(i){if(i[1]){var t=/(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(e);l=t?parseFloat(t[1].replace("_",".")):!0;}else l=!1;p=!!i[2],m=!!i[3];}else l=p=m=!1;}}var _={ie:function(){return a()||o},ieCompatibilityMode:function(){return a()||N>o},ie64:function(){return _.ie()&&D},firefox:function(){return a()||f},opera:function(){return a()||s},webkit:function(){return a()||u},safari:function(){return _.webkit()},chrome:function(){return a()||d},windows:function(){return a()||p},osx:function(){return a()||l},linux:function(){return a()||m},iphone:function(){return a()||x},mobile:function(){return a()||x||E||w||F},nativeApp:function(){return a()||M},android:function(){return a()||w},ipad:function(){return a()||E}},A=_;var c=!!(typeof window<"u"&&window.document&&window.document.createElement),U={canUseDOM:c,canUseWorkers:typeof Worker<"u",canUseEventListeners:c&&!!(window.addEventListener||window.attachEvent),canUseViewport:c&&!!window.screen,isInWorker:!c},h=U;var X;h.canUseDOM&&(X=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0);function S(e,n){if(!h.canUseDOM||n&&!("addEventListener"in document))return !1;var i="on"+e,r=i in document;if(!r){var t=document.createElement("div");t.setAttribute(i,"return;"),r=typeof t[i]=="function";}return !r&&X&&e==="wheel"&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var b=S;var O=10,I=40,P=800;function T(e){var n=0,i=0,r=0,t=0;return "detail"in e&&(i=e.detail),"wheelDelta"in e&&(i=-e.wheelDelta/120),"wheelDeltaY"in e&&(i=-e.wheelDeltaY/120),"wheelDeltaX"in e&&(n=-e.wheelDeltaX/120),"axis"in e&&e.axis===e.HORIZONTAL_AXIS&&(n=i,i=0),r=n*O,t=i*O,"deltaY"in e&&(t=e.deltaY),"deltaX"in e&&(r=e.deltaX),(r||t)&&e.deltaMode&&(e.deltaMode==1?(r*=I,t*=I):(r*=P,t*=P)),r&&!n&&(n=r<1?-1:1),t&&!i&&(i=t<1?-1:1),{spinX:n,spinY:i,pixelX:r,pixelY:t}}T.getEventType=function(){return A.firefox()?"DOMMouseScroll":b("wheel")?"wheel":"mousewheel"};var Y=T;/**
* Checks if an event is supported in the current execution environment.
*
* NOTE: This will not work correctly for non-generic events such as `change`,
* `reset`, `load`, `error`, and `select`.
*
* Borrows from Modernizr.
*
* @param {string} eventNameSuffix Event name, e.g. "click".
* @param {?boolean} capture Check if the capture phase is supported.
* @return {boolean} True if the event is supported.
* @internal
* @license Modernizr 3.0.0pre (Custom Build) | MIT
*/
const mousewheel = function(element, callback) {
if (element && element.addEventListener) {
const fn = function(event) {
const normalized = Y(event);
callback && Reflect.apply(callback, this, [event, normalized]);
};
element.addEventListener("wheel", fn, { passive: true });
}
};
const Mousewheel = {
beforeMount(el, binding) {
mousewheel(el, binding.value);
}
};
const basicTimeSpinnerProps = buildProps({
role: {
type: String,
required: true
},
spinnerDate: {
type: definePropType(Object),
required: true
},
showSeconds: {
type: Boolean,
default: true
},
arrowControl: Boolean,
amPmMode: {
type: definePropType(String),
default: ""
},
...disabledTimeListsProps
});
const _hoisted_1$Y = ["onClick"];
const _hoisted_2$C = ["onMouseenter"];
const _sfc_main$1T = /* @__PURE__ */ vue.defineComponent({
__name: "basic-time-spinner",
props: basicTimeSpinnerProps,
emits: ["change", "select-range", "set-option"],
setup(__props, { emit }) {
const props = __props;
const ns = useNamespace("time");
const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(props.disabledHours, props.disabledMinutes, props.disabledSeconds);
let isScrolling = false;
const currentScrollbar = vue.ref();
const listHoursRef = vue.ref();
const listMinutesRef = vue.ref();
const listSecondsRef = vue.ref();
const listRefsMap = {
hours: listHoursRef,
minutes: listMinutesRef,
seconds: listSecondsRef
};
const spinnerItems = vue.computed(() => {
return props.showSeconds ? timeUnits : timeUnits.slice(0, 2);
});
const timePartials = vue.computed(() => {
const { spinnerDate } = props;
const hours = spinnerDate.hour();
const minutes = spinnerDate.minute();
const seconds = spinnerDate.second();
return { hours, minutes, seconds };
});
const timeList = vue.computed(() => {
const { hours, minutes } = vue.unref(timePartials);
return {
hours: getHoursList(props.role),
minutes: getMinutesList(hours, props.role),
seconds: getSecondsList(hours, minutes, props.role)
};
});
const arrowControlTimeList = vue.computed(() => {
const { hours, minutes, seconds } = vue.unref(timePartials);
return {
hours: buildTimeList(hours, 23),
minutes: buildTimeList(minutes, 59),
seconds: buildTimeList(seconds, 59)
};
});
const debouncedResetScroll = debounce((type) => {
isScrolling = false;
adjustCurrentSpinner(type);
}, 200);
const getAmPmFlag = (hour) => {
const shouldShowAmPm = !!props.amPmMode;
if (!shouldShowAmPm)
return "";
const isCapital = props.amPmMode === "A";
let content = hour < 12 ? " am" : " pm";
if (isCapital)
content = content.toUpperCase();
return content;
};
const emitSelectRange = (type) => {
let range;
switch (type) {
case "hours":
range = [0, 2];
break;
case "minutes":
range = [3, 5];
break;
case "seconds":
range = [6, 8];
break;
}
const [left, right] = range;
emit("select-range", left, right);
currentScrollbar.value = type;
};
const adjustCurrentSpinner = (type) => {
adjustSpinner(type, vue.unref(timePartials)[type]);
};
const adjustSpinners = () => {
adjustCurrentSpinner("hours");
adjustCurrentSpinner("minutes");
adjustCurrentSpinner("seconds");
};
const getScrollbarElement = (el) => el.querySelector(`.${ns.namespace.value}-scrollbar__wrap`);
const adjustSpinner = (type, value) => {
if (props.arrowControl)
return;
const scrollbar = vue.unref(listRefsMap[type]);
if (scrollbar && scrollbar.$el) {
getScrollbarElement(scrollbar.$el).scrollTop = Math.max(0, value * typeItemHeight(type));
}
};
const typeItemHeight = (type) => {
const scrollbar = vue.unref(listRefsMap[type]);
return (scrollbar == null ? void 0 : scrollbar.$el.querySelector("li").offsetHeight) || 0;
};
const onIncrement = () => {
scrollDown(1);
};
const onDecrement = () => {
scrollDown(-1);
};
const scrollDown = (step) => {
if (!currentScrollbar.value) {
emitSelectRange("hours");
}
const label = currentScrollbar.value;
const now = vue.unref(timePartials)[label];
const total = currentScrollbar.value === "hours" ? 24 : 60;
const next = findNextUnDisabled(label, now, step, total);
modifyDateField(label, next);
adjustSpinner(label, next);
vue.nextTick(() => emitSelectRange(label));
};
const findNextUnDisabled = (type, now, step, total) => {
let next = (now + step + total) % total;
const list = vue.unref(timeList)[type];
while (list[next] && next !== now) {
next = (next + step + total) % total;
}
return next;
};
const modifyDateField = (type, value) => {
const list = vue.unref(timeList)[type];
const isDisabled = list[value];
if (isDisabled)
return;
const { hours, minutes, seconds } = vue.unref(timePartials);
let changeTo;
switch (type) {
case "hours":
changeTo = props.spinnerDate.hour(value).minute(minutes).second(seconds);
break;
case "minutes":
changeTo = props.spinnerDate.hour(hours).minute(value).second(seconds);
break;
case "seconds":
changeTo = props.spinnerDate.hour(hours).minute(minutes).second(value);
break;
}
emit("change", changeTo);
};
const handleClick = (type, { value, disabled }) => {
if (!disabled) {
modifyDateField(type, value);
emitSelectRange(type);
adjustSpinner(type, value);
}
};
const handleScroll = (type) => {
isScrolling = true;
debouncedResetScroll(type);
const value = Math.min(Math.round((getScrollbarElement(vue.unref(listRefsMap[type]).$el).scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)), type === "hours" ? 23 : 59);
modifyDateField(type, value);
};
const scrollBarHeight = (type) => {
return vue.unref(listRefsMap[type]).$el.offsetHeight;
};
const bindScrollEvent = () => {
const bindFunction = (type) => {
const scrollbar = vue.unref(listRefsMap[type]);
if (scrollbar && scrollbar.$el) {
getScrollbarElement(scrollbar.$el).onscroll = () => {
handleScroll(type);
};
}
};
bindFunction("hours");
bindFunction("minutes");
bindFunction("seconds");
};
vue.onMounted(() => {
vue.nextTick(() => {
!props.arrowControl && bindScrollEvent();
adjustSpinners();
if (props.role === "start")
emitSelectRange("hours");
});
});
const setRef = (scrollbar, type) => {
listRefsMap[type].value = scrollbar;
};
emit("set-option", [`${props.role}_scrollDown`, scrollDown]);
emit("set-option", [`${props.role}_emitSelectRange`, emitSelectRange]);
vue.watch(() => props.spinnerDate, () => {
if (isScrolling)
return;
adjustSpinners();
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([vue.unref(ns).b("spinner"), { "has-seconds": _ctx.showSeconds }])
}, [
!_ctx.arrowControl ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(vue.unref(spinnerItems), (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElScrollbar), {
key: item,
ref_for: true,
ref: (scrollbar) => setRef(scrollbar, item),
class: vue.normalizeClass(vue.unref(ns).be("spinner", "wrapper")),
"wrap-style": "max-height: inherit;",
"view-class": vue.unref(ns).be("spinner", "list"),
noresize: "",
tag: "ul",
onMouseenter: ($event) => emitSelectRange(item),
onMousemove: ($event) => adjustCurrentSpinner(item)
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(timeList)[item], (disabled, key) => {
return vue.openBlock(), vue.createElementBlock("li", {
key,
class: vue.normalizeClass([
vue.unref(ns).be("spinner", "item"),
vue.unref(ns).is("active", key === vue.unref(timePartials)[item]),
vue.unref(ns).is("disabled", disabled)
]),
onClick: ($event) => handleClick(item, { value: key, disabled })
}, [
item === "hours" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createTextVNode(vue.toDisplayString(("0" + (_ctx.amPmMode ? key % 12 || 12 : key)).slice(-2)) + vue.toDisplayString(getAmPmFlag(key)), 1)
], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createTextVNode(vue.toDisplayString(("0" + key).slice(-2)), 1)
], 64))
], 10, _hoisted_1$Y);
}), 128))
]),
_: 2
}, 1032, ["class", "view-class", "onMouseenter", "onMousemove"]);
}), 128)) : vue.createCommentVNode("v-if", true),
_ctx.arrowControl ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(vue.unref(spinnerItems), (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item,
class: vue.normalizeClass([vue.unref(ns).be("spinner", "wrapper"), vue.unref(ns).is("arrow")]),
onMouseenter: ($event) => emitSelectRange(item)
}, [
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
class: vue.normalizeClass(["arrow-up", vue.unref(ns).be("spinner", "arrow")])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_up_default))
]),
_: 1
}, 8, ["class"])), [
[vue.unref(vRepeatClick), onDecrement]
]),
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
class: vue.normalizeClass(["arrow-down", vue.unref(ns).be("spinner", "arrow")])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_down_default))
]),
_: 1
}, 8, ["class"])), [
[vue.unref(vRepeatClick), onIncrement]
]),
vue.createElementVNode("ul", {
class: vue.normalizeClass(vue.unref(ns).be("spinner", "list"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(arrowControlTimeList)[item], (time, key) => {
return vue.openBlock(), vue.createElementBlock("li", {
key,
class: vue.normalizeClass([
vue.unref(ns).be("spinner", "item"),
vue.unref(ns).is("active", time === vue.unref(timePartials)[item]),
vue.unref(ns).is("disabled", vue.unref(timeList)[item][time])
])
}, [
typeof time === "number" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
item === "hours" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createTextVNode(vue.toDisplayString(("0" + (_ctx.amPmMode ? time % 12 || 12 : time)).slice(-2)) + vue.toDisplayString(getAmPmFlag(time)), 1)
], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createTextVNode(vue.toDisplayString(("0" + time).slice(-2)), 1)
], 64))
], 64)) : vue.createCommentVNode("v-if", true)
], 2);
}), 128))
], 2)
], 42, _hoisted_2$C);
}), 128)) : vue.createCommentVNode("v-if", true)
], 2);
};
}
});
var TimeSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1T, [["__file", "basic-time-spinner.vue"]]);
const _sfc_main$1S = /* @__PURE__ */ vue.defineComponent({
__name: "panel-time-pick",
props: panelTimePickerProps,
emits: ["pick", "select-range", "set-picker-option"],
setup(__props, { emit }) {
const props = __props;
const pickerBase = vue.inject("EP_PICKER_BASE");
const {
arrowControl,
disabledHours,
disabledMinutes,
disabledSeconds,
defaultValue
} = pickerBase.props;
const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds);
const ns = useNamespace("time");
const { t, lang } = useLocale();
const selectionRange = vue.ref([0, 2]);
const oldValue = useOldValue(props);
const transitionName = vue.computed(() => {
return isUndefined(props.actualVisible) ? `${ns.namespace.value}-zoom-in-top` : "";
});
const showSeconds = vue.computed(() => {
return props.format.includes("ss");
});
const amPmMode = vue.computed(() => {
if (props.format.includes("A"))
return "A";
if (props.format.includes("a"))
return "a";
return "";
});
const isValidValue = (_date) => {
const parsedDate = dayjs(_date).locale(lang.value);
const result = getRangeAvailableTime(parsedDate);
return parsedDate.isSame(result);
};
const handleCancel = () => {
emit("pick", oldValue.value, false);
};
const handleConfirm = (visible = false, first = false) => {
if (first)
return;
emit("pick", props.parsedValue, visible);
};
const handleChange = (_date) => {
if (!props.visible) {
return;
}
const result = getRangeAvailableTime(_date).millisecond(0);
emit("pick", result, true);
};
const setSelectionRange = (start, end) => {
emit("select-range", start, end);
selectionRange.value = [start, end];
};
const changeSelectionRange = (step) => {
const list = [0, 3].concat(showSeconds.value ? [6] : []);
const mapping = ["hours", "minutes"].concat(showSeconds.value ? ["seconds"] : []);
const index = list.indexOf(selectionRange.value[0]);
const next = (index + step + list.length) % list.length;
timePickerOptions["start_emitSelectRange"](mapping[next]);
};
const handleKeydown = (event) => {
const code = event.code;
const { left, right, up, down } = EVENT_CODE;
if ([left, right].includes(code)) {
const step = code === left ? -1 : 1;
changeSelectionRange(step);
event.preventDefault();
return;
}
if ([up, down].includes(code)) {
const step = code === up ? -1 : 1;
timePickerOptions["start_scrollDown"](step);
event.preventDefault();
return;
}
};
const { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel({
getAvailableHours,
getAvailableMinutes,
getAvailableSeconds
});
const getRangeAvailableTime = (date) => {
return getAvailableTime(date, props.datetimeRole || "", true);
};
const parseUserInput = (value) => {
if (!value)
return null;
return dayjs(value, props.format).locale(lang.value);
};
const formatToString = (value) => {
if (!value)
return null;
return value.format(props.format);
};
const getDefaultValue = () => {
return dayjs(defaultValue).locale(lang.value);
};
emit("set-picker-option", ["isValidValue", isValidValue]);
emit("set-picker-option", ["formatToString", formatToString]);
emit("set-picker-option", ["parseUserInput", parseUserInput]);
emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Transition, { name: vue.unref(transitionName) }, {
default: vue.withCtx(() => [
_ctx.actualVisible || _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).b("panel"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass([vue.unref(ns).be("panel", "content"), { "has-seconds": vue.unref(showSeconds) }])
}, [
vue.createVNode(TimeSpinner, {
ref: "spinner",
role: _ctx.datetimeRole || "start",
"arrow-control": vue.unref(arrowControl),
"show-seconds": vue.unref(showSeconds),
"am-pm-mode": vue.unref(amPmMode),
"spinner-date": _ctx.parsedValue,
"disabled-hours": vue.unref(disabledHours),
"disabled-minutes": vue.unref(disabledMinutes),
"disabled-seconds": vue.unref(disabledSeconds),
onChange: handleChange,
onSetOption: vue.unref(onSetOption),
onSelectRange: setSelectionRange
}, null, 8, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onSetOption"])
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).be("panel", "footer"))
}, [
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ns).be("panel", "btn"), "cancel"]),
onClick: handleCancel
}, vue.toDisplayString(vue.unref(t)("el.datepicker.cancel")), 3),
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ns).be("panel", "btn"), "confirm"]),
onClick: _cache[0] || (_cache[0] = ($event) => handleConfirm())
}, vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 3)
], 2)
], 2)) : vue.createCommentVNode("v-if", true)
]),
_: 1
}, 8, ["name"]);
};
}
});
var TimePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1S, [["__file", "panel-time-pick.vue"]]);
const panelTimeRangeProps = buildProps({
...timePanelSharedProps,
parsedValue: {
type: definePropType(Array)
}
});
const _hoisted_1$X = ["disabled"];
const _sfc_main$1R = /* @__PURE__ */ vue.defineComponent({
__name: "panel-time-range",
props: panelTimeRangeProps,
emits: ["pick", "select-range", "set-picker-option"],
setup(__props, { emit }) {
const props = __props;
const makeSelectRange = (start, end) => {
const result = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
};
const { t, lang } = useLocale();
const nsTime = useNamespace("time");
const nsPicker = useNamespace("picker");
const pickerBase = vue.inject("EP_PICKER_BASE");
const {
arrowControl,
disabledHours,
disabledMinutes,
disabledSeconds,
defaultValue
} = pickerBase.props;
const startTime = vue.computed(() => props.parsedValue[0]);
const endTime = vue.computed(() => props.parsedValue[1]);
const oldValue = useOldValue(props);
const handleCancel = () => {
emit("pick", oldValue.value, false);
};
const showSeconds = vue.computed(() => {
return props.format.includes("ss");
});
const amPmMode = vue.computed(() => {
if (props.format.includes("A"))
return "A";
if (props.format.includes("a"))
return "a";
return "";
});
const handleConfirm = (visible = false) => {
emit("pick", [startTime.value, endTime.value], visible);
};
const handleMinChange = (date) => {
handleChange(date.millisecond(0), endTime.value);
};
const handleMaxChange = (date) => {
handleChange(startTime.value, date.millisecond(0));
};
const isValidValue = (_date) => {
const parsedDate = _date.map((_) => dayjs(_).locale(lang.value));
const result = getRangeAvailableTime(parsedDate);
return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1]);
};
const handleChange = (start, end) => {
emit("pick", [start, end], true);
};
const btnConfirmDisabled = vue.computed(() => {
return startTime.value > endTime.value;
});
const selectionRange = vue.ref([0, 2]);
const setMinSelectionRange = (start, end) => {
emit("select-range", start, end, "min");
selectionRange.value = [start, end];
};
const offset = vue.computed(() => showSeconds.value ? 11 : 8);
const setMaxSelectionRange = (start, end) => {
emit("select-range", start, end, "max");
const _offset = vue.unref(offset);
selectionRange.value = [start + _offset, end + _offset];
};
const changeSelectionRange = (step) => {
const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11];
const mapping = ["hours", "minutes"].concat(showSeconds.value ? ["seconds"] : []);
const index = list.indexOf(selectionRange.value[0]);
const next = (index + step + list.length) % list.length;
const half = list.length / 2;
if (next < half) {
timePickerOptions["start_emitSelectRange"](mapping[next]);
} else {
timePickerOptions["end_emitSelectRange"](mapping[next - half]);
}
};
const handleKeydown = (event) => {
const code = event.code;
const { left, right, up, down } = EVENT_CODE;
if ([left, right].includes(code)) {
const step = code === left ? -1 : 1;
changeSelectionRange(step);
event.preventDefault();
return;
}
if ([up, down].includes(code)) {
const step = code === up ? -1 : 1;
const role = selectionRange.value[0] < offset.value ? "start" : "end";
timePickerOptions[`${role}_scrollDown`](step);
event.preventDefault();
return;
}
};
const disabledHours_ = (role, compare) => {
const defaultDisable = disabledHours ? disabledHours(role) : [];
const isStart = role === "start";
const compareDate = compare || (isStart ? endTime.value : startTime.value);
const compareHour = compareDate.hour();
const nextDisable = isStart ? makeSelectRange(compareHour + 1, 23) : makeSelectRange(0, compareHour - 1);
return union(defaultDisable, nextDisable);
};
const disabledMinutes_ = (hour, role, compare) => {
const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : [];
const isStart = role === "start";
const compareDate = compare || (isStart ? endTime.value : startTime.value);
const compareHour = compareDate.hour();
if (hour !== compareHour) {
return defaultDisable;
}
const compareMinute = compareDate.minute();
const nextDisable = isStart ? makeSelectRange(compareMinute + 1, 59) : makeSelectRange(0, compareMinute - 1);
return union(defaultDisable, nextDisable);
};
const disabledSeconds_ = (hour, minute, role, compare) => {
const defaultDisable = disabledSeconds ? disabledSeconds(hour, minute, role) : [];
const isStart = role === "start";
const compareDate = compare || (isStart ? endTime.value : startTime.value);
const compareHour = compareDate.hour();
const compareMinute = compareDate.minute();
if (hour !== compareHour || minute !== compareMinute) {
return defaultDisable;
}
const compareSecond = compareDate.second();
const nextDisable = isStart ? makeSelectRange(compareSecond + 1, 59) : makeSelectRange(0, compareSecond - 1);
return union(defaultDisable, nextDisable);
};
const getRangeAvailableTime = ([start, end]) => {
return [
getAvailableTime(start, "start", true, end),
getAvailableTime(end, "end", false, start)
];
};
const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = buildAvailableTimeSlotGetter(disabledHours_, disabledMinutes_, disabledSeconds_);
const {
timePickerOptions,
getAvailableTime,
onSetOption
} = useTimePanel({
getAvailableHours,
getAvailableMinutes,
getAvailableSeconds
});
const parseUserInput = (days) => {
if (!days)
return null;
if (isArray(days)) {
return days.map((d) => dayjs(d, props.format).locale(lang.value));
}
return dayjs(days, props.format).locale(lang.value);
};
const formatToString = (days) => {
if (!days)
return null;
if (isArray(days)) {
return days.map((d) => d.format(props.format));
}
return days.format(props.format);
};
const getDefaultValue = () => {
if (isArray(defaultValue)) {
return defaultValue.map((d) => dayjs(d).locale(lang.value));
}
const defaultDay = dayjs(defaultValue).locale(lang.value);
return [defaultDay, defaultDay.add(60, "m")];
};
emit("set-picker-option", ["formatToString", formatToString]);
emit("set-picker-option", ["parseUserInput", parseUserInput]);
emit("set-picker-option", ["isValidValue", isValidValue]);
emit("set-picker-option", ["handleKeydownInput", handleKeydown]);
emit("set-picker-option", ["getDefaultValue", getDefaultValue]);
emit("set-picker-option", ["getRangeAvailableTime", getRangeAvailableTime]);
return (_ctx, _cache) => {
return _ctx.actualVisible ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass([vue.unref(nsTime).b("range-picker"), vue.unref(nsPicker).b("panel")])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "content"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "cell"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "header"))
}, vue.toDisplayString(vue.unref(t)("el.datepicker.startTime")), 3),
vue.createElementVNode("div", {
class: vue.normalizeClass([
vue.unref(nsTime).be("range-picker", "body"),
vue.unref(nsTime).be("panel", "content"),
vue.unref(nsTime).is("arrow", vue.unref(arrowControl)),
{ "has-seconds": vue.unref(showSeconds) }
])
}, [
vue.createVNode(TimeSpinner, {
ref: "minSpinner",
role: "start",
"show-seconds": vue.unref(showSeconds),
"am-pm-mode": vue.unref(amPmMode),
"arrow-control": vue.unref(arrowControl),
"spinner-date": vue.unref(startTime),
"disabled-hours": disabledHours_,
"disabled-minutes": disabledMinutes_,
"disabled-seconds": disabledSeconds_,
onChange: handleMinChange,
onSetOption: vue.unref(onSetOption),
onSelectRange: setMinSelectionRange
}, null, 8, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "onSetOption"])
], 2)
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "cell"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("range-picker", "header"))
}, vue.toDisplayString(vue.unref(t)("el.datepicker.endTime")), 3),
vue.createElementVNode("div", {
class: vue.normalizeClass([
vue.unref(nsTime).be("range-picker", "body"),
vue.unref(nsTime).be("panel", "content"),
vue.unref(nsTime).is("arrow", vue.unref(arrowControl)),
{ "has-seconds": vue.unref(showSeconds) }
])
}, [
vue.createVNode(TimeSpinner, {
ref: "maxSpinner",
role: "end",
"show-seconds": vue.unref(showSeconds),
"am-pm-mode": vue.unref(amPmMode),
"arrow-control": vue.unref(arrowControl),
"spinner-date": vue.unref(endTime),
"disabled-hours": disabledHours_,
"disabled-minutes": disabledMinutes_,
"disabled-seconds": disabledSeconds_,
onChange: handleMaxChange,
onSetOption: vue.unref(onSetOption),
onSelectRange: setMaxSelectionRange
}, null, 8, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "onSetOption"])
], 2)
], 2)
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsTime).be("panel", "footer"))
}, [
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(nsTime).be("panel", "btn"), "cancel"]),
onClick: _cache[0] || (_cache[0] = ($event) => handleCancel())
}, vue.toDisplayString(vue.unref(t)("el.datepicker.cancel")), 3),
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(nsTime).be("panel", "btn"), "confirm"]),
disabled: vue.unref(btnConfirmDisabled),
onClick: _cache[1] || (_cache[1] = ($event) => handleConfirm())
}, vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 11, _hoisted_1$X)
], 2)
], 2)) : vue.createCommentVNode("v-if", true);
};
}
});
var TimeRangePanel = /* @__PURE__ */ _export_sfc(_sfc_main$1R, [["__file", "panel-time-range.vue"]]);
dayjs.extend(customParseFormat);
var TimePicker = vue.defineComponent({
name: "ElTimePicker",
install: null,
props: {
...timePickerDefaultProps,
isRange: {
type: Boolean,
default: false
}
},
emits: ["update:modelValue"],
setup(props, ctx) {
const commonPicker = vue.ref();
const [type, Panel] = props.isRange ? ["timerange", TimeRangePanel] : ["time", TimePickPanel];
const modelUpdater = (value) => ctx.emit("update:modelValue", value);
vue.provide("ElPopperOptions", props.popperOptions);
ctx.expose({
focus: (e) => {
var _a;
(_a = commonPicker.value) == null ? void 0 : _a.handleFocusInput(e);
},
blur: (e) => {
var _a;
(_a = commonPicker.value) == null ? void 0 : _a.handleBlurInput(e);
},
handleOpen: () => {
var _a;
(_a = commonPicker.value) == null ? void 0 : _a.handleOpen();
},
handleClose: () => {
var _a;
(_a = commonPicker.value) == null ? void 0 : _a.handleClose();
}
});
return () => {
var _a;
const format = (_a = props.format) != null ? _a : DEFAULT_FORMATS_TIME;
return vue.createVNode(CommonPicker, vue.mergeProps(props, {
"ref": commonPicker,
"type": type,
"format": format,
"onUpdate:modelValue": modelUpdater
}), {
default: (props2) => vue.createVNode(Panel, props2, null)
});
};
}
});
const _TimePicker = TimePicker;
_TimePicker.install = (app) => {
app.component(_TimePicker.name, _TimePicker);
};
const ElTimePicker = _TimePicker;
const getPrevMonthLastDays = (date, count) => {
const lastDay = date.subtract(1, "month").endOf("month").date();
return rangeArr(count).map((_, index) => lastDay - (count - index - 1));
};
const getMonthDays = (date) => {
const days = date.daysInMonth();
return rangeArr(days).map((_, index) => index + 1);
};
const toNestedArr = (days) => rangeArr(days.length / 7).map((index) => {
const start = index * 7;
return days.slice(start, start + 7);
});
const dateTableProps = buildProps({
selectedDay: {
type: definePropType(Object)
},
range: {
type: definePropType(Array)
},
date: {
type: definePropType(Object),
required: true
},
hideHeader: {
type: Boolean
}
});
const dateTableEmits = {
pick: (value) => isObject$1(value)
};
var localeData$1 = {exports: {}};
(function(module, exports) {
!function(n, e) {
module.exports = e() ;
}(commonjsGlobal, function() {
return function(n, e, t) {
var r = e.prototype, o = function(n2) {
return n2 && (n2.indexOf ? n2 : n2.s);
}, u = function(n2, e2, t2, r2, u2) {
var i2 = n2.name ? n2 : n2.$locale(), a2 = o(i2[e2]), s2 = o(i2[t2]), f = a2 || s2.map(function(n3) {
return n3.slice(0, r2);
});
if (!u2)
return f;
var d = i2.weekStart;
return f.map(function(n3, e3) {
return f[(e3 + (d || 0)) % 7];
});
}, i = function() {
return t.Ls[t.locale()];
}, a = function(n2, e2) {
return n2.formats[e2] || function(n3) {
return n3.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function(n4, e3, t2) {
return e3 || t2.slice(1);
});
}(n2.formats[e2.toUpperCase()]);
}, s = function() {
var n2 = this;
return { months: function(e2) {
return e2 ? e2.format("MMMM") : u(n2, "months");
}, monthsShort: function(e2) {
return e2 ? e2.format("MMM") : u(n2, "monthsShort", "months", 3);
}, firstDayOfWeek: function() {
return n2.$locale().weekStart || 0;
}, weekdays: function(e2) {
return e2 ? e2.format("dddd") : u(n2, "weekdays");
}, weekdaysMin: function(e2) {
return e2 ? e2.format("dd") : u(n2, "weekdaysMin", "weekdays", 2);
}, weekdaysShort: function(e2) {
return e2 ? e2.format("ddd") : u(n2, "weekdaysShort", "weekdays", 3);
}, longDateFormat: function(e2) {
return a(n2.$locale(), e2);
}, meridiem: this.$locale().meridiem, ordinal: this.$locale().ordinal };
};
r.localeData = function() {
return s.bind(this)();
}, t.localeData = function() {
var n2 = i();
return { firstDayOfWeek: function() {
return n2.weekStart || 0;
}, weekdays: function() {
return t.weekdays();
}, weekdaysShort: function() {
return t.weekdaysShort();
}, weekdaysMin: function() {
return t.weekdaysMin();
}, months: function() {
return t.months();
}, monthsShort: function() {
return t.monthsShort();
}, longDateFormat: function(e2) {
return a(n2, e2);
}, meridiem: n2.meridiem, ordinal: n2.ordinal };
}, t.months = function() {
return u(i(), "months");
}, t.monthsShort = function() {
return u(i(), "monthsShort", "months", 3);
}, t.weekdays = function(n2) {
return u(i(), "weekdays", null, null, n2);
}, t.weekdaysShort = function(n2) {
return u(i(), "weekdaysShort", "weekdays", 3, n2);
}, t.weekdaysMin = function(n2) {
return u(i(), "weekdaysMin", "weekdays", 2, n2);
};
};
});
})(localeData$1);
var localeData = localeData$1.exports;
const useDateTable = (props, emit) => {
dayjs.extend(localeData);
const firstDayOfWeek = dayjs.localeData().firstDayOfWeek();
const { t, lang } = useLocale();
const now = dayjs().locale(lang.value);
const isInRange = vue.computed(() => !!props.range && !!props.range.length);
const rows = vue.computed(() => {
let days = [];
if (isInRange.value) {
const [start, end] = props.range;
const currentMonthRange = rangeArr(end.date() - start.date() + 1).map((index) => ({
text: start.date() + index,
type: "current"
}));
let remaining = currentMonthRange.length % 7;
remaining = remaining === 0 ? 0 : 7 - remaining;
const nextMonthRange = rangeArr(remaining).map((_, index) => ({
text: index + 1,
type: "next"
}));
days = currentMonthRange.concat(nextMonthRange);
} else {
const firstDay = props.date.startOf("month").day();
const prevMonthDays = getPrevMonthLastDays(props.date, (firstDay - firstDayOfWeek + 7) % 7).map((day) => ({
text: day,
type: "prev"
}));
const currentMonthDays = getMonthDays(props.date).map((day) => ({
text: day,
type: "current"
}));
days = [...prevMonthDays, ...currentMonthDays];
const remaining = 7 - (days.length % 7 || 7);
const nextMonthDays = rangeArr(remaining).map((_, index) => ({
text: index + 1,
type: "next"
}));
days = days.concat(nextMonthDays);
}
return toNestedArr(days);
});
const weekDays = vue.computed(() => {
const start = firstDayOfWeek;
if (start === 0) {
return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`));
} else {
return WEEK_DAYS.slice(start).concat(WEEK_DAYS.slice(0, start)).map((_) => t(`el.datepicker.weeks.${_}`));
}
});
const getFormattedDate = (day, type) => {
switch (type) {
case "prev":
return props.date.startOf("month").subtract(1, "month").date(day);
case "next":
return props.date.startOf("month").add(1, "month").date(day);
case "current":
return props.date.date(day);
}
};
const handlePickDay = ({ text, type }) => {
const date = getFormattedDate(text, type);
emit("pick", date);
};
const getSlotData = ({ text, type }) => {
const day = getFormattedDate(text, type);
return {
isSelected: day.isSame(props.selectedDay),
type: `${type}-month`,
day: day.format("YYYY-MM-DD"),
date: day.toDate()
};
};
return {
now,
isInRange,
rows,
weekDays,
getFormattedDate,
handlePickDay,
getSlotData
};
};
const _hoisted_1$W = { key: 0 };
const _hoisted_2$B = ["onClick"];
const __default__$1b = vue.defineComponent({
name: "DateTable"
});
const _sfc_main$1Q = /* @__PURE__ */ vue.defineComponent({
...__default__$1b,
props: dateTableProps,
emits: dateTableEmits,
setup(__props, { expose, emit }) {
const props = __props;
const {
isInRange,
now,
rows,
weekDays,
getFormattedDate,
handlePickDay,
getSlotData
} = useDateTable(props, emit);
const nsTable = useNamespace("calendar-table");
const nsDay = useNamespace("calendar-day");
const getCellClass = ({ text, type }) => {
const classes = [type];
if (type === "current") {
const date = getFormattedDate(text, type);
if (date.isSame(props.selectedDay, "day")) {
classes.push(nsDay.is("selected"));
}
if (date.isSame(now, "day")) {
classes.push(nsDay.is("today"));
}
}
return classes;
};
expose({
getFormattedDate
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("table", {
class: vue.normalizeClass([vue.unref(nsTable).b(), vue.unref(nsTable).is("range", vue.unref(isInRange))]),
cellspacing: "0",
cellpadding: "0"
}, [
!_ctx.hideHeader ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1$W, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(weekDays), (day) => {
return vue.openBlock(), vue.createElementBlock("th", { key: day }, vue.toDisplayString(day), 1);
}), 128))
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("tbody", null, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rows), (row, index) => {
return vue.openBlock(), vue.createElementBlock("tr", {
key: index,
class: vue.normalizeClass({
[vue.unref(nsTable).e("row")]: true,
[vue.unref(nsTable).em("row", "hide-border")]: index === 0 && _ctx.hideHeader
})
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, key) => {
return vue.openBlock(), vue.createElementBlock("td", {
key,
class: vue.normalizeClass(getCellClass(cell)),
onClick: ($event) => vue.unref(handlePickDay)(cell)
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(nsDay).b())
}, [
vue.renderSlot(_ctx.$slots, "date-cell", {
data: vue.unref(getSlotData)(cell)
}, () => [
vue.createElementVNode("span", null, vue.toDisplayString(cell.text), 1)
])
], 2)
], 10, _hoisted_2$B);
}), 128))
], 2);
}), 128))
])
], 2);
};
}
});
var DateTable$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1Q, [["__file", "date-table.vue"]]);
const adjacentMonth = (start, end) => {
const firstMonthLastDay = start.endOf("month");
const lastMonthFirstDay = end.startOf("month");
const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, "week");
const lastMonthStartDay = isSameWeek ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
return [
[start, firstMonthLastDay],
[lastMonthStartDay.startOf("week"), end]
];
};
const threeConsecutiveMonth = (start, end) => {
const firstMonthLastDay = start.endOf("month");
const secondMonthFirstDay = start.add(1, "month").startOf("month");
const secondMonthStartDay = firstMonthLastDay.isSame(secondMonthFirstDay, "week") ? secondMonthFirstDay.add(1, "week") : secondMonthFirstDay;
const secondMonthLastDay = secondMonthStartDay.endOf("month");
const lastMonthFirstDay = end.startOf("month");
const lastMonthStartDay = secondMonthLastDay.isSame(lastMonthFirstDay, "week") ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
return [
[start, firstMonthLastDay],
[secondMonthStartDay.startOf("week"), secondMonthLastDay],
[lastMonthStartDay.startOf("week"), end]
];
};
const useCalendar = (props, emit, componentName) => {
const slots = vue.useSlots();
const { lang } = useLocale();
const selectedDay = vue.ref();
const now = dayjs().locale(lang.value);
const realSelectedDay = vue.computed({
get() {
if (!props.modelValue)
return selectedDay.value;
return date.value;
},
set(val) {
if (!val)
return;
selectedDay.value = val;
const result = val.toDate();
emit(INPUT_EVENT, result);
emit(UPDATE_MODEL_EVENT, result);
}
});
const validatedRange = vue.computed(() => {
if (!props.range)
return [];
const rangeArrDayjs = props.range.map((_) => dayjs(_).locale(lang.value));
const [startDayjs, endDayjs] = rangeArrDayjs;
if (startDayjs.isAfter(endDayjs)) {
return [];
}
if (startDayjs.isSame(endDayjs, "month")) {
return calculateValidatedDateRange(startDayjs, endDayjs);
} else {
if (startDayjs.add(1, "month").month() !== endDayjs.month()) {
return [];
}
return calculateValidatedDateRange(startDayjs, endDayjs);
}
});
const date = vue.computed(() => {
if (!props.modelValue) {
return realSelectedDay.value || (validatedRange.value.length ? validatedRange.value[0][0] : now);
} else {
return dayjs(props.modelValue).locale(lang.value);
}
});
const prevMonthDayjs = vue.computed(() => date.value.subtract(1, "month").date(1));
const nextMonthDayjs = vue.computed(() => date.value.add(1, "month").date(1));
const prevYearDayjs = vue.computed(() => date.value.subtract(1, "year").date(1));
const nextYearDayjs = vue.computed(() => date.value.add(1, "year").date(1));
const calculateValidatedDateRange = (startDayjs, endDayjs) => {
const firstDay = startDayjs.startOf("week");
const lastDay = endDayjs.endOf("week");
const firstMonth = firstDay.get("month");
const lastMonth = lastDay.get("month");
if (firstMonth === lastMonth) {
return [[firstDay, lastDay]];
} else if ((firstMonth + 1) % 12 === lastMonth) {
return adjacentMonth(firstDay, lastDay);
} else if (firstMonth + 2 === lastMonth || (firstMonth + 1) % 11 === lastMonth) {
return threeConsecutiveMonth(firstDay, lastDay);
} else {
return [];
}
};
const pickDay = (day) => {
realSelectedDay.value = day;
};
const selectDate = (type) => {
const dateMap = {
"prev-month": prevMonthDayjs.value,
"next-month": nextMonthDayjs.value,
"prev-year": prevYearDayjs.value,
"next-year": nextYearDayjs.value,
today: now
};
const day = dateMap[type];
if (!day.isSame(date.value, "day")) {
pickDay(day);
}
};
useDeprecated({
from: '"dateCell"',
replacement: '"date-cell"',
scope: "ElCalendar",
version: "2.3.0",
ref: "https://element-plus.org/en-US/component/calendar.html#slots",
type: "Slot"
}, vue.computed(() => !!slots.dateCell));
return {
calculateValidatedDateRange,
date,
realSelectedDay,
pickDay,
selectDate,
validatedRange
};
};
const isValidRange$1 = (range) => isArray(range) && range.length === 2 && range.every((item) => isDate(item));
const calendarProps = buildProps({
modelValue: {
type: Date
},
range: {
type: definePropType(Array),
validator: isValidRange$1
}
});
const calendarEmits = {
[UPDATE_MODEL_EVENT]: (value) => isDate(value),
[INPUT_EVENT]: (value) => isDate(value)
};
const COMPONENT_NAME$h = "ElCalendar";
const __default__$1a = vue.defineComponent({
name: COMPONENT_NAME$h
});
const _sfc_main$1P = /* @__PURE__ */ vue.defineComponent({
...__default__$1a,
props: calendarProps,
emits: calendarEmits,
setup(__props, { expose, emit }) {
const props = __props;
const ns = useNamespace("calendar");
const {
calculateValidatedDateRange,
date,
pickDay,
realSelectedDay,
selectDate,
validatedRange
} = useCalendar(props, emit);
const { t } = useLocale();
const i18nDate = vue.computed(() => {
const pickedMonth = `el.datepicker.month${date.value.format("M")}`;
return `${date.value.year()} ${t("el.datepicker.year")} ${t(pickedMonth)}`;
});
expose({
selectedDay: realSelectedDay,
pickDay,
selectDate,
calculateValidatedDateRange
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(ns).b())
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("header"))
}, [
vue.renderSlot(_ctx.$slots, "header", { date: vue.unref(i18nDate) }, () => [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("title"))
}, vue.toDisplayString(vue.unref(i18nDate)), 3),
vue.unref(validatedRange).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("button-group"))
}, [
vue.createVNode(vue.unref(ElButtonGroup$1), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(ElButton), {
size: "small",
onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(selectDate)("prev-month"))
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.prevMonth")), 1)
]),
_: 1
}),
vue.createVNode(vue.unref(ElButton), {
size: "small",
onClick: _cache[1] || (_cache[1] = ($event) => vue.unref(selectDate)("today"))
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.today")), 1)
]),
_: 1
}),
vue.createVNode(vue.unref(ElButton), {
size: "small",
onClick: _cache[2] || (_cache[2] = ($event) => vue.unref(selectDate)("next-month"))
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.nextMonth")), 1)
]),
_: 1
})
]),
_: 1
})
], 2)) : vue.createCommentVNode("v-if", true)
])
], 2),
vue.unref(validatedRange).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("body"))
}, [
vue.createVNode(DateTable$1, {
date: vue.unref(date),
"selected-day": vue.unref(realSelectedDay),
onPick: vue.unref(pickDay)
}, vue.createSlots({ _: 2 }, [
_ctx.$slots["date-cell"] || _ctx.$slots.dateCell ? {
name: "date-cell",
fn: vue.withCtx((data) => [
_ctx.$slots["date-cell"] ? vue.renderSlot(_ctx.$slots, "date-cell", vue.normalizeProps(vue.mergeProps({ key: 0 }, data))) : vue.renderSlot(_ctx.$slots, "dateCell", vue.normalizeProps(vue.mergeProps({ key: 1 }, data)))
])
} : void 0
]), 1032, ["date", "selected-day", "onPick"])
], 2)) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(vue.unref(ns).e("body"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(validatedRange), (range_, index) => {
return vue.openBlock(), vue.createBlock(DateTable$1, {
key: index,
date: range_[0],
"selected-day": vue.unref(realSelectedDay),
range: range_,
"hide-header": index !== 0,
onPick: vue.unref(pickDay)
}, vue.createSlots({ _: 2 }, [
_ctx.$slots["date-cell"] || _ctx.$slots.dateCell ? {
name: "date-cell",
fn: vue.withCtx((data) => [
_ctx.$slots["date-cell"] ? vue.renderSlot(_ctx.$slots, "date-cell", vue.normalizeProps(vue.mergeProps({ key: 0 }, data))) : vue.renderSlot(_ctx.$slots, "dateCell", vue.normalizeProps(vue.mergeProps({ key: 1 }, data)))
])
} : void 0
]), 1032, ["date", "selected-day", "range", "hide-header", "onPick"]);
}), 128))
], 2))
], 2);
};
}
});
var Calendar = /* @__PURE__ */ _export_sfc(_sfc_main$1P, [["__file", "calendar.vue"]]);
const ElCalendar = withInstall(Calendar);
const cardProps = buildProps({
header: {
type: String,
default: ""
},
bodyStyle: {
type: definePropType([String, Object, Array]),
default: ""
},
shadow: {
type: String,
values: ["always", "hover", "never"],
default: "always"
}
});
const __default__$19 = vue.defineComponent({
name: "ElCard"
});
const _sfc_main$1O = /* @__PURE__ */ vue.defineComponent({
...__default__$19,
props: cardProps,
setup(__props) {
const ns = useNamespace("card");
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).is(`${_ctx.shadow}-shadow`)])
}, [
_ctx.$slots.header || _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("header"))
}, [
vue.renderSlot(_ctx.$slots, "header", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.header), 1)
])
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("body")),
style: vue.normalizeStyle(_ctx.bodyStyle)
}, [
vue.renderSlot(_ctx.$slots, "default")
], 6)
], 2);
};
}
});
var Card = /* @__PURE__ */ _export_sfc(_sfc_main$1O, [["__file", "card.vue"]]);
const ElCard = withInstall(Card);
const carouselProps = buildProps({
initialIndex: {
type: Number,
default: 0
},
height: {
type: String,
default: ""
},
trigger: {
type: String,
values: ["hover", "click"],
default: "hover"
},
autoplay: {
type: Boolean,
default: true
},
interval: {
type: Number,
default: 3e3
},
indicatorPosition: {
type: String,
values: ["", "none", "outside"],
default: ""
},
indicator: {
type: Boolean,
default: true
},
arrow: {
type: String,
values: ["always", "hover", "never"],
default: "hover"
},
type: {
type: String,
values: ["", "card"],
default: ""
},
loop: {
type: Boolean,
default: true
},
direction: {
type: String,
values: ["horizontal", "vertical"],
default: "horizontal"
},
pauseOnHover: {
type: Boolean,
default: true
}
});
const carouselEmits = {
change: (current, prev) => [current, prev].every(isNumber)
};
const THROTTLE_TIME = 300;
const useCarousel = (props, emit, componentName) => {
const {
children: items,
addChild: addItem,
removeChild: removeItem
} = useOrderedChildren(vue.getCurrentInstance(), "ElCarouselItem");
const activeIndex = vue.ref(-1);
const timer = vue.ref(null);
const hover = vue.ref(false);
const root = vue.ref();
const arrowDisplay = vue.computed(() => props.arrow !== "never" && !vue.unref(isVertical));
const hasLabel = vue.computed(() => {
return items.value.some((item) => item.props.label.toString().length > 0);
});
const isCardType = vue.computed(() => props.type === "card");
const isVertical = vue.computed(() => props.direction === "vertical");
const throttledArrowClick = throttle((index) => {
setActiveItem(index);
}, THROTTLE_TIME, { trailing: true });
const throttledIndicatorHover = throttle((index) => {
handleIndicatorHover(index);
}, THROTTLE_TIME);
function pauseTimer() {
if (timer.value) {
clearInterval(timer.value);
timer.value = null;
}
}
function startTimer() {
if (props.interval <= 0 || !props.autoplay || timer.value)
return;
timer.value = setInterval(() => playSlides(), props.interval);
}
const playSlides = () => {
if (activeIndex.value < items.value.length - 1) {
activeIndex.value = activeIndex.value + 1;
} else if (props.loop) {
activeIndex.value = 0;
}
};
function setActiveItem(index) {
if (isString(index)) {
const filteredItems = items.value.filter((item) => item.props.name === index);
if (filteredItems.length > 0) {
index = items.value.indexOf(filteredItems[0]);
}
}
index = Number(index);
if (Number.isNaN(index) || index !== Math.floor(index)) {
return;
}
const itemCount = items.value.length;
const oldIndex = activeIndex.value;
if (index < 0) {
activeIndex.value = props.loop ? itemCount - 1 : 0;
} else if (index >= itemCount) {
activeIndex.value = props.loop ? 0 : itemCount - 1;
} else {
activeIndex.value = index;
}
if (oldIndex === activeIndex.value) {
resetItemPosition(oldIndex);
}
resetTimer();
}
function resetItemPosition(oldIndex) {
items.value.forEach((item, index) => {
item.translateItem(index, activeIndex.value, oldIndex);
});
}
function itemInStage(item, index) {
var _a, _b, _c, _d;
const _items = vue.unref(items);
const itemCount = _items.length;
if (itemCount === 0 || !item.states.inStage)
return false;
const nextItemIndex = index + 1;
const prevItemIndex = index - 1;
const lastItemIndex = itemCount - 1;
const isLastItemActive = _items[lastItemIndex].states.active;
const isFirstItemActive = _items[0].states.active;
const isNextItemActive = (_b = (_a = _items[nextItemIndex]) == null ? void 0 : _a.states) == null ? void 0 : _b.active;
const isPrevItemActive = (_d = (_c = _items[prevItemIndex]) == null ? void 0 : _c.states) == null ? void 0 : _d.active;
if (index === lastItemIndex && isFirstItemActive || isNextItemActive) {
return "left";
} else if (index === 0 && isLastItemActive || isPrevItemActive) {
return "right";
}
return false;
}
function handleMouseEnter() {
hover.value = true;
if (props.pauseOnHover) {
pauseTimer();
}
}
function handleMouseLeave() {
hover.value = false;
startTimer();
}
function handleButtonEnter(arrow) {
if (vue.unref(isVertical))
return;
items.value.forEach((item, index) => {
if (arrow === itemInStage(item, index)) {
item.states.hover = true;
}
});
}
function handleButtonLeave() {
if (vue.unref(isVertical))
return;
items.value.forEach((item) => {
item.states.hover = false;
});
}
function handleIndicatorClick(index) {
activeIndex.value = index;
}
function handleIndicatorHover(index) {
if (props.trigger === "hover" && index !== activeIndex.value) {
activeIndex.value = index;
}
}
function prev() {
setActiveItem(activeIndex.value - 1);
}
function next() {
setActiveItem(activeIndex.value + 1);
}
function resetTimer() {
pauseTimer();
startTimer();
}
vue.watch(() => activeIndex.value, (current, prev2) => {
resetItemPosition(prev2);
if (prev2 > -1) {
emit("change", current, prev2);
}
});
vue.watch(() => props.autoplay, (autoplay) => {
autoplay ? startTimer() : pauseTimer();
});
vue.watch(() => props.loop, () => {
setActiveItem(activeIndex.value);
});
vue.watch(() => props.interval, () => {
resetTimer();
});
vue.watch(() => items.value, () => {
if (items.value.length > 0)
setActiveItem(props.initialIndex);
});
const resizeObserver = vue.shallowRef();
vue.onMounted(() => {
resizeObserver.value = useResizeObserver(root.value, () => {
resetItemPosition();
});
startTimer();
});
vue.onBeforeUnmount(() => {
pauseTimer();
if (root.value && resizeObserver.value)
resizeObserver.value.stop();
});
vue.provide(carouselContextKey, {
root,
isCardType,
isVertical,
items,
loop: props.loop,
addItem,
removeItem,
setActiveItem
});
return {
root,
activeIndex,
arrowDisplay,
hasLabel,
hover,
isCardType,
items,
handleButtonEnter,
handleButtonLeave,
handleIndicatorClick,
handleMouseEnter,
handleMouseLeave,
setActiveItem,
prev,
next,
throttledArrowClick,
throttledIndicatorHover
};
};
const _hoisted_1$V = ["onMouseenter", "onClick"];
const _hoisted_2$A = { key: 0 };
const COMPONENT_NAME$g = "ElCarousel";
const __default__$18 = vue.defineComponent({
name: COMPONENT_NAME$g
});
const _sfc_main$1N = /* @__PURE__ */ vue.defineComponent({
...__default__$18,
props: carouselProps,
emits: carouselEmits,
setup(__props, { expose, emit }) {
const props = __props;
const {
root,
activeIndex,
arrowDisplay,
hasLabel,
hover,
isCardType,
items,
handleButtonEnter,
handleButtonLeave,
handleIndicatorClick,
handleMouseEnter,
handleMouseLeave,
setActiveItem,
prev,
next,
throttledArrowClick,
throttledIndicatorHover
} = useCarousel(props, emit);
const ns = useNamespace("carousel");
const carouselClasses = vue.computed(() => {
const classes = [ns.b(), ns.m(props.direction)];
if (vue.unref(isCardType)) {
classes.push(ns.m("card"));
}
return classes;
});
const indicatorsClasses = vue.computed(() => {
const classes = [ns.e("indicators"), ns.em("indicators", props.direction)];
if (vue.unref(hasLabel)) {
classes.push(ns.em("indicators", "labels"));
}
if (props.indicatorPosition === "outside" || vue.unref(isCardType)) {
classes.push(ns.em("indicators", "outside"));
}
return classes;
});
expose({
setActiveItem,
prev,
next
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "root",
ref: root,
class: vue.normalizeClass(vue.unref(carouselClasses)),
onMouseenter: _cache[6] || (_cache[6] = vue.withModifiers((...args) => vue.unref(handleMouseEnter) && vue.unref(handleMouseEnter)(...args), ["stop"])),
onMouseleave: _cache[7] || (_cache[7] = vue.withModifiers((...args) => vue.unref(handleMouseLeave) && vue.unref(handleMouseLeave)(...args), ["stop"]))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("container")),
style: vue.normalizeStyle({ height: _ctx.height })
}, [
vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, {
key: 0,
name: "carousel-arrow-left",
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "left")]),
onMouseenter: _cache[0] || (_cache[0] = ($event) => vue.unref(handleButtonEnter)("left")),
onMouseleave: _cache[1] || (_cache[1] = (...args) => vue.unref(handleButtonLeave) && vue.unref(handleButtonLeave)(...args)),
onClick: _cache[2] || (_cache[2] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) - 1), ["stop"]))
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_left_default))
]),
_: 1
})
], 34), [
[
vue.vShow,
(_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) > 0)
]
])
]),
_: 1
})) : vue.createCommentVNode("v-if", true),
vue.unref(arrowDisplay) ? (vue.openBlock(), vue.createBlock(vue.Transition, {
key: 1,
name: "carousel-arrow-right",
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ns).e("arrow"), vue.unref(ns).em("arrow", "right")]),
onMouseenter: _cache[3] || (_cache[3] = ($event) => vue.unref(handleButtonEnter)("right")),
onMouseleave: _cache[4] || (_cache[4] = (...args) => vue.unref(handleButtonLeave) && vue.unref(handleButtonLeave)(...args)),
onClick: _cache[5] || (_cache[5] = vue.withModifiers(($event) => vue.unref(throttledArrowClick)(vue.unref(activeIndex) + 1), ["stop"]))
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_right_default))
]),
_: 1
})
], 34), [
[
vue.vShow,
(_ctx.arrow === "always" || vue.unref(hover)) && (props.loop || vue.unref(activeIndex) < vue.unref(items).length - 1)
]
])
]),
_: 1
})) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default")
], 6),
_ctx.indicatorPosition !== "none" ? (vue.openBlock(), vue.createElementBlock("ul", {
key: 0,
class: vue.normalizeClass(vue.unref(indicatorsClasses))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (item, index) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: index,
class: vue.normalizeClass([
vue.unref(ns).e("indicator"),
vue.unref(ns).em("indicator", _ctx.direction),
vue.unref(ns).is("active", index === vue.unref(activeIndex))
]),
onMouseenter: ($event) => vue.unref(throttledIndicatorHover)(index),
onClick: vue.withModifiers(($event) => vue.unref(handleIndicatorClick)(index), ["stop"])
}, [
vue.createElementVNode("button", {
class: vue.normalizeClass(vue.unref(ns).e("button"))
}, [
vue.unref(hasLabel) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$A, vue.toDisplayString(item.props.label), 1)) : vue.createCommentVNode("v-if", true)
], 2)
], 42, _hoisted_1$V);
}), 128))
], 2)) : vue.createCommentVNode("v-if", true)
], 34);
};
}
});
var Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$1N, [["__file", "carousel.vue"]]);
const carouselItemProps = buildProps({
name: { type: String, default: "" },
label: {
type: [String, Number],
default: ""
}
});
const useCarouselItem = (props, componentName) => {
const carouselContext = vue.inject(carouselContextKey);
const instance = vue.getCurrentInstance();
const CARD_SCALE = 0.83;
const hover = vue.ref(false);
const translate = vue.ref(0);
const scale = vue.ref(1);
const active = vue.ref(false);
const ready = vue.ref(false);
const inStage = vue.ref(false);
const animating = vue.ref(false);
const { isCardType, isVertical } = carouselContext;
function processIndex(index, activeIndex, length) {
const lastItemIndex = length - 1;
const prevItemIndex = activeIndex - 1;
const nextItemIndex = activeIndex + 1;
const halfItemIndex = length / 2;
if (activeIndex === 0 && index === lastItemIndex) {
return -1;
} else if (activeIndex === lastItemIndex && index === 0) {
return length;
} else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
return length + 1;
} else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
return -2;
}
return index;
}
function calcCardTranslate(index, activeIndex) {
var _a;
const parentWidth = ((_a = carouselContext.root.value) == null ? void 0 : _a.offsetWidth) || 0;
if (inStage.value) {
return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
} else if (index < activeIndex) {
return -(1 + CARD_SCALE) * parentWidth / 4;
} else {
return (3 + CARD_SCALE) * parentWidth / 4;
}
}
function calcTranslate(index, activeIndex, isVertical2) {
const rootEl = carouselContext.root.value;
if (!rootEl)
return 0;
const distance = (isVertical2 ? rootEl.offsetHeight : rootEl.offsetWidth) || 0;
return distance * (index - activeIndex);
}
const translateItem = (index, activeIndex, oldIndex) => {
var _a;
const _isCardType = vue.unref(isCardType);
const carouselItemLength = (_a = carouselContext.items.value.length) != null ? _a : Number.NaN;
const isActive = index === activeIndex;
if (!_isCardType && !isUndefined(oldIndex)) {
animating.value = isActive || index === oldIndex;
}
if (!isActive && carouselItemLength > 2 && carouselContext.loop) {
index = processIndex(index, activeIndex, carouselItemLength);
}
const _isVertical = vue.unref(isVertical);
active.value = isActive;
if (_isCardType) {
inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
translate.value = calcCardTranslate(index, activeIndex);
scale.value = vue.unref(active) ? 1 : CARD_SCALE;
} else {
translate.value = calcTranslate(index, activeIndex, _isVertical);
}
ready.value = true;
};
function handleItemClick() {
if (carouselContext && vue.unref(isCardType)) {
const index = carouselContext.items.value.findIndex(({ uid }) => uid === instance.uid);
carouselContext.setActiveItem(index);
}
}
vue.onMounted(() => {
carouselContext.addItem({
props,
states: vue.reactive({
hover,
translate,
scale,
active,
ready,
inStage,
animating
}),
uid: instance.uid,
translateItem
});
});
vue.onUnmounted(() => {
carouselContext.removeItem(instance.uid);
});
return {
active,
animating,
hover,
inStage,
isVertical,
translate,
isCardType,
scale,
ready,
handleItemClick
};
};
const __default__$17 = vue.defineComponent({
name: "ElCarouselItem"
});
const _sfc_main$1M = /* @__PURE__ */ vue.defineComponent({
...__default__$17,
props: carouselItemProps,
setup(__props) {
const props = __props;
const ns = useNamespace("carousel");
const {
active,
animating,
hover,
inStage,
isVertical,
translate,
isCardType,
scale,
ready,
handleItemClick
} = useCarouselItem(props);
const itemStyle = vue.computed(() => {
const translateType = `translate${vue.unref(isVertical) ? "Y" : "X"}`;
const _translate = `${translateType}(${vue.unref(translate)}px)`;
const _scale = `scale(${vue.unref(scale)})`;
const transform = [_translate, _scale].join(" ");
return {
transform
};
});
return (_ctx, _cache) => {
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
vue.unref(ns).e("item"),
vue.unref(ns).is("active", vue.unref(active)),
vue.unref(ns).is("in-stage", vue.unref(inStage)),
vue.unref(ns).is("hover", vue.unref(hover)),
vue.unref(ns).is("animating", vue.unref(animating)),
{ [vue.unref(ns).em("item", "card")]: vue.unref(isCardType) }
]),
style: vue.normalizeStyle(vue.unref(itemStyle)),
onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleItemClick) && vue.unref(handleItemClick)(...args))
}, [
vue.unref(isCardType) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("mask"))
}, null, 2)), [
[vue.vShow, !vue.unref(active)]
]) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default")
], 6)), [
[vue.vShow, vue.unref(ready)]
]);
};
}
});
var CarouselItem = /* @__PURE__ */ _export_sfc(_sfc_main$1M, [["__file", "carousel-item.vue"]]);
const ElCarousel = withInstall(Carousel, {
CarouselItem
});
const ElCarouselItem = withNoopInstall(CarouselItem);
const checkboxProps = {
modelValue: {
type: [Number, String, Boolean],
default: void 0
},
label: {
type: [String, Boolean, Number, Object]
},
indeterminate: Boolean,
disabled: Boolean,
checked: Boolean,
name: {
type: String,
default: void 0
},
trueLabel: {
type: [String, Number],
default: void 0
},
falseLabel: {
type: [String, Number],
default: void 0
},
id: {
type: String,
default: void 0
},
controls: {
type: String,
default: void 0
},
border: Boolean,
size: useSizeProp,
tabindex: [String, Number],
validateEvent: {
type: Boolean,
default: true
}
};
const checkboxEmits = {
[UPDATE_MODEL_EVENT]: (val) => isString(val) || isNumber(val) || isBoolean(val),
change: (val) => isString(val) || isNumber(val) || isBoolean(val)
};
const useCheckboxDisabled = ({
model,
isChecked
}) => {
const checkboxGroup = vue.inject(checkboxGroupContextKey, void 0);
const isLimitDisabled = vue.computed(() => {
var _a, _b;
const max = (_a = checkboxGroup == null ? void 0 : checkboxGroup.max) == null ? void 0 : _a.value;
const min = (_b = checkboxGroup == null ? void 0 : checkboxGroup.min) == null ? void 0 : _b.value;
return !isUndefined(max) && model.value.length >= max && !isChecked.value || !isUndefined(min) && model.value.length <= min && isChecked.value;
});
const isDisabled = useDisabled(vue.computed(() => (checkboxGroup == null ? void 0 : checkboxGroup.disabled.value) || isLimitDisabled.value));
return {
isDisabled,
isLimitDisabled
};
};
const useCheckboxEvent = (props, {
model,
isLimitExceeded,
hasOwnLabel,
isDisabled,
isLabeledByFormItem
}) => {
const checkboxGroup = vue.inject(checkboxGroupContextKey, void 0);
const { formItem } = useFormItem();
const { emit } = vue.getCurrentInstance();
function getLabeledValue(value) {
var _a, _b;
return value === props.trueLabel || value === true ? (_a = props.trueLabel) != null ? _a : true : (_b = props.falseLabel) != null ? _b : false;
}
function emitChangeEvent(checked, e) {
emit("change", getLabeledValue(checked), e);
}
function handleChange(e) {
if (isLimitExceeded.value)
return;
const target = e.target;
emit("change", getLabeledValue(target.checked), e);
}
async function onClickRoot(e) {
if (isLimitExceeded.value)
return;
if (!hasOwnLabel.value && !isDisabled.value && isLabeledByFormItem.value) {
const eventTargets = e.composedPath();
const hasLabel = eventTargets.some((item) => item.tagName === "LABEL");
if (!hasLabel) {
model.value = getLabeledValue([false, props.falseLabel].includes(model.value));
await vue.nextTick();
emitChangeEvent(model.value, e);
}
}
}
const validateEvent = vue.computed(() => (checkboxGroup == null ? void 0 : checkboxGroup.validateEvent) || props.validateEvent);
vue.watch(() => props.modelValue, () => {
if (validateEvent.value) {
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
}
});
return {
handleChange,
onClickRoot
};
};
const useCheckboxModel = (props) => {
const selfModel = vue.ref(false);
const { emit } = vue.getCurrentInstance();
const checkboxGroup = vue.inject(checkboxGroupContextKey, void 0);
const isGroup = vue.computed(() => isUndefined(checkboxGroup) === false);
const isLimitExceeded = vue.ref(false);
const model = vue.computed({
get() {
var _a, _b;
return isGroup.value ? (_a = checkboxGroup == null ? void 0 : checkboxGroup.modelValue) == null ? void 0 : _a.value : (_b = props.modelValue) != null ? _b : selfModel.value;
},
set(val) {
var _a, _b;
if (isGroup.value && isArray(val)) {
isLimitExceeded.value = ((_a = checkboxGroup == null ? void 0 : checkboxGroup.max) == null ? void 0 : _a.value) !== void 0 && val.length > (checkboxGroup == null ? void 0 : checkboxGroup.max.value);
isLimitExceeded.value === false && ((_b = checkboxGroup == null ? void 0 : checkboxGroup.changeEvent) == null ? void 0 : _b.call(checkboxGroup, val));
} else {
emit(UPDATE_MODEL_EVENT, val);
selfModel.value = val;
}
}
});
return {
model,
isGroup,
isLimitExceeded
};
};
const useCheckboxStatus = (props, slots, { model }) => {
const checkboxGroup = vue.inject(checkboxGroupContextKey, void 0);
const isFocused = vue.ref(false);
const isChecked = vue.computed(() => {
const value = model.value;
if (isBoolean(value)) {
return value;
} else if (isArray(value)) {
if (isObject$1(props.label)) {
return value.map(vue.toRaw).some((o) => isEqual$1(o, props.label));
} else {
return value.map(vue.toRaw).includes(props.label);
}
} else if (value !== null && value !== void 0) {
return value === props.trueLabel;
} else {
return !!value;
}
});
const checkboxButtonSize = useSize(vue.computed(() => {
var _a;
return (_a = checkboxGroup == null ? void 0 : checkboxGroup.size) == null ? void 0 : _a.value;
}), {
prop: true
});
const checkboxSize = useSize(vue.computed(() => {
var _a;
return (_a = checkboxGroup == null ? void 0 : checkboxGroup.size) == null ? void 0 : _a.value;
}));
const hasOwnLabel = vue.computed(() => {
return !!(slots.default || props.label);
});
return {
checkboxButtonSize,
isChecked,
isFocused,
checkboxSize,
hasOwnLabel
};
};
const setStoreValue = (props, { model }) => {
function addToStore() {
if (isArray(model.value) && !model.value.includes(props.label)) {
model.value.push(props.label);
} else {
model.value = props.trueLabel || true;
}
}
props.checked && addToStore();
};
const useCheckbox = (props, slots) => {
const { formItem: elFormItem } = useFormItem();
const { model, isGroup, isLimitExceeded } = useCheckboxModel(props);
const {
isFocused,
isChecked,
checkboxButtonSize,
checkboxSize,
hasOwnLabel
} = useCheckboxStatus(props, slots, { model });
const { isDisabled } = useCheckboxDisabled({ model, isChecked });
const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
formItemContext: elFormItem,
disableIdGeneration: hasOwnLabel,
disableIdManagement: isGroup
});
const { handleChange, onClickRoot } = useCheckboxEvent(props, {
model,
isLimitExceeded,
hasOwnLabel,
isDisabled,
isLabeledByFormItem
});
setStoreValue(props, { model });
return {
inputId,
isLabeledByFormItem,
isChecked,
isDisabled,
isFocused,
checkboxButtonSize,
checkboxSize,
hasOwnLabel,
model,
handleChange,
onClickRoot
};
};
const _hoisted_1$U = ["tabindex", "role", "aria-checked"];
const _hoisted_2$z = ["id", "aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"];
const _hoisted_3$i = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"];
const __default__$16 = vue.defineComponent({
name: "ElCheckbox"
});
const _sfc_main$1L = /* @__PURE__ */ vue.defineComponent({
...__default__$16,
props: checkboxProps,
emits: checkboxEmits,
setup(__props) {
const props = __props;
const slots = vue.useSlots();
const {
inputId,
isLabeledByFormItem,
isChecked,
isDisabled,
isFocused,
checkboxSize,
hasOwnLabel,
model,
handleChange,
onClickRoot
} = useCheckbox(props, slots);
const ns = useNamespace("checkbox");
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(!vue.unref(hasOwnLabel) && vue.unref(isLabeledByFormItem) ? "span" : "label"), {
class: vue.normalizeClass([
vue.unref(ns).b(),
vue.unref(ns).m(vue.unref(checkboxSize)),
vue.unref(ns).is("disabled", vue.unref(isDisabled)),
vue.unref(ns).is("bordered", _ctx.border),
vue.unref(ns).is("checked", vue.unref(isChecked))
]),
"aria-controls": _ctx.indeterminate ? _ctx.controls : null,
onClick: vue.unref(onClickRoot)
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
class: vue.normalizeClass([
vue.unref(ns).e("input"),
vue.unref(ns).is("disabled", vue.unref(isDisabled)),
vue.unref(ns).is("checked", vue.unref(isChecked)),
vue.unref(ns).is("indeterminate", _ctx.indeterminate),
vue.unref(ns).is("focus", vue.unref(isFocused))
]),
tabindex: _ctx.indeterminate ? 0 : void 0,
role: _ctx.indeterminate ? "checkbox" : void 0,
"aria-checked": _ctx.indeterminate ? "mixed" : void 0
}, [
_ctx.trueLabel || _ctx.falseLabel ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
key: 0,
id: vue.unref(inputId),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(model) ? model.value = $event : null),
class: vue.normalizeClass(vue.unref(ns).e("original")),
type: "checkbox",
"aria-hidden": _ctx.indeterminate ? "true" : "false",
name: _ctx.name,
tabindex: _ctx.tabindex,
disabled: vue.unref(isDisabled),
"true-value": _ctx.trueLabel,
"false-value": _ctx.falseLabel,
onChange: _cache[1] || (_cache[1] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)),
onFocus: _cache[2] || (_cache[2] = ($event) => isFocused.value = true),
onBlur: _cache[3] || (_cache[3] = ($event) => isFocused.value = false)
}, null, 42, _hoisted_2$z)), [
[vue.vModelCheckbox, vue.unref(model)]
]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
key: 1,
id: vue.unref(inputId),
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(model) ? model.value = $event : null),
class: vue.normalizeClass(vue.unref(ns).e("original")),
type: "checkbox",
"aria-hidden": _ctx.indeterminate ? "true" : "false",
disabled: vue.unref(isDisabled),
value: _ctx.label,
name: _ctx.name,
tabindex: _ctx.tabindex,
onChange: _cache[5] || (_cache[5] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)),
onFocus: _cache[6] || (_cache[6] = ($event) => isFocused.value = true),
onBlur: _cache[7] || (_cache[7] = ($event) => isFocused.value = false)
}, null, 42, _hoisted_3$i)), [
[vue.vModelCheckbox, vue.unref(model)]
]),
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(ns).e("inner"))
}, null, 2)
], 10, _hoisted_1$U),
vue.unref(hasOwnLabel) ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("label"))
}, [
vue.renderSlot(_ctx.$slots, "default"),
!_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
], 64)) : vue.createCommentVNode("v-if", true)
], 2)) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["class", "aria-controls", "onClick"]);
};
}
});
var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$1L, [["__file", "checkbox.vue"]]);
const _hoisted_1$T = ["name", "tabindex", "disabled", "true-value", "false-value"];
const _hoisted_2$y = ["name", "tabindex", "disabled", "value"];
const __default__$15 = vue.defineComponent({
name: "ElCheckboxButton"
});
const _sfc_main$1K = /* @__PURE__ */ vue.defineComponent({
...__default__$15,
props: checkboxProps,
emits: checkboxEmits,
setup(__props) {
const props = __props;
const slots = vue.useSlots();
const {
isFocused,
isChecked,
isDisabled,
checkboxButtonSize,
model,
handleChange
} = useCheckbox(props, slots);
const checkboxGroup = vue.inject(checkboxGroupContextKey, void 0);
const ns = useNamespace("checkbox");
const activeStyle = vue.computed(() => {
var _a, _b, _c, _d;
const fillValue = (_b = (_a = checkboxGroup == null ? void 0 : checkboxGroup.fill) == null ? void 0 : _a.value) != null ? _b : "";
return {
backgroundColor: fillValue,
borderColor: fillValue,
color: (_d = (_c = checkboxGroup == null ? void 0 : checkboxGroup.textColor) == null ? void 0 : _c.value) != null ? _d : "",
boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : void 0
};
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("label", {
class: vue.normalizeClass([
vue.unref(ns).b("button"),
vue.unref(ns).bm("button", vue.unref(checkboxButtonSize)),
vue.unref(ns).is("disabled", vue.unref(isDisabled)),
vue.unref(ns).is("checked", vue.unref(isChecked)),
vue.unref(ns).is("focus", vue.unref(isFocused))
])
}, [
_ctx.trueLabel || _ctx.falseLabel ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
key: 0,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(model) ? model.value = $event : null),
class: vue.normalizeClass(vue.unref(ns).be("button", "original")),
type: "checkbox",
name: _ctx.name,
tabindex: _ctx.tabindex,
disabled: vue.unref(isDisabled),
"true-value": _ctx.trueLabel,
"false-value": _ctx.falseLabel,
onChange: _cache[1] || (_cache[1] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)),
onFocus: _cache[2] || (_cache[2] = ($event) => isFocused.value = true),
onBlur: _cache[3] || (_cache[3] = ($event) => isFocused.value = false)
}, null, 42, _hoisted_1$T)), [
[vue.vModelCheckbox, vue.unref(model)]
]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
key: 1,
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(model) ? model.value = $event : null),
class: vue.normalizeClass(vue.unref(ns).be("button", "original")),
type: "checkbox",
name: _ctx.name,
tabindex: _ctx.tabindex,
disabled: vue.unref(isDisabled),
value: _ctx.label,
onChange: _cache[5] || (_cache[5] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)),
onFocus: _cache[6] || (_cache[6] = ($event) => isFocused.value = true),
onBlur: _cache[7] || (_cache[7] = ($event) => isFocused.value = false)
}, null, 42, _hoisted_2$y)), [
[vue.vModelCheckbox, vue.unref(model)]
]),
_ctx.$slots.default || _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", {
key: 2,
class: vue.normalizeClass(vue.unref(ns).be("button", "inner")),
style: vue.normalizeStyle(vue.unref(isChecked) ? vue.unref(activeStyle) : void 0)
}, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
])
], 6)) : vue.createCommentVNode("v-if", true)
], 2);
};
}
});
var CheckboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$1K, [["__file", "checkbox-button.vue"]]);
const checkboxGroupProps = buildProps({
modelValue: {
type: definePropType(Array),
default: () => []
},
disabled: Boolean,
min: Number,
max: Number,
size: useSizeProp,
label: String,
fill: String,
textColor: String,
tag: {
type: String,
default: "div"
},
validateEvent: {
type: Boolean,
default: true
}
});
const checkboxGroupEmits = {
[UPDATE_MODEL_EVENT]: (val) => isArray(val),
change: (val) => isArray(val)
};
const __default__$14 = vue.defineComponent({
name: "ElCheckboxGroup"
});
const _sfc_main$1J = /* @__PURE__ */ vue.defineComponent({
...__default__$14,
props: checkboxGroupProps,
emits: checkboxGroupEmits,
setup(__props, { emit }) {
const props = __props;
const ns = useNamespace("checkbox");
const { formItem } = useFormItem();
const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {
formItemContext: formItem
});
const changeEvent = async (value) => {
emit(UPDATE_MODEL_EVENT, value);
await vue.nextTick();
emit("change", value);
};
const modelValue = vue.computed({
get() {
return props.modelValue;
},
set(val) {
changeEvent(val);
}
});
vue.provide(checkboxGroupContextKey, {
...pick(vue.toRefs(props), [
"size",
"min",
"max",
"disabled",
"validateEvent",
"fill",
"textColor"
]),
modelValue,
changeEvent
});
vue.watch(() => props.modelValue, () => {
if (props.validateEvent) {
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
}
});
return (_ctx, _cache) => {
var _a;
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
id: vue.unref(groupId),
class: vue.normalizeClass(vue.unref(ns).b("group")),
role: "group",
"aria-label": !vue.unref(isLabeledByFormItem) ? _ctx.label || "checkbox-group" : void 0,
"aria-labelledby": vue.unref(isLabeledByFormItem) ? (_a = vue.unref(formItem)) == null ? void 0 : _a.labelId : void 0
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["id", "class", "aria-label", "aria-labelledby"]);
};
}
});
var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["__file", "checkbox-group.vue"]]);
const ElCheckbox = withInstall(Checkbox, {
CheckboxButton,
CheckboxGroup
});
const ElCheckboxButton = withNoopInstall(CheckboxButton);
const ElCheckboxGroup$1 = withNoopInstall(CheckboxGroup);
const radioPropsBase = buildProps({
size: useSizeProp,
disabled: Boolean,
label: {
type: [String, Number, Boolean],
default: ""
}
});
const radioProps = buildProps({
...radioPropsBase,
modelValue: {
type: [String, Number, Boolean],
default: ""
},
name: {
type: String,
default: ""
},
border: Boolean
});
const radioEmits = {
[UPDATE_MODEL_EVENT]: (val) => isString(val) || isNumber(val) || isBoolean(val),
[CHANGE_EVENT]: (val) => isString(val) || isNumber(val) || isBoolean(val)
};
const useRadio = (props, emit) => {
const radioRef = vue.ref();
const radioGroup = vue.inject(radioGroupKey, void 0);
const isGroup = vue.computed(() => !!radioGroup);
const modelValue = vue.computed({
get() {
return isGroup.value ? radioGroup.modelValue : props.modelValue;
},
set(val) {
if (isGroup.value) {
radioGroup.changeEvent(val);
} else {
emit && emit(UPDATE_MODEL_EVENT, val);
}
radioRef.value.checked = props.modelValue === props.label;
}
});
const size = useSize(vue.computed(() => radioGroup == null ? void 0 : radioGroup.size));
const disabled = useDisabled(vue.computed(() => radioGroup == null ? void 0 : radioGroup.disabled));
const focus = vue.ref(false);
const tabIndex = vue.computed(() => {
return disabled.value || isGroup.value && modelValue.value !== props.label ? -1 : 0;
});
return {
radioRef,
isGroup,
radioGroup,
focus,
size,
disabled,
tabIndex,
modelValue
};
};
const _hoisted_1$S = ["value", "name", "disabled"];
const __default__$13 = vue.defineComponent({
name: "ElRadio"
});
const _sfc_main$1I = /* @__PURE__ */ vue.defineComponent({
...__default__$13,
props: radioProps,
emits: radioEmits,
setup(__props, { emit }) {
const props = __props;
const ns = useNamespace("radio");
const { radioRef, radioGroup, focus, size, disabled, modelValue } = useRadio(props, emit);
function handleChange() {
vue.nextTick(() => emit("change", modelValue.value));
}
return (_ctx, _cache) => {
var _a;
return vue.openBlock(), vue.createElementBlock("label", {
class: vue.normalizeClass([
vue.unref(ns).b(),
vue.unref(ns).is("disabled", vue.unref(disabled)),
vue.unref(ns).is("focus", vue.unref(focus)),
vue.unref(ns).is("bordered", _ctx.border),
vue.unref(ns).is("checked", vue.unref(modelValue) === _ctx.label),
vue.unref(ns).m(vue.unref(size))
])
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass([
vue.unref(ns).e("input"),
vue.unref(ns).is("disabled", vue.unref(disabled)),
vue.unref(ns).is("checked", vue.unref(modelValue) === _ctx.label)
])
}, [
vue.withDirectives(vue.createElementVNode("input", {
ref_key: "radioRef",
ref: radioRef,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(modelValue) ? modelValue.value = $event : null),
class: vue.normalizeClass(vue.unref(ns).e("original")),
value: _ctx.label,
name: _ctx.name || ((_a = vue.unref(radioGroup)) == null ? void 0 : _a.name),
disabled: vue.unref(disabled),
type: "radio",
onFocus: _cache[1] || (_cache[1] = ($event) => focus.value = true),
onBlur: _cache[2] || (_cache[2] = ($event) => focus.value = false),
onChange: handleChange
}, null, 42, _hoisted_1$S), [
[vue.vModelRadio, vue.unref(modelValue)]
]),
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(ns).e("inner"))
}, null, 2)
], 2),
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(ns).e("label")),
onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
}, ["stop"]))
}, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
])
], 34)
], 2);
};
}
});
var Radio = /* @__PURE__ */ _export_sfc(_sfc_main$1I, [["__file", "radio.vue"]]);
const radioButtonProps = buildProps({
...radioPropsBase,
name: {
type: String,
default: ""
}
});
const _hoisted_1$R = ["value", "name", "disabled"];
const __default__$12 = vue.defineComponent({
name: "ElRadioButton"
});
const _sfc_main$1H = /* @__PURE__ */ vue.defineComponent({
...__default__$12,
props: radioButtonProps,
setup(__props) {
const props = __props;
const ns = useNamespace("radio");
const { radioRef, focus, size, disabled, modelValue, radioGroup } = useRadio(props);
const activeStyle = vue.computed(() => {
return {
backgroundColor: (radioGroup == null ? void 0 : radioGroup.fill) || "",
borderColor: (radioGroup == null ? void 0 : radioGroup.fill) || "",
boxShadow: (radioGroup == null ? void 0 : radioGroup.fill) ? `-1px 0 0 0 ${radioGroup.fill}` : "",
color: (radioGroup == null ? void 0 : radioGroup.textColor) || ""
};
});
return (_ctx, _cache) => {
var _a;
return vue.openBlock(), vue.createElementBlock("label", {
class: vue.normalizeClass([
vue.unref(ns).b("button"),
vue.unref(ns).is("active", vue.unref(modelValue) === _ctx.label),
vue.unref(ns).is("disabled", vue.unref(disabled)),
vue.unref(ns).is("focus", vue.unref(focus)),
vue.unref(ns).bm("button", vue.unref(size))
])
}, [
vue.withDirectives(vue.createElementVNode("input", {
ref_key: "radioRef",
ref: radioRef,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(modelValue) ? modelValue.value = $event : null),
class: vue.normalizeClass(vue.unref(ns).be("button", "original-radio")),
value: _ctx.label,
type: "radio",
name: _ctx.name || ((_a = vue.unref(radioGroup)) == null ? void 0 : _a.name),
disabled: vue.unref(disabled),
onFocus: _cache[1] || (_cache[1] = ($event) => focus.value = true),
onBlur: _cache[2] || (_cache[2] = ($event) => focus.value = false)
}, null, 42, _hoisted_1$R), [
[vue.vModelRadio, vue.unref(modelValue)]
]),
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(ns).be("button", "inner")),
style: vue.normalizeStyle(vue.unref(modelValue) === _ctx.label ? vue.unref(activeStyle) : {}),
onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
}, ["stop"]))
}, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
])
], 38)
], 2);
};
}
});
var RadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["__file", "radio-button.vue"]]);
const radioGroupProps = buildProps({
id: {
type: String,
default: void 0
},
size: useSizeProp,
disabled: Boolean,
modelValue: {
type: [String, Number, Boolean],
default: ""
},
fill: {
type: String,
default: ""
},
label: {
type: String,
default: void 0
},
textColor: {
type: String,
default: ""
},
name: {
type: String,
default: void 0
},
validateEvent: {
type: Boolean,
default: true
}
});
const radioGroupEmits = radioEmits;
const _hoisted_1$Q = ["id", "aria-label", "aria-labelledby"];
const __default__$11 = vue.defineComponent({
name: "ElRadioGroup"
});
const _sfc_main$1G = /* @__PURE__ */ vue.defineComponent({
...__default__$11,
props: radioGroupProps,
emits: radioGroupEmits,
setup(__props, { emit }) {
const props = __props;
const ns = useNamespace("radio");
const radioId = useId();
const radioGroupRef = vue.ref();
const { formItem } = useFormItem();
const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {
formItemContext: formItem
});
const changeEvent = (value) => {
emit(UPDATE_MODEL_EVENT, value);
vue.nextTick(() => emit("change", value));
};
vue.onMounted(() => {
const radios = radioGroupRef.value.querySelectorAll("[type=radio]");
const firstLabel = radios[0];
if (!Array.from(radios).some((radio) => radio.checked) && firstLabel) {
firstLabel.tabIndex = 0;
}
});
const name = vue.computed(() => {
return props.name || radioId.value;
});
vue.provide(radioGroupKey, vue.reactive({
...vue.toRefs(props),
changeEvent,
name
}));
vue.watch(() => props.modelValue, () => {
if (props.validateEvent) {
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
id: vue.unref(groupId),
ref_key: "radioGroupRef",
ref: radioGroupRef,
class: vue.normalizeClass(vue.unref(ns).b("group")),
role: "radiogroup",
"aria-label": !vue.unref(isLabeledByFormItem) ? _ctx.label || "radio-group" : void 0,
"aria-labelledby": vue.unref(isLabeledByFormItem) ? vue.unref(formItem).labelId : void 0
}, [
vue.renderSlot(_ctx.$slots, "default")
], 10, _hoisted_1$Q);
};
}
});
var RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__file", "radio-group.vue"]]);
const ElRadio = withInstall(Radio, {
RadioButton,
RadioGroup
});
const ElRadioGroup = withNoopInstall(RadioGroup);
const ElRadioButton = withNoopInstall(RadioButton);
var NodeContent$1 = vue.defineComponent({
name: "NodeContent",
setup() {
const ns = useNamespace("cascader-node");
return {
ns
};
},
render() {
const { ns } = this;
const { node, panel } = this.$parent;
const { data, label } = node;
const { renderLabelFn } = panel;
return vue.h("span", { class: ns.e("label") }, renderLabelFn ? renderLabelFn({ node, data }) : label);
}
});
const CASCADER_PANEL_INJECTION_KEY = Symbol();
const _sfc_main$1F = vue.defineComponent({
name: "ElCascaderNode",
components: {
ElCheckbox,
ElRadio,
NodeContent: NodeContent$1,
ElIcon,
Check: check_default,
Loading: loading_default,
ArrowRight: arrow_right_default
},
props: {
node: {
type: Object,
required: true
},
menuId: String
},
emits: ["expand"],
setup(props, { emit }) {
const panel = vue.inject(CASCADER_PANEL_INJECTION_KEY);
const ns = useNamespace("cascader-node");
const isHoverMenu = vue.computed(() => panel.isHoverMenu);
const multiple = vue.computed(() => panel.config.multiple);
const checkStrictly = vue.computed(() => panel.config.checkStrictly);
const checkedNodeId = vue.computed(() => {
var _a;
return (_a = panel.checkedNodes[0]) == null ? void 0 : _a.uid;
});
const isDisabled = vue.computed(() => props.node.isDisabled);
const isLeaf = vue.computed(() => props.node.isLeaf);
const expandable = vue.computed(() => checkStrictly.value && !isLeaf.value || !isDisabled.value);
const inExpandingPath = vue.computed(() => isInPath(panel.expandingNode));
const inCheckedPath = vue.computed(() => checkStrictly.value && panel.checkedNodes.some(isInPath));
const isInPath = (node) => {
var _a;
const { level, uid } = props.node;
return ((_a = node == null ? void 0 : node.pathNodes[level - 1]) == null ? void 0 : _a.uid) === uid;
};
const doExpand = () => {
if (inExpandingPath.value)
return;
panel.expandNode(props.node);
};
const doCheck = (checked) => {
const { node } = props;
if (checked === node.checked)
return;
panel.handleCheckChange(node, checked);
};
const doLoad = () => {
panel.lazyLoad(props.node, () => {
if (!isLeaf.value)
doExpand();
});
};
const handleHoverExpand = (e) => {
if (!isHoverMenu.value)
return;
handleExpand();
!isLeaf.value && emit("expand", e);
};
const handleExpand = () => {
const { node } = props;
if (!expandable.value || node.loading)
return;
node.loaded ? doExpand() : doLoad();
};
const handleClick = () => {
if (isHoverMenu.value && !isLeaf.value)
return;
if (isLeaf.value && !isDisabled.value && !checkStrictly.value && !multiple.value) {
handleCheck(true);
} else {
handleExpand();
}
};
const handleSelectCheck = (checked) => {
if (checkStrictly.value) {
doCheck(checked);
if (props.node.loaded) {
doExpand();
}
} else {
handleCheck(checked);
}
};
const handleCheck = (checked) => {
if (!props.node.loaded) {
doLoad();
} else {
doCheck(checked);
!checkStrictly.value && doExpand();
}
};
return {
panel,
isHoverMenu,
multiple,
checkStrictly,
checkedNodeId,
isDisabled,
isLeaf,
expandable,
inExpandingPath,
inCheckedPath,
ns,
handleHoverExpand,
handleExpand,
handleClick,
handleCheck,
handleSelectCheck
};
}
});
const _hoisted_1$P = ["id", "aria-haspopup", "aria-owns", "aria-expanded", "tabindex"];
const _hoisted_2$x = /* @__PURE__ */ vue.createElementVNode("span", null, null, -1);
function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_checkbox = vue.resolveComponent("el-checkbox");
const _component_el_radio = vue.resolveComponent("el-radio");
const _component_check = vue.resolveComponent("check");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_node_content = vue.resolveComponent("node-content");
const _component_loading = vue.resolveComponent("loading");
const _component_arrow_right = vue.resolveComponent("arrow-right");
return vue.openBlock(), vue.createElementBlock("li", {
id: `${_ctx.menuId}-${_ctx.node.uid}`,
role: "menuitem",
"aria-haspopup": !_ctx.isLeaf,
"aria-owns": _ctx.isLeaf ? null : _ctx.menuId,
"aria-expanded": _ctx.inExpandingPath,
tabindex: _ctx.expandable ? -1 : void 0,
class: vue.normalizeClass([
_ctx.ns.b(),
_ctx.ns.is("selectable", _ctx.checkStrictly),
_ctx.ns.is("active", _ctx.node.checked),
_ctx.ns.is("disabled", !_ctx.expandable),
_ctx.inExpandingPath && "in-active-path",
_ctx.inCheckedPath && "in-checked-path"
]),
onMouseenter: _cache[2] || (_cache[2] = (...args) => _ctx.handleHoverExpand && _ctx.handleHoverExpand(...args)),
onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.handleHoverExpand && _ctx.handleHoverExpand(...args)),
onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
}, [
vue.createCommentVNode(" prefix "),
_ctx.multiple ? (vue.openBlock(), vue.createBlock(_component_el_checkbox, {
key: 0,
"model-value": _ctx.node.checked,
indeterminate: _ctx.node.indeterminate,
disabled: _ctx.isDisabled,
onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["stop"])),
"onUpdate:modelValue": _ctx.handleSelectCheck
}, null, 8, ["model-value", "indeterminate", "disabled", "onUpdate:modelValue"])) : _ctx.checkStrictly ? (vue.openBlock(), vue.createBlock(_component_el_radio, {
key: 1,
"model-value": _ctx.checkedNodeId,
label: _ctx.node.uid,
disabled: _ctx.isDisabled,
"onUpdate:modelValue": _ctx.handleSelectCheck,
onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["stop"]))
}, {
default: vue.withCtx(() => [
vue.createCommentVNode("\n Add an empty element to avoid render label,\n do not use empty fragment here for https://github.com/vuejs/vue-next/pull/2485\n "),
_hoisted_2$x
]),
_: 1
}, 8, ["model-value", "label", "disabled", "onUpdate:modelValue"])) : _ctx.isLeaf && _ctx.node.checked ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 2,
class: vue.normalizeClass(_ctx.ns.e("prefix"))
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_check)
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" content "),
vue.createVNode(_component_node_content),
vue.createCommentVNode(" postfix "),
!_ctx.isLeaf ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
_ctx.node.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 0,
class: vue.normalizeClass([_ctx.ns.is("loading"), _ctx.ns.e("postfix")])
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_loading)
]),
_: 1
}, 8, ["class"])) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 1,
class: vue.normalizeClass(["arrow-right", _ctx.ns.e("postfix")])
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_arrow_right)
]),
_: 1
}, 8, ["class"]))
], 64)) : vue.createCommentVNode("v-if", true)
], 42, _hoisted_1$P);
}
var ElCascaderNode = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["render", _sfc_render$x], ["__file", "node.vue"]]);
const _sfc_main$1E = vue.defineComponent({
name: "ElCascaderMenu",
components: {
Loading: loading_default,
ElIcon,
ElScrollbar,
ElCascaderNode
},
props: {
nodes: {
type: Array,
required: true
},
index: {
type: Number,
required: true
}
},
setup(props) {
const instance = vue.getCurrentInstance();
const ns = useNamespace("cascader-menu");
const { t } = useLocale();
const id = generateId();
let activeNode = null;
let hoverTimer = null;
const panel = vue.inject(CASCADER_PANEL_INJECTION_KEY);
const hoverZone = vue.ref(null);
const isEmpty = vue.computed(() => !props.nodes.length);
const isLoading = vue.computed(() => !panel.initialLoaded);
const menuId = vue.computed(() => `cascader-menu-${id}-${props.index}`);
const handleExpand = (e) => {
activeNode = e.target;
};
const handleMouseMove = (e) => {
if (!panel.isHoverMenu || !activeNode || !hoverZone.value)
return;
if (activeNode.contains(e.target)) {
clearHoverTimer();
const el = instance.vnode.el;
const { left } = el.getBoundingClientRect();
const { offsetWidth, offsetHeight } = el;
const startX = e.clientX - left;
const top = activeNode.offsetTop;
const bottom = top + activeNode.offsetHeight;
hoverZone.value.innerHTML = `
`;
} else if (!hoverTimer) {
hoverTimer = window.setTimeout(clearHoverZone, panel.config.hoverThreshold);
}
};
const clearHoverTimer = () => {
if (!hoverTimer)
return;
clearTimeout(hoverTimer);
hoverTimer = null;
};
const clearHoverZone = () => {
if (!hoverZone.value)
return;
hoverZone.value.innerHTML = "";
clearHoverTimer();
};
return {
ns,
panel,
hoverZone,
isEmpty,
isLoading,
menuId,
t,
handleExpand,
handleMouseMove,
clearHoverZone
};
}
});
function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_cascader_node = vue.resolveComponent("el-cascader-node");
const _component_loading = vue.resolveComponent("loading");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
return vue.openBlock(), vue.createBlock(_component_el_scrollbar, {
key: _ctx.menuId,
tag: "ul",
role: "menu",
class: vue.normalizeClass(_ctx.ns.b()),
"wrap-class": _ctx.ns.e("wrap"),
"view-class": [_ctx.ns.e("list"), _ctx.ns.is("empty", _ctx.isEmpty)],
onMousemove: _ctx.handleMouseMove,
onMouseleave: _ctx.clearHoverZone
}, {
default: vue.withCtx(() => {
var _a;
return [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.nodes, (node) => {
return vue.openBlock(), vue.createBlock(_component_el_cascader_node, {
key: node.uid,
node,
"menu-id": _ctx.menuId,
onExpand: _ctx.handleExpand
}, null, 8, ["node", "menu-id", "onExpand"]);
}), 128)),
_ctx.isLoading ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(_ctx.ns.e("empty-text"))
}, [
vue.createVNode(_component_el_icon, {
size: "14",
class: vue.normalizeClass(_ctx.ns.is("loading"))
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_loading)
]),
_: 1
}, 8, ["class"]),
vue.createTextVNode(" " + vue.toDisplayString(_ctx.t("el.cascader.loading")), 1)
], 2)) : _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(_ctx.ns.e("empty-text"))
}, vue.toDisplayString(_ctx.t("el.cascader.noData")), 3)) : ((_a = _ctx.panel) == null ? void 0 : _a.isHoverMenu) ? (vue.openBlock(), vue.createElementBlock("svg", {
key: 2,
ref: "hoverZone",
class: vue.normalizeClass(_ctx.ns.e("hover-zone"))
}, null, 2)) : vue.createCommentVNode("v-if", true)
];
}),
_: 1
}, 8, ["class", "wrap-class", "view-class", "onMousemove", "onMouseleave"]);
}
var ElCascaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$w], ["__file", "menu.vue"]]);
let uid = 0;
const calculatePathNodes = (node) => {
const nodes = [node];
let { parent } = node;
while (parent) {
nodes.unshift(parent);
parent = parent.parent;
}
return nodes;
};
class Node$2 {
constructor(data, config, parent, root = false) {
this.data = data;
this.config = config;
this.parent = parent;
this.root = root;
this.uid = uid++;
this.checked = false;
this.indeterminate = false;
this.loading = false;
const { value: valueKey, label: labelKey, children: childrenKey } = config;
const childrenData = data[childrenKey];
const pathNodes = calculatePathNodes(this);
this.level = root ? 0 : parent ? parent.level + 1 : 1;
this.value = data[valueKey];
this.label = data[labelKey];
this.pathNodes = pathNodes;
this.pathValues = pathNodes.map((node) => node.value);
this.pathLabels = pathNodes.map((node) => node.label);
this.childrenData = childrenData;
this.children = (childrenData || []).map((child) => new Node$2(child, config, this));
this.loaded = !config.lazy || this.isLeaf || !isEmpty(childrenData);
}
get isDisabled() {
const { data, parent, config } = this;
const { disabled, checkStrictly } = config;
const isDisabled = isFunction(disabled) ? disabled(data, this) : !!data[disabled];
return isDisabled || !checkStrictly && (parent == null ? void 0 : parent.isDisabled);
}
get isLeaf() {
const { data, config, childrenData, loaded } = this;
const { lazy, leaf } = config;
const isLeaf = isFunction(leaf) ? leaf(data, this) : data[leaf];
return isUndefined(isLeaf) ? lazy && !loaded ? false : !(Array.isArray(childrenData) && childrenData.length) : !!isLeaf;
}
get valueByOption() {
return this.config.emitPath ? this.pathValues : this.value;
}
appendChild(childData) {
const { childrenData, children } = this;
const node = new Node$2(childData, this.config, this);
if (Array.isArray(childrenData)) {
childrenData.push(childData);
} else {
this.childrenData = [childData];
}
children.push(node);
return node;
}
calcText(allLevels, separator) {
const text = allLevels ? this.pathLabels.join(separator) : this.label;
this.text = text;
return text;
}
broadcast(event, ...args) {
const handlerName = `onParent${capitalize(event)}`;
this.children.forEach((child) => {
if (child) {
child.broadcast(event, ...args);
child[handlerName] && child[handlerName](...args);
}
});
}
emit(event, ...args) {
const { parent } = this;
const handlerName = `onChild${capitalize(event)}`;
if (parent) {
parent[handlerName] && parent[handlerName](...args);
parent.emit(event, ...args);
}
}
onParentCheck(checked) {
if (!this.isDisabled) {
this.setCheckState(checked);
}
}
onChildCheck() {
const { children } = this;
const validChildren = children.filter((child) => !child.isDisabled);
const checked = validChildren.length ? validChildren.every((child) => child.checked) : false;
this.setCheckState(checked);
}
setCheckState(checked) {
const totalNum = this.children.length;
const checkedNum = this.children.reduce((c, p) => {
const num = p.checked ? 1 : p.indeterminate ? 0.5 : 0;
return c + num;
}, 0);
this.checked = this.loaded && this.children.filter((child) => !child.isDisabled).every((child) => child.loaded && child.checked) && checked;
this.indeterminate = this.loaded && checkedNum !== totalNum && checkedNum > 0;
}
doCheck(checked) {
if (this.checked === checked)
return;
const { checkStrictly, multiple } = this.config;
if (checkStrictly || !multiple) {
this.checked = checked;
} else {
this.broadcast("check", checked);
this.setCheckState(checked);
this.emit("check");
}
}
}
var Node$3 = Node$2;
const flatNodes = (nodes, leafOnly) => {
return nodes.reduce((res, node) => {
if (node.isLeaf) {
res.push(node);
} else {
!leafOnly && res.push(node);
res = res.concat(flatNodes(node.children, leafOnly));
}
return res;
}, []);
};
class Store {
constructor(data, config) {
this.config = config;
const nodes = (data || []).map((nodeData) => new Node$3(nodeData, this.config));
this.nodes = nodes;
this.allNodes = flatNodes(nodes, false);
this.leafNodes = flatNodes(nodes, true);
}
getNodes() {
return this.nodes;
}
getFlattedNodes(leafOnly) {
return leafOnly ? this.leafNodes : this.allNodes;
}
appendNode(nodeData, parentNode) {
const node = parentNode ? parentNode.appendChild(nodeData) : new Node$3(nodeData, this.config);
if (!parentNode)
this.nodes.push(node);
this.allNodes.push(node);
node.isLeaf && this.leafNodes.push(node);
}
appendNodes(nodeDataList, parentNode) {
nodeDataList.forEach((nodeData) => this.appendNode(nodeData, parentNode));
}
getNodeByValue(value, leafOnly = false) {
if (!value && value !== 0)
return null;
const node = this.getFlattedNodes(leafOnly).find((node2) => isEqual$1(node2.value, value) || isEqual$1(node2.pathValues, value));
return node || null;
}
getSameNode(node) {
if (!node)
return null;
const node_ = this.getFlattedNodes(false).find(({ value, level }) => isEqual$1(node.value, value) && node.level === level);
return node_ || null;
}
}
const CommonProps = {
modelValue: [Number, String, Array],
options: {
type: Array,
default: () => []
},
props: {
type: Object,
default: () => ({})
}
};
const DefaultProps = {
expandTrigger: "click",
multiple: false,
checkStrictly: false,
emitPath: true,
lazy: false,
lazyLoad: NOOP,
value: "value",
label: "label",
children: "children",
leaf: "leaf",
disabled: "disabled",
hoverThreshold: 500
};
const useCascaderConfig = (props) => {
return vue.computed(() => ({
...DefaultProps,
...props.props
}));
};
const getMenuIndex = (el) => {
if (!el)
return 0;
const pieces = el.id.split("-");
return Number(pieces[pieces.length - 2]);
};
const checkNode = (el) => {
if (!el)
return;
const input = el.querySelector("input");
if (input) {
input.click();
} else if (isLeaf(el)) {
el.click();
}
};
const sortByOriginalOrder = (oldNodes, newNodes) => {
const newNodesCopy = newNodes.slice(0);
const newIds = newNodesCopy.map((node) => node.uid);
const res = oldNodes.reduce((acc, item) => {
const index = newIds.indexOf(item.uid);
if (index > -1) {
acc.push(item);
newNodesCopy.splice(index, 1);
newIds.splice(index, 1);
}
return acc;
}, []);
res.push(...newNodesCopy);
return res;
};
const _sfc_main$1D = vue.defineComponent({
name: "ElCascaderPanel",
components: {
ElCascaderMenu
},
props: {
...CommonProps,
border: {
type: Boolean,
default: true
},
renderLabel: Function
},
emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, "close", "expand-change"],
setup(props, { emit, slots }) {
let manualChecked = false;
const ns = useNamespace("cascader");
const config = useCascaderConfig(props);
let store = null;
const initialLoaded = vue.ref(true);
const menuList = vue.ref([]);
const checkedValue = vue.ref(null);
const menus = vue.ref([]);
const expandingNode = vue.ref(null);
const checkedNodes = vue.ref([]);
const isHoverMenu = vue.computed(() => config.value.expandTrigger === "hover");
const renderLabelFn = vue.computed(() => props.renderLabel || slots.default);
const initStore = () => {
const { options } = props;
const cfg = config.value;
manualChecked = false;
store = new Store(options, cfg);
menus.value = [store.getNodes()];
if (cfg.lazy && isEmpty(props.options)) {
initialLoaded.value = false;
lazyLoad(void 0, (list) => {
if (list) {
store = new Store(list, cfg);
menus.value = [store.getNodes()];
}
initialLoaded.value = true;
syncCheckedValue(false, true);
});
} else {
syncCheckedValue(false, true);
}
};
const lazyLoad = (node, cb) => {
const cfg = config.value;
node = node || new Node$3({}, cfg, void 0, true);
node.loading = true;
const resolve = (dataList) => {
const _node = node;
const parent = _node.root ? null : _node;
dataList && (store == null ? void 0 : store.appendNodes(dataList, parent));
_node.loading = false;
_node.loaded = true;
_node.childrenData = _node.childrenData || [];
cb && cb(dataList);
};
cfg.lazyLoad(node, resolve);
};
const expandNode = (node, silent) => {
var _a;
const { level } = node;
const newMenus = menus.value.slice(0, level);
let newExpandingNode;
if (node.isLeaf) {
newExpandingNode = node.pathNodes[level - 2];
} else {
newExpandingNode = node;
newMenus.push(node.children);
}
if (((_a = expandingNode.value) == null ? void 0 : _a.uid) !== (newExpandingNode == null ? void 0 : newExpandingNode.uid)) {
expandingNode.value = node;
menus.value = newMenus;
!silent && emit("expand-change", (node == null ? void 0 : node.pathValues) || []);
}
};
const handleCheckChange = (node, checked, emitClose = true) => {
const { checkStrictly, multiple } = config.value;
const oldNode = checkedNodes.value[0];
manualChecked = true;
!multiple && (oldNode == null ? void 0 : oldNode.doCheck(false));
node.doCheck(checked);
calculateCheckedValue();
emitClose && !multiple && !checkStrictly && emit("close");
!emitClose && !multiple && !checkStrictly && expandParentNode(node);
};
const expandParentNode = (node) => {
if (!node)
return;
node = node.parent;
expandParentNode(node);
node && expandNode(node);
};
const getFlattedNodes = (leafOnly) => {
return store == null ? void 0 : store.getFlattedNodes(leafOnly);
};
const getCheckedNodes = (leafOnly) => {
var _a;
return (_a = getFlattedNodes(leafOnly)) == null ? void 0 : _a.filter((node) => node.checked !== false);
};
const clearCheckedNodes = () => {
checkedNodes.value.forEach((node) => node.doCheck(false));
calculateCheckedValue();
};
const calculateCheckedValue = () => {
var _a;
const { checkStrictly, multiple } = config.value;
const oldNodes = checkedNodes.value;
const newNodes = getCheckedNodes(!checkStrictly);
const nodes = sortByOriginalOrder(oldNodes, newNodes);
const values = nodes.map((node) => node.valueByOption);
checkedNodes.value = nodes;
checkedValue.value = multiple ? values : (_a = values[0]) != null ? _a : null;
};
const syncCheckedValue = (loaded = false, forced = false) => {
const { modelValue } = props;
const { lazy, multiple, checkStrictly } = config.value;
const leafOnly = !checkStrictly;
if (!initialLoaded.value || manualChecked || !forced && isEqual$1(modelValue, checkedValue.value))
return;
if (lazy && !loaded) {
const values = unique(flattenDeep(castArray(modelValue)));
const nodes = values.map((val) => store == null ? void 0 : store.getNodeByValue(val)).filter((node) => !!node && !node.loaded && !node.loading);
if (nodes.length) {
nodes.forEach((node) => {
lazyLoad(node, () => syncCheckedValue(false, forced));
});
} else {
syncCheckedValue(true, forced);
}
} else {
const values = multiple ? castArray(modelValue) : [modelValue];
const nodes = unique(values.map((val) => store == null ? void 0 : store.getNodeByValue(val, leafOnly)));
syncMenuState(nodes, forced);
checkedValue.value = cloneDeep(modelValue);
}
};
const syncMenuState = (newCheckedNodes, reserveExpandingState = true) => {
const { checkStrictly } = config.value;
const oldNodes = checkedNodes.value;
const newNodes = newCheckedNodes.filter((node) => !!node && (checkStrictly || node.isLeaf));
const oldExpandingNode = store == null ? void 0 : store.getSameNode(expandingNode.value);
const newExpandingNode = reserveExpandingState && oldExpandingNode || newNodes[0];
if (newExpandingNode) {
newExpandingNode.pathNodes.forEach((node) => expandNode(node, true));
} else {
expandingNode.value = null;
}
oldNodes.forEach((node) => node.doCheck(false));
newNodes.forEach((node) => node.doCheck(true));
checkedNodes.value = newNodes;
vue.nextTick(scrollToExpandingNode);
};
const scrollToExpandingNode = () => {
if (!isClient)
return;
menuList.value.forEach((menu) => {
const menuElement = menu == null ? void 0 : menu.$el;
if (menuElement) {
const container = menuElement.querySelector(`.${ns.namespace.value}-scrollbar__wrap`);
const activeNode = menuElement.querySelector(`.${ns.b("node")}.${ns.is("active")}`) || menuElement.querySelector(`.${ns.b("node")}.in-active-path`);
scrollIntoView(container, activeNode);
}
});
};
const handleKeyDown = (e) => {
const target = e.target;
const { code } = e;
switch (code) {
case EVENT_CODE.up:
case EVENT_CODE.down: {
e.preventDefault();
const distance = code === EVENT_CODE.up ? -1 : 1;
focusNode(getSibling(target, distance, `.${ns.b("node")}[tabindex="-1"]`));
break;
}
case EVENT_CODE.left: {
e.preventDefault();
const preMenu = menuList.value[getMenuIndex(target) - 1];
const expandedNode = preMenu == null ? void 0 : preMenu.$el.querySelector(`.${ns.b("node")}[aria-expanded="true"]`);
focusNode(expandedNode);
break;
}
case EVENT_CODE.right: {
e.preventDefault();
const nextMenu = menuList.value[getMenuIndex(target) + 1];
const firstNode = nextMenu == null ? void 0 : nextMenu.$el.querySelector(`.${ns.b("node")}[tabindex="-1"]`);
focusNode(firstNode);
break;
}
case EVENT_CODE.enter:
checkNode(target);
break;
}
};
vue.provide(CASCADER_PANEL_INJECTION_KEY, vue.reactive({
config,
expandingNode,
checkedNodes,
isHoverMenu,
initialLoaded,
renderLabelFn,
lazyLoad,
expandNode,
handleCheckChange
}));
vue.watch([config, () => props.options], initStore, {
deep: true,
immediate: true
});
vue.watch(() => props.modelValue, () => {
manualChecked = false;
syncCheckedValue();
}, {
deep: true
});
vue.watch(() => checkedValue.value, (val) => {
if (!isEqual$1(val, props.modelValue)) {
emit(UPDATE_MODEL_EVENT, val);
emit(CHANGE_EVENT, val);
}
});
vue.onBeforeUpdate(() => menuList.value = []);
vue.onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue());
return {
ns,
menuList,
menus,
checkedNodes,
handleKeyDown,
handleCheckChange,
getFlattedNodes,
getCheckedNodes,
clearCheckedNodes,
calculateCheckedValue,
scrollToExpandingNode
};
}
});
function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_cascader_menu = vue.resolveComponent("el-cascader-menu");
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([_ctx.ns.b("panel"), _ctx.ns.is("bordered", _ctx.border)]),
onKeydown: _cache[0] || (_cache[0] = (...args) => _ctx.handleKeyDown && _ctx.handleKeyDown(...args))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menus, (menu, index) => {
return vue.openBlock(), vue.createBlock(_component_el_cascader_menu, {
key: index,
ref_for: true,
ref: (item) => _ctx.menuList[index] = item,
index,
nodes: [...menu]
}, null, 8, ["index", "nodes"]);
}), 128))
], 34);
}
var CascaderPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$v], ["__file", "index.vue"]]);
CascaderPanel.install = (app) => {
app.component(CascaderPanel.name, CascaderPanel);
};
const _CascaderPanel = CascaderPanel;
const ElCascaderPanel = _CascaderPanel;
const tagProps = buildProps({
closable: Boolean,
type: {
type: String,
values: ["success", "info", "warning", "danger", ""],
default: ""
},
hit: Boolean,
disableTransitions: Boolean,
color: {
type: String,
default: ""
},
size: {
type: String,
values: componentSizes,
default: ""
},
effect: {
type: String,
values: ["dark", "light", "plain"],
default: "light"
},
round: Boolean
});
const tagEmits = {
close: (evt) => evt instanceof MouseEvent,
click: (evt) => evt instanceof MouseEvent
};
const __default__$10 = vue.defineComponent({
name: "ElTag"
});
const _sfc_main$1C = /* @__PURE__ */ vue.defineComponent({
...__default__$10,
props: tagProps,
emits: tagEmits,
setup(__props, { emit }) {
const props = __props;
const tagSize = useSize();
const ns = useNamespace("tag");
const classes = vue.computed(() => {
const { type, hit, effect, closable, round } = props;
return [
ns.b(),
ns.is("closable", closable),
ns.m(type),
ns.m(tagSize.value),
ns.m(effect),
ns.is("hit", hit),
ns.is("round", round)
];
});
const handleClose = (event) => {
emit("close", event);
};
const handleClick = (event) => {
emit("click", event);
};
return (_ctx, _cache) => {
return _ctx.disableTransitions ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: vue.normalizeClass(vue.unref(classes)),
style: vue.normalizeStyle({ backgroundColor: _ctx.color }),
onClick: handleClick
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(ns).e("content"))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2),
_ctx.closable ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("close")),
onClick: vue.withModifiers(handleClose, ["stop"])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(close_default))
]),
_: 1
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
], 6)) : (vue.openBlock(), vue.createBlock(vue.Transition, {
key: 1,
name: `${vue.unref(ns).namespace.value}-zoom-in-center`,
appear: ""
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(classes)),
style: vue.normalizeStyle({ backgroundColor: _ctx.color }),
onClick: handleClick
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(ns).e("content"))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2),
_ctx.closable ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("close")),
onClick: vue.withModifiers(handleClose, ["stop"])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(close_default))
]),
_: 1
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
], 6)
]),
_: 3
}, 8, ["name"]));
};
}
});
var Tag = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__file", "tag.vue"]]);
const ElTag = withInstall(Tag);
const popperOptions = {
modifiers: [
{
name: "arrowPosition",
enabled: true,
phase: "main",
fn: ({ state }) => {
const { modifiersData, placement } = state;
if (["right", "left", "bottom", "top"].includes(placement))
return;
modifiersData.arrow.x = 35;
},
requires: ["arrow"]
}
]
};
const COMPONENT_NAME$f = "ElCascader";
const _sfc_main$1B = vue.defineComponent({
name: COMPONENT_NAME$f,
components: {
ElCascaderPanel: _CascaderPanel,
ElInput,
ElTooltip,
ElScrollbar,
ElTag,
ElIcon,
CircleClose: circle_close_default,
Check: check_default,
ArrowDown: arrow_down_default
},
directives: {
Clickoutside: ClickOutside
},
props: {
...CommonProps,
size: {
type: String,
validator: isValidComponentSize
},
placeholder: {
type: String
},
disabled: Boolean,
clearable: Boolean,
filterable: Boolean,
filterMethod: {
type: Function,
default: (node, keyword) => node.text.includes(keyword)
},
separator: {
type: String,
default: " / "
},
showAllLevels: {
type: Boolean,
default: true
},
collapseTags: Boolean,
collapseTagsTooltip: {
type: Boolean,
default: false
},
debounce: {
type: Number,
default: 300
},
beforeFilter: {
type: Function,
default: () => true
},
popperClass: {
type: String,
default: ""
},
teleported: useTooltipContentProps.teleported,
tagType: { ...tagProps.type, default: "info" },
validateEvent: {
type: Boolean,
default: true
}
},
emits: [
UPDATE_MODEL_EVENT,
CHANGE_EVENT,
"focus",
"blur",
"visible-change",
"expand-change",
"remove-tag"
],
setup(props, { emit }) {
let inputInitialHeight = 0;
let pressDeleteCount = 0;
const nsCascader = useNamespace("cascader");
const nsInput = useNamespace("input");
const { t } = useLocale();
const { form, formItem } = useFormItem();
const tooltipRef = vue.ref(null);
const input = vue.ref(null);
const tagWrapper = vue.ref(null);
const panel = vue.ref(null);
const suggestionPanel = vue.ref(null);
const popperVisible = vue.ref(false);
const inputHover = vue.ref(false);
const filtering = vue.ref(false);
const inputValue = vue.ref("");
const searchInputValue = vue.ref("");
const presentTags = vue.ref([]);
const allPresentTags = vue.ref([]);
const suggestions = vue.ref([]);
const isOnComposition = vue.ref(false);
const isDisabled = vue.computed(() => props.disabled || (form == null ? void 0 : form.disabled));
const inputPlaceholder = vue.computed(() => props.placeholder || t("el.cascader.placeholder"));
const currentPlaceholder = vue.computed(() => searchInputValue.value || presentTags.value.length > 0 ? "" : inputPlaceholder.value);
const realSize = useSize();
const tagSize = vue.computed(() => ["small"].includes(realSize.value) ? "small" : "default");
const multiple = vue.computed(() => !!props.props.multiple);
const readonly = vue.computed(() => !props.filterable || multiple.value);
const searchKeyword = vue.computed(() => multiple.value ? searchInputValue.value : inputValue.value);
const checkedNodes = vue.computed(() => {
var _a;
return ((_a = panel.value) == null ? void 0 : _a.checkedNodes) || [];
});
const clearBtnVisible = vue.computed(() => {
if (!props.clearable || isDisabled.value || filtering.value || !inputHover.value)
return false;
return !!checkedNodes.value.length;
});
const presentText = vue.computed(() => {
const { showAllLevels, separator } = props;
const nodes = checkedNodes.value;
return nodes.length ? multiple.value ? "" : nodes[0].calcText(showAllLevels, separator) : "";
});
const checkedValue = vue.computed({
get() {
return cloneDeep(props.modelValue);
},
set(val) {
emit(UPDATE_MODEL_EVENT, val);
emit(CHANGE_EVENT, val);
if (props.validateEvent) {
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
}
}
});
const popperPaneRef = vue.computed(() => {
var _a, _b;
return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
});
const togglePopperVisible = (visible) => {
var _a, _b, _c;
if (isDisabled.value)
return;
visible = visible != null ? visible : !popperVisible.value;
if (visible !== popperVisible.value) {
popperVisible.value = visible;
(_b = (_a = input.value) == null ? void 0 : _a.input) == null ? void 0 : _b.setAttribute("aria-expanded", `${visible}`);
if (visible) {
updatePopperPosition();
vue.nextTick((_c = panel.value) == null ? void 0 : _c.scrollToExpandingNode);
} else if (props.filterable) {
syncPresentTextValue();
}
emit("visible-change", visible);
}
};
const updatePopperPosition = () => {
vue.nextTick(() => {
var _a;
(_a = tooltipRef.value) == null ? void 0 : _a.updatePopper();
});
};
const hideSuggestionPanel = () => {
filtering.value = false;
};
const genTag = (node) => {
const { showAllLevels, separator } = props;
return {
node,
key: node.uid,
text: node.calcText(showAllLevels, separator),
hitState: false,
closable: !isDisabled.value && !node.isDisabled,
isCollapseTag: false
};
};
const deleteTag = (tag) => {
var _a;
const node = tag.node;
node.doCheck(false);
(_a = panel.value) == null ? void 0 : _a.calculateCheckedValue();
emit("remove-tag", node.valueByOption);
};
const calculatePresentTags = () => {
if (!multiple.value)
return;
const nodes = checkedNodes.value;
const tags = [];
const allTags = [];
nodes.forEach((node) => allTags.push(genTag(node)));
allPresentTags.value = allTags;
if (nodes.length) {
const [first, ...rest] = nodes;
const restCount = rest.length;
tags.push(genTag(first));
if (restCount) {
if (props.collapseTags) {
tags.push({
key: -1,
text: `+ ${restCount}`,
closable: false,
isCollapseTag: true
});
} else {
rest.forEach((node) => tags.push(genTag(node)));
}
}
}
presentTags.value = tags;
};
const calculateSuggestions = () => {
var _a, _b;
const { filterMethod, showAllLevels, separator } = props;
const res = (_b = (_a = panel.value) == null ? void 0 : _a.getFlattedNodes(!props.props.checkStrictly)) == null ? void 0 : _b.filter((node) => {
if (node.isDisabled)
return false;
node.calcText(showAllLevels, separator);
return filterMethod(node, searchKeyword.value);
});
if (multiple.value) {
presentTags.value.forEach((tag) => {
tag.hitState = false;
});
allPresentTags.value.forEach((tag) => {
tag.hitState = false;
});
}
filtering.value = true;
suggestions.value = res;
updatePopperPosition();
};
const focusFirstNode = () => {
var _a;
let firstNode;
if (filtering.value && suggestionPanel.value) {
firstNode = suggestionPanel.value.$el.querySelector(`.${nsCascader.e("suggestion-item")}`);
} else {
firstNode = (_a = panel.value) == null ? void 0 : _a.$el.querySelector(`.${nsCascader.b("node")}[tabindex="-1"]`);
}
if (firstNode) {
firstNode.focus();
!filtering.value && firstNode.click();
}
};
const updateStyle = () => {
var _a, _b;
const inputInner = (_a = input.value) == null ? void 0 : _a.input;
const tagWrapperEl = tagWrapper.value;
const suggestionPanelEl = (_b = suggestionPanel.value) == null ? void 0 : _b.$el;
if (!isClient || !inputInner)
return;
if (suggestionPanelEl) {
const suggestionList = suggestionPanelEl.querySelector(`.${nsCascader.e("suggestion-list")}`);
suggestionList.style.minWidth = `${inputInner.offsetWidth}px`;
}
if (tagWrapperEl) {
const { offsetHeight } = tagWrapperEl;
const height = presentTags.value.length > 0 ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px` : `${inputInitialHeight}px`;
inputInner.style.height = height;
updatePopperPosition();
}
};
const getCheckedNodes = (leafOnly) => {
var _a;
return (_a = panel.value) == null ? void 0 : _a.getCheckedNodes(leafOnly);
};
const handleExpandChange = (value) => {
updatePopperPosition();
emit("expand-change", value);
};
const handleComposition = (event) => {
var _a;
const text = (_a = event.target) == null ? void 0 : _a.value;
if (event.type === "compositionend") {
isOnComposition.value = false;
vue.nextTick(() => handleInput(text));
} else {
const lastCharacter = text[text.length - 1] || "";
isOnComposition.value = !isKorean(lastCharacter);
}
};
const handleKeyDown = (e) => {
if (isOnComposition.value)
return;
switch (e.code) {
case EVENT_CODE.enter:
togglePopperVisible();
break;
case EVENT_CODE.down:
togglePopperVisible(true);
vue.nextTick(focusFirstNode);
e.preventDefault();
break;
case EVENT_CODE.esc:
if (popperVisible.value === true) {
e.preventDefault();
e.stopPropagation();
togglePopperVisible(false);
}
break;
case EVENT_CODE.tab:
togglePopperVisible(false);
break;
}
};
const handleClear = () => {
var _a;
(_a = panel.value) == null ? void 0 : _a.clearCheckedNodes();
if (!popperVisible.value && props.filterable) {
syncPresentTextValue();
}
togglePopperVisible(false);
};
const syncPresentTextValue = () => {
const { value } = presentText;
inputValue.value = value;
searchInputValue.value = value;
};
const handleSuggestionClick = (node) => {
var _a, _b;
const { checked } = node;
if (multiple.value) {
(_a = panel.value) == null ? void 0 : _a.handleCheckChange(node, !checked, false);
} else {
!checked && ((_b = panel.value) == null ? void 0 : _b.handleCheckChange(node, true, false));
togglePopperVisible(false);
}
};
const handleSuggestionKeyDown = (e) => {
const target = e.target;
const { code } = e;
switch (code) {
case EVENT_CODE.up:
case EVENT_CODE.down: {
const distance = code === EVENT_CODE.up ? -1 : 1;
focusNode(getSibling(target, distance, `.${nsCascader.e("suggestion-item")}[tabindex="-1"]`));
break;
}
case EVENT_CODE.enter:
target.click();
break;
}
};
const handleDelete = () => {
const tags = presentTags.value;
const lastTag = tags[tags.length - 1];
pressDeleteCount = searchInputValue.value ? 0 : pressDeleteCount + 1;
if (!lastTag || !pressDeleteCount || props.collapseTags && tags.length > 1)
return;
if (lastTag.hitState) {
deleteTag(lastTag);
} else {
lastTag.hitState = true;
}
};
const handleFilter = debounce(() => {
const { value } = searchKeyword;
if (!value)
return;
const passed = props.beforeFilter(value);
if (isPromise(passed)) {
passed.then(calculateSuggestions).catch(() => {
});
} else if (passed !== false) {
calculateSuggestions();
} else {
hideSuggestionPanel();
}
}, props.debounce);
const handleInput = (val, e) => {
!popperVisible.value && togglePopperVisible(true);
if (e == null ? void 0 : e.isComposing)
return;
val ? handleFilter() : hideSuggestionPanel();
};
vue.watch(filtering, updatePopperPosition);
vue.watch([checkedNodes, isDisabled], calculatePresentTags);
vue.watch(presentTags, () => {
vue.nextTick(() => updateStyle());
});
vue.watch(presentText, syncPresentTextValue, { immediate: true });
vue.onMounted(() => {
const inputInner = input.value.input;
const inputInnerHeight = Number.parseFloat(useCssVar(nsInput.cssVarName("input-height"), inputInner).value) - 2;
inputInitialHeight = inputInner.offsetHeight || inputInnerHeight;
useResizeObserver(inputInner, updateStyle);
});
return {
popperOptions,
tooltipRef,
popperPaneRef,
input,
tagWrapper,
panel,
suggestionPanel,
popperVisible,
inputHover,
inputPlaceholder,
currentPlaceholder,
filtering,
presentText,
checkedValue,
inputValue,
searchInputValue,
presentTags,
allPresentTags,
suggestions,
isDisabled,
isOnComposition,
realSize,
tagSize,
multiple,
readonly,
clearBtnVisible,
nsCascader,
nsInput,
t,
togglePopperVisible,
hideSuggestionPanel,
deleteTag,
focusFirstNode,
getCheckedNodes,
handleExpandChange,
handleKeyDown,
handleComposition,
handleClear,
handleSuggestionClick,
handleSuggestionKeyDown,
handleDelete,
handleInput
};
}
});
const _hoisted_1$O = { key: 0 };
const _hoisted_2$w = ["placeholder"];
const _hoisted_3$h = ["onClick"];
function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
const _component_circle_close = vue.resolveComponent("circle-close");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_arrow_down = vue.resolveComponent("arrow-down");
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_tag = vue.resolveComponent("el-tag");
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
const _component_el_cascader_panel = vue.resolveComponent("el-cascader-panel");
const _component_check = vue.resolveComponent("check");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _directive_clickoutside = vue.resolveDirective("clickoutside");
return vue.openBlock(), vue.createBlock(_component_el_tooltip, {
ref: "tooltipRef",
visible: _ctx.popperVisible,
teleported: _ctx.teleported,
"popper-class": [_ctx.nsCascader.e("dropdown"), _ctx.popperClass],
"popper-options": _ctx.popperOptions,
"fallback-placements": [
"bottom-start",
"bottom",
"top-start",
"top",
"right",
"left"
],
"stop-popper-mouse-event": false,
"gpu-acceleration": false,
placement: "bottom-start",
transition: `${_ctx.nsCascader.namespace.value}-zoom-in-top`,
effect: "light",
pure: "",
persistent: "",
onHide: _ctx.hideSuggestionPanel
}, {
default: vue.withCtx(() => [
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
_ctx.nsCascader.b(),
_ctx.nsCascader.m(_ctx.realSize),
_ctx.nsCascader.is("disabled", _ctx.isDisabled),
_ctx.$attrs.class
]),
style: vue.normalizeStyle(_ctx.$attrs.style),
onClick: _cache[11] || (_cache[11] = () => _ctx.togglePopperVisible(_ctx.readonly ? void 0 : true)),
onKeydown: _cache[12] || (_cache[12] = (...args) => _ctx.handleKeyDown && _ctx.handleKeyDown(...args)),
onMouseenter: _cache[13] || (_cache[13] = ($event) => _ctx.inputHover = true),
onMouseleave: _cache[14] || (_cache[14] = ($event) => _ctx.inputHover = false)
}, [
vue.createVNode(_component_el_input, {
ref: "input",
modelValue: _ctx.inputValue,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.inputValue = $event),
placeholder: _ctx.currentPlaceholder,
readonly: _ctx.readonly,
disabled: _ctx.isDisabled,
"validate-event": false,
size: _ctx.realSize,
class: vue.normalizeClass(_ctx.nsCascader.is("focus", _ctx.popperVisible)),
onCompositionstart: _ctx.handleComposition,
onCompositionupdate: _ctx.handleComposition,
onCompositionend: _ctx.handleComposition,
onFocus: _cache[2] || (_cache[2] = (e) => _ctx.$emit("focus", e)),
onBlur: _cache[3] || (_cache[3] = (e) => _ctx.$emit("blur", e)),
onInput: _ctx.handleInput
}, {
suffix: vue.withCtx(() => [
_ctx.clearBtnVisible ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: "clear",
class: vue.normalizeClass([_ctx.nsInput.e("icon"), "icon-circle-close"]),
onClick: vue.withModifiers(_ctx.handleClear, ["stop"])
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_circle_close)
]),
_: 1
}, 8, ["class", "onClick"])) : (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: "arrow-down",
class: vue.normalizeClass([
_ctx.nsInput.e("icon"),
"icon-arrow-down",
_ctx.nsCascader.is("reverse", _ctx.popperVisible)
]),
onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.togglePopperVisible(), ["stop"]))
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_arrow_down)
]),
_: 1
}, 8, ["class"]))
]),
_: 1
}, 8, ["modelValue", "placeholder", "readonly", "disabled", "size", "class", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onInput"]),
_ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
ref: "tagWrapper",
class: vue.normalizeClass(_ctx.nsCascader.e("tags"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.presentTags, (tag) => {
return vue.openBlock(), vue.createBlock(_component_el_tag, {
key: tag.key,
type: _ctx.tagType,
size: _ctx.tagSize,
hit: tag.hitState,
closable: tag.closable,
"disable-transitions": "",
onClose: ($event) => _ctx.deleteTag(tag)
}, {
default: vue.withCtx(() => [
tag.isCollapseTag === false ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$O, vue.toDisplayString(tag.text), 1)) : (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
key: 1,
teleported: false,
disabled: _ctx.popperVisible || !_ctx.collapseTagsTooltip,
"fallback-placements": ["bottom", "top", "right", "left"],
placement: "bottom",
effect: "light"
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", null, vue.toDisplayString(tag.text), 1)
]),
content: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.nsCascader.e("collapse-tags"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.allPresentTags.slice(1), (tag2, idx) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: idx,
class: vue.normalizeClass(_ctx.nsCascader.e("collapse-tag"))
}, [
(vue.openBlock(), vue.createBlock(_component_el_tag, {
key: tag2.key,
class: "in-tooltip",
type: _ctx.tagType,
size: _ctx.tagSize,
hit: tag2.hitState,
closable: tag2.closable,
"disable-transitions": "",
onClose: ($event) => _ctx.deleteTag(tag2)
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", null, vue.toDisplayString(tag2.text), 1)
]),
_: 2
}, 1032, ["type", "size", "hit", "closable", "onClose"]))
], 2);
}), 128))
], 2)
]),
_: 2
}, 1032, ["disabled"]))
]),
_: 2
}, 1032, ["type", "size", "hit", "closable", "onClose"]);
}), 128)),
_ctx.filterable && !_ctx.isDisabled ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
key: 0,
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.searchInputValue = $event),
type: "text",
class: vue.normalizeClass(_ctx.nsCascader.e("search-input")),
placeholder: _ctx.presentText ? "" : _ctx.inputPlaceholder,
onInput: _cache[5] || (_cache[5] = (e) => _ctx.handleInput(_ctx.searchInputValue, e)),
onClick: _cache[6] || (_cache[6] = vue.withModifiers(($event) => _ctx.togglePopperVisible(true), ["stop"])),
onKeydown: _cache[7] || (_cache[7] = vue.withKeys((...args) => _ctx.handleDelete && _ctx.handleDelete(...args), ["delete"])),
onCompositionstart: _cache[8] || (_cache[8] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
onCompositionupdate: _cache[9] || (_cache[9] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
onCompositionend: _cache[10] || (_cache[10] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args))
}, null, 42, _hoisted_2$w)), [
[vue.vModelText, _ctx.searchInputValue]
]) : vue.createCommentVNode("v-if", true)
], 2)) : vue.createCommentVNode("v-if", true)
], 38)), [
[_directive_clickoutside, () => _ctx.togglePopperVisible(false), _ctx.popperPaneRef]
])
]),
content: vue.withCtx(() => [
vue.withDirectives(vue.createVNode(_component_el_cascader_panel, {
ref: "panel",
modelValue: _ctx.checkedValue,
"onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => _ctx.checkedValue = $event),
options: _ctx.options,
props: _ctx.props,
border: false,
"render-label": _ctx.$slots.default,
onExpandChange: _ctx.handleExpandChange,
onClose: _cache[16] || (_cache[16] = ($event) => _ctx.$nextTick(() => _ctx.togglePopperVisible(false)))
}, null, 8, ["modelValue", "options", "props", "render-label", "onExpandChange"]), [
[vue.vShow, !_ctx.filtering]
]),
_ctx.filterable ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_scrollbar, {
key: 0,
ref: "suggestionPanel",
tag: "ul",
class: vue.normalizeClass(_ctx.nsCascader.e("suggestion-panel")),
"view-class": _ctx.nsCascader.e("suggestion-list"),
onKeydown: _ctx.handleSuggestionKeyDown
}, {
default: vue.withCtx(() => [
_ctx.suggestions.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.suggestions, (item) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: item.uid,
class: vue.normalizeClass([
_ctx.nsCascader.e("suggestion-item"),
_ctx.nsCascader.is("checked", item.checked)
]),
tabindex: -1,
onClick: ($event) => _ctx.handleSuggestionClick(item)
}, [
vue.createElementVNode("span", null, vue.toDisplayString(item.text), 1),
item.checked ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
default: vue.withCtx(() => [
vue.createVNode(_component_check)
]),
_: 1
})) : vue.createCommentVNode("v-if", true)
], 10, _hoisted_3$h);
}), 128)) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
vue.createElementVNode("li", {
class: vue.normalizeClass(_ctx.nsCascader.e("empty-text"))
}, vue.toDisplayString(_ctx.t("el.cascader.noMatch")), 3)
])
]),
_: 3
}, 8, ["class", "view-class", "onKeydown"])), [
[vue.vShow, _ctx.filtering]
]) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["visible", "teleported", "popper-class", "popper-options", "transition", "onHide"]);
}
var Cascader = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$u], ["__file", "index.vue"]]);
Cascader.install = (app) => {
app.component(Cascader.name, Cascader);
};
const _Cascader = Cascader;
const ElCascader = _Cascader;
const checkTagProps = buildProps({
checked: {
type: Boolean,
default: false
}
});
const checkTagEmits = {
"update:checked": (value) => isBoolean(value),
[CHANGE_EVENT]: (value) => isBoolean(value)
};
const __default__$$ = vue.defineComponent({
name: "ElCheckTag"
});
const _sfc_main$1A = /* @__PURE__ */ vue.defineComponent({
...__default__$$,
props: checkTagProps,
emits: checkTagEmits,
setup(__props, { emit }) {
const props = __props;
const ns = useNamespace("check-tag");
const handleChange = () => {
const checked = !props.checked;
emit(CHANGE_EVENT, checked);
emit("update:checked", checked);
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).is("checked", _ctx.checked)]),
onClick: handleChange
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2);
};
}
});
var CheckTag = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["__file", "check-tag.vue"]]);
const ElCheckTag = withInstall(CheckTag);
const colProps = buildProps({
tag: {
type: String,
default: "div"
},
span: {
type: Number,
default: 24
},
offset: {
type: Number,
default: 0
},
pull: {
type: Number,
default: 0
},
push: {
type: Number,
default: 0
},
xs: {
type: definePropType([Number, Object]),
default: () => mutable({})
},
sm: {
type: definePropType([Number, Object]),
default: () => mutable({})
},
md: {
type: definePropType([Number, Object]),
default: () => mutable({})
},
lg: {
type: definePropType([Number, Object]),
default: () => mutable({})
},
xl: {
type: definePropType([Number, Object]),
default: () => mutable({})
}
});
const __default__$_ = vue.defineComponent({
name: "ElCol"
});
const _sfc_main$1z = /* @__PURE__ */ vue.defineComponent({
...__default__$_,
props: colProps,
setup(__props) {
const props = __props;
const { gutter } = vue.inject(rowContextKey, { gutter: vue.computed(() => 0) });
const ns = useNamespace("col");
const style = vue.computed(() => {
const styles = {};
if (gutter.value) {
styles.paddingLeft = styles.paddingRight = `${gutter.value / 2}px`;
}
return styles;
});
const classes = vue.computed(() => {
const classes2 = [];
const pos = ["span", "offset", "pull", "push"];
pos.forEach((prop) => {
const size = props[prop];
if (isNumber(size)) {
if (prop === "span")
classes2.push(ns.b(`${props[prop]}`));
else if (size > 0)
classes2.push(ns.b(`${prop}-${props[prop]}`));
}
});
const sizes = ["xs", "sm", "md", "lg", "xl"];
sizes.forEach((size) => {
if (isNumber(props[size])) {
classes2.push(ns.b(`${size}-${props[size]}`));
} else if (isObject$1(props[size])) {
Object.entries(props[size]).forEach(([prop, sizeProp]) => {
classes2.push(prop !== "span" ? ns.b(`${size}-${prop}-${sizeProp}`) : ns.b(`${size}-${sizeProp}`));
});
}
});
if (gutter.value) {
classes2.push(ns.is("guttered"));
}
return classes2;
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(classes)]),
style: vue.normalizeStyle(vue.unref(style))
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class", "style"]);
};
}
});
var Col = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__file", "col.vue"]]);
const ElCol = withInstall(Col);
const emitChangeFn = (value) => typeof isNumber(value);
const collapseProps = buildProps({
accordion: Boolean,
modelValue: {
type: definePropType([Array, String, Number]),
default: () => mutable([])
}
});
const collapseEmits = {
[UPDATE_MODEL_EVENT]: emitChangeFn,
[CHANGE_EVENT]: emitChangeFn
};
const useCollapse = (props, emit) => {
const activeNames = vue.ref(castArray$1(props.modelValue));
const setActiveNames = (_activeNames) => {
activeNames.value = _activeNames;
const value = props.accordion ? activeNames.value[0] : activeNames.value;
emit(UPDATE_MODEL_EVENT, value);
emit(CHANGE_EVENT, value);
};
const handleItemClick = (name) => {
if (props.accordion) {
setActiveNames([activeNames.value[0] === name ? "" : name]);
} else {
const _activeNames = [...activeNames.value];
const index = _activeNames.indexOf(name);
if (index > -1) {
_activeNames.splice(index, 1);
} else {
_activeNames.push(name);
}
setActiveNames(_activeNames);
}
};
vue.watch(() => props.modelValue, () => activeNames.value = castArray$1(props.modelValue), { deep: true });
vue.provide(collapseContextKey, {
activeNames,
handleItemClick
});
return {
activeNames,
setActiveNames
};
};
const useCollapseDOM = () => {
const ns = useNamespace("collapse");
const rootKls = vue.computed(() => ns.b());
return {
rootKls
};
};
const __default__$Z = vue.defineComponent({
name: "ElCollapse"
});
const _sfc_main$1y = /* @__PURE__ */ vue.defineComponent({
...__default__$Z,
props: collapseProps,
emits: collapseEmits,
setup(__props, { expose, emit }) {
const props = __props;
const { activeNames, setActiveNames } = useCollapse(props, emit);
const { rootKls } = useCollapseDOM();
expose({
activeNames,
setActiveNames
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(rootKls)),
role: "tablist",
"aria-multiselectable": "true"
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2);
};
}
});
var Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["__file", "collapse.vue"]]);
const __default__$Y = vue.defineComponent({
name: "ElCollapseTransition"
});
const _sfc_main$1x = /* @__PURE__ */ vue.defineComponent({
...__default__$Y,
setup(__props) {
const ns = useNamespace("collapse-transition");
const on = {
beforeEnter(el) {
if (!el.dataset)
el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.maxHeight = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
},
enter(el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {
el.style.maxHeight = `${el.scrollHeight}px`;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
} else {
el.style.maxHeight = 0;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
el.style.overflow = "hidden";
},
afterEnter(el) {
el.style.maxHeight = "";
el.style.overflow = el.dataset.oldOverflow;
},
beforeLeave(el) {
if (!el.dataset)
el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.dataset.oldOverflow = el.style.overflow;
el.style.maxHeight = `${el.scrollHeight}px`;
el.style.overflow = "hidden";
},
leave(el) {
if (el.scrollHeight !== 0) {
el.style.maxHeight = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
},
afterLeave(el) {
el.style.maxHeight = "";
el.style.overflow = el.dataset.oldOverflow;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({
name: vue.unref(ns).b()
}, vue.toHandlers(on)), {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["name"]);
};
}
});
var CollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__file", "collapse-transition.vue"]]);
CollapseTransition.install = (app) => {
app.component(CollapseTransition.name, CollapseTransition);
};
const _CollapseTransition = CollapseTransition;
const ElCollapseTransition = _CollapseTransition;
const collapseItemProps = buildProps({
title: {
type: String,
default: ""
},
name: {
type: definePropType([String, Number]),
default: () => generateId()
},
disabled: Boolean
});
const useCollapseItem = (props) => {
const collapse = vue.inject(collapseContextKey);
const focusing = vue.ref(false);
const isClick = vue.ref(false);
const id = vue.ref(generateId());
const isActive = vue.computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(props.name));
const handleFocus = () => {
setTimeout(() => {
if (!isClick.value) {
focusing.value = true;
} else {
isClick.value = false;
}
}, 50);
};
const handleHeaderClick = () => {
if (props.disabled)
return;
collapse == null ? void 0 : collapse.handleItemClick(props.name);
focusing.value = false;
isClick.value = true;
};
const handleEnterClick = () => {
collapse == null ? void 0 : collapse.handleItemClick(props.name);
};
return {
focusing,
id,
isActive,
handleFocus,
handleHeaderClick,
handleEnterClick
};
};
const useCollapseItemDOM = (props, { focusing, isActive, id }) => {
const ns = useNamespace("collapse");
const rootKls = vue.computed(() => [
ns.b("item"),
ns.is("active", vue.unref(isActive)),
ns.is("disabled", props.disabled)
]);
const headKls = vue.computed(() => [
ns.be("item", "header"),
ns.is("active", vue.unref(isActive)),
{ focusing: vue.unref(focusing) && !props.disabled }
]);
const arrowKls = vue.computed(() => [
ns.be("item", "arrow"),
ns.is("active", vue.unref(isActive))
]);
const itemWrapperKls = vue.computed(() => ns.be("item", "wrap"));
const itemContentKls = vue.computed(() => ns.be("item", "content"));
const scopedContentId = vue.computed(() => ns.b(`content-${vue.unref(id)}`));
const scopedHeadId = vue.computed(() => ns.b(`head-${vue.unref(id)}`));
return {
arrowKls,
headKls,
rootKls,
itemWrapperKls,
itemContentKls,
scopedContentId,
scopedHeadId
};
};
const _hoisted_1$N = ["aria-expanded", "aria-controls", "aria-describedby"];
const _hoisted_2$v = ["id", "tabindex"];
const _hoisted_3$g = ["id", "aria-hidden", "aria-labelledby"];
const __default__$X = vue.defineComponent({
name: "ElCollapseItem"
});
const _sfc_main$1w = /* @__PURE__ */ vue.defineComponent({
...__default__$X,
props: collapseItemProps,
setup(__props, { expose }) {
const props = __props;
const {
focusing,
id,
isActive,
handleFocus,
handleHeaderClick,
handleEnterClick
} = useCollapseItem(props);
const {
arrowKls,
headKls,
rootKls,
itemWrapperKls,
itemContentKls,
scopedContentId,
scopedHeadId
} = useCollapseItemDOM(props, { focusing, isActive, id });
expose({
isActive
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(rootKls))
}, [
vue.createElementVNode("div", {
role: "tab",
"aria-expanded": vue.unref(isActive),
"aria-controls": vue.unref(scopedContentId),
"aria-describedby": vue.unref(scopedContentId)
}, [
vue.createElementVNode("div", {
id: vue.unref(scopedHeadId),
class: vue.normalizeClass(vue.unref(headKls)),
role: "button",
tabindex: _ctx.disabled ? -1 : 0,
onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleHeaderClick) && vue.unref(handleHeaderClick)(...args)),
onKeypress: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers((...args) => vue.unref(handleEnterClick) && vue.unref(handleEnterClick)(...args), ["stop", "prevent"]), ["space", "enter"])),
onFocus: _cache[2] || (_cache[2] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
onBlur: _cache[3] || (_cache[3] = ($event) => focusing.value = false)
}, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
]),
vue.createVNode(vue.unref(ElIcon), {
class: vue.normalizeClass(vue.unref(arrowKls))
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_right_default))
]),
_: 1
}, 8, ["class"])
], 42, _hoisted_2$v)
], 8, _hoisted_1$N),
vue.createVNode(vue.unref(_CollapseTransition), null, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("div", {
id: vue.unref(scopedContentId),
class: vue.normalizeClass(vue.unref(itemWrapperKls)),
role: "tabpanel",
"aria-hidden": !vue.unref(isActive),
"aria-labelledby": vue.unref(scopedHeadId)
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(itemContentKls))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2)
], 10, _hoisted_3$g), [
[vue.vShow, vue.unref(isActive)]
])
]),
_: 3
})
], 2);
};
}
});
var CollapseItem = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__file", "collapse-item.vue"]]);
const ElCollapse = withInstall(Collapse, {
CollapseItem
});
const ElCollapseItem = withNoopInstall(CollapseItem);
let isDragging = false;
function draggable(element, options) {
if (!isClient)
return;
const moveFn = function(event) {
var _a;
(_a = options.drag) == null ? void 0 : _a.call(options, event);
};
const upFn = function(event) {
var _a;
document.removeEventListener("mousemove", moveFn);
document.removeEventListener("mouseup", upFn);
document.removeEventListener("touchmove", moveFn);
document.removeEventListener("touchend", upFn);
document.onselectstart = null;
document.ondragstart = null;
isDragging = false;
(_a = options.end) == null ? void 0 : _a.call(options, event);
};
const downFn = function(event) {
var _a;
if (isDragging)
return;
event.preventDefault();
document.onselectstart = () => false;
document.ondragstart = () => false;
document.addEventListener("mousemove", moveFn);
document.addEventListener("mouseup", upFn);
document.addEventListener("touchmove", moveFn);
document.addEventListener("touchend", upFn);
isDragging = true;
(_a = options.start) == null ? void 0 : _a.call(options, event);
};
element.addEventListener("mousedown", downFn);
element.addEventListener("touchstart", downFn);
}
const _sfc_main$1v = vue.defineComponent({
name: "ElColorAlphaSlider",
props: {
color: {
type: Object,
required: true
},
vertical: {
type: Boolean,
default: false
}
},
setup(props) {
const ns = useNamespace("color-alpha-slider");
const instance = vue.getCurrentInstance();
const thumb = vue.shallowRef();
const bar = vue.shallowRef();
const thumbLeft = vue.ref(0);
const thumbTop = vue.ref(0);
const background = vue.ref();
vue.watch(() => props.color.get("alpha"), () => {
update();
});
vue.watch(() => props.color.value, () => {
update();
});
function getThumbLeft() {
if (!thumb.value)
return 0;
if (props.vertical)
return 0;
const el = instance.vnode.el;
const alpha = props.color.get("alpha");
if (!el)
return 0;
return Math.round(alpha * (el.offsetWidth - thumb.value.offsetWidth / 2) / 100);
}
function getThumbTop() {
if (!thumb.value)
return 0;
const el = instance.vnode.el;
if (!props.vertical)
return 0;
const alpha = props.color.get("alpha");
if (!el)
return 0;
return Math.round(alpha * (el.offsetHeight - thumb.value.offsetHeight / 2) / 100);
}
function getBackground() {
if (props.color && props.color.value) {
const { r, g, b } = props.color.toRgb();
return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
}
return "";
}
function handleClick(event) {
const target = event.target;
if (target !== thumb.value) {
handleDrag(event);
}
}
function handleDrag(event) {
if (!bar.value || !thumb.value)
return;
const el = instance.vnode.el;
const rect = el.getBoundingClientRect();
const { clientX, clientY } = getClientXY(event);
if (!props.vertical) {
let left = clientX - rect.left;
left = Math.max(thumb.value.offsetWidth / 2, left);
left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
props.color.set("alpha", Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 100));
} else {
let top = clientY - rect.top;
top = Math.max(thumb.value.offsetHeight / 2, top);
top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
props.color.set("alpha", Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100));
}
}
function update() {
thumbLeft.value = getThumbLeft();
thumbTop.value = getThumbTop();
background.value = getBackground();
}
vue.onMounted(() => {
if (!bar.value || !thumb.value)
return;
const dragConfig = {
drag: (event) => {
handleDrag(event);
},
end: (event) => {
handleDrag(event);
}
};
draggable(bar.value, dragConfig);
draggable(thumb.value, dragConfig);
update();
});
return {
thumb,
bar,
thumbLeft,
thumbTop,
background,
handleClick,
update,
ns
};
}
});
function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.is("vertical", _ctx.vertical)])
}, [
vue.createElementVNode("div", {
ref: "bar",
class: vue.normalizeClass(_ctx.ns.e("bar")),
style: vue.normalizeStyle({
background: _ctx.background
}),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
}, null, 6),
vue.createElementVNode("div", {
ref: "thumb",
class: vue.normalizeClass(_ctx.ns.e("thumb")),
style: vue.normalizeStyle({
left: _ctx.thumbLeft + "px",
top: _ctx.thumbTop + "px"
})
}, null, 6)
], 2);
}
var AlphaSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$t], ["__file", "alpha-slider.vue"]]);
const _sfc_main$1u = vue.defineComponent({
name: "ElColorHueSlider",
props: {
color: {
type: Object,
required: true
},
vertical: Boolean
},
setup(props) {
const ns = useNamespace("color-hue-slider");
const instance = vue.getCurrentInstance();
const thumb = vue.ref();
const bar = vue.ref();
const thumbLeft = vue.ref(0);
const thumbTop = vue.ref(0);
const hueValue = vue.computed(() => {
return props.color.get("hue");
});
vue.watch(() => hueValue.value, () => {
update();
});
function handleClick(event) {
const target = event.target;
if (target !== thumb.value) {
handleDrag(event);
}
}
function handleDrag(event) {
if (!bar.value || !thumb.value)
return;
const el = instance.vnode.el;
const rect = el.getBoundingClientRect();
const { clientX, clientY } = getClientXY(event);
let hue;
if (!props.vertical) {
let left = clientX - rect.left;
left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
left = Math.max(thumb.value.offsetWidth / 2, left);
hue = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360);
} else {
let top = clientY - rect.top;
top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
top = Math.max(thumb.value.offsetHeight / 2, top);
hue = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360);
}
props.color.set("hue", hue);
}
function getThumbLeft() {
if (!thumb.value)
return 0;
const el = instance.vnode.el;
if (props.vertical)
return 0;
const hue = props.color.get("hue");
if (!el)
return 0;
return Math.round(hue * (el.offsetWidth - thumb.value.offsetWidth / 2) / 360);
}
function getThumbTop() {
if (!thumb.value)
return 0;
const el = instance.vnode.el;
if (!props.vertical)
return 0;
const hue = props.color.get("hue");
if (!el)
return 0;
return Math.round(hue * (el.offsetHeight - thumb.value.offsetHeight / 2) / 360);
}
function update() {
thumbLeft.value = getThumbLeft();
thumbTop.value = getThumbTop();
}
vue.onMounted(() => {
if (!bar.value || !thumb.value)
return;
const dragConfig = {
drag: (event) => {
handleDrag(event);
},
end: (event) => {
handleDrag(event);
}
};
draggable(bar.value, dragConfig);
draggable(thumb.value, dragConfig);
update();
});
return {
bar,
thumb,
thumbLeft,
thumbTop,
hueValue,
handleClick,
update,
ns
};
}
});
function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.is("vertical", _ctx.vertical)])
}, [
vue.createElementVNode("div", {
ref: "bar",
class: vue.normalizeClass(_ctx.ns.e("bar")),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
}, null, 2),
vue.createElementVNode("div", {
ref: "thumb",
class: vue.normalizeClass(_ctx.ns.e("thumb")),
style: vue.normalizeStyle({
left: _ctx.thumbLeft + "px",
top: _ctx.thumbTop + "px"
})
}, null, 6)
], 2);
}
var HueSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$s], ["__file", "hue-slider.vue"]]);
const colorPickerProps = buildProps({
modelValue: String,
id: String,
showAlpha: Boolean,
colorFormat: String,
disabled: Boolean,
size: useSizeProp,
popperClass: {
type: String,
default: ""
},
label: {
type: String,
default: void 0
},
tabindex: {
type: [String, Number],
default: 0
},
predefine: {
type: definePropType(Array)
},
validateEvent: {
type: Boolean,
default: true
}
});
const colorPickerEmits = {
[UPDATE_MODEL_EVENT]: (val) => isString(val) || isNil(val),
[CHANGE_EVENT]: (val) => isString(val) || isNil(val),
activeChange: (val) => isString(val) || isNil(val)
};
const colorPickerContextKey = Symbol("colorPickerContextKey");
const hsv2hsl = function(hue, sat, val) {
return [
hue,
sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue) || 0,
hue / 2
];
};
const isOnePointZero = function(n) {
return typeof n === "string" && n.includes(".") && Number.parseFloat(n) === 1;
};
const isPercentage = function(n) {
return typeof n === "string" && n.includes("%");
};
const bound01 = function(value, max) {
if (isOnePointZero(value))
value = "100%";
const processPercent = isPercentage(value);
value = Math.min(max, Math.max(0, Number.parseFloat(`${value}`)));
if (processPercent) {
value = Number.parseInt(`${value * max}`, 10) / 100;
}
if (Math.abs(value - max) < 1e-6) {
return 1;
}
return value % max / Number.parseFloat(max);
};
const INT_HEX_MAP = {
10: "A",
11: "B",
12: "C",
13: "D",
14: "E",
15: "F"
};
const hexOne = (value) => {
value = Math.min(Math.round(value), 255);
const high = Math.floor(value / 16);
const low = value % 16;
return `${INT_HEX_MAP[high] || high}${INT_HEX_MAP[low] || low}`;
};
const toHex = function({ r, g, b }) {
if (Number.isNaN(+r) || Number.isNaN(+g) || Number.isNaN(+b))
return "";
return `#${hexOne(r)}${hexOne(g)}${hexOne(b)}`;
};
const HEX_INT_MAP = {
A: 10,
B: 11,
C: 12,
D: 13,
E: 14,
F: 15
};
const parseHexChannel = function(hex) {
if (hex.length === 2) {
return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
}
return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
};
const hsl2hsv = function(hue, sat, light) {
sat = sat / 100;
light = light / 100;
let smin = sat;
const lmin = Math.max(light, 0.01);
light *= 2;
sat *= light <= 1 ? light : 2 - light;
smin *= lmin <= 1 ? lmin : 2 - lmin;
const v = (light + sat) / 2;
const sv = light === 0 ? 2 * smin / (lmin + smin) : 2 * sat / (light + sat);
return {
h: hue,
s: sv * 100,
v: v * 100
};
};
const rgb2hsv = (r, g, b) => {
r = bound01(r, 255);
g = bound01(g, 255);
b = bound01(b, 255);
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h;
const v = max;
const d = max - min;
const s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0;
} else {
switch (max) {
case r: {
h = (g - b) / d + (g < b ? 6 : 0);
break;
}
case g: {
h = (b - r) / d + 2;
break;
}
case b: {
h = (r - g) / d + 4;
break;
}
}
h /= 6;
}
return { h: h * 360, s: s * 100, v: v * 100 };
};
const hsv2rgb = function(h, s, v) {
h = bound01(h, 360) * 6;
s = bound01(s, 100);
v = bound01(v, 100);
const i = Math.floor(h);
const f = h - i;
const p = v * (1 - s);
const q = v * (1 - f * s);
const t = v * (1 - (1 - f) * s);
const mod = i % 6;
const r = [v, q, p, p, t, v][mod];
const g = [t, v, v, q, p, p][mod];
const b = [p, p, t, v, v, q][mod];
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255)
};
};
class Color {
constructor(options = {}) {
this._hue = 0;
this._saturation = 100;
this._value = 100;
this._alpha = 100;
this.enableAlpha = false;
this.format = "hex";
this.value = "";
for (const option in options) {
if (hasOwn(options, option)) {
this[option] = options[option];
}
}
if (options.value) {
this.fromString(options.value);
} else {
this.doOnChange();
}
}
set(prop, value) {
if (arguments.length === 1 && typeof prop === "object") {
for (const p in prop) {
if (hasOwn(prop, p)) {
this.set(p, prop[p]);
}
}
return;
}
this[`_${prop}`] = value;
this.doOnChange();
}
get(prop) {
if (prop === "alpha") {
return Math.floor(this[`_${prop}`]);
}
return this[`_${prop}`];
}
toRgb() {
return hsv2rgb(this._hue, this._saturation, this._value);
}
fromString(value) {
if (!value) {
this._hue = 0;
this._saturation = 100;
this._value = 100;
this.doOnChange();
return;
}
const fromHSV = (h, s, v) => {
this._hue = Math.max(0, Math.min(360, h));
this._saturation = Math.max(0, Math.min(100, s));
this._value = Math.max(0, Math.min(100, v));
this.doOnChange();
};
if (value.includes("hsl")) {
const parts = value.replace(/hsla|hsl|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10));
if (parts.length === 4) {
this._alpha = Number.parseFloat(parts[3]) * 100;
} else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);
fromHSV(h, s, v);
}
} else if (value.includes("hsv")) {
const parts = value.replace(/hsva|hsv|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10));
if (parts.length === 4) {
this._alpha = Number.parseFloat(parts[3]) * 100;
} else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
fromHSV(parts[0], parts[1], parts[2]);
}
} else if (value.includes("rgb")) {
const parts = value.replace(/rgba|rgb|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val, index) => index > 2 ? Number.parseFloat(val) : Number.parseInt(val, 10));
if (parts.length === 4) {
this._alpha = Number.parseFloat(parts[3]) * 100;
} else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);
fromHSV(h, s, v);
}
} else if (value.includes("#")) {
const hex = value.replace("#", "").trim();
if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{8}$/.test(hex))
return;
let r, g, b;
if (hex.length === 3) {
r = parseHexChannel(hex[0] + hex[0]);
g = parseHexChannel(hex[1] + hex[1]);
b = parseHexChannel(hex[2] + hex[2]);
} else if (hex.length === 6 || hex.length === 8) {
r = parseHexChannel(hex.slice(0, 2));
g = parseHexChannel(hex.slice(2, 4));
b = parseHexChannel(hex.slice(4, 6));
}
if (hex.length === 8) {
this._alpha = parseHexChannel(hex.slice(6)) / 255 * 100;
} else if (hex.length === 3 || hex.length === 6) {
this._alpha = 100;
}
const { h, s, v } = rgb2hsv(r, g, b);
fromHSV(h, s, v);
}
}
compare(color) {
return Math.abs(color._hue - this._hue) < 2 && Math.abs(color._saturation - this._saturation) < 1 && Math.abs(color._value - this._value) < 1 && Math.abs(color._alpha - this._alpha) < 1;
}
doOnChange() {
const { _hue, _saturation, _value, _alpha, format } = this;
if (this.enableAlpha) {
switch (format) {
case "hsl": {
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.value = `hsla(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%, ${this.get("alpha") / 100})`;
break;
}
case "hsv": {
this.value = `hsva(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%, ${this.get("alpha") / 100})`;
break;
}
case "hex": {
this.value = `${toHex(hsv2rgb(_hue, _saturation, _value))}${hexOne(_alpha * 255 / 100)}`;
break;
}
default: {
const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
this.value = `rgba(${r}, ${g}, ${b}, ${this.get("alpha") / 100})`;
}
}
} else {
switch (format) {
case "hsl": {
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.value = `hsl(${_hue}, ${Math.round(hsl[1] * 100)}%, ${Math.round(hsl[2] * 100)}%)`;
break;
}
case "hsv": {
this.value = `hsv(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%)`;
break;
}
case "rgb": {
const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
this.value = `rgb(${r}, ${g}, ${b})`;
break;
}
default: {
this.value = toHex(hsv2rgb(_hue, _saturation, _value));
}
}
}
}
}
const _sfc_main$1t = vue.defineComponent({
props: {
colors: {
type: Array,
required: true
},
color: {
type: Object,
required: true
}
},
setup(props) {
const ns = useNamespace("color-predefine");
const { currentColor } = vue.inject(colorPickerContextKey);
const rgbaColors = vue.ref(parseColors(props.colors, props.color));
vue.watch(() => currentColor.value, (val) => {
const color = new Color();
color.fromString(val);
rgbaColors.value.forEach((item) => {
item.selected = color.compare(item);
});
});
vue.watchEffect(() => {
rgbaColors.value = parseColors(props.colors, props.color);
});
function handleSelect(index) {
props.color.fromString(props.colors[index]);
}
function parseColors(colors, color) {
return colors.map((value) => {
const c = new Color();
c.enableAlpha = true;
c.format = "rgba";
c.fromString(value);
c.selected = c.value === color.value;
return c;
});
}
return {
rgbaColors,
handleSelect,
ns
};
}
});
const _hoisted_1$M = ["onClick"];
function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(_ctx.ns.b())
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("colors"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rgbaColors, (item, index) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: _ctx.colors[index],
class: vue.normalizeClass([
_ctx.ns.e("color-selector"),
_ctx.ns.is("alpha", item._alpha < 100),
{ selected: item.selected }
]),
onClick: ($event) => _ctx.handleSelect(index)
}, [
vue.createElementVNode("div", {
style: vue.normalizeStyle({ backgroundColor: item.value })
}, null, 4)
], 10, _hoisted_1$M);
}), 128))
], 2)
], 2);
}
var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$r], ["__file", "predefine.vue"]]);
const _sfc_main$1s = vue.defineComponent({
name: "ElSlPanel",
props: {
color: {
type: Object,
required: true
}
},
setup(props) {
const ns = useNamespace("color-svpanel");
const instance = vue.getCurrentInstance();
const cursorTop = vue.ref(0);
const cursorLeft = vue.ref(0);
const background = vue.ref("hsl(0, 100%, 50%)");
const colorValue = vue.computed(() => {
const hue = props.color.get("hue");
const value = props.color.get("value");
return { hue, value };
});
function update() {
const saturation = props.color.get("saturation");
const value = props.color.get("value");
const el = instance.vnode.el;
const { clientWidth: width, clientHeight: height } = el;
cursorLeft.value = saturation * width / 100;
cursorTop.value = (100 - value) * height / 100;
background.value = `hsl(${props.color.get("hue")}, 100%, 50%)`;
}
function handleDrag(event) {
const el = instance.vnode.el;
const rect = el.getBoundingClientRect();
const { clientX, clientY } = getClientXY(event);
let left = clientX - rect.left;
let top = clientY - rect.top;
left = Math.max(0, left);
left = Math.min(left, rect.width);
top = Math.max(0, top);
top = Math.min(top, rect.height);
cursorLeft.value = left;
cursorTop.value = top;
props.color.set({
saturation: left / rect.width * 100,
value: 100 - top / rect.height * 100
});
}
vue.watch(() => colorValue.value, () => {
update();
});
vue.onMounted(() => {
draggable(instance.vnode.el, {
drag: (event) => {
handleDrag(event);
},
end: (event) => {
handleDrag(event);
}
});
update();
});
return {
cursorTop,
cursorLeft,
background,
colorValue,
handleDrag,
update,
ns
};
}
});
const _hoisted_1$L = /* @__PURE__ */ vue.createElementVNode("div", null, null, -1);
const _hoisted_2$u = [
_hoisted_1$L
];
function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(_ctx.ns.b()),
style: vue.normalizeStyle({
backgroundColor: _ctx.background
})
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("white"))
}, null, 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("black"))
}, null, 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("cursor")),
style: vue.normalizeStyle({
top: _ctx.cursorTop + "px",
left: _ctx.cursorLeft + "px"
})
}, _hoisted_2$u, 6)
], 6);
}
var SvPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$q], ["__file", "sv-panel.vue"]]);
const _hoisted_1$K = ["id", "aria-label", "aria-labelledby", "aria-description", "tabindex", "onKeydown"];
const __default__$W = vue.defineComponent({
name: "ElColorPicker"
});
const _sfc_main$1r = /* @__PURE__ */ vue.defineComponent({
...__default__$W,
props: colorPickerProps,
emits: colorPickerEmits,
setup(__props, { expose, emit }) {
const props = __props;
const { t } = useLocale();
const ns = useNamespace("color");
const { formItem } = useFormItem();
const colorSize = useSize();
const colorDisabled = useDisabled();
const { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {
formItemContext: formItem
});
const hue = vue.ref();
const sv = vue.ref();
const alpha = vue.ref();
const popper = vue.ref();
let shouldActiveChange = true;
const color = vue.reactive(new Color({
enableAlpha: props.showAlpha,
format: props.colorFormat || "",
value: props.modelValue
}));
const showPicker = vue.ref(false);
const showPanelColor = vue.ref(false);
const customInput = vue.ref("");
const displayedColor = vue.computed(() => {
if (!props.modelValue && !showPanelColor.value) {
return "transparent";
}
return displayedRgb(color, props.showAlpha);
});
const currentColor = vue.computed(() => {
return !props.modelValue && !showPanelColor.value ? "" : color.value;
});
const buttonAriaLabel = vue.computed(() => {
return !isLabeledByFormItem.value ? props.label || t("el.colorpicker.defaultLabel") : void 0;
});
const buttonAriaLabelledby = vue.computed(() => {
return isLabeledByFormItem.value ? formItem == null ? void 0 : formItem.labelId : void 0;
});
function displayedRgb(color2, showAlpha) {
if (!(color2 instanceof Color)) {
throw new TypeError("color should be instance of _color Class");
}
const { r, g, b } = color2.toRgb();
return showAlpha ? `rgba(${r}, ${g}, ${b}, ${color2.get("alpha") / 100})` : `rgb(${r}, ${g}, ${b})`;
}
function setShowPicker(value) {
showPicker.value = value;
}
const debounceSetShowPicker = debounce(setShowPicker, 100);
function hide() {
debounceSetShowPicker(false);
resetColor();
}
function resetColor() {
vue.nextTick(() => {
if (props.modelValue) {
color.fromString(props.modelValue);
} else {
color.value = "";
vue.nextTick(() => {
showPanelColor.value = false;
});
}
});
}
function handleTrigger() {
if (colorDisabled.value)
return;
debounceSetShowPicker(!showPicker.value);
}
function handleConfirm() {
color.fromString(customInput.value);
}
function confirmValue() {
const value = color.value;
emit(UPDATE_MODEL_EVENT, value);
emit("change", value);
if (props.validateEvent) {
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
}
debounceSetShowPicker(false);
vue.nextTick(() => {
const newColor = new Color({
enableAlpha: props.showAlpha,
format: props.colorFormat || "",
value: props.modelValue
});
if (!color.compare(newColor)) {
resetColor();
}
});
}
function clear() {
debounceSetShowPicker(false);
emit(UPDATE_MODEL_EVENT, null);
emit("change", null);
if (props.modelValue !== null && props.validateEvent) {
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
}
resetColor();
}
vue.onMounted(() => {
if (props.modelValue) {
customInput.value = currentColor.value;
}
});
vue.watch(() => props.modelValue, (newVal) => {
if (!newVal) {
showPanelColor.value = false;
} else if (newVal && newVal !== color.value) {
shouldActiveChange = false;
color.fromString(newVal);
}
});
vue.watch(() => currentColor.value, (val) => {
customInput.value = val;
shouldActiveChange && emit("activeChange", val);
shouldActiveChange = true;
});
vue.watch(() => color.value, () => {
if (!props.modelValue && !showPanelColor.value) {
showPanelColor.value = true;
}
});
vue.watch(() => showPicker.value, () => {
vue.nextTick(() => {
var _a, _b, _c;
(_a = hue.value) == null ? void 0 : _a.update();
(_b = sv.value) == null ? void 0 : _b.update();
(_c = alpha.value) == null ? void 0 : _c.update();
});
});
vue.provide(colorPickerContextKey, {
currentColor
});
expose({
color
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), {
ref_key: "popper",
ref: popper,
visible: showPicker.value,
"show-arrow": false,
"fallback-placements": ["bottom", "top", "right", "left"],
offset: 0,
"gpu-acceleration": false,
"popper-class": [vue.unref(ns).be("picker", "panel"), vue.unref(ns).b("dropdown"), _ctx.popperClass],
"stop-popper-mouse-event": false,
effect: "light",
trigger: "click",
transition: `${vue.unref(ns).namespace.value}-zoom-in-top`,
persistent: ""
}, {
content: vue.withCtx(() => [
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", null, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).be("dropdown", "main-wrapper"))
}, [
vue.createVNode(HueSlider, {
ref_key: "hue",
ref: hue,
class: "hue-slider",
color: vue.unref(color),
vertical: ""
}, null, 8, ["color"]),
vue.createVNode(SvPanel, {
ref: "svPanel",
color: vue.unref(color)
}, null, 8, ["color"])
], 2),
_ctx.showAlpha ? (vue.openBlock(), vue.createBlock(AlphaSlider, {
key: 0,
ref_key: "alpha",
ref: alpha,
color: vue.unref(color)
}, null, 8, ["color"])) : vue.createCommentVNode("v-if", true),
_ctx.predefine ? (vue.openBlock(), vue.createBlock(Predefine, {
key: 1,
ref: "predefine",
color: vue.unref(color),
colors: _ctx.predefine
}, null, 8, ["color", "colors"])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).be("dropdown", "btns"))
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(ns).be("dropdown", "value"))
}, [
vue.createVNode(vue.unref(ElInput), {
modelValue: customInput.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customInput.value = $event),
"validate-event": false,
size: "small",
onKeyup: vue.withKeys(handleConfirm, ["enter"]),
onBlur: handleConfirm
}, null, 8, ["modelValue", "onKeyup"])
], 2),
vue.createVNode(vue.unref(ElButton), {
class: vue.normalizeClass(vue.unref(ns).be("dropdown", "link-btn")),
text: "",
size: "small",
onClick: clear
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.colorpicker.clear")), 1)
]),
_: 1
}, 8, ["class"]),
vue.createVNode(vue.unref(ElButton), {
plain: "",
size: "small",
class: vue.normalizeClass(vue.unref(ns).be("dropdown", "btn")),
onClick: confirmValue
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.colorpicker.confirm")), 1)
]),
_: 1
}, 8, ["class"])
], 2)
])), [
[vue.unref(ClickOutside), hide]
])
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", {
id: vue.unref(buttonId),
class: vue.normalizeClass([
vue.unref(ns).b("picker"),
vue.unref(ns).is("disabled", vue.unref(colorDisabled)),
vue.unref(ns).bm("picker", vue.unref(colorSize))
]),
role: "button",
"aria-label": vue.unref(buttonAriaLabel),
"aria-labelledby": vue.unref(buttonAriaLabelledby),
"aria-description": vue.unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }),
tabindex: _ctx.tabindex,
onKeydown: vue.withKeys(handleTrigger, ["enter"])
}, [
vue.unref(colorDisabled) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).be("picker", "mask"))
}, null, 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).be("picker", "trigger")),
onClick: handleTrigger
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass([vue.unref(ns).be("picker", "color"), vue.unref(ns).is("alpha", _ctx.showAlpha)])
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(ns).be("picker", "color-inner")),
style: vue.normalizeStyle({
backgroundColor: vue.unref(displayedColor)
})
}, [
vue.withDirectives(vue.createVNode(vue.unref(ElIcon), {
class: vue.normalizeClass([vue.unref(ns).be("picker", "icon"), vue.unref(ns).is("icon-arrow-down")])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_down_default))
]),
_: 1
}, 8, ["class"]), [
[vue.vShow, _ctx.modelValue || showPanelColor.value]
]),
!_ctx.modelValue && !showPanelColor.value ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass([vue.unref(ns).be("picker", "empty"), vue.unref(ns).is("icon-close")])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(close_default))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true)
], 6)
], 2)
], 2)
], 42, _hoisted_1$K)
]),
_: 1
}, 8, ["visible", "popper-class", "transition"]);
};
}
});
var ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["__file", "color-picker.vue"]]);
const ElColorPicker = withInstall(ColorPicker);
const messageConfig = {};
const configProviderProps = buildProps({
a11y: {
type: Boolean,
default: true
},
locale: {
type: definePropType(Object)
},
size: useSizeProp,
button: {
type: definePropType(Object)
},
experimentalFeatures: {
type: definePropType(Object)
},
keyboardNavigation: {
type: Boolean,
default: true
},
message: {
type: definePropType(Object)
},
zIndex: Number,
namespace: {
type: String,
default: "el"
}
});
const ConfigProvider = vue.defineComponent({
name: "ElConfigProvider",
props: configProviderProps,
setup(props, { slots }) {
vue.watch(() => props.message, (val) => {
Object.assign(messageConfig, val != null ? val : {});
}, { immediate: true, deep: true });
const config = provideGlobalConfig(props);
return () => vue.renderSlot(slots, "default", { config: config == null ? void 0 : config.value });
}
});
const ElConfigProvider = withInstall(ConfigProvider);
const __default__$V = vue.defineComponent({
name: "ElContainer"
});
const _sfc_main$1q = /* @__PURE__ */ vue.defineComponent({
...__default__$V,
props: {
direction: {
type: String
}
},
setup(__props) {
const props = __props;
const slots = vue.useSlots();
const ns = useNamespace("container");
const isVertical = vue.computed(() => {
if (props.direction === "vertical") {
return true;
} else if (props.direction === "horizontal") {
return false;
}
if (slots && slots.default) {
const vNodes = slots.default();
return vNodes.some((vNode) => {
const tag = vNode.type.name;
return tag === "ElHeader" || tag === "ElFooter";
});
} else {
return false;
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("section", {
class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).is("vertical", vue.unref(isVertical))])
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2);
};
}
});
var Container = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["__file", "container.vue"]]);
const __default__$U = vue.defineComponent({
name: "ElAside"
});
const _sfc_main$1p = /* @__PURE__ */ vue.defineComponent({
...__default__$U,
props: {
width: {
type: String,
default: null
}
},
setup(__props) {
const props = __props;
const ns = useNamespace("aside");
const style = vue.computed(() => props.width ? ns.cssVarBlock({ width: props.width }) : {});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("aside", {
class: vue.normalizeClass(vue.unref(ns).b()),
style: vue.normalizeStyle(vue.unref(style))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 6);
};
}
});
var Aside = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__file", "aside.vue"]]);
const __default__$T = vue.defineComponent({
name: "ElFooter"
});
const _sfc_main$1o = /* @__PURE__ */ vue.defineComponent({
...__default__$T,
props: {
height: {
type: String,
default: null
}
},
setup(__props) {
const props = __props;
const ns = useNamespace("footer");
const style = vue.computed(() => props.height ? ns.cssVarBlock({ height: props.height }) : {});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("footer", {
class: vue.normalizeClass(vue.unref(ns).b()),
style: vue.normalizeStyle(vue.unref(style))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 6);
};
}
});
var Footer$2 = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__file", "footer.vue"]]);
const __default__$S = vue.defineComponent({
name: "ElHeader"
});
const _sfc_main$1n = /* @__PURE__ */ vue.defineComponent({
...__default__$S,
props: {
height: {
type: String,
default: null
}
},
setup(__props) {
const props = __props;
const ns = useNamespace("header");
const style = vue.computed(() => {
return props.height ? ns.cssVarBlock({
height: props.height
}) : {};
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("header", {
class: vue.normalizeClass(vue.unref(ns).b()),
style: vue.normalizeStyle(vue.unref(style))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 6);
};
}
});
var Header$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["__file", "header.vue"]]);
const __default__$R = vue.defineComponent({
name: "ElMain"
});
const _sfc_main$1m = /* @__PURE__ */ vue.defineComponent({
...__default__$R,
setup(__props) {
const ns = useNamespace("main");
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("main", {
class: vue.normalizeClass(vue.unref(ns).b())
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2);
};
}
});
var Main = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__file", "main.vue"]]);
const ElContainer = withInstall(Container, {
Aside,
Footer: Footer$2,
Header: Header$1,
Main
});
const ElAside = withNoopInstall(Aside);
const ElFooter = withNoopInstall(Footer$2);
const ElHeader = withNoopInstall(Header$1);
const ElMain = withNoopInstall(Main);
var advancedFormat$1 = {exports: {}};
(function(module, exports) {
!function(e, t) {
module.exports = t() ;
}(commonjsGlobal, function() {
return function(e, t, r) {
var n = t.prototype, s = n.format;
r.en.ordinal = function(e2) {
var t2 = ["th", "st", "nd", "rd"], r2 = e2 % 100;
return "[" + e2 + (t2[(r2 - 20) % 10] || t2[r2] || t2[0]) + "]";
}, n.format = function(e2) {
var t2 = this, r2 = this.$locale();
if (!this.isValid())
return s.bind(this)(e2);
var n2 = this.$utils(), a = (e2 || "YYYY-MM-DDTHH:mm:ssZ").replace(/\[([^\]]+)]|Q|wo|ww|w|WW|W|zzz|z|gggg|GGGG|Do|X|x|k{1,2}|S/g, function(e3) {
switch (e3) {
case "Q":
return Math.ceil((t2.$M + 1) / 3);
case "Do":
return r2.ordinal(t2.$D);
case "gggg":
return t2.weekYear();
case "GGGG":
return t2.isoWeekYear();
case "wo":
return r2.ordinal(t2.week(), "W");
case "w":
case "ww":
return n2.s(t2.week(), e3 === "w" ? 1 : 2, "0");
case "W":
case "WW":
return n2.s(t2.isoWeek(), e3 === "W" ? 1 : 2, "0");
case "k":
case "kk":
return n2.s(String(t2.$H === 0 ? 24 : t2.$H), e3 === "k" ? 1 : 2, "0");
case "X":
return Math.floor(t2.$d.getTime() / 1e3);
case "x":
return t2.$d.getTime();
case "z":
return "[" + t2.offsetName() + "]";
case "zzz":
return "[" + t2.offsetName("long") + "]";
default:
return e3;
}
});
return s.bind(this)(a);
};
};
});
})(advancedFormat$1);
var advancedFormat = advancedFormat$1.exports;
var weekOfYear$1 = {exports: {}};
(function(module, exports) {
!function(e, t) {
module.exports = t() ;
}(commonjsGlobal, function() {
var e = "week", t = "year";
return function(i, n, r) {
var f = n.prototype;
f.week = function(i2) {
if (i2 === void 0 && (i2 = null), i2 !== null)
return this.add(7 * (i2 - this.week()), "day");
var n2 = this.$locale().yearStart || 1;
if (this.month() === 11 && this.date() > 25) {
var f2 = r(this).startOf(t).add(1, t).date(n2), s = r(this).endOf(e);
if (f2.isBefore(s))
return 1;
}
var a = r(this).startOf(t).date(n2).startOf(e).subtract(1, "millisecond"), o = this.diff(a, e, true);
return o < 0 ? r(this).startOf("week").week() : Math.ceil(o);
}, f.weeks = function(e2) {
return e2 === void 0 && (e2 = null), this.week(e2);
};
};
});
})(weekOfYear$1);
var weekOfYear = weekOfYear$1.exports;
var weekYear$1 = {exports: {}};
(function(module, exports) {
!function(e, t) {
module.exports = t() ;
}(commonjsGlobal, function() {
return function(e, t) {
t.prototype.weekYear = function() {
var e2 = this.month(), t2 = this.week(), n = this.year();
return t2 === 1 && e2 === 11 ? n + 1 : e2 === 0 && t2 >= 52 ? n - 1 : n;
};
};
});
})(weekYear$1);
var weekYear = weekYear$1.exports;
var dayOfYear$1 = {exports: {}};
(function(module, exports) {
!function(e, t) {
module.exports = t() ;
}(commonjsGlobal, function() {
return function(e, t, n) {
t.prototype.dayOfYear = function(e2) {
var t2 = Math.round((n(this).startOf("day") - n(this).startOf("year")) / 864e5) + 1;
return e2 == null ? t2 : this.add(e2 - t2, "day");
};
};
});
})(dayOfYear$1);
var dayOfYear = dayOfYear$1.exports;
var isSameOrAfter$1 = {exports: {}};
(function(module, exports) {
!function(e, t) {
module.exports = t() ;
}(commonjsGlobal, function() {
return function(e, t) {
t.prototype.isSameOrAfter = function(e2, t2) {
return this.isSame(e2, t2) || this.isAfter(e2, t2);
};
};
});
})(isSameOrAfter$1);
var isSameOrAfter = isSameOrAfter$1.exports;
var isSameOrBefore$1 = {exports: {}};
(function(module, exports) {
!function(e, i) {
module.exports = i() ;
}(commonjsGlobal, function() {
return function(e, i) {
i.prototype.isSameOrBefore = function(e2, i2) {
return this.isSame(e2, i2) || this.isBefore(e2, i2);
};
};
});
})(isSameOrBefore$1);
var isSameOrBefore = isSameOrBefore$1.exports;
const datePickerProps = buildProps({
type: {
type: definePropType(String),
default: "date"
}
});
const selectionModes = ["date", "dates", "year", "month", "week", "range"];
const datePickerSharedProps = buildProps({
disabledDate: {
type: definePropType(Function)
},
date: {
type: definePropType(Object),
required: true
},
minDate: {
type: definePropType(Object)
},
maxDate: {
type: definePropType(Object)
},
parsedValue: {
type: definePropType([Object, Array])
},
rangeState: {
type: definePropType(Object),
default: () => ({
endDate: null,
selecting: false
})
}
});
const panelSharedProps = buildProps({
type: {
type: definePropType(String),
required: true,
values: datePickTypes
}
});
const panelRangeSharedProps = buildProps({
unlinkPanels: Boolean,
parsedValue: {
type: definePropType(Array)
}
});
const selectionModeWithDefault = (mode) => {
return {
type: String,
values: selectionModes,
default: mode
};
};
const panelDatePickProps = buildProps({
...panelSharedProps,
parsedValue: {
type: definePropType([Object, Array])
},
visible: {
type: Boolean
},
format: {
type: String,
default: ""
}
});
const basicDateTableProps = buildProps({
...datePickerSharedProps,
cellClassName: {
type: definePropType(Function)
},
showWeekNumber: Boolean,
selectionMode: selectionModeWithDefault("date")
});
const isValidRange = (range) => {
if (!isArray(range))
return false;
const [left, right] = range;
return dayjs.isDayjs(left) && dayjs.isDayjs(right) && left.isSameOrBefore(right);
};
const getDefaultValue = (defaultValue, { lang, unit, unlinkPanels }) => {
let start;
if (isArray(defaultValue)) {
let [left, right] = defaultValue.map((d) => dayjs(d).locale(lang));
if (!unlinkPanels) {
right = left.add(1, unit);
}
return [left, right];
} else if (defaultValue) {
start = dayjs(defaultValue);
} else {
start = dayjs();
}
start = start.locale(lang);
return [start, start.add(1, unit)];
};
const buildPickerTable = (dimension, rows, {
columnIndexOffset,
startDate,
nextEndDate,
now,
unit,
relativeDateGetter,
setCellMetadata,
setRowMetadata
}) => {
for (let rowIndex = 0; rowIndex < dimension.row; rowIndex++) {
const row = rows[rowIndex];
for (let columnIndex = 0; columnIndex < dimension.column; columnIndex++) {
let cell = row[columnIndex + columnIndexOffset];
if (!cell) {
cell = {
row: rowIndex,
column: columnIndex,
type: "normal",
inRange: false,
start: false,
end: false
};
}
const index = rowIndex * dimension.column + columnIndex;
const nextStartDate = relativeDateGetter(index);
cell.dayjs = nextStartDate;
cell.date = nextStartDate.toDate();
cell.timestamp = nextStartDate.valueOf();
cell.type = "normal";
cell.inRange = !!(startDate && nextStartDate.isSameOrAfter(startDate, unit) && nextEndDate && nextStartDate.isSameOrBefore(nextEndDate, unit)) || !!(startDate && nextStartDate.isSameOrBefore(startDate, unit) && nextEndDate && nextStartDate.isSameOrAfter(nextEndDate, unit));
if (startDate == null ? void 0 : startDate.isSameOrAfter(nextEndDate)) {
cell.start = !!nextEndDate && nextStartDate.isSame(nextEndDate, unit);
cell.end = startDate && nextStartDate.isSame(startDate, unit);
} else {
cell.start = !!startDate && nextStartDate.isSame(startDate, unit);
cell.end = !!nextEndDate && nextStartDate.isSame(nextEndDate, unit);
}
const isToday = nextStartDate.isSame(now, unit);
if (isToday) {
cell.type = "today";
}
setCellMetadata == null ? void 0 : setCellMetadata(cell, { rowIndex, columnIndex });
row[columnIndex + columnIndexOffset] = cell;
}
setRowMetadata == null ? void 0 : setRowMetadata(row);
}
};
const basicCellProps = buildProps({
cell: {
type: definePropType(Object)
}
});
var ElDatePickerCell = vue.defineComponent({
name: "ElDatePickerCell",
props: basicCellProps,
setup(props) {
const ns = useNamespace("date-table-cell");
const {
slots
} = vue.inject(ROOT_PICKER_INJECTION_KEY);
return () => {
const {
cell
} = props;
if (slots.default) {
const list = slots.default(cell).filter((item) => {
return item.patchFlag !== -2 && item.type.toString() !== "Symbol(Comment)";
});
if (list.length) {
return list;
}
}
return vue.createVNode("div", {
"class": ns.b()
}, [vue.createVNode("span", {
"class": ns.e("text")
}, [cell == null ? void 0 : cell.text])]);
};
}
});
const _hoisted_1$J = ["aria-label"];
const _hoisted_2$t = {
key: 0,
scope: "col"
};
const _hoisted_3$f = ["aria-label"];
const _hoisted_4$b = ["aria-current", "aria-selected", "tabindex"];
const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({
__name: "basic-date-table",
props: basicDateTableProps,
emits: ["changerange", "pick", "select"],
setup(__props, { expose, emit }) {
const props = __props;
const ns = useNamespace("date-table");
const { t, lang } = useLocale();
const tbodyRef = vue.ref();
const currentCellRef = vue.ref();
const lastRow = vue.ref();
const lastColumn = vue.ref();
const tableRows = vue.ref([[], [], [], [], [], []]);
let focusWithClick = false;
const firstDayOfWeek = props.date.$locale().weekStart || 7;
const WEEKS_CONSTANT = props.date.locale("en").localeData().weekdaysShort().map((_) => _.toLowerCase());
const offsetDay = vue.computed(() => {
return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek;
});
const startDate = vue.computed(() => {
const startDayOfMonth = props.date.startOf("month");
return startDayOfMonth.subtract(startDayOfMonth.day() || 7, "day");
});
const WEEKS = vue.computed(() => {
return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(firstDayOfWeek, firstDayOfWeek + 7);
});
const hasCurrent = vue.computed(() => {
return flatten(rows.value).some((row) => {
return row.isCurrent;
});
});
const days = vue.computed(() => {
const startOfMonth = props.date.startOf("month");
const startOfMonthDay = startOfMonth.day() || 7;
const dateCountOfMonth = startOfMonth.daysInMonth();
const dateCountOfLastMonth = startOfMonth.subtract(1, "month").daysInMonth();
return {
startOfMonthDay,
dateCountOfMonth,
dateCountOfLastMonth
};
});
const selectedDate = vue.computed(() => {
return props.selectionMode === "dates" ? castArray(props.parsedValue) : [];
});
const setDateText = (cell, {
count,
rowIndex,
columnIndex
}) => {
const { startOfMonthDay, dateCountOfMonth, dateCountOfLastMonth } = vue.unref(days);
const offset = vue.unref(offsetDay);
if (rowIndex >= 0 && rowIndex <= 1) {
const numberOfDaysFromPreviousMonth = startOfMonthDay + offset < 0 ? 7 + startOfMonthDay + offset : startOfMonthDay + offset;
if (columnIndex + rowIndex * 7 >= numberOfDaysFromPreviousMonth) {
cell.text = count;
return true;
} else {
cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - columnIndex % 7) + 1 + rowIndex * 7;
cell.type = "prev-month";
}
} else {
if (count <= dateCountOfMonth) {
cell.text = count;
} else {
cell.text = count - dateCountOfMonth;
cell.type = "next-month";
}
return true;
}
return false;
};
const setCellMetadata = (cell, {
columnIndex,
rowIndex
}, count) => {
const { disabledDate, cellClassName } = props;
const _selectedDate = vue.unref(selectedDate);
const shouldIncrement = setDateText(cell, { count, rowIndex, columnIndex });
const cellDate = cell.dayjs.toDate();
cell.selected = _selectedDate.find((d) => d.valueOf() === cell.dayjs.valueOf());
cell.isSelected = !!cell.selected;
cell.isCurrent = isCurrent(cell);
cell.disabled = disabledDate == null ? void 0 : disabledDate(cellDate);
cell.customClass = cellClassName == null ? void 0 : cellClassName(cellDate);
return shouldIncrement;
};
const setRowMetadata = (row) => {
if (props.selectionMode === "week") {
const [start, end] = props.showWeekNumber ? [1, 7] : [0, 6];
const isActive = isWeekActive(row[start + 1]);
row[start].inRange = isActive;
row[start].start = isActive;
row[end].inRange = isActive;
row[end].end = isActive;
}
};
const rows = vue.computed(() => {
const { minDate, maxDate, rangeState, showWeekNumber } = props;
const offset = offsetDay.value;
const rows_ = tableRows.value;
const dateUnit = "day";
let count = 1;
if (showWeekNumber) {
for (let rowIndex = 0; rowIndex < 6; rowIndex++) {
if (!rows_[rowIndex][0]) {
rows_[rowIndex][0] = {
type: "week",
text: startDate.value.add(rowIndex * 7 + 1, dateUnit).week()
};
}
}
}
buildPickerTable({ row: 6, column: 7 }, rows_, {
startDate: minDate,
columnIndexOffset: showWeekNumber ? 1 : 0,
nextEndDate: rangeState.endDate || maxDate || rangeState.selecting && minDate || null,
now: dayjs().locale(vue.unref(lang)).startOf(dateUnit),
unit: dateUnit,
relativeDateGetter: (idx) => startDate.value.add(idx - offset, dateUnit),
setCellMetadata: (...args) => {
if (setCellMetadata(...args, count)) {
count += 1;
}
},
setRowMetadata
});
return rows_;
});
vue.watch(() => props.date, async () => {
var _a, _b;
if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
await vue.nextTick();
(_b = currentCellRef.value) == null ? void 0 : _b.focus();
}
});
const focus = async () => {
var _a;
(_a = currentCellRef.value) == null ? void 0 : _a.focus();
};
const isNormalDay = (type = "") => {
return ["normal", "today"].includes(type);
};
const isCurrent = (cell) => {
return props.selectionMode === "date" && isNormalDay(cell.type) && cellMatchesDate(cell, props.parsedValue);
};
const cellMatchesDate = (cell, date) => {
if (!date)
return false;
return dayjs(date).locale(lang.value).isSame(props.date.date(Number(cell.text)), "day");
};
const getCellClasses = (cell) => {
const classes = [];
if (isNormalDay(cell.type) && !cell.disabled) {
classes.push("available");
if (cell.type === "today") {
classes.push("today");
}
} else {
classes.push(cell.type);
}
if (isCurrent(cell)) {
classes.push("current");
}
if (cell.inRange && (isNormalDay(cell.type) || props.selectionMode === "week")) {
classes.push("in-range");
if (cell.start) {
classes.push("start-date");
}
if (cell.end) {
classes.push("end-date");
}
}
if (cell.disabled) {
classes.push("disabled");
}
if (cell.selected) {
classes.push("selected");
}
if (cell.customClass) {
classes.push(cell.customClass);
}
return classes.join(" ");
};
const getDateOfCell = (row, column) => {
const offsetFromStart = row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - offsetDay.value;
return startDate.value.add(offsetFromStart, "day");
};
const handleMouseMove = (event) => {
var _a;
if (!props.rangeState.selecting)
return;
let target = event.target;
if (target.tagName === "SPAN") {
target = (_a = target.parentNode) == null ? void 0 : _a.parentNode;
}
if (target.tagName === "DIV") {
target = target.parentNode;
}
if (target.tagName !== "TD")
return;
const row = target.parentNode.rowIndex - 1;
const column = target.cellIndex;
if (rows.value[row][column].disabled)
return;
if (row !== lastRow.value || column !== lastColumn.value) {
lastRow.value = row;
lastColumn.value = column;
emit("changerange", {
selecting: true,
endDate: getDateOfCell(row, column)
});
}
};
const isSelectedCell = (cell) => {
return !hasCurrent.value && (cell == null ? void 0 : cell.text) === 1 && cell.type === "normal" || cell.isCurrent;
};
const handleFocus = (event) => {
if (focusWithClick || hasCurrent.value || props.selectionMode !== "date")
return;
handlePickDate(event, true);
};
const handleMouseDown = (event) => {
const target = event.target.closest("td");
if (!target)
return;
focusWithClick = true;
};
const handleMouseUp = (event) => {
const target = event.target.closest("td");
if (!target)
return;
focusWithClick = false;
};
const handlePickDate = (event, isKeyboardMovement = false) => {
const target = event.target.closest("td");
if (!target)
return;
const row = target.parentNode.rowIndex - 1;
const column = target.cellIndex;
const cell = rows.value[row][column];
if (cell.disabled || cell.type === "week")
return;
const newDate = getDateOfCell(row, column);
if (props.selectionMode === "range") {
if (!props.rangeState.selecting || !props.minDate) {
emit("pick", { minDate: newDate, maxDate: null });
emit("select", true);
} else {
if (newDate >= props.minDate) {
emit("pick", { minDate: props.minDate, maxDate: newDate });
} else {
emit("pick", { minDate: newDate, maxDate: props.minDate });
}
emit("select", false);
}
} else if (props.selectionMode === "date") {
emit("pick", newDate, isKeyboardMovement);
} else if (props.selectionMode === "week") {
const weekNumber = newDate.week();
const value = `${newDate.year()}w${weekNumber}`;
emit("pick", {
year: newDate.year(),
week: weekNumber,
value,
date: newDate.startOf("week")
});
} else if (props.selectionMode === "dates") {
const newValue = cell.selected ? castArray(props.parsedValue).filter((d) => (d == null ? void 0 : d.valueOf()) !== newDate.valueOf()) : castArray(props.parsedValue).concat([newDate]);
emit("pick", newValue);
}
};
const isWeekActive = (cell) => {
if (props.selectionMode !== "week")
return false;
let newDate = props.date.startOf("day");
if (cell.type === "prev-month") {
newDate = newDate.subtract(1, "month");
}
if (cell.type === "next-month") {
newDate = newDate.add(1, "month");
}
newDate = newDate.date(Number.parseInt(cell.text, 10));
if (props.parsedValue && !Array.isArray(props.parsedValue)) {
const dayOffset = (props.parsedValue.day() - firstDayOfWeek + 7) % 7 - 1;
const weekDate = props.parsedValue.subtract(dayOffset, "day");
return weekDate.isSame(newDate, "day");
}
return false;
};
expose({
focus
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("table", {
role: "grid",
"aria-label": vue.unref(t)("el.datepicker.dateTablePrompt"),
cellspacing: "0",
cellpadding: "0",
class: vue.normalizeClass([vue.unref(ns).b(), { "is-week-mode": _ctx.selectionMode === "week" }]),
onClick: handlePickDate,
onMousemove: handleMouseMove,
onMousedown: handleMouseDown,
onMouseup: handleMouseUp
}, [
vue.createElementVNode("tbody", {
ref_key: "tbodyRef",
ref: tbodyRef
}, [
vue.createElementVNode("tr", null, [
_ctx.showWeekNumber ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_2$t, vue.toDisplayString(vue.unref(t)("el.datepicker.week")), 1)) : vue.createCommentVNode("v-if", true),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(WEEKS), (week, key) => {
return vue.openBlock(), vue.createElementBlock("th", {
key,
scope: "col",
"aria-label": vue.unref(t)("el.datepicker.weeksFull." + week)
}, vue.toDisplayString(vue.unref(t)("el.datepicker.weeks." + week)), 9, _hoisted_3$f);
}), 128))
]),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rows), (row, rowKey) => {
return vue.openBlock(), vue.createElementBlock("tr", {
key: rowKey,
class: vue.normalizeClass([vue.unref(ns).e("row"), { current: isWeekActive(row[1]) }])
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, columnKey) => {
return vue.openBlock(), vue.createElementBlock("td", {
key: `${rowKey}.${columnKey}`,
ref_for: true,
ref: (el) => isSelectedCell(cell) && (currentCellRef.value = el),
class: vue.normalizeClass(getCellClasses(cell)),
"aria-current": cell.isCurrent ? "date" : void 0,
"aria-selected": cell.isCurrent,
tabindex: isSelectedCell(cell) ? 0 : -1,
onFocus: handleFocus
}, [
vue.createVNode(vue.unref(ElDatePickerCell), { cell }, null, 8, ["cell"])
], 42, _hoisted_4$b);
}), 128))
], 2);
}), 128))
], 512)
], 42, _hoisted_1$J);
};
}
});
var DateTable = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__file", "basic-date-table.vue"]]);
const basicMonthTableProps = buildProps({
...datePickerSharedProps,
selectionMode: selectionModeWithDefault("month")
});
const _hoisted_1$I = ["aria-label"];
const _hoisted_2$s = ["aria-selected", "aria-label", "tabindex", "onKeydown"];
const _hoisted_3$e = { class: "cell" };
const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
__name: "basic-month-table",
props: basicMonthTableProps,
emits: ["changerange", "pick", "select"],
setup(__props, { expose, emit }) {
const props = __props;
const datesInMonth = (year, month, lang2) => {
const firstDay = dayjs().locale(lang2).startOf("month").month(month).year(year);
const numOfDays = firstDay.daysInMonth();
return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
};
const ns = useNamespace("month-table");
const { t, lang } = useLocale();
const tbodyRef = vue.ref();
const currentCellRef = vue.ref();
const months = vue.ref(props.date.locale("en").localeData().monthsShort().map((_) => _.toLowerCase()));
const tableRows = vue.ref([
[],
[],
[]
]);
const lastRow = vue.ref();
const lastColumn = vue.ref();
const rows = vue.computed(() => {
var _a, _b;
const rows2 = tableRows.value;
const now = dayjs().locale(lang.value).startOf("month");
for (let i = 0; i < 3; i++) {
const row = rows2[i];
for (let j = 0; j < 4; j++) {
const cell = row[j] || (row[j] = {
row: i,
column: j,
type: "normal",
inRange: false,
start: false,
end: false,
text: -1,
disabled: false
});
cell.type = "normal";
const index = i * 4 + j;
const calTime = props.date.startOf("year").month(index);
const calEndDate = props.rangeState.endDate || props.maxDate || props.rangeState.selecting && props.minDate || null;
cell.inRange = !!(props.minDate && calTime.isSameOrAfter(props.minDate, "month") && calEndDate && calTime.isSameOrBefore(calEndDate, "month")) || !!(props.minDate && calTime.isSameOrBefore(props.minDate, "month") && calEndDate && calTime.isSameOrAfter(calEndDate, "month"));
if ((_a = props.minDate) == null ? void 0 : _a.isSameOrAfter(calEndDate)) {
cell.start = !!(calEndDate && calTime.isSame(calEndDate, "month"));
cell.end = props.minDate && calTime.isSame(props.minDate, "month");
} else {
cell.start = !!(props.minDate && calTime.isSame(props.minDate, "month"));
cell.end = !!(calEndDate && calTime.isSame(calEndDate, "month"));
}
const isToday = now.isSame(calTime);
if (isToday) {
cell.type = "today";
}
cell.text = index;
cell.disabled = ((_b = props.disabledDate) == null ? void 0 : _b.call(props, calTime.toDate())) || false;
}
}
return rows2;
});
const focus = () => {
var _a;
(_a = currentCellRef.value) == null ? void 0 : _a.focus();
};
const getCellStyle = (cell) => {
const style = {};
const year = props.date.year();
const today = new Date();
const month = cell.text;
style.disabled = props.disabledDate ? datesInMonth(year, month, lang.value).every(props.disabledDate) : false;
style.current = castArray(props.parsedValue).findIndex((date) => dayjs.isDayjs(date) && date.year() === year && date.month() === month) >= 0;
style.today = today.getFullYear() === year && today.getMonth() === month;
if (cell.inRange) {
style["in-range"] = true;
if (cell.start) {
style["start-date"] = true;
}
if (cell.end) {
style["end-date"] = true;
}
}
return style;
};
const isSelectedCell = (cell) => {
const year = props.date.year();
const month = cell.text;
return castArray(props.date).findIndex((date) => date.year() === year && date.month() === month) >= 0;
};
const handleMouseMove = (event) => {
var _a;
if (!props.rangeState.selecting)
return;
let target = event.target;
if (target.tagName === "A") {
target = (_a = target.parentNode) == null ? void 0 : _a.parentNode;
}
if (target.tagName === "DIV") {
target = target.parentNode;
}
if (target.tagName !== "TD")
return;
const row = target.parentNode.rowIndex;
const column = target.cellIndex;
if (rows.value[row][column].disabled)
return;
if (row !== lastRow.value || column !== lastColumn.value) {
lastRow.value = row;
lastColumn.value = column;
emit("changerange", {
selecting: true,
endDate: props.date.startOf("year").month(row * 4 + column)
});
}
};
const handleMonthTableClick = (event) => {
var _a;
const target = (_a = event.target) == null ? void 0 : _a.closest("td");
if ((target == null ? void 0 : target.tagName) !== "TD")
return;
if (hasClass(target, "disabled"))
return;
const column = target.cellIndex;
const row = target.parentNode.rowIndex;
const month = row * 4 + column;
const newDate = props.date.startOf("year").month(month);
if (props.selectionMode === "range") {
if (!props.rangeState.selecting) {
emit("pick", { minDate: newDate, maxDate: null });
emit("select", true);
} else {
if (props.minDate && newDate >= props.minDate) {
emit("pick", { minDate: props.minDate, maxDate: newDate });
} else {
emit("pick", { minDate: newDate, maxDate: props.minDate });
}
emit("select", false);
}
} else {
emit("pick", month);
}
};
vue.watch(() => props.date, async () => {
var _a, _b;
if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
await vue.nextTick();
(_b = currentCellRef.value) == null ? void 0 : _b.focus();
}
});
expose({
focus
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("table", {
role: "grid",
"aria-label": vue.unref(t)("el.datepicker.monthTablePrompt"),
class: vue.normalizeClass(vue.unref(ns).b()),
onClick: handleMonthTableClick,
onMousemove: handleMouseMove
}, [
vue.createElementVNode("tbody", {
ref_key: "tbodyRef",
ref: tbodyRef
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rows), (row, key) => {
return vue.openBlock(), vue.createElementBlock("tr", { key }, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, key_) => {
return vue.openBlock(), vue.createElementBlock("td", {
key: key_,
ref_for: true,
ref: (el) => isSelectedCell(cell) && (currentCellRef.value = el),
class: vue.normalizeClass(getCellStyle(cell)),
"aria-selected": `${isSelectedCell(cell)}`,
"aria-label": vue.unref(t)(`el.datepicker.month${+cell.text + 1}`),
tabindex: isSelectedCell(cell) ? 0 : -1,
onKeydown: [
vue.withKeys(vue.withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["space"]),
vue.withKeys(vue.withModifiers(handleMonthTableClick, ["prevent", "stop"]), ["enter"])
]
}, [
vue.createElementVNode("div", null, [
vue.createElementVNode("span", _hoisted_3$e, vue.toDisplayString(vue.unref(t)("el.datepicker.months." + months.value[cell.text])), 1)
])
], 42, _hoisted_2$s);
}), 128))
]);
}), 128))
], 512)
], 42, _hoisted_1$I);
};
}
});
var MonthTable = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__file", "basic-month-table.vue"]]);
const { date, disabledDate, parsedValue } = datePickerSharedProps;
const basicYearTableProps = buildProps({
date,
disabledDate,
parsedValue
});
const _hoisted_1$H = ["aria-label"];
const _hoisted_2$r = ["aria-selected", "tabindex", "onKeydown"];
const _hoisted_3$d = { class: "cell" };
const _hoisted_4$a = { key: 1 };
const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
__name: "basic-year-table",
props: basicYearTableProps,
emits: ["pick"],
setup(__props, { expose, emit }) {
const props = __props;
const datesInYear = (year, lang2) => {
const firstDay = dayjs(String(year)).locale(lang2).startOf("year");
const lastDay = firstDay.endOf("year");
const numOfDays = lastDay.dayOfYear();
return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
};
const ns = useNamespace("year-table");
const { t, lang } = useLocale();
const tbodyRef = vue.ref();
const currentCellRef = vue.ref();
const startYear = vue.computed(() => {
return Math.floor(props.date.year() / 10) * 10;
});
const focus = () => {
var _a;
(_a = currentCellRef.value) == null ? void 0 : _a.focus();
};
const getCellKls = (year) => {
const kls = {};
const today = dayjs().locale(lang.value);
kls.disabled = props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false;
kls.current = castArray(props.parsedValue).findIndex((d) => d.year() === year) >= 0;
kls.today = today.year() === year;
return kls;
};
const isSelectedCell = (year) => {
return year === startYear.value && props.date.year() < startYear.value && props.date.year() > startYear.value + 9 || castArray(props.date).findIndex((date) => date.year() === year) >= 0;
};
const handleYearTableClick = (event) => {
const clickTarget = event.target;
const target = clickTarget.closest("td");
if (target && target.textContent) {
if (hasClass(target, "disabled"))
return;
const year = target.textContent || target.innerText;
emit("pick", Number(year));
}
};
vue.watch(() => props.date, async () => {
var _a, _b;
if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
await vue.nextTick();
(_b = currentCellRef.value) == null ? void 0 : _b.focus();
}
});
expose({
focus
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("table", {
role: "grid",
"aria-label": vue.unref(t)("el.datepicker.yearTablePrompt"),
class: vue.normalizeClass(vue.unref(ns).b()),
onClick: handleYearTableClick
}, [
vue.createElementVNode("tbody", {
ref_key: "tbodyRef",
ref: tbodyRef
}, [
(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(3, (_, i) => {
return vue.createElementVNode("tr", { key: i }, [
(vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(4, (__, j) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: i + "_" + j
}, [
i * 4 + j < 10 ? (vue.openBlock(), vue.createElementBlock("td", {
key: 0,
ref_for: true,
ref: (el) => isSelectedCell(vue.unref(startYear) + i * 4 + j) && (currentCellRef.value = el),
class: vue.normalizeClass(["available", getCellKls(vue.unref(startYear) + i * 4 + j)]),
"aria-selected": `${isSelectedCell(vue.unref(startYear) + i * 4 + j)}`,
tabindex: isSelectedCell(vue.unref(startYear) + i * 4 + j) ? 0 : -1,
onKeydown: [
vue.withKeys(vue.withModifiers(handleYearTableClick, ["prevent", "stop"]), ["space"]),
vue.withKeys(vue.withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
]
}, [
vue.createElementVNode("span", _hoisted_3$d, vue.toDisplayString(vue.unref(startYear) + i * 4 + j), 1)
], 42, _hoisted_2$r)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_4$a))
], 64);
}), 64))
]);
}), 64))
], 512)
], 10, _hoisted_1$H);
};
}
});
var YearTable = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__file", "basic-year-table.vue"]]);
const _hoisted_1$G = ["onClick"];
const _hoisted_2$q = ["aria-label"];
const _hoisted_3$c = ["aria-label"];
const _hoisted_4$9 = ["aria-label"];
const _hoisted_5$7 = ["aria-label"];
const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
__name: "panel-date-pick",
props: panelDatePickProps,
emits: ["pick", "set-picker-option", "panel-change"],
setup(__props, { emit: contextEmit }) {
const props = __props;
const timeWithinRange = (_, __, ___) => true;
const ppNs = useNamespace("picker-panel");
const dpNs = useNamespace("date-picker");
const attrs = vue.useAttrs();
const slots = vue.useSlots();
const { t, lang } = useLocale();
const pickerBase = vue.inject("EP_PICKER_BASE");
const popper = vue.inject(TOOLTIP_INJECTION_KEY);
const { shortcuts, disabledDate, cellClassName, defaultTime, arrowControl } = pickerBase.props;
const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
const currentViewRef = vue.ref();
const innerDate = vue.ref(dayjs().locale(lang.value));
const defaultTimeD = vue.computed(() => {
return dayjs(defaultTime).locale(lang.value);
});
const month = vue.computed(() => {
return innerDate.value.month();
});
const year = vue.computed(() => {
return innerDate.value.year();
});
const selectableRange = vue.ref([]);
const userInputDate = vue.ref(null);
const userInputTime = vue.ref(null);
const checkDateWithinRange = (date) => {
return selectableRange.value.length > 0 ? timeWithinRange(date, selectableRange.value, props.format || "HH:mm:ss") : true;
};
const formatEmit = (emitDayjs) => {
if (defaultTime && !visibleTime.value) {
return defaultTimeD.value.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
}
if (showTime.value)
return emitDayjs.millisecond(0);
return emitDayjs.startOf("day");
};
const emit = (value, ...args) => {
if (!value) {
contextEmit("pick", value, ...args);
} else if (isArray(value)) {
const dates = value.map(formatEmit);
contextEmit("pick", dates, ...args);
} else {
contextEmit("pick", formatEmit(value), ...args);
}
userInputDate.value = null;
userInputTime.value = null;
};
const handleDatePick = (value, keepOpen) => {
if (selectionMode.value === "date") {
value = value;
let newDate = props.parsedValue ? props.parsedValue.year(value.year()).month(value.month()).date(value.date()) : value;
if (!checkDateWithinRange(newDate)) {
newDate = selectableRange.value[0][0].year(value.year()).month(value.month()).date(value.date());
}
innerDate.value = newDate;
emit(newDate, showTime.value || keepOpen);
} else if (selectionMode.value === "week") {
emit(value.date);
} else if (selectionMode.value === "dates") {
emit(value, true);
}
};
const moveByMonth = (forward) => {
const action = forward ? "add" : "subtract";
innerDate.value = innerDate.value[action](1, "month");
handlePanelChange("month");
};
const moveByYear = (forward) => {
const currentDate = innerDate.value;
const action = forward ? "add" : "subtract";
innerDate.value = currentView.value === "year" ? currentDate[action](10, "year") : currentDate[action](1, "year");
handlePanelChange("year");
};
const currentView = vue.ref("date");
const yearLabel = vue.computed(() => {
const yearTranslation = t("el.datepicker.year");
if (currentView.value === "year") {
const startYear = Math.floor(year.value / 10) * 10;
if (yearTranslation) {
return `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}`;
}
return `${startYear} - ${startYear + 9}`;
}
return `${year.value} ${yearTranslation}`;
});
const handleShortcutClick = (shortcut) => {
const shortcutValue = isFunction(shortcut.value) ? shortcut.value() : shortcut.value;
if (shortcutValue) {
emit(dayjs(shortcutValue).locale(lang.value));
return;
}
if (shortcut.onClick) {
shortcut.onClick({
attrs,
slots,
emit: contextEmit
});
}
};
const selectionMode = vue.computed(() => {
const { type } = props;
if (["week", "month", "year", "dates"].includes(type))
return type;
return "date";
});
const keyboardMode = vue.computed(() => {
return selectionMode.value === "date" ? currentView.value : selectionMode.value;
});
const hasShortcuts = vue.computed(() => !!shortcuts.length);
const handleMonthPick = async (month2) => {
innerDate.value = innerDate.value.startOf("month").month(month2);
if (selectionMode.value === "month") {
emit(innerDate.value, false);
} else {
currentView.value = "date";
if (["month", "year", "date", "week"].includes(selectionMode.value)) {
emit(innerDate.value, true);
await vue.nextTick();
handleFocusPicker();
}
}
handlePanelChange("month");
};
const handleYearPick = async (year2) => {
if (selectionMode.value === "year") {
innerDate.value = innerDate.value.startOf("year").year(year2);
emit(innerDate.value, false);
} else {
innerDate.value = innerDate.value.year(year2);
currentView.value = "month";
if (["month", "year", "date", "week"].includes(selectionMode.value)) {
emit(innerDate.value, true);
await vue.nextTick();
handleFocusPicker();
}
}
handlePanelChange("year");
};
const showPicker = async (view) => {
currentView.value = view;
await vue.nextTick();
handleFocusPicker();
};
const showTime = vue.computed(() => props.type === "datetime" || props.type === "datetimerange");
const footerVisible = vue.computed(() => {
return showTime.value || selectionMode.value === "dates";
});
const onConfirm = () => {
if (selectionMode.value === "dates") {
emit(props.parsedValue);
} else {
let result = props.parsedValue;
if (!result) {
const defaultTimeD2 = dayjs(defaultTime).locale(lang.value);
const defaultValueD = getDefaultValue();
result = defaultTimeD2.year(defaultValueD.year()).month(defaultValueD.month()).date(defaultValueD.date());
}
innerDate.value = result;
emit(result);
}
};
const changeToNow = () => {
const now = dayjs().locale(lang.value);
const nowDate = now.toDate();
if ((!disabledDate || !disabledDate(nowDate)) && checkDateWithinRange(nowDate)) {
innerDate.value = dayjs().locale(lang.value);
emit(innerDate.value);
}
};
const timeFormat = vue.computed(() => {
return extractTimeFormat(props.format);
});
const dateFormat = vue.computed(() => {
return extractDateFormat(props.format);
});
const visibleTime = vue.computed(() => {
if (userInputTime.value)
return userInputTime.value;
if (!props.parsedValue && !defaultValue.value)
return;
return (props.parsedValue || innerDate.value).format(timeFormat.value);
});
const visibleDate = vue.computed(() => {
if (userInputDate.value)
return userInputDate.value;
if (!props.parsedValue && !defaultValue.value)
return;
return (props.parsedValue || innerDate.value).format(dateFormat.value);
});
const timePickerVisible = vue.ref(false);
const onTimePickerInputFocus = () => {
timePickerVisible.value = true;
};
const handleTimePickClose = () => {
timePickerVisible.value = false;
};
const getUnits = (date) => {
return {
hour: date.hour(),
minute: date.minute(),
second: date.second(),
year: date.year(),
month: date.month(),
date: date.date()
};
};
const handleTimePick = (value, visible, first) => {
const { hour, minute, second } = getUnits(value);
const newDate = props.parsedValue ? props.parsedValue.hour(hour).minute(minute).second(second) : value;
innerDate.value = newDate;
emit(innerDate.value, true);
if (!first) {
timePickerVisible.value = visible;
}
};
const handleVisibleTimeChange = (value) => {
const newDate = dayjs(value, timeFormat.value).locale(lang.value);
if (newDate.isValid() && checkDateWithinRange(newDate)) {
const { year: year2, month: month2, date } = getUnits(innerDate.value);
innerDate.value = newDate.year(year2).month(month2).date(date);
userInputTime.value = null;
timePickerVisible.value = false;
emit(innerDate.value, true);
}
};
const handleVisibleDateChange = (value) => {
const newDate = dayjs(value, dateFormat.value).locale(lang.value);
if (newDate.isValid()) {
if (disabledDate && disabledDate(newDate.toDate())) {
return;
}
const { hour, minute, second } = getUnits(innerDate.value);
innerDate.value = newDate.hour(hour).minute(minute).second(second);
userInputDate.value = null;
emit(innerDate.value, true);
}
};
const isValidValue = (date) => {
return dayjs.isDayjs(date) && date.isValid() && (disabledDate ? !disabledDate(date.toDate()) : true);
};
const formatToString = (value) => {
if (selectionMode.value === "dates") {
return value.map((_) => _.format(props.format));
}
return value.format(props.format);
};
const parseUserInput = (value) => {
return dayjs(value, props.format).locale(lang.value);
};
const getDefaultValue = () => {
const parseDate = dayjs(defaultValue.value).locale(lang.value);
if (!defaultValue.value) {
const defaultTimeDValue = defaultTimeD.value;
return dayjs().hour(defaultTimeDValue.hour()).minute(defaultTimeDValue.minute()).second(defaultTimeDValue.second()).locale(lang.value);
}
return parseDate;
};
const handleFocusPicker = async () => {
var _a;
if (["week", "month", "year", "date"].includes(selectionMode.value)) {
(_a = currentViewRef.value) == null ? void 0 : _a.focus();
if (selectionMode.value === "week") {
handleKeyControl(EVENT_CODE.down);
}
}
};
const handleKeydownTable = (event) => {
const { code } = event;
const validCode = [
EVENT_CODE.up,
EVENT_CODE.down,
EVENT_CODE.left,
EVENT_CODE.right,
EVENT_CODE.home,
EVENT_CODE.end,
EVENT_CODE.pageUp,
EVENT_CODE.pageDown
];
if (validCode.includes(code)) {
handleKeyControl(code);
event.stopPropagation();
event.preventDefault();
}
if ([EVENT_CODE.enter, EVENT_CODE.space].includes(code) && userInputDate.value === null && userInputTime.value === null) {
event.preventDefault();
emit(innerDate.value, false);
}
};
const handleKeyControl = (code) => {
var _a;
const { up, down, left, right, home, end, pageUp, pageDown } = EVENT_CODE;
const mapping = {
year: {
[up]: -4,
[down]: 4,
[left]: -1,
[right]: 1,
offset: (date, step) => date.setFullYear(date.getFullYear() + step)
},
month: {
[up]: -4,
[down]: 4,
[left]: -1,
[right]: 1,
offset: (date, step) => date.setMonth(date.getMonth() + step)
},
week: {
[up]: -1,
[down]: 1,
[left]: -1,
[right]: 1,
offset: (date, step) => date.setDate(date.getDate() + step * 7)
},
date: {
[up]: -7,
[down]: 7,
[left]: -1,
[right]: 1,
[home]: (date) => -date.getDay(),
[end]: (date) => -date.getDay() + 6,
[pageUp]: (date) => -new Date(date.getFullYear(), date.getMonth(), 0).getDate(),
[pageDown]: (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),
offset: (date, step) => date.setDate(date.getDate() + step)
}
};
const newDate = innerDate.value.toDate();
while (Math.abs(innerDate.value.diff(newDate, "year", true)) < 1) {
const map = mapping[keyboardMode.value];
if (!map)
return;
map.offset(newDate, isFunction(map[code]) ? map[code](newDate) : (_a = map[code]) != null ? _a : 0);
if (disabledDate && disabledDate(newDate)) {
break;
}
const result = dayjs(newDate).locale(lang.value);
innerDate.value = result;
contextEmit("pick", result, true);
break;
}
};
const handlePanelChange = (mode) => {
contextEmit("panel-change", innerDate.value.toDate(), mode, currentView.value);
};
vue.watch(() => selectionMode.value, (val) => {
if (["month", "year"].includes(val)) {
currentView.value = val;
return;
}
currentView.value = "date";
}, { immediate: true });
vue.watch(() => currentView.value, () => {
popper == null ? void 0 : popper.updatePopper();
});
vue.watch(() => defaultValue.value, (val) => {
if (val) {
innerDate.value = getDefaultValue();
}
}, { immediate: true });
vue.watch(() => props.parsedValue, (val) => {
if (val) {
if (selectionMode.value === "dates")
return;
if (Array.isArray(val))
return;
innerDate.value = val;
} else {
innerDate.value = getDefaultValue();
}
}, { immediate: true });
contextEmit("set-picker-option", ["isValidValue", isValidValue]);
contextEmit("set-picker-option", ["formatToString", formatToString]);
contextEmit("set-picker-option", ["parseUserInput", parseUserInput]);
contextEmit("set-picker-option", ["handleFocusPicker", handleFocusPicker]);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
vue.unref(ppNs).b(),
vue.unref(dpNs).b(),
{
"has-sidebar": _ctx.$slots.sidebar || vue.unref(hasShortcuts),
"has-time": vue.unref(showTime)
}
])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ppNs).e("body-wrapper"))
}, [
vue.renderSlot(_ctx.$slots, "sidebar", {
class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
}),
vue.unref(hasShortcuts) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(shortcuts), (shortcut, key) => {
return vue.openBlock(), vue.createElementBlock("button", {
key,
type: "button",
class: vue.normalizeClass(vue.unref(ppNs).e("shortcut")),
onClick: ($event) => handleShortcutClick(shortcut)
}, vue.toDisplayString(shortcut.text), 11, _hoisted_1$G);
}), 128))
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ppNs).e("body"))
}, [
vue.unref(showTime) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(dpNs).e("time-header"))
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(dpNs).e("editor-wrap"))
}, [
vue.createVNode(vue.unref(ElInput), {
placeholder: vue.unref(t)("el.datepicker.selectDate"),
"model-value": vue.unref(visibleDate),
size: "small",
"validate-event": false,
onInput: _cache[0] || (_cache[0] = (val) => userInputDate.value = val),
onChange: handleVisibleDateChange
}, null, 8, ["placeholder", "model-value"])
], 2),
vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass(vue.unref(dpNs).e("editor-wrap"))
}, [
vue.createVNode(vue.unref(ElInput), {
placeholder: vue.unref(t)("el.datepicker.selectTime"),
"model-value": vue.unref(visibleTime),
size: "small",
"validate-event": false,
onFocus: onTimePickerInputFocus,
onInput: _cache[1] || (_cache[1] = (val) => userInputTime.value = val),
onChange: handleVisibleTimeChange
}, null, 8, ["placeholder", "model-value"]),
vue.createVNode(vue.unref(TimePickPanel), {
visible: timePickerVisible.value,
format: vue.unref(timeFormat),
"time-arrow-control": vue.unref(arrowControl),
"parsed-value": innerDate.value,
onPick: handleTimePick
}, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"])
], 2)), [
[vue.unref(ClickOutside), handleTimePickClose]
])
], 2)) : vue.createCommentVNode("v-if", true),
vue.withDirectives(vue.createElementVNode("div", {
class: vue.normalizeClass([
vue.unref(dpNs).e("header"),
(currentView.value === "year" || currentView.value === "month") && vue.unref(dpNs).e("header--bordered")
])
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(dpNs).e("prev-btn"))
}, [
vue.createElementVNode("button", {
type: "button",
"aria-label": vue.unref(t)(`el.datepicker.prevYear`),
class: vue.normalizeClass(["d-arrow-left", vue.unref(ppNs).e("icon-btn")]),
onClick: _cache[2] || (_cache[2] = ($event) => moveByYear(false))
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(d_arrow_left_default))
]),
_: 1
})
], 10, _hoisted_2$q),
vue.withDirectives(vue.createElementVNode("button", {
type: "button",
"aria-label": vue.unref(t)(`el.datepicker.prevMonth`),
class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-left"]),
onClick: _cache[3] || (_cache[3] = ($event) => moveByMonth(false))
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_left_default))
]),
_: 1
})
], 10, _hoisted_3$c), [
[vue.vShow, currentView.value === "date"]
])
], 2),
vue.createElementVNode("span", {
role: "button",
class: vue.normalizeClass(vue.unref(dpNs).e("header-label")),
"aria-live": "polite",
tabindex: "0",
onKeydown: _cache[4] || (_cache[4] = vue.withKeys(($event) => showPicker("year"), ["enter"])),
onClick: _cache[5] || (_cache[5] = ($event) => showPicker("year"))
}, vue.toDisplayString(vue.unref(yearLabel)), 35),
vue.withDirectives(vue.createElementVNode("span", {
role: "button",
"aria-live": "polite",
tabindex: "0",
class: vue.normalizeClass([
vue.unref(dpNs).e("header-label"),
{ active: currentView.value === "month" }
]),
onKeydown: _cache[6] || (_cache[6] = vue.withKeys(($event) => showPicker("month"), ["enter"])),
onClick: _cache[7] || (_cache[7] = ($event) => showPicker("month"))
}, vue.toDisplayString(vue.unref(t)(`el.datepicker.month${vue.unref(month) + 1}`)), 35), [
[vue.vShow, currentView.value === "date"]
]),
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(dpNs).e("next-btn"))
}, [
vue.withDirectives(vue.createElementVNode("button", {
type: "button",
"aria-label": vue.unref(t)(`el.datepicker.nextMonth`),
class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-right"]),
onClick: _cache[8] || (_cache[8] = ($event) => moveByMonth(true))
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_right_default))
]),
_: 1
})
], 10, _hoisted_4$9), [
[vue.vShow, currentView.value === "date"]
]),
vue.createElementVNode("button", {
type: "button",
"aria-label": vue.unref(t)(`el.datepicker.nextYear`),
class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]),
onClick: _cache[9] || (_cache[9] = ($event) => moveByYear(true))
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(d_arrow_right_default))
]),
_: 1
})
], 10, _hoisted_5$7)
], 2)
], 2), [
[vue.vShow, currentView.value !== "time"]
]),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ppNs).e("content")),
onKeydown: handleKeydownTable
}, [
currentView.value === "date" ? (vue.openBlock(), vue.createBlock(DateTable, {
key: 0,
ref_key: "currentViewRef",
ref: currentViewRef,
"selection-mode": vue.unref(selectionMode),
date: innerDate.value,
"parsed-value": _ctx.parsedValue,
"disabled-date": vue.unref(disabledDate),
"cell-class-name": vue.unref(cellClassName),
onPick: handleDatePick
}, null, 8, ["selection-mode", "date", "parsed-value", "disabled-date", "cell-class-name"])) : vue.createCommentVNode("v-if", true),
currentView.value === "year" ? (vue.openBlock(), vue.createBlock(YearTable, {
key: 1,
ref_key: "currentViewRef",
ref: currentViewRef,
date: innerDate.value,
"disabled-date": vue.unref(disabledDate),
"parsed-value": _ctx.parsedValue,
onPick: handleYearPick
}, null, 8, ["date", "disabled-date", "parsed-value"])) : vue.createCommentVNode("v-if", true),
currentView.value === "month" ? (vue.openBlock(), vue.createBlock(MonthTable, {
key: 2,
ref_key: "currentViewRef",
ref: currentViewRef,
date: innerDate.value,
"parsed-value": _ctx.parsedValue,
"disabled-date": vue.unref(disabledDate),
onPick: handleMonthPick
}, null, 8, ["date", "parsed-value", "disabled-date"])) : vue.createCommentVNode("v-if", true)
], 34)
], 2)
], 2),
vue.withDirectives(vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ppNs).e("footer"))
}, [
vue.withDirectives(vue.createVNode(vue.unref(ElButton), {
text: "",
size: "small",
class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")),
onClick: changeToNow
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.now")), 1)
]),
_: 1
}, 8, ["class"]), [
[vue.vShow, vue.unref(selectionMode) !== "dates"]
]),
vue.createVNode(vue.unref(ElButton), {
plain: "",
size: "small",
class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")),
onClick: onConfirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 1)
]),
_: 1
}, 8, ["class"])
], 2), [
[vue.vShow, vue.unref(footerVisible) && currentView.value === "date"]
])
], 2);
};
}
});
var DatePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__file", "panel-date-pick.vue"]]);
const panelDateRangeProps = buildProps({
...panelSharedProps,
...panelRangeSharedProps
});
const useShortcut = (lang) => {
const { emit } = vue.getCurrentInstance();
const attrs = vue.useAttrs();
const slots = vue.useSlots();
const handleShortcutClick = (shortcut) => {
const shortcutValues = isFunction(shortcut.value) ? shortcut.value() : shortcut.value;
if (shortcutValues) {
emit("pick", [
dayjs(shortcutValues[0]).locale(lang.value),
dayjs(shortcutValues[1]).locale(lang.value)
]);
return;
}
if (shortcut.onClick) {
shortcut.onClick({
attrs,
slots,
emit
});
}
};
return handleShortcutClick;
};
const useRangePicker = (props, {
defaultValue,
leftDate,
rightDate,
unit,
onParsedValueChanged
}) => {
const { emit } = vue.getCurrentInstance();
const { pickerNs } = vue.inject(ROOT_PICKER_INJECTION_KEY);
const drpNs = useNamespace("date-range-picker");
const { t, lang } = useLocale();
const handleShortcutClick = useShortcut(lang);
const minDate = vue.ref();
const maxDate = vue.ref();
const rangeState = vue.ref({
endDate: null,
selecting: false
});
const handleChangeRange = (val) => {
rangeState.value = val;
};
const handleRangeConfirm = (visible = false) => {
const _minDate = vue.unref(minDate);
const _maxDate = vue.unref(maxDate);
if (isValidRange([_minDate, _maxDate])) {
emit("pick", [_minDate, _maxDate], visible);
}
};
const onSelect = (selecting) => {
rangeState.value.selecting = selecting;
if (!selecting) {
rangeState.value.endDate = null;
}
};
const restoreDefault = () => {
const [start, end] = getDefaultValue(vue.unref(defaultValue), {
lang: vue.unref(lang),
unit,
unlinkPanels: props.unlinkPanels
});
minDate.value = void 0;
maxDate.value = void 0;
leftDate.value = start;
rightDate.value = end;
};
vue.watch(defaultValue, (val) => {
if (val) {
restoreDefault();
}
}, { immediate: true });
vue.watch(() => props.parsedValue, (parsedValue) => {
if (isArray(parsedValue) && parsedValue.length === 2) {
const [start, end] = parsedValue;
minDate.value = start;
leftDate.value = start;
maxDate.value = end;
onParsedValueChanged(vue.unref(minDate), vue.unref(maxDate));
} else {
restoreDefault();
}
}, { immediate: true });
return {
minDate,
maxDate,
rangeState,
lang,
ppNs: pickerNs,
drpNs,
handleChangeRange,
handleRangeConfirm,
handleShortcutClick,
onSelect,
t
};
};
const _hoisted_1$F = ["onClick"];
const _hoisted_2$p = ["disabled"];
const _hoisted_3$b = ["disabled"];
const _hoisted_4$8 = ["disabled"];
const _hoisted_5$6 = ["disabled"];
const unit$1 = "month";
const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
__name: "panel-date-range",
props: panelDateRangeProps,
emits: [
"pick",
"set-picker-option",
"calendar-change",
"panel-change"
],
setup(__props, { emit }) {
const props = __props;
const pickerBase = vue.inject("EP_PICKER_BASE");
const {
disabledDate,
cellClassName,
format,
defaultTime,
arrowControl,
clearable
} = pickerBase.props;
const shortcuts = vue.toRef(pickerBase.props, "shortcuts");
const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
const { lang } = useLocale();
const leftDate = vue.ref(dayjs().locale(lang.value));
const rightDate = vue.ref(dayjs().locale(lang.value).add(1, unit$1));
const {
minDate,
maxDate,
rangeState,
ppNs,
drpNs,
handleChangeRange,
handleRangeConfirm,
handleShortcutClick,
onSelect,
t
} = useRangePicker(props, {
defaultValue,
leftDate,
rightDate,
unit: unit$1,
onParsedValueChanged
});
const dateUserInput = vue.ref({
min: null,
max: null
});
const timeUserInput = vue.ref({
min: null,
max: null
});
const leftLabel = vue.computed(() => {
return `${leftDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${leftDate.value.month() + 1}`)}`;
});
const rightLabel = vue.computed(() => {
return `${rightDate.value.year()} ${t("el.datepicker.year")} ${t(`el.datepicker.month${rightDate.value.month() + 1}`)}`;
});
const leftYear = vue.computed(() => {
return leftDate.value.year();
});
const leftMonth = vue.computed(() => {
return leftDate.value.month();
});
const rightYear = vue.computed(() => {
return rightDate.value.year();
});
const rightMonth = vue.computed(() => {
return rightDate.value.month();
});
const hasShortcuts = vue.computed(() => !!shortcuts.value.length);
const minVisibleDate = vue.computed(() => {
if (dateUserInput.value.min !== null)
return dateUserInput.value.min;
if (minDate.value)
return minDate.value.format(dateFormat.value);
return "";
});
const maxVisibleDate = vue.computed(() => {
if (dateUserInput.value.max !== null)
return dateUserInput.value.max;
if (maxDate.value || minDate.value)
return (maxDate.value || minDate.value).format(dateFormat.value);
return "";
});
const minVisibleTime = vue.computed(() => {
if (timeUserInput.value.min !== null)
return timeUserInput.value.min;
if (minDate.value)
return minDate.value.format(timeFormat.value);
return "";
});
const maxVisibleTime = vue.computed(() => {
if (timeUserInput.value.max !== null)
return timeUserInput.value.max;
if (maxDate.value || minDate.value)
return (maxDate.value || minDate.value).format(timeFormat.value);
return "";
});
const timeFormat = vue.computed(() => {
return extractTimeFormat(format);
});
const dateFormat = vue.computed(() => {
return extractDateFormat(format);
});
const leftPrevYear = () => {
leftDate.value = leftDate.value.subtract(1, "year");
if (!props.unlinkPanels) {
rightDate.value = leftDate.value.add(1, "month");
}
handlePanelChange("year");
};
const leftPrevMonth = () => {
leftDate.value = leftDate.value.subtract(1, "month");
if (!props.unlinkPanels) {
rightDate.value = leftDate.value.add(1, "month");
}
handlePanelChange("month");
};
const rightNextYear = () => {
if (!props.unlinkPanels) {
leftDate.value = leftDate.value.add(1, "year");
rightDate.value = leftDate.value.add(1, "month");
} else {
rightDate.value = rightDate.value.add(1, "year");
}
handlePanelChange("year");
};
const rightNextMonth = () => {
if (!props.unlinkPanels) {
leftDate.value = leftDate.value.add(1, "month");
rightDate.value = leftDate.value.add(1, "month");
} else {
rightDate.value = rightDate.value.add(1, "month");
}
handlePanelChange("month");
};
const leftNextYear = () => {
leftDate.value = leftDate.value.add(1, "year");
handlePanelChange("year");
};
const leftNextMonth = () => {
leftDate.value = leftDate.value.add(1, "month");
handlePanelChange("month");
};
const rightPrevYear = () => {
rightDate.value = rightDate.value.subtract(1, "year");
handlePanelChange("year");
};
const rightPrevMonth = () => {
rightDate.value = rightDate.value.subtract(1, "month");
handlePanelChange("month");
};
const handlePanelChange = (mode) => {
emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
};
const enableMonthArrow = vue.computed(() => {
const nextMonth = (leftMonth.value + 1) % 12;
const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0;
return props.unlinkPanels && new Date(leftYear.value + yearOffset, nextMonth) < new Date(rightYear.value, rightMonth.value);
});
const enableYearArrow = vue.computed(() => {
return props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 12;
});
const btnDisabled = vue.computed(() => {
return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidRange([minDate.value, maxDate.value]));
});
const showTime = vue.computed(() => props.type === "datetime" || props.type === "datetimerange");
const formatEmit = (emitDayjs, index) => {
if (!emitDayjs)
return;
if (defaultTime) {
const defaultTimeD = dayjs(defaultTime[index] || defaultTime).locale(lang.value);
return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
}
return emitDayjs;
};
const handleRangePick = (val, close = true) => {
const min_ = val.minDate;
const max_ = val.maxDate;
const minDate_ = formatEmit(min_, 0);
const maxDate_ = formatEmit(max_, 1);
if (maxDate.value === maxDate_ && minDate.value === minDate_) {
return;
}
emit("calendar-change", [min_.toDate(), max_ && max_.toDate()]);
maxDate.value = maxDate_;
minDate.value = minDate_;
if (!close || showTime.value)
return;
handleRangeConfirm();
};
const minTimePickerVisible = vue.ref(false);
const maxTimePickerVisible = vue.ref(false);
const handleMinTimeClose = () => {
minTimePickerVisible.value = false;
};
const handleMaxTimeClose = () => {
maxTimePickerVisible.value = false;
};
const handleDateInput = (value, type) => {
dateUserInput.value[type] = value;
const parsedValueD = dayjs(value, dateFormat.value).locale(lang.value);
if (parsedValueD.isValid()) {
if (disabledDate && disabledDate(parsedValueD.toDate())) {
return;
}
if (type === "min") {
leftDate.value = parsedValueD;
minDate.value = (minDate.value || leftDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date());
if (!props.unlinkPanels) {
rightDate.value = parsedValueD.add(1, "month");
maxDate.value = minDate.value.add(1, "month");
}
} else {
rightDate.value = parsedValueD;
maxDate.value = (maxDate.value || rightDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date());
if (!props.unlinkPanels) {
leftDate.value = parsedValueD.subtract(1, "month");
minDate.value = maxDate.value.subtract(1, "month");
}
}
}
};
const handleDateChange = (_, type) => {
dateUserInput.value[type] = null;
};
const handleTimeInput = (value, type) => {
timeUserInput.value[type] = value;
const parsedValueD = dayjs(value, timeFormat.value).locale(lang.value);
if (parsedValueD.isValid()) {
if (type === "min") {
minTimePickerVisible.value = true;
minDate.value = (minDate.value || leftDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second());
if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {
maxDate.value = minDate.value;
}
} else {
maxTimePickerVisible.value = true;
maxDate.value = (maxDate.value || rightDate.value).hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second());
rightDate.value = maxDate.value;
if (maxDate.value && maxDate.value.isBefore(minDate.value)) {
minDate.value = maxDate.value;
}
}
}
};
const handleTimeChange = (value, type) => {
timeUserInput.value[type] = null;
if (type === "min") {
leftDate.value = minDate.value;
minTimePickerVisible.value = false;
} else {
rightDate.value = maxDate.value;
maxTimePickerVisible.value = false;
}
};
const handleMinTimePick = (value, visible, first) => {
if (timeUserInput.value.min)
return;
if (value) {
leftDate.value = value;
minDate.value = (minDate.value || leftDate.value).hour(value.hour()).minute(value.minute()).second(value.second());
}
if (!first) {
minTimePickerVisible.value = visible;
}
if (!maxDate.value || maxDate.value.isBefore(minDate.value)) {
maxDate.value = minDate.value;
rightDate.value = value;
}
};
const handleMaxTimePick = (value, visible, first) => {
if (timeUserInput.value.max)
return;
if (value) {
rightDate.value = value;
maxDate.value = (maxDate.value || rightDate.value).hour(value.hour()).minute(value.minute()).second(value.second());
}
if (!first) {
maxTimePickerVisible.value = visible;
}
if (maxDate.value && maxDate.value.isBefore(minDate.value)) {
minDate.value = maxDate.value;
}
};
const handleClear = () => {
leftDate.value = getDefaultValue(vue.unref(defaultValue), {
lang: vue.unref(lang),
unit: "month",
unlinkPanels: props.unlinkPanels
})[0];
rightDate.value = leftDate.value.add(1, "month");
emit("pick", null);
};
const formatToString = (value) => {
return isArray(value) ? value.map((_) => _.format(format)) : value.format(format);
};
const parseUserInput = (value) => {
return isArray(value) ? value.map((_) => dayjs(_, format).locale(lang.value)) : dayjs(value, format).locale(lang.value);
};
function onParsedValueChanged(minDate2, maxDate2) {
if (props.unlinkPanels && maxDate2) {
const minDateYear = (minDate2 == null ? void 0 : minDate2.year()) || 0;
const minDateMonth = (minDate2 == null ? void 0 : minDate2.month()) || 0;
const maxDateYear = maxDate2.year();
const maxDateMonth = maxDate2.month();
rightDate.value = minDateYear === maxDateYear && minDateMonth === maxDateMonth ? maxDate2.add(1, unit$1) : maxDate2;
} else {
rightDate.value = leftDate.value.add(1, unit$1);
if (maxDate2) {
rightDate.value = rightDate.value.hour(maxDate2.hour()).minute(maxDate2.minute()).second(maxDate2.second());
}
}
}
emit("set-picker-option", ["isValidValue", isValidRange]);
emit("set-picker-option", ["parseUserInput", parseUserInput]);
emit("set-picker-option", ["formatToString", formatToString]);
emit("set-picker-option", ["handleClear", handleClear]);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
vue.unref(ppNs).b(),
vue.unref(drpNs).b(),
{
"has-sidebar": _ctx.$slots.sidebar || vue.unref(hasShortcuts),
"has-time": vue.unref(showTime)
}
])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ppNs).e("body-wrapper"))
}, [
vue.renderSlot(_ctx.$slots, "sidebar", {
class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
}),
vue.unref(hasShortcuts) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(shortcuts), (shortcut, key) => {
return vue.openBlock(), vue.createElementBlock("button", {
key,
type: "button",
class: vue.normalizeClass(vue.unref(ppNs).e("shortcut")),
onClick: ($event) => vue.unref(handleShortcutClick)(shortcut)
}, vue.toDisplayString(shortcut.text), 11, _hoisted_1$F);
}), 128))
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ppNs).e("body"))
}, [
vue.unref(showTime) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(drpNs).e("time-header"))
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(drpNs).e("editors-wrap"))
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
}, [
vue.createVNode(vue.unref(ElInput), {
size: "small",
disabled: vue.unref(rangeState).selecting,
placeholder: vue.unref(t)("el.datepicker.startDate"),
class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
"model-value": vue.unref(minVisibleDate),
"validate-event": false,
onInput: _cache[0] || (_cache[0] = (val) => handleDateInput(val, "min")),
onChange: _cache[1] || (_cache[1] = (val) => handleDateChange(val, "min"))
}, null, 8, ["disabled", "placeholder", "class", "model-value"])
], 2),
vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
}, [
vue.createVNode(vue.unref(ElInput), {
size: "small",
class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
disabled: vue.unref(rangeState).selecting,
placeholder: vue.unref(t)("el.datepicker.startTime"),
"model-value": vue.unref(minVisibleTime),
"validate-event": false,
onFocus: _cache[2] || (_cache[2] = ($event) => minTimePickerVisible.value = true),
onInput: _cache[3] || (_cache[3] = (val) => handleTimeInput(val, "min")),
onChange: _cache[4] || (_cache[4] = (val) => handleTimeChange(val, "min"))
}, null, 8, ["class", "disabled", "placeholder", "model-value"]),
vue.createVNode(vue.unref(TimePickPanel), {
visible: minTimePickerVisible.value,
format: vue.unref(timeFormat),
"datetime-role": "start",
"time-arrow-control": vue.unref(arrowControl),
"parsed-value": leftDate.value,
onPick: handleMinTimePick
}, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"])
], 2)), [
[vue.unref(ClickOutside), handleMinTimeClose]
])
], 2),
vue.createElementVNode("span", null, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_right_default))
]),
_: 1
})
]),
vue.createElementVNode("span", {
class: vue.normalizeClass([vue.unref(drpNs).e("editors-wrap"), "is-right"])
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
}, [
vue.createVNode(vue.unref(ElInput), {
size: "small",
class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
disabled: vue.unref(rangeState).selecting,
placeholder: vue.unref(t)("el.datepicker.endDate"),
"model-value": vue.unref(maxVisibleDate),
readonly: !vue.unref(minDate),
"validate-event": false,
onInput: _cache[5] || (_cache[5] = (val) => handleDateInput(val, "max")),
onChange: _cache[6] || (_cache[6] = (val) => handleDateChange(val, "max"))
}, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"])
], 2),
vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
}, [
vue.createVNode(vue.unref(ElInput), {
size: "small",
class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
disabled: vue.unref(rangeState).selecting,
placeholder: vue.unref(t)("el.datepicker.endTime"),
"model-value": vue.unref(maxVisibleTime),
readonly: !vue.unref(minDate),
"validate-event": false,
onFocus: _cache[7] || (_cache[7] = ($event) => vue.unref(minDate) && (maxTimePickerVisible.value = true)),
onInput: _cache[8] || (_cache[8] = (val) => handleTimeInput(val, "max")),
onChange: _cache[9] || (_cache[9] = (val) => handleTimeChange(val, "max"))
}, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"]),
vue.createVNode(vue.unref(TimePickPanel), {
"datetime-role": "end",
visible: maxTimePickerVisible.value,
format: vue.unref(timeFormat),
"time-arrow-control": vue.unref(arrowControl),
"parsed-value": rightDate.value,
onPick: handleMaxTimePick
}, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"])
], 2)), [
[vue.unref(ClickOutside), handleMaxTimeClose]
])
], 2)
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-left"])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(drpNs).e("header"))
}, [
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-left"]),
onClick: leftPrevYear
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(d_arrow_left_default))
]),
_: 1
})
], 2),
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-left"]),
onClick: leftPrevMonth
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_left_default))
]),
_: 1
})
], 2),
_ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
key: 0,
type: "button",
disabled: !vue.unref(enableYearArrow),
class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-right"]),
onClick: leftNextYear
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(d_arrow_right_default))
]),
_: 1
})
], 10, _hoisted_2$p)) : vue.createCommentVNode("v-if", true),
_ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
key: 1,
type: "button",
disabled: !vue.unref(enableMonthArrow),
class: vue.normalizeClass([[
vue.unref(ppNs).e("icon-btn"),
{ "is-disabled": !vue.unref(enableMonthArrow) }
], "arrow-right"]),
onClick: leftNextMonth
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_right_default))
]),
_: 1
})
], 10, _hoisted_3$b)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(leftLabel)), 1)
], 2),
vue.createVNode(DateTable, {
"selection-mode": "range",
date: leftDate.value,
"min-date": vue.unref(minDate),
"max-date": vue.unref(maxDate),
"range-state": vue.unref(rangeState),
"disabled-date": vue.unref(disabledDate),
"cell-class-name": vue.unref(cellClassName),
onChangerange: vue.unref(handleChangeRange),
onPick: handleRangePick,
onSelect: vue.unref(onSelect)
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-right"])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(drpNs).e("header"))
}, [
_ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
key: 0,
type: "button",
disabled: !vue.unref(enableYearArrow),
class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-left"]),
onClick: rightPrevYear
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(d_arrow_left_default))
]),
_: 1
})
], 10, _hoisted_4$8)) : vue.createCommentVNode("v-if", true),
_ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
key: 1,
type: "button",
disabled: !vue.unref(enableMonthArrow),
class: vue.normalizeClass([[
vue.unref(ppNs).e("icon-btn"),
{ "is-disabled": !vue.unref(enableMonthArrow) }
], "arrow-left"]),
onClick: rightPrevMonth
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_left_default))
]),
_: 1
})
], 10, _hoisted_5$6)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]),
onClick: rightNextYear
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(d_arrow_right_default))
]),
_: 1
})
], 2),
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-right"]),
onClick: rightNextMonth
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_right_default))
]),
_: 1
})
], 2),
vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(rightLabel)), 1)
], 2),
vue.createVNode(DateTable, {
"selection-mode": "range",
date: rightDate.value,
"min-date": vue.unref(minDate),
"max-date": vue.unref(maxDate),
"range-state": vue.unref(rangeState),
"disabled-date": vue.unref(disabledDate),
"cell-class-name": vue.unref(cellClassName),
onChangerange: vue.unref(handleChangeRange),
onPick: handleRangePick,
onSelect: vue.unref(onSelect)
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
], 2)
], 2)
], 2),
vue.unref(showTime) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ppNs).e("footer"))
}, [
vue.unref(clearable) ? (vue.openBlock(), vue.createBlock(vue.unref(ElButton), {
key: 0,
text: "",
size: "small",
class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")),
onClick: handleClear
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.clear")), 1)
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(ElButton), {
plain: "",
size: "small",
class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")),
disabled: vue.unref(btnDisabled),
onClick: _cache[10] || (_cache[10] = ($event) => vue.unref(handleRangeConfirm)(false))
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 1)
]),
_: 1
}, 8, ["class", "disabled"])
], 2)) : vue.createCommentVNode("v-if", true)
], 2);
};
}
});
var DateRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["__file", "panel-date-range.vue"]]);
const panelMonthRangeProps = buildProps({
...panelRangeSharedProps
});
const panelMonthRangeEmits = ["pick", "set-picker-option"];
const useMonthRangeHeader = ({
unlinkPanels,
leftDate,
rightDate
}) => {
const { t } = useLocale();
const leftPrevYear = () => {
leftDate.value = leftDate.value.subtract(1, "year");
if (!unlinkPanels.value) {
rightDate.value = rightDate.value.subtract(1, "year");
}
};
const rightNextYear = () => {
if (!unlinkPanels.value) {
leftDate.value = leftDate.value.add(1, "year");
}
rightDate.value = rightDate.value.add(1, "year");
};
const leftNextYear = () => {
leftDate.value = leftDate.value.add(1, "year");
};
const rightPrevYear = () => {
rightDate.value = rightDate.value.subtract(1, "year");
};
const leftLabel = vue.computed(() => {
return `${leftDate.value.year()} ${t("el.datepicker.year")}`;
});
const rightLabel = vue.computed(() => {
return `${rightDate.value.year()} ${t("el.datepicker.year")}`;
});
const leftYear = vue.computed(() => {
return leftDate.value.year();
});
const rightYear = vue.computed(() => {
return rightDate.value.year() === leftDate.value.year() ? leftDate.value.year() + 1 : rightDate.value.year();
});
return {
leftPrevYear,
rightNextYear,
leftNextYear,
rightPrevYear,
leftLabel,
rightLabel,
leftYear,
rightYear
};
};
const _hoisted_1$E = ["onClick"];
const _hoisted_2$o = ["disabled"];
const _hoisted_3$a = ["disabled"];
const unit = "year";
const __default__$Q = vue.defineComponent({
name: "DatePickerMonthRange"
});
const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
...__default__$Q,
props: panelMonthRangeProps,
emits: panelMonthRangeEmits,
setup(__props, { emit }) {
const props = __props;
const { lang } = useLocale();
const pickerBase = vue.inject("EP_PICKER_BASE");
const { shortcuts, disabledDate, format } = pickerBase.props;
const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
const leftDate = vue.ref(dayjs().locale(lang.value));
const rightDate = vue.ref(dayjs().locale(lang.value).add(1, unit));
const {
minDate,
maxDate,
rangeState,
ppNs,
drpNs,
handleChangeRange,
handleRangeConfirm,
handleShortcutClick,
onSelect
} = useRangePicker(props, {
defaultValue,
leftDate,
rightDate,
unit,
onParsedValueChanged
});
const hasShortcuts = vue.computed(() => !!shortcuts.length);
const {
leftPrevYear,
rightNextYear,
leftNextYear,
rightPrevYear,
leftLabel,
rightLabel,
leftYear,
rightYear
} = useMonthRangeHeader({
unlinkPanels: vue.toRef(props, "unlinkPanels"),
leftDate,
rightDate
});
const enableYearArrow = vue.computed(() => {
return props.unlinkPanels && rightYear.value > leftYear.value + 1;
});
const handleRangePick = (val, close = true) => {
const minDate_ = val.minDate;
const maxDate_ = val.maxDate;
if (maxDate.value === maxDate_ && minDate.value === minDate_) {
return;
}
maxDate.value = maxDate_;
minDate.value = minDate_;
if (!close)
return;
handleRangeConfirm();
};
const formatToString = (days) => {
return days.map((day) => day.format(format));
};
function onParsedValueChanged(minDate2, maxDate2) {
if (props.unlinkPanels && maxDate2) {
const minDateYear = (minDate2 == null ? void 0 : minDate2.year()) || 0;
const maxDateYear = maxDate2.year();
rightDate.value = minDateYear === maxDateYear ? maxDate2.add(1, unit) : maxDate2;
} else {
rightDate.value = leftDate.value.add(1, unit);
}
}
emit("set-picker-option", ["formatToString", formatToString]);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
vue.unref(ppNs).b(),
vue.unref(drpNs).b(),
{
"has-sidebar": Boolean(_ctx.$slots.sidebar) || vue.unref(hasShortcuts)
}
])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ppNs).e("body-wrapper"))
}, [
vue.renderSlot(_ctx.$slots, "sidebar", {
class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
}),
vue.unref(hasShortcuts) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(shortcuts), (shortcut, key) => {
return vue.openBlock(), vue.createElementBlock("button", {
key,
type: "button",
class: vue.normalizeClass(vue.unref(ppNs).e("shortcut")),
onClick: ($event) => vue.unref(handleShortcutClick)(shortcut)
}, vue.toDisplayString(shortcut.text), 11, _hoisted_1$E);
}), 128))
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ppNs).e("body"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-left"])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(drpNs).e("header"))
}, [
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-left"]),
onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(leftPrevYear) && vue.unref(leftPrevYear)(...args))
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(d_arrow_left_default))
]),
_: 1
})
], 2),
_ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
key: 0,
type: "button",
disabled: !vue.unref(enableYearArrow),
class: vue.normalizeClass([[
vue.unref(ppNs).e("icon-btn"),
{ [vue.unref(ppNs).is("disabled")]: !vue.unref(enableYearArrow) }
], "d-arrow-right"]),
onClick: _cache[1] || (_cache[1] = (...args) => vue.unref(leftNextYear) && vue.unref(leftNextYear)(...args))
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(d_arrow_right_default))
]),
_: 1
})
], 10, _hoisted_2$o)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(leftLabel)), 1)
], 2),
vue.createVNode(MonthTable, {
"selection-mode": "range",
date: leftDate.value,
"min-date": vue.unref(minDate),
"max-date": vue.unref(maxDate),
"range-state": vue.unref(rangeState),
"disabled-date": vue.unref(disabledDate),
onChangerange: vue.unref(handleChangeRange),
onPick: handleRangePick,
onSelect: vue.unref(onSelect)
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"])
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-right"])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(drpNs).e("header"))
}, [
_ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
key: 0,
type: "button",
disabled: !vue.unref(enableYearArrow),
class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-left"]),
onClick: _cache[2] || (_cache[2] = (...args) => vue.unref(rightPrevYear) && vue.unref(rightPrevYear)(...args))
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(d_arrow_left_default))
]),
_: 1
})
], 10, _hoisted_3$a)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("button", {
type: "button",
class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]),
onClick: _cache[3] || (_cache[3] = (...args) => vue.unref(rightNextYear) && vue.unref(rightNextYear)(...args))
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(d_arrow_right_default))
]),
_: 1
})
], 2),
vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(rightLabel)), 1)
], 2),
vue.createVNode(MonthTable, {
"selection-mode": "range",
date: rightDate.value,
"min-date": vue.unref(minDate),
"max-date": vue.unref(maxDate),
"range-state": vue.unref(rangeState),
"disabled-date": vue.unref(disabledDate),
onChangerange: vue.unref(handleChangeRange),
onPick: handleRangePick,
onSelect: vue.unref(onSelect)
}, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "onChangerange", "onSelect"])
], 2)
], 2)
], 2)
], 2);
};
}
});
var MonthRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1g, [["__file", "panel-month-range.vue"]]);
const getPanel = function(type) {
switch (type) {
case "daterange":
case "datetimerange": {
return DateRangePickPanel;
}
case "monthrange": {
return MonthRangePickPanel;
}
default: {
return DatePickPanel;
}
}
};
dayjs.extend(localeData);
dayjs.extend(advancedFormat);
dayjs.extend(customParseFormat);
dayjs.extend(weekOfYear);
dayjs.extend(weekYear);
dayjs.extend(dayOfYear);
dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
var DatePicker = vue.defineComponent({
name: "ElDatePicker",
install: null,
props: {
...timePickerDefaultProps,
...datePickerProps
},
emits: ["update:modelValue"],
setup(props, {
expose,
emit,
slots
}) {
const ns = useNamespace("picker-panel");
vue.provide("ElPopperOptions", vue.reactive(vue.toRef(props, "popperOptions")));
vue.provide(ROOT_PICKER_INJECTION_KEY, {
slots,
pickerNs: ns
});
const commonPicker = vue.ref();
const refProps = {
focus: (focusStartInput = true) => {
var _a;
(_a = commonPicker.value) == null ? void 0 : _a.focus(focusStartInput);
},
handleOpen: () => {
var _a;
(_a = commonPicker.value) == null ? void 0 : _a.handleOpen();
},
handleClose: () => {
var _a;
(_a = commonPicker.value) == null ? void 0 : _a.handleClose();
}
};
expose(refProps);
const onModelValueUpdated = (val) => {
emit("update:modelValue", val);
};
return () => {
var _a;
const format = (_a = props.format) != null ? _a : DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE;
const Component = getPanel(props.type);
return vue.createVNode(CommonPicker, vue.mergeProps(props, {
"format": format,
"type": props.type,
"ref": commonPicker,
"onUpdate:modelValue": onModelValueUpdated
}), {
default: (scopedProps) => vue.createVNode(Component, scopedProps, null),
"range-separator": slots["range-separator"]
});
};
}
});
const _DatePicker = DatePicker;
_DatePicker.install = (app) => {
app.component(_DatePicker.name, _DatePicker);
};
const ElDatePicker = _DatePicker;
const descriptionsKey = "elDescriptions";
var ElDescriptionsCell = vue.defineComponent({
name: "ElDescriptionsCell",
props: {
cell: {
type: Object
},
tag: {
type: String
},
type: {
type: String
}
},
setup() {
const descriptions = vue.inject(descriptionsKey, {});
return {
descriptions
};
},
render() {
var _a, _b, _c, _d, _e, _f;
const item = getNormalizedProps(this.cell);
const { border, direction } = this.descriptions;
const isVertical = direction === "vertical";
const label = ((_c = (_b = (_a = this.cell) == null ? void 0 : _a.children) == null ? void 0 : _b.label) == null ? void 0 : _c.call(_b)) || item.label;
const content = (_f = (_e = (_d = this.cell) == null ? void 0 : _d.children) == null ? void 0 : _e.default) == null ? void 0 : _f.call(_e);
const span = item.span;
const align = item.align ? `is-${item.align}` : "";
const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : align;
const className = item.className;
const labelClassName = item.labelClassName;
const style = {
width: addUnit(item.width),
minWidth: addUnit(item.minWidth)
};
const ns = useNamespace("descriptions");
switch (this.type) {
case "label":
return vue.h(this.tag, {
style,
class: [
ns.e("cell"),
ns.e("label"),
ns.is("bordered-label", border),
ns.is("vertical-label", isVertical),
labelAlign,
labelClassName
],
colSpan: isVertical ? span : 1
}, label);
case "content":
return vue.h(this.tag, {
style,
class: [
ns.e("cell"),
ns.e("content"),
ns.is("bordered-content", border),
ns.is("vertical-content", isVertical),
align,
className
],
colSpan: isVertical ? span : span * 2 - 1
}, content);
default:
return vue.h("td", {
style,
class: [ns.e("cell"), align],
colSpan: span
}, [
vue.h("span", {
class: [ns.e("label"), labelClassName]
}, label),
vue.h("span", {
class: [ns.e("content"), className]
}, content)
]);
}
}
});
const descriptionsRowProps = buildProps({
row: {
type: Array,
default: () => []
}
});
const _hoisted_1$D = { key: 1 };
const __default__$P = vue.defineComponent({
name: "ElDescriptionsRow"
});
const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
...__default__$P,
props: descriptionsRowProps,
setup(__props) {
const descriptions = vue.inject(descriptionsKey, {});
return (_ctx, _cache) => {
return vue.unref(descriptions).direction === "vertical" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createElementVNode("tr", null, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.row, (cell, index) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElDescriptionsCell), {
key: `tr1-${index}`,
cell,
tag: "th",
type: "label"
}, null, 8, ["cell"]);
}), 128))
]),
vue.createElementVNode("tr", null, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.row, (cell, index) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElDescriptionsCell), {
key: `tr2-${index}`,
cell,
tag: "td",
type: "content"
}, null, 8, ["cell"]);
}), 128))
])
], 64)) : (vue.openBlock(), vue.createElementBlock("tr", _hoisted_1$D, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.row, (cell, index) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: `tr3-${index}`
}, [
vue.unref(descriptions).border ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createVNode(vue.unref(ElDescriptionsCell), {
cell,
tag: "td",
type: "label"
}, null, 8, ["cell"]),
vue.createVNode(vue.unref(ElDescriptionsCell), {
cell,
tag: "td",
type: "content"
}, null, 8, ["cell"])
], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(ElDescriptionsCell), {
key: 1,
cell,
tag: "td",
type: "both"
}, null, 8, ["cell"]))
], 64);
}), 128))
]));
};
}
});
var ElDescriptionsRow = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["__file", "descriptions-row.vue"]]);
const descriptionProps = buildProps({
border: {
type: Boolean,
default: false
},
column: {
type: Number,
default: 3
},
direction: {
type: String,
values: ["horizontal", "vertical"],
default: "horizontal"
},
size: useSizeProp,
title: {
type: String,
default: ""
},
extra: {
type: String,
default: ""
}
});
const __default__$O = vue.defineComponent({
name: "ElDescriptions"
});
const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
...__default__$O,
props: descriptionProps,
setup(__props) {
const props = __props;
const ns = useNamespace("descriptions");
const descriptionsSize = useSize();
const slots = vue.useSlots();
vue.provide(descriptionsKey, props);
const descriptionKls = vue.computed(() => [ns.b(), ns.m(descriptionsSize.value)]);
const filledNode = (node, span, count, isLast = false) => {
if (!node.props) {
node.props = {};
}
if (span > count) {
node.props.span = count;
}
if (isLast) {
node.props.span = span;
}
return node;
};
const getRows = () => {
var _a;
const children = flattedChildren((_a = slots.default) == null ? void 0 : _a.call(slots)).filter((node) => {
var _a2;
return ((_a2 = node == null ? void 0 : node.type) == null ? void 0 : _a2.name) === "ElDescriptionsItem";
});
const rows = [];
let temp = [];
let count = props.column;
let totalSpan = 0;
children.forEach((node, index) => {
var _a2;
const span = ((_a2 = node.props) == null ? void 0 : _a2.span) || 1;
if (index < children.length - 1) {
totalSpan += span > count ? count : span;
}
if (index === children.length - 1) {
const lastSpan = props.column - totalSpan % props.column;
temp.push(filledNode(node, lastSpan, count, true));
rows.push(temp);
return;
}
if (span < count) {
count -= span;
temp.push(node);
} else {
temp.push(filledNode(node, span, count));
rows.push(temp);
count = props.column;
temp = [];
}
});
return rows;
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(descriptionKls))
}, [
_ctx.title || _ctx.extra || _ctx.$slots.title || _ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("header"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("title"))
}, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
])
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("extra"))
}, [
vue.renderSlot(_ctx.$slots, "extra", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.extra), 1)
])
], 2)
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("body"))
}, [
vue.createElementVNode("table", {
class: vue.normalizeClass([vue.unref(ns).e("table"), vue.unref(ns).is("bordered", _ctx.border)])
}, [
vue.createElementVNode("tbody", null, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(getRows(), (row, index) => {
return vue.openBlock(), vue.createBlock(ElDescriptionsRow, {
key: index,
row
}, null, 8, ["row"]);
}), 128))
])
], 2)
], 2)
], 2);
};
}
});
var Descriptions = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__file", "description.vue"]]);
var DescriptionsItem = vue.defineComponent({
name: "ElDescriptionsItem",
props: {
label: {
type: String,
default: ""
},
span: {
type: Number,
default: 1
},
width: {
type: [String, Number],
default: ""
},
minWidth: {
type: [String, Number],
default: ""
},
align: {
type: String,
default: "left"
},
labelAlign: {
type: String,
default: ""
},
className: {
type: String,
default: ""
},
labelClassName: {
type: String,
default: ""
}
}
});
const ElDescriptions = withInstall(Descriptions, {
DescriptionsItem
});
const ElDescriptionsItem = withNoopInstall(DescriptionsItem);
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$1 = vue.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 ? vue.createVNode("div", {
class: [ns.b(), props.overlayClass],
style: {
zIndex: props.zIndex
},
onClick,
onMousedown,
onMouseup
}, [vue.renderSlot(slots, "default")], PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS, ["onClick", "onMouseup", "onMousedown"]) : vue.h("div", {
class: props.overlayClass,
style: {
zIndex: props.zIndex,
position: "fixed",
top: "0px",
right: "0px",
bottom: "0px",
left: "0px"
}
}, [vue.renderSlot(slots, "default")]);
};
}
});
const ElOverlay = Overlay$1;
const dialogContentProps = buildProps({
center: {
type: Boolean,
default: false
},
alignCenter: {
type: Boolean,
default: false
},
closeIcon: {
type: iconPropType
},
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$C = ["aria-label"];
const _hoisted_2$n = ["id"];
const __default__$N = vue.defineComponent({ name: "ElDialogContent" });
const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
...__default__$N,
props: dialogContentProps,
emits: dialogContentEmits,
setup(__props) {
const props = __props;
const { t } = useLocale();
const { Close } = CloseComponents;
const { dialogRef, headerRef, bodyId, ns, style } = vue.inject(dialogInjectionKey);
const { focusTrapRef } = vue.inject(FOCUS_TRAP_INJECTION_KEY);
const composedDialogRef = composeRefs(focusTrapRef, dialogRef);
const draggable = vue.computed(() => props.draggable);
useDraggable(dialogRef, headerRef, draggable);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref: vue.unref(composedDialogRef),
class: vue.normalizeClass([
vue.unref(ns).b(),
vue.unref(ns).is("fullscreen", _ctx.fullscreen),
vue.unref(ns).is("draggable", vue.unref(draggable)),
vue.unref(ns).is("align-center", _ctx.alignCenter),
{ [vue.unref(ns).m("center")]: _ctx.center },
_ctx.customClass
]),
style: vue.normalizeStyle(vue.unref(style)),
tabindex: "-1"
}, [
vue.createElementVNode("header", {
ref_key: "headerRef",
ref: headerRef,
class: vue.normalizeClass(vue.unref(ns).e("header"))
}, [
vue.renderSlot(_ctx.$slots, "header", {}, () => [
vue.createElementVNode("span", {
role: "heading",
class: vue.normalizeClass(vue.unref(ns).e("title"))
}, vue.toDisplayString(_ctx.title), 3)
]),
_ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
key: 0,
"aria-label": vue.unref(t)("el.dialog.close"),
class: vue.normalizeClass(vue.unref(ns).e("headerbtn")),
type: "button",
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
}, [
vue.createVNode(vue.unref(ElIcon), {
class: vue.normalizeClass(vue.unref(ns).e("close"))
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.closeIcon || vue.unref(Close))))
]),
_: 1
}, 8, ["class"])
], 10, _hoisted_1$C)) : vue.createCommentVNode("v-if", true)
], 2),
vue.createElementVNode("div", {
id: vue.unref(bodyId),
class: vue.normalizeClass(vue.unref(ns).e("body"))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 10, _hoisted_2$n),
_ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("footer", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("footer"))
}, [
vue.renderSlot(_ctx.$slots, "footer")
], 2)) : vue.createCommentVNode("v-if", true)
], 6);
};
}
});
var ElDialogContent = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__file", "dialog-content.vue"]]);
const dialogProps = buildProps({
...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,
default: false
},
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 = vue.getCurrentInstance();
const emit = instance.emit;
const { nextZIndex } = useZIndex();
let lastPosition = "";
const titleId = useId();
const bodyId = useId();
const visible = vue.ref(false);
const closed = vue.ref(false);
const rendered = vue.ref(false);
const zIndex = vue.ref(props.zIndex || nextZIndex());
let openTimer = void 0;
let closeTimer = void 0;
const namespace = useGlobalConfig("namespace", defaultNamespace);
const style = vue.computed(() => {
const style2 = {};
const varPrefix = `--${namespace.value}-dialog`;
if (!props.fullscreen) {
if (props.top) {
style2[`${varPrefix}-margin-top`] = props.top;
}
if (props.width) {
style2[`${varPrefix}-width`] = addUnit(props.width);
}
}
return style2;
});
const overlayDialogStyle = vue.computed(() => {
if (props.alignCenter) {
return { display: "flex" };
}
return {};
});
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 close() {
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 {
close();
}
}
function onModalClick() {
if (props.closeOnClickModal) {
handleClose();
}
}
function doOpen() {
if (!isClient)
return;
visible.value = true;
}
function doClose() {
visible.value = false;
}
function onOpenAutoFocus() {
emit("openAutoFocus");
}
function onCloseAutoFocus() {
emit("closeAutoFocus");
}
function onFocusoutPrevented(event) {
var _a;
if (((_a = event.detail) == null ? void 0 : _a.focusReason) === "pointer") {
event.preventDefault();
}
}
if (props.lockScroll) {
useLockscreen(visible);
}
function onCloseRequested() {
if (props.closeOnPressEscape) {
handleClose();
}
}
vue.watch(() => props.modelValue, (val) => {
if (val) {
closed.value = false;
open();
rendered.value = true;
zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
vue.nextTick(() => {
emit("open");
if (targetRef.value) {
targetRef.value.scrollTop = 0;
}
});
} else {
if (visible.value) {
close();
}
}
});
vue.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;
}
});
vue.onMounted(() => {
if (props.modelValue) {
visible.value = true;
rendered.value = true;
open();
}
});
return {
afterEnter,
afterLeave,
beforeLeave,
handleClose,
onModalClick,
close,
doClose,
onOpenAutoFocus,
onCloseAutoFocus,
onCloseRequested,
onFocusoutPrevented,
titleId,
bodyId,
closed,
style,
overlayDialogStyle,
rendered,
visible,
zIndex
};
};
const _hoisted_1$B = ["aria-label", "aria-labelledby", "aria-describedby"];
const __default__$M = vue.defineComponent({
name: "ElDialog",
inheritAttrs: false
});
const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
...__default__$M,
props: dialogProps,
emits: dialogEmits,
setup(__props, { expose }) {
const props = __props;
const slots = vue.useSlots();
useDeprecated({
scope: "el-dialog",
from: "the title slot",
replacement: "the header slot",
version: "3.0.0",
ref: "https://element-plus.org/en-US/component/dialog.html#slots"
}, vue.computed(() => !!slots.title));
useDeprecated({
scope: "el-dialog",
from: "custom-class",
replacement: "class",
version: "2.3.0",
ref: "https://element-plus.org/en-US/component/dialog.html#attributes",
type: "Attribute"
}, vue.computed(() => !!props.customClass));
const ns = useNamespace("dialog");
const dialogRef = vue.ref();
const headerRef = vue.ref();
const dialogContentRef = vue.ref();
const {
visible,
titleId,
bodyId,
style,
overlayDialogStyle,
rendered,
zIndex,
afterEnter,
afterLeave,
beforeLeave,
handleClose,
onModalClick,
onOpenAutoFocus,
onCloseAutoFocus,
onCloseRequested,
onFocusoutPrevented
} = useDialog(props, dialogRef);
vue.provide(dialogInjectionKey, {
dialogRef,
headerRef,
bodyId,
ns,
rendered,
style
});
const overlayEvent = useSameTarget(onModalClick);
const draggable = vue.computed(() => props.draggable && !props.fullscreen);
expose({
visible,
dialogContentRef
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Teleport, {
to: "body",
disabled: !_ctx.appendToBody
}, [
vue.createVNode(vue.Transition, {
name: "dialog-fade",
onAfterEnter: vue.unref(afterEnter),
onAfterLeave: vue.unref(afterLeave),
onBeforeLeave: vue.unref(beforeLeave),
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createVNode(vue.unref(ElOverlay), {
"custom-mask-event": "",
mask: _ctx.modal,
"overlay-class": _ctx.modalClass,
"z-index": vue.unref(zIndex)
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
role: "dialog",
"aria-modal": "true",
"aria-label": _ctx.title || void 0,
"aria-labelledby": !_ctx.title ? vue.unref(titleId) : void 0,
"aria-describedby": vue.unref(bodyId),
class: vue.normalizeClass(`${vue.unref(ns).namespace.value}-overlay-dialog`),
style: vue.normalizeStyle(vue.unref(overlayDialogStyle)),
onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(overlayEvent).onClick && vue.unref(overlayEvent).onClick(...args)),
onMousedown: _cache[1] || (_cache[1] = (...args) => vue.unref(overlayEvent).onMousedown && vue.unref(overlayEvent).onMousedown(...args)),
onMouseup: _cache[2] || (_cache[2] = (...args) => vue.unref(overlayEvent).onMouseup && vue.unref(overlayEvent).onMouseup(...args))
}, [
vue.createVNode(vue.unref(ElFocusTrap), {
loop: "",
trapped: vue.unref(visible),
"focus-start-el": "container",
onFocusAfterTrapped: vue.unref(onOpenAutoFocus),
onFocusAfterReleased: vue.unref(onCloseAutoFocus),
onFocusoutPrevented: vue.unref(onFocusoutPrevented),
onReleaseRequested: vue.unref(onCloseRequested)
}, {
default: vue.withCtx(() => [
vue.unref(rendered) ? (vue.openBlock(), vue.createBlock(ElDialogContent, vue.mergeProps({
key: 0,
ref_key: "dialogContentRef",
ref: dialogContentRef
}, _ctx.$attrs, {
"custom-class": _ctx.customClass,
center: _ctx.center,
"align-center": _ctx.alignCenter,
"close-icon": _ctx.closeIcon,
draggable: vue.unref(draggable),
fullscreen: _ctx.fullscreen,
"show-close": _ctx.showClose,
title: _ctx.title,
onClose: vue.unref(handleClose)
}), vue.createSlots({
header: vue.withCtx(() => [
!_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", {
key: 0,
close: vue.unref(handleClose),
titleId: vue.unref(titleId),
titleClass: vue.unref(ns).e("title")
}) : vue.renderSlot(_ctx.$slots, "title", { key: 1 })
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 2
}, [
_ctx.$slots.footer ? {
name: "footer",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "footer")
])
} : void 0
]), 1040, ["custom-class", "center", "align-center", "close-icon", "draggable", "fullscreen", "show-close", "title", "onClose"])) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
], 46, _hoisted_1$B)
]),
_: 3
}, 8, ["mask", "overlay-class", "z-index"]), [
[vue.vShow, vue.unref(visible)]
])
]),
_: 3
}, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
], 8, ["disabled"]);
};
}
});
var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["__file", "dialog.vue"]]);
const ElDialog = withInstall(Dialog);
const dividerProps = buildProps({
direction: {
type: String,
values: ["horizontal", "vertical"],
default: "horizontal"
},
contentPosition: {
type: String,
values: ["left", "center", "right"],
default: "center"
},
borderStyle: {
type: definePropType(String),
default: "solid"
}
});
const __default__$L = vue.defineComponent({
name: "ElDivider"
});
const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
...__default__$L,
props: dividerProps,
setup(__props) {
const props = __props;
const ns = useNamespace("divider");
const dividerStyle = vue.computed(() => {
return ns.cssVar({
"border-style": props.borderStyle
});
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).m(_ctx.direction)]),
style: vue.normalizeStyle(vue.unref(dividerStyle)),
role: "separator"
}, [
_ctx.$slots.default && _ctx.direction !== "vertical" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass([vue.unref(ns).e("text"), vue.unref(ns).is(_ctx.contentPosition)])
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2)) : vue.createCommentVNode("v-if", true)
], 6);
};
}
});
var Divider = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__file", "divider.vue"]]);
const ElDivider = withInstall(Divider);
const drawerProps = buildProps({
...dialogProps,
direction: {
type: String,
default: "rtl",
values: ["ltr", "rtl", "ttb", "btt"]
},
size: {
type: [String, Number],
default: "30%"
},
withHeader: {
type: Boolean,
default: true
},
modalFade: {
type: Boolean,
default: true
}
});
const drawerEmits = dialogEmits;
const _sfc_main$1a = vue.defineComponent({
name: "ElDrawer",
components: {
ElOverlay,
ElFocusTrap,
ElIcon,
Close: close_default
},
props: drawerProps,
emits: drawerEmits,
setup(props, { slots }) {
useDeprecated({
scope: "el-drawer",
from: "the title slot",
replacement: "the header slot",
version: "3.0.0",
ref: "https://element-plus.org/en-US/component/drawer.html#slots"
}, vue.computed(() => !!slots.title));
const drawerRef = vue.ref();
const focusStartRef = vue.ref();
const ns = useNamespace("drawer");
const { t } = useLocale();
const isHorizontal = vue.computed(() => props.direction === "rtl" || props.direction === "ltr");
const drawerSize = vue.computed(() => addUnit(props.size));
return {
...useDialog(props, drawerRef),
drawerRef,
focusStartRef,
isHorizontal,
drawerSize,
ns,
t
};
}
});
const _hoisted_1$A = ["aria-label", "aria-labelledby", "aria-describedby"];
const _hoisted_2$m = ["id"];
const _hoisted_3$9 = ["aria-label"];
const _hoisted_4$7 = ["id"];
function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
const _component_close = vue.resolveComponent("close");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_focus_trap = vue.resolveComponent("el-focus-trap");
const _component_el_overlay = vue.resolveComponent("el-overlay");
return vue.openBlock(), vue.createBlock(vue.Teleport, {
to: "body",
disabled: !_ctx.appendToBody
}, [
vue.createVNode(vue.Transition, {
name: _ctx.ns.b("fade"),
onAfterEnter: _ctx.afterEnter,
onAfterLeave: _ctx.afterLeave,
onBeforeLeave: _ctx.beforeLeave,
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createVNode(_component_el_overlay, {
mask: _ctx.modal,
"overlay-class": _ctx.modalClass,
"z-index": _ctx.zIndex,
onClick: _ctx.onModalClick
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_focus_trap, {
loop: "",
trapped: _ctx.visible,
"focus-trap-el": _ctx.drawerRef,
"focus-start-el": _ctx.focusStartRef,
onReleaseRequested: _ctx.onCloseRequested
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
ref: "drawerRef",
"aria-modal": "true",
"aria-label": _ctx.title || void 0,
"aria-labelledby": !_ctx.title ? _ctx.titleId : void 0,
"aria-describedby": _ctx.bodyId,
class: vue.normalizeClass([_ctx.ns.b(), _ctx.direction, _ctx.visible && "open", _ctx.customClass]),
style: vue.normalizeStyle(_ctx.isHorizontal ? "width: " + _ctx.drawerSize : "height: " + _ctx.drawerSize),
role: "dialog",
onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
}, ["stop"]))
}, [
vue.createElementVNode("span", {
ref: "focusStartRef",
class: vue.normalizeClass(_ctx.ns.e("sr-focus")),
tabindex: "-1"
}, null, 2),
_ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", {
key: 0,
class: vue.normalizeClass(_ctx.ns.e("header"))
}, [
!_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", {
key: 0,
close: _ctx.handleClose,
titleId: _ctx.titleId,
titleClass: _ctx.ns.e("title")
}, () => [
!_ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
id: _ctx.titleId,
role: "heading",
class: vue.normalizeClass(_ctx.ns.e("title"))
}, vue.toDisplayString(_ctx.title), 11, _hoisted_2$m)) : vue.createCommentVNode("v-if", true)
]) : vue.renderSlot(_ctx.$slots, "title", { key: 1 }, () => [
vue.createCommentVNode(" DEPRECATED SLOT ")
]),
_ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
key: 2,
"aria-label": _ctx.t("el.drawer.close"),
class: vue.normalizeClass(_ctx.ns.e("close-btn")),
type: "button",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
}, [
vue.createVNode(_component_el_icon, {
class: vue.normalizeClass(_ctx.ns.e("close"))
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_close)
]),
_: 1
}, 8, ["class"])
], 10, _hoisted_3$9)) : vue.createCommentVNode("v-if", true)
], 2)) : vue.createCommentVNode("v-if", true),
_ctx.rendered ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
id: _ctx.bodyId,
class: vue.normalizeClass(_ctx.ns.e("body"))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 10, _hoisted_4$7)) : vue.createCommentVNode("v-if", true),
_ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
class: vue.normalizeClass(_ctx.ns.e("footer"))
}, [
vue.renderSlot(_ctx.$slots, "footer")
], 2)) : vue.createCommentVNode("v-if", true)
], 14, _hoisted_1$A)
]),
_: 3
}, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"])
]),
_: 3
}, 8, ["mask", "overlay-class", "z-index", "onClick"]), [
[vue.vShow, _ctx.visible]
])
]),
_: 3
}, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
], 8, ["disabled"]);
}
var Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["render", _sfc_render$p], ["__file", "drawer.vue"]]);
const ElDrawer = withInstall(Drawer);
const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
inheritAttrs: false
});
function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
return vue.renderSlot(_ctx.$slots, "default");
}
var Collection = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["render", _sfc_render$o], ["__file", "collection.vue"]]);
const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
name: "ElCollectionItem",
inheritAttrs: false
});
function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
return vue.renderSlot(_ctx.$slots, "default");
}
var CollectionItem = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["render", _sfc_render$n], ["__file", "collection-item.vue"]]);
const COLLECTION_ITEM_SIGN = `data-el-collection-item`;
const createCollectionWithScope = (name) => {
const COLLECTION_NAME = `El${name}Collection`;
const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`;
const COLLECTION_INJECTION_KEY = Symbol(COLLECTION_NAME);
const COLLECTION_ITEM_INJECTION_KEY = Symbol(COLLECTION_ITEM_NAME);
const ElCollection = {
...Collection,
name: COLLECTION_NAME,
setup() {
const collectionRef = vue.ref(null);
const itemMap = /* @__PURE__ */ new Map();
const getItems = () => {
const collectionEl = vue.unref(collectionRef);
if (!collectionEl)
return [];
const orderedNodes = Array.from(collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`));
const items = [...itemMap.values()];
return items.sort((a, b) => orderedNodes.indexOf(a.ref) - orderedNodes.indexOf(b.ref));
};
vue.provide(COLLECTION_INJECTION_KEY, {
itemMap,
getItems,
collectionRef
});
}
};
const ElCollectionItem = {
...CollectionItem,
name: COLLECTION_ITEM_NAME,
setup(_, { attrs }) {
const collectionItemRef = vue.ref(null);
const collectionInjection = vue.inject(COLLECTION_INJECTION_KEY, void 0);
vue.provide(COLLECTION_ITEM_INJECTION_KEY, {
collectionItemRef
});
vue.onMounted(() => {
const collectionItemEl = vue.unref(collectionItemRef);
if (collectionItemEl) {
collectionInjection.itemMap.set(collectionItemEl, {
ref: collectionItemEl,
...attrs
});
}
});
vue.onBeforeUnmount(() => {
const collectionItemEl = vue.unref(collectionItemRef);
collectionInjection.itemMap.delete(collectionItemEl);
});
}
};
return {
COLLECTION_INJECTION_KEY,
COLLECTION_ITEM_INJECTION_KEY,
ElCollection,
ElCollectionItem
};
};
const rovingFocusGroupProps = buildProps({
style: { type: definePropType([String, Array, Object]) },
currentTabId: {
type: definePropType(String)
},
defaultCurrentTabId: String,
loop: Boolean,
dir: {
type: String,
values: ["ltr", "rtl"],
default: "ltr"
},
orientation: {
type: definePropType(String)
},
onBlur: Function,
onFocus: Function,
onMousedown: Function
});
const {
ElCollection: ElCollection$1,
ElCollectionItem: ElCollectionItem$1,
COLLECTION_INJECTION_KEY: COLLECTION_INJECTION_KEY$1,
COLLECTION_ITEM_INJECTION_KEY: COLLECTION_ITEM_INJECTION_KEY$1
} = createCollectionWithScope("RovingFocusGroup");
const ROVING_FOCUS_GROUP_INJECTION_KEY = Symbol("elRovingFocusGroup");
const ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY = Symbol("elRovingFocusGroupItem");
const MAP_KEY_TO_FOCUS_INTENT = {
ArrowLeft: "prev",
ArrowUp: "prev",
ArrowRight: "next",
ArrowDown: "next",
PageUp: "first",
Home: "first",
PageDown: "last",
End: "last"
};
const getDirectionAwareKey = (key, dir) => {
if (dir !== "rtl")
return key;
switch (key) {
case EVENT_CODE.right:
return EVENT_CODE.left;
case EVENT_CODE.left:
return EVENT_CODE.right;
default:
return key;
}
};
const getFocusIntent = (event, orientation, dir) => {
const key = getDirectionAwareKey(event.key, dir);
if (orientation === "vertical" && [EVENT_CODE.left, EVENT_CODE.right].includes(key))
return void 0;
if (orientation === "horizontal" && [EVENT_CODE.up, EVENT_CODE.down].includes(key))
return void 0;
return MAP_KEY_TO_FOCUS_INTENT[key];
};
const reorderArray = (array, atIdx) => {
return array.map((_, idx) => array[(idx + atIdx) % array.length]);
};
const focusFirst = (elements) => {
const { activeElement: prevActive } = document;
for (const element of elements) {
if (element === prevActive)
return;
element.focus();
if (prevActive !== document.activeElement)
return;
}
};
const CURRENT_TAB_ID_CHANGE_EVT = "currentTabIdChange";
const ENTRY_FOCUS_EVT = "rovingFocusGroup.entryFocus";
const EVT_OPTS = { bubbles: false, cancelable: true };
const _sfc_main$17 = vue.defineComponent({
name: "ElRovingFocusGroupImpl",
inheritAttrs: false,
props: rovingFocusGroupProps,
emits: [CURRENT_TAB_ID_CHANGE_EVT, "entryFocus"],
setup(props, { emit }) {
var _a;
const currentTabbedId = vue.ref((_a = props.currentTabId || props.defaultCurrentTabId) != null ? _a : null);
const isBackingOut = vue.ref(false);
const isClickFocus = vue.ref(false);
const rovingFocusGroupRef = vue.ref(null);
const { getItems } = vue.inject(COLLECTION_INJECTION_KEY$1, void 0);
const rovingFocusGroupRootStyle = vue.computed(() => {
return [
{
outline: "none"
},
props.style
];
});
const onItemFocus = (tabbedId) => {
emit(CURRENT_TAB_ID_CHANGE_EVT, tabbedId);
};
const onItemShiftTab = () => {
isBackingOut.value = true;
};
const onMousedown = composeEventHandlers((e) => {
var _a2;
(_a2 = props.onMousedown) == null ? void 0 : _a2.call(props, e);
}, () => {
isClickFocus.value = true;
});
const onFocus = composeEventHandlers((e) => {
var _a2;
(_a2 = props.onFocus) == null ? void 0 : _a2.call(props, e);
}, (e) => {
const isKeyboardFocus = !vue.unref(isClickFocus);
const { target, currentTarget } = e;
if (target === currentTarget && isKeyboardFocus && !vue.unref(isBackingOut)) {
const entryFocusEvt = new Event(ENTRY_FOCUS_EVT, EVT_OPTS);
currentTarget == null ? void 0 : currentTarget.dispatchEvent(entryFocusEvt);
if (!entryFocusEvt.defaultPrevented) {
const items = getItems().filter((item) => item.focusable);
const activeItem = items.find((item) => item.active);
const currentItem = items.find((item) => item.id === vue.unref(currentTabbedId));
const candidates = [activeItem, currentItem, ...items].filter(Boolean);
const candidateNodes = candidates.map((item) => item.ref);
focusFirst(candidateNodes);
}
}
isClickFocus.value = false;
});
const onBlur = composeEventHandlers((e) => {
var _a2;
(_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
}, () => {
isBackingOut.value = false;
});
const handleEntryFocus = (...args) => {
emit("entryFocus", ...args);
};
vue.provide(ROVING_FOCUS_GROUP_INJECTION_KEY, {
currentTabbedId: vue.readonly(currentTabbedId),
loop: vue.toRef(props, "loop"),
tabIndex: vue.computed(() => {
return vue.unref(isBackingOut) ? -1 : 0;
}),
rovingFocusGroupRef,
rovingFocusGroupRootStyle,
orientation: vue.toRef(props, "orientation"),
dir: vue.toRef(props, "dir"),
onItemFocus,
onItemShiftTab,
onBlur,
onFocus,
onMousedown
});
vue.watch(() => props.currentTabId, (val) => {
currentTabbedId.value = val != null ? val : null;
});
useEventListener(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus);
}
});
function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
return vue.renderSlot(_ctx.$slots, "default");
}
var ElRovingFocusGroupImpl = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["render", _sfc_render$m], ["__file", "roving-focus-group-impl.vue"]]);
const _sfc_main$16 = vue.defineComponent({
name: "ElRovingFocusGroup",
components: {
ElFocusGroupCollection: ElCollection$1,
ElRovingFocusGroupImpl
}
});
function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_roving_focus_group_impl = vue.resolveComponent("el-roving-focus-group-impl");
const _component_el_focus_group_collection = vue.resolveComponent("el-focus-group-collection");
return vue.openBlock(), vue.createBlock(_component_el_focus_group_collection, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_roving_focus_group_impl, vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16)
]),
_: 3
});
}
var ElRovingFocusGroup = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["render", _sfc_render$l], ["__file", "roving-focus-group.vue"]]);
const _sfc_main$15 = vue.defineComponent({
components: {
ElRovingFocusCollectionItem: ElCollectionItem$1
},
props: {
focusable: {
type: Boolean,
default: true
},
active: {
type: Boolean,
default: false
}
},
emits: ["mousedown", "focus", "keydown"],
setup(props, { emit }) {
const { currentTabbedId, loop, onItemFocus, onItemShiftTab } = vue.inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
const { getItems } = vue.inject(COLLECTION_INJECTION_KEY$1, void 0);
const id = useId();
const rovingFocusGroupItemRef = vue.ref(null);
const handleMousedown = composeEventHandlers((e) => {
emit("mousedown", e);
}, (e) => {
if (!props.focusable) {
e.preventDefault();
} else {
onItemFocus(vue.unref(id));
}
});
const handleFocus = composeEventHandlers((e) => {
emit("focus", e);
}, () => {
onItemFocus(vue.unref(id));
});
const handleKeydown = composeEventHandlers((e) => {
emit("keydown", e);
}, (e) => {
const { key, shiftKey, target, currentTarget } = e;
if (key === EVENT_CODE.tab && shiftKey) {
onItemShiftTab();
return;
}
if (target !== currentTarget)
return;
const focusIntent = getFocusIntent(e);
if (focusIntent) {
e.preventDefault();
const items = getItems().filter((item) => item.focusable);
let elements = items.map((item) => item.ref);
switch (focusIntent) {
case "last": {
elements.reverse();
break;
}
case "prev":
case "next": {
if (focusIntent === "prev") {
elements.reverse();
}
const currentIdx = elements.indexOf(currentTarget);
elements = loop.value ? reorderArray(elements, currentIdx + 1) : elements.slice(currentIdx + 1);
break;
}
}
vue.nextTick(() => {
focusFirst(elements);
});
}
});
const isCurrentTab = vue.computed(() => currentTabbedId.value === vue.unref(id));
vue.provide(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {
rovingFocusGroupItemRef,
tabIndex: vue.computed(() => vue.unref(isCurrentTab) ? 0 : -1),
handleMousedown,
handleFocus,
handleKeydown
});
return {
id,
handleKeydown,
handleFocus,
handleMousedown
};
}
});
function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_roving_focus_collection_item = vue.resolveComponent("el-roving-focus-collection-item");
return vue.openBlock(), vue.createBlock(_component_el_roving_focus_collection_item, {
id: _ctx.id,
focusable: _ctx.focusable,
active: _ctx.active
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["id", "focusable", "active"]);
}
var ElRovingFocusItem = /* @__PURE__ */ _export_sfc(_sfc_main$15, [["render", _sfc_render$k], ["__file", "roving-focus-item.vue"]]);
const dropdownProps = buildProps({
trigger: useTooltipTriggerProps.trigger,
effect: {
...useTooltipContentProps.effect,
default: "light"
},
type: {
type: definePropType(String)
},
placement: {
type: definePropType(String),
default: "bottom"
},
popperOptions: {
type: definePropType(Object),
default: () => ({})
},
id: String,
size: {
type: String,
default: ""
},
splitButton: Boolean,
hideOnClick: {
type: Boolean,
default: true
},
loop: {
type: Boolean,
default: true
},
showTimeout: {
type: Number,
default: 150
},
hideTimeout: {
type: Number,
default: 150
},
tabindex: {
type: definePropType([Number, String]),
default: 0
},
maxHeight: {
type: definePropType([Number, String]),
default: ""
},
popperClass: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
},
role: {
type: String,
default: "menu"
},
buttonProps: {
type: definePropType(Object)
},
teleported: useTooltipContentProps.teleported
});
const dropdownItemProps = buildProps({
command: {
type: [Object, String, Number],
default: () => ({})
},
disabled: Boolean,
divided: Boolean,
textValue: String,
icon: {
type: iconPropType
}
});
const dropdownMenuProps = buildProps({
onKeydown: { type: definePropType(Function) }
});
const FIRST_KEYS = [
EVENT_CODE.down,
EVENT_CODE.pageDown,
EVENT_CODE.home
];
const LAST_KEYS = [EVENT_CODE.up, EVENT_CODE.pageUp, EVENT_CODE.end];
const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
const {
ElCollection,
ElCollectionItem,
COLLECTION_INJECTION_KEY,
COLLECTION_ITEM_INJECTION_KEY
} = createCollectionWithScope("Dropdown");
const DROPDOWN_INJECTION_KEY = Symbol("elDropdown");
const { ButtonGroup: ElButtonGroup } = ElButton;
const _sfc_main$14 = vue.defineComponent({
name: "ElDropdown",
components: {
ElButton,
ElButtonGroup,
ElScrollbar,
ElDropdownCollection: ElCollection,
ElTooltip,
ElRovingFocusGroup,
ElOnlyChild: OnlyChild,
ElIcon,
ArrowDown: arrow_down_default
},
props: dropdownProps,
emits: ["visible-change", "click", "command"],
setup(props, { emit }) {
const _instance = vue.getCurrentInstance();
const ns = useNamespace("dropdown");
const { t } = useLocale();
const triggeringElementRef = vue.ref();
const referenceElementRef = vue.ref();
const popperRef = vue.ref(null);
const contentRef = vue.ref(null);
const scrollbar = vue.ref(null);
const currentTabId = vue.ref(null);
const isUsingKeyboard = vue.ref(false);
const triggerKeys = [EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.down];
const wrapStyle = vue.computed(() => ({
maxHeight: addUnit(props.maxHeight)
}));
const dropdownTriggerKls = vue.computed(() => [ns.m(dropdownSize.value)]);
const defaultTriggerId = useId().value;
const triggerId = vue.computed(() => {
return props.id || defaultTriggerId;
});
function handleClick() {
handleClose();
}
function handleClose() {
var _a;
(_a = popperRef.value) == null ? void 0 : _a.onClose();
}
function handleOpen() {
var _a;
(_a = popperRef.value) == null ? void 0 : _a.onOpen();
}
const dropdownSize = useSize();
function commandHandler(...args) {
emit("command", ...args);
}
function onItemEnter() {
}
function onItemLeave() {
const contentEl = vue.unref(contentRef);
contentEl == null ? void 0 : contentEl.focus();
currentTabId.value = null;
}
function handleCurrentTabIdChange(id) {
currentTabId.value = id;
}
function handleEntryFocus(e) {
if (!isUsingKeyboard.value) {
e.preventDefault();
e.stopImmediatePropagation();
}
}
function handleBeforeShowTooltip() {
emit("visible-change", true);
}
function handleShowTooltip(event) {
if ((event == null ? void 0 : event.type) === "keydown") {
contentRef.value.focus();
}
}
function handleBeforeHideTooltip() {
emit("visible-change", false);
}
vue.provide(DROPDOWN_INJECTION_KEY, {
contentRef,
role: vue.computed(() => props.role),
triggerId,
isUsingKeyboard,
onItemEnter,
onItemLeave
});
vue.provide("elDropdown", {
instance: _instance,
dropdownSize,
handleClick,
commandHandler,
trigger: vue.toRef(props, "trigger"),
hideOnClick: vue.toRef(props, "hideOnClick")
});
const onFocusAfterTrapped = (e) => {
var _a, _b;
e.preventDefault();
(_b = (_a = contentRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a, {
preventScroll: true
});
};
const handlerMainButtonClick = (event) => {
emit("click", event);
};
return {
t,
ns,
scrollbar,
wrapStyle,
dropdownTriggerKls,
dropdownSize,
triggerId,
triggerKeys,
currentTabId,
handleCurrentTabIdChange,
handlerMainButtonClick,
handleEntryFocus,
handleClose,
handleOpen,
handleBeforeShowTooltip,
handleShowTooltip,
handleBeforeHideTooltip,
onFocusAfterTrapped,
popperRef,
contentRef,
triggeringElementRef,
referenceElementRef
};
}
});
function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
var _a;
const _component_el_dropdown_collection = vue.resolveComponent("el-dropdown-collection");
const _component_el_roving_focus_group = vue.resolveComponent("el-roving-focus-group");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_el_only_child = vue.resolveComponent("el-only-child");
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
const _component_el_button = vue.resolveComponent("el-button");
const _component_arrow_down = vue.resolveComponent("arrow-down");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_button_group = vue.resolveComponent("el-button-group");
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([_ctx.ns.b(), _ctx.ns.is("disabled", _ctx.disabled)])
}, [
vue.createVNode(_component_el_tooltip, {
ref: "popperRef",
role: _ctx.role,
effect: _ctx.effect,
"fallback-placements": ["bottom", "top"],
"popper-options": _ctx.popperOptions,
"gpu-acceleration": false,
"hide-after": _ctx.trigger === "hover" ? _ctx.hideTimeout : 0,
"manual-mode": true,
placement: _ctx.placement,
"popper-class": [_ctx.ns.e("popper"), _ctx.popperClass],
"reference-element": (_a = _ctx.referenceElementRef) == null ? void 0 : _a.$el,
trigger: _ctx.trigger,
"trigger-keys": _ctx.triggerKeys,
"trigger-target-el": _ctx.contentRef,
"show-after": _ctx.trigger === "hover" ? _ctx.showTimeout : 0,
"stop-popper-mouse-event": false,
"virtual-ref": _ctx.triggeringElementRef,
"virtual-triggering": _ctx.splitButton,
disabled: _ctx.disabled,
transition: `${_ctx.ns.namespace.value}-zoom-in-top`,
teleported: _ctx.teleported,
pure: "",
persistent: "",
onBeforeShow: _ctx.handleBeforeShowTooltip,
onShow: _ctx.handleShowTooltip,
onBeforeHide: _ctx.handleBeforeHideTooltip
}, vue.createSlots({
content: vue.withCtx(() => [
vue.createVNode(_component_el_scrollbar, {
ref: "scrollbar",
"wrap-style": _ctx.wrapStyle,
tag: "div",
"view-class": _ctx.ns.e("list")
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_roving_focus_group, {
loop: _ctx.loop,
"current-tab-id": _ctx.currentTabId,
orientation: "horizontal",
onCurrentTabIdChange: _ctx.handleCurrentTabIdChange,
onEntryFocus: _ctx.handleEntryFocus
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_dropdown_collection, null, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "dropdown")
]),
_: 3
})
]),
_: 3
}, 8, ["loop", "current-tab-id", "onCurrentTabIdChange", "onEntryFocus"])
]),
_: 3
}, 8, ["wrap-style", "view-class"])
]),
_: 2
}, [
!_ctx.splitButton ? {
name: "default",
fn: vue.withCtx(() => [
vue.createVNode(_component_el_only_child, {
id: _ctx.triggerId,
role: "button",
tabindex: _ctx.tabindex
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["id", "tabindex"])
])
} : void 0
]), 1032, ["role", "effect", "popper-options", "hide-after", "placement", "popper-class", "reference-element", "trigger", "trigger-keys", "trigger-target-el", "show-after", "virtual-ref", "virtual-triggering", "disabled", "transition", "teleported", "onBeforeShow", "onShow", "onBeforeHide"]),
_ctx.splitButton ? (vue.openBlock(), vue.createBlock(_component_el_button_group, { key: 0 }, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_button, vue.mergeProps({ ref: "referenceElementRef" }, _ctx.buttonProps, {
size: _ctx.dropdownSize,
type: _ctx.type,
disabled: _ctx.disabled,
tabindex: _ctx.tabindex,
onClick: _ctx.handlerMainButtonClick
}), {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["size", "type", "disabled", "tabindex", "onClick"]),
vue.createVNode(_component_el_button, vue.mergeProps({
id: _ctx.triggerId,
ref: "triggeringElementRef"
}, _ctx.buttonProps, {
role: "button",
size: _ctx.dropdownSize,
type: _ctx.type,
class: _ctx.ns.e("caret-button"),
disabled: _ctx.disabled,
tabindex: _ctx.tabindex,
"aria-label": _ctx.t("el.dropdown.toggleDropdown")
}), {
default: vue.withCtx(() => [
vue.createVNode(_component_el_icon, {
class: vue.normalizeClass(_ctx.ns.e("icon"))
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_arrow_down)
]),
_: 1
}, 8, ["class"])
]),
_: 1
}, 16, ["id", "size", "type", "class", "disabled", "tabindex", "aria-label"])
]),
_: 3
})) : vue.createCommentVNode("v-if", true)
], 2);
}
var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["render", _sfc_render$j], ["__file", "dropdown.vue"]]);
const _sfc_main$13 = vue.defineComponent({
name: "DropdownItemImpl",
components: {
ElIcon
},
props: dropdownItemProps,
emits: ["pointermove", "pointerleave", "click", "clickimpl"],
setup(_, { emit }) {
const ns = useNamespace("dropdown");
const { role: menuRole } = vue.inject(DROPDOWN_INJECTION_KEY, void 0);
const { collectionItemRef: dropdownCollectionItemRef } = vue.inject(COLLECTION_ITEM_INJECTION_KEY, void 0);
const { collectionItemRef: rovingFocusCollectionItemRef } = vue.inject(COLLECTION_ITEM_INJECTION_KEY$1, void 0);
const {
rovingFocusGroupItemRef,
tabIndex,
handleFocus,
handleKeydown: handleItemKeydown,
handleMousedown
} = vue.inject(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, void 0);
const itemRef = composeRefs(dropdownCollectionItemRef, rovingFocusCollectionItemRef, rovingFocusGroupItemRef);
const role = vue.computed(() => {
if (menuRole.value === "menu") {
return "menuitem";
} else if (menuRole.value === "navigation") {
return "link";
}
return "button";
});
const handleKeydown = composeEventHandlers((e) => {
const { code } = e;
if (code === EVENT_CODE.enter || code === EVENT_CODE.space) {
e.preventDefault();
e.stopImmediatePropagation();
emit("clickimpl", e);
return true;
}
}, handleItemKeydown);
return {
ns,
itemRef,
dataset: {
[COLLECTION_ITEM_SIGN]: ""
},
role,
tabIndex,
handleFocus,
handleKeydown,
handleMousedown
};
}
});
const _hoisted_1$z = ["aria-disabled", "tabindex", "role"];
function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_icon = vue.resolveComponent("el-icon");
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
_ctx.divided ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
key: 0,
role: "separator",
class: _ctx.ns.bem("menu", "item", "divided")
}, _ctx.$attrs), null, 16)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("li", vue.mergeProps({ ref: _ctx.itemRef }, { ..._ctx.dataset, ..._ctx.$attrs }, {
"aria-disabled": _ctx.disabled,
class: [_ctx.ns.be("menu", "item"), _ctx.ns.is("disabled", _ctx.disabled)],
tabindex: _ctx.tabIndex,
role: _ctx.role,
onClick: _cache[0] || (_cache[0] = (e) => _ctx.$emit("clickimpl", e)),
onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
onKeydown: _cache[2] || (_cache[2] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)),
onMousedown: _cache[3] || (_cache[3] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args)),
onPointermove: _cache[4] || (_cache[4] = (e) => _ctx.$emit("pointermove", e)),
onPointerleave: _cache[5] || (_cache[5] = (e) => _ctx.$emit("pointerleave", e))
}), [
_ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
]),
_: 1
})) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default")
], 16, _hoisted_1$z)
], 64);
}
var ElDropdownItemImpl = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["render", _sfc_render$i], ["__file", "dropdown-item-impl.vue"]]);
const useDropdown = () => {
const elDropdown = vue.inject("elDropdown", {});
const _elDropdownSize = vue.computed(() => elDropdown == null ? void 0 : elDropdown.dropdownSize);
return {
elDropdown,
_elDropdownSize
};
};
const _sfc_main$12 = vue.defineComponent({
name: "ElDropdownItem",
components: {
ElDropdownCollectionItem: ElCollectionItem,
ElRovingFocusItem,
ElDropdownItemImpl
},
inheritAttrs: false,
props: dropdownItemProps,
emits: ["pointermove", "pointerleave", "click"],
setup(props, { emit, attrs }) {
const { elDropdown } = useDropdown();
const _instance = vue.getCurrentInstance();
const itemRef = vue.ref(null);
const textContent = vue.computed(() => {
var _a, _b;
return (_b = (_a = vue.unref(itemRef)) == null ? void 0 : _a.textContent) != null ? _b : "";
});
const { onItemEnter, onItemLeave } = vue.inject(DROPDOWN_INJECTION_KEY, void 0);
const handlePointerMove = composeEventHandlers((e) => {
emit("pointermove", e);
return e.defaultPrevented;
}, whenMouse((e) => {
var _a;
if (props.disabled) {
onItemLeave(e);
} else {
onItemEnter(e);
if (!e.defaultPrevented) {
(_a = e.currentTarget) == null ? void 0 : _a.focus();
}
}
}));
const handlePointerLeave = composeEventHandlers((e) => {
emit("pointerleave", e);
return e.defaultPrevented;
}, whenMouse((e) => {
onItemLeave(e);
}));
const handleClick = composeEventHandlers((e) => {
if (props.disabled) {
return;
}
emit("click", e);
return e.type !== "keydown" && e.defaultPrevented;
}, (e) => {
var _a, _b, _c;
if (props.disabled) {
e.stopImmediatePropagation();
return;
}
if ((_a = elDropdown == null ? void 0 : elDropdown.hideOnClick) == null ? void 0 : _a.value) {
(_b = elDropdown.handleClick) == null ? void 0 : _b.call(elDropdown);
}
(_c = elDropdown.commandHandler) == null ? void 0 : _c.call(elDropdown, props.command, _instance, e);
});
const propsAndAttrs = vue.computed(() => {
return { ...props, ...attrs };
});
return {
handleClick,
handlePointerMove,
handlePointerLeave,
textContent,
propsAndAttrs
};
}
});
function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
var _a;
const _component_el_dropdown_item_impl = vue.resolveComponent("el-dropdown-item-impl");
const _component_el_roving_focus_item = vue.resolveComponent("el-roving-focus-item");
const _component_el_dropdown_collection_item = vue.resolveComponent("el-dropdown-collection-item");
return vue.openBlock(), vue.createBlock(_component_el_dropdown_collection_item, {
disabled: _ctx.disabled,
"text-value": (_a = _ctx.textValue) != null ? _a : _ctx.textContent
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_roving_focus_item, {
focusable: !_ctx.disabled
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_dropdown_item_impl, vue.mergeProps(_ctx.propsAndAttrs, {
onPointerleave: _ctx.handlePointerLeave,
onPointermove: _ctx.handlePointerMove,
onClickimpl: _ctx.handleClick
}), {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["onPointerleave", "onPointermove", "onClickimpl"])
]),
_: 3
}, 8, ["focusable"])
]),
_: 3
}, 8, ["disabled", "text-value"]);
}
var DropdownItem = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$h], ["__file", "dropdown-item.vue"]]);
const _sfc_main$11 = vue.defineComponent({
name: "ElDropdownMenu",
props: dropdownMenuProps,
setup(props) {
const ns = useNamespace("dropdown");
const { _elDropdownSize } = useDropdown();
const size = _elDropdownSize.value;
const { focusTrapRef, onKeydown } = vue.inject(FOCUS_TRAP_INJECTION_KEY, void 0);
const { contentRef, role, triggerId } = vue.inject(DROPDOWN_INJECTION_KEY, void 0);
const { collectionRef: dropdownCollectionRef, getItems } = vue.inject(COLLECTION_INJECTION_KEY, void 0);
const {
rovingFocusGroupRef,
rovingFocusGroupRootStyle,
tabIndex,
onBlur,
onFocus,
onMousedown
} = vue.inject(ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
const { collectionRef: rovingFocusGroupCollectionRef } = vue.inject(COLLECTION_INJECTION_KEY$1, void 0);
const dropdownKls = vue.computed(() => {
return [ns.b("menu"), ns.bm("menu", size == null ? void 0 : size.value)];
});
const dropdownListWrapperRef = composeRefs(contentRef, dropdownCollectionRef, focusTrapRef, rovingFocusGroupRef, rovingFocusGroupCollectionRef);
const composedKeydown = composeEventHandlers((e) => {
var _a;
(_a = props.onKeydown) == null ? void 0 : _a.call(props, e);
}, (e) => {
const { currentTarget, code, target } = e;
currentTarget.contains(target);
if (EVENT_CODE.tab === code) {
e.stopImmediatePropagation();
}
e.preventDefault();
if (target !== vue.unref(contentRef))
return;
if (!FIRST_LAST_KEYS.includes(code))
return;
const items = getItems().filter((item) => !item.disabled);
const targets = items.map((item) => item.ref);
if (LAST_KEYS.includes(code)) {
targets.reverse();
}
focusFirst(targets);
});
const handleKeydown = (e) => {
composedKeydown(e);
onKeydown(e);
};
return {
size,
rovingFocusGroupRootStyle,
tabIndex,
dropdownKls,
role,
triggerId,
dropdownListWrapperRef,
handleKeydown,
onBlur,
onFocus,
onMousedown
};
}
});
const _hoisted_1$y = ["role", "aria-labelledby"];
function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("ul", {
ref: _ctx.dropdownListWrapperRef,
class: vue.normalizeClass(_ctx.dropdownKls),
style: vue.normalizeStyle(_ctx.rovingFocusGroupRootStyle),
tabindex: -1,
role: _ctx.role,
"aria-labelledby": _ctx.triggerId,
onBlur: _cache[0] || (_cache[0] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
onKeydown: _cache[2] || (_cache[2] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)),
onMousedown: _cache[3] || (_cache[3] = (...args) => _ctx.onMousedown && _ctx.onMousedown(...args))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 46, _hoisted_1$y);
}
var DropdownMenu = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$g], ["__file", "dropdown-menu.vue"]]);
const ElDropdown = withInstall(Dropdown, {
DropdownItem,
DropdownMenu
});
const ElDropdownItem = withNoopInstall(DropdownItem);
const ElDropdownMenu = withNoopInstall(DropdownMenu);
let id = 0;
const _sfc_main$10 = vue.defineComponent({
name: "ImgEmpty",
setup() {
const ns = useNamespace("empty");
return {
ns,
id: ++id
};
}
});
const _hoisted_1$x = {
viewBox: "0 0 79 86",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink"
};
const _hoisted_2$l = ["id"];
const _hoisted_3$8 = ["stop-color"];
const _hoisted_4$6 = ["stop-color"];
const _hoisted_5$5 = ["id"];
const _hoisted_6$1 = ["stop-color"];
const _hoisted_7 = ["stop-color"];
const _hoisted_8 = ["id"];
const _hoisted_9 = {
id: "Illustrations",
stroke: "none",
"stroke-width": "1",
fill: "none",
"fill-rule": "evenodd"
};
const _hoisted_10 = {
id: "B-type",
transform: "translate(-1268.000000, -535.000000)"
};
const _hoisted_11 = {
id: "Group-2",
transform: "translate(1268.000000, 535.000000)"
};
const _hoisted_12 = ["fill"];
const _hoisted_13 = ["fill"];
const _hoisted_14 = {
id: "Group-Copy",
transform: "translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"
};
const _hoisted_15 = ["fill"];
const _hoisted_16 = ["fill"];
const _hoisted_17 = ["fill"];
const _hoisted_18 = ["fill"];
const _hoisted_19 = ["fill"];
const _hoisted_20 = {
id: "Rectangle-Copy-17",
transform: "translate(53.000000, 45.000000)"
};
const _hoisted_21 = ["fill", "xlink:href"];
const _hoisted_22 = ["fill", "mask"];
const _hoisted_23 = ["fill"];
function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$x, [
vue.createElementVNode("defs", null, [
vue.createElementVNode("linearGradient", {
id: `linearGradient-1-${_ctx.id}`,
x1: "38.8503086%",
y1: "0%",
x2: "61.1496914%",
y2: "100%"
}, [
vue.createElementVNode("stop", {
"stop-color": `var(${_ctx.ns.cssVarBlockName("fill-color-1")})`,
offset: "0%"
}, null, 8, _hoisted_3$8),
vue.createElementVNode("stop", {
"stop-color": `var(${_ctx.ns.cssVarBlockName("fill-color-4")})`,
offset: "100%"
}, null, 8, _hoisted_4$6)
], 8, _hoisted_2$l),
vue.createElementVNode("linearGradient", {
id: `linearGradient-2-${_ctx.id}`,
x1: "0%",
y1: "9.5%",
x2: "100%",
y2: "90.5%"
}, [
vue.createElementVNode("stop", {
"stop-color": `var(${_ctx.ns.cssVarBlockName("fill-color-1")})`,
offset: "0%"
}, null, 8, _hoisted_6$1),
vue.createElementVNode("stop", {
"stop-color": `var(${_ctx.ns.cssVarBlockName("fill-color-6")})`,
offset: "100%"
}, null, 8, _hoisted_7)
], 8, _hoisted_5$5),
vue.createElementVNode("rect", {
id: `path-3-${_ctx.id}`,
x: "0",
y: "0",
width: "17",
height: "36"
}, null, 8, _hoisted_8)
]),
vue.createElementVNode("g", _hoisted_9, [
vue.createElementVNode("g", _hoisted_10, [
vue.createElementVNode("g", _hoisted_11, [
vue.createElementVNode("path", {
id: "Oval-Copy-2",
d: "M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z",
fill: `var(${_ctx.ns.cssVarBlockName("fill-color-3")})`
}, null, 8, _hoisted_12),
vue.createElementVNode("polygon", {
id: "Rectangle-Copy-14",
fill: `var(${_ctx.ns.cssVarBlockName("fill-color-7")})`,
transform: "translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) ",
points: "13 58 53 58 42 45 2 45"
}, null, 8, _hoisted_13),
vue.createElementVNode("g", _hoisted_14, [
vue.createElementVNode("polygon", {
id: "Rectangle-Copy-10",
fill: `var(${_ctx.ns.cssVarBlockName("fill-color-7")})`,
transform: "translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) ",
points: "2.84078316e-14 3 18 3 23 7 5 7"
}, null, 8, _hoisted_15),
vue.createElementVNode("polygon", {
id: "Rectangle-Copy-11",
fill: `var(${_ctx.ns.cssVarBlockName("fill-color-5")})`,
points: "-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"
}, null, 8, _hoisted_16),
vue.createElementVNode("rect", {
id: "Rectangle-Copy-12",
fill: `url(#linearGradient-1-${_ctx.id})`,
transform: "translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) ",
x: "38",
y: "7",
width: "17",
height: "36"
}, null, 8, _hoisted_17),
vue.createElementVNode("polygon", {
id: "Rectangle-Copy-13",
fill: `var(${_ctx.ns.cssVarBlockName("fill-color-2")})`,
transform: "translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) ",
points: "24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"
}, null, 8, _hoisted_18)
]),
vue.createElementVNode("rect", {
id: "Rectangle-Copy-15",
fill: `url(#linearGradient-2-${_ctx.id})`,
x: "13",
y: "45",
width: "40",
height: "36"
}, null, 8, _hoisted_19),
vue.createElementVNode("g", _hoisted_20, [
vue.createElementVNode("use", {
id: "Mask",
fill: `var(${_ctx.ns.cssVarBlockName("fill-color-8")})`,
transform: "translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) ",
"xlink:href": `#path-3-${_ctx.id}`
}, null, 8, _hoisted_21),
vue.createElementVNode("polygon", {
id: "Rectangle-Copy",
fill: `var(${_ctx.ns.cssVarBlockName("fill-color-9")})`,
mask: `url(#mask-4-${_ctx.id})`,
transform: "translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) ",
points: "7 0 24 0 20 18 7 16.5"
}, null, 8, _hoisted_22)
]),
vue.createElementVNode("polygon", {
id: "Rectangle-Copy-18",
fill: `var(${_ctx.ns.cssVarBlockName("fill-color-2")})`,
transform: "translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) ",
points: "62 45 79 45 70 58 53 58"
}, null, 8, _hoisted_23)
])
])
])
]);
}
var ImgEmpty = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$f], ["__file", "img-empty.vue"]]);
const emptyProps = {
image: {
type: String,
default: ""
},
imageSize: Number,
description: {
type: String,
default: ""
}
};
const _hoisted_1$w = ["src"];
const _hoisted_2$k = { key: 1 };
const __default__$K = vue.defineComponent({
name: "ElEmpty"
});
const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
...__default__$K,
props: emptyProps,
setup(__props) {
const props = __props;
const { t } = useLocale();
const ns = useNamespace("empty");
const emptyDescription = vue.computed(() => props.description || t("el.table.emptyText"));
const imageStyle = vue.computed(() => ({
width: props.imageSize ? `${props.imageSize}px` : ""
}));
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(ns).b())
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("image")),
style: vue.normalizeStyle(vue.unref(imageStyle))
}, [
_ctx.image ? (vue.openBlock(), vue.createElementBlock("img", {
key: 0,
src: _ctx.image,
ondragstart: "return false"
}, null, 8, _hoisted_1$w)) : vue.renderSlot(_ctx.$slots, "image", { key: 1 }, () => [
vue.createVNode(ImgEmpty)
])
], 6),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("description"))
}, [
_ctx.$slots.description ? vue.renderSlot(_ctx.$slots, "description", { key: 0 }) : (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$k, vue.toDisplayString(vue.unref(emptyDescription)), 1))
], 2),
_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("bottom"))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2)) : vue.createCommentVNode("v-if", true)
], 2);
};
}
});
var Empty = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__file", "empty.vue"]]);
const ElEmpty = withInstall(Empty);
const formProps = buildProps({
model: Object,
rules: {
type: definePropType(Object)
},
labelPosition: {
type: String,
values: ["left", "right", "top"],
default: "right"
},
requireAsteriskPosition: {
type: String,
values: ["left", "right"],
default: "left"
},
labelWidth: {
type: [String, Number],
default: ""
},
labelSuffix: {
type: String,
default: ""
},
inline: Boolean,
inlineMessage: Boolean,
statusIcon: Boolean,
showMessage: {
type: Boolean,
default: true
},
size: {
type: String,
values: componentSizes
},
disabled: Boolean,
validateOnRuleChange: {
type: Boolean,
default: true
},
hideRequiredAsterisk: {
type: Boolean,
default: false
},
scrollToError: Boolean
});
const formEmits = {
validate: (prop, isValid, message) => (isArray(prop) || isString(prop)) && isBoolean(isValid) && isString(message)
};
function useFormLabelWidth() {
const potentialLabelWidthArr = vue.ref([]);
const autoLabelWidth = vue.computed(() => {
if (!potentialLabelWidthArr.value.length)
return "0";
const max = Math.max(...potentialLabelWidthArr.value);
return max ? `${max}px` : "";
});
function getLabelWidthIndex(width) {
const index = potentialLabelWidthArr.value.indexOf(width);
if (index === -1 && autoLabelWidth.value === "0") ;
return index;
}
function registerLabelWidth(val, oldVal) {
if (val && oldVal) {
const index = getLabelWidthIndex(oldVal);
potentialLabelWidthArr.value.splice(index, 1, val);
} else if (val) {
potentialLabelWidthArr.value.push(val);
}
}
function deregisterLabelWidth(val) {
const index = getLabelWidthIndex(val);
if (index > -1) {
potentialLabelWidthArr.value.splice(index, 1);
}
}
return {
autoLabelWidth,
registerLabelWidth,
deregisterLabelWidth
};
}
const filterFields = (fields, props) => {
const normalized = castArray$1(props);
return normalized.length > 0 ? fields.filter((field) => field.prop && normalized.includes(field.prop)) : fields;
};
const COMPONENT_NAME$e = "ElForm";
const __default__$J = vue.defineComponent({
name: COMPONENT_NAME$e
});
const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
...__default__$J,
props: formProps,
emits: formEmits,
setup(__props, { expose, emit }) {
const props = __props;
const fields = [];
const formSize = useSize();
const ns = useNamespace("form");
const formClasses = vue.computed(() => {
const { labelPosition, inline } = props;
return [
ns.b(),
ns.m(formSize.value || "default"),
{
[ns.m(`label-${labelPosition}`)]: labelPosition,
[ns.m("inline")]: inline
}
];
});
const addField = (field) => {
fields.push(field);
};
const removeField = (field) => {
if (field.prop) {
fields.splice(fields.indexOf(field), 1);
}
};
const resetFields = (properties = []) => {
if (!props.model) {
return;
}
filterFields(fields, properties).forEach((field) => field.resetField());
};
const clearValidate = (props2 = []) => {
filterFields(fields, props2).forEach((field) => field.clearValidate());
};
const isValidatable = vue.computed(() => {
const hasModel = !!props.model;
return hasModel;
});
const obtainValidateFields = (props2) => {
if (fields.length === 0)
return [];
const filteredFields = filterFields(fields, props2);
if (!filteredFields.length) {
return [];
}
return filteredFields;
};
const validate = async (callback) => validateField(void 0, callback);
const doValidateField = async (props2 = []) => {
if (!isValidatable.value)
return false;
const fields2 = obtainValidateFields(props2);
if (fields2.length === 0)
return true;
let validationErrors = {};
for (const field of fields2) {
try {
await field.validate("");
} catch (fields3) {
validationErrors = {
...validationErrors,
...fields3
};
}
}
if (Object.keys(validationErrors).length === 0)
return true;
return Promise.reject(validationErrors);
};
const validateField = async (modelProps = [], callback) => {
const shouldThrow = !isFunction(callback);
try {
const result = await doValidateField(modelProps);
if (result === true) {
callback == null ? void 0 : callback(result);
}
return result;
} catch (e) {
if (e instanceof Error)
throw e;
const invalidFields = e;
if (props.scrollToError) {
scrollToField(Object.keys(invalidFields)[0]);
}
callback == null ? void 0 : callback(false, invalidFields);
return shouldThrow && Promise.reject(invalidFields);
}
};
const scrollToField = (prop) => {
var _a;
const field = filterFields(fields, prop)[0];
if (field) {
(_a = field.$el) == null ? void 0 : _a.scrollIntoView();
}
};
vue.watch(() => props.rules, () => {
if (props.validateOnRuleChange) {
validate().catch((err) => debugWarn());
}
}, { deep: true });
vue.provide(formContextKey, vue.reactive({
...vue.toRefs(props),
emit,
resetFields,
clearValidate,
validateField,
addField,
removeField,
...useFormLabelWidth()
}));
expose({
validate,
validateField,
resetFields,
clearValidate,
scrollToField
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("form", {
class: vue.normalizeClass(vue.unref(formClasses))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2);
};
}
});
var Form = /* @__PURE__ */ _export_sfc(_sfc_main$_, [["__file", "form.vue"]]);
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf2(o2) {
return o2.__proto__ || Object.getPrototypeOf(o2);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o2, p2) {
o2.__proto__ = p2;
return o2;
};
return _setPrototypeOf(o, p);
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct)
return false;
if (Reflect.construct.sham)
return false;
if (typeof Proxy === "function")
return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
}));
return true;
} catch (e) {
return false;
}
}
function _construct(Parent, args, Class) {
if (_isNativeReflectConstruct()) {
_construct = Reflect.construct.bind();
} else {
_construct = function _construct2(Parent2, args2, Class2) {
var a = [null];
a.push.apply(a, args2);
var Constructor = Function.bind.apply(Parent2, a);
var instance = new Constructor();
if (Class2)
_setPrototypeOf(instance, Class2.prototype);
return instance;
};
}
return _construct.apply(null, arguments);
}
function _isNativeFunction(fn) {
return Function.toString.call(fn).indexOf("[native code]") !== -1;
}
function _wrapNativeSuper(Class) {
var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0;
_wrapNativeSuper = function _wrapNativeSuper2(Class2) {
if (Class2 === null || !_isNativeFunction(Class2))
return Class2;
if (typeof Class2 !== "function") {
throw new TypeError("Super expression must either be null or a function");
}
if (typeof _cache !== "undefined") {
if (_cache.has(Class2))
return _cache.get(Class2);
_cache.set(Class2, Wrapper);
}
function Wrapper() {
return _construct(Class2, arguments, _getPrototypeOf(this).constructor);
}
Wrapper.prototype = Object.create(Class2.prototype, {
constructor: {
value: Wrapper,
enumerable: false,
writable: true,
configurable: true
}
});
return _setPrototypeOf(Wrapper, Class2);
};
return _wrapNativeSuper(Class);
}
var formatRegExp = /%[sdj%]/g;
var warning = function warning2() {
};
if (typeof process !== "undefined" && process.env && false) {
warning = function warning3(type4, errors) {
if (typeof console !== "undefined" && console.warn && typeof ASYNC_VALIDATOR_NO_WARNING === "undefined") {
if (errors.every(function(e) {
return typeof e === "string";
})) {
console.warn(type4, errors);
}
}
};
}
function convertFieldsError(errors) {
if (!errors || !errors.length)
return null;
var fields = {};
errors.forEach(function(error) {
var field = error.field;
fields[field] = fields[field] || [];
fields[field].push(error);
});
return fields;
}
function format(template) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
var i = 0;
var len = args.length;
if (typeof template === "function") {
return template.apply(null, args);
}
if (typeof template === "string") {
var str = template.replace(formatRegExp, function(x) {
if (x === "%%") {
return "%";
}
if (i >= len) {
return x;
}
switch (x) {
case "%s":
return String(args[i++]);
case "%d":
return Number(args[i++]);
case "%j":
try {
return JSON.stringify(args[i++]);
} catch (_) {
return "[Circular]";
}
break;
default:
return x;
}
});
return str;
}
return template;
}
function isNativeStringType(type4) {
return type4 === "string" || type4 === "url" || type4 === "hex" || type4 === "email" || type4 === "date" || type4 === "pattern";
}
function isEmptyValue(value, type4) {
if (value === void 0 || value === null) {
return true;
}
if (type4 === "array" && Array.isArray(value) && !value.length) {
return true;
}
if (isNativeStringType(type4) && typeof value === "string" && !value) {
return true;
}
return false;
}
function asyncParallelArray(arr, func, callback) {
var results = [];
var total = 0;
var arrLength = arr.length;
function count(errors) {
results.push.apply(results, errors || []);
total++;
if (total === arrLength) {
callback(results);
}
}
arr.forEach(function(a) {
func(a, count);
});
}
function asyncSerialArray(arr, func, callback) {
var index = 0;
var arrLength = arr.length;
function next(errors) {
if (errors && errors.length) {
callback(errors);
return;
}
var original = index;
index = index + 1;
if (original < arrLength) {
func(arr[original], next);
} else {
callback([]);
}
}
next([]);
}
function flattenObjArr(objArr) {
var ret = [];
Object.keys(objArr).forEach(function(k) {
ret.push.apply(ret, objArr[k] || []);
});
return ret;
}
var AsyncValidationError = /* @__PURE__ */ function(_Error) {
_inheritsLoose(AsyncValidationError2, _Error);
function AsyncValidationError2(errors, fields) {
var _this;
_this = _Error.call(this, "Async Validation Error") || this;
_this.errors = errors;
_this.fields = fields;
return _this;
}
return AsyncValidationError2;
}(/* @__PURE__ */ _wrapNativeSuper(Error));
function asyncMap(objArr, option, func, callback, source) {
if (option.first) {
var _pending = new Promise(function(resolve, reject) {
var next = function next2(errors) {
callback(errors);
return errors.length ? reject(new AsyncValidationError(errors, convertFieldsError(errors))) : resolve(source);
};
var flattenArr = flattenObjArr(objArr);
asyncSerialArray(flattenArr, func, next);
});
_pending["catch"](function(e) {
return e;
});
return _pending;
}
var firstFields = option.firstFields === true ? Object.keys(objArr) : option.firstFields || [];
var objArrKeys = Object.keys(objArr);
var objArrLength = objArrKeys.length;
var total = 0;
var results = [];
var pending = new Promise(function(resolve, reject) {
var next = function next2(errors) {
results.push.apply(results, errors);
total++;
if (total === objArrLength) {
callback(results);
return results.length ? reject(new AsyncValidationError(results, convertFieldsError(results))) : resolve(source);
}
};
if (!objArrKeys.length) {
callback(results);
resolve(source);
}
objArrKeys.forEach(function(key) {
var arr = objArr[key];
if (firstFields.indexOf(key) !== -1) {
asyncSerialArray(arr, func, next);
} else {
asyncParallelArray(arr, func, next);
}
});
});
pending["catch"](function(e) {
return e;
});
return pending;
}
function isErrorObj(obj) {
return !!(obj && obj.message !== void 0);
}
function getValue(value, path) {
var v = value;
for (var i = 0; i < path.length; i++) {
if (v == void 0) {
return v;
}
v = v[path[i]];
}
return v;
}
function complementError(rule, source) {
return function(oe) {
var fieldValue;
if (rule.fullFields) {
fieldValue = getValue(source, rule.fullFields);
} else {
fieldValue = source[oe.field || rule.fullField];
}
if (isErrorObj(oe)) {
oe.field = oe.field || rule.fullField;
oe.fieldValue = fieldValue;
return oe;
}
return {
message: typeof oe === "function" ? oe() : oe,
fieldValue,
field: oe.field || rule.fullField
};
};
}
function deepMerge(target, source) {
if (source) {
for (var s in source) {
if (source.hasOwnProperty(s)) {
var value = source[s];
if (typeof value === "object" && typeof target[s] === "object") {
target[s] = _extends({}, target[s], value);
} else {
target[s] = value;
}
}
}
}
return target;
}
var required$1 = function required(rule, value, source, errors, options, type4) {
if (rule.required && (!source.hasOwnProperty(rule.field) || isEmptyValue(value, type4 || rule.type))) {
errors.push(format(options.messages.required, rule.fullField));
}
};
var whitespace = function whitespace2(rule, value, source, errors, options) {
if (/^\s+$/.test(value) || value === "") {
errors.push(format(options.messages.whitespace, rule.fullField));
}
};
var urlReg;
var getUrlRegex = function() {
if (urlReg) {
return urlReg;
}
var word = "[a-fA-F\\d:]";
var b = function b2(options) {
return options && options.includeBoundaries ? "(?:(?<=\\s|^)(?=" + word + ")|(?<=" + word + ")(?=\\s|$))" : "";
};
var v4 = "(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]\\d|\\d)(?:\\.(?:25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]\\d|\\d)){3}";
var v6seg = "[a-fA-F\\d]{1,4}";
var v6 = ("\n(?:\n(?:" + v6seg + ":){7}(?:" + v6seg + "|:)| // 1:2:3:4:5:6:7:: 1:2:3:4:5:6:7:8\n(?:" + v6seg + ":){6}(?:" + v4 + "|:" + v6seg + "|:)| // 1:2:3:4:5:6:: 1:2:3:4:5:6::8 1:2:3:4:5:6::8 1:2:3:4:5:6::1.2.3.4\n(?:" + v6seg + ":){5}(?::" + v4 + "|(?::" + v6seg + "){1,2}|:)| // 1:2:3:4:5:: 1:2:3:4:5::7:8 1:2:3:4:5::8 1:2:3:4:5::7:1.2.3.4\n(?:" + v6seg + ":){4}(?:(?::" + v6seg + "){0,1}:" + v4 + "|(?::" + v6seg + "){1,3}|:)| // 1:2:3:4:: 1:2:3:4::6:7:8 1:2:3:4::8 1:2:3:4::6:7:1.2.3.4\n(?:" + v6seg + ":){3}(?:(?::" + v6seg + "){0,2}:" + v4 + "|(?::" + v6seg + "){1,4}|:)| // 1:2:3:: 1:2:3::5:6:7:8 1:2:3::8 1:2:3::5:6:7:1.2.3.4\n(?:" + v6seg + ":){2}(?:(?::" + v6seg + "){0,3}:" + v4 + "|(?::" + v6seg + "){1,5}|:)| // 1:2:: 1:2::4:5:6:7:8 1:2::8 1:2::4:5:6:7:1.2.3.4\n(?:" + v6seg + ":){1}(?:(?::" + v6seg + "){0,4}:" + v4 + "|(?::" + v6seg + "){1,6}|:)| // 1:: 1::3:4:5:6:7:8 1::8 1::3:4:5:6:7:1.2.3.4\n(?::(?:(?::" + v6seg + "){0,5}:" + v4 + "|(?::" + v6seg + "){1,7}|:)) // ::2:3:4:5:6:7:8 ::2:3:4:5:6:7:8 ::8 ::1.2.3.4\n)(?:%[0-9a-zA-Z]{1,})? // %eth0 %1\n").replace(/\s*\/\/.*$/gm, "").replace(/\n/g, "").trim();
var v46Exact = new RegExp("(?:^" + v4 + "$)|(?:^" + v6 + "$)");
var v4exact = new RegExp("^" + v4 + "$");
var v6exact = new RegExp("^" + v6 + "$");
var ip = function ip2(options) {
return options && options.exact ? v46Exact : new RegExp("(?:" + b(options) + v4 + b(options) + ")|(?:" + b(options) + v6 + b(options) + ")", "g");
};
ip.v4 = function(options) {
return options && options.exact ? v4exact : new RegExp("" + b(options) + v4 + b(options), "g");
};
ip.v6 = function(options) {
return options && options.exact ? v6exact : new RegExp("" + b(options) + v6 + b(options), "g");
};
var protocol = "(?:(?:[a-z]+:)?//)";
var auth = "(?:\\S+(?::\\S*)?@)?";
var ipv4 = ip.v4().source;
var ipv6 = ip.v6().source;
var host = "(?:(?:[a-z\\u00a1-\\uffff0-9][-_]*)*[a-z\\u00a1-\\uffff0-9]+)";
var domain = "(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*";
var tld = "(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))";
var port = "(?::\\d{2,5})?";
var path = '(?:[/?#][^\\s"]*)?';
var regex = "(?:" + protocol + "|www\\.)" + auth + "(?:localhost|" + ipv4 + "|" + ipv6 + "|" + host + domain + tld + ")" + port + path;
urlReg = new RegExp("(?:^" + regex + "$)", "i");
return urlReg;
};
var pattern$2 = {
email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+\.)+[a-zA-Z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}))$/,
hex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i
};
var types = {
integer: function integer(value) {
return types.number(value) && parseInt(value, 10) === value;
},
"float": function float(value) {
return types.number(value) && !types.integer(value);
},
array: function array(value) {
return Array.isArray(value);
},
regexp: function regexp(value) {
if (value instanceof RegExp) {
return true;
}
try {
return !!new RegExp(value);
} catch (e) {
return false;
}
},
date: function date(value) {
return typeof value.getTime === "function" && typeof value.getMonth === "function" && typeof value.getYear === "function" && !isNaN(value.getTime());
},
number: function number(value) {
if (isNaN(value)) {
return false;
}
return typeof value === "number";
},
object: function object(value) {
return typeof value === "object" && !types.array(value);
},
method: function method(value) {
return typeof value === "function";
},
email: function email(value) {
return typeof value === "string" && value.length <= 320 && !!value.match(pattern$2.email);
},
url: function url(value) {
return typeof value === "string" && value.length <= 2048 && !!value.match(getUrlRegex());
},
hex: function hex(value) {
return typeof value === "string" && !!value.match(pattern$2.hex);
}
};
var type$1 = function type(rule, value, source, errors, options) {
if (rule.required && value === void 0) {
required$1(rule, value, source, errors, options);
return;
}
var custom = ["integer", "float", "array", "regexp", "object", "method", "email", "number", "date", "url", "hex"];
var ruleType = rule.type;
if (custom.indexOf(ruleType) > -1) {
if (!types[ruleType](value)) {
errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
}
} else if (ruleType && typeof value !== rule.type) {
errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
}
};
var range = function range2(rule, value, source, errors, options) {
var len = typeof rule.len === "number";
var min = typeof rule.min === "number";
var max = typeof rule.max === "number";
var spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
var val = value;
var key = null;
var num = typeof value === "number";
var str = typeof value === "string";
var arr = Array.isArray(value);
if (num) {
key = "number";
} else if (str) {
key = "string";
} else if (arr) {
key = "array";
}
if (!key) {
return false;
}
if (arr) {
val = value.length;
}
if (str) {
val = value.replace(spRegexp, "_").length;
}
if (len) {
if (val !== rule.len) {
errors.push(format(options.messages[key].len, rule.fullField, rule.len));
}
} else if (min && !max && val < rule.min) {
errors.push(format(options.messages[key].min, rule.fullField, rule.min));
} else if (max && !min && val > rule.max) {
errors.push(format(options.messages[key].max, rule.fullField, rule.max));
} else if (min && max && (val < rule.min || val > rule.max)) {
errors.push(format(options.messages[key].range, rule.fullField, rule.min, rule.max));
}
};
var ENUM$1 = "enum";
var enumerable$1 = function enumerable(rule, value, source, errors, options) {
rule[ENUM$1] = Array.isArray(rule[ENUM$1]) ? rule[ENUM$1] : [];
if (rule[ENUM$1].indexOf(value) === -1) {
errors.push(format(options.messages[ENUM$1], rule.fullField, rule[ENUM$1].join(", ")));
}
};
var pattern$1 = function pattern(rule, value, source, errors, options) {
if (rule.pattern) {
if (rule.pattern instanceof RegExp) {
rule.pattern.lastIndex = 0;
if (!rule.pattern.test(value)) {
errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
}
} else if (typeof rule.pattern === "string") {
var _pattern = new RegExp(rule.pattern);
if (!_pattern.test(value)) {
errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
}
}
}
};
var rules = {
required: required$1,
whitespace,
type: type$1,
range,
"enum": enumerable$1,
pattern: pattern$1
};
var string = function string2(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value, "string") && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options, "string");
if (!isEmptyValue(value, "string")) {
rules.type(rule, value, source, errors, options);
rules.range(rule, value, source, errors, options);
rules.pattern(rule, value, source, errors, options);
if (rule.whitespace === true) {
rules.whitespace(rule, value, source, errors, options);
}
}
}
callback(errors);
};
var method2 = function method3(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== void 0) {
rules.type(rule, value, source, errors, options);
}
}
callback(errors);
};
var number2 = function number3(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (value === "") {
value = void 0;
}
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== void 0) {
rules.type(rule, value, source, errors, options);
rules.range(rule, value, source, errors, options);
}
}
callback(errors);
};
var _boolean = function _boolean2(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== void 0) {
rules.type(rule, value, source, errors, options);
}
}
callback(errors);
};
var regexp2 = function regexp3(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (!isEmptyValue(value)) {
rules.type(rule, value, source, errors, options);
}
}
callback(errors);
};
var integer2 = function integer3(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== void 0) {
rules.type(rule, value, source, errors, options);
rules.range(rule, value, source, errors, options);
}
}
callback(errors);
};
var floatFn = function floatFn2(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== void 0) {
rules.type(rule, value, source, errors, options);
rules.range(rule, value, source, errors, options);
}
}
callback(errors);
};
var array2 = function array3(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if ((value === void 0 || value === null) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options, "array");
if (value !== void 0 && value !== null) {
rules.type(rule, value, source, errors, options);
rules.range(rule, value, source, errors, options);
}
}
callback(errors);
};
var object2 = function object3(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== void 0) {
rules.type(rule, value, source, errors, options);
}
}
callback(errors);
};
var ENUM = "enum";
var enumerable2 = function enumerable3(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (value !== void 0) {
rules[ENUM](rule, value, source, errors, options);
}
}
callback(errors);
};
var pattern2 = function pattern3(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value, "string") && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (!isEmptyValue(value, "string")) {
rules.pattern(rule, value, source, errors, options);
}
}
callback(errors);
};
var date2 = function date3(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value, "date") && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
if (!isEmptyValue(value, "date")) {
var dateObject;
if (value instanceof Date) {
dateObject = value;
} else {
dateObject = new Date(value);
}
rules.type(rule, dateObject, source, errors, options);
if (dateObject) {
rules.range(rule, dateObject.getTime(), source, errors, options);
}
}
}
callback(errors);
};
var required2 = function required3(rule, value, callback, source, options) {
var errors = [];
var type4 = Array.isArray(value) ? "array" : typeof value;
rules.required(rule, value, source, errors, options, type4);
callback(errors);
};
var type2 = function type3(rule, value, callback, source, options) {
var ruleType = rule.type;
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value, ruleType) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options, ruleType);
if (!isEmptyValue(value, ruleType)) {
rules.type(rule, value, source, errors, options);
}
}
callback(errors);
};
var any = function any2(rule, value, callback, source, options) {
var errors = [];
var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
if (validate) {
if (isEmptyValue(value) && !rule.required) {
return callback();
}
rules.required(rule, value, source, errors, options);
}
callback(errors);
};
var validators = {
string,
method: method2,
number: number2,
"boolean": _boolean,
regexp: regexp2,
integer: integer2,
"float": floatFn,
array: array2,
object: object2,
"enum": enumerable2,
pattern: pattern2,
date: date2,
url: type2,
hex: type2,
email: type2,
required: required2,
any
};
function newMessages() {
return {
"default": "Validation error on field %s",
required: "%s is required",
"enum": "%s must be one of %s",
whitespace: "%s cannot be empty",
date: {
format: "%s date %s is invalid for format %s",
parse: "%s date could not be parsed, %s is invalid ",
invalid: "%s date %s is invalid"
},
types: {
string: "%s is not a %s",
method: "%s is not a %s (function)",
array: "%s is not an %s",
object: "%s is not an %s",
number: "%s is not a %s",
date: "%s is not a %s",
"boolean": "%s is not a %s",
integer: "%s is not an %s",
"float": "%s is not a %s",
regexp: "%s is not a valid %s",
email: "%s is not a valid %s",
url: "%s is not a valid %s",
hex: "%s is not a valid %s"
},
string: {
len: "%s must be exactly %s characters",
min: "%s must be at least %s characters",
max: "%s cannot be longer than %s characters",
range: "%s must be between %s and %s characters"
},
number: {
len: "%s must equal %s",
min: "%s cannot be less than %s",
max: "%s cannot be greater than %s",
range: "%s must be between %s and %s"
},
array: {
len: "%s must be exactly %s in length",
min: "%s cannot be less than %s in length",
max: "%s cannot be greater than %s in length",
range: "%s must be between %s and %s in length"
},
pattern: {
mismatch: "%s value %s does not match pattern %s"
},
clone: function clone() {
var cloned = JSON.parse(JSON.stringify(this));
cloned.clone = this.clone;
return cloned;
}
};
}
var messages = newMessages();
var Schema = /* @__PURE__ */ function() {
function Schema2(descriptor) {
this.rules = null;
this._messages = messages;
this.define(descriptor);
}
var _proto = Schema2.prototype;
_proto.define = function define(rules2) {
var _this = this;
if (!rules2) {
throw new Error("Cannot configure a schema with no rules");
}
if (typeof rules2 !== "object" || Array.isArray(rules2)) {
throw new Error("Rules must be an object");
}
this.rules = {};
Object.keys(rules2).forEach(function(name) {
var item = rules2[name];
_this.rules[name] = Array.isArray(item) ? item : [item];
});
};
_proto.messages = function messages2(_messages) {
if (_messages) {
this._messages = deepMerge(newMessages(), _messages);
}
return this._messages;
};
_proto.validate = function validate(source_, o, oc) {
var _this2 = this;
if (o === void 0) {
o = {};
}
if (oc === void 0) {
oc = function oc2() {
};
}
var source = source_;
var options = o;
var callback = oc;
if (typeof options === "function") {
callback = options;
options = {};
}
if (!this.rules || Object.keys(this.rules).length === 0) {
if (callback) {
callback(null, source);
}
return Promise.resolve(source);
}
function complete(results) {
var errors = [];
var fields = {};
function add(e) {
if (Array.isArray(e)) {
var _errors;
errors = (_errors = errors).concat.apply(_errors, e);
} else {
errors.push(e);
}
}
for (var i = 0; i < results.length; i++) {
add(results[i]);
}
if (!errors.length) {
callback(null, source);
} else {
fields = convertFieldsError(errors);
callback(errors, fields);
}
}
if (options.messages) {
var messages$1 = this.messages();
if (messages$1 === messages) {
messages$1 = newMessages();
}
deepMerge(messages$1, options.messages);
options.messages = messages$1;
} else {
options.messages = this.messages();
}
var series = {};
var keys = options.keys || Object.keys(this.rules);
keys.forEach(function(z) {
var arr = _this2.rules[z];
var value = source[z];
arr.forEach(function(r) {
var rule = r;
if (typeof rule.transform === "function") {
if (source === source_) {
source = _extends({}, source);
}
value = source[z] = rule.transform(value);
}
if (typeof rule === "function") {
rule = {
validator: rule
};
} else {
rule = _extends({}, rule);
}
rule.validator = _this2.getValidationMethod(rule);
if (!rule.validator) {
return;
}
rule.field = z;
rule.fullField = rule.fullField || z;
rule.type = _this2.getType(rule);
series[z] = series[z] || [];
series[z].push({
rule,
value,
source,
field: z
});
});
});
var errorFields = {};
return asyncMap(series, options, function(data, doIt) {
var rule = data.rule;
var deep = (rule.type === "object" || rule.type === "array") && (typeof rule.fields === "object" || typeof rule.defaultField === "object");
deep = deep && (rule.required || !rule.required && data.value);
rule.field = data.field;
function addFullField(key, schema) {
return _extends({}, schema, {
fullField: rule.fullField + "." + key,
fullFields: rule.fullFields ? [].concat(rule.fullFields, [key]) : [key]
});
}
function cb(e) {
if (e === void 0) {
e = [];
}
var errorList = Array.isArray(e) ? e : [e];
if (!options.suppressWarning && errorList.length) {
Schema2.warning("async-validator:", errorList);
}
if (errorList.length && rule.message !== void 0) {
errorList = [].concat(rule.message);
}
var filledErrors = errorList.map(complementError(rule, source));
if (options.first && filledErrors.length) {
errorFields[rule.field] = 1;
return doIt(filledErrors);
}
if (!deep) {
doIt(filledErrors);
} else {
if (rule.required && !data.value) {
if (rule.message !== void 0) {
filledErrors = [].concat(rule.message).map(complementError(rule, source));
} else if (options.error) {
filledErrors = [options.error(rule, format(options.messages.required, rule.field))];
}
return doIt(filledErrors);
}
var fieldsSchema = {};
if (rule.defaultField) {
Object.keys(data.value).map(function(key) {
fieldsSchema[key] = rule.defaultField;
});
}
fieldsSchema = _extends({}, fieldsSchema, data.rule.fields);
var paredFieldsSchema = {};
Object.keys(fieldsSchema).forEach(function(field) {
var fieldSchema = fieldsSchema[field];
var fieldSchemaList = Array.isArray(fieldSchema) ? fieldSchema : [fieldSchema];
paredFieldsSchema[field] = fieldSchemaList.map(addFullField.bind(null, field));
});
var schema = new Schema2(paredFieldsSchema);
schema.messages(options.messages);
if (data.rule.options) {
data.rule.options.messages = options.messages;
data.rule.options.error = options.error;
}
schema.validate(data.value, data.rule.options || options, function(errs) {
var finalErrors = [];
if (filledErrors && filledErrors.length) {
finalErrors.push.apply(finalErrors, filledErrors);
}
if (errs && errs.length) {
finalErrors.push.apply(finalErrors, errs);
}
doIt(finalErrors.length ? finalErrors : null);
});
}
}
var res;
if (rule.asyncValidator) {
res = rule.asyncValidator(rule, data.value, cb, data.source, options);
} else if (rule.validator) {
try {
res = rule.validator(rule, data.value, cb, data.source, options);
} catch (error) {
console.error == null ? void 0 : console.error(error);
if (!options.suppressValidatorError) {
setTimeout(function() {
throw error;
}, 0);
}
cb(error.message);
}
if (res === true) {
cb();
} else if (res === false) {
cb(typeof rule.message === "function" ? rule.message(rule.fullField || rule.field) : rule.message || (rule.fullField || rule.field) + " fails");
} else if (res instanceof Array) {
cb(res);
} else if (res instanceof Error) {
cb(res.message);
}
}
if (res && res.then) {
res.then(function() {
return cb();
}, function(e) {
return cb(e);
});
}
}, function(results) {
complete(results);
}, source);
};
_proto.getType = function getType(rule) {
if (rule.type === void 0 && rule.pattern instanceof RegExp) {
rule.type = "pattern";
}
if (typeof rule.validator !== "function" && rule.type && !validators.hasOwnProperty(rule.type)) {
throw new Error(format("Unknown rule type %s", rule.type));
}
return rule.type || "string";
};
_proto.getValidationMethod = function getValidationMethod(rule) {
if (typeof rule.validator === "function") {
return rule.validator;
}
var keys = Object.keys(rule);
var messageIndex = keys.indexOf("message");
if (messageIndex !== -1) {
keys.splice(messageIndex, 1);
}
if (keys.length === 1 && keys[0] === "required") {
return validators.required;
}
return validators[this.getType(rule)] || void 0;
};
return Schema2;
}();
Schema.register = function register(type4, validator) {
if (typeof validator !== "function") {
throw new Error("Cannot register a validator by type, validator is not a function");
}
validators[type4] = validator;
};
Schema.warning = warning;
Schema.messages = messages;
Schema.validators = validators;
const formItemValidateStates = [
"",
"error",
"validating",
"success"
];
const formItemProps = buildProps({
label: String,
labelWidth: {
type: [String, Number],
default: ""
},
prop: {
type: definePropType([String, Array])
},
required: {
type: Boolean,
default: void 0
},
rules: {
type: definePropType([Object, Array])
},
error: String,
validateStatus: {
type: String,
values: formItemValidateStates
},
for: String,
inlineMessage: {
type: [String, Boolean],
default: ""
},
showMessage: {
type: Boolean,
default: true
},
size: {
type: String,
values: componentSizes
}
});
const COMPONENT_NAME$d = "ElLabelWrap";
var FormLabelWrap = vue.defineComponent({
name: COMPONENT_NAME$d,
props: {
isAutoWidth: Boolean,
updateAll: Boolean
},
setup(props, {
slots
}) {
const formContext = vue.inject(formContextKey, void 0);
const formItemContext = vue.inject(formItemContextKey);
if (!formItemContext)
throwError(COMPONENT_NAME$d, "usage: ");
const ns = useNamespace("form");
const el = vue.ref();
const computedWidth = vue.ref(0);
const getLabelWidth = () => {
var _a;
if ((_a = el.value) == null ? void 0 : _a.firstElementChild) {
const width = window.getComputedStyle(el.value.firstElementChild).width;
return Math.ceil(Number.parseFloat(width));
} else {
return 0;
}
};
const updateLabelWidth = (action = "update") => {
vue.nextTick(() => {
if (slots.default && props.isAutoWidth) {
if (action === "update") {
computedWidth.value = getLabelWidth();
} else if (action === "remove") {
formContext == null ? void 0 : formContext.deregisterLabelWidth(computedWidth.value);
}
}
});
};
const updateLabelWidthFn = () => updateLabelWidth("update");
vue.onMounted(() => {
updateLabelWidthFn();
});
vue.onBeforeUnmount(() => {
updateLabelWidth("remove");
});
vue.onUpdated(() => updateLabelWidthFn());
vue.watch(computedWidth, (val, oldVal) => {
if (props.updateAll) {
formContext == null ? void 0 : formContext.registerLabelWidth(val, oldVal);
}
});
useResizeObserver(vue.computed(() => {
var _a, _b;
return (_b = (_a = el.value) == null ? void 0 : _a.firstElementChild) != null ? _b : null;
}), updateLabelWidthFn);
return () => {
var _a, _b;
if (!slots)
return null;
const {
isAutoWidth
} = props;
if (isAutoWidth) {
const autoLabelWidth = formContext == null ? void 0 : formContext.autoLabelWidth;
const hasLabel = formItemContext == null ? void 0 : formItemContext.hasLabel;
const style = {};
if (hasLabel && autoLabelWidth && autoLabelWidth !== "auto") {
const marginWidth = Math.max(0, Number.parseInt(autoLabelWidth, 10) - computedWidth.value);
const marginPosition = formContext.labelPosition === "left" ? "marginRight" : "marginLeft";
if (marginWidth) {
style[marginPosition] = `${marginWidth}px`;
}
}
return vue.createVNode("div", {
"ref": el,
"class": [ns.be("item", "label-wrap")],
"style": style
}, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
} else {
return vue.createVNode(vue.Fragment, {
"ref": el
}, [(_b = slots.default) == null ? void 0 : _b.call(slots)]);
}
};
}
});
const _hoisted_1$v = ["role", "aria-labelledby"];
const __default__$I = vue.defineComponent({
name: "ElFormItem"
});
const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
...__default__$I,
props: formItemProps,
setup(__props, { expose }) {
const props = __props;
const slots = vue.useSlots();
const formContext = vue.inject(formContextKey, void 0);
const parentFormItemContext = vue.inject(formItemContextKey, void 0);
const _size = useSize(void 0, { formItem: false });
const ns = useNamespace("form-item");
const labelId = useId().value;
const inputIds = vue.ref([]);
const validateState = vue.ref("");
const validateStateDebounced = refDebounced(validateState, 100);
const validateMessage = vue.ref("");
const formItemRef = vue.ref();
let initialValue = void 0;
let isResettingField = false;
const labelStyle = vue.computed(() => {
if ((formContext == null ? void 0 : formContext.labelPosition) === "top") {
return {};
}
const labelWidth = addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || "");
if (labelWidth)
return { width: labelWidth };
return {};
});
const contentStyle = vue.computed(() => {
if ((formContext == null ? void 0 : formContext.labelPosition) === "top" || (formContext == null ? void 0 : formContext.inline)) {
return {};
}
if (!props.label && !props.labelWidth && isNested) {
return {};
}
const labelWidth = addUnit(props.labelWidth || (formContext == null ? void 0 : formContext.labelWidth) || "");
if (!props.label && !slots.label) {
return { marginLeft: labelWidth };
}
return {};
});
const formItemClasses = vue.computed(() => [
ns.b(),
ns.m(_size.value),
ns.is("error", validateState.value === "error"),
ns.is("validating", validateState.value === "validating"),
ns.is("success", validateState.value === "success"),
ns.is("required", isRequired.value || props.required),
ns.is("no-asterisk", formContext == null ? void 0 : formContext.hideRequiredAsterisk),
(formContext == null ? void 0 : formContext.requireAsteriskPosition) === "right" ? "asterisk-right" : "asterisk-left",
{ [ns.m("feedback")]: formContext == null ? void 0 : formContext.statusIcon }
]);
const _inlineMessage = vue.computed(() => isBoolean(props.inlineMessage) ? props.inlineMessage : (formContext == null ? void 0 : formContext.inlineMessage) || false);
const validateClasses = vue.computed(() => [
ns.e("error"),
{ [ns.em("error", "inline")]: _inlineMessage.value }
]);
const propString = vue.computed(() => {
if (!props.prop)
return "";
return isString(props.prop) ? props.prop : props.prop.join(".");
});
const hasLabel = vue.computed(() => {
return !!(props.label || slots.label);
});
const labelFor = vue.computed(() => {
return props.for || inputIds.value.length === 1 ? inputIds.value[0] : void 0;
});
const isGroup = vue.computed(() => {
return !labelFor.value && hasLabel.value;
});
const isNested = !!parentFormItemContext;
const fieldValue = vue.computed(() => {
const model = formContext == null ? void 0 : formContext.model;
if (!model || !props.prop) {
return;
}
return getProp(model, props.prop).value;
});
const normalizedRules = vue.computed(() => {
const { required } = props;
const rules = [];
if (props.rules) {
rules.push(...castArray$1(props.rules));
}
const formRules = formContext == null ? void 0 : formContext.rules;
if (formRules && props.prop) {
const _rules = getProp(formRules, props.prop).value;
if (_rules) {
rules.push(...castArray$1(_rules));
}
}
if (required !== void 0) {
const requiredRules = rules.map((rule, i) => [rule, i]).filter(([rule]) => Object.keys(rule).includes("required"));
if (requiredRules.length > 0) {
for (const [rule, i] of requiredRules) {
if (rule.required === required)
continue;
rules[i] = { ...rule, required };
}
} else {
rules.push({ required });
}
}
return rules;
});
const validateEnabled = vue.computed(() => normalizedRules.value.length > 0);
const getFilteredRule = (trigger) => {
const rules = normalizedRules.value;
return rules.filter((rule) => {
if (!rule.trigger || !trigger)
return true;
if (Array.isArray(rule.trigger)) {
return rule.trigger.includes(trigger);
} else {
return rule.trigger === trigger;
}
}).map(({ trigger: trigger2, ...rule }) => rule);
};
const isRequired = vue.computed(() => normalizedRules.value.some((rule) => rule.required));
const shouldShowError = vue.computed(() => {
var _a;
return validateStateDebounced.value === "error" && props.showMessage && ((_a = formContext == null ? void 0 : formContext.showMessage) != null ? _a : true);
});
const currentLabel = vue.computed(() => `${props.label || ""}${(formContext == null ? void 0 : formContext.labelSuffix) || ""}`);
const setValidationState = (state) => {
validateState.value = state;
};
const onValidationFailed = (error) => {
var _a, _b;
const { errors, fields } = error;
if (!errors || !fields) {
console.error(error);
}
setValidationState("error");
validateMessage.value = errors ? (_b = (_a = errors == null ? void 0 : errors[0]) == null ? void 0 : _a.message) != null ? _b : `${props.prop} is required` : "";
formContext == null ? void 0 : formContext.emit("validate", props.prop, false, validateMessage.value);
};
const onValidationSucceeded = () => {
setValidationState("success");
formContext == null ? void 0 : formContext.emit("validate", props.prop, true, "");
};
const doValidate = async (rules) => {
const modelName = propString.value;
const validator = new Schema({
[modelName]: rules
});
return validator.validate({ [modelName]: fieldValue.value }, { firstFields: true }).then(() => {
onValidationSucceeded();
return true;
}).catch((err) => {
onValidationFailed(err);
return Promise.reject(err);
});
};
const validate = async (trigger, callback) => {
if (isResettingField || !props.prop) {
return false;
}
const hasCallback = isFunction(callback);
if (!validateEnabled.value) {
callback == null ? void 0 : callback(false);
return false;
}
const rules = getFilteredRule(trigger);
if (rules.length === 0) {
callback == null ? void 0 : callback(true);
return true;
}
setValidationState("validating");
return doValidate(rules).then(() => {
callback == null ? void 0 : callback(true);
return true;
}).catch((err) => {
const { fields } = err;
callback == null ? void 0 : callback(false, fields);
return hasCallback ? false : Promise.reject(fields);
});
};
const clearValidate = () => {
setValidationState("");
validateMessage.value = "";
isResettingField = false;
};
const resetField = async () => {
const model = formContext == null ? void 0 : formContext.model;
if (!model || !props.prop)
return;
const computedValue = getProp(model, props.prop);
isResettingField = true;
computedValue.value = clone(initialValue);
await vue.nextTick();
clearValidate();
isResettingField = false;
};
const addInputId = (id) => {
if (!inputIds.value.includes(id)) {
inputIds.value.push(id);
}
};
const removeInputId = (id) => {
inputIds.value = inputIds.value.filter((listId) => listId !== id);
};
vue.watch(() => props.error, (val) => {
validateMessage.value = val || "";
setValidationState(val ? "error" : "");
}, { immediate: true });
vue.watch(() => props.validateStatus, (val) => setValidationState(val || ""));
const context = vue.reactive({
...vue.toRefs(props),
$el: formItemRef,
size: _size,
validateState,
labelId,
inputIds,
isGroup,
hasLabel,
addInputId,
removeInputId,
resetField,
clearValidate,
validate
});
vue.provide(formItemContextKey, context);
vue.onMounted(() => {
if (props.prop) {
formContext == null ? void 0 : formContext.addField(context);
initialValue = clone(fieldValue.value);
}
});
vue.onBeforeUnmount(() => {
formContext == null ? void 0 : formContext.removeField(context);
});
expose({
size: _size,
validateMessage,
validateState,
validate,
clearValidate,
resetField
});
return (_ctx, _cache) => {
var _a;
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "formItemRef",
ref: formItemRef,
class: vue.normalizeClass(vue.unref(formItemClasses)),
role: vue.unref(isGroup) ? "group" : void 0,
"aria-labelledby": vue.unref(isGroup) ? vue.unref(labelId) : void 0
}, [
vue.createVNode(vue.unref(FormLabelWrap), {
"is-auto-width": vue.unref(labelStyle).width === "auto",
"update-all": ((_a = vue.unref(formContext)) == null ? void 0 : _a.labelWidth) === "auto"
}, {
default: vue.withCtx(() => [
vue.unref(hasLabel) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(labelFor) ? "label" : "div"), {
key: 0,
id: vue.unref(labelId),
for: vue.unref(labelFor),
class: vue.normalizeClass(vue.unref(ns).e("label")),
style: vue.normalizeStyle(vue.unref(labelStyle))
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "label", { label: vue.unref(currentLabel) }, () => [
vue.createTextVNode(vue.toDisplayString(vue.unref(currentLabel)), 1)
])
]),
_: 3
}, 8, ["id", "for", "class", "style"])) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["is-auto-width", "update-all"]),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("content")),
style: vue.normalizeStyle(vue.unref(contentStyle))
}, [
vue.renderSlot(_ctx.$slots, "default"),
vue.createVNode(vue.Transition, {
name: `${vue.unref(ns).namespace.value}-zoom-in-top`
}, {
default: vue.withCtx(() => [
vue.unref(shouldShowError) ? vue.renderSlot(_ctx.$slots, "error", {
key: 0,
error: validateMessage.value
}, () => [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(validateClasses))
}, vue.toDisplayString(validateMessage.value), 3)
]) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["name"])
], 6)
], 10, _hoisted_1$v);
};
}
});
var FormItem = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__file", "form-item.vue"]]);
const ElForm = withInstall(Form, {
FormItem
});
const ElFormItem = withNoopInstall(FormItem);
const imageViewerProps = buildProps({
urlList: {
type: definePropType(Array),
default: () => mutable([])
},
zIndex: {
type: Number
},
initialIndex: {
type: Number,
default: 0
},
infinite: {
type: Boolean,
default: true
},
hideOnClickModal: {
type: Boolean,
default: false
},
teleported: {
type: Boolean,
default: false
},
closeOnPressEscape: {
type: Boolean,
default: true
}
});
const imageViewerEmits = {
close: () => true,
switch: (index) => isNumber(index)
};
const _hoisted_1$u = ["src"];
const __default__$H = vue.defineComponent({
name: "ElImageViewer"
});
const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
...__default__$H,
props: imageViewerProps,
emits: imageViewerEmits,
setup(__props, { expose, emit }) {
const props = __props;
const modes = {
CONTAIN: {
name: "contain",
icon: vue.markRaw(full_screen_default)
},
ORIGINAL: {
name: "original",
icon: vue.markRaw(scale_to_original_default)
}
};
const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
const { t } = useLocale();
const ns = useNamespace("image-viewer");
const { nextZIndex } = useZIndex();
const wrapper = vue.ref();
const imgRefs = vue.ref([]);
const scopeEventListener = vue.effectScope();
const loading = vue.ref(true);
const activeIndex = vue.ref(props.initialIndex);
const mode = vue.shallowRef(modes.CONTAIN);
const transform = vue.ref({
scale: 1,
deg: 0,
offsetX: 0,
offsetY: 0,
enableTransition: false
});
const isSingle = vue.computed(() => {
const { urlList } = props;
return urlList.length <= 1;
});
const isFirst = vue.computed(() => {
return activeIndex.value === 0;
});
const isLast = vue.computed(() => {
return activeIndex.value === props.urlList.length - 1;
});
const currentImg = vue.computed(() => {
return props.urlList[activeIndex.value];
});
const imgStyle = vue.computed(() => {
const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
let translateX = offsetX / scale;
let translateY = offsetY / scale;
switch (deg % 360) {
case 90:
case -270:
[translateX, translateY] = [translateY, -translateX];
break;
case 180:
case -180:
[translateX, translateY] = [-translateX, -translateY];
break;
case 270:
case -90:
[translateX, translateY] = [-translateY, translateX];
break;
}
const style = {
transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
transition: enableTransition ? "transform .3s" : ""
};
if (mode.value.name === modes.CONTAIN.name) {
style.maxWidth = style.maxHeight = "100%";
}
return style;
});
const computedZIndex = vue.computed(() => {
return isNumber(props.zIndex) ? props.zIndex : nextZIndex();
});
function hide() {
unregisterEventListener();
emit("close");
}
function registerEventListener() {
const keydownHandler = throttle((e) => {
switch (e.code) {
case EVENT_CODE.esc:
props.closeOnPressEscape && hide();
break;
case EVENT_CODE.space:
toggleMode();
break;
case EVENT_CODE.left:
prev();
break;
case EVENT_CODE.up:
handleActions("zoomIn");
break;
case EVENT_CODE.right:
next();
break;
case EVENT_CODE.down:
handleActions("zoomOut");
break;
}
});
const mousewheelHandler = throttle((e) => {
const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
if (delta > 0) {
handleActions("zoomIn", {
zoomRate: 1.2,
enableTransition: false
});
} else {
handleActions("zoomOut", {
zoomRate: 1.2,
enableTransition: false
});
}
});
scopeEventListener.run(() => {
useEventListener(document, "keydown", keydownHandler);
useEventListener(document, mousewheelEventName, mousewheelHandler);
});
}
function unregisterEventListener() {
scopeEventListener.stop();
}
function handleImgLoad() {
loading.value = false;
}
function handleImgError(e) {
loading.value = false;
e.target.alt = t("el.image.error");
}
function handleMouseDown(e) {
if (loading.value || e.button !== 0 || !wrapper.value)
return;
transform.value.enableTransition = false;
const { offsetX, offsetY } = transform.value;
const startX = e.pageX;
const startY = e.pageY;
const dragHandler = throttle((ev) => {
transform.value = {
...transform.value,
offsetX: offsetX + ev.pageX - startX,
offsetY: offsetY + ev.pageY - startY
};
});
const removeMousemove = useEventListener(document, "mousemove", dragHandler);
useEventListener(document, "mouseup", () => {
removeMousemove();
});
e.preventDefault();
}
function reset() {
transform.value = {
scale: 1,
deg: 0,
offsetX: 0,
offsetY: 0,
enableTransition: false
};
}
function toggleMode() {
if (loading.value)
return;
const modeNames = keysOf(modes);
const modeValues = Object.values(modes);
const currentMode = mode.value.name;
const index = modeValues.findIndex((i) => i.name === currentMode);
const nextIndex = (index + 1) % modeNames.length;
mode.value = modes[modeNames[nextIndex]];
reset();
}
function setActiveItem(index) {
const len = props.urlList.length;
activeIndex.value = (index + len) % len;
}
function prev() {
if (isFirst.value && !props.infinite)
return;
setActiveItem(activeIndex.value - 1);
}
function next() {
if (isLast.value && !props.infinite)
return;
setActiveItem(activeIndex.value + 1);
}
function handleActions(action, options = {}) {
if (loading.value)
return;
const { zoomRate, rotateDeg, enableTransition } = {
zoomRate: 1.4,
rotateDeg: 90,
enableTransition: true,
...options
};
switch (action) {
case "zoomOut":
if (transform.value.scale > 0.2) {
transform.value.scale = Number.parseFloat((transform.value.scale / zoomRate).toFixed(3));
}
break;
case "zoomIn":
if (transform.value.scale < 7) {
transform.value.scale = Number.parseFloat((transform.value.scale * zoomRate).toFixed(3));
}
break;
case "clockwise":
transform.value.deg += rotateDeg;
break;
case "anticlockwise":
transform.value.deg -= rotateDeg;
break;
}
transform.value.enableTransition = enableTransition;
}
vue.watch(currentImg, () => {
vue.nextTick(() => {
const $img = imgRefs.value[0];
if (!($img == null ? void 0 : $img.complete)) {
loading.value = true;
}
});
});
vue.watch(activeIndex, (val) => {
reset();
emit("switch", val);
});
vue.onMounted(() => {
var _a, _b;
registerEventListener();
(_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
});
expose({
setActiveItem
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Teleport, {
to: "body",
disabled: !_ctx.teleported
}, [
vue.createVNode(vue.Transition, {
name: "viewer-fade",
appear: ""
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
ref_key: "wrapper",
ref: wrapper,
tabindex: -1,
class: vue.normalizeClass(vue.unref(ns).e("wrapper")),
style: vue.normalizeStyle({ zIndex: vue.unref(computedZIndex) })
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("mask")),
onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.hideOnClickModal && hide(), ["self"]))
}, null, 2),
vue.createCommentVNode(" CLOSE "),
vue.createElementVNode("span", {
class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("close")]),
onClick: hide
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(close_default))
]),
_: 1
})
], 2),
vue.createCommentVNode(" ARROW "),
!vue.unref(isSingle) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createElementVNode("span", {
class: vue.normalizeClass([
vue.unref(ns).e("btn"),
vue.unref(ns).e("prev"),
vue.unref(ns).is("disabled", !_ctx.infinite && vue.unref(isFirst))
]),
onClick: prev
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_left_default))
]),
_: 1
})
], 2),
vue.createElementVNode("span", {
class: vue.normalizeClass([
vue.unref(ns).e("btn"),
vue.unref(ns).e("next"),
vue.unref(ns).is("disabled", !_ctx.infinite && vue.unref(isLast))
]),
onClick: next
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_right_default))
]),
_: 1
})
], 2)
], 64)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" ACTIONS "),
vue.createElementVNode("div", {
class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("actions")])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("actions__inner"))
}, [
vue.createVNode(vue.unref(ElIcon), {
onClick: _cache[1] || (_cache[1] = ($event) => handleActions("zoomOut"))
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(zoom_out_default))
]),
_: 1
}),
vue.createVNode(vue.unref(ElIcon), {
onClick: _cache[2] || (_cache[2] = ($event) => handleActions("zoomIn"))
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(zoom_in_default))
]),
_: 1
}),
vue.createElementVNode("i", {
class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
}, null, 2),
vue.createVNode(vue.unref(ElIcon), { onClick: toggleMode }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(mode).icon)))
]),
_: 1
}),
vue.createElementVNode("i", {
class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
}, null, 2),
vue.createVNode(vue.unref(ElIcon), {
onClick: _cache[3] || (_cache[3] = ($event) => handleActions("anticlockwise"))
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(refresh_left_default))
]),
_: 1
}),
vue.createVNode(vue.unref(ElIcon), {
onClick: _cache[4] || (_cache[4] = ($event) => handleActions("clockwise"))
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(refresh_right_default))
]),
_: 1
})
], 2)
], 2),
vue.createCommentVNode(" CANVAS "),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("canvas"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
ref_for: true,
ref: (el) => imgRefs.value[i] = el,
key: url,
src: url,
style: vue.normalizeStyle(vue.unref(imgStyle)),
class: vue.normalizeClass(vue.unref(ns).e("img")),
onLoad: handleImgLoad,
onError: handleImgError,
onMousedown: handleMouseDown
}, null, 46, _hoisted_1$u)), [
[vue.vShow, i === activeIndex.value]
]);
}), 128))
], 2),
vue.renderSlot(_ctx.$slots, "default")
], 6)
]),
_: 3
})
], 8, ["disabled"]);
};
}
});
var ImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__file", "image-viewer.vue"]]);
const ElImageViewer = withInstall(ImageViewer);
const imageProps = buildProps({
hideOnClickModal: {
type: Boolean,
default: false
},
src: {
type: String,
default: ""
},
fit: {
type: String,
values: ["", "contain", "cover", "fill", "none", "scale-down"],
default: ""
},
loading: {
type: String,
values: ["eager", "lazy"]
},
lazy: {
type: Boolean,
default: false
},
scrollContainer: {
type: definePropType([String, Object])
},
previewSrcList: {
type: definePropType(Array),
default: () => mutable([])
},
previewTeleported: {
type: Boolean,
default: false
},
zIndex: {
type: Number
},
initialIndex: {
type: Number,
default: 0
},
infinite: {
type: Boolean,
default: true
},
closeOnPressEscape: {
type: Boolean,
default: true
}
});
const imageEmits = {
load: (evt) => evt instanceof Event,
error: (evt) => evt instanceof Event,
switch: (val) => isNumber(val),
close: () => true,
show: () => true
};
const _hoisted_1$t = ["src", "loading"];
const _hoisted_2$j = { key: 0 };
const __default__$G = vue.defineComponent({
name: "ElImage",
inheritAttrs: false
});
const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
...__default__$G,
props: imageProps,
emits: imageEmits,
setup(__props, { emit }) {
const props = __props;
let prevOverflow = "";
const { t } = useLocale();
const ns = useNamespace("image");
const rawAttrs = vue.useAttrs();
const attrs = useAttrs();
const imageSrc = vue.ref();
const hasLoadError = vue.ref(false);
const isLoading = vue.ref(true);
const showViewer = vue.ref(false);
const container = vue.ref();
const _scrollContainer = vue.ref();
const supportLoading = isClient && "loading" in HTMLImageElement.prototype;
let stopScrollListener;
let stopWheelListener;
const containerStyle = vue.computed(() => rawAttrs.style);
const imageStyle = vue.computed(() => {
const { fit } = props;
if (isClient && fit) {
return { objectFit: fit };
}
return {};
});
const preview = vue.computed(() => {
const { previewSrcList } = props;
return Array.isArray(previewSrcList) && previewSrcList.length > 0;
});
const imageIndex = vue.computed(() => {
const { previewSrcList, initialIndex } = props;
let previewIndex = initialIndex;
if (initialIndex > previewSrcList.length - 1) {
previewIndex = 0;
}
return previewIndex;
});
const isManual = vue.computed(() => {
if (props.loading === "eager")
return false;
return !supportLoading && props.loading === "lazy" || props.lazy;
});
const loadImage = () => {
if (!isClient)
return;
isLoading.value = true;
hasLoadError.value = false;
imageSrc.value = props.src;
};
function handleLoad(event) {
isLoading.value = false;
hasLoadError.value = false;
emit("load", event);
}
function handleError(event) {
isLoading.value = false;
hasLoadError.value = true;
emit("error", event);
}
function handleLazyLoad() {
if (isInContainer(container.value, _scrollContainer.value)) {
loadImage();
removeLazyLoadListener();
}
}
const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200);
async function addLazyLoadListener() {
var _a;
if (!isClient)
return;
await vue.nextTick();
const { scrollContainer } = props;
if (isElement$1(scrollContainer)) {
_scrollContainer.value = scrollContainer;
} else if (isString(scrollContainer) && scrollContainer !== "") {
_scrollContainer.value = (_a = document.querySelector(scrollContainer)) != null ? _a : void 0;
} else if (container.value) {
_scrollContainer.value = getScrollContainer(container.value);
}
if (_scrollContainer.value) {
stopScrollListener = useEventListener(_scrollContainer, "scroll", lazyLoadHandler);
setTimeout(() => handleLazyLoad(), 100);
}
}
function removeLazyLoadListener() {
if (!isClient || !_scrollContainer.value || !lazyLoadHandler)
return;
stopScrollListener == null ? void 0 : stopScrollListener();
_scrollContainer.value = void 0;
}
function wheelHandler(e) {
if (!e.ctrlKey)
return;
if (e.deltaY < 0) {
e.preventDefault();
return false;
} else if (e.deltaY > 0) {
e.preventDefault();
return false;
}
}
function clickHandler() {
if (!preview.value)
return;
stopWheelListener = useEventListener("wheel", wheelHandler, {
passive: false
});
prevOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden";
showViewer.value = true;
emit("show");
}
function closeViewer() {
stopWheelListener == null ? void 0 : stopWheelListener();
document.body.style.overflow = prevOverflow;
showViewer.value = false;
emit("close");
}
function switchViewer(val) {
emit("switch", val);
}
vue.watch(() => props.src, () => {
if (isManual.value) {
isLoading.value = true;
hasLoadError.value = false;
removeLazyLoadListener();
addLazyLoadListener();
} else {
loadImage();
}
});
vue.onMounted(() => {
if (isManual.value) {
addLazyLoadListener();
} else {
loadImage();
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "container",
ref: container,
class: vue.normalizeClass([vue.unref(ns).b(), _ctx.$attrs.class]),
style: vue.normalizeStyle(vue.unref(containerStyle))
}, [
imageSrc.value !== void 0 && !hasLoadError.value ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({ key: 0 }, vue.unref(attrs), {
src: imageSrc.value,
loading: _ctx.loading,
style: vue.unref(imageStyle),
class: [
vue.unref(ns).e("inner"),
vue.unref(preview) && vue.unref(ns).e("preview"),
isLoading.value && vue.unref(ns).is("loading")
],
onClick: clickHandler,
onLoad: handleLoad,
onError: handleError
}), null, 16, _hoisted_1$t)) : vue.createCommentVNode("v-if", true),
isLoading.value || hasLoadError.value ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(vue.unref(ns).e("wrapper"))
}, [
isLoading.value ? vue.renderSlot(_ctx.$slots, "placeholder", { key: 0 }, () => [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("placeholder"))
}, null, 2)
]) : hasLoadError.value ? vue.renderSlot(_ctx.$slots, "error", { key: 1 }, () => [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("error"))
}, vue.toDisplayString(vue.unref(t)("el.image.error")), 3)
]) : vue.createCommentVNode("v-if", true)
], 2)) : vue.createCommentVNode("v-if", true),
vue.unref(preview) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
showViewer.value ? (vue.openBlock(), vue.createBlock(vue.unref(ElImageViewer), {
key: 0,
"z-index": _ctx.zIndex,
"initial-index": vue.unref(imageIndex),
infinite: _ctx.infinite,
"url-list": _ctx.previewSrcList,
"hide-on-click-modal": _ctx.hideOnClickModal,
teleported: _ctx.previewTeleported,
"close-on-press-escape": _ctx.closeOnPressEscape,
onClose: closeViewer,
onSwitch: switchViewer
}, {
default: vue.withCtx(() => [
_ctx.$slots.viewer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$j, [
vue.renderSlot(_ctx.$slots, "viewer")
])) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["z-index", "initial-index", "infinite", "url-list", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : vue.createCommentVNode("v-if", true)
], 64)) : vue.createCommentVNode("v-if", true)
], 6);
};
}
});
var Image = /* @__PURE__ */ _export_sfc(_sfc_main$X, [["__file", "image.vue"]]);
const ElImage = withInstall(Image);
const inputNumberProps = buildProps({
id: {
type: String,
default: void 0
},
step: {
type: Number,
default: 1
},
stepStrictly: Boolean,
max: {
type: Number,
default: Number.POSITIVE_INFINITY
},
min: {
type: Number,
default: Number.NEGATIVE_INFINITY
},
modelValue: Number,
readonly: Boolean,
disabled: Boolean,
size: useSizeProp,
controls: {
type: Boolean,
default: true
},
controlsPosition: {
type: String,
default: "",
values: ["", "right"]
},
valueOnClear: {
type: [String, Number, null],
validator: (val) => val === null || isNumber(val) || ["min", "max"].includes(val),
default: null
},
name: String,
label: String,
placeholder: String,
precision: {
type: Number,
validator: (val) => val >= 0 && val === Number.parseInt(`${val}`, 10)
},
validateEvent: {
type: Boolean,
default: true
}
});
const inputNumberEmits = {
[CHANGE_EVENT]: (prev, cur) => prev !== cur,
blur: (e) => e instanceof FocusEvent,
focus: (e) => e instanceof FocusEvent,
[INPUT_EVENT]: (val) => isNumber(val) || isNil(val),
[UPDATE_MODEL_EVENT]: (val) => isNumber(val) || isNil(val)
};
const _hoisted_1$s = ["aria-label", "onKeydown"];
const _hoisted_2$i = ["aria-label", "onKeydown"];
const __default__$F = vue.defineComponent({
name: "ElInputNumber"
});
const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
...__default__$F,
props: inputNumberProps,
emits: inputNumberEmits,
setup(__props, { expose, emit }) {
const props = __props;
const { t } = useLocale();
const ns = useNamespace("input-number");
const input = vue.ref();
const data = vue.reactive({
currentValue: props.modelValue,
userInput: null
});
const { formItem } = useFormItem();
const minDisabled = vue.computed(() => isNumber(props.modelValue) && ensurePrecision(props.modelValue, -1) < props.min);
const maxDisabled = vue.computed(() => isNumber(props.modelValue) && ensurePrecision(props.modelValue) > props.max);
const numPrecision = vue.computed(() => {
const stepPrecision = getPrecision(props.step);
if (!isUndefined(props.precision)) {
if (stepPrecision > props.precision) ;
return props.precision;
} else {
return Math.max(getPrecision(props.modelValue), stepPrecision);
}
});
const controlsAtRight = vue.computed(() => {
return props.controls && props.controlsPosition === "right";
});
const inputNumberSize = useSize();
const inputNumberDisabled = useDisabled();
const displayValue = vue.computed(() => {
if (data.userInput !== null) {
return data.userInput;
}
let currentValue = data.currentValue;
if (isNil(currentValue))
return "";
if (isNumber(currentValue)) {
if (Number.isNaN(currentValue))
return "";
if (!isUndefined(props.precision)) {
currentValue = currentValue.toFixed(props.precision);
}
}
return currentValue;
});
const toPrecision = (num, pre) => {
if (isUndefined(pre))
pre = numPrecision.value;
if (pre === 0)
return Math.round(num);
let snum = String(num);
const pointPos = snum.indexOf(".");
if (pointPos === -1)
return num;
const nums = snum.replace(".", "").split("");
const datum = nums[pointPos + pre];
if (!datum)
return num;
const length = snum.length;
if (snum.charAt(length - 1) === "5") {
snum = `${snum.slice(0, Math.max(0, length - 1))}6`;
}
return Number.parseFloat(Number(snum).toFixed(pre));
};
const getPrecision = (value) => {
if (isNil(value))
return 0;
const valueString = value.toString();
const dotPosition = valueString.indexOf(".");
let precision = 0;
if (dotPosition !== -1) {
precision = valueString.length - dotPosition - 1;
}
return precision;
};
const ensurePrecision = (val, coefficient = 1) => {
if (!isNumber(val))
return data.currentValue;
return toPrecision(val + props.step * coefficient);
};
const increase = () => {
if (props.readonly || inputNumberDisabled.value || maxDisabled.value)
return;
const value = Number(displayValue.value) || 0;
const newVal = ensurePrecision(value);
setCurrentValue(newVal);
emit(INPUT_EVENT, data.currentValue);
};
const decrease = () => {
if (props.readonly || inputNumberDisabled.value || minDisabled.value)
return;
const value = Number(displayValue.value) || 0;
const newVal = ensurePrecision(value, -1);
setCurrentValue(newVal);
emit(INPUT_EVENT, data.currentValue);
};
const verifyValue = (value, update) => {
const { max, min, step, precision, stepStrictly, valueOnClear } = props;
let newVal = Number(value);
if (isNil(value) || Number.isNaN(newVal)) {
return null;
}
if (value === "") {
if (valueOnClear === null) {
return null;
}
newVal = isString(valueOnClear) ? { min, max }[valueOnClear] : valueOnClear;
}
if (stepStrictly) {
newVal = toPrecision(Math.round(newVal / step) * step, precision);
}
if (!isUndefined(precision)) {
newVal = toPrecision(newVal, precision);
}
if (newVal > max || newVal < min) {
newVal = newVal > max ? max : min;
update && emit(UPDATE_MODEL_EVENT, newVal);
}
return newVal;
};
const setCurrentValue = (value) => {
var _a;
const oldVal = data.currentValue;
const newVal = verifyValue(value);
if (oldVal === newVal)
return;
data.userInput = null;
emit(UPDATE_MODEL_EVENT, newVal);
emit(CHANGE_EVENT, newVal, oldVal);
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
}
data.currentValue = newVal;
};
const handleInput = (value) => {
data.userInput = value;
emit(INPUT_EVENT, value === "" ? null : Number(value));
};
const handleInputChange = (value) => {
const newVal = value !== "" ? Number(value) : "";
if (isNumber(newVal) && !Number.isNaN(newVal) || value === "") {
setCurrentValue(newVal);
}
data.userInput = null;
};
const focus = () => {
var _a, _b;
(_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
};
const blur = () => {
var _a, _b;
(_b = (_a = input.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
};
const handleFocus = (event) => {
emit("focus", event);
};
const handleBlur = (event) => {
var _a;
emit("blur", event);
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn());
}
};
vue.watch(() => props.modelValue, (value) => {
data.currentValue = verifyValue(value, true);
data.userInput = null;
}, { immediate: true });
vue.onMounted(() => {
var _a;
const { min, max, modelValue } = props;
const innerInput = (_a = input.value) == null ? void 0 : _a.input;
innerInput.setAttribute("role", "spinbutton");
if (Number.isFinite(max)) {
innerInput.setAttribute("aria-valuemax", String(max));
} else {
innerInput.removeAttribute("aria-valuemax");
}
if (Number.isFinite(min)) {
innerInput.setAttribute("aria-valuemin", String(min));
} else {
innerInput.removeAttribute("aria-valuemin");
}
innerInput.setAttribute("aria-valuenow", String(data.currentValue));
innerInput.setAttribute("aria-disabled", String(inputNumberDisabled.value));
if (!isNumber(modelValue) && modelValue != null) {
let val = Number(modelValue);
if (Number.isNaN(val)) {
val = null;
}
emit(UPDATE_MODEL_EVENT, val);
}
});
vue.onUpdated(() => {
var _a;
const innerInput = (_a = input.value) == null ? void 0 : _a.input;
innerInput == null ? void 0 : innerInput.setAttribute("aria-valuenow", `${data.currentValue}`);
});
expose({
focus,
blur
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
vue.unref(ns).b(),
vue.unref(ns).m(vue.unref(inputNumberSize)),
vue.unref(ns).is("disabled", vue.unref(inputNumberDisabled)),
vue.unref(ns).is("without-controls", !_ctx.controls),
vue.unref(ns).is("controls-right", vue.unref(controlsAtRight))
]),
onDragstart: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["prevent"]))
}, [
_ctx.controls ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
key: 0,
role: "button",
"aria-label": vue.unref(t)("el.inputNumber.decrease"),
class: vue.normalizeClass([vue.unref(ns).e("decrease"), vue.unref(ns).is("disabled", vue.unref(minDisabled))]),
onKeydown: vue.withKeys(decrease, ["enter"])
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.unref(controlsAtRight) ? (vue.openBlock(), vue.createBlock(vue.unref(arrow_down_default), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(minus_default), { key: 1 }))
]),
_: 1
})
], 42, _hoisted_1$s)), [
[vue.unref(vRepeatClick), decrease]
]) : vue.createCommentVNode("v-if", true),
_ctx.controls ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
key: 1,
role: "button",
"aria-label": vue.unref(t)("el.inputNumber.increase"),
class: vue.normalizeClass([vue.unref(ns).e("increase"), vue.unref(ns).is("disabled", vue.unref(maxDisabled))]),
onKeydown: vue.withKeys(increase, ["enter"])
}, [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.unref(controlsAtRight) ? (vue.openBlock(), vue.createBlock(vue.unref(arrow_up_default), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(plus_default), { key: 1 }))
]),
_: 1
})
], 42, _hoisted_2$i)), [
[vue.unref(vRepeatClick), increase]
]) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(ElInput), {
id: _ctx.id,
ref_key: "input",
ref: input,
type: "number",
step: _ctx.step,
"model-value": vue.unref(displayValue),
placeholder: _ctx.placeholder,
readonly: _ctx.readonly,
disabled: vue.unref(inputNumberDisabled),
size: vue.unref(inputNumberSize),
max: _ctx.max,
min: _ctx.min,
name: _ctx.name,
label: _ctx.label,
"validate-event": false,
onKeydown: [
vue.withKeys(vue.withModifiers(increase, ["prevent"]), ["up"]),
vue.withKeys(vue.withModifiers(decrease, ["prevent"]), ["down"])
],
onBlur: handleBlur,
onFocus: handleFocus,
onInput: handleInput,
onChange: handleInputChange
}, null, 8, ["id", "step", "model-value", "placeholder", "readonly", "disabled", "size", "max", "min", "name", "label", "onKeydown"])
], 34);
};
}
});
var InputNumber = /* @__PURE__ */ _export_sfc(_sfc_main$W, [["__file", "input-number.vue"]]);
const ElInputNumber = withInstall(InputNumber);
const linkProps = buildProps({
type: {
type: String,
values: ["primary", "success", "warning", "info", "danger", "default"],
default: "default"
},
underline: {
type: Boolean,
default: true
},
disabled: { type: Boolean, default: false },
href: { type: String, default: "" },
icon: {
type: iconPropType
}
});
const linkEmits = {
click: (evt) => evt instanceof MouseEvent
};
const _hoisted_1$r = ["href"];
const __default__$E = vue.defineComponent({
name: "ElLink"
});
const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
...__default__$E,
props: linkProps,
emits: linkEmits,
setup(__props, { emit }) {
const props = __props;
const ns = useNamespace("link");
function handleClick(event) {
if (!props.disabled)
emit("click", event);
}
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("a", {
class: vue.normalizeClass([
vue.unref(ns).b(),
vue.unref(ns).m(_ctx.type),
vue.unref(ns).is("disabled", _ctx.disabled),
vue.unref(ns).is("underline", _ctx.underline && !_ctx.disabled)
]),
href: _ctx.disabled || !_ctx.href ? void 0 : _ctx.href,
onClick: handleClick
}, [
_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 0 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
]),
_: 1
})) : vue.createCommentVNode("v-if", true),
_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", {
key: 1,
class: vue.normalizeClass(vue.unref(ns).e("inner"))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2)) : vue.createCommentVNode("v-if", true),
_ctx.$slots.icon ? vue.renderSlot(_ctx.$slots, "icon", { key: 2 }) : vue.createCommentVNode("v-if", true)
], 10, _hoisted_1$r);
};
}
});
var Link = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__file", "link.vue"]]);
const ElLink = withInstall(Link);
class SubMenu$1 {
constructor(parent, domNode) {
this.parent = parent;
this.domNode = domNode;
this.subIndex = 0;
this.subIndex = 0;
this.init();
}
init() {
this.subMenuItems = this.domNode.querySelectorAll("li");
this.addListeners();
}
gotoSubIndex(idx) {
if (idx === this.subMenuItems.length) {
idx = 0;
} else if (idx < 0) {
idx = this.subMenuItems.length - 1;
}
this.subMenuItems[idx].focus();
this.subIndex = idx;
}
addListeners() {
const parentNode = this.parent.domNode;
Array.prototype.forEach.call(this.subMenuItems, (el) => {
el.addEventListener("keydown", (event) => {
let prevDef = false;
switch (event.code) {
case EVENT_CODE.down: {
this.gotoSubIndex(this.subIndex + 1);
prevDef = true;
break;
}
case EVENT_CODE.up: {
this.gotoSubIndex(this.subIndex - 1);
prevDef = true;
break;
}
case EVENT_CODE.tab: {
triggerEvent(parentNode, "mouseleave");
break;
}
case EVENT_CODE.enter:
case EVENT_CODE.space: {
prevDef = true;
event.currentTarget.click();
break;
}
}
if (prevDef) {
event.preventDefault();
event.stopPropagation();
}
return false;
});
});
}
}
var SubMenu$2 = SubMenu$1;
class MenuItem$1 {
constructor(domNode, namespace) {
this.domNode = domNode;
this.submenu = null;
this.submenu = null;
this.init(namespace);
}
init(namespace) {
this.domNode.setAttribute("tabindex", "0");
const menuChild = this.domNode.querySelector(`.${namespace}-menu`);
if (menuChild) {
this.submenu = new SubMenu$2(this, menuChild);
}
this.addListeners();
}
addListeners() {
this.domNode.addEventListener("keydown", (event) => {
let prevDef = false;
switch (event.code) {
case EVENT_CODE.down: {
triggerEvent(event.currentTarget, "mouseenter");
this.submenu && this.submenu.gotoSubIndex(0);
prevDef = true;
break;
}
case EVENT_CODE.up: {
triggerEvent(event.currentTarget, "mouseenter");
this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
prevDef = true;
break;
}
case EVENT_CODE.tab: {
triggerEvent(event.currentTarget, "mouseleave");
break;
}
case EVENT_CODE.enter:
case EVENT_CODE.space: {
prevDef = true;
event.currentTarget.click();
break;
}
}
if (prevDef) {
event.preventDefault();
}
});
}
}
var MenuItem$2 = MenuItem$1;
class Menu$1 {
constructor(domNode, namespace) {
this.domNode = domNode;
this.init(namespace);
}
init(namespace) {
const menuChildren = this.domNode.childNodes;
Array.from(menuChildren).forEach((child) => {
if (child.nodeType === 1) {
new MenuItem$2(child, namespace);
}
});
}
}
var Menubar = Menu$1;
const _sfc_main$U = vue.defineComponent({
name: "ElMenuCollapseTransition",
setup() {
const ns = useNamespace("menu");
const listeners = {
onBeforeEnter: (el) => el.style.opacity = "0.2",
onEnter(el, done) {
addClass(el, `${ns.namespace.value}-opacity-transition`);
el.style.opacity = "1";
done();
},
onAfterEnter(el) {
removeClass(el, `${ns.namespace.value}-opacity-transition`);
el.style.opacity = "";
},
onBeforeLeave(el) {
if (!el.dataset) {
el.dataset = {};
}
if (hasClass(el, ns.m("collapse"))) {
removeClass(el, ns.m("collapse"));
el.dataset.oldOverflow = el.style.overflow;
el.dataset.scrollWidth = el.clientWidth.toString();
addClass(el, ns.m("collapse"));
} else {
addClass(el, ns.m("collapse"));
el.dataset.oldOverflow = el.style.overflow;
el.dataset.scrollWidth = el.clientWidth.toString();
removeClass(el, ns.m("collapse"));
}
el.style.width = `${el.scrollWidth}px`;
el.style.overflow = "hidden";
},
onLeave(el) {
addClass(el, "horizontal-collapse-transition");
el.style.width = `${el.dataset.scrollWidth}px`;
}
};
return {
listeners
};
}
});
function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({ mode: "out-in" }, _ctx.listeners), {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16);
}
var ElMenuCollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["render", _sfc_render$e], ["__file", "menu-collapse-transition.vue"]]);
function useMenu(instance, currentIndex) {
const indexPath = vue.computed(() => {
let parent = instance.parent;
const path = [currentIndex.value];
while (parent.type.name !== "ElMenu") {
if (parent.props.index) {
path.unshift(parent.props.index);
}
parent = parent.parent;
}
return path;
});
const parentMenu = vue.computed(() => {
let parent = instance.parent;
while (parent && !["ElMenu", "ElSubMenu"].includes(parent.type.name)) {
parent = parent.parent;
}
return parent;
});
return {
parentMenu,
indexPath
};
}
function useMenuColor(props) {
const menuBarColor = vue.computed(() => {
const color = props.backgroundColor;
if (!color) {
return "";
} else {
return new TinyColor(color).shade(20).toString();
}
});
return menuBarColor;
}
const useMenuCssVar = (props, level) => {
const ns = useNamespace("menu");
return vue.computed(() => {
return ns.cssVarBlock({
"text-color": props.textColor || "",
"hover-text-color": props.textColor || "",
"bg-color": props.backgroundColor || "",
"hover-bg-color": useMenuColor(props).value || "",
"active-color": props.activeTextColor || "",
level: `${level}`
});
});
};
const subMenuProps = buildProps({
index: {
type: String,
required: true
},
showTimeout: {
type: Number,
default: 300
},
hideTimeout: {
type: Number,
default: 300
},
popperClass: String,
disabled: Boolean,
popperAppendToBody: {
type: Boolean,
default: void 0
},
popperOffset: {
type: Number,
default: 6
},
expandCloseIcon: {
type: iconPropType
},
expandOpenIcon: {
type: iconPropType
},
collapseCloseIcon: {
type: iconPropType
},
collapseOpenIcon: {
type: iconPropType
}
});
const COMPONENT_NAME$c = "ElSubMenu";
var SubMenu = vue.defineComponent({
name: COMPONENT_NAME$c,
props: subMenuProps,
setup(props, { slots, expose }) {
const instance = vue.getCurrentInstance();
const { indexPath, parentMenu } = useMenu(instance, vue.computed(() => props.index));
const nsMenu = useNamespace("menu");
const nsSubMenu = useNamespace("sub-menu");
const rootMenu = vue.inject("rootMenu");
if (!rootMenu)
throwError(COMPONENT_NAME$c, "can not inject root menu");
const subMenu = vue.inject(`subMenu:${parentMenu.value.uid}`);
if (!subMenu)
throwError(COMPONENT_NAME$c, "can not inject sub menu");
const items = vue.ref({});
const subMenus = vue.ref({});
let timeout;
const mouseInChild = vue.ref(false);
const verticalTitleRef = vue.ref();
const vPopper = vue.ref(null);
const currentPlacement = vue.computed(() => mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start");
const subMenuTitleIcon = vue.computed(() => {
return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? props.expandCloseIcon && props.expandOpenIcon ? opened.value ? props.expandOpenIcon : props.expandCloseIcon : arrow_down_default : props.collapseCloseIcon && props.collapseOpenIcon ? opened.value ? props.collapseOpenIcon : props.collapseCloseIcon : arrow_right_default;
});
const isFirstLevel = vue.computed(() => {
return subMenu.level === 0;
});
const appendToBody = vue.computed(() => {
return props.popperAppendToBody === void 0 ? isFirstLevel.value : Boolean(props.popperAppendToBody);
});
const menuTransitionName = vue.computed(() => rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`);
const fallbackPlacements = vue.computed(() => mode.value === "horizontal" && isFirstLevel.value ? [
"bottom-start",
"bottom-end",
"top-start",
"top-end",
"right-start",
"left-start"
] : [
"right-start",
"left-start",
"bottom-start",
"bottom-end",
"top-start",
"top-end"
]);
const opened = vue.computed(() => rootMenu.openedMenus.includes(props.index));
const active = vue.computed(() => {
let isActive = false;
Object.values(items.value).forEach((item2) => {
if (item2.active) {
isActive = true;
}
});
Object.values(subMenus.value).forEach((subItem) => {
if (subItem.active) {
isActive = true;
}
});
return isActive;
});
const backgroundColor = vue.computed(() => rootMenu.props.backgroundColor || "");
const activeTextColor = vue.computed(() => rootMenu.props.activeTextColor || "");
const textColor = vue.computed(() => rootMenu.props.textColor || "");
const mode = vue.computed(() => rootMenu.props.mode);
const item = vue.reactive({
index: props.index,
indexPath,
active
});
const titleStyle = vue.computed(() => {
if (mode.value !== "horizontal") {
return {
color: textColor.value
};
}
return {
borderBottomColor: active.value ? rootMenu.props.activeTextColor ? activeTextColor.value : "" : "transparent",
color: active.value ? activeTextColor.value : textColor.value
};
});
const doDestroy = () => {
var _a, _b, _c;
return (_c = (_b = (_a = vPopper.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.popperInstanceRef) == null ? void 0 : _c.destroy();
};
const handleCollapseToggle = (value) => {
if (!value) {
doDestroy();
}
};
const handleClick = () => {
if (rootMenu.props.menuTrigger === "hover" && rootMenu.props.mode === "horizontal" || rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled)
return;
rootMenu.handleSubMenuClick({
index: props.index,
indexPath: indexPath.value,
active: active.value
});
};
const handleMouseenter = (event, showTimeout = props.showTimeout) => {
var _a;
if (event.type === "focus") {
return;
}
if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) {
return;
}
subMenu.mouseInChild.value = true;
timeout == null ? void 0 : timeout();
({ stop: timeout } = useTimeoutFn(() => {
rootMenu.openMenu(props.index, indexPath.value);
}, showTimeout));
if (appendToBody.value) {
(_a = parentMenu.value.vnode.el) == null ? void 0 : _a.dispatchEvent(new MouseEvent("mouseenter"));
}
};
const handleMouseleave = (deepDispatch = false) => {
var _a, _b;
if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical") {
return;
}
timeout == null ? void 0 : timeout();
subMenu.mouseInChild.value = false;
({ stop: timeout } = useTimeoutFn(() => !mouseInChild.value && rootMenu.closeMenu(props.index, indexPath.value), props.hideTimeout));
if (appendToBody.value && deepDispatch) {
if (((_a = instance.parent) == null ? void 0 : _a.type.name) === "ElSubMenu") {
(_b = subMenu.handleMouseleave) == null ? void 0 : _b.call(subMenu, true);
}
}
};
vue.watch(() => rootMenu.props.collapse, (value) => handleCollapseToggle(Boolean(value)));
{
const addSubMenu = (item2) => {
subMenus.value[item2.index] = item2;
};
const removeSubMenu = (item2) => {
delete subMenus.value[item2.index];
};
vue.provide(`subMenu:${instance.uid}`, {
addSubMenu,
removeSubMenu,
handleMouseleave,
mouseInChild,
level: subMenu.level + 1
});
}
expose({
opened
});
vue.onMounted(() => {
rootMenu.addSubMenu(item);
subMenu.addSubMenu(item);
});
vue.onBeforeUnmount(() => {
subMenu.removeSubMenu(item);
rootMenu.removeSubMenu(item);
});
return () => {
var _a;
const titleTag = [
(_a = slots.title) == null ? void 0 : _a.call(slots),
vue.h(ElIcon, {
class: nsSubMenu.e("icon-arrow"),
style: {
transform: opened.value ? props.expandCloseIcon && props.expandOpenIcon || props.collapseCloseIcon && props.collapseOpenIcon && rootMenu.props.collapse ? "none" : "rotateZ(180deg)" : "none"
}
}, {
default: () => isString(subMenuTitleIcon.value) ? vue.h(instance.appContext.components[subMenuTitleIcon.value]) : vue.h(subMenuTitleIcon.value)
})
];
const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1);
const child = rootMenu.isMenuPopup ? vue.h(ElTooltip, {
ref: vPopper,
visible: opened.value,
effect: "light",
pure: true,
offset: props.popperOffset,
showArrow: false,
persistent: true,
popperClass: props.popperClass,
placement: currentPlacement.value,
teleported: appendToBody.value,
fallbackPlacements: fallbackPlacements.value,
transition: menuTransitionName.value,
gpuAcceleration: false
}, {
content: () => {
var _a2;
return vue.h("div", {
class: [
nsMenu.m(mode.value),
nsMenu.m("popup-container"),
props.popperClass
],
onMouseenter: (evt) => handleMouseenter(evt, 100),
onMouseleave: () => handleMouseleave(true),
onFocus: (evt) => handleMouseenter(evt, 100)
}, [
vue.h("ul", {
class: [
nsMenu.b(),
nsMenu.m("popup"),
nsMenu.m(`popup-${currentPlacement.value}`)
],
style: ulStyle.value
}, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])
]);
},
default: () => vue.h("div", {
class: nsSubMenu.e("title"),
style: [
titleStyle.value,
{ backgroundColor: backgroundColor.value }
],
onClick: handleClick
}, titleTag)
}) : vue.h(vue.Fragment, {}, [
vue.h("div", {
class: nsSubMenu.e("title"),
style: [
titleStyle.value,
{ backgroundColor: backgroundColor.value }
],
ref: verticalTitleRef,
onClick: handleClick
}, titleTag),
vue.h(_CollapseTransition, {}, {
default: () => {
var _a2;
return vue.withDirectives(vue.h("ul", {
role: "menu",
class: [nsMenu.b(), nsMenu.m("inline")],
style: ulStyle.value
}, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]), [[vue.vShow, opened.value]]);
}
})
]);
return vue.h("li", {
class: [
nsSubMenu.b(),
nsSubMenu.is("active", active.value),
nsSubMenu.is("opened", opened.value),
nsSubMenu.is("disabled", props.disabled)
],
role: "menuitem",
ariaHaspopup: true,
ariaExpanded: opened.value,
onMouseenter: handleMouseenter,
onMouseleave: () => handleMouseleave(true),
onFocus: handleMouseenter
}, [child]);
};
}
});
const menuProps = buildProps({
mode: {
type: String,
values: ["horizontal", "vertical"],
default: "vertical"
},
defaultActive: {
type: String,
default: ""
},
defaultOpeneds: {
type: definePropType(Array),
default: () => mutable([])
},
uniqueOpened: Boolean,
router: Boolean,
menuTrigger: {
type: String,
values: ["hover", "click"],
default: "hover"
},
collapse: Boolean,
backgroundColor: String,
textColor: String,
activeTextColor: String,
collapseTransition: {
type: Boolean,
default: true
},
ellipsis: {
type: Boolean,
default: true
}
});
const checkIndexPath = (indexPath) => Array.isArray(indexPath) && indexPath.every((path) => isString(path));
const menuEmits = {
close: (index, indexPath) => isString(index) && checkIndexPath(indexPath),
open: (index, indexPath) => isString(index) && checkIndexPath(indexPath),
select: (index, indexPath, item, routerResult) => isString(index) && checkIndexPath(indexPath) && isObject$1(item) && (routerResult === void 0 || routerResult instanceof Promise)
};
var Menu = vue.defineComponent({
name: "ElMenu",
props: menuProps,
emits: menuEmits,
setup(props, { emit, slots, expose }) {
const instance = vue.getCurrentInstance();
const router = instance.appContext.config.globalProperties.$router;
const menu = vue.ref();
const nsMenu = useNamespace("menu");
const nsSubMenu = useNamespace("sub-menu");
const sliceIndex = vue.ref(-1);
const openedMenus = vue.ref(props.defaultOpeneds && !props.collapse ? props.defaultOpeneds.slice(0) : []);
const activeIndex = vue.ref(props.defaultActive);
const items = vue.ref({});
const subMenus = vue.ref({});
const isMenuPopup = vue.computed(() => {
return props.mode === "horizontal" || props.mode === "vertical" && props.collapse;
});
const initMenu = () => {
const activeItem = activeIndex.value && items.value[activeIndex.value];
if (!activeItem || props.mode === "horizontal" || props.collapse)
return;
const indexPath = activeItem.indexPath;
indexPath.forEach((index) => {
const subMenu = subMenus.value[index];
subMenu && openMenu(index, subMenu.indexPath);
});
};
const openMenu = (index, indexPath) => {
if (openedMenus.value.includes(index))
return;
if (props.uniqueOpened) {
openedMenus.value = openedMenus.value.filter((index2) => indexPath.includes(index2));
}
openedMenus.value.push(index);
emit("open", index, indexPath);
};
const closeMenu = (index, indexPath) => {
const i = openedMenus.value.indexOf(index);
if (i !== -1) {
openedMenus.value.splice(i, 1);
}
emit("close", index, indexPath);
};
const handleSubMenuClick = ({
index,
indexPath
}) => {
const isOpened = openedMenus.value.includes(index);
if (isOpened) {
closeMenu(index, indexPath);
} else {
openMenu(index, indexPath);
}
};
const handleMenuItemClick = (menuItem) => {
if (props.mode === "horizontal" || props.collapse) {
openedMenus.value = [];
}
const { index, indexPath } = menuItem;
if (index === void 0 || indexPath === void 0)
return;
if (props.router && router) {
const route = menuItem.route || index;
const routerResult = router.push(route).then((res) => {
if (!res)
activeIndex.value = index;
return res;
});
emit("select", index, indexPath, { index, indexPath, route }, routerResult);
} else {
activeIndex.value = index;
emit("select", index, indexPath, { index, indexPath });
}
};
const updateActiveIndex = (val) => {
const itemsInData = items.value;
const item = itemsInData[val] || activeIndex.value && itemsInData[activeIndex.value] || itemsInData[props.defaultActive];
if (item) {
activeIndex.value = item.index;
} else {
activeIndex.value = val;
}
};
const calcSliceIndex = () => {
var _a, _b;
if (!menu.value)
return -1;
const items2 = Array.from((_b = (_a = menu.value) == null ? void 0 : _a.childNodes) != null ? _b : []).filter((item) => item.nodeName !== "#text" || item.nodeValue);
const moreItemWidth = 64;
const paddingLeft = Number.parseInt(getComputedStyle(menu.value).paddingLeft, 10);
const paddingRight = Number.parseInt(getComputedStyle(menu.value).paddingRight, 10);
const menuWidth = menu.value.clientWidth - paddingLeft - paddingRight;
let calcWidth = 0;
let sliceIndex2 = 0;
items2.forEach((item, index) => {
calcWidth += item.offsetWidth || 0;
if (calcWidth <= menuWidth - moreItemWidth) {
sliceIndex2 = index + 1;
}
});
return sliceIndex2 === items2.length ? -1 : sliceIndex2;
};
const debounce = (fn, wait = 33.34) => {
let timmer;
return () => {
timmer && clearTimeout(timmer);
timmer = setTimeout(() => {
fn();
}, wait);
};
};
let isFirstTimeRender = true;
const handleResize = () => {
const callback = () => {
sliceIndex.value = -1;
vue.nextTick(() => {
sliceIndex.value = calcSliceIndex();
});
};
isFirstTimeRender ? callback() : debounce(callback)();
isFirstTimeRender = false;
};
vue.watch(() => props.defaultActive, (currentActive) => {
if (!items.value[currentActive]) {
activeIndex.value = "";
}
updateActiveIndex(currentActive);
});
vue.watch(() => props.collapse, (value) => {
if (value)
openedMenus.value = [];
});
vue.watch(items.value, initMenu);
let resizeStopper;
vue.watchEffect(() => {
if (props.mode === "horizontal" && props.ellipsis)
resizeStopper = useResizeObserver(menu, handleResize).stop;
else
resizeStopper == null ? void 0 : resizeStopper();
});
{
const addSubMenu = (item) => {
subMenus.value[item.index] = item;
};
const removeSubMenu = (item) => {
delete subMenus.value[item.index];
};
const addMenuItem = (item) => {
items.value[item.index] = item;
};
const removeMenuItem = (item) => {
delete items.value[item.index];
};
vue.provide("rootMenu", vue.reactive({
props,
openedMenus,
items,
subMenus,
activeIndex,
isMenuPopup,
addMenuItem,
removeMenuItem,
addSubMenu,
removeSubMenu,
openMenu,
closeMenu,
handleMenuItemClick,
handleSubMenuClick
}));
vue.provide(`subMenu:${instance.uid}`, {
addSubMenu,
removeSubMenu,
mouseInChild: vue.ref(false),
level: 0
});
}
vue.onMounted(() => {
if (props.mode === "horizontal") {
new Menubar(instance.vnode.el, nsMenu.namespace.value);
}
});
{
const open = (index) => {
const { indexPath } = subMenus.value[index];
indexPath.forEach((i) => openMenu(i, indexPath));
};
expose({
open,
close: closeMenu,
handleResize
});
}
return () => {
var _a, _b;
let slot = (_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : [];
const vShowMore = [];
if (props.mode === "horizontal" && menu.value) {
const originalSlot = flattedChildren(slot);
const slotDefault = sliceIndex.value === -1 ? originalSlot : originalSlot.slice(0, sliceIndex.value);
const slotMore = sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value);
if ((slotMore == null ? void 0 : slotMore.length) && props.ellipsis) {
slot = slotDefault;
vShowMore.push(vue.h(SubMenu, {
index: "sub-menu-more",
class: nsSubMenu.e("hide-arrow")
}, {
title: () => vue.h(ElIcon, {
class: nsSubMenu.e("icon-more")
}, { default: () => vue.h(more_default) }),
default: () => slotMore
}));
}
}
const ulStyle = useMenuCssVar(props, 0);
const vMenu = vue.h("ul", {
key: String(props.collapse),
role: "menubar",
ref: menu,
style: ulStyle.value,
class: {
[nsMenu.b()]: true,
[nsMenu.m(props.mode)]: true,
[nsMenu.m("collapse")]: props.collapse
}
}, [...slot, ...vShowMore]);
if (props.collapseTransition && props.mode === "vertical") {
return vue.h(ElMenuCollapseTransition, () => vMenu);
}
return vMenu;
};
}
});
const menuItemProps = buildProps({
index: {
type: definePropType([String, null]),
default: null
},
route: {
type: definePropType([String, Object])
},
disabled: Boolean
});
const menuItemEmits = {
click: (item) => isString(item.index) && Array.isArray(item.indexPath)
};
const COMPONENT_NAME$b = "ElMenuItem";
const _sfc_main$T = vue.defineComponent({
name: COMPONENT_NAME$b,
components: {
ElTooltip
},
props: menuItemProps,
emits: menuItemEmits,
setup(props, { emit }) {
const instance = vue.getCurrentInstance();
const rootMenu = vue.inject("rootMenu");
const nsMenu = useNamespace("menu");
const nsMenuItem = useNamespace("menu-item");
if (!rootMenu)
throwError(COMPONENT_NAME$b, "can not inject root menu");
const { parentMenu, indexPath } = useMenu(instance, vue.toRef(props, "index"));
const subMenu = vue.inject(`subMenu:${parentMenu.value.uid}`);
if (!subMenu)
throwError(COMPONENT_NAME$b, "can not inject sub menu");
const active = vue.computed(() => props.index === rootMenu.activeIndex);
const item = vue.reactive({
index: props.index,
indexPath,
active
});
const handleClick = () => {
if (!props.disabled) {
rootMenu.handleMenuItemClick({
index: props.index,
indexPath: indexPath.value,
route: props.route
});
emit("click", item);
}
};
vue.onMounted(() => {
subMenu.addSubMenu(item);
rootMenu.addMenuItem(item);
});
vue.onBeforeUnmount(() => {
subMenu.removeSubMenu(item);
rootMenu.removeMenuItem(item);
});
return {
Effect,
parentMenu,
rootMenu,
active,
nsMenu,
nsMenuItem,
handleClick
};
}
});
function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
return vue.openBlock(), vue.createElementBlock("li", {
class: vue.normalizeClass([
_ctx.nsMenuItem.b(),
_ctx.nsMenuItem.is("active", _ctx.active),
_ctx.nsMenuItem.is("disabled", _ctx.disabled)
]),
role: "menuitem",
tabindex: "-1",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
}, [
_ctx.parentMenu.type.name === "ElMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
key: 0,
effect: _ctx.Effect.DARK,
placement: "right",
"fallback-placements": ["left"],
persistent: ""
}, {
content: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "title")
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.nsMenu.be("tooltip", "trigger"))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2)
]),
_: 3
}, 8, ["effect"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.renderSlot(_ctx.$slots, "default"),
vue.renderSlot(_ctx.$slots, "title")
], 64))
], 2);
}
var MenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["render", _sfc_render$d], ["__file", "menu-item.vue"]]);
const menuItemGroupProps = {
title: String
};
const COMPONENT_NAME$a = "ElMenuItemGroup";
const _sfc_main$S = vue.defineComponent({
name: COMPONENT_NAME$a,
props: menuItemGroupProps,
setup() {
const ns = useNamespace("menu-item-group");
return {
ns
};
}
});
function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("li", {
class: vue.normalizeClass(_ctx.ns.b())
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("title"))
}, [
!_ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
], 64)) : vue.renderSlot(_ctx.$slots, "title", { key: 1 })
], 2),
vue.createElementVNode("ul", null, [
vue.renderSlot(_ctx.$slots, "default")
])
], 2);
}
var MenuItemGroup = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["render", _sfc_render$c], ["__file", "menu-item-group.vue"]]);
const ElMenu = withInstall(Menu, {
MenuItem,
MenuItemGroup,
SubMenu
});
const ElMenuItem = withNoopInstall(MenuItem);
const ElMenuItemGroup = withNoopInstall(MenuItemGroup);
const ElSubMenu = withNoopInstall(SubMenu);
const pageHeaderProps = buildProps({
icon: {
type: iconPropType,
default: () => back_default
},
title: String,
content: {
type: String,
default: ""
}
});
const pageHeaderEmits = {
back: () => true
};
const _hoisted_1$q = ["aria-label"];
const __default__$D = vue.defineComponent({
name: "ElPageHeader"
});
const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
...__default__$D,
props: pageHeaderProps,
emits: pageHeaderEmits,
setup(__props, { emit }) {
const slots = vue.useSlots();
const { t } = useLocale();
const ns = useNamespace("page-header");
const kls = vue.computed(() => {
return [
ns.b(),
{
[ns.m("has-breadcrumb")]: !!slots.breadcrumb,
[ns.m("has-extra")]: !!slots.extra,
[ns.is("contentful")]: !!slots.default
}
];
});
function handleClick() {
emit("back");
}
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(kls))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("breadcrumb"))
}, [
vue.renderSlot(_ctx.$slots, "breadcrumb")
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("header"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("left"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("back")),
role: "button",
tabindex: "0",
onClick: handleClick
}, [
_ctx.icon || _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
"aria-label": _ctx.title || vue.unref(t)("el.pageHeader.title"),
class: vue.normalizeClass(vue.unref(ns).e("icon"))
}, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 0 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
]),
_: 1
})) : vue.createCommentVNode("v-if", true)
])
], 10, _hoisted_1$q)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("title"))
}, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.title || vue.unref(t)("el.pageHeader.title")), 1)
])
], 2)
], 2),
vue.createVNode(vue.unref(ElDivider), { direction: "vertical" }),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("content"))
}, [
vue.renderSlot(_ctx.$slots, "content", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.content), 1)
])
], 2)
], 2),
_ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("extra"))
}, [
vue.renderSlot(_ctx.$slots, "extra")
], 2)) : vue.createCommentVNode("v-if", true)
], 2),
_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("main"))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2)) : vue.createCommentVNode("v-if", true)
], 2);
};
}
});
var PageHeader = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__file", "page-header.vue"]]);
const ElPageHeader = withInstall(PageHeader);
const paginationPrevProps = buildProps({
disabled: Boolean,
currentPage: {
type: Number,
default: 1
},
prevText: {
type: String
},
prevIcon: {
type: iconPropType
}
});
const paginationPrevEmits = {
click: (evt) => evt instanceof MouseEvent
};
const _hoisted_1$p = ["disabled", "aria-disabled"];
const _hoisted_2$h = { key: 0 };
const __default__$C = vue.defineComponent({
name: "ElPaginationPrev"
});
const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
...__default__$C,
props: paginationPrevProps,
emits: paginationPrevEmits,
setup(__props) {
const props = __props;
const internalDisabled = vue.computed(() => props.disabled || props.currentPage <= 1);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("button", {
type: "button",
class: "btn-prev",
disabled: vue.unref(internalDisabled),
"aria-disabled": vue.unref(internalDisabled),
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
}, [
_ctx.prevText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$h, vue.toDisplayString(_ctx.prevText), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.prevIcon)))
]),
_: 1
}))
], 8, _hoisted_1$p);
};
}
});
var Prev = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__file", "prev.vue"]]);
const paginationNextProps = buildProps({
disabled: Boolean,
currentPage: {
type: Number,
default: 1
},
pageCount: {
type: Number,
default: 50
},
nextText: {
type: String
},
nextIcon: {
type: iconPropType
}
});
const _hoisted_1$o = ["disabled", "aria-disabled"];
const _hoisted_2$g = { key: 0 };
const __default__$B = vue.defineComponent({
name: "ElPaginationNext"
});
const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
...__default__$B,
props: paginationNextProps,
emits: ["click"],
setup(__props) {
const props = __props;
const internalDisabled = vue.computed(() => props.disabled || props.currentPage === props.pageCount || props.pageCount === 0);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("button", {
type: "button",
class: "btn-next",
disabled: vue.unref(internalDisabled),
"aria-disabled": vue.unref(internalDisabled),
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
}, [
_ctx.nextText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$g, vue.toDisplayString(_ctx.nextText), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.nextIcon)))
]),
_: 1
}))
], 8, _hoisted_1$o);
};
}
});
var Next = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__file", "next.vue"]]);
const selectGroupKey = "ElSelectGroup";
const selectKey = "ElSelect";
function useOption$1(props, states) {
const select = vue.inject(selectKey);
const selectGroup = vue.inject(selectGroupKey, { disabled: false });
const isObject = vue.computed(() => {
return Object.prototype.toString.call(props.value).toLowerCase() === "[object object]";
});
const itemSelected = vue.computed(() => {
if (!select.props.multiple) {
return isEqual(props.value, select.props.modelValue);
} else {
return contains(select.props.modelValue, props.value);
}
});
const limitReached = vue.computed(() => {
if (select.props.multiple) {
const modelValue = select.props.modelValue || [];
return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
} else {
return false;
}
});
const currentLabel = vue.computed(() => {
return props.label || (isObject.value ? "" : props.value);
});
const currentValue = vue.computed(() => {
return props.value || props.label || "";
});
const isDisabled = vue.computed(() => {
return props.disabled || states.groupDisabled || limitReached.value;
});
const instance = vue.getCurrentInstance();
const contains = (arr = [], target) => {
if (!isObject.value) {
return arr && arr.includes(target);
} else {
const valueKey = select.props.valueKey;
return arr && arr.some((item) => {
return vue.toRaw(get(item, valueKey)) === get(target, valueKey);
});
}
};
const isEqual = (a, b) => {
if (!isObject.value) {
return a === b;
} else {
const { valueKey } = select.props;
return get(a, valueKey) === get(b, valueKey);
}
};
const hoverItem = () => {
if (!props.disabled && !selectGroup.disabled) {
select.hoverIndex = select.optionsArray.indexOf(instance.proxy);
}
};
vue.watch(() => currentLabel.value, () => {
if (!props.created && !select.props.remote)
select.setSelected();
});
vue.watch(() => props.value, (val, oldVal) => {
const { remote, valueKey } = select.props;
if (!Object.is(val, oldVal)) {
select.onOptionDestroy(oldVal, instance.proxy);
select.onOptionCreate(instance.proxy);
}
if (!props.created && !remote) {
if (valueKey && typeof val === "object" && typeof oldVal === "object" && val[valueKey] === oldVal[valueKey]) {
return;
}
select.setSelected();
}
});
vue.watch(() => selectGroup.disabled, () => {
states.groupDisabled = selectGroup.disabled;
}, { immediate: true });
const { queryChange } = vue.toRaw(select);
vue.watch(queryChange, (changes) => {
const { query } = vue.unref(changes);
const regexp = new RegExp(escapeStringRegexp(query), "i");
states.visible = regexp.test(currentLabel.value) || props.created;
if (!states.visible) {
select.filteredOptionsCount--;
}
});
return {
select,
currentLabel,
currentValue,
itemSelected,
isDisabled,
hoverItem
};
}
const _sfc_main$O = vue.defineComponent({
name: "ElOption",
componentName: "ElOption",
props: {
value: {
required: true,
type: [String, Number, Boolean, Object]
},
label: [String, Number],
created: Boolean,
disabled: {
type: Boolean,
default: false
}
},
setup(props) {
const ns = useNamespace("select");
const states = vue.reactive({
index: -1,
groupDisabled: false,
visible: true,
hitState: false,
hover: false
});
const { currentLabel, itemSelected, isDisabled, select, hoverItem } = useOption$1(props, states);
const { visible, hover } = vue.toRefs(states);
const vm = vue.getCurrentInstance().proxy;
select.onOptionCreate(vm);
vue.onBeforeUnmount(() => {
const key = vm.value;
const { selected } = select;
const selectedOptions = select.props.multiple ? selected : [selected];
const doesSelected = selectedOptions.some((item) => {
return item.value === vm.value;
});
vue.nextTick(() => {
if (select.cachedOptions.get(key) === vm && !doesSelected) {
select.cachedOptions.delete(key);
}
});
select.onOptionDestroy(key, vm);
});
function selectOptionClick() {
if (props.disabled !== true && states.groupDisabled !== true) {
select.handleOptionSelect(vm, true);
}
}
return {
ns,
currentLabel,
itemSelected,
isDisabled,
select,
hoverItem,
visible,
hover,
selectOptionClick,
states
};
}
});
function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
class: vue.normalizeClass([
_ctx.ns.be("dropdown", "item"),
_ctx.ns.is("disabled", _ctx.isDisabled),
{
selected: _ctx.itemSelected,
hover: _ctx.hover
}
]),
onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)),
onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
}, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.currentLabel), 1)
])
], 34)), [
[vue.vShow, _ctx.visible]
]);
}
var Option = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["render", _sfc_render$b], ["__file", "option.vue"]]);
const _sfc_main$N = vue.defineComponent({
name: "ElSelectDropdown",
componentName: "ElSelectDropdown",
setup() {
const select = vue.inject(selectKey);
const ns = useNamespace("select");
const popperClass = vue.computed(() => select.props.popperClass);
const isMultiple = vue.computed(() => select.props.multiple);
const isFitInputWidth = vue.computed(() => select.props.fitInputWidth);
const minWidth = vue.ref("");
function updateMinWidth() {
var _a;
minWidth.value = `${(_a = select.selectWrapper) == null ? void 0 : _a.offsetWidth}px`;
}
vue.onMounted(() => {
updateMinWidth();
useResizeObserver(select.selectWrapper, updateMinWidth);
});
return {
ns,
minWidth,
popperClass,
isMultiple,
isFitInputWidth
};
}
});
function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([_ctx.ns.b("dropdown"), _ctx.ns.is("multiple", _ctx.isMultiple), _ctx.popperClass]),
style: vue.normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
}, [
vue.renderSlot(_ctx.$slots, "default")
], 6);
}
var ElSelectMenu$1 = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["render", _sfc_render$a], ["__file", "select-dropdown.vue"]]);
function useSelectStates(props) {
const { t } = useLocale();
return vue.reactive({
options: /* @__PURE__ */ new Map(),
cachedOptions: /* @__PURE__ */ new Map(),
createdLabel: null,
createdSelected: false,
selected: props.multiple ? [] : {},
inputLength: 20,
inputWidth: 0,
optionsCount: 0,
filteredOptionsCount: 0,
visible: false,
softFocus: false,
selectedLabel: "",
hoverIndex: -1,
query: "",
previousQuery: null,
inputHovering: false,
cachedPlaceHolder: "",
currentPlaceholder: t("el.select.placeholder"),
menuVisibleOnFocus: false,
isOnComposition: false,
isSilentBlur: false,
prefixWidth: 11,
tagInMultiLine: false,
mouseEnter: false
});
}
const useSelect$3 = (props, states, ctx) => {
const { t } = useLocale();
const ns = useNamespace("select");
useDeprecated({
from: "suffixTransition",
replacement: "override style scheme",
version: "2.3.0",
scope: "props",
ref: "https://element-plus.org/en-US/component/select.html#select-attributes"
}, vue.computed(() => props.suffixTransition === false));
const reference = vue.ref(null);
const input = vue.ref(null);
const tooltipRef = vue.ref(null);
const tags = vue.ref(null);
const selectWrapper = vue.ref(null);
const scrollbar = vue.ref(null);
const hoverOption = vue.ref(-1);
const queryChange = vue.shallowRef({ query: "" });
const groupQueryChange = vue.shallowRef("");
const { form, formItem } = useFormItem();
const readonly = vue.computed(() => !props.filterable || props.multiple || !states.visible);
const selectDisabled = vue.computed(() => props.disabled || (form == null ? void 0 : form.disabled));
const showClose = vue.computed(() => {
const hasValue = props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "";
const criteria = props.clearable && !selectDisabled.value && states.inputHovering && hasValue;
return criteria;
});
const iconComponent = vue.computed(() => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon);
const iconReverse = vue.computed(() => ns.is("reverse", iconComponent.value && states.visible && props.suffixTransition));
const debounce$1 = vue.computed(() => props.remote ? 300 : 0);
const emptyText = vue.computed(() => {
if (props.loading) {
return props.loadingText || t("el.select.loading");
} else {
if (props.remote && states.query === "" && states.options.size === 0)
return false;
if (props.filterable && states.query && states.options.size > 0 && states.filteredOptionsCount === 0) {
return props.noMatchText || t("el.select.noMatch");
}
if (states.options.size === 0) {
return props.noDataText || t("el.select.noData");
}
}
return null;
});
const optionsArray = vue.computed(() => Array.from(states.options.values()));
const cachedOptionsArray = vue.computed(() => Array.from(states.cachedOptions.values()));
const showNewOption = vue.computed(() => {
const hasExistingOption = optionsArray.value.filter((option) => {
return !option.created;
}).some((option) => {
return option.currentLabel === states.query;
});
return props.filterable && props.allowCreate && states.query !== "" && !hasExistingOption;
});
const selectSize = useSize();
const collapseTagSize = vue.computed(() => ["small"].includes(selectSize.value) ? "small" : "default");
const dropMenuVisible = vue.computed({
get() {
return states.visible && emptyText.value !== false;
},
set(val) {
states.visible = val;
}
});
vue.watch([() => selectDisabled.value, () => selectSize.value, () => form == null ? void 0 : form.size], () => {
vue.nextTick(() => {
resetInputHeight();
});
});
vue.watch(() => props.placeholder, (val) => {
states.cachedPlaceHolder = states.currentPlaceholder = val;
});
vue.watch(() => props.modelValue, (val, oldVal) => {
if (props.multiple) {
resetInputHeight();
if (val && val.length > 0 || input.value && states.query !== "") {
states.currentPlaceholder = "";
} else {
states.currentPlaceholder = states.cachedPlaceHolder;
}
if (props.filterable && !props.reserveKeyword) {
states.query = "";
handleQueryChange(states.query);
}
}
setSelected();
if (props.filterable && !props.multiple) {
states.inputLength = 20;
}
if (!isEqual$1(val, oldVal) && props.validateEvent) {
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
}
}, {
flush: "post",
deep: true
});
vue.watch(() => states.visible, (val) => {
var _a, _b, _c;
if (!val) {
if (props.filterable) {
if (isFunction(props.filterMethod)) {
props.filterMethod("");
}
if (isFunction(props.remoteMethod)) {
props.remoteMethod("");
}
}
input.value && input.value.blur();
states.query = "";
states.previousQuery = null;
states.selectedLabel = "";
states.inputLength = 20;
states.menuVisibleOnFocus = false;
resetHoverIndex();
vue.nextTick(() => {
if (input.value && input.value.value === "" && states.selected.length === 0) {
states.currentPlaceholder = states.cachedPlaceHolder;
}
});
if (!props.multiple) {
if (states.selected) {
if (props.filterable && props.allowCreate && states.createdSelected && states.createdLabel) {
states.selectedLabel = states.createdLabel;
} else {
states.selectedLabel = states.selected.currentLabel;
}
if (props.filterable)
states.query = states.selectedLabel;
}
if (props.filterable) {
states.currentPlaceholder = states.cachedPlaceHolder;
}
}
} else {
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
if (props.filterable) {
states.filteredOptionsCount = states.optionsCount;
states.query = props.remote ? "" : states.selectedLabel;
if (props.multiple) {
(_c = input.value) == null ? void 0 : _c.focus();
} else {
if (states.selectedLabel) {
states.currentPlaceholder = `${states.selectedLabel}`;
states.selectedLabel = "";
}
}
handleQueryChange(states.query);
if (!props.multiple && !props.remote) {
queryChange.value.query = "";
vue.triggerRef(queryChange);
vue.triggerRef(groupQueryChange);
}
}
}
ctx.emit("visible-change", val);
});
vue.watch(() => states.options.entries(), () => {
var _a, _b, _c;
if (!isClient)
return;
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
if (props.multiple) {
resetInputHeight();
}
const inputs = ((_c = selectWrapper.value) == null ? void 0 : _c.querySelectorAll("input")) || [];
if (!Array.from(inputs).includes(document.activeElement)) {
setSelected();
}
if (props.defaultFirstOption && (props.filterable || props.remote) && states.filteredOptionsCount) {
checkDefaultFirstOption();
}
}, {
flush: "post"
});
vue.watch(() => states.hoverIndex, (val) => {
if (isNumber(val) && val > -1) {
hoverOption.value = optionsArray.value[val] || {};
} else {
hoverOption.value = {};
}
optionsArray.value.forEach((option) => {
option.hover = hoverOption.value === option;
});
});
const resetInputHeight = () => {
if (props.collapseTags && !props.filterable)
return;
vue.nextTick(() => {
var _a, _b;
if (!reference.value)
return;
const input2 = reference.value.$el.querySelector("input");
const _tags = tags.value;
const sizeInMap = getComponentSize(selectSize.value || (form == null ? void 0 : form.size));
input2.style.height = `${(states.selected.length === 0 ? sizeInMap : Math.max(_tags ? _tags.clientHeight + (_tags.clientHeight > sizeInMap ? 6 : 0) : 0, sizeInMap)) - 2}px`;
states.tagInMultiLine = Number.parseFloat(input2.style.height) >= sizeInMap;
if (states.visible && emptyText.value !== false) {
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
}
});
};
const handleQueryChange = async (val) => {
if (states.previousQuery === val || states.isOnComposition)
return;
if (states.previousQuery === null && (isFunction(props.filterMethod) || isFunction(props.remoteMethod))) {
states.previousQuery = val;
return;
}
states.previousQuery = val;
vue.nextTick(() => {
var _a, _b;
if (states.visible)
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
});
states.hoverIndex = -1;
if (props.multiple && props.filterable) {
vue.nextTick(() => {
const length = input.value.value.length * 15 + 20;
states.inputLength = props.collapseTags ? Math.min(50, length) : length;
managePlaceholder();
resetInputHeight();
});
}
if (props.remote && isFunction(props.remoteMethod)) {
states.hoverIndex = -1;
props.remoteMethod(val);
} else if (isFunction(props.filterMethod)) {
props.filterMethod(val);
vue.triggerRef(groupQueryChange);
} else {
states.filteredOptionsCount = states.optionsCount;
queryChange.value.query = val;
vue.triggerRef(queryChange);
vue.triggerRef(groupQueryChange);
}
if (props.defaultFirstOption && (props.filterable || props.remote) && states.filteredOptionsCount) {
await vue.nextTick();
checkDefaultFirstOption();
}
};
const managePlaceholder = () => {
if (states.currentPlaceholder !== "") {
states.currentPlaceholder = input.value.value ? "" : states.cachedPlaceHolder;
}
};
const checkDefaultFirstOption = () => {
const optionsInDropdown = optionsArray.value.filter((n) => n.visible && !n.disabled && !n.states.groupDisabled);
const userCreatedOption = optionsInDropdown.find((n) => n.created);
const firstOriginOption = optionsInDropdown[0];
states.hoverIndex = getValueIndex(optionsArray.value, userCreatedOption || firstOriginOption);
};
const setSelected = () => {
var _a;
if (!props.multiple) {
const option = getOption(props.modelValue);
if ((_a = option.props) == null ? void 0 : _a.created) {
states.createdLabel = option.props.value;
states.createdSelected = true;
} else {
states.createdSelected = false;
}
states.selectedLabel = option.currentLabel;
states.selected = option;
if (props.filterable)
states.query = states.selectedLabel;
return;
} else {
states.selectedLabel = "";
}
const result = [];
if (Array.isArray(props.modelValue)) {
props.modelValue.forEach((value) => {
result.push(getOption(value));
});
}
states.selected = result;
vue.nextTick(() => {
resetInputHeight();
});
};
const getOption = (value) => {
let option;
const isObjectValue = toRawType(value).toLowerCase() === "object";
const isNull = toRawType(value).toLowerCase() === "null";
const isUndefined = toRawType(value).toLowerCase() === "undefined";
for (let i = states.cachedOptions.size - 1; i >= 0; i--) {
const cachedOption = cachedOptionsArray.value[i];
const isEqualValue = isObjectValue ? get(cachedOption.value, props.valueKey) === get(value, props.valueKey) : cachedOption.value === value;
if (isEqualValue) {
option = {
value,
currentLabel: cachedOption.currentLabel,
isDisabled: cachedOption.isDisabled
};
break;
}
}
if (option)
return option;
const label = isObjectValue ? value.label : !isNull && !isUndefined ? value : "";
const newOption = {
value,
currentLabel: label
};
if (props.multiple) {
newOption.hitState = false;
}
return newOption;
};
const resetHoverIndex = () => {
setTimeout(() => {
const valueKey = props.valueKey;
if (!props.multiple) {
states.hoverIndex = optionsArray.value.findIndex((item) => {
return getValueKey(item) === getValueKey(states.selected);
});
} else {
if (states.selected.length > 0) {
states.hoverIndex = Math.min.apply(null, states.selected.map((selected) => {
return optionsArray.value.findIndex((item) => {
return get(item, valueKey) === get(selected, valueKey);
});
}));
} else {
states.hoverIndex = -1;
}
}
}, 300);
};
const handleResize = () => {
var _a, _b;
resetInputWidth();
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
if (props.multiple && !props.filterable)
resetInputHeight();
};
const resetInputWidth = () => {
var _a;
states.inputWidth = (_a = reference.value) == null ? void 0 : _a.$el.getBoundingClientRect().width;
};
const onInputChange = () => {
if (props.filterable && states.query !== states.selectedLabel) {
states.query = states.selectedLabel;
handleQueryChange(states.query);
}
};
const debouncedOnInputChange = debounce(() => {
onInputChange();
}, debounce$1.value);
const debouncedQueryChange = debounce((e) => {
handleQueryChange(e.target.value);
}, debounce$1.value);
const emitChange = (val) => {
if (!isEqual$1(props.modelValue, val)) {
ctx.emit(CHANGE_EVENT, val);
}
};
const deletePrevTag = (e) => {
if (e.target.value.length <= 0 && !toggleLastOptionHitState()) {
const value = props.modelValue.slice();
value.pop();
ctx.emit(UPDATE_MODEL_EVENT, value);
emitChange(value);
}
if (e.target.value.length === 1 && props.modelValue.length === 0) {
states.currentPlaceholder = states.cachedPlaceHolder;
}
};
const deleteTag = (event, tag) => {
const index = states.selected.indexOf(tag);
if (index > -1 && !selectDisabled.value) {
const value = props.modelValue.slice();
value.splice(index, 1);
ctx.emit(UPDATE_MODEL_EVENT, value);
emitChange(value);
ctx.emit("remove-tag", tag.value);
}
event.stopPropagation();
};
const deleteSelected = (event) => {
event.stopPropagation();
const value = props.multiple ? [] : "";
if (!isString(value)) {
for (const item of states.selected) {
if (item.isDisabled)
value.push(item.value);
}
}
ctx.emit(UPDATE_MODEL_EVENT, value);
emitChange(value);
states.hoverIndex = -1;
states.visible = false;
ctx.emit("clear");
};
const handleOptionSelect = (option, byClick) => {
var _a;
if (props.multiple) {
const value = (props.modelValue || []).slice();
const optionIndex = getValueIndex(value, option.value);
if (optionIndex > -1) {
value.splice(optionIndex, 1);
} else if (props.multipleLimit <= 0 || value.length < props.multipleLimit) {
value.push(option.value);
}
ctx.emit(UPDATE_MODEL_EVENT, value);
emitChange(value);
if (option.created) {
states.query = "";
handleQueryChange("");
states.inputLength = 20;
}
if (props.filterable)
(_a = input.value) == null ? void 0 : _a.focus();
} else {
ctx.emit(UPDATE_MODEL_EVENT, option.value);
emitChange(option.value);
states.visible = false;
}
states.isSilentBlur = byClick;
setSoftFocus();
if (states.visible)
return;
vue.nextTick(() => {
scrollToOption(option);
});
};
const getValueIndex = (arr = [], value) => {
if (!isObject$1(value))
return arr.indexOf(value);
const valueKey = props.valueKey;
let index = -1;
arr.some((item, i) => {
if (vue.toRaw(get(item, valueKey)) === get(value, valueKey)) {
index = i;
return true;
}
return false;
});
return index;
};
const setSoftFocus = () => {
states.softFocus = true;
const _input = input.value || reference.value;
if (_input) {
_input == null ? void 0 : _input.focus();
}
};
const scrollToOption = (option) => {
var _a, _b, _c, _d, _e;
const targetOption = Array.isArray(option) ? option[0] : option;
let target = null;
if (targetOption == null ? void 0 : targetOption.value) {
const options = optionsArray.value.filter((item) => item.value === targetOption.value);
if (options.length > 0) {
target = options[0].$el;
}
}
if (tooltipRef.value && target) {
const menu = (_d = (_c = (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef) == null ? void 0 : _c.querySelector) == null ? void 0 : _d.call(_c, `.${ns.be("dropdown", "wrap")}`);
if (menu) {
scrollIntoView(menu, target);
}
}
(_e = scrollbar.value) == null ? void 0 : _e.handleScroll();
};
const onOptionCreate = (vm) => {
states.optionsCount++;
states.filteredOptionsCount++;
states.options.set(vm.value, vm);
states.cachedOptions.set(vm.value, vm);
};
const onOptionDestroy = (key, vm) => {
if (states.options.get(key) === vm) {
states.optionsCount--;
states.filteredOptionsCount--;
states.options.delete(key);
}
};
const resetInputState = (e) => {
if (e.code !== EVENT_CODE.backspace)
toggleLastOptionHitState(false);
states.inputLength = input.value.value.length * 15 + 20;
resetInputHeight();
};
const toggleLastOptionHitState = (hit) => {
if (!Array.isArray(states.selected))
return;
const option = states.selected[states.selected.length - 1];
if (!option)
return;
if (hit === true || hit === false) {
option.hitState = hit;
return hit;
}
option.hitState = !option.hitState;
return option.hitState;
};
const handleComposition = (event) => {
const text = event.target.value;
if (event.type === "compositionend") {
states.isOnComposition = false;
vue.nextTick(() => handleQueryChange(text));
} else {
const lastCharacter = text[text.length - 1] || "";
states.isOnComposition = !isKorean(lastCharacter);
}
};
const handleMenuEnter = () => {
vue.nextTick(() => scrollToOption(states.selected));
};
const handleFocus = (event) => {
if (!states.softFocus) {
if (props.automaticDropdown || props.filterable) {
if (props.filterable && !states.visible) {
states.menuVisibleOnFocus = true;
}
states.visible = true;
}
ctx.emit("focus", event);
} else {
states.softFocus = false;
}
};
const blur = () => {
var _a;
states.visible = false;
(_a = reference.value) == null ? void 0 : _a.blur();
};
const handleBlur = (event) => {
vue.nextTick(() => {
if (states.isSilentBlur) {
states.isSilentBlur = false;
} else {
ctx.emit("blur", event);
}
});
states.softFocus = false;
};
const handleClearClick = (event) => {
deleteSelected(event);
};
const handleClose = () => {
states.visible = false;
};
const handleKeydownEscape = (event) => {
if (states.visible) {
event.preventDefault();
event.stopPropagation();
states.visible = false;
}
};
const toggleMenu = (e) => {
var _a;
if (e && !states.mouseEnter) {
return;
}
if (!selectDisabled.value) {
if (states.menuVisibleOnFocus) {
states.menuVisibleOnFocus = false;
} else {
if (!tooltipRef.value || !tooltipRef.value.isFocusInsideContent()) {
states.visible = !states.visible;
}
}
if (states.visible) {
(_a = input.value || reference.value) == null ? void 0 : _a.focus();
}
}
};
const selectOption = () => {
if (!states.visible) {
toggleMenu();
} else {
if (optionsArray.value[states.hoverIndex]) {
handleOptionSelect(optionsArray.value[states.hoverIndex], void 0);
}
}
};
const getValueKey = (item) => {
return isObject$1(item.value) ? get(item.value, props.valueKey) : item.value;
};
const optionsAllDisabled = vue.computed(() => optionsArray.value.filter((option) => option.visible).every((option) => option.disabled));
const navigateOptions = (direction) => {
if (!states.visible) {
states.visible = true;
return;
}
if (states.options.size === 0 || states.filteredOptionsCount === 0)
return;
if (states.isOnComposition)
return;
if (!optionsAllDisabled.value) {
if (direction === "next") {
states.hoverIndex++;
if (states.hoverIndex === states.options.size) {
states.hoverIndex = 0;
}
} else if (direction === "prev") {
states.hoverIndex--;
if (states.hoverIndex < 0) {
states.hoverIndex = states.options.size - 1;
}
}
const option = optionsArray.value[states.hoverIndex];
if (option.disabled === true || option.states.groupDisabled === true || !option.visible) {
navigateOptions(direction);
}
vue.nextTick(() => scrollToOption(hoverOption.value));
}
};
const handleMouseEnter = () => {
states.mouseEnter = true;
};
const handleMouseLeave = () => {
states.mouseEnter = false;
};
return {
optionsArray,
selectSize,
handleResize,
debouncedOnInputChange,
debouncedQueryChange,
deletePrevTag,
deleteTag,
deleteSelected,
handleOptionSelect,
scrollToOption,
readonly,
resetInputHeight,
showClose,
iconComponent,
iconReverse,
showNewOption,
collapseTagSize,
setSelected,
managePlaceholder,
selectDisabled,
emptyText,
toggleLastOptionHitState,
resetInputState,
handleComposition,
onOptionCreate,
onOptionDestroy,
handleMenuEnter,
handleFocus,
blur,
handleBlur,
handleClearClick,
handleClose,
handleKeydownEscape,
toggleMenu,
selectOption,
getValueKey,
navigateOptions,
dropMenuVisible,
queryChange,
groupQueryChange,
reference,
input,
tooltipRef,
tags,
selectWrapper,
scrollbar,
handleMouseEnter,
handleMouseLeave
};
};
const COMPONENT_NAME$9 = "ElSelect";
const _sfc_main$M = vue.defineComponent({
name: COMPONENT_NAME$9,
componentName: COMPONENT_NAME$9,
components: {
ElInput,
ElSelectMenu: ElSelectMenu$1,
ElOption: Option,
ElTag,
ElScrollbar,
ElTooltip,
ElIcon
},
directives: { ClickOutside },
props: {
name: String,
id: String,
modelValue: {
type: [Array, String, Number, Boolean, Object],
default: void 0
},
autocomplete: {
type: String,
default: "off"
},
automaticDropdown: Boolean,
size: {
type: String,
validator: isValidComponentSize
},
effect: {
type: String,
default: "light"
},
disabled: Boolean,
clearable: Boolean,
filterable: Boolean,
allowCreate: Boolean,
loading: Boolean,
popperClass: {
type: String,
default: ""
},
remote: Boolean,
loadingText: String,
noMatchText: String,
noDataText: String,
remoteMethod: Function,
filterMethod: Function,
multiple: Boolean,
multipleLimit: {
type: Number,
default: 0
},
placeholder: {
type: String
},
defaultFirstOption: Boolean,
reserveKeyword: {
type: Boolean,
default: true
},
valueKey: {
type: String,
default: "value"
},
collapseTags: Boolean,
collapseTagsTooltip: {
type: Boolean,
default: false
},
teleported: useTooltipContentProps.teleported,
persistent: {
type: Boolean,
default: true
},
clearIcon: {
type: iconPropType,
default: circle_close_default
},
fitInputWidth: {
type: Boolean,
default: false
},
suffixIcon: {
type: iconPropType,
default: arrow_down_default
},
tagType: { ...tagProps.type, default: "info" },
validateEvent: {
type: Boolean,
default: true
},
remoteShowSuffix: {
type: Boolean,
default: false
},
suffixTransition: {
type: Boolean,
default: true
},
placement: {
type: String,
values: Ee,
default: "bottom-start"
}
},
emits: [
UPDATE_MODEL_EVENT,
CHANGE_EVENT,
"remove-tag",
"clear",
"visible-change",
"focus",
"blur"
],
setup(props, ctx) {
const nsSelect = useNamespace("select");
const nsInput = useNamespace("input");
const { t } = useLocale();
const states = useSelectStates(props);
const {
optionsArray,
selectSize,
readonly,
handleResize,
collapseTagSize,
debouncedOnInputChange,
debouncedQueryChange,
deletePrevTag,
deleteTag,
deleteSelected,
handleOptionSelect,
scrollToOption,
setSelected,
resetInputHeight,
managePlaceholder,
showClose,
selectDisabled,
iconComponent,
iconReverse,
showNewOption,
emptyText,
toggleLastOptionHitState,
resetInputState,
handleComposition,
onOptionCreate,
onOptionDestroy,
handleMenuEnter,
handleFocus,
blur,
handleBlur,
handleClearClick,
handleClose,
handleKeydownEscape,
toggleMenu,
selectOption,
getValueKey,
navigateOptions,
dropMenuVisible,
reference,
input,
tooltipRef,
tags,
selectWrapper,
scrollbar,
queryChange,
groupQueryChange,
handleMouseEnter,
handleMouseLeave
} = useSelect$3(props, states, ctx);
const { focus } = useFocus(reference);
const {
inputWidth,
selected,
inputLength,
filteredOptionsCount,
visible,
softFocus,
selectedLabel,
hoverIndex,
query,
inputHovering,
currentPlaceholder,
menuVisibleOnFocus,
isOnComposition,
isSilentBlur,
options,
cachedOptions,
optionsCount,
prefixWidth,
tagInMultiLine
} = vue.toRefs(states);
const wrapperKls = vue.computed(() => {
const classList = [nsSelect.b()];
const _selectSize = vue.unref(selectSize);
if (_selectSize) {
classList.push(nsSelect.m(_selectSize));
}
if (props.disabled) {
classList.push(nsSelect.m("disabled"));
}
return classList;
});
const selectTagsStyle = vue.computed(() => ({
maxWidth: `${vue.unref(inputWidth) - 32}px`,
width: "100%"
}));
const tagTextStyle = vue.computed(() => {
const maxWidth = vue.unref(inputWidth) > 123 ? vue.unref(inputWidth) - 123 : vue.unref(inputWidth) - 75;
return { maxWidth: `${maxWidth}px` };
});
vue.provide(selectKey, vue.reactive({
props,
options,
optionsArray,
cachedOptions,
optionsCount,
filteredOptionsCount,
hoverIndex,
handleOptionSelect,
onOptionCreate,
onOptionDestroy,
selectWrapper,
selected,
setSelected,
queryChange,
groupQueryChange
}));
vue.onMounted(() => {
states.cachedPlaceHolder = currentPlaceholder.value = props.placeholder || t("el.select.placeholder");
if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
currentPlaceholder.value = "";
}
useResizeObserver(selectWrapper, handleResize);
if (props.remote && props.multiple) {
resetInputHeight();
}
vue.nextTick(() => {
const refEl = reference.value && reference.value.$el;
if (!refEl)
return;
inputWidth.value = refEl.getBoundingClientRect().width;
if (ctx.slots.prefix) {
const prefix = refEl.querySelector(`.${nsInput.e("prefix")}`);
prefixWidth.value = Math.max(prefix.getBoundingClientRect().width + 5, 30);
}
});
setSelected();
});
if (props.multiple && !Array.isArray(props.modelValue)) {
ctx.emit(UPDATE_MODEL_EVENT, []);
}
if (!props.multiple && Array.isArray(props.modelValue)) {
ctx.emit(UPDATE_MODEL_EVENT, "");
}
const popperPaneRef = vue.computed(() => {
var _a, _b;
return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
});
return {
tagInMultiLine,
prefixWidth,
selectSize,
readonly,
handleResize,
collapseTagSize,
debouncedOnInputChange,
debouncedQueryChange,
deletePrevTag,
deleteTag,
deleteSelected,
handleOptionSelect,
scrollToOption,
inputWidth,
selected,
inputLength,
filteredOptionsCount,
visible,
softFocus,
selectedLabel,
hoverIndex,
query,
inputHovering,
currentPlaceholder,
menuVisibleOnFocus,
isOnComposition,
isSilentBlur,
options,
resetInputHeight,
managePlaceholder,
showClose,
selectDisabled,
iconComponent,
iconReverse,
showNewOption,
emptyText,
toggleLastOptionHitState,
resetInputState,
handleComposition,
handleMenuEnter,
handleFocus,
blur,
handleBlur,
handleClearClick,
handleClose,
handleKeydownEscape,
toggleMenu,
selectOption,
getValueKey,
navigateOptions,
dropMenuVisible,
focus,
reference,
input,
tooltipRef,
popperPaneRef,
tags,
selectWrapper,
scrollbar,
wrapperKls,
selectTagsStyle,
nsSelect,
tagTextStyle,
handleMouseEnter,
handleMouseLeave
};
}
});
const _hoisted_1$n = ["disabled", "autocomplete"];
const _hoisted_2$f = { style: { "height": "100%", "display": "flex", "justify-content": "center", "align-items": "center" } };
function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_tag = vue.resolveComponent("el-tag");
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_option = vue.resolveComponent("el-option");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_el_select_menu = vue.resolveComponent("el-select-menu");
const _directive_click_outside = vue.resolveDirective("click-outside");
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
ref: "selectWrapper",
class: vue.normalizeClass(_ctx.wrapperKls),
onMouseenter: _cache[22] || (_cache[22] = (...args) => _ctx.handleMouseEnter && _ctx.handleMouseEnter(...args)),
onMouseleave: _cache[23] || (_cache[23] = (...args) => _ctx.handleMouseLeave && _ctx.handleMouseLeave(...args)),
onClick: _cache[24] || (_cache[24] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
}, [
vue.createVNode(_component_el_tooltip, {
ref: "tooltipRef",
visible: _ctx.dropMenuVisible,
placement: _ctx.placement,
teleported: _ctx.teleported,
"popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
"fallback-placements": ["bottom-start", "top-start", "right", "left"],
effect: _ctx.effect,
pure: "",
trigger: "click",
transition: `${_ctx.nsSelect.namespace.value}-zoom-in-top`,
"stop-popper-mouse-event": false,
"gpu-acceleration": false,
persistent: _ctx.persistent,
onShow: _ctx.handleMenuEnter
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
class: "select-trigger",
onMouseenter: _cache[20] || (_cache[20] = ($event) => _ctx.inputHovering = true),
onMouseleave: _cache[21] || (_cache[21] = ($event) => _ctx.inputHovering = false)
}, [
_ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
ref: "tags",
class: vue.normalizeClass(_ctx.nsSelect.e("tags")),
style: vue.normalizeStyle(_ctx.selectTagsStyle)
}, [
_ctx.collapseTags && _ctx.selected.length ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: vue.normalizeClass([
_ctx.nsSelect.b("tags-wrapper"),
{ "has-prefix": _ctx.prefixWidth && _ctx.selected.length }
])
}, [
vue.createVNode(_component_el_tag, {
closable: !_ctx.selectDisabled && !_ctx.selected[0].isDisabled,
size: _ctx.collapseTagSize,
hit: _ctx.selected[0].hitState,
type: _ctx.tagType,
"disable-transitions": "",
onClose: _cache[0] || (_cache[0] = ($event) => _ctx.deleteTag($event, _ctx.selected[0]))
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")),
style: vue.normalizeStyle(_ctx.tagTextStyle)
}, vue.toDisplayString(_ctx.selected[0].currentLabel), 7)
]),
_: 1
}, 8, ["closable", "size", "hit", "type"]),
_ctx.selected.length > 1 ? (vue.openBlock(), vue.createBlock(_component_el_tag, {
key: 0,
closable: false,
size: _ctx.collapseTagSize,
type: _ctx.tagType,
"disable-transitions": ""
}, {
default: vue.withCtx(() => [
_ctx.collapseTagsTooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
key: 0,
disabled: _ctx.dropMenuVisible,
"fallback-placements": ["bottom", "top", "right", "left"],
effect: _ctx.effect,
placement: "bottom",
teleported: _ctx.teleported
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.nsSelect.e("tags-text"))
}, "+ " + vue.toDisplayString(_ctx.selected.length - 1), 3)
]),
content: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.nsSelect.e("collapse-tags"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selected.slice(1), (item, idx) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: idx,
class: vue.normalizeClass(_ctx.nsSelect.e("collapse-tag"))
}, [
(vue.openBlock(), vue.createBlock(_component_el_tag, {
key: _ctx.getValueKey(item),
class: "in-tooltip",
closable: !_ctx.selectDisabled && !item.isDisabled,
size: _ctx.collapseTagSize,
hit: item.hitState,
type: _ctx.tagType,
"disable-transitions": "",
style: { margin: "2px" },
onClose: ($event) => _ctx.deleteTag($event, item)
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")),
style: vue.normalizeStyle({
maxWidth: _ctx.inputWidth - 75 + "px"
})
}, vue.toDisplayString(item.currentLabel), 7)
]),
_: 2
}, 1032, ["closable", "size", "hit", "type", "onClose"]))
], 2);
}), 128))
], 2)
]),
_: 1
}, 8, ["disabled", "effect", "teleported"])) : (vue.openBlock(), vue.createElementBlock("span", {
key: 1,
class: vue.normalizeClass(_ctx.nsSelect.e("tags-text"))
}, "+ " + vue.toDisplayString(_ctx.selected.length - 1), 3))
]),
_: 1
}, 8, ["size", "type"])) : vue.createCommentVNode("v-if", true)
], 2)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" "),
!_ctx.collapseTags ? (vue.openBlock(), vue.createBlock(vue.Transition, {
key: 1,
onAfterLeave: _ctx.resetInputHeight
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
class: vue.normalizeClass([
_ctx.nsSelect.b("tags-wrapper"),
{ "has-prefix": _ctx.prefixWidth && _ctx.selected.length }
])
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selected, (item) => {
return vue.openBlock(), vue.createBlock(_component_el_tag, {
key: _ctx.getValueKey(item),
closable: !_ctx.selectDisabled && !item.isDisabled,
size: _ctx.collapseTagSize,
hit: item.hitState,
type: _ctx.tagType,
"disable-transitions": "",
onClose: ($event) => _ctx.deleteTag($event, item)
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")),
style: vue.normalizeStyle({ maxWidth: _ctx.inputWidth - 75 + "px" })
}, vue.toDisplayString(item.currentLabel), 7)
]),
_: 2
}, 1032, ["closable", "size", "hit", "type", "onClose"]);
}), 128))
], 2)
]),
_: 1
}, 8, ["onAfterLeave"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode("
"),
_ctx.filterable ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
key: 2,
ref: "input",
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.query = $event),
type: "text",
class: vue.normalizeClass([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]),
disabled: _ctx.selectDisabled,
autocomplete: _ctx.autocomplete,
style: vue.normalizeStyle({
marginLeft: _ctx.prefixWidth && !_ctx.selected.length || _ctx.tagInMultiLine ? `${_ctx.prefixWidth}px` : "",
flexGrow: 1,
width: `${_ctx.inputLength / (_ctx.inputWidth - 32)}%`,
maxWidth: `${_ctx.inputWidth - 42}px`
}),
onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
onBlur: _cache[3] || (_cache[3] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
onKeyup: _cache[4] || (_cache[4] = (...args) => _ctx.managePlaceholder && _ctx.managePlaceholder(...args)),
onKeydown: [
_cache[5] || (_cache[5] = (...args) => _ctx.resetInputState && _ctx.resetInputState(...args)),
_cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["prevent"]), ["down"])),
_cache[7] || (_cache[7] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["prevent"]), ["up"])),
_cache[8] || (_cache[8] = vue.withKeys((...args) => _ctx.handleKeydownEscape && _ctx.handleKeydownEscape(...args), ["esc"])),
_cache[9] || (_cache[9] = vue.withKeys(vue.withModifiers((...args) => _ctx.selectOption && _ctx.selectOption(...args), ["stop", "prevent"]), ["enter"])),
_cache[10] || (_cache[10] = vue.withKeys((...args) => _ctx.deletePrevTag && _ctx.deletePrevTag(...args), ["delete"])),
_cache[11] || (_cache[11] = vue.withKeys(($event) => _ctx.visible = false, ["tab"]))
],
onCompositionstart: _cache[12] || (_cache[12] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
onCompositionupdate: _cache[13] || (_cache[13] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
onCompositionend: _cache[14] || (_cache[14] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
onInput: _cache[15] || (_cache[15] = (...args) => _ctx.debouncedQueryChange && _ctx.debouncedQueryChange(...args))
}, null, 46, _hoisted_1$n)), [
[vue.vModelText, _ctx.query]
]) : vue.createCommentVNode("v-if", true)
], 6)) : vue.createCommentVNode("v-if", true),
vue.createVNode(_component_el_input, {
id: _ctx.id,
ref: "reference",
modelValue: _ctx.selectedLabel,
"onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => _ctx.selectedLabel = $event),
type: "text",
placeholder: _ctx.currentPlaceholder,
name: _ctx.name,
autocomplete: _ctx.autocomplete,
size: _ctx.selectSize,
disabled: _ctx.selectDisabled,
readonly: _ctx.readonly,
"validate-event": false,
class: vue.normalizeClass([_ctx.nsSelect.is("focus", _ctx.visible)]),
tabindex: _ctx.multiple && _ctx.filterable ? -1 : void 0,
onFocus: _ctx.handleFocus,
onBlur: _ctx.handleBlur,
onInput: _ctx.debouncedOnInputChange,
onPaste: _ctx.debouncedOnInputChange,
onCompositionstart: _ctx.handleComposition,
onCompositionupdate: _ctx.handleComposition,
onCompositionend: _ctx.handleComposition,
onKeydown: [
_cache[17] || (_cache[17] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"])),
_cache[18] || (_cache[18] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"])),
vue.withKeys(vue.withModifiers(_ctx.selectOption, ["stop", "prevent"]), ["enter"]),
vue.withKeys(_ctx.handleKeydownEscape, ["esc"]),
_cache[19] || (_cache[19] = vue.withKeys(($event) => _ctx.visible = false, ["tab"]))
]
}, vue.createSlots({
suffix: vue.withCtx(() => [
_ctx.iconComponent && !_ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 0,
class: vue.normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon"), _ctx.iconReverse])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
_ctx.showClose && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 1,
class: vue.normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon")]),
onClick: _ctx.handleClearClick
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
]),
_: 1
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
]),
_: 2
}, [
_ctx.$slots.prefix ? {
name: "prefix",
fn: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_2$f, [
vue.renderSlot(_ctx.$slots, "prefix")
])
])
} : void 0
]), 1032, ["id", "modelValue", "placeholder", "name", "autocomplete", "size", "disabled", "readonly", "class", "tabindex", "onFocus", "onBlur", "onInput", "onPaste", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onKeydown"])
], 32)
]),
content: vue.withCtx(() => [
vue.createVNode(_component_el_select_menu, null, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createVNode(_component_el_scrollbar, {
ref: "scrollbar",
tag: "ul",
"wrap-class": _ctx.nsSelect.be("dropdown", "wrap"),
"view-class": _ctx.nsSelect.be("dropdown", "list"),
class: vue.normalizeClass([
_ctx.nsSelect.is("empty", !_ctx.allowCreate && Boolean(_ctx.query) && _ctx.filteredOptionsCount === 0)
])
}, {
default: vue.withCtx(() => [
_ctx.showNewOption ? (vue.openBlock(), vue.createBlock(_component_el_option, {
key: 0,
value: _ctx.query,
created: true
}, null, 8, ["value"])) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["wrap-class", "view-class", "class"]), [
[vue.vShow, _ctx.options.size > 0 && !_ctx.loading]
]),
_ctx.emptyText && (!_ctx.allowCreate || _ctx.loading || _ctx.allowCreate && _ctx.options.size === 0) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
_ctx.$slots.empty ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }) : (vue.openBlock(), vue.createElementBlock("p", {
key: 1,
class: vue.normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
}, vue.toDisplayString(_ctx.emptyText), 3))
], 64)) : vue.createCommentVNode("v-if", true)
]),
_: 3
})
]),
_: 3
}, 8, ["visible", "placement", "teleported", "popper-class", "effect", "transition", "persistent", "onShow"])
], 34)), [
[_directive_click_outside, _ctx.handleClose, _ctx.popperPaneRef]
]);
}
var Select$1 = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$9], ["__file", "select.vue"]]);
const _sfc_main$L = vue.defineComponent({
name: "ElOptionGroup",
componentName: "ElOptionGroup",
props: {
label: String,
disabled: {
type: Boolean,
default: false
}
},
setup(props) {
const ns = useNamespace("select");
const visible = vue.ref(true);
const instance = vue.getCurrentInstance();
const children = vue.ref([]);
vue.provide(selectGroupKey, vue.reactive({
...vue.toRefs(props)
}));
const select = vue.inject(selectKey);
vue.onMounted(() => {
children.value = flattedChildren(instance.subTree);
});
const flattedChildren = (node) => {
const children2 = [];
if (Array.isArray(node.children)) {
node.children.forEach((child) => {
var _a;
if (child.type && child.type.name === "ElOption" && child.component && child.component.proxy) {
children2.push(child.component.proxy);
} else if ((_a = child.children) == null ? void 0 : _a.length) {
children2.push(...flattedChildren(child));
}
});
}
return children2;
};
const { groupQueryChange } = vue.toRaw(select);
vue.watch(groupQueryChange, () => {
visible.value = children.value.some((option) => option.visible === true);
}, { flush: "post" });
return {
visible,
ns
};
}
});
function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("ul", {
class: vue.normalizeClass(_ctx.ns.be("group", "wrap"))
}, [
vue.createElementVNode("li", {
class: vue.normalizeClass(_ctx.ns.be("group", "title"))
}, vue.toDisplayString(_ctx.label), 3),
vue.createElementVNode("li", null, [
vue.createElementVNode("ul", {
class: vue.normalizeClass(_ctx.ns.b("group"))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2)
])
], 2)), [
[vue.vShow, _ctx.visible]
]);
}
var OptionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$8], ["__file", "option-group.vue"]]);
const ElSelect = withInstall(Select$1, {
Option,
OptionGroup
});
const ElOption = withNoopInstall(Option);
const ElOptionGroup = withNoopInstall(OptionGroup);
const usePagination = () => vue.inject(elPaginationKey, {});
const paginationSizesProps = buildProps({
pageSize: {
type: Number,
required: true
},
pageSizes: {
type: definePropType(Array),
default: () => mutable([10, 20, 30, 40, 50, 100])
},
popperClass: {
type: String
},
disabled: Boolean,
size: {
type: String,
values: componentSizes
}
});
const __default__$A = vue.defineComponent({
name: "ElPaginationSizes"
});
const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
...__default__$A,
props: paginationSizesProps,
emits: ["page-size-change"],
setup(__props, { emit }) {
const props = __props;
const { t } = useLocale();
const ns = useNamespace("pagination");
const pagination = usePagination();
const innerPageSize = vue.ref(props.pageSize);
vue.watch(() => props.pageSizes, (newVal, oldVal) => {
if (isEqual$1(newVal, oldVal))
return;
if (Array.isArray(newVal)) {
const pageSize = newVal.includes(props.pageSize) ? props.pageSize : props.pageSizes[0];
emit("page-size-change", pageSize);
}
});
vue.watch(() => props.pageSize, (newVal) => {
innerPageSize.value = newVal;
});
const innerPageSizes = vue.computed(() => props.pageSizes);
function handleChange(val) {
var _a;
if (val !== innerPageSize.value) {
innerPageSize.value = val;
(_a = pagination.handleSizeChange) == null ? void 0 : _a.call(pagination, Number(val));
}
}
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass(vue.unref(ns).e("sizes"))
}, [
vue.createVNode(vue.unref(ElSelect), {
"model-value": innerPageSize.value,
disabled: _ctx.disabled,
"popper-class": _ctx.popperClass,
size: _ctx.size,
"validate-event": false,
onChange: handleChange
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(innerPageSizes), (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElOption), {
key: item,
value: item,
label: item + vue.unref(t)("el.pagination.pagesize")
}, null, 8, ["value", "label"]);
}), 128))
]),
_: 1
}, 8, ["model-value", "disabled", "popper-class", "size"])
], 2);
};
}
});
var Sizes = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__file", "sizes.vue"]]);
const _hoisted_1$m = ["disabled"];
const __default__$z = vue.defineComponent({
name: "ElPaginationJumper"
});
const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
...__default__$z,
setup(__props) {
const { t } = useLocale();
const ns = useNamespace("pagination");
const { pageCount, disabled, currentPage, changeEvent } = usePagination();
const userInput = vue.ref();
const innerValue = vue.computed(() => {
var _a;
return (_a = userInput.value) != null ? _a : currentPage == null ? void 0 : currentPage.value;
});
function handleInput(val) {
userInput.value = +val;
}
function handleChange(val) {
val = Math.trunc(+val);
changeEvent == null ? void 0 : changeEvent(+val);
userInput.value = void 0;
}
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass(vue.unref(ns).e("jump")),
disabled: vue.unref(disabled)
}, [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.pagination.goto")) + " ", 1),
vue.createVNode(vue.unref(ElInput), {
size: "small",
class: vue.normalizeClass([vue.unref(ns).e("editor"), vue.unref(ns).is("in-pagination")]),
min: 1,
max: vue.unref(pageCount),
disabled: vue.unref(disabled),
"model-value": vue.unref(innerValue),
"validate-event": false,
type: "number",
"onUpdate:modelValue": handleInput,
onChange: handleChange
}, null, 8, ["class", "max", "disabled", "model-value"]),
vue.createTextVNode(" " + vue.toDisplayString(vue.unref(t)("el.pagination.pageClassifier")), 1)
], 10, _hoisted_1$m);
};
}
});
var Jumper = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__file", "jumper.vue"]]);
const paginationTotalProps = buildProps({
total: {
type: Number,
default: 1e3
}
});
const _hoisted_1$l = ["disabled"];
const __default__$y = vue.defineComponent({
name: "ElPaginationTotal"
});
const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
...__default__$y,
props: paginationTotalProps,
setup(__props) {
const { t } = useLocale();
const ns = useNamespace("pagination");
const { disabled } = usePagination();
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass(vue.unref(ns).e("total")),
disabled: vue.unref(disabled)
}, vue.toDisplayString(vue.unref(t)("el.pagination.total", {
total: _ctx.total
})), 11, _hoisted_1$l);
};
}
});
var Total = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__file", "total.vue"]]);
const paginationPagerProps = buildProps({
currentPage: {
type: Number,
default: 1
},
pageCount: {
type: Number,
required: true
},
pagerCount: {
type: Number,
default: 7
},
disabled: Boolean
});
const _hoisted_1$k = ["onKeyup"];
const _hoisted_2$e = ["aria-current", "tabindex"];
const _hoisted_3$7 = ["tabindex"];
const _hoisted_4$5 = ["aria-current", "tabindex"];
const _hoisted_5$4 = ["tabindex"];
const _hoisted_6 = ["aria-current", "tabindex"];
const __default__$x = vue.defineComponent({
name: "ElPaginationPager"
});
const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
...__default__$x,
props: paginationPagerProps,
emits: ["change"],
setup(__props, { emit }) {
const props = __props;
const nsPager = useNamespace("pager");
const nsIcon = useNamespace("icon");
const showPrevMore = vue.ref(false);
const showNextMore = vue.ref(false);
const quickPrevHover = vue.ref(false);
const quickNextHover = vue.ref(false);
const quickPrevFocus = vue.ref(false);
const quickNextFocus = vue.ref(false);
const pagers = vue.computed(() => {
const pagerCount = props.pagerCount;
const halfPagerCount = (pagerCount - 1) / 2;
const currentPage = Number(props.currentPage);
const pageCount = Number(props.pageCount);
let showPrevMore2 = false;
let showNextMore2 = false;
if (pageCount > pagerCount) {
if (currentPage > pagerCount - halfPagerCount) {
showPrevMore2 = true;
}
if (currentPage < pageCount - halfPagerCount) {
showNextMore2 = true;
}
}
const array = [];
if (showPrevMore2 && !showNextMore2) {
const startPage = pageCount - (pagerCount - 2);
for (let i = startPage; i < pageCount; i++) {
array.push(i);
}
} else if (!showPrevMore2 && showNextMore2) {
for (let i = 2; i < pagerCount; i++) {
array.push(i);
}
} else if (showPrevMore2 && showNextMore2) {
const offset = Math.floor(pagerCount / 2) - 1;
for (let i = currentPage - offset; i <= currentPage + offset; i++) {
array.push(i);
}
} else {
for (let i = 2; i < pageCount; i++) {
array.push(i);
}
}
return array;
});
const tabindex = vue.computed(() => props.disabled ? -1 : 0);
vue.watchEffect(() => {
const halfPagerCount = (props.pagerCount - 1) / 2;
showPrevMore.value = false;
showNextMore.value = false;
if (props.pageCount > props.pagerCount) {
if (props.currentPage > props.pagerCount - halfPagerCount) {
showPrevMore.value = true;
}
if (props.currentPage < props.pageCount - halfPagerCount) {
showNextMore.value = true;
}
}
});
function onMouseEnter(forward = false) {
if (props.disabled)
return;
if (forward) {
quickPrevHover.value = true;
} else {
quickNextHover.value = true;
}
}
function onFocus(forward = false) {
if (forward) {
quickPrevFocus.value = true;
} else {
quickNextFocus.value = true;
}
}
function onEnter(e) {
const target = e.target;
if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("number")) {
const newPage = Number(target.textContent);
if (newPage !== props.currentPage) {
emit("change", newPage);
}
} else if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("more")) {
onPagerClick(e);
}
}
function onPagerClick(event) {
const target = event.target;
if (target.tagName.toLowerCase() === "ul" || props.disabled) {
return;
}
let newPage = Number(target.textContent);
const pageCount = props.pageCount;
const currentPage = props.currentPage;
const pagerCountOffset = props.pagerCount - 2;
if (target.className.includes("more")) {
if (target.className.includes("quickprev")) {
newPage = currentPage - pagerCountOffset;
} else if (target.className.includes("quicknext")) {
newPage = currentPage + pagerCountOffset;
}
}
if (!Number.isNaN(+newPage)) {
if (newPage < 1) {
newPage = 1;
}
if (newPage > pageCount) {
newPage = pageCount;
}
}
if (newPage !== currentPage) {
emit("change", newPage);
}
}
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("ul", {
class: vue.normalizeClass(vue.unref(nsPager).b()),
onClick: onPagerClick,
onKeyup: vue.withKeys(onEnter, ["enter"])
}, [
_ctx.pageCount > 0 ? (vue.openBlock(), vue.createElementBlock("li", {
key: 0,
class: vue.normalizeClass([[
vue.unref(nsPager).is("active", _ctx.currentPage === 1),
vue.unref(nsPager).is("disabled", _ctx.disabled)
], "number"]),
"aria-current": _ctx.currentPage === 1,
tabindex: vue.unref(tabindex)
}, " 1 ", 10, _hoisted_2$e)) : vue.createCommentVNode("v-if", true),
showPrevMore.value ? (vue.openBlock(), vue.createElementBlock("li", {
key: 1,
class: vue.normalizeClass([
"more",
"btn-quickprev",
vue.unref(nsIcon).b(),
vue.unref(nsPager).is("disabled", _ctx.disabled)
]),
tabindex: vue.unref(tabindex),
onMouseenter: _cache[0] || (_cache[0] = ($event) => onMouseEnter(true)),
onMouseleave: _cache[1] || (_cache[1] = ($event) => quickPrevHover.value = false),
onFocus: _cache[2] || (_cache[2] = ($event) => onFocus(true)),
onBlur: _cache[3] || (_cache[3] = ($event) => quickPrevFocus.value = false)
}, [
quickPrevHover.value || quickPrevFocus.value ? (vue.openBlock(), vue.createBlock(vue.unref(d_arrow_left_default), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(more_filled_default), { key: 1 }))
], 42, _hoisted_3$7)) : vue.createCommentVNode("v-if", true),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(pagers), (pager) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: pager,
class: vue.normalizeClass([[
vue.unref(nsPager).is("active", _ctx.currentPage === pager),
vue.unref(nsPager).is("disabled", _ctx.disabled)
], "number"]),
"aria-current": _ctx.currentPage === pager,
tabindex: vue.unref(tabindex)
}, vue.toDisplayString(pager), 11, _hoisted_4$5);
}), 128)),
showNextMore.value ? (vue.openBlock(), vue.createElementBlock("li", {
key: 2,
class: vue.normalizeClass([
"more",
"btn-quicknext",
vue.unref(nsIcon).b(),
vue.unref(nsPager).is("disabled", _ctx.disabled)
]),
tabindex: vue.unref(tabindex),
onMouseenter: _cache[4] || (_cache[4] = ($event) => onMouseEnter()),
onMouseleave: _cache[5] || (_cache[5] = ($event) => quickNextHover.value = false),
onFocus: _cache[6] || (_cache[6] = ($event) => onFocus()),
onBlur: _cache[7] || (_cache[7] = ($event) => quickNextFocus.value = false)
}, [
quickNextHover.value || quickNextFocus.value ? (vue.openBlock(), vue.createBlock(vue.unref(d_arrow_right_default), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(more_filled_default), { key: 1 }))
], 42, _hoisted_5$4)) : vue.createCommentVNode("v-if", true),
_ctx.pageCount > 1 ? (vue.openBlock(), vue.createElementBlock("li", {
key: 3,
class: vue.normalizeClass([[
vue.unref(nsPager).is("active", _ctx.currentPage === _ctx.pageCount),
vue.unref(nsPager).is("disabled", _ctx.disabled)
], "number"]),
"aria-current": _ctx.currentPage === _ctx.pageCount,
tabindex: vue.unref(tabindex)
}, vue.toDisplayString(_ctx.pageCount), 11, _hoisted_6)) : vue.createCommentVNode("v-if", true)
], 42, _hoisted_1$k);
};
}
});
var Pager = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__file", "pager.vue"]]);
const isAbsent = (v) => typeof v !== "number";
const paginationProps = buildProps({
total: Number,
pageSize: Number,
defaultPageSize: Number,
currentPage: Number,
defaultCurrentPage: Number,
pageCount: Number,
pagerCount: {
type: Number,
validator: (value) => {
return typeof value === "number" && Math.trunc(value) === value && value > 4 && value < 22 && value % 2 === 1;
},
default: 7
},
layout: {
type: String,
default: ["prev", "pager", "next", "jumper", "->", "total"].join(", ")
},
pageSizes: {
type: definePropType(Array),
default: () => mutable([10, 20, 30, 40, 50, 100])
},
popperClass: {
type: String,
default: ""
},
prevText: {
type: String,
default: ""
},
prevIcon: {
type: iconPropType,
default: () => arrow_left_default
},
nextText: {
type: String,
default: ""
},
nextIcon: {
type: iconPropType,
default: () => arrow_right_default
},
small: Boolean,
background: Boolean,
disabled: Boolean,
hideOnSinglePage: Boolean
});
const paginationEmits = {
"update:current-page": (val) => typeof val === "number",
"update:page-size": (val) => typeof val === "number",
"size-change": (val) => typeof val === "number",
"current-change": (val) => typeof val === "number",
"prev-click": (val) => typeof val === "number",
"next-click": (val) => typeof val === "number"
};
const componentName = "ElPagination";
var Pagination = vue.defineComponent({
name: componentName,
props: paginationProps,
emits: paginationEmits,
setup(props, { emit, slots }) {
const { t } = useLocale();
const ns = useNamespace("pagination");
const vnodeProps = vue.getCurrentInstance().vnode.props || {};
const hasCurrentPageListener = "onUpdate:currentPage" in vnodeProps || "onUpdate:current-page" in vnodeProps || "onCurrentChange" in vnodeProps;
const hasPageSizeListener = "onUpdate:pageSize" in vnodeProps || "onUpdate:page-size" in vnodeProps || "onSizeChange" in vnodeProps;
const assertValidUsage = vue.computed(() => {
if (isAbsent(props.total) && isAbsent(props.pageCount))
return false;
if (!isAbsent(props.currentPage) && !hasCurrentPageListener)
return false;
if (props.layout.includes("sizes")) {
if (!isAbsent(props.pageCount)) {
if (!hasPageSizeListener)
return false;
} else if (!isAbsent(props.total)) {
if (!isAbsent(props.pageSize)) {
if (!hasPageSizeListener) {
return false;
}
}
}
}
return true;
});
const innerPageSize = vue.ref(isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize);
const innerCurrentPage = vue.ref(isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage);
const pageSizeBridge = vue.computed({
get() {
return isAbsent(props.pageSize) ? innerPageSize.value : props.pageSize;
},
set(v) {
if (isAbsent(props.pageSize)) {
innerPageSize.value = v;
}
if (hasPageSizeListener) {
emit("update:page-size", v);
emit("size-change", v);
}
}
});
const pageCountBridge = vue.computed(() => {
let pageCount = 0;
if (!isAbsent(props.pageCount)) {
pageCount = props.pageCount;
} else if (!isAbsent(props.total)) {
pageCount = Math.max(1, Math.ceil(props.total / pageSizeBridge.value));
}
return pageCount;
});
const currentPageBridge = vue.computed({
get() {
return isAbsent(props.currentPage) ? innerCurrentPage.value : props.currentPage;
},
set(v) {
let newCurrentPage = v;
if (v < 1) {
newCurrentPage = 1;
} else if (v > pageCountBridge.value) {
newCurrentPage = pageCountBridge.value;
}
if (isAbsent(props.currentPage)) {
innerCurrentPage.value = newCurrentPage;
}
if (hasCurrentPageListener) {
emit("update:current-page", newCurrentPage);
emit("current-change", newCurrentPage);
}
}
});
vue.watch(pageCountBridge, (val) => {
if (currentPageBridge.value > val)
currentPageBridge.value = val;
});
function handleCurrentChange(val) {
currentPageBridge.value = val;
}
function handleSizeChange(val) {
pageSizeBridge.value = val;
const newPageCount = pageCountBridge.value;
if (currentPageBridge.value > newPageCount) {
currentPageBridge.value = newPageCount;
}
}
function prev() {
if (props.disabled)
return;
currentPageBridge.value -= 1;
emit("prev-click", currentPageBridge.value);
}
function next() {
if (props.disabled)
return;
currentPageBridge.value += 1;
emit("next-click", currentPageBridge.value);
}
function addClass(element, cls) {
if (element) {
if (!element.props) {
element.props = {};
}
element.props.class = [element.props.class, cls].join(" ");
}
}
vue.provide(elPaginationKey, {
pageCount: pageCountBridge,
disabled: vue.computed(() => props.disabled),
currentPage: currentPageBridge,
changeEvent: handleCurrentChange,
handleSizeChange
});
return () => {
var _a, _b;
if (!assertValidUsage.value) {
debugWarn(componentName, t("el.pagination.deprecationWarning"));
return null;
}
if (!props.layout)
return null;
if (props.hideOnSinglePage && pageCountBridge.value <= 1)
return null;
const rootChildren = [];
const rightWrapperChildren = [];
const rightWrapperRoot = vue.h("div", { class: ns.e("rightwrapper") }, rightWrapperChildren);
const TEMPLATE_MAP = {
prev: vue.h(Prev, {
disabled: props.disabled,
currentPage: currentPageBridge.value,
prevText: props.prevText,
prevIcon: props.prevIcon,
onClick: prev
}),
jumper: vue.h(Jumper),
pager: vue.h(Pager, {
currentPage: currentPageBridge.value,
pageCount: pageCountBridge.value,
pagerCount: props.pagerCount,
onChange: handleCurrentChange,
disabled: props.disabled
}),
next: vue.h(Next, {
disabled: props.disabled,
currentPage: currentPageBridge.value,
pageCount: pageCountBridge.value,
nextText: props.nextText,
nextIcon: props.nextIcon,
onClick: next
}),
sizes: vue.h(Sizes, {
pageSize: pageSizeBridge.value,
pageSizes: props.pageSizes,
popperClass: props.popperClass,
disabled: props.disabled,
size: props.small ? "small" : "default"
}),
slot: (_b = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : null,
total: vue.h(Total, { total: isAbsent(props.total) ? 0 : props.total })
};
const components = props.layout.split(",").map((item) => item.trim());
let haveRightWrapper = false;
components.forEach((c) => {
if (c === "->") {
haveRightWrapper = true;
return;
}
if (!haveRightWrapper) {
rootChildren.push(TEMPLATE_MAP[c]);
} else {
rightWrapperChildren.push(TEMPLATE_MAP[c]);
}
});
addClass(rootChildren[0], ns.is("first"));
addClass(rootChildren[rootChildren.length - 1], ns.is("last"));
if (haveRightWrapper && rightWrapperChildren.length > 0) {
addClass(rightWrapperChildren[0], ns.is("first"));
addClass(rightWrapperChildren[rightWrapperChildren.length - 1], ns.is("last"));
rootChildren.push(rightWrapperRoot);
}
return vue.h("div", {
role: "pagination",
"aria-label": "pagination",
class: [
ns.b(),
ns.is("background", props.background),
{
[ns.m("small")]: props.small
}
]
}, rootChildren);
};
}
});
const ElPagination = withInstall(Pagination);
const popconfirmProps = buildProps({
title: String,
confirmButtonText: String,
cancelButtonText: String,
confirmButtonType: {
type: String,
values: buttonTypes,
default: "primary"
},
cancelButtonType: {
type: String,
values: buttonTypes,
default: "text"
},
icon: {
type: iconPropType,
default: () => question_filled_default
},
iconColor: {
type: String,
default: "#f90"
},
hideIcon: {
type: Boolean,
default: false
},
hideAfter: {
type: Number,
default: 200
},
onConfirm: {
type: definePropType(Function)
},
onCancel: {
type: definePropType(Function)
},
teleported: useTooltipContentProps.teleported,
persistent: useTooltipContentProps.persistent,
width: {
type: [String, Number],
default: 150
}
});
const __default__$w = vue.defineComponent({
name: "ElPopconfirm"
});
const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
...__default__$w,
props: popconfirmProps,
setup(__props) {
const props = __props;
const { t } = useLocale();
const ns = useNamespace("popconfirm");
const tooltipRef = vue.ref();
const hidePopper = () => {
var _a, _b;
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a);
};
const style = vue.computed(() => {
return {
width: addUnit(props.width)
};
});
const confirm = (e) => {
var _a;
(_a = props.onConfirm) == null ? void 0 : _a.call(props, e);
hidePopper();
};
const cancel = (e) => {
var _a;
(_a = props.onCancel) == null ? void 0 : _a.call(props, e);
hidePopper();
};
const finalConfirmButtonText = vue.computed(() => props.confirmButtonText || t("el.popconfirm.confirmButtonText"));
const finalCancelButtonText = vue.computed(() => props.cancelButtonText || t("el.popconfirm.cancelButtonText"));
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), vue.mergeProps({
ref_key: "tooltipRef",
ref: tooltipRef,
trigger: "click",
effect: "light"
}, _ctx.$attrs, {
"popper-class": `${vue.unref(ns).namespace.value}-popover`,
"popper-style": vue.unref(style),
teleported: _ctx.teleported,
"fallback-placements": ["bottom", "top", "right", "left"],
"hide-after": _ctx.hideAfter,
persistent: _ctx.persistent
}), {
content: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).b())
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("main"))
}, [
!_ctx.hideIcon && _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("icon")),
style: vue.normalizeStyle({ color: _ctx.iconColor })
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
]),
_: 1
}, 8, ["class", "style"])) : vue.createCommentVNode("v-if", true),
vue.createTextVNode(" " + vue.toDisplayString(_ctx.title), 1)
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("action"))
}, [
vue.createVNode(vue.unref(ElButton), {
size: "small",
type: _ctx.cancelButtonType === "text" ? "" : _ctx.cancelButtonType,
text: _ctx.cancelButtonType === "text",
onClick: cancel
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(finalCancelButtonText)), 1)
]),
_: 1
}, 8, ["type", "text"]),
vue.createVNode(vue.unref(ElButton), {
size: "small",
type: _ctx.confirmButtonType === "text" ? "" : _ctx.confirmButtonType,
text: _ctx.confirmButtonType === "text",
onClick: confirm
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(finalConfirmButtonText)), 1)
]),
_: 1
}, 8, ["type", "text"])
], 2)
], 2)
]),
default: vue.withCtx(() => [
_ctx.$slots.reference ? vue.renderSlot(_ctx.$slots, "reference", { key: 0 }) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 16, ["popper-class", "popper-style", "teleported", "hide-after", "persistent"]);
};
}
});
var Popconfirm = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__file", "popconfirm.vue"]]);
const ElPopconfirm = withInstall(Popconfirm);
const popoverProps = buildProps({
trigger: useTooltipTriggerProps.trigger,
placement: dropdownProps.placement,
disabled: useTooltipTriggerProps.disabled,
visible: useTooltipContentProps.visible,
transition: useTooltipContentProps.transition,
popperOptions: dropdownProps.popperOptions,
tabindex: dropdownProps.tabindex,
content: useTooltipContentProps.content,
popperStyle: useTooltipContentProps.popperStyle,
popperClass: useTooltipContentProps.popperClass,
enterable: {
...useTooltipContentProps.enterable,
default: true
},
effect: {
...useTooltipContentProps.effect,
default: "light"
},
teleported: useTooltipContentProps.teleported,
title: String,
width: {
type: [String, Number],
default: 150
},
offset: {
type: Number,
default: void 0
},
showAfter: {
type: Number,
default: 0
},
hideAfter: {
type: Number,
default: 200
},
autoClose: {
type: Number,
default: 0
},
showArrow: {
type: Boolean,
default: true
},
persistent: {
type: Boolean,
default: true
},
"onUpdate:visible": {
type: Function
}
});
const popoverEmits = {
"update:visible": (value) => isBoolean(value),
"before-enter": () => true,
"before-leave": () => true,
"after-enter": () => true,
"after-leave": () => true
};
const updateEventKeyRaw = `onUpdate:visible`;
const __default__$v = vue.defineComponent({
name: "ElPopover"
});
const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
...__default__$v,
props: popoverProps,
emits: popoverEmits,
setup(__props, { expose, emit }) {
const props = __props;
const onUpdateVisible = vue.computed(() => {
return props[updateEventKeyRaw];
});
const ns = useNamespace("popover");
const tooltipRef = vue.ref();
const popperRef = vue.computed(() => {
var _a;
return (_a = vue.unref(tooltipRef)) == null ? void 0 : _a.popperRef;
});
const style = vue.computed(() => {
return [
{
width: addUnit(props.width)
},
props.popperStyle
];
});
const kls = vue.computed(() => {
return [ns.b(), props.popperClass, { [ns.m("plain")]: !!props.content }];
});
const gpuAcceleration = vue.computed(() => {
return props.transition === `${ns.namespace.value}-fade-in-linear`;
});
const hide = () => {
var _a;
(_a = tooltipRef.value) == null ? void 0 : _a.hide();
};
const beforeEnter = () => {
emit("before-enter");
};
const beforeLeave = () => {
emit("before-leave");
};
const afterEnter = () => {
emit("after-enter");
};
const afterLeave = () => {
emit("update:visible", false);
emit("after-leave");
};
expose({
popperRef,
hide
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElTooltip), vue.mergeProps({
ref_key: "tooltipRef",
ref: tooltipRef
}, _ctx.$attrs, {
trigger: _ctx.trigger,
placement: _ctx.placement,
disabled: _ctx.disabled,
visible: _ctx.visible,
transition: _ctx.transition,
"popper-options": _ctx.popperOptions,
tabindex: _ctx.tabindex,
content: _ctx.content,
offset: _ctx.offset,
"show-after": _ctx.showAfter,
"hide-after": _ctx.hideAfter,
"auto-close": _ctx.autoClose,
"show-arrow": _ctx.showArrow,
"aria-label": _ctx.title,
effect: _ctx.effect,
enterable: _ctx.enterable,
"popper-class": vue.unref(kls),
"popper-style": vue.unref(style),
teleported: _ctx.teleported,
persistent: _ctx.persistent,
"gpu-acceleration": vue.unref(gpuAcceleration),
"onUpdate:visible": vue.unref(onUpdateVisible),
onBeforeShow: beforeEnter,
onBeforeHide: beforeLeave,
onShow: afterEnter,
onHide: afterLeave
}), {
content: vue.withCtx(() => [
_ctx.title ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("title")),
role: "title"
}, vue.toDisplayString(_ctx.title), 3)) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.content), 1)
])
]),
default: vue.withCtx(() => [
_ctx.$slots.reference ? vue.renderSlot(_ctx.$slots, "reference", { key: 0 }) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 16, ["trigger", "placement", "disabled", "visible", "transition", "popper-options", "tabindex", "content", "offset", "show-after", "hide-after", "auto-close", "show-arrow", "aria-label", "effect", "enterable", "popper-class", "popper-style", "teleported", "persistent", "gpu-acceleration", "onUpdate:visible"]);
};
}
});
var Popover = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__file", "popover.vue"]]);
const attachEvents = (el, binding) => {
const popperComponent = binding.arg || binding.value;
const popover = popperComponent == null ? void 0 : popperComponent.popperRef;
if (popover) {
popover.triggerRef = el;
}
};
var PopoverDirective = {
mounted(el, binding) {
attachEvents(el, binding);
},
updated(el, binding) {
attachEvents(el, binding);
}
};
const VPopover = "popover";
const ElPopoverDirective = withInstallDirective(PopoverDirective, VPopover);
const ElPopover = withInstall(Popover, {
directive: ElPopoverDirective
});
const progressProps = buildProps({
type: {
type: String,
default: "line",
values: ["line", "circle", "dashboard"]
},
percentage: {
type: Number,
default: 0,
validator: (val) => val >= 0 && val <= 100
},
status: {
type: String,
default: "",
values: ["", "success", "exception", "warning"]
},
indeterminate: {
type: Boolean,
default: false
},
duration: {
type: Number,
default: 3
},
strokeWidth: {
type: Number,
default: 6
},
strokeLinecap: {
type: definePropType(String),
default: "round"
},
textInside: {
type: Boolean,
default: false
},
width: {
type: Number,
default: 126
},
showText: {
type: Boolean,
default: true
},
color: {
type: definePropType([
String,
Array,
Function
]),
default: ""
},
format: {
type: definePropType(Function),
default: (percentage) => `${percentage}%`
}
});
const _hoisted_1$j = ["aria-valuenow"];
const _hoisted_2$d = { viewBox: "0 0 100 100" };
const _hoisted_3$6 = ["d", "stroke", "stroke-width"];
const _hoisted_4$4 = ["d", "stroke", "opacity", "stroke-linecap", "stroke-width"];
const _hoisted_5$3 = { key: 0 };
const __default__$u = vue.defineComponent({
name: "ElProgress"
});
const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
...__default__$u,
props: progressProps,
setup(__props) {
const props = __props;
const STATUS_COLOR_MAP = {
success: "#13ce66",
exception: "#ff4949",
warning: "#e6a23c",
default: "#20a0ff"
};
const ns = useNamespace("progress");
const barStyle = vue.computed(() => ({
width: `${props.percentage}%`,
animationDuration: `${props.duration}s`,
backgroundColor: getCurrentColor(props.percentage)
}));
const relativeStrokeWidth = vue.computed(() => (props.strokeWidth / props.width * 100).toFixed(1));
const radius = vue.computed(() => {
if (["circle", "dashboard"].includes(props.type)) {
return Number.parseInt(`${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`, 10);
}
return 0;
});
const trackPath = vue.computed(() => {
const r = radius.value;
const isDashboard = props.type === "dashboard";
return `
M 50 50
m 0 ${isDashboard ? "" : "-"}${r}
a ${r} ${r} 0 1 1 0 ${isDashboard ? "-" : ""}${r * 2}
a ${r} ${r} 0 1 1 0 ${isDashboard ? "" : "-"}${r * 2}
`;
});
const perimeter = vue.computed(() => 2 * Math.PI * radius.value);
const rate = vue.computed(() => props.type === "dashboard" ? 0.75 : 1);
const strokeDashoffset = vue.computed(() => {
const offset = -1 * perimeter.value * (1 - rate.value) / 2;
return `${offset}px`;
});
const trailPathStyle = vue.computed(() => ({
strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,
strokeDashoffset: strokeDashoffset.value
}));
const circlePathStyle = vue.computed(() => ({
strokeDasharray: `${perimeter.value * rate.value * (props.percentage / 100)}px, ${perimeter.value}px`,
strokeDashoffset: strokeDashoffset.value,
transition: "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease, opacity ease 0.6s"
}));
const stroke = vue.computed(() => {
let ret;
if (props.color) {
ret = getCurrentColor(props.percentage);
} else {
ret = STATUS_COLOR_MAP[props.status] || STATUS_COLOR_MAP.default;
}
return ret;
});
const statusIcon = vue.computed(() => {
if (props.status === "warning") {
return warning_filled_default;
}
if (props.type === "line") {
return props.status === "success" ? circle_check_default : circle_close_default;
} else {
return props.status === "success" ? check_default : close_default;
}
});
const progressTextSize = vue.computed(() => {
return props.type === "line" ? 12 + props.strokeWidth * 0.4 : props.width * 0.111111 + 2;
});
const content = vue.computed(() => props.format(props.percentage));
function getColors(color) {
const span = 100 / color.length;
const seriesColors = color.map((seriesColor, index) => {
if (isString(seriesColor)) {
return {
color: seriesColor,
percentage: (index + 1) * span
};
}
return seriesColor;
});
return seriesColors.sort((a, b) => a.percentage - b.percentage);
}
const getCurrentColor = (percentage) => {
var _a;
const { color } = props;
if (isFunction(color)) {
return color(percentage);
} else if (isString(color)) {
return color;
} else {
const colors = getColors(color);
for (const color2 of colors) {
if (color2.percentage > percentage)
return color2.color;
}
return (_a = colors[colors.length - 1]) == null ? void 0 : _a.color;
}
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
vue.unref(ns).b(),
vue.unref(ns).m(_ctx.type),
vue.unref(ns).is(_ctx.status),
{
[vue.unref(ns).m("without-text")]: !_ctx.showText,
[vue.unref(ns).m("text-inside")]: _ctx.textInside
}
]),
role: "progressbar",
"aria-valuenow": _ctx.percentage,
"aria-valuemin": "0",
"aria-valuemax": "100"
}, [
_ctx.type === "line" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).b("bar"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).be("bar", "outer")),
style: vue.normalizeStyle({ height: `${_ctx.strokeWidth}px` })
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass([
vue.unref(ns).be("bar", "inner"),
{ [vue.unref(ns).bem("bar", "inner", "indeterminate")]: _ctx.indeterminate }
]),
style: vue.normalizeStyle(vue.unref(barStyle))
}, [
(_ctx.showText || _ctx.$slots.default) && _ctx.textInside ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).be("bar", "innerText"))
}, [
vue.renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(content)), 1)
])
], 2)) : vue.createCommentVNode("v-if", true)
], 6)
], 6)
], 2)) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(vue.unref(ns).b("circle")),
style: vue.normalizeStyle({ height: `${_ctx.width}px`, width: `${_ctx.width}px` })
}, [
(vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$d, [
vue.createElementVNode("path", {
class: vue.normalizeClass(vue.unref(ns).be("circle", "track")),
d: vue.unref(trackPath),
stroke: `var(${vue.unref(ns).cssVarName("fill-color-light")}, #e5e9f2)`,
"stroke-width": vue.unref(relativeStrokeWidth),
fill: "none",
style: vue.normalizeStyle(vue.unref(trailPathStyle))
}, null, 14, _hoisted_3$6),
vue.createElementVNode("path", {
class: vue.normalizeClass(vue.unref(ns).be("circle", "path")),
d: vue.unref(trackPath),
stroke: vue.unref(stroke),
fill: "none",
opacity: _ctx.percentage ? 1 : 0,
"stroke-linecap": _ctx.strokeLinecap,
"stroke-width": vue.unref(relativeStrokeWidth),
style: vue.normalizeStyle(vue.unref(circlePathStyle))
}, null, 14, _hoisted_4$4)
]))
], 6)),
(_ctx.showText || _ctx.$slots.default) && !_ctx.textInside ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
class: vue.normalizeClass(vue.unref(ns).e("text")),
style: vue.normalizeStyle({ fontSize: `${vue.unref(progressTextSize)}px` })
}, [
vue.renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
!_ctx.status ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$3, vue.toDisplayString(vue.unref(content)), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 1 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(statusIcon))))
]),
_: 1
}))
])
], 6)) : vue.createCommentVNode("v-if", true)
], 10, _hoisted_1$j);
};
}
});
var Progress = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__file", "progress.vue"]]);
const ElProgress = withInstall(Progress);
const rateProps = buildProps({
modelValue: {
type: Number,
default: 0
},
id: {
type: String,
default: void 0
},
lowThreshold: {
type: Number,
default: 2
},
highThreshold: {
type: Number,
default: 4
},
max: {
type: Number,
default: 5
},
colors: {
type: definePropType([Array, Object]),
default: () => mutable(["", "", ""])
},
voidColor: {
type: String,
default: ""
},
disabledVoidColor: {
type: String,
default: ""
},
icons: {
type: definePropType([Array, Object]),
default: () => [star_filled_default, star_filled_default, star_filled_default]
},
voidIcon: {
type: iconPropType,
default: () => star_default
},
disabledVoidIcon: {
type: iconPropType,
default: () => star_filled_default
},
disabled: {
type: Boolean
},
allowHalf: {
type: Boolean
},
showText: {
type: Boolean
},
showScore: {
type: Boolean
},
textColor: {
type: String,
default: ""
},
texts: {
type: definePropType(Array),
default: () => mutable([
"Extremely bad",
"Disappointed",
"Fair",
"Satisfied",
"Surprise"
])
},
scoreTemplate: {
type: String,
default: "{value}"
},
size: {
type: String,
validator: isValidComponentSize
},
label: {
type: String,
default: void 0
},
clearable: {
type: Boolean,
default: false
}
});
const rateEmits = {
[CHANGE_EVENT]: (value) => isNumber(value),
[UPDATE_MODEL_EVENT]: (value) => isNumber(value)
};
const _hoisted_1$i = ["id", "aria-label", "aria-labelledby", "aria-valuenow", "aria-valuetext", "aria-valuemax"];
const _hoisted_2$c = ["onMousemove", "onClick"];
const __default__$t = vue.defineComponent({
name: "ElRate"
});
const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
...__default__$t,
props: rateProps,
emits: rateEmits,
setup(__props, { expose, emit }) {
const props = __props;
function getValueFromMap(value, map) {
const isExcludedObject = (val) => isObject$1(val);
const matchedKeys = Object.keys(map).map((key) => +key).filter((key) => {
const val = map[key];
const excluded = isExcludedObject(val) ? val.excluded : false;
return excluded ? value < key : value <= key;
}).sort((a, b) => a - b);
const matchedValue = map[matchedKeys[0]];
return isExcludedObject(matchedValue) && matchedValue.value || matchedValue;
}
const formContext = vue.inject(formContextKey, void 0);
const formItemContext = vue.inject(formItemContextKey, void 0);
const rateSize = useSize();
const ns = useNamespace("rate");
const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
formItemContext
});
const currentValue = vue.ref(props.modelValue);
const hoverIndex = vue.ref(-1);
const pointerAtLeftHalf = vue.ref(true);
const rateClasses = vue.computed(() => [ns.b(), ns.m(rateSize.value)]);
const rateDisabled = vue.computed(() => props.disabled || (formContext == null ? void 0 : formContext.disabled));
const rateStyles = vue.computed(() => {
return ns.cssVarBlock({
"void-color": props.voidColor,
"disabled-void-color": props.disabledVoidColor,
"fill-color": activeColor.value
});
});
const text = vue.computed(() => {
let result = "";
if (props.showScore) {
result = props.scoreTemplate.replace(/\{\s*value\s*\}/, rateDisabled.value ? `${props.modelValue}` : `${currentValue.value}`);
} else if (props.showText) {
result = props.texts[Math.ceil(currentValue.value) - 1];
}
return result;
});
const valueDecimal = vue.computed(() => props.modelValue * 100 - Math.floor(props.modelValue) * 100);
const colorMap = vue.computed(() => isArray(props.colors) ? {
[props.lowThreshold]: props.colors[0],
[props.highThreshold]: { value: props.colors[1], excluded: true },
[props.max]: props.colors[2]
} : props.colors);
const activeColor = vue.computed(() => {
const color = getValueFromMap(currentValue.value, colorMap.value);
return isObject$1(color) ? "" : color;
});
const decimalStyle = vue.computed(() => {
let width = "";
if (rateDisabled.value) {
width = `${valueDecimal.value}%`;
} else if (props.allowHalf) {
width = "50%";
}
return {
color: activeColor.value,
width
};
});
const componentMap = vue.computed(() => {
let icons = isArray(props.icons) ? [...props.icons] : { ...props.icons };
icons = vue.markRaw(icons);
return isArray(icons) ? {
[props.lowThreshold]: icons[0],
[props.highThreshold]: {
value: icons[1],
excluded: true
},
[props.max]: icons[2]
} : icons;
});
const decimalIconComponent = vue.computed(() => getValueFromMap(props.modelValue, componentMap.value));
const voidComponent = vue.computed(() => rateDisabled.value ? isString(props.disabledVoidIcon) ? props.disabledVoidIcon : vue.markRaw(props.disabledVoidIcon) : isString(props.voidIcon) ? props.voidIcon : vue.markRaw(props.voidIcon));
const activeComponent = vue.computed(() => getValueFromMap(currentValue.value, componentMap.value));
function showDecimalIcon(item) {
const showWhenDisabled = rateDisabled.value && valueDecimal.value > 0 && item - 1 < props.modelValue && item > props.modelValue;
const showWhenAllowHalf = props.allowHalf && pointerAtLeftHalf.value && item - 0.5 <= currentValue.value && item > currentValue.value;
return showWhenDisabled || showWhenAllowHalf;
}
function emitValue(value) {
if (props.clearable && value === props.modelValue) {
value = 0;
}
emit(UPDATE_MODEL_EVENT, value);
if (props.modelValue !== value) {
emit("change", value);
}
}
function selectValue(value) {
if (rateDisabled.value) {
return;
}
if (props.allowHalf && pointerAtLeftHalf.value) {
emitValue(currentValue.value);
} else {
emitValue(value);
}
}
function handleKey(e) {
if (rateDisabled.value) {
return;
}
let _currentValue = currentValue.value;
const code = e.code;
if (code === EVENT_CODE.up || code === EVENT_CODE.right) {
if (props.allowHalf) {
_currentValue += 0.5;
} else {
_currentValue += 1;
}
e.stopPropagation();
e.preventDefault();
} else if (code === EVENT_CODE.left || code === EVENT_CODE.down) {
if (props.allowHalf) {
_currentValue -= 0.5;
} else {
_currentValue -= 1;
}
e.stopPropagation();
e.preventDefault();
}
_currentValue = _currentValue < 0 ? 0 : _currentValue;
_currentValue = _currentValue > props.max ? props.max : _currentValue;
emit(UPDATE_MODEL_EVENT, _currentValue);
emit("change", _currentValue);
return _currentValue;
}
function setCurrentValue(value, event) {
if (rateDisabled.value) {
return;
}
if (props.allowHalf) {
let target = event.target;
if (hasClass(target, ns.e("item"))) {
target = target.querySelector(`.${ns.e("icon")}`);
}
if (target.clientWidth === 0 || hasClass(target, ns.e("decimal"))) {
target = target.parentNode;
}
pointerAtLeftHalf.value = event.offsetX * 2 <= target.clientWidth;
currentValue.value = pointerAtLeftHalf.value ? value - 0.5 : value;
} else {
currentValue.value = value;
}
hoverIndex.value = value;
}
function resetCurrentValue() {
if (rateDisabled.value) {
return;
}
if (props.allowHalf) {
pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue);
}
currentValue.value = props.modelValue;
hoverIndex.value = -1;
}
vue.watch(() => props.modelValue, (val) => {
currentValue.value = val;
pointerAtLeftHalf.value = props.modelValue !== Math.floor(props.modelValue);
});
if (!props.modelValue) {
emit(UPDATE_MODEL_EVENT, 0);
}
expose({
setCurrentValue,
resetCurrentValue
});
return (_ctx, _cache) => {
var _a;
return vue.openBlock(), vue.createElementBlock("div", {
id: vue.unref(inputId),
class: vue.normalizeClass([vue.unref(rateClasses), vue.unref(ns).is("disabled", vue.unref(rateDisabled))]),
role: "slider",
"aria-label": !vue.unref(isLabeledByFormItem) ? _ctx.label || "rating" : void 0,
"aria-labelledby": vue.unref(isLabeledByFormItem) ? (_a = vue.unref(formItemContext)) == null ? void 0 : _a.labelId : void 0,
"aria-valuenow": currentValue.value,
"aria-valuetext": vue.unref(text) || void 0,
"aria-valuemin": "0",
"aria-valuemax": _ctx.max,
tabindex: "0",
style: vue.normalizeStyle(vue.unref(rateStyles)),
onKeydown: handleKey
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.max, (item, key) => {
return vue.openBlock(), vue.createElementBlock("span", {
key,
class: vue.normalizeClass(vue.unref(ns).e("item")),
onMousemove: ($event) => setCurrentValue(item, $event),
onMouseleave: resetCurrentValue,
onClick: ($event) => selectValue(item)
}, [
vue.createVNode(vue.unref(ElIcon), {
class: vue.normalizeClass([
vue.unref(ns).e("icon"),
{ hover: hoverIndex.value === item },
vue.unref(ns).is("active", item <= currentValue.value)
])
}, {
default: vue.withCtx(() => [
!showDecimalIcon(item) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(activeComponent)), null, null, 512)), [
[vue.vShow, item <= currentValue.value]
]),
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(voidComponent)), null, null, 512)), [
[vue.vShow, !(item <= currentValue.value)]
])
], 64)) : vue.createCommentVNode("v-if", true),
showDecimalIcon(item) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 1,
style: vue.normalizeStyle(vue.unref(decimalStyle)),
class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(ns).e("decimal")])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(decimalIconComponent))))
]),
_: 1
}, 8, ["style", "class"])) : vue.createCommentVNode("v-if", true)
]),
_: 2
}, 1032, ["class"])
], 42, _hoisted_2$c);
}), 128)),
_ctx.showText || _ctx.showScore ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("text"))
}, vue.toDisplayString(vue.unref(text)), 3)) : vue.createCommentVNode("v-if", true)
], 46, _hoisted_1$i);
};
}
});
var Rate = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__file", "rate.vue"]]);
const ElRate = withInstall(Rate);
const IconMap = {
success: "icon-success",
warning: "icon-warning",
error: "icon-error",
info: "icon-info"
};
const IconComponentMap = {
[IconMap.success]: circle_check_filled_default,
[IconMap.warning]: warning_filled_default,
[IconMap.error]: circle_close_filled_default,
[IconMap.info]: info_filled_default
};
const resultProps = buildProps({
title: {
type: String,
default: ""
},
subTitle: {
type: String,
default: ""
},
icon: {
type: String,
values: ["success", "warning", "info", "error"],
default: "info"
}
});
const __default__$s = vue.defineComponent({
name: "ElResult"
});
const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
...__default__$s,
props: resultProps,
setup(__props) {
const props = __props;
const ns = useNamespace("result");
const resultIcon = vue.computed(() => {
const icon = props.icon;
const iconClass = icon && IconMap[icon] ? IconMap[icon] : "icon-info";
const iconComponent = IconComponentMap[iconClass] || IconComponentMap["icon-info"];
return {
class: iconClass,
component: iconComponent
};
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(ns).b())
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("icon"))
}, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
vue.unref(resultIcon).component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(resultIcon).component), {
key: 0,
class: vue.normalizeClass(vue.unref(resultIcon).class)
}, null, 8, ["class"])) : vue.createCommentVNode("v-if", true)
])
], 2),
_ctx.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("title"))
}, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createElementVNode("p", null, vue.toDisplayString(_ctx.title), 1)
])
], 2)) : vue.createCommentVNode("v-if", true),
_ctx.subTitle || _ctx.$slots["sub-title"] ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(vue.unref(ns).e("subtitle"))
}, [
vue.renderSlot(_ctx.$slots, "sub-title", {}, () => [
vue.createElementVNode("p", null, vue.toDisplayString(_ctx.subTitle), 1)
])
], 2)) : vue.createCommentVNode("v-if", true),
_ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
class: vue.normalizeClass(vue.unref(ns).e("extra"))
}, [
vue.renderSlot(_ctx.$slots, "extra")
], 2)) : vue.createCommentVNode("v-if", true)
], 2);
};
}
});
var Result = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__file", "result.vue"]]);
const ElResult = withInstall(Result);
const RowJustify = [
"start",
"center",
"end",
"space-around",
"space-between",
"space-evenly"
];
const RowAlign = ["top", "middle", "bottom"];
const rowProps = buildProps({
tag: {
type: String,
default: "div"
},
gutter: {
type: Number,
default: 0
},
justify: {
type: String,
values: RowJustify,
default: "start"
},
align: {
type: String,
values: RowAlign,
default: "top"
}
});
const __default__$r = vue.defineComponent({
name: "ElRow"
});
const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
...__default__$r,
props: rowProps,
setup(__props) {
const props = __props;
const ns = useNamespace("row");
const gutter = vue.computed(() => props.gutter);
vue.provide(rowContextKey, {
gutter
});
const style = vue.computed(() => {
const styles = {};
if (!props.gutter) {
return styles;
}
styles.marginRight = styles.marginLeft = `-${props.gutter / 2}px`;
return styles;
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
class: vue.normalizeClass([
vue.unref(ns).b(),
vue.unref(ns).is(`justify-${props.justify}`, _ctx.justify !== "start"),
vue.unref(ns).is(`align-${props.align}`, _ctx.align !== "top")
]),
style: vue.normalizeStyle(vue.unref(style))
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class", "style"]);
};
}
});
var Row$1 = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__file", "row.vue"]]);
const ElRow = withInstall(Row$1);
var safeIsNaN = Number.isNaN || function ponyfill(value) {
return typeof value === "number" && value !== value;
};
function isEqual(first, second) {
if (first === second) {
return true;
}
if (safeIsNaN(first) && safeIsNaN(second)) {
return true;
}
return false;
}
function areInputsEqual(newInputs, lastInputs) {
if (newInputs.length !== lastInputs.length) {
return false;
}
for (var i = 0; i < newInputs.length; i++) {
if (!isEqual(newInputs[i], lastInputs[i])) {
return false;
}
}
return true;
}
function memoizeOne(resultFn, isEqual2) {
if (isEqual2 === void 0) {
isEqual2 = areInputsEqual;
}
var cache = null;
function memoized() {
var newArgs = [];
for (var _i = 0; _i < arguments.length; _i++) {
newArgs[_i] = arguments[_i];
}
if (cache && cache.lastThis === this && isEqual2(newArgs, cache.lastArgs)) {
return cache.lastResult;
}
var lastResult = resultFn.apply(this, newArgs);
cache = {
lastResult,
lastArgs: newArgs,
lastThis: this
};
return lastResult;
}
memoized.clear = function clear() {
cache = null;
};
return memoized;
}
const useCache = () => {
const vm = vue.getCurrentInstance();
const props = vm.proxy.$props;
return vue.computed(() => {
const _getItemStyleCache = (_, __, ___) => ({});
return props.perfMode ? memoize(_getItemStyleCache) : memoizeOne(_getItemStyleCache);
});
};
const DEFAULT_DYNAMIC_LIST_ITEM_SIZE = 50;
const ITEM_RENDER_EVT = "itemRendered";
const SCROLL_EVT = "scroll";
const FORWARD = "forward";
const BACKWARD = "backward";
const AUTO_ALIGNMENT = "auto";
const SMART_ALIGNMENT = "smart";
const START_ALIGNMENT = "start";
const CENTERED_ALIGNMENT = "center";
const END_ALIGNMENT = "end";
const HORIZONTAL = "horizontal";
const VERTICAL = "vertical";
const LTR = "ltr";
const RTL = "rtl";
const RTL_OFFSET_NAG = "negative";
const RTL_OFFSET_POS_ASC = "positive-ascending";
const RTL_OFFSET_POS_DESC = "positive-descending";
const ScrollbarDirKey = {
[HORIZONTAL]: "left",
[VERTICAL]: "top"
};
const SCROLLBAR_MIN_SIZE = 20;
const LayoutKeys = {
[HORIZONTAL]: "deltaX",
[VERTICAL]: "deltaY"
};
const useWheel = ({ atEndEdge, atStartEdge, layout }, onWheelDelta) => {
let frameHandle;
let offset = 0;
const hasReachedEdge = (offset2) => {
const edgeReached = offset2 < 0 && atStartEdge.value || offset2 > 0 && atEndEdge.value;
return edgeReached;
};
const onWheel = (e) => {
cAF(frameHandle);
const newOffset = e[LayoutKeys[layout.value]];
if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset))
return;
offset += newOffset;
if (!isFirefox()) {
e.preventDefault();
}
frameHandle = rAF(() => {
onWheelDelta(offset);
offset = 0;
});
};
return {
hasReachedEdge,
onWheel
};
};
var useWheel$1 = useWheel;
const itemSize$1 = buildProp({
type: definePropType([Number, Function]),
required: true
});
const estimatedItemSize = buildProp({
type: Number
});
const cache = buildProp({
type: Number,
default: 2
});
const direction = buildProp({
type: String,
values: ["ltr", "rtl"],
default: "ltr"
});
const initScrollOffset = buildProp({
type: Number,
default: 0
});
const total = buildProp({
type: Number,
required: true
});
const layout = buildProp({
type: String,
values: ["horizontal", "vertical"],
default: VERTICAL
});
const virtualizedProps = buildProps({
className: {
type: String,
default: ""
},
containerElement: {
type: definePropType([String, Object]),
default: "div"
},
data: {
type: definePropType(Array),
default: () => mutable([])
},
direction,
height: {
type: [String, Number],
required: true
},
innerElement: {
type: [String, Object],
default: "div"
},
style: {
type: definePropType([Object, String, Array])
},
useIsScrolling: {
type: Boolean,
default: false
},
width: {
type: [Number, String],
required: false
},
perfMode: {
type: Boolean,
default: true
},
scrollbarAlwaysOn: {
type: Boolean,
default: false
}
});
const virtualizedListProps = buildProps({
cache,
estimatedItemSize,
layout,
initScrollOffset,
total,
itemSize: itemSize$1,
...virtualizedProps
});
const scrollbarSize = {
type: Number,
default: 6
};
const startGap = { type: Number, default: 0 };
const endGap = { type: Number, default: 2 };
const virtualizedGridProps = buildProps({
columnCache: cache,
columnWidth: itemSize$1,
estimatedColumnWidth: estimatedItemSize,
estimatedRowHeight: estimatedItemSize,
initScrollLeft: initScrollOffset,
initScrollTop: initScrollOffset,
itemKey: {
type: definePropType(Function),
default: ({
columnIndex,
rowIndex
}) => `${rowIndex}:${columnIndex}`
},
rowCache: cache,
rowHeight: itemSize$1,
totalColumn: total,
totalRow: total,
hScrollbarSize: scrollbarSize,
vScrollbarSize: scrollbarSize,
scrollbarStartGap: startGap,
scrollbarEndGap: endGap,
...virtualizedProps
});
const virtualizedScrollbarProps = buildProps({
alwaysOn: Boolean,
class: String,
layout,
total,
ratio: {
type: Number,
required: true
},
clientSize: {
type: Number,
required: true
},
scrollFrom: {
type: Number,
required: true
},
scrollbarSize,
startGap,
endGap,
visible: Boolean
});
const getScrollDir = (prev, cur) => prev < cur ? FORWARD : BACKWARD;
const isHorizontal = (dir) => dir === LTR || dir === RTL || dir === HORIZONTAL;
const isRTL = (dir) => dir === RTL;
let cachedRTLResult = null;
function getRTLOffsetType(recalculate = false) {
if (cachedRTLResult === null || recalculate) {
const outerDiv = document.createElement("div");
const outerStyle = outerDiv.style;
outerStyle.width = "50px";
outerStyle.height = "50px";
outerStyle.overflow = "scroll";
outerStyle.direction = "rtl";
const innerDiv = document.createElement("div");
const innerStyle = innerDiv.style;
innerStyle.width = "100px";
innerStyle.height = "100px";
outerDiv.appendChild(innerDiv);
document.body.appendChild(outerDiv);
if (outerDiv.scrollLeft > 0) {
cachedRTLResult = RTL_OFFSET_POS_DESC;
} else {
outerDiv.scrollLeft = 1;
if (outerDiv.scrollLeft === 0) {
cachedRTLResult = RTL_OFFSET_NAG;
} else {
cachedRTLResult = RTL_OFFSET_POS_ASC;
}
}
document.body.removeChild(outerDiv);
return cachedRTLResult;
}
return cachedRTLResult;
}
function renderThumbStyle({ move, size, bar }, layout) {
const style = {};
const translate = `translate${bar.axis}(${move}px)`;
style[bar.size] = size;
style.transform = translate;
style.msTransform = translate;
style.webkitTransform = translate;
if (layout === "horizontal") {
style.height = "100%";
} else {
style.width = "100%";
}
return style;
}
const ScrollBar = vue.defineComponent({
name: "ElVirtualScrollBar",
props: virtualizedScrollbarProps,
emits: ["scroll", "start-move", "stop-move"],
setup(props, { emit }) {
const GAP = vue.computed(() => props.startGap + props.endGap);
const nsVirtualScrollbar = useNamespace("virtual-scrollbar");
const nsScrollbar = useNamespace("scrollbar");
const trackRef = vue.ref();
const thumbRef = vue.ref();
let frameHandle = null;
let onselectstartStore = null;
const state = vue.reactive({
isDragging: false,
traveled: 0
});
const bar = vue.computed(() => BAR_MAP[props.layout]);
const trackSize = vue.computed(() => props.clientSize - vue.unref(GAP));
const trackStyle = vue.computed(() => ({
position: "absolute",
width: `${HORIZONTAL === props.layout ? trackSize.value : props.scrollbarSize}px`,
height: `${HORIZONTAL === props.layout ? props.scrollbarSize : trackSize.value}px`,
[ScrollbarDirKey[props.layout]]: "2px",
right: "2px",
bottom: "2px",
borderRadius: "4px"
}));
const thumbSize = vue.computed(() => {
const ratio = props.ratio;
const clientSize = props.clientSize;
if (ratio >= 100) {
return Number.POSITIVE_INFINITY;
}
if (ratio >= 50) {
return ratio * clientSize / 100;
}
const SCROLLBAR_MAX_SIZE = clientSize / 3;
return Math.floor(Math.min(Math.max(ratio * clientSize, SCROLLBAR_MIN_SIZE), SCROLLBAR_MAX_SIZE));
});
const thumbStyle = vue.computed(() => {
if (!Number.isFinite(thumbSize.value)) {
return {
display: "none"
};
}
const thumb = `${thumbSize.value}px`;
const style = renderThumbStyle({
bar: bar.value,
size: thumb,
move: state.traveled
}, props.layout);
return style;
});
const totalSteps = vue.computed(() => Math.floor(props.clientSize - thumbSize.value - vue.unref(GAP)));
const attachEvents = () => {
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
const thumbEl = vue.unref(thumbRef);
if (!thumbEl)
return;
onselectstartStore = document.onselectstart;
document.onselectstart = () => false;
thumbEl.addEventListener("touchmove", onMouseMove);
thumbEl.addEventListener("touchend", onMouseUp);
};
const detachEvents = () => {
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
document.onselectstart = onselectstartStore;
onselectstartStore = null;
const thumbEl = vue.unref(thumbRef);
if (!thumbEl)
return;
thumbEl.removeEventListener("touchmove", onMouseMove);
thumbEl.removeEventListener("touchend", onMouseUp);
};
const onThumbMouseDown = (e) => {
e.stopImmediatePropagation();
if (e.ctrlKey || [1, 2].includes(e.button)) {
return;
}
state.isDragging = true;
state[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
emit("start-move");
attachEvents();
};
const onMouseUp = () => {
state.isDragging = false;
state[bar.value.axis] = 0;
emit("stop-move");
detachEvents();
};
const onMouseMove = (e) => {
const { isDragging } = state;
if (!isDragging)
return;
if (!thumbRef.value || !trackRef.value)
return;
const prevPage = state[bar.value.axis];
if (!prevPage)
return;
cAF(frameHandle);
const offset = (trackRef.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
const thumbClickPosition = thumbRef.value[bar.value.offset] - prevPage;
const distance = offset - thumbClickPosition;
frameHandle = rAF(() => {
state.traveled = Math.max(props.startGap, Math.min(distance, totalSteps.value));
emit("scroll", distance, totalSteps.value);
});
};
const clickTrackHandler = (e) => {
const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
const thumbHalf = thumbRef.value[bar.value.offset] / 2;
const distance = offset - thumbHalf;
state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
emit("scroll", distance, totalSteps.value);
};
vue.watch(() => props.scrollFrom, (v) => {
if (state.isDragging)
return;
state.traveled = Math.ceil(v * totalSteps.value);
});
vue.onBeforeUnmount(() => {
detachEvents();
});
return () => {
return vue.h("div", {
role: "presentation",
ref: trackRef,
class: [
nsVirtualScrollbar.b(),
props.class,
(props.alwaysOn || state.isDragging) && "always-on"
],
style: trackStyle.value,
onMousedown: vue.withModifiers(clickTrackHandler, ["stop", "prevent"]),
onTouchstartPrevent: onThumbMouseDown
}, vue.h("div", {
ref: thumbRef,
class: nsScrollbar.e("thumb"),
style: thumbStyle.value,
onMousedown: onThumbMouseDown
}, []));
};
}
});
var Scrollbar = ScrollBar;
const createList = ({
name,
getOffset,
getItemSize,
getItemOffset,
getEstimatedTotalSize,
getStartIndexForOffset,
getStopIndexForStartIndex,
initCache,
clearCache,
validateProps
}) => {
return vue.defineComponent({
name: name != null ? name : "ElVirtualList",
props: virtualizedListProps,
emits: [ITEM_RENDER_EVT, SCROLL_EVT],
setup(props, { emit, expose }) {
validateProps(props);
const instance = vue.getCurrentInstance();
const ns = useNamespace("vl");
const dynamicSizeCache = vue.ref(initCache(props, instance));
const getItemStyleCache = useCache();
const windowRef = vue.ref();
const innerRef = vue.ref();
const scrollbarRef = vue.ref();
const states = vue.ref({
isScrolling: false,
scrollDir: "forward",
scrollOffset: isNumber(props.initScrollOffset) ? props.initScrollOffset : 0,
updateRequested: false,
isScrollbarDragging: false,
scrollbarAlwaysOn: props.scrollbarAlwaysOn
});
const itemsToRender = vue.computed(() => {
const { total, cache } = props;
const { isScrolling, scrollDir, scrollOffset } = vue.unref(states);
if (total === 0) {
return [0, 0, 0, 0];
}
const startIndex = getStartIndexForOffset(props, scrollOffset, vue.unref(dynamicSizeCache));
const stopIndex = getStopIndexForStartIndex(props, startIndex, scrollOffset, vue.unref(dynamicSizeCache));
const cacheBackward = !isScrolling || scrollDir === BACKWARD ? Math.max(1, cache) : 1;
const cacheForward = !isScrolling || scrollDir === FORWARD ? Math.max(1, cache) : 1;
return [
Math.max(0, startIndex - cacheBackward),
Math.max(0, Math.min(total - 1, stopIndex + cacheForward)),
startIndex,
stopIndex
];
});
const estimatedTotalSize = vue.computed(() => getEstimatedTotalSize(props, vue.unref(dynamicSizeCache)));
const _isHorizontal = vue.computed(() => isHorizontal(props.layout));
const windowStyle = vue.computed(() => [
{
position: "relative",
[`overflow-${_isHorizontal.value ? "x" : "y"}`]: "scroll",
WebkitOverflowScrolling: "touch",
willChange: "transform"
},
{
direction: props.direction,
height: isNumber(props.height) ? `${props.height}px` : props.height,
width: isNumber(props.width) ? `${props.width}px` : props.width
},
props.style
]);
const innerStyle = vue.computed(() => {
const size = vue.unref(estimatedTotalSize);
const horizontal = vue.unref(_isHorizontal);
return {
height: horizontal ? "100%" : `${size}px`,
pointerEvents: vue.unref(states).isScrolling ? "none" : void 0,
width: horizontal ? `${size}px` : "100%"
};
});
const clientSize = vue.computed(() => _isHorizontal.value ? props.width : props.height);
const { onWheel } = useWheel$1({
atStartEdge: vue.computed(() => states.value.scrollOffset <= 0),
atEndEdge: vue.computed(() => states.value.scrollOffset >= estimatedTotalSize.value),
layout: vue.computed(() => props.layout)
}, (offset) => {
var _a, _b;
(_b = (_a = scrollbarRef.value).onMouseUp) == null ? void 0 : _b.call(_a);
scrollTo(Math.min(states.value.scrollOffset + offset, estimatedTotalSize.value - clientSize.value));
});
const emitEvents = () => {
const { total } = props;
if (total > 0) {
const [cacheStart, cacheEnd, visibleStart, visibleEnd] = vue.unref(itemsToRender);
emit(ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd);
}
const { scrollDir, scrollOffset, updateRequested } = vue.unref(states);
emit(SCROLL_EVT, scrollDir, scrollOffset, updateRequested);
};
const scrollVertically = (e) => {
const { clientHeight, scrollHeight, scrollTop } = e.currentTarget;
const _states = vue.unref(states);
if (_states.scrollOffset === scrollTop) {
return;
}
const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
states.value = {
..._states,
isScrolling: true,
scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),
scrollOffset,
updateRequested: false
};
vue.nextTick(resetIsScrolling);
};
const scrollHorizontally = (e) => {
const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
const _states = vue.unref(states);
if (_states.scrollOffset === scrollLeft) {
return;
}
const { direction } = props;
let scrollOffset = scrollLeft;
if (direction === RTL) {
switch (getRTLOffsetType()) {
case RTL_OFFSET_NAG: {
scrollOffset = -scrollLeft;
break;
}
case RTL_OFFSET_POS_DESC: {
scrollOffset = scrollWidth - clientWidth - scrollLeft;
break;
}
}
}
scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
states.value = {
..._states,
isScrolling: true,
scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),
scrollOffset,
updateRequested: false
};
vue.nextTick(resetIsScrolling);
};
const onScroll = (e) => {
vue.unref(_isHorizontal) ? scrollHorizontally(e) : scrollVertically(e);
emitEvents();
};
const onScrollbarScroll = (distanceToGo, totalSteps) => {
const offset = (estimatedTotalSize.value - clientSize.value) / totalSteps * distanceToGo;
scrollTo(Math.min(estimatedTotalSize.value - clientSize.value, offset));
};
const scrollTo = (offset) => {
offset = Math.max(offset, 0);
if (offset === vue.unref(states).scrollOffset) {
return;
}
states.value = {
...vue.unref(states),
scrollOffset: offset,
scrollDir: getScrollDir(vue.unref(states).scrollOffset, offset),
updateRequested: true
};
vue.nextTick(resetIsScrolling);
};
const scrollToItem = (idx, alignment = AUTO_ALIGNMENT) => {
const { scrollOffset } = vue.unref(states);
idx = Math.max(0, Math.min(idx, props.total - 1));
scrollTo(getOffset(props, idx, alignment, scrollOffset, vue.unref(dynamicSizeCache)));
};
const getItemStyle = (idx) => {
const { direction, itemSize, layout } = props;
const itemStyleCache = getItemStyleCache.value(clearCache && itemSize, clearCache && layout, clearCache && direction);
let style;
if (hasOwn(itemStyleCache, String(idx))) {
style = itemStyleCache[idx];
} else {
const offset = getItemOffset(props, idx, vue.unref(dynamicSizeCache));
const size = getItemSize(props, idx, vue.unref(dynamicSizeCache));
const horizontal = vue.unref(_isHorizontal);
const isRtl = direction === RTL;
const offsetHorizontal = horizontal ? offset : 0;
itemStyleCache[idx] = style = {
position: "absolute",
left: isRtl ? void 0 : `${offsetHorizontal}px`,
right: isRtl ? `${offsetHorizontal}px` : void 0,
top: !horizontal ? `${offset}px` : 0,
height: !horizontal ? `${size}px` : "100%",
width: horizontal ? `${size}px` : "100%"
};
}
return style;
};
const resetIsScrolling = () => {
states.value.isScrolling = false;
vue.nextTick(() => {
getItemStyleCache.value(-1, null, null);
});
};
const resetScrollTop = () => {
const window = windowRef.value;
if (window) {
window.scrollTop = 0;
}
};
vue.onMounted(() => {
if (!isClient)
return;
const { initScrollOffset } = props;
const windowElement = vue.unref(windowRef);
if (isNumber(initScrollOffset) && windowElement) {
if (vue.unref(_isHorizontal)) {
windowElement.scrollLeft = initScrollOffset;
} else {
windowElement.scrollTop = initScrollOffset;
}
}
emitEvents();
});
vue.onUpdated(() => {
const { direction, layout } = props;
const { scrollOffset, updateRequested } = vue.unref(states);
const windowElement = vue.unref(windowRef);
if (updateRequested && windowElement) {
if (layout === HORIZONTAL) {
if (direction === RTL) {
switch (getRTLOffsetType()) {
case RTL_OFFSET_NAG: {
windowElement.scrollLeft = -scrollOffset;
break;
}
case RTL_OFFSET_POS_ASC: {
windowElement.scrollLeft = scrollOffset;
break;
}
default: {
const { clientWidth, scrollWidth } = windowElement;
windowElement.scrollLeft = scrollWidth - clientWidth - scrollOffset;
break;
}
}
} else {
windowElement.scrollLeft = scrollOffset;
}
} else {
windowElement.scrollTop = scrollOffset;
}
}
});
const api = {
ns,
clientSize,
estimatedTotalSize,
windowStyle,
windowRef,
innerRef,
innerStyle,
itemsToRender,
scrollbarRef,
states,
getItemStyle,
onScroll,
onScrollbarScroll,
onWheel,
scrollTo,
scrollToItem,
resetScrollTop
};
expose({
windowRef,
innerRef,
getItemStyleCache,
scrollTo,
scrollToItem,
resetScrollTop,
states
});
return api;
},
render(ctx) {
var _a;
const {
$slots,
className,
clientSize,
containerElement,
data,
getItemStyle,
innerElement,
itemsToRender,
innerStyle,
layout,
total,
onScroll,
onScrollbarScroll,
onWheel,
states,
useIsScrolling,
windowStyle,
ns
} = ctx;
const [start, end] = itemsToRender;
const Container = vue.resolveDynamicComponent(containerElement);
const Inner = vue.resolveDynamicComponent(innerElement);
const children = [];
if (total > 0) {
for (let i = start; i <= end; i++) {
children.push((_a = $slots.default) == null ? void 0 : _a.call($slots, {
data,
key: i,
index: i,
isScrolling: useIsScrolling ? states.isScrolling : void 0,
style: getItemStyle(i)
}));
}
}
const InnerNode = [
vue.h(Inner, {
style: innerStyle,
ref: "innerRef"
}, !isString(Inner) ? {
default: () => children
} : children)
];
const scrollbar = vue.h(Scrollbar, {
ref: "scrollbarRef",
clientSize,
layout,
onScroll: onScrollbarScroll,
ratio: clientSize * 100 / this.estimatedTotalSize,
scrollFrom: states.scrollOffset / (this.estimatedTotalSize - clientSize),
total
});
const listContainer = vue.h(Container, {
class: [ns.e("window"), className],
style: windowStyle,
onScroll,
onWheel,
ref: "windowRef",
key: 0
}, !isString(Container) ? { default: () => [InnerNode] } : [InnerNode]);
return vue.h("div", {
key: 0,
class: [ns.e("wrapper"), states.scrollbarAlwaysOn ? "always-on" : ""]
}, [listContainer, scrollbar]);
}
});
};
var createList$1 = createList;
const FixedSizeList = createList$1({
name: "ElFixedSizeList",
getItemOffset: ({ itemSize }, index) => index * itemSize,
getItemSize: ({ itemSize }) => itemSize,
getEstimatedTotalSize: ({ total, itemSize }) => itemSize * total,
getOffset: ({ height, total, itemSize, layout, width }, index, alignment, scrollOffset) => {
const size = isHorizontal(layout) ? width : height;
const lastItemOffset = Math.max(0, total * itemSize - size);
const maxOffset = Math.min(lastItemOffset, index * itemSize);
const minOffset = Math.max(0, (index + 1) * itemSize - size);
if (alignment === SMART_ALIGNMENT) {
if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
alignment = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT: {
return maxOffset;
}
case END_ALIGNMENT: {
return minOffset;
}
case CENTERED_ALIGNMENT: {
const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
if (middleOffset < Math.ceil(size / 2)) {
return 0;
} else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
return lastItemOffset;
} else {
return middleOffset;
}
}
case AUTO_ALIGNMENT:
default: {
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
return scrollOffset;
} else if (scrollOffset < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
}
},
getStartIndexForOffset: ({ total, itemSize }, offset) => Math.max(0, Math.min(total - 1, Math.floor(offset / itemSize))),
getStopIndexForStartIndex: ({ height, total, itemSize, layout, width }, startIndex, scrollOffset) => {
const offset = startIndex * itemSize;
const size = isHorizontal(layout) ? width : height;
const numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
return Math.max(0, Math.min(total - 1, startIndex + numVisibleItems - 1));
},
initCache() {
return void 0;
},
clearCache: true,
validateProps() {
}
});
var FixedSizeList$1 = FixedSizeList;
const getItemFromCache$1 = (props, index, listCache) => {
const { itemSize } = props;
const { items, lastVisitedIndex } = listCache;
if (index > lastVisitedIndex) {
let offset = 0;
if (lastVisitedIndex >= 0) {
const item = items[lastVisitedIndex];
offset = item.offset + item.size;
}
for (let i = lastVisitedIndex + 1; i <= index; i++) {
const size = itemSize(i);
items[i] = {
offset,
size
};
offset += size;
}
listCache.lastVisitedIndex = index;
}
return items[index];
};
const findItem$1 = (props, listCache, offset) => {
const { items, lastVisitedIndex } = listCache;
const lastVisitedOffset = lastVisitedIndex > 0 ? items[lastVisitedIndex].offset : 0;
if (lastVisitedOffset >= offset) {
return bs$1(props, listCache, 0, lastVisitedIndex, offset);
}
return es$1(props, listCache, Math.max(0, lastVisitedIndex), offset);
};
const bs$1 = (props, listCache, low, high, offset) => {
while (low <= high) {
const mid = low + Math.floor((high - low) / 2);
const currentOffset = getItemFromCache$1(props, mid, listCache).offset;
if (currentOffset === offset) {
return mid;
} else if (currentOffset < offset) {
low = mid + 1;
} else if (currentOffset > offset) {
high = mid - 1;
}
}
return Math.max(0, low - 1);
};
const es$1 = (props, listCache, index, offset) => {
const { total } = props;
let exponent = 1;
while (index < total && getItemFromCache$1(props, index, listCache).offset < offset) {
index += exponent;
exponent *= 2;
}
return bs$1(props, listCache, Math.floor(index / 2), Math.min(index, total - 1), offset);
};
const getEstimatedTotalSize = ({ total }, { items, estimatedItemSize, lastVisitedIndex }) => {
let totalSizeOfMeasuredItems = 0;
if (lastVisitedIndex >= total) {
lastVisitedIndex = total - 1;
}
if (lastVisitedIndex >= 0) {
const item = items[lastVisitedIndex];
totalSizeOfMeasuredItems = item.offset + item.size;
}
const numUnmeasuredItems = total - lastVisitedIndex - 1;
const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
};
const DynamicSizeList = createList$1({
name: "ElDynamicSizeList",
getItemOffset: (props, index, listCache) => getItemFromCache$1(props, index, listCache).offset,
getItemSize: (_, index, { items }) => items[index].size,
getEstimatedTotalSize,
getOffset: (props, index, alignment, scrollOffset, listCache) => {
const { height, layout, width } = props;
const size = isHorizontal(layout) ? width : height;
const item = getItemFromCache$1(props, index, listCache);
const estimatedTotalSize = getEstimatedTotalSize(props, listCache);
const maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, item.offset));
const minOffset = Math.max(0, item.offset - size + item.size);
if (alignment === SMART_ALIGNMENT) {
if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
alignment = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT: {
return maxOffset;
}
case END_ALIGNMENT: {
return minOffset;
}
case CENTERED_ALIGNMENT: {
return Math.round(minOffset + (maxOffset - minOffset) / 2);
}
case AUTO_ALIGNMENT:
default: {
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
return scrollOffset;
} else if (scrollOffset < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
}
},
getStartIndexForOffset: (props, offset, listCache) => findItem$1(props, listCache, offset),
getStopIndexForStartIndex: (props, startIndex, scrollOffset, listCache) => {
const { height, total, layout, width } = props;
const size = isHorizontal(layout) ? width : height;
const item = getItemFromCache$1(props, startIndex, listCache);
const maxOffset = scrollOffset + size;
let offset = item.offset + item.size;
let stopIndex = startIndex;
while (stopIndex < total - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache$1(props, stopIndex, listCache).size;
}
return stopIndex;
},
initCache({ estimatedItemSize = DEFAULT_DYNAMIC_LIST_ITEM_SIZE }, instance) {
const cache = {
items: {},
estimatedItemSize,
lastVisitedIndex: -1
};
cache.clearCacheAfterIndex = (index, forceUpdate = true) => {
var _a, _b;
cache.lastVisitedIndex = Math.min(cache.lastVisitedIndex, index - 1);
(_a = instance.exposed) == null ? void 0 : _a.getItemStyleCache(-1);
if (forceUpdate) {
(_b = instance.proxy) == null ? void 0 : _b.$forceUpdate();
}
};
return cache;
},
clearCache: false,
validateProps: ({ itemSize }) => {
}
});
var DynamicSizeList$1 = DynamicSizeList;
const useGridWheel = ({ atXEndEdge, atXStartEdge, atYEndEdge, atYStartEdge }, onWheelDelta) => {
let frameHandle = null;
let xOffset = 0;
let yOffset = 0;
const hasReachedEdge = (x, y) => {
const xEdgeReached = x < 0 && atXStartEdge.value || x > 0 && atXEndEdge.value;
const yEdgeReached = y < 0 && atYStartEdge.value || y > 0 && atYEndEdge.value;
return xEdgeReached && yEdgeReached;
};
const onWheel = (e) => {
cAF(frameHandle);
let x = e.deltaX;
let y = e.deltaY;
if (Math.abs(x) > Math.abs(y)) {
y = 0;
} else {
x = 0;
}
if (e.shiftKey && y !== 0) {
x = y;
y = 0;
}
if (hasReachedEdge(xOffset, yOffset) && hasReachedEdge(xOffset + x, yOffset + y))
return;
xOffset += x;
yOffset += y;
if (!isFirefox()) {
e.preventDefault();
}
frameHandle = rAF(() => {
onWheelDelta(xOffset, yOffset);
xOffset = 0;
yOffset = 0;
});
};
return {
hasReachedEdge,
onWheel
};
};
const createGrid = ({
name,
clearCache,
getColumnPosition,
getColumnStartIndexForOffset,
getColumnStopIndexForStartIndex,
getEstimatedTotalHeight,
getEstimatedTotalWidth,
getColumnOffset,
getRowOffset,
getRowPosition,
getRowStartIndexForOffset,
getRowStopIndexForStartIndex,
initCache,
injectToInstance,
validateProps
}) => {
return vue.defineComponent({
name: name != null ? name : "ElVirtualList",
props: virtualizedGridProps,
emits: [ITEM_RENDER_EVT, SCROLL_EVT],
setup(props, { emit, expose, slots }) {
const ns = useNamespace("vl");
validateProps(props);
const instance = vue.getCurrentInstance();
const cache = vue.ref(initCache(props, instance));
injectToInstance == null ? void 0 : injectToInstance(instance, cache);
const windowRef = vue.ref();
const hScrollbar = vue.ref();
const vScrollbar = vue.ref();
const innerRef = vue.ref(null);
const states = vue.ref({
isScrolling: false,
scrollLeft: isNumber(props.initScrollLeft) ? props.initScrollLeft : 0,
scrollTop: isNumber(props.initScrollTop) ? props.initScrollTop : 0,
updateRequested: false,
xAxisScrollDir: FORWARD,
yAxisScrollDir: FORWARD
});
const getItemStyleCache = useCache();
const parsedHeight = vue.computed(() => Number.parseInt(`${props.height}`, 10));
const parsedWidth = vue.computed(() => Number.parseInt(`${props.width}`, 10));
const columnsToRender = vue.computed(() => {
const { totalColumn, totalRow, columnCache } = props;
const { isScrolling, xAxisScrollDir, scrollLeft } = vue.unref(states);
if (totalColumn === 0 || totalRow === 0) {
return [0, 0, 0, 0];
}
const startIndex = getColumnStartIndexForOffset(props, scrollLeft, vue.unref(cache));
const stopIndex = getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, vue.unref(cache));
const cacheBackward = !isScrolling || xAxisScrollDir === BACKWARD ? Math.max(1, columnCache) : 1;
const cacheForward = !isScrolling || xAxisScrollDir === FORWARD ? Math.max(1, columnCache) : 1;
return [
Math.max(0, startIndex - cacheBackward),
Math.max(0, Math.min(totalColumn - 1, stopIndex + cacheForward)),
startIndex,
stopIndex
];
});
const rowsToRender = vue.computed(() => {
const { totalColumn, totalRow, rowCache } = props;
const { isScrolling, yAxisScrollDir, scrollTop } = vue.unref(states);
if (totalColumn === 0 || totalRow === 0) {
return [0, 0, 0, 0];
}
const startIndex = getRowStartIndexForOffset(props, scrollTop, vue.unref(cache));
const stopIndex = getRowStopIndexForStartIndex(props, startIndex, scrollTop, vue.unref(cache));
const cacheBackward = !isScrolling || yAxisScrollDir === BACKWARD ? Math.max(1, rowCache) : 1;
const cacheForward = !isScrolling || yAxisScrollDir === FORWARD ? Math.max(1, rowCache) : 1;
return [
Math.max(0, startIndex - cacheBackward),
Math.max(0, Math.min(totalRow - 1, stopIndex + cacheForward)),
startIndex,
stopIndex
];
});
const estimatedTotalHeight = vue.computed(() => getEstimatedTotalHeight(props, vue.unref(cache)));
const estimatedTotalWidth = vue.computed(() => getEstimatedTotalWidth(props, vue.unref(cache)));
const windowStyle = vue.computed(() => {
var _a;
return [
{
position: "relative",
overflow: "hidden",
WebkitOverflowScrolling: "touch",
willChange: "transform"
},
{
direction: props.direction,
height: isNumber(props.height) ? `${props.height}px` : props.height,
width: isNumber(props.width) ? `${props.width}px` : props.width
},
(_a = props.style) != null ? _a : {}
];
});
const innerStyle = vue.computed(() => {
const width = `${vue.unref(estimatedTotalWidth)}px`;
const height = `${vue.unref(estimatedTotalHeight)}px`;
return {
height,
pointerEvents: vue.unref(states).isScrolling ? "none" : void 0,
width
};
});
const emitEvents = () => {
const { totalColumn, totalRow } = props;
if (totalColumn > 0 && totalRow > 0) {
const [
columnCacheStart,
columnCacheEnd,
columnVisibleStart,
columnVisibleEnd
] = vue.unref(columnsToRender);
const [rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd] = vue.unref(rowsToRender);
emit(ITEM_RENDER_EVT, {
columnCacheStart,
columnCacheEnd,
rowCacheStart,
rowCacheEnd,
columnVisibleStart,
columnVisibleEnd,
rowVisibleStart,
rowVisibleEnd
});
}
const {
scrollLeft,
scrollTop,
updateRequested,
xAxisScrollDir,
yAxisScrollDir
} = vue.unref(states);
emit(SCROLL_EVT, {
xAxisScrollDir,
scrollLeft,
yAxisScrollDir,
scrollTop,
updateRequested
});
};
const onScroll = (e) => {
const {
clientHeight,
clientWidth,
scrollHeight,
scrollLeft,
scrollTop,
scrollWidth
} = e.currentTarget;
const _states = vue.unref(states);
if (_states.scrollTop === scrollTop && _states.scrollLeft === scrollLeft) {
return;
}
let _scrollLeft = scrollLeft;
if (isRTL(props.direction)) {
switch (getRTLOffsetType()) {
case RTL_OFFSET_NAG:
_scrollLeft = -scrollLeft;
break;
case RTL_OFFSET_POS_DESC:
_scrollLeft = scrollWidth - clientWidth - scrollLeft;
break;
}
}
states.value = {
..._states,
isScrolling: true,
scrollLeft: _scrollLeft,
scrollTop: Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight)),
updateRequested: true,
xAxisScrollDir: getScrollDir(_states.scrollLeft, _scrollLeft),
yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop)
};
vue.nextTick(() => resetIsScrolling());
onUpdated();
emitEvents();
};
const onVerticalScroll = (distance, totalSteps) => {
const height = vue.unref(parsedHeight);
const offset = (estimatedTotalHeight.value - height) / totalSteps * distance;
scrollTo({
scrollTop: Math.min(estimatedTotalHeight.value - height, offset)
});
};
const onHorizontalScroll = (distance, totalSteps) => {
const width = vue.unref(parsedWidth);
const offset = (estimatedTotalWidth.value - width) / totalSteps * distance;
scrollTo({
scrollLeft: Math.min(estimatedTotalWidth.value - width, offset)
});
};
const { onWheel } = useGridWheel({
atXStartEdge: vue.computed(() => states.value.scrollLeft <= 0),
atXEndEdge: vue.computed(() => states.value.scrollLeft >= estimatedTotalWidth.value),
atYStartEdge: vue.computed(() => states.value.scrollTop <= 0),
atYEndEdge: vue.computed(() => states.value.scrollTop >= estimatedTotalHeight.value)
}, (x, y) => {
var _a, _b, _c, _d;
(_b = (_a = hScrollbar.value) == null ? void 0 : _a.onMouseUp) == null ? void 0 : _b.call(_a);
(_d = (_c = hScrollbar.value) == null ? void 0 : _c.onMouseUp) == null ? void 0 : _d.call(_c);
const width = vue.unref(parsedWidth);
const height = vue.unref(parsedHeight);
scrollTo({
scrollLeft: Math.min(states.value.scrollLeft + x, estimatedTotalWidth.value - width),
scrollTop: Math.min(states.value.scrollTop + y, estimatedTotalHeight.value - height)
});
});
const scrollTo = ({
scrollLeft = states.value.scrollLeft,
scrollTop = states.value.scrollTop
}) => {
scrollLeft = Math.max(scrollLeft, 0);
scrollTop = Math.max(scrollTop, 0);
const _states = vue.unref(states);
if (scrollTop === _states.scrollTop && scrollLeft === _states.scrollLeft) {
return;
}
states.value = {
..._states,
xAxisScrollDir: getScrollDir(_states.scrollLeft, scrollLeft),
yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop),
scrollLeft,
scrollTop,
updateRequested: true
};
vue.nextTick(() => resetIsScrolling());
onUpdated();
emitEvents();
};
const scrollToItem = (rowIndex = 0, columnIdx = 0, alignment = AUTO_ALIGNMENT) => {
const _states = vue.unref(states);
columnIdx = Math.max(0, Math.min(columnIdx, props.totalColumn - 1));
rowIndex = Math.max(0, Math.min(rowIndex, props.totalRow - 1));
const scrollBarWidth = getScrollBarWidth(ns.namespace.value);
const _cache = vue.unref(cache);
const estimatedHeight = getEstimatedTotalHeight(props, _cache);
const estimatedWidth = getEstimatedTotalWidth(props, _cache);
scrollTo({
scrollLeft: getColumnOffset(props, columnIdx, alignment, _states.scrollLeft, _cache, estimatedWidth > props.width ? scrollBarWidth : 0),
scrollTop: getRowOffset(props, rowIndex, alignment, _states.scrollTop, _cache, estimatedHeight > props.height ? scrollBarWidth : 0)
});
};
const getItemStyle = (rowIndex, columnIndex) => {
const { columnWidth, direction, rowHeight } = props;
const itemStyleCache = getItemStyleCache.value(clearCache && columnWidth, clearCache && rowHeight, clearCache && direction);
const key = `${rowIndex},${columnIndex}`;
if (hasOwn(itemStyleCache, key)) {
return itemStyleCache[key];
} else {
const [, left] = getColumnPosition(props, columnIndex, vue.unref(cache));
const _cache = vue.unref(cache);
const rtl = isRTL(direction);
const [height, top] = getRowPosition(props, rowIndex, _cache);
const [width] = getColumnPosition(props, columnIndex, _cache);
itemStyleCache[key] = {
position: "absolute",
left: rtl ? void 0 : `${left}px`,
right: rtl ? `${left}px` : void 0,
top: `${top}px`,
height: `${height}px`,
width: `${width}px`
};
return itemStyleCache[key];
}
};
const resetIsScrolling = () => {
states.value.isScrolling = false;
vue.nextTick(() => {
getItemStyleCache.value(-1, null, null);
});
};
vue.onMounted(() => {
if (!isClient)
return;
const { initScrollLeft, initScrollTop } = props;
const windowElement = vue.unref(windowRef);
if (windowElement) {
if (isNumber(initScrollLeft)) {
windowElement.scrollLeft = initScrollLeft;
}
if (isNumber(initScrollTop)) {
windowElement.scrollTop = initScrollTop;
}
}
emitEvents();
});
const onUpdated = () => {
const { direction } = props;
const { scrollLeft, scrollTop, updateRequested } = vue.unref(states);
const windowElement = vue.unref(windowRef);
if (updateRequested && windowElement) {
if (direction === RTL) {
switch (getRTLOffsetType()) {
case RTL_OFFSET_NAG: {
windowElement.scrollLeft = -scrollLeft;
break;
}
case RTL_OFFSET_POS_ASC: {
windowElement.scrollLeft = scrollLeft;
break;
}
default: {
const { clientWidth, scrollWidth } = windowElement;
windowElement.scrollLeft = scrollWidth - clientWidth - scrollLeft;
break;
}
}
} else {
windowElement.scrollLeft = Math.max(0, scrollLeft);
}
windowElement.scrollTop = Math.max(0, scrollTop);
}
};
const { resetAfterColumnIndex, resetAfterRowIndex, resetAfter } = instance.proxy;
expose({
windowRef,
innerRef,
getItemStyleCache,
scrollTo,
scrollToItem,
states,
resetAfterColumnIndex,
resetAfterRowIndex,
resetAfter
});
const renderScrollbars = () => {
const {
scrollbarAlwaysOn,
scrollbarStartGap,
scrollbarEndGap,
totalColumn,
totalRow
} = props;
const width = vue.unref(parsedWidth);
const height = vue.unref(parsedHeight);
const estimatedWidth = vue.unref(estimatedTotalWidth);
const estimatedHeight = vue.unref(estimatedTotalHeight);
const { scrollLeft, scrollTop } = vue.unref(states);
const horizontalScrollbar = vue.h(Scrollbar, {
ref: hScrollbar,
alwaysOn: scrollbarAlwaysOn,
startGap: scrollbarStartGap,
endGap: scrollbarEndGap,
class: ns.e("horizontal"),
clientSize: width,
layout: "horizontal",
onScroll: onHorizontalScroll,
ratio: width * 100 / estimatedWidth,
scrollFrom: scrollLeft / (estimatedWidth - width),
total: totalRow,
visible: true
});
const verticalScrollbar = vue.h(Scrollbar, {
ref: vScrollbar,
alwaysOn: scrollbarAlwaysOn,
startGap: scrollbarStartGap,
endGap: scrollbarEndGap,
class: ns.e("vertical"),
clientSize: height,
layout: "vertical",
onScroll: onVerticalScroll,
ratio: height * 100 / estimatedHeight,
scrollFrom: scrollTop / (estimatedHeight - height),
total: totalColumn,
visible: true
});
return {
horizontalScrollbar,
verticalScrollbar
};
};
const renderItems = () => {
var _a;
const [columnStart, columnEnd] = vue.unref(columnsToRender);
const [rowStart, rowEnd] = vue.unref(rowsToRender);
const { data, totalColumn, totalRow, useIsScrolling, itemKey } = props;
const children = [];
if (totalRow > 0 && totalColumn > 0) {
for (let row = rowStart; row <= rowEnd; row++) {
for (let column = columnStart; column <= columnEnd; column++) {
children.push((_a = slots.default) == null ? void 0 : _a.call(slots, {
columnIndex: column,
data,
key: itemKey({ columnIndex: column, data, rowIndex: row }),
isScrolling: useIsScrolling ? vue.unref(states).isScrolling : void 0,
style: getItemStyle(row, column),
rowIndex: row
}));
}
}
}
return children;
};
const renderInner = () => {
const Inner = vue.resolveDynamicComponent(props.innerElement);
const children = renderItems();
return [
vue.h(Inner, {
style: vue.unref(innerStyle),
ref: innerRef
}, !isString(Inner) ? {
default: () => children
} : children)
];
};
const renderWindow = () => {
const Container = vue.resolveDynamicComponent(props.containerElement);
const { horizontalScrollbar, verticalScrollbar } = renderScrollbars();
const Inner = renderInner();
return vue.h("div", {
key: 0,
class: ns.e("wrapper")
}, [
vue.h(Container, {
class: props.className,
style: vue.unref(windowStyle),
onScroll,
onWheel,
ref: windowRef
}, !isString(Container) ? { default: () => Inner } : Inner),
horizontalScrollbar,
verticalScrollbar
]);
};
return renderWindow;
}
});
};
var createGrid$1 = createGrid;
const FixedSizeGrid = createGrid$1({
name: "ElFixedSizeGrid",
getColumnPosition: ({ columnWidth }, index) => [
columnWidth,
index * columnWidth
],
getRowPosition: ({ rowHeight }, index) => [
rowHeight,
index * rowHeight
],
getEstimatedTotalHeight: ({ totalRow, rowHeight }) => rowHeight * totalRow,
getEstimatedTotalWidth: ({ totalColumn, columnWidth }) => columnWidth * totalColumn,
getColumnOffset: ({ totalColumn, columnWidth, width }, columnIndex, alignment, scrollLeft, _, scrollBarWidth) => {
width = Number(width);
const lastColumnOffset = Math.max(0, totalColumn * columnWidth - width);
const maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
const minOffset = Math.max(0, columnIndex * columnWidth - width + scrollBarWidth + columnWidth);
if (alignment === "smart") {
if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
alignment = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT:
return maxOffset;
case END_ALIGNMENT:
return minOffset;
case CENTERED_ALIGNMENT: {
const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
if (middleOffset < Math.ceil(width / 2)) {
return 0;
} else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
return lastColumnOffset;
} else {
return middleOffset;
}
}
case AUTO_ALIGNMENT:
default:
if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
return scrollLeft;
} else if (minOffset > maxOffset) {
return minOffset;
} else if (scrollLeft < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
},
getRowOffset: ({ rowHeight, height, totalRow }, rowIndex, align, scrollTop, _, scrollBarWidth) => {
height = Number(height);
const lastRowOffset = Math.max(0, totalRow * rowHeight - height);
const maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
const minOffset = Math.max(0, rowIndex * rowHeight - height + scrollBarWidth + rowHeight);
if (align === SMART_ALIGNMENT) {
if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
align = AUTO_ALIGNMENT;
} else {
align = CENTERED_ALIGNMENT;
}
}
switch (align) {
case START_ALIGNMENT:
return maxOffset;
case END_ALIGNMENT:
return minOffset;
case CENTERED_ALIGNMENT: {
const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
if (middleOffset < Math.ceil(height / 2)) {
return 0;
} else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
return lastRowOffset;
} else {
return middleOffset;
}
}
case AUTO_ALIGNMENT:
default:
if (scrollTop >= minOffset && scrollTop <= maxOffset) {
return scrollTop;
} else if (minOffset > maxOffset) {
return minOffset;
} else if (scrollTop < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
},
getColumnStartIndexForOffset: ({ columnWidth, totalColumn }, scrollLeft) => Math.max(0, Math.min(totalColumn - 1, Math.floor(scrollLeft / columnWidth))),
getColumnStopIndexForStartIndex: ({ columnWidth, totalColumn, width }, startIndex, scrollLeft) => {
const left = startIndex * columnWidth;
const visibleColumnsCount = Math.ceil((width + scrollLeft - left) / columnWidth);
return Math.max(0, Math.min(totalColumn - 1, startIndex + visibleColumnsCount - 1));
},
getRowStartIndexForOffset: ({ rowHeight, totalRow }, scrollTop) => Math.max(0, Math.min(totalRow - 1, Math.floor(scrollTop / rowHeight))),
getRowStopIndexForStartIndex: ({ rowHeight, totalRow, height }, startIndex, scrollTop) => {
const top = startIndex * rowHeight;
const numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
return Math.max(0, Math.min(totalRow - 1, startIndex + numVisibleRows - 1));
},
initCache: () => void 0,
clearCache: true,
validateProps: ({ columnWidth, rowHeight }) => {
}
});
var FixedSizeGrid$1 = FixedSizeGrid;
const { max, min, floor } = Math;
const ACCESS_SIZER_KEY_MAP = {
column: "columnWidth",
row: "rowHeight"
};
const ACCESS_LAST_VISITED_KEY_MAP = {
column: "lastVisitedColumnIndex",
row: "lastVisitedRowIndex"
};
const getItemFromCache = (props, index, gridCache, type) => {
const [cachedItems, sizer, lastVisited] = [
gridCache[type],
props[ACCESS_SIZER_KEY_MAP[type]],
gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]]
];
if (index > lastVisited) {
let offset = 0;
if (lastVisited >= 0) {
const item = cachedItems[lastVisited];
offset = item.offset + item.size;
}
for (let i = lastVisited + 1; i <= index; i++) {
const size = sizer(i);
cachedItems[i] = {
offset,
size
};
offset += size;
}
gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]] = index;
}
return cachedItems[index];
};
const bs = (props, gridCache, low, high, offset, type) => {
while (low <= high) {
const mid = low + floor((high - low) / 2);
const currentOffset = getItemFromCache(props, mid, gridCache, type).offset;
if (currentOffset === offset) {
return mid;
} else if (currentOffset < offset) {
low = mid + 1;
} else {
high = mid - 1;
}
}
return max(0, low - 1);
};
const es = (props, gridCache, idx, offset, type) => {
const total = type === "column" ? props.totalColumn : props.totalRow;
let exponent = 1;
while (idx < total && getItemFromCache(props, idx, gridCache, type).offset < offset) {
idx += exponent;
exponent *= 2;
}
return bs(props, gridCache, floor(idx / 2), min(idx, total - 1), offset, type);
};
const findItem = (props, gridCache, offset, type) => {
const [cache, lastVisitedIndex] = [
gridCache[type],
gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]]
];
const lastVisitedItemOffset = lastVisitedIndex > 0 ? cache[lastVisitedIndex].offset : 0;
if (lastVisitedItemOffset >= offset) {
return bs(props, gridCache, 0, lastVisitedIndex, offset, type);
}
return es(props, gridCache, max(0, lastVisitedIndex), offset, type);
};
const getEstimatedTotalHeight = ({ totalRow }, { estimatedRowHeight, lastVisitedRowIndex, row }) => {
let sizeOfVisitedRows = 0;
if (lastVisitedRowIndex >= totalRow) {
lastVisitedRowIndex = totalRow - 1;
}
if (lastVisitedRowIndex >= 0) {
const item = row[lastVisitedRowIndex];
sizeOfVisitedRows = item.offset + item.size;
}
const unvisitedItems = totalRow - lastVisitedRowIndex - 1;
const sizeOfUnvisitedItems = unvisitedItems * estimatedRowHeight;
return sizeOfVisitedRows + sizeOfUnvisitedItems;
};
const getEstimatedTotalWidth = ({ totalColumn }, { column, estimatedColumnWidth, lastVisitedColumnIndex }) => {
let sizeOfVisitedColumns = 0;
if (lastVisitedColumnIndex > totalColumn) {
lastVisitedColumnIndex = totalColumn - 1;
}
if (lastVisitedColumnIndex >= 0) {
const item = column[lastVisitedColumnIndex];
sizeOfVisitedColumns = item.offset + item.size;
}
const unvisitedItems = totalColumn - lastVisitedColumnIndex - 1;
const sizeOfUnvisitedItems = unvisitedItems * estimatedColumnWidth;
return sizeOfVisitedColumns + sizeOfUnvisitedItems;
};
const ACCESS_ESTIMATED_SIZE_KEY_MAP = {
column: getEstimatedTotalWidth,
row: getEstimatedTotalHeight
};
const getOffset$1 = (props, index, alignment, scrollOffset, cache, type, scrollBarWidth) => {
const [size, estimatedSizeAssociates] = [
type === "row" ? props.height : props.width,
ACCESS_ESTIMATED_SIZE_KEY_MAP[type]
];
const item = getItemFromCache(props, index, cache, type);
const estimatedSize = estimatedSizeAssociates(props, cache);
const maxOffset = max(0, min(estimatedSize - size, item.offset));
const minOffset = max(0, item.offset - size + scrollBarWidth + item.size);
if (alignment === SMART_ALIGNMENT) {
if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
alignment = AUTO_ALIGNMENT;
} else {
alignment = CENTERED_ALIGNMENT;
}
}
switch (alignment) {
case START_ALIGNMENT: {
return maxOffset;
}
case END_ALIGNMENT: {
return minOffset;
}
case CENTERED_ALIGNMENT: {
return Math.round(minOffset + (maxOffset - minOffset) / 2);
}
case AUTO_ALIGNMENT:
default: {
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
return scrollOffset;
} else if (minOffset > maxOffset) {
return minOffset;
} else if (scrollOffset < minOffset) {
return minOffset;
} else {
return maxOffset;
}
}
}
};
const DynamicSizeGrid = createGrid$1({
name: "ElDynamicSizeGrid",
getColumnPosition: (props, idx, cache) => {
const item = getItemFromCache(props, idx, cache, "column");
return [item.size, item.offset];
},
getRowPosition: (props, idx, cache) => {
const item = getItemFromCache(props, idx, cache, "row");
return [item.size, item.offset];
},
getColumnOffset: (props, columnIndex, alignment, scrollLeft, cache, scrollBarWidth) => getOffset$1(props, columnIndex, alignment, scrollLeft, cache, "column", scrollBarWidth),
getRowOffset: (props, rowIndex, alignment, scrollTop, cache, scrollBarWidth) => getOffset$1(props, rowIndex, alignment, scrollTop, cache, "row", scrollBarWidth),
getColumnStartIndexForOffset: (props, scrollLeft, cache) => findItem(props, cache, scrollLeft, "column"),
getColumnStopIndexForStartIndex: (props, startIndex, scrollLeft, cache) => {
const item = getItemFromCache(props, startIndex, cache, "column");
const maxOffset = scrollLeft + props.width;
let offset = item.offset + item.size;
let stopIndex = startIndex;
while (stopIndex < props.totalColumn - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache(props, startIndex, cache, "column").size;
}
return stopIndex;
},
getEstimatedTotalHeight,
getEstimatedTotalWidth,
getRowStartIndexForOffset: (props, scrollTop, cache) => findItem(props, cache, scrollTop, "row"),
getRowStopIndexForStartIndex: (props, startIndex, scrollTop, cache) => {
const { totalRow, height } = props;
const item = getItemFromCache(props, startIndex, cache, "row");
const maxOffset = scrollTop + height;
let offset = item.size + item.offset;
let stopIndex = startIndex;
while (stopIndex < totalRow - 1 && offset < maxOffset) {
stopIndex++;
offset += getItemFromCache(props, stopIndex, cache, "row").size;
}
return stopIndex;
},
injectToInstance: (instance, cache) => {
const resetAfter = ({ columnIndex, rowIndex }, forceUpdate) => {
var _a, _b;
forceUpdate = isUndefined(forceUpdate) ? true : forceUpdate;
if (isNumber(columnIndex)) {
cache.value.lastVisitedColumnIndex = Math.min(cache.value.lastVisitedColumnIndex, columnIndex - 1);
}
if (isNumber(rowIndex)) {
cache.value.lastVisitedRowIndex = Math.min(cache.value.lastVisitedRowIndex, rowIndex - 1);
}
(_a = instance.exposed) == null ? void 0 : _a.getItemStyleCache.value(-1, null, null);
if (forceUpdate)
(_b = instance.proxy) == null ? void 0 : _b.$forceUpdate();
};
const resetAfterColumnIndex = (columnIndex, forceUpdate) => {
resetAfter({
columnIndex
}, forceUpdate);
};
const resetAfterRowIndex = (rowIndex, forceUpdate) => {
resetAfter({
rowIndex
}, forceUpdate);
};
Object.assign(instance.proxy, {
resetAfterColumnIndex,
resetAfterRowIndex,
resetAfter
});
},
initCache: ({
estimatedColumnWidth = DEFAULT_DYNAMIC_LIST_ITEM_SIZE,
estimatedRowHeight = DEFAULT_DYNAMIC_LIST_ITEM_SIZE
}) => {
const cache = {
column: {},
estimatedColumnWidth,
estimatedRowHeight,
lastVisitedColumnIndex: -1,
lastVisitedRowIndex: -1,
row: {}
};
return cache;
},
clearCache: false,
validateProps: ({ columnWidth, rowHeight }) => {
}
});
var DynamicSizeGrid$1 = DynamicSizeGrid;
const _sfc_main$A = vue.defineComponent({
props: {
item: {
type: Object,
required: true
},
style: Object,
height: Number
},
setup() {
const ns = useNamespace("select");
return {
ns
};
}
});
function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
return _ctx.item.isTitle ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(_ctx.ns.be("group", "title")),
style: vue.normalizeStyle([_ctx.style, { lineHeight: `${_ctx.height}px` }])
}, vue.toDisplayString(_ctx.item.label), 7)) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(_ctx.ns.be("group", "split")),
style: vue.normalizeStyle(_ctx.style)
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.ns.be("group", "split-dash")),
style: vue.normalizeStyle({ top: `${_ctx.height / 2}px` })
}, null, 6)
], 6));
}
var GroupItem = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$7], ["__file", "group-item.vue"]]);
function useOption(props, { emit }) {
return {
hoverItem: () => {
if (!props.disabled) {
emit("hover", props.index);
}
},
selectOptionClick: () => {
if (!props.disabled) {
emit("select", props.item, props.index);
}
}
};
}
const SelectProps = {
allowCreate: Boolean,
autocomplete: {
type: String,
default: "none"
},
automaticDropdown: Boolean,
clearable: Boolean,
clearIcon: {
type: [String, Object],
default: circle_close_default
},
effect: {
type: String,
default: "light"
},
collapseTags: Boolean,
collapseTagsTooltip: {
type: Boolean,
default: false
},
defaultFirstOption: Boolean,
disabled: Boolean,
estimatedOptionHeight: {
type: Number,
default: void 0
},
filterable: Boolean,
filterMethod: Function,
height: {
type: Number,
default: 170
},
itemHeight: {
type: Number,
default: 34
},
id: String,
loading: Boolean,
loadingText: String,
label: String,
modelValue: [Array, String, Number, Boolean, Object],
multiple: Boolean,
multipleLimit: {
type: Number,
default: 0
},
name: String,
noDataText: String,
noMatchText: String,
remoteMethod: Function,
reserveKeyword: {
type: Boolean,
default: true
},
options: {
type: Array,
required: true
},
placeholder: {
type: String
},
teleported: useTooltipContentProps.teleported,
persistent: {
type: Boolean,
default: true
},
popperClass: {
type: String,
default: ""
},
popperOptions: {
type: Object,
default: () => ({})
},
remote: Boolean,
size: {
type: String,
validator: isValidComponentSize
},
valueKey: {
type: String,
default: "value"
},
scrollbarAlwaysOn: {
type: Boolean,
default: false
},
validateEvent: {
type: Boolean,
default: true
},
placement: {
type: definePropType(String),
values: Ee,
default: "bottom-start"
}
};
const OptionProps = {
data: Array,
disabled: Boolean,
hovering: Boolean,
item: Object,
index: Number,
style: Object,
selected: Boolean,
created: Boolean
};
const _sfc_main$z = vue.defineComponent({
props: OptionProps,
emits: ["select", "hover"],
setup(props, { emit }) {
const ns = useNamespace("select");
const { hoverItem, selectOptionClick } = useOption(props, { emit });
return {
ns,
hoverItem,
selectOptionClick
};
}
});
const _hoisted_1$h = ["aria-selected"];
function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("li", {
"aria-selected": _ctx.selected,
style: vue.normalizeStyle(_ctx.style),
class: vue.normalizeClass([
_ctx.ns.be("dropdown", "option-item"),
_ctx.ns.is("selected", _ctx.selected),
_ctx.ns.is("disabled", _ctx.disabled),
_ctx.ns.is("created", _ctx.created),
{ hover: _ctx.hovering }
]),
onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)),
onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
}, [
vue.renderSlot(_ctx.$slots, "default", {
item: _ctx.item,
index: _ctx.index,
disabled: _ctx.disabled
}, () => [
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.item.label), 1)
])
], 46, _hoisted_1$h);
}
var OptionItem = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$6], ["__file", "option-item.vue"]]);
const selectV2InjectionKey = "ElSelectV2Injection";
var ElSelectMenu = vue.defineComponent({
name: "ElSelectDropdown",
props: {
data: {
type: Array,
required: true
},
hoveringIndex: Number,
width: Number
},
setup(props, {
slots,
expose
}) {
const select = vue.inject(selectV2InjectionKey);
const ns = useNamespace("select");
const cachedHeights = vue.ref([]);
const listRef = vue.ref();
const size = vue.computed(() => props.data.length);
vue.watch(() => size.value, () => {
var _a, _b;
(_b = (_a = select.popper.value).updatePopper) == null ? void 0 : _b.call(_a);
});
const isSized = vue.computed(() => isUndefined(select.props.estimatedOptionHeight));
const listProps = vue.computed(() => {
if (isSized.value) {
return {
itemSize: select.props.itemHeight
};
}
return {
estimatedSize: select.props.estimatedOptionHeight,
itemSize: (idx) => cachedHeights.value[idx]
};
});
const contains = (arr = [], target) => {
const {
props: {
valueKey
}
} = select;
if (!isObject$1(target)) {
return arr.includes(target);
}
return arr && arr.some((item) => {
return get(item, valueKey) === get(target, valueKey);
});
};
const isEqual = (selected, target) => {
if (!isObject$1(target)) {
return selected === target;
} else {
const {
valueKey
} = select.props;
return get(selected, valueKey) === get(target, valueKey);
}
};
const isItemSelected = (modelValue, target) => {
const {
valueKey
} = select.props;
if (select.props.multiple) {
return contains(modelValue, get(target, valueKey));
}
return isEqual(modelValue, get(target, valueKey));
};
const isItemDisabled = (modelValue, selected) => {
const {
disabled,
multiple,
multipleLimit
} = select.props;
return disabled || !selected && (multiple ? multipleLimit > 0 && modelValue.length >= multipleLimit : false);
};
const isItemHovering = (target) => props.hoveringIndex === target;
const scrollToItem = (index) => {
const list = listRef.value;
if (list) {
list.scrollToItem(index);
}
};
const resetScrollTop = () => {
const list = listRef.value;
if (list) {
list.resetScrollTop();
}
};
expose({
listRef,
isSized,
isItemDisabled,
isItemHovering,
isItemSelected,
scrollToItem,
resetScrollTop
});
const Item = (itemProps) => {
const {
index,
data,
style
} = itemProps;
const sized = vue.unref(isSized);
const {
itemSize,
estimatedSize
} = vue.unref(listProps);
const {
modelValue
} = select.props;
const {
onSelect,
onHover
} = select;
const item = data[index];
if (item.type === "Group") {
return vue.createVNode(GroupItem, {
"item": item,
"style": style,
"height": sized ? itemSize : estimatedSize
}, null);
}
const isSelected = isItemSelected(modelValue, item);
const isDisabled = isItemDisabled(modelValue, isSelected);
const isHovering = isItemHovering(index);
return vue.createVNode(OptionItem, vue.mergeProps(itemProps, {
"selected": isSelected,
"disabled": item.disabled || isDisabled,
"created": !!item.created,
"hovering": isHovering,
"item": item,
"onSelect": onSelect,
"onHover": onHover
}), {
default: (props2) => {
var _a;
return ((_a = slots.default) == null ? void 0 : _a.call(slots, props2)) || vue.createVNode("span", null, [item.label]);
}
});
};
const {
onKeyboardNavigate,
onKeyboardSelect
} = select;
const onForward = () => {
onKeyboardNavigate("forward");
};
const onBackward = () => {
onKeyboardNavigate("backward");
};
const onEscOrTab = () => {
select.expanded = false;
};
const onKeydown = (e) => {
const {
code
} = e;
const {
tab,
esc,
down,
up,
enter
} = EVENT_CODE;
if (code !== tab) {
e.preventDefault();
e.stopPropagation();
}
switch (code) {
case tab:
case esc: {
onEscOrTab();
break;
}
case down: {
onForward();
break;
}
case up: {
onBackward();
break;
}
case enter: {
onKeyboardSelect();
break;
}
}
};
return () => {
var _a;
const {
data,
width
} = props;
const {
height,
multiple,
scrollbarAlwaysOn
} = select.props;
if (data.length === 0) {
return vue.createVNode("div", {
"class": ns.b("dropdown"),
"style": {
width: `${width}px`
}
}, [(_a = slots.empty) == null ? void 0 : _a.call(slots)]);
}
const List = vue.unref(isSized) ? FixedSizeList$1 : DynamicSizeList$1;
return vue.createVNode("div", {
"class": [ns.b("dropdown"), ns.is("multiple", multiple)]
}, [vue.createVNode(List, vue.mergeProps({
"ref": listRef
}, vue.unref(listProps), {
"className": ns.be("dropdown", "list"),
"scrollbarAlwaysOn": scrollbarAlwaysOn,
"data": data,
"height": height,
"width": width,
"total": data.length,
"onKeydown": onKeydown
}), {
default: (props2) => vue.createVNode(Item, props2, null)
})]);
};
}
});
function useAllowCreate(props, states) {
const createOptionCount = vue.ref(0);
const cachedSelectedOption = vue.ref(null);
const enableAllowCreateMode = vue.computed(() => {
return props.allowCreate && props.filterable;
});
function hasExistingOption(query) {
const hasValue = (option) => option.value === query;
return props.options && props.options.some(hasValue) || states.createdOptions.some(hasValue);
}
function selectNewOption(option) {
if (!enableAllowCreateMode.value) {
return;
}
if (props.multiple && option.created) {
createOptionCount.value++;
} else {
cachedSelectedOption.value = option;
}
}
function createNewOption(query) {
if (enableAllowCreateMode.value) {
if (query && query.length > 0 && !hasExistingOption(query)) {
const newOption = {
value: query,
label: query,
created: true,
disabled: false
};
if (states.createdOptions.length >= createOptionCount.value) {
states.createdOptions[createOptionCount.value] = newOption;
} else {
states.createdOptions.push(newOption);
}
} else {
if (props.multiple) {
states.createdOptions.length = createOptionCount.value;
} else {
const selectedOption = cachedSelectedOption.value;
states.createdOptions.length = 0;
if (selectedOption && selectedOption.created) {
states.createdOptions.push(selectedOption);
}
}
}
}
}
function removeNewOption(option) {
if (!enableAllowCreateMode.value || !option || !option.created || option.created && props.reserveKeyword && states.inputValue === option.label) {
return;
}
const idx = states.createdOptions.findIndex((it) => it.value === option.value);
if (~idx) {
states.createdOptions.splice(idx, 1);
createOptionCount.value--;
}
}
function clearAllNewOption() {
if (enableAllowCreateMode.value) {
states.createdOptions.length = 0;
createOptionCount.value = 0;
}
}
return {
createNewOption,
removeNewOption,
selectNewOption,
clearAllNewOption
};
}
const flattenOptions = (options) => {
const flattened = [];
options.forEach((option) => {
if (isArray(option.options)) {
flattened.push({
label: option.label,
isTitle: true,
type: "Group"
});
option.options.forEach((o) => {
flattened.push(o);
});
flattened.push({
type: "Group"
});
} else {
flattened.push(option);
}
});
return flattened;
};
function useInput(handleInput) {
const isComposing = vue.ref(false);
const handleCompositionStart = () => {
isComposing.value = true;
};
const handleCompositionUpdate = (event) => {
const text = event.target.value;
const lastCharacter = text[text.length - 1] || "";
isComposing.value = !isKorean(lastCharacter);
};
const handleCompositionEnd = (event) => {
if (isComposing.value) {
isComposing.value = false;
if (isFunction(handleInput)) {
handleInput(event);
}
}
};
return {
handleCompositionStart,
handleCompositionUpdate,
handleCompositionEnd
};
}
const DEFAULT_INPUT_PLACEHOLDER = "";
const MINIMUM_INPUT_WIDTH = 11;
const TAG_BASE_WIDTH = {
larget: 51,
default: 42,
small: 33
};
const useSelect$1 = (props, emit) => {
const { t } = useLocale();
const nsSelectV2 = useNamespace("select-v2");
const nsInput = useNamespace("input");
const { form: elForm, formItem: elFormItem } = useFormItem();
const states = vue.reactive({
inputValue: DEFAULT_INPUT_PLACEHOLDER,
displayInputValue: DEFAULT_INPUT_PLACEHOLDER,
calculatedWidth: 0,
cachedPlaceholder: "",
cachedOptions: [],
createdOptions: [],
createdLabel: "",
createdSelected: false,
currentPlaceholder: "",
hoveringIndex: -1,
comboBoxHovering: false,
isOnComposition: false,
isSilentBlur: false,
isComposing: false,
inputLength: 20,
selectWidth: 200,
initialInputHeight: 0,
previousQuery: null,
previousValue: void 0,
query: "",
selectedLabel: "",
softFocus: false,
tagInMultiLine: false
});
const selectedIndex = vue.ref(-1);
const popperSize = vue.ref(-1);
const controlRef = vue.ref(null);
const inputRef = vue.ref(null);
const menuRef = vue.ref(null);
const popper = vue.ref(null);
const selectRef = vue.ref(null);
const selectionRef = vue.ref(null);
const calculatorRef = vue.ref(null);
const expanded = vue.ref(false);
const selectDisabled = vue.computed(() => props.disabled || (elForm == null ? void 0 : elForm.disabled));
const popupHeight = vue.computed(() => {
const totalHeight = filteredOptions.value.length * 34;
return totalHeight > props.height ? props.height : totalHeight;
});
const hasModelValue = vue.computed(() => {
return !isNil(props.modelValue);
});
const showClearBtn = vue.computed(() => {
const hasValue = props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : hasModelValue.value;
const criteria = props.clearable && !selectDisabled.value && states.comboBoxHovering && hasValue;
return criteria;
});
const iconComponent = vue.computed(() => props.remote && props.filterable ? "" : arrow_up_default);
const iconReverse = vue.computed(() => iconComponent.value && nsSelectV2.is("reverse", expanded.value));
const validateState = vue.computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
const validateIcon = vue.computed(() => ValidateComponentsMap[validateState.value]);
const debounce$1 = vue.computed(() => props.remote ? 300 : 0);
const emptyText = vue.computed(() => {
const options = filteredOptions.value;
if (props.loading) {
return props.loadingText || t("el.select.loading");
} else {
if (props.remote && states.inputValue === "" && options.length === 0)
return false;
if (props.filterable && states.inputValue && options.length > 0) {
return props.noMatchText || t("el.select.noMatch");
}
if (options.length === 0) {
return props.noDataText || t("el.select.noData");
}
}
return null;
});
const filteredOptions = vue.computed(() => {
const isValidOption = (o) => {
var _a;
const query = states.inputValue;
const containsQueryString = query ? (_a = o.label) == null ? void 0 : _a.includes(query) : true;
return containsQueryString;
};
if (props.loading) {
return [];
}
return flattenOptions(props.options.concat(states.createdOptions).map((v) => {
if (isArray(v.options)) {
const filtered = v.options.filter(isValidOption);
if (filtered.length > 0) {
return {
...v,
options: filtered
};
}
} else {
if (props.remote || isValidOption(v)) {
return v;
}
}
return null;
}).filter((v) => v !== null));
});
const optionsAllDisabled = vue.computed(() => filteredOptions.value.every((option) => option.disabled));
const selectSize = useSize();
const collapseTagSize = vue.computed(() => selectSize.value === "small" ? "small" : "default");
const tagMaxWidth = vue.computed(() => {
const select = selectionRef.value;
const size = collapseTagSize.value || "default";
const paddingLeft = select ? Number.parseInt(getComputedStyle(select).paddingLeft) : 0;
const paddingRight = select ? Number.parseInt(getComputedStyle(select).paddingRight) : 0;
return states.selectWidth - paddingRight - paddingLeft - TAG_BASE_WIDTH[size];
});
const calculatePopperSize = () => {
var _a;
popperSize.value = ((_a = selectRef.value) == null ? void 0 : _a.offsetWidth) || 200;
};
const inputWrapperStyle = vue.computed(() => {
return {
width: `${states.calculatedWidth === 0 ? MINIMUM_INPUT_WIDTH : Math.ceil(states.calculatedWidth) + MINIMUM_INPUT_WIDTH}px`
};
});
const shouldShowPlaceholder = vue.computed(() => {
if (isArray(props.modelValue)) {
return props.modelValue.length === 0 && !states.displayInputValue;
}
return props.filterable ? states.displayInputValue.length === 0 : true;
});
const currentPlaceholder = vue.computed(() => {
const _placeholder = props.placeholder || t("el.select.placeholder");
return props.multiple || isNil(props.modelValue) ? _placeholder : states.selectedLabel;
});
const popperRef = vue.computed(() => {
var _a, _b;
return (_b = (_a = popper.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
});
const indexRef = vue.computed(() => {
if (props.multiple) {
const len = props.modelValue.length;
if (props.modelValue.length > 0) {
return filteredOptions.value.findIndex((o) => o.value === props.modelValue[len - 1]);
}
} else {
if (props.modelValue) {
return filteredOptions.value.findIndex((o) => o.value === props.modelValue);
}
}
return -1;
});
const dropdownMenuVisible = vue.computed({
get() {
return expanded.value && emptyText.value !== false;
},
set(val) {
expanded.value = val;
}
});
const {
createNewOption,
removeNewOption,
selectNewOption,
clearAllNewOption
} = useAllowCreate(props, states);
const {
handleCompositionStart,
handleCompositionUpdate,
handleCompositionEnd
} = useInput((e) => onInput(e));
const focusAndUpdatePopup = () => {
var _a, _b, _c;
(_b = (_a = inputRef.value).focus) == null ? void 0 : _b.call(_a);
(_c = popper.value) == null ? void 0 : _c.updatePopper();
};
const toggleMenu = () => {
if (props.automaticDropdown)
return;
if (!selectDisabled.value) {
if (states.isComposing)
states.softFocus = true;
return vue.nextTick(() => {
var _a, _b;
expanded.value = !expanded.value;
(_b = (_a = inputRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
});
}
};
const onInputChange = () => {
if (props.filterable && states.inputValue !== states.selectedLabel) {
states.query = states.selectedLabel;
}
handleQueryChange(states.inputValue);
return vue.nextTick(() => {
createNewOption(states.inputValue);
});
};
const debouncedOnInputChange = debounce(onInputChange, debounce$1.value);
const handleQueryChange = (val) => {
if (states.previousQuery === val) {
return;
}
states.previousQuery = val;
if (props.filterable && isFunction(props.filterMethod)) {
props.filterMethod(val);
} else if (props.filterable && props.remote && isFunction(props.remoteMethod)) {
props.remoteMethod(val);
}
};
const emitChange = (val) => {
if (!isEqual$1(props.modelValue, val)) {
emit(CHANGE_EVENT, val);
}
};
const update = (val) => {
emit(UPDATE_MODEL_EVENT, val);
emitChange(val);
states.previousValue = val == null ? void 0 : val.toString();
};
const getValueIndex = (arr = [], value) => {
if (!isObject$1(value)) {
return arr.indexOf(value);
}
const valueKey = props.valueKey;
let index = -1;
arr.some((item, i) => {
if (get(item, valueKey) === get(value, valueKey)) {
index = i;
return true;
}
return false;
});
return index;
};
const getValueKey = (item) => {
return isObject$1(item) ? get(item, props.valueKey) : item;
};
const getLabel = (item) => {
return isObject$1(item) ? item.label : item;
};
const resetInputHeight = () => {
if (props.collapseTags && !props.filterable) {
return;
}
return vue.nextTick(() => {
var _a, _b;
if (!inputRef.value)
return;
const selection = selectionRef.value;
selectRef.value.height = selection.offsetHeight;
if (expanded.value && emptyText.value !== false) {
(_b = (_a = popper.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
}
});
};
const handleResize = () => {
var _a, _b;
resetInputWidth();
calculatePopperSize();
(_b = (_a = popper.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
if (props.multiple) {
return resetInputHeight();
}
};
const resetInputWidth = () => {
const select = selectionRef.value;
if (select) {
states.selectWidth = select.getBoundingClientRect().width;
}
};
const onSelect = (option, idx, byClick = true) => {
var _a, _b;
if (props.multiple) {
let selectedOptions = props.modelValue.slice();
const index = getValueIndex(selectedOptions, getValueKey(option));
if (index > -1) {
selectedOptions = [
...selectedOptions.slice(0, index),
...selectedOptions.slice(index + 1)
];
states.cachedOptions.splice(index, 1);
removeNewOption(option);
} else if (props.multipleLimit <= 0 || selectedOptions.length < props.multipleLimit) {
selectedOptions = [...selectedOptions, getValueKey(option)];
states.cachedOptions.push(option);
selectNewOption(option);
updateHoveringIndex(idx);
}
update(selectedOptions);
if (option.created) {
states.query = "";
handleQueryChange("");
states.inputLength = 20;
}
if (props.filterable && !props.reserveKeyword) {
(_b = (_a = inputRef.value).focus) == null ? void 0 : _b.call(_a);
onUpdateInputValue("");
}
if (props.filterable) {
states.calculatedWidth = calculatorRef.value.getBoundingClientRect().width;
}
resetInputHeight();
setSoftFocus();
} else {
selectedIndex.value = idx;
states.selectedLabel = option.label;
update(getValueKey(option));
expanded.value = false;
states.isComposing = false;
states.isSilentBlur = byClick;
selectNewOption(option);
if (!option.created) {
clearAllNewOption();
}
updateHoveringIndex(idx);
}
};
const deleteTag = (event, tag) => {
const { valueKey } = props;
const index = props.modelValue.indexOf(get(tag, valueKey));
if (index > -1 && !selectDisabled.value) {
const value = [
...props.modelValue.slice(0, index),
...props.modelValue.slice(index + 1)
];
states.cachedOptions.splice(index, 1);
update(value);
emit("remove-tag", get(tag, valueKey));
states.softFocus = true;
removeNewOption(tag);
return vue.nextTick(focusAndUpdatePopup);
}
event.stopPropagation();
};
const handleFocus = (event) => {
const focused = states.isComposing;
states.isComposing = true;
if (!states.softFocus) {
if (!focused)
emit("focus", event);
} else {
states.softFocus = false;
}
};
const handleBlur = (event) => {
states.softFocus = false;
return vue.nextTick(() => {
var _a, _b;
(_b = (_a = inputRef.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
if (calculatorRef.value) {
states.calculatedWidth = calculatorRef.value.getBoundingClientRect().width;
}
if (states.isSilentBlur) {
states.isSilentBlur = false;
} else {
if (states.isComposing) {
emit("blur", event);
}
}
states.isComposing = false;
});
};
const handleEsc = () => {
if (states.displayInputValue.length > 0) {
onUpdateInputValue("");
} else {
expanded.value = false;
}
};
const handleDel = (e) => {
if (states.displayInputValue.length === 0) {
e.preventDefault();
const selected = props.modelValue.slice();
selected.pop();
removeNewOption(states.cachedOptions.pop());
update(selected);
}
};
const handleClear = () => {
let emptyValue;
if (isArray(props.modelValue)) {
emptyValue = [];
} else {
emptyValue = void 0;
}
states.softFocus = true;
if (props.multiple) {
states.cachedOptions = [];
} else {
states.selectedLabel = "";
}
expanded.value = false;
update(emptyValue);
emit("clear");
clearAllNewOption();
return vue.nextTick(focusAndUpdatePopup);
};
const onUpdateInputValue = (val) => {
states.displayInputValue = val;
states.inputValue = val;
};
const onKeyboardNavigate = (direction, hoveringIndex = void 0) => {
const options = filteredOptions.value;
if (!["forward", "backward"].includes(direction) || selectDisabled.value || options.length <= 0 || optionsAllDisabled.value) {
return;
}
if (!expanded.value) {
return toggleMenu();
}
if (hoveringIndex === void 0) {
hoveringIndex = states.hoveringIndex;
}
let newIndex = -1;
if (direction === "forward") {
newIndex = hoveringIndex + 1;
if (newIndex >= options.length) {
newIndex = 0;
}
} else if (direction === "backward") {
newIndex = hoveringIndex - 1;
if (newIndex < 0 || newIndex >= options.length) {
newIndex = options.length - 1;
}
}
const option = options[newIndex];
if (option.disabled || option.type === "Group") {
return onKeyboardNavigate(direction, newIndex);
} else {
updateHoveringIndex(newIndex);
scrollToItem(newIndex);
}
};
const onKeyboardSelect = () => {
if (!expanded.value) {
return toggleMenu();
} else if (~states.hoveringIndex && filteredOptions.value[states.hoveringIndex]) {
onSelect(filteredOptions.value[states.hoveringIndex], states.hoveringIndex, false);
}
};
const updateHoveringIndex = (idx) => {
states.hoveringIndex = idx;
};
const resetHoveringIndex = () => {
states.hoveringIndex = -1;
};
const setSoftFocus = () => {
var _a;
const _input = inputRef.value;
if (_input) {
(_a = _input.focus) == null ? void 0 : _a.call(_input);
}
};
const onInput = (event) => {
const value = event.target.value;
onUpdateInputValue(value);
if (states.displayInputValue.length > 0 && !expanded.value) {
expanded.value = true;
}
states.calculatedWidth = calculatorRef.value.getBoundingClientRect().width;
if (props.multiple) {
resetInputHeight();
}
if (props.remote) {
debouncedOnInputChange();
} else {
return onInputChange();
}
};
const handleClickOutside = () => {
expanded.value = false;
return handleBlur();
};
const handleMenuEnter = () => {
states.inputValue = states.displayInputValue;
return vue.nextTick(() => {
if (~indexRef.value) {
updateHoveringIndex(indexRef.value);
scrollToItem(states.hoveringIndex);
}
});
};
const scrollToItem = (index) => {
menuRef.value.scrollToItem(index);
};
const initStates = () => {
resetHoveringIndex();
if (props.multiple) {
if (props.modelValue.length > 0) {
let initHovering = false;
states.cachedOptions.length = 0;
states.previousValue = props.modelValue.toString();
props.modelValue.forEach((selected) => {
const itemIndex = filteredOptions.value.findIndex((option) => getValueKey(option) === selected);
if (~itemIndex) {
states.cachedOptions.push(filteredOptions.value[itemIndex]);
if (!initHovering) {
updateHoveringIndex(itemIndex);
}
initHovering = true;
}
});
} else {
states.cachedOptions = [];
states.previousValue = void 0;
}
} else {
if (hasModelValue.value) {
states.previousValue = props.modelValue;
const options = filteredOptions.value;
const selectedItemIndex = options.findIndex((option) => getValueKey(option) === getValueKey(props.modelValue));
if (~selectedItemIndex) {
states.selectedLabel = options[selectedItemIndex].label;
updateHoveringIndex(selectedItemIndex);
} else {
states.selectedLabel = `${props.modelValue}`;
}
} else {
states.selectedLabel = "";
states.previousValue = void 0;
}
}
clearAllNewOption();
calculatePopperSize();
};
vue.watch(expanded, (val) => {
var _a, _b;
emit("visible-change", val);
if (val) {
(_b = (_a = popper.value).update) == null ? void 0 : _b.call(_a);
} else {
states.displayInputValue = "";
states.previousQuery = null;
createNewOption("");
}
});
vue.watch(() => props.modelValue, (val, oldVal) => {
var _a;
if (!val || val.toString() !== states.previousValue) {
initStates();
}
if (!isEqual$1(val, oldVal) && props.validateEvent) {
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
}
}, {
deep: true
});
vue.watch(() => props.options, () => {
const input = inputRef.value;
if (!input || input && document.activeElement !== input) {
initStates();
}
}, {
deep: true
});
vue.watch(filteredOptions, () => {
return vue.nextTick(menuRef.value.resetScrollTop);
});
vue.onMounted(() => {
initStates();
});
useResizeObserver(selectRef, handleResize);
return {
collapseTagSize,
currentPlaceholder,
expanded,
emptyText,
popupHeight,
debounce: debounce$1,
filteredOptions,
iconComponent,
iconReverse,
inputWrapperStyle,
popperSize,
dropdownMenuVisible,
hasModelValue,
shouldShowPlaceholder,
selectDisabled,
selectSize,
showClearBtn,
states,
tagMaxWidth,
nsSelectV2,
nsInput,
calculatorRef,
controlRef,
inputRef,
menuRef,
popper,
selectRef,
selectionRef,
popperRef,
validateState,
validateIcon,
debouncedOnInputChange,
deleteTag,
getLabel,
getValueKey,
handleBlur,
handleClear,
handleClickOutside,
handleDel,
handleEsc,
handleFocus,
handleMenuEnter,
handleResize,
toggleMenu,
scrollTo: scrollToItem,
onInput,
onKeyboardNavigate,
onKeyboardSelect,
onSelect,
onHover: updateHoveringIndex,
onUpdateInputValue,
handleCompositionStart,
handleCompositionEnd,
handleCompositionUpdate
};
};
var useSelect$2 = useSelect$1;
const _sfc_main$y = vue.defineComponent({
name: "ElSelectV2",
components: {
ElSelectMenu,
ElTag,
ElTooltip,
ElIcon
},
directives: { ClickOutside, ModelText: vue.vModelText },
props: SelectProps,
emits: [
UPDATE_MODEL_EVENT,
CHANGE_EVENT,
"remove-tag",
"clear",
"visible-change",
"focus",
"blur"
],
setup(props, { emit }) {
const API = useSelect$2(props, emit);
vue.provide(selectV2InjectionKey, {
props: vue.reactive({
...vue.toRefs(props),
height: API.popupHeight
}),
popper: API.popper,
onSelect: API.onSelect,
onHover: API.onHover,
onKeyboardNavigate: API.onKeyboardNavigate,
onKeyboardSelect: API.onKeyboardSelect
});
return API;
}
});
const _hoisted_1$g = { key: 0 };
const _hoisted_2$b = ["id", "autocomplete", "aria-expanded", "aria-labelledby", "disabled", "readonly", "name", "unselectable"];
const _hoisted_3$5 = ["textContent"];
const _hoisted_4$3 = ["id", "aria-labelledby", "aria-expanded", "autocomplete", "disabled", "name", "readonly", "unselectable"];
const _hoisted_5$2 = ["textContent"];
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_tag = vue.resolveComponent("el-tag");
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_select_menu = vue.resolveComponent("el-select-menu");
const _directive_model_text = vue.resolveDirective("model-text");
const _directive_click_outside = vue.resolveDirective("click-outside");
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
ref: "selectRef",
class: vue.normalizeClass([_ctx.nsSelectV2.b(), _ctx.nsSelectV2.m(_ctx.selectSize)]),
onClick: _cache[25] || (_cache[25] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"])),
onMouseenter: _cache[26] || (_cache[26] = ($event) => _ctx.states.comboBoxHovering = true),
onMouseleave: _cache[27] || (_cache[27] = ($event) => _ctx.states.comboBoxHovering = false)
}, [
vue.createVNode(_component_el_tooltip, {
ref: "popper",
visible: _ctx.dropdownMenuVisible,
teleported: _ctx.teleported,
"popper-class": [_ctx.nsSelectV2.e("popper"), _ctx.popperClass],
"gpu-acceleration": false,
"stop-popper-mouse-event": false,
"popper-options": _ctx.popperOptions,
"fallback-placements": ["bottom-start", "top-start", "right", "left"],
effect: _ctx.effect,
placement: _ctx.placement,
pure: "",
transition: `${_ctx.nsSelectV2.namespace.value}-zoom-in-top`,
trigger: "click",
persistent: _ctx.persistent,
onBeforeShow: _ctx.handleMenuEnter,
onHide: _cache[24] || (_cache[24] = ($event) => _ctx.states.inputValue = _ctx.states.displayInputValue)
}, {
default: vue.withCtx(() => {
var _a;
return [
vue.createElementVNode("div", {
ref: "selectionRef",
class: vue.normalizeClass([
_ctx.nsSelectV2.e("wrapper"),
_ctx.nsSelectV2.is("focused", _ctx.states.isComposing || _ctx.expanded),
_ctx.nsSelectV2.is("hovering", _ctx.states.comboBoxHovering),
_ctx.nsSelectV2.is("filterable", _ctx.filterable),
_ctx.nsSelectV2.is("disabled", _ctx.selectDisabled)
])
}, [
_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
vue.renderSlot(_ctx.$slots, "prefix")
])) : vue.createCommentVNode("v-if", true),
_ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(_ctx.nsSelectV2.e("selection"))
}, [
_ctx.collapseTags && _ctx.modelValue.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(_ctx.nsSelectV2.e("selected-item"))
}, [
vue.createVNode(_component_el_tag, {
closable: !_ctx.selectDisabled && !((_a = _ctx.states.cachedOptions[0]) == null ? void 0 : _a.disable),
size: _ctx.collapseTagSize,
type: "info",
"disable-transitions": "",
onClose: _cache[0] || (_cache[0] = ($event) => _ctx.deleteTag($event, _ctx.states.cachedOptions[0]))
}, {
default: vue.withCtx(() => {
var _a2;
return [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.nsSelectV2.e("tags-text")),
style: vue.normalizeStyle({
maxWidth: `${_ctx.tagMaxWidth}px`
})
}, vue.toDisplayString((_a2 = _ctx.states.cachedOptions[0]) == null ? void 0 : _a2.label), 7)
];
}),
_: 1
}, 8, ["closable", "size"]),
_ctx.modelValue.length > 1 ? (vue.openBlock(), vue.createBlock(_component_el_tag, {
key: 0,
closable: false,
size: _ctx.collapseTagSize,
type: "info",
"disable-transitions": ""
}, {
default: vue.withCtx(() => [
_ctx.collapseTagsTooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
key: 0,
disabled: _ctx.dropdownMenuVisible,
"fallback-placements": ["bottom", "top", "right", "left"],
effect: _ctx.effect,
placement: "bottom",
teleported: false
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.nsSelectV2.e("tags-text")),
style: vue.normalizeStyle({
maxWidth: `${_ctx.tagMaxWidth}px`
})
}, "+ " + vue.toDisplayString(_ctx.modelValue.length - 1), 7)
]),
content: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.nsSelectV2.e("selection"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.states.cachedOptions.slice(1), (selected, idx) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: idx,
class: vue.normalizeClass(_ctx.nsSelectV2.e("selected-item"))
}, [
(vue.openBlock(), vue.createBlock(_component_el_tag, {
key: _ctx.getValueKey(selected),
closable: !_ctx.selectDisabled && !selected.disabled,
size: _ctx.collapseTagSize,
class: "in-tooltip",
type: "info",
"disable-transitions": "",
onClose: ($event) => _ctx.deleteTag($event, selected)
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.nsSelectV2.e("tags-text")),
style: vue.normalizeStyle({
maxWidth: `${_ctx.tagMaxWidth}px`
})
}, vue.toDisplayString(_ctx.getLabel(selected)), 7)
]),
_: 2
}, 1032, ["closable", "size", "onClose"]))
], 2);
}), 128))
], 2)
]),
_: 1
}, 8, ["disabled", "effect"])) : (vue.openBlock(), vue.createElementBlock("span", {
key: 1,
class: vue.normalizeClass(_ctx.nsSelectV2.e("tags-text")),
style: vue.normalizeStyle({
maxWidth: `${_ctx.tagMaxWidth}px`
})
}, "+ " + vue.toDisplayString(_ctx.modelValue.length - 1), 7))
]),
_: 1
}, 8, ["size"])) : vue.createCommentVNode("v-if", true)
], 2)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.states.cachedOptions, (selected, idx) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: idx,
class: vue.normalizeClass(_ctx.nsSelectV2.e("selected-item"))
}, [
(vue.openBlock(), vue.createBlock(_component_el_tag, {
key: _ctx.getValueKey(selected),
closable: !_ctx.selectDisabled && !selected.disabled,
size: _ctx.collapseTagSize,
type: "info",
"disable-transitions": "",
onClose: ($event) => _ctx.deleteTag($event, selected)
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.nsSelectV2.e("tags-text")),
style: vue.normalizeStyle({
maxWidth: `${_ctx.tagMaxWidth}px`
})
}, vue.toDisplayString(_ctx.getLabel(selected)), 7)
]),
_: 2
}, 1032, ["closable", "size", "onClose"]))
], 2);
}), 128)),
vue.createElementVNode("div", {
class: vue.normalizeClass([
_ctx.nsSelectV2.e("selected-item"),
_ctx.nsSelectV2.e("input-wrapper")
]),
style: vue.normalizeStyle(_ctx.inputWrapperStyle)
}, [
vue.withDirectives(vue.createElementVNode("input", {
id: _ctx.id,
ref: "inputRef",
autocomplete: _ctx.autocomplete,
"aria-autocomplete": "list",
"aria-haspopup": "listbox",
autocapitalize: "off",
"aria-expanded": _ctx.expanded,
"aria-labelledby": _ctx.label,
class: vue.normalizeClass([
_ctx.nsSelectV2.is(_ctx.selectSize),
_ctx.nsSelectV2.e("combobox-input")
]),
disabled: _ctx.disabled,
role: "combobox",
readonly: !_ctx.filterable,
spellcheck: "false",
type: "text",
name: _ctx.name,
unselectable: _ctx.expanded ? "on" : void 0,
"onUpdate:modelValue": _cache[1] || (_cache[1] = (...args) => _ctx.onUpdateInputValue && _ctx.onUpdateInputValue(...args)),
onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
onBlur: _cache[3] || (_cache[3] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
onInput: _cache[4] || (_cache[4] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
onCompositionstart: _cache[5] || (_cache[5] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
onCompositionupdate: _cache[6] || (_cache[6] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
onCompositionend: _cache[7] || (_cache[7] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
onKeydown: [
_cache[8] || (_cache[8] = vue.withKeys(vue.withModifiers(($event) => _ctx.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"])),
_cache[9] || (_cache[9] = vue.withKeys(vue.withModifiers(($event) => _ctx.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"])),
_cache[10] || (_cache[10] = vue.withKeys(vue.withModifiers((...args) => _ctx.onKeyboardSelect && _ctx.onKeyboardSelect(...args), ["stop", "prevent"]), ["enter"])),
_cache[11] || (_cache[11] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleEsc && _ctx.handleEsc(...args), ["stop", "prevent"]), ["esc"])),
_cache[12] || (_cache[12] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleDel && _ctx.handleDel(...args), ["stop"]), ["delete"]))
]
}, null, 42, _hoisted_2$b), [
[_directive_model_text, _ctx.states.displayInputValue]
]),
_ctx.filterable ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
ref: "calculatorRef",
"aria-hidden": "true",
class: vue.normalizeClass(_ctx.nsSelectV2.e("input-calculator")),
textContent: vue.toDisplayString(_ctx.states.displayInputValue)
}, null, 10, _hoisted_3$5)) : vue.createCommentVNode("v-if", true)
], 6)
], 2)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
vue.createElementVNode("div", {
class: vue.normalizeClass([
_ctx.nsSelectV2.e("selected-item"),
_ctx.nsSelectV2.e("input-wrapper")
])
}, [
vue.withDirectives(vue.createElementVNode("input", {
id: _ctx.id,
ref: "inputRef",
"aria-autocomplete": "list",
"aria-haspopup": "listbox",
"aria-labelledby": _ctx.label,
"aria-expanded": _ctx.expanded,
autocapitalize: "off",
autocomplete: _ctx.autocomplete,
class: vue.normalizeClass(_ctx.nsSelectV2.e("combobox-input")),
disabled: _ctx.disabled,
name: _ctx.name,
role: "combobox",
readonly: !_ctx.filterable,
spellcheck: "false",
type: "text",
unselectable: _ctx.expanded ? "on" : void 0,
onCompositionstart: _cache[13] || (_cache[13] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
onCompositionupdate: _cache[14] || (_cache[14] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
onCompositionend: _cache[15] || (_cache[15] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
onFocus: _cache[16] || (_cache[16] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
onBlur: _cache[17] || (_cache[17] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
onInput: _cache[18] || (_cache[18] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
onKeydown: [
_cache[19] || (_cache[19] = vue.withKeys(vue.withModifiers(($event) => _ctx.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"])),
_cache[20] || (_cache[20] = vue.withKeys(vue.withModifiers(($event) => _ctx.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"])),
_cache[21] || (_cache[21] = vue.withKeys(vue.withModifiers((...args) => _ctx.onKeyboardSelect && _ctx.onKeyboardSelect(...args), ["stop", "prevent"]), ["enter"])),
_cache[22] || (_cache[22] = vue.withKeys(vue.withModifiers((...args) => _ctx.handleEsc && _ctx.handleEsc(...args), ["stop", "prevent"]), ["esc"]))
],
"onUpdate:modelValue": _cache[23] || (_cache[23] = (...args) => _ctx.onUpdateInputValue && _ctx.onUpdateInputValue(...args))
}, null, 42, _hoisted_4$3), [
[_directive_model_text, _ctx.states.displayInputValue]
])
], 2),
_ctx.filterable ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
ref: "calculatorRef",
"aria-hidden": "true",
class: vue.normalizeClass([
_ctx.nsSelectV2.e("selected-item"),
_ctx.nsSelectV2.e("input-calculator")
]),
textContent: vue.toDisplayString(_ctx.states.displayInputValue)
}, null, 10, _hoisted_5$2)) : vue.createCommentVNode("v-if", true)
], 64)),
_ctx.shouldShowPlaceholder ? (vue.openBlock(), vue.createElementBlock("span", {
key: 3,
class: vue.normalizeClass([
_ctx.nsSelectV2.e("placeholder"),
_ctx.nsSelectV2.is("transparent", _ctx.multiple ? _ctx.modelValue.length === 0 : !_ctx.hasModelValue)
])
}, vue.toDisplayString(_ctx.currentPlaceholder), 3)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.nsSelectV2.e("suffix"))
}, [
_ctx.iconComponent ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 0,
class: vue.normalizeClass([_ctx.nsSelectV2.e("caret"), _ctx.nsInput.e("icon"), _ctx.iconReverse])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
]),
_: 1
}, 8, ["class"])), [
[vue.vShow, !_ctx.showClearBtn]
]) : vue.createCommentVNode("v-if", true),
_ctx.showClearBtn && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 1,
class: vue.normalizeClass([_ctx.nsSelectV2.e("caret"), _ctx.nsInput.e("icon")]),
onClick: vue.withModifiers(_ctx.handleClear, ["prevent", "stop"])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
]),
_: 1
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
_ctx.validateState && _ctx.validateIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 2,
class: vue.normalizeClass([_ctx.nsInput.e("icon"), _ctx.nsInput.e("validateIcon")])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.validateIcon)))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true)
], 2)
], 2)
];
}),
content: vue.withCtx(() => [
vue.createVNode(_component_el_select_menu, {
ref: "menuRef",
data: _ctx.filteredOptions,
width: _ctx.popperSize,
"hovering-index": _ctx.states.hoveringIndex,
"scrollbar-always-on": _ctx.scrollbarAlwaysOn
}, {
default: vue.withCtx((scope) => [
vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(scope)))
]),
empty: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
vue.createElementVNode("p", {
class: vue.normalizeClass(_ctx.nsSelectV2.e("empty"))
}, vue.toDisplayString(_ctx.emptyText ? _ctx.emptyText : ""), 3)
])
]),
_: 3
}, 8, ["data", "width", "hovering-index", "scrollbar-always-on"])
]),
_: 3
}, 8, ["visible", "teleported", "popper-class", "popper-options", "effect", "placement", "transition", "persistent", "onBeforeShow"])
], 34)), [
[_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
]);
}
var Select = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$5], ["__file", "select.vue"]]);
Select.install = (app) => {
app.component(Select.name, Select);
};
const _Select = Select;
const ElSelectV2 = _Select;
const skeletonProps = buildProps({
animated: {
type: Boolean,
default: false
},
count: {
type: Number,
default: 1
},
rows: {
type: Number,
default: 3
},
loading: {
type: Boolean,
default: true
},
throttle: {
type: Number
}
});
const skeletonItemProps = buildProps({
variant: {
type: String,
values: [
"circle",
"rect",
"h1",
"h3",
"text",
"caption",
"p",
"image",
"button"
],
default: "text"
}
});
const __default__$q = vue.defineComponent({
name: "ElSkeletonItem"
});
const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
...__default__$q,
props: skeletonItemProps,
setup(__props) {
const ns = useNamespace("skeleton");
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([vue.unref(ns).e("item"), vue.unref(ns).e(_ctx.variant)])
}, [
_ctx.variant === "image" ? (vue.openBlock(), vue.createBlock(vue.unref(picture_filled_default), { key: 0 })) : vue.createCommentVNode("v-if", true)
], 2);
};
}
});
var SkeletonItem = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__file", "skeleton-item.vue"]]);
const __default__$p = vue.defineComponent({
name: "ElSkeleton"
});
const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
...__default__$p,
props: skeletonProps,
setup(__props, { expose }) {
const props = __props;
const ns = useNamespace("skeleton");
const uiLoading = useThrottleRender(vue.toRef(props, "loading"), props.throttle);
expose({
uiLoading
});
return (_ctx, _cache) => {
return vue.unref(uiLoading) ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
key: 0,
class: [vue.unref(ns).b(), vue.unref(ns).is("animated", _ctx.animated)]
}, _ctx.$attrs), [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.count, (i) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: i }, [
_ctx.loading ? vue.renderSlot(_ctx.$slots, "template", { key: i }, () => [
vue.createVNode(SkeletonItem, {
class: vue.normalizeClass(vue.unref(ns).is("first")),
variant: "p"
}, null, 8, ["class"]),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (item) => {
return vue.openBlock(), vue.createBlock(SkeletonItem, {
key: item,
class: vue.normalizeClass([
vue.unref(ns).e("paragraph"),
vue.unref(ns).is("last", item === _ctx.rows && _ctx.rows > 1)
]),
variant: "p"
}, null, 8, ["class"]);
}), 128))
]) : vue.createCommentVNode("v-if", true)
], 64);
}), 128))
], 16)) : vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.$attrs)));
};
}
});
var Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__file", "skeleton.vue"]]);
const ElSkeleton = withInstall(Skeleton, {
SkeletonItem
});
const ElSkeletonItem = withNoopInstall(SkeletonItem);
const sliderProps = buildProps({
modelValue: {
type: definePropType([Number, Array]),
default: 0
},
id: {
type: String,
default: void 0
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: Number,
default: 1
},
showInput: Boolean,
showInputControls: {
type: Boolean,
default: true
},
size: useSizeProp,
inputSize: useSizeProp,
showStops: Boolean,
showTooltip: {
type: Boolean,
default: true
},
formatTooltip: {
type: definePropType(Function),
default: void 0
},
disabled: Boolean,
range: Boolean,
vertical: Boolean,
height: String,
debounce: {
type: Number,
default: 300
},
label: {
type: String,
default: void 0
},
rangeStartLabel: {
type: String,
default: void 0
},
rangeEndLabel: {
type: String,
default: void 0
},
formatValueText: {
type: definePropType(Function),
default: void 0
},
tooltipClass: {
type: String,
default: void 0
},
placement: {
type: String,
values: Ee,
default: "top"
},
marks: {
type: definePropType(Object)
},
validateEvent: {
type: Boolean,
default: true
}
});
const isValidValue$1 = (value) => isNumber(value) || isArray(value) && value.every(isNumber);
const sliderEmits = {
[UPDATE_MODEL_EVENT]: isValidValue$1,
[INPUT_EVENT]: isValidValue$1,
[CHANGE_EVENT]: isValidValue$1
};
const useLifecycle = (props, initData, resetSize) => {
const sliderWrapper = vue.ref();
vue.onMounted(async () => {
if (props.range) {
if (Array.isArray(props.modelValue)) {
initData.firstValue = Math.max(props.min, props.modelValue[0]);
initData.secondValue = Math.min(props.max, props.modelValue[1]);
} else {
initData.firstValue = props.min;
initData.secondValue = props.max;
}
initData.oldValue = [initData.firstValue, initData.secondValue];
} else {
if (typeof props.modelValue !== "number" || Number.isNaN(props.modelValue)) {
initData.firstValue = props.min;
} else {
initData.firstValue = Math.min(props.max, Math.max(props.min, props.modelValue));
}
initData.oldValue = initData.firstValue;
}
useEventListener(window, "resize", resetSize);
await vue.nextTick();
resetSize();
});
return {
sliderWrapper
};
};
const useMarks = (props) => {
return vue.computed(() => {
if (!props.marks) {
return [];
}
const marksKeys = Object.keys(props.marks);
return marksKeys.map(Number.parseFloat).sort((a, b) => a - b).filter((point) => point <= props.max && point >= props.min).map((point) => ({
point,
position: (point - props.min) * 100 / (props.max - props.min),
mark: props.marks[point]
}));
});
};
const useSlide = (props, initData, emit) => {
const { form: elForm, formItem: elFormItem } = useFormItem();
const slider = vue.shallowRef();
const firstButton = vue.ref();
const secondButton = vue.ref();
const buttonRefs = {
firstButton,
secondButton
};
const sliderDisabled = vue.computed(() => {
return props.disabled || (elForm == null ? void 0 : elForm.disabled) || false;
});
const minValue = vue.computed(() => {
return Math.min(initData.firstValue, initData.secondValue);
});
const maxValue = vue.computed(() => {
return Math.max(initData.firstValue, initData.secondValue);
});
const barSize = vue.computed(() => {
return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstValue - props.min) / (props.max - props.min)}%`;
});
const barStart = vue.computed(() => {
return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "0%";
});
const runwayStyle = vue.computed(() => {
return props.vertical ? { height: props.height } : {};
});
const barStyle = vue.computed(() => {
return props.vertical ? {
height: barSize.value,
bottom: barStart.value
} : {
width: barSize.value,
left: barStart.value
};
});
const resetSize = () => {
if (slider.value) {
initData.sliderSize = slider.value[`client${props.vertical ? "Height" : "Width"}`];
}
};
const getButtonRefByPercent = (percent) => {
const targetValue = props.min + percent * (props.max - props.min) / 100;
if (!props.range) {
return firstButton;
}
let buttonRefName;
if (Math.abs(minValue.value - targetValue) < Math.abs(maxValue.value - targetValue)) {
buttonRefName = initData.firstValue < initData.secondValue ? "firstButton" : "secondButton";
} else {
buttonRefName = initData.firstValue > initData.secondValue ? "firstButton" : "secondButton";
}
return buttonRefs[buttonRefName];
};
const setPosition = (percent) => {
const buttonRef = getButtonRefByPercent(percent);
buttonRef.value.setPosition(percent);
return buttonRef;
};
const setFirstValue = (firstValue) => {
initData.firstValue = firstValue;
_emit(props.range ? [minValue.value, maxValue.value] : firstValue);
};
const setSecondValue = (secondValue) => {
initData.secondValue = secondValue;
if (props.range) {
_emit([minValue.value, maxValue.value]);
}
};
const _emit = (val) => {
emit(UPDATE_MODEL_EVENT, val);
emit(INPUT_EVENT, val);
};
const emitChange = async () => {
await vue.nextTick();
emit(CHANGE_EVENT, props.range ? [minValue.value, maxValue.value] : props.modelValue);
};
const handleSliderPointerEvent = (event) => {
var _a, _b, _c, _d, _e, _f;
if (sliderDisabled.value || initData.dragging)
return;
resetSize();
let newPercent = 0;
if (props.vertical) {
const clientY = (_c = (_b = (_a = event.touches) == null ? void 0 : _a.item(0)) == null ? void 0 : _b.clientY) != null ? _c : event.clientY;
const sliderOffsetBottom = slider.value.getBoundingClientRect().bottom;
newPercent = (sliderOffsetBottom - clientY) / initData.sliderSize * 100;
} else {
const clientX = (_f = (_e = (_d = event.touches) == null ? void 0 : _d.item(0)) == null ? void 0 : _e.clientX) != null ? _f : event.clientX;
const sliderOffsetLeft = slider.value.getBoundingClientRect().left;
newPercent = (clientX - sliderOffsetLeft) / initData.sliderSize * 100;
}
if (newPercent < 0 || newPercent > 100)
return;
return setPosition(newPercent);
};
const onSliderWrapperPrevent = (event) => {
var _a, _b;
if (((_a = buttonRefs["firstButton"].value) == null ? void 0 : _a.dragging) || ((_b = buttonRefs["secondButton"].value) == null ? void 0 : _b.dragging)) {
event.preventDefault();
}
};
const onSliderDown = async (event) => {
const buttonRef = handleSliderPointerEvent(event);
if (buttonRef) {
await vue.nextTick();
buttonRef.value.onButtonDown(event);
}
};
const onSliderClick = (event) => {
const buttonRef = handleSliderPointerEvent(event);
if (buttonRef) {
emitChange();
}
};
return {
elFormItem,
slider,
firstButton,
secondButton,
sliderDisabled,
minValue,
maxValue,
runwayStyle,
barStyle,
resetSize,
setPosition,
emitChange,
onSliderWrapperPrevent,
onSliderClick,
onSliderDown,
setFirstValue,
setSecondValue
};
};
const { left, down, right, up, home, end, pageUp, pageDown } = EVENT_CODE;
const useTooltip = (props, formatTooltip, showTooltip) => {
const tooltip = vue.ref();
const tooltipVisible = vue.ref(false);
const enableFormat = vue.computed(() => {
return formatTooltip.value instanceof Function;
});
const formatValue = vue.computed(() => {
return enableFormat.value && formatTooltip.value(props.modelValue) || props.modelValue;
});
const displayTooltip = debounce(() => {
showTooltip.value && (tooltipVisible.value = true);
}, 50);
const hideTooltip = debounce(() => {
showTooltip.value && (tooltipVisible.value = false);
}, 50);
return {
tooltip,
tooltipVisible,
formatValue,
displayTooltip,
hideTooltip
};
};
const useSliderButton = (props, initData, emit) => {
const {
disabled,
min,
max,
step,
showTooltip,
precision,
sliderSize,
formatTooltip,
emitChange,
resetSize,
updateDragging
} = vue.inject(sliderContextKey);
const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } = useTooltip(props, formatTooltip, showTooltip);
const button = vue.ref();
const currentPosition = vue.computed(() => {
return `${(props.modelValue - min.value) / (max.value - min.value) * 100}%`;
});
const wrapperStyle = vue.computed(() => {
return props.vertical ? { bottom: currentPosition.value } : { left: currentPosition.value };
});
const handleMouseEnter = () => {
initData.hovering = true;
displayTooltip();
};
const handleMouseLeave = () => {
initData.hovering = false;
if (!initData.dragging) {
hideTooltip();
}
};
const onButtonDown = (event) => {
if (disabled.value)
return;
event.preventDefault();
onDragStart(event);
window.addEventListener("mousemove", onDragging);
window.addEventListener("touchmove", onDragging);
window.addEventListener("mouseup", onDragEnd);
window.addEventListener("touchend", onDragEnd);
window.addEventListener("contextmenu", onDragEnd);
button.value.focus();
};
const incrementPosition = (amount) => {
if (disabled.value)
return;
initData.newPosition = Number.parseFloat(currentPosition.value) + amount / (max.value - min.value) * 100;
setPosition(initData.newPosition);
emitChange();
};
const onLeftKeyDown = () => {
incrementPosition(-step.value);
};
const onRightKeyDown = () => {
incrementPosition(step.value);
};
const onPageDownKeyDown = () => {
incrementPosition(-step.value * 4);
};
const onPageUpKeyDown = () => {
incrementPosition(step.value * 4);
};
const onHomeKeyDown = () => {
if (disabled.value)
return;
setPosition(0);
emitChange();
};
const onEndKeyDown = () => {
if (disabled.value)
return;
setPosition(100);
emitChange();
};
const onKeyDown = (event) => {
let isPreventDefault = true;
if ([left, down].includes(event.key)) {
onLeftKeyDown();
} else if ([right, up].includes(event.key)) {
onRightKeyDown();
} else if (event.key === home) {
onHomeKeyDown();
} else if (event.key === end) {
onEndKeyDown();
} else if (event.key === pageDown) {
onPageDownKeyDown();
} else if (event.key === pageUp) {
onPageUpKeyDown();
} else {
isPreventDefault = false;
}
isPreventDefault && event.preventDefault();
};
const getClientXY = (event) => {
let clientX;
let clientY;
if (event.type.startsWith("touch")) {
clientY = event.touches[0].clientY;
clientX = event.touches[0].clientX;
} else {
clientY = event.clientY;
clientX = event.clientX;
}
return {
clientX,
clientY
};
};
const onDragStart = (event) => {
initData.dragging = true;
initData.isClick = true;
const { clientX, clientY } = getClientXY(event);
if (props.vertical) {
initData.startY = clientY;
} else {
initData.startX = clientX;
}
initData.startPosition = Number.parseFloat(currentPosition.value);
initData.newPosition = initData.startPosition;
};
const onDragging = (event) => {
if (initData.dragging) {
initData.isClick = false;
displayTooltip();
resetSize();
let diff;
const { clientX, clientY } = getClientXY(event);
if (props.vertical) {
initData.currentY = clientY;
diff = (initData.startY - initData.currentY) / sliderSize.value * 100;
} else {
initData.currentX = clientX;
diff = (initData.currentX - initData.startX) / sliderSize.value * 100;
}
initData.newPosition = initData.startPosition + diff;
setPosition(initData.newPosition);
}
};
const onDragEnd = () => {
if (initData.dragging) {
setTimeout(() => {
initData.dragging = false;
if (!initData.hovering) {
hideTooltip();
}
if (!initData.isClick) {
setPosition(initData.newPosition);
}
emitChange();
}, 0);
window.removeEventListener("mousemove", onDragging);
window.removeEventListener("touchmove", onDragging);
window.removeEventListener("mouseup", onDragEnd);
window.removeEventListener("touchend", onDragEnd);
window.removeEventListener("contextmenu", onDragEnd);
}
};
const setPosition = async (newPosition) => {
if (newPosition === null || Number.isNaN(+newPosition))
return;
if (newPosition < 0) {
newPosition = 0;
} else if (newPosition > 100) {
newPosition = 100;
}
const lengthPerStep = 100 / ((max.value - min.value) / step.value);
const steps = Math.round(newPosition / lengthPerStep);
let value = steps * lengthPerStep * (max.value - min.value) * 0.01 + min.value;
value = Number.parseFloat(value.toFixed(precision.value));
if (value !== props.modelValue) {
emit(UPDATE_MODEL_EVENT, value);
}
if (!initData.dragging && props.modelValue !== initData.oldValue) {
initData.oldValue = props.modelValue;
}
await vue.nextTick();
initData.dragging && displayTooltip();
tooltip.value.updatePopper();
};
vue.watch(() => initData.dragging, (val) => {
updateDragging(val);
});
return {
disabled,
button,
tooltip,
tooltipVisible,
showTooltip,
wrapperStyle,
formatValue,
handleMouseEnter,
handleMouseLeave,
onButtonDown,
onKeyDown,
setPosition
};
};
const useStops = (props, initData, minValue, maxValue) => {
const stops = vue.computed(() => {
if (!props.showStops || props.min > props.max)
return [];
if (props.step === 0) {
return [];
}
const stopCount = (props.max - props.min) / props.step;
const stepWidth = 100 * props.step / (props.max - props.min);
const result = Array.from({ length: stopCount - 1 }).map((_, index) => (index + 1) * stepWidth);
if (props.range) {
return result.filter((step) => {
return step < 100 * (minValue.value - props.min) / (props.max - props.min) || step > 100 * (maxValue.value - props.min) / (props.max - props.min);
});
} else {
return result.filter((step) => step > 100 * (initData.firstValue - props.min) / (props.max - props.min));
}
});
const getStopStyle = (position) => {
return props.vertical ? { bottom: `${position}%` } : { left: `${position}%` };
};
return {
stops,
getStopStyle
};
};
const useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {
const _emit = (val) => {
emit(UPDATE_MODEL_EVENT, val);
emit(INPUT_EVENT, val);
};
const valueChanged = () => {
if (props.range) {
return ![minValue.value, maxValue.value].every((item, index) => item === initData.oldValue[index]);
} else {
return props.modelValue !== initData.oldValue;
}
};
const setValues = () => {
var _a, _b;
if (props.min > props.max) {
throwError("Slider", "min should not be greater than max.");
return;
}
const val = props.modelValue;
if (props.range && Array.isArray(val)) {
if (val[1] < props.min) {
_emit([props.min, props.min]);
} else if (val[0] > props.max) {
_emit([props.max, props.max]);
} else if (val[0] < props.min) {
_emit([props.min, val[1]]);
} else if (val[1] > props.max) {
_emit([val[0], props.max]);
} else {
initData.firstValue = val[0];
initData.secondValue = val[1];
if (valueChanged()) {
if (props.validateEvent) {
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
}
initData.oldValue = val.slice();
}
}
} else if (!props.range && typeof val === "number" && !Number.isNaN(val)) {
if (val < props.min) {
_emit(props.min);
} else if (val > props.max) {
_emit(props.max);
} else {
initData.firstValue = val;
if (valueChanged()) {
if (props.validateEvent) {
(_b = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _b.call(elFormItem, "change").catch((err) => debugWarn());
}
initData.oldValue = val;
}
}
}
};
setValues();
vue.watch(() => initData.dragging, (val) => {
if (!val) {
setValues();
}
});
vue.watch(() => props.modelValue, (val, oldVal) => {
if (initData.dragging || Array.isArray(val) && Array.isArray(oldVal) && val.every((item, index) => item === oldVal[index]) && initData.firstValue === val[0] && initData.secondValue === val[1]) {
return;
}
setValues();
}, {
deep: true
});
vue.watch(() => [props.min, props.max], () => {
setValues();
});
};
const sliderButtonProps = buildProps({
modelValue: {
type: Number,
default: 0
},
vertical: Boolean,
tooltipClass: String,
placement: {
type: String,
values: Ee,
default: "top"
}
});
const sliderButtonEmits = {
[UPDATE_MODEL_EVENT]: (value) => isNumber(value)
};
const _hoisted_1$f = ["tabindex"];
const __default__$o = vue.defineComponent({
name: "ElSliderButton"
});
const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
...__default__$o,
props: sliderButtonProps,
emits: sliderButtonEmits,
setup(__props, { expose, emit }) {
const props = __props;
const ns = useNamespace("slider");
const initData = vue.reactive({
hovering: false,
dragging: false,
isClick: false,
startX: 0,
currentX: 0,
startY: 0,
currentY: 0,
startPosition: 0,
newPosition: 0,
oldValue: props.modelValue
});
const {
disabled,
button,
tooltip,
showTooltip,
tooltipVisible,
wrapperStyle,
formatValue,
handleMouseEnter,
handleMouseLeave,
onButtonDown,
onKeyDown,
setPosition
} = useSliderButton(props, initData, emit);
const { hovering, dragging } = vue.toRefs(initData);
expose({
onButtonDown,
onKeyDown,
setPosition,
hovering,
dragging
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "button",
ref: button,
class: vue.normalizeClass([vue.unref(ns).e("button-wrapper"), { hover: vue.unref(hovering), dragging: vue.unref(dragging) }]),
style: vue.normalizeStyle(vue.unref(wrapperStyle)),
tabindex: vue.unref(disabled) ? -1 : 0,
onMouseenter: _cache[0] || (_cache[0] = (...args) => vue.unref(handleMouseEnter) && vue.unref(handleMouseEnter)(...args)),
onMouseleave: _cache[1] || (_cache[1] = (...args) => vue.unref(handleMouseLeave) && vue.unref(handleMouseLeave)(...args)),
onMousedown: _cache[2] || (_cache[2] = (...args) => vue.unref(onButtonDown) && vue.unref(onButtonDown)(...args)),
onTouchstart: _cache[3] || (_cache[3] = (...args) => vue.unref(onButtonDown) && vue.unref(onButtonDown)(...args)),
onFocus: _cache[4] || (_cache[4] = (...args) => vue.unref(handleMouseEnter) && vue.unref(handleMouseEnter)(...args)),
onBlur: _cache[5] || (_cache[5] = (...args) => vue.unref(handleMouseLeave) && vue.unref(handleMouseLeave)(...args)),
onKeydown: _cache[6] || (_cache[6] = (...args) => vue.unref(onKeyDown) && vue.unref(onKeyDown)(...args))
}, [
vue.createVNode(vue.unref(ElTooltip), {
ref_key: "tooltip",
ref: tooltip,
visible: vue.unref(tooltipVisible),
placement: _ctx.placement,
"fallback-placements": ["top", "bottom", "right", "left"],
"stop-popper-mouse-event": false,
"popper-class": _ctx.tooltipClass,
disabled: !vue.unref(showTooltip),
persistent: ""
}, {
content: vue.withCtx(() => [
vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)), 1)
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass([vue.unref(ns).e("button"), { hover: vue.unref(hovering), dragging: vue.unref(dragging) }])
}, null, 2)
]),
_: 1
}, 8, ["visible", "placement", "popper-class", "disabled"])
], 46, _hoisted_1$f);
};
}
});
var SliderButton = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__file", "button.vue"]]);
const sliderMarkerProps = buildProps({
mark: {
type: definePropType([String, Object]),
default: void 0
}
});
var SliderMarker = vue.defineComponent({
name: "ElSliderMarker",
props: sliderMarkerProps,
setup(props) {
const ns = useNamespace("slider");
const label = vue.computed(() => {
return isString(props.mark) ? props.mark : props.mark.label;
});
const style = vue.computed(() => isString(props.mark) ? void 0 : props.mark.style);
return () => vue.h("div", {
class: ns.e("marks-text"),
style: style.value
}, label.value);
}
});
const _hoisted_1$e = ["id", "role", "aria-label", "aria-labelledby"];
const _hoisted_2$a = { key: 1 };
const __default__$n = vue.defineComponent({
name: "ElSlider"
});
const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
...__default__$n,
props: sliderProps,
emits: sliderEmits,
setup(__props, { expose, emit }) {
const props = __props;
const ns = useNamespace("slider");
const { t } = useLocale();
const initData = vue.reactive({
firstValue: 0,
secondValue: 0,
oldValue: 0,
dragging: false,
sliderSize: 1
});
const {
elFormItem,
slider,
firstButton,
secondButton,
sliderDisabled,
minValue,
maxValue,
runwayStyle,
barStyle,
resetSize,
emitChange,
onSliderWrapperPrevent,
onSliderClick,
onSliderDown,
setFirstValue,
setSecondValue
} = useSlide(props, initData, emit);
const { stops, getStopStyle } = useStops(props, initData, minValue, maxValue);
const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
formItemContext: elFormItem
});
const sliderWrapperSize = useSize();
const sliderInputSize = vue.computed(() => props.inputSize || sliderWrapperSize.value);
const groupLabel = vue.computed(() => {
return props.label || t("el.slider.defaultLabel", {
min: props.min,
max: props.max
});
});
const firstButtonLabel = vue.computed(() => {
if (props.range) {
return props.rangeStartLabel || t("el.slider.defaultRangeStartLabel");
} else {
return groupLabel.value;
}
});
const firstValueText = vue.computed(() => {
return props.formatValueText ? props.formatValueText(firstValue.value) : `${firstValue.value}`;
});
const secondButtonLabel = vue.computed(() => {
return props.rangeEndLabel || t("el.slider.defaultRangeEndLabel");
});
const secondValueText = vue.computed(() => {
return props.formatValueText ? props.formatValueText(secondValue.value) : `${secondValue.value}`;
});
const sliderKls = vue.computed(() => [
ns.b(),
ns.m(sliderWrapperSize.value),
ns.is("vertical", props.vertical),
{ [ns.m("with-input")]: props.showInput }
]);
const markList = useMarks(props);
useWatch(props, initData, minValue, maxValue, emit, elFormItem);
const precision = vue.computed(() => {
const precisions = [props.min, props.max, props.step].map((item) => {
const decimal = `${item}`.split(".")[1];
return decimal ? decimal.length : 0;
});
return Math.max.apply(null, precisions);
});
const { sliderWrapper } = useLifecycle(props, initData, resetSize);
const { firstValue, secondValue, sliderSize } = vue.toRefs(initData);
const updateDragging = (val) => {
initData.dragging = val;
};
vue.provide(sliderContextKey, {
...vue.toRefs(props),
sliderSize,
disabled: sliderDisabled,
precision,
emitChange,
resetSize,
updateDragging
});
expose({
onSliderClick
});
return (_ctx, _cache) => {
var _a, _b;
return vue.openBlock(), vue.createElementBlock("div", {
id: _ctx.range ? vue.unref(inputId) : void 0,
ref_key: "sliderWrapper",
ref: sliderWrapper,
class: vue.normalizeClass(vue.unref(sliderKls)),
role: _ctx.range ? "group" : void 0,
"aria-label": _ctx.range && !vue.unref(isLabeledByFormItem) ? vue.unref(groupLabel) : void 0,
"aria-labelledby": _ctx.range && vue.unref(isLabeledByFormItem) ? (_a = vue.unref(elFormItem)) == null ? void 0 : _a.labelId : void 0,
onTouchstart: _cache[2] || (_cache[2] = (...args) => vue.unref(onSliderWrapperPrevent) && vue.unref(onSliderWrapperPrevent)(...args)),
onTouchmove: _cache[3] || (_cache[3] = (...args) => vue.unref(onSliderWrapperPrevent) && vue.unref(onSliderWrapperPrevent)(...args))
}, [
vue.createElementVNode("div", {
ref_key: "slider",
ref: slider,
class: vue.normalizeClass([
vue.unref(ns).e("runway"),
{ "show-input": _ctx.showInput && !_ctx.range },
vue.unref(ns).is("disabled", vue.unref(sliderDisabled))
]),
style: vue.normalizeStyle(vue.unref(runwayStyle)),
onMousedown: _cache[0] || (_cache[0] = (...args) => vue.unref(onSliderDown) && vue.unref(onSliderDown)(...args)),
onTouchstart: _cache[1] || (_cache[1] = (...args) => vue.unref(onSliderDown) && vue.unref(onSliderDown)(...args))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("bar")),
style: vue.normalizeStyle(vue.unref(barStyle))
}, null, 6),
vue.createVNode(SliderButton, {
id: !_ctx.range ? vue.unref(inputId) : void 0,
ref_key: "firstButton",
ref: firstButton,
"model-value": vue.unref(firstValue),
vertical: _ctx.vertical,
"tooltip-class": _ctx.tooltipClass,
placement: _ctx.placement,
role: "slider",
"aria-label": _ctx.range || !vue.unref(isLabeledByFormItem) ? vue.unref(firstButtonLabel) : void 0,
"aria-labelledby": !_ctx.range && vue.unref(isLabeledByFormItem) ? (_b = vue.unref(elFormItem)) == null ? void 0 : _b.labelId : void 0,
"aria-valuemin": _ctx.min,
"aria-valuemax": _ctx.range ? vue.unref(secondValue) : _ctx.max,
"aria-valuenow": vue.unref(firstValue),
"aria-valuetext": vue.unref(firstValueText),
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
"aria-disabled": vue.unref(sliderDisabled),
"onUpdate:modelValue": vue.unref(setFirstValue)
}, null, 8, ["id", "model-value", "vertical", "tooltip-class", "placement", "aria-label", "aria-labelledby", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-orientation", "aria-disabled", "onUpdate:modelValue"]),
_ctx.range ? (vue.openBlock(), vue.createBlock(SliderButton, {
key: 0,
ref_key: "secondButton",
ref: secondButton,
"model-value": vue.unref(secondValue),
vertical: _ctx.vertical,
"tooltip-class": _ctx.tooltipClass,
placement: _ctx.placement,
role: "slider",
"aria-label": vue.unref(secondButtonLabel),
"aria-valuemin": vue.unref(firstValue),
"aria-valuemax": _ctx.max,
"aria-valuenow": vue.unref(secondValue),
"aria-valuetext": vue.unref(secondValueText),
"aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
"aria-disabled": vue.unref(sliderDisabled),
"onUpdate:modelValue": vue.unref(setSecondValue)
}, null, 8, ["model-value", "vertical", "tooltip-class", "placement", "aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-orientation", "aria-disabled", "onUpdate:modelValue"])) : vue.createCommentVNode("v-if", true),
_ctx.showStops ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(stops), (item, key) => {
return vue.openBlock(), vue.createElementBlock("div", {
key,
class: vue.normalizeClass(vue.unref(ns).e("stop")),
style: vue.normalizeStyle(vue.unref(getStopStyle)(item))
}, null, 6);
}), 128))
])) : vue.createCommentVNode("v-if", true),
vue.unref(markList).length > 0 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
vue.createElementVNode("div", null, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(markList), (item, key) => {
return vue.openBlock(), vue.createElementBlock("div", {
key,
style: vue.normalizeStyle(vue.unref(getStopStyle)(item.position)),
class: vue.normalizeClass([vue.unref(ns).e("stop"), vue.unref(ns).e("marks-stop")])
}, null, 6);
}), 128))
]),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("marks"))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(markList), (item, key) => {
return vue.openBlock(), vue.createBlock(vue.unref(SliderMarker), {
key,
mark: item.mark,
style: vue.normalizeStyle(vue.unref(getStopStyle)(item.position))
}, null, 8, ["mark", "style"]);
}), 128))
], 2)
], 64)) : vue.createCommentVNode("v-if", true)
], 38),
_ctx.showInput && !_ctx.range ? (vue.openBlock(), vue.createBlock(vue.unref(ElInputNumber), {
key: 0,
ref: "input",
"model-value": vue.unref(firstValue),
class: vue.normalizeClass(vue.unref(ns).e("input")),
step: _ctx.step,
disabled: vue.unref(sliderDisabled),
controls: _ctx.showInputControls,
min: _ctx.min,
max: _ctx.max,
debounce: _ctx.debounce,
size: vue.unref(sliderInputSize),
"onUpdate:modelValue": vue.unref(setFirstValue),
onChange: vue.unref(emitChange)
}, null, 8, ["model-value", "class", "step", "disabled", "controls", "min", "max", "debounce", "size", "onUpdate:modelValue", "onChange"])) : vue.createCommentVNode("v-if", true)
], 42, _hoisted_1$e);
};
}
});
var Slider = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__file", "slider.vue"]]);
const ElSlider = withInstall(Slider);
const spaceItemProps = buildProps({
prefixCls: {
type: String
}
});
const SpaceItem = vue.defineComponent({
name: "ElSpaceItem",
props: spaceItemProps,
setup(props, { slots }) {
const ns = useNamespace("space");
const classes = vue.computed(() => `${props.prefixCls || ns.b()}__item`);
return () => vue.h("div", { class: classes.value }, vue.renderSlot(slots, "default"));
}
});
var Item = SpaceItem;
const SIZE_MAP = {
small: 8,
default: 12,
large: 16
};
function useSpace(props) {
const ns = useNamespace("space");
const classes = vue.computed(() => [ns.b(), ns.m(props.direction), props.class]);
const horizontalSize = vue.ref(0);
const verticalSize = vue.ref(0);
const containerStyle = vue.computed(() => {
const wrapKls = props.wrap || props.fill ? { flexWrap: "wrap", marginBottom: `-${verticalSize.value}px` } : {};
const alignment = {
alignItems: props.alignment
};
return [wrapKls, alignment, props.style];
});
const itemStyle = vue.computed(() => {
const itemBaseStyle = {
paddingBottom: `${verticalSize.value}px`,
marginRight: `${horizontalSize.value}px`
};
const fillStyle = props.fill ? { flexGrow: 1, minWidth: `${props.fillRatio}%` } : {};
return [itemBaseStyle, fillStyle];
});
vue.watchEffect(() => {
const { size = "small", wrap, direction: dir, fill } = props;
if (isArray(size)) {
const [h = 0, v = 0] = size;
horizontalSize.value = h;
verticalSize.value = v;
} else {
let val;
if (isNumber(size)) {
val = size;
} else {
val = SIZE_MAP[size || "small"] || SIZE_MAP.small;
}
if ((wrap || fill) && dir === "horizontal") {
horizontalSize.value = verticalSize.value = val;
} else {
if (dir === "horizontal") {
horizontalSize.value = val;
verticalSize.value = 0;
} else {
verticalSize.value = val;
horizontalSize.value = 0;
}
}
}
});
return {
classes,
containerStyle,
itemStyle
};
}
const spaceProps = buildProps({
direction: {
type: String,
values: ["horizontal", "vertical"],
default: "horizontal"
},
class: {
type: definePropType([
String,
Object,
Array
]),
default: ""
},
style: {
type: definePropType([String, Array, Object]),
default: ""
},
alignment: {
type: definePropType(String),
default: "center"
},
prefixCls: {
type: String
},
spacer: {
type: definePropType([Object, String, Number, Array]),
default: null,
validator: (val) => vue.isVNode(val) || isNumber(val) || isString(val)
},
wrap: Boolean,
fill: Boolean,
fillRatio: {
type: Number,
default: 100
},
size: {
type: [String, Array, Number],
values: componentSizes,
validator: (val) => {
return isNumber(val) || isArray(val) && val.length === 2 && val.every(isNumber);
}
}
});
var Space = vue.defineComponent({
name: "ElSpace",
props: spaceProps,
setup(props, { slots }) {
const { classes, containerStyle, itemStyle } = useSpace(props);
function extractChildren(children, parentKey = "", extractedChildren = []) {
const { prefixCls } = props;
children.forEach((child, loopKey) => {
if (isFragment(child)) {
if (isArray(child.children)) {
child.children.forEach((nested, key) => {
if (isFragment(nested) && isArray(nested.children)) {
extractChildren(nested.children, `${parentKey + key}-`, extractedChildren);
} else {
extractedChildren.push(vue.createVNode(Item, {
style: itemStyle.value,
prefixCls,
key: `nested-${parentKey + key}`
}, {
default: () => [nested]
}, PatchFlags.PROPS | PatchFlags.STYLE, ["style", "prefixCls"]));
}
});
}
} else if (isValidElementNode(child)) {
extractedChildren.push(vue.createVNode(Item, {
style: itemStyle.value,
prefixCls,
key: `LoopKey${parentKey + loopKey}`
}, {
default: () => [child]
}, PatchFlags.PROPS | PatchFlags.STYLE, ["style", "prefixCls"]));
}
});
return extractedChildren;
}
return () => {
var _a;
const { spacer, direction } = props;
const children = vue.renderSlot(slots, "default", { key: 0 }, () => []);
if (((_a = children.children) != null ? _a : []).length === 0)
return null;
if (isArray(children.children)) {
let extractedChildren = extractChildren(children.children);
if (spacer) {
const len = extractedChildren.length - 1;
extractedChildren = extractedChildren.reduce((acc, child, idx) => {
const children2 = [...acc, child];
if (idx !== len) {
children2.push(vue.createVNode("span", {
style: [
itemStyle.value,
direction === "vertical" ? "width: 100%" : null
],
key: idx
}, [
vue.isVNode(spacer) ? spacer : vue.createTextVNode(spacer, PatchFlags.TEXT)
], PatchFlags.STYLE));
}
return children2;
}, []);
}
return vue.createVNode("div", {
class: classes.value,
style: containerStyle.value
}, extractedChildren, PatchFlags.STYLE | PatchFlags.CLASS);
}
return children.children;
};
}
});
const ElSpace = withInstall(Space);
const stepsProps = buildProps({
space: {
type: [Number, String],
default: ""
},
active: {
type: Number,
default: 0
},
direction: {
type: String,
default: "horizontal",
values: ["horizontal", "vertical"]
},
alignCenter: {
type: Boolean
},
simple: {
type: Boolean
},
finishStatus: {
type: String,
values: ["wait", "process", "finish", "error", "success"],
default: "finish"
},
processStatus: {
type: String,
values: ["wait", "process", "finish", "error", "success"],
default: "process"
}
});
const stepsEmits = {
[CHANGE_EVENT]: (newVal, oldVal) => [newVal, oldVal].every(isNumber)
};
const __default__$m = vue.defineComponent({
name: "ElSteps"
});
const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
...__default__$m,
props: stepsProps,
emits: stepsEmits,
setup(__props, { emit }) {
const props = __props;
const ns = useNamespace("steps");
const steps = vue.ref([]);
vue.watch(steps, () => {
steps.value.forEach((instance, index) => {
instance.setIndex(index);
});
});
vue.provide("ElSteps", { props, steps });
vue.watch(() => props.active, (newVal, oldVal) => {
emit(CHANGE_EVENT, newVal, oldVal);
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).m(_ctx.simple ? "simple" : _ctx.direction)])
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2);
};
}
});
var Steps = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__file", "steps.vue"]]);
const stepProps = buildProps({
title: {
type: String,
default: ""
},
icon: {
type: iconPropType
},
description: {
type: String,
default: ""
},
status: {
type: String,
values: ["", "wait", "process", "finish", "error", "success"],
default: ""
}
});
const __default__$l = vue.defineComponent({
name: "ElStep"
});
const _sfc_main$s = vue.defineComponent({
...__default__$l,
props: stepProps,
setup(__props) {
const props = __props;
const ns = useNamespace("step");
const index = vue.ref(-1);
const lineStyle = vue.ref({});
const internalStatus = vue.ref("");
const parent = vue.inject("ElSteps");
const currentInstance = vue.getCurrentInstance();
vue.onMounted(() => {
vue.watch([
() => parent.props.active,
() => parent.props.processStatus,
() => parent.props.finishStatus
], ([active]) => {
updateStatus(active);
}, { immediate: true });
});
vue.onBeforeUnmount(() => {
parent.steps.value = parent.steps.value.filter((instance) => instance.uid !== (currentInstance == null ? void 0 : currentInstance.uid));
});
const currentStatus = vue.computed(() => {
return props.status || internalStatus.value;
});
const prevStatus = vue.computed(() => {
const prevStep = parent.steps.value[index.value - 1];
return prevStep ? prevStep.currentStatus : "wait";
});
const isCenter = vue.computed(() => {
return parent.props.alignCenter;
});
const isVertical = vue.computed(() => {
return parent.props.direction === "vertical";
});
const isSimple = vue.computed(() => {
return parent.props.simple;
});
const stepsCount = vue.computed(() => {
return parent.steps.value.length;
});
const isLast = vue.computed(() => {
var _a;
return ((_a = parent.steps.value[stepsCount.value - 1]) == null ? void 0 : _a.uid) === (currentInstance == null ? void 0 : currentInstance.uid);
});
const space = vue.computed(() => {
return isSimple.value ? "" : parent.props.space;
});
const style = vue.computed(() => {
const style2 = {
flexBasis: typeof space.value === "number" ? `${space.value}px` : space.value ? space.value : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`
};
if (isVertical.value)
return style2;
if (isLast.value) {
style2.maxWidth = `${100 / stepsCount.value}%`;
}
return style2;
});
const setIndex = (val) => {
index.value = val;
};
const calcProgress = (status) => {
let step = 100;
const style2 = {};
style2.transitionDelay = `${150 * index.value}ms`;
if (status === parent.props.processStatus) {
step = 0;
} else if (status === "wait") {
step = 0;
style2.transitionDelay = `${-150 * index.value}ms`;
}
style2.borderWidth = step && !isSimple.value ? "1px" : 0;
style2[parent.props.direction === "vertical" ? "height" : "width"] = `${step}%`;
lineStyle.value = style2;
};
const updateStatus = (activeIndex) => {
if (activeIndex > index.value) {
internalStatus.value = parent.props.finishStatus;
} else if (activeIndex === index.value && prevStatus.value !== "error") {
internalStatus.value = parent.props.processStatus;
} else {
internalStatus.value = "wait";
}
const prevChild = parent.steps.value[index.value - 1];
if (prevChild)
prevChild.calcProgress(internalStatus.value);
};
const stepItemState = vue.reactive({
uid: vue.computed(() => currentInstance == null ? void 0 : currentInstance.uid),
currentStatus,
setIndex,
calcProgress
});
parent.steps.value = [...parent.steps.value, stepItemState];
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
style: vue.normalizeStyle(vue.unref(style)),
class: vue.normalizeClass([
vue.unref(ns).b(),
vue.unref(ns).is(vue.unref(isSimple) ? "simple" : vue.unref(parent).props.direction),
vue.unref(ns).is("flex", vue.unref(isLast) && !vue.unref(space) && !vue.unref(isCenter)),
vue.unref(ns).is("center", vue.unref(isCenter) && !vue.unref(isVertical) && !vue.unref(isSimple))
])
}, [
vue.createCommentVNode(" icon & line "),
vue.createElementVNode("div", {
class: vue.normalizeClass([vue.unref(ns).e("head"), vue.unref(ns).is(vue.unref(currentStatus))])
}, [
!vue.unref(isSimple) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("line"))
}, [
vue.createElementVNode("i", {
class: vue.normalizeClass(vue.unref(ns).e("line-inner")),
style: vue.normalizeStyle(lineStyle.value)
}, null, 6)
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(ns).is(_ctx.icon || _ctx.$slots.icon ? "icon" : "text")])
}, [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("icon-inner"))
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
]),
_: 1
}, 8, ["class"])) : vue.unref(currentStatus) === "success" ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 1,
class: vue.normalizeClass([vue.unref(ns).e("icon-inner"), vue.unref(ns).is("status")])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(check_default))
]),
_: 1
}, 8, ["class"])) : vue.unref(currentStatus) === "error" ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 2,
class: vue.normalizeClass([vue.unref(ns).e("icon-inner"), vue.unref(ns).is("status")])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(close_default))
]),
_: 1
}, 8, ["class"])) : !vue.unref(isSimple) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 3,
class: vue.normalizeClass(vue.unref(ns).e("icon-inner"))
}, vue.toDisplayString(index.value + 1), 3)) : vue.createCommentVNode("v-if", true)
])
], 2)
], 2),
vue.createCommentVNode(" title & description "),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("main"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass([vue.unref(ns).e("title"), vue.unref(ns).is(vue.unref(currentStatus))])
}, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
])
], 2),
vue.unref(isSimple) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("arrow"))
}, null, 2)) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass([vue.unref(ns).e("description"), vue.unref(ns).is(vue.unref(currentStatus))])
}, [
vue.renderSlot(_ctx.$slots, "description", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
])
], 2))
], 2)
], 6);
};
}
});
var Step = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__file", "item.vue"]]);
const ElSteps = withInstall(Steps, {
Step
});
const ElStep = withNoopInstall(Step);
const switchProps = buildProps({
modelValue: {
type: [Boolean, String, Number],
default: false
},
value: {
type: [Boolean, String, Number],
default: false
},
disabled: {
type: Boolean,
default: false
},
width: {
type: [String, Number],
default: ""
},
inlinePrompt: {
type: Boolean,
default: false
},
activeIcon: {
type: iconPropType
},
inactiveIcon: {
type: iconPropType
},
activeText: {
type: String,
default: ""
},
inactiveText: {
type: String,
default: ""
},
activeColor: {
type: String,
default: ""
},
inactiveColor: {
type: String,
default: ""
},
borderColor: {
type: String,
default: ""
},
activeValue: {
type: [Boolean, String, Number],
default: true
},
inactiveValue: {
type: [Boolean, String, Number],
default: false
},
name: {
type: String,
default: ""
},
validateEvent: {
type: Boolean,
default: true
},
id: String,
loading: {
type: Boolean,
default: false
},
beforeChange: {
type: definePropType(Function)
},
size: {
type: String,
validator: isValidComponentSize
},
tabindex: {
type: [String, Number]
}
});
const switchEmits = {
[UPDATE_MODEL_EVENT]: (val) => isBoolean(val) || isString(val) || isNumber(val),
[CHANGE_EVENT]: (val) => isBoolean(val) || isString(val) || isNumber(val),
[INPUT_EVENT]: (val) => isBoolean(val) || isString(val) || isNumber(val)
};
const _hoisted_1$d = ["onClick"];
const _hoisted_2$9 = ["id", "aria-checked", "aria-disabled", "name", "true-value", "false-value", "disabled", "tabindex", "onKeydown"];
const _hoisted_3$4 = ["aria-hidden"];
const _hoisted_4$2 = ["aria-hidden"];
const _hoisted_5$1 = ["aria-hidden"];
const COMPONENT_NAME$8 = "ElSwitch";
const __default__$k = vue.defineComponent({
name: COMPONENT_NAME$8
});
const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
...__default__$k,
props: switchProps,
emits: switchEmits,
setup(__props, { expose, emit }) {
const props = __props;
const vm = vue.getCurrentInstance();
const { formItem } = useFormItem();
const switchSize = useSize();
const ns = useNamespace("switch");
useDeprecated({
from: '"value"',
replacement: '"model-value" or "v-model"',
scope: COMPONENT_NAME$8,
version: "2.3.0",
ref: "https://element-plus.org/en-US/component/switch.html#attributes",
type: "Attribute"
}, vue.computed(() => {
var _a;
return !!((_a = vm.vnode.props) == null ? void 0 : _a.value);
}));
const { inputId } = useFormItemInputId(props, {
formItemContext: formItem
});
const switchDisabled = useDisabled(vue.computed(() => props.loading));
const isControlled = vue.ref(props.modelValue !== false);
const input = vue.ref();
const core = vue.ref();
const switchKls = vue.computed(() => [
ns.b(),
ns.m(switchSize.value),
ns.is("disabled", switchDisabled.value),
ns.is("checked", checked.value)
]);
const coreStyle = vue.computed(() => ({
width: addUnit(props.width)
}));
vue.watch(() => props.modelValue, () => {
isControlled.value = true;
});
vue.watch(() => props.value, () => {
isControlled.value = false;
});
const actualValue = vue.computed(() => {
return isControlled.value ? props.modelValue : props.value;
});
const checked = vue.computed(() => actualValue.value === props.activeValue);
if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
emit(UPDATE_MODEL_EVENT, props.inactiveValue);
emit(CHANGE_EVENT, props.inactiveValue);
emit(INPUT_EVENT, props.inactiveValue);
}
vue.watch(checked, (val) => {
var _a;
input.value.checked = val;
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
}
});
const handleChange = () => {
const val = checked.value ? props.inactiveValue : props.activeValue;
emit(UPDATE_MODEL_EVENT, val);
emit(CHANGE_EVENT, val);
emit(INPUT_EVENT, val);
vue.nextTick(() => {
input.value.checked = checked.value;
});
};
const switchValue = () => {
if (switchDisabled.value)
return;
const { beforeChange } = props;
if (!beforeChange) {
handleChange();
return;
}
const shouldChange = beforeChange();
const isPromiseOrBool = [
isPromise(shouldChange),
isBoolean(shouldChange)
].includes(true);
if (!isPromiseOrBool) {
throwError(COMPONENT_NAME$8, "beforeChange must return type `Promise` or `boolean`");
}
if (isPromise(shouldChange)) {
shouldChange.then((result) => {
if (result) {
handleChange();
}
}).catch((e) => {
});
} else if (shouldChange) {
handleChange();
}
};
const styles = vue.computed(() => {
return ns.cssVarBlock({
...props.activeColor ? { "on-color": props.activeColor } : null,
...props.inactiveColor ? { "off-color": props.inactiveColor } : null,
...props.borderColor ? { "border-color": props.borderColor } : null
});
});
const focus = () => {
var _a, _b;
(_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
};
vue.onMounted(() => {
input.value.checked = checked.value;
});
expose({
focus,
checked
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(switchKls)),
style: vue.normalizeStyle(vue.unref(styles)),
onClick: vue.withModifiers(switchValue, ["prevent"])
}, [
vue.createElementVNode("input", {
id: vue.unref(inputId),
ref_key: "input",
ref: input,
class: vue.normalizeClass(vue.unref(ns).e("input")),
type: "checkbox",
role: "switch",
"aria-checked": vue.unref(checked),
"aria-disabled": vue.unref(switchDisabled),
name: _ctx.name,
"true-value": _ctx.activeValue,
"false-value": _ctx.inactiveValue,
disabled: vue.unref(switchDisabled),
tabindex: _ctx.tabindex,
onChange: handleChange,
onKeydown: vue.withKeys(switchValue, ["enter"])
}, null, 42, _hoisted_2$9),
!_ctx.inlinePrompt && (_ctx.inactiveIcon || _ctx.inactiveText) ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: vue.normalizeClass([
vue.unref(ns).e("label"),
vue.unref(ns).em("label", "left"),
vue.unref(ns).is("active", !vue.unref(checked))
])
}, [
_ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 0 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inactiveIcon)))
]),
_: 1
})) : vue.createCommentVNode("v-if", true),
!_ctx.inactiveIcon && _ctx.inactiveText ? (vue.openBlock(), vue.createElementBlock("span", {
key: 1,
"aria-hidden": vue.unref(checked)
}, vue.toDisplayString(_ctx.inactiveText), 9, _hoisted_3$4)) : vue.createCommentVNode("v-if", true)
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("span", {
ref_key: "core",
ref: core,
class: vue.normalizeClass(vue.unref(ns).e("core")),
style: vue.normalizeStyle(vue.unref(coreStyle))
}, [
_ctx.inlinePrompt ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("inner"))
}, [
_ctx.activeIcon || _ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(vue.unref(ns).is("icon"))
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(checked) ? _ctx.activeIcon : _ctx.inactiveIcon)))
]),
_: 1
}, 8, ["class"])) : _ctx.activeText || _ctx.inactiveText ? (vue.openBlock(), vue.createElementBlock("span", {
key: 1,
class: vue.normalizeClass(vue.unref(ns).is("text")),
"aria-hidden": !vue.unref(checked)
}, vue.toDisplayString(vue.unref(checked) ? _ctx.activeText : _ctx.inactiveText), 11, _hoisted_4$2)) : vue.createCommentVNode("v-if", true)
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("action"))
}, [
_ctx.loading ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(vue.unref(ns).is("loading"))
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(loading_default))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true)
], 2)
], 6),
!_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText) ? (vue.openBlock(), vue.createElementBlock("span", {
key: 1,
class: vue.normalizeClass([
vue.unref(ns).e("label"),
vue.unref(ns).em("label", "right"),
vue.unref(ns).is("active", vue.unref(checked))
])
}, [
_ctx.activeIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), { key: 0 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.activeIcon)))
]),
_: 1
})) : vue.createCommentVNode("v-if", true),
!_ctx.activeIcon && _ctx.activeText ? (vue.openBlock(), vue.createElementBlock("span", {
key: 1,
"aria-hidden": !vue.unref(checked)
}, vue.toDisplayString(_ctx.activeText), 9, _hoisted_5$1)) : vue.createCommentVNode("v-if", true)
], 2)) : vue.createCommentVNode("v-if", true)
], 14, _hoisted_1$d);
};
}
});
var Switch = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__file", "switch.vue"]]);
const ElSwitch = withInstall(Switch);
var matchHtmlRegExp = /["'&<>]/;
var escapeHtml_1 = escapeHtml;
function escapeHtml(string) {
var str = "" + string;
var match = matchHtmlRegExp.exec(str);
if (!match) {
return str;
}
var escape;
var html = "";
var index = 0;
var lastIndex = 0;
for (index = match.index; index < str.length; index++) {
switch (str.charCodeAt(index)) {
case 34:
escape = """;
break;
case 38:
escape = "&";
break;
case 39:
escape = "'";
break;
case 60:
escape = "<";
break;
case 62:
escape = ">";
break;
default:
continue;
}
if (lastIndex !== index) {
html += str.substring(lastIndex, index);
}
lastIndex = index + 1;
html += escape;
}
return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
}
/*!
* escape-html
* Copyright(c) 2012-2013 TJ Holowaychuk
* Copyright(c) 2015 Andreas Lubbe
* Copyright(c) 2015 Tiancheng "Timothy" Gu
* MIT Licensed
*/
const getCell = function(event) {
var _a;
return (_a = event.target) == null ? void 0 : _a.closest("td");
};
const isObject = function(obj) {
return obj !== null && typeof obj === "object";
};
const orderBy = function(array, sortKey, reverse, sortMethod, sortBy) {
if (!sortKey && !sortMethod && (!sortBy || Array.isArray(sortBy) && !sortBy.length)) {
return array;
}
if (typeof reverse === "string") {
reverse = reverse === "descending" ? -1 : 1;
} else {
reverse = reverse && reverse < 0 ? -1 : 1;
}
const getKey = sortMethod ? null : function(value, index) {
if (sortBy) {
if (!Array.isArray(sortBy)) {
sortBy = [sortBy];
}
return sortBy.map((by) => {
if (typeof by === "string") {
return get(value, by);
} else {
return by(value, index, array);
}
});
}
if (sortKey !== "$key") {
if (isObject(value) && "$value" in value)
value = value.$value;
}
return [isObject(value) ? get(value, sortKey) : value];
};
const compare = function(a, b) {
if (sortMethod) {
return sortMethod(a.value, b.value);
}
for (let i = 0, len = a.key.length; i < len; i++) {
if (a.key[i] < b.key[i]) {
return -1;
}
if (a.key[i] > b.key[i]) {
return 1;
}
}
return 0;
};
return array.map((value, index) => {
return {
value,
index,
key: getKey ? getKey(value, index) : null
};
}).sort((a, b) => {
let order = compare(a, b);
if (!order) {
order = a.index - b.index;
}
return order * +reverse;
}).map((item) => item.value);
};
const getColumnById = function(table, columnId) {
let column = null;
table.columns.forEach((item) => {
if (item.id === columnId) {
column = item;
}
});
return column;
};
const getColumnByKey = function(table, columnKey) {
let column = null;
for (let i = 0; i < table.columns.length; i++) {
const item = table.columns[i];
if (item.columnKey === columnKey) {
column = item;
break;
}
}
if (!column)
throwError("ElTable", `No column matching with column-key: ${columnKey}`);
return column;
};
const getColumnByCell = function(table, cell, namespace) {
const matches = (cell.className || "").match(new RegExp(`${namespace}-table_[^\\s]+`, "gm"));
if (matches) {
return getColumnById(table, matches[0]);
}
return null;
};
const getRowIdentity = (row, rowKey) => {
if (!row)
throw new Error("Row is required when get row identity");
if (typeof rowKey === "string") {
if (!rowKey.includes(".")) {
return `${row[rowKey]}`;
}
const key = rowKey.split(".");
let current = row;
for (const element of key) {
current = current[element];
}
return `${current}`;
} else if (typeof rowKey === "function") {
return rowKey.call(null, row);
}
};
const getKeysMap = function(array, rowKey) {
const arrayMap = {};
(array || []).forEach((row, index) => {
arrayMap[getRowIdentity(row, rowKey)] = { row, index };
});
return arrayMap;
};
function mergeOptions(defaults, config) {
const options = {};
let key;
for (key in defaults) {
options[key] = defaults[key];
}
for (key in config) {
if (hasOwn(config, key)) {
const value = config[key];
if (typeof value !== "undefined") {
options[key] = value;
}
}
}
return options;
}
function parseWidth(width) {
if (width === "")
return width;
if (width !== void 0) {
width = Number.parseInt(width, 10);
if (Number.isNaN(width)) {
width = "";
}
}
return width;
}
function parseMinWidth(minWidth) {
if (minWidth === "")
return minWidth;
if (minWidth !== void 0) {
minWidth = parseWidth(minWidth);
if (Number.isNaN(minWidth)) {
minWidth = 80;
}
}
return minWidth;
}
function parseHeight(height) {
if (typeof height === "number") {
return height;
}
if (typeof height === "string") {
if (/^\d+(?:px)?$/.test(height)) {
return Number.parseInt(height, 10);
} else {
return height;
}
}
return null;
}
function compose(...funcs) {
if (funcs.length === 0) {
return (arg) => arg;
}
if (funcs.length === 1) {
return funcs[0];
}
return funcs.reduce((a, b) => (...args) => a(b(...args)));
}
function toggleRowStatus(statusArr, row, newVal) {
let changed = false;
const index = statusArr.indexOf(row);
const included = index !== -1;
const toggleStatus = (type) => {
if (type === "add") {
statusArr.push(row);
} else {
statusArr.splice(index, 1);
}
changed = true;
if (isArray(row.children)) {
row.children.forEach((item) => {
toggleRowStatus(statusArr, item, newVal != null ? newVal : !included);
});
}
};
if (isBoolean(newVal)) {
if (newVal && !included) {
toggleStatus("add");
} else if (!newVal && included) {
toggleStatus("remove");
}
} else {
included ? toggleStatus("remove") : toggleStatus("add");
}
return changed;
}
function walkTreeNode(root, cb, childrenKey = "children", lazyKey = "hasChildren") {
const isNil = (array) => !(Array.isArray(array) && array.length);
function _walker(parent, children, level) {
cb(parent, children, level);
children.forEach((item) => {
if (item[lazyKey]) {
cb(item, null, level + 1);
return;
}
const children2 = item[childrenKey];
if (!isNil(children2)) {
_walker(item, children2, level + 1);
}
});
}
root.forEach((item) => {
if (item[lazyKey]) {
cb(item, null, 0);
return;
}
const children = item[childrenKey];
if (!isNil(children)) {
_walker(item, children, 0);
}
});
}
let removePopper;
function createTablePopper(parentNode, trigger, popperContent, popperOptions, tooltipEffect) {
const { nextZIndex } = useZIndex();
const ns = parentNode == null ? void 0 : parentNode.dataset.prefix;
const scrollContainer = parentNode == null ? void 0 : parentNode.querySelector(`.${ns}-scrollbar__wrap`);
function renderContent() {
const isLight = tooltipEffect === "light";
const content2 = document.createElement("div");
content2.className = `${ns}-popper ${isLight ? "is-light" : "is-dark"}`;
popperContent = escapeHtml_1(popperContent);
content2.innerHTML = popperContent;
content2.style.zIndex = String(nextZIndex());
parentNode == null ? void 0 : parentNode.appendChild(content2);
return content2;
}
function renderArrow() {
const arrow2 = document.createElement("div");
arrow2.className = `${ns}-popper__arrow`;
return arrow2;
}
function showPopper() {
popperInstance && popperInstance.update();
}
removePopper == null ? void 0 : removePopper();
removePopper = () => {
try {
popperInstance && popperInstance.destroy();
content && (parentNode == null ? void 0 : parentNode.removeChild(content));
trigger.removeEventListener("mouseenter", showPopper);
trigger.removeEventListener("mouseleave", removePopper);
scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", removePopper);
removePopper = void 0;
} catch (e) {
}
};
let popperInstance = null;
const content = renderContent();
const arrow = renderArrow();
content.appendChild(arrow);
popperInstance = yn(trigger, content, {
strategy: "absolute",
modifiers: [
{
name: "offset",
options: {
offset: [0, 8]
}
},
{
name: "arrow",
options: {
element: arrow,
padding: 10
}
}
],
...popperOptions
});
trigger.addEventListener("mouseenter", showPopper);
trigger.addEventListener("mouseleave", removePopper);
scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", removePopper);
return popperInstance;
}
function getCurrentColumns(column) {
if (column.children) {
return flatMap(column.children, getCurrentColumns);
} else {
return [column];
}
}
function getColSpan(colSpan, column) {
return colSpan + column.colSpan;
}
const isFixedColumn = (index, fixed, store, realColumns) => {
let start = 0;
let after = index;
const columns = store.states.columns.value;
if (realColumns) {
const curColumns = getCurrentColumns(realColumns[index]);
const preColumns = columns.slice(0, columns.indexOf(curColumns[0]));
start = preColumns.reduce(getColSpan, 0);
after = start + curColumns.reduce(getColSpan, 0) - 1;
} else {
start = index;
}
let fixedLayout;
switch (fixed) {
case "left":
if (after < store.states.fixedLeafColumnsLength.value) {
fixedLayout = "left";
}
break;
case "right":
if (start >= columns.length - store.states.rightFixedLeafColumnsLength.value) {
fixedLayout = "right";
}
break;
default:
if (after < store.states.fixedLeafColumnsLength.value) {
fixedLayout = "left";
} else if (start >= columns.length - store.states.rightFixedLeafColumnsLength.value) {
fixedLayout = "right";
}
}
return fixedLayout ? {
direction: fixedLayout,
start,
after
} : {};
};
const getFixedColumnsClass = (namespace, index, fixed, store, realColumns, offset = 0) => {
const classes = [];
const { direction, start, after } = isFixedColumn(index, fixed, store, realColumns);
if (direction) {
const isLeft = direction === "left";
classes.push(`${namespace}-fixed-column--${direction}`);
if (isLeft && after + offset === store.states.fixedLeafColumnsLength.value - 1) {
classes.push("is-last-column");
} else if (!isLeft && start - offset === store.states.columns.value.length - store.states.rightFixedLeafColumnsLength.value) {
classes.push("is-first-column");
}
}
return classes;
};
function getOffset(offset, column) {
return offset + (column.realWidth === null || Number.isNaN(column.realWidth) ? Number(column.width) : column.realWidth);
}
const getFixedColumnOffset = (index, fixed, store, realColumns) => {
const {
direction,
start = 0,
after = 0
} = isFixedColumn(index, fixed, store, realColumns);
if (!direction) {
return;
}
const styles = {};
const isLeft = direction === "left";
const columns = store.states.columns.value;
if (isLeft) {
styles.left = columns.slice(0, start).reduce(getOffset, 0);
} else {
styles.right = columns.slice(after + 1).reverse().reduce(getOffset, 0);
}
return styles;
};
const ensurePosition = (style, key) => {
if (!style)
return;
if (!Number.isNaN(style[key])) {
style[key] = `${style[key]}px`;
}
};
function useExpand(watcherData) {
const instance = vue.getCurrentInstance();
const defaultExpandAll = vue.ref(false);
const expandRows = vue.ref([]);
const updateExpandRows = () => {
const data = watcherData.data.value || [];
const rowKey = watcherData.rowKey.value;
if (defaultExpandAll.value) {
expandRows.value = data.slice();
} else if (rowKey) {
const expandRowsMap = getKeysMap(expandRows.value, rowKey);
expandRows.value = data.reduce((prev, row) => {
const rowId = getRowIdentity(row, rowKey);
const rowInfo = expandRowsMap[rowId];
if (rowInfo) {
prev.push(row);
}
return prev;
}, []);
} else {
expandRows.value = [];
}
};
const toggleRowExpansion = (row, expanded) => {
const changed = toggleRowStatus(expandRows.value, row, expanded);
if (changed) {
instance.emit("expand-change", row, expandRows.value.slice());
}
};
const setExpandRowKeys = (rowKeys) => {
instance.store.assertRowKey();
const data = watcherData.data.value || [];
const rowKey = watcherData.rowKey.value;
const keysMap = getKeysMap(data, rowKey);
expandRows.value = rowKeys.reduce((prev, cur) => {
const info = keysMap[cur];
if (info) {
prev.push(info.row);
}
return prev;
}, []);
};
const isRowExpanded = (row) => {
const rowKey = watcherData.rowKey.value;
if (rowKey) {
const expandMap = getKeysMap(expandRows.value, rowKey);
return !!expandMap[getRowIdentity(row, rowKey)];
}
return expandRows.value.includes(row);
};
return {
updateExpandRows,
toggleRowExpansion,
setExpandRowKeys,
isRowExpanded,
states: {
expandRows,
defaultExpandAll
}
};
}
function useCurrent(watcherData) {
const instance = vue.getCurrentInstance();
const _currentRowKey = vue.ref(null);
const currentRow = vue.ref(null);
const setCurrentRowKey = (key) => {
instance.store.assertRowKey();
_currentRowKey.value = key;
setCurrentRowByKey(key);
};
const restoreCurrentRowKey = () => {
_currentRowKey.value = null;
};
const setCurrentRowByKey = (key) => {
const { data, rowKey } = watcherData;
let _currentRow = null;
if (rowKey.value) {
_currentRow = (vue.unref(data) || []).find((item) => getRowIdentity(item, rowKey.value) === key);
}
currentRow.value = _currentRow;
instance.emit("current-change", currentRow.value, null);
};
const updateCurrentRow = (_currentRow) => {
const oldCurrentRow = currentRow.value;
if (_currentRow && _currentRow !== oldCurrentRow) {
currentRow.value = _currentRow;
instance.emit("current-change", currentRow.value, oldCurrentRow);
return;
}
if (!_currentRow && oldCurrentRow) {
currentRow.value = null;
instance.emit("current-change", null, oldCurrentRow);
}
};
const updateCurrentRowData = () => {
const rowKey = watcherData.rowKey.value;
const data = watcherData.data.value || [];
const oldCurrentRow = currentRow.value;
if (!data.includes(oldCurrentRow) && oldCurrentRow) {
if (rowKey) {
const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
setCurrentRowByKey(currentRowKey);
} else {
currentRow.value = null;
}
if (currentRow.value === null) {
instance.emit("current-change", null, oldCurrentRow);
}
} else if (_currentRowKey.value) {
setCurrentRowByKey(_currentRowKey.value);
restoreCurrentRowKey();
}
};
return {
setCurrentRowKey,
restoreCurrentRowKey,
setCurrentRowByKey,
updateCurrentRow,
updateCurrentRowData,
states: {
_currentRowKey,
currentRow
}
};
}
function useTree$2(watcherData) {
const expandRowKeys = vue.ref([]);
const treeData = vue.ref({});
const indent = vue.ref(16);
const lazy = vue.ref(false);
const lazyTreeNodeMap = vue.ref({});
const lazyColumnIdentifier = vue.ref("hasChildren");
const childrenColumnName = vue.ref("children");
const instance = vue.getCurrentInstance();
const normalizedData = vue.computed(() => {
if (!watcherData.rowKey.value)
return {};
const data = watcherData.data.value || [];
return normalize(data);
});
const normalizedLazyNode = vue.computed(() => {
const rowKey = watcherData.rowKey.value;
const keys = Object.keys(lazyTreeNodeMap.value);
const res = {};
if (!keys.length)
return res;
keys.forEach((key) => {
if (lazyTreeNodeMap.value[key].length) {
const item = { children: [] };
lazyTreeNodeMap.value[key].forEach((row) => {
const currentRowKey = getRowIdentity(row, rowKey);
item.children.push(currentRowKey);
if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) {
res[currentRowKey] = { children: [] };
}
});
res[key] = item;
}
});
return res;
});
const normalize = (data) => {
const rowKey = watcherData.rowKey.value;
const res = {};
walkTreeNode(data, (parent, children, level) => {
const parentId = getRowIdentity(parent, rowKey);
if (Array.isArray(children)) {
res[parentId] = {
children: children.map((row) => getRowIdentity(row, rowKey)),
level
};
} else if (lazy.value) {
res[parentId] = {
children: [],
lazy: true,
level
};
}
}, childrenColumnName.value, lazyColumnIdentifier.value);
return res;
};
const updateTreeData = (ifChangeExpandRowKeys = false, ifExpandAll = ((_a) => (_a = instance.store) == null ? void 0 : _a.states.defaultExpandAll.value)()) => {
var _a2;
const nested = normalizedData.value;
const normalizedLazyNode_ = normalizedLazyNode.value;
const keys = Object.keys(nested);
const newTreeData = {};
if (keys.length) {
const oldTreeData = vue.unref(treeData);
const rootLazyRowKeys = [];
const getExpanded = (oldValue, key) => {
if (ifChangeExpandRowKeys) {
if (expandRowKeys.value) {
return ifExpandAll || expandRowKeys.value.includes(key);
} else {
return !!(ifExpandAll || (oldValue == null ? void 0 : oldValue.expanded));
}
} else {
const included = ifExpandAll || expandRowKeys.value && expandRowKeys.value.includes(key);
return !!((oldValue == null ? void 0 : oldValue.expanded) || included);
}
};
keys.forEach((key) => {
const oldValue = oldTreeData[key];
const newValue = { ...nested[key] };
newValue.expanded = getExpanded(oldValue, key);
if (newValue.lazy) {
const { loaded = false, loading = false } = oldValue || {};
newValue.loaded = !!loaded;
newValue.loading = !!loading;
rootLazyRowKeys.push(key);
}
newTreeData[key] = newValue;
});
const lazyKeys = Object.keys(normalizedLazyNode_);
if (lazy.value && lazyKeys.length && rootLazyRowKeys.length) {
lazyKeys.forEach((key) => {
const oldValue = oldTreeData[key];
const lazyNodeChildren = normalizedLazyNode_[key].children;
if (rootLazyRowKeys.includes(key)) {
if (newTreeData[key].children.length !== 0) {
throw new Error("[ElTable]children must be an empty array.");
}
newTreeData[key].children = lazyNodeChildren;
} else {
const { loaded = false, loading = false } = oldValue || {};
newTreeData[key] = {
lazy: true,
loaded: !!loaded,
loading: !!loading,
expanded: getExpanded(oldValue, key),
children: lazyNodeChildren,
level: ""
};
}
});
}
}
treeData.value = newTreeData;
(_a2 = instance.store) == null ? void 0 : _a2.updateTableScrollY();
};
vue.watch(() => expandRowKeys.value, () => {
updateTreeData(true);
});
vue.watch(() => normalizedData.value, () => {
updateTreeData();
});
vue.watch(() => normalizedLazyNode.value, () => {
updateTreeData();
});
const updateTreeExpandKeys = (value) => {
expandRowKeys.value = value;
updateTreeData();
};
const toggleTreeExpansion = (row, expanded) => {
instance.store.assertRowKey();
const rowKey = watcherData.rowKey.value;
const id = getRowIdentity(row, rowKey);
const data = id && treeData.value[id];
if (id && data && "expanded" in data) {
const oldExpanded = data.expanded;
expanded = typeof expanded === "undefined" ? !data.expanded : expanded;
treeData.value[id].expanded = expanded;
if (oldExpanded !== expanded) {
instance.emit("expand-change", row, expanded);
}
instance.store.updateTableScrollY();
}
};
const loadOrToggle = (row) => {
instance.store.assertRowKey();
const rowKey = watcherData.rowKey.value;
const id = getRowIdentity(row, rowKey);
const data = treeData.value[id];
if (lazy.value && data && "loaded" in data && !data.loaded) {
loadData(row, id, data);
} else {
toggleTreeExpansion(row, void 0);
}
};
const loadData = (row, key, treeNode) => {
const { load } = instance.props;
if (load && !treeData.value[key].loaded) {
treeData.value[key].loading = true;
load(row, treeNode, (data) => {
if (!Array.isArray(data)) {
throw new TypeError("[ElTable] data must be an array");
}
treeData.value[key].loading = false;
treeData.value[key].loaded = true;
treeData.value[key].expanded = true;
if (data.length) {
lazyTreeNodeMap.value[key] = data;
}
instance.emit("expand-change", row, true);
});
}
};
return {
loadData,
loadOrToggle,
toggleTreeExpansion,
updateTreeExpandKeys,
updateTreeData,
normalize,
states: {
expandRowKeys,
treeData,
indent,
lazy,
lazyTreeNodeMap,
lazyColumnIdentifier,
childrenColumnName
}
};
}
const sortData = (data, states) => {
const sortingColumn = states.sortingColumn;
if (!sortingColumn || typeof sortingColumn.sortable === "string") {
return data;
}
return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
};
const doFlattenColumns = (columns) => {
const result = [];
columns.forEach((column) => {
if (column.children) {
result.push.apply(result, doFlattenColumns(column.children));
} else {
result.push(column);
}
});
return result;
};
function useWatcher$1() {
var _a;
const instance = vue.getCurrentInstance();
const { size: tableSize } = vue.toRefs((_a = instance.proxy) == null ? void 0 : _a.$props);
const rowKey = vue.ref(null);
const data = vue.ref([]);
const _data = vue.ref([]);
const isComplex = vue.ref(false);
const _columns = vue.ref([]);
const originColumns = vue.ref([]);
const columns = vue.ref([]);
const fixedColumns = vue.ref([]);
const rightFixedColumns = vue.ref([]);
const leafColumns = vue.ref([]);
const fixedLeafColumns = vue.ref([]);
const rightFixedLeafColumns = vue.ref([]);
const leafColumnsLength = vue.ref(0);
const fixedLeafColumnsLength = vue.ref(0);
const rightFixedLeafColumnsLength = vue.ref(0);
const isAllSelected = vue.ref(false);
const selection = vue.ref([]);
const reserveSelection = vue.ref(false);
const selectOnIndeterminate = vue.ref(false);
const selectable = vue.ref(null);
const filters = vue.ref({});
const filteredData = vue.ref(null);
const sortingColumn = vue.ref(null);
const sortProp = vue.ref(null);
const sortOrder = vue.ref(null);
const hoverRow = vue.ref(null);
vue.watch(data, () => instance.state && scheduleLayout(false), {
deep: true
});
const assertRowKey = () => {
if (!rowKey.value)
throw new Error("[ElTable] prop row-key is required");
};
const updateChildFixed = (column) => {
var _a2;
(_a2 = column.children) == null ? void 0 : _a2.forEach((childColumn) => {
childColumn.fixed = column.fixed;
updateChildFixed(childColumn);
});
};
const updateColumns = () => {
_columns.value.forEach((column) => {
updateChildFixed(column);
});
fixedColumns.value = _columns.value.filter((column) => column.fixed === true || column.fixed === "left");
rightFixedColumns.value = _columns.value.filter((column) => column.fixed === "right");
if (fixedColumns.value.length > 0 && _columns.value[0] && _columns.value[0].type === "selection" && !_columns.value[0].fixed) {
_columns.value[0].fixed = true;
fixedColumns.value.unshift(_columns.value[0]);
}
const notFixedColumns = _columns.value.filter((column) => !column.fixed);
originColumns.value = [].concat(fixedColumns.value).concat(notFixedColumns).concat(rightFixedColumns.value);
const leafColumns2 = doFlattenColumns(notFixedColumns);
const fixedLeafColumns2 = doFlattenColumns(fixedColumns.value);
const rightFixedLeafColumns2 = doFlattenColumns(rightFixedColumns.value);
leafColumnsLength.value = leafColumns2.length;
fixedLeafColumnsLength.value = fixedLeafColumns2.length;
rightFixedLeafColumnsLength.value = rightFixedLeafColumns2.length;
columns.value = [].concat(fixedLeafColumns2).concat(leafColumns2).concat(rightFixedLeafColumns2);
isComplex.value = fixedColumns.value.length > 0 || rightFixedColumns.value.length > 0;
};
const scheduleLayout = (needUpdateColumns, immediate = false) => {
if (needUpdateColumns) {
updateColumns();
}
if (immediate) {
instance.state.doLayout();
} else {
instance.state.debouncedUpdateLayout();
}
};
const isSelected = (row) => {
return selection.value.includes(row);
};
const clearSelection = () => {
isAllSelected.value = false;
const oldSelection = selection.value;
if (oldSelection.length) {
selection.value = [];
instance.emit("selection-change", []);
}
};
const cleanSelection = () => {
let deleted;
if (rowKey.value) {
deleted = [];
const selectedMap = getKeysMap(selection.value, rowKey.value);
const dataMap = getKeysMap(data.value, rowKey.value);
for (const key in selectedMap) {
if (hasOwn(selectedMap, key) && !dataMap[key]) {
deleted.push(selectedMap[key].row);
}
}
} else {
deleted = selection.value.filter((item) => !data.value.includes(item));
}
if (deleted.length) {
const newSelection = selection.value.filter((item) => !deleted.includes(item));
selection.value = newSelection;
instance.emit("selection-change", newSelection.slice());
}
};
const getSelectionRows = () => {
return (selection.value || []).slice();
};
const toggleRowSelection = (row, selected = void 0, emitChange = true) => {
const changed = toggleRowStatus(selection.value, row, selected);
if (changed) {
const newSelection = (selection.value || []).slice();
if (emitChange) {
instance.emit("select", newSelection, row);
}
instance.emit("selection-change", newSelection);
}
};
const _toggleAllSelection = () => {
var _a2, _b;
const value = selectOnIndeterminate.value ? !isAllSelected.value : !(isAllSelected.value || selection.value.length);
isAllSelected.value = value;
let selectionChanged = false;
let childrenCount = 0;
const rowKey2 = (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.rowKey.value;
data.value.forEach((row, index) => {
const rowIndex = index + childrenCount;
if (selectable.value) {
if (selectable.value.call(null, row, rowIndex) && toggleRowStatus(selection.value, row, value)) {
selectionChanged = true;
}
} else {
if (toggleRowStatus(selection.value, row, value)) {
selectionChanged = true;
}
}
childrenCount += getChildrenCount(getRowIdentity(row, rowKey2));
});
if (selectionChanged) {
instance.emit("selection-change", selection.value ? selection.value.slice() : []);
}
instance.emit("select-all", selection.value);
};
const updateSelectionByRowKey = () => {
const selectedMap = getKeysMap(selection.value, rowKey.value);
data.value.forEach((row) => {
const rowId = getRowIdentity(row, rowKey.value);
const rowInfo = selectedMap[rowId];
if (rowInfo) {
selection.value[rowInfo.index] = row;
}
});
};
const updateAllSelected = () => {
var _a2, _b, _c;
if (((_a2 = data.value) == null ? void 0 : _a2.length) === 0) {
isAllSelected.value = false;
return;
}
let selectedMap;
if (rowKey.value) {
selectedMap = getKeysMap(selection.value, rowKey.value);
}
const isSelected2 = function(row) {
if (selectedMap) {
return !!selectedMap[getRowIdentity(row, rowKey.value)];
} else {
return selection.value.includes(row);
}
};
let isAllSelected_ = true;
let selectedCount = 0;
let childrenCount = 0;
for (let i = 0, j = (data.value || []).length; i < j; i++) {
const keyProp = (_c = (_b = instance == null ? void 0 : instance.store) == null ? void 0 : _b.states) == null ? void 0 : _c.rowKey.value;
const rowIndex = i + childrenCount;
const item = data.value[i];
const isRowSelectable = selectable.value && selectable.value.call(null, item, rowIndex);
if (!isSelected2(item)) {
if (!selectable.value || isRowSelectable) {
isAllSelected_ = false;
break;
}
} else {
selectedCount++;
}
childrenCount += getChildrenCount(getRowIdentity(item, keyProp));
}
if (selectedCount === 0)
isAllSelected_ = false;
isAllSelected.value = isAllSelected_;
};
const getChildrenCount = (rowKey2) => {
var _a2;
if (!instance || !instance.store)
return 0;
const { treeData } = instance.store.states;
let count = 0;
const children = (_a2 = treeData.value[rowKey2]) == null ? void 0 : _a2.children;
if (children) {
count += children.length;
children.forEach((childKey) => {
count += getChildrenCount(childKey);
});
}
return count;
};
const updateFilters = (columns2, values) => {
if (!Array.isArray(columns2)) {
columns2 = [columns2];
}
const filters_ = {};
columns2.forEach((col) => {
filters.value[col.id] = values;
filters_[col.columnKey || col.id] = values;
});
return filters_;
};
const updateSort = (column, prop, order) => {
if (sortingColumn.value && sortingColumn.value !== column) {
sortingColumn.value.order = null;
}
sortingColumn.value = column;
sortProp.value = prop;
sortOrder.value = order;
};
const execFilter = () => {
let sourceData = vue.unref(_data);
Object.keys(filters.value).forEach((columnId) => {
const values = filters.value[columnId];
if (!values || values.length === 0)
return;
const column = getColumnById({
columns: columns.value
}, columnId);
if (column && column.filterMethod) {
sourceData = sourceData.filter((row) => {
return values.some((value) => column.filterMethod.call(null, value, row, column));
});
}
});
filteredData.value = sourceData;
};
const execSort = () => {
data.value = sortData(filteredData.value, {
sortingColumn: sortingColumn.value,
sortProp: sortProp.value,
sortOrder: sortOrder.value
});
};
const execQuery = (ignore = void 0) => {
if (!(ignore && ignore.filter)) {
execFilter();
}
execSort();
};
const clearFilter = (columnKeys) => {
const { tableHeaderRef } = instance.refs;
if (!tableHeaderRef)
return;
const panels = Object.assign({}, tableHeaderRef.filterPanels);
const keys = Object.keys(panels);
if (!keys.length)
return;
if (typeof columnKeys === "string") {
columnKeys = [columnKeys];
}
if (Array.isArray(columnKeys)) {
const columns_ = columnKeys.map((key) => getColumnByKey({
columns: columns.value
}, key));
keys.forEach((key) => {
const column = columns_.find((col) => col.id === key);
if (column) {
column.filteredValue = [];
}
});
instance.store.commit("filterChange", {
column: columns_,
values: [],
silent: true,
multi: true
});
} else {
keys.forEach((key) => {
const column = columns.value.find((col) => col.id === key);
if (column) {
column.filteredValue = [];
}
});
filters.value = {};
instance.store.commit("filterChange", {
column: {},
values: [],
silent: true
});
}
};
const clearSort = () => {
if (!sortingColumn.value)
return;
updateSort(null, null, null);
instance.store.commit("changeSortCondition", {
silent: true
});
};
const {
setExpandRowKeys,
toggleRowExpansion,
updateExpandRows,
states: expandStates,
isRowExpanded
} = useExpand({
data,
rowKey
});
const {
updateTreeExpandKeys,
toggleTreeExpansion,
updateTreeData,
loadOrToggle,
states: treeStates
} = useTree$2({
data,
rowKey
});
const {
updateCurrentRowData,
updateCurrentRow,
setCurrentRowKey,
states: currentData
} = useCurrent({
data,
rowKey
});
const setExpandRowKeysAdapter = (val) => {
setExpandRowKeys(val);
updateTreeExpandKeys(val);
};
const toggleRowExpansionAdapter = (row, expanded) => {
const hasExpandColumn = columns.value.some(({ type }) => type === "expand");
if (hasExpandColumn) {
toggleRowExpansion(row, expanded);
} else {
toggleTreeExpansion(row, expanded);
}
};
return {
assertRowKey,
updateColumns,
scheduleLayout,
isSelected,
clearSelection,
cleanSelection,
getSelectionRows,
toggleRowSelection,
_toggleAllSelection,
toggleAllSelection: null,
updateSelectionByRowKey,
updateAllSelected,
updateFilters,
updateCurrentRow,
updateSort,
execFilter,
execSort,
execQuery,
clearFilter,
clearSort,
toggleRowExpansion,
setExpandRowKeysAdapter,
setCurrentRowKey,
toggleRowExpansionAdapter,
isRowExpanded,
updateExpandRows,
updateCurrentRowData,
loadOrToggle,
updateTreeData,
states: {
tableSize,
rowKey,
data,
_data,
isComplex,
_columns,
originColumns,
columns,
fixedColumns,
rightFixedColumns,
leafColumns,
fixedLeafColumns,
rightFixedLeafColumns,
leafColumnsLength,
fixedLeafColumnsLength,
rightFixedLeafColumnsLength,
isAllSelected,
selection,
reserveSelection,
selectOnIndeterminate,
selectable,
filters,
filteredData,
sortingColumn,
sortProp,
sortOrder,
hoverRow,
...expandStates,
...treeStates,
...currentData
}
};
}
function replaceColumn(array, column) {
return array.map((item) => {
var _a;
if (item.id === column.id) {
return column;
} else if ((_a = item.children) == null ? void 0 : _a.length) {
item.children = replaceColumn(item.children, column);
}
return item;
});
}
function sortColumn(array) {
array.forEach((item) => {
var _a, _b;
item.no = (_a = item.getColumnIndex) == null ? void 0 : _a.call(item);
if ((_b = item.children) == null ? void 0 : _b.length) {
sortColumn(item.children);
}
});
array.sort((cur, pre) => cur.no - pre.no);
}
function useStore() {
const instance = vue.getCurrentInstance();
const watcher = useWatcher$1();
const ns = useNamespace("table");
const mutations = {
setData(states, data) {
const dataInstanceChanged = vue.unref(states._data) !== data;
states.data.value = data;
states._data.value = data;
instance.store.execQuery();
instance.store.updateCurrentRowData();
instance.store.updateExpandRows();
instance.store.updateTreeData(instance.store.states.defaultExpandAll.value);
if (vue.unref(states.reserveSelection)) {
instance.store.assertRowKey();
instance.store.updateSelectionByRowKey();
} else {
if (dataInstanceChanged) {
instance.store.clearSelection();
} else {
instance.store.cleanSelection();
}
}
instance.store.updateAllSelected();
if (instance.$ready) {
instance.store.scheduleLayout();
}
},
insertColumn(states, column, parent) {
const array = vue.unref(states._columns);
let newColumns = [];
if (!parent) {
array.push(column);
newColumns = array;
} else {
if (parent && !parent.children) {
parent.children = [];
}
parent.children.push(column);
newColumns = replaceColumn(array, parent);
}
sortColumn(newColumns);
states._columns.value = newColumns;
if (column.type === "selection") {
states.selectable.value = column.selectable;
states.reserveSelection.value = column.reserveSelection;
}
if (instance.$ready) {
instance.store.updateColumns();
instance.store.scheduleLayout();
}
},
removeColumn(states, column, parent) {
const array = vue.unref(states._columns) || [];
if (parent) {
parent.children.splice(parent.children.findIndex((item) => item.id === column.id), 1);
if (parent.children.length === 0) {
delete parent.children;
}
states._columns.value = replaceColumn(array, parent);
} else {
const index = array.indexOf(column);
if (index > -1) {
array.splice(index, 1);
states._columns.value = array;
}
}
if (instance.$ready) {
instance.store.updateColumns();
instance.store.scheduleLayout();
}
},
sort(states, options) {
const { prop, order, init } = options;
if (prop) {
const column = vue.unref(states.columns).find((column2) => column2.property === prop);
if (column) {
column.order = order;
instance.store.updateSort(column, prop, order);
instance.store.commit("changeSortCondition", { init });
}
}
},
changeSortCondition(states, options) {
const { sortingColumn, sortProp, sortOrder } = states;
const columnValue = vue.unref(sortingColumn), propValue = vue.unref(sortProp), orderValue = vue.unref(sortOrder);
if (orderValue === null) {
states.sortingColumn.value = null;
states.sortProp.value = null;
}
const ignore = { filter: true };
instance.store.execQuery(ignore);
if (!options || !(options.silent || options.init)) {
instance.emit("sort-change", {
column: columnValue,
prop: propValue,
order: orderValue
});
}
instance.store.updateTableScrollY();
},
filterChange(_states, options) {
const { column, values, silent } = options;
const newFilters = instance.store.updateFilters(column, values);
instance.store.execQuery();
if (!silent) {
instance.emit("filter-change", newFilters);
}
instance.store.updateTableScrollY();
},
toggleAllSelection() {
instance.store.toggleAllSelection();
},
rowSelectedChanged(_states, row) {
instance.store.toggleRowSelection(row);
instance.store.updateAllSelected();
},
setHoverRow(states, row) {
states.hoverRow.value = row;
},
setCurrentRow(_states, row) {
instance.store.updateCurrentRow(row);
}
};
const commit = function(name, ...args) {
const mutations2 = instance.store.mutations;
if (mutations2[name]) {
mutations2[name].apply(instance, [instance.store.states].concat(args));
} else {
throw new Error(`Action not found: ${name}`);
}
};
const updateTableScrollY = function() {
vue.nextTick(() => instance.layout.updateScrollY.apply(instance.layout));
};
return {
ns,
...watcher,
mutations,
commit,
updateTableScrollY
};
}
const InitialStateMap = {
rowKey: "rowKey",
defaultExpandAll: "defaultExpandAll",
selectOnIndeterminate: "selectOnIndeterminate",
indent: "indent",
lazy: "lazy",
data: "data",
["treeProps.hasChildren"]: {
key: "lazyColumnIdentifier",
default: "hasChildren"
},
["treeProps.children"]: {
key: "childrenColumnName",
default: "children"
}
};
function createStore(table, props) {
if (!table) {
throw new Error("Table is required.");
}
const store = useStore();
store.toggleAllSelection = debounce(store._toggleAllSelection, 10);
Object.keys(InitialStateMap).forEach((key) => {
handleValue(getArrKeysValue(props, key), key, store);
});
proxyTableProps(store, props);
return store;
}
function proxyTableProps(store, props) {
Object.keys(InitialStateMap).forEach((key) => {
vue.watch(() => getArrKeysValue(props, key), (value) => {
handleValue(value, key, store);
});
});
}
function handleValue(value, propsKey, store) {
let newVal = value;
let storeKey = InitialStateMap[propsKey];
if (typeof InitialStateMap[propsKey] === "object") {
storeKey = storeKey.key;
newVal = newVal || InitialStateMap[propsKey].default;
}
store.states[storeKey].value = newVal;
}
function getArrKeysValue(props, keys) {
if (keys.includes(".")) {
const keyList = keys.split(".");
let value = props;
keyList.forEach((key) => {
value = value[key];
});
return value;
} else {
return props[keys];
}
}
class TableLayout {
constructor(options) {
this.observers = [];
this.table = null;
this.store = null;
this.columns = [];
this.fit = true;
this.showHeader = true;
this.height = vue.ref(null);
this.scrollX = vue.ref(false);
this.scrollY = vue.ref(false);
this.bodyWidth = vue.ref(null);
this.fixedWidth = vue.ref(null);
this.rightFixedWidth = vue.ref(null);
this.gutterWidth = 0;
for (const name in options) {
if (hasOwn(options, name)) {
if (vue.isRef(this[name])) {
this[name].value = options[name];
} else {
this[name] = options[name];
}
}
}
if (!this.table) {
throw new Error("Table is required for Table Layout");
}
if (!this.store) {
throw new Error("Store is required for Table Layout");
}
}
updateScrollY() {
const height = this.height.value;
if (height === null)
return false;
const scrollBarRef = this.table.refs.scrollBarRef;
if (this.table.vnode.el && scrollBarRef) {
let scrollY = true;
const prevScrollY = this.scrollY.value;
scrollY = scrollBarRef.wrap$.scrollHeight > scrollBarRef.wrap$.clientHeight;
this.scrollY.value = scrollY;
return prevScrollY !== scrollY;
}
return false;
}
setHeight(value, prop = "height") {
if (!isClient)
return;
const el = this.table.vnode.el;
value = parseHeight(value);
this.height.value = Number(value);
if (!el && (value || value === 0))
return vue.nextTick(() => this.setHeight(value, prop));
if (typeof value === "number") {
el.style[prop] = `${value}px`;
this.updateElsHeight();
} else if (typeof value === "string") {
el.style[prop] = value;
this.updateElsHeight();
}
}
setMaxHeight(value) {
this.setHeight(value, "max-height");
}
getFlattenColumns() {
const flattenColumns = [];
const columns = this.table.store.states.columns.value;
columns.forEach((column) => {
if (column.isColumnGroup) {
flattenColumns.push.apply(flattenColumns, column.columns);
} else {
flattenColumns.push(column);
}
});
return flattenColumns;
}
updateElsHeight() {
this.updateScrollY();
this.notifyObservers("scrollable");
}
headerDisplayNone(elm) {
if (!elm)
return true;
let headerChild = elm;
while (headerChild.tagName !== "DIV") {
if (getComputedStyle(headerChild).display === "none") {
return true;
}
headerChild = headerChild.parentElement;
}
return false;
}
updateColumnsWidth() {
if (!isClient)
return;
const fit = this.fit;
const bodyWidth = this.table.vnode.el.clientWidth;
let bodyMinWidth = 0;
const flattenColumns = this.getFlattenColumns();
const flexColumns = flattenColumns.filter((column) => typeof column.width !== "number");
flattenColumns.forEach((column) => {
if (typeof column.width === "number" && column.realWidth)
column.realWidth = null;
});
if (flexColumns.length > 0 && fit) {
flattenColumns.forEach((column) => {
bodyMinWidth += Number(column.width || column.minWidth || 80);
});
if (bodyMinWidth <= bodyWidth) {
this.scrollX.value = false;
const totalFlexWidth = bodyWidth - bodyMinWidth;
if (flexColumns.length === 1) {
flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth;
} else {
const allColumnsWidth = flexColumns.reduce((prev, column) => prev + Number(column.minWidth || 80), 0);
const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
let noneFirstWidth = 0;
flexColumns.forEach((column, index) => {
if (index === 0)
return;
const flexWidth = Math.floor(Number(column.minWidth || 80) * flexWidthPerPixel);
noneFirstWidth += flexWidth;
column.realWidth = Number(column.minWidth || 80) + flexWidth;
});
flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
}
} else {
this.scrollX.value = true;
flexColumns.forEach((column) => {
column.realWidth = Number(column.minWidth);
});
}
this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth);
this.table.state.resizeState.value.width = this.bodyWidth.value;
} else {
flattenColumns.forEach((column) => {
if (!column.width && !column.minWidth) {
column.realWidth = 80;
} else {
column.realWidth = Number(column.width || column.minWidth);
}
bodyMinWidth += column.realWidth;
});
this.scrollX.value = bodyMinWidth > bodyWidth;
this.bodyWidth.value = bodyMinWidth;
}
const fixedColumns = this.store.states.fixedColumns.value;
if (fixedColumns.length > 0) {
let fixedWidth = 0;
fixedColumns.forEach((column) => {
fixedWidth += Number(column.realWidth || column.width);
});
this.fixedWidth.value = fixedWidth;
}
const rightFixedColumns = this.store.states.rightFixedColumns.value;
if (rightFixedColumns.length > 0) {
let rightFixedWidth = 0;
rightFixedColumns.forEach((column) => {
rightFixedWidth += Number(column.realWidth || column.width);
});
this.rightFixedWidth.value = rightFixedWidth;
}
this.notifyObservers("columns");
}
addObserver(observer) {
this.observers.push(observer);
}
removeObserver(observer) {
const index = this.observers.indexOf(observer);
if (index !== -1) {
this.observers.splice(index, 1);
}
}
notifyObservers(event) {
const observers = this.observers;
observers.forEach((observer) => {
var _a, _b;
switch (event) {
case "columns":
(_a = observer.state) == null ? void 0 : _a.onColumnsChange(this);
break;
case "scrollable":
(_b = observer.state) == null ? void 0 : _b.onScrollableChange(this);
break;
default:
throw new Error(`Table Layout don't have event ${event}.`);
}
});
}
}
var TableLayout$1 = TableLayout;
const { CheckboxGroup: ElCheckboxGroup } = ElCheckbox;
const _sfc_main$q = vue.defineComponent({
name: "ElTableFilterPanel",
components: {
ElCheckbox,
ElCheckboxGroup,
ElScrollbar,
ElTooltip,
ElIcon,
ArrowDown: arrow_down_default,
ArrowUp: arrow_up_default
},
directives: { ClickOutside },
props: {
placement: {
type: String,
default: "bottom-start"
},
store: {
type: Object
},
column: {
type: Object
},
upDataColumn: {
type: Function
}
},
setup(props) {
const instance = vue.getCurrentInstance();
const { t } = useLocale();
const ns = useNamespace("table-filter");
const parent = instance == null ? void 0 : instance.parent;
if (!parent.filterPanels.value[props.column.id]) {
parent.filterPanels.value[props.column.id] = instance;
}
const tooltipVisible = vue.ref(false);
const tooltip = vue.ref(null);
const filters = vue.computed(() => {
return props.column && props.column.filters;
});
const filterValue = vue.computed({
get: () => {
var _a;
return (((_a = props.column) == null ? void 0 : _a.filteredValue) || [])[0];
},
set: (value) => {
if (filteredValue.value) {
if (typeof value !== "undefined" && value !== null) {
filteredValue.value.splice(0, 1, value);
} else {
filteredValue.value.splice(0, 1);
}
}
}
});
const filteredValue = vue.computed({
get() {
if (props.column) {
return props.column.filteredValue || [];
}
return [];
},
set(value) {
if (props.column) {
props.upDataColumn("filteredValue", value);
}
}
});
const multiple = vue.computed(() => {
if (props.column) {
return props.column.filterMultiple;
}
return true;
});
const isActive = (filter) => {
return filter.value === filterValue.value;
};
const hidden = () => {
tooltipVisible.value = false;
};
const showFilterPanel = (e) => {
e.stopPropagation();
tooltipVisible.value = !tooltipVisible.value;
};
const hideFilterPanel = () => {
tooltipVisible.value = false;
};
const handleConfirm = () => {
confirmFilter(filteredValue.value);
hidden();
};
const handleReset = () => {
filteredValue.value = [];
confirmFilter(filteredValue.value);
hidden();
};
const handleSelect = (_filterValue) => {
filterValue.value = _filterValue;
if (typeof _filterValue !== "undefined" && _filterValue !== null) {
confirmFilter(filteredValue.value);
} else {
confirmFilter([]);
}
hidden();
};
const confirmFilter = (filteredValue2) => {
props.store.commit("filterChange", {
column: props.column,
values: filteredValue2
});
props.store.updateAllSelected();
};
vue.watch(tooltipVisible, (value) => {
if (props.column) {
props.upDataColumn("filterOpened", value);
}
}, {
immediate: true
});
const popperPaneRef = vue.computed(() => {
var _a, _b;
return (_b = (_a = tooltip.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
});
return {
tooltipVisible,
multiple,
filteredValue,
filterValue,
filters,
handleConfirm,
handleReset,
handleSelect,
isActive,
t,
ns,
showFilterPanel,
hideFilterPanel,
popperPaneRef,
tooltip
};
}
});
const _hoisted_1$c = { key: 0 };
const _hoisted_2$8 = ["disabled"];
const _hoisted_3$3 = ["label", "onClick"];
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_checkbox = vue.resolveComponent("el-checkbox");
const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_arrow_up = vue.resolveComponent("arrow-up");
const _component_arrow_down = vue.resolveComponent("arrow-down");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
const _directive_click_outside = vue.resolveDirective("click-outside");
return vue.openBlock(), vue.createBlock(_component_el_tooltip, {
ref: "tooltip",
visible: _ctx.tooltipVisible,
offset: 0,
placement: _ctx.placement,
"show-arrow": false,
"stop-popper-mouse-event": false,
teleported: "",
effect: "light",
pure: "",
"popper-class": _ctx.ns.b(),
persistent: ""
}, {
content: vue.withCtx(() => [
_ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("content"))
}, [
vue.createVNode(_component_el_scrollbar, {
"wrap-class": _ctx.ns.e("wrap")
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_checkbox_group, {
modelValue: _ctx.filteredValue,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.filteredValue = $event),
class: vue.normalizeClass(_ctx.ns.e("checkbox-group"))
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
return vue.openBlock(), vue.createBlock(_component_el_checkbox, {
key: filter.value,
label: filter.value
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(filter.text), 1)
]),
_: 2
}, 1032, ["label"]);
}), 128))
]),
_: 1
}, 8, ["modelValue", "class"])
]),
_: 1
}, 8, ["wrap-class"])
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("bottom"))
}, [
vue.createElementVNode("button", {
class: vue.normalizeClass({ [_ctx.ns.is("disabled")]: _ctx.filteredValue.length === 0 }),
disabled: _ctx.filteredValue.length === 0,
type: "button",
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleConfirm && _ctx.handleConfirm(...args))
}, vue.toDisplayString(_ctx.t("el.table.confirmFilter")), 11, _hoisted_2$8),
vue.createElementVNode("button", {
type: "button",
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleReset && _ctx.handleReset(...args))
}, vue.toDisplayString(_ctx.t("el.table.resetFilter")), 1)
], 2)
])) : (vue.openBlock(), vue.createElementBlock("ul", {
key: 1,
class: vue.normalizeClass(_ctx.ns.e("list"))
}, [
vue.createElementVNode("li", {
class: vue.normalizeClass([
_ctx.ns.e("list-item"),
{
[_ctx.ns.is("active")]: _ctx.filterValue === void 0 || _ctx.filterValue === null
}
]),
onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleSelect(null))
}, vue.toDisplayString(_ctx.t("el.table.clearFilter")), 3),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: filter.value,
class: vue.normalizeClass([_ctx.ns.e("list-item"), _ctx.ns.is("active", _ctx.isActive(filter))]),
label: filter.value,
onClick: ($event) => _ctx.handleSelect(filter.value)
}, vue.toDisplayString(filter.text), 11, _hoisted_3$3);
}), 128))
], 2))
]),
default: vue.withCtx(() => [
vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass([
`${_ctx.ns.namespace.value}-table__column-filter-trigger`,
`${_ctx.ns.namespace.value}-none-outline`
]),
onClick: _cache[4] || (_cache[4] = (...args) => _ctx.showFilterPanel && _ctx.showFilterPanel(...args))
}, [
vue.createVNode(_component_el_icon, null, {
default: vue.withCtx(() => [
_ctx.column.filterOpened ? (vue.openBlock(), vue.createBlock(_component_arrow_up, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_arrow_down, { key: 1 }))
]),
_: 1
})
], 2)), [
[_directive_click_outside, _ctx.hideFilterPanel, _ctx.popperPaneRef]
])
]),
_: 1
}, 8, ["visible", "placement", "popper-class"]);
}
var FilterPanel = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$4], ["__file", "filter-panel.vue"]]);
function useLayoutObserver(root) {
const instance = vue.getCurrentInstance();
vue.onBeforeMount(() => {
tableLayout.value.addObserver(instance);
});
vue.onMounted(() => {
onColumnsChange(tableLayout.value);
onScrollableChange(tableLayout.value);
});
vue.onUpdated(() => {
onColumnsChange(tableLayout.value);
onScrollableChange(tableLayout.value);
});
vue.onUnmounted(() => {
tableLayout.value.removeObserver(instance);
});
const tableLayout = vue.computed(() => {
const layout = root.layout;
if (!layout) {
throw new Error("Can not find table layout.");
}
return layout;
});
const onColumnsChange = (layout) => {
var _a;
const cols = ((_a = root.vnode.el) == null ? void 0 : _a.querySelectorAll("colgroup > col")) || [];
if (!cols.length)
return;
const flattenColumns = layout.getFlattenColumns();
const columnsMap = {};
flattenColumns.forEach((column) => {
columnsMap[column.id] = column;
});
for (let i = 0, j = cols.length; i < j; i++) {
const col = cols[i];
const name = col.getAttribute("name");
const column = columnsMap[name];
if (column) {
col.setAttribute("width", column.realWidth || column.width);
}
}
};
const onScrollableChange = (layout) => {
var _a, _b;
const cols = ((_a = root.vnode.el) == null ? void 0 : _a.querySelectorAll("colgroup > col[name=gutter]")) || [];
for (let i = 0, j = cols.length; i < j; i++) {
const col = cols[i];
col.setAttribute("width", layout.scrollY.value ? layout.gutterWidth : "0");
}
const ths = ((_b = root.vnode.el) == null ? void 0 : _b.querySelectorAll("th.gutter")) || [];
for (let i = 0, j = ths.length; i < j; i++) {
const th = ths[i];
th.style.width = layout.scrollY.value ? `${layout.gutterWidth}px` : "0";
th.style.display = layout.scrollY.value ? "" : "none";
}
};
return {
tableLayout: tableLayout.value,
onColumnsChange,
onScrollableChange
};
}
const TABLE_INJECTION_KEY = Symbol("ElTable");
function useEvent(props, emit) {
const instance = vue.getCurrentInstance();
const parent = vue.inject(TABLE_INJECTION_KEY);
const handleFilterClick = (event) => {
event.stopPropagation();
return;
};
const handleHeaderClick = (event, column) => {
if (!column.filters && column.sortable) {
handleSortClick(event, column, false);
} else if (column.filterable && !column.sortable) {
handleFilterClick(event);
}
parent == null ? void 0 : parent.emit("header-click", column, event);
};
const handleHeaderContextMenu = (event, column) => {
parent == null ? void 0 : parent.emit("header-contextmenu", column, event);
};
const draggingColumn = vue.ref(null);
const dragging = vue.ref(false);
const dragState = vue.ref({});
const handleMouseDown = (event, column) => {
if (!isClient)
return;
if (column.children && column.children.length > 0)
return;
if (draggingColumn.value && props.border) {
dragging.value = true;
const table = parent;
emit("set-drag-visible", true);
const tableEl = table == null ? void 0 : table.vnode.el;
const tableLeft = tableEl.getBoundingClientRect().left;
const columnEl = instance.vnode.el.querySelector(`th.${column.id}`);
const columnRect = columnEl.getBoundingClientRect();
const minLeft = columnRect.left - tableLeft + 30;
addClass(columnEl, "noclick");
dragState.value = {
startMouseLeft: event.clientX,
startLeft: columnRect.right - tableLeft,
startColumnLeft: columnRect.left - tableLeft,
tableLeft
};
const resizeProxy = table == null ? void 0 : table.refs.resizeProxy;
resizeProxy.style.left = `${dragState.value.startLeft}px`;
document.onselectstart = function() {
return false;
};
document.ondragstart = function() {
return false;
};
const handleMouseMove2 = (event2) => {
const deltaLeft = event2.clientX - dragState.value.startMouseLeft;
const proxyLeft = dragState.value.startLeft + deltaLeft;
resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`;
};
const handleMouseUp = () => {
if (dragging.value) {
const { startColumnLeft, startLeft } = dragState.value;
const finalLeft = Number.parseInt(resizeProxy.style.left, 10);
const columnWidth = finalLeft - startColumnLeft;
column.width = column.realWidth = columnWidth;
table == null ? void 0 : table.emit("header-dragend", column.width, startLeft - startColumnLeft, column, event);
requestAnimationFrame(() => {
props.store.scheduleLayout(false, true);
});
document.body.style.cursor = "";
dragging.value = false;
draggingColumn.value = null;
dragState.value = {};
emit("set-drag-visible", false);
}
document.removeEventListener("mousemove", handleMouseMove2);
document.removeEventListener("mouseup", handleMouseUp);
document.onselectstart = null;
document.ondragstart = null;
setTimeout(() => {
removeClass(columnEl, "noclick");
}, 0);
};
document.addEventListener("mousemove", handleMouseMove2);
document.addEventListener("mouseup", handleMouseUp);
}
};
const handleMouseMove = (event, column) => {
var _a;
if (column.children && column.children.length > 0)
return;
const target = (_a = event.target) == null ? void 0 : _a.closest("th");
if (!column || !column.resizable)
return;
if (!dragging.value && props.border) {
const rect = target.getBoundingClientRect();
const bodyStyle = document.body.style;
if (rect.width > 12 && rect.right - event.pageX < 8) {
bodyStyle.cursor = "col-resize";
if (hasClass(target, "is-sortable")) {
target.style.cursor = "col-resize";
}
draggingColumn.value = column;
} else if (!dragging.value) {
bodyStyle.cursor = "";
if (hasClass(target, "is-sortable")) {
target.style.cursor = "pointer";
}
draggingColumn.value = null;
}
}
};
const handleMouseOut = () => {
if (!isClient)
return;
document.body.style.cursor = "";
};
const toggleOrder = ({ order, sortOrders }) => {
if (order === "")
return sortOrders[0];
const index = sortOrders.indexOf(order || null);
return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1];
};
const handleSortClick = (event, column, givenOrder) => {
var _a;
event.stopPropagation();
const order = column.order === givenOrder ? null : givenOrder || toggleOrder(column);
const target = (_a = event.target) == null ? void 0 : _a.closest("th");
if (target) {
if (hasClass(target, "noclick")) {
removeClass(target, "noclick");
return;
}
}
if (!column.sortable)
return;
const states = props.store.states;
let sortProp = states.sortProp.value;
let sortOrder;
const sortingColumn = states.sortingColumn.value;
if (sortingColumn !== column || sortingColumn === column && sortingColumn.order === null) {
if (sortingColumn) {
sortingColumn.order = null;
}
states.sortingColumn.value = column;
sortProp = column.property;
}
if (!order) {
sortOrder = column.order = null;
} else {
sortOrder = column.order = order;
}
states.sortProp.value = sortProp;
states.sortOrder.value = sortOrder;
parent == null ? void 0 : parent.store.commit("changeSortCondition");
};
return {
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick
};
}
function useStyle$2(props) {
const parent = vue.inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const getHeaderRowStyle = (rowIndex) => {
const headerRowStyle = parent == null ? void 0 : parent.props.headerRowStyle;
if (typeof headerRowStyle === "function") {
return headerRowStyle.call(null, { rowIndex });
}
return headerRowStyle;
};
const getHeaderRowClass = (rowIndex) => {
const classes = [];
const headerRowClassName = parent == null ? void 0 : parent.props.headerRowClassName;
if (typeof headerRowClassName === "string") {
classes.push(headerRowClassName);
} else if (typeof headerRowClassName === "function") {
classes.push(headerRowClassName.call(null, { rowIndex }));
}
return classes.join(" ");
};
const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
var _a;
let headerCellStyles = (_a = parent == null ? void 0 : parent.props.headerCellStyle) != null ? _a : {};
if (typeof headerCellStyles === "function") {
headerCellStyles = headerCellStyles.call(null, {
rowIndex,
columnIndex,
row,
column
});
}
const fixedStyle = getFixedColumnOffset(columnIndex, column.fixed, props.store, row);
ensurePosition(fixedStyle, "left");
ensurePosition(fixedStyle, "right");
return Object.assign({}, headerCellStyles, fixedStyle);
};
const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
const fixedClasses = getFixedColumnsClass(ns.b(), columnIndex, column.fixed, props.store, row);
const classes = [
column.id,
column.order,
column.headerAlign,
column.className,
column.labelClassName,
...fixedClasses
];
if (!column.children) {
classes.push("is-leaf");
}
if (column.sortable) {
classes.push("is-sortable");
}
const headerCellClassName = parent == null ? void 0 : parent.props.headerCellClassName;
if (typeof headerCellClassName === "string") {
classes.push(headerCellClassName);
} else if (typeof headerCellClassName === "function") {
classes.push(headerCellClassName.call(null, {
rowIndex,
columnIndex,
row,
column
}));
}
classes.push(ns.e("cell"));
return classes.filter((className) => Boolean(className)).join(" ");
};
return {
getHeaderRowStyle,
getHeaderRowClass,
getHeaderCellStyle,
getHeaderCellClass
};
}
const getAllColumns = (columns) => {
const result = [];
columns.forEach((column) => {
if (column.children) {
result.push(column);
result.push.apply(result, getAllColumns(column.children));
} else {
result.push(column);
}
});
return result;
};
const convertToRows = (originColumns) => {
let maxLevel = 1;
const traverse = (column, parent) => {
if (parent) {
column.level = parent.level + 1;
if (maxLevel < column.level) {
maxLevel = column.level;
}
}
if (column.children) {
let colSpan = 0;
column.children.forEach((subColumn) => {
traverse(subColumn, column);
colSpan += subColumn.colSpan;
});
column.colSpan = colSpan;
} else {
column.colSpan = 1;
}
};
originColumns.forEach((column) => {
column.level = 1;
traverse(column, void 0);
});
const rows = [];
for (let i = 0; i < maxLevel; i++) {
rows.push([]);
}
const allColumns = getAllColumns(originColumns);
allColumns.forEach((column) => {
if (!column.children) {
column.rowSpan = maxLevel - column.level + 1;
} else {
column.rowSpan = 1;
column.children.forEach((col) => col.isSubColumn = true);
}
rows[column.level - 1].push(column);
});
return rows;
};
function useUtils$1(props) {
const parent = vue.inject(TABLE_INJECTION_KEY);
const columnRows = vue.computed(() => {
return convertToRows(props.store.states.originColumns.value);
});
const isGroup = vue.computed(() => {
const result = columnRows.value.length > 1;
if (result && parent) {
parent.state.isGroup.value = true;
}
return result;
});
const toggleAllSelection = (event) => {
event.stopPropagation();
parent == null ? void 0 : parent.store.commit("toggleAllSelection");
};
return {
isGroup,
toggleAllSelection,
columnRows
};
}
var TableHeader = vue.defineComponent({
name: "ElTableHeader",
components: {
ElCheckbox
},
props: {
fixed: {
type: String,
default: ""
},
store: {
required: true,
type: Object
},
border: Boolean,
defaultSort: {
type: Object,
default: () => {
return {
prop: "",
order: ""
};
}
}
},
setup(props, { emit }) {
const instance = vue.getCurrentInstance();
const parent = vue.inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const filterPanels = vue.ref({});
const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
vue.onMounted(async () => {
await vue.nextTick();
await vue.nextTick();
const { prop, order } = props.defaultSort;
parent == null ? void 0 : parent.store.commit("sort", { prop, order, init: true });
});
const {
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick
} = useEvent(props, emit);
const {
getHeaderRowStyle,
getHeaderRowClass,
getHeaderCellStyle,
getHeaderCellClass
} = useStyle$2(props);
const { isGroup, toggleAllSelection, columnRows } = useUtils$1(props);
instance.state = {
onColumnsChange,
onScrollableChange
};
instance.filterPanels = filterPanels;
return {
ns,
filterPanels,
onColumnsChange,
onScrollableChange,
columnRows,
getHeaderRowClass,
getHeaderRowStyle,
getHeaderCellClass,
getHeaderCellStyle,
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick,
isGroup,
toggleAllSelection
};
},
render() {
const {
ns,
isGroup,
columnRows,
getHeaderCellStyle,
getHeaderCellClass,
getHeaderRowClass,
getHeaderRowStyle,
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleSortClick,
handleMouseOut,
store,
$parent
} = this;
let rowSpan = 1;
return vue.h("thead", {
class: { [ns.is("group")]: isGroup }
}, columnRows.map((subColumns, rowIndex) => vue.h("tr", {
class: getHeaderRowClass(rowIndex),
key: rowIndex,
style: getHeaderRowStyle(rowIndex)
}, subColumns.map((column, cellIndex) => {
if (column.rowSpan > rowSpan) {
rowSpan = column.rowSpan;
}
return vue.h("th", {
class: getHeaderCellClass(rowIndex, cellIndex, subColumns, column),
colspan: column.colSpan,
key: `${column.id}-thead`,
rowspan: column.rowSpan,
style: getHeaderCellStyle(rowIndex, cellIndex, subColumns, column),
onClick: ($event) => handleHeaderClick($event, column),
onContextmenu: ($event) => handleHeaderContextMenu($event, column),
onMousedown: ($event) => handleMouseDown($event, column),
onMousemove: ($event) => handleMouseMove($event, column),
onMouseout: handleMouseOut
}, [
vue.h("div", {
class: [
"cell",
column.filteredValue && column.filteredValue.length > 0 ? "highlight" : ""
]
}, [
column.renderHeader ? column.renderHeader({
column,
$index: cellIndex,
store,
_self: $parent
}) : column.label,
column.sortable && vue.h("span", {
onClick: ($event) => handleSortClick($event, column),
class: "caret-wrapper"
}, [
vue.h("i", {
onClick: ($event) => handleSortClick($event, column, "ascending"),
class: "sort-caret ascending"
}),
vue.h("i", {
onClick: ($event) => handleSortClick($event, column, "descending"),
class: "sort-caret descending"
})
]),
column.filterable && vue.h(FilterPanel, {
store,
placement: column.filterPlacement || "bottom-start",
column,
upDataColumn: (key, value) => {
column[key] = value;
}
})
])
]);
}))));
}
});
function useEvents(props) {
const parent = vue.inject(TABLE_INJECTION_KEY);
const tooltipContent = vue.ref("");
const tooltipTrigger = vue.ref(vue.h("div"));
const handleEvent = (event, row, name) => {
var _a;
const table = parent;
const cell = getCell(event);
let column;
const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
if (cell) {
column = getColumnByCell({
columns: props.store.states.columns.value
}, cell, namespace);
if (column) {
table == null ? void 0 : table.emit(`cell-${name}`, row, column, cell, event);
}
}
table == null ? void 0 : table.emit(`row-${name}`, row, column, event);
};
const handleDoubleClick = (event, row) => {
handleEvent(event, row, "dblclick");
};
const handleClick = (event, row) => {
props.store.commit("setCurrentRow", row);
handleEvent(event, row, "click");
};
const handleContextMenu = (event, row) => {
handleEvent(event, row, "contextmenu");
};
const handleMouseEnter = debounce((index) => {
props.store.commit("setHoverRow", index);
}, 30);
const handleMouseLeave = debounce(() => {
props.store.commit("setHoverRow", null);
}, 30);
const handleCellMouseEnter = (event, row, tooltipEffect) => {
var _a;
const table = parent;
const cell = getCell(event);
const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
if (cell) {
const column = getColumnByCell({
columns: props.store.states.columns.value
}, cell, namespace);
const hoverState = table.hoverState = { cell, column, row };
table == null ? void 0 : table.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event);
}
const cellChild = event.target.querySelector(".cell");
if (!(hasClass(cellChild, `${namespace}-tooltip`) && cellChild.childNodes.length)) {
return;
}
const range = document.createRange();
range.setStart(cellChild, 0);
range.setEnd(cellChild, cellChild.childNodes.length);
const rangeWidth = range.getBoundingClientRect().width;
const padding = (Number.parseInt(getStyle(cellChild, "paddingLeft"), 10) || 0) + (Number.parseInt(getStyle(cellChild, "paddingRight"), 10) || 0);
if (rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) {
createTablePopper(parent == null ? void 0 : parent.refs.tableWrapper, cell, cell.innerText || cell.textContent, {
placement: "top",
strategy: "fixed"
}, tooltipEffect);
}
};
const handleCellMouseLeave = (event) => {
const cell = getCell(event);
if (!cell)
return;
const oldHoverState = parent == null ? void 0 : parent.hoverState;
parent == null ? void 0 : parent.emit("cell-mouse-leave", oldHoverState == null ? void 0 : oldHoverState.row, oldHoverState == null ? void 0 : oldHoverState.column, oldHoverState == null ? void 0 : oldHoverState.cell, event);
};
return {
handleDoubleClick,
handleClick,
handleContextMenu,
handleMouseEnter,
handleMouseLeave,
handleCellMouseEnter,
handleCellMouseLeave,
tooltipContent,
tooltipTrigger
};
}
function useStyles$1(props) {
const parent = vue.inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const getRowStyle = (row, rowIndex) => {
const rowStyle = parent == null ? void 0 : parent.props.rowStyle;
if (typeof rowStyle === "function") {
return rowStyle.call(null, {
row,
rowIndex
});
}
return rowStyle || null;
};
const getRowClass = (row, rowIndex) => {
const classes = [ns.e("row")];
if ((parent == null ? void 0 : parent.props.highlightCurrentRow) && row === props.store.states.currentRow.value) {
classes.push("current-row");
}
if (props.stripe && rowIndex % 2 === 1) {
classes.push(ns.em("row", "striped"));
}
const rowClassName = parent == null ? void 0 : parent.props.rowClassName;
if (typeof rowClassName === "string") {
classes.push(rowClassName);
} else if (typeof rowClassName === "function") {
classes.push(rowClassName.call(null, {
row,
rowIndex
}));
}
return classes;
};
const getCellStyle = (rowIndex, columnIndex, row, column) => {
const cellStyle = parent == null ? void 0 : parent.props.cellStyle;
let cellStyles = cellStyle != null ? cellStyle : {};
if (typeof cellStyle === "function") {
cellStyles = cellStyle.call(null, {
rowIndex,
columnIndex,
row,
column
});
}
const fixedStyle = getFixedColumnOffset(columnIndex, props == null ? void 0 : props.fixed, props.store);
ensurePosition(fixedStyle, "left");
ensurePosition(fixedStyle, "right");
return Object.assign({}, cellStyles, fixedStyle);
};
const getCellClass = (rowIndex, columnIndex, row, column, offset) => {
const fixedClasses = getFixedColumnsClass(ns.b(), columnIndex, props == null ? void 0 : props.fixed, props.store, void 0, offset);
const classes = [column.id, column.align, column.className, ...fixedClasses];
const cellClassName = parent == null ? void 0 : parent.props.cellClassName;
if (typeof cellClassName === "string") {
classes.push(cellClassName);
} else if (typeof cellClassName === "function") {
classes.push(cellClassName.call(null, {
rowIndex,
columnIndex,
row,
column
}));
}
classes.push(ns.e("cell"));
return classes.filter((className) => Boolean(className)).join(" ");
};
const getSpan = (row, column, rowIndex, columnIndex) => {
let rowspan = 1;
let colspan = 1;
const fn = parent == null ? void 0 : parent.props.spanMethod;
if (typeof fn === "function") {
const result = fn({
row,
column,
rowIndex,
columnIndex
});
if (Array.isArray(result)) {
rowspan = result[0];
colspan = result[1];
} else if (typeof result === "object") {
rowspan = result.rowspan;
colspan = result.colspan;
}
}
return { rowspan, colspan };
};
const getColspanRealWidth = (columns, colspan, index) => {
if (colspan < 1) {
return columns[index].realWidth;
}
const widthArr = columns.map(({ realWidth, width }) => realWidth || width).slice(index, index + colspan);
return Number(widthArr.reduce((acc, width) => Number(acc) + Number(width), -1));
};
return {
getRowStyle,
getRowClass,
getCellStyle,
getCellClass,
getSpan,
getColspanRealWidth
};
}
function useRender$1(props) {
const parent = vue.inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const {
handleDoubleClick,
handleClick,
handleContextMenu,
handleMouseEnter,
handleMouseLeave,
handleCellMouseEnter,
handleCellMouseLeave,
tooltipContent,
tooltipTrigger
} = useEvents(props);
const {
getRowStyle,
getRowClass,
getCellStyle,
getCellClass,
getSpan,
getColspanRealWidth
} = useStyles$1(props);
const firstDefaultColumnIndex = vue.computed(() => {
return props.store.states.columns.value.findIndex(({ type }) => type === "default");
});
const getKeyOfRow = (row, index) => {
const rowKey = parent.props.rowKey;
if (rowKey) {
return getRowIdentity(row, rowKey);
}
return index;
};
const rowRender = (row, $index, treeRowData, expanded = false) => {
const { tooltipEffect, store } = props;
const { indent, columns } = store.states;
const rowClasses = getRowClass(row, $index);
let display = true;
if (treeRowData) {
rowClasses.push(ns.em("row", `level-${treeRowData.level}`));
display = treeRowData.display;
}
const displayStyle = display ? null : {
display: "none"
};
return vue.h("tr", {
style: [displayStyle, getRowStyle(row, $index)],
class: rowClasses,
key: getKeyOfRow(row, $index),
onDblclick: ($event) => handleDoubleClick($event, row),
onClick: ($event) => handleClick($event, row),
onContextmenu: ($event) => handleContextMenu($event, row),
onMouseenter: () => handleMouseEnter($index),
onMouseleave: handleMouseLeave
}, columns.value.map((column, cellIndex) => {
const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
if (!rowspan || !colspan) {
return null;
}
const columnData = { ...column };
columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
const data = {
store: props.store,
_self: props.context || parent,
column: columnData,
row,
$index,
cellIndex,
expanded
};
if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
data.treeNode = {
indent: treeRowData.level * indent.value,
level: treeRowData.level
};
if (typeof treeRowData.expanded === "boolean") {
data.treeNode.expanded = treeRowData.expanded;
if ("loading" in treeRowData) {
data.treeNode.loading = treeRowData.loading;
}
if ("noLazyChildren" in treeRowData) {
data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
}
}
}
const baseKey = `${$index},${cellIndex}`;
const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
const tdChildren = cellChildren(cellIndex, column, data);
return vue.h("td", {
style: getCellStyle($index, cellIndex, row, column),
class: getCellClass($index, cellIndex, row, column, colspan - 1),
key: `${patchKey}${baseKey}`,
rowspan,
colspan,
onMouseenter: ($event) => handleCellMouseEnter($event, row, tooltipEffect),
onMouseleave: handleCellMouseLeave
}, [tdChildren]);
}));
};
const cellChildren = (cellIndex, column, data) => {
return column.renderCell(data);
};
const wrappedRowRender = (row, $index) => {
const store = props.store;
const { isRowExpanded, assertRowKey } = store;
const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
const columns = store.states.columns.value;
const hasExpandColumn = columns.some(({ type }) => type === "expand");
if (hasExpandColumn) {
const expanded = isRowExpanded(row);
const tr = rowRender(row, $index, void 0, expanded);
const renderExpanded = parent.renderExpanded;
if (expanded) {
if (!renderExpanded) {
console.error("[Element Error]renderExpanded is required.");
return tr;
}
return [
[
tr,
vue.h("tr", {
key: `expanded-row__${tr.key}`
}, [
vue.h("td", {
colspan: columns.length,
class: `${ns.e("cell")} ${ns.e("expanded-cell")}`
}, [renderExpanded({ row, $index, store, expanded })])
])
]
];
} else {
return [[tr]];
}
} else if (Object.keys(treeData.value).length) {
assertRowKey();
const key = getRowIdentity(row, rowKey.value);
let cur = treeData.value[key];
let treeRowData = null;
if (cur) {
treeRowData = {
expanded: cur.expanded,
level: cur.level,
display: true
};
if (typeof cur.lazy === "boolean") {
if (typeof cur.loaded === "boolean" && cur.loaded) {
treeRowData.noLazyChildren = !(cur.children && cur.children.length);
}
treeRowData.loading = cur.loading;
}
}
const tmp = [rowRender(row, $index, treeRowData)];
if (cur) {
let i = 0;
const traverse = (children, parent2) => {
if (!(children && children.length && parent2))
return;
children.forEach((node) => {
const innerTreeRowData = {
display: parent2.display && parent2.expanded,
level: parent2.level + 1,
expanded: false,
noLazyChildren: false,
loading: false
};
const childKey = getRowIdentity(node, rowKey.value);
if (childKey === void 0 || childKey === null) {
throw new Error("For nested data item, row-key is required.");
}
cur = { ...treeData.value[childKey] };
if (cur) {
innerTreeRowData.expanded = cur.expanded;
cur.level = cur.level || innerTreeRowData.level;
cur.display = !!(cur.expanded && innerTreeRowData.display);
if (typeof cur.lazy === "boolean") {
if (typeof cur.loaded === "boolean" && cur.loaded) {
innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
}
innerTreeRowData.loading = cur.loading;
}
}
i++;
tmp.push(rowRender(node, $index + i, innerTreeRowData));
if (cur) {
const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value];
traverse(nodes2, cur);
}
});
};
cur.display = true;
const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
traverse(nodes, cur);
}
return tmp;
} else {
return rowRender(row, $index, void 0);
}
};
return {
wrappedRowRender,
tooltipContent,
tooltipTrigger
};
}
const defaultProps$2 = {
store: {
required: true,
type: Object
},
stripe: Boolean,
tooltipEffect: String,
context: {
default: () => ({}),
type: Object
},
rowClassName: [String, Function],
rowStyle: [Object, Function],
fixed: {
type: String,
default: ""
},
highlight: Boolean
};
var defaultProps$3 = defaultProps$2;
var TableBody = vue.defineComponent({
name: "ElTableBody",
props: defaultProps$3,
setup(props) {
const instance = vue.getCurrentInstance();
const parent = vue.inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const { wrappedRowRender, tooltipContent, tooltipTrigger } = useRender$1(props);
const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
vue.watch(props.store.states.hoverRow, (newVal, oldVal) => {
if (!props.store.states.isComplex.value || !isClient)
return;
let raf = window.requestAnimationFrame;
if (!raf) {
raf = (fn) => window.setTimeout(fn, 16);
}
raf(() => {
const el = instance == null ? void 0 : instance.vnode.el;
const rows = Array.from((el == null ? void 0 : el.children) || []).filter((e) => e == null ? void 0 : e.classList.contains(`${ns.e("row")}`));
const oldRow = rows[oldVal];
const newRow = rows[newVal];
if (oldRow) {
removeClass(oldRow, "hover-row");
}
if (newRow) {
addClass(newRow, "hover-row");
}
});
});
vue.onUnmounted(() => {
var _a;
(_a = removePopper) == null ? void 0 : _a();
});
return {
ns,
onColumnsChange,
onScrollableChange,
wrappedRowRender,
tooltipContent,
tooltipTrigger
};
},
render() {
const { wrappedRowRender, store } = this;
const data = store.states.data.value || [];
return vue.h("tbody", {}, [
data.reduce((acc, row) => {
return acc.concat(wrappedRowRender(row, acc.length));
}, [])
]);
}
});
function hColgroup(props) {
const isAuto = props.tableLayout === "auto";
let columns = props.columns || [];
if (isAuto) {
if (columns.every((column) => column.width === void 0)) {
columns = [];
}
}
const getPropsData = (column) => {
const propsData = {
key: `${props.tableLayout}_${column.id}`,
style: {},
name: void 0
};
if (isAuto) {
propsData.style = {
width: `${column.width}px`
};
} else {
propsData.name = column.id;
}
return propsData;
};
return vue.h("colgroup", {}, columns.map((column) => vue.h("col", getPropsData(column))));
}
hColgroup.props = ["columns", "tableLayout"];
function useMapState() {
const table = vue.inject(TABLE_INJECTION_KEY);
const store = table == null ? void 0 : table.store;
const leftFixedLeafCount = vue.computed(() => {
return store.states.fixedLeafColumnsLength.value;
});
const rightFixedLeafCount = vue.computed(() => {
return store.states.rightFixedColumns.value.length;
});
const columnsCount = vue.computed(() => {
return store.states.columns.value.length;
});
const leftFixedCount = vue.computed(() => {
return store.states.fixedColumns.value.length;
});
const rightFixedCount = vue.computed(() => {
return store.states.rightFixedColumns.value.length;
});
return {
leftFixedLeafCount,
rightFixedLeafCount,
columnsCount,
leftFixedCount,
rightFixedCount,
columns: store.states.columns
};
}
function useStyle$1(props) {
const { columns } = useMapState();
const ns = useNamespace("table");
const getCellClasses = (columns2, cellIndex) => {
const column = columns2[cellIndex];
const classes = [
ns.e("cell"),
column.id,
column.align,
column.labelClassName,
...getFixedColumnsClass(ns.b(), cellIndex, column.fixed, props.store)
];
if (column.className) {
classes.push(column.className);
}
if (!column.children) {
classes.push(ns.is("leaf"));
}
return classes;
};
const getCellStyles = (column, cellIndex) => {
const fixedStyle = getFixedColumnOffset(cellIndex, column.fixed, props.store);
ensurePosition(fixedStyle, "left");
ensurePosition(fixedStyle, "right");
return fixedStyle;
};
return {
getCellClasses,
getCellStyles,
columns
};
}
var TableFooter = vue.defineComponent({
name: "ElTableFooter",
props: {
fixed: {
type: String,
default: ""
},
store: {
required: true,
type: Object
},
summaryMethod: Function,
sumText: String,
border: Boolean,
defaultSort: {
type: Object,
default: () => {
return {
prop: "",
order: ""
};
}
}
},
setup(props) {
const { getCellClasses, getCellStyles, columns } = useStyle$1(props);
const ns = useNamespace("table");
return {
ns,
getCellClasses,
getCellStyles,
columns
};
},
render() {
const {
columns,
getCellStyles,
getCellClasses,
summaryMethod,
sumText,
ns
} = this;
const data = this.store.states.data.value;
let sums = [];
if (summaryMethod) {
sums = summaryMethod({
columns,
data
});
} else {
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = sumText;
return;
}
const values = data.map((item) => Number(item[column.property]));
const precisions = [];
let notNumber = true;
values.forEach((value) => {
if (!Number.isNaN(+value)) {
notNumber = false;
const decimal = `${value}`.split(".")[1];
precisions.push(decimal ? decimal.length : 0);
}
});
const precision = Math.max.apply(null, precisions);
if (!notNumber) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!Number.isNaN(+value)) {
return Number.parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
} else {
return prev;
}
}, 0);
} else {
sums[index] = "";
}
});
}
return vue.h("table", {
class: ns.e("footer"),
cellspacing: "0",
cellpadding: "0",
border: "0"
}, [
hColgroup({
columns
}),
vue.h("tbody", [
vue.h("tr", {}, [
...columns.map((column, cellIndex) => vue.h("td", {
key: cellIndex,
colspan: column.colSpan,
rowspan: column.rowSpan,
class: getCellClasses(columns, cellIndex),
style: getCellStyles(column, cellIndex)
}, [
vue.h("div", {
class: ["cell", column.labelClassName]
}, [sums[cellIndex]])
]))
])
])
]);
}
});
function useUtils(store) {
const setCurrentRow = (row) => {
store.commit("setCurrentRow", row);
};
const getSelectionRows = () => {
return store.getSelectionRows();
};
const toggleRowSelection = (row, selected) => {
store.toggleRowSelection(row, selected, false);
store.updateAllSelected();
};
const clearSelection = () => {
store.clearSelection();
};
const clearFilter = (columnKeys) => {
store.clearFilter(columnKeys);
};
const toggleAllSelection = () => {
store.commit("toggleAllSelection");
};
const toggleRowExpansion = (row, expanded) => {
store.toggleRowExpansionAdapter(row, expanded);
};
const clearSort = () => {
store.clearSort();
};
const sort = (prop, order) => {
store.commit("sort", { prop, order });
};
return {
setCurrentRow,
getSelectionRows,
toggleRowSelection,
clearSelection,
clearFilter,
toggleAllSelection,
toggleRowExpansion,
clearSort,
sort
};
}
function useStyle(props, layout, store, table) {
const isHidden = vue.ref(false);
const renderExpanded = vue.ref(null);
const resizeProxyVisible = vue.ref(false);
const setDragVisible = (visible) => {
resizeProxyVisible.value = visible;
};
const resizeState = vue.ref({
width: null,
height: null,
headerHeight: null
});
const isGroup = vue.ref(false);
const scrollbarViewStyle = {
display: "inline-block",
verticalAlign: "middle"
};
const tableWidth = vue.ref();
const tableScrollHeight = vue.ref(0);
const bodyScrollHeight = vue.ref(0);
const headerScrollHeight = vue.ref(0);
const footerScrollHeight = vue.ref(0);
vue.watchEffect(() => {
layout.setHeight(props.height);
});
vue.watchEffect(() => {
layout.setMaxHeight(props.maxHeight);
});
vue.watch(() => [props.currentRowKey, store.states.rowKey], ([currentRowKey, rowKey]) => {
if (!vue.unref(rowKey) || !vue.unref(currentRowKey))
return;
store.setCurrentRowKey(`${currentRowKey}`);
}, {
immediate: true
});
vue.watch(() => props.data, (data) => {
table.store.commit("setData", data);
}, {
immediate: true,
deep: true
});
vue.watchEffect(() => {
if (props.expandRowKeys) {
store.setExpandRowKeysAdapter(props.expandRowKeys);
}
});
const handleMouseLeave = () => {
table.store.commit("setHoverRow", null);
if (table.hoverState)
table.hoverState = null;
};
const handleHeaderFooterMousewheel = (event, data) => {
const { pixelX, pixelY } = data;
if (Math.abs(pixelX) >= Math.abs(pixelY)) {
table.refs.bodyWrapper.scrollLeft += data.pixelX / 5;
}
};
const shouldUpdateHeight = vue.computed(() => {
return props.height || props.maxHeight || store.states.fixedColumns.value.length > 0 || store.states.rightFixedColumns.value.length > 0;
});
const tableBodyStyles = vue.computed(() => {
return {
width: layout.bodyWidth.value ? `${layout.bodyWidth.value}px` : ""
};
});
const doLayout = () => {
if (shouldUpdateHeight.value) {
layout.updateElsHeight();
}
layout.updateColumnsWidth();
requestAnimationFrame(syncPosition);
};
vue.onMounted(async () => {
await vue.nextTick();
store.updateColumns();
bindEvents();
requestAnimationFrame(doLayout);
const el = table.vnode.el;
const tableHeader = table.refs.headerWrapper;
if (props.flexible && el && el.parentElement) {
el.parentElement.style.minWidth = "0";
}
resizeState.value = {
width: tableWidth.value = el.offsetWidth,
height: el.offsetHeight,
headerHeight: props.showHeader && tableHeader ? tableHeader.offsetHeight : null
};
store.states.columns.value.forEach((column) => {
if (column.filteredValue && column.filteredValue.length) {
table.store.commit("filterChange", {
column,
values: column.filteredValue,
silent: true
});
}
});
table.$ready = true;
});
const setScrollClassByEl = (el, className) => {
if (!el)
return;
const classList = Array.from(el.classList).filter((item) => !item.startsWith("is-scrolling-"));
classList.push(layout.scrollX.value ? className : "is-scrolling-none");
el.className = classList.join(" ");
};
const setScrollClass = (className) => {
const { tableWrapper } = table.refs;
setScrollClassByEl(tableWrapper, className);
};
const hasScrollClass = (className) => {
const { tableWrapper } = table.refs;
return !!(tableWrapper && tableWrapper.classList.contains(className));
};
const syncPosition = function() {
if (!table.refs.scrollBarRef)
return;
if (!layout.scrollX.value) {
const scrollingNoneClass = "is-scrolling-none";
if (!hasScrollClass(scrollingNoneClass)) {
setScrollClass(scrollingNoneClass);
}
return;
}
const scrollContainer = table.refs.scrollBarRef.wrap$;
if (!scrollContainer)
return;
const { scrollLeft, offsetWidth, scrollWidth } = scrollContainer;
const { headerWrapper, footerWrapper } = table.refs;
if (headerWrapper)
headerWrapper.scrollLeft = scrollLeft;
if (footerWrapper)
footerWrapper.scrollLeft = scrollLeft;
const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
if (scrollLeft >= maxScrollLeftPosition) {
setScrollClass("is-scrolling-right");
} else if (scrollLeft === 0) {
setScrollClass("is-scrolling-left");
} else {
setScrollClass("is-scrolling-middle");
}
};
const bindEvents = () => {
if (!table.refs.scrollBarRef)
return;
if (table.refs.scrollBarRef.wrap$) {
useEventListener(table.refs.scrollBarRef.wrap$, "scroll", syncPosition, {
passive: true
});
}
if (props.fit) {
useResizeObserver(table.vnode.el, resizeListener);
} else {
useEventListener(window, "resize", resizeListener);
}
useResizeObserver(table.refs.bodyWrapper, () => {
var _a, _b;
resizeListener();
(_b = (_a = table.refs) == null ? void 0 : _a.scrollBarRef) == null ? void 0 : _b.update();
});
};
const resizeListener = () => {
var _a, _b, _c;
const el = table.vnode.el;
if (!table.$ready || !el)
return;
let shouldUpdateLayout = false;
const {
width: oldWidth,
height: oldHeight,
headerHeight: oldHeaderHeight
} = resizeState.value;
const width = tableWidth.value = el.offsetWidth;
if (oldWidth !== width) {
shouldUpdateLayout = true;
}
const height = el.offsetHeight;
if ((props.height || shouldUpdateHeight.value) && oldHeight !== height) {
shouldUpdateLayout = true;
}
const tableHeader = props.tableLayout === "fixed" ? table.refs.headerWrapper : (_a = table.refs.tableHeaderRef) == null ? void 0 : _a.$el;
if (props.showHeader && (tableHeader == null ? void 0 : tableHeader.offsetHeight) !== oldHeaderHeight) {
shouldUpdateLayout = true;
}
tableScrollHeight.value = ((_b = table.refs.tableWrapper) == null ? void 0 : _b.scrollHeight) || 0;
headerScrollHeight.value = (tableHeader == null ? void 0 : tableHeader.scrollHeight) || 0;
footerScrollHeight.value = ((_c = table.refs.footerWrapper) == null ? void 0 : _c.offsetHeight) || 0;
bodyScrollHeight.value = tableScrollHeight.value - headerScrollHeight.value - footerScrollHeight.value;
if (shouldUpdateLayout) {
resizeState.value = {
width,
height,
headerHeight: props.showHeader && (tableHeader == null ? void 0 : tableHeader.offsetHeight) || 0
};
doLayout();
}
};
const tableSize = useSize();
const bodyWidth = vue.computed(() => {
const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout;
return bodyWidth_.value ? `${bodyWidth_.value - (scrollY.value ? gutterWidth : 0)}px` : "";
});
const tableLayout = vue.computed(() => {
if (props.maxHeight)
return "fixed";
return props.tableLayout;
});
const emptyBlockStyle = vue.computed(() => {
if (props.data && props.data.length)
return null;
let height = "100%";
if (props.height && bodyScrollHeight.value) {
height = `${bodyScrollHeight.value}px`;
}
const width = tableWidth.value;
return {
width: width ? `${width}px` : "",
height
};
});
const tableInnerStyle = vue.computed(() => {
if (props.height) {
return {
height: !Number.isNaN(Number(props.height)) ? `${props.height}px` : props.height
};
}
if (props.maxHeight) {
return {
maxHeight: !Number.isNaN(Number(props.maxHeight)) ? `${props.maxHeight}px` : props.maxHeight
};
}
return {};
});
const scrollbarStyle = vue.computed(() => {
if (props.height) {
return {
height: "100%"
};
}
if (props.maxHeight) {
if (!Number.isNaN(Number(props.maxHeight))) {
const maxHeight = props.maxHeight;
const reachMaxHeight = tableScrollHeight.value >= Number(maxHeight);
if (reachMaxHeight) {
return {
maxHeight: `${tableScrollHeight.value - headerScrollHeight.value - footerScrollHeight.value}px`
};
}
} else {
return {
maxHeight: `calc(${props.maxHeight} - ${headerScrollHeight.value + footerScrollHeight.value}px)`
};
}
}
return {};
});
const handleFixedMousewheel = (event, data) => {
const bodyWrapper = table.refs.bodyWrapper;
if (Math.abs(data.spinY) > 0) {
const currentScrollTop = bodyWrapper.scrollTop;
if (data.pixelY < 0 && currentScrollTop !== 0) {
event.preventDefault();
}
if (data.pixelY > 0 && bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop) {
event.preventDefault();
}
bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);
} else {
bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5);
}
};
return {
isHidden,
renderExpanded,
setDragVisible,
isGroup,
handleMouseLeave,
handleHeaderFooterMousewheel,
tableSize,
emptyBlockStyle,
handleFixedMousewheel,
resizeProxyVisible,
bodyWidth,
resizeState,
doLayout,
tableBodyStyles,
tableLayout,
scrollbarViewStyle,
tableInnerStyle,
scrollbarStyle
};
}
var defaultProps$1 = {
data: {
type: Array,
default: () => []
},
size: String,
width: [String, Number],
height: [String, Number],
maxHeight: [String, Number],
fit: {
type: Boolean,
default: true
},
stripe: Boolean,
border: Boolean,
rowKey: [String, Function],
showHeader: {
type: Boolean,
default: true
},
showSummary: Boolean,
sumText: String,
summaryMethod: Function,
rowClassName: [String, Function],
rowStyle: [Object, Function],
cellClassName: [String, Function],
cellStyle: [Object, Function],
headerRowClassName: [String, Function],
headerRowStyle: [Object, Function],
headerCellClassName: [String, Function],
headerCellStyle: [Object, Function],
highlightCurrentRow: Boolean,
currentRowKey: [String, Number],
emptyText: String,
expandRowKeys: Array,
defaultExpandAll: Boolean,
defaultSort: Object,
tooltipEffect: String,
spanMethod: Function,
selectOnIndeterminate: {
type: Boolean,
default: true
},
indent: {
type: Number,
default: 16
},
treeProps: {
type: Object,
default: () => {
return {
hasChildren: "hasChildren",
children: "children"
};
}
},
lazy: Boolean,
load: Function,
style: {
type: Object,
default: () => ({})
},
className: {
type: String,
default: ""
},
tableLayout: {
type: String,
default: "fixed"
},
scrollbarAlwaysOn: {
type: Boolean,
default: false
},
flexible: Boolean
};
const useScrollbar$1 = () => {
const scrollBarRef = vue.ref();
const scrollTo = (options, yCoord) => {
const scrollbar = scrollBarRef.value;
if (scrollbar) {
scrollbar.scrollTo(options, yCoord);
}
};
const setScrollPosition = (position, offset) => {
const scrollbar = scrollBarRef.value;
if (scrollbar && isNumber(offset) && ["Top", "Left"].includes(position)) {
scrollbar[`setScroll${position}`](offset);
}
};
const setScrollTop = (top) => setScrollPosition("Top", top);
const setScrollLeft = (left) => setScrollPosition("Left", left);
return {
scrollBarRef,
scrollTo,
setScrollTop,
setScrollLeft
};
};
let tableIdSeed = 1;
const _sfc_main$p = vue.defineComponent({
name: "ElTable",
directives: {
Mousewheel
},
components: {
TableHeader,
TableBody,
TableFooter,
ElScrollbar,
hColgroup
},
props: defaultProps$1,
emits: [
"select",
"select-all",
"selection-change",
"cell-mouse-enter",
"cell-mouse-leave",
"cell-contextmenu",
"cell-click",
"cell-dblclick",
"row-click",
"row-contextmenu",
"row-dblclick",
"header-click",
"header-contextmenu",
"sort-change",
"filter-change",
"current-change",
"header-dragend",
"expand-change"
],
setup(props) {
const { t } = useLocale();
const ns = useNamespace("table");
const table = vue.getCurrentInstance();
vue.provide(TABLE_INJECTION_KEY, table);
const store = createStore(table, props);
table.store = store;
const layout = new TableLayout$1({
store: table.store,
table,
fit: props.fit,
showHeader: props.showHeader
});
table.layout = layout;
const isEmpty = vue.computed(() => (store.states.data.value || []).length === 0);
const {
setCurrentRow,
getSelectionRows,
toggleRowSelection,
clearSelection,
clearFilter,
toggleAllSelection,
toggleRowExpansion,
clearSort,
sort
} = useUtils(store);
const {
isHidden,
renderExpanded,
setDragVisible,
isGroup,
handleMouseLeave,
handleHeaderFooterMousewheel,
tableSize,
emptyBlockStyle,
handleFixedMousewheel,
resizeProxyVisible,
bodyWidth,
resizeState,
doLayout,
tableBodyStyles,
tableLayout,
scrollbarViewStyle,
tableInnerStyle,
scrollbarStyle
} = useStyle(props, layout, store, table);
const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar$1();
const debouncedUpdateLayout = debounce(doLayout, 50);
const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`;
table.tableId = tableId;
table.state = {
isGroup,
resizeState,
doLayout,
debouncedUpdateLayout
};
const computedSumText = vue.computed(() => props.sumText || t("el.table.sumText"));
const computedEmptyText = vue.computed(() => {
return props.emptyText || t("el.table.emptyText");
});
return {
ns,
layout,
store,
handleHeaderFooterMousewheel,
handleMouseLeave,
tableId,
tableSize,
isHidden,
isEmpty,
renderExpanded,
resizeProxyVisible,
resizeState,
isGroup,
bodyWidth,
tableBodyStyles,
emptyBlockStyle,
debouncedUpdateLayout,
handleFixedMousewheel,
setCurrentRow,
getSelectionRows,
toggleRowSelection,
clearSelection,
clearFilter,
toggleAllSelection,
toggleRowExpansion,
clearSort,
doLayout,
sort,
t,
setDragVisible,
context: table,
computedSumText,
computedEmptyText,
tableLayout,
scrollbarViewStyle,
tableInnerStyle,
scrollbarStyle,
scrollBarRef,
scrollTo,
setScrollLeft,
setScrollTop
};
}
});
const _hoisted_1$b = ["data-prefix"];
const _hoisted_2$7 = {
ref: "hiddenColumns",
class: "hidden-columns"
};
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hColgroup = vue.resolveComponent("hColgroup");
const _component_table_header = vue.resolveComponent("table-header");
const _component_table_body = vue.resolveComponent("table-body");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_table_footer = vue.resolveComponent("table-footer");
const _directive_mousewheel = vue.resolveDirective("mousewheel");
return vue.openBlock(), vue.createElementBlock("div", {
ref: "tableWrapper",
class: vue.normalizeClass([
{
[_ctx.ns.m("fit")]: _ctx.fit,
[_ctx.ns.m("striped")]: _ctx.stripe,
[_ctx.ns.m("border")]: _ctx.border || _ctx.isGroup,
[_ctx.ns.m("hidden")]: _ctx.isHidden,
[_ctx.ns.m("group")]: _ctx.isGroup,
[_ctx.ns.m("fluid-height")]: _ctx.maxHeight,
[_ctx.ns.m("scrollable-x")]: _ctx.layout.scrollX.value,
[_ctx.ns.m("scrollable-y")]: _ctx.layout.scrollY.value,
[_ctx.ns.m("enable-row-hover")]: !_ctx.store.states.isComplex.value,
[_ctx.ns.m("enable-row-transition")]: (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100,
"has-footer": _ctx.showSummary
},
_ctx.ns.m(_ctx.tableSize),
_ctx.className,
_ctx.ns.b(),
_ctx.ns.m(`layout-${_ctx.tableLayout}`)
]),
style: vue.normalizeStyle(_ctx.style),
"data-prefix": _ctx.ns.namespace.value,
onMouseleave: _cache[0] || (_cache[0] = ($event) => _ctx.handleMouseLeave())
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("inner-wrapper")),
style: vue.normalizeStyle(_ctx.tableInnerStyle)
}, [
vue.createElementVNode("div", _hoisted_2$7, [
vue.renderSlot(_ctx.$slots, "default")
], 512),
_ctx.showHeader && _ctx.tableLayout === "fixed" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 0,
ref: "headerWrapper",
class: vue.normalizeClass(_ctx.ns.e("header-wrapper"))
}, [
vue.createElementVNode("table", {
ref: "tableHeader",
class: vue.normalizeClass(_ctx.ns.e("header")),
style: vue.normalizeStyle(_ctx.tableBodyStyles),
border: "0",
cellpadding: "0",
cellspacing: "0"
}, [
vue.createVNode(_component_hColgroup, {
columns: _ctx.store.states.columns.value,
"table-layout": _ctx.tableLayout
}, null, 8, ["columns", "table-layout"]),
vue.createVNode(_component_table_header, {
ref: "tableHeaderRef",
border: _ctx.border,
"default-sort": _ctx.defaultSort,
store: _ctx.store,
onSetDragVisible: _ctx.setDragVisible
}, null, 8, ["border", "default-sort", "store", "onSetDragVisible"])
], 6)
], 2)), [
[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
]) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
ref: "bodyWrapper",
class: vue.normalizeClass(_ctx.ns.e("body-wrapper"))
}, [
vue.createVNode(_component_el_scrollbar, {
ref: "scrollBarRef",
"view-style": _ctx.scrollbarViewStyle,
"wrap-style": _ctx.scrollbarStyle,
always: _ctx.scrollbarAlwaysOn
}, {
default: vue.withCtx(() => [
vue.createElementVNode("table", {
ref: "tableBody",
class: vue.normalizeClass(_ctx.ns.e("body")),
cellspacing: "0",
cellpadding: "0",
border: "0",
style: vue.normalizeStyle({
width: _ctx.bodyWidth,
tableLayout: _ctx.tableLayout
})
}, [
vue.createVNode(_component_hColgroup, {
columns: _ctx.store.states.columns.value,
"table-layout": _ctx.tableLayout
}, null, 8, ["columns", "table-layout"]),
_ctx.showHeader && _ctx.tableLayout === "auto" ? (vue.openBlock(), vue.createBlock(_component_table_header, {
key: 0,
ref: "tableHeaderRef",
border: _ctx.border,
"default-sort": _ctx.defaultSort,
store: _ctx.store,
onSetDragVisible: _ctx.setDragVisible
}, null, 8, ["border", "default-sort", "store", "onSetDragVisible"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(_component_table_body, {
context: _ctx.context,
highlight: _ctx.highlightCurrentRow,
"row-class-name": _ctx.rowClassName,
"tooltip-effect": _ctx.tooltipEffect,
"row-style": _ctx.rowStyle,
store: _ctx.store,
stripe: _ctx.stripe
}, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe"])
], 6),
_ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
ref: "emptyBlock",
style: vue.normalizeStyle(_ctx.emptyBlockStyle),
class: vue.normalizeClass(_ctx.ns.e("empty-block"))
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.ns.e("empty-text"))
}, [
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.computedEmptyText), 1)
])
], 2)
], 6)) : vue.createCommentVNode("v-if", true),
_ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
ref: "appendWrapper",
class: vue.normalizeClass(_ctx.ns.e("append-wrapper"))
}, [
vue.renderSlot(_ctx.$slots, "append")
], 2)) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["view-style", "wrap-style", "always"])
], 2),
_ctx.showSummary ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 1,
ref: "footerWrapper",
class: vue.normalizeClass(_ctx.ns.e("footer-wrapper"))
}, [
vue.createVNode(_component_table_footer, {
border: _ctx.border,
"default-sort": _ctx.defaultSort,
store: _ctx.store,
style: vue.normalizeStyle(_ctx.tableBodyStyles),
"sum-text": _ctx.computedSumText,
"summary-method": _ctx.summaryMethod
}, null, 8, ["border", "default-sort", "store", "style", "sum-text", "summary-method"])
], 2)), [
[vue.vShow, !_ctx.isEmpty],
[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
]) : vue.createCommentVNode("v-if", true),
_ctx.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
class: vue.normalizeClass(_ctx.ns.e("border-left-patch"))
}, null, 2)) : vue.createCommentVNode("v-if", true)
], 6),
vue.withDirectives(vue.createElementVNode("div", {
ref: "resizeProxy",
class: vue.normalizeClass(_ctx.ns.e("column-resize-proxy"))
}, null, 2), [
[vue.vShow, _ctx.resizeProxyVisible]
])
], 46, _hoisted_1$b);
}
var Table = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$3], ["__file", "table.vue"]]);
const defaultClassNames = {
selection: "table-column--selection",
expand: "table__expand-column"
};
const cellStarts = {
default: {
order: ""
},
selection: {
width: 48,
minWidth: 48,
realWidth: 48,
order: ""
},
expand: {
width: 48,
minWidth: 48,
realWidth: 48,
order: ""
},
index: {
width: 48,
minWidth: 48,
realWidth: 48,
order: ""
}
};
const getDefaultClassName = (type) => {
return defaultClassNames[type] || "";
};
const cellForced = {
selection: {
renderHeader({ store }) {
function isDisabled() {
return store.states.data.value && store.states.data.value.length === 0;
}
return vue.h(ElCheckbox, {
disabled: isDisabled(),
size: store.states.tableSize.value,
indeterminate: store.states.selection.value.length > 0 && !store.states.isAllSelected.value,
"onUpdate:modelValue": store.toggleAllSelection,
modelValue: store.states.isAllSelected.value
});
},
renderCell({
row,
column,
store,
$index
}) {
return vue.h(ElCheckbox, {
disabled: column.selectable ? !column.selectable.call(null, row, $index) : false,
size: store.states.tableSize.value,
onChange: () => {
store.commit("rowSelectedChanged", row);
},
onClick: (event) => event.stopPropagation(),
modelValue: store.isSelected(row)
});
},
sortable: false,
resizable: false
},
index: {
renderHeader({ column }) {
return column.label || "#";
},
renderCell({
column,
$index
}) {
let i = $index + 1;
const index = column.index;
if (typeof index === "number") {
i = $index + index;
} else if (typeof index === "function") {
i = index($index);
}
return vue.h("div", {}, [i]);
},
sortable: false
},
expand: {
renderHeader({ column }) {
return column.label || "";
},
renderCell({
row,
store,
expanded
}) {
const { ns } = store;
const classes = [ns.e("expand-icon")];
if (expanded) {
classes.push(ns.em("expand-icon", "expanded"));
}
const callback = function(e) {
e.stopPropagation();
store.toggleRowExpansion(row);
};
return vue.h("div", {
class: classes,
onClick: callback
}, {
default: () => {
return [
vue.h(ElIcon, null, {
default: () => {
return [vue.h(arrow_right_default)];
}
})
];
}
});
},
sortable: false,
resizable: false
}
};
function defaultRenderCell({
row,
column,
$index
}) {
var _a;
const property = column.property;
const value = property && getProp(row, property).value;
if (column && column.formatter) {
return column.formatter(row, column, value, $index);
}
return ((_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) || "";
}
function treeCellPrefix({
row,
treeNode,
store
}, createPlacehoder = false) {
const { ns } = store;
if (!treeNode) {
if (createPlacehoder) {
return [
vue.h("span", {
class: ns.e("placeholder")
})
];
}
return null;
}
const ele = [];
const callback = function(e) {
e.stopPropagation();
if (treeNode.loading) {
return;
}
store.loadOrToggle(row);
};
if (treeNode.indent) {
ele.push(vue.h("span", {
class: ns.e("indent"),
style: { "padding-left": `${treeNode.indent}px` }
}));
}
if (typeof treeNode.expanded === "boolean" && !treeNode.noLazyChildren) {
const expandClasses = [
ns.e("expand-icon"),
treeNode.expanded ? ns.em("expand-icon", "expanded") : ""
];
let icon = arrow_right_default;
if (treeNode.loading) {
icon = loading_default;
}
ele.push(vue.h("div", {
class: expandClasses,
onClick: callback
}, {
default: () => {
return [
vue.h(ElIcon, { class: { [ns.is("loading")]: treeNode.loading } }, {
default: () => [vue.h(icon)]
})
];
}
}));
} else {
ele.push(vue.h("span", {
class: ns.e("placeholder")
}));
}
return ele;
}
function getAllAliases(props, aliases) {
return props.reduce((prev, cur) => {
prev[cur] = cur;
return prev;
}, aliases);
}
function useWatcher(owner, props_) {
const instance = vue.getCurrentInstance();
const registerComplexWatchers = () => {
const props = ["fixed"];
const aliases = {
realWidth: "width",
realMinWidth: "minWidth"
};
const allAliases = getAllAliases(props, aliases);
Object.keys(allAliases).forEach((key) => {
const columnKey = aliases[key];
if (hasOwn(props_, columnKey)) {
vue.watch(() => props_[columnKey], (newVal) => {
let value = newVal;
if (columnKey === "width" && key === "realWidth") {
value = parseWidth(newVal);
}
if (columnKey === "minWidth" && key === "realMinWidth") {
value = parseMinWidth(newVal);
}
instance.columnConfig.value[columnKey] = value;
instance.columnConfig.value[key] = value;
const updateColumns = columnKey === "fixed";
owner.value.store.scheduleLayout(updateColumns);
});
}
});
};
const registerNormalWatchers = () => {
const props = [
"label",
"filters",
"filterMultiple",
"sortable",
"index",
"formatter",
"className",
"labelClassName",
"showOverflowTooltip"
];
const aliases = {
property: "prop",
align: "realAlign",
headerAlign: "realHeaderAlign"
};
const allAliases = getAllAliases(props, aliases);
Object.keys(allAliases).forEach((key) => {
const columnKey = aliases[key];
if (hasOwn(props_, columnKey)) {
vue.watch(() => props_[columnKey], (newVal) => {
instance.columnConfig.value[key] = newVal;
});
}
});
};
return {
registerComplexWatchers,
registerNormalWatchers
};
}
function useRender(props, slots, owner) {
const instance = vue.getCurrentInstance();
const columnId = vue.ref("");
const isSubColumn = vue.ref(false);
const realAlign = vue.ref();
const realHeaderAlign = vue.ref();
const ns = useNamespace("table");
vue.watchEffect(() => {
realAlign.value = props.align ? `is-${props.align}` : null;
realAlign.value;
});
vue.watchEffect(() => {
realHeaderAlign.value = props.headerAlign ? `is-${props.headerAlign}` : realAlign.value;
realHeaderAlign.value;
});
const columnOrTableParent = vue.computed(() => {
let parent = instance.vnode.vParent || instance.parent;
while (parent && !parent.tableId && !parent.columnId) {
parent = parent.vnode.vParent || parent.parent;
}
return parent;
});
const hasTreeColumn = vue.computed(() => {
const { store } = instance.parent;
if (!store)
return false;
const { treeData } = store.states;
const treeDataValue = treeData.value;
return treeDataValue && Object.keys(treeDataValue).length > 0;
});
const realWidth = vue.ref(parseWidth(props.width));
const realMinWidth = vue.ref(parseMinWidth(props.minWidth));
const setColumnWidth = (column) => {
if (realWidth.value)
column.width = realWidth.value;
if (realMinWidth.value) {
column.minWidth = realMinWidth.value;
}
if (!realWidth.value && realMinWidth.value) {
column.width = void 0;
}
if (!column.minWidth) {
column.minWidth = 80;
}
column.realWidth = Number(column.width === void 0 ? column.minWidth : column.width);
return column;
};
const setColumnForcedProps = (column) => {
const type = column.type;
const source = cellForced[type] || {};
Object.keys(source).forEach((prop) => {
const value = source[prop];
if (prop !== "className" && value !== void 0) {
column[prop] = value;
}
});
const className = getDefaultClassName(type);
if (className) {
const forceClass = `${vue.unref(ns.namespace)}-${className}`;
column.className = column.className ? `${column.className} ${forceClass}` : forceClass;
}
return column;
};
const checkSubColumn = (children) => {
if (Array.isArray(children)) {
children.forEach((child) => check(child));
} else {
check(children);
}
function check(item) {
var _a;
if (((_a = item == null ? void 0 : item.type) == null ? void 0 : _a.name) === "ElTableColumn") {
item.vParent = instance;
}
}
};
const setColumnRenders = (column) => {
if (props.renderHeader) ; else if (column.type !== "selection") {
column.renderHeader = (scope) => {
instance.columnConfig.value["label"];
const renderHeader = slots.header;
return renderHeader ? renderHeader(scope) : column.label;
};
}
let originRenderCell = column.renderCell;
if (column.type === "expand") {
column.renderCell = (data) => vue.h("div", {
class: "cell"
}, [originRenderCell(data)]);
owner.value.renderExpanded = (data) => {
return slots.default ? slots.default(data) : slots.default;
};
} else {
originRenderCell = originRenderCell || defaultRenderCell;
column.renderCell = (data) => {
let children = null;
if (slots.default) {
const vnodes = slots.default(data);
children = vnodes.some((v) => v.type !== vue.Comment) ? vnodes : originRenderCell(data);
} else {
children = originRenderCell(data);
}
const shouldCreatePlaceholder = hasTreeColumn.value && data.cellIndex === 0 && data.column.type !== "selection";
const prefix = treeCellPrefix(data, shouldCreatePlaceholder);
const props2 = {
class: "cell",
style: {}
};
if (column.showOverflowTooltip) {
props2.class = `${props2.class} ${vue.unref(ns.namespace)}-tooltip`;
props2.style = {
width: `${(data.column.realWidth || Number(data.column.width)) - 1}px`
};
}
checkSubColumn(children);
return vue.h("div", props2, [prefix, children]);
};
}
return column;
};
const getPropsData = (...propsKey) => {
return propsKey.reduce((prev, cur) => {
if (Array.isArray(cur)) {
cur.forEach((key) => {
prev[key] = props[key];
});
}
return prev;
}, {});
};
const getColumnElIndex = (children, child) => {
return Array.prototype.indexOf.call(children, child);
};
return {
columnId,
realAlign,
isSubColumn,
realHeaderAlign,
columnOrTableParent,
setColumnWidth,
setColumnForcedProps,
setColumnRenders,
getPropsData,
getColumnElIndex
};
}
var defaultProps = {
type: {
type: String,
default: "default"
},
label: String,
className: String,
labelClassName: String,
property: String,
prop: String,
width: {
type: [String, Number],
default: ""
},
minWidth: {
type: [String, Number],
default: ""
},
renderHeader: Function,
sortable: {
type: [Boolean, String],
default: false
},
sortMethod: Function,
sortBy: [String, Function, Array],
resizable: {
type: Boolean,
default: true
},
columnKey: String,
align: String,
headerAlign: String,
showTooltipWhenOverflow: Boolean,
showOverflowTooltip: Boolean,
fixed: [Boolean, String],
formatter: Function,
selectable: Function,
reserveSelection: Boolean,
filterMethod: Function,
filteredValue: Array,
filters: Array,
filterPlacement: String,
filterMultiple: {
type: Boolean,
default: true
},
index: [Number, Function],
sortOrders: {
type: Array,
default: () => {
return ["ascending", "descending", null];
},
validator: (val) => {
return val.every((order) => ["ascending", "descending", null].includes(order));
}
}
};
let columnIdSeed = 1;
var ElTableColumn$1 = vue.defineComponent({
name: "ElTableColumn",
components: {
ElCheckbox
},
props: defaultProps,
setup(props, { slots }) {
const instance = vue.getCurrentInstance();
const columnConfig = vue.ref({});
const owner = vue.computed(() => {
let parent2 = instance.parent;
while (parent2 && !parent2.tableId) {
parent2 = parent2.parent;
}
return parent2;
});
const { registerNormalWatchers, registerComplexWatchers } = useWatcher(owner, props);
const {
columnId,
isSubColumn,
realHeaderAlign,
columnOrTableParent,
setColumnWidth,
setColumnForcedProps,
setColumnRenders,
getPropsData,
getColumnElIndex,
realAlign
} = useRender(props, slots, owner);
const parent = columnOrTableParent.value;
columnId.value = `${parent.tableId || parent.columnId}_column_${columnIdSeed++}`;
vue.onBeforeMount(() => {
isSubColumn.value = owner.value !== parent;
const type = props.type || "default";
const sortable = props.sortable === "" ? true : props.sortable;
const defaults = {
...cellStarts[type],
id: columnId.value,
type,
property: props.prop || props.property,
align: realAlign,
headerAlign: realHeaderAlign,
showOverflowTooltip: props.showOverflowTooltip || props.showTooltipWhenOverflow,
filterable: props.filters || props.filterMethod,
filteredValue: [],
filterPlacement: "",
isColumnGroup: false,
isSubColumn: false,
filterOpened: false,
sortable,
index: props.index,
rawColumnKey: instance.vnode.key
};
const basicProps = [
"columnKey",
"label",
"className",
"labelClassName",
"type",
"renderHeader",
"formatter",
"fixed",
"resizable"
];
const sortProps = ["sortMethod", "sortBy", "sortOrders"];
const selectProps = ["selectable", "reserveSelection"];
const filterProps = [
"filterMethod",
"filters",
"filterMultiple",
"filterOpened",
"filteredValue",
"filterPlacement"
];
let column = getPropsData(basicProps, sortProps, selectProps, filterProps);
column = mergeOptions(defaults, column);
const chains = compose(setColumnRenders, setColumnWidth, setColumnForcedProps);
column = chains(column);
columnConfig.value = column;
registerNormalWatchers();
registerComplexWatchers();
});
vue.onMounted(() => {
var _a;
const parent2 = columnOrTableParent.value;
const children = isSubColumn.value ? parent2.vnode.el.children : (_a = parent2.refs.hiddenColumns) == null ? void 0 : _a.children;
const getColumnIndex = () => getColumnElIndex(children || [], instance.vnode.el);
columnConfig.value.getColumnIndex = getColumnIndex;
const columnIndex = getColumnIndex();
columnIndex > -1 && owner.value.store.commit("insertColumn", columnConfig.value, isSubColumn.value ? parent2.columnConfig.value : null);
});
vue.onBeforeUnmount(() => {
owner.value.store.commit("removeColumn", columnConfig.value, isSubColumn.value ? parent.columnConfig.value : null);
});
instance.columnId = columnId.value;
instance.columnConfig = columnConfig;
return;
},
render() {
var _a, _b, _c;
try {
const renderDefault = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, {
row: {},
column: {},
$index: -1
});
const children = [];
if (Array.isArray(renderDefault)) {
for (const childNode of renderDefault) {
if (((_c = childNode.type) == null ? void 0 : _c.name) === "ElTableColumn" || childNode.shapeFlag & 2) {
children.push(childNode);
} else if (childNode.type === vue.Fragment && Array.isArray(childNode.children)) {
childNode.children.forEach((vnode2) => {
if ((vnode2 == null ? void 0 : vnode2.patchFlag) !== 1024 && !isString(vnode2 == null ? void 0 : vnode2.children)) {
children.push(vnode2);
}
});
}
}
}
const vnode = vue.h("div", children);
return vnode;
} catch (e) {
return vue.h("div", []);
}
}
});
const ElTable = withInstall(Table, {
TableColumn: ElTableColumn$1
});
const ElTableColumn = withNoopInstall(ElTableColumn$1);
var SortOrder = /* @__PURE__ */ ((SortOrder2) => {
SortOrder2["ASC"] = "asc";
SortOrder2["DESC"] = "desc";
return SortOrder2;
})(SortOrder || {});
var Alignment = /* @__PURE__ */ ((Alignment2) => {
Alignment2["CENTER"] = "center";
Alignment2["RIGHT"] = "right";
return Alignment2;
})(Alignment || {});
var FixedDir = /* @__PURE__ */ ((FixedDir2) => {
FixedDir2["LEFT"] = "left";
FixedDir2["RIGHT"] = "right";
return FixedDir2;
})(FixedDir || {});
const oppositeOrderMap = {
["asc" /* ASC */]: "desc" /* DESC */,
["desc" /* DESC */]: "asc" /* ASC */
};
const placeholderSign = Symbol("placeholder");
const calcColumnStyle = (column, fixedColumn, fixed) => {
var _a;
const flex = {
flexGrow: 0,
flexShrink: 0,
...fixed ? {} : {
flexGrow: column.flexGrow || 0,
flexShrink: column.flexShrink || 1
}
};
if (!fixed) {
flex.flexShrink = 1;
}
const style = {
...(_a = column.style) != null ? _a : {},
...flex,
flexBasis: "auto",
width: column.width
};
if (!fixedColumn) {
if (column.maxWidth)
style.maxWidth = column.maxWidth;
if (column.minWidth)
style.minWidth = column.minWidth;
}
return style;
};
function useColumns(props, columns, fixed) {
const visibleColumns = vue.computed(() => {
return vue.unref(columns).filter((column) => !column.hidden);
});
const fixedColumnsOnLeft = vue.computed(() => vue.unref(visibleColumns).filter((column) => column.fixed === "left" || column.fixed === true));
const fixedColumnsOnRight = vue.computed(() => vue.unref(visibleColumns).filter((column) => column.fixed === "right"));
const normalColumns = vue.computed(() => vue.unref(visibleColumns).filter((column) => !column.fixed));
const mainColumns = vue.computed(() => {
const ret = [];
vue.unref(fixedColumnsOnLeft).forEach((column) => {
ret.push({
...column,
placeholderSign
});
});
vue.unref(normalColumns).forEach((column) => {
ret.push(column);
});
vue.unref(fixedColumnsOnRight).forEach((column) => {
ret.push({
...column,
placeholderSign
});
});
return ret;
});
const hasFixedColumns = vue.computed(() => {
return vue.unref(fixedColumnsOnLeft).length || vue.unref(fixedColumnsOnRight).length;
});
const columnsStyles = vue.computed(() => {
const _columns = vue.unref(columns);
return _columns.reduce((style, column) => {
style[column.key] = calcColumnStyle(column, vue.unref(fixed), props.fixed);
return style;
}, {});
});
const columnsTotalWidth = vue.computed(() => {
return vue.unref(visibleColumns).reduce((width, column) => width + column.width, 0);
});
const getColumn = (key) => {
return vue.unref(columns).find((column) => column.key === key);
};
const getColumnStyle = (key) => {
return vue.unref(columnsStyles)[key];
};
const updateColumnWidth = (column, width) => {
column.width = width;
};
function onColumnSorted(e) {
var _a;
const { key } = e.currentTarget.dataset;
if (!key)
return;
const { sortState, sortBy } = props;
let order = SortOrder.ASC;
if (isObject$1(sortState)) {
order = oppositeOrderMap[sortState[key]];
} else {
order = oppositeOrderMap[sortBy.order];
}
(_a = props.onColumnSort) == null ? void 0 : _a.call(props, { column: getColumn(key), key, order });
}
return {
columns,
columnsStyles,
columnsTotalWidth,
fixedColumnsOnLeft,
fixedColumnsOnRight,
hasFixedColumns,
mainColumns,
normalColumns,
visibleColumns,
getColumn,
getColumnStyle,
updateColumnWidth,
onColumnSorted
};
}
const useScrollbar = (props, {
mainTableRef,
leftTableRef,
rightTableRef,
onMaybeEndReached
}) => {
const scrollPos = vue.ref({ scrollLeft: 0, scrollTop: 0 });
function doScroll(params) {
var _a, _b, _c;
const { scrollTop } = params;
(_a = mainTableRef.value) == null ? void 0 : _a.scrollTo(params);
(_b = leftTableRef.value) == null ? void 0 : _b.scrollToTop(scrollTop);
(_c = rightTableRef.value) == null ? void 0 : _c.scrollToTop(scrollTop);
}
function scrollTo(params) {
scrollPos.value = params;
doScroll(params);
}
function scrollToTop(scrollTop) {
scrollPos.value.scrollTop = scrollTop;
doScroll(vue.unref(scrollPos));
}
function scrollToLeft(scrollLeft) {
var _a, _b;
scrollPos.value.scrollLeft = scrollLeft;
(_b = (_a = mainTableRef.value) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, vue.unref(scrollPos));
}
function onScroll(params) {
var _a;
scrollTo(params);
(_a = props.onScroll) == null ? void 0 : _a.call(props, params);
}
function onVerticalScroll({ scrollTop }) {
const { scrollTop: currentScrollTop } = vue.unref(scrollPos);
if (scrollTop !== currentScrollTop)
scrollToTop(scrollTop);
}
function scrollToRow(row, strategy = "auto") {
var _a;
(_a = mainTableRef.value) == null ? void 0 : _a.scrollToRow(row, strategy);
}
vue.watch(() => vue.unref(scrollPos).scrollTop, (cur, prev) => {
if (cur > prev)
onMaybeEndReached();
});
return {
scrollPos,
scrollTo,
scrollToLeft,
scrollToTop,
scrollToRow,
onScroll,
onVerticalScroll
};
};
const useRow = (props, { mainTableRef, leftTableRef, rightTableRef, onMaybeEndReached }) => {
const vm = vue.getCurrentInstance();
const { emit } = vm;
const isResetting = vue.shallowRef(false);
const hoveringRowKey = vue.shallowRef(null);
const expandedRowKeys = vue.ref(props.defaultExpandedRowKeys || []);
const lastRenderedRowIndex = vue.ref(-1);
const resetIndex = vue.shallowRef(null);
const rowHeights = vue.ref({});
const pendingRowHeights = vue.ref({});
const leftTableHeights = vue.shallowRef({});
const mainTableHeights = vue.shallowRef({});
const rightTableHeights = vue.shallowRef({});
const isDynamic = vue.computed(() => isNumber(props.estimatedRowHeight));
function onRowsRendered(params) {
var _a;
(_a = props.onRowsRendered) == null ? void 0 : _a.call(props, params);
if (params.rowCacheEnd > vue.unref(lastRenderedRowIndex)) {
lastRenderedRowIndex.value = params.rowCacheEnd;
}
}
function onRowHovered({ hovered, rowKey }) {
hoveringRowKey.value = hovered ? rowKey : null;
}
function onRowExpanded({
expanded,
rowData,
rowIndex,
rowKey
}) {
var _a, _b;
const _expandedRowKeys = [...vue.unref(expandedRowKeys)];
const currentKeyIndex = _expandedRowKeys.indexOf(rowKey);
if (expanded) {
if (currentKeyIndex === -1)
_expandedRowKeys.push(rowKey);
} else {
if (currentKeyIndex > -1)
_expandedRowKeys.splice(currentKeyIndex, 1);
}
expandedRowKeys.value = _expandedRowKeys;
emit("update:expandedRowKeys", _expandedRowKeys);
(_a = props.onRowExpand) == null ? void 0 : _a.call(props, {
expanded,
rowData,
rowIndex,
rowKey
});
(_b = props.onExpandedRowsChange) == null ? void 0 : _b.call(props, _expandedRowKeys);
}
const flushingRowHeights = debounce(() => {
var _a, _b, _c, _d;
isResetting.value = true;
rowHeights.value = { ...vue.unref(rowHeights), ...vue.unref(pendingRowHeights) };
resetAfterIndex(vue.unref(resetIndex), false);
pendingRowHeights.value = {};
resetIndex.value = null;
(_a = mainTableRef.value) == null ? void 0 : _a.forceUpdate();
(_b = leftTableRef.value) == null ? void 0 : _b.forceUpdate();
(_c = rightTableRef.value) == null ? void 0 : _c.forceUpdate();
(_d = vm.proxy) == null ? void 0 : _d.$forceUpdate();
isResetting.value = false;
}, 0);
function resetAfterIndex(index, forceUpdate = false) {
if (!vue.unref(isDynamic))
return;
[mainTableRef, leftTableRef, rightTableRef].forEach((tableRef) => {
const table = vue.unref(tableRef);
if (table)
table.resetAfterRowIndex(index, forceUpdate);
});
}
function resetHeights(rowKey, height, rowIdx) {
const resetIdx = vue.unref(resetIndex);
if (resetIdx === null) {
resetIndex.value = rowIdx;
} else {
if (resetIdx > rowIdx) {
resetIndex.value = rowIdx;
}
}
pendingRowHeights.value[rowKey] = height;
}
function onRowHeightChange({ rowKey, height, rowIndex }, fixedDir) {
if (!fixedDir) {
mainTableHeights.value[rowKey] = height;
} else {
if (fixedDir === FixedDir.RIGHT) {
rightTableHeights.value[rowKey] = height;
} else {
leftTableHeights.value[rowKey] = height;
}
}
const maximumHeight = Math.max(...[leftTableHeights, rightTableHeights, mainTableHeights].map((records) => records.value[rowKey] || 0));
if (vue.unref(rowHeights)[rowKey] !== maximumHeight) {
resetHeights(rowKey, maximumHeight, rowIndex);
flushingRowHeights();
}
}
vue.watch(lastRenderedRowIndex, () => onMaybeEndReached());
return {
hoveringRowKey,
expandedRowKeys,
lastRenderedRowIndex,
isDynamic,
isResetting,
rowHeights,
resetAfterIndex,
onRowExpanded,
onRowHovered,
onRowsRendered,
onRowHeightChange
};
};
const useData = (props, { expandedRowKeys, lastRenderedRowIndex, resetAfterIndex }) => {
const depthMap = vue.ref({});
const flattenedData = vue.computed(() => {
const depths = {};
const { data: data2, rowKey } = props;
const _expandedRowKeys = vue.unref(expandedRowKeys);
if (!_expandedRowKeys || !_expandedRowKeys.length)
return data2;
const array = [];
const keysSet = /* @__PURE__ */ new Set();
_expandedRowKeys.forEach((x) => keysSet.add(x));
let copy = data2.slice();
copy.forEach((x) => depths[x[rowKey]] = 0);
while (copy.length > 0) {
const item = copy.shift();
array.push(item);
if (keysSet.has(item[rowKey]) && Array.isArray(item.children) && item.children.length > 0) {
copy = [...item.children, ...copy];
item.children.forEach((child) => depths[child[rowKey]] = depths[item[rowKey]] + 1);
}
}
depthMap.value = depths;
return array;
});
const data = vue.computed(() => {
const { data: data2, expandColumnKey } = props;
return expandColumnKey ? vue.unref(flattenedData) : data2;
});
vue.watch(data, (val, prev) => {
if (val !== prev) {
lastRenderedRowIndex.value = -1;
resetAfterIndex(0, true);
}
});
return {
data,
depthMap
};
};
const sumReducer = (sum2, num) => sum2 + num;
const sum = (listLike) => {
return isArray(listLike) ? listLike.reduce(sumReducer, 0) : listLike;
};
const tryCall = (fLike, params, defaultRet = {}) => {
return isFunction(fLike) ? fLike(params) : fLike != null ? fLike : defaultRet;
};
const enforceUnit = (style) => {
["width", "maxWidth", "minWidth", "height"].forEach((key) => {
style[key] = addUnit(style[key]);
});
return style;
};
const componentToSlot = (ComponentLike) => vue.isVNode(ComponentLike) ? (props) => vue.h(ComponentLike, props) : ComponentLike;
const useStyles = (props, {
columnsTotalWidth,
data,
fixedColumnsOnLeft,
fixedColumnsOnRight
}) => {
const bodyWidth = vue.computed(() => {
const { fixed, width, vScrollbarSize } = props;
const ret = width - vScrollbarSize;
return fixed ? Math.max(Math.round(vue.unref(columnsTotalWidth)), ret) : ret;
});
const headerWidth = vue.computed(() => vue.unref(bodyWidth) + (props.fixed ? props.vScrollbarSize : 0));
const mainTableHeight = vue.computed(() => {
const { height = 0, maxHeight = 0, footerHeight: footerHeight2, hScrollbarSize } = props;
if (maxHeight > 0) {
const _fixedRowsHeight = vue.unref(fixedRowsHeight);
const _rowsHeight = vue.unref(rowsHeight);
const _headerHeight = vue.unref(headerHeight);
const total = _headerHeight + _fixedRowsHeight + _rowsHeight + hScrollbarSize;
return Math.min(total, maxHeight - footerHeight2);
}
return height - footerHeight2;
});
const rowsHeight = vue.computed(() => {
const { rowHeight, estimatedRowHeight } = props;
const _data = vue.unref(data);
if (isNumber(estimatedRowHeight)) {
return _data.length * estimatedRowHeight;
}
return _data.length * rowHeight;
});
const fixedTableHeight = vue.computed(() => {
const { maxHeight } = props;
const tableHeight = vue.unref(mainTableHeight);
if (isNumber(maxHeight) && maxHeight > 0)
return tableHeight;
const totalHeight = vue.unref(rowsHeight) + vue.unref(headerHeight) + vue.unref(fixedRowsHeight);
return Math.min(tableHeight, totalHeight);
});
const mapColumn = (column) => column.width;
const leftTableWidth = vue.computed(() => sum(vue.unref(fixedColumnsOnLeft).map(mapColumn)));
const rightTableWidth = vue.computed(() => sum(vue.unref(fixedColumnsOnRight).map(mapColumn)));
const headerHeight = vue.computed(() => sum(props.headerHeight));
const fixedRowsHeight = vue.computed(() => {
var _a;
return (((_a = props.fixedData) == null ? void 0 : _a.length) || 0) * props.rowHeight;
});
const windowHeight = vue.computed(() => {
return vue.unref(mainTableHeight) - vue.unref(headerHeight) - vue.unref(fixedRowsHeight);
});
const rootStyle = vue.computed(() => {
const { style = {}, height, width } = props;
return enforceUnit({
...style,
height,
width
});
});
const footerHeight = vue.computed(() => enforceUnit({ height: props.footerHeight }));
const emptyStyle = vue.computed(() => ({
top: addUnit(vue.unref(headerHeight)),
bottom: addUnit(props.footerHeight),
width: addUnit(props.width)
}));
return {
bodyWidth,
fixedTableHeight,
mainTableHeight,
leftTableWidth,
rightTableWidth,
headerWidth,
rowsHeight,
windowHeight,
footerHeight,
emptyStyle,
rootStyle,
headerHeight
};
};
const useAutoResize = (props) => {
const sizer = vue.ref();
const width$ = vue.ref(0);
const height$ = vue.ref(0);
let resizerStopper;
vue.onMounted(() => {
resizerStopper = useResizeObserver(sizer, ([entry]) => {
const { width, height } = entry.contentRect;
const { paddingLeft, paddingRight, paddingTop, paddingBottom } = getComputedStyle(entry.target);
const left = Number.parseInt(paddingLeft) || 0;
const right = Number.parseInt(paddingRight) || 0;
const top = Number.parseInt(paddingTop) || 0;
const bottom = Number.parseInt(paddingBottom) || 0;
width$.value = width - left - right;
height$.value = height - top - bottom;
}).stop;
});
vue.onBeforeUnmount(() => {
resizerStopper == null ? void 0 : resizerStopper();
});
vue.watch([width$, height$], ([width, height]) => {
var _a;
(_a = props.onResize) == null ? void 0 : _a.call(props, {
width,
height
});
});
return {
sizer,
width: width$,
height: height$
};
};
function useTable(props) {
const mainTableRef = vue.ref();
const leftTableRef = vue.ref();
const rightTableRef = vue.ref();
const {
columns,
columnsStyles,
columnsTotalWidth,
fixedColumnsOnLeft,
fixedColumnsOnRight,
hasFixedColumns,
mainColumns,
onColumnSorted
} = useColumns(props, vue.toRef(props, "columns"), vue.toRef(props, "fixed"));
const {
scrollTo,
scrollToLeft,
scrollToTop,
scrollToRow,
onScroll,
onVerticalScroll,
scrollPos
} = useScrollbar(props, {
mainTableRef,
leftTableRef,
rightTableRef,
onMaybeEndReached
});
const {
expandedRowKeys,
hoveringRowKey,
lastRenderedRowIndex,
isDynamic,
isResetting,
rowHeights,
resetAfterIndex,
onRowExpanded,
onRowHeightChange,
onRowHovered,
onRowsRendered
} = useRow(props, {
mainTableRef,
leftTableRef,
rightTableRef,
onMaybeEndReached
});
const { data, depthMap } = useData(props, {
expandedRowKeys,
lastRenderedRowIndex,
resetAfterIndex
});
const {
bodyWidth,
fixedTableHeight,
mainTableHeight,
leftTableWidth,
rightTableWidth,
headerWidth,
rowsHeight,
windowHeight,
footerHeight,
emptyStyle,
rootStyle,
headerHeight
} = useStyles(props, {
columnsTotalWidth,
data,
fixedColumnsOnLeft,
fixedColumnsOnRight
});
const isScrolling = vue.shallowRef(false);
const containerRef = vue.ref();
const showEmpty = vue.computed(() => {
const noData = vue.unref(data).length === 0;
return isArray(props.fixedData) ? props.fixedData.length === 0 && noData : noData;
});
function getRowHeight(rowIndex) {
const { estimatedRowHeight, rowHeight, rowKey } = props;
if (!estimatedRowHeight)
return rowHeight;
return vue.unref(rowHeights)[vue.unref(data)[rowIndex][rowKey]] || estimatedRowHeight;
}
function onMaybeEndReached() {
const { onEndReached } = props;
if (!onEndReached)
return;
const { scrollTop } = vue.unref(scrollPos);
const _totalHeight = vue.unref(rowsHeight);
const clientHeight = vue.unref(windowHeight);
const heightUntilEnd = _totalHeight - (scrollTop + clientHeight) + props.hScrollbarSize;
if (vue.unref(lastRenderedRowIndex) >= 0 && _totalHeight === scrollTop + vue.unref(mainTableHeight) - vue.unref(headerHeight)) {
onEndReached(heightUntilEnd);
}
}
vue.watch(() => props.expandedRowKeys, (val) => expandedRowKeys.value = val, {
deep: true
});
return {
columns,
containerRef,
mainTableRef,
leftTableRef,
rightTableRef,
isDynamic,
isResetting,
isScrolling,
hoveringRowKey,
hasFixedColumns,
columnsStyles,
columnsTotalWidth,
data,
expandedRowKeys,
depthMap,
fixedColumnsOnLeft,
fixedColumnsOnRight,
mainColumns,
bodyWidth,
emptyStyle,
rootStyle,
headerWidth,
footerHeight,
mainTableHeight,
fixedTableHeight,
leftTableWidth,
rightTableWidth,
showEmpty,
getRowHeight,
onColumnSorted,
onRowHovered,
onRowExpanded,
onRowsRendered,
onRowHeightChange,
scrollTo,
scrollToLeft,
scrollToTop,
scrollToRow,
onScroll,
onVerticalScroll
};
}
const TableV2InjectionKey = Symbol("tableV2");
const classType = String;
const columns = {
type: definePropType(Array),
required: true
};
const fixedDataType = {
type: definePropType(Array)
};
const dataType = {
...fixedDataType,
required: true
};
const expandColumnKey = String;
const expandKeys = {
type: definePropType(Array),
default: () => mutable([])
};
const requiredNumber = {
type: Number,
required: true
};
const rowKey = {
type: definePropType([String, Number, Symbol]),
default: "id"
};
const styleType = {
type: definePropType(Object)
};
const tableV2RowProps = buildProps({
class: String,
columns,
columnsStyles: {
type: definePropType(Object),
required: true
},
depth: Number,
expandColumnKey,
estimatedRowHeight: {
...virtualizedGridProps.estimatedRowHeight,
default: void 0
},
isScrolling: Boolean,
onRowExpand: {
type: definePropType(Function)
},
onRowHover: {
type: definePropType(Function)
},
onRowHeightChange: {
type: definePropType(Function)
},
rowData: {
type: definePropType(Object),
required: true
},
rowEventHandlers: {
type: definePropType(Object)
},
rowIndex: {
type: Number,
required: true
},
rowKey,
style: {
type: definePropType(Object)
}
});
const requiredNumberType = {
type: Number,
required: true
};
const tableV2HeaderProps = buildProps({
class: String,
columns,
fixedHeaderData: {
type: definePropType(Array)
},
headerData: {
type: definePropType(Array),
required: true
},
headerHeight: {
type: definePropType([Number, Array]),
default: 50
},
rowWidth: requiredNumberType,
rowHeight: {
type: Number,
default: 50
},
height: requiredNumberType,
width: requiredNumberType
});
const tableV2GridProps = buildProps({
columns,
data: dataType,
fixedData: fixedDataType,
estimatedRowHeight: tableV2RowProps.estimatedRowHeight,
width: requiredNumber,
height: requiredNumber,
headerWidth: requiredNumber,
headerHeight: tableV2HeaderProps.headerHeight,
bodyWidth: requiredNumber,
rowHeight: requiredNumber,
cache: virtualizedListProps.cache,
useIsScrolling: Boolean,
scrollbarAlwaysOn: virtualizedGridProps.scrollbarAlwaysOn,
scrollbarStartGap: virtualizedGridProps.scrollbarStartGap,
scrollbarEndGap: virtualizedGridProps.scrollbarEndGap,
class: classType,
style: styleType,
containerStyle: styleType,
getRowHeight: {
type: definePropType(Function),
required: true
},
rowKey: tableV2RowProps.rowKey,
onRowsRendered: {
type: definePropType(Function)
},
onScroll: {
type: definePropType(Function)
}
});
const tableV2Props = buildProps({
cache: tableV2GridProps.cache,
estimatedRowHeight: tableV2RowProps.estimatedRowHeight,
rowKey,
headerClass: {
type: definePropType([
String,
Function
])
},
headerProps: {
type: definePropType([
Object,
Function
])
},
headerCellProps: {
type: definePropType([
Object,
Function
])
},
headerHeight: tableV2HeaderProps.headerHeight,
footerHeight: {
type: Number,
default: 0
},
rowClass: {
type: definePropType([String, Function])
},
rowProps: {
type: definePropType([Object, Function])
},
rowHeight: {
type: Number,
default: 50
},
cellProps: {
type: definePropType([
Object,
Function
])
},
columns,
data: dataType,
dataGetter: {
type: definePropType(Function)
},
fixedData: fixedDataType,
expandColumnKey: tableV2RowProps.expandColumnKey,
expandedRowKeys: expandKeys,
defaultExpandedRowKeys: expandKeys,
class: classType,
fixed: Boolean,
style: {
type: definePropType(Object)
},
width: requiredNumber,
height: requiredNumber,
maxHeight: Number,
useIsScrolling: Boolean,
indentSize: {
type: Number,
default: 12
},
iconSize: {
type: Number,
default: 12
},
hScrollbarSize: virtualizedGridProps.hScrollbarSize,
vScrollbarSize: virtualizedGridProps.vScrollbarSize,
scrollbarAlwaysOn: virtualizedScrollbarProps.alwaysOn,
sortBy: {
type: definePropType(Object),
default: () => ({})
},
sortState: {
type: definePropType(Object),
default: void 0
},
onColumnSort: {
type: definePropType(Function)
},
onExpandedRowsChange: {
type: definePropType(Function)
},
onEndReached: {
type: definePropType(Function)
},
onRowExpand: tableV2RowProps.onRowExpand,
onScroll: tableV2GridProps.onScroll,
onRowsRendered: tableV2GridProps.onRowsRendered,
rowEventHandlers: tableV2RowProps.rowEventHandlers
});
const TableV2Cell = (props, {
slots
}) => {
var _a;
const {
cellData,
style
} = props;
const displayText = ((_a = cellData == null ? void 0 : cellData.toString) == null ? void 0 : _a.call(cellData)) || "";
return vue.createVNode("div", {
"class": props.class,
"title": displayText,
"style": style
}, [slots.default ? slots.default(props) : displayText]);
};
TableV2Cell.displayName = "ElTableV2Cell";
TableV2Cell.inheritAttrs = false;
var TableCell = TableV2Cell;
const HeaderCell = (props, {
slots
}) => {
var _a, _b;
return slots.default ? slots.default(props) : vue.createVNode("div", {
"class": props.class,
"title": (_a = props.column) == null ? void 0 : _a.title
}, [(_b = props.column) == null ? void 0 : _b.title]);
};
HeaderCell.displayName = "ElTableV2HeaderCell";
HeaderCell.inheritAttrs = false;
var HeaderCell$1 = HeaderCell;
const tableV2HeaderRowProps = buildProps({
class: String,
columns,
columnsStyles: {
type: definePropType(Object),
required: true
},
headerIndex: Number,
style: { type: definePropType(Object) }
});
const TableV2HeaderRow = vue.defineComponent({
name: "ElTableV2HeaderRow",
props: tableV2HeaderRowProps,
setup(props, {
slots
}) {
return () => {
const {
columns,
columnsStyles,
headerIndex,
style
} = props;
let Cells = columns.map((column, columnIndex) => {
return slots.cell({
columns,
column,
columnIndex,
headerIndex,
style: columnsStyles[column.key]
});
});
if (slots.header) {
Cells = slots.header({
cells: Cells.map((node) => {
if (isArray(node) && node.length === 1) {
return node[0];
}
return node;
}),
columns,
headerIndex
});
}
return vue.createVNode("div", {
"class": props.class,
"style": style
}, [Cells]);
};
}
});
var HeaderRow = TableV2HeaderRow;
const COMPONENT_NAME$7 = "ElTableV2Header";
const TableV2Header = vue.defineComponent({
name: COMPONENT_NAME$7,
props: tableV2HeaderProps,
setup(props, {
slots,
expose
}) {
const ns = useNamespace("table-v2");
const headerRef = vue.ref();
const headerStyle = vue.computed(() => enforceUnit({
width: props.width,
height: props.height
}));
const rowStyle = vue.computed(() => enforceUnit({
width: props.rowWidth,
height: props.height
}));
const headerHeights = vue.computed(() => castArray$1(vue.unref(props.headerHeight)));
const scrollToLeft = (left) => {
const headerEl = vue.unref(headerRef);
vue.nextTick(() => {
(headerEl == null ? void 0 : headerEl.scroll) && headerEl.scroll({
left
});
});
};
const renderFixedRows = () => {
const fixedRowClassName = ns.e("fixed-header-row");
const {
columns,
fixedHeaderData,
rowHeight
} = props;
return fixedHeaderData == null ? void 0 : fixedHeaderData.map((fixedRowData, fixedRowIndex) => {
var _a;
const style = enforceUnit({
height: rowHeight,
width: "100%"
});
return (_a = slots.fixed) == null ? void 0 : _a.call(slots, {
class: fixedRowClassName,
columns,
rowData: fixedRowData,
rowIndex: -(fixedRowIndex + 1),
style
});
});
};
const renderDynamicRows = () => {
const dynamicRowClassName = ns.e("dynamic-header-row");
const {
columns
} = props;
return vue.unref(headerHeights).map((rowHeight, rowIndex) => {
var _a;
const style = enforceUnit({
width: "100%",
height: rowHeight
});
return (_a = slots.dynamic) == null ? void 0 : _a.call(slots, {
class: dynamicRowClassName,
columns,
headerIndex: rowIndex,
style
});
});
};
expose({
scrollToLeft
});
return () => {
if (props.height <= 0)
return;
return vue.createVNode("div", {
"ref": headerRef,
"class": props.class,
"style": vue.unref(headerStyle)
}, [vue.createVNode("div", {
"style": vue.unref(rowStyle),
"class": ns.e("header")
}, [renderDynamicRows(), renderFixedRows()])]);
};
}
});
var Header = TableV2Header;
const useTableRow = (props) => {
const {
isScrolling
} = vue.inject(TableV2InjectionKey);
const measured = vue.ref(false);
const rowRef = vue.ref();
const measurable = vue.computed(() => {
return isNumber(props.estimatedRowHeight) && props.rowIndex >= 0;
});
const doMeasure = (isInit = false) => {
const $rowRef = vue.unref(rowRef);
if (!$rowRef)
return;
const {
columns,
onRowHeightChange,
rowKey,
rowIndex,
style
} = props;
const {
height
} = $rowRef.getBoundingClientRect();
measured.value = true;
vue.nextTick(() => {
if (isInit || height !== Number.parseInt(style.height)) {
const firstColumn = columns[0];
const isPlaceholder = (firstColumn == null ? void 0 : firstColumn.placeholderSign) === placeholderSign;
onRowHeightChange == null ? void 0 : onRowHeightChange({
rowKey,
height,
rowIndex
}, firstColumn && !isPlaceholder && firstColumn.fixed);
}
});
};
const eventHandlers = vue.computed(() => {
const {
rowData,
rowIndex,
rowKey,
onRowHover
} = props;
const handlers = props.rowEventHandlers || {};
const eventHandlers2 = {};
Object.entries(handlers).forEach(([eventName, handler]) => {
if (isFunction(handler)) {
eventHandlers2[eventName] = (event) => {
handler({
event,
rowData,
rowIndex,
rowKey
});
};
}
});
if (onRowHover) {
[{
name: "onMouseleave",
hovered: false
}, {
name: "onMouseenter",
hovered: true
}].forEach(({
name,
hovered
}) => {
const existedHandler = eventHandlers2[name];
eventHandlers2[name] = (event) => {
onRowHover({
event,
hovered,
rowData,
rowIndex,
rowKey
});
existedHandler == null ? void 0 : existedHandler(event);
};
});
}
return eventHandlers2;
});
const onExpand = (expanded) => {
const {
onRowExpand,
rowData,
rowIndex,
rowKey
} = props;
onRowExpand == null ? void 0 : onRowExpand({
expanded,
rowData,
rowIndex,
rowKey
});
};
vue.onMounted(() => {
if (vue.unref(measurable)) {
doMeasure(true);
}
});
return {
isScrolling,
measurable,
measured,
rowRef,
eventHandlers,
onExpand
};
};
const COMPONENT_NAME$6 = "ElTableV2TableRow";
const TableV2Row = vue.defineComponent({
name: COMPONENT_NAME$6,
props: tableV2RowProps,
setup(props, {
expose,
slots,
attrs
}) {
const {
eventHandlers,
isScrolling,
measurable,
measured,
rowRef,
onExpand
} = useTableRow(props);
expose({
onExpand
});
return () => {
const {
columns,
columnsStyles,
expandColumnKey,
depth,
rowData,
rowIndex,
style
} = props;
let ColumnCells = columns.map((column, columnIndex) => {
const expandable = isArray(rowData.children) && rowData.children.length > 0 && column.key === expandColumnKey;
return slots.cell({
column,
columns,
columnIndex,
depth,
style: columnsStyles[column.key],
rowData,
rowIndex,
isScrolling: vue.unref(isScrolling),
expandIconProps: expandable ? {
rowData,
rowIndex,
onExpand
} : void 0
});
});
if (slots.row) {
ColumnCells = slots.row({
cells: ColumnCells.map((node) => {
if (isArray(node) && node.length === 1) {
return node[0];
}
return node;
}),
style,
columns,
depth,
rowData,
rowIndex,
isScrolling: vue.unref(isScrolling)
});
}
if (vue.unref(measurable)) {
const {
height,
...exceptHeightStyle
} = style || {};
const _measured = vue.unref(measured);
return vue.createVNode("div", vue.mergeProps({
"ref": rowRef,
"class": props.class,
"style": _measured ? style : exceptHeightStyle
}, attrs, vue.unref(eventHandlers)), [ColumnCells]);
}
return vue.createVNode("div", vue.mergeProps(attrs, {
"ref": rowRef,
"class": props.class,
"style": style
}, vue.unref(eventHandlers)), [ColumnCells]);
};
}
});
var Row = TableV2Row;
const SortIcon = (props) => {
const {
sortOrder
} = props;
return vue.createVNode(ElIcon, {
"size": 14,
"class": props.class
}, {
default: () => [sortOrder === SortOrder.ASC ? vue.createVNode(sort_up_default, null, null) : vue.createVNode(sort_down_default, null, null)]
});
};
var SortIcon$1 = SortIcon;
const ExpandIcon = (props) => {
const {
expanded,
expandable,
onExpand,
style,
size
} = props;
const expandIconProps = {
onClick: expandable ? () => onExpand(!expanded) : void 0,
class: props.class
};
return vue.createVNode(ElIcon, vue.mergeProps(expandIconProps, {
"size": size,
"style": style
}), {
default: () => [vue.createVNode(arrow_right_default, null, null)]
});
};
var ExpandIcon$1 = ExpandIcon;
const COMPONENT_NAME$5 = "ElTableV2Grid";
const useTableGrid = (props) => {
const headerRef = vue.ref();
const bodyRef = vue.ref();
const totalHeight = vue.computed(() => {
const {
data,
rowHeight,
estimatedRowHeight
} = props;
if (estimatedRowHeight) {
return;
}
return data.length * rowHeight;
});
const fixedRowHeight = vue.computed(() => {
const {
fixedData,
rowHeight
} = props;
return ((fixedData == null ? void 0 : fixedData.length) || 0) * rowHeight;
});
const headerHeight = vue.computed(() => sum(props.headerHeight));
const gridHeight = vue.computed(() => {
const {
height
} = props;
return Math.max(0, height - vue.unref(headerHeight) - vue.unref(fixedRowHeight));
});
const hasHeader = vue.computed(() => {
return vue.unref(headerHeight) + vue.unref(fixedRowHeight) > 0;
});
const itemKey = ({
data,
rowIndex
}) => data[rowIndex][props.rowKey];
function onItemRendered({
rowCacheStart,
rowCacheEnd,
rowVisibleStart,
rowVisibleEnd
}) {
var _a;
(_a = props.onRowsRendered) == null ? void 0 : _a.call(props, {
rowCacheStart,
rowCacheEnd,
rowVisibleStart,
rowVisibleEnd
});
}
function resetAfterRowIndex(index, forceUpdate2) {
var _a;
(_a = bodyRef.value) == null ? void 0 : _a.resetAfterRowIndex(index, forceUpdate2);
}
function scrollTo(leftOrOptions, top) {
const header$ = vue.unref(headerRef);
const body$ = vue.unref(bodyRef);
if (!header$ || !body$)
return;
if (isObject$1(leftOrOptions)) {
header$.scrollToLeft(leftOrOptions.scrollLeft);
body$.scrollTo(leftOrOptions);
} else {
header$.scrollToLeft(leftOrOptions);
body$.scrollTo({
scrollLeft: leftOrOptions,
scrollTop: top
});
}
}
function scrollToTop(scrollTop) {
var _a;
(_a = vue.unref(bodyRef)) == null ? void 0 : _a.scrollTo({
scrollTop
});
}
function scrollToRow(row, strategy) {
var _a;
(_a = vue.unref(bodyRef)) == null ? void 0 : _a.scrollToItem(row, 1, strategy);
}
function forceUpdate() {
var _a, _b;
(_a = vue.unref(bodyRef)) == null ? void 0 : _a.$forceUpdate();
(_b = vue.unref(headerRef)) == null ? void 0 : _b.$forceUpdate();
}
return {
bodyRef,
forceUpdate,
fixedRowHeight,
gridHeight,
hasHeader,
headerHeight,
headerRef,
totalHeight,
itemKey,
onItemRendered,
resetAfterRowIndex,
scrollTo,
scrollToTop,
scrollToRow
};
};
const TableGrid = vue.defineComponent({
name: COMPONENT_NAME$5,
props: tableV2GridProps,
setup(props, {
slots,
expose
}) {
const {
ns
} = vue.inject(TableV2InjectionKey);
const {
bodyRef,
fixedRowHeight,
gridHeight,
hasHeader,
headerRef,
headerHeight,
totalHeight,
forceUpdate,
itemKey,
onItemRendered,
resetAfterRowIndex,
scrollTo,
scrollToTop,
scrollToRow
} = useTableGrid(props);
expose({
forceUpdate,
totalHeight,
scrollTo,
scrollToTop,
scrollToRow,
resetAfterRowIndex
});
const getColumnWidth = () => props.bodyWidth;
return () => {
const {
cache,
columns,
data,
fixedData,
useIsScrolling,
scrollbarAlwaysOn,
scrollbarEndGap,
scrollbarStartGap,
style,
rowHeight,
bodyWidth,
estimatedRowHeight,
headerWidth,
height,
width,
getRowHeight,
onScroll
} = props;
const isDynamicRowEnabled = isNumber(estimatedRowHeight);
const Grid = isDynamicRowEnabled ? DynamicSizeGrid$1 : FixedSizeGrid$1;
const _headerHeight = vue.unref(headerHeight);
return vue.createVNode("div", {
"role": "table",
"class": [ns.e("table"), props.class],
"style": style
}, [vue.createVNode(Grid, {
"ref": bodyRef,
"data": data,
"useIsScrolling": useIsScrolling,
"itemKey": itemKey,
"columnCache": 0,
"columnWidth": isDynamicRowEnabled ? getColumnWidth : bodyWidth,
"totalColumn": 1,
"totalRow": data.length,
"rowCache": cache,
"rowHeight": isDynamicRowEnabled ? getRowHeight : rowHeight,
"width": width,
"height": vue.unref(gridHeight),
"class": ns.e("body"),
"scrollbarStartGap": scrollbarStartGap,
"scrollbarEndGap": scrollbarEndGap,
"scrollbarAlwaysOn": scrollbarAlwaysOn,
"onScroll": onScroll,
"onItemRendered": onItemRendered,
"perfMode": false
}, {
default: (params) => {
var _a;
const rowData = data[params.rowIndex];
return (_a = slots.row) == null ? void 0 : _a.call(slots, {
...params,
columns,
rowData
});
}
}), vue.unref(hasHeader) && vue.createVNode(Header, {
"ref": headerRef,
"class": ns.e("header-wrapper"),
"columns": columns,
"headerData": data,
"headerHeight": props.headerHeight,
"fixedHeaderData": fixedData,
"rowWidth": headerWidth,
"rowHeight": rowHeight,
"width": width,
"height": Math.min(_headerHeight + vue.unref(fixedRowHeight), height)
}, {
dynamic: slots.header,
fixed: slots.row
})]);
};
}
});
function _isSlot$5(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
const MainTable = (props, {
slots
}) => {
const {
mainTableRef,
...rest
} = props;
return vue.createVNode(TableGrid, vue.mergeProps({
"ref": mainTableRef
}, rest), _isSlot$5(slots) ? slots : {
default: () => [slots]
});
};
function _isSlot$4(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
const LeftTable$1 = (props, {
slots
}) => {
if (!props.columns.length)
return;
const {
leftTableRef,
...rest
} = props;
return vue.createVNode(TableGrid, vue.mergeProps({
"ref": leftTableRef
}, rest), _isSlot$4(slots) ? slots : {
default: () => [slots]
});
};
function _isSlot$3(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
const LeftTable = (props, {
slots
}) => {
if (!props.columns.length)
return;
const {
rightTableRef,
...rest
} = props;
return vue.createVNode(TableGrid, vue.mergeProps({
"ref": rightTableRef
}, rest), _isSlot$3(slots) ? slots : {
default: () => [slots]
});
};
function _isSlot$2(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
const RowRenderer = (props, {
slots
}) => {
const {
columns,
columnsStyles,
depthMap,
expandColumnKey,
expandedRowKeys,
estimatedRowHeight,
hasFixedColumns,
hoveringRowKey,
rowData,
rowIndex,
style,
isScrolling,
rowProps,
rowClass,
rowKey,
rowEventHandlers,
ns,
onRowHovered,
onRowExpanded
} = props;
const rowKls = tryCall(rowClass, {
columns,
rowData,
rowIndex
}, "");
const additionalProps = tryCall(rowProps, {
columns,
rowData,
rowIndex
});
const _rowKey = rowData[rowKey];
const depth = depthMap[_rowKey] || 0;
const canExpand = Boolean(expandColumnKey);
const isFixedRow = rowIndex < 0;
const kls = [ns.e("row"), rowKls, {
[ns.e(`row-depth-${depth}`)]: canExpand && rowIndex >= 0,
[ns.is("expanded")]: canExpand && expandedRowKeys.includes(_rowKey),
[ns.is("hovered")]: !isScrolling && _rowKey === hoveringRowKey,
[ns.is("fixed")]: !depth && isFixedRow,
[ns.is("customized")]: Boolean(slots.row)
}];
const onRowHover = hasFixedColumns ? onRowHovered : void 0;
const _rowProps = {
...additionalProps,
columns,
columnsStyles,
class: kls,
depth,
expandColumnKey,
estimatedRowHeight: isFixedRow ? void 0 : estimatedRowHeight,
isScrolling,
rowIndex,
rowData,
rowKey: _rowKey,
rowEventHandlers,
style
};
return vue.createVNode(Row, vue.mergeProps(_rowProps, {
"onRowHover": onRowHover,
"onRowExpand": onRowExpanded
}), _isSlot$2(slots) ? slots : {
default: () => [slots]
});
};
const CellRenderer = ({
columns,
column,
columnIndex,
depth,
expandIconProps,
isScrolling,
rowData,
rowIndex,
style,
expandedRowKeys,
ns,
cellProps: _cellProps,
expandColumnKey,
indentSize,
iconSize,
rowKey
}, {
slots
}) => {
const cellStyle = enforceUnit(style);
if (column.placeholderSign === placeholderSign) {
return vue.createVNode("div", {
"class": ns.em("row-cell", "placeholder"),
"style": cellStyle
}, null);
}
const {
cellRenderer,
dataKey,
dataGetter
} = column;
const columnCellRenderer = componentToSlot(cellRenderer);
const CellComponent = columnCellRenderer || slots.default || ((props) => vue.createVNode(TableCell, props, null));
const cellData = isFunction(dataGetter) ? dataGetter({
columns,
column,
columnIndex,
rowData,
rowIndex
}) : get(rowData, dataKey != null ? dataKey : "");
const extraCellProps = tryCall(_cellProps, {
cellData,
columns,
column,
columnIndex,
rowIndex,
rowData
});
const cellProps = {
class: ns.e("cell-text"),
columns,
column,
columnIndex,
cellData,
isScrolling,
rowData,
rowIndex
};
const Cell = CellComponent(cellProps);
const kls = [ns.e("row-cell"), column.align === Alignment.CENTER && ns.is("align-center"), column.align === Alignment.RIGHT && ns.is("align-right")];
const expandable = rowIndex >= 0 && column.key === expandColumnKey;
const expanded = rowIndex >= 0 && expandedRowKeys.includes(rowData[rowKey]);
let IconOrPlaceholder;
const iconStyle = `margin-inline-start: ${depth * indentSize}px;`;
if (expandable) {
if (isObject$1(expandIconProps)) {
IconOrPlaceholder = vue.createVNode(ExpandIcon$1, vue.mergeProps(expandIconProps, {
"class": [ns.e("expand-icon"), ns.is("expanded", expanded)],
"size": iconSize,
"expanded": expanded,
"style": iconStyle,
"expandable": true
}), null);
} else {
IconOrPlaceholder = vue.createVNode("div", {
"style": [iconStyle, `width: ${iconSize}px; height: ${iconSize}px;`].join(" ")
}, null);
}
}
return vue.createVNode("div", vue.mergeProps({
"class": kls,
"style": cellStyle
}, extraCellProps), [IconOrPlaceholder, Cell]);
};
CellRenderer.inheritAttrs = false;
function _isSlot$1(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
const HeaderRenderer = ({
columns,
columnsStyles,
headerIndex,
style,
headerClass,
headerProps,
ns
}, {
slots
}) => {
const param = {
columns,
headerIndex
};
const kls = [ns.e("header-row"), tryCall(headerClass, param, ""), {
[ns.is("customized")]: Boolean(slots.header)
}];
const extraProps = {
...tryCall(headerProps, param),
columnsStyles,
class: kls,
columns,
headerIndex,
style
};
return vue.createVNode(HeaderRow, extraProps, _isSlot$1(slots) ? slots : {
default: () => [slots]
});
};
const HeaderCellRenderer = (props, {
slots
}) => {
const {
column,
ns,
style,
onColumnSorted
} = props;
const cellStyle = enforceUnit(style);
if (column.placeholderSign === placeholderSign) {
return vue.createVNode("div", {
"class": ns.em("header-row-cell", "placeholder"),
"style": cellStyle
}, null);
}
const {
headerCellRenderer,
headerClass,
sortable
} = column;
const cellProps = {
...props,
class: ns.e("header-cell-text")
};
const cellRenderer = componentToSlot(headerCellRenderer) || slots.default || ((props2) => vue.createVNode(HeaderCell$1, props2, null));
const Cell = cellRenderer(cellProps);
const {
sortBy,
sortState,
headerCellProps
} = props;
let sorting, sortOrder;
if (sortState) {
const order = sortState[column.key];
sorting = Boolean(oppositeOrderMap[order]);
sortOrder = sorting ? order : SortOrder.ASC;
} else {
sorting = column.key === sortBy.key;
sortOrder = sorting ? sortBy.order : SortOrder.ASC;
}
const cellKls = [ns.e("header-cell"), tryCall(headerClass, props, ""), column.align === Alignment.CENTER && ns.is("align-center"), column.align === Alignment.RIGHT && ns.is("align-right"), sortable && ns.is("sortable")];
const cellWrapperProps = {
...tryCall(headerCellProps, props),
onClick: column.sortable ? onColumnSorted : void 0,
class: cellKls,
style: cellStyle,
["data-key"]: column.key
};
return vue.createVNode("div", cellWrapperProps, [Cell, sortable && vue.createVNode(SortIcon$1, {
"class": [ns.e("sort-icon"), sorting && ns.is("sorting")],
"sortOrder": sortOrder
}, null)]);
};
const Footer$1 = (props, {
slots
}) => {
var _a;
return vue.createVNode("div", {
"class": props.class,
"style": props.style
}, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
};
Footer$1.displayName = "ElTableV2Footer";
const Footer = (props, {
slots
}) => {
return vue.createVNode("div", {
"class": props.class,
"style": props.style
}, [slots.default ? slots.default() : vue.createVNode(ElEmpty, null, null)]);
};
Footer.displayName = "ElTableV2Empty";
const Overlay = (props, {
slots
}) => {
var _a;
return vue.createVNode("div", {
"class": props.class,
"style": props.style
}, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
};
Overlay.displayName = "ElTableV2Overlay";
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
const COMPONENT_NAME$4 = "ElTableV2";
const TableV2 = vue.defineComponent({
name: COMPONENT_NAME$4,
props: tableV2Props,
setup(props, {
slots,
expose
}) {
const ns = useNamespace("table-v2");
const {
columnsStyles,
fixedColumnsOnLeft,
fixedColumnsOnRight,
mainColumns,
mainTableHeight,
fixedTableHeight,
leftTableWidth,
rightTableWidth,
data,
depthMap,
expandedRowKeys,
hasFixedColumns,
hoveringRowKey,
mainTableRef,
leftTableRef,
rightTableRef,
isDynamic,
isResetting,
isScrolling,
bodyWidth,
emptyStyle,
rootStyle,
headerWidth,
footerHeight,
showEmpty,
scrollTo,
scrollToLeft,
scrollToTop,
scrollToRow,
getRowHeight,
onColumnSorted,
onRowHeightChange,
onRowHovered,
onRowExpanded,
onRowsRendered,
onScroll,
onVerticalScroll
} = useTable(props);
expose({
scrollTo,
scrollToLeft,
scrollToTop,
scrollToRow
});
vue.provide(TableV2InjectionKey, {
ns,
isResetting,
hoveringRowKey,
isScrolling
});
return () => {
const {
cache,
cellProps,
estimatedRowHeight,
expandColumnKey,
fixedData,
headerHeight,
headerClass,
headerProps,
headerCellProps,
sortBy,
sortState,
rowHeight,
rowClass,
rowEventHandlers,
rowKey,
rowProps,
scrollbarAlwaysOn,
indentSize,
iconSize,
useIsScrolling,
vScrollbarSize,
width
} = props;
const _data = vue.unref(data);
const mainTableProps = {
cache,
class: ns.e("main"),
columns: vue.unref(mainColumns),
data: _data,
fixedData,
estimatedRowHeight,
bodyWidth: vue.unref(bodyWidth),
headerHeight,
headerWidth: vue.unref(headerWidth),
height: vue.unref(mainTableHeight),
mainTableRef,
rowKey,
rowHeight,
scrollbarAlwaysOn,
scrollbarStartGap: 2,
scrollbarEndGap: vScrollbarSize,
useIsScrolling,
width,
getRowHeight,
onRowsRendered,
onScroll
};
const leftColumnsWidth = vue.unref(leftTableWidth);
const _fixedTableHeight = vue.unref(fixedTableHeight);
const leftTableProps = {
cache,
class: ns.e("left"),
columns: vue.unref(fixedColumnsOnLeft),
data: _data,
estimatedRowHeight,
leftTableRef,
rowHeight,
bodyWidth: leftColumnsWidth,
headerWidth: leftColumnsWidth,
headerHeight,
height: _fixedTableHeight,
rowKey,
scrollbarAlwaysOn,
scrollbarStartGap: 2,
scrollbarEndGap: vScrollbarSize,
useIsScrolling,
width: leftColumnsWidth,
getRowHeight,
onScroll: onVerticalScroll
};
const rightColumnsWidth = vue.unref(rightTableWidth);
const rightColumnsWidthWithScrollbar = rightColumnsWidth + vScrollbarSize;
const rightTableProps = {
cache,
class: ns.e("right"),
columns: vue.unref(fixedColumnsOnRight),
data: _data,
estimatedRowHeight,
rightTableRef,
rowHeight,
bodyWidth: rightColumnsWidthWithScrollbar,
headerWidth: rightColumnsWidthWithScrollbar,
headerHeight,
height: _fixedTableHeight,
rowKey,
scrollbarAlwaysOn,
scrollbarStartGap: 2,
scrollbarEndGap: vScrollbarSize,
width: rightColumnsWidthWithScrollbar,
style: `--${vue.unref(ns.namespace)}-table-scrollbar-size: ${vScrollbarSize}px`,
useIsScrolling,
getRowHeight,
onScroll: onVerticalScroll
};
const _columnsStyles = vue.unref(columnsStyles);
const tableRowProps = {
ns,
depthMap: vue.unref(depthMap),
columnsStyles: _columnsStyles,
expandColumnKey,
expandedRowKeys: vue.unref(expandedRowKeys),
estimatedRowHeight,
hasFixedColumns: vue.unref(hasFixedColumns),
hoveringRowKey: vue.unref(hoveringRowKey),
rowProps,
rowClass,
rowKey,
rowEventHandlers,
onRowHovered,
onRowExpanded,
onRowHeightChange
};
const tableCellProps = {
cellProps,
expandColumnKey,
indentSize,
iconSize,
rowKey,
expandedRowKeys: vue.unref(expandedRowKeys),
ns
};
const tableHeaderProps = {
ns,
headerClass,
headerProps,
columnsStyles: _columnsStyles
};
const tableHeaderCellProps = {
ns,
sortBy,
sortState,
headerCellProps,
onColumnSorted
};
const tableSlots = {
row: (props2) => vue.createVNode(RowRenderer, vue.mergeProps(props2, tableRowProps), {
row: slots.row,
cell: (props3) => {
let _slot;
return slots.cell ? vue.createVNode(CellRenderer, vue.mergeProps(props3, tableCellProps, {
"style": _columnsStyles[props3.column.key]
}), _isSlot(_slot = slots.cell(props3)) ? _slot : {
default: () => [_slot]
}) : vue.createVNode(CellRenderer, vue.mergeProps(props3, tableCellProps, {
"style": _columnsStyles[props3.column.key]
}), null);
}
}),
header: (props2) => vue.createVNode(HeaderRenderer, vue.mergeProps(props2, tableHeaderProps), {
header: slots.header,
cell: (props3) => {
let _slot2;
return slots["header-cell"] ? vue.createVNode(HeaderCellRenderer, vue.mergeProps(props3, tableHeaderCellProps, {
"style": _columnsStyles[props3.column.key]
}), _isSlot(_slot2 = slots["header-cell"](props3)) ? _slot2 : {
default: () => [_slot2]
}) : vue.createVNode(HeaderCellRenderer, vue.mergeProps(props3, tableHeaderCellProps, {
"style": _columnsStyles[props3.column.key]
}), null);
}
})
};
const rootKls = [props.class, ns.b(), ns.e("root"), {
[ns.is("dynamic")]: vue.unref(isDynamic)
}];
const footerProps = {
class: ns.e("footer"),
style: vue.unref(footerHeight)
};
return vue.createVNode("div", {
"class": rootKls,
"style": vue.unref(rootStyle)
}, [vue.createVNode(MainTable, mainTableProps, _isSlot(tableSlots) ? tableSlots : {
default: () => [tableSlots]
}), vue.createVNode(LeftTable$1, leftTableProps, _isSlot(tableSlots) ? tableSlots : {
default: () => [tableSlots]
}), vue.createVNode(LeftTable, rightTableProps, _isSlot(tableSlots) ? tableSlots : {
default: () => [tableSlots]
}), slots.footer && vue.createVNode(Footer$1, footerProps, {
default: slots.footer
}), vue.unref(showEmpty) && vue.createVNode(Footer, {
"class": ns.e("empty"),
"style": vue.unref(emptyStyle)
}, {
default: slots.empty
}), slots.overlay && vue.createVNode(Overlay, {
"class": ns.e("overlay")
}, {
default: slots.overlay
})]);
};
}
});
var TableV2$1 = TableV2;
const autoResizerProps = buildProps({
disableWidth: Boolean,
disableHeight: Boolean,
onResize: {
type: definePropType(Function)
}
});
const AutoResizer = vue.defineComponent({
name: "ElAutoResizer",
props: autoResizerProps,
setup(props, {
slots
}) {
const ns = useNamespace("auto-resizer");
const {
height,
width,
sizer
} = useAutoResize(props);
const style = {
width: "100%",
height: "100%"
};
return () => {
var _a;
return vue.createVNode("div", {
"ref": sizer,
"class": ns.b(),
"style": style
}, [(_a = slots.default) == null ? void 0 : _a.call(slots, {
height: height.value,
width: width.value
})]);
};
}
});
const ElTableV2 = withInstall(TableV2$1);
const ElAutoResizer = withInstall(AutoResizer);
const tabBarProps = buildProps({
tabs: {
type: definePropType(Array),
default: () => mutable([])
}
});
const COMPONENT_NAME$3 = "ElTabBar";
const __default__$j = vue.defineComponent({
name: COMPONENT_NAME$3
});
const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
...__default__$j,
props: tabBarProps,
setup(__props, { expose }) {
const props = __props;
const instance = vue.getCurrentInstance();
const rootTabs = vue.inject(tabsRootContextKey);
if (!rootTabs)
throwError(COMPONENT_NAME$3, "");
const ns = useNamespace("tabs");
const barRef = vue.ref();
const barStyle = vue.ref();
const getBarStyle = () => {
let offset = 0;
let tabSize = 0;
const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height";
const sizeDir = sizeName === "width" ? "x" : "y";
props.tabs.every((tab) => {
var _a, _b, _c, _d;
const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.uid}`];
if (!$el)
return false;
if (!tab.active) {
return true;
}
tabSize = $el[`client${capitalize(sizeName)}`];
const position = sizeDir === "x" ? "left" : "top";
offset = $el[`offset${capitalize(position)}`] - ((_d = (_c = $el.parentElement) == null ? void 0 : _c[`offset${capitalize(position)}`]) != null ? _d : 0);
const scrollwrapEl = $el.closest(".is-scrollable");
if (scrollwrapEl) {
const scrollWrapStyle = window.getComputedStyle(scrollwrapEl);
offset += Number.parseFloat(scrollWrapStyle[`padding${capitalize(position)}`]);
}
const tabStyles = window.getComputedStyle($el);
if (sizeName === "width") {
if (props.tabs.length > 1) {
tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);
}
offset += Number.parseFloat(tabStyles.paddingLeft);
}
return false;
});
return {
[sizeName]: `${tabSize}px`,
transform: `translate${capitalize(sizeDir)}(${offset}px)`
};
};
const update = () => barStyle.value = getBarStyle();
vue.watch(() => props.tabs, async () => {
await vue.nextTick();
update();
}, { immediate: true });
useResizeObserver(barRef, () => update());
expose({
ref: barRef,
update
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "barRef",
ref: barRef,
class: vue.normalizeClass([vue.unref(ns).e("active-bar"), vue.unref(ns).is(vue.unref(rootTabs).props.tabPosition)]),
style: vue.normalizeStyle(barStyle.value)
}, null, 6);
};
}
});
var TabBar = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__file", "tab-bar.vue"]]);
const tabNavProps = buildProps({
panes: {
type: definePropType(Array),
default: () => mutable([])
},
currentName: {
type: [String, Number],
default: ""
},
editable: Boolean,
type: {
type: String,
values: ["card", "border-card", ""],
default: ""
},
stretch: Boolean
});
const tabNavEmits = {
tabClick: (tab, tabName, ev) => ev instanceof Event,
tabRemove: (tab, ev) => ev instanceof Event
};
const COMPONENT_NAME$2 = "ElTabNav";
const TabNav = vue.defineComponent({
name: COMPONENT_NAME$2,
props: tabNavProps,
emits: tabNavEmits,
setup(props, {
expose,
emit
}) {
const vm = vue.getCurrentInstance();
const rootTabs = vue.inject(tabsRootContextKey);
if (!rootTabs)
throwError(COMPONENT_NAME$2, ``);
const ns = useNamespace("tabs");
const visibility = useDocumentVisibility();
const focused = useWindowFocus();
const navScroll$ = vue.ref();
const nav$ = vue.ref();
const el$ = vue.ref();
const scrollable = vue.ref(false);
const navOffset = vue.ref(0);
const isFocus = vue.ref(false);
const focusable = vue.ref(true);
const sizeName = vue.computed(() => ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height");
const navStyle = vue.computed(() => {
const dir = sizeName.value === "width" ? "X" : "Y";
return {
transform: `translate${dir}(-${navOffset.value}px)`
};
});
const scrollPrev = () => {
if (!navScroll$.value)
return;
const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];
const currentOffset = navOffset.value;
if (!currentOffset)
return;
const newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
navOffset.value = newOffset;
};
const scrollNext = () => {
if (!navScroll$.value || !nav$.value)
return;
const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];
const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];
const currentOffset = navOffset.value;
if (navSize - currentOffset <= containerSize)
return;
const newOffset = navSize - currentOffset > containerSize * 2 ? currentOffset + containerSize : navSize - containerSize;
navOffset.value = newOffset;
};
const scrollToActiveTab = async () => {
const nav = nav$.value;
if (!scrollable.value || !el$.value || !navScroll$.value || !nav)
return;
await vue.nextTick();
const activeTab = el$.value.querySelector(".is-active");
if (!activeTab)
return;
const navScroll = navScroll$.value;
const isHorizontal = ["top", "bottom"].includes(rootTabs.props.tabPosition);
const activeTabBounding = activeTab.getBoundingClientRect();
const navScrollBounding = navScroll.getBoundingClientRect();
const maxOffset = isHorizontal ? nav.offsetWidth - navScrollBounding.width : nav.offsetHeight - navScrollBounding.height;
const currentOffset = navOffset.value;
let newOffset = currentOffset;
if (isHorizontal) {
if (activeTabBounding.left < navScrollBounding.left) {
newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
}
if (activeTabBounding.right > navScrollBounding.right) {
newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
}
} else {
if (activeTabBounding.top < navScrollBounding.top) {
newOffset = currentOffset - (navScrollBounding.top - activeTabBounding.top);
}
if (activeTabBounding.bottom > navScrollBounding.bottom) {
newOffset = currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);
}
}
newOffset = Math.max(newOffset, 0);
navOffset.value = Math.min(newOffset, maxOffset);
};
const update = () => {
if (!nav$.value || !navScroll$.value)
return;
const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];
const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];
const currentOffset = navOffset.value;
if (containerSize < navSize) {
const currentOffset2 = navOffset.value;
scrollable.value = scrollable.value || {};
scrollable.value.prev = currentOffset2;
scrollable.value.next = currentOffset2 + containerSize < navSize;
if (navSize - currentOffset2 < containerSize) {
navOffset.value = navSize - containerSize;
}
} else {
scrollable.value = false;
if (currentOffset > 0) {
navOffset.value = 0;
}
}
};
const changeTab = (e) => {
const code = e.code;
const {
up,
down,
left,
right
} = EVENT_CODE;
if (![up, down, left, right].includes(code))
return;
const tabList = Array.from(e.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)"));
const currentIndex = tabList.indexOf(e.target);
let nextIndex;
if (code === left || code === up) {
if (currentIndex === 0) {
nextIndex = tabList.length - 1;
} else {
nextIndex = currentIndex - 1;
}
} else {
if (currentIndex < tabList.length - 1) {
nextIndex = currentIndex + 1;
} else {
nextIndex = 0;
}
}
tabList[nextIndex].focus({
preventScroll: true
});
tabList[nextIndex].click();
setFocus();
};
const setFocus = () => {
if (focusable.value)
isFocus.value = true;
};
const removeFocus = () => isFocus.value = false;
vue.watch(visibility, (visibility2) => {
if (visibility2 === "hidden") {
focusable.value = false;
} else if (visibility2 === "visible") {
setTimeout(() => focusable.value = true, 50);
}
});
vue.watch(focused, (focused2) => {
if (focused2) {
setTimeout(() => focusable.value = true, 50);
} else {
focusable.value = false;
}
});
useResizeObserver(el$, update);
vue.onMounted(() => setTimeout(() => scrollToActiveTab(), 0));
vue.onUpdated(() => update());
expose({
scrollToActiveTab,
removeFocus
});
vue.watch(() => props.panes, () => vm.update(), {
flush: "post"
});
return () => {
const scrollBtn = scrollable.value ? [vue.createVNode("span", {
"class": [ns.e("nav-prev"), ns.is("disabled", !scrollable.value.prev)],
"onClick": scrollPrev
}, [vue.createVNode(ElIcon, null, {
default: () => [vue.createVNode(arrow_left_default, null, null)]
})]), vue.createVNode("span", {
"class": [ns.e("nav-next"), ns.is("disabled", !scrollable.value.next)],
"onClick": scrollNext
}, [vue.createVNode(ElIcon, null, {
default: () => [vue.createVNode(arrow_right_default, null, null)]
})])] : null;
const tabs = props.panes.map((pane, index) => {
var _a, _b, _c, _d;
const uid = pane.uid;
const disabled = pane.props.disabled;
const tabName = (_b = (_a = pane.props.name) != null ? _a : pane.index) != null ? _b : `${index}`;
const closable = !disabled && (pane.isClosable || props.editable);
pane.index = `${index}`;
const btnClose = closable ? vue.createVNode(ElIcon, {
"class": "is-icon-close",
"onClick": (ev) => emit("tabRemove", pane, ev)
}, {
default: () => [vue.createVNode(close_default, null, null)]
}) : null;
const tabLabelContent = ((_d = (_c = pane.slots).label) == null ? void 0 : _d.call(_c)) || pane.props.label;
const tabindex = !disabled && pane.active ? 0 : -1;
return vue.createVNode("div", {
"ref": `tab-${uid}`,
"class": [ns.e("item"), ns.is(rootTabs.props.tabPosition), ns.is("active", pane.active), ns.is("disabled", disabled), ns.is("closable", closable), ns.is("focus", isFocus.value)],
"id": `tab-${tabName}`,
"key": `tab-${uid}`,
"aria-controls": `pane-${tabName}`,
"role": "tab",
"aria-selected": pane.active,
"tabindex": tabindex,
"onFocus": () => setFocus(),
"onBlur": () => removeFocus(),
"onClick": (ev) => {
removeFocus();
emit("tabClick", pane, tabName, ev);
},
"onKeydown": (ev) => {
if (closable && (ev.code === EVENT_CODE.delete || ev.code === EVENT_CODE.backspace)) {
emit("tabRemove", pane, ev);
}
}
}, [...[tabLabelContent, btnClose]]);
});
return vue.createVNode("div", {
"ref": el$,
"class": [ns.e("nav-wrap"), ns.is("scrollable", !!scrollable.value), ns.is(rootTabs.props.tabPosition)]
}, [scrollBtn, vue.createVNode("div", {
"class": ns.e("nav-scroll"),
"ref": navScroll$
}, [vue.createVNode("div", {
"class": [ns.e("nav"), ns.is(rootTabs.props.tabPosition), ns.is("stretch", props.stretch && ["top", "bottom"].includes(rootTabs.props.tabPosition))],
"ref": nav$,
"style": navStyle.value,
"role": "tablist",
"onKeydown": changeTab
}, [...[!props.type ? vue.createVNode(TabBar, {
"tabs": [...props.panes]
}, null) : null, tabs]])])]);
};
}
});
const tabsProps = buildProps({
type: {
type: String,
values: ["card", "border-card", ""],
default: ""
},
activeName: {
type: [String, Number]
},
closable: Boolean,
addable: Boolean,
modelValue: {
type: [String, Number]
},
editable: Boolean,
tabPosition: {
type: String,
values: ["top", "right", "bottom", "left"],
default: "top"
},
beforeLeave: {
type: definePropType(Function),
default: () => true
},
stretch: Boolean
});
const isPaneName = (value) => isString(value) || isNumber(value);
const tabsEmits = {
[UPDATE_MODEL_EVENT]: (name) => isPaneName(name),
tabClick: (pane, ev) => ev instanceof Event,
tabChange: (name) => isPaneName(name),
edit: (paneName, action) => ["remove", "add"].includes(action),
tabRemove: (name) => isPaneName(name),
tabAdd: () => true
};
var Tabs = vue.defineComponent({
name: "ElTabs",
props: tabsProps,
emits: tabsEmits,
setup(props, {
emit,
slots,
expose
}) {
var _a, _b;
const ns = useNamespace("tabs");
const {
children: panes,
addChild: registerPane,
removeChild: unregisterPane
} = useOrderedChildren(vue.getCurrentInstance(), "ElTabPane");
const nav$ = vue.ref();
const currentName = vue.ref((_b = (_a = props.modelValue) != null ? _a : props.activeName) != null ? _b : "0");
const changeCurrentName = (value) => {
currentName.value = value;
emit(UPDATE_MODEL_EVENT, value);
emit("tabChange", value);
};
const setCurrentName = async (value) => {
var _a2, _b2, _c;
if (currentName.value === value || isUndefined(value))
return;
try {
const canLeave = await ((_a2 = props.beforeLeave) == null ? void 0 : _a2.call(props, value, currentName.value));
if (canLeave !== false) {
changeCurrentName(value);
(_c = (_b2 = nav$.value) == null ? void 0 : _b2.removeFocus) == null ? void 0 : _c.call(_b2);
}
} catch (e) {
}
};
const handleTabClick = (tab, tabName, event) => {
if (tab.props.disabled)
return;
setCurrentName(tabName);
emit("tabClick", tab, event);
};
const handleTabRemove = (pane, ev) => {
if (pane.props.disabled || isUndefined(pane.props.name))
return;
ev.stopPropagation();
emit("edit", pane.props.name, "remove");
emit("tabRemove", pane.props.name);
};
const handleTabAdd = () => {
emit("edit", void 0, "add");
emit("tabAdd");
};
useDeprecated({
from: '"activeName"',
replacement: '"model-value" or "v-model"',
scope: "ElTabs",
version: "2.3.0",
ref: "https://element-plus.org/en-US/component/tabs.html#attributes",
type: "Attribute"
}, vue.computed(() => !!props.activeName));
vue.watch(() => props.activeName, (modelValue) => setCurrentName(modelValue));
vue.watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue));
vue.watch(currentName, async () => {
var _a2;
await vue.nextTick();
(_a2 = nav$.value) == null ? void 0 : _a2.scrollToActiveTab();
});
vue.provide(tabsRootContextKey, {
props,
currentName,
registerPane,
unregisterPane
});
expose({
currentName
});
return () => {
const newButton = props.editable || props.addable ? vue.createVNode("span", {
"class": ns.e("new-tab"),
"tabindex": "0",
"onClick": handleTabAdd,
"onKeydown": (ev) => {
if (ev.code === EVENT_CODE.enter)
handleTabAdd();
}
}, [vue.createVNode(ElIcon, {
"class": ns.is("icon-plus")
}, {
default: () => [vue.createVNode(plus_default, null, null)]
})]) : null;
const header = vue.createVNode("div", {
"class": [ns.e("header"), ns.is(props.tabPosition)]
}, [newButton, vue.createVNode(TabNav, {
"ref": nav$,
"currentName": currentName.value,
"editable": props.editable,
"type": props.type,
"panes": panes.value,
"stretch": props.stretch,
"onTabClick": handleTabClick,
"onTabRemove": handleTabRemove
}, null)]);
const panels = vue.createVNode("div", {
"class": ns.e("content")
}, [vue.renderSlot(slots, "default")]);
return vue.createVNode("div", {
"class": [ns.b(), ns.m(props.tabPosition), {
[ns.m("card")]: props.type === "card",
[ns.m("border-card")]: props.type === "border-card"
}]
}, [...props.tabPosition !== "bottom" ? [header, panels] : [panels, header]]);
};
}
});
const tabPaneProps = buildProps({
label: {
type: String,
default: ""
},
name: {
type: [String, Number]
},
closable: Boolean,
disabled: Boolean,
lazy: Boolean
});
const _hoisted_1$a = ["id", "aria-hidden", "aria-labelledby"];
const COMPONENT_NAME$1 = "ElTabPane";
const __default__$i = vue.defineComponent({
name: COMPONENT_NAME$1
});
const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
...__default__$i,
props: tabPaneProps,
setup(__props) {
const props = __props;
const instance = vue.getCurrentInstance();
const slots = vue.useSlots();
const tabsRoot = vue.inject(tabsRootContextKey);
if (!tabsRoot)
throwError(COMPONENT_NAME$1, "usage: ");
const ns = useNamespace("tab-pane");
const index = vue.ref();
const isClosable = vue.computed(() => props.closable || tabsRoot.props.closable);
const active = computedEager(() => {
var _a;
return tabsRoot.currentName.value === ((_a = props.name) != null ? _a : index.value);
});
const loaded = vue.ref(active.value);
const paneName = vue.computed(() => {
var _a;
return (_a = props.name) != null ? _a : index.value;
});
const shouldBeRender = computedEager(() => !props.lazy || loaded.value || active.value);
vue.watch(active, (val) => {
if (val)
loaded.value = true;
});
const pane = vue.reactive({
uid: instance.uid,
slots,
props,
paneName,
active,
index,
isClosable
});
vue.onMounted(() => {
tabsRoot.registerPane(pane);
});
vue.onUnmounted(() => {
tabsRoot.unregisterPane(pane.uid);
});
return (_ctx, _cache) => {
return vue.unref(shouldBeRender) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 0,
id: `pane-${vue.unref(paneName)}`,
class: vue.normalizeClass(vue.unref(ns).b()),
role: "tabpanel",
"aria-hidden": !vue.unref(active),
"aria-labelledby": `tab-${vue.unref(paneName)}`
}, [
vue.renderSlot(_ctx.$slots, "default")
], 10, _hoisted_1$a)), [
[vue.vShow, vue.unref(active)]
]) : vue.createCommentVNode("v-if", true);
};
}
});
var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__file", "tab-pane.vue"]]);
const ElTabs = withInstall(Tabs, {
TabPane
});
const ElTabPane = withNoopInstall(TabPane);
const timeSelectProps = buildProps({
format: {
type: String,
default: "HH:mm"
},
modelValue: String,
disabled: Boolean,
editable: {
type: Boolean,
default: true
},
effect: {
type: String,
default: "light"
},
clearable: {
type: Boolean,
default: true
},
size: useSizeProp,
placeholder: String,
start: {
type: String,
default: "09:00"
},
end: {
type: String,
default: "18:00"
},
step: {
type: String,
default: "00:30"
},
minTime: String,
maxTime: String,
name: String,
prefixIcon: {
type: definePropType([String, Object]),
default: () => clock_default
},
clearIcon: {
type: definePropType([String, Object]),
default: () => circle_close_default
}
});
const parseTime = (time) => {
const values = (time || "").split(":");
if (values.length >= 2) {
let hours = Number.parseInt(values[0], 10);
const minutes = Number.parseInt(values[1], 10);
const timeUpper = time.toUpperCase();
if (timeUpper.includes("AM") && hours === 12) {
hours = 0;
} else if (timeUpper.includes("PM") && hours !== 12) {
hours += 12;
}
return {
hours,
minutes
};
}
return null;
};
const compareTime = (time1, time2) => {
const value1 = parseTime(time1);
if (!value1)
return -1;
const value2 = parseTime(time2);
if (!value2)
return -1;
const minutes1 = value1.minutes + value1.hours * 60;
const minutes2 = value2.minutes + value2.hours * 60;
if (minutes1 === minutes2) {
return 0;
}
return minutes1 > minutes2 ? 1 : -1;
};
const padTime = (time) => {
return `${time}`.padStart(2, "0");
};
const formatTime = (time) => {
return `${padTime(time.hours)}:${padTime(time.minutes)}`;
};
const nextTime = (time, step) => {
const timeValue = parseTime(time);
if (!timeValue)
return "";
const stepValue = parseTime(step);
if (!stepValue)
return "";
const next = {
hours: timeValue.hours,
minutes: timeValue.minutes
};
next.minutes += stepValue.minutes;
next.hours += stepValue.hours;
next.hours += Math.floor(next.minutes / 60);
next.minutes = next.minutes % 60;
return formatTime(next);
};
const __default__$h = vue.defineComponent({
name: "ElTimeSelect"
});
const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
...__default__$h,
props: timeSelectProps,
emits: ["change", "blur", "focus", "update:modelValue"],
setup(__props, { expose }) {
const props = __props;
dayjs.extend(customParseFormat);
const { Option: ElOption } = ElSelect;
const nsInput = useNamespace("input");
const select = vue.ref();
const _disabled = useDisabled();
const value = vue.computed(() => props.modelValue);
const start = vue.computed(() => {
const time = parseTime(props.start);
return time ? formatTime(time) : null;
});
const end = vue.computed(() => {
const time = parseTime(props.end);
return time ? formatTime(time) : null;
});
const step = vue.computed(() => {
const time = parseTime(props.step);
return time ? formatTime(time) : null;
});
const minTime = vue.computed(() => {
const time = parseTime(props.minTime || "");
return time ? formatTime(time) : null;
});
const maxTime = vue.computed(() => {
const time = parseTime(props.maxTime || "");
return time ? formatTime(time) : null;
});
const items = vue.computed(() => {
const result = [];
if (props.start && props.end && props.step) {
let current = start.value;
let currentTime;
while (current && end.value && compareTime(current, end.value) <= 0) {
currentTime = dayjs(current, "HH:mm").format(props.format);
result.push({
value: currentTime,
disabled: compareTime(current, minTime.value || "-1:-1") <= 0 || compareTime(current, maxTime.value || "100:100") >= 0
});
current = nextTime(current, step.value);
}
}
return result;
});
const blur = () => {
var _a, _b;
(_b = (_a = select.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
};
const focus = () => {
var _a, _b;
(_b = (_a = select.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
};
expose({
blur,
focus
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElSelect), {
ref_key: "select",
ref: select,
"model-value": vue.unref(value),
disabled: vue.unref(_disabled),
clearable: _ctx.clearable,
"clear-icon": _ctx.clearIcon,
size: _ctx.size,
effect: _ctx.effect,
placeholder: _ctx.placeholder,
"default-first-option": "",
filterable: _ctx.editable,
"onUpdate:modelValue": _cache[0] || (_cache[0] = (event) => _ctx.$emit("update:modelValue", event)),
onChange: _cache[1] || (_cache[1] = (event) => _ctx.$emit("change", event)),
onBlur: _cache[2] || (_cache[2] = (event) => _ctx.$emit("blur", event)),
onFocus: _cache[3] || (_cache[3] = (event) => _ctx.$emit("focus", event))
}, {
prefix: vue.withCtx(() => [
_ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(vue.unref(nsInput).e("prefix-icon"))
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.prefixIcon)))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true)
]),
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElOption), {
key: item.value,
label: item.value,
value: item.value,
disabled: item.disabled
}, null, 8, ["label", "value", "disabled"]);
}), 128))
]),
_: 1
}, 8, ["model-value", "disabled", "clearable", "clear-icon", "size", "effect", "placeholder", "filterable"]);
};
}
});
var TimeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__file", "time-select.vue"]]);
TimeSelect.install = (app) => {
app.component(TimeSelect.name, TimeSelect);
};
const _TimeSelect = TimeSelect;
const ElTimeSelect = _TimeSelect;
const Timeline = vue.defineComponent({
name: "ElTimeline",
setup(_, { slots }) {
const ns = useNamespace("timeline");
vue.provide("timeline", slots);
return () => {
return vue.h("ul", { class: [ns.b()] }, [vue.renderSlot(slots, "default")]);
};
}
});
var Timeline$1 = Timeline;
const timelineItemProps = buildProps({
timestamp: {
type: String,
default: ""
},
hideTimestamp: {
type: Boolean,
default: false
},
center: {
type: Boolean,
default: false
},
placement: {
type: String,
values: ["top", "bottom"],
default: "bottom"
},
type: {
type: String,
values: ["primary", "success", "warning", "danger", "info"],
default: ""
},
color: {
type: String,
default: ""
},
size: {
type: String,
values: ["normal", "large"],
default: "normal"
},
icon: {
type: iconPropType
},
hollow: {
type: Boolean,
default: false
}
});
const __default__$g = vue.defineComponent({
name: "ElTimelineItem"
});
const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
...__default__$g,
props: timelineItemProps,
setup(__props) {
const ns = useNamespace("timeline-item");
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("li", {
class: vue.normalizeClass([vue.unref(ns).b(), { [vue.unref(ns).e("center")]: _ctx.center }])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("tail"))
}, null, 2),
!_ctx.$slots.dot ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass([
vue.unref(ns).e("node"),
vue.unref(ns).em("node", _ctx.size || ""),
vue.unref(ns).em("node", _ctx.type || ""),
vue.unref(ns).is("hollow", _ctx.hollow)
]),
style: vue.normalizeStyle({
backgroundColor: _ctx.color
})
}, [
_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("icon"))
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true)
], 6)) : vue.createCommentVNode("v-if", true),
_ctx.$slots.dot ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(vue.unref(ns).e("dot"))
}, [
vue.renderSlot(_ctx.$slots, "dot")
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("wrapper"))
}, [
!_ctx.hideTimestamp && _ctx.placement === "top" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass([vue.unref(ns).e("timestamp"), vue.unref(ns).is("top")])
}, vue.toDisplayString(_ctx.timestamp), 3)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("content"))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2),
!_ctx.hideTimestamp && _ctx.placement === "bottom" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass([vue.unref(ns).e("timestamp"), vue.unref(ns).is("bottom")])
}, vue.toDisplayString(_ctx.timestamp), 3)) : vue.createCommentVNode("v-if", true)
], 2)
], 2);
};
}
});
var TimelineItem = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__file", "timeline-item.vue"]]);
const ElTimeline = withInstall(Timeline$1, {
TimelineItem
});
const ElTimelineItem = withNoopInstall(TimelineItem);
const tooltipV2CommonProps = buildProps({
nowrap: Boolean
});
var TooltipV2Sides = /* @__PURE__ */ ((TooltipV2Sides2) => {
TooltipV2Sides2["top"] = "top";
TooltipV2Sides2["bottom"] = "bottom";
TooltipV2Sides2["left"] = "left";
TooltipV2Sides2["right"] = "right";
return TooltipV2Sides2;
})(TooltipV2Sides || {});
const tooltipV2Sides = Object.values(TooltipV2Sides);
const tooltipV2ArrowProps = buildProps({
width: {
type: Number,
default: 10
},
height: {
type: Number,
default: 10
},
style: {
type: definePropType(Object),
default: null
}
});
const tooltipV2ArrowSpecialProps = buildProps({
side: {
type: definePropType(String),
values: tooltipV2Sides,
required: true
}
});
const tooltipV2Strategies = ["absolute", "fixed"];
const tooltipV2Placements = [
"top-start",
"top-end",
"top",
"bottom-start",
"bottom-end",
"bottom",
"left-start",
"left-end",
"left",
"right-start",
"right-end",
"right"
];
const tooltipV2ContentProps = buildProps({
ariaLabel: String,
arrowPadding: {
type: definePropType(Number),
default: 5
},
effect: {
type: String,
default: ""
},
contentClass: String,
placement: {
type: definePropType(String),
values: tooltipV2Placements,
default: "bottom"
},
reference: {
type: definePropType(Object),
default: null
},
offset: {
type: Number,
default: 8
},
strategy: {
type: definePropType(String),
values: tooltipV2Strategies,
default: "absolute"
},
showArrow: {
type: Boolean,
default: false
}
});
const tooltipV2RootProps = buildProps({
delayDuration: {
type: Number,
default: 300
},
defaultOpen: Boolean,
open: {
type: Boolean,
default: void 0
},
onOpenChange: {
type: definePropType(Function)
},
"onUpdate:open": {
type: definePropType(Function)
}
});
const EventHandler = {
type: definePropType(Function)
};
const tooltipV2TriggerProps = buildProps({
onBlur: EventHandler,
onClick: EventHandler,
onFocus: EventHandler,
onMouseDown: EventHandler,
onMouseEnter: EventHandler,
onMouseLeave: EventHandler
});
const tooltipV2Props = buildProps({
...tooltipV2RootProps,
...tooltipV2ArrowProps,
...tooltipV2TriggerProps,
...tooltipV2ContentProps,
alwaysOn: Boolean,
fullTransition: Boolean,
transitionProps: {
type: definePropType(Object),
default: null
},
teleported: Boolean,
to: {
type: definePropType(String),
default: "body"
}
});
const __default__$f = vue.defineComponent({
name: "ElTooltipV2Root"
});
const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
...__default__$f,
props: tooltipV2RootProps,
setup(__props, { expose }) {
const props = __props;
const _open = vue.ref(props.defaultOpen);
const triggerRef = vue.ref(null);
const open = vue.computed({
get: () => isPropAbsent(props.open) ? _open.value : props.open,
set: (open2) => {
var _a;
_open.value = open2;
(_a = props["onUpdate:open"]) == null ? void 0 : _a.call(props, open2);
}
});
const isOpenDelayed = vue.computed(() => isNumber(props.delayDuration) && props.delayDuration > 0);
const { start: onDelayedOpen, stop: clearTimer } = useTimeoutFn(() => {
open.value = true;
}, vue.computed(() => props.delayDuration), {
immediate: false
});
const ns = useNamespace("tooltip-v2");
const contentId = useId();
const onNormalOpen = () => {
clearTimer();
open.value = true;
};
const onDelayOpen = () => {
vue.unref(isOpenDelayed) ? onDelayedOpen() : onNormalOpen();
};
const onOpen = onNormalOpen;
const onClose = () => {
clearTimer();
open.value = false;
};
const onChange = (open2) => {
var _a;
if (open2) {
document.dispatchEvent(new CustomEvent(TOOLTIP_V2_OPEN));
onOpen();
}
(_a = props.onOpenChange) == null ? void 0 : _a.call(props, open2);
};
vue.watch(open, onChange);
vue.onMounted(() => {
document.addEventListener(TOOLTIP_V2_OPEN, onClose);
});
vue.onBeforeUnmount(() => {
clearTimer();
document.removeEventListener(TOOLTIP_V2_OPEN, onClose);
});
vue.provide(tooltipV2RootKey, {
contentId,
triggerRef,
ns,
onClose,
onDelayOpen,
onOpen
});
expose({
onOpen,
onClose
});
return (_ctx, _cache) => {
return vue.renderSlot(_ctx.$slots, "default", { open: vue.unref(open) });
};
}
});
var TooltipV2Root = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__file", "root.vue"]]);
const __default__$e = vue.defineComponent({
name: "ElTooltipV2Arrow"
});
const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
...__default__$e,
props: {
...tooltipV2ArrowProps,
...tooltipV2ArrowSpecialProps
},
setup(__props) {
const props = __props;
const { ns } = vue.inject(tooltipV2RootKey);
const { arrowRef } = vue.inject(tooltipV2ContentKey);
const arrowStyle = vue.computed(() => {
const { style, width, height } = props;
const namespace = ns.namespace.value;
return {
[`--${namespace}-tooltip-v2-arrow-width`]: `${width}px`,
[`--${namespace}-tooltip-v2-arrow-height`]: `${height}px`,
[`--${namespace}-tooltip-v2-arrow-border-width`]: `${width / 2}px`,
[`--${namespace}-tooltip-v2-arrow-cover-width`]: width / 2 - 1,
...style || {}
};
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", {
ref_key: "arrowRef",
ref: arrowRef,
style: vue.normalizeStyle(vue.unref(arrowStyle)),
class: vue.normalizeClass(vue.unref(ns).e("arrow"))
}, null, 6);
};
}
});
var TooltipV2Arrow = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__file", "arrow.vue"]]);
const visualHiddenProps = buildProps({
style: {
type: definePropType([String, Object, Array]),
default: () => ({})
}
});
const __default__$d = vue.defineComponent({
name: "ElVisuallyHidden"
});
const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
...__default__$d,
props: visualHiddenProps,
setup(__props) {
const props = __props;
const computedStyle = vue.computed(() => {
return [
props.style,
{
position: "absolute",
border: 0,
width: 1,
height: 1,
padding: 0,
margin: -1,
overflow: "hidden",
clip: "rect(0, 0, 0, 0)",
whiteSpace: "nowrap",
wordWrap: "normal"
}
];
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", vue.mergeProps(_ctx.$attrs, { style: vue.unref(computedStyle) }), [
vue.renderSlot(_ctx.$slots, "default")
], 16);
};
}
});
var ElVisuallyHidden = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__file", "visual-hidden.vue"]]);
const _hoisted_1$9 = ["data-side"];
const __default__$c = vue.defineComponent({
name: "ElTooltipV2Content"
});
const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
...__default__$c,
props: { ...tooltipV2ContentProps, ...tooltipV2CommonProps },
setup(__props) {
const props = __props;
const { triggerRef, contentId } = vue.inject(tooltipV2RootKey);
const placement = vue.ref(props.placement);
const strategy = vue.ref(props.strategy);
const arrowRef = vue.ref(null);
const { referenceRef, contentRef, middlewareData, x, y, update } = useFloating({
placement,
strategy,
middleware: vue.computed(() => {
const middleware = [offset(props.offset)];
if (props.showArrow) {
middleware.push(arrowMiddleware({
arrowRef
}));
}
return middleware;
})
});
const zIndex = useZIndex().nextZIndex();
const ns = useNamespace("tooltip-v2");
const side = vue.computed(() => {
return placement.value.split("-")[0];
});
const contentStyle = vue.computed(() => {
return {
position: vue.unref(strategy),
top: `${vue.unref(y) || 0}px`,
left: `${vue.unref(x) || 0}px`,
zIndex
};
});
const arrowStyle = vue.computed(() => {
if (!props.showArrow)
return {};
const { arrow } = vue.unref(middlewareData);
return {
[`--${ns.namespace.value}-tooltip-v2-arrow-x`]: `${arrow == null ? void 0 : arrow.x}px` || "",
[`--${ns.namespace.value}-tooltip-v2-arrow-y`]: `${arrow == null ? void 0 : arrow.y}px` || ""
};
});
const contentClass = vue.computed(() => [
ns.e("content"),
ns.is("dark", props.effect === "dark"),
ns.is(vue.unref(strategy)),
props.contentClass
]);
vue.watch(arrowRef, () => update());
vue.watch(() => props.placement, (val) => placement.value = val);
vue.onMounted(() => {
vue.watch(() => props.reference || triggerRef.value, (el) => {
referenceRef.value = el || void 0;
}, {
immediate: true
});
});
vue.provide(tooltipV2ContentKey, { arrowRef });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "contentRef",
ref: contentRef,
style: vue.normalizeStyle(vue.unref(contentStyle)),
"data-tooltip-v2-root": ""
}, [
!_ctx.nowrap ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
"data-side": vue.unref(side),
class: vue.normalizeClass(vue.unref(contentClass))
}, [
vue.renderSlot(_ctx.$slots, "default", {
contentStyle: vue.unref(contentStyle),
contentClass: vue.unref(contentClass)
}),
vue.createVNode(vue.unref(ElVisuallyHidden), {
id: vue.unref(contentId),
role: "tooltip"
}, {
default: vue.withCtx(() => [
_ctx.ariaLabel ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createTextVNode(vue.toDisplayString(_ctx.ariaLabel), 1)
], 64)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
]),
_: 3
}, 8, ["id"]),
vue.renderSlot(_ctx.$slots, "arrow", {
style: vue.normalizeStyle(vue.unref(arrowStyle)),
side: vue.unref(side)
})
], 10, _hoisted_1$9)) : vue.createCommentVNode("v-if", true)
], 4);
};
}
});
var TooltipV2Content = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__file", "content.vue"]]);
const forwardRefProps = buildProps({
setRef: {
type: definePropType(Function),
required: true
},
onlyChild: Boolean
});
var ForwardRef = vue.defineComponent({
props: forwardRefProps,
setup(props, {
slots
}) {
const fragmentRef = vue.ref();
const setRef = composeRefs(fragmentRef, (el) => {
if (el) {
props.setRef(el.nextElementSibling);
} else {
props.setRef(null);
}
});
return () => {
var _a;
const [firstChild] = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [];
const child = props.onlyChild ? ensureOnlyChild(firstChild.children) : firstChild.children;
return vue.createVNode(vue.Fragment, {
"ref": setRef
}, [child]);
};
}
});
const __default__$b = vue.defineComponent({
name: "ElTooltipV2Trigger"
});
const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
...__default__$b,
props: {
...tooltipV2CommonProps,
...tooltipV2TriggerProps
},
setup(__props) {
const props = __props;
const { onClose, onOpen, onDelayOpen, triggerRef, contentId } = vue.inject(tooltipV2RootKey);
let isMousedown = false;
const setTriggerRef = (el) => {
triggerRef.value = el;
};
const onMouseup = () => {
isMousedown = false;
};
const onMouseenter = composeEventHandlers(props.onMouseEnter, onDelayOpen);
const onMouseleave = composeEventHandlers(props.onMouseLeave, onClose);
const onMousedown = composeEventHandlers(props.onMouseDown, () => {
onClose();
isMousedown = true;
document.addEventListener("mouseup", onMouseup, { once: true });
});
const onFocus = composeEventHandlers(props.onFocus, () => {
if (!isMousedown)
onOpen();
});
const onBlur = composeEventHandlers(props.onBlur, onClose);
const onClick = composeEventHandlers(props.onClick, (e) => {
if (e.detail === 0)
onClose();
});
const events = {
blur: onBlur,
click: onClick,
focus: onFocus,
mousedown: onMousedown,
mouseenter: onMouseenter,
mouseleave: onMouseleave
};
const setEvents = (el, events2, type) => {
if (el) {
Object.entries(events2).forEach(([name, handler]) => {
el[type](name, handler);
});
}
};
vue.watch(triggerRef, (triggerEl, previousTriggerEl) => {
setEvents(triggerEl, events, "addEventListener");
setEvents(previousTriggerEl, events, "removeEventListener");
if (triggerEl) {
triggerEl.setAttribute("aria-describedby", contentId.value);
}
});
vue.onBeforeUnmount(() => {
setEvents(triggerRef.value, events, "removeEventListener");
document.removeEventListener("mouseup", onMouseup);
});
return (_ctx, _cache) => {
return _ctx.nowrap ? (vue.openBlock(), vue.createBlock(vue.unref(ForwardRef), {
key: 0,
"set-ref": setTriggerRef,
"only-child": ""
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
})) : (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
key: 1,
ref_key: "triggerRef",
ref: triggerRef
}, _ctx.$attrs), [
vue.renderSlot(_ctx.$slots, "default")
], 16));
};
}
});
var TooltipV2Trigger = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__file", "trigger.vue"]]);
const __default__$a = vue.defineComponent({
name: "ElTooltipV2"
});
const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
...__default__$a,
props: tooltipV2Props,
setup(__props) {
const props = __props;
const refedProps = vue.toRefs(props);
const arrowProps = vue.reactive(pick(refedProps, Object.keys(tooltipV2ArrowProps)));
const contentProps = vue.reactive(pick(refedProps, Object.keys(tooltipV2ContentProps)));
const rootProps = vue.reactive(pick(refedProps, Object.keys(tooltipV2RootProps)));
const triggerProps = vue.reactive(pick(refedProps, Object.keys(tooltipV2TriggerProps)));
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(TooltipV2Root, vue.normalizeProps(vue.guardReactiveProps(rootProps)), {
default: vue.withCtx(({ open }) => [
vue.createVNode(TooltipV2Trigger, vue.mergeProps(triggerProps, { nowrap: "" }), {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "trigger")
]),
_: 3
}, 16),
(vue.openBlock(), vue.createBlock(vue.Teleport, {
to: _ctx.to,
disabled: !_ctx.teleported
}, [
_ctx.fullTransition ? (vue.openBlock(), vue.createBlock(vue.Transition, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.transitionProps)), {
default: vue.withCtx(() => [
_ctx.alwaysOn || open ? (vue.openBlock(), vue.createBlock(TooltipV2Content, vue.normalizeProps(vue.mergeProps({ key: 0 }, contentProps)), {
arrow: vue.withCtx(({ style, side }) => [
_ctx.showArrow ? (vue.openBlock(), vue.createBlock(TooltipV2Arrow, vue.mergeProps({ key: 0 }, arrowProps, {
style,
side
}), null, 16, ["style", "side"])) : vue.createCommentVNode("v-if", true)
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16)) : vue.createCommentVNode("v-if", true)
]),
_: 2
}, 1040)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
_ctx.alwaysOn || open ? (vue.openBlock(), vue.createBlock(TooltipV2Content, vue.normalizeProps(vue.mergeProps({ key: 0 }, contentProps)), {
arrow: vue.withCtx(({ style, side }) => [
_ctx.showArrow ? (vue.openBlock(), vue.createBlock(TooltipV2Arrow, vue.mergeProps({ key: 0 }, arrowProps, {
style,
side
}), null, 16, ["style", "side"])) : vue.createCommentVNode("v-if", true)
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16)) : vue.createCommentVNode("v-if", true)
], 64))
], 8, ["to", "disabled"]))
]),
_: 3
}, 16);
};
}
});
var TooltipV2 = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__file", "tooltip.vue"]]);
const ElTooltipV2 = withInstall(TooltipV2);
const LEFT_CHECK_CHANGE_EVENT = "left-check-change";
const RIGHT_CHECK_CHANGE_EVENT = "right-check-change";
const transferProps = buildProps({
data: {
type: definePropType(Array),
default: () => []
},
titles: {
type: definePropType(Array),
default: () => []
},
buttonTexts: {
type: definePropType(Array),
default: () => []
},
filterPlaceholder: String,
filterMethod: {
type: definePropType(Function)
},
leftDefaultChecked: {
type: definePropType(Array),
default: () => []
},
rightDefaultChecked: {
type: definePropType(Array),
default: () => []
},
renderContent: {
type: definePropType(Function)
},
modelValue: {
type: definePropType(Array),
default: () => []
},
format: {
type: definePropType(Object),
default: () => ({})
},
filterable: Boolean,
props: {
type: definePropType(Object),
default: () => mutable({
label: "label",
key: "key",
disabled: "disabled"
})
},
targetOrder: {
type: String,
values: ["original", "push", "unshift"],
default: "original"
},
validateEvent: {
type: Boolean,
default: true
}
});
const transferCheckedChangeFn = (value, movedKeys) => [value, movedKeys].every(isArray) || isArray(value) && isNil(movedKeys);
const transferEmits = {
[CHANGE_EVENT]: (value, direction, movedKeys) => [value, movedKeys].every(isArray) && ["left", "right"].includes(direction),
[UPDATE_MODEL_EVENT]: (value) => isArray(value),
[LEFT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,
[RIGHT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn
};
const CHECKED_CHANGE_EVENT = "checked-change";
const transferPanelProps = buildProps({
data: transferProps.data,
optionRender: {
type: definePropType(Function)
},
placeholder: String,
title: String,
filterable: Boolean,
format: transferProps.format,
filterMethod: transferProps.filterMethod,
defaultChecked: transferProps.leftDefaultChecked,
props: transferProps.props
});
const transferPanelEmits = {
[CHECKED_CHANGE_EVENT]: transferCheckedChangeFn
};
const usePropsAlias = (props) => {
const initProps = {
label: "label",
key: "key",
disabled: "disabled"
};
return vue.computed(() => ({
...initProps,
...props.props
}));
};
const useCheck$1 = (props, panelState, emit) => {
const propsAlias = usePropsAlias(props);
const filteredData = vue.computed(() => {
return props.data.filter((item) => {
if (isFunction(props.filterMethod)) {
return props.filterMethod(panelState.query, item);
} else {
const label = String(item[propsAlias.value.label] || item[propsAlias.value.key]);
return label.toLowerCase().includes(panelState.query.toLowerCase());
}
});
});
const checkableData = vue.computed(() => filteredData.value.filter((item) => !item[propsAlias.value.disabled]));
const checkedSummary = vue.computed(() => {
const checkedLength = panelState.checked.length;
const dataLength = props.data.length;
const { noChecked, hasChecked } = props.format;
if (noChecked && hasChecked) {
return checkedLength > 0 ? hasChecked.replace(/\${checked}/g, checkedLength.toString()).replace(/\${total}/g, dataLength.toString()) : noChecked.replace(/\${total}/g, dataLength.toString());
} else {
return `${checkedLength}/${dataLength}`;
}
});
const isIndeterminate = vue.computed(() => {
const checkedLength = panelState.checked.length;
return checkedLength > 0 && checkedLength < checkableData.value.length;
});
const updateAllChecked = () => {
const checkableDataKeys = checkableData.value.map((item) => item[propsAlias.value.key]);
panelState.allChecked = checkableDataKeys.length > 0 && checkableDataKeys.every((item) => panelState.checked.includes(item));
};
const handleAllCheckedChange = (value) => {
panelState.checked = value ? checkableData.value.map((item) => item[propsAlias.value.key]) : [];
};
vue.watch(() => panelState.checked, (val, oldVal) => {
updateAllChecked();
if (panelState.checkChangeByUser) {
const movedKeys = val.concat(oldVal).filter((v) => !val.includes(v) || !oldVal.includes(v));
emit(CHECKED_CHANGE_EVENT, val, movedKeys);
} else {
emit(CHECKED_CHANGE_EVENT, val);
panelState.checkChangeByUser = true;
}
});
vue.watch(checkableData, () => {
updateAllChecked();
});
vue.watch(() => props.data, () => {
const checked = [];
const filteredDataKeys = filteredData.value.map((item) => item[propsAlias.value.key]);
panelState.checked.forEach((item) => {
if (filteredDataKeys.includes(item)) {
checked.push(item);
}
});
panelState.checkChangeByUser = false;
panelState.checked = checked;
});
vue.watch(() => props.defaultChecked, (val, oldVal) => {
if (oldVal && val.length === oldVal.length && val.every((item) => oldVal.includes(item)))
return;
const checked = [];
const checkableDataKeys = checkableData.value.map((item) => item[propsAlias.value.key]);
val.forEach((item) => {
if (checkableDataKeys.includes(item)) {
checked.push(item);
}
});
panelState.checkChangeByUser = false;
panelState.checked = checked;
}, {
immediate: true
});
return {
filteredData,
checkableData,
checkedSummary,
isIndeterminate,
updateAllChecked,
handleAllCheckedChange
};
};
const useCheckedChange = (checkedState, emit) => {
const onSourceCheckedChange = (val, movedKeys) => {
checkedState.leftChecked = val;
if (!movedKeys)
return;
emit(LEFT_CHECK_CHANGE_EVENT, val, movedKeys);
};
const onTargetCheckedChange = (val, movedKeys) => {
checkedState.rightChecked = val;
if (!movedKeys)
return;
emit(RIGHT_CHECK_CHANGE_EVENT, val, movedKeys);
};
return {
onSourceCheckedChange,
onTargetCheckedChange
};
};
const useComputedData = (props) => {
const propsAlias = usePropsAlias(props);
const dataObj = vue.computed(() => props.data.reduce((o, cur) => (o[cur[propsAlias.value.key]] = cur) && o, {}));
const sourceData = vue.computed(() => props.data.filter((item) => !props.modelValue.includes(item[propsAlias.value.key])));
const targetData = vue.computed(() => {
if (props.targetOrder === "original") {
return props.data.filter((item) => props.modelValue.includes(item[propsAlias.value.key]));
} else {
return props.modelValue.reduce((arr, cur) => {
const val = dataObj.value[cur];
if (val) {
arr.push(val);
}
return arr;
}, []);
}
});
return {
sourceData,
targetData
};
};
const useMove = (props, checkedState, emit) => {
const propsAlias = usePropsAlias(props);
const _emit = (value, direction, movedKeys) => {
emit(UPDATE_MODEL_EVENT, value);
emit(CHANGE_EVENT, value, direction, movedKeys);
};
const addToLeft = () => {
const currentValue = props.modelValue.slice();
checkedState.rightChecked.forEach((item) => {
const index = currentValue.indexOf(item);
if (index > -1) {
currentValue.splice(index, 1);
}
});
_emit(currentValue, "left", checkedState.rightChecked);
};
const addToRight = () => {
let currentValue = props.modelValue.slice();
const itemsToBeMoved = props.data.filter((item) => {
const itemKey = item[propsAlias.value.key];
return checkedState.leftChecked.includes(itemKey) && !props.modelValue.includes(itemKey);
}).map((item) => item[propsAlias.value.key]);
currentValue = props.targetOrder === "unshift" ? itemsToBeMoved.concat(currentValue) : currentValue.concat(itemsToBeMoved);
if (props.targetOrder === "original") {
currentValue = props.data.filter((item) => currentValue.includes(item[propsAlias.value.key])).map((item) => item[propsAlias.value.key]);
}
_emit(currentValue, "right", checkedState.leftChecked);
};
return {
addToLeft,
addToRight
};
};
const __default__$9 = vue.defineComponent({
name: "ElTransferPanel"
});
const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
...__default__$9,
props: transferPanelProps,
emits: transferPanelEmits,
setup(__props, { expose, emit }) {
const props = __props;
const slots = vue.useSlots();
const OptionContent = ({ option }) => option;
const { t } = useLocale();
const ns = useNamespace("transfer");
const panelState = vue.reactive({
checked: [],
allChecked: false,
query: "",
inputHover: false,
checkChangeByUser: true
});
const propsAlias = usePropsAlias(props);
const {
filteredData,
checkedSummary,
isIndeterminate,
handleAllCheckedChange
} = useCheck$1(props, panelState, emit);
const hasNoMatch = vue.computed(() => !isEmpty(panelState.query) && isEmpty(filteredData.value));
const hasFooter = vue.computed(() => !isEmpty(slots.default()[0].children));
const { checked, allChecked, query, inputHover } = vue.toRefs(panelState);
expose({
query
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(ns).b("panel"))
}, [
vue.createElementVNode("p", {
class: vue.normalizeClass(vue.unref(ns).be("panel", "header"))
}, [
vue.createVNode(vue.unref(ElCheckbox), {
modelValue: vue.unref(allChecked),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(allChecked) ? allChecked.value = $event : null),
indeterminate: vue.unref(isIndeterminate),
"validate-event": false,
onChange: vue.unref(handleAllCheckedChange)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.title) + " ", 1),
vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(checkedSummary)), 1)
]),
_: 1
}, 8, ["modelValue", "indeterminate", "onChange"])
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass([vue.unref(ns).be("panel", "body"), vue.unref(ns).is("with-footer", vue.unref(hasFooter))])
}, [
_ctx.filterable ? (vue.openBlock(), vue.createBlock(vue.unref(ElInput), {
key: 0,
modelValue: vue.unref(query),
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(query) ? query.value = $event : null),
class: vue.normalizeClass(vue.unref(ns).be("panel", "filter")),
size: "default",
placeholder: _ctx.placeholder,
"prefix-icon": vue.unref(search_default),
clearable: "",
"validate-event": false,
onMouseenter: _cache[2] || (_cache[2] = ($event) => inputHover.value = true),
onMouseleave: _cache[3] || (_cache[3] = ($event) => inputHover.value = false)
}, null, 8, ["modelValue", "class", "placeholder", "prefix-icon"])) : vue.createCommentVNode("v-if", true),
vue.withDirectives(vue.createVNode(vue.unref(ElCheckboxGroup$1), {
modelValue: vue.unref(checked),
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(checked) ? checked.value = $event : null),
"validate-event": false,
class: vue.normalizeClass([vue.unref(ns).is("filterable", _ctx.filterable), vue.unref(ns).be("panel", "list")])
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(filteredData), (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(ElCheckbox), {
key: item[vue.unref(propsAlias).key],
class: vue.normalizeClass(vue.unref(ns).be("panel", "item")),
label: item[vue.unref(propsAlias).key],
disabled: item[vue.unref(propsAlias).disabled],
"validate-event": false
}, {
default: vue.withCtx(() => {
var _a;
return [
vue.createVNode(OptionContent, {
option: (_a = _ctx.optionRender) == null ? void 0 : _a.call(_ctx, item)
}, null, 8, ["option"])
];
}),
_: 2
}, 1032, ["class", "label", "disabled"]);
}), 128))
]),
_: 1
}, 8, ["modelValue", "class"]), [
[vue.vShow, !vue.unref(hasNoMatch) && !vue.unref(isEmpty)(_ctx.data)]
]),
vue.withDirectives(vue.createElementVNode("p", {
class: vue.normalizeClass(vue.unref(ns).be("panel", "empty"))
}, vue.toDisplayString(vue.unref(hasNoMatch) ? vue.unref(t)("el.transfer.noMatch") : vue.unref(t)("el.transfer.noData")), 3), [
[vue.vShow, vue.unref(hasNoMatch) || vue.unref(isEmpty)(_ctx.data)]
])
], 2),
vue.unref(hasFooter) ? (vue.openBlock(), vue.createElementBlock("p", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).be("panel", "footer"))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 2)) : vue.createCommentVNode("v-if", true)
], 2);
};
}
});
var TransferPanel = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__file", "transfer-panel.vue"]]);
const _hoisted_1$8 = { key: 0 };
const _hoisted_2$6 = { key: 0 };
const __default__$8 = vue.defineComponent({
name: "ElTransfer"
});
const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
...__default__$8,
props: transferProps,
emits: transferEmits,
setup(__props, { expose, emit }) {
const props = __props;
const slots = vue.useSlots();
const { t } = useLocale();
const ns = useNamespace("transfer");
const { formItem } = useFormItem();
const checkedState = vue.reactive({
leftChecked: [],
rightChecked: []
});
const propsAlias = usePropsAlias(props);
const { sourceData, targetData } = useComputedData(props);
const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(checkedState, emit);
const { addToLeft, addToRight } = useMove(props, checkedState, emit);
const leftPanel = vue.ref();
const rightPanel = vue.ref();
const clearQuery = (which) => {
switch (which) {
case "left":
leftPanel.value.query = "";
break;
case "right":
rightPanel.value.query = "";
break;
}
};
const hasButtonTexts = vue.computed(() => props.buttonTexts.length === 2);
const leftPanelTitle = vue.computed(() => props.titles[0] || t("el.transfer.titles.0"));
const rightPanelTitle = vue.computed(() => props.titles[1] || t("el.transfer.titles.1"));
const panelFilterPlaceholder = vue.computed(() => props.filterPlaceholder || t("el.transfer.filterPlaceholder"));
vue.watch(() => props.modelValue, () => {
var _a;
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
}
});
const optionRender = vue.computed(() => (option) => {
if (props.renderContent)
return props.renderContent(vue.h, option);
if (slots.default)
return slots.default({ option });
return vue.h("span", option[propsAlias.value.label] || option[propsAlias.value.key]);
});
expose({
clearQuery,
leftPanel,
rightPanel
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(vue.unref(ns).b())
}, [
vue.createVNode(TransferPanel, {
ref_key: "leftPanel",
ref: leftPanel,
data: vue.unref(sourceData),
"option-render": vue.unref(optionRender),
placeholder: vue.unref(panelFilterPlaceholder),
title: vue.unref(leftPanelTitle),
filterable: _ctx.filterable,
format: _ctx.format,
"filter-method": _ctx.filterMethod,
"default-checked": _ctx.leftDefaultChecked,
props: props.props,
onCheckedChange: vue.unref(onSourceCheckedChange)
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "left-footer")
]),
_: 3
}, 8, ["data", "option-render", "placeholder", "title", "filterable", "format", "filter-method", "default-checked", "props", "onCheckedChange"]),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("buttons"))
}, [
vue.createVNode(vue.unref(ElButton), {
type: "primary",
class: vue.normalizeClass([vue.unref(ns).e("button"), vue.unref(ns).is("with-texts", vue.unref(hasButtonTexts))]),
disabled: vue.unref(isEmpty)(checkedState.rightChecked),
onClick: vue.unref(addToLeft)
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_left_default))
]),
_: 1
}),
!vue.unref(isUndefined)(_ctx.buttonTexts[0]) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$8, vue.toDisplayString(_ctx.buttonTexts[0]), 1)) : vue.createCommentVNode("v-if", true)
]),
_: 1
}, 8, ["class", "disabled", "onClick"]),
vue.createVNode(vue.unref(ElButton), {
type: "primary",
class: vue.normalizeClass([vue.unref(ns).e("button"), vue.unref(ns).is("with-texts", vue.unref(hasButtonTexts))]),
disabled: vue.unref(isEmpty)(checkedState.leftChecked),
onClick: vue.unref(addToRight)
}, {
default: vue.withCtx(() => [
!vue.unref(isUndefined)(_ctx.buttonTexts[1]) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$6, vue.toDisplayString(_ctx.buttonTexts[1]), 1)) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(ElIcon), null, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(arrow_right_default))
]),
_: 1
})
]),
_: 1
}, 8, ["class", "disabled", "onClick"])
], 2),
vue.createVNode(TransferPanel, {
ref_key: "rightPanel",
ref: rightPanel,
data: vue.unref(targetData),
"option-render": vue.unref(optionRender),
placeholder: vue.unref(panelFilterPlaceholder),
filterable: _ctx.filterable,
format: _ctx.format,
"filter-method": _ctx.filterMethod,
title: vue.unref(rightPanelTitle),
"default-checked": _ctx.rightDefaultChecked,
props: props.props,
onCheckedChange: vue.unref(onTargetCheckedChange)
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "right-footer")
]),
_: 3
}, 8, ["data", "option-render", "placeholder", "filterable", "format", "filter-method", "title", "default-checked", "props", "onCheckedChange"])
], 2);
};
}
});
var Transfer = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__file", "transfer.vue"]]);
const ElTransfer = withInstall(Transfer);
const NODE_KEY = "$treeNodeId";
const markNodeData = function(node, data) {
if (!data || data[NODE_KEY])
return;
Object.defineProperty(data, NODE_KEY, {
value: node.id,
enumerable: false,
configurable: false,
writable: false
});
};
const getNodeKey = function(key, data) {
if (!key)
return data[NODE_KEY];
return data[key];
};
const handleCurrentChange = (store, emit, setCurrent) => {
const preCurrentNode = store.value.currentNode;
setCurrent();
const currentNode = store.value.currentNode;
if (preCurrentNode === currentNode)
return;
emit("current-change", currentNode ? currentNode.data : null, currentNode);
};
const getChildState = (node) => {
let all = true;
let none = true;
let allWithoutDisable = true;
for (let i = 0, j = node.length; i < j; i++) {
const n = node[i];
if (n.checked !== true || n.indeterminate) {
all = false;
if (!n.disabled) {
allWithoutDisable = false;
}
}
if (n.checked !== false || n.indeterminate) {
none = false;
}
}
return { all, none, allWithoutDisable, half: !all && !none };
};
const reInitChecked = function(node) {
if (node.childNodes.length === 0 || node.loading)
return;
const { all, none, half } = getChildState(node.childNodes);
if (all) {
node.checked = true;
node.indeterminate = false;
} else if (half) {
node.checked = false;
node.indeterminate = true;
} else if (none) {
node.checked = false;
node.indeterminate = false;
}
const parent = node.parent;
if (!parent || parent.level === 0)
return;
if (!node.store.checkStrictly) {
reInitChecked(parent);
}
};
const getPropertyFromData = function(node, prop) {
const props = node.store.props;
const data = node.data || {};
const config = props[prop];
if (typeof config === "function") {
return config(data, node);
} else if (typeof config === "string") {
return data[config];
} else if (typeof config === "undefined") {
const dataProp = data[prop];
return dataProp === void 0 ? "" : dataProp;
}
};
let nodeIdSeed = 0;
class Node {
constructor(options) {
this.id = nodeIdSeed++;
this.text = null;
this.checked = false;
this.indeterminate = false;
this.data = null;
this.expanded = false;
this.parent = null;
this.visible = true;
this.isCurrent = false;
this.canFocus = false;
for (const name in options) {
if (hasOwn(options, name)) {
this[name] = options[name];
}
}
this.level = 0;
this.loaded = false;
this.childNodes = [];
this.loading = false;
if (this.parent) {
this.level = this.parent.level + 1;
}
}
initialize() {
const store = this.store;
if (!store) {
throw new Error("[Node]store is required!");
}
store.registerNode(this);
const props = store.props;
if (props && typeof props.isLeaf !== "undefined") {
const isLeaf = getPropertyFromData(this, "isLeaf");
if (typeof isLeaf === "boolean") {
this.isLeafByUser = isLeaf;
}
}
if (store.lazy !== true && this.data) {
this.setData(this.data);
if (store.defaultExpandAll) {
this.expanded = true;
this.canFocus = true;
}
} else if (this.level > 0 && store.lazy && store.defaultExpandAll) {
this.expand();
}
if (!Array.isArray(this.data)) {
markNodeData(this, this.data);
}
if (!this.data)
return;
const defaultExpandedKeys = store.defaultExpandedKeys;
const key = store.key;
if (key && defaultExpandedKeys && defaultExpandedKeys.includes(this.key)) {
this.expand(null, store.autoExpandParent);
}
if (key && store.currentNodeKey !== void 0 && this.key === store.currentNodeKey) {
store.currentNode = this;
store.currentNode.isCurrent = true;
}
if (store.lazy) {
store._initDefaultCheckedNode(this);
}
this.updateLeafState();
if (this.parent && (this.level === 1 || this.parent.expanded === true))
this.canFocus = true;
}
setData(data) {
if (!Array.isArray(data)) {
markNodeData(this, data);
}
this.data = data;
this.childNodes = [];
let children;
if (this.level === 0 && Array.isArray(this.data)) {
children = this.data;
} else {
children = getPropertyFromData(this, "children") || [];
}
for (let i = 0, j = children.length; i < j; i++) {
this.insertChild({ data: children[i] });
}
}
get label() {
return getPropertyFromData(this, "label");
}
get key() {
const nodeKey = this.store.key;
if (this.data)
return this.data[nodeKey];
return null;
}
get disabled() {
return getPropertyFromData(this, "disabled");
}
get nextSibling() {
const parent = this.parent;
if (parent) {
const index = parent.childNodes.indexOf(this);
if (index > -1) {
return parent.childNodes[index + 1];
}
}
return null;
}
get previousSibling() {
const parent = this.parent;
if (parent) {
const index = parent.childNodes.indexOf(this);
if (index > -1) {
return index > 0 ? parent.childNodes[index - 1] : null;
}
}
return null;
}
contains(target, deep = true) {
return (this.childNodes || []).some((child) => child === target || deep && child.contains(target));
}
remove() {
const parent = this.parent;
if (parent) {
parent.removeChild(this);
}
}
insertChild(child, index, batch) {
if (!child)
throw new Error("InsertChild error: child is required.");
if (!(child instanceof Node)) {
if (!batch) {
const children = this.getChildren(true);
if (!children.includes(child.data)) {
if (typeof index === "undefined" || index < 0) {
children.push(child.data);
} else {
children.splice(index, 0, child.data);
}
}
}
Object.assign(child, {
parent: this,
store: this.store
});
child = vue.reactive(new Node(child));
if (child instanceof Node) {
child.initialize();
}
}
child.level = this.level + 1;
if (typeof index === "undefined" || index < 0) {
this.childNodes.push(child);
} else {
this.childNodes.splice(index, 0, child);
}
this.updateLeafState();
}
insertBefore(child, ref) {
let index;
if (ref) {
index = this.childNodes.indexOf(ref);
}
this.insertChild(child, index);
}
insertAfter(child, ref) {
let index;
if (ref) {
index = this.childNodes.indexOf(ref);
if (index !== -1)
index += 1;
}
this.insertChild(child, index);
}
removeChild(child) {
const children = this.getChildren() || [];
const dataIndex = children.indexOf(child.data);
if (dataIndex > -1) {
children.splice(dataIndex, 1);
}
const index = this.childNodes.indexOf(child);
if (index > -1) {
this.store && this.store.deregisterNode(child);
child.parent = null;
this.childNodes.splice(index, 1);
}
this.updateLeafState();
}
removeChildByData(data) {
let targetNode = null;
for (let i = 0; i < this.childNodes.length; i++) {
if (this.childNodes[i].data === data) {
targetNode = this.childNodes[i];
break;
}
}
if (targetNode) {
this.removeChild(targetNode);
}
}
expand(callback, expandParent) {
const done = () => {
if (expandParent) {
let parent = this.parent;
while (parent.level > 0) {
parent.expanded = true;
parent = parent.parent;
}
}
this.expanded = true;
if (callback)
callback();
this.childNodes.forEach((item) => {
item.canFocus = true;
});
};
if (this.shouldLoadData()) {
this.loadData((data) => {
if (Array.isArray(data)) {
if (this.checked) {
this.setChecked(true, true);
} else if (!this.store.checkStrictly) {
reInitChecked(this);
}
done();
}
});
} else {
done();
}
}
doCreateChildren(array, defaultProps = {}) {
array.forEach((item) => {
this.insertChild(Object.assign({ data: item }, defaultProps), void 0, true);
});
}
collapse() {
this.expanded = false;
this.childNodes.forEach((item) => {
item.canFocus = false;
});
}
shouldLoadData() {
return this.store.lazy === true && this.store.load && !this.loaded;
}
updateLeafState() {
if (this.store.lazy === true && this.loaded !== true && typeof this.isLeafByUser !== "undefined") {
this.isLeaf = this.isLeafByUser;
return;
}
const childNodes = this.childNodes;
if (!this.store.lazy || this.store.lazy === true && this.loaded === true) {
this.isLeaf = !childNodes || childNodes.length === 0;
return;
}
this.isLeaf = false;
}
setChecked(value, deep, recursion, passValue) {
this.indeterminate = value === "half";
this.checked = value === true;
if (this.store.checkStrictly)
return;
if (!(this.shouldLoadData() && !this.store.checkDescendants)) {
const { all, allWithoutDisable } = getChildState(this.childNodes);
if (!this.isLeaf && !all && allWithoutDisable) {
this.checked = false;
value = false;
}
const handleDescendants = () => {
if (deep) {
const childNodes = this.childNodes;
for (let i = 0, j = childNodes.length; i < j; i++) {
const child = childNodes[i];
passValue = passValue || value !== false;
const isCheck = child.disabled ? child.checked : passValue;
child.setChecked(isCheck, deep, true, passValue);
}
const { half, all: all2 } = getChildState(childNodes);
if (!all2) {
this.checked = all2;
this.indeterminate = half;
}
}
};
if (this.shouldLoadData()) {
this.loadData(() => {
handleDescendants();
reInitChecked(this);
}, {
checked: value !== false
});
return;
} else {
handleDescendants();
}
}
const parent = this.parent;
if (!parent || parent.level === 0)
return;
if (!recursion) {
reInitChecked(parent);
}
}
getChildren(forceInit = false) {
if (this.level === 0)
return this.data;
const data = this.data;
if (!data)
return null;
const props = this.store.props;
let children = "children";
if (props) {
children = props.children || "children";
}
if (data[children] === void 0) {
data[children] = null;
}
if (forceInit && !data[children]) {
data[children] = [];
}
return data[children];
}
updateChildren() {
const newData = this.getChildren() || [];
const oldData = this.childNodes.map((node) => node.data);
const newDataMap = {};
const newNodes = [];
newData.forEach((item, index) => {
const key = item[NODE_KEY];
const isNodeExists = !!key && oldData.findIndex((data) => data[NODE_KEY] === key) >= 0;
if (isNodeExists) {
newDataMap[key] = { index, data: item };
} else {
newNodes.push({ index, data: item });
}
});
if (!this.store.lazy) {
oldData.forEach((item) => {
if (!newDataMap[item[NODE_KEY]])
this.removeChildByData(item);
});
}
newNodes.forEach(({ index, data }) => {
this.insertChild({ data }, index);
});
this.updateLeafState();
}
loadData(callback, defaultProps = {}) {
if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) {
this.loading = true;
const resolve = (children) => {
this.childNodes = [];
this.doCreateChildren(children, defaultProps);
this.loaded = true;
this.loading = false;
this.updateLeafState();
if (callback) {
callback.call(this, children);
}
};
this.store.load(this, resolve);
} else {
if (callback) {
callback.call(this);
}
}
}
}
var Node$1 = Node;
class TreeStore {
constructor(options) {
this.currentNode = null;
this.currentNodeKey = null;
for (const option in options) {
if (hasOwn(options, option)) {
this[option] = options[option];
}
}
this.nodesMap = {};
}
initialize() {
this.root = new Node$1({
data: this.data,
store: this
});
this.root.initialize();
if (this.lazy && this.load) {
const loadFn = this.load;
loadFn(this.root, (data) => {
this.root.doCreateChildren(data);
this._initDefaultCheckedNodes();
});
} else {
this._initDefaultCheckedNodes();
}
}
filter(value) {
const filterNodeMethod = this.filterNodeMethod;
const lazy = this.lazy;
const traverse = function(node) {
const childNodes = node.root ? node.root.childNodes : node.childNodes;
childNodes.forEach((child) => {
child.visible = filterNodeMethod.call(child, value, child.data, child);
traverse(child);
});
if (!node.visible && childNodes.length) {
let allHidden = true;
allHidden = !childNodes.some((child) => child.visible);
if (node.root) {
node.root.visible = allHidden === false;
} else {
node.visible = allHidden === false;
}
}
if (!value)
return;
if (node.visible && !node.isLeaf && !lazy)
node.expand();
};
traverse(this);
}
setData(newVal) {
const instanceChanged = newVal !== this.root.data;
if (instanceChanged) {
this.root.setData(newVal);
this._initDefaultCheckedNodes();
} else {
this.root.updateChildren();
}
}
getNode(data) {
if (data instanceof Node$1)
return data;
const key = isObject$1(data) ? getNodeKey(this.key, data) : data;
return this.nodesMap[key] || null;
}
insertBefore(data, refData) {
const refNode = this.getNode(refData);
refNode.parent.insertBefore({ data }, refNode);
}
insertAfter(data, refData) {
const refNode = this.getNode(refData);
refNode.parent.insertAfter({ data }, refNode);
}
remove(data) {
const node = this.getNode(data);
if (node && node.parent) {
if (node === this.currentNode) {
this.currentNode = null;
}
node.parent.removeChild(node);
}
}
append(data, parentData) {
const parentNode = parentData ? this.getNode(parentData) : this.root;
if (parentNode) {
parentNode.insertChild({ data });
}
}
_initDefaultCheckedNodes() {
const defaultCheckedKeys = this.defaultCheckedKeys || [];
const nodesMap = this.nodesMap;
defaultCheckedKeys.forEach((checkedKey) => {
const node = nodesMap[checkedKey];
if (node) {
node.setChecked(true, !this.checkStrictly);
}
});
}
_initDefaultCheckedNode(node) {
const defaultCheckedKeys = this.defaultCheckedKeys || [];
if (defaultCheckedKeys.includes(node.key)) {
node.setChecked(true, !this.checkStrictly);
}
}
setDefaultCheckedKey(newVal) {
if (newVal !== this.defaultCheckedKeys) {
this.defaultCheckedKeys = newVal;
this._initDefaultCheckedNodes();
}
}
registerNode(node) {
const key = this.key;
if (!node || !node.data)
return;
if (!key) {
this.nodesMap[node.id] = node;
} else {
const nodeKey = node.key;
if (nodeKey !== void 0)
this.nodesMap[node.key] = node;
}
}
deregisterNode(node) {
const key = this.key;
if (!key || !node || !node.data)
return;
node.childNodes.forEach((child) => {
this.deregisterNode(child);
});
delete this.nodesMap[node.key];
}
getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
const checkedNodes = [];
const traverse = function(node) {
const childNodes = node.root ? node.root.childNodes : node.childNodes;
childNodes.forEach((child) => {
if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
checkedNodes.push(child.data);
}
traverse(child);
});
};
traverse(this);
return checkedNodes;
}
getCheckedKeys(leafOnly = false) {
return this.getCheckedNodes(leafOnly).map((data) => (data || {})[this.key]);
}
getHalfCheckedNodes() {
const nodes = [];
const traverse = function(node) {
const childNodes = node.root ? node.root.childNodes : node.childNodes;
childNodes.forEach((child) => {
if (child.indeterminate) {
nodes.push(child.data);
}
traverse(child);
});
};
traverse(this);
return nodes;
}
getHalfCheckedKeys() {
return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]);
}
_getAllNodes() {
const allNodes = [];
const nodesMap = this.nodesMap;
for (const nodeKey in nodesMap) {
if (hasOwn(nodesMap, nodeKey)) {
allNodes.push(nodesMap[nodeKey]);
}
}
return allNodes;
}
updateChildren(key, data) {
const node = this.nodesMap[key];
if (!node)
return;
const childNodes = node.childNodes;
for (let i = childNodes.length - 1; i >= 0; i--) {
const child = childNodes[i];
this.remove(child.data);
}
for (let i = 0, j = data.length; i < j; i++) {
const child = data[i];
this.append(child, node.data);
}
}
_setCheckedKeys(key, leafOnly = false, checkedKeys) {
const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level);
const cache = /* @__PURE__ */ Object.create(null);
const keys = Object.keys(checkedKeys);
allNodes.forEach((node) => node.setChecked(false, false));
for (let i = 0, j = allNodes.length; i < j; i++) {
const node = allNodes[i];
const nodeKey = node.data[key].toString();
const checked = keys.includes(nodeKey);
if (!checked) {
if (node.checked && !cache[nodeKey]) {
node.setChecked(false, false);
}
continue;
}
let parent = node.parent;
while (parent && parent.level > 0) {
cache[parent.data[key]] = true;
parent = parent.parent;
}
if (node.isLeaf || this.checkStrictly) {
node.setChecked(true, false);
continue;
}
node.setChecked(true, true);
if (leafOnly) {
node.setChecked(false, false);
const traverse = function(node2) {
const childNodes = node2.childNodes;
childNodes.forEach((child) => {
if (!child.isLeaf) {
child.setChecked(false, false);
}
traverse(child);
});
};
traverse(node);
}
}
}
setCheckedNodes(array, leafOnly = false) {
const key = this.key;
const checkedKeys = {};
array.forEach((item) => {
checkedKeys[(item || {})[key]] = true;
});
this._setCheckedKeys(key, leafOnly, checkedKeys);
}
setCheckedKeys(keys, leafOnly = false) {
this.defaultCheckedKeys = keys;
const key = this.key;
const checkedKeys = {};
keys.forEach((key2) => {
checkedKeys[key2] = true;
});
this._setCheckedKeys(key, leafOnly, checkedKeys);
}
setDefaultExpandedKeys(keys) {
keys = keys || [];
this.defaultExpandedKeys = keys;
keys.forEach((key) => {
const node = this.getNode(key);
if (node)
node.expand(null, this.autoExpandParent);
});
}
setChecked(data, checked, deep) {
const node = this.getNode(data);
if (node) {
node.setChecked(!!checked, deep);
}
}
getCurrentNode() {
return this.currentNode;
}
setCurrentNode(currentNode) {
const prevCurrentNode = this.currentNode;
if (prevCurrentNode) {
prevCurrentNode.isCurrent = false;
}
this.currentNode = currentNode;
this.currentNode.isCurrent = true;
}
setUserCurrentNode(node, shouldAutoExpandParent = true) {
const key = node[this.key];
const currNode = this.nodesMap[key];
this.setCurrentNode(currNode);
if (shouldAutoExpandParent && this.currentNode.level > 1) {
this.currentNode.parent.expand(null, true);
}
}
setCurrentNodeKey(key, shouldAutoExpandParent = true) {
if (key === null || key === void 0) {
this.currentNode && (this.currentNode.isCurrent = false);
this.currentNode = null;
return;
}
const node = this.getNode(key);
if (node) {
this.setCurrentNode(node);
if (shouldAutoExpandParent && this.currentNode.level > 1) {
this.currentNode.parent.expand(null, true);
}
}
}
}
const _sfc_main$c = vue.defineComponent({
name: "ElTreeNodeContent",
props: {
node: {
type: Object,
required: true
},
renderContent: Function
},
setup(props) {
const ns = useNamespace("tree");
const nodeInstance = vue.inject("NodeInstance");
const tree = vue.inject("RootTree");
return () => {
const node = props.node;
const { data, store } = node;
return props.renderContent ? props.renderContent(vue.h, { _self: nodeInstance, node, data, store }) : vue.h("span", { class: ns.be("node", "label") }, [
tree.ctx.slots.default ? tree.ctx.slots.default({ node, data }) : node.label
]);
};
}
});
var NodeContent = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__file", "tree-node-content.vue"]]);
function useNodeExpandEventBroadcast(props) {
const parentNodeMap = vue.inject("TreeNodeMap", null);
const currentNodeMap = {
treeNodeExpand: (node) => {
if (props.node !== node) {
props.node.collapse();
}
},
children: []
};
if (parentNodeMap) {
parentNodeMap.children.push(currentNodeMap);
}
vue.provide("TreeNodeMap", currentNodeMap);
return {
broadcastExpanded: (node) => {
if (!props.accordion)
return;
for (const childNode of currentNodeMap.children) {
childNode.treeNodeExpand(node);
}
}
};
}
const dragEventsKey = Symbol("dragEvents");
function useDragNodeHandler({ props, ctx, el$, dropIndicator$, store }) {
const ns = useNamespace("tree");
const dragState = vue.ref({
showDropIndicator: false,
draggingNode: null,
dropNode: null,
allowDrop: true,
dropType: null
});
const treeNodeDragStart = ({ event, treeNode }) => {
if (typeof props.allowDrag === "function" && !props.allowDrag(treeNode.node)) {
event.preventDefault();
return false;
}
event.dataTransfer.effectAllowed = "move";
try {
event.dataTransfer.setData("text/plain", "");
} catch (e) {
}
dragState.value.draggingNode = treeNode;
ctx.emit("node-drag-start", treeNode.node, event);
};
const treeNodeDragOver = ({ event, treeNode }) => {
const dropNode = treeNode;
const oldDropNode = dragState.value.dropNode;
if (oldDropNode && oldDropNode !== dropNode) {
removeClass(oldDropNode.$el, ns.is("drop-inner"));
}
const draggingNode = dragState.value.draggingNode;
if (!draggingNode || !dropNode)
return;
let dropPrev = true;
let dropInner = true;
let dropNext = true;
let userAllowDropInner = true;
if (typeof props.allowDrop === "function") {
dropPrev = props.allowDrop(draggingNode.node, dropNode.node, "prev");
userAllowDropInner = dropInner = props.allowDrop(draggingNode.node, dropNode.node, "inner");
dropNext = props.allowDrop(draggingNode.node, dropNode.node, "next");
}
event.dataTransfer.dropEffect = dropInner || dropPrev || dropNext ? "move" : "none";
if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) {
if (oldDropNode) {
ctx.emit("node-drag-leave", draggingNode.node, oldDropNode.node, event);
}
ctx.emit("node-drag-enter", draggingNode.node, dropNode.node, event);
}
if (dropPrev || dropInner || dropNext) {
dragState.value.dropNode = dropNode;
}
if (dropNode.node.nextSibling === draggingNode.node) {
dropNext = false;
}
if (dropNode.node.previousSibling === draggingNode.node) {
dropPrev = false;
}
if (dropNode.node.contains(draggingNode.node, false)) {
dropInner = false;
}
if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {
dropPrev = false;
dropInner = false;
dropNext = false;
}
const targetPosition = dropNode.$el.getBoundingClientRect();
const treePosition = el$.value.getBoundingClientRect();
let dropType;
const prevPercent = dropPrev ? dropInner ? 0.25 : dropNext ? 0.45 : 1 : -1;
const nextPercent = dropNext ? dropInner ? 0.75 : dropPrev ? 0.55 : 0 : 1;
let indicatorTop = -9999;
const distance = event.clientY - targetPosition.top;
if (distance < targetPosition.height * prevPercent) {
dropType = "before";
} else if (distance > targetPosition.height * nextPercent) {
dropType = "after";
} else if (dropInner) {
dropType = "inner";
} else {
dropType = "none";
}
const iconPosition = dropNode.$el.querySelector(`.${ns.be("node", "expand-icon")}`).getBoundingClientRect();
const dropIndicator = dropIndicator$.value;
if (dropType === "before") {
indicatorTop = iconPosition.top - treePosition.top;
} else if (dropType === "after") {
indicatorTop = iconPosition.bottom - treePosition.top;
}
dropIndicator.style.top = `${indicatorTop}px`;
dropIndicator.style.left = `${iconPosition.right - treePosition.left}px`;
if (dropType === "inner") {
addClass(dropNode.$el, ns.is("drop-inner"));
} else {
removeClass(dropNode.$el, ns.is("drop-inner"));
}
dragState.value.showDropIndicator = dropType === "before" || dropType === "after";
dragState.value.allowDrop = dragState.value.showDropIndicator || userAllowDropInner;
dragState.value.dropType = dropType;
ctx.emit("node-drag-over", draggingNode.node, dropNode.node, event);
};
const treeNodeDragEnd = (event) => {
const { draggingNode, dropType, dropNode } = dragState.value;
event.preventDefault();
event.dataTransfer.dropEffect = "move";
if (draggingNode && dropNode) {
const draggingNodeCopy = { data: draggingNode.node.data };
if (dropType !== "none") {
draggingNode.node.remove();
}
if (dropType === "before") {
dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node);
} else if (dropType === "after") {
dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node);
} else if (dropType === "inner") {
dropNode.node.insertChild(draggingNodeCopy);
}
if (dropType !== "none") {
store.value.registerNode(draggingNodeCopy);
}
removeClass(dropNode.$el, ns.is("drop-inner"));
ctx.emit("node-drag-end", draggingNode.node, dropNode.node, dropType, event);
if (dropType !== "none") {
ctx.emit("node-drop", draggingNode.node, dropNode.node, dropType, event);
}
}
if (draggingNode && !dropNode) {
ctx.emit("node-drag-end", draggingNode.node, null, dropType, event);
}
dragState.value.showDropIndicator = false;
dragState.value.draggingNode = null;
dragState.value.dropNode = null;
dragState.value.allowDrop = true;
};
vue.provide(dragEventsKey, {
treeNodeDragStart,
treeNodeDragOver,
treeNodeDragEnd
});
return {
dragState
};
}
const _sfc_main$b = vue.defineComponent({
name: "ElTreeNode",
components: {
ElCollapseTransition: _CollapseTransition,
ElCheckbox,
NodeContent,
ElIcon,
Loading: loading_default
},
props: {
node: {
type: Node$1,
default: () => ({})
},
props: {
type: Object,
default: () => ({})
},
accordion: Boolean,
renderContent: Function,
renderAfterExpand: Boolean,
showCheckbox: {
type: Boolean,
default: false
}
},
emits: ["node-expand"],
setup(props, ctx) {
const ns = useNamespace("tree");
const { broadcastExpanded } = useNodeExpandEventBroadcast(props);
const tree = vue.inject("RootTree");
const expanded = vue.ref(false);
const childNodeRendered = vue.ref(false);
const oldChecked = vue.ref(null);
const oldIndeterminate = vue.ref(null);
const node$ = vue.ref(null);
const dragEvents = vue.inject(dragEventsKey);
const instance = vue.getCurrentInstance();
vue.provide("NodeInstance", instance);
if (props.node.expanded) {
expanded.value = true;
childNodeRendered.value = true;
}
const childrenKey = tree.props["children"] || "children";
vue.watch(() => {
const children = props.node.data[childrenKey];
return children && [...children];
}, () => {
props.node.updateChildren();
});
vue.watch(() => props.node.indeterminate, (val) => {
handleSelectChange(props.node.checked, val);
});
vue.watch(() => props.node.checked, (val) => {
handleSelectChange(val, props.node.indeterminate);
});
vue.watch(() => props.node.expanded, (val) => {
vue.nextTick(() => expanded.value = val);
if (val) {
childNodeRendered.value = true;
}
});
const getNodeKey$1 = (node) => {
return getNodeKey(tree.props.nodeKey, node.data);
};
const getNodeClass = (node) => {
const nodeClassFunc = props.props.class;
if (!nodeClassFunc) {
return {};
}
let className;
if (isFunction(nodeClassFunc)) {
const { data } = node;
className = nodeClassFunc(data, node);
} else {
className = nodeClassFunc;
}
if (isString(className)) {
return { [className]: true };
} else {
return className;
}
};
const handleSelectChange = (checked, indeterminate) => {
if (oldChecked.value !== checked || oldIndeterminate.value !== indeterminate) {
tree.ctx.emit("check-change", props.node.data, checked, indeterminate);
}
oldChecked.value = checked;
oldIndeterminate.value = indeterminate;
};
const handleClick = (e) => {
handleCurrentChange(tree.store, tree.ctx.emit, () => tree.store.value.setCurrentNode(props.node));
tree.currentNode.value = props.node;
if (tree.props.expandOnClickNode) {
handleExpandIconClick();
}
if (tree.props.checkOnClickNode && !props.node.disabled) {
handleCheckChange(null, {
target: { checked: !props.node.checked }
});
}
tree.ctx.emit("node-click", props.node.data, props.node, instance, e);
};
const handleContextMenu = (event) => {
if (tree.instance.vnode.props["onNodeContextmenu"]) {
event.stopPropagation();
event.preventDefault();
}
tree.ctx.emit("node-contextmenu", event, props.node.data, props.node, instance);
};
const handleExpandIconClick = () => {
if (props.node.isLeaf)
return;
if (expanded.value) {
tree.ctx.emit("node-collapse", props.node.data, props.node, instance);
props.node.collapse();
} else {
props.node.expand();
ctx.emit("node-expand", props.node.data, props.node, instance);
}
};
const handleCheckChange = (value, ev) => {
props.node.setChecked(ev.target.checked, !tree.props.checkStrictly);
vue.nextTick(() => {
const store = tree.store.value;
tree.ctx.emit("check", props.node.data, {
checkedNodes: store.getCheckedNodes(),
checkedKeys: store.getCheckedKeys(),
halfCheckedNodes: store.getHalfCheckedNodes(),
halfCheckedKeys: store.getHalfCheckedKeys()
});
});
};
const handleChildNodeExpand = (nodeData, node, instance2) => {
broadcastExpanded(node);
tree.ctx.emit("node-expand", nodeData, node, instance2);
};
const handleDragStart = (event) => {
if (!tree.props.draggable)
return;
dragEvents.treeNodeDragStart({ event, treeNode: props });
};
const handleDragOver = (event) => {
event.preventDefault();
if (!tree.props.draggable)
return;
dragEvents.treeNodeDragOver({
event,
treeNode: { $el: node$.value, node: props.node }
});
};
const handleDrop = (event) => {
event.preventDefault();
};
const handleDragEnd = (event) => {
if (!tree.props.draggable)
return;
dragEvents.treeNodeDragEnd(event);
};
return {
ns,
node$,
tree,
expanded,
childNodeRendered,
oldChecked,
oldIndeterminate,
getNodeKey: getNodeKey$1,
getNodeClass,
handleSelectChange,
handleClick,
handleContextMenu,
handleExpandIconClick,
handleCheckChange,
handleChildNodeExpand,
handleDragStart,
handleDragOver,
handleDrop,
handleDragEnd,
CaretRight: caret_right_default
};
}
});
const _hoisted_1$7 = ["aria-expanded", "aria-disabled", "aria-checked", "draggable", "data-key"];
const _hoisted_2$5 = ["aria-expanded"];
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_checkbox = vue.resolveComponent("el-checkbox");
const _component_loading = vue.resolveComponent("loading");
const _component_node_content = vue.resolveComponent("node-content");
const _component_el_tree_node = vue.resolveComponent("el-tree-node");
const _component_el_collapse_transition = vue.resolveComponent("el-collapse-transition");
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
ref: "node$",
class: vue.normalizeClass([
_ctx.ns.b("node"),
_ctx.ns.is("expanded", _ctx.expanded),
_ctx.ns.is("current", _ctx.node.isCurrent),
_ctx.ns.is("hidden", !_ctx.node.visible),
_ctx.ns.is("focusable", !_ctx.node.disabled),
_ctx.ns.is("checked", !_ctx.node.disabled && _ctx.node.checked),
_ctx.getNodeClass(_ctx.node)
]),
role: "treeitem",
tabindex: "-1",
"aria-expanded": _ctx.expanded,
"aria-disabled": _ctx.node.disabled,
"aria-checked": _ctx.node.checked,
draggable: _ctx.tree.props.draggable,
"data-key": _ctx.getNodeKey(_ctx.node),
onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"])),
onContextmenu: _cache[2] || (_cache[2] = (...args) => _ctx.handleContextMenu && _ctx.handleContextMenu(...args)),
onDragstart: _cache[3] || (_cache[3] = vue.withModifiers((...args) => _ctx.handleDragStart && _ctx.handleDragStart(...args), ["stop"])),
onDragover: _cache[4] || (_cache[4] = vue.withModifiers((...args) => _ctx.handleDragOver && _ctx.handleDragOver(...args), ["stop"])),
onDragend: _cache[5] || (_cache[5] = vue.withModifiers((...args) => _ctx.handleDragEnd && _ctx.handleDragEnd(...args), ["stop"])),
onDrop: _cache[6] || (_cache[6] = vue.withModifiers((...args) => _ctx.handleDrop && _ctx.handleDrop(...args), ["stop"]))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.be("node", "content")),
style: vue.normalizeStyle({ paddingLeft: (_ctx.node.level - 1) * _ctx.tree.props.indent + "px" })
}, [
_ctx.tree.props.icon || _ctx.CaretRight ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 0,
class: vue.normalizeClass([
_ctx.ns.be("node", "expand-icon"),
_ctx.ns.is("leaf", _ctx.node.isLeaf),
{
expanded: !_ctx.node.isLeaf && _ctx.expanded
}
]),
onClick: vue.withModifiers(_ctx.handleExpandIconClick, ["stop"])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tree.props.icon || _ctx.CaretRight)))
]),
_: 1
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
_ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(_component_el_checkbox, {
key: 1,
"model-value": _ctx.node.checked,
indeterminate: _ctx.node.indeterminate,
disabled: !!_ctx.node.disabled,
onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["stop"])),
onChange: _ctx.handleCheckChange
}, null, 8, ["model-value", "indeterminate", "disabled", "onChange"])) : vue.createCommentVNode("v-if", true),
_ctx.node.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 2,
class: vue.normalizeClass([_ctx.ns.be("node", "loading-icon"), _ctx.ns.is("loading")])
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_loading)
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(_component_node_content, {
node: _ctx.node,
"render-content": _ctx.renderContent
}, null, 8, ["node", "render-content"])
], 6),
vue.createVNode(_component_el_collapse_transition, null, {
default: vue.withCtx(() => [
!_ctx.renderAfterExpand || _ctx.childNodeRendered ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(_ctx.ns.be("node", "children")),
role: "group",
"aria-expanded": _ctx.expanded
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.node.childNodes, (child) => {
return vue.openBlock(), vue.createBlock(_component_el_tree_node, {
key: _ctx.getNodeKey(child),
"render-content": _ctx.renderContent,
"render-after-expand": _ctx.renderAfterExpand,
"show-checkbox": _ctx.showCheckbox,
node: child,
accordion: _ctx.accordion,
props: _ctx.props,
onNodeExpand: _ctx.handleChildNodeExpand
}, null, 8, ["render-content", "render-after-expand", "show-checkbox", "node", "accordion", "props", "onNodeExpand"]);
}), 128))
], 10, _hoisted_2$5)), [
[vue.vShow, _ctx.expanded]
]) : vue.createCommentVNode("v-if", true)
]),
_: 1
})
], 42, _hoisted_1$7)), [
[vue.vShow, _ctx.node.visible]
]);
}
var ElTreeNode$1 = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$2], ["__file", "tree-node.vue"]]);
function useKeydown({ el$ }, store) {
const ns = useNamespace("tree");
const treeItems = vue.shallowRef([]);
const checkboxItems = vue.shallowRef([]);
vue.onMounted(() => {
initTabIndex();
});
vue.onUpdated(() => {
treeItems.value = Array.from(el$.value.querySelectorAll("[role=treeitem]"));
checkboxItems.value = Array.from(el$.value.querySelectorAll("input[type=checkbox]"));
});
vue.watch(checkboxItems, (val) => {
val.forEach((checkbox) => {
checkbox.setAttribute("tabindex", "-1");
});
});
const handleKeydown = (ev) => {
const currentItem = ev.target;
if (!currentItem.className.includes(ns.b("node")))
return;
const code = ev.code;
treeItems.value = Array.from(el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`));
const currentIndex = treeItems.value.indexOf(currentItem);
let nextIndex;
if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
ev.preventDefault();
if (code === EVENT_CODE.up) {
nextIndex = currentIndex === -1 ? 0 : currentIndex !== 0 ? currentIndex - 1 : treeItems.value.length - 1;
const startIndex = nextIndex;
while (true) {
if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus)
break;
nextIndex--;
if (nextIndex === startIndex) {
nextIndex = -1;
break;
}
if (nextIndex < 0) {
nextIndex = treeItems.value.length - 1;
}
}
} else {
nextIndex = currentIndex === -1 ? 0 : currentIndex < treeItems.value.length - 1 ? currentIndex + 1 : 0;
const startIndex = nextIndex;
while (true) {
if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus)
break;
nextIndex++;
if (nextIndex === startIndex) {
nextIndex = -1;
break;
}
if (nextIndex >= treeItems.value.length) {
nextIndex = 0;
}
}
}
nextIndex !== -1 && treeItems.value[nextIndex].focus();
}
if ([EVENT_CODE.left, EVENT_CODE.right].includes(code)) {
ev.preventDefault();
currentItem.click();
}
const hasInput = currentItem.querySelector('[type="checkbox"]');
if ([EVENT_CODE.enter, EVENT_CODE.space].includes(code) && hasInput) {
ev.preventDefault();
hasInput.click();
}
};
useEventListener(el$, "keydown", handleKeydown);
const initTabIndex = () => {
var _a;
treeItems.value = Array.from(el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`));
checkboxItems.value = Array.from(el$.value.querySelectorAll("input[type=checkbox]"));
const checkedItem = el$.value.querySelectorAll(`.${ns.is("checked")}[role=treeitem]`);
if (checkedItem.length) {
checkedItem[0].setAttribute("tabindex", "0");
return;
}
(_a = treeItems.value[0]) == null ? void 0 : _a.setAttribute("tabindex", "0");
};
}
const _sfc_main$a = vue.defineComponent({
name: "ElTree",
components: { ElTreeNode: ElTreeNode$1 },
props: {
data: {
type: Array,
default: () => []
},
emptyText: {
type: String
},
renderAfterExpand: {
type: Boolean,
default: true
},
nodeKey: String,
checkStrictly: Boolean,
defaultExpandAll: Boolean,
expandOnClickNode: {
type: Boolean,
default: true
},
checkOnClickNode: Boolean,
checkDescendants: {
type: Boolean,
default: false
},
autoExpandParent: {
type: Boolean,
default: true
},
defaultCheckedKeys: Array,
defaultExpandedKeys: Array,
currentNodeKey: [String, Number],
renderContent: Function,
showCheckbox: {
type: Boolean,
default: false
},
draggable: {
type: Boolean,
default: false
},
allowDrag: Function,
allowDrop: Function,
props: {
type: Object,
default: () => ({
children: "children",
label: "label",
disabled: "disabled"
})
},
lazy: {
type: Boolean,
default: false
},
highlightCurrent: Boolean,
load: Function,
filterNodeMethod: Function,
accordion: Boolean,
indent: {
type: Number,
default: 18
},
icon: {
type: iconPropType
}
},
emits: [
"check-change",
"current-change",
"node-click",
"node-contextmenu",
"node-collapse",
"node-expand",
"check",
"node-drag-start",
"node-drag-end",
"node-drop",
"node-drag-leave",
"node-drag-enter",
"node-drag-over"
],
setup(props, ctx) {
const { t } = useLocale();
const ns = useNamespace("tree");
const store = vue.ref(new TreeStore({
key: props.nodeKey,
data: props.data,
lazy: props.lazy,
props: props.props,
load: props.load,
currentNodeKey: props.currentNodeKey,
checkStrictly: props.checkStrictly,
checkDescendants: props.checkDescendants,
defaultCheckedKeys: props.defaultCheckedKeys,
defaultExpandedKeys: props.defaultExpandedKeys,
autoExpandParent: props.autoExpandParent,
defaultExpandAll: props.defaultExpandAll,
filterNodeMethod: props.filterNodeMethod
}));
store.value.initialize();
const root = vue.ref(store.value.root);
const currentNode = vue.ref(null);
const el$ = vue.ref(null);
const dropIndicator$ = vue.ref(null);
const { broadcastExpanded } = useNodeExpandEventBroadcast(props);
const { dragState } = useDragNodeHandler({
props,
ctx,
el$,
dropIndicator$,
store
});
useKeydown({ el$ }, store);
const isEmpty = vue.computed(() => {
const { childNodes } = root.value;
return !childNodes || childNodes.length === 0 || childNodes.every(({ visible }) => !visible);
});
vue.watch(() => props.currentNodeKey, (newVal) => {
store.value.setCurrentNodeKey(newVal);
});
vue.watch(() => props.defaultCheckedKeys, (newVal) => {
store.value.setDefaultCheckedKey(newVal);
});
vue.watch(() => props.defaultExpandedKeys, (newVal) => {
store.value.setDefaultExpandedKeys(newVal);
});
vue.watch(() => props.data, (newVal) => {
store.value.setData(newVal);
}, { deep: true });
vue.watch(() => props.checkStrictly, (newVal) => {
store.value.checkStrictly = newVal;
});
const filter = (value) => {
if (!props.filterNodeMethod)
throw new Error("[Tree] filterNodeMethod is required when filter");
store.value.filter(value);
};
const getNodeKey$1 = (node) => {
return getNodeKey(props.nodeKey, node.data);
};
const getNodePath = (data) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in getNodePath");
const node = store.value.getNode(data);
if (!node)
return [];
const path = [node.data];
let parent = node.parent;
while (parent && parent !== root.value) {
path.push(parent.data);
parent = parent.parent;
}
return path.reverse();
};
const getCheckedNodes = (leafOnly, includeHalfChecked) => {
return store.value.getCheckedNodes(leafOnly, includeHalfChecked);
};
const getCheckedKeys = (leafOnly) => {
return store.value.getCheckedKeys(leafOnly);
};
const getCurrentNode = () => {
const currentNode2 = store.value.getCurrentNode();
return currentNode2 ? currentNode2.data : null;
};
const getCurrentKey = () => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in getCurrentKey");
const currentNode2 = getCurrentNode();
return currentNode2 ? currentNode2[props.nodeKey] : null;
};
const setCheckedNodes = (nodes, leafOnly) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCheckedNodes");
store.value.setCheckedNodes(nodes, leafOnly);
};
const setCheckedKeys = (keys, leafOnly) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCheckedKeys");
store.value.setCheckedKeys(keys, leafOnly);
};
const setChecked = (data, checked, deep) => {
store.value.setChecked(data, checked, deep);
};
const getHalfCheckedNodes = () => {
return store.value.getHalfCheckedNodes();
};
const getHalfCheckedKeys = () => {
return store.value.getHalfCheckedKeys();
};
const setCurrentNode = (node, shouldAutoExpandParent = true) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCurrentNode");
handleCurrentChange(store, ctx.emit, () => store.value.setUserCurrentNode(node, shouldAutoExpandParent));
};
const setCurrentKey = (key, shouldAutoExpandParent = true) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in setCurrentKey");
handleCurrentChange(store, ctx.emit, () => store.value.setCurrentNodeKey(key, shouldAutoExpandParent));
};
const getNode = (data) => {
return store.value.getNode(data);
};
const remove = (data) => {
store.value.remove(data);
};
const append = (data, parentNode) => {
store.value.append(data, parentNode);
};
const insertBefore = (data, refNode) => {
store.value.insertBefore(data, refNode);
};
const insertAfter = (data, refNode) => {
store.value.insertAfter(data, refNode);
};
const handleNodeExpand = (nodeData, node, instance) => {
broadcastExpanded(node);
ctx.emit("node-expand", nodeData, node, instance);
};
const updateKeyChildren = (key, data) => {
if (!props.nodeKey)
throw new Error("[Tree] nodeKey is required in updateKeyChild");
store.value.updateChildren(key, data);
};
vue.provide("RootTree", {
ctx,
props,
store,
root,
currentNode,
instance: vue.getCurrentInstance()
});
vue.provide(formItemContextKey, void 0);
return {
ns,
store,
root,
currentNode,
dragState,
el$,
dropIndicator$,
isEmpty,
filter,
getNodeKey: getNodeKey$1,
getNodePath,
getCheckedNodes,
getCheckedKeys,
getCurrentNode,
getCurrentKey,
setCheckedNodes,
setCheckedKeys,
setChecked,
getHalfCheckedNodes,
getHalfCheckedKeys,
setCurrentNode,
setCurrentKey,
t,
getNode,
remove,
append,
insertBefore,
insertAfter,
handleNodeExpand,
updateKeyChildren
};
}
});
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
var _a;
const _component_el_tree_node = vue.resolveComponent("el-tree-node");
return vue.openBlock(), vue.createElementBlock("div", {
ref: "el$",
class: vue.normalizeClass([
_ctx.ns.b(),
_ctx.ns.is("dragging", !!_ctx.dragState.draggingNode),
_ctx.ns.is("drop-not-allow", !_ctx.dragState.allowDrop),
_ctx.ns.is("drop-inner", _ctx.dragState.dropType === "inner"),
{ [_ctx.ns.m("highlight-current")]: _ctx.highlightCurrent }
]),
role: "tree"
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.root.childNodes, (child) => {
return vue.openBlock(), vue.createBlock(_component_el_tree_node, {
key: _ctx.getNodeKey(child),
node: child,
props: _ctx.props,
accordion: _ctx.accordion,
"render-after-expand": _ctx.renderAfterExpand,
"show-checkbox": _ctx.showCheckbox,
"render-content": _ctx.renderContent,
onNodeExpand: _ctx.handleNodeExpand
}, null, 8, ["node", "props", "accordion", "render-after-expand", "show-checkbox", "render-content", "onNodeExpand"]);
}), 128)),
_ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(_ctx.ns.e("empty-block"))
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.ns.e("empty-text"))
}, vue.toDisplayString((_a = _ctx.emptyText) != null ? _a : _ctx.t("el.tree.emptyText")), 3)
], 2)) : vue.createCommentVNode("v-if", true),
vue.withDirectives(vue.createElementVNode("div", {
ref: "dropIndicator$",
class: vue.normalizeClass(_ctx.ns.e("drop-indicator"))
}, null, 2), [
[vue.vShow, _ctx.dragState.showDropIndicator]
])
], 2);
}
var Tree = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$1], ["__file", "tree.vue"]]);
Tree.install = (app) => {
app.component(Tree.name, Tree);
};
const _Tree = Tree;
const ElTree = _Tree;
const useSelect = (props, { attrs }, {
tree,
key
}) => {
const ns = useNamespace("tree-select");
const result = {
...pick(vue.toRefs(props), Object.keys(ElSelect.props)),
...attrs,
valueKey: key,
popperClass: vue.computed(() => {
const classes = [ns.e("popper")];
if (props.popperClass)
classes.push(props.popperClass);
return classes.join(" ");
}),
filterMethod: (keyword = "") => {
if (props.filterMethod)
props.filterMethod(keyword);
vue.nextTick(() => {
var _a;
(_a = tree.value) == null ? void 0 : _a.filter(keyword);
});
},
onVisibleChange: (visible) => {
var _a;
(_a = attrs.onVisibleChange) == null ? void 0 : _a.call(attrs, visible);
if (props.filterable && visible) {
result.filterMethod();
}
}
};
return result;
};
const component = vue.defineComponent({
extends: ElOption,
setup(props, ctx) {
const result = ElOption.setup(props, ctx);
delete result.selectOptionClick;
const vm = vue.getCurrentInstance().proxy;
vue.nextTick(() => {
if (!result.select.cachedOptions.get(vm.value)) {
result.select.onOptionCreate(vm);
}
});
return result;
},
methods: {
selectOptionClick() {
this.$el.parentElement.click();
}
}
});
var TreeSelectOption = component;
function isValidValue(val) {
return val || val === 0;
}
function isValidArray(val) {
return Array.isArray(val) && val.length;
}
function toValidArray(val) {
return Array.isArray(val) ? val : isValidValue(val) ? [val] : [];
}
function treeFind(treeData, findCallback, getChildren, resultCallback, parent) {
for (let i = 0; i < treeData.length; i++) {
const data = treeData[i];
if (findCallback(data, i, treeData, parent)) {
return resultCallback ? resultCallback(data, i, treeData, parent) : data;
} else {
const children = getChildren(data);
if (isValidArray(children)) {
const find = treeFind(children, findCallback, getChildren, resultCallback, data);
if (find)
return find;
}
}
}
}
const useTree$1 = (props, { attrs, slots, emit }, {
select,
tree,
key
}) => {
vue.watch(() => props.modelValue, () => {
if (props.showCheckbox) {
vue.nextTick(() => {
const treeInstance = tree.value;
if (treeInstance && !isEqual$1(treeInstance.getCheckedKeys(), toValidArray(props.modelValue))) {
treeInstance.setCheckedKeys(toValidArray(props.modelValue));
}
});
}
}, {
immediate: true,
deep: true
});
const propsMap = vue.computed(() => ({
value: key.value,
...props.props
}));
const getNodeValByProp = (prop, data) => {
var _a;
const propVal = propsMap.value[prop];
if (isFunction(propVal)) {
return propVal(data, (_a = tree.value) == null ? void 0 : _a.getNode(getNodeValByProp("value", data)));
} else {
return data[propVal];
}
};
const defaultExpandedParentKeys = toValidArray(props.modelValue).map((value) => {
return treeFind(props.data || [], (data) => getNodeValByProp("value", data) === value, (data) => getNodeValByProp("children", data), (data, index, array, parent) => parent && getNodeValByProp("value", parent));
}).filter((item) => isValidValue(item));
return {
...pick(vue.toRefs(props), Object.keys(_Tree.props)),
...attrs,
nodeKey: key,
expandOnClickNode: vue.computed(() => {
return !props.checkStrictly && props.expandOnClickNode;
}),
defaultExpandedKeys: vue.computed(() => {
return props.defaultExpandedKeys ? props.defaultExpandedKeys.concat(defaultExpandedParentKeys) : defaultExpandedParentKeys;
}),
renderContent: (h, { node, data, store }) => {
return h(TreeSelectOption, {
value: getNodeValByProp("value", data),
label: getNodeValByProp("label", data),
disabled: getNodeValByProp("disabled", data)
}, props.renderContent ? () => props.renderContent(h, { node, data, store }) : slots.default ? () => slots.default({ node, data, store }) : void 0);
},
filterNodeMethod: (value, data, node) => {
var _a;
if (props.filterNodeMethod)
return props.filterNodeMethod(value, data, node);
if (!value)
return true;
return (_a = getNodeValByProp("label", data)) == null ? void 0 : _a.includes(value);
},
onNodeClick: (data, node, e) => {
var _a, _b, _c;
(_a = attrs.onNodeClick) == null ? void 0 : _a.call(attrs, data, node, e);
if (props.showCheckbox && props.checkOnClickNode)
return;
if (!props.showCheckbox && (props.checkStrictly || node.isLeaf)) {
if (!getNodeValByProp("disabled", data)) {
const option = (_b = select.value) == null ? void 0 : _b.options.get(getNodeValByProp("value", data));
(_c = select.value) == null ? void 0 : _c.handleOptionSelect(option, true);
}
} else if (props.expandOnClickNode) {
e.proxy.handleExpandIconClick();
}
},
onCheck: (data, params) => {
var _a;
(_a = attrs.onCheck) == null ? void 0 : _a.call(attrs, data, params);
const dataValue = getNodeValByProp("value", data);
if (props.checkStrictly) {
emit(UPDATE_MODEL_EVENT, props.multiple ? params.checkedKeys : params.checkedKeys.includes(dataValue) ? dataValue : void 0);
} else {
if (props.multiple) {
emit(UPDATE_MODEL_EVENT, tree.value.getCheckedKeys(true));
} else {
const firstLeaf = treeFind([data], (data2) => !isValidArray(getNodeValByProp("children", data2)) && !getNodeValByProp("disabled", data2), (data2) => getNodeValByProp("children", data2));
const firstLeafKey = firstLeaf ? getNodeValByProp("value", firstLeaf) : void 0;
const hasCheckedChild = isValidValue(props.modelValue) && !!treeFind([data], (data2) => getNodeValByProp("value", data2) === props.modelValue, (data2) => getNodeValByProp("children", data2));
emit(UPDATE_MODEL_EVENT, firstLeafKey === props.modelValue || hasCheckedChild ? void 0 : firstLeafKey);
}
}
}
};
};
const _sfc_main$9 = vue.defineComponent({
name: "ElTreeSelect",
inheritAttrs: false,
props: {
...ElSelect.props,
..._Tree.props
},
setup(props, context) {
const { slots, expose } = context;
const select = vue.ref();
const tree = vue.ref();
const key = vue.computed(() => props.nodeKey || props.valueKey || "value");
const selectProps = useSelect(props, context, { select, tree, key });
const treeProps = useTree$1(props, context, { select, tree, key });
const methods = vue.reactive({});
expose(methods);
vue.onMounted(() => {
Object.assign(methods, {
...pick(tree.value, [
"filter",
"updateKeyChildren",
"getCheckedNodes",
"setCheckedNodes",
"getCheckedKeys",
"setCheckedKeys",
"setChecked",
"getHalfCheckedNodes",
"getHalfCheckedKeys",
"getCurrentKey",
"getCurrentNode",
"setCurrentKey",
"setCurrentNode",
"getNode",
"remove",
"append",
"insertBefore",
"insertAfter"
]),
...pick(select.value, ["focus", "blur"])
});
});
return () => vue.h(ElSelect, vue.reactive({
...selectProps,
ref: (ref2) => select.value = ref2
}), {
...slots,
default: () => vue.h(_Tree, vue.reactive({
...treeProps,
ref: (ref2) => tree.value = ref2
}))
});
}
});
var TreeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__file", "tree-select.vue"]]);
TreeSelect.install = (app) => {
app.component(TreeSelect.name, TreeSelect);
};
const _TreeSelect = TreeSelect;
const ElTreeSelect = _TreeSelect;
const ROOT_TREE_INJECTION_KEY = Symbol();
const EMPTY_NODE = {
key: -1,
level: -1,
data: {}
};
var TreeOptionsEnum = /* @__PURE__ */ ((TreeOptionsEnum2) => {
TreeOptionsEnum2["KEY"] = "id";
TreeOptionsEnum2["LABEL"] = "label";
TreeOptionsEnum2["CHILDREN"] = "children";
TreeOptionsEnum2["DISABLED"] = "disabled";
return TreeOptionsEnum2;
})(TreeOptionsEnum || {});
var SetOperationEnum = /* @__PURE__ */ ((SetOperationEnum2) => {
SetOperationEnum2["ADD"] = "add";
SetOperationEnum2["DELETE"] = "delete";
return SetOperationEnum2;
})(SetOperationEnum || {});
const treeProps = buildProps({
data: {
type: definePropType(Array),
default: () => mutable([])
},
emptyText: {
type: String
},
height: {
type: Number,
default: 200
},
props: {
type: definePropType(Object),
default: () => mutable({
children: "children" /* CHILDREN */,
label: "label" /* LABEL */,
disabled: "disabled" /* DISABLED */,
value: "id" /* KEY */
})
},
highlightCurrent: {
type: Boolean,
default: false
},
showCheckbox: {
type: Boolean,
default: false
},
defaultCheckedKeys: {
type: definePropType(Array),
default: () => mutable([])
},
checkStrictly: {
type: Boolean,
default: false
},
defaultExpandedKeys: {
type: definePropType(Array),
default: () => mutable([])
},
indent: {
type: Number,
default: 16
},
icon: {
type: iconPropType
},
expandOnClickNode: {
type: Boolean,
default: true
},
checkOnClickNode: {
type: Boolean,
default: false
},
currentNodeKey: {
type: definePropType([String, Number])
},
accordion: {
type: Boolean,
default: false
},
filterMethod: {
type: definePropType(Function)
},
perfMode: {
type: Boolean,
default: true
}
});
const treeNodeProps = buildProps({
node: {
type: definePropType(Object),
default: () => mutable(EMPTY_NODE)
},
expanded: {
type: Boolean,
default: false
},
checked: {
type: Boolean,
default: false
},
indeterminate: {
type: Boolean,
default: false
},
showCheckbox: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
current: {
type: Boolean,
default: false
},
hiddenExpandIcon: {
type: Boolean,
default: false
}
});
const treeNodeContentProps = buildProps({
node: {
type: definePropType(Object),
required: true
}
});
const NODE_CLICK = "node-click";
const NODE_EXPAND = "node-expand";
const NODE_COLLAPSE = "node-collapse";
const CURRENT_CHANGE = "current-change";
const NODE_CHECK = "check";
const NODE_CHECK_CHANGE = "check-change";
const NODE_CONTEXTMENU = "node-contextmenu";
const treeEmits = {
[NODE_CLICK]: (data, node, e) => data && node && e,
[NODE_EXPAND]: (data, node) => data && node,
[NODE_COLLAPSE]: (data, node) => data && node,
[CURRENT_CHANGE]: (data, node) => data && node,
[NODE_CHECK]: (data, checkedInfo) => data && checkedInfo,
[NODE_CHECK_CHANGE]: (data, checked) => data && typeof checked === "boolean",
[NODE_CONTEXTMENU]: (event, data, node) => event && data && node
};
const treeNodeEmits = {
click: (node, e) => !!(node && e),
toggle: (node) => !!node,
check: (node, checked) => node && typeof checked === "boolean"
};
function useCheck(props, tree) {
const checkedKeys = vue.ref(/* @__PURE__ */ new Set());
const indeterminateKeys = vue.ref(/* @__PURE__ */ new Set());
const { emit } = vue.getCurrentInstance();
vue.watch([() => tree.value, () => props.defaultCheckedKeys], () => {
return vue.nextTick(() => {
_setCheckedKeys(props.defaultCheckedKeys);
});
}, {
immediate: true
});
const updateCheckedKeys = () => {
if (!tree.value || !props.showCheckbox || props.checkStrictly) {
return;
}
const { levelTreeNodeMap, maxLevel } = tree.value;
const checkedKeySet = checkedKeys.value;
const indeterminateKeySet = /* @__PURE__ */ new Set();
for (let level = maxLevel - 1; level >= 1; --level) {
const nodes = levelTreeNodeMap.get(level);
if (!nodes)
continue;
nodes.forEach((node) => {
const children = node.children;
if (children) {
let allChecked = true;
let hasChecked = false;
for (const childNode of children) {
const key = childNode.key;
if (checkedKeySet.has(key)) {
hasChecked = true;
} else if (indeterminateKeySet.has(key)) {
allChecked = false;
hasChecked = true;
break;
} else {
allChecked = false;
}
}
if (allChecked) {
checkedKeySet.add(node.key);
} else if (hasChecked) {
indeterminateKeySet.add(node.key);
checkedKeySet.delete(node.key);
} else {
checkedKeySet.delete(node.key);
indeterminateKeySet.delete(node.key);
}
}
});
}
indeterminateKeys.value = indeterminateKeySet;
};
const isChecked = (node) => checkedKeys.value.has(node.key);
const isIndeterminate = (node) => indeterminateKeys.value.has(node.key);
const toggleCheckbox = (node, isChecked2, nodeClick = true) => {
const checkedKeySet = checkedKeys.value;
const toggle = (node2, checked) => {
checkedKeySet[checked ? SetOperationEnum.ADD : SetOperationEnum.DELETE](node2.key);
const children = node2.children;
if (!props.checkStrictly && children) {
children.forEach((childNode) => {
if (!childNode.disabled) {
toggle(childNode, checked);
}
});
}
};
toggle(node, isChecked2);
updateCheckedKeys();
if (nodeClick) {
afterNodeCheck(node, isChecked2);
}
};
const afterNodeCheck = (node, checked) => {
const { checkedNodes, checkedKeys: checkedKeys2 } = getChecked();
const { halfCheckedNodes, halfCheckedKeys } = getHalfChecked();
emit(NODE_CHECK, node.data, {
checkedKeys: checkedKeys2,
checkedNodes,
halfCheckedKeys,
halfCheckedNodes
});
emit(NODE_CHECK_CHANGE, node.data, checked);
};
function getCheckedKeys(leafOnly = false) {
return getChecked(leafOnly).checkedKeys;
}
function getCheckedNodes(leafOnly = false) {
return getChecked(leafOnly).checkedNodes;
}
function getHalfCheckedKeys() {
return getHalfChecked().halfCheckedKeys;
}
function getHalfCheckedNodes() {
return getHalfChecked().halfCheckedNodes;
}
function getChecked(leafOnly = false) {
const checkedNodes = [];
const keys = [];
if ((tree == null ? void 0 : tree.value) && props.showCheckbox) {
const { treeNodeMap } = tree.value;
checkedKeys.value.forEach((key) => {
const node = treeNodeMap.get(key);
if (node && (!leafOnly || leafOnly && node.isLeaf)) {
keys.push(key);
checkedNodes.push(node.data);
}
});
}
return {
checkedKeys: keys,
checkedNodes
};
}
function getHalfChecked() {
const halfCheckedNodes = [];
const halfCheckedKeys = [];
if ((tree == null ? void 0 : tree.value) && props.showCheckbox) {
const { treeNodeMap } = tree.value;
indeterminateKeys.value.forEach((key) => {
const node = treeNodeMap.get(key);
if (node) {
halfCheckedKeys.push(key);
halfCheckedNodes.push(node.data);
}
});
}
return {
halfCheckedNodes,
halfCheckedKeys
};
}
function setCheckedKeys(keys) {
checkedKeys.value.clear();
indeterminateKeys.value.clear();
_setCheckedKeys(keys);
}
function setChecked(key, isChecked2) {
if ((tree == null ? void 0 : tree.value) && props.showCheckbox) {
const node = tree.value.treeNodeMap.get(key);
if (node) {
toggleCheckbox(node, isChecked2, false);
}
}
}
function _setCheckedKeys(keys) {
if (tree == null ? void 0 : tree.value) {
const { treeNodeMap } = tree.value;
if (props.showCheckbox && treeNodeMap && keys) {
for (const key of keys) {
const node = treeNodeMap.get(key);
if (node && !isChecked(node)) {
toggleCheckbox(node, true, false);
}
}
}
}
}
return {
updateCheckedKeys,
toggleCheckbox,
isChecked,
isIndeterminate,
getCheckedKeys,
getCheckedNodes,
getHalfCheckedKeys,
getHalfCheckedNodes,
setChecked,
setCheckedKeys
};
}
function useFilter(props, tree) {
const hiddenNodeKeySet = vue.ref(/* @__PURE__ */ new Set([]));
const hiddenExpandIconKeySet = vue.ref(/* @__PURE__ */ new Set([]));
const filterable = vue.computed(() => {
return isFunction(props.filterMethod);
});
function doFilter(query) {
var _a;
if (!filterable.value) {
return;
}
const expandKeySet = /* @__PURE__ */ new Set();
const hiddenExpandIconKeys = hiddenExpandIconKeySet.value;
const hiddenKeys = hiddenNodeKeySet.value;
const family = [];
const nodes = ((_a = tree.value) == null ? void 0 : _a.treeNodes) || [];
const filter = props.filterMethod;
hiddenKeys.clear();
function traverse(nodes2) {
nodes2.forEach((node) => {
family.push(node);
if (filter == null ? void 0 : filter(query, node.data)) {
family.forEach((member) => {
expandKeySet.add(member.key);
});
} else if (node.isLeaf) {
hiddenKeys.add(node.key);
}
const children = node.children;
if (children) {
traverse(children);
}
if (!node.isLeaf) {
if (!expandKeySet.has(node.key)) {
hiddenKeys.add(node.key);
} else if (children) {
let allHidden = true;
for (const childNode of children) {
if (!hiddenKeys.has(childNode.key)) {
allHidden = false;
break;
}
}
if (allHidden) {
hiddenExpandIconKeys.add(node.key);
} else {
hiddenExpandIconKeys.delete(node.key);
}
}
}
family.pop();
});
}
traverse(nodes);
return expandKeySet;
}
function isForceHiddenExpandIcon(node) {
return hiddenExpandIconKeySet.value.has(node.key);
}
return {
hiddenExpandIconKeySet,
hiddenNodeKeySet,
doFilter,
isForceHiddenExpandIcon
};
}
function useTree(props, emit) {
const expandedKeySet = vue.ref(new Set(props.defaultExpandedKeys));
const currentKey = vue.ref();
const tree = vue.shallowRef();
vue.watch(() => props.currentNodeKey, (key) => {
currentKey.value = key;
}, {
immediate: true
});
vue.watch(() => props.data, (data) => {
setData(data);
}, {
immediate: true
});
const {
isIndeterminate,
isChecked,
toggleCheckbox,
getCheckedKeys,
getCheckedNodes,
getHalfCheckedKeys,
getHalfCheckedNodes,
setChecked,
setCheckedKeys
} = useCheck(props, tree);
const { doFilter, hiddenNodeKeySet, isForceHiddenExpandIcon } = useFilter(props, tree);
const valueKey = vue.computed(() => {
var _a;
return ((_a = props.props) == null ? void 0 : _a.value) || TreeOptionsEnum.KEY;
});
const childrenKey = vue.computed(() => {
var _a;
return ((_a = props.props) == null ? void 0 : _a.children) || TreeOptionsEnum.CHILDREN;
});
const disabledKey = vue.computed(() => {
var _a;
return ((_a = props.props) == null ? void 0 : _a.disabled) || TreeOptionsEnum.DISABLED;
});
const labelKey = vue.computed(() => {
var _a;
return ((_a = props.props) == null ? void 0 : _a.label) || TreeOptionsEnum.LABEL;
});
const flattenTree = vue.computed(() => {
const expandedKeys = expandedKeySet.value;
const hiddenKeys = hiddenNodeKeySet.value;
const flattenNodes = [];
const nodes = tree.value && tree.value.treeNodes || [];
function traverse() {
const stack = [];
for (let i = nodes.length - 1; i >= 0; --i) {
stack.push(nodes[i]);
}
while (stack.length) {
const node = stack.pop();
if (!node)
continue;
if (!hiddenKeys.has(node.key)) {
flattenNodes.push(node);
}
if (expandedKeys.has(node.key)) {
const children = node.children;
if (children) {
const length = children.length;
for (let i = length - 1; i >= 0; --i) {
stack.push(children[i]);
}
}
}
}
}
traverse();
return flattenNodes;
});
const isNotEmpty = vue.computed(() => {
return flattenTree.value.length > 0;
});
function createTree(data) {
const treeNodeMap = /* @__PURE__ */ new Map();
const levelTreeNodeMap = /* @__PURE__ */ new Map();
let maxLevel = 1;
function traverse(nodes, level = 1, parent = void 0) {
var _a;
const siblings = [];
for (const rawNode of nodes) {
const value = getKey(rawNode);
const node = {
level,
key: value,
data: rawNode
};
node.label = getLabel(rawNode);
node.parent = parent;
const children = getChildren(rawNode);
node.disabled = getDisabled(rawNode);
node.isLeaf = !children || children.length === 0;
if (children && children.length) {
node.children = traverse(children, level + 1, node);
}
siblings.push(node);
treeNodeMap.set(value, node);
if (!levelTreeNodeMap.has(level)) {
levelTreeNodeMap.set(level, []);
}
(_a = levelTreeNodeMap.get(level)) == null ? void 0 : _a.push(node);
}
if (level > maxLevel) {
maxLevel = level;
}
return siblings;
}
const treeNodes = traverse(data);
return {
treeNodeMap,
levelTreeNodeMap,
maxLevel,
treeNodes
};
}
function filter(query) {
const keys = doFilter(query);
if (keys) {
expandedKeySet.value = keys;
}
}
function getChildren(node) {
return node[childrenKey.value];
}
function getKey(node) {
if (!node) {
return "";
}
return node[valueKey.value];
}
function getDisabled(node) {
return node[disabledKey.value];
}
function getLabel(node) {
return node[labelKey.value];
}
function toggleExpand(node) {
const expandedKeys = expandedKeySet.value;
if (expandedKeys.has(node.key)) {
collapseNode(node);
} else {
expandNode(node);
}
}
function setExpandedKeys(keys) {
expandedKeySet.value = new Set(keys);
}
function handleNodeClick(node, e) {
emit(NODE_CLICK, node.data, node, e);
handleCurrentChange(node);
if (props.expandOnClickNode) {
toggleExpand(node);
}
if (props.showCheckbox && props.checkOnClickNode && !node.disabled) {
toggleCheckbox(node, !isChecked(node), true);
}
}
function handleCurrentChange(node) {
if (!isCurrent(node)) {
currentKey.value = node.key;
emit(CURRENT_CHANGE, node.data, node);
}
}
function handleNodeCheck(node, checked) {
toggleCheckbox(node, checked);
}
function expandNode(node) {
const keySet = expandedKeySet.value;
if (tree.value && props.accordion) {
const { treeNodeMap } = tree.value;
keySet.forEach((key) => {
const treeNode = treeNodeMap.get(key);
if (node && node.level === (treeNode == null ? void 0 : treeNode.level)) {
keySet.delete(key);
}
});
}
keySet.add(node.key);
emit(NODE_EXPAND, node.data, node);
}
function collapseNode(node) {
expandedKeySet.value.delete(node.key);
emit(NODE_COLLAPSE, node.data, node);
}
function isExpanded(node) {
return expandedKeySet.value.has(node.key);
}
function isDisabled(node) {
return !!node.disabled;
}
function isCurrent(node) {
const current = currentKey.value;
return !!current && current === node.key;
}
function getCurrentNode() {
var _a, _b;
if (!currentKey.value)
return void 0;
return (_b = (_a = tree.value) == null ? void 0 : _a.treeNodeMap.get(currentKey.value)) == null ? void 0 : _b.data;
}
function getCurrentKey() {
return currentKey.value;
}
function setCurrentKey(key) {
currentKey.value = key;
}
function setData(data) {
vue.nextTick(() => tree.value = createTree(data));
}
function getNode(data) {
var _a;
const key = isObject$1(data) ? getKey(data) : data;
return (_a = tree.value) == null ? void 0 : _a.treeNodeMap.get(key);
}
return {
tree,
flattenTree,
isNotEmpty,
getKey,
getChildren,
toggleExpand,
toggleCheckbox,
isExpanded,
isChecked,
isIndeterminate,
isDisabled,
isCurrent,
isForceHiddenExpandIcon,
handleNodeClick,
handleNodeCheck,
getCurrentNode,
getCurrentKey,
setCurrentKey,
getCheckedKeys,
getCheckedNodes,
getHalfCheckedKeys,
getHalfCheckedNodes,
setChecked,
setCheckedKeys,
filter,
setData,
getNode,
expandNode,
collapseNode,
setExpandedKeys
};
}
var ElNodeContent = vue.defineComponent({
name: "ElTreeNodeContent",
props: treeNodeContentProps,
setup(props) {
const tree = vue.inject(ROOT_TREE_INJECTION_KEY);
const ns = useNamespace("tree");
return () => {
const node = props.node;
const { data } = node;
return (tree == null ? void 0 : tree.ctx.slots.default) ? tree.ctx.slots.default({ node, data }) : vue.h("span", { class: ns.be("node", "label") }, [node == null ? void 0 : node.label]);
};
}
});
const _hoisted_1$6 = ["aria-expanded", "aria-disabled", "aria-checked", "data-key", "onClick"];
const __default__$7 = vue.defineComponent({
name: "ElTreeNode"
});
const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
...__default__$7,
props: treeNodeProps,
emits: treeNodeEmits,
setup(__props, { emit }) {
const props = __props;
const tree = vue.inject(ROOT_TREE_INJECTION_KEY);
const ns = useNamespace("tree");
const indent = vue.computed(() => {
var _a;
return (_a = tree == null ? void 0 : tree.props.indent) != null ? _a : 16;
});
const icon = vue.computed(() => {
var _a;
return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : caret_right_default;
});
const handleClick = (e) => {
emit("click", props.node, e);
};
const handleExpandIconClick = () => {
emit("toggle", props.node);
};
const handleCheckChange = (value) => {
emit("check", props.node, value);
};
const handleContextMenu = (event) => {
var _a, _b, _c, _d;
if ((_c = (_b = (_a = tree == null ? void 0 : tree.instance) == null ? void 0 : _a.vnode) == null ? void 0 : _b.props) == null ? void 0 : _c["onNodeContextmenu"]) {
event.stopPropagation();
event.preventDefault();
}
tree == null ? void 0 : tree.ctx.emit(NODE_CONTEXTMENU, event, (_d = props.node) == null ? void 0 : _d.data, props.node);
};
return (_ctx, _cache) => {
var _a, _b, _c;
return vue.openBlock(), vue.createElementBlock("div", {
ref: "node$",
class: vue.normalizeClass([
vue.unref(ns).b("node"),
vue.unref(ns).is("expanded", _ctx.expanded),
vue.unref(ns).is("current", _ctx.current),
vue.unref(ns).is("focusable", !_ctx.disabled),
vue.unref(ns).is("checked", !_ctx.disabled && _ctx.checked)
]),
role: "treeitem",
tabindex: "-1",
"aria-expanded": _ctx.expanded,
"aria-disabled": _ctx.disabled,
"aria-checked": _ctx.checked,
"data-key": (_a = _ctx.node) == null ? void 0 : _a.key,
onClick: vue.withModifiers(handleClick, ["stop"]),
onContextmenu: handleContextMenu
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).be("node", "content")),
style: vue.normalizeStyle({ paddingLeft: `${(_ctx.node.level - 1) * vue.unref(indent)}px` })
}, [
vue.unref(icon) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass([
vue.unref(ns).is("leaf", !!((_b = _ctx.node) == null ? void 0 : _b.isLeaf)),
vue.unref(ns).is("hidden", _ctx.hiddenExpandIcon),
{
expanded: !((_c = _ctx.node) == null ? void 0 : _c.isLeaf) && _ctx.expanded
},
vue.unref(ns).be("node", "expand-icon")
]),
onClick: vue.withModifiers(handleExpandIconClick, ["stop"])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(icon))))
]),
_: 1
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
_ctx.showCheckbox ? (vue.openBlock(), vue.createBlock(vue.unref(ElCheckbox), {
key: 1,
"model-value": _ctx.checked,
indeterminate: _ctx.indeterminate,
disabled: _ctx.disabled,
onChange: handleCheckChange,
onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["stop"]))
}, null, 8, ["model-value", "indeterminate", "disabled"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(ElNodeContent), { node: _ctx.node }, null, 8, ["node"])
], 6)
], 42, _hoisted_1$6);
};
}
});
var ElTreeNode = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__file", "tree-node.vue"]]);
const itemSize = 26;
const __default__$6 = vue.defineComponent({
name: "ElTreeV2"
});
const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
...__default__$6,
props: treeProps,
emits: treeEmits,
setup(__props, { expose, emit }) {
const props = __props;
const slots = vue.useSlots();
vue.provide(ROOT_TREE_INJECTION_KEY, {
ctx: {
emit,
slots
},
props,
instance: vue.getCurrentInstance()
});
vue.provide(formItemContextKey, void 0);
const { t } = useLocale();
const ns = useNamespace("tree");
const {
flattenTree,
isNotEmpty,
toggleExpand,
isExpanded,
isIndeterminate,
isChecked,
isDisabled,
isCurrent,
isForceHiddenExpandIcon,
handleNodeClick,
handleNodeCheck,
toggleCheckbox,
getCurrentNode,
getCurrentKey,
setCurrentKey,
getCheckedKeys,
getCheckedNodes,
getHalfCheckedKeys,
getHalfCheckedNodes,
setChecked,
setCheckedKeys,
filter,
setData,
getNode,
expandNode,
collapseNode,
setExpandedKeys
} = useTree(props, emit);
expose({
toggleCheckbox,
getCurrentNode,
getCurrentKey,
setCurrentKey,
getCheckedKeys,
getCheckedNodes,
getHalfCheckedKeys,
getHalfCheckedNodes,
setChecked,
setCheckedKeys,
filter,
setData,
getNode,
expandNode,
collapseNode,
setExpandedKeys
});
return (_ctx, _cache) => {
var _a;
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([vue.unref(ns).b(), { [vue.unref(ns).m("highlight-current")]: _ctx.highlightCurrent }]),
role: "tree"
}, [
vue.unref(isNotEmpty) ? (vue.openBlock(), vue.createBlock(vue.unref(FixedSizeList$1), {
key: 0,
"class-name": vue.unref(ns).b("virtual-list"),
data: vue.unref(flattenTree),
total: vue.unref(flattenTree).length,
height: _ctx.height,
"item-size": itemSize,
"perf-mode": _ctx.perfMode
}, {
default: vue.withCtx(({ data, index, style }) => [
(vue.openBlock(), vue.createBlock(ElTreeNode, {
key: data[index].key,
style: vue.normalizeStyle(style),
node: data[index],
expanded: vue.unref(isExpanded)(data[index]),
"show-checkbox": _ctx.showCheckbox,
checked: vue.unref(isChecked)(data[index]),
indeterminate: vue.unref(isIndeterminate)(data[index]),
disabled: vue.unref(isDisabled)(data[index]),
current: vue.unref(isCurrent)(data[index]),
"hidden-expand-icon": vue.unref(isForceHiddenExpandIcon)(data[index]),
onClick: vue.unref(handleNodeClick),
onToggle: vue.unref(toggleExpand),
onCheck: vue.unref(handleNodeCheck)
}, null, 8, ["style", "node", "expanded", "show-checkbox", "checked", "indeterminate", "disabled", "current", "hidden-expand-icon", "onClick", "onToggle", "onCheck"]))
]),
_: 1
}, 8, ["class-name", "data", "total", "height", "perf-mode"])) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(vue.unref(ns).e("empty-block"))
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(ns).e("empty-text"))
}, vue.toDisplayString((_a = _ctx.emptyText) != null ? _a : vue.unref(t)("el.tree.emptyText")), 3)
], 2))
], 2);
};
}
});
var TreeV2 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__file", "tree.vue"]]);
const ElTreeV2 = withInstall(TreeV2);
const SCOPE$2 = "ElUpload";
class UploadAjaxError extends Error {
constructor(message, status, method, url) {
super(message);
this.name = "UploadAjaxError";
this.status = status;
this.method = method;
this.url = url;
}
}
function getError(action, option, xhr) {
let msg;
if (xhr.response) {
msg = `${xhr.response.error || xhr.response}`;
} else if (xhr.responseText) {
msg = `${xhr.responseText}`;
} else {
msg = `fail to ${option.method} ${action} ${xhr.status}`;
}
return new UploadAjaxError(msg, xhr.status, option.method, action);
}
function getBody(xhr) {
const text = xhr.responseText || xhr.response;
if (!text) {
return text;
}
try {
return JSON.parse(text);
} catch (e) {
return text;
}
}
const ajaxUpload = (option) => {
if (typeof XMLHttpRequest === "undefined")
throwError(SCOPE$2, "XMLHttpRequest is undefined");
const xhr = new XMLHttpRequest();
const action = option.action;
if (xhr.upload) {
xhr.upload.addEventListener("progress", (evt) => {
const progressEvt = evt;
progressEvt.percent = evt.total > 0 ? evt.loaded / evt.total * 100 : 0;
option.onProgress(progressEvt);
});
}
const formData = new FormData();
if (option.data) {
for (const [key, value] of Object.entries(option.data)) {
if (Array.isArray(value))
formData.append(key, ...value);
else
formData.append(key, value);
}
}
formData.append(option.filename, option.file, option.file.name);
xhr.addEventListener("error", () => {
option.onError(getError(action, option, xhr));
});
xhr.addEventListener("load", () => {
if (xhr.status < 200 || xhr.status >= 300) {
return option.onError(getError(action, option, xhr));
}
option.onSuccess(getBody(xhr));
});
xhr.open(option.method, action, true);
if (option.withCredentials && "withCredentials" in xhr) {
xhr.withCredentials = true;
}
const headers = option.headers || {};
if (headers instanceof Headers) {
headers.forEach((value, key) => xhr.setRequestHeader(key, value));
} else {
for (const [key, value] of Object.entries(headers)) {
if (isNil(value))
continue;
xhr.setRequestHeader(key, String(value));
}
}
xhr.send(formData);
return xhr;
};
const uploadListTypes = ["text", "picture", "picture-card"];
let fileId = 1;
const genFileId = () => Date.now() + fileId++;
const uploadBaseProps = buildProps({
action: {
type: String,
default: "#"
},
headers: {
type: definePropType(Object)
},
method: {
type: String,
default: "post"
},
data: {
type: Object,
default: () => mutable({})
},
multiple: {
type: Boolean,
default: false
},
name: {
type: String,
default: "file"
},
drag: {
type: Boolean,
default: false
},
withCredentials: Boolean,
showFileList: {
type: Boolean,
default: true
},
accept: {
type: String,
default: ""
},
type: {
type: String,
default: "select"
},
fileList: {
type: definePropType(Array),
default: () => mutable([])
},
autoUpload: {
type: Boolean,
default: true
},
listType: {
type: String,
values: uploadListTypes,
default: "text"
},
httpRequest: {
type: definePropType(Function),
default: ajaxUpload
},
disabled: Boolean,
limit: Number
});
const uploadProps = buildProps({
...uploadBaseProps,
beforeUpload: {
type: definePropType(Function),
default: NOOP
},
beforeRemove: {
type: definePropType(Function)
},
onRemove: {
type: definePropType(Function),
default: NOOP
},
onChange: {
type: definePropType(Function),
default: NOOP
},
onPreview: {
type: definePropType(Function),
default: NOOP
},
onSuccess: {
type: definePropType(Function),
default: NOOP
},
onProgress: {
type: definePropType(Function),
default: NOOP
},
onError: {
type: definePropType(Function),
default: NOOP
},
onExceed: {
type: definePropType(Function),
default: NOOP
}
});
const uploadListProps = buildProps({
files: {
type: definePropType(Array),
default: () => mutable([])
},
disabled: {
type: Boolean,
default: false
},
handlePreview: {
type: definePropType(Function),
default: NOOP
},
listType: {
type: String,
values: uploadListTypes,
default: "text"
}
});
const uploadListEmits = {
remove: (file) => !!file
};
const _hoisted_1$5 = ["onKeydown"];
const _hoisted_2$4 = ["src"];
const _hoisted_3$2 = ["onClick"];
const _hoisted_4$1 = ["onClick"];
const _hoisted_5 = ["onClick"];
const __default__$5 = vue.defineComponent({
name: "ElUploadList"
});
const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
...__default__$5,
props: uploadListProps,
emits: uploadListEmits,
setup(__props, { emit }) {
const { t } = useLocale();
const nsUpload = useNamespace("upload");
const nsIcon = useNamespace("icon");
const nsList = useNamespace("list");
const focusing = vue.ref(false);
const handleRemove = (file) => {
emit("remove", file);
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.TransitionGroup, {
tag: "ul",
class: vue.normalizeClass([
vue.unref(nsUpload).b("list"),
vue.unref(nsUpload).bm("list", _ctx.listType),
vue.unref(nsUpload).is("disabled", _ctx.disabled)
]),
name: vue.unref(nsList).b()
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.files, (file) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: file.uid || file.name,
class: vue.normalizeClass([
vue.unref(nsUpload).be("list", "item"),
vue.unref(nsUpload).is(file.status),
{ focusing: focusing.value }
]),
tabindex: "0",
onKeydown: vue.withKeys(($event) => !_ctx.disabled && handleRemove(file), ["delete"]),
onFocus: _cache[0] || (_cache[0] = ($event) => focusing.value = true),
onBlur: _cache[1] || (_cache[1] = ($event) => focusing.value = false),
onClick: _cache[2] || (_cache[2] = ($event) => focusing.value = false)
}, [
vue.renderSlot(_ctx.$slots, "default", { file }, () => [
_ctx.listType === "picture" || file.status !== "uploading" && _ctx.listType === "picture-card" ? (vue.openBlock(), vue.createElementBlock("img", {
key: 0,
class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-thumbnail")),
src: file.url,
alt: ""
}, null, 10, _hoisted_2$4)) : vue.createCommentVNode("v-if", true),
file.status === "uploading" || _ctx.listType !== "picture-card" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-info"))
}, [
vue.createElementVNode("a", {
class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-name")),
onClick: vue.withModifiers(($event) => _ctx.handlePreview(file), ["prevent"])
}, [
vue.createVNode(vue.unref(ElIcon), {
class: vue.normalizeClass(vue.unref(nsIcon).m("document"))
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(document_default))
]),
_: 1
}, 8, ["class"]),
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-file-name"))
}, vue.toDisplayString(file.name), 3)
], 10, _hoisted_3$2),
file.status === "uploading" ? (vue.openBlock(), vue.createBlock(vue.unref(ElProgress), {
key: 0,
type: _ctx.listType === "picture-card" ? "circle" : "line",
"stroke-width": _ctx.listType === "picture-card" ? 6 : 2,
percentage: Number(file.percentage),
style: vue.normalizeStyle(_ctx.listType === "picture-card" ? "" : "margin-top: 0.5rem")
}, null, 8, ["type", "stroke-width", "percentage", "style"])) : vue.createCommentVNode("v-if", true)
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("label", {
class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-status-label"))
}, [
_ctx.listType === "text" ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass([vue.unref(nsIcon).m("upload-success"), vue.unref(nsIcon).m("circle-check")])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(circle_check_default))
]),
_: 1
}, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 1,
class: vue.normalizeClass([vue.unref(nsIcon).m("upload-success"), vue.unref(nsIcon).m("check")])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(check_default))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true)
], 2),
!_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 2,
class: vue.normalizeClass(vue.unref(nsIcon).m("close")),
onClick: ($event) => handleRemove(file)
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(close_default))
]),
_: 2
}, 1032, ["class", "onClick"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"),
vue.createCommentVNode(" This is a bug which needs to be fixed "),
vue.createCommentVNode(" TODO: Fix the incorrect navigation interaction "),
!_ctx.disabled ? (vue.openBlock(), vue.createElementBlock("i", {
key: 3,
class: vue.normalizeClass(vue.unref(nsIcon).m("close-tip"))
}, vue.toDisplayString(vue.unref(t)("el.upload.deleteTip")), 3)) : vue.createCommentVNode("v-if", true),
_ctx.listType === "picture-card" ? (vue.openBlock(), vue.createElementBlock("span", {
key: 4,
class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-actions"))
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-preview")),
onClick: ($event) => _ctx.handlePreview(file)
}, [
vue.createVNode(vue.unref(ElIcon), {
class: vue.normalizeClass(vue.unref(nsIcon).m("zoom-in"))
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(zoom_in_default))
]),
_: 1
}, 8, ["class"])
], 10, _hoisted_4$1),
!_ctx.disabled ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: vue.normalizeClass(vue.unref(nsUpload).be("list", "item-delete")),
onClick: ($event) => handleRemove(file)
}, [
vue.createVNode(vue.unref(ElIcon), {
class: vue.normalizeClass(vue.unref(nsIcon).m("delete"))
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(delete_default))
]),
_: 1
}, 8, ["class"])
], 10, _hoisted_5)) : vue.createCommentVNode("v-if", true)
], 2)) : vue.createCommentVNode("v-if", true)
])
], 42, _hoisted_1$5);
}), 128)),
vue.renderSlot(_ctx.$slots, "append")
]),
_: 3
}, 8, ["class", "name"]);
};
}
});
var UploadList = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__file", "upload-list.vue"]]);
const uploadDraggerProps = buildProps({
disabled: {
type: Boolean,
default: false
}
});
const uploadDraggerEmits = {
file: (file) => isArray(file)
};
const _hoisted_1$4 = ["onDrop", "onDragover"];
const COMPONENT_NAME = "ElUploadDrag";
const __default__$4 = vue.defineComponent({
name: COMPONENT_NAME
});
const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
...__default__$4,
props: uploadDraggerProps,
emits: uploadDraggerEmits,
setup(__props, { emit }) {
const props = __props;
const uploaderContext = vue.inject(uploadContextKey);
if (!uploaderContext) {
throwError(COMPONENT_NAME, "usage: ");
}
const ns = useNamespace("upload");
const dragover = vue.ref(false);
const onDrop = (e) => {
if (props.disabled)
return;
dragover.value = false;
const files = Array.from(e.dataTransfer.files);
const accept = uploaderContext.accept.value;
if (!accept) {
emit("file", files);
return;
}
const filesFiltered = files.filter((file) => {
const { type, name } = file;
const extension = name.includes(".") ? `.${name.split(".").pop()}` : "";
const baseType = type.replace(/\/.*$/, "");
return accept.split(",").map((type2) => type2.trim()).filter((type2) => type2).some((acceptedType) => {
if (acceptedType.startsWith(".")) {
return extension === acceptedType;
}
if (/\/\*$/.test(acceptedType)) {
return baseType === acceptedType.replace(/\/\*$/, "");
}
if (/^[^/]+\/[^/]+$/.test(acceptedType)) {
return type === acceptedType;
}
return false;
});
});
emit("file", filesFiltered);
};
const onDragover = () => {
if (!props.disabled)
dragover.value = true;
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([vue.unref(ns).b("dragger"), vue.unref(ns).is("dragover", dragover.value)]),
onDrop: vue.withModifiers(onDrop, ["prevent"]),
onDragover: vue.withModifiers(onDragover, ["prevent"]),
onDragleave: _cache[0] || (_cache[0] = vue.withModifiers(($event) => dragover.value = false, ["prevent"]))
}, [
vue.renderSlot(_ctx.$slots, "default")
], 42, _hoisted_1$4);
};
}
});
var UploadDragger = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "upload-dragger.vue"]]);
const uploadContentProps = buildProps({
...uploadBaseProps,
beforeUpload: {
type: definePropType(Function),
default: NOOP
},
onRemove: {
type: definePropType(Function),
default: NOOP
},
onStart: {
type: definePropType(Function),
default: NOOP
},
onSuccess: {
type: definePropType(Function),
default: NOOP
},
onProgress: {
type: definePropType(Function),
default: NOOP
},
onError: {
type: definePropType(Function),
default: NOOP
},
onExceed: {
type: definePropType(Function),
default: NOOP
}
});
const _hoisted_1$3 = ["onKeydown"];
const _hoisted_2$3 = ["name", "multiple", "accept"];
const __default__$3 = vue.defineComponent({
name: "ElUploadContent",
inheritAttrs: false
});
const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
...__default__$3,
props: uploadContentProps,
setup(__props, { expose }) {
const props = __props;
const ns = useNamespace("upload");
const requests = vue.shallowRef({});
const inputRef = vue.shallowRef();
const uploadFiles = (files) => {
if (files.length === 0)
return;
const { autoUpload, limit, fileList, multiple, onStart, onExceed } = props;
if (limit && fileList.length + files.length > limit) {
onExceed(files, fileList);
return;
}
if (!multiple) {
files = files.slice(0, 1);
}
for (const file of files) {
const rawFile = file;
rawFile.uid = genFileId();
onStart(rawFile);
if (autoUpload)
upload(rawFile);
}
};
const upload = async (rawFile) => {
inputRef.value.value = "";
if (!props.beforeUpload) {
return doUpload(rawFile);
}
let hookResult;
try {
hookResult = await props.beforeUpload(rawFile);
} catch (e) {
hookResult = false;
}
if (hookResult === false) {
props.onRemove(rawFile);
return;
}
let file = rawFile;
if (hookResult instanceof Blob) {
if (hookResult instanceof File) {
file = hookResult;
} else {
file = new File([hookResult], rawFile.name, {
type: rawFile.type
});
}
}
doUpload(Object.assign(file, {
uid: rawFile.uid
}));
};
const doUpload = (rawFile) => {
const {
headers,
data,
method,
withCredentials,
name: filename,
action,
onProgress,
onSuccess,
onError,
httpRequest
} = props;
const { uid } = rawFile;
const options = {
headers: headers || {},
withCredentials,
file: rawFile,
data,
method,
filename,
action,
onProgress: (evt) => {
onProgress(evt, rawFile);
},
onSuccess: (res) => {
onSuccess(res, rawFile);
delete requests.value[uid];
},
onError: (err) => {
onError(err, rawFile);
delete requests.value[uid];
}
};
const request = httpRequest(options);
requests.value[uid] = request;
if (request instanceof Promise) {
request.then(options.onSuccess, options.onError);
}
};
const handleChange = (e) => {
const files = e.target.files;
if (!files)
return;
uploadFiles(Array.from(files));
};
const handleClick = () => {
if (!props.disabled) {
inputRef.value.value = "";
inputRef.value.click();
}
};
const handleKeydown = () => {
handleClick();
};
const abort = (file) => {
const _reqs = entriesOf(requests.value).filter(file ? ([uid]) => String(file.uid) === uid : () => true);
_reqs.forEach(([uid, req]) => {
if (req instanceof XMLHttpRequest)
req.abort();
delete requests.value[uid];
});
};
expose({
abort,
upload
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).m(_ctx.listType), vue.unref(ns).is("drag", _ctx.drag)]),
tabindex: "0",
onClick: handleClick,
onKeydown: vue.withKeys(vue.withModifiers(handleKeydown, ["self"]), ["enter", "space"])
}, [
_ctx.drag ? (vue.openBlock(), vue.createBlock(UploadDragger, {
key: 0,
disabled: _ctx.disabled,
onFile: uploadFiles
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["disabled"])) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }),
vue.createElementVNode("input", {
ref_key: "inputRef",
ref: inputRef,
class: vue.normalizeClass(vue.unref(ns).e("input")),
name: _ctx.name,
multiple: _ctx.multiple,
accept: _ctx.accept,
type: "file",
onChange: handleChange,
onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["stop"]))
}, null, 42, _hoisted_2$3)
], 42, _hoisted_1$3);
};
}
});
var UploadContent = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "upload-content.vue"]]);
const SCOPE$1 = "ElUpload";
const revokeObjectURL = (file) => {
var _a;
if ((_a = file.url) == null ? void 0 : _a.startsWith("blob:")) {
URL.revokeObjectURL(file.url);
}
};
const useHandlers = (props, uploadRef) => {
const uploadFiles = useVModel(props, "fileList", void 0, { passive: true });
const getFile = (rawFile) => uploadFiles.value.find((file) => file.uid === rawFile.uid);
function abort(file) {
var _a;
(_a = uploadRef.value) == null ? void 0 : _a.abort(file);
}
function clearFiles(states = ["ready", "uploading", "success", "fail"]) {
uploadFiles.value = uploadFiles.value.filter((row) => !states.includes(row.status));
}
const handleError = (err, rawFile) => {
const file = getFile(rawFile);
if (!file)
return;
console.error(err);
file.status = "fail";
uploadFiles.value.splice(uploadFiles.value.indexOf(file), 1);
props.onError(err, file, uploadFiles.value);
props.onChange(file, uploadFiles.value);
};
const handleProgress = (evt, rawFile) => {
const file = getFile(rawFile);
if (!file)
return;
props.onProgress(evt, file, uploadFiles.value);
file.status = "uploading";
file.percentage = Math.round(evt.percent);
};
const handleSuccess = (response, rawFile) => {
const file = getFile(rawFile);
if (!file)
return;
file.status = "success";
file.response = response;
props.onSuccess(response, file, uploadFiles.value);
props.onChange(file, uploadFiles.value);
};
const handleStart = (file) => {
if (isNil(file.uid))
file.uid = genFileId();
const uploadFile = {
name: file.name,
percentage: 0,
status: "ready",
size: file.size,
raw: file,
uid: file.uid
};
if (props.listType === "picture-card" || props.listType === "picture") {
try {
uploadFile.url = URL.createObjectURL(file);
} catch (err) {
debugWarn(SCOPE$1, err.message);
props.onError(err, uploadFile, uploadFiles.value);
}
}
uploadFiles.value = [...uploadFiles.value, uploadFile];
props.onChange(uploadFile, uploadFiles.value);
};
const handleRemove = async (file) => {
const uploadFile = file instanceof File ? getFile(file) : file;
if (!uploadFile)
throwError(SCOPE$1, "file to be removed not found");
const doRemove = (file2) => {
abort(file2);
const fileList = uploadFiles.value;
fileList.splice(fileList.indexOf(file2), 1);
props.onRemove(file2, fileList);
revokeObjectURL(file2);
};
if (props.beforeRemove) {
const before = await props.beforeRemove(uploadFile, uploadFiles.value);
if (before !== false)
doRemove(uploadFile);
} else {
doRemove(uploadFile);
}
};
function submit() {
uploadFiles.value.filter(({ status }) => status === "ready").forEach(({ raw }) => {
var _a;
return raw && ((_a = uploadRef.value) == null ? void 0 : _a.upload(raw));
});
}
vue.watch(() => props.listType, (val) => {
if (val !== "picture-card" && val !== "picture") {
return;
}
uploadFiles.value = uploadFiles.value.map((file) => {
const { raw, url } = file;
if (!url && raw) {
try {
file.url = URL.createObjectURL(raw);
} catch (err) {
props.onError(err, file, uploadFiles.value);
}
}
return file;
});
});
vue.watch(uploadFiles, (files) => {
for (const file of files) {
file.uid || (file.uid = genFileId());
file.status || (file.status = "success");
}
}, { immediate: true, deep: true });
return {
uploadFiles,
abort,
clearFiles,
handleError,
handleProgress,
handleStart,
handleSuccess,
handleRemove,
submit
};
};
const __default__$2 = vue.defineComponent({
name: "ElUpload"
});
const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
...__default__$2,
props: uploadProps,
setup(__props, { expose }) {
const props = __props;
const slots = vue.useSlots();
const disabled = useDisabled();
const uploadRef = vue.shallowRef();
const {
abort,
submit,
clearFiles,
uploadFiles,
handleStart,
handleError,
handleRemove,
handleSuccess,
handleProgress
} = useHandlers(props, uploadRef);
const isPictureCard = vue.computed(() => props.listType === "picture-card");
const uploadContentProps = vue.computed(() => ({
...props,
fileList: uploadFiles.value,
onStart: handleStart,
onProgress: handleProgress,
onSuccess: handleSuccess,
onError: handleError,
onRemove: handleRemove
}));
vue.onBeforeUnmount(() => {
uploadFiles.value.forEach(({ url }) => {
if (url == null ? void 0 : url.startsWith("blob:"))
URL.revokeObjectURL(url);
});
});
vue.provide(uploadContextKey, {
accept: vue.toRef(props, "accept")
});
expose({
abort,
submit,
clearFiles,
handleStart,
handleRemove
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", null, [
vue.unref(isPictureCard) && _ctx.showFileList ? (vue.openBlock(), vue.createBlock(UploadList, {
key: 0,
disabled: vue.unref(disabled),
"list-type": _ctx.listType,
files: vue.unref(uploadFiles),
"handle-preview": _ctx.onPreview,
onRemove: vue.unref(handleRemove)
}, vue.createSlots({
append: vue.withCtx(() => [
vue.createVNode(UploadContent, vue.mergeProps({
ref_key: "uploadRef",
ref: uploadRef
}, vue.unref(uploadContentProps)), {
default: vue.withCtx(() => [
vue.unref(slots).trigger ? vue.renderSlot(_ctx.$slots, "trigger", { key: 0 }) : vue.createCommentVNode("v-if", true),
!vue.unref(slots).trigger && vue.unref(slots).default ? vue.renderSlot(_ctx.$slots, "default", { key: 1 }) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 16)
]),
_: 2
}, [
_ctx.$slots.file ? {
name: "default",
fn: vue.withCtx(({ file }) => [
vue.renderSlot(_ctx.$slots, "file", { file })
])
} : void 0
]), 1032, ["disabled", "list-type", "files", "handle-preview", "onRemove"])) : vue.createCommentVNode("v-if", true),
!vue.unref(isPictureCard) || vue.unref(isPictureCard) && !_ctx.showFileList ? (vue.openBlock(), vue.createBlock(UploadContent, vue.mergeProps({
key: 1,
ref_key: "uploadRef",
ref: uploadRef
}, vue.unref(uploadContentProps)), {
default: vue.withCtx(() => [
vue.unref(slots).trigger ? vue.renderSlot(_ctx.$slots, "trigger", { key: 0 }) : vue.createCommentVNode("v-if", true),
!vue.unref(slots).trigger && vue.unref(slots).default ? vue.renderSlot(_ctx.$slots, "default", { key: 1 }) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 16)) : vue.createCommentVNode("v-if", true),
_ctx.$slots.trigger ? vue.renderSlot(_ctx.$slots, "default", { key: 2 }) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "tip"),
!vue.unref(isPictureCard) && _ctx.showFileList ? (vue.openBlock(), vue.createBlock(UploadList, {
key: 3,
disabled: vue.unref(disabled),
"list-type": _ctx.listType,
files: vue.unref(uploadFiles),
"handle-preview": _ctx.onPreview,
onRemove: vue.unref(handleRemove)
}, vue.createSlots({ _: 2 }, [
_ctx.$slots.file ? {
name: "default",
fn: vue.withCtx(({ file }) => [
vue.renderSlot(_ctx.$slots, "file", { file })
])
} : void 0
]), 1032, ["disabled", "list-type", "files", "handle-preview", "onRemove"])) : vue.createCommentVNode("v-if", true)
]);
};
}
});
var Upload = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "upload.vue"]]);
const ElUpload = withInstall(Upload);
var Components = [
ElAffix,
ElAlert,
ElAutocomplete,
ElAutoResizer,
ElAvatar,
ElBacktop,
ElBadge,
ElBreadcrumb,
ElBreadcrumbItem,
ElButton,
ElButtonGroup$1,
ElCalendar,
ElCard,
ElCarousel,
ElCarouselItem,
ElCascader,
ElCascaderPanel,
ElCheckTag,
ElCheckbox,
ElCheckboxButton,
ElCheckboxGroup$1,
ElCol,
ElCollapse,
ElCollapseItem,
ElCollapseTransition,
ElColorPicker,
ElConfigProvider,
ElContainer,
ElAside,
ElFooter,
ElHeader,
ElMain,
ElDatePicker,
ElDescriptions,
ElDescriptionsItem,
ElDialog,
ElDivider,
ElDrawer,
ElDropdown,
ElDropdownItem,
ElDropdownMenu,
ElEmpty,
ElForm,
ElFormItem,
ElIcon,
ElImage,
ElImageViewer,
ElInput,
ElInputNumber,
ElLink,
ElMenu,
ElMenuItem,
ElMenuItemGroup,
ElPageHeader,
ElPagination,
ElPopconfirm,
ElPopover,
ElPopper,
ElProgress,
ElRadio,
ElRadioButton,
ElRadioGroup,
ElRate,
ElResult,
ElRow,
ElScrollbar,
ElSelect,
ElOption,
ElOptionGroup,
ElSelectV2,
ElSkeleton,
ElSkeletonItem,
ElSlider,
ElSpace,
ElSteps,
ElStep,
ElSwitch,
ElTable,
ElTableColumn,
ElTableV2,
ElTabs,
ElTabPane,
ElTag,
ElTimePicker,
ElTimeSelect,
ElTimeline,
ElTimelineItem,
ElTooltip,
ElTooltipV2,
ElTransfer,
ElTree,
ElTreeSelect,
ElTreeV2,
ElUpload
];
const SCOPE = "ElInfiniteScroll";
const CHECK_INTERVAL = 50;
const DEFAULT_DELAY = 200;
const DEFAULT_DISTANCE = 0;
const attributes = {
delay: {
type: Number,
default: DEFAULT_DELAY
},
distance: {
type: Number,
default: DEFAULT_DISTANCE
},
disabled: {
type: Boolean,
default: false
},
immediate: {
type: Boolean,
default: true
}
};
const getScrollOptions = (el, instance) => {
return Object.entries(attributes).reduce((acm, [name, option]) => {
var _a, _b;
const { type, default: defaultValue } = option;
const attrVal = el.getAttribute(`infinite-scroll-${name}`);
let value = (_b = (_a = instance[attrVal]) != null ? _a : attrVal) != null ? _b : defaultValue;
value = value === "false" ? false : value;
value = type(value);
acm[name] = Number.isNaN(value) ? defaultValue : value;
return acm;
}, {});
};
const destroyObserver = (el) => {
const { observer } = el[SCOPE];
if (observer) {
observer.disconnect();
delete el[SCOPE].observer;
}
};
const handleScroll = (el, cb) => {
const { container, containerEl, instance, observer, lastScrollTop } = el[SCOPE];
const { disabled, distance } = getScrollOptions(el, instance);
const { clientHeight, scrollHeight, scrollTop } = containerEl;
const delta = scrollTop - lastScrollTop;
el[SCOPE].lastScrollTop = scrollTop;
if (observer || disabled || delta < 0)
return;
let shouldTrigger = false;
if (container === el) {
shouldTrigger = scrollHeight - (clientHeight + scrollTop) <= distance;
} else {
const { clientTop, scrollHeight: height } = el;
const offsetTop = getOffsetTopDistance(el, containerEl);
shouldTrigger = scrollTop + clientHeight >= offsetTop + clientTop + height - distance;
}
if (shouldTrigger) {
cb.call(instance);
}
};
function checkFull(el, cb) {
const { containerEl, instance } = el[SCOPE];
const { disabled } = getScrollOptions(el, instance);
if (disabled || containerEl.clientHeight === 0)
return;
if (containerEl.scrollHeight <= containerEl.clientHeight) {
cb.call(instance);
} else {
destroyObserver(el);
}
}
const InfiniteScroll = {
async mounted(el, binding) {
const { instance, value: cb } = binding;
if (!isFunction(cb)) {
throwError(SCOPE, "'v-infinite-scroll' binding value must be a function");
}
await vue.nextTick();
const { delay, immediate } = getScrollOptions(el, instance);
const container = getScrollContainer(el, true);
const containerEl = container === window ? document.documentElement : container;
const onScroll = throttle(handleScroll.bind(null, el, cb), delay);
if (!container)
return;
el[SCOPE] = {
instance,
container,
containerEl,
delay,
cb,
onScroll,
lastScrollTop: containerEl.scrollTop
};
if (immediate) {
const observer = new MutationObserver(throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL));
el[SCOPE].observer = observer;
observer.observe(el, { childList: true, subtree: true });
checkFull(el, cb);
}
container.addEventListener("scroll", onScroll);
},
unmounted(el) {
const { container, onScroll } = el[SCOPE];
container == null ? void 0 : container.removeEventListener("scroll", onScroll);
destroyObserver(el);
},
async updated(el) {
if (!el[SCOPE]) {
await vue.nextTick();
}
const { containerEl, cb, observer } = el[SCOPE];
if (containerEl.clientHeight && observer) {
checkFull(el, cb);
}
}
};
var InfiniteScroll$1 = InfiniteScroll;
const _InfiniteScroll = InfiniteScroll$1;
_InfiniteScroll.install = (app) => {
app.directive("InfiniteScroll", _InfiniteScroll);
};
const ElInfiniteScroll = _InfiniteScroll;
function createLoadingComponent(options) {
let afterLeaveTimer;
const ns = useNamespace("loading");
const afterLeaveFlag = vue.ref(false);
const data = vue.reactive({
...options,
originalPosition: "",
originalOverflow: "",
visible: false
});
function setText(text) {
data.text = text;
}
function destroySelf() {
const target = data.parent;
if (!target.vLoadingAddClassList) {
let loadingNumber = target.getAttribute("loading-number");
loadingNumber = Number.parseInt(loadingNumber) - 1;
if (!loadingNumber) {
removeClass(target, ns.bm("parent", "relative"));
target.removeAttribute("loading-number");
} else {
target.setAttribute("loading-number", loadingNumber.toString());
}
removeClass(target, ns.bm("parent", "hidden"));
}
removeElLoadingChild();
loadingInstance.unmount();
}
function removeElLoadingChild() {
var _a, _b;
(_b = (_a = vm.$el) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(vm.$el);
}
function close() {
var _a;
if (options.beforeClose && !options.beforeClose())
return;
afterLeaveFlag.value = true;
clearTimeout(afterLeaveTimer);
afterLeaveTimer = window.setTimeout(handleAfterLeave, 400);
data.visible = false;
(_a = options.closed) == null ? void 0 : _a.call(options);
}
function handleAfterLeave() {
if (!afterLeaveFlag.value)
return;
const target = data.parent;
afterLeaveFlag.value = false;
target.vLoadingAddClassList = void 0;
destroySelf();
}
const elLoadingComponent = {
name: "ElLoading",
setup() {
return () => {
const svg = data.spinner || data.svg;
const spinner = vue.h("svg", {
class: "circular",
viewBox: data.svgViewBox ? data.svgViewBox : "0 0 50 50",
...svg ? { innerHTML: svg } : {}
}, [
vue.h("circle", {
class: "path",
cx: "25",
cy: "25",
r: "20",
fill: "none"
})
]);
const spinnerText = data.text ? vue.h("p", { class: ns.b("text") }, [data.text]) : void 0;
return vue.h(vue.Transition, {
name: ns.b("fade"),
onAfterLeave: handleAfterLeave
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createVNode("div", {
style: {
backgroundColor: data.background || ""
},
class: [
ns.b("mask"),
data.customClass,
data.fullscreen ? "is-fullscreen" : ""
]
}, [
vue.h("div", {
class: ns.b("spinner")
}, [spinner, spinnerText])
]), [[vue.vShow, data.visible]])
])
});
};
}
};
const loadingInstance = vue.createApp(elLoadingComponent);
const vm = loadingInstance.mount(document.createElement("div"));
return {
...vue.toRefs(data),
setText,
removeElLoadingChild,
close,
handleAfterLeave,
vm,
get $el() {
return vm.$el;
}
};
}
let fullscreenInstance = void 0;
const Loading = function(options = {}) {
if (!isClient)
return void 0;
const resolved = resolveOptions(options);
if (resolved.fullscreen && fullscreenInstance) {
return fullscreenInstance;
}
const instance = createLoadingComponent({
...resolved,
closed: () => {
var _a;
(_a = resolved.closed) == null ? void 0 : _a.call(resolved);
if (resolved.fullscreen)
fullscreenInstance = void 0;
}
});
addStyle(resolved, resolved.parent, instance);
addClassList(resolved, resolved.parent, instance);
resolved.parent.vLoadingAddClassList = () => addClassList(resolved, resolved.parent, instance);
let loadingNumber = resolved.parent.getAttribute("loading-number");
if (!loadingNumber) {
loadingNumber = "1";
} else {
loadingNumber = `${Number.parseInt(loadingNumber) + 1}`;
}
resolved.parent.setAttribute("loading-number", loadingNumber);
resolved.parent.appendChild(instance.$el);
vue.nextTick(() => instance.visible.value = resolved.visible);
if (resolved.fullscreen) {
fullscreenInstance = instance;
}
return instance;
};
const resolveOptions = (options) => {
var _a, _b, _c, _d;
let target;
if (isString(options.target)) {
target = (_a = document.querySelector(options.target)) != null ? _a : document.body;
} else {
target = options.target || document.body;
}
return {
parent: target === document.body || options.body ? document.body : target,
background: options.background || "",
svg: options.svg || "",
svgViewBox: options.svgViewBox || "",
spinner: options.spinner || false,
text: options.text || "",
fullscreen: target === document.body && ((_b = options.fullscreen) != null ? _b : true),
lock: (_c = options.lock) != null ? _c : false,
customClass: options.customClass || "",
visible: (_d = options.visible) != null ? _d : true,
target
};
};
const addStyle = async (options, parent, instance) => {
const { nextZIndex } = useZIndex();
const maskStyle = {};
if (options.fullscreen) {
instance.originalPosition.value = getStyle(document.body, "position");
instance.originalOverflow.value = getStyle(document.body, "overflow");
maskStyle.zIndex = nextZIndex();
} else if (options.parent === document.body) {
instance.originalPosition.value = getStyle(document.body, "position");
await vue.nextTick();
for (const property of ["top", "left"]) {
const scroll = property === "top" ? "scrollTop" : "scrollLeft";
maskStyle[property] = `${options.target.getBoundingClientRect()[property] + document.body[scroll] + document.documentElement[scroll] - Number.parseInt(getStyle(document.body, `margin-${property}`), 10)}px`;
}
for (const property of ["height", "width"]) {
maskStyle[property] = `${options.target.getBoundingClientRect()[property]}px`;
}
} else {
instance.originalPosition.value = getStyle(parent, "position");
}
for (const [key, value] of Object.entries(maskStyle)) {
instance.$el.style[key] = value;
}
};
const addClassList = (options, parent, instance) => {
const ns = useNamespace("loading");
if (!["absolute", "fixed", "sticky"].includes(instance.originalPosition.value)) {
addClass(parent, ns.bm("parent", "relative"));
} else {
removeClass(parent, ns.bm("parent", "relative"));
}
if (options.fullscreen && options.lock) {
addClass(parent, ns.bm("parent", "hidden"));
} else {
removeClass(parent, ns.bm("parent", "hidden"));
}
};
const INSTANCE_KEY = Symbol("ElLoading");
const createInstance = (el, binding) => {
var _a, _b, _c, _d;
const vm = binding.instance;
const getBindingProp = (key) => isObject$1(binding.value) ? binding.value[key] : void 0;
const resolveExpression = (key) => {
const data = isString(key) && (vm == null ? void 0 : vm[key]) || key;
if (data)
return vue.ref(data);
else
return data;
};
const getProp = (name) => resolveExpression(getBindingProp(name) || el.getAttribute(`element-loading-${hyphenate(name)}`));
const fullscreen = (_a = getBindingProp("fullscreen")) != null ? _a : binding.modifiers.fullscreen;
const options = {
text: getProp("text"),
svg: getProp("svg"),
svgViewBox: getProp("svgViewBox"),
spinner: getProp("spinner"),
background: getProp("background"),
customClass: getProp("customClass"),
fullscreen,
target: (_b = getBindingProp("target")) != null ? _b : fullscreen ? void 0 : el,
body: (_c = getBindingProp("body")) != null ? _c : binding.modifiers.body,
lock: (_d = getBindingProp("lock")) != null ? _d : binding.modifiers.lock
};
el[INSTANCE_KEY] = {
options,
instance: Loading(options)
};
};
const updateOptions = (newOptions, originalOptions) => {
for (const key of Object.keys(originalOptions)) {
if (vue.isRef(originalOptions[key]))
originalOptions[key].value = newOptions[key];
}
};
const vLoading = {
mounted(el, binding) {
if (binding.value) {
createInstance(el, binding);
}
},
updated(el, binding) {
const instance = el[INSTANCE_KEY];
if (binding.oldValue !== binding.value) {
if (binding.value && !binding.oldValue) {
createInstance(el, binding);
} else if (binding.value && binding.oldValue) {
if (isObject$1(binding.value))
updateOptions(binding.value, instance.options);
} else {
instance == null ? void 0 : instance.instance.close();
}
}
},
unmounted(el) {
var _a;
(_a = el[INSTANCE_KEY]) == null ? void 0 : _a.instance.close();
}
};
const ElLoading = {
install(app) {
app.directive("loading", vLoading);
app.config.globalProperties.$loading = Loading;
},
directive: vLoading,
service: Loading
};
const messageTypes = ["success", "info", "warning", "error"];
const messageDefaults = mutable({
customClass: "",
center: false,
dangerouslyUseHTMLString: false,
duration: 3e3,
icon: void 0,
id: "",
message: "",
onClose: void 0,
showClose: false,
type: "info",
offset: 16,
zIndex: 0,
grouping: false,
repeatNum: 1,
appendTo: isClient ? document.body : void 0
});
const messageProps = buildProps({
customClass: {
type: String,
default: messageDefaults.customClass
},
center: {
type: Boolean,
default: messageDefaults.center
},
dangerouslyUseHTMLString: {
type: Boolean,
default: messageDefaults.dangerouslyUseHTMLString
},
duration: {
type: Number,
default: messageDefaults.duration
},
icon: {
type: iconPropType,
default: messageDefaults.icon
},
id: {
type: String,
default: messageDefaults.id
},
message: {
type: definePropType([
String,
Object,
Function
]),
default: messageDefaults.message
},
onClose: {
type: definePropType(Function),
required: false
},
showClose: {
type: Boolean,
default: messageDefaults.showClose
},
type: {
type: String,
values: messageTypes,
default: messageDefaults.type
},
offset: {
type: Number,
default: messageDefaults.offset
},
zIndex: {
type: Number,
default: messageDefaults.zIndex
},
grouping: {
type: Boolean,
default: messageDefaults.grouping
},
repeatNum: {
type: Number,
default: messageDefaults.repeatNum
}
});
const messageEmits = {
destroy: () => true
};
const instances = vue.shallowReactive([]);
const getInstance = (id) => {
const idx = instances.findIndex((instance) => instance.id === id);
const current = instances[idx];
let prev;
if (idx > 0) {
prev = instances[idx - 1];
}
return { current, prev };
};
const getLastOffset = (id) => {
const { prev } = getInstance(id);
if (!prev)
return 0;
return prev.vm.exposed.bottom.value;
};
const _hoisted_1$2 = ["id"];
const _hoisted_2$2 = ["innerHTML"];
const __default__$1 = vue.defineComponent({
name: "ElMessage"
});
const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
...__default__$1,
props: messageProps,
emits: messageEmits,
setup(__props, { expose }) {
const props = __props;
const { Close } = TypeComponents;
const ns = useNamespace("message");
const messageRef = vue.ref();
const visible = vue.ref(false);
const height = vue.ref(0);
let stopTimer = void 0;
const badgeType = vue.computed(() => props.type ? props.type === "error" ? "danger" : props.type : "info");
const typeClass = vue.computed(() => {
const type = props.type;
return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] };
});
const iconComponent = vue.computed(() => props.icon || TypeComponentsMap[props.type] || "");
const lastOffset = vue.computed(() => getLastOffset(props.id));
const offset = vue.computed(() => props.offset + lastOffset.value);
const bottom = vue.computed(() => height.value + offset.value);
const customStyle = vue.computed(() => ({
top: `${offset.value}px`,
zIndex: props.zIndex
}));
function startTimer() {
if (props.duration === 0)
return;
({ stop: stopTimer } = useTimeoutFn(() => {
close();
}, props.duration));
}
function clearTimer() {
stopTimer == null ? void 0 : stopTimer();
}
function close() {
visible.value = false;
}
function keydown({ code }) {
if (code === EVENT_CODE.esc) {
close();
}
}
vue.onMounted(() => {
startTimer();
visible.value = true;
});
vue.watch(() => props.repeatNum, () => {
clearTimer();
startTimer();
});
useEventListener(document, "keydown", keydown);
useResizeObserver(messageRef, () => {
height.value = messageRef.value.getBoundingClientRect().height;
});
expose({
visible,
bottom,
close
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Transition, {
name: vue.unref(ns).b("fade"),
onBeforeLeave: _ctx.onClose,
onAfterLeave: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("destroy")),
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("div", {
id: _ctx.id,
ref_key: "messageRef",
ref: messageRef,
class: vue.normalizeClass([
vue.unref(ns).b(),
{ [vue.unref(ns).m(_ctx.type)]: _ctx.type && !_ctx.icon },
vue.unref(ns).is("center", _ctx.center),
vue.unref(ns).is("closable", _ctx.showClose),
_ctx.customClass
]),
style: vue.normalizeStyle(vue.unref(customStyle)),
role: "alert",
onMouseenter: clearTimer,
onMouseleave: startTimer
}, [
_ctx.repeatNum > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(ElBadge), {
key: 0,
value: _ctx.repeatNum,
type: vue.unref(badgeType),
class: vue.normalizeClass(vue.unref(ns).e("badge"))
}, null, 8, ["value", "type", "class"])) : vue.createCommentVNode("v-if", true),
vue.unref(iconComponent) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 1,
class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(typeClass)])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(iconComponent))))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default", {}, () => [
!_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("content"))
}, vue.toDisplayString(_ctx.message), 3)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
vue.createElementVNode("p", {
class: vue.normalizeClass(vue.unref(ns).e("content")),
innerHTML: _ctx.message
}, null, 10, _hoisted_2$2)
], 2112))
]),
_ctx.showClose ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 2,
class: vue.normalizeClass(vue.unref(ns).e("closeBtn")),
onClick: vue.withModifiers(close, ["stop"])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(Close))
]),
_: 1
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
], 46, _hoisted_1$2), [
[vue.vShow, visible.value]
])
]),
_: 3
}, 8, ["name", "onBeforeLeave"]);
};
}
});
var MessageConstructor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "message.vue"]]);
let seed$1 = 1;
const normalizeOptions = (params) => {
const options = !params || isString(params) || vue.isVNode(params) || isFunction(params) ? { message: params } : params;
const normalized = {
...messageDefaults,
...options
};
if (!normalized.appendTo) {
normalized.appendTo = document.body;
} else if (isString(normalized.appendTo)) {
let appendTo = document.querySelector(normalized.appendTo);
if (!isElement$1(appendTo)) {
appendTo = document.body;
}
normalized.appendTo = appendTo;
}
return normalized;
};
const closeMessage = (instance) => {
const idx = instances.indexOf(instance);
if (idx === -1)
return;
instances.splice(idx, 1);
const { handler } = instance;
handler.close();
};
const createMessage = ({ appendTo, ...options }, context) => {
const { nextZIndex } = useZIndex();
const id = `message_${seed$1++}`;
const userOnClose = options.onClose;
const container = document.createElement("div");
const props = {
...options,
zIndex: nextZIndex() + options.zIndex,
id,
onClose: () => {
userOnClose == null ? void 0 : userOnClose();
closeMessage(instance);
},
onDestroy: () => {
vue.render(null, container);
}
};
const vnode = vue.createVNode(MessageConstructor, props, isFunction(props.message) || vue.isVNode(props.message) ? {
default: isFunction(props.message) ? props.message : () => props.message
} : null);
vnode.appContext = context || message._context;
vue.render(vnode, container);
appendTo.appendChild(container.firstElementChild);
const vm = vnode.component;
const handler = {
close: () => {
vm.exposed.visible.value = false;
}
};
const instance = {
id,
vnode,
vm,
handler,
props: vnode.component.props
};
return instance;
};
const message = (options = {}, context) => {
if (!isClient)
return { close: () => void 0 };
if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {
return { close: () => void 0 };
}
const normalized = normalizeOptions(options);
if (normalized.grouping && instances.length) {
const instance2 = instances.find(({ vnode: vm }) => {
var _a;
return ((_a = vm.props) == null ? void 0 : _a.message) === normalized.message;
});
if (instance2) {
instance2.props.repeatNum += 1;
instance2.props.type = normalized.type;
return instance2.handler;
}
}
const instance = createMessage(normalized, context);
instances.push(instance);
return instance.handler;
};
messageTypes.forEach((type) => {
message[type] = (options = {}, appContext) => {
const normalized = normalizeOptions(options);
return message({ ...normalized, type }, appContext);
};
});
function closeAll$1(type) {
for (const instance of instances) {
if (!type || type === instance.props.type) {
instance.handler.close();
}
}
}
message.closeAll = closeAll$1;
message._context = null;
var Message = message;
const ElMessage = withInstallFunction(Message, "$message");
const _sfc_main$1 = vue.defineComponent({
name: "ElMessageBox",
directives: {
TrapFocus
},
components: {
ElButton,
ElFocusTrap,
ElInput,
ElOverlay,
ElIcon,
...TypeComponents
},
inheritAttrs: false,
props: {
buttonSize: {
type: String,
validator: isValidComponentSize
},
modal: {
type: Boolean,
default: true
},
lockScroll: {
type: Boolean,
default: true
},
showClose: {
type: Boolean,
default: true
},
closeOnClickModal: {
type: Boolean,
default: true
},
closeOnPressEscape: {
type: Boolean,
default: true
},
closeOnHashChange: {
type: Boolean,
default: true
},
center: Boolean,
draggable: Boolean,
roundButton: {
default: false,
type: Boolean
},
container: {
type: String,
default: "body"
},
boxType: {
type: String,
default: ""
}
},
emits: ["vanish", "action"],
setup(props, { emit }) {
const { t } = useLocale();
const ns = useNamespace("message-box");
const visible = vue.ref(false);
const { nextZIndex } = useZIndex();
const state = vue.reactive({
autofocus: true,
beforeClose: null,
callback: null,
cancelButtonText: "",
cancelButtonClass: "",
confirmButtonText: "",
confirmButtonClass: "",
customClass: "",
customStyle: {},
dangerouslyUseHTMLString: false,
distinguishCancelAndClose: false,
icon: "",
inputPattern: null,
inputPlaceholder: "",
inputType: "text",
inputValue: null,
inputValidator: null,
inputErrorMessage: "",
message: null,
modalFade: true,
modalClass: "",
showCancelButton: false,
showConfirmButton: true,
type: "",
title: void 0,
showInput: false,
action: "",
confirmButtonLoading: false,
cancelButtonLoading: false,
confirmButtonDisabled: false,
editorErrorMessage: "",
validateError: false,
zIndex: nextZIndex()
});
const typeClass = vue.computed(() => {
const type = state.type;
return { [ns.bm("icon", type)]: type && TypeComponentsMap[type] };
});
const contentId = useId();
const inputId = useId();
const btnSize = useSize(vue.computed(() => props.buttonSize), { prop: true, form: true, formItem: true });
const iconComponent = vue.computed(() => state.icon || TypeComponentsMap[state.type] || "");
const hasMessage = vue.computed(() => !!state.message);
const rootRef = vue.ref();
const headerRef = vue.ref();
const focusStartRef = vue.ref();
const inputRef = vue.ref();
const confirmRef = vue.ref();
const confirmButtonClasses = vue.computed(() => state.confirmButtonClass);
vue.watch(() => state.inputValue, async (val) => {
await vue.nextTick();
if (props.boxType === "prompt" && val !== null) {
validate();
}
}, { immediate: true });
vue.watch(() => visible.value, (val) => {
var _a, _b;
if (val) {
if (props.boxType !== "prompt") {
if (state.autofocus) {
focusStartRef.value = (_b = (_a = confirmRef.value) == null ? void 0 : _a.$el) != null ? _b : rootRef.value;
} else {
focusStartRef.value = rootRef.value;
}
}
state.zIndex = nextZIndex();
}
if (props.boxType !== "prompt")
return;
if (val) {
vue.nextTick().then(() => {
var _a2;
if (inputRef.value && inputRef.value.$el) {
if (state.autofocus) {
focusStartRef.value = (_a2 = getInputElement()) != null ? _a2 : rootRef.value;
} else {
focusStartRef.value = rootRef.value;
}
}
});
} else {
state.editorErrorMessage = "";
state.validateError = false;
}
});
const draggable = vue.computed(() => props.draggable);
useDraggable(rootRef, headerRef, draggable);
vue.onMounted(async () => {
await vue.nextTick();
if (props.closeOnHashChange) {
window.addEventListener("hashchange", doClose);
}
});
vue.onBeforeUnmount(() => {
if (props.closeOnHashChange) {
window.removeEventListener("hashchange", doClose);
}
});
function doClose() {
if (!visible.value)
return;
visible.value = false;
vue.nextTick(() => {
if (state.action)
emit("action", state.action);
});
}
const handleWrapperClick = () => {
if (props.closeOnClickModal) {
handleAction(state.distinguishCancelAndClose ? "close" : "cancel");
}
};
const overlayEvent = useSameTarget(handleWrapperClick);
const handleInputEnter = (e) => {
if (state.inputType !== "textarea") {
e.preventDefault();
return handleAction("confirm");
}
};
const handleAction = (action) => {
var _a;
if (props.boxType === "prompt" && action === "confirm" && !validate()) {
return;
}
state.action = action;
if (state.beforeClose) {
(_a = state.beforeClose) == null ? void 0 : _a.call(state, action, state, doClose);
} else {
doClose();
}
};
const validate = () => {
if (props.boxType === "prompt") {
const inputPattern = state.inputPattern;
if (inputPattern && !inputPattern.test(state.inputValue || "")) {
state.editorErrorMessage = state.inputErrorMessage || t("el.messagebox.error");
state.validateError = true;
return false;
}
const inputValidator = state.inputValidator;
if (typeof inputValidator === "function") {
const validateResult = inputValidator(state.inputValue);
if (validateResult === false) {
state.editorErrorMessage = state.inputErrorMessage || t("el.messagebox.error");
state.validateError = true;
return false;
}
if (typeof validateResult === "string") {
state.editorErrorMessage = validateResult;
state.validateError = true;
return false;
}
}
}
state.editorErrorMessage = "";
state.validateError = false;
return true;
};
const getInputElement = () => {
const inputRefs = inputRef.value.$refs;
return inputRefs.input || inputRefs.textarea;
};
const handleClose = () => {
handleAction("close");
};
const onCloseRequested = () => {
if (props.closeOnPressEscape) {
handleClose();
}
};
if (props.lockScroll) {
useLockscreen(visible);
}
useRestoreActive(visible);
return {
...vue.toRefs(state),
ns,
overlayEvent,
visible,
hasMessage,
typeClass,
contentId,
inputId,
btnSize,
iconComponent,
confirmButtonClasses,
rootRef,
focusStartRef,
headerRef,
inputRef,
confirmRef,
doClose,
handleClose,
onCloseRequested,
handleWrapperClick,
handleInputEnter,
handleAction,
t
};
}
});
const _hoisted_1$1 = ["aria-label", "aria-describedby"];
const _hoisted_2$1 = ["aria-label"];
const _hoisted_3$1 = ["id"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_close = vue.resolveComponent("close");
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_button = vue.resolveComponent("el-button");
const _component_el_focus_trap = vue.resolveComponent("el-focus-trap");
const _component_el_overlay = vue.resolveComponent("el-overlay");
return vue.openBlock(), vue.createBlock(vue.Transition, {
name: "fade-in-linear",
onAfterLeave: _cache[11] || (_cache[11] = ($event) => _ctx.$emit("vanish")),
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createVNode(_component_el_overlay, {
"z-index": _ctx.zIndex,
"overlay-class": [_ctx.ns.is("message-box"), _ctx.modalClass],
mask: _ctx.modal
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
role: "dialog",
"aria-label": _ctx.title,
"aria-modal": "true",
"aria-describedby": !_ctx.showInput ? _ctx.contentId : void 0,
class: vue.normalizeClass(`${_ctx.ns.namespace.value}-overlay-message-box`),
onClick: _cache[8] || (_cache[8] = (...args) => _ctx.overlayEvent.onClick && _ctx.overlayEvent.onClick(...args)),
onMousedown: _cache[9] || (_cache[9] = (...args) => _ctx.overlayEvent.onMousedown && _ctx.overlayEvent.onMousedown(...args)),
onMouseup: _cache[10] || (_cache[10] = (...args) => _ctx.overlayEvent.onMouseup && _ctx.overlayEvent.onMouseup(...args))
}, [
vue.createVNode(_component_el_focus_trap, {
loop: "",
trapped: _ctx.visible,
"focus-trap-el": _ctx.rootRef,
"focus-start-el": _ctx.focusStartRef,
onReleaseRequested: _ctx.onCloseRequested
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", {
ref: "rootRef",
class: vue.normalizeClass([
_ctx.ns.b(),
_ctx.customClass,
_ctx.ns.is("draggable", _ctx.draggable),
{ [_ctx.ns.m("center")]: _ctx.center }
]),
style: vue.normalizeStyle(_ctx.customStyle),
tabindex: "-1",
onClick: _cache[7] || (_cache[7] = vue.withModifiers(() => {
}, ["stop"]))
}, [
_ctx.title !== null && _ctx.title !== void 0 ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
ref: "headerRef",
class: vue.normalizeClass(_ctx.ns.e("header"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("title"))
}, [
_ctx.iconComponent && _ctx.center ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 0,
class: vue.normalizeClass([_ctx.ns.e("status"), _ctx.typeClass])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
], 2),
_ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
key: 0,
type: "button",
class: vue.normalizeClass(_ctx.ns.e("headerbtn")),
"aria-label": _ctx.t("el.messagebox.close"),
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel")),
onKeydown: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"]))
}, [
vue.createVNode(_component_el_icon, {
class: vue.normalizeClass(_ctx.ns.e("close"))
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_close)
]),
_: 1
}, 8, ["class"])
], 42, _hoisted_2$1)) : vue.createCommentVNode("v-if", true)
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
id: _ctx.contentId,
class: vue.normalizeClass(_ctx.ns.e("content"))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("container"))
}, [
_ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
key: 0,
class: vue.normalizeClass([_ctx.ns.e("status"), _ctx.typeClass])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
_ctx.hasMessage ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(_ctx.ns.e("message"))
}, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
!_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.showInput ? "label" : "p"), {
key: 0,
for: _ctx.showInput ? _ctx.inputId : void 0
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(!_ctx.dangerouslyUseHTMLString ? _ctx.message : ""), 1)
]),
_: 1
}, 8, ["for"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.showInput ? "label" : "p"), {
key: 1,
for: _ctx.showInput ? _ctx.inputId : void 0,
innerHTML: _ctx.message
}, null, 8, ["for", "innerHTML"]))
])
], 2)) : vue.createCommentVNode("v-if", true)
], 2),
vue.withDirectives(vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("input"))
}, [
vue.createVNode(_component_el_input, {
id: _ctx.inputId,
ref: "inputRef",
modelValue: _ctx.inputValue,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.inputValue = $event),
type: _ctx.inputType,
placeholder: _ctx.inputPlaceholder,
"aria-invalid": _ctx.validateError,
class: vue.normalizeClass({ invalid: _ctx.validateError }),
onKeydown: vue.withKeys(_ctx.handleInputEnter, ["enter"])
}, null, 8, ["id", "modelValue", "type", "placeholder", "aria-invalid", "class", "onKeydown"]),
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("errormsg")),
style: vue.normalizeStyle({
visibility: !!_ctx.editorErrorMessage ? "visible" : "hidden"
})
}, vue.toDisplayString(_ctx.editorErrorMessage), 7)
], 2), [
[vue.vShow, _ctx.showInput]
])
], 10, _hoisted_3$1),
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("btns"))
}, [
_ctx.showCancelButton ? (vue.openBlock(), vue.createBlock(_component_el_button, {
key: 0,
loading: _ctx.cancelButtonLoading,
class: vue.normalizeClass([_ctx.cancelButtonClass]),
round: _ctx.roundButton,
size: _ctx.btnSize,
onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleAction("cancel")),
onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"]))
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1)
]),
_: 1
}, 8, ["loading", "class", "round", "size"])) : vue.createCommentVNode("v-if", true),
vue.withDirectives(vue.createVNode(_component_el_button, {
ref: "confirmRef",
type: "primary",
loading: _ctx.confirmButtonLoading,
class: vue.normalizeClass([_ctx.confirmButtonClasses]),
round: _ctx.roundButton,
disabled: _ctx.confirmButtonDisabled,
size: _ctx.btnSize,
onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleAction("confirm")),
onKeydown: _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"]))
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1)
]),
_: 1
}, 8, ["loading", "class", "round", "disabled", "size"]), [
[vue.vShow, _ctx.showConfirmButton]
])
], 2)
], 6)
]),
_: 3
}, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"])
], 42, _hoisted_1$1)
]),
_: 3
}, 8, ["z-index", "overlay-class", "mask"]), [
[vue.vShow, _ctx.visible]
])
]),
_: 3
});
}
var MessageBoxConstructor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render], ["__file", "index.vue"]]);
const messageInstance = /* @__PURE__ */ new Map();
const getAppendToElement = (props) => {
let appendTo = document.body;
if (props.appendTo) {
if (isString(props.appendTo)) {
appendTo = document.querySelector(props.appendTo);
}
if (isElement$1(props.appendTo)) {
appendTo = props.appendTo;
}
if (!isElement$1(appendTo)) {
appendTo = document.body;
}
}
return appendTo;
};
const initInstance = (props, container, appContext = null) => {
const vnode = vue.createVNode(MessageBoxConstructor, props, isFunction(props.message) || vue.isVNode(props.message) ? {
default: isFunction(props.message) ? props.message : () => props.message
} : null);
vnode.appContext = appContext;
vue.render(vnode, container);
getAppendToElement(props).appendChild(container.firstElementChild);
return vnode.component;
};
const genContainer = () => {
return document.createElement("div");
};
const showMessage = (options, appContext) => {
const container = genContainer();
options.onVanish = () => {
vue.render(null, container);
messageInstance.delete(vm);
};
options.onAction = (action) => {
const currentMsg = messageInstance.get(vm);
let resolve;
if (options.showInput) {
resolve = { value: vm.inputValue, action };
} else {
resolve = action;
}
if (options.callback) {
options.callback(resolve, instance.proxy);
} else {
if (action === "cancel" || action === "close") {
if (options.distinguishCancelAndClose && action !== "cancel") {
currentMsg.reject("close");
} else {
currentMsg.reject("cancel");
}
} else {
currentMsg.resolve(resolve);
}
}
};
const instance = initInstance(options, container, appContext);
const vm = instance.proxy;
for (const prop in options) {
if (hasOwn(options, prop) && !hasOwn(vm.$props, prop)) {
vm[prop] = options[prop];
}
}
vm.visible = true;
return vm;
};
function MessageBox(options, appContext = null) {
if (!isClient)
return Promise.reject();
let callback;
if (isString(options) || vue.isVNode(options)) {
options = {
message: options
};
} else {
callback = options.callback;
}
return new Promise((resolve, reject) => {
const vm = showMessage(options, appContext != null ? appContext : MessageBox._context);
messageInstance.set(vm, {
options,
callback,
resolve,
reject
});
});
}
const MESSAGE_BOX_VARIANTS = ["alert", "confirm", "prompt"];
const MESSAGE_BOX_DEFAULT_OPTS = {
alert: { closeOnPressEscape: false, closeOnClickModal: false },
confirm: { showCancelButton: true },
prompt: { showCancelButton: true, showInput: true }
};
MESSAGE_BOX_VARIANTS.forEach((boxType) => {
MessageBox[boxType] = messageBoxFactory(boxType);
});
function messageBoxFactory(boxType) {
return (message, title, options, appContext) => {
let titleOrOpts = "";
if (isObject$1(title)) {
options = title;
titleOrOpts = "";
} else if (isUndefined(title)) {
titleOrOpts = "";
} else {
titleOrOpts = title;
}
return MessageBox(Object.assign({
title: titleOrOpts,
message,
type: "",
...MESSAGE_BOX_DEFAULT_OPTS[boxType]
}, options, {
boxType
}), appContext);
};
}
MessageBox.close = () => {
messageInstance.forEach((_, vm) => {
vm.doClose();
});
messageInstance.clear();
};
MessageBox._context = null;
const _MessageBox = MessageBox;
_MessageBox.install = (app) => {
_MessageBox._context = app._context;
app.config.globalProperties.$msgbox = _MessageBox;
app.config.globalProperties.$messageBox = _MessageBox;
app.config.globalProperties.$alert = _MessageBox.alert;
app.config.globalProperties.$confirm = _MessageBox.confirm;
app.config.globalProperties.$prompt = _MessageBox.prompt;
};
const ElMessageBox = _MessageBox;
const notificationTypes = [
"success",
"info",
"warning",
"error"
];
const notificationProps = buildProps({
customClass: {
type: String,
default: ""
},
dangerouslyUseHTMLString: {
type: Boolean,
default: false
},
duration: {
type: Number,
default: 4500
},
icon: {
type: iconPropType
},
id: {
type: String,
default: ""
},
message: {
type: definePropType([String, Object]),
default: ""
},
offset: {
type: Number,
default: 0
},
onClick: {
type: definePropType(Function),
default: () => void 0
},
onClose: {
type: definePropType(Function),
required: true
},
position: {
type: String,
values: ["top-right", "top-left", "bottom-right", "bottom-left"],
default: "top-right"
},
showClose: {
type: Boolean,
default: true
},
title: {
type: String,
default: ""
},
type: {
type: String,
values: [...notificationTypes, ""],
default: ""
},
zIndex: {
type: Number,
default: 0
}
});
const notificationEmits = {
destroy: () => true
};
const _hoisted_1 = ["id"];
const _hoisted_2 = ["textContent"];
const _hoisted_3 = { key: 0 };
const _hoisted_4 = ["innerHTML"];
const __default__ = vue.defineComponent({
name: "ElNotification"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: notificationProps,
emits: notificationEmits,
setup(__props, { expose }) {
const props = __props;
const ns = useNamespace("notification");
const { Close } = CloseComponents;
const visible = vue.ref(false);
let timer = void 0;
const typeClass = vue.computed(() => {
const type = props.type;
return type && TypeComponentsMap[props.type] ? ns.m(type) : "";
});
const iconComponent = vue.computed(() => {
if (!props.type)
return props.icon;
return TypeComponentsMap[props.type] || props.icon;
});
const horizontalClass = vue.computed(() => props.position.endsWith("right") ? "right" : "left");
const verticalProperty = vue.computed(() => props.position.startsWith("top") ? "top" : "bottom");
const positionStyle = vue.computed(() => {
return {
[verticalProperty.value]: `${props.offset}px`,
zIndex: props.zIndex
};
});
function startTimer() {
if (props.duration > 0) {
({ stop: timer } = useTimeoutFn(() => {
if (visible.value)
close();
}, props.duration));
}
}
function clearTimer() {
timer == null ? void 0 : timer();
}
function close() {
visible.value = false;
}
function onKeydown({ code }) {
if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {
clearTimer();
} else if (code === EVENT_CODE.esc) {
if (visible.value) {
close();
}
} else {
startTimer();
}
}
vue.onMounted(() => {
startTimer();
visible.value = true;
});
useEventListener(document, "keydown", onKeydown);
expose({
visible,
close
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Transition, {
name: vue.unref(ns).b("fade"),
onBeforeLeave: _ctx.onClose,
onAfterLeave: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("destroy")),
persisted: ""
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("div", {
id: _ctx.id,
class: vue.normalizeClass([vue.unref(ns).b(), _ctx.customClass, vue.unref(horizontalClass)]),
style: vue.normalizeStyle(vue.unref(positionStyle)),
role: "alert",
onMouseenter: clearTimer,
onMouseleave: startTimer,
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
}, [
vue.unref(iconComponent) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(typeClass)])
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(iconComponent))))
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("group"))
}, [
vue.createElementVNode("h2", {
class: vue.normalizeClass(vue.unref(ns).e("title")),
textContent: vue.toDisplayString(_ctx.title)
}, null, 10, _hoisted_2),
vue.withDirectives(vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(ns).e("content")),
style: vue.normalizeStyle(!!_ctx.title ? void 0 : { margin: 0 })
}, [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
!_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
vue.createElementVNode("p", { innerHTML: _ctx.message }, null, 8, _hoisted_4)
], 2112))
])
], 6), [
[vue.vShow, _ctx.message]
]),
_ctx.showClose ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("closeBtn")),
onClick: vue.withModifiers(close, ["stop"])
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(Close))
]),
_: 1
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
], 2)
], 46, _hoisted_1), [
[vue.vShow, visible.value]
])
]),
_: 3
}, 8, ["name", "onBeforeLeave"]);
};
}
});
var NotificationConstructor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "notification.vue"]]);
const notifications = {
"top-left": [],
"top-right": [],
"bottom-left": [],
"bottom-right": []
};
const GAP_SIZE = 16;
let seed = 1;
const notify = function(options = {}, context = null) {
if (!isClient)
return { close: () => void 0 };
if (typeof options === "string" || vue.isVNode(options)) {
options = { message: options };
}
const position = options.position || "top-right";
let verticalOffset = options.offset || 0;
notifications[position].forEach(({ vm: vm2 }) => {
var _a;
verticalOffset += (((_a = vm2.el) == null ? void 0 : _a.offsetHeight) || 0) + GAP_SIZE;
});
verticalOffset += GAP_SIZE;
const { nextZIndex } = useZIndex();
const id = `notification_${seed++}`;
const userOnClose = options.onClose;
const props = {
...options,
zIndex: nextZIndex(),
offset: verticalOffset,
id,
onClose: () => {
close(id, position, userOnClose);
}
};
let appendTo = document.body;
if (isElement$1(options.appendTo)) {
appendTo = options.appendTo;
} else if (isString(options.appendTo)) {
appendTo = document.querySelector(options.appendTo);
}
if (!isElement$1(appendTo)) {
appendTo = document.body;
}
const container = document.createElement("div");
const vm = vue.createVNode(NotificationConstructor, props, vue.isVNode(props.message) ? {
default: () => props.message
} : null);
vm.appContext = context != null ? context : notify._context;
vm.props.onDestroy = () => {
vue.render(null, container);
};
vue.render(vm, container);
notifications[position].push({ vm });
appendTo.appendChild(container.firstElementChild);
return {
close: () => {
vm.component.exposed.visible.value = false;
}
};
};
notificationTypes.forEach((type) => {
notify[type] = (options = {}) => {
if (typeof options === "string" || vue.isVNode(options)) {
options = {
message: options
};
}
return notify({
...options,
type
});
};
});
function close(id, position, userOnClose) {
const orientedNotifications = notifications[position];
const idx = orientedNotifications.findIndex(({ vm: vm2 }) => {
var _a;
return ((_a = vm2.component) == null ? void 0 : _a.props.id) === id;
});
if (idx === -1)
return;
const { vm } = orientedNotifications[idx];
if (!vm)
return;
userOnClose == null ? void 0 : userOnClose(vm);
const removedHeight = vm.el.offsetHeight;
const verticalPos = position.split("-")[0];
orientedNotifications.splice(idx, 1);
const len = orientedNotifications.length;
if (len < 1)
return;
for (let i = idx; i < len; i++) {
const { el, component } = orientedNotifications[i].vm;
const pos = Number.parseInt(el.style[verticalPos], 10) - removedHeight - GAP_SIZE;
component.props.offset = pos;
}
}
function closeAll() {
for (const orientedNotifications of Object.values(notifications)) {
orientedNotifications.forEach(({ vm }) => {
vm.component.exposed.visible.value = false;
});
}
}
notify.closeAll = closeAll;
notify._context = null;
var Notify = notify;
const ElNotification = withInstallFunction(Notify, "$notify");
var Plugins = [
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification,
ElPopoverDirective
];
var installer = makeInstaller([...Components, ...Plugins]);
const install = installer.install;
const version = installer.version;
exports.BAR_MAP = BAR_MAP;
exports.CASCADER_PANEL_INJECTION_KEY = CASCADER_PANEL_INJECTION_KEY;
exports.CHANGE_EVENT = CHANGE_EVENT;
exports.ClickOutside = ClickOutside;
exports.CommonPicker = CommonPicker;
exports.CommonProps = CommonProps;
exports.DEFAULT_FORMATS_DATE = DEFAULT_FORMATS_DATE;
exports.DEFAULT_FORMATS_DATEPICKER = DEFAULT_FORMATS_DATEPICKER;
exports.DEFAULT_FORMATS_TIME = DEFAULT_FORMATS_TIME;
exports.DROPDOWN_COLLECTION_INJECTION_KEY = COLLECTION_INJECTION_KEY;
exports.DROPDOWN_COLLECTION_ITEM_INJECTION_KEY = COLLECTION_ITEM_INJECTION_KEY;
exports.DROPDOWN_INJECTION_KEY = DROPDOWN_INJECTION_KEY;
exports.DefaultProps = DefaultProps;
exports.DynamicSizeGrid = DynamicSizeGrid$1;
exports.DynamicSizeList = DynamicSizeList$1;
exports.EVENT_CODE = EVENT_CODE;
exports.Effect = Effect;
exports.ElAffix = ElAffix;
exports.ElAlert = ElAlert;
exports.ElAside = ElAside;
exports.ElAutoResizer = ElAutoResizer;
exports.ElAutocomplete = ElAutocomplete;
exports.ElAvatar = ElAvatar;
exports.ElBacktop = ElBacktop;
exports.ElBadge = ElBadge;
exports.ElBreadcrumb = ElBreadcrumb;
exports.ElBreadcrumbItem = ElBreadcrumbItem;
exports.ElButton = ElButton;
exports.ElButtonGroup = ElButtonGroup$1;
exports.ElCalendar = ElCalendar;
exports.ElCard = ElCard;
exports.ElCarousel = ElCarousel;
exports.ElCarouselItem = ElCarouselItem;
exports.ElCascader = ElCascader;
exports.ElCascaderPanel = ElCascaderPanel;
exports.ElCheckTag = ElCheckTag;
exports.ElCheckbox = ElCheckbox;
exports.ElCheckboxButton = ElCheckboxButton;
exports.ElCheckboxGroup = ElCheckboxGroup$1;
exports.ElCol = ElCol;
exports.ElCollapse = ElCollapse;
exports.ElCollapseItem = ElCollapseItem;
exports.ElCollapseTransition = ElCollapseTransition;
exports.ElCollection = ElCollection;
exports.ElCollectionItem = ElCollectionItem;
exports.ElColorPicker = ElColorPicker;
exports.ElConfigProvider = ElConfigProvider;
exports.ElContainer = ElContainer;
exports.ElDatePicker = ElDatePicker;
exports.ElDescriptions = ElDescriptions;
exports.ElDescriptionsItem = ElDescriptionsItem;
exports.ElDialog = ElDialog;
exports.ElDivider = ElDivider;
exports.ElDrawer = ElDrawer;
exports.ElDropdown = ElDropdown;
exports.ElDropdownItem = ElDropdownItem;
exports.ElDropdownMenu = ElDropdownMenu;
exports.ElEmpty = ElEmpty;
exports.ElFooter = ElFooter;
exports.ElForm = ElForm;
exports.ElFormItem = ElFormItem;
exports.ElHeader = ElHeader;
exports.ElIcon = ElIcon;
exports.ElImage = ElImage;
exports.ElImageViewer = ElImageViewer;
exports.ElInfiniteScroll = ElInfiniteScroll;
exports.ElInput = ElInput;
exports.ElInputNumber = ElInputNumber;
exports.ElLink = ElLink;
exports.ElLoading = ElLoading;
exports.ElLoadingDirective = vLoading;
exports.ElLoadingService = Loading;
exports.ElMain = ElMain;
exports.ElMenu = ElMenu;
exports.ElMenuItem = ElMenuItem;
exports.ElMenuItemGroup = ElMenuItemGroup;
exports.ElMessage = ElMessage;
exports.ElMessageBox = ElMessageBox;
exports.ElNotification = ElNotification;
exports.ElOption = ElOption;
exports.ElOptionGroup = ElOptionGroup;
exports.ElOverlay = ElOverlay;
exports.ElPageHeader = ElPageHeader;
exports.ElPagination = ElPagination;
exports.ElPopconfirm = ElPopconfirm;
exports.ElPopover = ElPopover;
exports.ElPopoverDirective = ElPopoverDirective;
exports.ElPopper = ElPopper;
exports.ElPopperArrow = ElPopperArrow;
exports.ElPopperContent = ElPopperContent;
exports.ElPopperTrigger = ElPopperTrigger;
exports.ElProgress = ElProgress;
exports.ElRadio = ElRadio;
exports.ElRadioButton = ElRadioButton;
exports.ElRadioGroup = ElRadioGroup;
exports.ElRate = ElRate;
exports.ElResult = ElResult;
exports.ElRow = ElRow;
exports.ElScrollbar = ElScrollbar;
exports.ElSelect = ElSelect;
exports.ElSelectV2 = ElSelectV2;
exports.ElSkeleton = ElSkeleton;
exports.ElSkeletonItem = ElSkeletonItem;
exports.ElSlider = ElSlider;
exports.ElSpace = ElSpace;
exports.ElStep = ElStep;
exports.ElSteps = ElSteps;
exports.ElSubMenu = ElSubMenu;
exports.ElSwitch = ElSwitch;
exports.ElTabPane = ElTabPane;
exports.ElTable = ElTable;
exports.ElTableColumn = ElTableColumn;
exports.ElTableV2 = ElTableV2;
exports.ElTabs = ElTabs;
exports.ElTag = ElTag;
exports.ElTimePicker = ElTimePicker;
exports.ElTimeSelect = ElTimeSelect;
exports.ElTimeline = ElTimeline;
exports.ElTimelineItem = ElTimelineItem;
exports.ElTooltip = ElTooltip;
exports.ElTransfer = ElTransfer;
exports.ElTree = ElTree;
exports.ElTreeSelect = ElTreeSelect;
exports.ElTreeV2 = ElTreeV2;
exports.ElUpload = ElUpload;
exports.FIRST_KEYS = FIRST_KEYS;
exports.FIRST_LAST_KEYS = FIRST_LAST_KEYS;
exports.FORWARD_REF_INJECTION_KEY = FORWARD_REF_INJECTION_KEY;
exports.FixedSizeGrid = FixedSizeGrid$1;
exports.FixedSizeList = FixedSizeList$1;
exports.GAP = GAP;
exports.ID_INJECTION_KEY = ID_INJECTION_KEY;
exports.INPUT_EVENT = INPUT_EVENT;
exports.INSTALLED_KEY = INSTALLED_KEY;
exports.IconComponentMap = IconComponentMap;
exports.IconMap = IconMap;
exports.LAST_KEYS = LAST_KEYS;
exports.LEFT_CHECK_CHANGE_EVENT = LEFT_CHECK_CHANGE_EVENT;
exports.Mousewheel = Mousewheel;
exports.POPPER_CONTAINER_ID = POPPER_CONTAINER_ID;
exports.POPPER_CONTAINER_SELECTOR = POPPER_CONTAINER_SELECTOR;
exports.POPPER_CONTENT_INJECTION_KEY = POPPER_CONTENT_INJECTION_KEY;
exports.POPPER_INJECTION_KEY = POPPER_INJECTION_KEY;
exports.RIGHT_CHECK_CHANGE_EVENT = RIGHT_CHECK_CHANGE_EVENT;
exports.ROOT_PICKER_INJECTION_KEY = ROOT_PICKER_INJECTION_KEY;
exports.RowAlign = RowAlign;
exports.RowJustify = RowJustify;
exports.TOOLTIP_INJECTION_KEY = TOOLTIP_INJECTION_KEY;
exports.TOOLTIP_V2_OPEN = TOOLTIP_V2_OPEN;
exports.TableV2 = TableV2$1;
exports.TableV2Alignment = Alignment;
exports.TableV2FixedDir = FixedDir;
exports.TableV2Placeholder = placeholderSign;
exports.TableV2SortOrder = SortOrder;
exports.TimePickPanel = TimePickPanel;
exports.TrapFocus = TrapFocus;
exports.UPDATE_MODEL_EVENT = UPDATE_MODEL_EVENT;
exports.WEEK_DAYS = WEEK_DAYS;
exports.affixEmits = affixEmits;
exports.affixProps = affixProps;
exports.alertEffects = alertEffects;
exports.alertEmits = alertEmits;
exports.alertProps = alertProps;
exports.arrowMiddleware = arrowMiddleware;
exports.autoResizerProps = autoResizerProps;
exports.autocompleteEmits = autocompleteEmits;
exports.autocompleteProps = autocompleteProps;
exports.avatarEmits = avatarEmits;
exports.avatarProps = avatarProps;
exports.backtopEmits = backtopEmits;
exports.backtopProps = backtopProps;
exports.badgeProps = badgeProps;
exports.breadcrumbItemProps = breadcrumbItemProps;
exports.breadcrumbKey = breadcrumbKey;
exports.breadcrumbProps = breadcrumbProps;
exports.buildLocaleContext = buildLocaleContext;
exports.buildTimeList = buildTimeList;
exports.buildTranslator = buildTranslator;
exports.buttonEmits = buttonEmits;
exports.buttonGroupContextKey = buttonGroupContextKey;
exports.buttonNativeTypes = buttonNativeTypes;
exports.buttonProps = buttonProps;
exports.buttonTypes = buttonTypes;
exports.calendarEmits = calendarEmits;
exports.calendarProps = calendarProps;
exports.cardProps = cardProps;
exports.carouselContextKey = carouselContextKey;
exports.carouselEmits = carouselEmits;
exports.carouselItemProps = carouselItemProps;
exports.carouselProps = carouselProps;
exports.checkTagEmits = checkTagEmits;
exports.checkTagProps = checkTagProps;
exports.checkboxEmits = checkboxEmits;
exports.checkboxGroupContextKey = checkboxGroupContextKey;
exports.checkboxGroupEmits = checkboxGroupEmits;
exports.checkboxGroupProps = checkboxGroupProps;
exports.checkboxProps = checkboxProps;
exports.colProps = colProps;
exports.collapseContextKey = collapseContextKey;
exports.collapseEmits = collapseEmits;
exports.collapseItemProps = collapseItemProps;
exports.collapseProps = collapseProps;
exports.colorPickerContextKey = colorPickerContextKey;
exports.colorPickerEmits = colorPickerEmits;
exports.colorPickerProps = colorPickerProps;
exports.componentSizeMap = componentSizeMap;
exports.componentSizes = componentSizes;
exports.configProviderContextKey = configProviderContextKey;
exports.configProviderProps = configProviderProps;
exports.createModelToggleComposable = createModelToggleComposable;
exports.dateEquals = dateEquals;
exports.datePickTypes = datePickTypes;
exports.dayjs = dayjs;
exports["default"] = installer;
exports.defaultNamespace = defaultNamespace;
exports.descriptionProps = descriptionProps;
exports.dialogEmits = dialogEmits;
exports.dialogInjectionKey = dialogInjectionKey;
exports.dialogProps = dialogProps;
exports.dividerProps = dividerProps;
exports.drawerEmits = drawerEmits;
exports.drawerProps = drawerProps;
exports.dropdownItemProps = dropdownItemProps;
exports.dropdownMenuProps = dropdownMenuProps;
exports.dropdownProps = dropdownProps;
exports.elPaginationKey = elPaginationKey;
exports.emitChangeFn = emitChangeFn;
exports.emptyProps = emptyProps;
exports.extractDateFormat = extractDateFormat;
exports.extractTimeFormat = extractTimeFormat;
exports.formContextKey = formContextKey;
exports.formEmits = formEmits;
exports.formItemContextKey = formItemContextKey;
exports.formItemProps = formItemProps;
exports.formItemValidateStates = formItemValidateStates;
exports.formProps = formProps;
exports.formatter = formatter;
exports.genFileId = genFileId;
exports.getPositionDataWithUnit = getPositionDataWithUnit;
exports.iconProps = iconProps;
exports.imageEmits = imageEmits;
exports.imageProps = imageProps;
exports.imageViewerEmits = imageViewerEmits;
exports.imageViewerProps = imageViewerProps;
exports.inputEmits = inputEmits;
exports.inputNumberEmits = inputNumberEmits;
exports.inputNumberProps = inputNumberProps;
exports.inputProps = inputProps;
exports.install = install;
exports.linkEmits = linkEmits;
exports.linkProps = linkProps;
exports.makeInstaller = makeInstaller;
exports.makeList = makeList;
exports.menuEmits = menuEmits;
exports.menuItemEmits = menuItemEmits;
exports.menuItemGroupProps = menuItemGroupProps;
exports.menuItemProps = menuItemProps;
exports.menuProps = menuProps;
exports.messageConfig = messageConfig;
exports.messageDefaults = messageDefaults;
exports.messageEmits = messageEmits;
exports.messageProps = messageProps;
exports.messageTypes = messageTypes;
exports.notificationEmits = notificationEmits;
exports.notificationProps = notificationProps;
exports.notificationTypes = notificationTypes;
exports.overlayEmits = overlayEmits;
exports.overlayProps = overlayProps;
exports.pageHeaderEmits = pageHeaderEmits;
exports.pageHeaderProps = pageHeaderProps;
exports.paginationEmits = paginationEmits;
exports.paginationProps = paginationProps;
exports.parseDate = parseDate;
exports.popconfirmProps = popconfirmProps;
exports.popoverEmits = popoverEmits;
exports.popoverProps = popoverProps;
exports.popperArrowProps = popperArrowProps;
exports.popperContentEmits = popperContentEmits;
exports.popperContentProps = popperContentProps;
exports.popperCoreConfigProps = popperCoreConfigProps;
exports.popperProps = popperProps;
exports.popperTriggerProps = popperTriggerProps;
exports.progressProps = progressProps;
exports.provideGlobalConfig = provideGlobalConfig;
exports.radioButtonProps = radioButtonProps;
exports.radioEmits = radioEmits;
exports.radioGroupEmits = radioGroupEmits;
exports.radioGroupKey = radioGroupKey;
exports.radioGroupProps = radioGroupProps;
exports.radioProps = radioProps;
exports.radioPropsBase = radioPropsBase;
exports.rangeArr = rangeArr;
exports.rateEmits = rateEmits;
exports.rateProps = rateProps;
exports.renderThumbStyle = renderThumbStyle$1;
exports.resultProps = resultProps;
exports.roleTypes = roleTypes;
exports.rowContextKey = rowContextKey;
exports.rowProps = rowProps;
exports.scrollbarContextKey = scrollbarContextKey;
exports.scrollbarEmits = scrollbarEmits;
exports.scrollbarProps = scrollbarProps;
exports.selectGroupKey = selectGroupKey;
exports.selectKey = selectKey;
exports.selectV2InjectionKey = selectV2InjectionKey;
exports.skeletonItemProps = skeletonItemProps;
exports.skeletonProps = skeletonProps;
exports.sliderContextKey = sliderContextKey;
exports.sliderEmits = sliderEmits;
exports.sliderProps = sliderProps;
exports.spaceProps = spaceProps;
exports.stepProps = stepProps;
exports.stepsEmits = stepsEmits;
exports.stepsProps = stepsProps;
exports.subMenuProps = subMenuProps;
exports.switchEmits = switchEmits;
exports.switchProps = switchProps;
exports.tabBarProps = tabBarProps;
exports.tabNavEmits = tabNavEmits;
exports.tabNavProps = tabNavProps;
exports.tabPaneProps = tabPaneProps;
exports.tableV2Props = tableV2Props;
exports.tableV2RowProps = tableV2RowProps;
exports.tabsEmits = tabsEmits;
exports.tabsProps = tabsProps;
exports.tabsRootContextKey = tabsRootContextKey;
exports.tagEmits = tagEmits;
exports.tagProps = tagProps;
exports.thumbProps = thumbProps;
exports.timePickerDefaultProps = timePickerDefaultProps;
exports.timeUnits = timeUnits;
exports.timelineItemProps = timelineItemProps;
exports.tooltipEmits = tooltipEmits;
exports.tooltipV2ContentKey = tooltipV2ContentKey;
exports.tooltipV2RootKey = tooltipV2RootKey;
exports.transferCheckedChangeFn = transferCheckedChangeFn;
exports.transferEmits = transferEmits;
exports.transferProps = transferProps;
exports.translate = translate;
exports.uploadBaseProps = uploadBaseProps;
exports.uploadContentProps = uploadContentProps;
exports.uploadContextKey = uploadContextKey;
exports.uploadDraggerEmits = uploadDraggerEmits;
exports.uploadDraggerProps = uploadDraggerProps;
exports.uploadListEmits = uploadListEmits;
exports.uploadListProps = uploadListProps;
exports.uploadListTypes = uploadListTypes;
exports.uploadProps = uploadProps;
exports.useAttrs = useAttrs;
exports.useCascaderConfig = useCascaderConfig;
exports.useCursor = useCursor;
exports.useDelayedRender = useDelayedRender;
exports.useDelayedToggle = useDelayedToggle;
exports.useDelayedToggleProps = useDelayedToggleProps;
exports.useDeprecated = useDeprecated;
exports.useDialog = useDialog;
exports.useDisabled = useDisabled;
exports.useDraggable = useDraggable;
exports.useEscapeKeydown = useEscapeKeydown;
exports.useFloating = useFloating;
exports.useFloatingProps = useFloatingProps;
exports.useFocus = useFocus;
exports.useFormItem = useFormItem;
exports.useFormItemInputId = useFormItemInputId;
exports.useForwardRef = useForwardRef;
exports.useForwardRefDirective = useForwardRefDirective;
exports.useGlobalConfig = useGlobalConfig;
exports.useId = useId;
exports.useLocale = useLocale;
exports.useLockscreen = useLockscreen;
exports.useModal = useModal;
exports.useModelToggle = useModelToggle;
exports.useModelToggleEmits = useModelToggleEmits;
exports.useModelToggleProps = useModelToggleProps;
exports.useNamespace = useNamespace;
exports.useOrderedChildren = useOrderedChildren;
exports.usePopperArrowProps = usePopperArrowProps;
exports.usePopperContainer = usePopperContainer;
exports.usePopperContentEmits = usePopperContentEmits;
exports.usePopperContentProps = usePopperContentProps;
exports.usePopperCoreConfigProps = usePopperCoreConfigProps;
exports.usePopperProps = usePopperProps;
exports.usePopperTriggerProps = usePopperTriggerProps;
exports.usePreventGlobal = usePreventGlobal;
exports.useProp = useProp;
exports.useRestoreActive = useRestoreActive;
exports.useSameTarget = useSameTarget;
exports.useSize = useSize;
exports.useSizeProp = useSizeProp;
exports.useSpace = useSpace;
exports.useTeleport = useTeleport;
exports.useThrottleRender = useThrottleRender;
exports.useTimeout = useTimeout;
exports.useTooltipContentProps = useTooltipContentProps;
exports.useTooltipModelToggle = useTooltipModelToggle;
exports.useTooltipModelToggleEmits = useTooltipModelToggleEmits;
exports.useTooltipModelToggleProps = useTooltipModelToggleProps;
exports.useTooltipProps = useTooltipProps;
exports.useTooltipTriggerProps = useTooltipTriggerProps;
exports.useTransitionFallthrough = useTransitionFallthrough;
exports.useTransitionFallthroughEmits = useTransitionFallthroughEmits;
exports.useZIndex = useZIndex;
exports.vLoading = vLoading;
exports.vRepeatClick = vRepeatClick;
exports.valueEquals = valueEquals;
exports.version = version;
exports.virtualizedGridProps = virtualizedGridProps;
exports.virtualizedListProps = virtualizedListProps;
exports.virtualizedProps = virtualizedProps;
exports.virtualizedScrollbarProps = virtualizedScrollbarProps;
Object.defineProperty(exports, '__esModule', { value: true });
}));